diff --git a/.storybook/custom-element-manifests/ai.json b/.storybook/custom-element-manifests/ai.json index d9c5e41bd9f..e4f1e29a692 100644 --- a/.storybook/custom-element-manifests/ai.json +++ b/.storybook/custom-element-manifests/ai.json @@ -359,13 +359,21 @@ }, { "kind": "javascript-module", - "path": "dist/PromptInput.js", + "path": "dist/Input.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `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\"`", - "name": "PromptInput", + "description": "### Overview\n\nThe `ui5-ai-input` component extends the standard `ui5-input` with **AI Writing Assistant** capabilities.\n\n### Structure\n\nThe `ui5-ai-input` consists of the following main parts:\n\n- **Input Field** – Inherits all standard Input behaviors.\n- **AI Action Button** – Appears when focused or loading, providing access to AI-related actions or stopping generation.\n\nThe component automatically determines which elements to render based on its internal state:\n- The AI Button is only shown when there are available `actions`.\n- The version navigation appears only when `totalVersions > 1`.\n\n### Keyboard Support\n\n- **Shift + F4** — Opens the AI menu.\n- **Ctrl + Shift + Z / Y** — Navigates backward/forward between AI-generated versions.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-ai/dist/Input.js\";`", + "name": "Input", "slots": [ + { + "name": "actions", + "description": "Defines the items of the menu for the component.", + "_ui5type": { + "text": "Array" + }, + "_ui5privacy": "public" + }, { "name": "default", "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The ``, `` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.", @@ -382,10 +390,25 @@ }, "_ui5privacy": "public" }, + { + "name": "icon", + "description": "Defines the icon to be displayed in the component.", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "IIcon", + "package": "@ui5/webcomponents", + "module": "dist/Icon.js" + } + ] + }, + "_ui5privacy": "public" + }, { "name": "valueStateMessage", - "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.", - "_ui5since": "2.0.0", + "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.", + "_ui5since": "1.0.0-rc.6", "_ui5type": { "text": "Array" }, @@ -395,91 +418,114 @@ "members": [ { "kind": "field", - "name": "value", + "name": "currentVersion", "type": { - "text": "string" + "text": "number" }, - "default": "\"\"", - "description": "Defines the value of the component.", - "privacy": "public", - "_ui5since": "2.0.0" + "default": "0", + "description": "Indicates the index of the currently displayed version.", + "privacy": "public" }, { "kind": "field", - "name": "placeholder", + "name": "totalVersions", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.0.0" + "default": "0", + "description": "Indicates the total number of result versions available.\n\nWhen not set or set to 0, the versioning will be hidden.", + "privacy": "public" }, { "kind": "field", - "name": "label", + "name": "loading", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the label of the input field.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.0.0" + "default": "false", + "description": "Defines whether the AI Writing Assistant is currently loading.\n\nWhen `true`, indicates that an AI action is in progress.", + "privacy": "public" }, { "kind": "field", - "name": "showClearIcon", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the clear icon of the input will be shown.", - "privacy": "public", - "_ui5since": "2.0.0" + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "privacy": "public" }, { "kind": "field", - "name": "showExceededText", + "name": "placeholder", + "type": { + "text": "string | undefined" + }, + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "readonly", "type": { "text": "boolean" }, "default": "false", - "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.", - "privacy": "public", - "_ui5since": "2.0.0" + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "privacy": "public" }, { "kind": "field", - "name": "disabled", + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "description": "Defines whether the component is required.", "privacy": "public", - "_ui5since": "2.0.0" + "_ui5since": "1.0.0-rc.3" }, { "kind": "field", - "name": "readonly", + "name": "noTypeahead", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "description": "Defines whether the value will be autcompleted to match an item", "privacy": "public", - "_ui5since": "2.0.0" + "_ui5since": "1.4.0" }, { "kind": "field", - "name": "maxlength", + "name": "type", "type": { - "text": "number | undefined" + "text": "InputType", + "references": [ + { + "name": "InputType", + "package": "@ui5/webcomponents", + "module": "dist/types/InputType.js" + } + ] }, - "description": "Sets the maximum number of characters available in the input field.", - "default": "undefined", + "default": "\"Text\"", + "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.", + "privacy": "public" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", "privacy": "public", - "_ui5since": "2.0.0" + "_ui5formProperty": true, + "_ui5formEvents": "change,input" }, { "kind": "field", @@ -496,8 +542,17 @@ }, "default": "\"None\"", "description": "Defines the value state of the component.", - "privacy": "public", - "_ui5since": "2.0.0" + "privacy": "public" + }, + { + "kind": "field", + "name": "name", + "type": { + "text": "string | undefined" + }, + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", @@ -508,20 +563,157 @@ "default": "false", "description": "Defines whether the component should show suggestions, if such are present.", "privacy": "public" + }, + { + "kind": "field", + "name": "maxlength", + "type": { + "text": "number | undefined" + }, + "description": "Sets the maximum number of characters available in the input field.\n\n**Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.5" + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that label the input.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.9.0" + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that describe the input.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.9.0" + }, + { + "kind": "field", + "name": "showClearIcon", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the clear icon of the input will be shown.", + "privacy": "public", + "_ui5since": "1.2.0" + }, + { + "kind": "field", + "name": "open", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", + "privacy": "public", + "_ui5since": "2.0.0" } ], "events": [ { - "name": "submit", + "name": "button-click", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the input operation has finished by pressing Enter\nor AI button is clicked.", + "description": "Fired when the user selects the AI button.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false + }, + { + "name": "item-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when an item from the AI actions menu is clicked.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.0.0" + "_ui5Bubbles": false + }, + { + "name": "stop-generation", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user selects the \"Stop\" button to stop ongoing AI text generation.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + }, + { + "name": "version-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent", + "references": [ + { + "name": "InputVersionChangeEventDetail", + "package": "@ui5/webcomponents-ai", + "module": "dist/Input.js" + } + ] + }, + "description": "Fired when the user selects the version navigation buttons.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "backwards", + "_ui5privacy": "public", + "description": "Indicates if navigation is backwards (true) or forwards (false, default)" + } + ] + }, + { + "name": "change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the input operation has finished by pressing Enter or on focusout.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true }, { "name": "input", @@ -530,50 +722,367 @@ "text": "CustomEvent" }, "description": "Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true + }, + { + "name": "select", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when some text has been selected.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, "_ui5since": "2.0.0" }, { - "name": "change", + "name": "selection-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent", + "references": [ + { + "name": "InputSelectionChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Input.js" + } + ] + }, + "description": "Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.0.0", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "The previewed suggestion item." + } + ] + }, + { + "name": "open", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the input operation has finished by pressing Enter\nor on focusout.", + "description": "Fired when the suggestions picker is open.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, "_ui5since": "2.0.0" + }, + { + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the suggestions picker is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.0.0" } ], "attributes": [ { - "description": "Defines the value of the component.", - "name": "value", - "default": "\"\"", - "fieldName": "value", + "description": "Indicates the index of the currently displayed version.", + "name": "current-version", + "default": "0", + "fieldName": "currentVersion", "type": { - "text": "string" + "text": "number" } }, { - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", - "name": "placeholder", - "default": "undefined", - "fieldName": "placeholder", + "description": "Indicates the total number of result versions available.\n\nWhen not set or set to 0, the versioning will be hidden.", + "name": "total-versions", + "default": "0", + "fieldName": "totalVersions", "type": { - "text": "string | undefined" + "text": "number" } }, { - "description": "Defines the label of the input field.", - "name": "label", - "default": "undefined", - "fieldName": "label", + "description": "Defines whether the AI Writing Assistant is currently loading.\n\nWhen `true`, indicates that an AI action is in progress.", + "name": "loading", + "default": "false", + "fieldName": "loading", "type": { - "text": "string | undefined" + "text": "boolean" + } + } + ], + "superclass": { + "name": "Input", + "package": "@ui5/webcomponents", + "module": "dist/Input.js" + }, + "tagName": "ui5-ai-input", + "customElement": true, + "_ui5experimental": "The **@ui5/webcomponents-ai** package is under active development and considered experimental. Component APIs are subject to change.", + "_ui5since": "2.16.0", + "_ui5privacy": "public", + "cssParts": [ + { + "description": "Used to style the root DOM element of the Input component", + "name": "root" + }, + { + "description": "Used to style the native input element", + "name": "input" + }, + { + "description": "Used to style the clear icon, which can be pressed to clear user input text", + "name": "clear-icon" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Input", + "module": "dist/Input.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-ai-input", + "declaration": { + "name": "Input", + "module": "dist/Input.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/PromptInput.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `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\"`", + "name": "PromptInput", + "slots": [ + { + "name": "default", + "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The ``, `` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.", + "_ui5propertyName": "suggestionItems", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "IInputSuggestionItem", + "package": "@ui5/webcomponents", + "module": "dist/Input.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "valueStateMessage", + "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.", + "_ui5since": "2.0.0", + "_ui5type": { + "text": "Array" + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the value of the component.", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "placeholder", + "type": { + "text": "string | undefined" + }, + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "label", + "type": { + "text": "string | undefined" + }, + "description": "Defines the label of the input field.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "showClearIcon", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the clear icon of the input will be shown.", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "showExceededText", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "readonly", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "maxlength", + "type": { + "text": "number | undefined" + }, + "description": "Sets the maximum number of characters available in the input field.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "valueState", + "type": { + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "showSuggestions", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component should show suggestions, if such are present.", + "privacy": "public" + } + ], + "events": [ + { + "name": "submit", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the input operation has finished by pressing Enter\nor AI button is clicked.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.0.0" + }, + { + "name": "input", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.0.0" + }, + { + "name": "change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the input operation has finished by pressing Enter\nor on focusout.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.0.0" + } + ], + "attributes": [ + { + "description": "Defines the value of the component.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + } + }, + { + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "name": "placeholder", + "default": "undefined", + "fieldName": "placeholder", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the label of the input field.", + "name": "label", + "default": "undefined", + "fieldName": "label", + "type": { + "text": "string | undefined" } }, { @@ -669,6 +1178,475 @@ } } ] + }, + { + "kind": "javascript-module", + "path": "dist/TextArea.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-ai-textarea` component extends the standard TextArea with Writing Assistant capabilities.\nIt provides AI-powered text generation, editing suggestions, and version management functionality.\n\n### Structure\nThe `ui5-ai-textarea` consists of the following elements:\n- TextArea: The main text input area with all standard textarea functionality\n- WritingAssistant: Dedicated toolbar containing:\n - Versioning: A component with left/right navigation buttons and a label for browsing AI-generated versions\n - AI Button: Opens a menu that can be extended with custom AI generation options through slotting\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-ai/dist/TextArea.js\";`", + "name": "TextArea", + "slots": [ + { + "description": "Defines a slot for `ui5-menu` integration. This slot allows you to pass a `ui5-menu` instance that will be associated with the assistant.", + "name": "menu", + "_ui5privacy": "public", + "_ui5type": { + "text": "HTMLElement" + } + }, + { + "name": "valueStateMessage", + "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n \n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed if the component has\n`valueState` of type `Information`, `Critical` or `Negative`.", + "_ui5since": "1.0.0-rc.7", + "_ui5type": { + "text": "Array" + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "loading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the `ui5-ai-textarea` is currently in a loading(processing) state.", + "privacy": "public" + }, + { + "kind": "field", + "name": "promptDescription", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the prompt description of the current action.", + "privacy": "public" + }, + { + "kind": "field", + "name": "currentVersion", + "type": { + "text": "number" + }, + "default": "0", + "description": "Indicates the index of the currently displayed version.", + "privacy": "public" + }, + { + "kind": "field", + "name": "totalVersions", + "type": { + "text": "number" + }, + "default": "0", + "description": "Indicates the total number of result versions available.\n\nNotes:\nVersioning is hidden if the value is `0`", + "privacy": "public" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the value of the component.", + "privacy": "public", + "_ui5formProperty": true, + "_ui5formEvents": "change,input" + }, + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether the user can interact with the component or not.\n\n**Note:** A disabled component is completely noninteractive.", + "privacy": "public" + }, + { + "kind": "field", + "name": "readonly", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "privacy": "public" + }, + { + "kind": "field", + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is required.", + "privacy": "public", + "_ui5since": "1.0.0-rc.3" + }, + { + "kind": "field", + "name": "placeholder", + "type": { + "text": "string | undefined" + }, + "description": "Defines a short hint intended to aid the user with data entry when the component has no value.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "valueState", + "type": { + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the value state of the component.\n\n**Note:** If `maxlength` property is set,\nthe component turns into \"Critical\" state once the characters exceeds the limit.\nIn this case, only the \"Negative\" state is considered and can be applied.", + "privacy": "public", + "_ui5since": "1.0.0-rc.7" + }, + { + "kind": "field", + "name": "rows", + "type": { + "text": "number" + }, + "default": "0", + "description": "Defines the number of visible text rows for the component.\n\n**Notes:**\n\n- If the `growing` property is enabled, this property defines the minimum rows to be displayed\nin the textarea.\n- The CSS `height` property wins over the `rows` property, if both are set.", + "privacy": "public" + }, + { + "kind": "field", + "name": "maxlength", + "type": { + "text": "number | undefined" + }, + "description": "Defines the maximum number of characters that the `value` can have.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "showExceededText", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.", + "privacy": "public" + }, + { + "kind": "field", + "name": "growing", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Enables the component to automatically grow and shrink dynamically with its content.", + "privacy": "public" + }, + { + "kind": "field", + "name": "growingMaxRows", + "type": { + "text": "number" + }, + "default": "0", + "description": "Defines the maximum number of rows that the component can grow.", + "privacy": "public" + }, + { + "kind": "field", + "name": "name", + "type": { + "text": "string | undefined" + }, + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that label the textarea.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.16.0" + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that describe the textarea.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.16.0" + } + ], + "events": [ + { + "name": "version-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent", + "references": [ + { + "name": "TextAreaVersionChangeEventDetail", + "package": "@ui5/webcomponents-ai", + "module": "dist/TextArea.js" + } + ] + }, + "description": "Fired when the user clicks on version navigation buttons.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "backwards", + "_ui5privacy": "public", + "description": "Indicates if navigation is backwards (true) or forwards (false, default)." + } + ] + }, + { + "name": "stop-generation", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user requests to stop AI text generation.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + }, + { + "name": "change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the text has changed and the focus leaves the component.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + }, + { + "name": "input", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent", + "references": [ + { + "name": "TextAreaInputEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/TextArea.js" + } + ] + }, + "description": "Fired when the value of the component changes at each keystroke or when\nsomething is pasted.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "1.0.0-rc.5", + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "escapePressed", + "_ui5privacy": "public", + "description": "Indicates whether the Escape key was pressed, which triggers a revert to the previous value" + } + ] + }, + { + "name": "select", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when some text has been selected.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.23.0" + }, + { + "name": "scroll", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when textarea is scrolled.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.23.0" + } + ], + "attributes": [ + { + "description": "Defines whether the `ui5-ai-textarea` is currently in a loading(processing) state.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the prompt description of the current action.", + "name": "prompt-description", + "default": "\"\"", + "fieldName": "promptDescription", + "type": { + "text": "string" + } + }, + { + "description": "Indicates the index of the currently displayed version.", + "name": "current-version", + "default": "0", + "fieldName": "currentVersion", + "type": { + "text": "number" + } + }, + { + "description": "Indicates the total number of result versions available.\n\nNotes:\nVersioning is hidden if the value is `0`", + "name": "total-versions", + "default": "0", + "fieldName": "totalVersions", + "type": { + "text": "number" + } + } + ], + "superclass": { + "name": "TextArea", + "package": "@ui5/webcomponents", + "module": "dist/TextArea.js" + }, + "tagName": "ui5-ai-textarea", + "customElement": true, + "_ui5experimental": "The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.", + "_ui5since": "2.16.0", + "_ui5privacy": "public", + "cssParts": [ + { + "description": "Used to style the native textarea", + "name": "textarea" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TextArea", + "module": "dist/TextArea.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-ai-textarea", + "declaration": { + "name": "TextArea", + "module": "dist/TextArea.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/ToolbarLabel.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ToolbarLabel", + "module": "dist/ToolbarLabel.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/Versioning.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Versioning", + "module": "dist/Versioning.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/WritingAssistant.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "WritingAssistant", + "module": "dist/WritingAssistant.js" + } + } + ] } ] } diff --git a/.storybook/custom-element-manifests/fiori.json b/.storybook/custom-element-manifests/fiori.json index 78265833dfd..f1d40ac4a6a 100644 --- a/.storybook/custom-element-manifests/fiori.json +++ b/.storybook/custom-element-manifests/fiori.json @@ -4,126 +4,161 @@ "modules": [ { "kind": "javascript-module", - "path": "dist/fcl-utils/FCLLayout.js", + "path": "dist/Assets-fetch.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", - "path": "dist/illustrations/AllIllustrations.js", + "path": "dist/Assets-node.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", - "path": "dist/types/FCLLayout.js", + "path": "dist/Assets.js", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "dist/BarcodeScannerDialog.js", "declarations": [ { - "kind": "enum", - "name": "FCLLayout", - "description": "Different types of FCLLayout.", - "_ui5privacy": "public", - "members": [ - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The layout will display 1 column.", - "default": "OneColumn", - "name": "OneColumn", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\nDesktop: Defaults to 67 - 33 - -- percent widths of columns. Start (expanded) and Mid columns are displayed.\nTablet: Defaults to 67 - 33 - -- percent widths of columns. Start (expanded) and Mid columns are displayed.\nPhone: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed\n\nUse to display both a list and a detail page when the user should focus on the list page.", - "default": "TwoColumnsStartExpanded", - "name": "TwoColumnsStartExpanded", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Desktop: Defaults to 33 - 67 - -- percent widths of columns. Start and Mid (expanded) columns are displayed\nTablet: Defaults to 33 - 67 - -- percent widths of columns. Start and Mid (expanded) columns are displayed\nPhone: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed\n\nUse to display both a list and a detail page when the user should focus on the detail page.", - "default": "TwoColumnsMidExpanded", - "name": "TwoColumnsMidExpanded", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Desktop: Defaults to 25 - 50 - 25 percent widths of columns. Start, Mid (expanded) and End columns are displayed\nTablet: Defaults to 0 - 67 - 33 percent widths of columns. Mid (expanded) and End columns are displayed, Start is accessible by dragging the columns-separator\nPhone: Fixed -- -- 100 percent widths of columns, only the End column is displayed\n\nUse to display all three pages (list, detail, detail-detail) when the user should focus on the detail.", - "default": "ThreeColumnsMidExpanded", - "name": "ThreeColumnsMidExpanded", - "readonly": true - }, + "kind": "class", + "description": "### Overview\n\nThe `BarcodeScannerDialog` component provides barcode scanning functionality for all devices that support the `MediaDevices.getUserMedia()` native API.\nOpening the dialog launches the device camera and scans for known barcode formats.\n\nA `scanSuccess` event fires whenever a barcode is identified\nand a `scanError` event fires when the scan failed (for example, due to missing permisions).\n\nInternally, the component uses the zxing-js/library third party OSS.\n\nFor a list of supported barcode formats, see the [zxing-js/library](https://github.com/zxing-js/library) documentation.", + "name": "BarcodeScannerDialog", + "slots": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Desktop: Defaults to 25 - 25 - 50 percent widths of columns. Start, Mid and End (expanded) columns are displayed\nTablet: Defaults to 0 - 33 - 67 percent widths of columns. Mid and End (expanded) columns are displayed, Start is accessible by dragging the columns-separator\nPhone: Fixed -- -- 100 percent widths of columns (only the End column is displayed)\n\nUse to display all three pages (list, detail, detail-detail) when the user should focus on the detail-detail.", - "default": "ThreeColumnsEndExpanded", - "name": "ThreeColumnsEndExpanded", - "readonly": true + "name": "header", + "description": "Defines the header HTML Element.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.", + "_ui5since": "2.4.0", + "_ui5type": { + "text": "Array" + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Desktop: Defaults to 67 - 33 - 0 percent widths of columns. Start (expanded) and Mid columns are displayed, End is accessible by dragging the columns-separator\nTablet: Defaults to 67 - 33 - 0 percent widths of columns. Start (expanded) and Mid columns are displayed, End is accessible by dragging the columns-separator\nPhone: Fixed -- -- 100 percent widths of columns, only the End column is displayed\n\nUse to display the list and detail pages when the user should focus on the list.\nThe detail-detail is still loaded and easily accessible by dragging the columns-separator", - "default": "ThreeColumnsStartExpandedEndHidden", - "name": "ThreeColumnsStartExpandedEndHidden", - "readonly": true - }, + "name": "footer", + "description": "Defines the footer HTML Element.\n\n**Note:** When you provide custom content for the `footer` slot, the default close button is not rendered.\nThis means you need to include your own mechanism within the custom `footer` to close the dialog,\nsuch as a button with an event listener that closes the dialog.\n\n**Note:** If the `footer` slot is not provided, a default footer with a close button is rendered automatically,\nallowing users to close the dialog without any additional implementation.", + "_ui5since": "2.4.0", + "_ui5type": { + "text": "Array" + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "static": true, + "name": "open", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether the dialog is open.", "privacy": "public", - "description": "Desktop: Defaults to 33 - 67 - 0 percent widths of columns. Start and Mid (expanded) columns are displayed, End is accessible by dragging the columns-separator\nTablet: Defaults to 33 - 67 - 0 percent widths of columns. Start and Mid (expanded) columns are displayed, End is accessible by dragging the columns-separator\nPhone: Fixed -- -- 100 percent widths of columns, only the End column is displayed\n\nUse to display the list and detail pages when the user should focus on the detail.\nThe detail-detail is still loaded and easily accessible by dragging the columns-separator", - "default": "ThreeColumnsMidExpandedEndHidden", - "name": "ThreeColumnsMidExpandedEndHidden", - "readonly": true - }, + "_ui5since": "1.24.0" + } + ], + "events": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Desktop: Defaults to 0 - 67 - 33 percent widths of columns. Start is hidden, Mid (expanded) and End columns are displayed.\nTablet: Defaults to 0 - 67 - 33 percent widths of columns. Start is hidden, Mid (expanded) and End columns are displayed.\nPhone: Fixed -- 100 percent width of the Mid column, only the Mid column is displayed.\n\nUse to display the Mid and End columns while the Start column is hidden.", - "default": "ThreeColumnsStartHiddenMidExpanded", - "name": "ThreeColumnsStartHiddenMidExpanded", - "readonly": true + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user closes the component.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.0.0" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Desktop: Defaults to 0 - 33 - 67 percent widths of columns. Start is hidden, Mid and End (expanded) columns are displayed.\nTablet: Defaults to 0 - 33 - 67 percent widths of columns. Start is hidden, Mid and End (expanded) columns are displayed.\nPhone: Fixed -- 100 percent width of the End column, only the End column is displayed.\n\nUse to display the Mid column and expanded End column while the grip of the separator is not visible.", - "default": "ThreeColumnsStartHiddenEndExpanded", - "name": "ThreeColumnsStartHiddenEndExpanded", - "readonly": true + "name": "scan-success", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent", + "references": [ + { + "name": "BarcodeScannerDialogScanSuccessEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/BarcodeScannerDialog.js" + } + ] + }, + "description": "Fires when the scan is completed successfuuly.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "string" + }, + "name": "text", + "_ui5privacy": "public", + "description": "the scan result as string" + }, + { + "type": { + "text": "Object" + }, + "name": "rawBytes", + "_ui5privacy": "public", + "description": "the scan result as a Uint8Array" + } + ] }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Desktop: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed\nTablet: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed\nPhone: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed\n\nUse to display a detail page only, when the user should focus entirely on it.", - "default": "MidColumnFullScreen", - "name": "MidColumnFullScreen", - "readonly": true - }, + "name": "scan-error", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent", + "references": [ + { + "name": "BarcodeScannerDialogScanErrorEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/BarcodeScannerDialog.js" + } + ] + }, + "description": "Fires when the scan fails with error.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "string" + }, + "name": "message", + "_ui5privacy": "public", + "description": "the error message" + } + ] + } + ], + "attributes": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Desktop: Fixed -- -- 100 percent widths of columns, only the End column is displayed\nTablet: Fixed -- -- 100 percent widths of columns, only the End column is displayed\nPhone: Fixed -- -- 100 percent widths of columns, only the End column is displayed\n\nUse to display a detail-detail page only, when the user should focus entirely on it.", - "default": "EndColumnFullScreen", - "name": "EndColumnFullScreen", - "readonly": true + "description": "Indicates whether the dialog is open.", + "name": "open", + "default": "false", + "fieldName": "open", + "type": { + "text": "boolean" + } } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-barcode-scanner-dialog", + "customElement": true, + "_ui5since": "1.0.0-rc.15", + "_ui5privacy": "public" } ], "exports": [ @@ -131,118 +166,204 @@ "kind": "js", "name": "default", "declaration": { - "name": "FCLLayout", - "module": "dist/types/FCLLayout.js" + "name": "BarcodeScannerDialog", + "module": "dist/BarcodeScannerDialog.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-barcode-scanner-dialog", + "declaration": { + "name": "BarcodeScannerDialog", + "module": "dist/BarcodeScannerDialog.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/IllustrationMessageDesign.js", + "path": "dist/DynamicPage.js", "declarations": [ { - "kind": "enum", - "name": "IllustrationMessageDesign", - "description": "Different types of IllustrationMessageDesign.", - "_ui5privacy": "public", - "_ui5since": "2.0.0", - "members": [ + "kind": "class", + "description": "### Overview\n\nA layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.\n\nThe component consist of several components:\n\n- `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`.\n- `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.\n- `Content area` - a generic container, which can have a single UI5 layout.\n- `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.\n\n### Usage\n\nUse the `DynamicPage` if you need to have a title, that is always visible\nand a header, that has configurable Expanding/Snapping functionality.\nIf you don't need the Expanding/Snapping functionality it is better to use the\n`ui5-page` as a lighter component.\n\nThe app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height),\nor content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user\nscroll through the content.\n\n## Notes:\n\n- Snapping of the `DynamicPageTitle` is not supported in the following case:\n - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.\n\n### Responsive Behavior\n\nDynamic page web component implements the responsive paddings design.\n\n### Keyboard Handling\n\n\n### Basic Navigation\n\n- [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated.\nIf focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header).\nIf focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).\n\n### Fast Navigation\n- This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up`.\nIn order to use this functionality, you need to import the following module:\n\n- `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/DynamicPage.js\";`", + "name": "DynamicPage", + "cssParts": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Automatically decides the Illustration size (Base, Dot, Spot,\nDialog, or Scene) depending on the IllustratedMessage container width.\n\n**Note:** `Auto` is the only option where the illustration size is changed according to\nthe available container width. If any other `IllustratedMessageSize` is chosen, it remains\nuntil changed by the app developer.", - "default": "Auto", - "name": "Auto", - "readonly": true + "description": "Used to style the content of the component", + "name": "content" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Base `Illustration` size (XS breakpoint). Suitable for cards (two columns).\n\n**Note:** When `Base` is in use, no illustration is displayed.", - "default": "Base", - "name": "Base", - "readonly": true + "description": "Used to style the fit content container of the component.", + "name": "fit-content" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Dot Illustration size (XS breakpoint). Suitable for table rows.", - "default": "Dot", - "deprecated": "Since 2.10.0, use ExtraSmall instead", - "name": "Dot", - "readonly": true + "description": "Used to style the footer of the component", + "name": "footer" + } + ], + "slots": [ + { + "name": "default", + "description": "Defines the content of the Dynamic Page.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array" + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Spot Illustration size (S breakpoint). Suitable for cards (four columns).", - "default": "Spot", - "deprecated": "Since 2.10.0, use Small instead", - "name": "Spot", - "readonly": true + "name": "titleArea", + "description": "Defines the title HTML Element.", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "DynamicPageTitle", + "package": "@ui5/webcomponents-fiori", + "module": "dist/DynamicPageTitle.js" + } + ] + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Dialog `Illustration` size (M breakpoint). Suitable for dialogs.", - "default": "Dialog", - "deprecated": "Since 2.10.0, use Medium instead", - "name": "Dialog", - "readonly": true + "name": "headerArea", + "description": "Defines the header HTML Element.", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "DynamicPageHeader", + "package": "@ui5/webcomponents-fiori", + "module": "dist/DynamicPageHeader.js" + } + ] + }, + "_ui5privacy": "public" }, + { + "name": "footerArea", + "description": "Defines the footer HTML Element.", + "_ui5type": { + "text": "Array" + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "Scene `Illustration` size (L breakpoint). Suitable for a `Page` or a table.", - "default": "Scene", - "deprecated": "Since 2.10.0, use Large instead", - "name": "Scene", - "readonly": true + "name": "hidePinButton", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the pin button is hidden.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "ExtraSmall Illustration size (XS breakpoint). Suitable for table rows.", - "default": "ExtraSmall", - "name": "ExtraSmall", - "readonly": true + "name": "headerPinned", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the header is pinned.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Small Illustration size (S breakpoint). Suitable for cards (four columns).", - "default": "Small", - "name": "Small", - "readonly": true + "name": "showFooter", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the footer is shown.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Medium `Illustration` size (M breakpoint). Suitable for dialogs.", - "default": "Medium", - "name": "Medium", - "readonly": true + "name": "headerSnapped", + "type": { + "text": "boolean" + }, + "description": "Defines if the header is snapped.", + "default": "false", + "privacy": "public" + } + ], + "events": [ + { + "name": "pin-button-toggle", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the pin header button is toggled.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Large `Illustration` size (L breakpoint). Suitable for a `Page` or a table.", - "default": "Large", - "name": "Large", - "readonly": true + "name": "title-toggle", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the expand/collapse area of the title is toggled.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true } - ] + ], + "attributes": [ + { + "description": "Defines if the pin button is hidden.", + "name": "hide-pin-button", + "default": "false", + "fieldName": "hidePinButton", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines if the header is pinned.", + "name": "header-pinned", + "default": "false", + "fieldName": "headerPinned", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines if the footer is shown.", + "name": "show-footer", + "default": "false", + "fieldName": "showFooter", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines if the header is snapped.", + "name": "header-snapped", + "default": "false", + "fieldName": "headerSnapped", + "type": { + "text": "any" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-dynamic-page", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public" } ], "exports": [ @@ -250,1124 +371,1846 @@ "kind": "js", "name": "default", "declaration": { - "name": "IllustrationMessageDesign", - "module": "dist/types/IllustrationMessageDesign.js" + "name": "DynamicPage", + "module": "dist/DynamicPage.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-dynamic-page", + "declaration": { + "name": "DynamicPage", + "module": "dist/DynamicPage.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/IllustrationMessageType.js", + "path": "dist/DynamicPageHeader.js", "declarations": [ { - "kind": "enum", - "name": "IllustrationMessageType", - "description": "Different illustration types of Illustrated Message.", - "_ui5privacy": "public", - "members": [ - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Achievement\" illustration type.", - "default": "Achievement", - "name": "Achievement", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Adding Columns\" illustration type.", - "default": "AddingColumns", - "name": "AddingColumns", - "readonly": true - }, + "kind": "class", + "description": "Header of the DynamicPage.\n\n### Overview\n\nThe DynamicPageHeader `ui5-dynamic-page-header` is part of the DynamicPage family\nand is used to serve as header of the `DynamicPage`.\n\n### Usage\n\nThe `DynamicPageHeader` can hold any layout control and has two states - expanded\nand collapsed (snapped). The switching between these states happens when:\n- the user scrolls below its bottom margin\n- the user clicks on the `DynamicPageTitle`\n- through the `DynamicPage` property `headerSnapped`\n\n### Responsive Behavior\n\nThe responsive behavior of the `DynamicPageHeader` depends on the behavior of the\ncontent that is displayed.\n\n### Accessibility\n\nThe `DynamicPageHeader` provides an accessible label for the header region.", + "name": "DynamicPageHeader", + "slots": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Add People To Calendar\" illustration type.", - "default": "AddPeopleToCalendar", - "name": "AddPeopleToCalendar", - "readonly": true - }, + "name": "default", + "description": "Defines the content of the Dynamic Page Header.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array" + }, + "_ui5privacy": "public" + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-dynamic-page-header", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public", + "members": [] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "DynamicPageHeader", + "module": "dist/DynamicPageHeader.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-dynamic-page-header", + "declaration": { + "name": "DynamicPageHeader", + "module": "dist/DynamicPageHeader.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/DynamicPageHeaderActions.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "DynamicPageHeaderActions", + "module": "dist/DynamicPageHeaderActions.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/DynamicPageTitle.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nTitle of the `DynamicPage`.\n\nThe `DynamicPageTitle` component is part of the `DynamicPage`\nfamily and is used to serve as title of the `DynamicPage`.\n\n### Usage\n\nThe `DynamicPageTitle` can hold any component and displays the most important\ninformation regarding the object that will always remain visible while scrolling.\n\n**Note:** The `actions` slot accepts any UI5 web component, but it's\nrecommended to use `ui5-toolbar`.\n\nThe user can switch between the expanded/collapsed states of the\n`DynamicPage` by clicking on the `DynamicPageTitle`\nor by using the expand/collapse visual indicators, positioned at the bottom of the\n`DynamicPageTitle` and the `DynamicPageHeader` inside `ui5-dynamic-page-header-actions`.\n\n### Responsive Behavior\n\nThe responsive behavior of the `DynamicPageTitle` depends on the behavior of the\ncontent that is displayed.", + "name": "DynamicPageTitle", + "slots": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Before Search\" illustration type.", - "default": "BeforeSearch", - "name": "BeforeSearch", - "readonly": true + "name": "heading", + "description": "Defines the content of the Heading of the Dynamic Page.\n\nThe font size of the title within the `heading` slot can be adjusted to the recommended values using the following CSS variables:\n\n**Expanded:** `var(--sapObjectHeader_Title_FontSize)`\n\n**Collapsed:** `var(--sapObjectHeader_Title_SnappedFontSize)`", + "_ui5type": { + "text": "Array" + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Drag Files To Upload\" illustration type.", - "default": "DragFilesToUpload", - "name": "DragFilesToUpload", - "readonly": true + "name": "snappedHeading", + "description": "Defines the heading that is shown only when the header is snapped.", + "_ui5type": { + "text": "Array" + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Filtering Columns\" illustration type.", - "default": "FilteringColumns", - "name": "FilteringColumns", - "readonly": true + "name": "snappedTitleOnMobile", + "description": "Defines the content of the snapped title on mobile devices.\n\nThis slot is displayed only when the `DynamicPageTitle` is in the snapped state on mobile devices.\nIt should be used to provide a simplified, single-line title that takes up less space on smaller screens.\n\n**Note:**\n- The content set in this slot **overrides** all other content set in the `DynamicPageTitle` slots when displayed.\n- The slot is intended for a single `ui5-title` component.", + "_ui5since": "2.3.0", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "Title", + "package": "@ui5/webcomponents", + "module": "dist/Title.js" + } + ] + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Grouping Columns\" illustration type.", - "default": "GroupingColumns", - "name": "GroupingColumns", - "readonly": true + "name": "actionsBar", + "description": "Defines the bar with actions in the Dynamic page title.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"New Mail\" illustration type.", - "default": "NewMail", - "name": "NewMail", - "readonly": true + "name": "navigationBar", + "description": "Defines the bar with navigation actions in the Dynamic page title.", + "_ui5type": { + "text": "Array<Toolbar>", + "references": [ + { + "name": "Toolbar", + "package": "@ui5/webcomponents", + "module": "dist/Toolbar.js" + } + ] + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"No Activities\" illustration type.", - "default": "NoActivities", - "name": "NoActivities", - "readonly": true + "name": "default", + "description": "Defines the content of the Dynamic page title.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"No Columns Set\" illustration type.", - "default": "NoColumnsSet", - "name": "NoColumnsSet", - "readonly": true + "name": "subheading", + "description": "Defines the content of the title that is shown only when the header is not snapped.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"No Data\" illustration type.", - "default": "NoData", - "name": "NoData", - "readonly": true + "name": "snappedSubheading", + "description": "Defines the content of the title that is shown only when the header is snapped.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"No Email\" illustration type.", - "default": "NoMail", - "name": "NoMail", - "readonly": true + "name": "breadcrumbs", + "description": "Defines the content of the breadcrumbs inside Dynamic Page Title.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-dynamic-page-title", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public", + "members": [] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "DynamicPageTitle", + "module": "dist/DynamicPageTitle.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-dynamic-page-title", + "declaration": { + "name": "DynamicPageTitle", + "module": "dist/DynamicPageTitle.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/DynamicSideContent.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe DynamicSideContent (`ui5-dynamic-side-content`) is a layout component that allows additional content\nto be displayed in a way that flexibly adapts to different screen sizes. The side\ncontent appears in a container next to or directly below the main content\n(it doesn't overlay). When the side content is triggered, the main content becomes\nnarrower (if appearing side-by-side). The side content contains a separate scrollbar\nwhen appearing next to the main content.\n\n### Usage\n\n*When to use?*\n\nUse this component if you want to display relevant information that is not critical\nfor users to complete a task. Users should have access to all the key functions and\ncritical information in the app even if they do not see the side content. This is\nimportant because on smaller screen sizes it may be difficult to display the side\ncontent in a way that is easily accessible for the user.\n\n*When not to use?*\n\nDon't use it if you want to display navigation or critical information that prevents\nusers from completing a task when they have no access to the side content.\n\n### Responsive Behavior\n\nScreen width \\> 1440px\n\n- Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px\neach).\n- If the application defines a trigger, the side content can be hidden.\n\nScreen width \\<\\= 1440px and \\> 1024px\n\n- Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of\n320px each). If the side content width falls below 320 px, it automatically slides\nunder the main content, unless the app development team specifies that it should\ndisappear.\n\nScreen width \\<\\= 1024px and \\> 720px\n\n- The side content ratio is fixed to 340px, and the main content takes the rest\nof the width. Only if the `sideContentFallDown` is set to `OnMinimumWidth`\nand screen width is \\<\\= 960px and \\> 720px the side content falls below the main content.\n\nScreen width \\<\\= 720px (for example on a mobile device)\n\n- In this case, the side content automatically disappears from the screen (unless\nspecified to stay under the content by setting of `sideContentVisibility`\nproperty to `AlwaysShow`) and can be triggered from a pre-set trigger\n(specified within the app). When the side content is triggered, it replaces the main\ncontent. We recommend that you always place the trigger for the side content in the\nsame location, such as in the app footer.\n\nA special case allows switching the comparison mode between the main and side content.\nIn this case, the screen is split into 50:50 percent for main vs. side content. The\nresponsive behavior of the equal split is the same as in the standard view - the\nside content disappears on screen widths of less than 720 px and can only be\nviewed by triggering it.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/DynamicSideContent.js\";`", + "name": "DynamicSideContent", + "slots": [ + { + "description": "Defines the main content.", + "name": "default", + "_ui5privacy": "public", + "_ui5type": { + "text": "Array<HTMLElement>" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"No Email v1\" illustration type.", - "default": "NoMail_v1", - "deprecated": "Deprecated as of version 2.11.0, use NoMail instead.", - "name": "NoMail_v1", - "readonly": true - }, + "name": "sideContent", + "description": "Defines the side content.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"No Entries\" illustration type.", - "default": "NoEntries", - "name": "NoEntries", - "readonly": true + "name": "hideMainContent", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the visibility of the main content.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"No Notifications\" illustration type.", - "default": "NoNotifications", - "name": "NoNotifications", - "readonly": true + "name": "hideSideContent", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the visibility of the side content.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"No Saved Items\" illustration type.", - "default": "NoSavedItems", - "name": "NoSavedItems", - "readonly": true + "name": "sideContentPosition", + "type": { + "text": "SideContentPosition", + "references": [ + { + "name": "SideContentPosition", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/SideContentPosition.js" + } + ] + }, + "default": "\"End\"", + "description": "Defines whether the side content is positioned before the main content (left side\nin LTR mode), or after the the main content (right side in LTR mode).", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"No Saved Items v1\" illustration type.", - "default": "NoSavedItems_v1", - "deprecated": "Deprecated as of version 2.11.0, use NoSavedItems instead.", - "name": "NoSavedItems_v1", - "readonly": true + "name": "sideContentVisibility", + "type": { + "text": "SideContentVisibility", + "references": [ + { + "name": "SideContentVisibility", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/SideContentVisibility.js" + } + ] + }, + "default": "\"ShowAboveS\"", + "description": "Defines on which breakpoints the side content is visible.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"No Search Results\" illustration type.", - "default": "NoSearchResults", - "name": "NoSearchResults", - "readonly": true + "name": "sideContentFallDown", + "type": { + "text": "SideContentFallDown", + "references": [ + { + "name": "SideContentFallDown", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/SideContentFallDown.js" + } + ] + }, + "default": "\"OnMinimumWidth\"", + "description": "Defines on which breakpoints the side content falls down below the main content.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"No Tasks\" illustration type.", - "default": "NoTasks", - "name": "NoTasks", - "readonly": true + "name": "equalSplit", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is in equal split mode. In this mode, the side and\nthe main content take 50:50 percent of the container on all screen sizes\nexcept for phone, where the main and side contents are switching visibility\nusing the toggle method.", + "privacy": "public" }, { "kind": "field", - "static": true, + "name": "accessibilityAttributes", + "type": { + "text": "DynamicSideContentAccessibilityAttributes", + "references": [ + { + "name": "DynamicSideContentAccessibilityAttributes", + "package": "@ui5/webcomponents-fiori", + "module": "dist/DynamicSideContent.js" + } + ] + }, + "default": "{}", + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.\n - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.", "privacy": "public", - "description": "\"No Tasks v1\" illustration type.", - "default": "NoTasks_v1", - "deprecated": "Deprecated as of version 2.11.0, use NoTasks instead.", - "name": "NoTasks_v1", - "readonly": true + "_ui5since": "2.6.0" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"No Dimensions Set\" illustration type.", - "default": "NoDimensionsSet", - "deprecated": "Deprecated as of version 2.11.0, use NoChartData instead.", - "name": "NoDimensionsSet", - "readonly": true - }, + "kind": "method", + "name": "toggleContents", + "return": { + "type": { + "text": "void" + } + }, + "description": "Toggles visibility of main and side contents on S screen size (mobile device).", + "privacy": "public" + } + ], + "events": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Unable To Load\" illustration type.", - "default": "UnableToLoad", - "name": "UnableToLoad", - "readonly": true + "name": "layout-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<DynamicSideContentLayoutChangeEventDetail>", + "references": [ + { + "name": "DynamicSideContentLayoutChangeEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/DynamicSideContent.js" + } + ] + }, + "description": "Fires when the current breakpoint has been changed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "string" + }, + "name": "currentBreakpoint", + "_ui5privacy": "public", + "description": "the current breakpoint." + }, + { + "type": { + "text": "string | undefined" + }, + "name": "previousBreakpoint", + "_ui5privacy": "public", + "description": "the breakpoint that was active before change to current breakpoint." + }, + { + "type": { + "text": "boolean" + }, + "name": "mainContentVisible", + "_ui5privacy": "public", + "description": "visibility of the main content." + }, + { + "type": { + "text": "boolean" + }, + "name": "sideContentVisible", + "_ui5privacy": "public", + "description": "visibility of the side content." + } + ] + } + ], + "attributes": [ + { + "description": "Defines the visibility of the main content.", + "name": "hide-main-content", + "default": "false", + "fieldName": "hideMainContent", + "type": { + "text": "boolean" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Unable To Load Image\" illustration type.", - "default": "UnableToLoadImage", - "name": "UnableToLoadImage", - "readonly": true + "description": "Defines the visibility of the side content.", + "name": "hide-side-content", + "default": "false", + "fieldName": "hideSideContent", + "type": { + "text": "boolean" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Unable To Upload\" illustration type.", - "default": "UnableToUpload", - "name": "UnableToUpload", - "readonly": true + "description": "Defines whether the side content is positioned before the main content (left side\nin LTR mode), or after the the main content (right side in LTR mode).", + "name": "side-content-position", + "default": "\"End\"", + "fieldName": "sideContentPosition", + "type": { + "text": "\"End\" | \"Start\"" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Upload To Cloud\" illustration type.", - "default": "UploadToCloud", - "name": "UploadToCloud", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Add Column\" illustration type.", - "default": "AddColumn", - "deprecated": "Deprecated as of version 2.11.0, use AddingColumns instead.", - "name": "AddColumn", - "readonly": true + "description": "Defines on which breakpoints the side content is visible.", + "name": "side-content-visibility", + "default": "\"ShowAboveS\"", + "fieldName": "sideContentVisibility", + "type": { + "text": "\"AlwaysShow\" | \"ShowAboveL\" | \"ShowAboveM\" | \"ShowAboveS\" | \"NeverShow\"" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Add People\" illustration type.", - "default": "AddPeople", - "deprecated": "Deprecated as of version 2.11.0, use AddPeopleToCalendar instead.", - "name": "AddPeople", - "readonly": true + "description": "Defines on which breakpoints the side content falls down below the main content.", + "name": "side-content-fall-down", + "default": "\"OnMinimumWidth\"", + "fieldName": "sideContentFallDown", + "type": { + "text": "\"BelowXL\" | \"BelowL\" | \"BelowM\" | \"OnMinimumWidth\"" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Add Dimensions\" illustration type.", - "default": "AddDimensions", - "name": "AddDimensions", - "readonly": true + "description": "Defines whether the component is in equal split mode. In this mode, the side and\nthe main content take 50:50 percent of the container on all screen sizes\nexcept for phone, where the main and side contents are switching visibility\nusing the toggle method.", + "name": "equal-split", + "default": "false", + "fieldName": "equalSplit", + "type": { + "text": "boolean" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Balloon Sky\" illustration type.", - "default": "BalloonSky", - "deprecated": "Deprecated as of version 2.11.0, use ReceiveAppreciation instead.", - "name": "BalloonSky", - "readonly": true - }, + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.\n - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "DynamicSideContentAccessibilityAttributes" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-dynamic-side-content", + "customElement": true, + "_ui5since": "1.1.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "DynamicSideContent", + "module": "dist/DynamicSideContent.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-dynamic-side-content", + "declaration": { + "name": "DynamicSideContent", + "module": "dist/DynamicSideContent.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/FilterItem.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-filter-item` component defines the filtering criteria for data in `ui5-view-settings-dialog`.\nIt represents a single filter category that contains multiple filter options that users can select.\n\n### Usage\n\nThe `ui5-filter-item` is used within the `ui5-view-settings-dialog` to provide filtering options.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`", + "name": "FilterItem", + "slots": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Connection\" illustration type.", - "default": "Connection", - "deprecated": "Deprecated as of version 2.11.0, use UnableToLoad instead.", - "name": "Connection", - "readonly": true - }, + "name": "values", + "description": "Defines the filter options available for this filter category.", + "_ui5type": { + "text": "Array<FilterItemOption>", + "references": [ + { + "name": "FilterItemOption", + "package": "@ui5/webcomponents-fiori", + "module": "dist/FilterItemOption.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Empty Calendar\" illustration type.", - "default": "EmptyCalendar", - "deprecated": "Deprecated as of version 2.11.0, use NoActivities instead.", - "name": "EmptyCalendar", - "readonly": true + "name": "text", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text of the filter item.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Empty List\" illustration type.", - "default": "EmptyList", - "deprecated": "Deprecated as of version 2.11.0, use NoEntries instead.", - "name": "EmptyList", - "readonly": true - }, + "name": "additionalText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the additional text of the filter item.\nThis text is typically used to show the number of selected filter options within this category.", + "default": "undefined", + "privacy": "public" + } + ], + "attributes": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Empty Planning Calendar\" illustration type.", - "default": "EmptyPlanningCalendar", - "name": "EmptyPlanningCalendar", - "readonly": true + "description": "Defines the text of the filter item.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Error Screen\" illustration type.", - "default": "ErrorScreen", - "deprecated": "Deprecated as of version 2.11.0, use UnableToUpload instead.", - "name": "ErrorScreen", - "readonly": true - }, + "description": "Defines the additional text of the filter item.\nThis text is typically used to show the number of selected filter options within this category.", + "name": "additional-text", + "default": "undefined", + "fieldName": "additionalText", + "type": { + "text": "string | undefined" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-filter-item", + "customElement": true, + "_ui5since": "1.0.0-rc.16", + "_ui5privacy": "public", + "_ui5abstract": true + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "FilterItem", + "module": "dist/FilterItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-filter-item", + "declaration": { + "name": "FilterItem", + "module": "dist/FilterItem.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/FilterItemOption.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-filter-item-option` component defines individual filter values within a `ui5-filter-item`.\nIt represents a single selectable option that users can choose to filter data.\n\n### Usage\n\nThe `ui5-filter-item-option` is used as a child component within `ui5-filter-item` in the context\nof `ui5-view-settings-dialog`. Each option represents a specific value that can be used for filtering\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/FilterItemOption.js\";`", + "name": "FilterItemOption", + "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Filter Table\" illustration type.", - "default": "FilterTable", - "deprecated": "Deprecated as of version 2.11.0, use FilteringColumns instead.", - "name": "FilterTable", - "readonly": true + "name": "text", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text of the filter option.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Group Table\" illustration type.", - "default": "GroupTable", - "deprecated": "Deprecated as of version 2.11.0, use GroupingColumns instead.", - "name": "GroupTable", - "readonly": true - }, + "name": "selected", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the filter option is selected.", + "privacy": "public" + } + ], + "attributes": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Key Task\" illustration type.", - "default": "KeyTask", - "name": "KeyTask", - "readonly": true + "description": "Defines the text of the filter option.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"No Chart Data\" illustration type.", - "default": "NoChartData", - "name": "NoChartData", - "readonly": true - }, + "description": "Defines if the filter option is selected.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-filter-item-option", + "customElement": true, + "_ui5since": "1.0.0-rc.16", + "_ui5privacy": "public", + "_ui5abstract": true + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "FilterItemOption", + "module": "dist/FilterItemOption.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-filter-item-option", + "declaration": { + "name": "FilterItemOption", + "module": "dist/FilterItemOption.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/FlexibleColumnLayout.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `FlexibleColumnLayout` implements the list-detail-detail paradigm by displaying up to three pages in separate columns.\nThere are several possible layouts that can be changed either with the component API, or by dragging the column separators.\n\n### Usage\n\nUse this component for applications that need to display several logical levels of related information side by side (e.g. list of items, item, sub-item, etc.).\nThe Component is flexible in a sense that the application can focus the user's attention on one particular column.\n\n### Responsive Behavior\n\nThe `FlexibleColumnLayout` automatically displays the maximum possible number of columns based on `layout` property and the window size.\nThe component would display 1 column for window size smaller than 599px, up to two columns between 599px and 1023px,\nand 3 columns for sizes bigger than 1023px.\n\n**Note:** When the component displays more than one column, the minimal width of each column is 248px. Consequently, when the user drags a column separator to resize the columns, the minimal allowed width of any resized column is 248px.\n\n### Keyboard Handling\n\n#### Basic Navigation\n\nWhen a column separator is focused, the following keyboard\nshortcuts allow the user to resize the columns and change the layout:\n\n- [Shift] + [Left] or [Shift] + [Right] - Moves the separator to the left or right, which resizes the columns accordingly.\n- [Left] or [Right] - Moves the separator to the left or right with a bigger step, which resizes the columns accordingly.\n- [Home] - Moves the separator to the start position.\n- [End] - Moves the separator to the end position.\n- This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js\";`", + "name": "FlexibleColumnLayout", + "slots": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"No Filter Results\" illustration type.", - "default": "NoFilterResults", - "name": "NoFilterResults", - "readonly": true + "name": "startColumn", + "description": "Defines the content in the start column.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Page Not Found\" illustration type.", - "default": "PageNotFound", - "name": "PageNotFound", - "readonly": true + "name": "midColumn", + "description": "Defines the content in the middle column.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Reload Screen\" illustration type.", - "default": "ReloadScreen", - "deprecated": "Deprecated as of version 2.11.0, use UnableToLoad instead.", - "name": "ReloadScreen", - "readonly": true - }, + "name": "endColumn", + "description": "Defines the content in the end column.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Resize Column\" illustration type.", - "default": "ResizeColumn", - "deprecated": "Deprecated as of version 2.11.0, use ResizingColumns instead.", - "name": "ResizeColumn", - "readonly": true + "name": "layout", + "type": { + "text": "FCLLayout", + "references": [ + { + "name": "FCLLayout", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/FCLLayout.js" + } + ] + }, + "default": "\"OneColumn\"", + "description": "Defines the columns layout and their proportion.\n\n**Note:** The layout also depends on the screen size - one column for screens smaller than 599px,\ntwo columns between 599px and 1023px and three columns for sizes bigger than 1023px.\n\n**For example:** layout=`TwoColumnsStartExpanded` means the layout will display up to two columns\nin 67%/33% proportion.", + "privacy": "public" }, { "kind": "field", - "static": true, + "name": "disableResizing", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Specifies if the user is allowed to change the columns layout by dragging the separator between the columns.", "privacy": "public", - "description": "\"Resizing Columns\" illustration type.", - "default": "ResizingColumns", - "name": "ResizingColumns", - "readonly": true + "_ui5since": "2.0.0" }, { "kind": "field", - "static": true, + "name": "accessibilityAttributes", + "type": { + "text": "FCLAccessibilityAttributes", + "references": [ + { + "name": "FCLAccessibilityAttributes", + "package": "@ui5/webcomponents-fiori", + "module": "dist/FlexibleColumnLayout.js" + } + ] + }, + "default": "{}", + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n - **startColumn**: `startColumn.role` and `startColumn.name`.\n - **midColumn**: `midColumn.role` and `midColumn.name`.\n - **endColumn**: `endColumn.role` and `endColumn.name`.\n - **startSeparator**: `startSeparator.role` and `startSeparator.name`.\n - **endSeparator**: `endSeparator.role` and `endSeparator.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA landmark role of the area.\nAccepts the following values: `none`, `complementary`, `contentinfo`, `main` or `region`.\n\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.", "privacy": "public", - "description": "\"Receive Appreciation\" illustration type.", - "default": "ReceiveAppreciation", - "name": "ReceiveAppreciation", - "readonly": true + "_ui5since": "2.0.0" }, { "kind": "field", - "static": true, + "name": "layoutsConfiguration", + "type": { + "text": "LayoutConfiguration", + "references": [ + { + "name": "LayoutConfiguration", + "package": "@ui5/webcomponents-fiori", + "module": "dist/FlexibleColumnLayout.js" + } + ] + }, + "default": "{}", + "description": "Allows to customize the column proportions per screen size and layout.\nIf no custom proportion provided for a specific layout, the default will be used.\n\n**Notes:**\n\n- The proportions should be given in percentages. For example [\"30%\", \"40%\", \"30%\"], [\"70%\", \"30%\", 0], etc.\n- The proportions should add up to 100%.\n- Hidden columns are marked as \"0px\", e.g. [\"0px\", \"70%\", \"30%\"]. Specifying 0 or \"0%\" for hidden columns is also valid.\n- If the proportions do not match the layout (e.g. if provided proportions [\"70%\", \"30%\", \"0px\"] for \"OneColumn\" layout), then the default proportions will be used instead.\n- Whenever the user drags the columns separator to resize the columns, the `layoutsConfiguration` object will be updated with the user-specified proportions for the given layout (and the `layout-configuration-change` event will be fired).\n- No custom configuration available for the phone screen size, as the default of 100% column width is always used there.", "privacy": "public", - "description": "\"Search Earth\" illustration type.", - "default": "SearchEarth", - "deprecated": "Deprecated as of version 2.11.0, use BeforeSearch instead.", - "name": "SearchEarth", - "readonly": true + "_ui5since": "2.16.0" }, { "kind": "field", - "static": true, + "name": "columnLayout", + "type": { + "text": "FlexibleColumnLayoutColumnLayout | undefined", + "references": [ + { + "name": "FlexibleColumnLayoutColumnLayout", + "package": "@ui5/webcomponents-fiori", + "module": "dist/FlexibleColumnLayout.js" + } + ] + }, + "description": "Returns the current column layout, based on both the `layout` property and the screen size.\n\n**For example:** [\"67%\", \"33%\", 0], [\"100%\", 0, 0], [\"25%\", \"50%\", \"25%\"], etc,\nwhere the numbers represents the width of the start, middle and end columns.", + "default": "undefined", "privacy": "public", - "description": "\"Search Folder\" illustration type.", - "default": "SearchFolder", - "deprecated": "Deprecated as of version 2.11.0, use NoSearchResults instead.", - "name": "SearchFolder", "readonly": true }, { "kind": "field", - "static": true, + "name": "startColumnVisible", + "type": { + "text": "boolean" + }, + "description": "Returns if the `start` column is visible.", + "default": "true", "privacy": "public", - "description": "\"Sign Out\" illustration type.", - "default": "SignOut", - "name": "SignOut", "readonly": true }, { "kind": "field", - "static": true, + "name": "midColumnVisible", + "type": { + "text": "boolean" + }, + "description": "Returns if the `middle` column is visible.", + "default": "false", "privacy": "public", - "description": "\"Simple Balloon\" illustration type.", - "default": "SimpleBalloon", - "deprecated": "Deprecated as of version 2.11.0, use ReceiveAppreciation instead.", - "name": "SimpleBalloon", "readonly": true }, { "kind": "field", - "static": true, + "name": "endColumnVisible", + "type": { + "text": "boolean" + }, + "description": "Returns if the `end` column is visible.", + "default": "false", "privacy": "public", - "description": "\"Simple Bell\" illustration type.", - "default": "SimpleBell", - "deprecated": "Deprecated as of version 2.11.0, use NoNotifications instead.", - "name": "SimpleBell", "readonly": true }, { "kind": "field", - "static": true, + "name": "visibleColumns", + "type": { + "text": "number" + }, + "description": "Returns the number of currently visible columns.", + "default": "1", "privacy": "public", - "description": "\"Simple Calendar\" illustration type.", - "default": "SimpleCalendar", - "deprecated": "Deprecated as of version 2.11.0, use NoActivities instead.", - "name": "SimpleCalendar", "readonly": true - }, + } + ], + "events": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Simple CheckMark\" illustration type.", - "default": "SimpleCheckMark", - "deprecated": "Deprecated as of version 2.11.0, use KeyTask instead.", - "name": "SimpleCheckMark", - "readonly": true + "name": "layout-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<FlexibleColumnLayoutLayoutChangeEventDetail>", + "references": [ + { + "name": "FlexibleColumnLayoutLayoutChangeEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/FlexibleColumnLayout.js" + } + ] + }, + "description": "Fired when the layout changes via user interaction by dragging the separators\nor by changing the component size due to resizing.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "FCLLayout", + "references": [ + { + "name": "FCLLayout", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/FCLLayout.js" + } + ] + }, + "name": "layout", + "_ui5privacy": "public", + "description": "The current layout" + }, + { + "type": { + "text": "array" + }, + "name": "columnLayout", + "_ui5privacy": "public", + "description": "The effective column layout, f.e [67%, 33%, 0]" + }, + { + "type": { + "text": "boolean" + }, + "name": "startColumnVisible", + "_ui5privacy": "public", + "description": "Indicates if the start column is currently visible" + }, + { + "type": { + "text": "boolean" + }, + "name": "midColumnVisible", + "_ui5privacy": "public", + "description": "Indicates if the middle column is currently visible" + }, + { + "type": { + "text": "boolean" + }, + "name": "endColumnVisible", + "_ui5privacy": "public", + "description": "Indicates if the end column is currently visible" + }, + { + "type": { + "text": "boolean" + }, + "name": "separatorsUsed", + "_ui5privacy": "public", + "description": "Indicates if the layout was changed by dragging the column separators" + }, + { + "type": { + "text": "boolean" + }, + "name": "resized", + "_ui5privacy": "public", + "description": "Indicates if the layout was changed by resizing the entire component" + } + ] }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Simple Connection\" illustration type.", - "default": "SimpleConnection", - "deprecated": "Deprecated as of version 2.11.0, use UnableToLoad instead.", - "name": "SimpleConnection", - "readonly": true - }, + "name": "layout-configuration-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<FlexibleColumnLayoutLayoutConfigurationChangeEventDetail>", + "references": [ + { + "name": "FlexibleColumnLayoutLayoutConfigurationChangeEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/FlexibleColumnLayout.js" + } + ] + }, + "description": "Fired when the `layoutsConfiguration` changes via user interaction by dragging the separators.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.16.0", + "_ui5parameters": [ + { + "type": { + "text": "FCLLayout", + "references": [ + { + "name": "FCLLayout", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/FCLLayout.js" + } + ] + }, + "name": "layout", + "_ui5privacy": "public", + "description": "The current layout" + }, + { + "type": { + "text": "MEDIA", + "references": [ + { + "name": "MEDIA", + "package": "@ui5/webcomponents-fiori", + "module": "dist/FlexibleColumnLayout.js" + } + ] + }, + "name": "media", + "_ui5privacy": "public", + "description": "The current media type" + }, + { + "type": { + "text": "array" + }, + "name": "columnLayout", + "_ui5privacy": "public", + "description": "The effective column layout, f.e [\"67%\", \"33%\", \"0px\"]" + } + ] + } + ], + "attributes": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Simple Empty Doc\" illustration type.", - "default": "SimpleEmptyDoc", - "deprecated": "Deprecated as of version 2.11.0, use NoData instead.", - "name": "SimpleEmptyDoc", - "readonly": true + "description": "Defines the columns layout and their proportion.\n\n**Note:** The layout also depends on the screen size - one column for screens smaller than 599px,\ntwo columns between 599px and 1023px and three columns for sizes bigger than 1023px.\n\n**For example:** layout=`TwoColumnsStartExpanded` means the layout will display up to two columns\nin 67%/33% proportion.", + "name": "layout", + "default": "\"OneColumn\"", + "fieldName": "layout", + "type": { + "text": "\"OneColumn\" | \"TwoColumnsStartExpanded\" | \"TwoColumnsMidExpanded\" | \"ThreeColumnsMidExpanded\" | \"ThreeColumnsEndExpanded\" | \"ThreeColumnsStartExpandedEndHidden\" | \"ThreeColumnsMidExpandedEndHidden\" | \"ThreeColumnsStartHiddenMidExpanded\" | \"ThreeColumnsStartHiddenEndExpanded\" | \"MidColumnFullScreen\" | \"EndColumnFullS..." + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Simple Empty List\" illustration type.", - "default": "SimpleEmptyList", - "deprecated": "Deprecated as of version 2.11.0, use NoEntries instead.", - "name": "SimpleEmptyList", - "readonly": true + "description": "Specifies if the user is allowed to change the columns layout by dragging the separator between the columns.", + "name": "disable-resizing", + "default": "false", + "fieldName": "disableResizing", + "type": { + "text": "boolean" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Simple Error\" illustration type.", - "default": "SimpleError", - "deprecated": "Deprecated as of version 2.11.0, use UnableToUpload instead.", - "name": "SimpleError", - "readonly": true + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n - **startColumn**: `startColumn.role` and `startColumn.name`.\n - **midColumn**: `midColumn.role` and `midColumn.name`.\n - **endColumn**: `endColumn.role` and `endColumn.name`.\n - **startSeparator**: `startSeparator.role` and `startSeparator.name`.\n - **endSeparator**: `endSeparator.role` and `endSeparator.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA landmark role of the area.\nAccepts the following values: `none`, `complementary`, `contentinfo`, `main` or `region`.\n\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "FCLAccessibilityAttributes" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Simple Magnifier\" illustration type.", - "default": "SimpleMagnifier", - "deprecated": "Deprecated as of version 2.11.0, use BeforeSearch instead.", - "name": "SimpleMagnifier", - "readonly": true + "description": "Allows to customize the column proportions per screen size and layout.\nIf no custom proportion provided for a specific layout, the default will be used.\n\n**Notes:**\n\n- The proportions should be given in percentages. For example [\"30%\", \"40%\", \"30%\"], [\"70%\", \"30%\", 0], etc.\n- The proportions should add up to 100%.\n- Hidden columns are marked as \"0px\", e.g. [\"0px\", \"70%\", \"30%\"]. Specifying 0 or \"0%\" for hidden columns is also valid.\n- If the proportions do not match the layout (e.g. if provided proportions [\"70%\", \"30%\", \"0px\"] for \"OneColumn\" layout), then the default proportions will be used instead.\n- Whenever the user drags the columns separator to resize the columns, the `layoutsConfiguration` object will be updated with the user-specified proportions for the given layout (and the `layout-configuration-change` event will be fired).\n- No custom configuration available for the phone screen size, as the default of 100% column width is always used there.", + "name": "layouts-configuration", + "default": "{}", + "fieldName": "layoutsConfiguration", + "type": { + "text": "LayoutConfiguration" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Simple Mail\" illustration type.", - "default": "SimpleMail", - "deprecated": "Deprecated as of version 2.11.0, use NoMail instead.", - "name": "SimpleMail", - "readonly": true + "description": "Returns the current column layout, based on both the `layout` property and the screen size.\n\n**For example:** [\"67%\", \"33%\", 0], [\"100%\", 0, 0], [\"25%\", \"50%\", \"25%\"], etc,\nwhere the numbers represents the width of the start, middle and end columns.", + "name": "column-layout", + "default": "undefined", + "fieldName": "columnLayout", + "type": { + "text": "any" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Simple No Saved Items\" illustration type.", - "default": "SimpleNoSavedItems", - "deprecated": "Deprecated as of version 2.11.0, use NoSavedItems instead.", - "name": "SimpleNoSavedItems", - "readonly": true + "description": "Returns if the `start` column is visible.", + "name": "start-column-visible", + "default": "true", + "fieldName": "startColumnVisible", + "type": { + "text": "any" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Simple Not Found Magnifier\" illustration type.", - "default": "SimpleNotFoundMagnifier", - "deprecated": "Deprecated as of version 2.11.0, use NoSearchResults instead.", - "name": "SimpleNotFoundMagnifier", - "readonly": true + "description": "Returns if the `middle` column is visible.", + "name": "mid-column-visible", + "default": "false", + "fieldName": "midColumnVisible", + "type": { + "text": "any" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Simple Reload\" illustration type.", - "default": "SimpleReload", - "deprecated": "Deprecated as of version 2.11.0, use UnableToLoad instead.", - "name": "SimpleReload", - "readonly": true + "description": "Returns if the `end` column is visible.", + "name": "end-column-visible", + "default": "false", + "fieldName": "endColumnVisible", + "type": { + "text": "any" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Simple Task\" illustration type.", - "default": "SimpleTask", - "deprecated": "Deprecated as of version 2.11.0, use NoTasks instead.", - "name": "SimpleTask", - "readonly": true - }, + "description": "Returns the number of currently visible columns.", + "name": "visible-columns", + "default": "1", + "fieldName": "visibleColumns", + "type": { + "text": "any" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-flexible-column-layout", + "customElement": true, + "_ui5since": "1.0.0-rc.8", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "FlexibleColumnLayout", + "module": "dist/FlexibleColumnLayout.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-flexible-column-layout", + "declaration": { + "name": "FlexibleColumnLayout", + "module": "dist/FlexibleColumnLayout.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/GroupItem.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-group-item` component defines the grouping criteria for data in `ui5-view-settings-dialog`.\nIt represents a single group option that users can select to organize data into logical groups.\n\n### Usage\n\nThe `ui5-group-item` is used within the `ui5-view-settings-dialog` to provide grouping options.\nEach group item represents a column or field by which data can be grouped.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`", + "name": "GroupItem", + "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Sleeping Bell\" illustration type.", - "default": "SleepingBell", - "deprecated": "Deprecated as of version 2.11.0, use NoNotifications instead.", - "name": "SleepingBell", - "readonly": true + "name": "text", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text of the group item.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Sort Column\" illustration type.", - "default": "SortColumn", - "deprecated": "Deprecated as of version 2.11.0, use SortingColumns instead.", - "name": "SortColumn", - "readonly": true + "name": "selected", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the group item is selected.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the text of the group item.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Sorting Columns\" illustration type.", - "default": "SortingColumns", - "name": "SortingColumns", - "readonly": true + "description": "Defines if the group item is selected.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-group-item", + "customElement": true, + "_ui5since": "2.15.0", + "_ui5privacy": "public", + "_ui5abstract": true + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "GroupItem", + "module": "dist/GroupItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-group-item", + "declaration": { + "name": "GroupItem", + "module": "dist/GroupItem.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/IllustratedMessage.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\nAn IllustratedMessage is a recommended combination of a solution-oriented message, an engaging\nillustration, and conversational tone to better communicate an empty or a success state than just show\na message alone.\n\nEach illustration has default internationalised title and subtitle texts. Also they can be managed with\n`titleText` and `subtitleText` properties.\n\nTo display the desired illustration, use the `name` property, where you can find the list of all available illustrations.\n\n**Note:** By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\"`\n\n**Note:** Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js\"`\n\n### Structure\nThe IllustratedMessage consists of the following elements, which are displayed below each other in the following order:\n\n- Illustration\n- Title\n- Subtitle\n- Actions\n\n### Usage\n`ui5-illustrated-message` is meant to be used inside container component, for example a `ui5-card`,\na `ui5-dialog` or a `ui5-page`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/IllustratedMessage.js\";`", + "name": "IllustratedMessage", + "cssParts": [ + { + "description": "Used to style the subtitle wrapper of the `ui5-illustrated-message`", + "name": "subtitle" + } + ], + "slots": [ + { + "name": "title", + "description": "Defines the title of the component.\n\n**Note:** Using this slot, the default title text of illustration and the value of `title` property will be overwritten.", + "_ui5since": "1.7.0", + "_ui5type": { + "text": "Array<HTMLElement> & string" + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Success Balloon\" illustration type.", - "default": "SuccessBalloon", - "deprecated": "Deprecated as of version 2.11.0, use ReceiveAppreciation instead.", - "name": "SuccessBalloon", - "readonly": true + "name": "subtitle", + "description": "Defines the subtitle of the component.\n\n**Note:** Using this slot, the default subtitle text of illustration and the value of `subtitleText` property will be overwritten.", + "_ui5since": "1.0.0-rc.16", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" }, + { + "name": "default", + "description": "Defines the component actions.\n\n**Note:** Not displayed when the `design` property is set to `Base`.", + "_ui5propertyName": "actions", + "_ui5type": { + "text": "Array<IButton>", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Success CheckMark\" illustration type.", - "default": "SuccessCheckMark", - "deprecated": "Deprecated as of version 2.11.0, use KeyTask instead.", - "name": "SuccessCheckMark", - "readonly": true + "name": "name", + "type": { + "text": "string" + }, + "default": "\"BeforeSearch\"", + "description": "Defines the illustration name that will be displayed in the component.\n\nExample:\n\n`name='BeforeSearch'`, `name='UnableToUpload'`, etc..\n\n**Note:** To use the TNT illustrations,\nyou need to set the `tnt` or `Tnt` prefix in front of the icon's name.\n\nExample:\n\n`name='tnt/Avatar'` or `name='TntAvatar'`.\n\n**Note:** By default the `BeforeSearch` illustration is loaded.\nWhen using an illustration type, other than the default, it should be loaded in addition:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\";`\n\nFor TNT illustrations:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js\";`", + "privacy": "public" }, { "kind": "field", - "static": true, + "name": "design", + "type": { + "text": "IllustrationMessageDesign", + "references": [ + { + "name": "IllustrationMessageDesign", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/IllustrationMessageDesign.js" + } + ] + }, + "default": "\"Auto\"", + "description": "Determines which illustration breakpoint variant is used.\n\nAs `IllustratedMessage` adapts itself around the `Illustration`, the other\nelements of the component are displayed differently on the different breakpoints/illustration designs.", "privacy": "public", - "description": "\"Success HighFive\" illustration type.", - "default": "SuccessHighFive", - "deprecated": "Deprecated as of version 2.11.0, use ReceiveAppreciation instead.", - "name": "SuccessHighFive", - "readonly": true + "_ui5since": "2.0.0" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Success Screen\" illustration type.", - "default": "SuccessScreen", - "deprecated": "Deprecated as of version 2.11.0, use KeyTask instead.", - "name": "SuccessScreen", - "readonly": true + "name": "subtitleText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the subtitle of the component.\n\n**Note:** Using this property, the default subtitle text of illustration will be overwritten.\n\n**Note:** Using `subtitle` slot, the default of this property will be overwritten.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"Survey\" illustration type.", - "default": "Survey", - "name": "Survey", - "readonly": true + "name": "titleText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the title of the component.\n\n**Note:** Using this property, the default title text of illustration will be overwritten.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "static": true, + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that label the component.", + "default": "undefined", "privacy": "public", - "description": "\"Tent\" illustration type.", - "default": "Tent", - "deprecated": "Deprecated as of version 2.11.0, use NoData instead.", - "name": "Tent", - "readonly": true + "_ui5since": "1.7.0" }, { "kind": "field", - "static": true, + "name": "decorative", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the illustration is decorative.\n\nWhen set to `true`, the attributes `role=\"presentation\"` and `aria-hidden=\"true\"` are applied to the SVG element.", "privacy": "public", - "description": "\"Upload Collection\" illustration type.", - "default": "UploadCollection", - "deprecated": "Deprecated as of version 2.11.0, use DragFilesToUpload instead.", - "name": "UploadCollection", - "readonly": true - }, + "_ui5since": "2.10.0" + } + ], + "attributes": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"User Has Signed Up\" illustration type.", - "default": "UserHasSignedUp", - "name": "UserHasSignedUp", - "readonly": true + "description": "Defines the illustration name that will be displayed in the component.\n\nExample:\n\n`name='BeforeSearch'`, `name='UnableToUpload'`, etc..\n\n**Note:** To use the TNT illustrations,\nyou need to set the `tnt` or `Tnt` prefix in front of the icon's name.\n\nExample:\n\n`name='tnt/Avatar'` or `name='TntAvatar'`.\n\n**Note:** By default the `BeforeSearch` illustration is loaded.\nWhen using an illustration type, other than the default, it should be loaded in addition:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\";`\n\nFor TNT illustrations:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js\";`", + "name": "name", + "default": "\"BeforeSearch\"", + "fieldName": "name", + "type": { + "text": "string" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntAvatar\" illustration type.", - "default": "TntAvatar", - "name": "TntAvatar", - "readonly": true + "description": "Determines which illustration breakpoint variant is used.\n\nAs `IllustratedMessage` adapts itself around the `Illustration`, the other\nelements of the component are displayed differently on the different breakpoints/illustration designs.", + "name": "design", + "default": "\"Auto\"", + "fieldName": "design", + "type": { + "text": "\"Auto\" | \"Base\" | \"Dot\" | \"Spot\" | \"Dialog\" | \"Scene\" | \"ExtraSmall\" | \"Small\" | \"Medium\" | \"Large\"" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntCalculator\" illustration type.", - "default": "TntCalculator", - "name": "TntCalculator", - "readonly": true + "description": "Defines the subtitle of the component.\n\n**Note:** Using this property, the default subtitle text of illustration will be overwritten.\n\n**Note:** Using `subtitle` slot, the default of this property will be overwritten.", + "name": "subtitle-text", + "default": "undefined", + "fieldName": "subtitleText", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntChartArea\" illustration type.", - "default": "TntChartArea", - "name": "TntChartArea", - "readonly": true + "description": "Defines the title of the component.\n\n**Note:** Using this property, the default title text of illustration will be overwritten.", + "name": "title-text", + "default": "undefined", + "fieldName": "titleText", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntChartArea2\" illustration type.", - "default": "TntChartArea2", - "name": "TntChartArea2", - "readonly": true + "description": "Receives id(or many ids) of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } }, + { + "description": "Defines whether the illustration is decorative.\n\nWhen set to `true`, the attributes `role=\"presentation\"` and `aria-hidden=\"true\"` are applied to the SVG element.", + "name": "decorative", + "default": "false", + "fieldName": "decorative", + "type": { + "text": "boolean" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-illustrated-message", + "customElement": true, + "_ui5since": "1.0.0-rc.15", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "IllustratedMessage", + "module": "dist/IllustratedMessage.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-illustrated-message", + "declaration": { + "name": "IllustratedMessage", + "module": "dist/IllustratedMessage.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/MediaGallery.js", + "declarations": [ + { + "kind": "interface", + "name": "IMediaGalleryItem", + "description": "Interface for components that can be slotted inside `ui5-media-gallery` as items.", + "_ui5privacy": "public" + }, + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-media-gallery` component allows the user to browse through multimedia items. Currently,\nthe supported items are images and videos. The items should be defined using the `ui5-media-gallery-item`\ncomponent.\n\nThe items are initially displayed as thumbnails. When the user selects a thumbnail, the corresponding item\nis displayed in larger size.\n\nThe component is responsive by default and adjusts the position of the menu with respect to viewport size,\nbut the application is able to further customize the layout via the provided API.\n\n### Keyboard Handling\nThe `ui5-media-gallery` provides advanced keyboard handling.\n\nWhen the thumbnails menu is focused the following keyboard\nshortcuts allow the user to navigate through the thumbnail items:\n\n- [Up] or [Down] - Navigates up and down the items\n- [Home] - Navigates to first item\n- [End] - Navigates to the last item\n- [Space], [Enter] - Selects an item\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/MediaGallery.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";`", + "name": "MediaGallery", + "slots": [ + { + "name": "default", + "description": "Defines the component items.\n\n**Note:** Only one selected item is allowed.\n\n**Note:** Use the `ui5-media-gallery-item` component to define the desired items.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<IMediaGalleryItem>", + "references": [ + { + "name": "IMediaGalleryItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/MediaGallery.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntChartBar\" illustration type.", - "default": "TntChartBar", - "name": "TntChartBar", - "readonly": true + "name": "showAllThumbnails", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "If set to `true`, all thumbnails are rendered in a scrollable container.\nIf `false`, only up to five thumbnails are rendered, followed by\nan overflow button that shows the count of the remaining thumbnails.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntChartBPMNFlow\" illustration type.", - "default": "TntChartBPMNFlow", - "name": "TntChartBPMNFlow", - "readonly": true + "name": "interactiveDisplayArea", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "If enabled, a `display-area-click` event is fired\nwhen the user clicks or taps on the display area.\n\nThe display area is the central area that contains\nthe enlarged content of the currently selected item.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntChartBullet\" illustration type.", - "default": "TntChartBullet", - "name": "TntChartBullet", - "readonly": true + "name": "layout", + "type": { + "text": "MediaGalleryLayout", + "references": [ + { + "name": "MediaGalleryLayout", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/MediaGalleryLayout.js" + } + ] + }, + "default": "\"Auto\"", + "description": "Determines the layout of the component.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntChartDoughnut\" illustration type.", - "default": "TntChartDoughnut", - "name": "TntChartDoughnut", - "readonly": true + "name": "menuHorizontalAlign", + "type": { + "text": "MediaGalleryMenuHorizontalAlign", + "references": [ + { + "name": "MediaGalleryMenuHorizontalAlign", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/MediaGalleryMenuHorizontalAlign.js" + } + ] + }, + "default": "\"Left\"", + "description": "Determines the horizontal alignment of the thumbnails menu\nvs. the central display area.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntChartFlow\" illustration type.", - "default": "TntChartFlow", - "name": "TntChartFlow", - "readonly": true - }, + "name": "menuVerticalAlign", + "type": { + "text": "MediaGalleryMenuVerticalAlign", + "references": [ + { + "name": "MediaGalleryMenuVerticalAlign", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/MediaGalleryMenuVerticalAlign.js" + } + ] + }, + "default": "\"Bottom\"", + "description": "Determines the vertical alignment of the thumbnails menu\nvs. the central display area.", + "privacy": "public" + } + ], + "events": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntChartGantt\" illustration type.", - "default": "TntChartGantt", - "name": "TntChartGantt", - "readonly": true + "name": "selection-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<MediaGallerySelectionChangeEventDetail>", + "references": [ + { + "name": "MediaGallerySelectionChangeEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/MediaGallery.js" + } + ] + }, + "description": "Fired when selection is changed by user interaction.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "the selected item." + } + ] }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntChartOrg\" illustration type.", - "default": "TntChartOrg", - "name": "TntChartOrg", - "readonly": true + "name": "overflow-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the thumbnails overflow button is clicked.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntChartPie\" illustration type.", - "default": "TntChartPie", - "name": "TntChartPie", - "readonly": true - }, + "name": "display-area-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the display area is clicked.\nThe display area is the central area that contains\nthe enlarged content of the currently selected item.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ], + "attributes": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntCodePlaceholder\" illustration type.", - "default": "TntCodePlaceholder", - "name": "TntCodePlaceholder", - "readonly": true + "description": "If set to `true`, all thumbnails are rendered in a scrollable container.\nIf `false`, only up to five thumbnails are rendered, followed by\nan overflow button that shows the count of the remaining thumbnails.", + "name": "show-all-thumbnails", + "default": "false", + "fieldName": "showAllThumbnails", + "type": { + "text": "boolean" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntCompany\" illustration type.", - "default": "TntCompany", - "name": "TntCompany", - "readonly": true + "description": "If enabled, a `display-area-click` event is fired\nwhen the user clicks or taps on the display area.\n\nThe display area is the central area that contains\nthe enlarged content of the currently selected item.", + "name": "interactive-display-area", + "default": "false", + "fieldName": "interactiveDisplayArea", + "type": { + "text": "boolean" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntCompass\" illustration type.", - "default": "TntCompass", - "name": "TntCompass", - "readonly": true + "description": "Determines the layout of the component.", + "name": "layout", + "default": "\"Auto\"", + "fieldName": "layout", + "type": { + "text": "\"Auto\" | \"Vertical\" | \"Horizontal\"" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntComponents\" illustration type.", - "default": "TntComponents", - "name": "TntComponents", - "readonly": true + "description": "Determines the horizontal alignment of the thumbnails menu\nvs. the central display area.", + "name": "menu-horizontal-align", + "default": "\"Left\"", + "fieldName": "menuHorizontalAlign", + "type": { + "text": "\"Left\" | \"Right\"" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntDialog\" illustration type.", - "default": "TntDialog", - "name": "TntDialog", - "readonly": true - }, + "description": "Determines the vertical alignment of the thumbnails menu\nvs. the central display area.", + "name": "menu-vertical-align", + "default": "\"Bottom\"", + "fieldName": "menuVerticalAlign", + "type": { + "text": "\"Top\" | \"Bottom\"" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-media-gallery", + "customElement": true, + "_ui5since": "1.1.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "MediaGallery", + "module": "dist/MediaGallery.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-media-gallery", + "declaration": { + "name": "MediaGallery", + "module": "dist/MediaGallery.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/MediaGalleryItem.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\nThe `ui5-media-gallery-item` web component represents the items displayed in the\n`ui5-media-gallery` web component.\n\n**Note:** `ui5-media-gallery-item` is not supported when used outside of `ui5-media-gallery`.\n\n### Keyboard Handling\nThe `ui5-media-gallery` provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Space] / [Enter] or [Return] - Trigger `ui5-click` event\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";` (comes with `ui5-media-gallery`)", + "name": "MediaGalleryItem", + "slots": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntEmptyContentPane\" illustration type.", - "default": "TntEmptyContentPane", - "name": "TntEmptyContentPane", - "readonly": true + "name": "default", + "description": "Defines the content of the component.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" }, + { + "name": "thumbnail", + "description": "Defines the content of the thumbnail.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntExternalLink\" illustration type.", - "default": "TntExternalLink", - "name": "TntExternalLink", - "readonly": true + "name": "selected", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the selected state of the component.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntFaceID\" illustration type.", - "default": "TntFaceID", - "name": "TntFaceID", - "readonly": true + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is in disabled state.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntFingerprint\" illustration type.", - "default": "TntFingerprint", - "name": "TntFingerprint", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntHandshake\" illustration type.", - "default": "TntHandshake", - "name": "TntHandshake", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntHelp\" illustration type.", - "default": "TntHelp", - "name": "TntHelp", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntLock\" illustration type.", - "default": "TntLock", - "name": "TntLock", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntMission\" illustration type.", - "default": "TntMission", - "name": "TntMission", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntMissionFailed\" illustration type.", - "default": "TntMissionFailed", - "name": "TntMissionFailed", - "readonly": true - }, + "name": "layout", + "type": { + "text": "MediaGalleryItemLayout", + "references": [ + { + "name": "MediaGalleryItemLayout", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/MediaGalleryItemLayout.js" + } + ] + }, + "default": "\"Square\"", + "description": "Determines the layout of the item container.", + "privacy": "public" + } + ], + "attributes": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntNoApplications\" illustration type.", - "default": "TntNoApplications", - "name": "TntNoApplications", - "readonly": true + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntNoFlows\" illustration type.", - "default": "TntNoFlows", - "name": "TntNoFlows", - "readonly": true + "description": "Defines whether the component is in disabled state.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntNoUsers\" illustration type.", - "default": "TntNoUsers", - "name": "TntNoUsers", - "readonly": true - }, + "description": "Determines the layout of the item container.", + "name": "layout", + "default": "\"Square\"", + "fieldName": "layout", + "type": { + "text": "\"Square\" | \"Wide\"" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-media-gallery-item", + "customElement": true, + "_ui5since": "1.1.0", + "_ui5privacy": "public", + "_ui5implements": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntRadar\" illustration type.", - "default": "TntRadar", - "name": "TntRadar", - "readonly": true - }, + "name": "IMediaGalleryItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/MediaGallery.js" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "MediaGalleryItem", + "module": "dist/MediaGalleryItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-media-gallery-item", + "declaration": { + "name": "MediaGalleryItem", + "module": "dist/MediaGalleryItem.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/NavigationLayout.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-navigation-layout` is a container component that can be used to\ncreate a layout with a header, a side navigation and a content area.\n\n### Usage\n\nUse the `ui5-navigation-layout` to create whole screen of an application with vertical navigation.\n\n### Responsive Behavior\n\nOn desktop and tablet devices, the side navigation is visible\nby default and can be expanded or collapsed using the `mode` property.\nOn phone devices, the side navigation is hidden by default and can\nbe displayed using the `mode` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationLayout.js\";`", + "name": "NavigationLayout", + "slots": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntRoadMap\" illustration type.", - "default": "TntRoadMap", - "name": "TntRoadMap", - "readonly": true + "name": "header", + "description": "Defines the header.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntSecrets\" illustration type.", - "default": "TntSecrets", - "name": "TntSecrets", - "readonly": true + "name": "sideContent", + "description": "Defines the side content.", + "_ui5type": { + "text": "Array<SideNavigation>", + "references": [ + { + "name": "SideNavigation", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SideNavigation.js" + } + ] + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntServices\" illustration type.", - "default": "TntServices", - "name": "TntServices", - "readonly": true - }, + "name": "default", + "description": "Defines the content.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntSessionExpired\" illustration type.", - "default": "TntSessionExpired", - "name": "TntSessionExpired", - "readonly": true + "name": "mode", + "type": { + "text": "NavigationLayoutMode", + "references": [ + { + "name": "NavigationLayoutMode", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/NavigationLayoutMode.js" + } + ] + }, + "default": "\"Auto\"", + "description": "Specifies the navigation layout mode.", + "privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntSessionExpiring\" illustration type.", - "default": "TntSessionExpiring", - "name": "TntSessionExpiring", - "readonly": true - }, + "kind": "method", + "name": "isSideCollapsed", + "return": { + "type": { + "text": "boolean" + } + }, + "description": "Gets whether the side navigation is collapsed.", + "privacy": "public" + } + ], + "attributes": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntSettings\" illustration type.", - "default": "TntSettings", - "name": "TntSettings", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntSuccess\" illustration type.", - "default": "TntSuccess", - "name": "TntSuccess", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntSuccessfulAuth\" illustration type.", - "default": "TntSuccessfulAuth", - "name": "TntSuccessfulAuth", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntSystems\" illustration type.", - "default": "TntSystems", - "name": "TntSystems", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntTeams\" illustration type.", - "default": "TntTeams", - "name": "TntTeams", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntTools\" illustration type.", - "default": "TntTools", - "name": "TntTools", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntTutorials\" illustration type.", - "default": "TntTutorials", - "name": "TntTutorials", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntUnableToLoad\" illustration type.", - "default": "TntUnableToLoad", - "name": "TntUnableToLoad", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntUnlock\" illustration type.", - "default": "TntUnlock", - "name": "TntUnlock", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntUnsuccessfulAuth\" illustration type.", - "default": "TntUnsuccessfulAuth", - "name": "TntUnsuccessfulAuth", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "\"TntUser2\" illustration type.", - "default": "TntUser2", - "name": "TntUser2", - "readonly": true + "description": "Specifies the navigation layout mode.", + "name": "mode", + "default": "\"Auto\"", + "fieldName": "mode", + "type": { + "text": "\"Auto\" | \"Collapsed\" | \"Expanded\"" + } } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-navigation-layout", + "customElement": true, + "_ui5since": "2.4.0", + "_ui5privacy": "public" } ], "exports": [ @@ -1375,227 +2218,194 @@ "kind": "js", "name": "default", "declaration": { - "name": "IllustrationMessageType", - "module": "dist/types/IllustrationMessageType.js" + "name": "NavigationLayout", + "module": "dist/NavigationLayout.js" } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/MediaGalleryItemLayout.js", - "declarations": [ - { - "kind": "enum", - "name": "MediaGalleryItemLayout", - "description": "Defines the layout of the content displayed in the `ui5-media-gallery-item`.", - "_ui5privacy": "public", - "members": [ - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Recommended to use when the item contains an image.\n\nWhen a thumbnail is selected, it makes the corresponding enlarged content appear in a square display area.", - "default": "Square", - "name": "Square", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Recommended to use when the item contains video content.\n\nWhen a thumbnail is selected, it makes the corresponding enlarged content appear in a wide display area\n(stretched to fill all of the available width) for optimal user experiance.", - "default": "Wide", - "name": "Wide", - "readonly": true - } - ] - } - ], - "exports": [ + }, { - "kind": "js", - "name": "default", + "kind": "custom-element-definition", + "name": "ui5-navigation-layout", "declaration": { - "name": "MediaGalleryItemLayout", - "module": "dist/types/MediaGalleryItemLayout.js" + "name": "NavigationLayout", + "module": "dist/NavigationLayout.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/MediaGalleryLayout.js", - "declarations": [ - { - "kind": "enum", - "name": "MediaGalleryLayout", - "description": "Defines the layout type of the thumbnails list of the `ui5-media-gallery` component.", - "_ui5privacy": "public", - "members": [ - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The layout is determined automatically.", - "default": "Auto", - "name": "Auto", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Displays the layout as a vertical split between the thumbnails list and the selected image.", - "default": "Vertical", - "name": "Vertical", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Displays the layout as a horizontal split between the thumbnails list and the selected image.", - "default": "Horizontal", - "name": "Horizontal", - "readonly": true - } - ] - } - ], + "path": "dist/NavigationMenu.js", + "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "MediaGalleryLayout", - "module": "dist/types/MediaGalleryLayout.js" + "name": "NavigationMenu", + "module": "dist/NavigationMenu.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/MediaGalleryMenuHorizontalAlign.js", - "declarations": [ - { - "kind": "enum", - "name": "MediaGalleryMenuHorizontalAlign", - "description": "Defines the horizontal alignment of the thumbnails menu of the `ui5-media-gallery` component.", - "_ui5privacy": "public", - "members": [ - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Displays the menu on the left side of the target.", - "default": "Left", - "name": "Left", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Displays the menu on the right side of the target.", - "default": "Right", - "name": "Right", - "readonly": true - } - ] - } - ], + "path": "dist/NavigationMenuItem.js", + "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "MediaGalleryMenuHorizontalAlign", - "module": "dist/types/MediaGalleryMenuHorizontalAlign.js" + "name": "NavigationMenuItem", + "module": "dist/NavigationMenuItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/MediaGalleryMenuVerticalAlign.js", + "path": "dist/NotificationList.js", "declarations": [ { - "kind": "enum", - "name": "MediaGalleryMenuVerticalAlign", - "description": "Types for the vertical alignment of the thumbnails menu of the `ui5-media-gallery` component.", - "_ui5privacy": "public", - "members": [ + "kind": "class", + "description": "### Overview\nThe `ui5-notification-list` web component represents\na container for `ui5-li-notification-group` and `ui5-li-notification`.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe `ui5-notification-list` provides advanced keyboard handling.\nWhen a list is focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Up] or [Left] - Navigates up the items\n- [Down] or [Right] - Navigates down the items\n- [Home] - Navigates to first item\n- [End] - Navigates to the last item\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationList.js\";``", + "name": "NotificationList", + "slots": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Displays the menu at the top of the reference control.", - "default": "Top", - "name": "Top", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Displays the menu at the bottom of the reference control.", - "default": "Bottom", - "name": "Bottom", - "readonly": true + "name": "default", + "description": "Defines the items of the component.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<NotificationListItemBase>", + "references": [ + { + "name": "NotificationListItemBase", + "package": "@ui5/webcomponents-fiori", + "module": "dist/NotificationListItemBase.js" + } + ] + }, + "_ui5privacy": "public" } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "MediaGalleryMenuVerticalAlign", - "module": "dist/types/MediaGalleryMenuVerticalAlign.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/NavigationLayoutMode.js", - "declarations": [ - { - "kind": "enum", - "name": "NavigationLayoutMode", - "description": "Specifies the navigation layout mode.", - "_ui5privacy": "public", + ], "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "Automatically calculates the navigation layout mode based on the screen device type.\n`Expanded` on desktop and `Collapsed` on tablet and phone.", - "default": "Auto", - "name": "Auto", - "readonly": true + "name": "noDataText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text that is displayed when the component contains no items.", + "default": "undefined", + "privacy": "public" + } + ], + "events": [ + { + "name": "item-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<NotificationItemClickEventDetail>", + "references": [ + { + "name": "NotificationItemClickEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/NotificationList.js" + } + ] + }, + "description": "Fired when an item is clicked.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "The clicked item." + } + ] }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Collapsed side navigation.", - "default": "Collapsed", - "name": "Collapsed", - "readonly": true + "name": "item-close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<NotificationItemCloseEventDetail>", + "references": [ + { + "name": "NotificationItemCloseEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/NotificationList.js" + } + ] + }, + "description": "Fired when the `Close` button of any item is clicked.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "the item about to be closed." + } + ] }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Expanded side navigation.", - "default": "Expanded", - "name": "Expanded", - "readonly": true + "name": "item-toggle", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<NotificationItemToggleEventDetail>", + "references": [ + { + "name": "NotificationItemToggleEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/NotificationList.js" + } + ] + }, + "description": "Fired when an item is toggled.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "the toggled item." + } + ] } - ] + ], + "attributes": [ + { + "description": "Defines the text that is displayed when the component contains no items.", + "name": "no-data-text", + "default": "undefined", + "fieldName": "noDataText", + "type": { + "text": "string | undefined" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-notification-list", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public" } ], "exports": [ @@ -1603,90 +2413,187 @@ "kind": "js", "name": "default", "declaration": { - "name": "NavigationLayoutMode", - "module": "dist/types/NavigationLayoutMode.js" + "name": "NotificationList", + "module": "dist/NotificationList.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-notification-list", + "declaration": { + "name": "NotificationList", + "module": "dist/NotificationList.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/NotificationListItemImportance.js", + "path": "dist/NotificationListGroupItem.js", "declarations": [ { - "kind": "enum", - "name": "NotificationListItemImportance", - "description": "Different types of NotificationListItemImportance.", - "_ui5privacy": "public", + "kind": "class", + "description": "### Overview\nThe `ui5-li-notification-group` is a special type of list item,\nthat unlike others can group items within self, usually `ui5-li-notification` items.\n\nThe component consists of:\n\n- `Toggle` button to expand and collapse the group\n- `TitleText` to entitle the group\n- Items of the group\n\n### Usage\nThe component should be used inside a `ui5-notification-list`.\n\n### Keyboard Handling\nThe `ui5-li-notification-group` provides advanced keyboard handling.\nThis component provides fast navigation when the header is focused using the following keyboard shortcuts:\n\n- [Space] - toggles expand / collapse of the group\n- [Plus] - expands the group\n- [Minus] - collapses the group\n- [Right] - expands the group\n- [Left] - collapses the group\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js\";`", + "name": "NotificationListGroupItem", + "slots": [ + { + "name": "default", + "description": "Defines the items of the `ui5-li-notification-group`,\nusually `ui5-li-notification` items.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<NotificationListItem>", + "references": [ + { + "name": "NotificationListItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/NotificationListItem.js" + } + ] + }, + "_ui5privacy": "public" + } + ], "members": [ { "kind": "field", - "static": true, + "name": "collapsed", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the group is collapsed or expanded.", + "privacy": "public" + }, + { + "kind": "field", + "name": "growing", + "type": { + "text": "NotificationListGrowingMode", + "references": [ + { + "name": "NotificationListGrowingMode", + "package": "@ui5/webcomponents", + "module": "dist/types/NotificationListGrowingMode.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines whether the component will have growing capability by pressing a `More` button.\nWhen button is pressed `load-more` event will be fired.", "privacy": "public", - "default": "Standard", - "name": "Standard", - "readonly": true + "_ui5since": "2.2.0" }, { "kind": "field", - "static": true, + "name": "titleText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the `titleText` of the item.", + "default": "undefined", "privacy": "public", - "default": "Important", - "name": "Important", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "NotificationListItemImportance", - "module": "dist/types/NotificationListItemImportance.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/PageBackgroundDesign.js", - "declarations": [ - { - "kind": "enum", - "name": "PageBackgroundDesign", - "description": "Available Page Background Design.", - "_ui5privacy": "public", - "members": [ + "inheritedFrom": { + "name": "NotificationListItemBase", + "module": "dist/NotificationListItemBase.js" + } + }, { "kind": "field", - "static": true, + "name": "read", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the `notification` is new or has been already read.\n\n**Note:** if set to `false` the `titleText` has bold font,\nif set to true - it has a normal font.", "privacy": "public", - "description": "Page background color when a List is set as the Page content.", - "default": "List", - "name": "List", - "readonly": true + "inheritedFrom": { + "name": "NotificationListItemBase", + "module": "dist/NotificationListItemBase.js" + } }, { "kind": "field", - "static": true, + "name": "loading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if a busy indicator would be displayed over the item.", "privacy": "public", - "description": "A solid background color dependent on the theme.", - "default": "Solid", - "name": "Solid", - "readonly": true + "_ui5since": "1.0.0-rc.8", + "inheritedFrom": { + "name": "NotificationListItemBase", + "module": "dist/NotificationListItemBase.js" + } }, { "kind": "field", - "static": true, + "name": "loadingDelay", + "type": { + "text": "number" + }, + "default": "1000", + "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.", "privacy": "public", - "description": "Transparent background for the page.", - "default": "Transparent", - "name": "Transparent", - "readonly": true + "inheritedFrom": { + "name": "NotificationListItemBase", + "module": "dist/NotificationListItemBase.js" + } } - ] + ], + "events": [ + { + "name": "toggle", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + }, + { + "name": "load-more", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when additional items are requested.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.2.0" + } + ], + "attributes": [ + { + "description": "Defines if the group is collapsed or expanded.", + "name": "collapsed", + "default": "false", + "fieldName": "collapsed", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the component will have growing capability by pressing a `More` button.\nWhen button is pressed `load-more` event will be fired.", + "name": "growing", + "default": "\"None\"", + "fieldName": "growing", + "type": { + "text": "\"Button\" | \"None\"" + } + } + ], + "superclass": { + "name": "NotificationListItemBase", + "package": "@ui5/webcomponents-fiori", + "module": "dist/NotificationListItemBase.js" + }, + "tagName": "ui5-li-notification-group", + "customElement": true, + "_ui5since": "1.0.0-rc.8", + "_ui5privacy": "public" } ], "exports": [ @@ -1694,349 +2601,297 @@ "kind": "js", "name": "default", "declaration": { - "name": "PageBackgroundDesign", - "module": "dist/types/PageBackgroundDesign.js" + "name": "NotificationListGroupItem", + "module": "dist/NotificationListGroupItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-li-notification-group", + "declaration": { + "name": "NotificationListGroupItem", + "module": "dist/NotificationListGroupItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/SearchMode.js", - "declarations": [ - { - "kind": "enum", - "name": "SearchMode", - "description": "Search mode options.", - "_ui5privacy": "public", - "members": [ - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Search field with default appearance.", - "default": "Default", - "name": "Default", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Search field with additional scope select.", - "default": "Scoped", - "name": "Scoped", - "readonly": true - } - ] - } - ], + "path": "dist/NotificationListGroupList.js", + "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "SearchMode", - "module": "dist/types/SearchMode.js" + "name": "NotificationListGroupList", + "module": "dist/NotificationListGroupList.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/SideContentFallDown.js", - "declarations": [ - { - "kind": "enum", - "name": "SideContentFallDown", - "description": "SideContent FallDown options.", - "_ui5privacy": "public", - "members": [ - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Side content falls down on breakpoints below XL", - "default": "BelowXL", - "name": "BelowXL", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Side content falls down on breakpoints below L", - "default": "BelowL", - "name": "BelowL", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Side content falls down on breakpoints below M", - "default": "BelowM", - "name": "BelowM", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Side content falls down on breakpoint M and the minimum width for the side content", - "default": "OnMinimumWidth", - "name": "OnMinimumWidth", - "readonly": true - } - ] - } - ], + "path": "dist/NotificationListInternal.js", + "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "SideContentFallDown", - "module": "dist/types/SideContentFallDown.js" + "name": "NotificationListInternal", + "module": "dist/NotificationListInternal.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/SideContentPosition.js", + "path": "dist/NotificationListItem.js", "declarations": [ { - "kind": "enum", - "name": "SideContentPosition", - "description": "Side Content position options.", - "_ui5privacy": "public", - "members": [ + "kind": "class", + "description": "### Overview\nThe `ui5-li-notification` is a type of list item, meant to display notifications.\n\nThe component has a rich set of various properties that allows the user to set `avatar`, `menu`, `titleText`, descriptive `content`\nand `footnotes` to fully describe a notification.\n\nThe user can:\n\n- display a `Close` button\n- can control whether the `titleText` and `description` should wrap or truncate\nand display a `ShowMore` button to switch between less and more information\n- add actions by using the `ui5-menu` component\n\n**Note:** Adding custom actions by using the `ui5-notification-action` component is deprecated as of version 2.0!\n\n### Usage\nThe component should be used inside a `ui5-notification-list`.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete):\n\n- [Enter] - select an item (trigger \"item-click\" event)\n- [Delete] - close an item (trigger \"item-close\" event)\n\n#### Fast Navigation\nThis component provides a fast navigation using the following keyboard shortcuts:\n\n- [Shift] + [Enter] - 'More'/'Less' link will be triggered\n- [Shift] + [F10] - 'Menu' (Actions) button will be triggered (clicked)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationListItem.js\";`", + "name": "NotificationListItem", + "cssParts": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The side content is on the right side of the main container\nin left-to-right mode and on the left side in right-to-left mode.", - "default": "End", - "name": "End", - "readonly": true - }, + "description": "Used to style the titleText of the notification list item", + "name": "title-text" + } + ], + "slots": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The side content is on the left side of the main container\nin left-to-right mode and on the right side in right-to-left mode.", - "default": "Start", - "name": "Start", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "SideContentPosition", - "module": "dist/types/SideContentPosition.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/SideContentVisibility.js", - "declarations": [ - { - "kind": "enum", - "name": "SideContentVisibility", - "description": "Side Content visibility options.", - "_ui5privacy": "public", - "members": [ + "name": "avatar", + "description": "Defines the avatar, displayed in the `ui5-li-notification`.\n\n**Note:** Consider using the `ui5-avatar` to display icons, initials or images.\n\n**Note:** In order to be complaint with the UX guidlines and for best experience,\nwe recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the `ui5-avatar`\nyou can set its `size` property to `XS` to get the required size - `<ui5-avatar size=\"XS\"></ui5-avatar>`.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Show the side content on any breakpoint", - "default": "AlwaysShow", - "name": "AlwaysShow", - "readonly": true + "name": "menu", + "description": "Defines the menu, displayed in the `ui5-li-notification`.\n\n**Note:** Use this for implementing actions.\n\n**Note:** Should be used instead `u5-notification-action`, which is deprecated as of version 2.0.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Show the side content on XL breakpoint", - "default": "ShowAboveL", - "name": "ShowAboveL", - "readonly": true + "name": "footnotes", + "description": "Defines the elements, displayed in the footer of the of the component.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" }, + { + "name": "default", + "description": "Defines the content of the `ui5-li-notification`,\nusually a description of the notification.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", + "_ui5propertyName": "description", + "_ui5type": { + "text": "Array<Node>" + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "static": true, + "name": "wrappingType", + "type": { + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines if the `titleText` and `description` should wrap,\nthey truncate by default.\n\n**Note:** by default the `titleText` and `description`,\nand a `ShowMore/Less` button would be displayed.", "privacy": "public", - "description": "Show the side content on L and XL breakpoints", - "default": "ShowAboveM", - "name": "ShowAboveM", - "readonly": true + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Show the side content on M, L and XL breakpoints", - "default": "ShowAboveS", - "name": "ShowAboveS", - "readonly": true + "name": "state", + "type": { + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the status indicator of the item.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Don't show the side content on any breakpoints", - "default": "NeverShow", - "name": "NeverShow", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "SideContentVisibility", - "module": "dist/types/SideContentVisibility.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/SideNavigationItemDesign.js", - "declarations": [ - { - "kind": "enum", - "name": "SideNavigationItemDesign", - "description": "SideNavigationItem designs.", - "_ui5privacy": "public", - "_ui5since": "2.7.0", - "members": [ + "name": "showClose", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the `Close` button would be displayed.", + "privacy": "public" + }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Design for items that perform navigation, contain navigation child items, or both.", - "default": "Default", - "name": "Default", - "readonly": true + "name": "importance", + "type": { + "text": "NotificationListItemImportance", + "references": [ + { + "name": "NotificationListItemImportance", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/NotificationListItemImportance.js" + } + ] + }, + "default": "\"Standard\"", + "description": "Defines the `Important` label of the item.", + "privacy": "public" }, { "kind": "field", - "static": true, + "name": "titleText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the `titleText` of the item.", + "default": "undefined", "privacy": "public", - "description": "Design for items that trigger an action, such as opening a dialog.\n\n**Note:** Items with this design must not have sub-items.\n\n**Note:** Items that open a dialog must set `hasPopup=\"dialog\"` via `accessibilityAttributes` property.", - "default": "Action", - "name": "Action", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "SideNavigationItemDesign", - "module": "dist/types/SideNavigationItemDesign.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/TimelineGrowingMode.js", - "declarations": [ - { - "kind": "enum", - "name": "TimelineGrowingMode", - "description": "Timeline growing modes.", - "_ui5privacy": "public", - "_ui5since": "2.7.0", - "members": [ + "inheritedFrom": { + "name": "NotificationListItemBase", + "module": "dist/NotificationListItemBase.js" + } + }, { "kind": "field", - "static": true, + "name": "read", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the `notification` is new or has been already read.\n\n**Note:** if set to `false` the `titleText` has bold font,\nif set to true - it has a normal font.", "privacy": "public", - "description": "Event `load-more` is fired\nupon pressing a \"More\" button at the end.", - "default": "Button", - "name": "Button", - "readonly": true + "inheritedFrom": { + "name": "NotificationListItemBase", + "module": "dist/NotificationListItemBase.js" + } }, { "kind": "field", - "static": true, + "name": "loading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if a busy indicator would be displayed over the item.", "privacy": "public", - "description": "Event `load-more` is fired upon scroll.", - "default": "Scroll", - "name": "Scroll", - "readonly": true + "_ui5since": "1.0.0-rc.8", + "inheritedFrom": { + "name": "NotificationListItemBase", + "module": "dist/NotificationListItemBase.js" + } }, { "kind": "field", - "static": true, + "name": "loadingDelay", + "type": { + "text": "number" + }, + "default": "1000", + "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.", "privacy": "public", - "description": "The growing feature is not enabled.", - "default": "None", - "name": "None", - "readonly": true + "inheritedFrom": { + "name": "NotificationListItemBase", + "module": "dist/NotificationListItemBase.js" + } } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TimelineGrowingMode", - "module": "dist/types/TimelineGrowingMode.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/TimelineLayout.js", - "declarations": [ - { - "kind": "enum", - "name": "TimelineLayout", - "description": "Available Timeline layout orientation", - "_ui5privacy": "public", - "members": [ + ], + "events": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Vertical layout\nDefault type", - "default": "Vertical", - "name": "Vertical", - "readonly": true + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<NotificationListItemCloseEventDetail>", + "references": [ + { + "name": "NotificationListItemCloseEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/NotificationListItem.js" + } + ] + }, + "description": "Fired when the `Close` button is pressed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "the closed item." + } + ] + } + ], + "attributes": [ + { + "description": "Defines if the `titleText` and `description` should wrap,\nthey truncate by default.\n\n**Note:** by default the `titleText` and `description`,\nand a `ShowMore/Less` button would be displayed.", + "name": "wrapping-type", + "default": "\"None\"", + "fieldName": "wrappingType", + "type": { + "text": "\"None\" | \"Normal\"" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Horizontal layout", - "default": "Horizontal", - "name": "Horizontal", - "readonly": true + "description": "Defines the status indicator of the item.", + "name": "state", + "default": "\"None\"", + "fieldName": "state", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + } + }, + { + "description": "Defines if the `Close` button would be displayed.", + "name": "show-close", + "default": "false", + "fieldName": "showClose", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the `Important` label of the item.", + "name": "importance", + "default": "\"Standard\"", + "fieldName": "importance", + "type": { + "text": "\"Standard\" | \"Important\"" + } } - ] + ], + "superclass": { + "name": "NotificationListItemBase", + "package": "@ui5/webcomponents-fiori", + "module": "dist/NotificationListItemBase.js" + }, + "tagName": "ui5-li-notification", + "customElement": true, + "_ui5since": "1.0.0-rc.8", + "_ui5privacy": "public" } ], "exports": [ @@ -2044,92 +2899,78 @@ "kind": "js", "name": "default", "declaration": { - "name": "TimelineLayout", - "module": "dist/types/TimelineLayout.js" + "name": "NotificationListItem", + "module": "dist/NotificationListItem.js" } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/UploadCollectionDnDMode.js", - "declarations": [], - "exports": [ + }, { - "kind": "js", - "name": "default", + "kind": "custom-element-definition", + "name": "ui5-li-notification", "declaration": { - "name": "UploadCollectionDnDOverlayMode", - "module": "dist/types/UploadCollectionDnDMode.js" + "name": "NotificationListItem", + "module": "dist/NotificationListItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/UploadCollectionSelectionMode.js", + "path": "dist/NotificationListItemBase.js", "declarations": [ { - "kind": "enum", - "name": "UploadCollectionSelectionMode", - "description": "Different UploadCollection selection modes.", - "_ui5privacy": "public", + "kind": "class", + "description": "The base class of the `NotificationListItem` and `NotificationListGroupItem`.", + "name": "NotificationListItemBase", "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "Default mode (no selection).", - "default": "None", - "name": "None", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Right-positioned single selection mode (only one list item can be selected).", - "default": "Single", - "name": "Single", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Left-positioned single selection mode (only one list item can be selected).", - "default": "SingleStart", - "name": "SingleStart", - "readonly": true + "name": "titleText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the `titleText` of the item.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Selected item is highlighted but no selection element is visible\n(only one list item can be selected).", - "default": "SingleEnd", - "name": "SingleEnd", - "readonly": true + "name": "read", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the `notification` is new or has been already read.\n\n**Note:** if set to `false` the `titleText` has bold font,\nif set to true - it has a normal font.", + "privacy": "public" }, { "kind": "field", - "static": true, + "name": "loading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if a busy indicator would be displayed over the item.", "privacy": "public", - "description": "Selected item is highlighted and selection is changed upon arrow navigation\n(only one list item can be selected - this is always the focused item).", - "default": "SingleAuto", - "name": "SingleAuto", - "readonly": true + "_ui5since": "1.0.0-rc.8" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Multi selection mode (more than one list item can be selected).", - "default": "Multiple", - "name": "Multiple", - "readonly": true + "name": "loadingDelay", + "type": { + "text": "number" + }, + "default": "1000", + "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.", + "privacy": "public" } - ] + ], + "superclass": { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + }, + "_ui5since": "1.0.0-rc.8", + "_ui5privacy": "public" } ], "exports": [ @@ -2137,113 +2978,149 @@ "kind": "js", "name": "default", "declaration": { - "name": "UploadCollectionSelectionMode", - "module": "dist/types/UploadCollectionSelectionMode.js" + "name": "NotificationListItemBase", + "module": "dist/NotificationListItemBase.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/UploadState.js", + "path": "dist/Page.js", "declarations": [ { - "kind": "enum", - "name": "UploadState", - "description": "Different types of UploadState.", - "_ui5privacy": "public", - "members": [ + "kind": "class", + "description": "### Overview\n\nThe `ui5-page` is a container component that holds one whole screen of an application.\nThe page has three distinct areas that can hold content - a header, content area and a footer.\n### Structure\n#### Header\nThe top most area of the page is occupied by the header. The standard header includes a navigation button and a title.\n#### Content\nThe content occupies the main part of the page. Only the content area is scrollable by default.\nThis can be prevented by setting `noScrolling` to `true`.\n#### Footer\nThe footer is optional and occupies the part above the bottom part of the content. Alternatively, the footer can be fixed at the bottom of the page by enabling the `fixedFooter` property.\n\n**Note:** `ui5-page` occipues the whole available space of its parent. In order to achieve the intended design you have to make sure\nthat there is enough space for the `ui5-page` to be rendered.\n**Note:** In order for the `ui5-page` to be displayed, the parent element should have fixed height.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/Page.js\";`", + "name": "Page", + "cssParts": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The file has been uploaded successfully.", - "default": "Complete", - "name": "Complete", - "readonly": true - }, + "description": "Used to style the content section of the component", + "name": "content" + } + ], + "slots": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The file cannot be uploaded due to an error.", - "default": "Error", - "name": "Error", - "readonly": true + "name": "header", + "description": "Defines the header HTML Element.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The file is awaiting an explicit command to start being uploaded.", - "default": "Ready", - "name": "Ready", - "readonly": true + "name": "default", + "description": "Defines the content HTML Element.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<Node>" + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The file is currently being uploaded.", - "default": "Uploading", - "name": "Uploading", - "readonly": true + "name": "footer", + "description": "Defines the footer HTML Element.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "UploadState", - "module": "dist/types/UploadState.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/ViewSettingsDialogMode.js", - "declarations": [ - { - "kind": "enum", - "name": "ViewSettingsDialogMode", - "description": "Different types of ViewSettings.", - "_ui5privacy": "public", + ], "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "_ui5since": "1.0.0-rc.16", - "description": "Default type", - "default": "Sort", - "name": "Sort", - "readonly": true + "name": "backgroundDesign", + "type": { + "text": "PageBackgroundDesign", + "references": [ + { + "name": "PageBackgroundDesign", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/PageBackgroundDesign.js" + } + ] + }, + "default": "\"Solid\"", + "description": "Defines the background color of the `ui5-page`.\n\n**Note:** When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "_ui5since": "1.0.0-rc.16", - "description": "Filter type", - "default": "Filter", - "name": "Filter", - "readonly": true + "name": "noScrolling", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Disables vertical scrolling of page content.\nIf set to true, there will be no vertical scrolling at all.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "_ui5since": "2.13.0", - "description": "Group type", - "default": "Group", - "name": "Group", - "readonly": true + "name": "fixedFooter", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the footer is fixed at the very bottom of the page.\n\n**Note:** When set to true the footer is fixed at the very bottom of the page, otherwise it floats over the content with a slight offset from the bottom.", + "privacy": "public" + }, + { + "kind": "field", + "name": "hideFooter", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the footer visibility.", + "privacy": "public" } - ] + ], + "attributes": [ + { + "description": "Defines the background color of the `ui5-page`.\n\n**Note:** When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.", + "name": "background-design", + "default": "\"Solid\"", + "fieldName": "backgroundDesign", + "type": { + "text": "\"List\" | \"Solid\" | \"Transparent\"" + } + }, + { + "description": "Disables vertical scrolling of page content.\nIf set to true, there will be no vertical scrolling at all.", + "name": "no-scrolling", + "default": "false", + "fieldName": "noScrolling", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines if the footer is fixed at the very bottom of the page.\n\n**Note:** When set to true the footer is fixed at the very bottom of the page, otherwise it floats over the content with a slight offset from the bottom.", + "name": "fixed-footer", + "default": "false", + "fieldName": "fixedFooter", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the footer visibility.", + "name": "hide-footer", + "default": "false", + "fieldName": "hideFooter", + "type": { + "text": "boolean" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-page", + "customElement": true, + "_ui5since": "1.0.0-rc.12", + "_ui5privacy": "public" } ], "exports": [ @@ -2251,41 +3128,62 @@ "kind": "js", "name": "default", "declaration": { - "name": "ViewSettingsDialogMode", - "module": "dist/types/ViewSettingsDialogMode.js" + "name": "Page", + "module": "dist/Page.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-page", + "declaration": { + "name": "Page", + "module": "dist/Page.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/WizardContentLayout.js", + "path": "dist/ProductSwitch.js", "declarations": [ { - "kind": "enum", - "name": "WizardContentLayout", - "description": "Enumeration for different content layouts of the `ui5-wizard`.", - "_ui5privacy": "public", - "members": [ - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Display the content of the `ui5-wizard` as multiple steps in a scroll section.", - "default": "MultipleSteps", - "name": "MultipleSteps", - "readonly": true - }, + "kind": "interface", + "name": "IProductSwitchItem", + "description": "Interface for components that may be slotted inside `ui5-product-switch` as items", + "_ui5privacy": "public" + }, + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-product-switch` is an SAP Fiori specific web component that is used in `ui5-shellbar`\nand allows the user to easily switch between products.\n\n### Keyboard Handling\nThe `ui5-product-switch` provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Tab] - Move focus to the next interactive element after the `ui5-product-switch`\n- [Up] or [Down] - Navigates up and down the items\n- [Left] or [Right] - Navigates left and right the items\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ProductSwitch.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";` (for `ui5-product-switch-item`)", + "name": "ProductSwitch", + "slots": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Display the content of the `ui5-wizard` as single step.", - "default": "SingleStep", - "name": "SingleStep", - "readonly": true + "name": "default", + "description": "Defines the items of the `ui5-product-switch`.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<IProductSwitchItem>", + "references": [ + { + "name": "IProductSwitchItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ProductSwitch.js" + } + ] + }, + "_ui5privacy": "public" } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-product-switch", + "customElement": true, + "_ui5since": "1.0.0-rc.5", + "_ui5privacy": "public", + "members": [] } ], "exports": [ @@ -2293,58 +3191,33 @@ "kind": "js", "name": "default", "declaration": { - "name": "WizardContentLayout", - "module": "dist/types/WizardContentLayout.js" + "name": "ProductSwitch", + "module": "dist/ProductSwitch.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-product-switch", + "declaration": { + "name": "ProductSwitch", + "module": "dist/ProductSwitch.js" } } ] }, { "kind": "javascript-module", - "path": "dist/upload-utils/UploadCollectionBodyDnD.js", - "declarations": [], - "exports": [] - }, - { - "kind": "javascript-module", - "path": "dist/Assets-fetch.js", - "declarations": [], - "exports": [] - }, - { - "kind": "javascript-module", - "path": "dist/Assets-node.js", - "declarations": [], - "exports": [] - }, - { - "kind": "javascript-module", - "path": "dist/Assets.js", - "declarations": [], - "exports": [] - }, - { - "kind": "javascript-module", - "path": "dist/BarcodeScannerDialog.js", + "path": "dist/ProductSwitchItem.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `BarcodeScannerDialog` component provides barcode scanning functionality for all devices that support the `MediaDevices.getUserMedia()` native API.\nOpening the dialog launches the device camera and scans for known barcode formats.\n\nA `scanSuccess` event fires whenever a barcode is identified\nand a `scanError` event fires when the scan failed (for example, due to missing permisions).\n\nInternally, the component uses the zxing-js/library third party OSS.\n\nFor a list of supported barcode formats, see the [zxing-js/library](https://github.com/zxing-js/library) documentation.", - "name": "BarcodeScannerDialog", + "description": "### Overview\nThe `ui5-product-switch-item` web component represents the items displayed in the\n`ui5-product-switch` web component.\n\n**Note:** `ui5-product-switch-item` is not supported when used outside of `ui5-product-switch`.\n\n### Keyboard Handling\nThe `ui5-product-switch` provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Space] / [Enter] or [Return] - Trigger `ui5-click` event\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";`", + "name": "ProductSwitchItem", "slots": [ { - "name": "header", - "description": "Defines the header HTML Element.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.", - "_ui5since": "2.4.0", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - }, - { - "name": "footer", - "description": "Defines the footer HTML Element.\n\n**Note:** When you provide custom content for the `footer` slot, the default close button is not rendered.\nThis means you need to include your own mechanism within the custom `footer` to close the dialog,\nsuch as a button with an event listener that closes the dialog.\n\n**Note:** If the `footer` slot is not provided, a default footer with a close button is rendered automatically,\nallowing users to close the dialog without any additional implementation.", - "_ui5since": "2.4.0", + "name": "image", + "description": "Defines an image to be displayed instead of the standard icon.\n\n**Note:** The image slot takes precedence over the icon property.\n**Note:** We recommend using non-interactive ui5-avatar with size S, Square shape and Transparent colorScheme for best alignment.", + "_ui5since": "2.14.0", "_ui5type": { "text": "Array<HTMLElement>" }, @@ -2354,102 +3227,114 @@ "members": [ { "kind": "field", - "name": "open", + "name": "titleText", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Indicates whether the dialog is open.", + "description": "Defines the title of the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.24.0" - } - ], - "events": [ + "_ui5since": "1.0.0-rc.15" + }, { - "name": "close", - "_ui5privacy": "public", + "kind": "field", + "name": "subtitleText", "type": { - "text": "CustomEvent" + "text": "string | undefined" }, - "description": "Fired when the user closes the component.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.0.0" + "description": "Defines the subtitle of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { - "name": "scan-success", - "_ui5privacy": "public", + "kind": "field", + "name": "icon", "type": { - "text": "CustomEvent<BarcodeScannerDialogScanSuccessEventDetail>", - "references": [ - { - "name": "BarcodeScannerDialogScanSuccessEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/BarcodeScannerDialog.js" - } - ] + "text": "string | undefined" }, - "description": "Fires when the scan is completed successfuuly.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "string" - }, - "name": "text", - "_ui5privacy": "public", - "description": "the scan result as string" - }, - { - "type": { - "text": "Object" - }, - "name": "rawBytes", - "_ui5privacy": "public", - "description": "the scan result as a Uint8Array" - } - ] + "description": "Defines the icon to be displayed as a graphical element within the component.\n\nExample:\n\n`<ui5-product-switch-item icon=\"palette\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", + "privacy": "public" }, { - "name": "scan-error", + "kind": "field", + "name": "target", + "type": { + "text": "string | undefined" + }, + "description": "Defines a target where the `targetSrc` content must be open.\n\nAvailable options are:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**Note:** By default target will be open in the same frame as it was clicked.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "targetSrc", + "type": { + "text": "string | undefined" + }, + "description": "Defines the component target URI. Supports standard hyperlink behavior.", + "default": "undefined", + "privacy": "public" + } + ], + "events": [ + { + "name": "click", "_ui5privacy": "public", "type": { - "text": "CustomEvent<BarcodeScannerDialogScanErrorEventDetail>", - "references": [ - { - "name": "BarcodeScannerDialogScanErrorEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/BarcodeScannerDialog.js" - } - ] + "text": "CustomEvent" }, - "description": "Fires when the scan fails with error.", + "description": "Fired when the `ui5-product-switch-item` is activated either with a\nclick/tap or by using the Enter or Space key.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "string" - }, - "name": "message", - "_ui5privacy": "public", - "description": "the error message" - } - ] + "_ui5Bubbles": true } ], "attributes": [ { - "description": "Indicates whether the dialog is open.", - "name": "open", - "default": "false", - "fieldName": "open", + "description": "Defines the title of the component.", + "name": "title-text", + "default": "undefined", + "fieldName": "titleText", "type": { - "text": "boolean" + "text": "string | undefined" + } + }, + { + "description": "Defines the subtitle of the component.", + "name": "subtitle-text", + "default": "undefined", + "fieldName": "subtitleText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the icon to be displayed as a graphical element within the component.\n\nExample:\n\n`<ui5-product-switch-item icon=\"palette\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines a target where the `targetSrc` content must be open.\n\nAvailable options are:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**Note:** By default target will be open in the same frame as it was clicked.", + "name": "target", + "default": "undefined", + "fieldName": "target", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the component target URI. Supports standard hyperlink behavior.", + "name": "target-src", + "default": "undefined", + "fieldName": "targetSrc", + "type": { + "text": "string | undefined" } } ], @@ -2458,10 +3343,17 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-barcode-scanner-dialog", + "tagName": "ui5-product-switch-item", "customElement": true, - "_ui5since": "1.0.0-rc.15", - "_ui5privacy": "public" + "_ui5since": "1.0.0-rc.5", + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IProductSwitchItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ProductSwitch.js" + } + ] } ], "exports": [ @@ -2469,203 +3361,414 @@ "kind": "js", "name": "default", "declaration": { - "name": "BarcodeScannerDialog", - "module": "dist/BarcodeScannerDialog.js" + "name": "ProductSwitchItem", + "module": "dist/ProductSwitchItem.js" } }, { "kind": "custom-element-definition", - "name": "ui5-barcode-scanner-dialog", + "name": "ui5-product-switch-item", "declaration": { - "name": "BarcodeScannerDialog", - "module": "dist/BarcodeScannerDialog.js" + "name": "ProductSwitchItem", + "module": "dist/ProductSwitchItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/DynamicPage.js", + "path": "dist/Search.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nA layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.\n\nThe component consist of several components:\n\n- `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`.\n- `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.\n- `Content area` - a generic container, which can have a single UI5 layout.\n- `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.\n\n### Usage\n\nUse the `DynamicPage` if you need to have a title, that is always visible\nand a header, that has configurable Expanding/Snapping functionality.\nIf you don't need the Expanding/Snapping functionality it is better to use the\n`ui5-page` as a lighter component.\n\nThe app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height),\nor content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user\nscroll through the content.\n\n## Notes:\n\n- Snapping of the `DynamicPageTitle` is not supported in the following case:\n - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.\n\n### Responsive Behavior\n\nDynamic page web component implements the responsive paddings design.\n\n### Keyboard Handling\n\n\n### Basic Navigation\n\n- [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated.\nIf focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header).\nIf focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).\n\n### Fast Navigation\n- This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up`.\nIn order to use this functionality, you need to import the following module:\n\n- `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/DynamicPage.js\";`", - "name": "DynamicPage", - "cssParts": [ - { - "description": "Used to style the content of the component", - "name": "content" - }, - { - "description": "Used to style the fit content container of the component.", - "name": "fit-content" - }, - { - "description": "Used to style the footer of the component", - "name": "footer" - } - ], + "description": "### Overview\n\nA `ui5-search` is an input with suggestions, used for user search.\n\nThe `ui5-search` consists of several elements parts:\n- Scope - displays a select in the beggining of the component, used for filtering results by their scope.\n- Input field - for user input value\n- Clear button - gives the possibility for deleting the entered value\n- Search button - a primary button for performing search, when the user has entered a search term\n- Suggestions - a list with available search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/Search.js\";`", + "name": "Search", "slots": [ { "name": "default", - "description": "Defines the content of the Dynamic Page.", - "_ui5propertyName": "content", + "description": "Defines the Search suggestion items.", + "_ui5propertyName": "items", "_ui5type": { - "text": "Array<HTMLElement>" + "text": "Array<SearchItem | SearchItemGroup>" }, "_ui5privacy": "public" }, { - "name": "titleArea", - "description": "Defines the title HTML Element.", - "_ui5type": { - "text": "Array<DynamicPageTitle>", + "name": "action", + "description": "Defines the popup footer action button.", + "_ui5type": { + "text": "Array<Button>", "references": [ { - "name": "DynamicPageTitle", - "package": "@ui5/webcomponents-fiori", - "module": "dist/DynamicPageTitle.js" + "name": "Button", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" } ] }, "_ui5privacy": "public" }, { - "name": "headerArea", - "description": "Defines the header HTML Element.", + "name": "illustration", + "description": "Defines the illustrated message to be shown in the popup.", "_ui5type": { - "text": "Array<DynamicPageHeader>", + "text": "Array<IllustratedMessage>", "references": [ { - "name": "DynamicPageHeader", + "name": "IllustratedMessage", "package": "@ui5/webcomponents-fiori", - "module": "dist/DynamicPageHeader.js" + "module": "dist/IllustratedMessage.js" } ] }, "_ui5privacy": "public" }, { - "name": "footerArea", - "description": "Defines the footer HTML Element.", + "name": "messageArea", + "description": "Defines the illustrated message to be shown in the popup.", "_ui5type": { - "text": "Array<HTMLElement>" + "text": "Array<SearchMessageArea>", + "references": [ + { + "name": "SearchMessageArea", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SearchMessageArea.js" + } + ] }, "_ui5privacy": "public" + }, + { + "name": "scopes", + "description": "Defines the component scope options.", + "_ui5type": { + "text": "Array<ISearchScope>", + "references": [ + { + "name": "ISearchScope", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SearchField.js" + } + ] + }, + "_ui5privacy": "public", + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, + { + "name": "filterButton", + "description": "Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive.", + "_ui5since": "2.11.0", + "_ui5type": { + "text": "Array<Button>", + "references": [ + { + "name": "Button", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "_ui5privacy": "public", + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } } ], "members": [ { "kind": "field", - "name": "hidePinButton", + "name": "loading", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the pin button is hidden.", + "description": "Indicates whether a loading indicator should be shown in the popup.", "privacy": "public" }, { "kind": "field", - "name": "headerPinned", + "name": "noTypeahead", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the header is pinned.", + "description": "Defines whether the value will be autcompleted to match an item.", "privacy": "public" }, { "kind": "field", - "name": "showFooter", + "name": "open", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the footer is shown.", + "description": "Indicates whether the items picker is open.", "privacy": "public" }, { "kind": "field", - "name": "headerSnapped", + "name": "showClearIcon", "type": { "text": "boolean" }, - "description": "Defines if the header is snapped.", "default": "false", - "privacy": "public" + "description": "Defines whether the clear icon of the search will be shown.", + "privacy": "public", + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", + "privacy": "public", + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, + { + "kind": "field", + "name": "placeholder", + "type": { + "text": "string | undefined" + }, + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "default": "undefined", + "privacy": "public", + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the component.", + "privacy": "public", + "default": "undefined", + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA description of the field.", + "privacy": "public", + "default": "undefined", + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } } ], "events": [ { - "name": "pin-button-toggle", + "name": "open", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the pin header button is toggled.", + "description": "Fired when the popup is opened.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "_ui5Bubbles": false }, { - "name": "title-toggle", + "name": "close", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the expand/collapse area of the title is toggled.", + "description": "Fired when the popup is closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "_ui5Bubbles": false + }, + { + "name": "input", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when typing in input or clear icon is pressed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, + { + "name": "scope-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<SearchFieldScopeSelectionChangeDetails>", + "references": [ + { + "name": "SearchFieldScopeSelectionChangeDetails", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SearchField.js" + } + ] + }, + "description": "Fired when the scope has changed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "scope", + "_ui5privacy": "public", + "description": "The newly selected scope" + } + ], + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, + { + "name": "search", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user has triggered search with Enter key or Search Button press.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } } ], "attributes": [ { - "description": "Defines if the pin button is hidden.", - "name": "hide-pin-button", + "description": "Indicates whether a loading indicator should be shown in the popup.", + "name": "loading", "default": "false", - "fieldName": "hidePinButton", + "fieldName": "loading", "type": { "text": "boolean" } }, { - "description": "Defines if the header is pinned.", - "name": "header-pinned", + "description": "Defines whether the value will be autcompleted to match an item.", + "name": "no-typeahead", "default": "false", - "fieldName": "headerPinned", + "fieldName": "noTypeahead", "type": { "text": "boolean" } }, { - "description": "Defines if the footer is shown.", - "name": "show-footer", + "description": "Indicates whether the items picker is open.", + "name": "open", "default": "false", - "fieldName": "showFooter", + "fieldName": "open", "type": { "text": "boolean" } }, { - "description": "Defines if the header is snapped.", - "name": "header-snapped", + "description": "Defines whether the clear icon of the search will be shown.", + "name": "show-clear-icon", "default": "false", - "fieldName": "headerSnapped", + "fieldName": "showClearIcon", "type": { - "text": "any" + "text": "boolean" + }, + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" } - } + }, + { + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + }, + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, + { + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "name": "placeholder", + "default": "undefined", + "fieldName": "placeholder", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, + { + "description": "Defines the accessible ARIA description of the field.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "SearchField", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SearchField.js" }, - "tagName": "ui5-dynamic-page", + "tagName": "ui5-search", "customElement": true, - "_ui5since": "2.0.0", + "_ui5experimental": true, + "_ui5since": "2.9.0", "_ui5privacy": "public" } ], @@ -2674,49 +3777,29 @@ "kind": "js", "name": "default", "declaration": { - "name": "DynamicPage", - "module": "dist/DynamicPage.js" + "name": "Search", + "module": "dist/Search.js" } }, { "kind": "custom-element-definition", - "name": "ui5-dynamic-page", + "name": "ui5-search", "declaration": { - "name": "DynamicPage", - "module": "dist/DynamicPage.js" + "name": "Search", + "module": "dist/Search.js" } } ] }, { "kind": "javascript-module", - "path": "dist/DynamicPageHeader.js", + "path": "dist/SearchField.js", "declarations": [ { - "kind": "class", - "description": "Header of the DynamicPage.\n\n### Overview\n\nThe DynamicPageHeader `ui5-dynamic-page-header` is part of the DynamicPage family\nand is used to serve as header of the `DynamicPage`.\n\n### Usage\n\nThe `DynamicPageHeader` can hold any layout control and has two states - expanded\nand collapsed (snapped). The switching between these states happens when:\n- the user scrolls below its bottom margin\n- the user clicks on the `DynamicPageTitle`\n- through the `DynamicPage` property `headerSnapped`\n\n### Responsive Behavior\n\nThe responsive behavior of the `DynamicPageHeader` depends on the behavior of the\ncontent that is displayed.\n\n### Accessibility\n\nThe `DynamicPageHeader` provides an accessible label for the header region.", - "name": "DynamicPageHeader", - "slots": [ - { - "name": "default", - "description": "Defines the content of the Dynamic Page Header.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-dynamic-page-header", - "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public", - "members": [] + "kind": "interface", + "name": "ISearchScope", + "description": "Interface for components that may be slotted inside a `ui5-search`", + "_ui5privacy": "public" } ], "exports": [ @@ -2724,143 +3807,182 @@ "kind": "js", "name": "default", "declaration": { - "name": "DynamicPageHeader", - "module": "dist/DynamicPageHeader.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-dynamic-page-header", - "declaration": { - "name": "DynamicPageHeader", - "module": "dist/DynamicPageHeader.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/DynamicPageHeaderActions.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "DynamicPageHeaderActions", - "module": "dist/DynamicPageHeaderActions.js" + "name": "SearchField", + "module": "dist/SearchField.js" } } ] }, { "kind": "javascript-module", - "path": "dist/DynamicPageTitle.js", + "path": "dist/SearchItem.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nTitle of the `DynamicPage`.\n\nThe `DynamicPageTitle` component is part of the `DynamicPage`\nfamily and is used to serve as title of the `DynamicPage`.\n\n### Usage\n\nThe `DynamicPageTitle` can hold any component and displays the most important\ninformation regarding the object that will always remain visible while scrolling.\n\n**Note:** The `actions` slot accepts any UI5 web component, but it's\nrecommended to use `ui5-toolbar`.\n\nThe user can switch between the expanded/collapsed states of the\n`DynamicPage` by clicking on the `DynamicPageTitle`\nor by using the expand/collapse visual indicators, positioned at the bottom of the\n`DynamicPageTitle` and the `DynamicPageHeader` inside `ui5-dynamic-page-header-actions`.\n\n### Responsive Behavior\n\nThe responsive behavior of the `DynamicPageTitle` depends on the behavior of the\ncontent that is displayed.", - "name": "DynamicPageTitle", + "description": "### Overview\n\nA `ui5-search-item` is a list item, used for displaying search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SearchItem.js\";`", + "name": "SearchItem", "slots": [ { - "name": "heading", - "description": "Defines the content of the Heading of the Dynamic Page.\n\nThe font size of the title within the `heading` slot can be adjusted to the recommended values using the following CSS variables:\n\n**Expanded:** `var(--sapObjectHeader_Title_FontSize)`\n\n**Collapsed:** `var(--sapObjectHeader_Title_SnappedFontSize)`", + "name": "image", + "description": "**Note:** While the slot allows the option of setting a custom avatar, to comply with the\ndesign guidelines, use the `ui5-avatar` with size - XS.", + "_ui5since": "2.12.0", "_ui5type": { "text": "Array<HTMLElement>" }, "_ui5privacy": "public" }, { - "name": "snappedHeading", - "description": "Defines the heading that is shown only when the header is snapped.", + "name": "actions", + "description": "Defines the actionable elements.\nThis slot allows placing additional interactive elements (such as buttons, icons, or tags)\nnext to the delete button, providing flexible customization for various user actions.\n\n**Note:** While the slot is flexible, for consistency with design guidelines,\nit's recommended to use `ui5-button` with `Transparent` design or `ui5-icon` elements.", + "_ui5since": "2.16.0", "_ui5type": { "text": "Array<HTMLElement>" }, "_ui5privacy": "public" - }, + } + ], + "members": [ { - "name": "snappedTitleOnMobile", - "description": "Defines the content of the snapped title on mobile devices.\n\nThis slot is displayed only when the `DynamicPageTitle` is in the snapped state on mobile devices.\nIt should be used to provide a simplified, single-line title that takes up less space on smaller screens.\n\n**Note:**\n- The content set in this slot **overrides** all other content set in the `DynamicPageTitle` slots when displayed.\n- The slot is intended for a single `ui5-title` component.", - "_ui5since": "2.3.0", - "_ui5type": { - "text": "Array<Title>", - "references": [ - { - "name": "Title", - "package": "@ui5/webcomponents", - "module": "dist/Title.js" - } - ] + "kind": "field", + "name": "text", + "type": { + "text": "string | undefined" }, - "_ui5privacy": "public" + "description": "Defines the heading text of the search item.", + "default": "undefined", + "privacy": "public" }, { - "name": "actionsBar", - "description": "Defines the bar with actions in the Dynamic page title.", - "_ui5type": { - "text": "Array<HTMLElement>" + "kind": "field", + "name": "description", + "type": { + "text": "string | undefined" }, - "_ui5privacy": "public" + "description": "Defines the description that appears right under the item text, if available.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.12.0" }, { - "name": "navigationBar", - "description": "Defines the bar with navigation actions in the Dynamic page title.", - "_ui5type": { - "text": "Array<Toolbar>", - "references": [ - { - "name": "Toolbar", - "package": "@ui5/webcomponents", - "module": "dist/Toolbar.js" - } - ] + "kind": "field", + "name": "icon", + "type": { + "text": "string | undefined" }, - "_ui5privacy": "public" + "description": "Defines the icon name of the search item.\n**Note:** If provided, the image slot will be ignored.", + "default": "undefined", + "privacy": "public" }, { - "name": "default", - "description": "Defines the content of the Dynamic page title.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<HTMLElement>" + "kind": "field", + "name": "selected", + "type": { + "text": "boolean" }, - "_ui5privacy": "public" + "default": "false", + "description": "Defines whether the search item is selected.", + "privacy": "public" }, { - "name": "subheading", - "description": "Defines the content of the title that is shown only when the header is not snapped.", - "_ui5type": { - "text": "Array<HTMLElement>" + "kind": "field", + "name": "deletable", + "type": { + "text": "boolean" }, - "_ui5privacy": "public" + "default": "false", + "description": "Defines whether the search item is deletable.", + "privacy": "public" }, { - "name": "snappedSubheading", - "description": "Defines the content of the title that is shown only when the header is snapped.", - "_ui5type": { - "text": "Array<HTMLElement>" + "kind": "field", + "name": "scopeName", + "type": { + "text": "string | undefined" }, - "_ui5privacy": "public" - }, + "description": "Defines the scope of the search item", + "default": "undefined", + "privacy": "public" + } + ], + "events": [ { - "name": "breadcrumbs", - "description": "Defines the content of the breadcrumbs inside Dynamic Page Title.", - "_ui5type": { - "text": "Array<HTMLElement>" + "name": "delete", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" }, - "_ui5privacy": "public" + "description": "Fired when delete button is pressed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false } ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "attributes": [ + { + "description": "Defines the heading text of the search item.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the description that appears right under the item text, if available.", + "name": "description", + "default": "undefined", + "fieldName": "description", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the icon name of the search item.\n**Note:** If provided, the image slot will be ignored.", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether the search item is selected.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the search item is deletable.", + "name": "deletable", + "default": "false", + "fieldName": "deletable", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the scope of the search item", + "name": "scope-name", + "default": "undefined", + "fieldName": "scopeName", + "type": { + "text": "string | undefined" + } + } + ], + "superclass": { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" }, - "tagName": "ui5-dynamic-page-title", + "tagName": "ui5-search-item", "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public", - "members": [] + "_ui5experimental": true, + "_ui5since": "2.9.0", + "_ui5privacy": "public" } ], "exports": [ @@ -2868,285 +3990,303 @@ "kind": "js", "name": "default", "declaration": { - "name": "DynamicPageTitle", - "module": "dist/DynamicPageTitle.js" + "name": "SearchItem", + "module": "dist/SearchItem.js" } }, { "kind": "custom-element-definition", - "name": "ui5-dynamic-page-title", + "name": "ui5-search-item", "declaration": { - "name": "DynamicPageTitle", - "module": "dist/DynamicPageTitle.js" + "name": "SearchItem", + "module": "dist/SearchItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/DynamicSideContent.js", + "path": "dist/SearchItemGroup.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe DynamicSideContent (`ui5-dynamic-side-content`) is a layout component that allows additional content\nto be displayed in a way that flexibly adapts to different screen sizes. The side\ncontent appears in a container next to or directly below the main content\n(it doesn't overlay). When the side content is triggered, the main content becomes\nnarrower (if appearing side-by-side). The side content contains a separate scrollbar\nwhen appearing next to the main content.\n\n### Usage\n\n*When to use?*\n\nUse this component if you want to display relevant information that is not critical\nfor users to complete a task. Users should have access to all the key functions and\ncritical information in the app even if they do not see the side content. This is\nimportant because on smaller screen sizes it may be difficult to display the side\ncontent in a way that is easily accessible for the user.\n\n*When not to use?*\n\nDon't use it if you want to display navigation or critical information that prevents\nusers from completing a task when they have no access to the side content.\n\n### Responsive Behavior\n\nScreen width \\> 1440px\n\n- Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px\neach).\n- If the application defines a trigger, the side content can be hidden.\n\nScreen width \\<\\= 1440px and \\> 1024px\n\n- Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of\n320px each). If the side content width falls below 320 px, it automatically slides\nunder the main content, unless the app development team specifies that it should\ndisappear.\n\nScreen width \\<\\= 1024px and \\> 720px\n\n- The side content ratio is fixed to 340px, and the main content takes the rest\nof the width. Only if the `sideContentFallDown` is set to `OnMinimumWidth`\nand screen width is \\<\\= 960px and \\> 720px the side content falls below the main content.\n\nScreen width \\<\\= 720px (for example on a mobile device)\n\n- In this case, the side content automatically disappears from the screen (unless\nspecified to stay under the content by setting of `sideContentVisibility`\nproperty to `AlwaysShow`) and can be triggered from a pre-set trigger\n(specified within the app). When the side content is triggered, it replaces the main\ncontent. We recommend that you always place the trigger for the side content in the\nsame location, such as in the app footer.\n\nA special case allows switching the comparison mode between the main and side content.\nIn this case, the screen is split into 50:50 percent for main vs. side content. The\nresponsive behavior of the equal split is the same as in the standard view - the\nside content disappears on screen widths of less than 720 px and can only be\nviewed by triggering it.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/DynamicSideContent.js\";`", - "name": "DynamicSideContent", - "slots": [ - { - "description": "Defines the main content.", - "name": "default", - "_ui5privacy": "public", - "_ui5type": { - "text": "Array<HTMLElement>" - } - }, - { - "name": "sideContent", - "description": "Defines the side content.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - } - ], + "description": "The `ui5-search-item-group` is type of suggestion item,\nthat can be used to split the `ui5-search-item` suggestions into groups.", + "name": "SearchItemGroup", + "superclass": { + "name": "ListItemGroup", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + }, + "tagName": "ui5-search-item-group", + "customElement": true, + "_ui5experimental": true, + "_ui5since": "2.9.0", + "_ui5privacy": "public", "members": [ { "kind": "field", - "name": "hideMainContent", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the visibility of the main content.", - "privacy": "public" - }, - { - "kind": "field", - "name": "hideSideContent", + "name": "headerText", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines the visibility of the side content.", - "privacy": "public" + "description": "Defines the header text of the <code>ui5-li-group</code>.", + "privacy": "public", + "default": "undefined" }, { "kind": "field", - "name": "sideContentPosition", + "name": "headerAccessibleName", "type": { - "text": "SideContentPosition", - "references": [ - { - "name": "SideContentPosition", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/SideContentPosition.js" - } - ] + "text": "string | undefined" }, - "default": "\"End\"", - "description": "Defines whether the side content is positioned before the main content (left side\nin LTR mode), or after the the main content (right side in LTR mode).", - "privacy": "public" + "description": "Defines the accessible name of the header.", + "privacy": "public", + "default": "undefined" }, { "kind": "field", - "name": "sideContentVisibility", + "name": "wrappingType", "type": { - "text": "SideContentVisibility", + "text": "WrappingType", "references": [ { - "name": "SideContentVisibility", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/SideContentVisibility.js" + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" } ] }, - "default": "\"ShowAboveS\"", - "description": "Defines on which breakpoints the side content is visible.", - "privacy": "public" - }, + "default": "\"None\"", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "privacy": "public", + "_ui5since": "2.15.0" + } + ], + "slots": [ { - "kind": "field", - "name": "sideContentFallDown", - "type": { - "text": "SideContentFallDown", + "name": "default", + "description": "Defines the items of the <code>ui5-li-group</code>.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<ListItemBase>", "references": [ { - "name": "SideContentFallDown", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/SideContentFallDown.js" + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" } ] }, - "default": "\"OnMinimumWidth\"", - "description": "Defines on which breakpoints the side content falls down below the main content.", - "privacy": "public" - }, - { - "kind": "field", - "name": "equalSplit", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is in equal split mode. In this mode, the side and\nthe main content take 50:50 percent of the container on all screen sizes\nexcept for phone, where the main and side contents are switching visibility\nusing the toggle method.", - "privacy": "public" + "_ui5privacy": "public" }, { - "kind": "field", - "name": "accessibilityAttributes", - "type": { - "text": "DynamicSideContentAccessibilityAttributes", + "name": "header", + "description": "Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.", + "_ui5type": { + "text": "Array<ListItemBase>", "references": [ { - "name": "DynamicSideContentAccessibilityAttributes", - "package": "@ui5/webcomponents-fiori", - "module": "dist/DynamicSideContent.js" + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" } ] }, - "default": "{}", - "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.\n - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.", - "privacy": "public", - "_ui5since": "2.6.0" - }, - { - "kind": "method", - "name": "toggleContents", - "return": { - "type": { - "text": "void" - } - }, - "description": "Toggles visibility of main and side contents on S screen size (mobile device).", - "privacy": "public" + "_ui5privacy": "public" } ], "events": [ { - "name": "layout-change", + "name": "move-over", "_ui5privacy": "public", "type": { - "text": "CustomEvent<DynamicSideContentLayoutChangeEventDetail>", + "text": "CustomEvent<ListItemGroupMoveEventDetail>", "references": [ { - "name": "DynamicSideContentLayoutChangeEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/DynamicSideContent.js" + "name": "ListItemGroupMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" } ] }, - "description": "Fires when the current breakpoint has been changed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, + "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, "_ui5Bubbles": true, + "_ui5since": "2.1.0", "_ui5parameters": [ { "type": { - "text": "string" + "text": "object" }, - "name": "currentBreakpoint", + "name": "source", "_ui5privacy": "public", - "description": "the current breakpoint." + "description": "Contains information about the moved element under `element` property." }, { "type": { - "text": "string | undefined" + "text": "object" }, - "name": "previousBreakpoint", + "name": "destination", "_ui5privacy": "public", - "description": "the breakpoint that was active before change to current breakpoint." - }, + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + } + ] + }, + { + "name": "move", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListItemGroupMoveEventDetail>", + "references": [ + { + "name": "ListItemGroupMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + } + ] + }, + "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.1.0", + "_ui5parameters": [ { "type": { - "text": "boolean" + "text": "object" }, - "name": "mainContentVisible", + "name": "source", "_ui5privacy": "public", - "description": "visibility of the main content." + "description": "Contains information about the moved element under `element` property." }, { "type": { - "text": "boolean" + "text": "object" }, - "name": "sideContentVisible", + "name": "destination", "_ui5privacy": "public", - "description": "visibility of the side content." + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." } ] } ], - "attributes": [ + "cssParts": [ { - "description": "Defines the visibility of the main content.", - "name": "hide-main-content", - "default": "false", - "fieldName": "hideMainContent", - "type": { - "text": "boolean" - } - }, + "description": "Used to style the header item of the group", + "name": "header" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "SearchItemGroup", + "module": "dist/SearchItemGroup.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-search-item-group", + "declaration": { + "name": "SearchItemGroup", + "module": "dist/SearchItemGroup.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/SearchItemShowMore.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nA `ui5-search-item-show-more` is a special type of ui5-li that acts as a button to progressively reveal additional (overflow) items within a group.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SearchItemShowMore.js\";`", + "name": "SearchItemShowMore", + "members": [ { - "description": "Defines the visibility of the side content.", - "name": "hide-side-content", - "default": "false", - "fieldName": "hideSideContent", + "kind": "field", + "name": "itemsToShowCount", "type": { - "text": "boolean" - } + "text": "number | undefined" + }, + "description": "Specifies the number of additional items available to show.\nThis value replaces the placeholder (N) in the \"Show more (N)\" text.\nIf not set, the placeholder will remain as (N).", + "privacy": "public", + "default": "undefined" }, { - "description": "Defines whether the side content is positioned before the main content (left side\nin LTR mode), or after the the main content (right side in LTR mode).", - "name": "side-content-position", - "default": "\"End\"", - "fieldName": "sideContentPosition", + "kind": "field", + "name": "selected", "type": { - "text": "\"End\" | \"Start\"" - } - }, + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the show more item is selected.", + "privacy": "public" + } + ], + "events": [ { - "description": "Defines on which breakpoints the side content is visible.", - "name": "side-content-visibility", - "default": "\"ShowAboveS\"", - "fieldName": "sideContentVisibility", + "name": "click", + "_ui5privacy": "public", "type": { - "text": "\"AlwaysShow\" | \"ShowAboveL\" | \"ShowAboveM\" | \"ShowAboveS\" | \"NeverShow\"" - } - }, + "text": "CustomEvent<ShowMoreItemClickEventDetail>", + "references": [ + { + "name": "ShowMoreItemClickEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SearchItemShowMore.js" + } + ] + }, + "description": "Fired when the component is activated, either with a mouse/tap\nor by pressing the Enter or Space keys.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "fromKeyboard", + "_ui5privacy": "public", + "description": "Indicates whether the event was fired\ndue to keyboard interaction (Enter or Space) rather than mouse/tap." + } + ] + } + ], + "attributes": [ { - "description": "Defines on which breakpoints the side content falls down below the main content.", - "name": "side-content-fall-down", - "default": "\"OnMinimumWidth\"", - "fieldName": "sideContentFallDown", + "description": "Specifies the number of additional items available to show.\nThis value replaces the placeholder (N) in the \"Show more (N)\" text.\nIf not set, the placeholder will remain as (N).", + "name": "items-to-show-count", + "default": "undefined", + "fieldName": "itemsToShowCount", "type": { - "text": "\"BelowXL\" | \"BelowL\" | \"BelowM\" | \"OnMinimumWidth\"" + "text": "number | undefined" } }, { - "description": "Defines whether the component is in equal split mode. In this mode, the side and\nthe main content take 50:50 percent of the container on all screen sizes\nexcept for phone, where the main and side contents are switching visibility\nusing the toggle method.", - "name": "equal-split", + "description": "Defines whether the show more item is selected.", + "name": "selected", "default": "false", - "fieldName": "equalSplit", + "fieldName": "selected", "type": { "text": "boolean" } - }, - { - "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.\n - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", - "type": { - "text": "DynamicSideContentAccessibilityAttributes" - } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" }, - "tagName": "ui5-dynamic-side-content", + "tagName": "ui5-search-item-show-more", "customElement": true, - "_ui5since": "1.1.0", + "_ui5experimental": true, + "_ui5since": "2.14.0", "_ui5privacy": "public" } ], @@ -3155,45 +4295,28 @@ "kind": "js", "name": "default", "declaration": { - "name": "DynamicSideContent", - "module": "dist/DynamicSideContent.js" + "name": "SearchItemShowMore", + "module": "dist/SearchItemShowMore.js" } }, { "kind": "custom-element-definition", - "name": "ui5-dynamic-side-content", + "name": "ui5-search-item-show-more", "declaration": { - "name": "DynamicSideContent", - "module": "dist/DynamicSideContent.js" + "name": "SearchItemShowMore", + "module": "dist/SearchItemShowMore.js" } } ] }, { "kind": "javascript-module", - "path": "dist/FilterItem.js", + "path": "dist/SearchMessageArea.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-filter-item` component defines the filtering criteria for data in `ui5-view-settings-dialog`.\nIt represents a single filter category that contains multiple filter options that users can select.\n\n### Usage\n\nThe `ui5-filter-item` is used within the `ui5-view-settings-dialog` to provide filtering options.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`", - "name": "FilterItem", - "slots": [ - { - "name": "values", - "description": "Defines the filter options available for this filter category.", - "_ui5type": { - "text": "Array<FilterItemOption>", - "references": [ - { - "name": "FilterItemOption", - "package": "@ui5/webcomponents-fiori", - "module": "dist/FilterItemOption.js" - } - ] - }, - "_ui5privacy": "public" - } - ], + "description": "`import \"@ui5/webcomponents-fiori/dist/SearchMessageArea.js\";`", + "name": "SearchMessageArea", "members": [ { "kind": "field", @@ -3201,24 +4324,24 @@ "type": { "text": "string | undefined" }, - "description": "Defines the text of the filter item.", + "description": "Defines the text to be displayed.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "additionalText", + "name": "description", "type": { "text": "string | undefined" }, - "description": "Defines the additional text of the filter item.\nThis text is typically used to show the number of selected filter options within this category.", + "description": "Defines the description text to be displayed.", "default": "undefined", "privacy": "public" } ], "attributes": [ { - "description": "Defines the text of the filter item.", + "description": "Defines the text to be displayed.", "name": "text", "default": "undefined", "fieldName": "text", @@ -3227,10 +4350,10 @@ } }, { - "description": "Defines the additional text of the filter item.\nThis text is typically used to show the number of selected filter options within this category.", - "name": "additional-text", + "description": "Defines the description text to be displayed.", + "name": "description", "default": "undefined", - "fieldName": "additionalText", + "fieldName": "description", "type": { "text": "string | undefined" } @@ -3241,11 +4364,11 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-filter-item", + "tagName": "ui5-search-message-area", "customElement": true, - "_ui5since": "1.0.0-rc.16", - "_ui5privacy": "public", - "_ui5abstract": true + "_ui5experimental": true, + "_ui5since": "2.9.0", + "_ui5privacy": "public" } ], "exports": [ @@ -3253,37 +4376,37 @@ "kind": "js", "name": "default", "declaration": { - "name": "FilterItem", - "module": "dist/FilterItem.js" + "name": "SearchMessageArea", + "module": "dist/SearchMessageArea.js" } }, { "kind": "custom-element-definition", - "name": "ui5-filter-item", + "name": "ui5-search-message-area", "declaration": { - "name": "FilterItem", - "module": "dist/FilterItem.js" + "name": "SearchMessageArea", + "module": "dist/SearchMessageArea.js" } } ] }, { "kind": "javascript-module", - "path": "dist/FilterItemOption.js", + "path": "dist/SearchScope.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-filter-item-option` component defines individual filter values within a `ui5-filter-item`.\nIt represents a single selectable option that users can choose to filter data.\n\n### Usage\n\nThe `ui5-filter-item-option` is used as a child component within `ui5-filter-item` in the context\nof `ui5-view-settings-dialog`. Each option represents a specific value that can be used for filtering\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/FilterItemOption.js\";`", - "name": "FilterItemOption", + "description": "The `ui5-search-scope` represents the options for the scope in `ui5-search`.", + "name": "SearchScope", "members": [ { "kind": "field", "name": "text", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Defines the text of the filter option.", - "default": "undefined", + "description": "Defines the text of the component.", + "default": "\"\"", "privacy": "public" }, { @@ -3292,23 +4415,23 @@ "type": { "text": "boolean" }, + "description": "Indicates whether the item is selected", "default": "false", - "description": "Defines if the filter option is selected.", "privacy": "public" } ], "attributes": [ { - "description": "Defines the text of the filter option.", + "description": "Defines the text of the component.", "name": "text", - "default": "undefined", + "default": "\"\"", "fieldName": "text", "type": { - "text": "string | undefined" + "text": "string" } }, { - "description": "Defines if the filter option is selected.", + "description": "Indicates whether the item is selected", "name": "selected", "default": "false", "fieldName": "selected", @@ -3322,11 +4445,19 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-filter-item-option", + "tagName": "ui5-search-scope", "customElement": true, - "_ui5since": "1.0.0-rc.16", + "_ui5experimental": true, + "_ui5since": "2.9.0", "_ui5privacy": "public", - "_ui5abstract": true + "_ui5abstract": true, + "_ui5implements": [ + { + "name": "ISearchScope", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SearchField.js" + } + ] } ], "exports": [ @@ -3334,48 +4465,151 @@ "kind": "js", "name": "default", "declaration": { - "name": "FilterItemOption", - "module": "dist/FilterItemOption.js" + "name": "SearchScope", + "module": "dist/SearchScope.js" } }, { "kind": "custom-element-definition", - "name": "ui5-filter-item-option", + "name": "ui5-search-scope", "declaration": { - "name": "FilterItemOption", - "module": "dist/FilterItemOption.js" + "name": "SearchScope", + "module": "dist/SearchScope.js" } } ] }, { "kind": "javascript-module", - "path": "dist/FlexibleColumnLayout.js", + "path": "dist/ShellBar.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `FlexibleColumnLayout` implements the list-detail-detail paradigm by displaying up to three pages in separate columns.\nThere are several possible layouts that can be changed either with the component API, or by dragging the column separators.\n\n### Usage\n\nUse this component for applications that need to display several logical levels of related information side by side (e.g. list of items, item, sub-item, etc.).\nThe Component is flexible in a sense that the application can focus the user's attention on one particular column.\n\n### Responsive Behavior\n\nThe `FlexibleColumnLayout` automatically displays the maximum possible number of columns based on `layout` property and the window size.\nThe component would display 1 column for window size smaller than 599px, up to two columns between 599px and 1023px,\nand 3 columns for sizes bigger than 1023px.\n\n**Note:** When the component displays more than one column, the minimal width of each column is 248px. Consequently, when the user drags a column separator to resize the columns, the minimal allowed width of any resized column is 248px.\n\n### Keyboard Handling\n\n#### Basic Navigation\n\nWhen a column separator is focused, the following keyboard\nshortcuts allow the user to resize the columns and change the layout:\n\n- [Shift] + [Left] or [Shift] + [Right] - Moves the separator to the left or right, which resizes the columns accordingly.\n- [Left] or [Right] - Moves the separator to the left or right with a bigger step, which resizes the columns accordingly.\n- [Home] - Moves the separator to the start position.\n- [End] - Moves the separator to the end position.\n- This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js\";`", - "name": "FlexibleColumnLayout", + "description": "### Overview\n\nThe `ui5-shellbar` is meant to serve as an application header\nand includes numerous built-in features, such as: logo, profile image/icon, title, search field, notifications and so on.\n\n### Stable DOM Refs\n\nYou can use the following stable DOM refs for the `ui5-shellbar`:\n\n- logo\n- notifications\n- overflow\n- profile\n- product-switch\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ShellBar.js\";`", + "name": "ShellBar", + "cssParts": [ + { + "description": "Used to style the outermost wrapper of the `ui5-shellbar`", + "name": "root" + } + ], "slots": [ { - "name": "startColumn", - "description": "Defines the content in the start column.", + "name": "assistant", + "description": "Defines the assistant slot.", + "_ui5since": "2.0.0", + "_ui5type": { + "text": "Array<IButton>", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "branding", + "description": "Defines the branding slot.\nThe `ui5-shellbar-branding` component is intended to be placed inside this slot.\nContent placed here takes precedence over the `primaryTitle` property and the `logo` content slot.\n\n**Note:** The `branding` slot is in an experimental state and is a subject to change.", + "_ui5since": "2.12.0", + "_ui5type": { + "text": "Array<ShellBarBranding>", + "references": [ + { + "name": "ShellBarBranding", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ShellBarBranding.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "default", + "description": "Defines the `ui5-shellbar` additional items.\n\n**Note:**\nYou can use the `<ui5-shellbar-item></ui5-shellbar-item>`.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<ShellBarItem>", + "references": [ + { + "name": "ShellBarItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ShellBarItem.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "profile", + "description": "You can pass `ui5-avatar` to set the profile image/icon.\nIf no profile slot is set - profile will be excluded from actions.\n\n**Note:** We recommend not using the `size` attribute of `ui5-avatar` because\nit should have specific size by design in the context of `ui5-shellbar` profile.", + "_ui5since": "1.0.0-rc.6", "_ui5type": { "text": "Array<HTMLElement>" }, "_ui5privacy": "public" }, { - "name": "midColumn", - "description": "Defines the content in the middle column.", + "name": "logo", + "description": "Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo.", + "_ui5since": "1.0.0-rc.8", "_ui5type": { "text": "Array<HTMLElement>" }, "_ui5privacy": "public" }, { - "name": "endColumn", - "description": "Defines the content in the end column.", + "name": "menuItems", + "description": "Defines the items displayed in menu after a click on a start button.\n\n**Note:** You can use the `<ui5-li></ui5-li>` and its ancestors.", + "_ui5since": "0.10", + "_ui5type": { + "text": "Array<ListItemBase>", + "references": [ + { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "searchField", + "description": "Defines the `ui5-input`, that will be used as a search field.", + "_ui5type": { + "text": "Array<IShellBarSearchField>", + "references": [ + { + "name": "IShellBarSearchField", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ShellBar.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "startButton", + "description": "Defines a `ui5-button` in the bar that will be placed in the beginning.\nWe encourage this slot to be used for a menu button.\nIt gets overstyled to match ShellBar's styling.", + "_ui5type": { + "text": "Array<IButton>", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "content", + "description": "Define the items displayed in the content area.\n\nUse the `data-hide-order` attribute with numeric value to specify the order of the items to be hidden when the space is not enough.\nLower values will be hidden first.\n\n**Note:** The `content` slot is in an experimental state and is a subject to change.", + "_ui5since": "2.7.0", "_ui5type": { "text": "Array<HTMLElement>" }, @@ -3385,559 +4619,580 @@ "members": [ { "kind": "field", - "name": "layout", + "name": "hideSearchButton", "type": { - "text": "FCLLayout", - "references": [ - { - "name": "FCLLayout", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/FCLLayout.js" - } - ] + "text": "boolean" }, - "default": "\"OneColumn\"", - "description": "Defines the columns layout and their proportion.\n\n**Note:** The layout also depends on the screen size - one column for screens smaller than 599px,\ntwo columns between 599px and 1023px and three columns for sizes bigger than 1023px.\n\n**For example:** layout=`TwoColumnsStartExpanded` means the layout will display up to two columns\nin 67%/33% proportion.", + "default": "false", + "description": "Defines the visibility state of the search button.\n\n**Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.", "privacy": "public" }, { "kind": "field", - "name": "disableResizing", + "name": "disableSearchCollapse", "type": { "text": "boolean" }, "default": "false", - "description": "Specifies if the user is allowed to change the columns layout by dragging the separator between the columns.", - "privacy": "public", - "_ui5since": "2.0.0" + "description": "Disables the automatic search field expansion/collapse when the available space is not enough.\n\n**Note:** The `disableSearchCollapse` property is in an experimental state and is a subject to change.", + "privacy": "public" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "primaryTitle", "type": { - "text": "FCLAccessibilityAttributes", - "references": [ - { - "name": "FCLAccessibilityAttributes", - "package": "@ui5/webcomponents-fiori", - "module": "dist/FlexibleColumnLayout.js" - } - ] + "text": "string | undefined" }, - "default": "{}", - "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n - **startColumn**: `startColumn.role` and `startColumn.name`.\n - **midColumn**: `midColumn.role` and `midColumn.name`.\n - **endColumn**: `endColumn.role` and `endColumn.name`.\n - **startSeparator**: `startSeparator.role` and `startSeparator.name`.\n - **endSeparator**: `endSeparator.role` and `endSeparator.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA landmark role of the area.\nAccepts the following values: `none`, `complementary`, `contentinfo`, `main` or `region`.\n\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.", - "privacy": "public", - "_ui5since": "2.0.0" + "description": "Defines the `primaryTitle`.\n\n**Note:** The `primaryTitle` would be hidden on S screen size (less than approx. 700px).", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "columnLayout", + "name": "secondaryTitle", "type": { - "text": "FlexibleColumnLayoutColumnLayout | undefined", - "references": [ - { - "name": "FlexibleColumnLayoutColumnLayout", - "package": "@ui5/webcomponents-fiori", - "module": "dist/FlexibleColumnLayout.js" - } - ] + "text": "string | undefined" }, - "description": "Returns the current column layout, based on both the `layout` property and the screen size.\n\n**For example:** [\"67%\", \"33%\", 0], [\"100%\", 0, 0], [\"25%\", \"50%\", \"25%\"], etc,\nwhere the numbers represents the width of the start, middle and end columns.", + "description": "Defines the `secondaryTitle`.\n\n**Note:** The `secondaryTitle` would be hidden on S and M screen sizes (less than approx. 1300px).", "default": "undefined", - "privacy": "public", - "readonly": true + "privacy": "public" }, { "kind": "field", - "name": "startColumnVisible", + "name": "notificationsCount", "type": { - "text": "boolean" + "text": "string | undefined" }, - "description": "Returns if the `start` column is visible.", - "default": "true", - "privacy": "public", - "readonly": true + "description": "Defines the `notificationsCount`,\ndisplayed in the notification icon top-right corner.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "midColumnVisible", + "name": "showNotifications", "type": { "text": "boolean" }, - "description": "Returns if the `middle` column is visible.", "default": "false", - "privacy": "public", - "readonly": true + "description": "Defines, if the notification icon would be displayed.", + "privacy": "public" }, { "kind": "field", - "name": "endColumnVisible", + "name": "showProductSwitch", "type": { "text": "boolean" }, - "description": "Returns if the `end` column is visible.", "default": "false", - "privacy": "public", - "readonly": true + "description": "Defines, if the product switch icon would be displayed.", + "privacy": "public" }, { "kind": "field", - "name": "visibleColumns", + "name": "showSearchField", "type": { - "text": "number" + "text": "boolean" }, - "description": "Returns the number of currently visible columns.", - "default": "1", - "privacy": "public", - "readonly": true - } - ], - "events": [ + "default": "false", + "description": "Defines, if the Search Field would be displayed when there is a valid `searchField` slot.\n\n**Note:** By default the Search Field is not displayed.", + "privacy": "public" + }, { - "name": "layout-change", - "_ui5privacy": "public", + "kind": "field", + "name": "accessibilityAttributes", "type": { - "text": "CustomEvent<FlexibleColumnLayoutLayoutChangeEventDetail>", + "text": "ShellBarAccessibilityAttributes", "references": [ { - "name": "FlexibleColumnLayoutLayoutChangeEventDetail", + "name": "ShellBarAccessibilityAttributes", "package": "@ui5/webcomponents-fiori", - "module": "dist/FlexibleColumnLayout.js" + "module": "dist/ShellBar.js" } ] }, - "description": "Fired when the layout changes via user interaction by dragging the separators\nor by changing the component size due to resizing.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "FCLLayout", - "references": [ - { - "name": "FCLLayout", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/FCLLayout.js" - } - ] - }, - "name": "layout", - "_ui5privacy": "public", - "description": "The current layout" - }, - { - "type": { - "text": "array" - }, - "name": "columnLayout", - "_ui5privacy": "public", - "description": "The effective column layout, f.e [67%, 33%, 0]" - }, - { - "type": { - "text": "boolean" - }, - "name": "startColumnVisible", - "_ui5privacy": "public", - "description": "Indicates if the start column is currently visible" - }, - { - "type": { - "text": "boolean" - }, - "name": "midColumnVisible", - "_ui5privacy": "public", - "description": "Indicates if the middle column is currently visible" - }, - { - "type": { - "text": "boolean" - }, - "name": "endColumnVisible", - "_ui5privacy": "public", - "description": "Indicates if the end column is currently visible" - }, - { - "type": { - "text": "boolean" - }, - "name": "separatorsUsed", - "_ui5privacy": "public", - "description": "Indicates if the layout was changed by dragging the column separators" - }, - { - "type": { - "text": "boolean" - }, - "name": "resized", - "_ui5privacy": "public", - "description": "Indicates if the layout was changed by resizing the entire component" - } - ] - } - ], - "attributes": [ - { - "description": "Defines the columns layout and their proportion.\n\n**Note:** The layout also depends on the screen size - one column for screens smaller than 599px,\ntwo columns between 599px and 1023px and three columns for sizes bigger than 1023px.\n\n**For example:** layout=`TwoColumnsStartExpanded` means the layout will display up to two columns\nin 67%/33% proportion.", - "name": "layout", - "default": "\"OneColumn\"", - "fieldName": "layout", - "type": { - "text": "\"OneColumn\" | \"TwoColumnsStartExpanded\" | \"TwoColumnsMidExpanded\" | \"ThreeColumnsMidExpanded\" | \"ThreeColumnsEndExpanded\" | \"ThreeColumnsStartExpandedEndHidden\" | \"ThreeColumnsMidExpandedEndHidden\" | \"ThreeColumnsStartHiddenMidExpanded\" | \"ThreeColumnsStartHiddenEndExpanded\" | \"MidColumnFullScreen\" | \"EndColumnFullS..." - } - }, - { - "description": "Specifies if the user is allowed to change the columns layout by dragging the separator between the columns.", - "name": "disable-resizing", - "default": "false", - "fieldName": "disableResizing", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n - **startColumn**: `startColumn.role` and `startColumn.name`.\n - **midColumn**: `midColumn.role` and `midColumn.name`.\n - **endColumn**: `endColumn.role` and `endColumn.name`.\n - **startSeparator**: `startSeparator.role` and `startSeparator.name`.\n - **endSeparator**: `endSeparator.role` and `endSeparator.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA landmark role of the area.\nAccepts the following values: `none`, `complementary`, `contentinfo`, `main` or `region`.\n\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.", - "name": "accessibility-attributes", "default": "{}", - "fieldName": "accessibilityAttributes", - "type": { - "text": "FCLAccessibilityAttributes" - } + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n- **logo** - `logo.role` and `logo.name`.\n- **notifications** - `notifications.expanded` and `notifications.hasPopup`.\n- **profile** - `profile.expanded`, `profile.hasPopup` and `profile.name`.\n- **product** - `product.expanded` and `product.hasPopup`.\n- **search** - `search.hasPopup`.\n- **overflow** - `overflow.expanded` and `overflow.hasPopup`.\n- **branding** - `branding.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA role of the logo area.\nAccepts the following string values: `button` or `link`.\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.", + "privacy": "public", + "_ui5since": "1.10.0" }, { - "description": "Returns the current column layout, based on both the `layout` property and the screen size.\n\n**For example:** [\"67%\", \"33%\", 0], [\"100%\", 0, 0], [\"25%\", \"50%\", \"25%\"], etc,\nwhere the numbers represents the width of the start, middle and end columns.", - "name": "column-layout", - "default": "undefined", - "fieldName": "columnLayout", - "type": { - "text": "any" - } + "kind": "method", + "name": "closeOverflow", + "return": { + "type": { + "text": "void" + } + }, + "description": "Closes the overflow area.\nUseful to manually close the overflow after having suppressed automatic closing with preventDefault() of ShellbarItem's press event", + "privacy": "public" }, { - "description": "Returns if the `start` column is visible.", - "name": "start-column-visible", - "default": "true", - "fieldName": "startColumnVisible", + "kind": "field", + "name": "logoDomRef", "type": { - "text": "any" - } + "text": "HTMLElement | null" + }, + "description": "Returns the `logo` DOM ref.", + "privacy": "public", + "default": "null", + "readonly": true, + "_ui5since": "1.0.0-rc.16" }, { - "description": "Returns if the `middle` column is visible.", - "name": "mid-column-visible", - "default": "false", - "fieldName": "midColumnVisible", + "kind": "field", + "name": "notificationsDomRef", "type": { - "text": "any" - } + "text": "HTMLElement | null" + }, + "description": "Returns the `notifications` icon DOM ref.", + "privacy": "public", + "default": "null", + "readonly": true, + "_ui5since": "1.0.0-rc.16" }, { - "description": "Returns if the `end` column is visible.", - "name": "end-column-visible", - "default": "false", - "fieldName": "endColumnVisible", + "kind": "field", + "name": "overflowDomRef", "type": { - "text": "any" - } + "text": "HTMLElement | null" + }, + "description": "Returns the `overflow` icon DOM ref.", + "privacy": "public", + "default": "null", + "readonly": true, + "_ui5since": "1.0.0-rc.16" }, - { - "description": "Returns the number of currently visible columns.", - "name": "visible-columns", - "default": "1", - "fieldName": "visibleColumns", - "type": { - "text": "any" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-flexible-column-layout", - "customElement": true, - "_ui5since": "1.0.0-rc.8", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "FlexibleColumnLayout", - "module": "dist/FlexibleColumnLayout.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-flexible-column-layout", - "declaration": { - "name": "FlexibleColumnLayout", - "module": "dist/FlexibleColumnLayout.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/GroupItem.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-group-item` component defines the grouping criteria for data in `ui5-view-settings-dialog`.\nIt represents a single group option that users can select to organize data into logical groups.\n\n### Usage\n\nThe `ui5-group-item` is used within the `ui5-view-settings-dialog` to provide grouping options.\nEach group item represents a column or field by which data can be grouped.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`", - "name": "GroupItem", - "members": [ { "kind": "field", - "name": "text", + "name": "profileDomRef", "type": { - "text": "string | undefined" + "text": "HTMLElement | null" }, - "description": "Defines the text of the group item.", - "default": "undefined", - "privacy": "public" + "description": "Returns the `profile` icon DOM ref.", + "privacy": "public", + "default": "null", + "readonly": true, + "_ui5since": "1.0.0-rc.16" }, { "kind": "field", - "name": "selected", + "name": "productSwitchDomRef", "type": { - "text": "boolean" + "text": "HTMLElement | null" }, - "default": "false", - "description": "Defines if the group item is selected.", - "privacy": "public" + "description": "Returns the `product-switch` icon DOM ref.", + "privacy": "public", + "default": "null", + "readonly": true, + "_ui5since": "1.0.0-rc.16" + }, + { + "kind": "method", + "name": "getSearchButtonDomRef", + "return": { + "type": { + "text": "Promise<HTMLElement | null>" + }, + "description": "The search icon DOM ref" + }, + "description": "Returns the `search` icon DOM ref.", + "privacy": "public", + "_ui5since": "2.10.0" } ], - "attributes": [ + "events": [ { - "description": "Defines the text of the group item.", - "name": "text", - "default": "undefined", - "fieldName": "text", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines if the group item is selected.", - "name": "selected", - "default": "false", - "fieldName": "selected", + "name": "notifications-click", + "_ui5privacy": "public", "type": { - "text": "boolean" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-group-item", - "customElement": true, - "_ui5since": "2.13.0", - "_ui5privacy": "public", - "_ui5abstract": true - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "GroupItem", - "module": "dist/GroupItem.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-group-item", - "declaration": { - "name": "GroupItem", - "module": "dist/GroupItem.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/IllustratedMessage.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\nAn IllustratedMessage is a recommended combination of a solution-oriented message, an engaging\nillustration, and conversational tone to better communicate an empty or a success state than just show\na message alone.\n\nEach illustration has default internationalised title and subtitle texts. Also they can be managed with\n`titleText` and `subtitleText` properties.\n\nTo display the desired illustration, use the `name` property, where you can find the list of all available illustrations.\n\n**Note:** By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\"`\n\n**Note:** Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js\"`\n\n### Structure\nThe IllustratedMessage consists of the following elements, which are displayed below each other in the following order:\n\n- Illustration\n- Title\n- Subtitle\n- Actions\n\n### Usage\n`ui5-illustrated-message` is meant to be used inside container component, for example a `ui5-card`,\na `ui5-dialog` or a `ui5-page`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/IllustratedMessage.js\";`", - "name": "IllustratedMessage", - "cssParts": [ - { - "description": "Used to style the subtitle wrapper of the `ui5-illustrated-message`", - "name": "subtitle" - } - ], - "slots": [ - { - "name": "title", - "description": "Defines the title of the component.\n\n**Note:** Using this slot, the default title text of illustration and the value of `title` property will be overwritten.", - "_ui5since": "1.7.0", - "_ui5type": { - "text": "Array<HTMLElement> & string" - }, - "_ui5privacy": "public" - }, - { - "name": "subtitle", - "description": "Defines the subtitle of the component.\n\n**Note:** Using this slot, the default subtitle text of illustration and the value of `subtitleText` property will be overwritten.", - "_ui5since": "1.0.0-rc.16", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - }, - { - "name": "default", - "description": "Defines the component actions.\n\n**Note:** Not displayed when the `design` property is set to `Base`.", - "_ui5propertyName": "actions", - "_ui5type": { - "text": "Array<IButton>", + "text": "CustomEvent<ShellBarNotificationsClickEventDetail>", "references": [ { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" + "name": "ShellBarNotificationsClickEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ShellBar.js" } ] }, - "_ui5privacy": "public" - } - ], - "members": [ - { - "kind": "field", - "name": "name", - "type": { - "text": "string" - }, - "default": "\"BeforeSearch\"", - "description": "Defines the illustration name that will be displayed in the component.\n\nExample:\n\n`name='BeforeSearch'`, `name='UnableToUpload'`, etc..\n\n**Note:** To use the TNT illustrations,\nyou need to set the `tnt` or `Tnt` prefix in front of the icon's name.\n\nExample:\n\n`name='tnt/Avatar'` or `name='TntAvatar'`.\n\n**Note:** By default the `BeforeSearch` illustration is loaded.\nWhen using an illustration type, other than the default, it should be loaded in addition:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\";`\n\nFor TNT illustrations:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js\";`", - "privacy": "public" + "description": "Fired, when the notification icon is activated.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "targetRef", + "_ui5privacy": "public", + "description": "dom ref of the activated element" + } + ] }, { - "kind": "field", - "name": "design", + "name": "profile-click", + "_ui5privacy": "public", "type": { - "text": "IllustrationMessageDesign", + "text": "CustomEvent<ShellBarProfileClickEventDetail>", "references": [ { - "name": "IllustrationMessageDesign", + "name": "ShellBarProfileClickEventDetail", "package": "@ui5/webcomponents-fiori", - "module": "dist/types/IllustrationMessageDesign.js" + "module": "dist/ShellBar.js" } ] }, - "default": "\"Auto\"", - "description": "Determines which illustration breakpoint variant is used.\n\nAs `IllustratedMessage` adapts itself around the `Illustration`, the other\nelements of the component are displayed differently on the different breakpoints/illustration designs.", - "privacy": "public", - "_ui5since": "2.0.0" + "description": "Fired, when the profile slot is present.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "targetRef", + "_ui5privacy": "public", + "description": "dom ref of the activated element" + } + ] }, { - "kind": "field", - "name": "subtitleText", + "name": "product-switch-click", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent<ShellBarProductSwitchClickEventDetail>", + "references": [ + { + "name": "ShellBarProductSwitchClickEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ShellBar.js" + } + ] }, - "description": "Defines the subtitle of the component.\n\n**Note:** Using this property, the default subtitle text of illustration will be overwritten.\n\n**Note:** Using `subtitle` slot, the default of this property will be overwritten.", - "default": "undefined", - "privacy": "public" + "description": "Fired, when the product switch icon is activated.\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "targetRef", + "_ui5privacy": "public", + "description": "dom ref of the activated element" + } + ] }, { - "kind": "field", - "name": "titleText", + "name": "logo-click", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent<ShellBarLogoClickEventDetail>", + "references": [ + { + "name": "ShellBarLogoClickEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ShellBar.js" + } + ] }, - "description": "Defines the title of the component.\n\n**Note:** Using this property, the default title text of illustration will be overwritten.", - "default": "undefined", - "privacy": "public" + "description": "Fired, when the logo is activated.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "0.10", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "targetRef", + "_ui5privacy": "public", + "description": "dom ref of the activated element" + } + ] }, { - "kind": "field", - "name": "accessibleNameRef", + "name": "menu-item-click", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent<ShellBarMenuItemClickEventDetail>", + "references": [ + { + "name": "ShellBarMenuItemClickEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ShellBar.js" + } + ] }, - "description": "Receives id(or many ids) of the elements that label the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.7.0" + "description": "Fired, when a menu item is activated\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "0.10", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "DOM ref of the activated list item" + } + ] }, { - "kind": "field", - "name": "decorative", + "name": "search-button-click", + "_ui5privacy": "public", "type": { - "text": "boolean" + "text": "CustomEvent<ShellBarSearchButtonEventDetail>", + "references": [ + { + "name": "ShellBarSearchButtonEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ShellBar.js" + } + ] }, - "default": "false", - "description": "Defines whether the illustration is decorative.\n\nWhen set to `true`, the attributes `role=\"presentation\"` and `aria-hidden=\"true\"` are applied to the SVG element.", - "privacy": "public", - "_ui5since": "2.10.0" + "description": "Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "targetRef", + "_ui5privacy": "public", + "description": "dom ref of the activated element" + }, + { + "type": { + "text": "Boolean" + }, + "name": "searchFieldVisible", + "_ui5privacy": "public", + "description": "whether the search field is visible" + } + ] + }, + { + "name": "search-field-toggle", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ShellBarSearchFieldToggleEventDetail>", + "references": [ + { + "name": "ShellBarSearchFieldToggleEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ShellBar.js" + } + ] + }, + "description": "Fired, when the search field is expanded or collapsed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.10.0", + "_ui5parameters": [ + { + "type": { + "text": "Boolean" + }, + "name": "expanded", + "_ui5privacy": "public", + "description": "whether the search field is expanded" + } + ] + }, + { + "name": "search-field-clear", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ShellBarSearchFieldClearEventDetail>", + "references": [ + { + "name": "ShellBarSearchFieldClearEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ShellBar.js" + } + ] + }, + "description": "Fired, when the search cancel button is activated.\n\n**Note:** You can prevent the default behavior (clearing the search field value) by calling `event.preventDefault()`. The search will still be closed.\n**Note:** The `search-field-clear` event is in an experimental state and is a subject to change.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.14.0", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "targetRef", + "_ui5privacy": "public", + "description": "dom ref of the cancel button element" + } + ] + }, + { + "name": "content-item-visibility-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ShellBarContentItemVisibilityChangeEventDetail>", + "references": [ + { + "name": "ShellBarContentItemVisibilityChangeEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ShellBar.js" + } + ] + }, + "description": "Fired, when an item from the content slot is hidden or shown.\n**Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.7.0", + "_ui5parameters": [ + { + "type": { + "text": "Array<HTMLElement>" + }, + "name": "array", + "_ui5privacy": "public", + "description": "of all the items that are hidden" + } + ] } ], "attributes": [ { - "description": "Defines the illustration name that will be displayed in the component.\n\nExample:\n\n`name='BeforeSearch'`, `name='UnableToUpload'`, etc..\n\n**Note:** To use the TNT illustrations,\nyou need to set the `tnt` or `Tnt` prefix in front of the icon's name.\n\nExample:\n\n`name='tnt/Avatar'` or `name='TntAvatar'`.\n\n**Note:** By default the `BeforeSearch` illustration is loaded.\nWhen using an illustration type, other than the default, it should be loaded in addition:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\";`\n\nFor TNT illustrations:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js\";`", - "name": "name", - "default": "\"BeforeSearch\"", - "fieldName": "name", + "description": "Defines the visibility state of the search button.\n\n**Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.", + "name": "hide-search-button", + "default": "false", + "fieldName": "hideSearchButton", "type": { - "text": "string" + "text": "boolean" } }, { - "description": "Determines which illustration breakpoint variant is used.\n\nAs `IllustratedMessage` adapts itself around the `Illustration`, the other\nelements of the component are displayed differently on the different breakpoints/illustration designs.", - "name": "design", - "default": "\"Auto\"", - "fieldName": "design", + "description": "Disables the automatic search field expansion/collapse when the available space is not enough.\n\n**Note:** The `disableSearchCollapse` property is in an experimental state and is a subject to change.", + "name": "disable-search-collapse", + "default": "false", + "fieldName": "disableSearchCollapse", "type": { - "text": "\"Auto\" | \"Base\" | \"Dot\" | \"Spot\" | \"Dialog\" | \"Scene\" | \"ExtraSmall\" | \"Small\" | \"Medium\" | \"Large\"" + "text": "boolean" } }, { - "description": "Defines the subtitle of the component.\n\n**Note:** Using this property, the default subtitle text of illustration will be overwritten.\n\n**Note:** Using `subtitle` slot, the default of this property will be overwritten.", - "name": "subtitle-text", + "description": "Defines the `primaryTitle`.\n\n**Note:** The `primaryTitle` would be hidden on S screen size (less than approx. 700px).", + "name": "primary-title", "default": "undefined", - "fieldName": "subtitleText", + "fieldName": "primaryTitle", "type": { "text": "string | undefined" } }, { - "description": "Defines the title of the component.\n\n**Note:** Using this property, the default title text of illustration will be overwritten.", - "name": "title-text", + "description": "Defines the `secondaryTitle`.\n\n**Note:** The `secondaryTitle` would be hidden on S and M screen sizes (less than approx. 1300px).", + "name": "secondary-title", "default": "undefined", - "fieldName": "titleText", + "fieldName": "secondaryTitle", "type": { "text": "string | undefined" } }, { - "description": "Receives id(or many ids) of the elements that label the component.", - "name": "accessible-name-ref", + "description": "Defines the `notificationsCount`,\ndisplayed in the notification icon top-right corner.", + "name": "notifications-count", "default": "undefined", - "fieldName": "accessibleNameRef", + "fieldName": "notificationsCount", "type": { "text": "string | undefined" } }, { - "description": "Defines whether the illustration is decorative.\n\nWhen set to `true`, the attributes `role=\"presentation\"` and `aria-hidden=\"true\"` are applied to the SVG element.", - "name": "decorative", + "description": "Defines, if the notification icon would be displayed.", + "name": "show-notifications", "default": "false", - "fieldName": "decorative", + "fieldName": "showNotifications", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines, if the product switch icon would be displayed.", + "name": "show-product-switch", + "default": "false", + "fieldName": "showProductSwitch", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines, if the Search Field would be displayed when there is a valid `searchField` slot.\n\n**Note:** By default the Search Field is not displayed.", + "name": "show-search-field", + "default": "false", + "fieldName": "showSearchField", "type": { "text": "boolean" } + }, + { + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n- **logo** - `logo.role` and `logo.name`.\n- **notifications** - `notifications.expanded` and `notifications.hasPopup`.\n- **profile** - `profile.expanded`, `profile.hasPopup` and `profile.name`.\n- **product** - `product.expanded` and `product.hasPopup`.\n- **search** - `search.hasPopup`.\n- **overflow** - `overflow.expanded` and `overflow.hasPopup`.\n- **branding** - `branding.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA role of the logo area.\nAccepts the following string values: `button` or `link`.\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "ShellBarAccessibilityAttributes" + } + }, + { + "description": "Returns the `logo` DOM ref.", + "name": "logo-dom-ref", + "default": "null", + "fieldName": "logoDomRef", + "type": { + "text": "any" + } + }, + { + "description": "Returns the `notifications` icon DOM ref.", + "name": "notifications-dom-ref", + "default": "null", + "fieldName": "notificationsDomRef", + "type": { + "text": "any" + } + }, + { + "description": "Returns the `overflow` icon DOM ref.", + "name": "overflow-dom-ref", + "default": "null", + "fieldName": "overflowDomRef", + "type": { + "text": "any" + } + }, + { + "description": "Returns the `profile` icon DOM ref.", + "name": "profile-dom-ref", + "default": "null", + "fieldName": "profileDomRef", + "type": { + "text": "any" + } + }, + { + "description": "Returns the `product-switch` icon DOM ref.", + "name": "product-switch-dom-ref", + "default": "null", + "fieldName": "productSwitchDomRef", + "type": { + "text": "any" + } } ], "superclass": { @@ -3945,9 +5200,9 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-illustrated-message", + "tagName": "ui5-shellbar", "customElement": true, - "_ui5since": "1.0.0-rc.15", + "_ui5since": "0.8.0", "_ui5privacy": "public" } ], @@ -3956,172 +5211,87 @@ "kind": "js", "name": "default", "declaration": { - "name": "IllustratedMessage", - "module": "dist/IllustratedMessage.js" + "name": "ShellBar", + "module": "dist/ShellBar.js" } }, { "kind": "custom-element-definition", - "name": "ui5-illustrated-message", + "name": "ui5-shellbar", "declaration": { - "name": "IllustratedMessage", - "module": "dist/IllustratedMessage.js" + "name": "ShellBar", + "module": "dist/ShellBar.js" } } ] }, { "kind": "javascript-module", - "path": "dist/MediaGallery.js", + "path": "dist/ShellBarBranding.js", "declarations": [ - { - "kind": "interface", - "name": "IMediaGalleryItem", - "description": "Interface for components that can be slotted inside `ui5-media-gallery` as items.", - "_ui5privacy": "public" - }, { "kind": "class", - "description": "### Overview\n\nThe `ui5-media-gallery` component allows the user to browse through multimedia items. Currently,\nthe supported items are images and videos. The items should be defined using the `ui5-media-gallery-item`\ncomponent.\n\nThe items are initially displayed as thumbnails. When the user selects a thumbnail, the corresponding item\nis displayed in larger size.\n\nThe component is responsive by default and adjusts the position of the menu with respect to viewport size,\nbut the application is able to further customize the layout via the provided API.\n\n### Keyboard Handling\nThe `ui5-media-gallery` provides advanced keyboard handling.\n\nWhen the thumbnails menu is focused the following keyboard\nshortcuts allow the user to navigate through the thumbnail items:\n\n- [Up] or [Down] - Navigates up and down the items\n- [Home] - Navigates to first item\n- [End] - Navigates to the last item\n- [Space], [Enter] - Selects an item\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/MediaGallery.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";`", - "name": "MediaGallery", + "description": "### Overview\nThe `ui5-shellbar-branding` component is intended to be placed inside the branding slot of the\n`ui5-shellbar` component. Its content has higher priority than the `primaryTitle` property\nand the `logo` slot of `ui5-shellbar`.", + "name": "ShellBarBranding", "slots": [ { "name": "default", - "description": "Defines the component items.\n\n**Note:** Only one selected item is allowed.\n\n**Note:** Use the `ui5-media-gallery-item` component to define the desired items.", - "_ui5propertyName": "items", + "description": "Defines the title for the ui5-shellbar-branding component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", + "_ui5propertyName": "content", "_ui5type": { - "text": "Array<IMediaGalleryItem>", - "references": [ - { - "name": "IMediaGalleryItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/MediaGallery.js" - } - ] + "text": "Array<HTMLElement>" }, "_ui5privacy": "public" - } - ], - "members": [ - { - "kind": "field", - "name": "showAllThumbnails", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "If set to `true`, all thumbnails are rendered in a scrollable container.\nIf `false`, only up to five thumbnails are rendered, followed by\nan overflow button that shows the count of the remaining thumbnails.", - "privacy": "public" }, { - "kind": "field", - "name": "interactiveDisplayArea", - "type": { - "text": "boolean" + "name": "logo", + "description": "Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo.", + "_ui5type": { + "text": "Array<HTMLElement>" }, - "default": "false", - "description": "If enabled, a `display-area-click` event is fired\nwhen the user clicks or taps on the display area.\n\nThe display area is the central area that contains\nthe enlarged content of the currently selected item.", - "privacy": "public" - }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "name": "layout", + "name": "href", "type": { - "text": "MediaGalleryLayout", - "references": [ - { - "name": "MediaGalleryLayout", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/MediaGalleryLayout.js" - } - ] + "text": "string | undefined" }, - "default": "\"Auto\"", - "description": "Determines the layout of the component.", + "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "menuHorizontalAlign", + "name": "target", "type": { - "text": "MediaGalleryMenuHorizontalAlign", - "references": [ - { - "name": "MediaGalleryMenuHorizontalAlign", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/MediaGalleryMenuHorizontalAlign.js" - } - ] + "text": "string | undefined" }, - "default": "\"Left\"", - "description": "Determines the horizontal alignment of the thumbnails menu\nvs. the central display area.", + "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "menuVerticalAlign", + "name": "accessibleName", "type": { - "text": "MediaGalleryMenuVerticalAlign", - "references": [ - { - "name": "MediaGalleryMenuVerticalAlign", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/MediaGalleryMenuVerticalAlign.js" - } - ] + "text": "string | undefined" }, - "default": "\"Bottom\"", - "description": "Determines the vertical alignment of the thumbnails menu\nvs. the central display area.", + "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.", + "default": "undefined", "privacy": "public" } ], "events": [ { - "name": "selection-change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<MediaGallerySelectionChangeEventDetail>", - "references": [ - { - "name": "MediaGallerySelectionChangeEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/MediaGallery.js" - } - ] - }, - "description": "Fired when selection is changed by user interaction.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "the selected item." - } - ] - }, - { - "name": "overflow-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the thumbnails overflow button is clicked.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true - }, - { - "name": "display-area-click", + "name": "click", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the display area is clicked.\nThe display area is the central area that contains\nthe enlarged content of the currently selected item.", + "description": "Fired, when the logo is activated.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true @@ -4129,48 +5299,30 @@ ], "attributes": [ { - "description": "If set to `true`, all thumbnails are rendered in a scrollable container.\nIf `false`, only up to five thumbnails are rendered, followed by\nan overflow button that shows the count of the remaining thumbnails.", - "name": "show-all-thumbnails", - "default": "false", - "fieldName": "showAllThumbnails", - "type": { - "text": "boolean" - } - }, - { - "description": "If enabled, a `display-area-click` event is fired\nwhen the user clicks or taps on the display area.\n\nThe display area is the central area that contains\nthe enlarged content of the currently selected item.", - "name": "interactive-display-area", - "default": "false", - "fieldName": "interactiveDisplayArea", - "type": { - "text": "boolean" - } - }, - { - "description": "Determines the layout of the component.", - "name": "layout", - "default": "\"Auto\"", - "fieldName": "layout", + "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.", + "name": "href", + "default": "undefined", + "fieldName": "href", "type": { - "text": "\"Auto\" | \"Vertical\" | \"Horizontal\"" + "text": "string | undefined" } }, { - "description": "Determines the horizontal alignment of the thumbnails menu\nvs. the central display area.", - "name": "menu-horizontal-align", - "default": "\"Left\"", - "fieldName": "menuHorizontalAlign", + "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", + "name": "target", + "default": "undefined", + "fieldName": "target", "type": { - "text": "\"Left\" | \"Right\"" + "text": "string | undefined" } }, { - "description": "Determines the vertical alignment of the thumbnails menu\nvs. the central display area.", - "name": "menu-vertical-align", - "default": "\"Bottom\"", - "fieldName": "menuVerticalAlign", + "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "\"Top\" | \"Bottom\"" + "text": "string | undefined" } } ], @@ -4179,9 +5331,10 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-media-gallery", + "tagName": "ui5-shellbar-branding", "customElement": true, - "_ui5since": "1.1.0", + "_ui5experimental": true, + "_ui5since": "2.12.0", "_ui5privacy": "public" } ], @@ -4190,112 +5343,144 @@ "kind": "js", "name": "default", "declaration": { - "name": "MediaGallery", - "module": "dist/MediaGallery.js" + "name": "ShellBarBranding", + "module": "dist/ShellBarBranding.js" } }, { "kind": "custom-element-definition", - "name": "ui5-media-gallery", + "name": "ui5-shellbar-branding", "declaration": { - "name": "MediaGallery", - "module": "dist/MediaGallery.js" + "name": "ShellBarBranding", + "module": "dist/ShellBarBranding.js" } } ] }, { "kind": "javascript-module", - "path": "dist/MediaGalleryItem.js", + "path": "dist/ShellBarItem.js", "declarations": [ { "kind": "class", - "description": "### Overview\nThe `ui5-media-gallery-item` web component represents the items displayed in the\n`ui5-media-gallery` web component.\n\n**Note:** `ui5-media-gallery-item` is not supported when used outside of `ui5-media-gallery`.\n\n### Keyboard Handling\nThe `ui5-media-gallery` provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Space] / [Enter] or [Return] - Trigger `ui5-click` event\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";` (comes with `ui5-media-gallery`)", - "name": "MediaGalleryItem", - "slots": [ + "description": "The `ui5-shellbar-item` represents a custom item, that\nmight be added to the `ui5-shellbar`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ShellBarItem.js\";`", + "name": "ShellBarItem", + "members": [ { - "name": "default", - "description": "Defines the content of the component.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<HTMLElement>" + "kind": "field", + "name": "icon", + "type": { + "text": "string | undefined" }, - "_ui5privacy": "public" + "description": "Defines the name of the item's icon.", + "default": "undefined", + "privacy": "public" }, - { - "name": "thumbnail", - "description": "Defines the content of the thumbnail.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - } - ], - "members": [ { "kind": "field", - "name": "selected", + "name": "text", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines the selected state of the component.", + "description": "Defines the item text.\n\n**Note:** The text is only displayed inside the overflow popover list view.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "disabled", + "name": "count", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is in disabled state.", - "privacy": "public" + "description": "Defines the count displayed in the top-right corner.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.6" }, { "kind": "field", - "name": "layout", + "name": "accessibilityAttributes", "type": { - "text": "MediaGalleryItemLayout", + "text": "ShellBarItemAccessibilityAttributes", "references": [ { - "name": "MediaGalleryItemLayout", + "name": "ShellBarItemAccessibilityAttributes", "package": "@ui5/webcomponents-fiori", - "module": "dist/types/MediaGalleryItemLayout.js" + "module": "dist/ShellBarItem.js" } ] }, - "default": "\"Square\"", - "description": "Determines the layout of the item container.", - "privacy": "public" + "default": "{}", + "description": "Defines additional accessibility attributes on Shellbar Items.\n\nThe accessibility attributes support the following values:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\n- **controls**: Identifies the element (or elements) whose contents\nor presence are controlled by the component.\nAccepts a lowercase string value, referencing the ID of the element it controls.", + "privacy": "public", + "_ui5since": "2.9.0" } ], - "attributes": [ + "events": [ { - "description": "Defines the selected state of the component.", - "name": "selected", - "default": "false", - "fieldName": "selected", + "name": "click", + "_ui5privacy": "public", "type": { - "text": "boolean" + "text": "CustomEvent<ShellBarItemClickEventDetail>", + "references": [ + { + "name": "ShellBarItemClickEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ShellBarItem.js" + } + ] + }, + "description": "Fired, when the item is pressed.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "targetRef", + "_ui5privacy": "public", + "description": "DOM ref of the clicked element" + } + ] + } + ], + "attributes": [ + { + "description": "Defines the name of the item's icon.", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" } }, { - "description": "Defines whether the component is in disabled state.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", + "description": "Defines the item text.\n\n**Note:** The text is only displayed inside the overflow popover list view.", + "name": "text", + "default": "undefined", + "fieldName": "text", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Determines the layout of the item container.", - "name": "layout", - "default": "\"Square\"", - "fieldName": "layout", + "description": "Defines the count displayed in the top-right corner.", + "name": "count", + "default": "undefined", + "fieldName": "count", "type": { - "text": "\"Square\" | \"Wide\"" + "text": "string | undefined" + } + }, + { + "description": "Defines additional accessibility attributes on Shellbar Items.\n\nThe accessibility attributes support the following values:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\n- **controls**: Identifies the element (or elements) whose contents\nor presence are controlled by the component.\nAccepts a lowercase string value, referencing the ID of the element it controls.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "ShellBarItemAccessibilityAttributes" } } ], @@ -4304,17 +5489,10 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-media-gallery-item", + "tagName": "ui5-shellbar-item", "customElement": true, - "_ui5since": "1.1.0", "_ui5privacy": "public", - "_ui5implements": [ - { - "name": "IMediaGalleryItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/MediaGallery.js" - } - ] + "_ui5abstract": true } ], "exports": [ @@ -4322,495 +5500,482 @@ "kind": "js", "name": "default", "declaration": { - "name": "MediaGalleryItem", - "module": "dist/MediaGalleryItem.js" + "name": "ShellBarItem", + "module": "dist/ShellBarItem.js" } }, { "kind": "custom-element-definition", - "name": "ui5-media-gallery-item", + "name": "ui5-shellbar-item", "declaration": { - "name": "MediaGalleryItem", - "module": "dist/MediaGalleryItem.js" + "name": "ShellBarItem", + "module": "dist/ShellBarItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/NavigationLayout.js", + "path": "dist/ShellBarSearch.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-navigation-layout` is a container component that can be used to\ncreate a layout with a header, a side navigation and a content area.\n\n### Usage\n\nUse the `ui5-navigation-layout` to create whole screen of an application with vertical navigation.\n\n### Responsive Behavior\n\nOn desktop and tablet devices, the side navigation is visible\nby default and can be expanded or collapsed using the `mode` property.\nOn phone devices, the side navigation is hidden by default and can\nbe displayed using the `mode` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationLayout.js\";`", - "name": "NavigationLayout", - "slots": [ + "description": "Search field for the ShellBar component.", + "name": "ShellBarSearch", + "members": [ { - "name": "header", - "description": "Defines the header.", - "_ui5type": { - "text": "Array<HTMLElement>" + "kind": "field", + "name": "autoOpen", + "type": { + "text": "boolean" }, - "_ui5privacy": "public" + "default": "false", + "description": "Indicates whether the suggestions popover should be opened on focus.", + "privacy": "public" }, { - "name": "sideContent", - "description": "Defines the side content.", - "_ui5type": { - "text": "Array<SideNavigation>", - "references": [ - { - "name": "SideNavigation", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SideNavigation.js" - } - ] + "kind": "field", + "name": "loading", + "type": { + "text": "boolean" }, - "_ui5privacy": "public" + "default": "false", + "description": "Indicates whether a loading indicator should be shown in the popup.", + "privacy": "public", + "inheritedFrom": { + "name": "Search", + "module": "dist/Search.js" + } }, { - "name": "default", - "description": "Defines the content.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<HTMLElement>" + "kind": "field", + "name": "noTypeahead", + "type": { + "text": "boolean" }, - "_ui5privacy": "public" - } - ], - "members": [ + "default": "false", + "description": "Defines whether the value will be autcompleted to match an item.", + "privacy": "public", + "inheritedFrom": { + "name": "Search", + "module": "dist/Search.js" + } + }, { "kind": "field", - "name": "mode", + "name": "open", "type": { - "text": "NavigationLayoutMode", - "references": [ - { - "name": "NavigationLayoutMode", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/NavigationLayoutMode.js" - } - ] + "text": "boolean" }, - "default": "\"Auto\"", - "description": "Specifies the navigation layout mode.", - "privacy": "public" + "default": "false", + "description": "Indicates whether the items picker is open.", + "privacy": "public", + "inheritedFrom": { + "name": "Search", + "module": "dist/Search.js" + } }, { - "kind": "method", - "name": "isSideCollapsed", - "return": { - "type": { - "text": "boolean" - } + "kind": "field", + "name": "showClearIcon", + "type": { + "text": "boolean" }, - "description": "Gets whether the side navigation is collapsed.", - "privacy": "public" - } - ], - "attributes": [ + "default": "false", + "description": "Defines whether the clear icon of the search will be shown.", + "privacy": "public", + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, { - "description": "Specifies the navigation layout mode.", - "name": "mode", - "default": "\"Auto\"", - "fieldName": "mode", + "kind": "field", + "name": "value", "type": { - "text": "\"Auto\" | \"Collapsed\" | \"Expanded\"" + "text": "string" + }, + "default": "\"\"", + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", + "privacy": "public", + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, + { + "kind": "field", + "name": "placeholder", + "type": { + "text": "string | undefined" + }, + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "default": "undefined", + "privacy": "public", + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the component.", + "privacy": "public", + "default": "undefined", + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA description of the field.", + "privacy": "public", + "default": "undefined", + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" } } ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-navigation-layout", - "customElement": true, - "_ui5since": "2.4.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "NavigationLayout", - "module": "dist/NavigationLayout.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-navigation-layout", - "declaration": { - "name": "NavigationLayout", - "module": "dist/NavigationLayout.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/NavigationMenu.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "NavigationMenu", - "module": "dist/NavigationMenu.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/NavigationMenuItem.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "NavigationMenuItem", - "module": "dist/NavigationMenuItem.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/NotificationList.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\nThe `ui5-notification-list` web component represents\na container for `ui5-li-notification-group` and `ui5-li-notification`.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe `ui5-notification-list` provides advanced keyboard handling.\nWhen a list is focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Up] or [Left] - Navigates up the items\n- [Down] or [Right] - Navigates down the items\n- [Home] - Navigates to first item\n- [End] - Navigates to the last item\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationList.js\";``", - "name": "NotificationList", - "slots": [ + "attributes": [ { - "name": "default", - "description": "Defines the items of the component.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<NotificationListItemBase>", - "references": [ - { - "name": "NotificationListItemBase", - "package": "@ui5/webcomponents-fiori", - "module": "dist/NotificationListItemBase.js" - } - ] + "description": "Indicates whether the suggestions popover should be opened on focus.", + "name": "auto-open", + "default": "false", + "fieldName": "autoOpen", + "type": { + "text": "boolean" + } + }, + { + "description": "Indicates whether a loading indicator should be shown in the popup.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" }, - "_ui5privacy": "public" - } - ], - "members": [ + "inheritedFrom": { + "name": "Search", + "module": "dist/Search.js" + } + }, { - "kind": "field", - "name": "noDataText", + "description": "Defines whether the value will be autcompleted to match an item.", + "name": "no-typeahead", + "default": "false", + "fieldName": "noTypeahead", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the text that is displayed when the component contains no items.", - "default": "undefined", - "privacy": "public" - } - ], - "events": [ + "inheritedFrom": { + "name": "Search", + "module": "dist/Search.js" + } + }, { - "name": "item-click", - "_ui5privacy": "public", + "description": "Indicates whether the items picker is open.", + "name": "open", + "default": "false", + "fieldName": "open", "type": { - "text": "CustomEvent<NotificationItemClickEventDetail>", - "references": [ - { - "name": "NotificationItemClickEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/NotificationList.js" - } - ] + "text": "boolean" }, - "description": "Fired when an item is clicked.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "The clicked item." - } - ] + "inheritedFrom": { + "name": "Search", + "module": "dist/Search.js" + } }, { - "name": "item-close", - "_ui5privacy": "public", + "description": "Defines whether the clear icon of the search will be shown.", + "name": "show-clear-icon", + "default": "false", + "fieldName": "showClearIcon", "type": { - "text": "CustomEvent<NotificationItemCloseEventDetail>", - "references": [ - { - "name": "NotificationItemCloseEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/NotificationList.js" - } - ] + "text": "boolean" }, - "description": "Fired when the `Close` button of any item is clicked.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "the item about to be closed." - } - ] + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } }, { - "name": "item-toggle", - "_ui5privacy": "public", + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", + "name": "value", + "default": "\"\"", + "fieldName": "value", "type": { - "text": "CustomEvent<NotificationItemToggleEventDetail>", - "references": [ - { - "name": "NotificationItemToggleEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/NotificationList.js" - } - ] + "text": "string" }, - "description": "Fired when an item is toggled.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "the toggled item." - } - ] - } - ], - "attributes": [ + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, { - "description": "Defines the text that is displayed when the component contains no items.", - "name": "no-data-text", + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "name": "placeholder", "default": "undefined", - "fieldName": "noDataText", + "fieldName": "placeholder", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-notification-list", - "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "NotificationList", - "module": "dist/NotificationList.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-notification-list", - "declaration": { - "name": "NotificationList", - "module": "dist/NotificationList.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/NotificationListGroupItem.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\nThe `ui5-li-notification-group` is a special type of list item,\nthat unlike others can group items within self, usually `ui5-li-notification` items.\n\nThe component consists of:\n\n- `Toggle` button to expand and collapse the group\n- `TitleText` to entitle the group\n- Items of the group\n\n### Usage\nThe component should be used inside a `ui5-notification-list`.\n\n### Keyboard Handling\nThe `ui5-li-notification-group` provides advanced keyboard handling.\nThis component provides fast navigation when the header is focused using the following keyboard shortcuts:\n\n- [Space] - toggles expand / collapse of the group\n- [Plus] - expands the group\n- [Minus] - collapses the group\n- [Right] - expands the group\n- [Left] - collapses the group\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js\";`", - "name": "NotificationListGroupItem", - "slots": [ + }, { - "name": "default", - "description": "Defines the items of the `ui5-li-notification-group`,\nusually `ui5-li-notification` items.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<NotificationListItem>", - "references": [ - { - "name": "NotificationListItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/NotificationListItem.js" - } - ] + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" }, - "_ui5privacy": "public" + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, + { + "description": "Defines the accessible ARIA description of the field.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } } ], - "members": [ + "superclass": { + "name": "Search", + "package": "@ui5/webcomponents-fiori", + "module": "dist/Search.js" + }, + "tagName": "ui5-shellbar-search", + "customElement": true, + "_ui5experimental": true, + "_ui5since": "2.10.0", + "_ui5privacy": "public", + "slots": [ { - "kind": "field", - "name": "collapsed", - "type": { - "text": "boolean" + "name": "default", + "description": "Defines the Search suggestion items.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<SearchItem | SearchItemGroup>" }, - "default": "false", - "description": "Defines if the group is collapsed or expanded.", - "privacy": "public" + "_ui5privacy": "public", + "inheritedFrom": { + "name": "Search", + "module": "dist/Search.js" + } }, { - "kind": "field", - "name": "growing", - "type": { - "text": "NotificationListGrowingMode", + "name": "action", + "description": "Defines the popup footer action button.", + "_ui5type": { + "text": "Array<Button>", "references": [ { - "name": "NotificationListGrowingMode", + "name": "Button", "package": "@ui5/webcomponents", - "module": "dist/types/NotificationListGrowingMode.js" + "module": "dist/Button.js" } ] }, - "default": "\"None\"", - "description": "Defines whether the component will have growing capability by pressing a `More` button.\nWhen button is pressed `load-more` event will be fired.", - "privacy": "public", - "_ui5since": "2.2.0" + "_ui5privacy": "public", + "inheritedFrom": { + "name": "Search", + "module": "dist/Search.js" + } }, { - "kind": "field", - "name": "titleText", - "type": { - "text": "string | undefined" + "name": "illustration", + "description": "Defines the illustrated message to be shown in the popup.", + "_ui5type": { + "text": "Array<IllustratedMessage>", + "references": [ + { + "name": "IllustratedMessage", + "package": "@ui5/webcomponents-fiori", + "module": "dist/IllustratedMessage.js" + } + ] }, - "description": "Defines the `titleText` of the item.", - "default": "undefined", - "privacy": "public", + "_ui5privacy": "public", "inheritedFrom": { - "name": "NotificationListItemBase", - "module": "dist/NotificationListItemBase.js" + "name": "Search", + "module": "dist/Search.js" } }, { - "kind": "field", - "name": "read", - "type": { - "text": "boolean" + "name": "messageArea", + "description": "Defines the illustrated message to be shown in the popup.", + "_ui5type": { + "text": "Array<SearchMessageArea>", + "references": [ + { + "name": "SearchMessageArea", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SearchMessageArea.js" + } + ] }, - "default": "false", - "description": "Defines if the `notification` is new or has been already read.\n\n**Note:** if set to `false` the `titleText` has bold font,\nif set to true - it has a normal font.", - "privacy": "public", + "_ui5privacy": "public", "inheritedFrom": { - "name": "NotificationListItemBase", - "module": "dist/NotificationListItemBase.js" + "name": "Search", + "module": "dist/Search.js" } }, { - "kind": "field", - "name": "loading", - "type": { - "text": "boolean" + "name": "scopes", + "description": "Defines the component scope options.", + "_ui5type": { + "text": "Array<ISearchScope>", + "references": [ + { + "name": "ISearchScope", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SearchField.js" + } + ] }, - "default": "false", - "description": "Defines if a busy indicator would be displayed over the item.", - "privacy": "public", - "_ui5since": "1.0.0-rc.8", + "_ui5privacy": "public", "inheritedFrom": { - "name": "NotificationListItemBase", - "module": "dist/NotificationListItemBase.js" + "name": "SearchField", + "module": "dist/SearchField.js" } }, { - "kind": "field", - "name": "loadingDelay", - "type": { - "text": "number" + "name": "filterButton", + "description": "Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive.", + "_ui5since": "2.11.0", + "_ui5type": { + "text": "Array<Button>", + "references": [ + { + "name": "Button", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] }, - "default": "1000", - "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.", - "privacy": "public", + "_ui5privacy": "public", "inheritedFrom": { - "name": "NotificationListItemBase", - "module": "dist/NotificationListItemBase.js" + "name": "SearchField", + "module": "dist/SearchField.js" } } ], "events": [ { - "name": "toggle", + "name": "open", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction.", + "description": "Fired when the popup is opened.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "_ui5Bubbles": false, + "inheritedFrom": { + "name": "Search", + "module": "dist/Search.js" + } }, { - "name": "load-more", + "name": "close", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when additional items are requested.", + "description": "Fired when the popup is closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.2.0" - } - ], - "attributes": [ + "_ui5Bubbles": false, + "inheritedFrom": { + "name": "Search", + "module": "dist/Search.js" + } + }, { - "description": "Defines if the group is collapsed or expanded.", - "name": "collapsed", - "default": "false", - "fieldName": "collapsed", + "name": "input", + "_ui5privacy": "public", "type": { - "text": "boolean" + "text": "CustomEvent" + }, + "description": "Fired when typing in input or clear icon is pressed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" } }, { - "description": "Defines whether the component will have growing capability by pressing a `More` button.\nWhen button is pressed `load-more` event will be fired.", - "name": "growing", - "default": "\"None\"", - "fieldName": "growing", + "name": "scope-change", + "_ui5privacy": "public", "type": { - "text": "\"Button\" | \"None\"" - } - } - ], - "superclass": { - "name": "NotificationListItemBase", - "package": "@ui5/webcomponents-fiori", - "module": "dist/NotificationListItemBase.js" - }, - "tagName": "ui5-li-notification-group", - "customElement": true, - "_ui5since": "1.0.0-rc.8", - "_ui5privacy": "public" + "text": "CustomEvent<SearchFieldScopeSelectionChangeDetails>", + "references": [ + { + "name": "SearchFieldScopeSelectionChangeDetails", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SearchField.js" + } + ] + }, + "description": "Fired when the scope has changed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "scope", + "_ui5privacy": "public", + "description": "The newly selected scope" + } + ], + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, + { + "name": "search", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user has triggered search with Enter key or Search Button press.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + } + ] } ], "exports": [ @@ -4818,297 +5983,362 @@ "kind": "js", "name": "default", "declaration": { - "name": "NotificationListGroupItem", - "module": "dist/NotificationListGroupItem.js" + "name": "ShellBarSearch", + "module": "dist/ShellBarSearch.js" } }, { "kind": "custom-element-definition", - "name": "ui5-li-notification-group", + "name": "ui5-shellbar-search", "declaration": { - "name": "NotificationListGroupItem", - "module": "dist/NotificationListGroupItem.js" + "name": "ShellBarSearch", + "module": "dist/ShellBarSearch.js" } } ] }, { "kind": "javascript-module", - "path": "dist/NotificationListGroupList.js", - "declarations": [], + "path": "dist/ShellBarSpacer.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\nThe `ui5-shellbar-spacer` is an element, used for visual separation between the two content parts of the `ui5-shellbar`.\n**Note:** The `ui5-shellbar-spacer` component is in an experimental state and is a subject to change.", + "name": "ShellBarSpacer", + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-shellbar-spacer", + "customElement": true, + "_ui5since": "2.7.0", + "_ui5privacy": "public", + "_ui5abstract": true, + "members": [] + } + ], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "NotificationListGroupList", - "module": "dist/NotificationListGroupList.js" + "name": "ShellBarSpacer", + "module": "dist/ShellBarSpacer.js" } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/NotificationListInternal.js", - "declarations": [], - "exports": [ + }, { - "kind": "js", - "name": "default", + "kind": "custom-element-definition", + "name": "ui5-shellbar-spacer", "declaration": { - "name": "NotificationListInternal", - "module": "dist/NotificationListInternal.js" + "name": "ShellBarSpacer", + "module": "dist/ShellBarSpacer.js" } } ] }, { "kind": "javascript-module", - "path": "dist/NotificationListItem.js", + "path": "dist/SideNavigation.js", "declarations": [ { "kind": "class", - "description": "### Overview\nThe `ui5-li-notification` is a type of list item, meant to display notifications.\n\nThe component has a rich set of various properties that allows the user to set `avatar`, `menu`, `titleText`, descriptive `content`\nand `footnotes` to fully describe a notification.\n\nThe user can:\n\n- display a `Close` button\n- can control whether the `titleText` and `description` should wrap or truncate\nand display a `ShowMore` button to switch between less and more information\n- add actions by using the `ui5-menu` component\n\n**Note:** Adding custom actions by using the `ui5-notification-action` component is deprecated as of version 2.0!\n\n### Usage\nThe component should be used inside a `ui5-notification-list`.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete):\n\n- [Enter] - select an item (trigger \"item-click\" event)\n- [Delete] - close an item (trigger \"item-close\" event)\n\n#### Fast Navigation\nThis component provides a fast navigation using the following keyboard shortcuts:\n\n- [Shift] + [Enter] - 'More'/'Less' link will be triggered\n- [Shift] + [F10] - 'Menu' (Actions) button will be triggered (clicked)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationListItem.js\";`", - "name": "NotificationListItem", - "cssParts": [ - { - "description": "Used to style the titleText of the notification list item", - "name": "title-text" - } - ], + "description": "### Overview\n\nThe `SideNavigation` is used as a standard menu in applications.\nIt consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).\n\n - The header is meant for displaying user related information - profile data, avatar, etc.\n - The main navigation section is related to the user’s current work context\n - The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).\n\n### Usage\n\nUse the available `ui5-side-navigation-group`, `ui5-side-navigation-item`\nand `ui5-side-navigation-sub-item` components to build your menu.\nThe items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.\nYou must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\nThe `ui5-side-navigation` component is designed to be used within a `ui5-navigation-layout` component to ensure an optimal user experience.\n\nUsing it standalone may not match the intended design and functionality.\nFor example, the side navigation may not exhibit the correct behavior on phones and tablets.\nPadding of the `ui5-shellbar` will not match the padding of the side navigation.\n\n### Keyboard Handling\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\"`\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";` (for `ui5-side-navigation-group`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";` (for `ui5-side-navigation-item`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";` (for `ui5-side-navigation-sub-item`)", + "name": "SideNavigation", "slots": [ { - "name": "avatar", - "description": "Defines the avatar, displayed in the `ui5-li-notification`.\n\n**Note:** Consider using the `ui5-avatar` to display icons, initials or images.\n\n**Note:** In order to be complaint with the UX guidlines and for best experience,\nwe recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the `ui5-avatar`\nyou can set its `size` property to `XS` to get the required size - `<ui5-avatar size=\"XS\"></ui5-avatar>`.", + "name": "default", + "description": "Defines the main items of the component.", + "_ui5propertyName": "items", "_ui5type": { - "text": "Array<HTMLElement>" + "text": "Array<SideNavigationItemBase>", + "references": [ + { + "name": "SideNavigationItemBase", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SideNavigationItemBase.js" + } + ] }, "_ui5privacy": "public" }, { - "name": "menu", - "description": "Defines the menu, displayed in the `ui5-li-notification`.\n\n**Note:** Use this for implementing actions.\n\n**Note:** Should be used instead `u5-notification-action`, which is deprecated as of version 2.0.", + "name": "fixedItems", + "description": "Defines the fixed items at the bottom of the component.\n\n**Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)", "_ui5type": { - "text": "Array<HTMLElement>" + "text": "Array<SideNavigationItemBase>", + "references": [ + { + "name": "SideNavigationItemBase", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SideNavigationItemBase.js" + } + ] }, "_ui5privacy": "public" }, { - "name": "footnotes", - "description": "Defines the elements, displayed in the footer of the of the component.", + "name": "header", + "description": "Defines the header of the `ui5-side-navigation`.\n\n**Note:** The header is displayed when the component is expanded - the property `collapsed` is false;", + "_ui5since": "1.0.0-rc.11", "_ui5type": { "text": "Array<HTMLElement>" }, "_ui5privacy": "public" - }, - { - "name": "default", - "description": "Defines the content of the `ui5-li-notification`,\nusually a description of the notification.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", - "_ui5propertyName": "description", - "_ui5type": { - "text": "Array<Node>" - }, - "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "wrappingType", - "type": { - "text": "WrappingType", - "references": [ - { - "name": "WrappingType", - "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines if the `titleText` and `description` should wrap,\nthey truncate by default.\n\n**Note:** by default the `titleText` and `description`,\nand a `ShowMore/Less` button would be displayed.", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" - }, - { - "kind": "field", - "name": "state", + "name": "collapsed", "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] + "text": "boolean" }, - "default": "\"None\"", - "description": "Defines the status indicator of the item.", + "default": "false", + "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** The collapsed mode is not supported on phones.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for phones where the collapsed mode should not be used.", "privacy": "public" }, { "kind": "field", - "name": "showClose", + "name": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines if the `Close` button would be displayed.", - "privacy": "public" - }, + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.9.0" + } + ], + "events": [ { - "kind": "field", - "name": "importance", + "name": "selection-change", + "_ui5privacy": "public", "type": { - "text": "NotificationListItemImportance", + "text": "CustomEvent<SideNavigationSelectionChangeEventDetail>", "references": [ { - "name": "NotificationListItemImportance", + "name": "SideNavigationSelectionChangeEventDetail", "package": "@ui5/webcomponents-fiori", - "module": "dist/types/NotificationListItemImportance.js" + "module": "dist/SideNavigation.js" } ] }, - "default": "\"Standard\"", - "description": "Defines the `Important` label of the item.", - "privacy": "public" - }, + "description": "Fired when the selection has changed via user interaction", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "SideNavigationSelectableItemBase", + "references": [ + { + "name": "SideNavigationSelectableItemBase", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SideNavigationSelectableItemBase.js" + } + ] + }, + "name": "item", + "_ui5privacy": "public", + "description": "the clicked item." + } + ] + } + ], + "attributes": [ { - "kind": "field", - "name": "titleText", + "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** The collapsed mode is not supported on phones.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for phones where the collapsed mode should not be used.", + "name": "collapsed", + "default": "false", + "fieldName": "collapsed", "type": { - "text": "string | undefined" - }, - "description": "Defines the `titleText` of the item.", - "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "NotificationListItemBase", - "module": "dist/NotificationListItemBase.js" + "text": "boolean" } }, { - "kind": "field", - "name": "read", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-side-navigation", + "customElement": true, + "_ui5since": "1.0.0-rc.8", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "SideNavigation", + "module": "dist/SideNavigation.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-side-navigation", + "declaration": { + "name": "SideNavigation", + "module": "dist/SideNavigation.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/SideNavigationGroup.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nRepresents a group of navigation actions within `ui5-side-navigation`.\nThe `ui5-side-navigation-group` can only be used inside a `ui5-side-navigation`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";`", + "name": "SideNavigationGroup", + "slots": [ + { + "name": "default", + "description": "Defines nested items by passing `ui5-side-navigation-item` to the default slot.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<SideNavigationItem>", + "references": [ + { + "name": "SideNavigationItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SideNavigationItem.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "expanded", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the `notification` is new or has been already read.\n\n**Note:** if set to `false` the `titleText` has bold font,\nif set to true - it has a normal font.", + "description": "Defines if the item is expanded", + "privacy": "public" + }, + { + "kind": "field", + "name": "text", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text of the item.", "privacy": "public", + "default": "undefined", "inheritedFrom": { - "name": "NotificationListItemBase", - "module": "dist/NotificationListItemBase.js" + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" } }, { "kind": "field", - "name": "loading", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if a busy indicator would be displayed over the item.", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", "privacy": "public", - "_ui5since": "1.0.0-rc.8", + "_ui5since": "1.19.0", "inheritedFrom": { - "name": "NotificationListItemBase", - "module": "dist/NotificationListItemBase.js" + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" } }, { "kind": "field", - "name": "loadingDelay", + "name": "tooltip", "type": { - "text": "number" + "text": "string | undefined" }, - "default": "1000", - "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.", + "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", + "default": "undefined", "privacy": "public", + "_ui5since": "2.0.0", "inheritedFrom": { - "name": "NotificationListItemBase", - "module": "dist/NotificationListItemBase.js" + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" } } ], - "events": [ - { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<NotificationListItemCloseEventDetail>", - "references": [ - { - "name": "NotificationListItemCloseEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/NotificationListItem.js" - } - ] - }, - "description": "Fired when the `Close` button is pressed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "the closed item." - } - ] - } - ], "attributes": [ { - "description": "Defines if the `titleText` and `description` should wrap,\nthey truncate by default.\n\n**Note:** by default the `titleText` and `description`,\nand a `ShowMore/Less` button would be displayed.", - "name": "wrapping-type", - "default": "\"None\"", - "fieldName": "wrappingType", + "description": "Defines if the item is expanded", + "name": "expanded", + "default": "false", + "fieldName": "expanded", "type": { - "text": "\"None\" | \"Normal\"" + "text": "boolean" } }, { - "description": "Defines the status indicator of the item.", - "name": "state", - "default": "\"None\"", - "fieldName": "state", + "description": "Defines the text of the item.", + "name": "text", + "default": "undefined", + "fieldName": "text", "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" } }, { - "description": "Defines if the `Close` button would be displayed.", - "name": "show-close", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "name": "disabled", "default": "false", - "fieldName": "showClose", + "fieldName": "disabled", "type": { "text": "boolean" + }, + "inheritedFrom": { + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" } }, { - "description": "Defines the `Important` label of the item.", - "name": "importance", - "default": "\"Standard\"", - "fieldName": "importance", + "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", "type": { - "text": "\"Standard\" | \"Important\"" + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" } } ], "superclass": { - "name": "NotificationListItemBase", + "name": "SideNavigationItemBase", "package": "@ui5/webcomponents-fiori", - "module": "dist/NotificationListItemBase.js" + "module": "dist/SideNavigationItemBase.js" }, - "tagName": "ui5-li-notification", + "tagName": "ui5-side-navigation-group", "customElement": true, - "_ui5since": "1.0.0-rc.8", - "_ui5privacy": "public" + "_ui5since": "1.24.0", + "_ui5privacy": "public", + "_ui5abstract": true } ], "exports": [ @@ -5116,291 +6346,428 @@ "kind": "js", "name": "default", "declaration": { - "name": "NotificationListItem", - "module": "dist/NotificationListItem.js" + "name": "SideNavigationGroup", + "module": "dist/SideNavigationGroup.js" } }, { "kind": "custom-element-definition", - "name": "ui5-li-notification", + "name": "ui5-side-navigation-group", "declaration": { - "name": "NotificationListItem", - "module": "dist/NotificationListItem.js" + "name": "SideNavigationGroup", + "module": "dist/SideNavigationGroup.js" } } ] }, { "kind": "javascript-module", - "path": "dist/NotificationListItemBase.js", + "path": "dist/SideNavigationItem.js", "declarations": [ { "kind": "class", - "description": "The base class of the `NotificationListItem` and `NotificationListGroupItem`.", - "name": "NotificationListItemBase", - "members": [ + "description": "### Overview\n\nRepresents a navigation action. It can provide sub items.\nThe `ui5-side-navigation-item` is used within `ui5-side-navigation` or `ui5-side-navigation-group` only.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";`", + "name": "SideNavigationItem", + "slots": [ { - "kind": "field", - "name": "titleText", - "type": { - "text": "string | undefined" + "name": "default", + "description": "Defines nested items by passing `ui5-side-navigation-sub-item` to the default slot.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<SideNavigationSubItem>", + "references": [ + { + "name": "SideNavigationSubItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SideNavigationSubItem.js" + } + ] }, - "description": "Defines the `titleText` of the item.", - "default": "undefined", - "privacy": "public" - }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "name": "read", + "name": "expanded", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the `notification` is new or has been already read.\n\n**Note:** if set to `false` the `titleText` has bold font,\nif set to true - it has a normal font.", + "description": "Defines if the item is expanded", "privacy": "public" }, { "kind": "field", - "name": "loading", + "name": "icon", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines if a busy indicator would be displayed over the item.", + "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "privacy": "public", - "_ui5since": "1.0.0-rc.8" + "default": "undefined", + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } }, { "kind": "field", - "name": "loadingDelay", + "name": "selected", "type": { - "text": "number" + "text": "boolean" }, - "default": "1000", - "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.", - "privacy": "public" - } - ], - "superclass": { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - }, - "_ui5since": "1.0.0-rc.8", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "NotificationListItemBase", - "module": "dist/NotificationListItemBase.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/Page.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-page` is a container component that holds one whole screen of an application.\nThe page has three distinct areas that can hold content - a header, content area and a footer.\n### Structure\n#### Header\nThe top most area of the page is occupied by the header. The standard header includes a navigation button and a title.\n#### Content\nThe content occupies the main part of the page. Only the content area is scrollable by default.\nThis can be prevented by setting `noScrolling` to `true`.\n#### Footer\nThe footer is optional and occupies the part above the bottom part of the content. Alternatively, the footer can be fixed at the bottom of the page by enabling the `fixedFooter` property.\n\n**Note:** `ui5-page` occipues the whole available space of its parent. In order to achieve the intended design you have to make sure\nthat there is enough space for the `ui5-page` to be rendered.\n**Note:** In order for the `ui5-page` to be displayed, the parent element should have fixed height.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/Page.js\";`", - "name": "Page", - "cssParts": [ + "default": "false", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", + "privacy": "public", + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } + }, { - "description": "Used to style the content section of the component", - "name": "content" - } - ], - "slots": [ + "kind": "field", + "name": "href", + "type": { + "text": "string | undefined" + }, + "description": "Defines the link target URI. Supports standard hyperlink behavior.\nIf a JavaScript action should be triggered,\nthis should not be set, but instead an event handler\nfor the `click` event should be registered.", + "privacy": "public", + "default": "undefined", + "_ui5since": "1.19.0", + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } + }, { - "name": "header", - "description": "Defines the header HTML Element.", - "_ui5type": { - "text": "Array<HTMLElement>" + "kind": "field", + "name": "target", + "type": { + "text": "string | undefined" }, - "_ui5privacy": "public" + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", + "privacy": "public", + "default": "undefined", + "_ui5since": "1.19.0", + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } }, { - "name": "default", - "description": "Defines the content HTML Element.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<Node>" + "kind": "field", + "name": "design", + "type": { + "text": "SideNavigationItemDesign", + "references": [ + { + "name": "SideNavigationItemDesign", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/SideNavigationItemDesign.js" + } + ] }, - "_ui5privacy": "public" + "default": "\"Default\"", + "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", + "privacy": "public", + "_ui5since": "2.7.0", + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } }, { - "name": "footer", - "description": "Defines the footer HTML Element.", - "_ui5type": { - "text": "Array<HTMLElement>" + "kind": "field", + "name": "unselectable", + "type": { + "text": "boolean" }, - "_ui5privacy": "public" - } - ], - "members": [ + "default": "false", + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", + "privacy": "public", + "_ui5since": "2.7.0", + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } + }, { "kind": "field", - "name": "backgroundDesign", + "name": "accessibilityAttributes", "type": { - "text": "PageBackgroundDesign", + "text": "SideNavigationItemAccessibilityAttributes", "references": [ { - "name": "PageBackgroundDesign", + "name": "SideNavigationItemAccessibilityAttributes", "package": "@ui5/webcomponents-fiori", - "module": "dist/types/PageBackgroundDesign.js" + "module": "dist/SideNavigationSelectableItemBase.js" } ] }, - "default": "\"Solid\"", - "description": "Defines the background color of the `ui5-page`.\n\n**Note:** When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.", - "privacy": "public" + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", + "privacy": "public", + "_ui5since": "2.7.0", + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } }, { "kind": "field", - "name": "noScrolling", + "name": "text", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Disables vertical scrolling of page content.\nIf set to true, there will be no vertical scrolling at all.", - "privacy": "public" + "description": "Defines the text of the item.", + "privacy": "public", + "default": "undefined", + "inheritedFrom": { + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" + } }, { "kind": "field", - "name": "fixedFooter", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the footer is fixed at the very bottom of the page.\n\n**Note:** When set to true the footer is fixed at the very bottom of the page, otherwise it floats over the content with a slight offset from the bottom.", - "privacy": "public" + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "privacy": "public", + "_ui5since": "1.19.0", + "inheritedFrom": { + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" + } }, { "kind": "field", - "name": "hideFooter", + "name": "tooltip", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines the footer visibility.", - "privacy": "public" + "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.0.0", + "inheritedFrom": { + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" + } } ], "attributes": [ { - "description": "Defines the background color of the `ui5-page`.\n\n**Note:** When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.", - "name": "background-design", - "default": "\"Solid\"", - "fieldName": "backgroundDesign", + "description": "Defines if the item is expanded", + "name": "expanded", + "default": "false", + "fieldName": "expanded", "type": { - "text": "\"List\" | \"Solid\" | \"Transparent\"" + "text": "boolean" } }, { - "description": "Disables vertical scrolling of page content.\nIf set to true, there will be no vertical scrolling at all.", - "name": "no-scrolling", - "default": "false", - "fieldName": "noScrolling", + "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", "type": { - "text": "boolean" + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" } }, { - "description": "Defines if the footer is fixed at the very bottom of the page.\n\n**Note:** When set to true the footer is fixed at the very bottom of the page, otherwise it floats over the content with a slight offset from the bottom.", - "name": "fixed-footer", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", + "name": "selected", "default": "false", - "fieldName": "fixedFooter", + "fieldName": "selected", "type": { "text": "boolean" + }, + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" } }, { - "description": "Defines the footer visibility.", - "name": "hide-footer", - "default": "false", - "fieldName": "hideFooter", + "description": "Defines the link target URI. Supports standard hyperlink behavior.\nIf a JavaScript action should be triggered,\nthis should not be set, but instead an event handler\nfor the `click` event should be registered.", + "name": "href", + "default": "undefined", + "fieldName": "href", "type": { - "text": "boolean" + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-page", - "customElement": true, - "_ui5since": "1.0.0-rc.12", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "Page", - "module": "dist/Page.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-page", - "declaration": { - "name": "Page", - "module": "dist/Page.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/ProductSwitch.js", - "declarations": [ - { - "kind": "interface", - "name": "IProductSwitchItem", - "description": "Interface for components that may be slotted inside `ui5-product-switch` as items", - "_ui5privacy": "public" - }, - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-product-switch` is an SAP Fiori specific web component that is used in `ui5-shellbar`\nand allows the user to easily switch between products.\n\n### Keyboard Handling\nThe `ui5-product-switch` provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Tab] - Move focus to the next interactive element after the `ui5-product-switch`\n- [Up] or [Down] - Navigates up and down the items\n- [Left] or [Right] - Navigates left and right the items\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ProductSwitch.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";` (for `ui5-product-switch-item`)", - "name": "ProductSwitch", - "slots": [ + }, { - "name": "default", - "description": "Defines the items of the `ui5-product-switch`.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<IProductSwitchItem>", - "references": [ - { - "name": "IProductSwitchItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/ProductSwitch.js" - } - ] + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", + "name": "target", + "default": "undefined", + "fieldName": "target", + "type": { + "text": "string | undefined" }, - "_ui5privacy": "public" + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } + }, + { + "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", + "name": "design", + "default": "\"Default\"", + "fieldName": "design", + "type": { + "text": "\"Default\" | \"Action\"" + }, + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } + }, + { + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", + "name": "unselectable", + "default": "false", + "fieldName": "unselectable", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } + }, + { + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "SideNavigationItemAccessibilityAttributes" + }, + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } + }, + { + "description": "Defines the text of the item.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" + } + }, + { + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" + } + }, + { + "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" + } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "SideNavigationSelectableItemBase", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SideNavigationSelectableItemBase.js" }, - "tagName": "ui5-product-switch", + "tagName": "ui5-side-navigation-item", "customElement": true, - "_ui5since": "1.0.0-rc.5", + "_ui5since": "1.0.0-rc.8", "_ui5privacy": "public", - "members": [] + "_ui5abstract": true, + "events": [ + { + "name": "click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<SideNavigationItemClickEventDetail>", + "references": [ + { + "name": "SideNavigationItemClickEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SideNavigationItemBase.js" + } + ] + }, + "description": "Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "altKey", + "_ui5privacy": "public", + "description": "Returns whether the \"ALT\" key was pressed when the event was triggered." + }, + { + "type": { + "text": "boolean" + }, + "name": "ctrlKey", + "_ui5privacy": "public", + "description": "Returns whether the \"CTRL\" key was pressed when the event was triggered." + }, + { + "type": { + "text": "boolean" + }, + "name": "metaKey", + "_ui5privacy": "public", + "description": "Returns whether the \"META\" key was pressed when the event was triggered." + }, + { + "type": { + "text": "boolean" + }, + "name": "shiftKey", + "_ui5privacy": "public", + "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered." + } + ], + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } + } + ] } ], "exports": [ @@ -5408,148 +6775,86 @@ "kind": "js", "name": "default", "declaration": { - "name": "ProductSwitch", - "module": "dist/ProductSwitch.js" + "name": "SideNavigationItem", + "module": "dist/SideNavigationItem.js" } }, { "kind": "custom-element-definition", - "name": "ui5-product-switch", + "name": "ui5-side-navigation-item", "declaration": { - "name": "ProductSwitch", - "module": "dist/ProductSwitch.js" + "name": "SideNavigationItem", + "module": "dist/SideNavigationItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ProductSwitchItem.js", + "path": "dist/SideNavigationItemBase.js", "declarations": [ { "kind": "class", - "description": "### Overview\nThe `ui5-product-switch-item` web component represents the items displayed in the\n`ui5-product-switch` web component.\n\n**Note:** `ui5-product-switch-item` is not supported when used outside of `ui5-product-switch`.\n\n### Keyboard Handling\nThe `ui5-product-switch` provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Space] / [Enter] or [Return] - Trigger `ui5-click` event\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";`", - "name": "ProductSwitchItem", - "slots": [ - { - "name": "image", - "description": "Defines an image to be displayed instead of the standard icon.\n\n**Note:** The image slot takes precedence over the icon property.\n**Note:** We recommend using non-interactive ui5-avatar with size S, Square shape and Transparent colorScheme for best alignment.", - "_ui5since": "2.14.0", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - } - ], + "description": "Base class for the items that are accepted by the `ui5-side-navigation` component.", + "name": "SideNavigationItemBase", "members": [ { "kind": "field", - "name": "titleText", + "name": "text", "type": { "text": "string | undefined" }, - "description": "Defines the title of the component.", - "default": "undefined", + "description": "Defines the text of the item.", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "default": "undefined" }, { "kind": "field", - "name": "subtitleText", + "name": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the subtitle of the component.", - "default": "undefined", + "default": "false", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "1.19.0" }, { "kind": "field", - "name": "icon", + "name": "tooltip", "type": { "text": "string | undefined" }, - "description": "Defines the icon to be displayed as a graphical element within the component.\n\nExample:\n\n`<ui5-product-switch-item icon=\"palette\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", "default": "undefined", - "privacy": "public" - }, + "privacy": "public", + "_ui5since": "2.0.0" + } + ], + "attributes": [ { - "kind": "field", - "name": "target", - "type": { - "text": "string | undefined" - }, - "description": "Defines a target where the `targetSrc` content must be open.\n\nAvailable options are:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**Note:** By default target will be open in the same frame as it was clicked.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "targetSrc", - "type": { - "text": "string | undefined" - }, - "description": "Defines the component target URI. Supports standard hyperlink behavior.", - "default": "undefined", - "privacy": "public" - } - ], - "events": [ - { - "name": "click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the `ui5-product-switch-item` is activated either with a\nclick/tap or by using the Enter or Space key.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true - } - ], - "attributes": [ - { - "description": "Defines the title of the component.", - "name": "title-text", - "default": "undefined", - "fieldName": "titleText", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the subtitle of the component.", - "name": "subtitle-text", - "default": "undefined", - "fieldName": "subtitleText", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the icon to be displayed as a graphical element within the component.\n\nExample:\n\n`<ui5-product-switch-item icon=\"palette\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", + "description": "Defines the text of the item.", + "name": "text", "default": "undefined", - "fieldName": "icon", + "fieldName": "text", "type": { "text": "string | undefined" } }, { - "description": "Defines a target where the `targetSrc` content must be open.\n\nAvailable options are:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**Note:** By default target will be open in the same frame as it was clicked.", - "name": "target", - "default": "undefined", - "fieldName": "target", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the component target URI. Supports standard hyperlink behavior.", - "name": "target-src", + "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", + "name": "tooltip", "default": "undefined", - "fieldName": "targetSrc", + "fieldName": "tooltip", "type": { "text": "string | undefined" } @@ -5560,17 +6865,10 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-product-switch-item", "customElement": true, - "_ui5since": "1.0.0-rc.5", + "_ui5since": "1.19.0", "_ui5privacy": "public", - "_ui5implements": [ - { - "name": "IProductSwitchItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/ProductSwitch.js" - } - ] + "_ui5abstract": true } ], "exports": [ @@ -5578,445 +6876,322 @@ "kind": "js", "name": "default", "declaration": { - "name": "ProductSwitchItem", - "module": "dist/ProductSwitchItem.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-product-switch-item", - "declaration": { - "name": "ProductSwitchItem", - "module": "dist/ProductSwitchItem.js" + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Search.js", + "path": "dist/SideNavigationSelectableItemBase.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nA `ui5-search` is an input with suggestions, used for user search.\n\nThe `ui5-search` consists of several elements parts:\n- Scope - displays a select in the beggining of the component, used for filtering results by their scope.\n- Input field - for user input value\n- Clear button - gives the possibility for deleting the entered value\n- Search button - a primary button for performing search, when the user has entered a search term\n- Suggestions - a list with available search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/Search.js\";`", - "name": "Search", - "slots": [ + "description": "Base class for the navigation items that support actions.", + "name": "SideNavigationSelectableItemBase", + "members": [ { - "name": "default", - "description": "Defines the Search suggestion items.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<SearchItem | SearchItemGroup>" + "kind": "field", + "name": "icon", + "type": { + "text": "string | undefined" }, - "_ui5privacy": "public" + "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "privacy": "public", + "default": "undefined" }, { - "name": "action", - "description": "Defines the popup footer action button.", - "_ui5type": { - "text": "Array<Button>", - "references": [ - { - "name": "Button", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] + "kind": "field", + "name": "selected", + "type": { + "text": "boolean" }, - "_ui5privacy": "public" + "default": "false", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", + "privacy": "public" }, { - "name": "illustration", - "description": "Defines the illustrated message to be shown in the popup.", - "_ui5type": { - "text": "Array<IllustratedMessage>", - "references": [ - { - "name": "IllustratedMessage", - "package": "@ui5/webcomponents-fiori", - "module": "dist/IllustratedMessage.js" - } - ] + "kind": "field", + "name": "href", + "type": { + "text": "string | undefined" }, - "_ui5privacy": "public" + "description": "Defines the link target URI. Supports standard hyperlink behavior.\nIf a JavaScript action should be triggered,\nthis should not be set, but instead an event handler\nfor the `click` event should be registered.", + "privacy": "public", + "default": "undefined", + "_ui5since": "1.19.0" }, { - "name": "messageArea", - "description": "Defines the illustrated message to be shown in the popup.", - "_ui5type": { - "text": "Array<SearchMessageArea>", + "kind": "field", + "name": "target", + "type": { + "text": "string | undefined" + }, + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", + "privacy": "public", + "default": "undefined", + "_ui5since": "1.19.0" + }, + { + "kind": "field", + "name": "design", + "type": { + "text": "SideNavigationItemDesign", "references": [ { - "name": "SearchMessageArea", + "name": "SideNavigationItemDesign", "package": "@ui5/webcomponents-fiori", - "module": "dist/SearchMessageArea.js" + "module": "dist/types/SideNavigationItemDesign.js" } ] }, - "_ui5privacy": "public" + "default": "\"Default\"", + "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", + "privacy": "public", + "_ui5since": "2.7.0" }, { - "name": "scopes", - "description": "Defines the component scope options.", - "_ui5type": { - "text": "Array<ISearchScope>", + "kind": "field", + "name": "unselectable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", + "privacy": "public", + "_ui5since": "2.7.0" + }, + { + "kind": "field", + "name": "accessibilityAttributes", + "type": { + "text": "SideNavigationItemAccessibilityAttributes", "references": [ { - "name": "ISearchScope", + "name": "SideNavigationItemAccessibilityAttributes", "package": "@ui5/webcomponents-fiori", - "module": "dist/SearchField.js" + "module": "dist/SideNavigationSelectableItemBase.js" } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", + "privacy": "public", + "_ui5since": "2.7.0" }, { - "name": "filterButton", - "description": "Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive.", - "_ui5since": "2.11.0", - "_ui5type": { - "text": "Array<Button>", - "references": [ - { - "name": "Button", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] + "kind": "field", + "name": "text", + "type": { + "text": "string | undefined" }, - "_ui5privacy": "public", + "description": "Defines the text of the item.", + "privacy": "public", + "default": "undefined", "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" } - } - ], - "members": [ + }, { "kind": "field", - "name": "loading", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Indicates whether a loading indicator should be shown in the popup.", - "privacy": "public" + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "privacy": "public", + "_ui5since": "1.19.0", + "inheritedFrom": { + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" + } }, { "kind": "field", - "name": "noTypeahead", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the value will be autcompleted to match an item.", - "privacy": "public" - }, - { - "kind": "field", - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Indicates whether the items picker is open.", - "privacy": "public" - }, - { - "kind": "field", - "name": "showClearIcon", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the clear icon of the search will be shown.", - "privacy": "public", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } - }, - { - "kind": "field", - "name": "value", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", - "privacy": "public", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } - }, - { - "kind": "field", - "name": "placeholder", + "name": "tooltip", "type": { "text": "string | undefined" }, - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", - "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } - }, - { - "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "privacy": "public", + "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", "default": "undefined", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } - }, - { - "kind": "field", - "name": "accessibleDescription", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA description of the field.", "privacy": "public", - "default": "undefined", + "_ui5since": "2.0.0", "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" } } ], "events": [ { - "name": "open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the popup is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false - }, - { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the popup is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false - }, - { - "name": "input", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when typing in input or clear icon is pressed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } - }, - { - "name": "scope-change", + "name": "click", "_ui5privacy": "public", "type": { - "text": "CustomEvent<SearchFieldScopeSelectionChangeDetails>", + "text": "CustomEvent<SideNavigationItemClickEventDetail>", "references": [ { - "name": "SearchFieldScopeSelectionChangeDetails", + "name": "SideNavigationItemClickEventDetail", "package": "@ui5/webcomponents-fiori", - "module": "dist/SearchField.js" + "module": "dist/SideNavigationItemBase.js" } ] }, - "description": "Fired when the scope has changed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, + "description": "Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, "_ui5Bubbles": true, "_ui5parameters": [ { "type": { - "text": "HTMLElement" + "text": "boolean" }, - "name": "scope", + "name": "altKey", "_ui5privacy": "public", - "description": "The newly selected scope" + "description": "Returns whether the \"ALT\" key was pressed when the event was triggered." + }, + { + "type": { + "text": "boolean" + }, + "name": "ctrlKey", + "_ui5privacy": "public", + "description": "Returns whether the \"CTRL\" key was pressed when the event was triggered." + }, + { + "type": { + "text": "boolean" + }, + "name": "metaKey", + "_ui5privacy": "public", + "description": "Returns whether the \"META\" key was pressed when the event was triggered." + }, + { + "type": { + "text": "boolean" + }, + "name": "shiftKey", + "_ui5privacy": "public", + "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered." } - ], - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } - }, - { - "name": "search", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the user has triggered search with Enter key or Search Button press.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + ] } ], "attributes": [ { - "description": "Indicates whether a loading indicator should be shown in the popup.", - "name": "loading", - "default": "false", - "fieldName": "loading", + "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines whether the value will be autcompleted to match an item.", - "name": "no-typeahead", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", + "name": "selected", "default": "false", - "fieldName": "noTypeahead", + "fieldName": "selected", "type": { "text": "boolean" } }, { - "description": "Indicates whether the items picker is open.", - "name": "open", - "default": "false", - "fieldName": "open", + "description": "Defines the link target URI. Supports standard hyperlink behavior.\nIf a JavaScript action should be triggered,\nthis should not be set, but instead an event handler\nfor the `click` event should be registered.", + "name": "href", + "default": "undefined", + "fieldName": "href", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines whether the clear icon of the search will be shown.", - "name": "show-clear-icon", - "default": "false", - "fieldName": "showClearIcon", + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", + "name": "target", + "default": "undefined", + "fieldName": "target", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" + "text": "string | undefined" } }, { - "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", - "name": "value", - "default": "\"\"", - "fieldName": "value", + "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", + "name": "design", + "default": "\"Default\"", + "fieldName": "design", "type": { - "text": "string" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" + "text": "\"Default\" | \"Action\"" } }, { - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", - "name": "placeholder", - "default": "undefined", - "fieldName": "placeholder", + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", + "name": "unselectable", + "default": "false", + "fieldName": "unselectable", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" + "text": "boolean" } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "SideNavigationItemAccessibilityAttributes" + } + }, + { + "description": "Defines the text of the item.", + "name": "text", + "default": "undefined", + "fieldName": "text", "type": { "text": "string | undefined" }, "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" } }, { - "description": "Defines the accessible ARIA description of the field.", - "name": "accessible-description", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" + } + }, + { + "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", + "name": "tooltip", "default": "undefined", - "fieldName": "accessibleDescription", + "fieldName": "tooltip", "type": { "text": "string | undefined" }, "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" } } ], "superclass": { - "name": "SearchField", + "name": "SideNavigationItemBase", "package": "@ui5/webcomponents-fiori", - "module": "dist/SearchField.js" + "module": "dist/SideNavigationItemBase.js" }, - "tagName": "ui5-search", "customElement": true, - "_ui5experimental": true, - "_ui5since": "2.9.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "Search", - "module": "dist/Search.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-search", - "declaration": { - "name": "Search", - "module": "dist/Search.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/SearchField.js", - "declarations": [ - { - "kind": "interface", - "name": "ISearchScope", - "description": "Interface for components that may be slotted inside a `ui5-search`", - "_ui5privacy": "public" + "_ui5since": "1.24.0", + "_ui5privacy": "public", + "_ui5abstract": true } ], "exports": [ @@ -6024,365 +7199,381 @@ "kind": "js", "name": "default", "declaration": { - "name": "SearchField", - "module": "dist/SearchField.js" + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" } } ] }, { "kind": "javascript-module", - "path": "dist/SearchItem.js", + "path": "dist/SideNavigationSubItem.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nA `ui5-search-item` is a list item, used for displaying search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SearchItem.js\";`", - "name": "SearchItem", - "slots": [ - { - "name": "image", - "description": "**Note:** While the slot allows the option of setting a custom avatar, to comply with the\ndesign guidelines, use the `ui5-avatar` with size - XS.", - "_ui5since": "2.12.0", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - } - ], + "description": "### Overview\nRepresents a single navigation action within `ui5-side-navigation-item`.\nThe `ui5-side-navigation-sub-item` is intended to be used inside a `ui5-side-navigation-item` only.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";`", + "name": "SideNavigationSubItem", "members": [ { "kind": "field", - "name": "text", + "name": "icon", "type": { "text": "string | undefined" }, - "description": "Defines the heading text of the search item.", + "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "privacy": "public", "default": "undefined", - "privacy": "public" + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } }, { "kind": "field", - "name": "description", + "name": "selected", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the description that appears right under the item text, if available.", - "default": "undefined", + "default": "false", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", "privacy": "public", - "_ui5since": "2.12.0" + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } }, { "kind": "field", - "name": "icon", + "name": "href", "type": { "text": "string | undefined" }, - "description": "Defines the icon name of the search item.\n**Note:** If provided, the image slot will be ignored.", + "description": "Defines the link target URI. Supports standard hyperlink behavior.\nIf a JavaScript action should be triggered,\nthis should not be set, but instead an event handler\nfor the `click` event should be registered.", + "privacy": "public", "default": "undefined", - "privacy": "public" + "_ui5since": "1.19.0", + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } }, { "kind": "field", - "name": "selected", + "name": "target", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the search item is selected.", - "privacy": "public" + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", + "privacy": "public", + "default": "undefined", + "_ui5since": "1.19.0", + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } }, { "kind": "field", - "name": "deletable", + "name": "design", "type": { - "text": "boolean" + "text": "SideNavigationItemDesign", + "references": [ + { + "name": "SideNavigationItemDesign", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/SideNavigationItemDesign.js" + } + ] }, - "default": "false", - "description": "Defines whether the search item is deletable.", - "privacy": "public" + "default": "\"Default\"", + "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", + "privacy": "public", + "_ui5since": "2.7.0", + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } }, { "kind": "field", - "name": "scopeName", + "name": "unselectable", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the scope of the search item", - "default": "undefined", - "privacy": "public" - } - ], - "events": [ + "default": "false", + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", + "privacy": "public", + "_ui5since": "2.7.0", + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } + }, { - "name": "delete", - "_ui5privacy": "public", + "kind": "field", + "name": "accessibilityAttributes", "type": { - "text": "CustomEvent" + "text": "SideNavigationItemAccessibilityAttributes", + "references": [ + { + "name": "SideNavigationItemAccessibilityAttributes", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SideNavigationSelectableItemBase.js" + } + ] }, - "description": "Fired when delete button is pressed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false - } - ], - "attributes": [ + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", + "privacy": "public", + "_ui5since": "2.7.0", + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } + }, { - "description": "Defines the heading text of the search item.", + "kind": "field", "name": "text", - "default": "undefined", - "fieldName": "text", "type": { "text": "string | undefined" + }, + "description": "Defines the text of the item.", + "privacy": "public", + "default": "undefined", + "inheritedFrom": { + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" } }, { - "description": "Defines the description that appears right under the item text, if available.", - "name": "description", - "default": "undefined", - "fieldName": "description", + "kind": "field", + "name": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "privacy": "public", + "_ui5since": "1.19.0", + "inheritedFrom": { + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" } }, { - "description": "Defines the icon name of the search item.\n**Note:** If provided, the image slot will be ignored.", - "name": "icon", - "default": "undefined", - "fieldName": "icon", + "kind": "field", + "name": "tooltip", "type": { "text": "string | undefined" - } + }, + "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.0.0", + "inheritedFrom": { + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" + } + } + ], + "superclass": { + "name": "SideNavigationSelectableItemBase", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SideNavigationSelectableItemBase.js" + }, + "tagName": "ui5-side-navigation-sub-item", + "customElement": true, + "_ui5since": "1.0.0-rc.8", + "_ui5privacy": "public", + "_ui5abstract": true, + "attributes": [ + { + "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } }, { - "description": "Defines whether the search item is selected.", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", "name": "selected", "default": "false", "fieldName": "selected", "type": { "text": "boolean" + }, + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" } }, { - "description": "Defines whether the search item is deletable.", - "name": "deletable", - "default": "false", - "fieldName": "deletable", + "description": "Defines the link target URI. Supports standard hyperlink behavior.\nIf a JavaScript action should be triggered,\nthis should not be set, but instead an event handler\nfor the `click` event should be registered.", + "name": "href", + "default": "undefined", + "fieldName": "href", "type": { - "text": "boolean" + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" } }, { - "description": "Defines the scope of the search item", - "name": "scope-name", + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", + "name": "target", "default": "undefined", - "fieldName": "scopeName", + "fieldName": "target", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" } - } - ], - "superclass": { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - }, - "tagName": "ui5-search-item", - "customElement": true, - "_ui5experimental": true, - "_ui5since": "2.9.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "SearchItem", - "module": "dist/SearchItem.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-search-item", - "declaration": { - "name": "SearchItem", - "module": "dist/SearchItem.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/SearchItemGroup.js", - "declarations": [ - { - "kind": "class", - "description": "The `ui5-search-item-group` is type of suggestion item,\nthat can be used to split the `ui5-search-item` suggestions into groups.", - "name": "SearchItemGroup", - "superclass": { - "name": "ListItemGroup", - "package": "@ui5/webcomponents", - "module": "dist/ListItemGroup.js" - }, - "tagName": "ui5-search-item-group", - "customElement": true, - "_ui5experimental": true, - "_ui5since": "2.9.0", - "_ui5privacy": "public", - "members": [ + }, { - "kind": "field", - "name": "headerText", + "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", + "name": "design", + "default": "\"Default\"", + "fieldName": "design", "type": { - "text": "string | undefined" + "text": "\"Default\" | \"Action\"" }, - "description": "Defines the header text of the <code>ui5-li-group</code>.", - "privacy": "public", - "default": "undefined" + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } }, { - "kind": "field", - "name": "headerAccessibleName", + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", + "name": "unselectable", + "default": "false", + "fieldName": "unselectable", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible name of the header.", - "privacy": "public", - "default": "undefined" + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } }, { - "kind": "field", - "name": "wrappingType", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "WrappingType", - "references": [ - { - "name": "WrappingType", - "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" - } - ] + "text": "SideNavigationItemAccessibilityAttributes" }, - "default": "\"None\"", - "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", - "privacy": "public", - "_ui5since": "2.15.0" - } - ], - "slots": [ + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } + }, { - "name": "default", - "description": "Defines the items of the <code>ui5-li-group</code>.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<ListItemBase>", - "references": [ - { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - } - ] + "description": "Defines the text of the item.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" }, - "_ui5privacy": "public" + "inheritedFrom": { + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" + } }, { - "name": "header", - "description": "Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.", - "_ui5type": { - "text": "Array<ListItemBase>", - "references": [ - { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - } - ] + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" }, - "_ui5privacy": "public" + "inheritedFrom": { + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" + } + }, + { + "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "SideNavigationItemBase", + "module": "dist/SideNavigationItemBase.js" + } } ], "events": [ { - "name": "move-over", + "name": "click", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ListItemGroupMoveEventDetail>", + "text": "CustomEvent<SideNavigationItemClickEventDetail>", "references": [ { - "name": "ListItemGroupMoveEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/ListItemGroup.js" + "name": "SideNavigationItemClickEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/SideNavigationItemBase.js" } ] }, - "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "description": "Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, "_ui5Bubbles": true, - "_ui5since": "2.1.0", "_ui5parameters": [ { "type": { - "text": "object" + "text": "boolean" }, - "name": "source", + "name": "altKey", "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." + "description": "Returns whether the \"ALT\" key was pressed when the event was triggered." }, { "type": { - "text": "object" + "text": "boolean" }, - "name": "destination", + "name": "ctrlKey", "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." - } - ] - }, - { - "name": "move", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<ListItemGroupMoveEventDetail>", - "references": [ - { - "name": "ListItemGroupMoveEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/ListItemGroup.js" - } - ] - }, - "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.1.0", - "_ui5parameters": [ + "description": "Returns whether the \"CTRL\" key was pressed when the event was triggered." + }, { "type": { - "text": "object" + "text": "boolean" }, - "name": "source", + "name": "metaKey", "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." + "description": "Returns whether the \"META\" key was pressed when the event was triggered." }, { "type": { - "text": "object" + "text": "boolean" }, - "name": "destination", + "name": "shiftKey", "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered." } - ] - } - ], - "cssParts": [ - { - "description": "Used to style the header item of the group", - "name": "header" + ], + "inheritedFrom": { + "name": "SideNavigationSelectableItemBase", + "module": "dist/SideNavigationSelectableItemBase.js" + } } ] } @@ -6392,38 +7583,38 @@ "kind": "js", "name": "default", "declaration": { - "name": "SearchItemGroup", - "module": "dist/SearchItemGroup.js" + "name": "SideNavigationSubItem", + "module": "dist/SideNavigationSubItem.js" } }, { "kind": "custom-element-definition", - "name": "ui5-search-item-group", + "name": "ui5-side-navigation-sub-item", "declaration": { - "name": "SearchItemGroup", - "module": "dist/SearchItemGroup.js" + "name": "SideNavigationSubItem", + "module": "dist/SideNavigationSubItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/SearchItemShowMore.js", + "path": "dist/SortItem.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nA `ui5-search-item-show-more` is a special type of ui5-li that acts as a button to progressively reveal additional (overflow) items within a group.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SearchItemShowMore.js\";`", - "name": "SearchItemShowMore", + "description": "### Overview\n\nThe `ui5-sort-item` component defines the sorting criteria for data in `ui5-view-settings-dialog`.\nIt represents a single sort option that users can select to organize data in ascending or descending order.\n\n### Usage\n\nThe `ui5-sort-item` is used within the `ui5-view-settings-dialog` to provide sorting options.\nEach sort item represents a column or field by which data can be sorted.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`", + "name": "SortItem", "members": [ { "kind": "field", - "name": "itemsToShowCount", + "name": "text", "type": { - "text": "number | undefined" + "text": "string | undefined" }, - "description": "Specifies the number of additional items available to show.\nThis value replaces the placeholder (N) in the \"Show more (N)\" text.\nIf not set, the placeholder will remain as (N).", - "privacy": "public", - "default": "undefined" + "description": "Defines the text of the sort item.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", @@ -6432,22 +7623,22 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether the show more item is selected.", + "description": "Defines if the sort item is selected.", "privacy": "public" } ], "attributes": [ { - "description": "Specifies the number of additional items available to show.\nThis value replaces the placeholder (N) in the \"Show more (N)\" text.\nIf not set, the placeholder will remain as (N).", - "name": "items-to-show-count", + "description": "Defines the text of the sort item.", + "name": "text", "default": "undefined", - "fieldName": "itemsToShowCount", + "fieldName": "text", "type": { - "text": "number | undefined" + "text": "string | undefined" } }, { - "description": "Defines whether the show more item is selected.", + "description": "Defines if the sort item is selected.", "name": "selected", "default": "false", "fieldName": "selected", @@ -6457,15 +7648,15 @@ } ], "superclass": { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" }, - "tagName": "ui5-search-item-show-more", + "tagName": "ui5-sort-item", "customElement": true, - "_ui5experimental": true, - "_ui5since": "2.14.0", - "_ui5privacy": "public" + "_ui5since": "1.0.0-rc.16", + "_ui5privacy": "public", + "_ui5abstract": true } ], "exports": [ @@ -6473,149 +7664,181 @@ "kind": "js", "name": "default", "declaration": { - "name": "SearchItemShowMore", - "module": "dist/SearchItemShowMore.js" + "name": "SortItem", + "module": "dist/SortItem.js" } }, { "kind": "custom-element-definition", - "name": "ui5-search-item-show-more", + "name": "ui5-sort-item", "declaration": { - "name": "SearchItemShowMore", - "module": "dist/SearchItemShowMore.js" + "name": "SortItem", + "module": "dist/SortItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/SearchMessageArea.js", + "path": "dist/Timeline.js", "declarations": [ + { + "kind": "interface", + "name": "ITimelineItem", + "description": "Interface for components that may be slotted inside `ui5-timeline` as items", + "_ui5privacy": "public" + }, { "kind": "class", - "description": "`import \"@ui5/webcomponents-fiori/dist/SearchMessageArea.js\";`", - "name": "SearchMessageArea", + "description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.", + "name": "Timeline", + "slots": [ + { + "name": "default", + "description": "Determines the content of the `ui5-timeline`.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<ITimelineItem>", + "references": [ + { + "name": "ITimelineItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/Timeline.js" + } + ] + }, + "_ui5privacy": "public" + } + ], "members": [ { "kind": "field", - "name": "text", + "name": "layout", "type": { - "text": "string | undefined" + "text": "TimelineLayout", + "references": [ + { + "name": "TimelineLayout", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/TimelineLayout.js" + } + ] }, - "description": "Defines the text to be displayed.", - "default": "undefined", - "privacy": "public" + "default": "\"Vertical\"", + "description": "Defines the items orientation.", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "description", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the description text to be displayed.", - "default": "undefined", - "privacy": "public" - } - ], - "attributes": [ - { - "description": "Defines the text to be displayed.", - "name": "text", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", - "fieldName": "text", - "type": { - "text": "string | undefined" - } + "privacy": "public", + "_ui5since": "1.2.0" }, - { - "description": "Defines the description text to be displayed.", - "name": "description", - "default": "undefined", - "fieldName": "description", - "type": { - "text": "string | undefined" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-search-message-area", - "customElement": true, - "_ui5experimental": true, - "_ui5since": "2.9.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "SearchMessageArea", - "module": "dist/SearchMessageArea.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-search-message-area", - "declaration": { - "name": "SearchMessageArea", - "module": "dist/SearchMessageArea.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/SearchScope.js", - "declarations": [ - { - "kind": "class", - "description": "The `ui5-search-scope` represents the options for the scope in `ui5-search`.", - "name": "SearchScope", - "members": [ { "kind": "field", - "name": "text", + "name": "loading", "type": { - "text": "string" + "text": "boolean" }, - "description": "Defines the text of the component.", - "default": "\"\"", - "privacy": "public" + "default": "false", + "description": "Defines if the component should display a loading indicator over the Timeline.", + "privacy": "public", + "_ui5since": "2.7.0" }, { "kind": "field", - "name": "selected", + "name": "loadingDelay", "type": { - "text": "boolean" + "text": "number" }, - "description": "Indicates whether the item is selected", - "default": "false", + "default": "1000", + "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", "privacy": "public" - } - ], - "attributes": [ - { - "description": "Defines the text of the component.", - "name": "text", - "default": "\"\"", - "fieldName": "text", - "type": { - "text": "string" - } }, { - "description": "Indicates whether the item is selected", - "name": "selected", + "kind": "field", + "name": "growing", + "type": { + "text": "TimelineGrowingMode", + "references": [ + { + "name": "TimelineGrowingMode", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/TimelineGrowingMode.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines whether the Timeline will have growing capability either by pressing a \"More\" button,\nor via user scroll. In both cases a `load-more` event is fired.\n\nAvailable options:\n\n`Button` - Displays a button at the end of the Timeline, which when pressed triggers the `load-more` event.\n\n`Scroll` -Triggers the `load-more` event when the user scrolls to the end of the Timeline.\n\n`None` (default) - The growing functionality is off.", + "privacy": "public", + "_ui5since": "2.7.0" + } + ], + "events": [ + { + "name": "load-more", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.7.0" + } + ], + "attributes": [ + { + "description": "Defines the items orientation.", + "name": "layout", + "default": "\"Vertical\"", + "fieldName": "layout", + "type": { + "text": "\"Vertical\" | \"Horizontal\"" + } + }, + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines if the component should display a loading indicator over the Timeline.", + "name": "loading", "default": "false", - "fieldName": "selected", + "fieldName": "loading", "type": { "text": "boolean" } + }, + { + "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", + "name": "loading-delay", + "default": "1000", + "fieldName": "loadingDelay", + "type": { + "text": "number" + } + }, + { + "description": "Defines whether the Timeline will have growing capability either by pressing a \"More\" button,\nor via user scroll. In both cases a `load-more` event is fired.\n\nAvailable options:\n\n`Button` - Displays a button at the end of the Timeline, which when pressed triggers the `load-more` event.\n\n`Scroll` -Triggers the `load-more` event when the user scrolls to the end of the Timeline.\n\n`None` (default) - The growing functionality is off.", + "name": "growing", + "default": "\"None\"", + "fieldName": "growing", + "type": { + "text": "\"Button\" | \"None\" | \"Scroll\"" + } } ], "superclass": { @@ -6623,19 +7846,10 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-search-scope", + "tagName": "ui5-timeline", "customElement": true, - "_ui5experimental": true, - "_ui5since": "2.9.0", - "_ui5privacy": "public", - "_ui5abstract": true, - "_ui5implements": [ - { - "name": "ISearchScope", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SearchField.js" - } - ] + "_ui5since": "0.8.0", + "_ui5privacy": "public" } ], "exports": [ @@ -6643,733 +7857,555 @@ "kind": "js", "name": "default", "declaration": { - "name": "SearchScope", - "module": "dist/SearchScope.js" + "name": "Timeline", + "module": "dist/Timeline.js" } }, { "kind": "custom-element-definition", - "name": "ui5-search-scope", + "name": "ui5-timeline", "declaration": { - "name": "SearchScope", - "module": "dist/SearchScope.js" + "name": "Timeline", + "module": "dist/Timeline.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ShellBar.js", + "path": "dist/TimelineGroupItem.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-shellbar` is meant to serve as an application header\nand includes numerous built-in features, such as: logo, profile image/icon, title, search field, notifications and so on.\n\n### Stable DOM Refs\n\nYou can use the following stable DOM refs for the `ui5-shellbar`:\n\n- logo\n- notifications\n- overflow\n- profile\n- product-switch\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ShellBar.js\";`", - "name": "ShellBar", - "cssParts": [ - { - "description": "Used to style the outermost wrapper of the `ui5-shellbar`", - "name": "root" - } - ], + "description": "### Overview\n\nAn entry posted on the timeline.\nIt is intented to represent a group of `<ui5-timeline-item>`s.\n\n**Note**: Please do not use empty groups in order to preserve the intended design.", + "name": "TimelineGroupItem", "slots": [ - { - "name": "assistant", - "description": "Defines the assistant slot.", - "_ui5since": "2.0.0", - "_ui5type": { - "text": "Array<IButton>", - "references": [ - { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] - }, - "_ui5privacy": "public" - }, - { - "name": "branding", - "description": "Defines the branding slot.\nThe `ui5-shellbar-branding` component is intended to be placed inside this slot.\nContent placed here takes precedence over the `primaryTitle` property and the `logo` content slot.\n\n**Note:** The `branding` slot is in an experimental state and is a subject to change.", - "_ui5since": "2.12.0", - "_ui5type": { - "text": "Array<ShellBarBranding>", - "references": [ - { - "name": "ShellBarBranding", - "package": "@ui5/webcomponents-fiori", - "module": "dist/ShellBarBranding.js" - } - ] - }, - "_ui5privacy": "public" - }, { "name": "default", - "description": "Defines the `ui5-shellbar` additional items.\n\n**Note:**\nYou can use the `<ui5-shellbar-item></ui5-shellbar-item>`.", + "description": "Determines the content of the `ui5-timeline-group-item`.", "_ui5propertyName": "items", "_ui5type": { - "text": "Array<ShellBarItem>", - "references": [ - { - "name": "ShellBarItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/ShellBarItem.js" - } - ] - }, - "_ui5privacy": "public" - }, - { - "name": "profile", - "description": "You can pass `ui5-avatar` to set the profile image/icon.\nIf no profile slot is set - profile will be excluded from actions.\n\n**Note:** We recommend not using the `size` attribute of `ui5-avatar` because\nit should have specific size by design in the context of `ui5-shellbar` profile.", - "_ui5since": "1.0.0-rc.6", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - }, - { - "name": "logo", - "description": "Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo.", - "_ui5since": "1.0.0-rc.8", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - }, - { - "name": "menuItems", - "description": "Defines the items displayed in menu after a click on a start button.\n\n**Note:** You can use the `<ui5-li></ui5-li>` and its ancestors.", - "_ui5since": "0.10", - "_ui5type": { - "text": "Array<ListItemBase>", - "references": [ - { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - } - ] - }, - "_ui5privacy": "public" - }, - { - "name": "searchField", - "description": "Defines the `ui5-input`, that will be used as a search field.", - "_ui5type": { - "text": "Array<IShellBarSearchField>", + "text": "Array<ITimelineItem>", "references": [ { - "name": "IShellBarSearchField", + "name": "ITimelineItem", "package": "@ui5/webcomponents-fiori", - "module": "dist/ShellBar.js" - } - ] - }, - "_ui5privacy": "public" - }, - { - "name": "startButton", - "description": "Defines a `ui5-button` in the bar that will be placed in the beginning.\nWe encourage this slot to be used for a menu button.\nIt gets overstyled to match ShellBar's styling.", - "_ui5type": { - "text": "Array<IButton>", - "references": [ - { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" + "module": "dist/Timeline.js" } ] }, "_ui5privacy": "public" - }, - { - "name": "content", - "description": "Define the items displayed in the content area.\n\nUse the `data-hide-order` attribute with numeric value to specify the order of the items to be hidden when the space is not enough.\nLower values will be hidden first.\n\n**Note:** The `content` slot is in an experimental state and is a subject to change.", - "_ui5since": "2.7.0", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "hideSearchButton", + "name": "groupName", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines the visibility state of the search button.\n\n**Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.", + "description": "Defines the text of the button that expands and collapses the group.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "disableSearchCollapse", + "name": "collapsed", "type": { "text": "boolean" }, "default": "false", - "description": "Disables the automatic search field expansion/collapse when the available space is not enough.\n\n**Note:** The `disableSearchCollapse` property is in an experimental state and is a subject to change.", + "description": "Determines if the group is collapsed or expanded.", "privacy": "public" - }, + } + ], + "events": [ { - "kind": "field", - "name": "primaryTitle", + "name": "toggle", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent" }, - "description": "Defines the `primaryTitle`.\n\n**Note:** The `primaryTitle` would be hidden on S screen size (less than approx. 700px).", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "secondaryTitle", - "type": { + "description": "Fired when the group item is expanded or collapsed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ], + "attributes": [ + { + "description": "Defines the text of the button that expands and collapses the group.", + "name": "group-name", + "default": "undefined", + "fieldName": "groupName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Determines if the group is collapsed or expanded.", + "name": "collapsed", + "default": "false", + "fieldName": "collapsed", + "type": { + "text": "boolean" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-timeline-group-item", + "customElement": true, + "_ui5since": "2.1.0", + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "ITimelineItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/Timeline.js" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TimelineGroupItem", + "module": "dist/TimelineGroupItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-timeline-group-item", + "declaration": { + "name": "TimelineGroupItem", + "module": "dist/TimelineGroupItem.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TimelineItem.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nAn entry posted on the timeline.", + "name": "TimelineItem", + "slots": [ + { + "name": "default", + "description": "Defines the content of the `ui5-timeline-item`.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<Node>" + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "icon", + "type": { "text": "string | undefined" }, - "description": "Defines the `secondaryTitle`.\n\n**Note:** The `secondaryTitle` would be hidden on S and M screen sizes (less than approx. 1300px).", + "description": "Defines the icon to be displayed as graphical element within the `ui5-timeline-item`.\nSAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "notificationsCount", + "name": "name", "type": { "text": "string | undefined" }, - "description": "Defines the `notificationsCount`,\ndisplayed in the notification icon top-right corner.", + "description": "Defines the name of the item, displayed before the `title-text`.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "showNotifications", + "name": "nameClickable", "type": { "text": "boolean" }, "default": "false", - "description": "Defines, if the notification icon would be displayed.", + "description": "Defines if the `name` is clickable.", "privacy": "public" }, { "kind": "field", - "name": "showProductSwitch", + "name": "titleText", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines, if the product switch icon would be displayed.", + "description": "Defines the title text of the component.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "showSearchField", + "name": "subtitleText", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines, if the Search Field would be displayed when there is a valid `searchField` slot.\n\n**Note:** By default the Search Field is not displayed.", + "description": "Defines the subtitle text of the component.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "state", "type": { - "text": "ShellBarAccessibilityAttributes", + "text": "ValueState", "references": [ { - "name": "ShellBarAccessibilityAttributes", - "package": "@ui5/webcomponents-fiori", - "module": "dist/ShellBar.js" + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" } ] }, - "default": "{}", - "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n- **logo** - `logo.role` and `logo.name`.\n- **notifications** - `notifications.expanded` and `notifications.hasPopup`.\n- **profile** - `profile.expanded`, `profile.hasPopup` and `profile.name`.\n- **product** - `product.expanded` and `product.hasPopup`.\n- **search** - `search.hasPopup`.\n- **overflow** - `overflow.expanded` and `overflow.hasPopup`.\n- **branding** - `branding.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA role of the logo area.\nAccepts the following string values: `button` or `link`.\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.", + "default": "\"None\"", + "description": "Defines the state of the icon displayed in the `ui5-timeline-item`.", "privacy": "public", - "_ui5since": "1.10.0" - }, + "_ui5since": "2.7.0" + } + ], + "events": [ { - "kind": "method", - "name": "closeOverflow", - "return": { - "type": { - "text": "void" - } + "name": "name-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" }, - "description": "Closes the overflow area.\nUseful to manually close the overflow after having suppressed automatic closing with preventDefault() of ShellbarItem's press event", - "privacy": "public" - }, + "description": "Fired when the item name is pressed either with a\nclick/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `name-clickable`\nattribute is not set.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ], + "attributes": [ { - "kind": "field", - "name": "logoDomRef", + "description": "Defines the icon to be displayed as graphical element within the `ui5-timeline-item`.\nSAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", "type": { - "text": "HTMLElement | null" - }, - "description": "Returns the `logo` DOM ref.", - "privacy": "public", - "default": "null", - "readonly": true, - "_ui5since": "1.0.0-rc.16" + "text": "string | undefined" + } }, { - "kind": "field", - "name": "notificationsDomRef", + "description": "Defines the name of the item, displayed before the `title-text`.", + "name": "name", + "default": "undefined", + "fieldName": "name", "type": { - "text": "HTMLElement | null" - }, - "description": "Returns the `notifications` icon DOM ref.", - "privacy": "public", - "default": "null", - "readonly": true, - "_ui5since": "1.0.0-rc.16" + "text": "string | undefined" + } }, { - "kind": "field", - "name": "overflowDomRef", + "description": "Defines if the `name` is clickable.", + "name": "name-clickable", + "default": "false", + "fieldName": "nameClickable", "type": { - "text": "HTMLElement | null" - }, - "description": "Returns the `overflow` icon DOM ref.", - "privacy": "public", - "default": "null", - "readonly": true, - "_ui5since": "1.0.0-rc.16" + "text": "boolean" + } }, { - "kind": "field", - "name": "profileDomRef", + "description": "Defines the title text of the component.", + "name": "title-text", + "default": "undefined", + "fieldName": "titleText", "type": { - "text": "HTMLElement | null" - }, - "description": "Returns the `profile` icon DOM ref.", - "privacy": "public", - "default": "null", - "readonly": true, - "_ui5since": "1.0.0-rc.16" + "text": "string | undefined" + } }, { - "kind": "field", - "name": "productSwitchDomRef", + "description": "Defines the subtitle text of the component.", + "name": "subtitle-text", + "default": "undefined", + "fieldName": "subtitleText", "type": { - "text": "HTMLElement | null" - }, - "description": "Returns the `product-switch` icon DOM ref.", - "privacy": "public", - "default": "null", - "readonly": true, - "_ui5since": "1.0.0-rc.16" + "text": "string | undefined" + } }, { - "kind": "method", - "name": "getSearchButtonDomRef", - "return": { - "type": { - "text": "Promise<HTMLElement | null>" - }, - "description": "The search icon DOM ref" - }, - "description": "Returns the `search` icon DOM ref.", - "privacy": "public", - "_ui5since": "2.10.0" + "description": "Defines the state of the icon displayed in the `ui5-timeline-item`.", + "name": "state", + "default": "\"None\"", + "fieldName": "state", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + } } ], - "events": [ + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-timeline-item", + "customElement": true, + "_ui5privacy": "public", + "_ui5implements": [ { - "name": "notifications-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<ShellBarNotificationsClickEventDetail>", + "name": "ITimelineItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/Timeline.js" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TimelineItem", + "module": "dist/TimelineItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-timeline-item", + "declaration": { + "name": "TimelineItem", + "module": "dist/TimelineItem.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/UploadCollection.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\nThis component allows you to represent files before uploading them to a server, with the help of `ui5-upload-collection-item`.\nIt also allows you to show already uploaded files.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UploadCollection.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/UploadCollectionItem.js\";` (for `ui5-upload-collection-item`)", + "name": "UploadCollection", + "slots": [ + { + "name": "default", + "description": "Defines the items of the `ui5-upload-collection`.\n\n**Note:** Use `ui5-upload-collection-item` for the intended design.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<UploadCollectionItem>", "references": [ { - "name": "ShellBarNotificationsClickEventDetail", + "name": "UploadCollectionItem", "package": "@ui5/webcomponents-fiori", - "module": "dist/ShellBar.js" + "module": "dist/UploadCollectionItem.js" } ] }, - "description": "Fired, when the notification icon is activated.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "targetRef", - "_ui5privacy": "public", - "description": "dom ref of the activated element" - } - ] + "_ui5privacy": "public" }, { - "name": "profile-click", - "_ui5privacy": "public", + "name": "header", + "description": "Defines the `ui5-upload-collection` header.\n\n**Note:** If `header` slot is provided,\nthe labelling of the `UploadCollection` is a responsibility of the application developer.\n`accessibleName` should be used.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "selectionMode", "type": { - "text": "CustomEvent<ShellBarProfileClickEventDetail>", + "text": "UploadCollectionSelectionMode", "references": [ { - "name": "ShellBarProfileClickEventDetail", + "name": "UploadCollectionSelectionMode", "package": "@ui5/webcomponents-fiori", - "module": "dist/ShellBar.js" + "module": "dist/types/UploadCollectionSelectionMode.js" } ] }, - "description": "Fired, when the profile slot is present.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "targetRef", - "_ui5privacy": "public", - "description": "dom ref of the activated element" - } - ] + "default": "\"None\"", + "description": "Defines the selection mode of the `ui5-upload-collection`.", + "privacy": "public" }, { - "name": "product-switch-click", - "_ui5privacy": "public", + "kind": "field", + "name": "noDataDescription", "type": { - "text": "CustomEvent<ShellBarProductSwitchClickEventDetail>", - "references": [ - { - "name": "ShellBarProductSwitchClickEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/ShellBar.js" - } - ] + "text": "string | undefined" }, - "description": "Fired, when the product switch icon is activated.\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "targetRef", - "_ui5privacy": "public", - "description": "dom ref of the activated element" - } - ] + "description": "Allows you to set your own text for the 'No data' description.", + "default": "undefined", + "privacy": "public" }, { - "name": "logo-click", - "_ui5privacy": "public", + "kind": "field", + "name": "noDataText", "type": { - "text": "CustomEvent<ShellBarLogoClickEventDetail>", - "references": [ - { - "name": "ShellBarLogoClickEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/ShellBar.js" - } - ] + "text": "string | undefined" }, - "description": "Fired, when the logo is activated.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "0.10", - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "targetRef", - "_ui5privacy": "public", - "description": "dom ref of the activated element" - } - ] + "description": "Allows you to set your own text for the 'No data' text.", + "default": "undefined", + "privacy": "public" }, { - "name": "menu-item-click", - "_ui5privacy": "public", + "kind": "field", + "name": "noDataHeaderLevel", "type": { - "text": "CustomEvent<ShellBarMenuItemClickEventDetail>", + "text": "TitleLevel", "references": [ { - "name": "ShellBarMenuItemClickEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/ShellBar.js" + "name": "TitleLevel", + "package": "@ui5/webcomponents", + "module": "dist/types/TitleLevel.js" } ] }, - "description": "Fired, when a menu item is activated\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5since": "0.10", - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "DOM ref of the activated list item" - } - ] + "default": "\"H2\"", + "description": "Defines the header level of the 'No data' text.", + "privacy": "public", + "_ui5since": "2.16.0" }, { - "name": "search-button-click", + "kind": "field", + "name": "hideDragOverlay", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "By default there will be drag and drop overlay shown over the `ui5-upload-collection` when files\nare dragged. If you don't intend to use drag and drop, set this property.\n\n**Note:** It is up to the application developer to add handler for `drop` event and handle it.\n`ui5-upload-collection` only displays an overlay.", + "privacy": "public" + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.16" + } + ], + "events": [ + { + "name": "item-delete", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ShellBarSearchButtonEventDetail>", + "text": "CustomEvent<UploadCollectionItemDeleteEventDetail>", "references": [ { - "name": "ShellBarSearchButtonEventDetail", + "name": "UploadCollectionItemDeleteEventDetail", "package": "@ui5/webcomponents-fiori", - "module": "dist/ShellBar.js" + "module": "dist/UploadCollection.js" } ] }, - "description": "Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, + "description": "Fired when an element is dropped inside the drag and drop overlay.\n\n**Note:** The `drop` event is fired only when elements are dropped within the drag and drop overlay and ignored for the other parts of the `ui5-upload-collection`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, "_ui5Bubbles": true, "_ui5parameters": [ { "type": { - "text": "HTMLElement" - }, - "name": "targetRef", - "_ui5privacy": "public", - "description": "dom ref of the activated element" - }, - { - "type": { - "text": "Boolean" + "text": "DataTransfer" }, - "name": "searchFieldVisible", + "name": "dataTransfer", "_ui5privacy": "public", - "description": "whether the search field is visible" + "description": "The `drop` event operation data." } ] }, { - "name": "search-field-toggle", + "name": "selection-change", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ShellBarSearchFieldToggleEventDetail>", + "text": "CustomEvent<UploadCollectionSelectionChangeEventDetail>", "references": [ { - "name": "ShellBarSearchFieldToggleEventDetail", + "name": "UploadCollectionSelectionChangeEventDetail", "package": "@ui5/webcomponents-fiori", - "module": "dist/ShellBar.js" + "module": "dist/UploadCollection.js" } ] }, - "description": "Fired, when the search field is expanded or collapsed.", + "description": "Fired when selection is changed by user interaction\nin `Single` and `Multiple` modes.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "2.10.0", "_ui5parameters": [ { "type": { - "text": "Boolean" + "text": "Array" }, - "name": "expanded", + "name": "selectedItems", "_ui5privacy": "public", - "description": "whether the search field is expanded" - } - ] - }, - { - "name": "search-field-clear", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<ShellBarSearchFieldClearEventDetail>", - "references": [ - { - "name": "ShellBarSearchFieldClearEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/ShellBar.js" - } - ] - }, - "description": "Fired, when the search cancel button is activated.\n\n**Note:** You can prevent the default behavior (clearing the search field value) by calling `event.preventDefault()`. The search will still be closed.\n**Note:** The `search-field-clear` event is in an experimental state and is a subject to change.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5since": "2.14.0", - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "targetRef", - "_ui5privacy": "public", - "description": "dom ref of the cancel button element" - } - ] - }, - { - "name": "content-item-visibility-change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<ShellBarContentItemVisibilityChangeEventDetail>", - "references": [ - { - "name": "ShellBarContentItemVisibilityChangeEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/ShellBar.js" - } - ] - }, - "description": "Fired, when an item from the content slot is hidden or shown.\n**Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.7.0", - "_ui5parameters": [ - { - "type": { - "text": "Array<HTMLElement>" - }, - "name": "array", - "_ui5privacy": "public", - "description": "of all the items that are hidden" + "description": "An array of the selected items." } ] } ], "attributes": [ { - "description": "Defines the visibility state of the search button.\n\n**Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.", - "name": "hide-search-button", - "default": "false", - "fieldName": "hideSearchButton", - "type": { - "text": "boolean" - } - }, - { - "description": "Disables the automatic search field expansion/collapse when the available space is not enough.\n\n**Note:** The `disableSearchCollapse` property is in an experimental state and is a subject to change.", - "name": "disable-search-collapse", - "default": "false", - "fieldName": "disableSearchCollapse", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the `primaryTitle`.\n\n**Note:** The `primaryTitle` would be hidden on S screen size (less than approx. 700px).", - "name": "primary-title", - "default": "undefined", - "fieldName": "primaryTitle", + "description": "Defines the selection mode of the `ui5-upload-collection`.", + "name": "selection-mode", + "default": "\"None\"", + "fieldName": "selectionMode", "type": { - "text": "string | undefined" + "text": "\"None\" | \"Single\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Multiple\"" } }, { - "description": "Defines the `secondaryTitle`.\n\n**Note:** The `secondaryTitle` would be hidden on S and M screen sizes (less than approx. 1300px).", - "name": "secondary-title", + "description": "Allows you to set your own text for the 'No data' description.", + "name": "no-data-description", "default": "undefined", - "fieldName": "secondaryTitle", + "fieldName": "noDataDescription", "type": { "text": "string | undefined" } }, { - "description": "Defines the `notificationsCount`,\ndisplayed in the notification icon top-right corner.", - "name": "notifications-count", + "description": "Allows you to set your own text for the 'No data' text.", + "name": "no-data-text", "default": "undefined", - "fieldName": "notificationsCount", + "fieldName": "noDataText", "type": { "text": "string | undefined" } }, { - "description": "Defines, if the notification icon would be displayed.", - "name": "show-notifications", - "default": "false", - "fieldName": "showNotifications", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines, if the product switch icon would be displayed.", - "name": "show-product-switch", - "default": "false", - "fieldName": "showProductSwitch", + "description": "Defines the header level of the 'No data' text.", + "name": "no-data-header-level", + "default": "\"H2\"", + "fieldName": "noDataHeaderLevel", "type": { - "text": "boolean" + "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"" } }, { - "description": "Defines, if the Search Field would be displayed when there is a valid `searchField` slot.\n\n**Note:** By default the Search Field is not displayed.", - "name": "show-search-field", + "description": "By default there will be drag and drop overlay shown over the `ui5-upload-collection` when files\nare dragged. If you don't intend to use drag and drop, set this property.\n\n**Note:** It is up to the application developer to add handler for `drop` event and handle it.\n`ui5-upload-collection` only displays an overlay.", + "name": "hide-drag-overlay", "default": "false", - "fieldName": "showSearchField", + "fieldName": "hideDragOverlay", "type": { "text": "boolean" } }, { - "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n- **logo** - `logo.role` and `logo.name`.\n- **notifications** - `notifications.expanded` and `notifications.hasPopup`.\n- **profile** - `profile.expanded`, `profile.hasPopup` and `profile.name`.\n- **product** - `product.expanded` and `product.hasPopup`.\n- **search** - `search.hasPopup`.\n- **overflow** - `overflow.expanded` and `overflow.hasPopup`.\n- **branding** - `branding.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA role of the logo area.\nAccepts the following string values: `button` or `link`.\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", - "type": { - "text": "ShellBarAccessibilityAttributes" - } - }, - { - "description": "Returns the `logo` DOM ref.", - "name": "logo-dom-ref", - "default": "null", - "fieldName": "logoDomRef", - "type": { - "text": "any" - } - }, - { - "description": "Returns the `notifications` icon DOM ref.", - "name": "notifications-dom-ref", - "default": "null", - "fieldName": "notificationsDomRef", - "type": { - "text": "any" - } - }, - { - "description": "Returns the `overflow` icon DOM ref.", - "name": "overflow-dom-ref", - "default": "null", - "fieldName": "overflowDomRef", - "type": { - "text": "any" - } - }, - { - "description": "Returns the `profile` icon DOM ref.", - "name": "profile-dom-ref", - "default": "null", - "fieldName": "profileDomRef", - "type": { - "text": "any" - } - }, - { - "description": "Returns the `product-switch` icon DOM ref.", - "name": "product-switch-dom-ref", - "default": "null", - "fieldName": "productSwitchDomRef", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "any" + "text": "string | undefined" } } ], @@ -7378,9 +8414,9 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-shellbar", + "tagName": "ui5-upload-collection", "customElement": true, - "_ui5since": "0.8.0", + "_ui5since": "1.0.0-rc.7", "_ui5privacy": "public" } ], @@ -7389,43 +8425,58 @@ "kind": "js", "name": "default", "declaration": { - "name": "ShellBar", - "module": "dist/ShellBar.js" + "name": "UploadCollection", + "module": "dist/UploadCollection.js" } }, { "kind": "custom-element-definition", - "name": "ui5-shellbar", + "name": "ui5-upload-collection", "declaration": { - "name": "ShellBar", - "module": "dist/ShellBar.js" + "name": "UploadCollection", + "module": "dist/UploadCollection.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ShellBarBranding.js", + "path": "dist/UploadCollectionItem.js", "declarations": [ { "kind": "class", - "description": "### Overview\nThe `ui5-shellbar-branding` component is intended to be placed inside the branding slot of the\n`ui5-shellbar` component. Its content has higher priority than the `primaryTitle` property\nand the `logo` slot of `ui5-shellbar`.", - "name": "ShellBarBranding", + "description": "### Overview\nA component to be used within the `ui5-upload-collection`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/UploadCollectionItem.js\";`", + "name": "UploadCollectionItem", "slots": [ { + "description": "Hold the description of the `ui5-upload-collection-item`. Will be shown below the file name.", "name": "default", - "description": "Defines the title for the ui5-shellbar-branding component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", - "_ui5propertyName": "content", + "_ui5privacy": "public", + "_ui5type": { + "text": "Array<Node>" + } + }, + { + "name": "thumbnail", + "description": "A thumbnail, which will be shown in the beginning of the `ui5-upload-collection-item`.\n\n**Note:** Use `ui5-icon` or `img` for the intended design.", "_ui5type": { "text": "Array<HTMLElement>" }, "_ui5privacy": "public" }, { - "name": "logo", - "description": "Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo.", + "name": "deleteButton", + "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.", + "_ui5since": "1.9.0", "_ui5type": { - "text": "Array<HTMLElement>" + "text": "Array<IButton>", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] }, "_ui5privacy": "public" } @@ -7433,244 +8484,341 @@ "members": [ { "kind": "field", - "name": "href", + "name": "file", "type": { - "text": "string | undefined" + "text": "File | null" }, - "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.", - "default": "undefined", - "privacy": "public" + "default": "null", + "description": "Holds an instance of `File` associated with this item.", + "privacy": "public", + "_ui5noAttribute": true }, { "kind": "field", - "name": "target", + "name": "fileName", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", - "default": "undefined", + "default": "\"\"", + "description": "The name of the file.", "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "fileNameClickable", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.", - "default": "undefined", + "default": "false", + "description": "If set to `true` the file name will be clickable and it will fire `file-name-click` event upon click.", "privacy": "public" - } - ], - "events": [ + }, { - "name": "click", - "_ui5privacy": "public", + "kind": "field", + "name": "disableDeleteButton", "type": { - "text": "CustomEvent" + "text": "boolean" }, - "description": "Fired, when the logo is activated.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true - } - ], - "attributes": [ + "default": "false", + "description": "Disables the delete button.", + "privacy": "public" + }, { - "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.", - "name": "href", - "default": "undefined", - "fieldName": "href", + "kind": "field", + "name": "hideDeleteButton", "type": { - "text": "string | undefined" - } + "text": "boolean" + }, + "default": "false", + "description": "Hides the delete button.", + "privacy": "public" }, { - "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", - "name": "target", - "default": "undefined", - "fieldName": "target", + "kind": "field", + "name": "hideRetryButton", "type": { - "text": "string | undefined" - } + "text": "boolean" + }, + "default": "false", + "description": "Hides the retry button when `uploadState` property is `Error`.", + "privacy": "public" }, { - "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "kind": "field", + "name": "hideTerminateButton", "type": { - "text": "string | undefined" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-shellbar-branding", - "customElement": true, - "_ui5experimental": true, - "_ui5since": "2.12.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ShellBarBranding", - "module": "dist/ShellBarBranding.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-shellbar-branding", - "declaration": { - "name": "ShellBarBranding", - "module": "dist/ShellBarBranding.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/ShellBarItem.js", - "declarations": [ - { - "kind": "class", - "description": "The `ui5-shellbar-item` represents a custom item, that\nmight be added to the `ui5-shellbar`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ShellBarItem.js\";`", - "name": "ShellBarItem", - "members": [ + "text": "boolean" + }, + "default": "false", + "description": "Hides the terminate button when `uploadState` property is `Uploading`.", + "privacy": "public" + }, { "kind": "field", - "name": "icon", + "name": "progress", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Defines the name of the item's icon.", - "default": "undefined", + "default": "0", + "description": "The upload progress in percentage.\n\n**Note:** Expected values are in the interval [0, 100].", "privacy": "public" }, { "kind": "field", - "name": "text", + "name": "uploadState", "type": { - "text": "string | undefined" + "text": "UploadState", + "references": [ + { + "name": "UploadState", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/UploadState.js" + } + ] }, - "description": "Defines the item text.\n\n**Note:** The text is only displayed inside the overflow popover list view.", - "default": "undefined", + "default": "\"Ready\"", + "description": "Upload state.\n\nDepending on this property, the item displays the following:\n\n- `Ready` - progress indicator is displayed.\n- `Uploading` - progress indicator and terminate button are displayed. When the terminate button is pressed, `terminate` event is fired.\n- `Error` - progress indicator and retry button are displayed. When the retry button is pressed, `retry` event is fired.\n- `Complete` - progress indicator is not displayed.", "privacy": "public" }, { "kind": "field", - "name": "count", + "name": "type", "type": { - "text": "string | undefined" + "text": "ListItemType", + "references": [ + { + "name": "ListItemType", + "package": "@ui5/webcomponents", + "module": "dist/types/ListItemType.js" + } + ] }, - "description": "Defines the count displayed in the top-right corner.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.6" + "default": "\"Active\"", + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "privacy": "public" }, { "kind": "field", "name": "accessibilityAttributes", "type": { - "text": "ShellBarItemAccessibilityAttributes", + "text": "ListItemAccessibilityAttributes", "references": [ { - "name": "ShellBarItemAccessibilityAttributes", - "package": "@ui5/webcomponents-fiori", - "module": "dist/ShellBarItem.js" + "name": "ListItemAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/ListItem.js" } ] }, "default": "{}", - "description": "Defines additional accessibility attributes on Shellbar Items.\n\nThe accessibility attributes support the following values:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\n- **controls**: Identifies the element (or elements) whose contents\nor presence are controlled by the component.\nAccepts a lowercase string value, referencing the ID of the element it controls.", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", "privacy": "public", - "_ui5since": "2.9.0" - } - ], - "events": [ + "_ui5since": "1.15.0" + }, { - "name": "click", - "_ui5privacy": "public", + "kind": "field", + "name": "navigated", "type": { - "text": "CustomEvent<ShellBarItemClickEventDetail>", + "text": "boolean" + }, + "default": "false", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "privacy": "public", + "_ui5since": "1.10.0" + }, + { + "kind": "field", + "name": "tooltip", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.23.0" + }, + { + "kind": "field", + "name": "highlight", + "type": { + "text": "Highlight", "references": [ { - "name": "ShellBarItemClickEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/ShellBarItem.js" + "name": "Highlight", + "package": "@ui5/webcomponents", + "module": "dist/types/Highlight.js" } ] }, - "description": "Fired, when the item is pressed.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "targetRef", - "_ui5privacy": "public", - "description": "DOM ref of the clicked element" - } - ] - } - ], - "attributes": [ + "default": "\"None\"", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "privacy": "public", + "_ui5since": "1.24" + }, { - "description": "Defines the name of the item's icon.", - "name": "icon", - "default": "undefined", - "fieldName": "icon", + "kind": "field", + "name": "selected", "type": { - "text": "string | undefined" + "text": "boolean" + }, + "default": "false", + "description": "Defines the selected state of the component.", + "privacy": "public", + "inheritedFrom": { + "name": "ListItemBase", + "module": "dist/ListItemBase.js" } - }, + } + ], + "events": [ { - "description": "Defines the item text.\n\n**Note:** The text is only displayed inside the overflow popover list view.", - "name": "text", - "default": "undefined", - "fieldName": "text", + "name": "file-name-click", + "_ui5privacy": "public", "type": { - "text": "string | undefined" - } + "text": "CustomEvent" + }, + "description": "Fired when the file name is clicked.\n\n**Note:** This event is only available when `fileNameClickable` property is `true`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true }, { - "description": "Defines the count displayed in the top-right corner.", - "name": "count", - "default": "undefined", - "fieldName": "count", + "name": "rename", + "_ui5privacy": "public", "type": { - "text": "string | undefined" - } + "text": "CustomEvent" + }, + "description": "Fired when the `fileName` property gets changed.\n\n**Note:** An edit button is displayed on each item,\nwhen the `ui5-upload-collection-item` `type` property is set to `Detail`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true }, { - "description": "Defines additional accessibility attributes on Shellbar Items.\n\nThe accessibility attributes support the following values:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\n- **controls**: Identifies the element (or elements) whose contents\nor presence are controlled by the component.\nAccepts a lowercase string value, referencing the ID of the element it controls.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "name": "terminate", + "_ui5privacy": "public", "type": { - "text": "ShellBarItemAccessibilityAttributes" + "text": "CustomEvent" + }, + "description": "Fired when the terminate button is pressed.\n\n**Note:** Terminate button is displayed when `uploadState` property is set to `Uploading`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + }, + { + "name": "retry", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the retry button is pressed.\n\n**Note:** Retry button is displayed when `uploadState` property is set to `Error`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + }, + { + "name": "detail-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user clicks on the detail button when type is `Detail`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ], + "attributes": [ + { + "description": "Holds an instance of `File` associated with this item.", + "name": "file", + "default": "null", + "fieldName": "file", + "type": { + "text": "File | null" + } + }, + { + "description": "The name of the file.", + "name": "file-name", + "default": "\"\"", + "fieldName": "fileName", + "type": { + "text": "string" + } + }, + { + "description": "If set to `true` the file name will be clickable and it will fire `file-name-click` event upon click.", + "name": "file-name-clickable", + "default": "false", + "fieldName": "fileNameClickable", + "type": { + "text": "boolean" + } + }, + { + "description": "Disables the delete button.", + "name": "disable-delete-button", + "default": "false", + "fieldName": "disableDeleteButton", + "type": { + "text": "boolean" + } + }, + { + "description": "Hides the delete button.", + "name": "hide-delete-button", + "default": "false", + "fieldName": "hideDeleteButton", + "type": { + "text": "boolean" + } + }, + { + "description": "Hides the retry button when `uploadState` property is `Error`.", + "name": "hide-retry-button", + "default": "false", + "fieldName": "hideRetryButton", + "type": { + "text": "boolean" + } + }, + { + "description": "Hides the terminate button when `uploadState` property is `Uploading`.", + "name": "hide-terminate-button", + "default": "false", + "fieldName": "hideTerminateButton", + "type": { + "text": "boolean" + } + }, + { + "description": "The upload progress in percentage.\n\n**Note:** Expected values are in the interval [0, 100].", + "name": "progress", + "default": "0", + "fieldName": "progress", + "type": { + "text": "number" + } + }, + { + "description": "Upload state.\n\nDepending on this property, the item displays the following:\n\n- `Ready` - progress indicator is displayed.\n- `Uploading` - progress indicator and terminate button are displayed. When the terminate button is pressed, `terminate` event is fired.\n- `Error` - progress indicator and retry button are displayed. When the retry button is pressed, `retry` event is fired.\n- `Complete` - progress indicator is not displayed.", + "name": "upload-state", + "default": "\"Ready\"", + "fieldName": "uploadState", + "type": { + "text": "\"Complete\" | \"Error\" | \"Ready\" | \"Uploading\"" } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "ListItem", + "package": "@ui5/webcomponents", + "module": "dist/ListItem.js" }, - "tagName": "ui5-shellbar-item", + "tagName": "ui5-upload-collection-item", "customElement": true, - "_ui5privacy": "public", - "_ui5abstract": true + "_ui5since": "1.0.0-rc.7", + "_ui5privacy": "public" } ], "exports": [ @@ -7678,522 +8826,542 @@ "kind": "js", "name": "default", "declaration": { - "name": "ShellBarItem", - "module": "dist/ShellBarItem.js" + "name": "UploadCollectionItem", + "module": "dist/UploadCollectionItem.js" } }, { "kind": "custom-element-definition", - "name": "ui5-shellbar-item", + "name": "ui5-upload-collection-item", "declaration": { - "name": "ShellBarItem", - "module": "dist/ShellBarItem.js" + "name": "UploadCollectionItem", + "module": "dist/UploadCollectionItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ShellBarSearch.js", + "path": "dist/UserMenu.js", "declarations": [ { "kind": "class", - "description": "Search field for the ShellBar component.", - "name": "ShellBarSearch", + "description": "### Overview\n\nThe `ui5-user-menu` is an SAP Fiori specific web component that is used in `ui5-shellbar`\nand allows the user to easily see information and settings for the current user and all other logged in accounts.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserMenu.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/UserMenuItem.js\";` (for `ui5-user-menu-item`)", + "name": "UserMenu", + "slots": [ + { + "name": "default", + "description": "Defines the menu items.", + "_ui5propertyName": "menuItems", + "_ui5type": { + "text": "Array<UserMenuItem>", + "references": [ + { + "name": "UserMenuItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserMenuItem.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "accounts", + "description": "Defines the user accounts.\n\n**Note:** If one item is used, it will be shown as the selected one. If more than one item is used, the first one will be shown as selected unless\nthere is an item with `selected` property set to `true`.", + "_ui5type": { + "text": "Array<UserMenuAccount>", + "references": [ + { + "name": "UserMenuAccount", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserMenuAccount.js" + } + ] + }, + "_ui5privacy": "public" + } + ], "members": [ { "kind": "field", - "name": "autoOpen", + "name": "open", "type": { "text": "boolean" }, "default": "false", - "description": "Indicates whether the suggestions popover should be opened on focus.", + "description": "Defines if the User Menu is opened.", "privacy": "public" }, { "kind": "field", - "name": "loading", + "name": "opener", "type": { - "text": "boolean" + "text": "HTMLElement | string | null | undefined" }, - "default": "false", - "description": "Indicates whether a loading indicator should be shown in the popup.", + "description": "Defines the ID or DOM Reference of the element at which the user menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", "privacy": "public", - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } + "default": "undefined" }, { "kind": "field", - "name": "noTypeahead", + "name": "showManageAccount", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the value will be autcompleted to match an item.", - "privacy": "public", - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } + "description": "Defines if the User Menu shows the Manage Account option.", + "privacy": "public" }, { "kind": "field", - "name": "open", + "name": "showOtherAccounts", "type": { "text": "boolean" }, "default": "false", - "description": "Indicates whether the items picker is open.", - "privacy": "public", - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } + "description": "Defines if the User Menu shows the Other Accounts option.", + "privacy": "public" }, { "kind": "field", - "name": "showClearIcon", + "name": "showEditAccounts", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the clear icon of the search will be shown.", - "privacy": "public", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "description": "Defines if the User Menu shows the Edit Accounts option.", + "privacy": "public" }, { "kind": "field", - "name": "value", + "name": "showEditButton", "type": { - "text": "string" + "text": "boolean" }, - "default": "\"\"", - "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", + "default": "false", + "description": "Defines if the User menu shows edit button.", "privacy": "public", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } - }, + "_ui5since": "2.7.0" + } + ], + "events": [ { - "kind": "field", - "name": "placeholder", + "name": "avatar-click", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent" }, - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", - "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "description": "Fired when the account avatar is selected.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false }, { - "kind": "field", - "name": "accessibleName", + "name": "manage-account-click", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent" }, - "description": "Defines the accessible ARIA name of the component.", - "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "description": "Fired when the \"Manage Account\" button is selected.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false }, { - "kind": "field", - "name": "accessibleDescription", + "name": "edit-accounts-click", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent" }, - "description": "Defines the accessible ARIA description of the field.", - "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } - } - ], - "attributes": [ + "description": "Fired when the \"Edit Accounts\" button is selected.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + }, { - "description": "Indicates whether the suggestions popover should be opened on focus.", - "name": "auto-open", - "default": "false", - "fieldName": "autoOpen", + "name": "change-account", + "_ui5privacy": "public", "type": { - "text": "boolean" - } + "text": "CustomEvent<UserMenuOtherAccountClickEventDetail>", + "references": [ + { + "name": "UserMenuOtherAccountClickEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserMenu.js" + } + ] + }, + "description": "Fired when the account is switched to a different one.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, + "_ui5parameters": [ + { + "type": { + "text": "UserMenuAccount", + "references": [ + { + "name": "UserMenuAccount", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserMenuAccount.js" + } + ] + }, + "name": "prevSelectedAccount", + "_ui5privacy": "public", + "description": "The previously selected account." + }, + { + "type": { + "text": "UserMenuAccount", + "references": [ + { + "name": "UserMenuAccount", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserMenuAccount.js" + } + ] + }, + "name": "selectedAccount", + "_ui5privacy": "public", + "description": "The selected account." + } + ] }, { - "description": "Indicates whether a loading indicator should be shown in the popup.", - "name": "loading", - "default": "false", - "fieldName": "loading", + "name": "item-click", + "_ui5privacy": "public", "type": { - "text": "boolean" + "text": "CustomEvent<UserMenuItemClickEventDetail>", + "references": [ + { + "name": "UserMenuItemClickEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserMenu.js" + } + ] }, - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } + "description": "Fired when a menu item is selected.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, + "_ui5parameters": [ + { + "type": { + "text": "UserMenuItem", + "references": [ + { + "name": "UserMenuItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserMenuItem.js" + } + ] + }, + "name": "item", + "_ui5privacy": "public", + "description": "The selected `user menu item`." + } + ] }, { - "description": "Defines whether the value will be autcompleted to match an item.", - "name": "no-typeahead", - "default": "false", - "fieldName": "noTypeahead", + "name": "open", + "_ui5privacy": "public", "type": { - "text": "boolean" + "text": "CustomEvent" }, - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } + "description": "Fired when a user menu is open.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.6.0" }, { - "description": "Indicates whether the items picker is open.", + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when a user menu is close.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.6.0" + }, + { + "name": "sign-out-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the \"Sign Out\" button is selected.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, + "_ui5since": "2.6.0" + } + ], + "attributes": [ + { + "description": "Defines if the User Menu is opened.", "name": "open", "default": "false", "fieldName": "open", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" } }, { - "description": "Defines whether the clear icon of the search will be shown.", - "name": "show-clear-icon", - "default": "false", - "fieldName": "showClearIcon", + "description": "Defines the ID or DOM Reference of the element at which the user menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", + "name": "opener", + "default": "undefined", + "fieldName": "opener", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" + "text": "string | HTMLElement | null | undefined" } }, { - "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", - "name": "value", - "default": "\"\"", - "fieldName": "value", + "description": "Defines if the User Menu shows the Manage Account option.", + "name": "show-manage-account", + "default": "false", + "fieldName": "showManageAccount", "type": { - "text": "string" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" + "text": "boolean" } }, { - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", - "name": "placeholder", - "default": "undefined", - "fieldName": "placeholder", + "description": "Defines if the User Menu shows the Other Accounts option.", + "name": "show-other-accounts", + "default": "false", + "fieldName": "showOtherAccounts", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" + "text": "boolean" } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "description": "Defines if the User Menu shows the Edit Accounts option.", + "name": "show-edit-accounts", + "default": "false", + "fieldName": "showEditAccounts", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" + "text": "boolean" } }, { - "description": "Defines the accessible ARIA description of the field.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "description": "Defines if the User menu shows edit button.", + "name": "show-edit-button", + "default": "false", + "fieldName": "showEditButton", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" + "text": "boolean" } } ], "superclass": { - "name": "Search", - "package": "@ui5/webcomponents-fiori", - "module": "dist/Search.js" + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" }, - "tagName": "ui5-shellbar-search", + "tagName": "ui5-user-menu", "customElement": true, "_ui5experimental": true, - "_ui5since": "2.10.0", - "_ui5privacy": "public", - "slots": [ + "_ui5since": "2.5.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "UserMenu", + "module": "dist/UserMenu.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-user-menu", + "declaration": { + "name": "UserMenu", + "module": "dist/UserMenu.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/UserMenuAccount.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-user-menu-account` represents an account in the `ui5-user-menu`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserMenuAccount.js\";`", + "name": "UserMenuAccount", + "members": [ { - "name": "default", - "description": "Defines the Search suggestion items.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<SearchItem | SearchItemGroup>" + "kind": "field", + "name": "avatarSrc", + "type": { + "text": "string | undefined" }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } + "description": "Defines the avatar image url of the user.", + "default": "\"\"", + "privacy": "public" }, { - "name": "action", - "description": "Defines the popup footer action button.", - "_ui5type": { - "text": "Array<Button>", - "references": [ - { - "name": "Button", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] + "kind": "field", + "name": "avatarInitials", + "type": { + "text": "string | undefined" }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } + "description": "Defines the avatar initials of the user.", + "default": "undefined", + "privacy": "public" }, { - "name": "illustration", - "description": "Defines the illustrated message to be shown in the popup.", - "_ui5type": { - "text": "Array<IllustratedMessage>", - "references": [ - { - "name": "IllustratedMessage", - "package": "@ui5/webcomponents-fiori", - "module": "dist/IllustratedMessage.js" - } - ] + "kind": "field", + "name": "titleText", + "type": { + "text": "string" }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } + "default": "\"\"", + "description": "Defines the title text of the user.", + "privacy": "public" }, { - "name": "messageArea", - "description": "Defines the illustrated message to be shown in the popup.", - "_ui5type": { - "text": "Array<SearchMessageArea>", - "references": [ - { - "name": "SearchMessageArea", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SearchMessageArea.js" - } - ] + "kind": "field", + "name": "subtitleText", + "type": { + "text": "string" }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } + "default": "\"\"", + "description": "Defines additional text of the user.", + "privacy": "public" }, { - "name": "scopes", - "description": "Defines the component scope options.", - "_ui5type": { - "text": "Array<ISearchScope>", - "references": [ - { - "name": "ISearchScope", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SearchField.js" - } - ] + "kind": "field", + "name": "description", + "type": { + "text": "string" }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } + "default": "\"\"", + "description": "Defines description of the user.", + "privacy": "public" }, { - "name": "filterButton", - "description": "Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive.", - "_ui5since": "2.11.0", - "_ui5type": { - "text": "Array<Button>", - "references": [ - { - "name": "Button", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } - } - ], - "events": [ - { - "name": "open", - "_ui5privacy": "public", + "kind": "field", + "name": "additionalInfo", "type": { - "text": "CustomEvent" + "text": "string" }, - "description": "Fired when the popup is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } + "default": "\"\"", + "description": "Defines additional information for the user.", + "privacy": "public" }, { - "name": "close", - "_ui5privacy": "public", + "kind": "field", + "name": "selected", "type": { - "text": "CustomEvent" + "text": "boolean" }, - "description": "Fired when the popup is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } + "default": "false", + "description": "Defines if the user is selected.", + "privacy": "public" }, { - "name": "input", - "_ui5privacy": "public", + "kind": "field", + "name": "loading", "type": { - "text": "CustomEvent" + "text": "boolean" }, - "description": "Fired when typing in input or clear icon is pressed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" + "default": "false", + "description": "Indicates whether a loading indicator should be shown.", + "privacy": "public", + "_ui5since": "2.9.0" + } + ], + "attributes": [ + { + "description": "Defines the avatar image url of the user.", + "name": "avatar-src", + "default": "\"\"", + "fieldName": "avatarSrc", + "type": { + "text": "string | undefined" } }, { - "name": "scope-change", - "_ui5privacy": "public", + "description": "Defines the avatar initials of the user.", + "name": "avatar-initials", + "default": "undefined", + "fieldName": "avatarInitials", "type": { - "text": "CustomEvent<SearchFieldScopeSelectionChangeDetails>", - "references": [ - { - "name": "SearchFieldScopeSelectionChangeDetails", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SearchField.js" - } - ] - }, - "description": "Fired when the scope has changed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "scope", - "_ui5privacy": "public", - "description": "The newly selected scope" - } - ], - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" + "text": "string | undefined" } }, { - "name": "search", - "_ui5privacy": "public", + "description": "Defines the title text of the user.", + "name": "title-text", + "default": "\"\"", + "fieldName": "titleText", "type": { - "text": "CustomEvent" - }, - "description": "Fired when the user has triggered search with Enter key or Search Button press.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" + "text": "string" + } + }, + { + "description": "Defines additional text of the user.", + "name": "subtitle-text", + "default": "\"\"", + "fieldName": "subtitleText", + "type": { + "text": "string" + } + }, + { + "description": "Defines description of the user.", + "name": "description", + "default": "\"\"", + "fieldName": "description", + "type": { + "text": "string" + } + }, + { + "description": "Defines additional information for the user.", + "name": "additional-info", + "default": "\"\"", + "fieldName": "additionalInfo", + "type": { + "text": "string" + } + }, + { + "description": "Defines if the user is selected.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } + }, + { + "description": "Indicates whether a loading indicator should be shown.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" } } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ShellBarSearch", - "module": "dist/ShellBarSearch.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-shellbar-search", - "declaration": { - "name": "ShellBarSearch", - "module": "dist/ShellBarSearch.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/ShellBarSpacer.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\nThe `ui5-shellbar-spacer` is an element, used for visual separation between the two content parts of the `ui5-shellbar`.\n**Note:** The `ui5-shellbar-spacer` component is in an experimental state and is a subject to change.", - "name": "ShellBarSpacer", + ], "superclass": { "name": "UI5Element", "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-shellbar-spacer", + "tagName": "ui5-user-menu-account", "customElement": true, - "_ui5since": "2.7.0", - "_ui5privacy": "public", - "_ui5abstract": true, - "members": [] + "_ui5experimental": true, + "_ui5since": "2.5.0", + "_ui5privacy": "public" } ], "exports": [ @@ -8201,244 +9369,166 @@ "kind": "js", "name": "default", "declaration": { - "name": "ShellBarSpacer", - "module": "dist/ShellBarSpacer.js" + "name": "UserMenuAccount", + "module": "dist/UserMenuAccount.js" } }, { "kind": "custom-element-definition", - "name": "ui5-shellbar-spacer", + "name": "ui5-user-menu-account", "declaration": { - "name": "ShellBarSpacer", - "module": "dist/ShellBarSpacer.js" + "name": "UserMenuAccount", + "module": "dist/UserMenuAccount.js" } } ] }, { "kind": "javascript-module", - "path": "dist/SideNavigation.js", + "path": "dist/UserMenuItem.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `SideNavigation` is used as a standard menu in applications.\nIt consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).\n\n - The header is meant for displaying user related information - profile data, avatar, etc.\n - The main navigation section is related to the user’s current work context\n - The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).\n\n### Usage\n\nUse the available `ui5-side-navigation-group`, `ui5-side-navigation-item`\nand `ui5-side-navigation-sub-item` components to build your menu.\nThe items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.\nYou must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\nThe `ui5-side-navigation` component is designed to be used within a `ui5-navigation-layout` component to ensure an optimal user experience.\n\nUsing it standalone may not match the intended design and functionality.\nFor example, the side navigation may not exhibit the correct behavior on phones and tablets.\nPadding of the `ui5-shellbar` will not match the padding of the side navigation.\n\n### Keyboard Handling\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\"`\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";` (for `ui5-side-navigation-group`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";` (for `ui5-side-navigation-item`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";` (for `ui5-side-navigation-sub-item`)", - "name": "SideNavigation", + "description": "### Overview\n\n`ui5-user-menu-item` is the item to use inside a `ui5-user-menu`.\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Usage\n\n`ui5-user-menu-item` represents a node in a `ui5-user-menu`. The user menu itself is rendered as a list,\nand each `ui5-menu-item` is represented by a menu item in that menu. Therefore, you should only use\n`ui5-user-menu-item` directly in your apps. The `ui5-menu` menu item is internal for the menu, and not intended for public use.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/UserMenuItem.js\";`", + "name": "UserMenuItem", "slots": [ { "name": "default", - "description": "Defines the main items of the component.", + "description": "Defines the items of this component.\n\n**Note:** Use `ui5-user-menu-item` for the intended design.", "_ui5propertyName": "items", "_ui5type": { - "text": "Array<SideNavigationItemBase>", + "text": "Array<UserMenuItem>", "references": [ { - "name": "SideNavigationItemBase", + "name": "UserMenuItem", "package": "@ui5/webcomponents-fiori", - "module": "dist/SideNavigationItemBase.js" + "module": "dist/UserMenuItem.js" } ] }, "_ui5privacy": "public" }, { - "name": "fixedItems", - "description": "Defines the fixed items at the bottom of the component.\n\n**Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)", + "name": "endContent", + "description": "Defines the components that should be displayed at the end of the menu item.\n\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\nnether `additionalText` nor components added to this slot would be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\nhave the correct accessibility behaviour, including their enabled or disabled states.\nThe menu does not manage these aspects when the menu item state changes.", + "_ui5since": "2.0.0", "_ui5type": { - "text": "Array<SideNavigationItemBase>", - "references": [ - { - "name": "SideNavigationItemBase", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SideNavigationItemBase.js" - } - ] + "text": "Array<HTMLElement>" }, "_ui5privacy": "public" }, { - "name": "header", - "description": "Defines the header of the `ui5-side-navigation`.\n\n**Note:** The header is displayed when the component is expanded - the property `collapsed` is false;", - "_ui5since": "1.0.0-rc.11", + "name": "deleteButton", + "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.", + "_ui5since": "1.9.0", "_ui5type": { - "text": "Array<HTMLElement>" + "text": "Array<IButton>", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] }, - "_ui5privacy": "public" + "_ui5privacy": "public", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } } ], + "superclass": { + "name": "MenuItem", + "package": "@ui5/webcomponents", + "module": "dist/MenuItem.js" + }, + "tagName": "ui5-user-menu-item", + "customElement": true, + "_ui5experimental": true, + "_ui5since": "2.5.0", + "_ui5privacy": "public", "members": [ { "kind": "field", - "name": "collapsed", + "name": "text", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.", + "description": "Defines the text of the tree item.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "additionalText", "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines the `additionalText`, displayed in the end of the menu item.\n\n**Note:** The additional text will not be displayed if there are items added in `items` slot or there are\ncomponents added to `endContent` slot.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", "default": "undefined", "privacy": "public", - "_ui5since": "2.9.0" - } - ], - "events": [ + "_ui5since": "1.8.0" + }, { - "name": "selection-change", - "_ui5privacy": "public", + "kind": "field", + "name": "icon", "type": { - "text": "CustomEvent<SideNavigationSelectionChangeEventDetail>", - "references": [ - { - "name": "SideNavigationSelectionChangeEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SideNavigation.js" - } - ] + "text": "string | undefined" }, - "description": "Fired when the selection has changed via user interaction", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "SideNavigationSelectableItemBase", - "references": [ - { - "name": "SideNavigationSelectableItemBase", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SideNavigationSelectableItemBase.js" - } - ] - }, - "name": "item", - "_ui5privacy": "public", - "description": "the clicked item." - } - ] - } - ], - "attributes": [ + "description": "Defines the icon to be displayed as graphical element within the component.\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).", + "default": "undefined", + "privacy": "public" + }, { - "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.", - "name": "collapsed", - "default": "false", - "fieldName": "collapsed", + "kind": "field", + "name": "disabled", "type": { "text": "boolean" + }, + "default": "false", + "description": "Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.", + "privacy": "public", + "inheritedFrom": { + "name": "ListItemBase", + "module": "dist/ListItemBase.js" } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-side-navigation", - "customElement": true, - "_ui5since": "1.0.0-rc.8", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "SideNavigation", - "module": "dist/SideNavigation.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-side-navigation", - "declaration": { - "name": "SideNavigation", - "module": "dist/SideNavigation.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/SideNavigationGroup.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nRepresents a group of navigation actions within `ui5-side-navigation`.\nThe `ui5-side-navigation-group` can only be used inside a `ui5-side-navigation`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";`", - "name": "SideNavigationGroup", - "slots": [ - { - "name": "default", - "description": "Defines nested items by passing `ui5-side-navigation-item` to the default slot.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<SideNavigationItem>", - "references": [ - { - "name": "SideNavigationItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SideNavigationItem.js" - } - ] - }, - "_ui5privacy": "public" - } - ], - "members": [ - { - "kind": "field", - "name": "expanded", + "kind": "field", + "name": "loading", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the item is expanded", - "privacy": "public" + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.", + "privacy": "public", + "_ui5since": "1.13.0" }, { "kind": "field", - "name": "text", + "name": "loadingDelay", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Defines the text of the item.", + "default": "1000", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.", "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } + "_ui5since": "1.13.0" }, { "kind": "field", - "name": "disabled", + "name": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.19.0", + "_ui5since": "1.7.0", "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { @@ -8447,146 +9537,104 @@ "type": { "text": "string | undefined" }, - "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", + "description": "Defines the text of the tooltip for the menu item.", "default": "undefined", "privacy": "public", - "_ui5since": "2.0.0", + "_ui5since": "1.23.0", "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } - } - ], - "attributes": [ - { - "description": "Defines if the item is expanded", - "name": "expanded", - "default": "false", - "fieldName": "expanded", - "type": { - "text": "boolean" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "description": "Defines the text of the item.", - "name": "text", - "default": "undefined", - "fieldName": "text", + "kind": "field", + "name": "checked", "type": { - "text": "string | undefined" + "text": "boolean" }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } + "default": "false", + "description": "Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.", + "privacy": "public", + "_ui5since": "2.12.0" }, { - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", + "kind": "field", + "name": "accessibilityAttributes", "type": { - "text": "boolean" + "text": "MenuItemAccessibilityAttributes", + "references": [ + { + "name": "MenuItemAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/MenuItem.js" + } + ] }, + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item.\n\n- **role**: Defines the role of the menu item. If not set, menu item will have default role=\"menuitem\".", + "privacy": "public", + "_ui5since": "2.1.0", "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", + "kind": "field", + "name": "type", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } - } - ], - "superclass": { - "name": "SideNavigationItemBase", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SideNavigationItemBase.js" - }, - "tagName": "ui5-side-navigation-group", - "customElement": true, - "_ui5since": "1.24.0", - "_ui5privacy": "public", - "_ui5abstract": true - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "SideNavigationGroup", - "module": "dist/SideNavigationGroup.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-side-navigation-group", - "declaration": { - "name": "SideNavigationGroup", - "module": "dist/SideNavigationGroup.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/SideNavigationItem.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nRepresents a navigation action. It can provide sub items.\nThe `ui5-side-navigation-item` is used within `ui5-side-navigation` or `ui5-side-navigation-group` only.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";`", - "name": "SideNavigationItem", - "slots": [ - { - "name": "default", - "description": "Defines nested items by passing `ui5-side-navigation-sub-item` to the default slot.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<SideNavigationSubItem>", + "text": "ListItemType", "references": [ { - "name": "SideNavigationSubItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SideNavigationSubItem.js" + "name": "ListItemType", + "package": "@ui5/webcomponents", + "module": "dist/types/ListItemType.js" } ] }, - "_ui5privacy": "public" - } - ], - "members": [ + "default": "\"Active\"", + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "privacy": "public", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, { "kind": "field", - "name": "expanded", + "name": "navigated", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the item is expanded", - "privacy": "public" + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "privacy": "public", + "_ui5since": "1.10.0", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } }, { "kind": "field", - "name": "icon", + "name": "highlight", "type": { - "text": "string | undefined" + "text": "Highlight", + "references": [ + { + "name": "Highlight", + "package": "@ui5/webcomponents", + "module": "dist/types/Highlight.js" + } + ] }, - "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "\"None\"", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", "privacy": "public", - "default": "undefined", + "_ui5since": "1.24", "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { @@ -8596,354 +9644,198 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", + "description": "Defines the selected state of the component.", "privacy": "public", "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, - { - "kind": "field", - "name": "href", - "type": { - "text": "string | undefined" - }, - "description": "Defines the link target URI. Supports standard hyperlink behavior.\nIf a JavaScript action should be triggered,\nthis should not be set, but instead an event handler\nfor the `click` event should be registered.", - "privacy": "public", - "default": "undefined", - "_ui5since": "1.19.0", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, - { - "kind": "field", - "name": "target", - "type": { - "text": "string | undefined" - }, - "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", - "privacy": "public", - "default": "undefined", - "_ui5since": "1.19.0", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" + "name": "ListItemBase", + "module": "dist/ListItemBase.js" } - }, + } + ], + "events": [ { - "kind": "field", - "name": "design", + "name": "before-open", + "_ui5privacy": "public", "type": { - "text": "SideNavigationItemDesign", + "text": "CustomEvent<MenuBeforeOpenEventDetail>", "references": [ { - "name": "SideNavigationItemDesign", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/SideNavigationItemDesign.js" + "name": "MenuBeforeOpenEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/MenuItem.js" } ] }, - "default": "\"Default\"", - "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", - "privacy": "public", - "_ui5since": "2.7.0", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + "description": "Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, + "_ui5since": "1.10.0", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "The menu item that triggers opening of the sub-menu or undefined when fired upon root menu opening." + } + ] }, { - "kind": "field", - "name": "unselectable", + "name": "open", + "_ui5privacy": "public", "type": { - "text": "boolean" + "text": "CustomEvent" }, - "default": "false", - "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", - "privacy": "public", - "_ui5since": "2.7.0", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + "description": "Fired after the menu is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false }, { - "kind": "field", - "name": "accessibilityAttributes", + "name": "before-close", + "_ui5privacy": "public", "type": { - "text": "SideNavigationItemAccessibilityAttributes", + "text": "CustomEvent<MenuBeforeCloseEventDetail>", "references": [ { - "name": "SideNavigationItemAccessibilityAttributes", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SideNavigationSelectableItemBase.js" + "name": "MenuBeforeCloseEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/MenuItem.js" } ] }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", - "privacy": "public", - "_ui5since": "2.7.0", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + "description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, + "_ui5since": "1.10.0", + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "escPressed", + "_ui5privacy": "public", + "description": "Indicates that `ESC` key has triggered the event." + } + ] }, { - "kind": "field", - "name": "text", + "name": "close", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent" }, - "description": "Defines the text of the item.", - "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } + "description": "Fired after the menu is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "1.10.0" }, { - "kind": "field", - "name": "disabled", + "name": "check", + "_ui5privacy": "public", "type": { - "text": "boolean" + "text": "CustomEvent" }, - "default": "false", - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "privacy": "public", - "_ui5since": "1.19.0", - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } + "description": "Fired when an item is checked or unchecked.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.12.0" }, { - "kind": "field", - "name": "tooltip", + "name": "detail-click", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent" }, - "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.0.0", + "description": "Fired when the user clicks on the detail button when type is `Detail`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" + "name": "ListItem", + "module": "dist/ListItem.js" } } - ], - "attributes": [ - { - "description": "Defines if the item is expanded", - "name": "expanded", - "default": "false", - "fieldName": "expanded", - "type": { - "text": "boolean" - } - }, + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "UserMenuItem", + "module": "dist/UserMenuItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-user-menu-item", + "declaration": { + "name": "UserMenuItem", + "module": "dist/UserMenuItem.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/UserMenuItemGroup.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-user-menu-item-group` component represents a group of items designed for use inside a `ui5-user-menu`.\nItems belonging to the same group should be wrapped by a `ui5-user-menu-item-group`.\nEach group can have an `itemCheckMode` property, which defines the check mode for the items within the group.\nThe possible values for `itemCheckMode` are:\n- 'None' (default) - no items can be checked\n- 'Single' - Only one item can be checked at a time\n- 'Multiple' - Multiple items can be checked simultaneously\n\n**Note:** If the `itemCheckMode` property is set to 'Single', only one item can remain checked at any given time.\nIf multiple items are marked as checked, the last checked item will take precedence.\n\n### Usage\n\n`ui5-user-menu-item-group` represents a collection of `ui5-user-menu-item` components that can have the same check mode.\nThe items are addeed to the group's `items` slot.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/UserMenuItemGroup.js\";`", + "name": "UserMenuItemGroup", + "superclass": { + "name": "MenuItemGroup", + "package": "@ui5/webcomponents", + "module": "dist/MenuItemGroup.js" + }, + "tagName": "ui5-user-menu-item-group", + "customElement": true, + "_ui5experimental": true, + "_ui5since": "2.12.0", + "_ui5privacy": "public", + "members": [ { - "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", + "kind": "field", + "name": "checkMode", "type": { - "text": "string | undefined" + "text": "MenuItemGroupCheckMode", + "references": [ + { + "name": "MenuItemGroupCheckMode", + "package": "@ui5/webcomponents", + "module": "dist/types/MenuItemGroupCheckMode.js" + } + ] }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, - { - "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", - "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, - { - "description": "Defines the link target URI. Supports standard hyperlink behavior.\nIf a JavaScript action should be triggered,\nthis should not be set, but instead an event handler\nfor the `click` event should be registered.", - "name": "href", - "default": "undefined", - "fieldName": "href", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, - { - "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", - "name": "target", - "default": "undefined", - "fieldName": "target", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, - { - "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", - "name": "design", - "default": "\"Default\"", - "fieldName": "design", - "type": { - "text": "\"Default\" | \"Action\"" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, - { - "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", - "name": "unselectable", - "default": "false", - "fieldName": "unselectable", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, - { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", - "type": { - "text": "SideNavigationItemAccessibilityAttributes" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, - { - "description": "Defines the text of the item.", - "name": "text", - "default": "undefined", - "fieldName": "text", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } - }, - { - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } - }, - { - "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } + "default": "\"None\"", + "description": "Defines the component's check mode.", + "privacy": "public" } ], - "superclass": { - "name": "SideNavigationSelectableItemBase", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SideNavigationSelectableItemBase.js" - }, - "tagName": "ui5-side-navigation-item", - "customElement": true, - "_ui5since": "1.0.0-rc.8", - "_ui5privacy": "public", - "_ui5abstract": true, - "events": [ + "slots": [ { - "name": "click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<SideNavigationItemClickEventDetail>", + "name": "default", + "description": "Defines the items of this component.\n**Note:** The slot can hold any combination of components of type `ui5-menu-item` or `ui5-menu-separator` or both.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<IMenuItem>", "references": [ { - "name": "SideNavigationItemClickEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SideNavigationItemBase.js" + "name": "IMenuItem", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" } ] }, - "description": "Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "boolean" - }, - "name": "altKey", - "_ui5privacy": "public", - "description": "Returns whether the \"ALT\" key was pressed when the event was triggered." - }, - { - "type": { - "text": "boolean" - }, - "name": "ctrlKey", - "_ui5privacy": "public", - "description": "Returns whether the \"CTRL\" key was pressed when the event was triggered." - }, - { - "type": { - "text": "boolean" - }, - "name": "metaKey", - "_ui5privacy": "public", - "description": "Returns whether the \"META\" key was pressed when the event was triggered." - }, - { - "type": { - "text": "boolean" - }, - "name": "shiftKey", - "_ui5privacy": "public", - "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered." - } - ], - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + "_ui5privacy": "public" } ] } @@ -8953,89 +9845,190 @@ "kind": "js", "name": "default", "declaration": { - "name": "SideNavigationItem", - "module": "dist/SideNavigationItem.js" + "name": "UserMenuItemGroup", + "module": "dist/UserMenuItemGroup.js" } }, { "kind": "custom-element-definition", - "name": "ui5-side-navigation-item", + "name": "ui5-user-menu-item-group", "declaration": { - "name": "SideNavigationItem", - "module": "dist/SideNavigationItem.js" + "name": "UserMenuItemGroup", + "module": "dist/UserMenuItemGroup.js" } } ] }, { "kind": "javascript-module", - "path": "dist/SideNavigationItemBase.js", + "path": "dist/UserSettingsDialog.js", "declarations": [ { "kind": "class", - "description": "Base class for the items that are accepted by the `ui5-side-navigation` component.", - "name": "SideNavigationItemBase", - "members": [ + "description": "### Overview\n\nThe `ui5-user-settings-dialog` is an SAP Fiori-specific web component used in the `ui5-user-menu`.\nIt allows the user to easily view information and settings for an account.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsDialog.js\";`", + "name": "UserSettingsDialog", + "slots": [ { - "kind": "field", - "name": "text", - "type": { - "text": "string | undefined" + "name": "default", + "description": "Defines the user settings items.\n\n**Note:** If no setting item is set as `selected`, the first one will be selected.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<UserSettingsItem>", + "references": [ + { + "name": "UserSettingsItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserSettingsItem.js" + } + ] }, - "description": "Defines the text of the item.", - "privacy": "public", - "default": "undefined" + "_ui5privacy": "public" }, + { + "name": "fixedItems", + "description": "Defines the fixed user settings items.", + "_ui5type": { + "text": "Array<UserSettingsItem>", + "references": [ + { + "name": "UserSettingsItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserSettingsItem.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "name": "disabled", + "name": "open", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "privacy": "public", - "_ui5since": "1.19.0" + "description": "Defines, if the User Settings Dialog is opened.", + "privacy": "public" }, { "kind": "field", - "name": "tooltip", + "name": "headerText", "type": { "text": "string | undefined" }, - "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", - "default": "undefined", + "description": "Defines the headerText of the item.", "privacy": "public", - "_ui5since": "2.0.0" - } - ], - "attributes": [ - { - "description": "Defines the text of the item.", - "name": "text", - "default": "undefined", - "fieldName": "text", + "default": "undefined" + }, + { + "kind": "field", + "name": "showSearchField", "type": { - "text": "string | undefined" - } + "text": "boolean" + }, + "default": "false", + "description": "Defines if the Search Field would be displayed.\n\n**Note:** By default the Search Field is not displayed.", + "privacy": "public" + } + ], + "events": [ + { + "name": "selection-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<UserSettingsItemSelectEventDetail>", + "references": [ + { + "name": "UserSettingsItemSelectEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserSettingsDialog.js" + } + ] + }, + "description": "Fired when an item is selected.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, + "_ui5parameters": [ + { + "type": { + "text": "UserSettingsItem", + "references": [ + { + "name": "UserSettingsItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserSettingsItem.js" + } + ] + }, + "name": "item", + "_ui5privacy": "public", + "description": "The selected `user settings item`." + } + ] }, { - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "name": "disabled", + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when a settings dialog is open.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + }, + { + "name": "before-close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired before the settings dialog is closed.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false + }, + { + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when a settings dialog is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + } + ], + "attributes": [ + { + "description": "Defines, if the User Settings Dialog is opened.", + "name": "open", "default": "false", - "fieldName": "disabled", + "fieldName": "open", "type": { "text": "boolean" } }, { - "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", - "name": "tooltip", + "description": "Defines the headerText of the item.", + "name": "header-text", "default": "undefined", - "fieldName": "tooltip", + "fieldName": "headerText", "type": { "text": "string | undefined" } + }, + { + "description": "Defines if the Search Field would be displayed.\n\n**Note:** By default the Search Field is not displayed.", + "name": "show-search-field", + "default": "false", + "fieldName": "showSearchField", + "type": { + "text": "boolean" + } } ], "superclass": { @@ -9043,10 +10036,11 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, + "tagName": "ui5-user-settings-dialog", "customElement": true, - "_ui5since": "1.19.0", - "_ui5privacy": "public", - "_ui5abstract": true + "_ui5experimental": true, + "_ui5since": "2.8.0", + "_ui5privacy": "public" } ], "exports": [ @@ -9054,322 +10048,283 @@ "kind": "js", "name": "default", "declaration": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" + "name": "UserSettingsDialog", + "module": "dist/UserSettingsDialog.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-user-settings-dialog", + "declaration": { + "name": "UserSettingsDialog", + "module": "dist/UserSettingsDialog.js" } } ] }, { "kind": "javascript-module", - "path": "dist/SideNavigationSelectableItemBase.js", + "path": "dist/UserSettingsItem.js", "declarations": [ { "kind": "class", - "description": "Base class for the navigation items that support actions.", - "name": "SideNavigationSelectableItemBase", - "members": [ + "description": "### Overview\n\nThe `ui5-user-settings-item` represents an item in the `ui5-user-settings-dialog`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsItem.js\";`\n\nYou can disable the <code>UserSettingsItem</code> by setting the <code>enabled</code> property to <code>false</code>,\nor use the <code>UserSettingsItem</code> in read-only mode by setting the <code>editable</code> property to false.\n\n<b>Note:</b> Disabled and read-only states shouldn't be used together.", + "name": "UserSettingsItem", + "slots": [ { - "kind": "field", - "name": "icon", - "type": { - "text": "string | undefined" + "name": "default", + "description": "Defines the page views of the user settings item.\n\nIf there are no tab views, the first page view will be shown unless there is selected one. If there is selected page\nview it will be shown no matter if there are tab views.\n\nThe page views are displayed by default if there is no selected tab view.", + "_ui5propertyName": "pages", + "_ui5type": { + "text": "Array<UserSettingsView>", + "references": [ + { + "name": "UserSettingsView", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserSettingsView.js" + } + ] }, - "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "privacy": "public", - "default": "undefined" + "_ui5privacy": "public" }, + { + "name": "tabs", + "description": "Defines the tab views of the user settings item.", + "_ui5type": { + "text": "Array<UserSettingsView>", + "references": [ + { + "name": "UserSettingsView", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserSettingsView.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "name": "selected", + "name": "text", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", + "default": "\"\"", + "description": "Defines the text of the user settings item.", "privacy": "public" }, { "kind": "field", - "name": "href", + "name": "tooltip", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Defines the link target URI. Supports standard hyperlink behavior.\nIf a JavaScript action should be triggered,\nthis should not be set, but instead an event handler\nfor the `click` event should be registered.", - "privacy": "public", - "default": "undefined", - "_ui5since": "1.19.0" + "default": "\"\"", + "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided to represent the meaning or function when the component is collapsed and only the icon is visible.", + "privacy": "public" }, { "kind": "field", - "name": "target", + "name": "headerText", "type": { "text": "string | undefined" }, - "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", + "description": "Defines the headerText of the item.", "privacy": "public", - "default": "undefined", - "_ui5since": "1.19.0" + "default": "\"\"" }, { "kind": "field", - "name": "design", + "name": "selected", "type": { - "text": "SideNavigationItemDesign", - "references": [ - { - "name": "SideNavigationItemDesign", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/SideNavigationItemDesign.js" - } - ] + "text": "boolean" }, - "default": "\"Default\"", - "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", - "privacy": "public", - "_ui5since": "2.7.0" + "default": "false", + "description": "Shows item tab.", + "privacy": "public" }, { "kind": "field", - "name": "unselectable", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", - "privacy": "public", - "_ui5since": "2.7.0" + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "privacy": "public" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "loading", "type": { - "text": "SideNavigationItemAccessibilityAttributes", - "references": [ - { - "name": "SideNavigationItemAccessibilityAttributes", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SideNavigationSelectableItemBase.js" - } - ] + "text": "boolean" }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", - "privacy": "public", - "_ui5since": "2.7.0" + "default": "false", + "description": "Indicates whether a loading indicator should be shown.", + "privacy": "public" }, { "kind": "field", - "name": "text", + "name": "loadingReason", "type": { "text": "string | undefined" }, - "description": "Defines the text of the item.", - "privacy": "public", + "description": "Indicates why the control is in loading state.", "default": "undefined", - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } + "privacy": "public" }, { "kind": "field", - "name": "disabled", + "name": "icon", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "privacy": "public", - "_ui5since": "1.19.0", - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } + "default": "\"globe\"", + "description": "Defines the icon of the component.", + "privacy": "public" }, { "kind": "field", - "name": "tooltip", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", - "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } + "privacy": "public" } ], "events": [ { - "name": "click", + "name": "selection-change", "_ui5privacy": "public", "type": { - "text": "CustomEvent<SideNavigationItemClickEventDetail>", + "text": "CustomEvent<UserSettingsItemViewSelectEventDetail>", "references": [ { - "name": "SideNavigationItemClickEventDetail", + "name": "UserSettingsItemViewSelectEventDetail", "package": "@ui5/webcomponents-fiori", - "module": "dist/SideNavigationItemBase.js" + "module": "dist/UserSettingsItem.js" } ] }, - "description": "Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.", + "description": "Fired when a selected view changed.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5parameters": [ { "type": { - "text": "boolean" - }, - "name": "altKey", - "_ui5privacy": "public", - "description": "Returns whether the \"ALT\" key was pressed when the event was triggered." - }, - { - "type": { - "text": "boolean" - }, - "name": "ctrlKey", - "_ui5privacy": "public", - "description": "Returns whether the \"CTRL\" key was pressed when the event was triggered." - }, - { - "type": { - "text": "boolean" - }, - "name": "metaKey", - "_ui5privacy": "public", - "description": "Returns whether the \"META\" key was pressed when the event was triggered." - }, - { - "type": { - "text": "boolean" + "text": "UserSettingsView", + "references": [ + { + "name": "UserSettingsView", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserSettingsView.js" + } + ] }, - "name": "shiftKey", + "name": "view", "_ui5privacy": "public", - "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered." + "description": "The selected `view`." } ] } ], "attributes": [ { - "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", - "name": "selected", - "default": "false", - "fieldName": "selected", + "description": "Defines the text of the user settings item.", + "name": "text", + "default": "\"\"", + "fieldName": "text", "type": { - "text": "boolean" + "text": "string" } }, { - "description": "Defines the link target URI. Supports standard hyperlink behavior.\nIf a JavaScript action should be triggered,\nthis should not be set, but instead an event handler\nfor the `click` event should be registered.", - "name": "href", - "default": "undefined", - "fieldName": "href", + "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided to represent the meaning or function when the component is collapsed and only the icon is visible.", + "name": "tooltip", + "default": "\"\"", + "fieldName": "tooltip", "type": { - "text": "string | undefined" + "text": "string" } }, { - "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", - "name": "target", - "default": "undefined", - "fieldName": "target", + "description": "Defines the headerText of the item.", + "name": "header-text", + "default": "\"\"", + "fieldName": "headerText", "type": { "text": "string | undefined" } }, { - "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", - "name": "design", - "default": "\"Default\"", - "fieldName": "design", + "description": "Shows item tab.", + "name": "selected", + "default": "false", + "fieldName": "selected", "type": { - "text": "\"Default\" | \"Action\"" + "text": "boolean" } }, { - "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", - "name": "unselectable", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", "default": "false", - "fieldName": "unselectable", + "fieldName": "disabled", "type": { "text": "boolean" } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "description": "Indicates whether a loading indicator should be shown.", + "name": "loading", + "default": "false", + "fieldName": "loading", "type": { - "text": "SideNavigationItemAccessibilityAttributes" + "text": "boolean" } }, { - "description": "Defines the text of the item.", - "name": "text", + "description": "Indicates why the control is in loading state.", + "name": "loading-reason", "default": "undefined", - "fieldName": "text", + "fieldName": "loadingReason", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" } }, { - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", + "description": "Defines the icon of the component.", + "name": "icon", + "default": "\"globe\"", + "fieldName": "icon", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" + "text": "string" } }, { - "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", - "name": "tooltip", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", "default": "undefined", - "fieldName": "tooltip", + "fieldName": "accessibleName", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" } } ], "superclass": { - "name": "SideNavigationItemBase", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SideNavigationItemBase.js" + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" }, + "tagName": "ui5-user-settings-item", "customElement": true, - "_ui5since": "1.24.0", - "_ui5privacy": "public", - "_ui5abstract": true + "_ui5experimental": true, + "_ui5since": "2.8.0", + "_ui5privacy": "public" } ], "exports": [ @@ -9377,34 +10332,49 @@ "kind": "js", "name": "default", "declaration": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" + "name": "UserSettingsItem", + "module": "dist/UserSettingsItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-user-settings-item", + "declaration": { + "name": "UserSettingsItem", + "module": "dist/UserSettingsItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/SideNavigationSubItem.js", + "path": "dist/UserSettingsView.js", "declarations": [ { "kind": "class", - "description": "### Overview\nRepresents a single navigation action within `ui5-side-navigation-item`.\nThe `ui5-side-navigation-sub-item` is intended to be used inside a `ui5-side-navigation-item` only.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";`", - "name": "SideNavigationSubItem", + "description": "### Overview\n\nThe `ui5-user-settings-view` represents a view displayed in the `ui5-user-settings-item`.", + "name": "UserSettingsView", + "slots": [ + { + "name": "default", + "description": "Defines the content of the view.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], "members": [ { "kind": "field", - "name": "icon", + "name": "text", "type": { "text": "string | undefined" }, - "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the title text of the user settings view.", "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + "default": "undefined" }, { "kind": "field", @@ -9413,413 +10383,442 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", - "privacy": "public", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + "description": "Defines whether the view is selected. There can be just one selected view at a time.", + "privacy": "public" }, { "kind": "field", - "name": "href", + "name": "secondary", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the link target URI. Supports standard hyperlink behavior.\nIf a JavaScript action should be triggered,\nthis should not be set, but instead an event handler\nfor the `click` event should be registered.", - "privacy": "public", + "default": "false", + "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the title text of the user settings view.", + "name": "text", "default": "undefined", - "_ui5since": "1.19.0", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" + "fieldName": "text", + "type": { + "text": "string | undefined" } }, { - "kind": "field", - "name": "target", + "description": "Defines whether the view is selected. There can be just one selected view at a time.", + "name": "selected", + "default": "false", + "fieldName": "selected", "type": { - "text": "string | undefined" - }, - "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", - "privacy": "public", - "default": "undefined", - "_ui5since": "1.19.0", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" + "text": "boolean" } }, { - "kind": "field", - "name": "design", + "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.", + "name": "secondary", + "default": "false", + "fieldName": "secondary", "type": { - "text": "SideNavigationItemDesign", + "text": "boolean" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-user-settings-view", + "customElement": true, + "_ui5experimental": true, + "_ui5since": "2.8.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "UserSettingsView", + "module": "dist/UserSettingsView.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-user-settings-view", + "declaration": { + "name": "UserSettingsView", + "module": "dist/UserSettingsView.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/ViewSettingsDialog.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\nThe `ui5-view-settings-dialog` component helps the user to sort data within a list or a table.\nIt consists of several lists like `Sort order` which is built-in and `Sort By` and `Filter By` lists,\nfor which you must be provide items(`ui5-sort-item` & `ui5-filter-item` respectively)\nThese options can be used to create sorters for a table.\n\nThe `ui5-view-settings-dialog` interrupts the current application processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe `ui5-view-settings-dialog` is modal, which means that user action is required before returning to the parent window is possible.\n\n### Structure\nA `ui5-view-settings-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-view-settings-dialog` is usually displayed at the center of the screen.\n\n### Responsive Behavior\n`ui5-view-settings-dialog` stretches on full screen on phones.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js\";`", + "name": "ViewSettingsDialog", + "slots": [ + { + "name": "sortItems", + "description": "Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`", + "_ui5type": { + "text": "Array<SortItem>", "references": [ { - "name": "SideNavigationItemDesign", + "name": "SortItem", "package": "@ui5/webcomponents-fiori", - "module": "dist/types/SideNavigationItemDesign.js" + "module": "dist/SortItem.js" } ] }, - "default": "\"Default\"", - "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", - "privacy": "public", - "_ui5since": "2.7.0", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + "_ui5privacy": "public" }, { - "kind": "field", - "name": "unselectable", - "type": { - "text": "boolean" + "name": "filterItems", + "description": "Defines the `filterItems` list.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`", + "_ui5type": { + "text": "Array<FilterItem>", + "references": [ + { + "name": "FilterItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/FilterItem.js" + } + ] }, - "default": "false", - "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", - "privacy": "public", - "_ui5since": "2.7.0", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + "_ui5privacy": "public" }, { - "kind": "field", - "name": "accessibilityAttributes", - "type": { - "text": "SideNavigationItemAccessibilityAttributes", + "name": "groupItems", + "description": "Defines the list of items against which the user could group data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`", + "_ui5type": { + "text": "Array<GroupItem>", "references": [ { - "name": "SideNavigationItemAccessibilityAttributes", + "name": "GroupItem", "package": "@ui5/webcomponents-fiori", - "module": "dist/SideNavigationSelectableItemBase.js" + "module": "dist/GroupItem.js" } ] }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", - "privacy": "public", - "_ui5since": "2.7.0", - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "name": "text", + "name": "sortDescending", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the text of the item.", - "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } + "default": "false", + "description": "Defines the initial sort order.", + "privacy": "public" }, { "kind": "field", - "name": "disabled", + "name": "groupDescending", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "description": "Defines the initial group order.", "privacy": "public", - "_ui5since": "1.19.0", - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } + "_ui5since": "2.13.0" }, { "kind": "field", - "name": "tooltip", - "type": { - "text": "string | undefined" - }, - "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } - } - ], - "superclass": { - "name": "SideNavigationSelectableItemBase", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SideNavigationSelectableItemBase.js" - }, - "tagName": "ui5-side-navigation-sub-item", - "customElement": true, - "_ui5since": "1.0.0-rc.8", - "_ui5privacy": "public", - "_ui5abstract": true, - "attributes": [ - { - "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, - { - "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", - "name": "selected", - "default": "false", - "fieldName": "selected", + "name": "open", "type": { "text": "boolean" }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } + "default": "false", + "description": "Indicates if the dialog is open.", + "privacy": "public", + "_ui5since": "2.0.0" }, { - "description": "Defines the link target URI. Supports standard hyperlink behavior.\nIf a JavaScript action should be triggered,\nthis should not be set, but instead an event handler\nfor the `click` event should be registered.", - "name": "href", - "default": "undefined", - "fieldName": "href", - "type": { - "text": "string | undefined" + "kind": "method", + "name": "setConfirmedSettings", + "return": { + "type": { + "text": "void" + } }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, + "parameters": [ + { + "name": "settings", + "type": { + "text": "VSDSettings", + "references": [ + { + "name": "VSDSettings", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ViewSettingsDialog.js" + } + ] + }, + "description": "predefined settings.", + "_ui5privacy": "public" + } + ], + "description": "Sets a JavaScript object, as settings to the `ui5-view-settings-dialog`.\nThis method can be used after the dialog is initially open, as the dialog needs\nto set its initial settings.\nThe `ui5-view-settings-dialog` throws an event called \"before-open\",\nwhich can be used as a trigger point.\nThe object should have the following format:", + "privacy": "public" + } + ], + "events": [ { - "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", - "name": "target", - "default": "undefined", - "fieldName": "target", + "name": "confirm", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent<ViewSettingsDialogConfirmEventDetail>", + "references": [ + { + "name": "ViewSettingsDialogConfirmEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ViewSettingsDialog.js" + } + ] }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, - { - "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.", - "name": "design", - "default": "\"Default\"", - "fieldName": "design", - "type": { - "text": "\"Default\" | \"Action\"" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, - { - "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", - "name": "unselectable", - "default": "false", - "fieldName": "unselectable", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, - { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", - "type": { - "text": "SideNavigationItemAccessibilityAttributes" - }, - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - }, - { - "description": "Defines the text of the item.", - "name": "text", - "default": "undefined", - "fieldName": "text", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } - }, - { - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } + "description": "Fired when confirmation button is activated.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "String" + }, + "name": "sortOrder", + "_ui5privacy": "public", + "description": "The current sort order selected." + }, + { + "type": { + "text": "String" + }, + "name": "sortBy", + "_ui5privacy": "public", + "description": "The currently selected `ui5-sort-item` text attribute." + }, + { + "type": { + "text": "HTMLElement" + }, + "name": "sortByItem", + "_ui5privacy": "public", + "description": "The currently selected `ui5-sort-item`." + }, + { + "type": { + "text": "Boolean" + }, + "name": "sortDescending", + "_ui5privacy": "public", + "description": "The selected sort order (true = descending, false = ascending)." + }, + { + "type": { + "text": "String" + }, + "name": "groupOrder", + "_ui5privacy": "public", + "description": "The current group order selected." + }, + { + "type": { + "text": "String" + }, + "name": "groupBy", + "_ui5privacy": "public", + "description": "The currently selected `ui5-group-item` text attribute." + }, + { + "type": { + "text": "HTMLElement" + }, + "name": "groupByItem", + "_ui5privacy": "public", + "description": "The currently selected `ui5-group-item`." + }, + { + "type": { + "text": "Boolean" + }, + "name": "groupDescending", + "_ui5privacy": "public", + "description": "The selected group order (true = descending, false = ascending)." + }, + { + "type": { + "text": "Array" + }, + "name": "filters", + "_ui5privacy": "public", + "description": "The selected filters items." + } + ] }, { - "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SideNavigationItemBase", - "module": "dist/SideNavigationItemBase.js" - } - } - ], - "events": [ - { - "name": "click", + "name": "cancel", "_ui5privacy": "public", "type": { - "text": "CustomEvent<SideNavigationItemClickEventDetail>", + "text": "CustomEvent<ViewSettingsDialogCancelEventDetail>", "references": [ { - "name": "SideNavigationItemClickEventDetail", + "name": "ViewSettingsDialogCancelEventDetail", "package": "@ui5/webcomponents-fiori", - "module": "dist/SideNavigationItemBase.js" + "module": "dist/ViewSettingsDialog.js" } ] }, - "description": "Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, + "description": "Fired when cancel button is activated.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, "_ui5Bubbles": true, "_ui5parameters": [ { "type": { - "text": "boolean" + "text": "String" }, - "name": "altKey", + "name": "sortOrder", "_ui5privacy": "public", - "description": "Returns whether the \"ALT\" key was pressed when the event was triggered." + "description": "The current sort order selected." }, { "type": { - "text": "boolean" + "text": "String" }, - "name": "ctrlKey", + "name": "sortBy", "_ui5privacy": "public", - "description": "Returns whether the \"CTRL\" key was pressed when the event was triggered." + "description": "The currently selected `ui5-sort-item` text attribute." }, { "type": { - "text": "boolean" + "text": "HTMLElement" }, - "name": "metaKey", + "name": "sortByItem", "_ui5privacy": "public", - "description": "Returns whether the \"META\" key was pressed when the event was triggered." + "description": "The currently selected `ui5-sort-item`." }, { "type": { - "text": "boolean" + "text": "Boolean" }, - "name": "shiftKey", + "name": "sortDescending", "_ui5privacy": "public", - "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered." + "description": "The selected sort order (true = descending, false = ascending)." + }, + { + "type": { + "text": "String" + }, + "name": "groupOrder", + "_ui5privacy": "public", + "description": "The current group order selected." + }, + { + "type": { + "text": "String" + }, + "name": "groupBy", + "_ui5privacy": "public", + "description": "The currently selected `ui5-group-item` text attribute." + }, + { + "type": { + "text": "HTMLElement" + }, + "name": "groupByItem", + "_ui5privacy": "public", + "description": "The currently selected `ui5-group-item`." + }, + { + "type": { + "text": "Boolean" + }, + "name": "groupDescending", + "_ui5privacy": "public", + "description": "The selected group order (true = descending, false = ascending)." + }, + { + "type": { + "text": "Array" + }, + "name": "filters", + "_ui5privacy": "public", + "description": "The selected filters items." } - ], - "inheritedFrom": { - "name": "SideNavigationSelectableItemBase", - "module": "dist/SideNavigationSelectableItemBase.js" - } - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "SideNavigationSubItem", - "module": "dist/SideNavigationSubItem.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-side-navigation-sub-item", - "declaration": { - "name": "SideNavigationSubItem", - "module": "dist/SideNavigationSubItem.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/SortItem.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-sort-item` component defines the sorting criteria for data in `ui5-view-settings-dialog`.\nIt represents a single sort option that users can select to organize data in ascending or descending order.\n\n### Usage\n\nThe `ui5-sort-item` is used within the `ui5-view-settings-dialog` to provide sorting options.\nEach sort item represents a column or field by which data can be sorted.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`", - "name": "SortItem", - "members": [ + ] + }, { - "kind": "field", - "name": "text", + "name": "before-open", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent" }, - "description": "Defines the text of the sort item.", - "default": "undefined", - "privacy": "public" + "description": "Fired before the component is opened.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false }, { - "kind": "field", - "name": "selected", + "name": "open", + "_ui5privacy": "public", "type": { - "text": "boolean" + "text": "CustomEvent" }, - "default": "false", - "description": "Defines if the sort item is selected.", - "privacy": "public" + "description": "Fired after the dialog is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.0.0" + }, + { + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the dialog is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.0.0" } ], "attributes": [ { - "description": "Defines the text of the sort item.", - "name": "text", - "default": "undefined", - "fieldName": "text", + "description": "Defines the initial sort order.", + "name": "sort-descending", + "default": "false", + "fieldName": "sortDescending", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines if the sort item is selected.", - "name": "selected", + "description": "Defines the initial group order.", + "name": "group-descending", "default": "false", - "fieldName": "selected", + "fieldName": "groupDescending", + "type": { + "text": "boolean" + } + }, + { + "description": "Indicates if the dialog is open.", + "name": "open", + "default": "false", + "fieldName": "open", "type": { "text": "boolean" } @@ -9830,11 +10829,10 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-sort-item", + "tagName": "ui5-view-settings-dialog", "customElement": true, "_ui5since": "1.0.0-rc.16", - "_ui5privacy": "public", - "_ui5abstract": true + "_ui5privacy": "public" } ], "exports": [ @@ -9842,46 +10840,50 @@ "kind": "js", "name": "default", "declaration": { - "name": "SortItem", - "module": "dist/SortItem.js" + "name": "ViewSettingsDialog", + "module": "dist/ViewSettingsDialog.js" } }, { "kind": "custom-element-definition", - "name": "ui5-sort-item", + "name": "ui5-view-settings-dialog", "declaration": { - "name": "SortItem", - "module": "dist/SortItem.js" + "name": "ViewSettingsDialog", + "module": "dist/ViewSettingsDialog.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Timeline.js", + "path": "dist/Wizard.js", "declarations": [ - { - "kind": "interface", - "name": "ITimelineItem", - "description": "Interface for components that may be slotted inside `ui5-timeline` as items", - "_ui5privacy": "public" - }, { "kind": "class", - "description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.", - "name": "Timeline", + "description": "### Overview\n\nThe `ui5-wizard` helps users to complete a complex task by dividing it into sections and guiding them through it.\nIt has two main areas - a navigation area at the top showing the step sequence and a content area below it.\n\n### Structure\n#### Navigation area\nThe top most area of the `ui5-wizard` is occupied by the navigation area.\nIt shows the sequence of steps, where the recommended number of steps is between 3 and 8 steps.\n\n- Steps can have different visual representations - numbers or icons.\n- Steps might have labels for better readability - titleText and subTitleText.\n- Steps are defined by using the `ui5-wizard-step` as slotted element within the `ui5-wizard`.\n\n**Note:** If no selected step is defined, the first step will be auto selected.\n\n**Note:** If multiple selected steps are defined, the last step will be selected.\n\n### Keyboard Handling\nThe user can navigate using the following keyboard shortcuts:\n\n#### Wizard Progress Navigation\n\n\t- [Left] or [Down] - Focus moves backward to the WizardProgressNavAnchors.\n\t- [Up] or [Right] - Focus moves forward to the WizardProgressNavAnchor.\n\t- [Space] / [Enter] or [Return] - Selects an active step\n\t- [Home] or [PAGE UP] - Focus goes to the first step\n\t- [End] or [PAGE DOWN] - Focus goes to the last step\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n#### Content\nThe content occupies the main part of the page. It can hold any type of HTML elements.\nIt's defined by using the `ui5-wizard-step` as slotted element within the `ui5-wizard`.\n\n### Scrolling\nThe component handles user scrolling by selecting the closest step, based on the current scroll position\nand scrolls to particular place, when the user clicks on the step within the navigation area.\n\n**Important:** In order the component's scrolling behaviour to work, it has to be limited from the outside parent element in terms of height.\nThe component or its parent has to be given percentage or absolute height. Otherwise, the component will be scrolled out with the entire page.\n\n**For example:**\n\n```html\n<ui5-dialog style=\"height: 80%\">\n\t<ui5-wizard></ui5-wizard>\n</ui5-dialog>\n```\n\n#### Moving to next step\nThe `ui5-wizard-step` provides the necessary API and it's up to the user of the component to use it to move to the next step.\nYou have to set its `selected` property (and remove the `disabled` one if set) to `true`.\nThe `ui5-wizard` will automatically scroll to the content of the newly selected step.\n\nThe Fiori 3 guidelines recommends having a \"nextStep\" button in the content area.\nYou can place a button, or any other type of element to trigger step change, inside the `ui5-wizard-step`,\nand show/hide it when certain fields are filled or user defined criteria is met.\n\n### Usage\n#### When to use:\nWhen the user has to accomplish a long or unfamiliar task.\n\n#### When not to use:\nWhen the task has less than 3 steps.\n\n### Responsive Behavior\nOn small widths the step's titleText, subtitleText and separators in the navigation area shrink and from particular point the steps are grouped together and overlap.\nTapping on them will show a popover to select the step to navigate to. On mobile device, the grouped steps are presented within a dialog.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/Wizard.js\";` (includes <ui5-wizard-step/>)", + "name": "Wizard", + "cssParts": [ + { + "description": "Used to style the progress navigator of the `ui5-wizard`.", + "name": "navigator" + }, + { + "description": "Used to style a `ui5-wizard-step` container.", + "name": "step-content" + } + ], "slots": [ { "name": "default", - "description": "Determines the content of the `ui5-timeline`.", - "_ui5propertyName": "items", + "description": "Defines the steps.\n\n**Note:** Use the available `ui5-wizard-step` component.", + "_ui5propertyName": "steps", "_ui5type": { - "text": "Array<ITimelineItem>", + "text": "Array<WizardStep>", "references": [ { - "name": "ITimelineItem", + "name": "WizardStep", "package": "@ui5/webcomponents-fiori", - "module": "dist/Timeline.js" + "module": "dist/WizardStep.js" } ] }, @@ -9891,131 +10893,91 @@ "members": [ { "kind": "field", - "name": "layout", + "name": "contentLayout", "type": { - "text": "TimelineLayout", + "text": "WizardContentLayout", "references": [ { - "name": "TimelineLayout", + "name": "WizardContentLayout", "package": "@ui5/webcomponents-fiori", - "module": "dist/types/TimelineLayout.js" + "module": "dist/types/WizardContentLayout.js" } ] }, - "default": "\"Vertical\"", - "description": "Defines the items orientation.", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" - }, - { - "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.2.0" - }, - { - "kind": "field", - "name": "loading", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the component should display a loading indicator over the Timeline.", + "default": "\"MultipleSteps\"", + "description": "Defines how the content of the `ui5-wizard` would be visualized.", "privacy": "public", - "_ui5since": "2.7.0" - }, - { - "kind": "field", - "name": "loadingDelay", - "type": { - "text": "number" - }, - "default": "1000", - "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", - "privacy": "public" - }, + "_ui5since": "1.14.0" + } + ], + "events": [ { - "kind": "field", - "name": "growing", + "name": "step-change", + "_ui5privacy": "public", "type": { - "text": "TimelineGrowingMode", + "text": "CustomEvent<WizardStepChangeEventDetail>", "references": [ { - "name": "TimelineGrowingMode", + "name": "WizardStepChangeEventDetail", "package": "@ui5/webcomponents-fiori", - "module": "dist/types/TimelineGrowingMode.js" + "module": "dist/Wizard.js" } ] }, - "default": "\"None\"", - "description": "Defines whether the Timeline will have growing capability either by pressing a \"More\" button,\nor via user scroll. In both cases a `load-more` event is fired.\n\nAvailable options:\n\n`Button` - Displays a button at the end of the Timeline, which when pressed triggers the `load-more` event.\n\n`Scroll` -Triggers the `load-more` event when the user scrolls to the end of the Timeline.\n\n`None` (default) - The growing functionality is off.", - "privacy": "public", - "_ui5since": "2.7.0" - } - ], - "events": [ - { - "name": "load-more", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.", + "description": "Fired when the step is changed by user interaction - either with scrolling,\nor by clicking on the steps within the component header.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "2.7.0" + "_ui5parameters": [ + { + "type": { + "text": "WizardStep", + "references": [ + { + "name": "WizardStep", + "package": "@ui5/webcomponents-fiori", + "module": "dist/WizardStep.js" + } + ] + }, + "name": "step", + "_ui5privacy": "public", + "description": "The new step." + }, + { + "type": { + "text": "WizardStep", + "references": [ + { + "name": "WizardStep", + "package": "@ui5/webcomponents-fiori", + "module": "dist/WizardStep.js" + } + ] + }, + "name": "previousStep", + "_ui5privacy": "public", + "description": "The previous step." + }, + { + "type": { + "text": "boolean" + }, + "name": "withScroll", + "_ui5privacy": "public", + "description": "true when the event occurs due to user scrolling." + } + ] } ], "attributes": [ { - "description": "Defines the items orientation.", - "name": "layout", - "default": "\"Vertical\"", - "fieldName": "layout", + "description": "Defines how the content of the `ui5-wizard` would be visualized.", + "name": "content-layout", + "default": "\"MultipleSteps\"", + "fieldName": "contentLayout", "type": { - "text": "\"Vertical\" | \"Horizontal\"" - } - }, - { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines if the component should display a loading indicator over the Timeline.", - "name": "loading", - "default": "false", - "fieldName": "loading", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", - "name": "loading-delay", - "default": "1000", - "fieldName": "loadingDelay", - "type": { - "text": "number" - } - }, - { - "description": "Defines whether the Timeline will have growing capability either by pressing a \"More\" button,\nor via user scroll. In both cases a `load-more` event is fired.\n\nAvailable options:\n\n`Button` - Displays a button at the end of the Timeline, which when pressed triggers the `load-more` event.\n\n`Scroll` -Triggers the `load-more` event when the user scrolls to the end of the Timeline.\n\n`None` (default) - The growing functionality is off.", - "name": "growing", - "default": "\"None\"", - "fieldName": "growing", - "type": { - "text": "\"Button\" | \"None\" | \"Scroll\"" + "text": "\"MultipleSteps\" | \"SingleStep\"" } } ], @@ -10024,9 +10986,9 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-timeline", + "tagName": "ui5-wizard", "customElement": true, - "_ui5since": "0.8.0", + "_ui5since": "1.0.0-rc.10", "_ui5privacy": "public" } ], @@ -10035,96 +10997,153 @@ "kind": "js", "name": "default", "declaration": { - "name": "Timeline", - "module": "dist/Timeline.js" + "name": "Wizard", + "module": "dist/Wizard.js" } }, { "kind": "custom-element-definition", - "name": "ui5-timeline", + "name": "ui5-wizard", "declaration": { - "name": "Timeline", - "module": "dist/Timeline.js" + "name": "Wizard", + "module": "dist/Wizard.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TimelineGroupItem.js", + "path": "dist/WizardStep.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nAn entry posted on the timeline.\nIt is intented to represent a group of `<ui5-timeline-item>`s.\n\n**Note**: Please do not use empty groups in order to preserve the intended design.", - "name": "TimelineGroupItem", + "description": "### Overview\n\nA component that represents a logical step as part of the `ui5-wizard`.\nIt is meant to aggregate arbitrary HTML elements that form the content of a single step.\n\n### Structure\n\n- Each wizard step has arbitrary content.\n- Each wizard step might have texts - defined by the `titleText` and `subtitleText` properties.\n- Each wizard step might have an icon - defined by the `icon` property.\n- Each wizard step might display a number in place of the `icon`, when it's missing.\n\n### Usage\nThe `ui5-wizard-step` component should be used only as slot of the `ui5-wizard` component\nand should not be used standalone.", + "name": "WizardStep", "slots": [ { + "description": "Defines the step content.", "name": "default", - "description": "Determines the content of the `ui5-timeline-group-item`.", - "_ui5propertyName": "items", + "_ui5privacy": "public", "_ui5type": { - "text": "Array<ITimelineItem>", - "references": [ - { - "name": "ITimelineItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/Timeline.js" - } - ] - }, - "_ui5privacy": "public" + "text": "Array<Node>" + } } ], "members": [ { "kind": "field", - "name": "groupName", + "name": "titleText", "type": { "text": "string | undefined" }, - "description": "Defines the text of the button that expands and collapses the group.", + "description": "Defines the `titleText` of the step.\n\n**Note:** The text is displayed in the `ui5-wizard` navigation header.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "subtitleText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the `subtitleText` of the step.\n\n**Note:** the text is displayed in the `ui5-wizard` navigation header.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "icon", + "type": { + "text": "string | undefined" + }, + "description": "Defines the `icon` of the step.\n\n**Note:** The icon is displayed in the `ui5-wizard` navigation header.\n\nThe SAP-icons font provides numerous options.\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "collapsed", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Determines if the group is collapsed or expanded.", + "description": "Defines if the step is `disabled`. When disabled the step is displayed,\nbut the user can't select the step by clicking or navigate to it with scrolling.\n\n**Note:** Step can't be `selected` and `disabled` at the same time.\nIn this case the `selected` property would take precedence.", "privacy": "public" - } - ], - "events": [ + }, { - "name": "toggle", - "_ui5privacy": "public", + "kind": "field", + "name": "selected", "type": { - "text": "CustomEvent" + "text": "boolean" }, - "description": "Fired when the group item is expanded or collapsed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "default": "false", + "description": "Defines the step's `selected` state - the step that is currently active.\n\n**Note:** Step can't be `selected` and `disabled` at the same time.\nIn this case the `selected` property would take precedence.", + "privacy": "public" + }, + { + "kind": "field", + "name": "branching", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "When `branching` is enabled a dashed line would be displayed after the step,\nmeant to indicate that the next step is not yet known and depends on user choice in the current step.\n\n**Note:** It is recommended to use `branching` on the last known step\nand later add new steps when it becomes clear how the wizard flow should continue.", + "privacy": "public" } ], "attributes": [ { - "description": "Defines the text of the button that expands and collapses the group.", - "name": "group-name", + "description": "Defines the `titleText` of the step.\n\n**Note:** The text is displayed in the `ui5-wizard` navigation header.", + "name": "title-text", "default": "undefined", - "fieldName": "groupName", + "fieldName": "titleText", "type": { "text": "string | undefined" } }, { - "description": "Determines if the group is collapsed or expanded.", - "name": "collapsed", + "description": "Defines the `subtitleText` of the step.\n\n**Note:** the text is displayed in the `ui5-wizard` navigation header.", + "name": "subtitle-text", + "default": "undefined", + "fieldName": "subtitleText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the `icon` of the step.\n\n**Note:** The icon is displayed in the `ui5-wizard` navigation header.\n\nThe SAP-icons font provides numerous options.\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines if the step is `disabled`. When disabled the step is displayed,\nbut the user can't select the step by clicking or navigate to it with scrolling.\n\n**Note:** Step can't be `selected` and `disabled` at the same time.\nIn this case the `selected` property would take precedence.", + "name": "disabled", "default": "false", - "fieldName": "collapsed", + "fieldName": "disabled", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the step's `selected` state - the step that is currently active.\n\n**Note:** Step can't be `selected` and `disabled` at the same time.\nIn this case the `selected` property would take precedence.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } + }, + { + "description": "When `branching` is enabled a dashed line would be displayed after the step,\nmeant to indicate that the next step is not yet known and depends on user choice in the current step.\n\n**Note:** It is recommended to use `branching` on the last known step\nand later add new steps when it becomes clear how the wizard flow should continue.", + "name": "branching", + "default": "false", + "fieldName": "branching", "type": { "text": "boolean" } @@ -10135,17 +11154,11 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-timeline-group-item", + "tagName": "ui5-wizard-step", "customElement": true, - "_ui5since": "2.1.0", + "_ui5since": "1.0.0-rc.10", "_ui5privacy": "public", - "_ui5implements": [ - { - "name": "ITimelineItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/Timeline.js" - } - ] + "_ui5abstract": true } ], "exports": [ @@ -10153,191 +11166,185 @@ "kind": "js", "name": "default", "declaration": { - "name": "TimelineGroupItem", - "module": "dist/TimelineGroupItem.js" + "name": "WizardStep", + "module": "dist/WizardStep.js" } }, { "kind": "custom-element-definition", - "name": "ui5-timeline-group-item", + "name": "ui5-wizard-step", "declaration": { - "name": "TimelineGroupItem", - "module": "dist/TimelineGroupItem.js" + "name": "WizardStep", + "module": "dist/WizardStep.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TimelineItem.js", - "declarations": [ + "path": "dist/WizardTab.js", + "declarations": [], + "exports": [ { - "kind": "class", - "description": "### Overview\n\nAn entry posted on the timeline.", - "name": "TimelineItem", - "slots": [ - { - "name": "default", - "description": "Defines the content of the `ui5-timeline-item`.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<Node>" - }, - "_ui5privacy": "public" - } - ], - "members": [ - { - "kind": "field", - "name": "icon", - "type": { - "text": "string | undefined" - }, - "description": "Defines the icon to be displayed as graphical element within the `ui5-timeline-item`.\nSAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "name", - "type": { - "text": "string | undefined" - }, - "description": "Defines the name of the item, displayed before the `title-text`.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "nameClickable", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the `name` is clickable.", - "privacy": "public" - }, - { - "kind": "field", - "name": "titleText", - "type": { - "text": "string | undefined" - }, - "description": "Defines the title text of the component.", - "default": "undefined", - "privacy": "public" + "kind": "js", + "name": "default", + "declaration": { + "name": "WizardTab", + "module": "dist/WizardTab.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/ssr-zxing-shim.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ZXing", + "module": "dist/ssr-zxing-shim.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/ssr-zxing.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ZXing", + "module": "dist/ssr-zxing.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/fcl-utils/FCLLayout.js", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "dist/illustrations/AllIllustrations.js", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "dist/types/FCLLayout.js", + "declarations": [ + { + "kind": "enum", + "name": "FCLLayout", + "description": "Different types of FCLLayout.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "The layout will display 1 column.", + "default": "OneColumn", + "name": "OneColumn", + "readonly": true }, { "kind": "field", - "name": "subtitleText", - "type": { - "text": "string | undefined" - }, - "description": "Defines the subtitle text of the component.", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\nDesktop: Defaults to 67 - 33 - -- percent widths of columns. Start (expanded) and Mid columns are displayed.\nTablet: Defaults to 67 - 33 - -- percent widths of columns. Start (expanded) and Mid columns are displayed.\nPhone: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed\n\nUse to display both a list and a detail page when the user should focus on the list page.", + "default": "TwoColumnsStartExpanded", + "name": "TwoColumnsStartExpanded", + "readonly": true }, { "kind": "field", - "name": "state", - "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the state of the icon displayed in the `ui5-timeline-item`.", + "static": true, "privacy": "public", - "_ui5since": "2.7.0" - } - ], - "events": [ + "description": "Desktop: Defaults to 33 - 67 - -- percent widths of columns. Start and Mid (expanded) columns are displayed\nTablet: Defaults to 33 - 67 - -- percent widths of columns. Start and Mid (expanded) columns are displayed\nPhone: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed\n\nUse to display both a list and a detail page when the user should focus on the detail page.", + "default": "TwoColumnsMidExpanded", + "name": "TwoColumnsMidExpanded", + "readonly": true + }, { - "name": "name-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the item name is pressed either with a\nclick/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `name-clickable`\nattribute is not set.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true - } - ], - "attributes": [ + "kind": "field", + "static": true, + "privacy": "public", + "description": "Desktop: Defaults to 25 - 50 - 25 percent widths of columns. Start, Mid (expanded) and End columns are displayed\nTablet: Defaults to 0 - 67 - 33 percent widths of columns. Mid (expanded) and End columns are displayed, Start is accessible by dragging the columns-separator\nPhone: Fixed -- -- 100 percent widths of columns, only the End column is displayed\n\nUse to display all three pages (list, detail, detail-detail) when the user should focus on the detail.", + "default": "ThreeColumnsMidExpanded", + "name": "ThreeColumnsMidExpanded", + "readonly": true + }, { - "description": "Defines the icon to be displayed as graphical element within the `ui5-timeline-item`.\nSAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Desktop: Defaults to 25 - 25 - 50 percent widths of columns. Start, Mid and End (expanded) columns are displayed\nTablet: Defaults to 0 - 33 - 67 percent widths of columns. Mid and End (expanded) columns are displayed, Start is accessible by dragging the columns-separator\nPhone: Fixed -- -- 100 percent widths of columns (only the End column is displayed)\n\nUse to display all three pages (list, detail, detail-detail) when the user should focus on the detail-detail.", + "default": "ThreeColumnsEndExpanded", + "name": "ThreeColumnsEndExpanded", + "readonly": true }, { - "description": "Defines the name of the item, displayed before the `title-text`.", - "name": "name", - "default": "undefined", - "fieldName": "name", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Desktop: Defaults to 67 - 33 - 0 percent widths of columns. Start (expanded) and Mid columns are displayed, End is accessible by dragging the columns-separator\nTablet: Defaults to 67 - 33 - 0 percent widths of columns. Start (expanded) and Mid columns are displayed, End is accessible by dragging the columns-separator\nPhone: Fixed -- -- 100 percent widths of columns, only the End column is displayed\n\nUse to display the list and detail pages when the user should focus on the list.\nThe detail-detail is still loaded and easily accessible by dragging the columns-separator", + "default": "ThreeColumnsStartExpandedEndHidden", + "name": "ThreeColumnsStartExpandedEndHidden", + "readonly": true }, { - "description": "Defines if the `name` is clickable.", - "name": "name-clickable", - "default": "false", - "fieldName": "nameClickable", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Desktop: Defaults to 33 - 67 - 0 percent widths of columns. Start and Mid (expanded) columns are displayed, End is accessible by dragging the columns-separator\nTablet: Defaults to 33 - 67 - 0 percent widths of columns. Start and Mid (expanded) columns are displayed, End is accessible by dragging the columns-separator\nPhone: Fixed -- -- 100 percent widths of columns, only the End column is displayed\n\nUse to display the list and detail pages when the user should focus on the detail.\nThe detail-detail is still loaded and easily accessible by dragging the columns-separator", + "default": "ThreeColumnsMidExpandedEndHidden", + "name": "ThreeColumnsMidExpandedEndHidden", + "readonly": true }, { - "description": "Defines the title text of the component.", - "name": "title-text", - "default": "undefined", - "fieldName": "titleText", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Desktop: Defaults to 0 - 67 - 33 percent widths of columns. Start is hidden, Mid (expanded) and End columns are displayed.\nTablet: Defaults to 0 - 67 - 33 percent widths of columns. Start is hidden, Mid (expanded) and End columns are displayed.\nPhone: Fixed -- 100 percent width of the Mid column, only the Mid column is displayed.\n\nUse to display the Mid and End columns while the Start column is hidden.", + "default": "ThreeColumnsStartHiddenMidExpanded", + "name": "ThreeColumnsStartHiddenMidExpanded", + "readonly": true }, { - "description": "Defines the subtitle text of the component.", - "name": "subtitle-text", - "default": "undefined", - "fieldName": "subtitleText", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Desktop: Defaults to 0 - 33 - 67 percent widths of columns. Start is hidden, Mid and End (expanded) columns are displayed.\nTablet: Defaults to 0 - 33 - 67 percent widths of columns. Start is hidden, Mid and End (expanded) columns are displayed.\nPhone: Fixed -- 100 percent width of the End column, only the End column is displayed.\n\nUse to display the Mid column and expanded End column while the grip of the separator is not visible.", + "default": "ThreeColumnsStartHiddenEndExpanded", + "name": "ThreeColumnsStartHiddenEndExpanded", + "readonly": true }, { - "description": "Defines the state of the icon displayed in the `ui5-timeline-item`.", - "name": "state", - "default": "\"None\"", - "fieldName": "state", - "type": { - "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-timeline-item", - "customElement": true, - "_ui5privacy": "public", - "_ui5implements": [ + "kind": "field", + "static": true, + "privacy": "public", + "description": "Desktop: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed\nTablet: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed\nPhone: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed\n\nUse to display a detail page only, when the user should focus entirely on it.", + "default": "MidColumnFullScreen", + "name": "MidColumnFullScreen", + "readonly": true + }, { - "name": "ITimelineItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/Timeline.js" + "kind": "field", + "static": true, + "privacy": "public", + "description": "Desktop: Fixed -- -- 100 percent widths of columns, only the End column is displayed\nTablet: Fixed -- -- 100 percent widths of columns, only the End column is displayed\nPhone: Fixed -- -- 100 percent widths of columns, only the End column is displayed\n\nUse to display a detail-detail page only, when the user should focus entirely on it.", + "default": "EndColumnFullScreen", + "name": "EndColumnFullScreen", + "readonly": true } ] } @@ -10347,228 +11354,118 @@ "kind": "js", "name": "default", "declaration": { - "name": "TimelineItem", - "module": "dist/TimelineItem.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-timeline-item", - "declaration": { - "name": "TimelineItem", - "module": "dist/TimelineItem.js" + "name": "FCLLayout", + "module": "dist/types/FCLLayout.js" } } ] }, { "kind": "javascript-module", - "path": "dist/UploadCollection.js", + "path": "dist/types/IllustrationMessageDesign.js", "declarations": [ { - "kind": "class", - "description": "### Overview\nThis component allows you to represent files before uploading them to a server, with the help of `ui5-upload-collection-item`.\nIt also allows you to show already uploaded files.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UploadCollection.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/UploadCollectionItem.js\";` (for `ui5-upload-collection-item`)", - "name": "UploadCollection", - "slots": [ - { - "name": "default", - "description": "Defines the items of the `ui5-upload-collection`.\n\n**Note:** Use `ui5-upload-collection-item` for the intended design.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<UploadCollectionItem>", - "references": [ - { - "name": "UploadCollectionItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/UploadCollectionItem.js" - } - ] - }, - "_ui5privacy": "public" - }, - { - "name": "header", - "description": "Defines the `ui5-upload-collection` header.\n\n**Note:** If `header` slot is provided,\nthe labelling of the `UploadCollection` is a responsibility of the application developer.\n`accessibleName` should be used.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - } - ], + "kind": "enum", + "name": "IllustrationMessageDesign", + "description": "Different types of IllustrationMessageDesign.", + "_ui5privacy": "public", + "_ui5since": "2.0.0", "members": [ { "kind": "field", - "name": "selectionMode", - "type": { - "text": "UploadCollectionSelectionMode", - "references": [ - { - "name": "UploadCollectionSelectionMode", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/UploadCollectionSelectionMode.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the selection mode of the `ui5-upload-collection`.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Automatically decides the <code>Illustration</code> size (<code>Base</code>, <code>Dot</code>, <code>Spot</code>,\n<code>Dialog</code>, or <code>Scene</code>) depending on the <code>IllustratedMessage</code> container width.\n\n**Note:** `Auto` is the only option where the illustration size is changed according to\nthe available container width. If any other `IllustratedMessageSize` is chosen, it remains\nuntil changed by the app developer.", + "default": "Auto", + "name": "Auto", + "readonly": true }, { "kind": "field", - "name": "noDataDescription", - "type": { - "text": "string | undefined" - }, - "description": "Allows you to set your own text for the 'No data' description.", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Base `Illustration` size (XS breakpoint). Suitable for cards (two columns).\n\n**Note:** When `Base` is in use, no illustration is displayed.", + "default": "Base", + "name": "Base", + "readonly": true }, { "kind": "field", - "name": "noDataText", - "type": { - "text": "string | undefined" - }, - "description": "Allows you to set your own text for the 'No data' text.", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Dot <code>Illustration</code> size (XS breakpoint). Suitable for table rows.", + "default": "Dot", + "deprecated": "Since 2.10.0, use ExtraSmall instead", + "name": "Dot", + "readonly": true }, { "kind": "field", - "name": "hideDragOverlay", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "By default there will be drag and drop overlay shown over the `ui5-upload-collection` when files\nare dragged. If you don't intend to use drag and drop, set this property.\n\n**Note:** It is up to the application developer to add handler for `drop` event and handle it.\n`ui5-upload-collection` only displays an overlay.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Spot <code>Illustration</code> size (S breakpoint). Suitable for cards (four columns).", + "default": "Spot", + "deprecated": "Since 2.10.0, use Small instead", + "name": "Spot", + "readonly": true }, { "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "1.0.0-rc.16" - } - ], - "events": [ - { - "name": "item-delete", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<UploadCollectionItemDeleteEventDetail>", - "references": [ - { - "name": "UploadCollectionItemDeleteEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/UploadCollection.js" - } - ] - }, - "description": "Fired when an element is dropped inside the drag and drop overlay.\n\n**Note:** The `drop` event is fired only when elements are dropped within the drag and drop overlay and ignored for the other parts of the `ui5-upload-collection`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "DataTransfer" - }, - "name": "dataTransfer", - "_ui5privacy": "public", - "description": "The `drop` event operation data." - } - ] + "description": "Dialog `Illustration` size (M breakpoint). Suitable for dialogs.", + "default": "Dialog", + "deprecated": "Since 2.10.0, use Medium instead", + "name": "Dialog", + "readonly": true }, { - "name": "selection-change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<UploadCollectionSelectionChangeEventDetail>", - "references": [ - { - "name": "UploadCollectionSelectionChangeEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/UploadCollection.js" - } - ] - }, - "description": "Fired when selection is changed by user interaction\nin `Single` and `Multiple` modes.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "Array" - }, - "name": "selectedItems", - "_ui5privacy": "public", - "description": "An array of the selected items." - } - ] - } - ], - "attributes": [ - { - "description": "Defines the selection mode of the `ui5-upload-collection`.", - "name": "selection-mode", - "default": "\"None\"", - "fieldName": "selectionMode", - "type": { - "text": "\"None\" | \"Single\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Multiple\"" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Scene `Illustration` size (L breakpoint). Suitable for a `Page` or a table.", + "default": "Scene", + "deprecated": "Since 2.10.0, use Large instead", + "name": "Scene", + "readonly": true }, { - "description": "Allows you to set your own text for the 'No data' description.", - "name": "no-data-description", - "default": "undefined", - "fieldName": "noDataDescription", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "ExtraSmall <code>Illustration</code> size (XS breakpoint). Suitable for table rows.", + "default": "ExtraSmall", + "name": "ExtraSmall", + "readonly": true }, { - "description": "Allows you to set your own text for the 'No data' text.", - "name": "no-data-text", - "default": "undefined", - "fieldName": "noDataText", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Small <code>Illustration</code> size (S breakpoint). Suitable for cards (four columns).", + "default": "Small", + "name": "Small", + "readonly": true }, { - "description": "By default there will be drag and drop overlay shown over the `ui5-upload-collection` when files\nare dragged. If you don't intend to use drag and drop, set this property.\n\n**Note:** It is up to the application developer to add handler for `drop` event and handle it.\n`ui5-upload-collection` only displays an overlay.", - "name": "hide-drag-overlay", - "default": "false", - "fieldName": "hideDragOverlay", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Medium `Illustration` size (M breakpoint). Suitable for dialogs.", + "default": "Medium", + "name": "Medium", + "readonly": true }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Large `Illustration` size (L breakpoint). Suitable for a `Page` or a table.", + "default": "Large", + "name": "Large", + "readonly": true } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-upload-collection", - "customElement": true, - "_ui5since": "1.0.0-rc.7", - "_ui5privacy": "public" + ] } ], "exports": [ @@ -10576,1998 +11473,1124 @@ "kind": "js", "name": "default", "declaration": { - "name": "UploadCollection", - "module": "dist/UploadCollection.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-upload-collection", - "declaration": { - "name": "UploadCollection", - "module": "dist/UploadCollection.js" + "name": "IllustrationMessageDesign", + "module": "dist/types/IllustrationMessageDesign.js" } } ] }, { "kind": "javascript-module", - "path": "dist/UploadCollectionItem.js", + "path": "dist/types/IllustrationMessageType.js", "declarations": [ { - "kind": "class", - "description": "### Overview\nA component to be used within the `ui5-upload-collection`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/UploadCollectionItem.js\";`", - "name": "UploadCollectionItem", - "slots": [ - { - "description": "Hold the description of the `ui5-upload-collection-item`. Will be shown below the file name.", - "name": "default", - "_ui5privacy": "public", - "_ui5type": { - "text": "Array<Node>" - } - }, - { - "name": "thumbnail", - "description": "A thumbnail, which will be shown in the beginning of the `ui5-upload-collection-item`.\n\n**Note:** Use `ui5-icon` or `img` for the intended design.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - }, - { - "name": "deleteButton", - "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.", - "_ui5since": "1.9.0", - "_ui5type": { - "text": "Array<IButton>", - "references": [ - { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] - }, - "_ui5privacy": "public" - } - ], + "kind": "enum", + "name": "IllustrationMessageType", + "description": "Different illustration types of Illustrated Message.", + "_ui5privacy": "public", "members": [ { "kind": "field", - "name": "file", - "type": { - "text": "File | null" - }, - "default": "null", - "description": "Holds an instance of `File` associated with this item.", + "static": true, "privacy": "public", - "_ui5noAttribute": true + "description": "\"Achievement\" illustration type.", + "default": "Achievement", + "name": "Achievement", + "readonly": true }, { "kind": "field", - "name": "fileName", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "The name of the file.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"Adding Columns\" illustration type.", + "default": "AddingColumns", + "name": "AddingColumns", + "readonly": true }, { "kind": "field", - "name": "fileNameClickable", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "If set to `true` the file name will be clickable and it will fire `file-name-click` event upon click.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"Add People To Calendar\" illustration type.", + "default": "AddPeopleToCalendar", + "name": "AddPeopleToCalendar", + "readonly": true }, { "kind": "field", - "name": "disableDeleteButton", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Disables the delete button.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"Before Search\" illustration type.", + "default": "BeforeSearch", + "name": "BeforeSearch", + "readonly": true }, { "kind": "field", - "name": "hideDeleteButton", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Hides the delete button.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"Drag Files To Upload\" illustration type.", + "default": "DragFilesToUpload", + "name": "DragFilesToUpload", + "readonly": true }, { "kind": "field", - "name": "hideRetryButton", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Hides the retry button when `uploadState` property is `Error`.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"Filtering Columns\" illustration type.", + "default": "FilteringColumns", + "name": "FilteringColumns", + "readonly": true }, { "kind": "field", - "name": "hideTerminateButton", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Hides the terminate button when `uploadState` property is `Uploading`.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"Grouping Columns\" illustration type.", + "default": "GroupingColumns", + "name": "GroupingColumns", + "readonly": true }, { "kind": "field", - "name": "progress", - "type": { - "text": "number" - }, - "default": "0", - "description": "The upload progress in percentage.\n\n**Note:** Expected values are in the interval [0, 100].", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"New Mail\" illustration type.", + "default": "NewMail", + "name": "NewMail", + "readonly": true }, { "kind": "field", - "name": "uploadState", - "type": { - "text": "UploadState", - "references": [ - { - "name": "UploadState", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/UploadState.js" - } - ] - }, - "default": "\"Ready\"", - "description": "Upload state.\n\nDepending on this property, the item displays the following:\n\n- `Ready` - progress indicator is displayed.\n- `Uploading` - progress indicator and terminate button are displayed. When the terminate button is pressed, `terminate` event is fired.\n- `Error` - progress indicator and retry button are displayed. When the retry button is pressed, `retry` event is fired.\n- `Complete` - progress indicator is not displayed.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"No Activities\" illustration type.", + "default": "NoActivities", + "name": "NoActivities", + "readonly": true }, { "kind": "field", - "name": "type", - "type": { - "text": "ListItemType", - "references": [ - { - "name": "ListItemType", - "package": "@ui5/webcomponents", - "module": "dist/types/ListItemType.js" - } - ] - }, - "default": "\"Active\"", - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"No Columns Set\" illustration type.", + "default": "NoColumnsSet", + "name": "NoColumnsSet", + "readonly": true }, { "kind": "field", - "name": "accessibilityAttributes", - "type": { - "text": "ListItemAccessibilityAttributes", - "references": [ - { - "name": "ListItemAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" - } - ] - }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", + "static": true, "privacy": "public", - "_ui5since": "1.15.0" + "description": "\"No Data\" illustration type.", + "default": "NoData", + "name": "NoData", + "readonly": true }, { "kind": "field", - "name": "navigated", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "static": true, "privacy": "public", - "_ui5since": "1.10.0" + "description": "\"No Email\" illustration type.", + "default": "NoMail", + "name": "NoMail", + "readonly": true }, { "kind": "field", - "name": "tooltip", - "type": { - "text": "string | undefined" - }, - "description": "Defines the text of the tooltip that would be displayed for the list item.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "1.23.0" + "description": "\"No Email v1\" illustration type.", + "default": "NoMail_v1", + "deprecated": "Deprecated as of version 2.11.0, use NoMail instead.", + "name": "NoMail_v1", + "readonly": true }, { "kind": "field", - "name": "highlight", - "type": { - "text": "Highlight", - "references": [ - { - "name": "Highlight", - "package": "@ui5/webcomponents", - "module": "dist/types/Highlight.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "static": true, "privacy": "public", - "_ui5since": "1.24" + "description": "\"No Entries\" illustration type.", + "default": "NoEntries", + "name": "NoEntries", + "readonly": true }, { "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the selected state of the component.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } - } - ], - "events": [ + "description": "\"No Notifications\" illustration type.", + "default": "NoNotifications", + "name": "NoNotifications", + "readonly": true + }, { - "name": "file-name-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the file name is clicked.\n\n**Note:** This event is only available when `fileNameClickable` property is `true`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"No Saved Items\" illustration type.", + "default": "NoSavedItems", + "name": "NoSavedItems", + "readonly": true }, { - "name": "rename", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the `fileName` property gets changed.\n\n**Note:** An edit button is displayed on each item,\nwhen the `ui5-upload-collection-item` `type` property is set to `Detail`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"No Saved Items v1\" illustration type.", + "default": "NoSavedItems_v1", + "deprecated": "Deprecated as of version 2.11.0, use NoSavedItems instead.", + "name": "NoSavedItems_v1", + "readonly": true }, { - "name": "terminate", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the terminate button is pressed.\n\n**Note:** Terminate button is displayed when `uploadState` property is set to `Uploading`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"No Search Results\" illustration type.", + "default": "NoSearchResults", + "name": "NoSearchResults", + "readonly": true }, { - "name": "retry", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the retry button is pressed.\n\n**Note:** Retry button is displayed when `uploadState` property is set to `Error`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"No Tasks\" illustration type.", + "default": "NoTasks", + "name": "NoTasks", + "readonly": true }, { - "name": "detail-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the user clicks on the detail button when type is `Detail`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true - } - ], - "attributes": [ + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"No Tasks v1\" illustration type.", + "default": "NoTasks_v1", + "deprecated": "Deprecated as of version 2.11.0, use NoTasks instead.", + "name": "NoTasks_v1", + "readonly": true + }, { - "description": "Holds an instance of `File` associated with this item.", - "name": "file", - "default": "null", - "fieldName": "file", - "type": { - "text": "File | null" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"No Dimensions Set\" illustration type.", + "default": "NoDimensionsSet", + "deprecated": "Deprecated as of version 2.11.0, use NoChartData instead.", + "name": "NoDimensionsSet", + "readonly": true }, { - "description": "The name of the file.", - "name": "file-name", - "default": "\"\"", - "fieldName": "fileName", - "type": { - "text": "string" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Unable To Load\" illustration type.", + "default": "UnableToLoad", + "name": "UnableToLoad", + "readonly": true }, { - "description": "If set to `true` the file name will be clickable and it will fire `file-name-click` event upon click.", - "name": "file-name-clickable", - "default": "false", - "fieldName": "fileNameClickable", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Unable To Load Image\" illustration type.", + "default": "UnableToLoadImage", + "name": "UnableToLoadImage", + "readonly": true }, { - "description": "Disables the delete button.", - "name": "disable-delete-button", - "default": "false", - "fieldName": "disableDeleteButton", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Unable To Upload\" illustration type.", + "default": "UnableToUpload", + "name": "UnableToUpload", + "readonly": true }, { - "description": "Hides the delete button.", - "name": "hide-delete-button", - "default": "false", - "fieldName": "hideDeleteButton", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Upload To Cloud\" illustration type.", + "default": "UploadToCloud", + "name": "UploadToCloud", + "readonly": true }, { - "description": "Hides the retry button when `uploadState` property is `Error`.", - "name": "hide-retry-button", - "default": "false", - "fieldName": "hideRetryButton", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Add Column\" illustration type.", + "default": "AddColumn", + "deprecated": "Deprecated as of version 2.11.0, use AddingColumns instead.", + "name": "AddColumn", + "readonly": true }, { - "description": "Hides the terminate button when `uploadState` property is `Uploading`.", - "name": "hide-terminate-button", - "default": "false", - "fieldName": "hideTerminateButton", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Add People\" illustration type.", + "default": "AddPeople", + "deprecated": "Deprecated as of version 2.11.0, use AddPeopleToCalendar instead.", + "name": "AddPeople", + "readonly": true }, { - "description": "The upload progress in percentage.\n\n**Note:** Expected values are in the interval [0, 100].", - "name": "progress", - "default": "0", - "fieldName": "progress", - "type": { - "text": "number" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Add Dimensions\" illustration type.", + "default": "AddDimensions", + "name": "AddDimensions", + "readonly": true }, { - "description": "Upload state.\n\nDepending on this property, the item displays the following:\n\n- `Ready` - progress indicator is displayed.\n- `Uploading` - progress indicator and terminate button are displayed. When the terminate button is pressed, `terminate` event is fired.\n- `Error` - progress indicator and retry button are displayed. When the retry button is pressed, `retry` event is fired.\n- `Complete` - progress indicator is not displayed.", - "name": "upload-state", - "default": "\"Ready\"", - "fieldName": "uploadState", - "type": { - "text": "\"Complete\" | \"Error\" | \"Ready\" | \"Uploading\"" - } - } - ], - "superclass": { - "name": "ListItem", - "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" - }, - "tagName": "ui5-upload-collection-item", - "customElement": true, - "_ui5since": "1.0.0-rc.7", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "UploadCollectionItem", - "module": "dist/UploadCollectionItem.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-upload-collection-item", - "declaration": { - "name": "UploadCollectionItem", - "module": "dist/UploadCollectionItem.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/UserMenu.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-user-menu` is an SAP Fiori specific web component that is used in `ui5-shellbar`\nand allows the user to easily see information and settings for the current user and all other logged in accounts.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserMenu.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/UserMenuItem.js\";` (for `ui5-user-menu-item`)", - "name": "UserMenu", - "slots": [ + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Balloon Sky\" illustration type.", + "default": "BalloonSky", + "deprecated": "Deprecated as of version 2.11.0, use ReceiveAppreciation instead.", + "name": "BalloonSky", + "readonly": true + }, { - "name": "default", - "description": "Defines the menu items.", - "_ui5propertyName": "menuItems", - "_ui5type": { - "text": "Array<UserMenuItem>", - "references": [ - { - "name": "UserMenuItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/UserMenuItem.js" - } - ] - }, - "_ui5privacy": "public" + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Connection\" illustration type.", + "default": "Connection", + "deprecated": "Deprecated as of version 2.11.0, use UnableToLoad instead.", + "name": "Connection", + "readonly": true }, { - "name": "accounts", - "description": "Defines the user accounts.\n\n**Note:** If one item is used, it will be shown as the selected one. If more than one item is used, the first one will be shown as selected unless\nthere is an item with `selected` property set to `true`.", - "_ui5type": { - "text": "Array<UserMenuAccount>", - "references": [ - { - "name": "UserMenuAccount", - "package": "@ui5/webcomponents-fiori", - "module": "dist/UserMenuAccount.js" - } - ] - }, - "_ui5privacy": "public" - } - ], - "members": [ + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Empty Calendar\" illustration type.", + "default": "EmptyCalendar", + "deprecated": "Deprecated as of version 2.11.0, use NoActivities instead.", + "name": "EmptyCalendar", + "readonly": true + }, { "kind": "field", - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the User Menu is opened.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"Empty List\" illustration type.", + "default": "EmptyList", + "deprecated": "Deprecated as of version 2.11.0, use NoEntries instead.", + "name": "EmptyList", + "readonly": true }, { "kind": "field", - "name": "opener", - "type": { - "text": "HTMLElement | string | null | undefined" - }, - "description": "Defines the ID or DOM Reference of the element at which the user menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", + "static": true, "privacy": "public", - "default": "undefined" + "description": "\"Empty Planning Calendar\" illustration type.", + "default": "EmptyPlanningCalendar", + "name": "EmptyPlanningCalendar", + "readonly": true }, { "kind": "field", - "name": "showManageAccount", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the User Menu shows the Manage Account option.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"Error Screen\" illustration type.", + "default": "ErrorScreen", + "deprecated": "Deprecated as of version 2.11.0, use UnableToUpload instead.", + "name": "ErrorScreen", + "readonly": true }, { "kind": "field", - "name": "showOtherAccounts", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the User Menu shows the Other Accounts option.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"Filter Table\" illustration type.", + "default": "FilterTable", + "deprecated": "Deprecated as of version 2.11.0, use FilteringColumns instead.", + "name": "FilterTable", + "readonly": true }, { "kind": "field", - "name": "showEditAccounts", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the User Menu shows the Edit Accounts option.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"Group Table\" illustration type.", + "default": "GroupTable", + "deprecated": "Deprecated as of version 2.11.0, use GroupingColumns instead.", + "name": "GroupTable", + "readonly": true }, { "kind": "field", - "name": "showEditButton", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the User menu shows edit button.", + "static": true, "privacy": "public", - "_ui5since": "2.7.0" - } - ], - "events": [ + "description": "\"Key Task\" illustration type.", + "default": "KeyTask", + "name": "KeyTask", + "readonly": true + }, { - "name": "avatar-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the account avatar is selected.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"No Chart Data\" illustration type.", + "default": "NoChartData", + "name": "NoChartData", + "readonly": true }, { - "name": "manage-account-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the \"Manage Account\" button is selected.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"No Filter Results\" illustration type.", + "default": "NoFilterResults", + "name": "NoFilterResults", + "readonly": true }, { - "name": "edit-accounts-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the \"Edit Accounts\" button is selected.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Page Not Found\" illustration type.", + "default": "PageNotFound", + "name": "PageNotFound", + "readonly": true }, { - "name": "change-account", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<UserMenuOtherAccountClickEventDetail>", - "references": [ - { - "name": "UserMenuOtherAccountClickEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/UserMenu.js" - } - ] - }, - "description": "Fired when the account is switched to a different one.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, - "_ui5parameters": [ - { - "type": { - "text": "UserMenuAccount", - "references": [ - { - "name": "UserMenuAccount", - "package": "@ui5/webcomponents-fiori", - "module": "dist/UserMenuAccount.js" - } - ] - }, - "name": "prevSelectedAccount", - "_ui5privacy": "public", - "description": "The previously selected account." - }, - { - "type": { - "text": "UserMenuAccount", - "references": [ - { - "name": "UserMenuAccount", - "package": "@ui5/webcomponents-fiori", - "module": "dist/UserMenuAccount.js" - } - ] - }, - "name": "selectedAccount", - "_ui5privacy": "public", - "description": "The selected account." - } - ] + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Reload Screen\" illustration type.", + "default": "ReloadScreen", + "deprecated": "Deprecated as of version 2.11.0, use UnableToLoad instead.", + "name": "ReloadScreen", + "readonly": true }, { - "name": "item-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<UserMenuItemClickEventDetail>", - "references": [ - { - "name": "UserMenuItemClickEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/UserMenu.js" - } - ] - }, - "description": "Fired when a menu item is selected.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, - "_ui5parameters": [ - { - "type": { - "text": "UserMenuItem", - "references": [ - { - "name": "UserMenuItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/UserMenuItem.js" - } - ] - }, - "name": "item", - "_ui5privacy": "public", - "description": "The selected `user menu item`." - } - ] - }, - { - "name": "open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when a user menu is open.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.6.0" + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Resize Column\" illustration type.", + "default": "ResizeColumn", + "deprecated": "Deprecated as of version 2.11.0, use ResizingColumns instead.", + "name": "ResizeColumn", + "readonly": true }, { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when a user menu is close.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.6.0" + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Resizing Columns\" illustration type.", + "default": "ResizingColumns", + "name": "ResizingColumns", + "readonly": true }, { - "name": "sign-out-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the \"Sign Out\" button is selected.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, - "_ui5since": "2.6.0" - } - ], - "attributes": [ - { - "description": "Defines if the User Menu is opened.", - "name": "open", - "default": "false", - "fieldName": "open", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Receive Appreciation\" illustration type.", + "default": "ReceiveAppreciation", + "name": "ReceiveAppreciation", + "readonly": true }, { - "description": "Defines the ID or DOM Reference of the element at which the user menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", - "name": "opener", - "default": "undefined", - "fieldName": "opener", - "type": { - "text": "string | HTMLElement | null | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Search Earth\" illustration type.", + "default": "SearchEarth", + "deprecated": "Deprecated as of version 2.11.0, use BeforeSearch instead.", + "name": "SearchEarth", + "readonly": true }, { - "description": "Defines if the User Menu shows the Manage Account option.", - "name": "show-manage-account", - "default": "false", - "fieldName": "showManageAccount", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Search Folder\" illustration type.", + "default": "SearchFolder", + "deprecated": "Deprecated as of version 2.11.0, use NoSearchResults instead.", + "name": "SearchFolder", + "readonly": true }, { - "description": "Defines if the User Menu shows the Other Accounts option.", - "name": "show-other-accounts", - "default": "false", - "fieldName": "showOtherAccounts", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Sign Out\" illustration type.", + "default": "SignOut", + "name": "SignOut", + "readonly": true }, { - "description": "Defines if the User Menu shows the Edit Accounts option.", - "name": "show-edit-accounts", - "default": "false", - "fieldName": "showEditAccounts", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Simple Balloon\" illustration type.", + "default": "SimpleBalloon", + "deprecated": "Deprecated as of version 2.11.0, use ReceiveAppreciation instead.", + "name": "SimpleBalloon", + "readonly": true }, - { - "description": "Defines if the User menu shows edit button.", - "name": "show-edit-button", - "default": "false", - "fieldName": "showEditButton", - "type": { - "text": "boolean" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-user-menu", - "customElement": true, - "_ui5experimental": true, - "_ui5since": "2.5.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "UserMenu", - "module": "dist/UserMenu.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-user-menu", - "declaration": { - "name": "UserMenu", - "module": "dist/UserMenu.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/UserMenuAccount.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-user-menu-account` represents an account in the `ui5-user-menu`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserMenuAccount.js\";`", - "name": "UserMenuAccount", - "members": [ { "kind": "field", - "name": "avatarSrc", - "type": { - "text": "string | undefined" - }, - "description": "Defines the avatar image url of the user.", - "default": "\"\"", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"Simple Bell\" illustration type.", + "default": "SimpleBell", + "deprecated": "Deprecated as of version 2.11.0, use NoNotifications instead.", + "name": "SimpleBell", + "readonly": true }, { "kind": "field", - "name": "avatarInitials", - "type": { - "text": "string | undefined" - }, - "description": "Defines the avatar initials of the user.", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"Simple Calendar\" illustration type.", + "default": "SimpleCalendar", + "deprecated": "Deprecated as of version 2.11.0, use NoActivities instead.", + "name": "SimpleCalendar", + "readonly": true }, { "kind": "field", - "name": "titleText", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "Defines the title text of the user.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"Simple CheckMark\" illustration type.", + "default": "SimpleCheckMark", + "deprecated": "Deprecated as of version 2.11.0, use KeyTask instead.", + "name": "SimpleCheckMark", + "readonly": true }, { "kind": "field", - "name": "subtitleText", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "Defines additional text of the user.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"Simple Connection\" illustration type.", + "default": "SimpleConnection", + "deprecated": "Deprecated as of version 2.11.0, use UnableToLoad instead.", + "name": "SimpleConnection", + "readonly": true }, { "kind": "field", - "name": "description", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "Defines description of the user.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"Simple Empty Doc\" illustration type.", + "default": "SimpleEmptyDoc", + "deprecated": "Deprecated as of version 2.11.0, use NoData instead.", + "name": "SimpleEmptyDoc", + "readonly": true }, { "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the user is selected.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"Simple Empty List\" illustration type.", + "default": "SimpleEmptyList", + "deprecated": "Deprecated as of version 2.11.0, use NoEntries instead.", + "name": "SimpleEmptyList", + "readonly": true }, { "kind": "field", - "name": "loading", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Indicates whether a loading indicator should be shown.", + "static": true, "privacy": "public", - "_ui5since": "2.9.0" - } - ], - "attributes": [ - { - "description": "Defines the avatar image url of the user.", - "name": "avatar-src", - "default": "\"\"", - "fieldName": "avatarSrc", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the avatar initials of the user.", - "name": "avatar-initials", - "default": "undefined", - "fieldName": "avatarInitials", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the title text of the user.", - "name": "title-text", - "default": "\"\"", - "fieldName": "titleText", - "type": { - "text": "string" - } - }, - { - "description": "Defines additional text of the user.", - "name": "subtitle-text", - "default": "\"\"", - "fieldName": "subtitleText", - "type": { - "text": "string" - } + "description": "\"Simple Error\" illustration type.", + "default": "SimpleError", + "deprecated": "Deprecated as of version 2.11.0, use UnableToUpload instead.", + "name": "SimpleError", + "readonly": true }, { - "description": "Defines description of the user.", - "name": "description", - "default": "\"\"", - "fieldName": "description", - "type": { - "text": "string" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Simple Magnifier\" illustration type.", + "default": "SimpleMagnifier", + "deprecated": "Deprecated as of version 2.11.0, use BeforeSearch instead.", + "name": "SimpleMagnifier", + "readonly": true }, { - "description": "Defines if the user is selected.", - "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Simple Mail\" illustration type.", + "default": "SimpleMail", + "deprecated": "Deprecated as of version 2.11.0, use NoMail instead.", + "name": "SimpleMail", + "readonly": true }, { - "description": "Indicates whether a loading indicator should be shown.", - "name": "loading", - "default": "false", - "fieldName": "loading", - "type": { - "text": "boolean" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-user-menu-account", - "customElement": true, - "_ui5experimental": true, - "_ui5since": "2.5.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "UserMenuAccount", - "module": "dist/UserMenuAccount.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-user-menu-account", - "declaration": { - "name": "UserMenuAccount", - "module": "dist/UserMenuAccount.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/UserMenuItem.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\n`ui5-user-menu-item` is the item to use inside a `ui5-user-menu`.\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Usage\n\n`ui5-user-menu-item` represents a node in a `ui5-user-menu`. The user menu itself is rendered as a list,\nand each `ui5-menu-item` is represented by a menu item in that menu. Therefore, you should only use\n`ui5-user-menu-item` directly in your apps. The `ui5-menu` menu item is internal for the menu, and not intended for public use.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/UserMenuItem.js\";`", - "name": "UserMenuItem", - "slots": [ - { - "name": "default", - "description": "Defines the items of this component.\n\n**Note:** Use `ui5-user-menu-item` for the intended design.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<UserMenuItem>", - "references": [ - { - "name": "UserMenuItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/UserMenuItem.js" - } - ] - }, - "_ui5privacy": "public" + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Simple No Saved Items\" illustration type.", + "default": "SimpleNoSavedItems", + "deprecated": "Deprecated as of version 2.11.0, use NoSavedItems instead.", + "name": "SimpleNoSavedItems", + "readonly": true }, { - "name": "endContent", - "description": "Defines the components that should be displayed at the end of the menu item.\n\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\nnether `additionalText` nor components added to this slot would be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\nhave the correct accessibility behaviour, including their enabled or disabled states.\nThe menu does not manage these aspects when the menu item state changes.", - "_ui5since": "2.0.0", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"Simple Not Found Magnifier\" illustration type.", + "default": "SimpleNotFoundMagnifier", + "deprecated": "Deprecated as of version 2.11.0, use NoSearchResults instead.", + "name": "SimpleNotFoundMagnifier", + "readonly": true }, - { - "name": "deleteButton", - "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.", - "_ui5since": "1.9.0", - "_ui5type": { - "text": "Array<IButton>", - "references": [ - { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - } - ], - "superclass": { - "name": "MenuItem", - "package": "@ui5/webcomponents", - "module": "dist/MenuItem.js" - }, - "tagName": "ui5-user-menu-item", - "customElement": true, - "_ui5experimental": true, - "_ui5since": "2.5.0", - "_ui5privacy": "public", - "members": [ { "kind": "field", - "name": "text", - "type": { - "text": "string | undefined" - }, - "description": "Defines the text of the tree item.", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"Simple Reload\" illustration type.", + "default": "SimpleReload", + "deprecated": "Deprecated as of version 2.11.0, use UnableToLoad instead.", + "name": "SimpleReload", + "readonly": true }, { "kind": "field", - "name": "additionalText", - "type": { - "text": "string | undefined" - }, - "description": "Defines the `additionalText`, displayed in the end of the menu item.\n\n**Note:** The additional text will not be displayed if there are items added in `items` slot or there are\ncomponents added to `endContent` slot.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "1.8.0" + "description": "\"Simple Task\" illustration type.", + "default": "SimpleTask", + "deprecated": "Deprecated as of version 2.11.0, use NoTasks instead.", + "name": "SimpleTask", + "readonly": true }, { "kind": "field", - "name": "icon", - "type": { - "text": "string | undefined" - }, - "description": "Defines the icon to be displayed as graphical element within the component.\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).", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"Sleeping Bell\" illustration type.", + "default": "SleepingBell", + "deprecated": "Deprecated as of version 2.11.0, use NoNotifications instead.", + "name": "SleepingBell", + "readonly": true }, { "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } + "description": "\"Sort Column\" illustration type.", + "default": "SortColumn", + "deprecated": "Deprecated as of version 2.11.0, use SortingColumns instead.", + "name": "SortColumn", + "readonly": true }, { "kind": "field", - "name": "loading", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.", + "static": true, "privacy": "public", - "_ui5since": "1.13.0" + "description": "\"Sorting Columns\" illustration type.", + "default": "SortingColumns", + "name": "SortingColumns", + "readonly": true }, { "kind": "field", - "name": "loadingDelay", - "type": { - "text": "number" - }, - "default": "1000", - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.", + "static": true, "privacy": "public", - "_ui5since": "1.13.0" + "description": "\"Success Balloon\" illustration type.", + "default": "SuccessBalloon", + "deprecated": "Deprecated as of version 2.11.0, use ReceiveAppreciation instead.", + "name": "SuccessBalloon", + "readonly": true }, { "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "1.7.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "\"Success CheckMark\" illustration type.", + "default": "SuccessCheckMark", + "deprecated": "Deprecated as of version 2.11.0, use KeyTask instead.", + "name": "SuccessCheckMark", + "readonly": true }, { "kind": "field", - "name": "tooltip", - "type": { - "text": "string | undefined" - }, - "description": "Defines the text of the tooltip for the menu item.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "1.23.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "\"Success HighFive\" illustration type.", + "default": "SuccessHighFive", + "deprecated": "Deprecated as of version 2.11.0, use ReceiveAppreciation instead.", + "name": "SuccessHighFive", + "readonly": true }, { "kind": "field", - "name": "checked", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.", + "static": true, "privacy": "public", - "_ui5since": "2.12.0" + "description": "\"Success Screen\" illustration type.", + "default": "SuccessScreen", + "deprecated": "Deprecated as of version 2.11.0, use KeyTask instead.", + "name": "SuccessScreen", + "readonly": true }, { "kind": "field", - "name": "accessibilityAttributes", - "type": { - "text": "MenuItemAccessibilityAttributes", - "references": [ - { - "name": "MenuItemAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/MenuItem.js" - } - ] - }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item.\n\n- **role**: Defines the role of the menu item. If not set, menu item will have default role=\"menuitem\".", + "static": true, "privacy": "public", - "_ui5since": "2.1.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "\"Survey\" illustration type.", + "default": "Survey", + "name": "Survey", + "readonly": true }, { "kind": "field", - "name": "type", - "type": { - "text": "ListItemType", - "references": [ - { - "name": "ListItemType", - "package": "@ui5/webcomponents", - "module": "dist/types/ListItemType.js" - } - ] - }, - "default": "\"Active\"", - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "\"Tent\" illustration type.", + "default": "Tent", + "deprecated": "Deprecated as of version 2.11.0, use NoData instead.", + "name": "Tent", + "readonly": true }, { "kind": "field", - "name": "navigated", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "static": true, "privacy": "public", - "_ui5since": "1.10.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "\"Upload Collection\" illustration type.", + "default": "UploadCollection", + "deprecated": "Deprecated as of version 2.11.0, use DragFilesToUpload instead.", + "name": "UploadCollection", + "readonly": true }, { "kind": "field", - "name": "highlight", - "type": { - "text": "Highlight", - "references": [ - { - "name": "Highlight", - "package": "@ui5/webcomponents", - "module": "dist/types/Highlight.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "static": true, "privacy": "public", - "_ui5since": "1.24", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "\"User Has Signed Up\" illustration type.", + "default": "UserHasSignedUp", + "name": "UserHasSignedUp", + "readonly": true }, { "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the selected state of the component.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } - } - ], - "events": [ + "description": "\"TntAvatar\" illustration type.", + "default": "TntAvatar", + "name": "TntAvatar", + "readonly": true + }, { - "name": "before-open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<MenuBeforeOpenEventDetail>", - "references": [ - { - "name": "MenuBeforeOpenEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/MenuItem.js" - } - ] - }, - "description": "Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, - "_ui5since": "1.10.0", - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "The menu item that triggers opening of the sub-menu or undefined when fired upon root menu opening." - } - ] + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntCalculator\" illustration type.", + "default": "TntCalculator", + "name": "TntCalculator", + "readonly": true }, { - "name": "open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the menu is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntChartArea\" illustration type.", + "default": "TntChartArea", + "name": "TntChartArea", + "readonly": true }, { - "name": "before-close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<MenuBeforeCloseEventDetail>", - "references": [ - { - "name": "MenuBeforeCloseEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/MenuItem.js" - } - ] - }, - "description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, - "_ui5since": "1.10.0", - "_ui5parameters": [ - { - "type": { - "text": "boolean" - }, - "name": "escPressed", - "_ui5privacy": "public", - "description": "Indicates that `ESC` key has triggered the event." - } - ] + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntChartArea2\" illustration type.", + "default": "TntChartArea2", + "name": "TntChartArea2", + "readonly": true }, { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the menu is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "1.10.0" + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntChartBar\" illustration type.", + "default": "TntChartBar", + "name": "TntChartBar", + "readonly": true }, { - "name": "check", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when an item is checked or unchecked.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.12.0" + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntChartBPMNFlow\" illustration type.", + "default": "TntChartBPMNFlow", + "name": "TntChartBPMNFlow", + "readonly": true }, - { - "name": "detail-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the user clicks on the detail button when type is `Detail`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "UserMenuItem", - "module": "dist/UserMenuItem.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-user-menu-item", - "declaration": { - "name": "UserMenuItem", - "module": "dist/UserMenuItem.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/UserMenuItemGroup.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-user-menu-item-group` component represents a group of items designed for use inside a `ui5-user-menu`.\nItems belonging to the same group should be wrapped by a `ui5-user-menu-item-group`.\nEach group can have an `itemCheckMode` property, which defines the check mode for the items within the group.\nThe possible values for `itemCheckMode` are:\n- 'None' (default) - no items can be checked\n- 'Single' - Only one item can be checked at a time\n- 'Multiple' - Multiple items can be checked simultaneously\n\n**Note:** If the `itemCheckMode` property is set to 'Single', only one item can remain checked at any given time.\nIf multiple items are marked as checked, the last checked item will take precedence.\n\n### Usage\n\n`ui5-user-menu-item-group` represents a collection of `ui5-user-menu-item` components that can have the same check mode.\nThe items are addeed to the group's `items` slot.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/UserMenuItemGroup.js\";`", - "name": "UserMenuItemGroup", - "superclass": { - "name": "MenuItemGroup", - "package": "@ui5/webcomponents", - "module": "dist/MenuItemGroup.js" - }, - "tagName": "ui5-user-menu-item-group", - "customElement": true, - "_ui5experimental": true, - "_ui5since": "2.12.0", - "_ui5privacy": "public", - "members": [ { "kind": "field", - "name": "checkMode", - "type": { - "text": "MenuItemGroupCheckMode", - "references": [ - { - "name": "MenuItemGroupCheckMode", - "package": "@ui5/webcomponents", - "module": "dist/types/MenuItemGroupCheckMode.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the component's check mode.", - "privacy": "public" - } - ], - "slots": [ - { - "name": "default", - "description": "Defines the items of this component.\n**Note:** The slot can hold any combination of components of type `ui5-menu-item` or `ui5-menu-separator` or both.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<IMenuItem>", - "references": [ - { - "name": "IMenuItem", - "package": "@ui5/webcomponents", - "module": "dist/Menu.js" - } - ] - }, - "_ui5privacy": "public" - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "UserMenuItemGroup", - "module": "dist/UserMenuItemGroup.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-user-menu-item-group", - "declaration": { - "name": "UserMenuItemGroup", - "module": "dist/UserMenuItemGroup.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/UserSettingsDialog.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-user-settings-dialog` is an SAP Fiori-specific web component used in the `ui5-user-menu`.\nIt allows the user to easily view information and settings for an account.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsDialog.js\";`", - "name": "UserSettingsDialog", - "slots": [ - { - "name": "default", - "description": "Defines the user settings items.\n\n**Note:** If no setting item is set as `selected`, the first one will be selected.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<UserSettingsItem>", - "references": [ - { - "name": "UserSettingsItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/UserSettingsItem.js" - } - ] - }, - "_ui5privacy": "public" + "static": true, + "privacy": "public", + "description": "\"TntChartBullet\" illustration type.", + "default": "TntChartBullet", + "name": "TntChartBullet", + "readonly": true }, { - "name": "fixedItems", - "description": "Defines the fixed user settings items.", - "_ui5type": { - "text": "Array<UserSettingsItem>", - "references": [ - { - "name": "UserSettingsItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/UserSettingsItem.js" - } - ] - }, - "_ui5privacy": "public" - } - ], - "members": [ + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntChartDoughnut\" illustration type.", + "default": "TntChartDoughnut", + "name": "TntChartDoughnut", + "readonly": true + }, { "kind": "field", - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines, if the User Settings Dialog is opened.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"TntChartFlow\" illustration type.", + "default": "TntChartFlow", + "name": "TntChartFlow", + "readonly": true }, { "kind": "field", - "name": "headerText", - "type": { - "text": "string | undefined" - }, - "description": "Defines the headerText of the item.", + "static": true, "privacy": "public", - "default": "undefined" + "description": "\"TntChartGantt\" illustration type.", + "default": "TntChartGantt", + "name": "TntChartGantt", + "readonly": true }, { "kind": "field", - "name": "showSearchField", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the Search Field would be displayed.\n\n**Note:** By default the Search Field is not displayed.", - "privacy": "public" - } - ], - "events": [ - { - "name": "selection-change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<UserSettingsItemSelectEventDetail>", - "references": [ - { - "name": "UserSettingsItemSelectEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/UserSettingsDialog.js" - } - ] - }, - "description": "Fired when an item is selected.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, - "_ui5parameters": [ - { - "type": { - "text": "UserSettingsItem", - "references": [ - { - "name": "UserSettingsItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/UserSettingsItem.js" - } - ] - }, - "name": "item", - "_ui5privacy": "public", - "description": "The selected `user settings item`." - } - ] + "static": true, + "privacy": "public", + "description": "\"TntChartOrg\" illustration type.", + "default": "TntChartOrg", + "name": "TntChartOrg", + "readonly": true }, { - "name": "open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when a settings dialog is open.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntChartPie\" illustration type.", + "default": "TntChartPie", + "name": "TntChartPie", + "readonly": true }, { - "name": "before-close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired before the settings dialog is closed.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntCodePlaceholder\" illustration type.", + "default": "TntCodePlaceholder", + "name": "TntCodePlaceholder", + "readonly": true }, { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when a settings dialog is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false - } - ], - "attributes": [ - { - "description": "Defines, if the User Settings Dialog is opened.", - "name": "open", - "default": "false", - "fieldName": "open", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntCompany\" illustration type.", + "default": "TntCompany", + "name": "TntCompany", + "readonly": true }, { - "description": "Defines the headerText of the item.", - "name": "header-text", - "default": "undefined", - "fieldName": "headerText", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntCompass\" illustration type.", + "default": "TntCompass", + "name": "TntCompass", + "readonly": true }, { - "description": "Defines if the Search Field would be displayed.\n\n**Note:** By default the Search Field is not displayed.", - "name": "show-search-field", - "default": "false", - "fieldName": "showSearchField", - "type": { - "text": "boolean" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-user-settings-dialog", - "customElement": true, - "_ui5experimental": true, - "_ui5since": "2.8.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "UserSettingsDialog", - "module": "dist/UserSettingsDialog.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-user-settings-dialog", - "declaration": { - "name": "UserSettingsDialog", - "module": "dist/UserSettingsDialog.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/UserSettingsItem.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-user-settings-item` represents an item in the `ui5-user-settings-dialog`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsItem.js\";`\n\nYou can disable the <code>UserSettingsItem</code> by setting the <code>enabled</code> property to <code>false</code>,\nor use the <code>UserSettingsItem</code> in read-only mode by setting the <code>editable</code> property to false.\n\n<b>Note:</b> Disabled and read-only states shouldn't be used together.", - "name": "UserSettingsItem", - "slots": [ - { - "name": "default", - "description": "Defines the tab views of the user settings item.\n\nThe tab views are displayed by default if there is no selected page view.", - "_ui5propertyName": "tabs", - "_ui5type": { - "text": "Array<UserSettingsView>", - "references": [ - { - "name": "UserSettingsView", - "package": "@ui5/webcomponents-fiori", - "module": "dist/UserSettingsView.js" - } - ] - }, - "_ui5privacy": "public" + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntComponents\" illustration type.", + "default": "TntComponents", + "name": "TntComponents", + "readonly": true }, - { - "name": "pages", - "description": "Defines the page views of the user settings item.\n\nIf there are no tab views, the first page view will be shown unless there is selected one. If there is selected page\nview it will be shown no matter if there are tab views.", - "_ui5type": { - "text": "Array<UserSettingsView>", - "references": [ - { - "name": "UserSettingsView", - "package": "@ui5/webcomponents-fiori", - "module": "dist/UserSettingsView.js" - } - ] - }, - "_ui5privacy": "public" - } - ], - "members": [ { "kind": "field", - "name": "text", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "Defines the text of the user settings item.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"TntDialog\" illustration type.", + "default": "TntDialog", + "name": "TntDialog", + "readonly": true }, { "kind": "field", - "name": "tooltip", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided to represent the meaning or function when the component is collapsed and only the icon is visible.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"TntEmptyContentPane\" illustration type.", + "default": "TntEmptyContentPane", + "name": "TntEmptyContentPane", + "readonly": true }, { "kind": "field", - "name": "headerText", - "type": { - "text": "string | undefined" - }, - "description": "Defines the headerText of the item.", + "static": true, "privacy": "public", - "default": "\"\"" + "description": "\"TntExternalLink\" illustration type.", + "default": "TntExternalLink", + "name": "TntExternalLink", + "readonly": true }, { "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Shows item tab.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"TntFaceID\" illustration type.", + "default": "TntFaceID", + "name": "TntFaceID", + "readonly": true }, { "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"TntFingerprint\" illustration type.", + "default": "TntFingerprint", + "name": "TntFingerprint", + "readonly": true }, { "kind": "field", - "name": "loading", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Indicates whether a loading indicator should be shown.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"TntHandshake\" illustration type.", + "default": "TntHandshake", + "name": "TntHandshake", + "readonly": true }, { "kind": "field", - "name": "loadingReason", - "type": { - "text": "string | undefined" - }, - "description": "Indicates why the control is in loading state.", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"TntHelp\" illustration type.", + "default": "TntHelp", + "name": "TntHelp", + "readonly": true }, { "kind": "field", - "name": "icon", - "type": { - "text": "string" - }, - "default": "\"globe\"", - "description": "Defines the icon of the component.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"TntLock\" illustration type.", + "default": "TntLock", + "name": "TntLock", + "readonly": true }, { "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public" - } - ], - "events": [ + "static": true, + "privacy": "public", + "description": "\"TntMission\" illustration type.", + "default": "TntMission", + "name": "TntMission", + "readonly": true + }, { - "name": "selection-change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<UserSettingsItemViewSelectEventDetail>", - "references": [ - { - "name": "UserSettingsItemViewSelectEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/UserSettingsItem.js" - } - ] - }, - "description": "Fired when a selected view changed.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, - "_ui5parameters": [ - { - "type": { - "text": "UserSettingsView", - "references": [ - { - "name": "UserSettingsView", - "package": "@ui5/webcomponents-fiori", - "module": "dist/UserSettingsView.js" - } - ] - }, - "name": "view", - "_ui5privacy": "public", - "description": "The selected `view`." - } - ] - } - ], - "attributes": [ + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntMissionFailed\" illustration type.", + "default": "TntMissionFailed", + "name": "TntMissionFailed", + "readonly": true + }, { - "description": "Defines the text of the user settings item.", - "name": "text", - "default": "\"\"", - "fieldName": "text", - "type": { - "text": "string" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntNoApplications\" illustration type.", + "default": "TntNoApplications", + "name": "TntNoApplications", + "readonly": true }, { - "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided to represent the meaning or function when the component is collapsed and only the icon is visible.", - "name": "tooltip", - "default": "\"\"", - "fieldName": "tooltip", - "type": { - "text": "string" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntNoFlows\" illustration type.", + "default": "TntNoFlows", + "name": "TntNoFlows", + "readonly": true }, { - "description": "Defines the headerText of the item.", - "name": "header-text", - "default": "\"\"", - "fieldName": "headerText", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntNoUsers\" illustration type.", + "default": "TntNoUsers", + "name": "TntNoUsers", + "readonly": true }, { - "description": "Shows item tab.", - "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntRadar\" illustration type.", + "default": "TntRadar", + "name": "TntRadar", + "readonly": true }, { - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntRoadMap\" illustration type.", + "default": "TntRoadMap", + "name": "TntRoadMap", + "readonly": true }, { - "description": "Indicates whether a loading indicator should be shown.", - "name": "loading", - "default": "false", - "fieldName": "loading", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntSecrets\" illustration type.", + "default": "TntSecrets", + "name": "TntSecrets", + "readonly": true }, { - "description": "Indicates why the control is in loading state.", - "name": "loading-reason", - "default": "undefined", - "fieldName": "loadingReason", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntServices\" illustration type.", + "default": "TntServices", + "name": "TntServices", + "readonly": true }, { - "description": "Defines the icon of the component.", - "name": "icon", - "default": "\"globe\"", - "fieldName": "icon", - "type": { - "text": "string" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntSessionExpired\" illustration type.", + "default": "TntSessionExpired", + "name": "TntSessionExpired", + "readonly": true }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-user-settings-item", - "customElement": true, - "_ui5experimental": true, - "_ui5since": "2.8.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "UserSettingsItem", - "module": "dist/UserSettingsItem.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-user-settings-item", - "declaration": { - "name": "UserSettingsItem", - "module": "dist/UserSettingsItem.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/UserSettingsView.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-user-settings-view` represents a view displayed in the `ui5-user-settings-item`.", - "name": "UserSettingsView", - "slots": [ + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntSessionExpiring\" illustration type.", + "default": "TntSessionExpiring", + "name": "TntSessionExpiring", + "readonly": true + }, { - "name": "default", - "description": "Defines the content of the view.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - } - ], - "members": [ + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntSettings\" illustration type.", + "default": "TntSettings", + "name": "TntSettings", + "readonly": true + }, { "kind": "field", - "name": "text", - "type": { - "text": "string | undefined" - }, - "description": "Defines the title text of the user settings view.", + "static": true, "privacy": "public", - "default": "undefined" + "description": "\"TntSuccess\" illustration type.", + "default": "TntSuccess", + "name": "TntSuccess", + "readonly": true }, { "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the view is selected. There can be just one selected view at a time.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "\"TntSuccessfulAuth\" illustration type.", + "default": "TntSuccessfulAuth", + "name": "TntSuccessfulAuth", + "readonly": true }, { "kind": "field", - "name": "secondary", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.", - "privacy": "public" - } - ], - "attributes": [ + "static": true, + "privacy": "public", + "description": "\"TntSystems\" illustration type.", + "default": "TntSystems", + "name": "TntSystems", + "readonly": true + }, { - "description": "Defines the title text of the user settings view.", - "name": "text", - "default": "undefined", - "fieldName": "text", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntTeams\" illustration type.", + "default": "TntTeams", + "name": "TntTeams", + "readonly": true }, { - "description": "Defines whether the view is selected. There can be just one selected view at a time.", - "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntTools\" illustration type.", + "default": "TntTools", + "name": "TntTools", + "readonly": true }, { - "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.", - "name": "secondary", - "default": "false", - "fieldName": "secondary", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntTutorials\" illustration type.", + "default": "TntTutorials", + "name": "TntTutorials", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntUnableToLoad\" illustration type.", + "default": "TntUnableToLoad", + "name": "TntUnableToLoad", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntUnlock\" illustration type.", + "default": "TntUnlock", + "name": "TntUnlock", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntUnsuccessfulAuth\" illustration type.", + "default": "TntUnsuccessfulAuth", + "name": "TntUnsuccessfulAuth", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "\"TntUser2\" illustration type.", + "default": "TntUser2", + "name": "TntUser2", + "readonly": true } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-user-settings-view", - "customElement": true, - "_ui5experimental": true, - "_ui5since": "2.8.0", - "_ui5privacy": "public" + ] } ], "exports": [ @@ -12575,396 +12598,420 @@ "kind": "js", "name": "default", "declaration": { - "name": "UserSettingsView", - "module": "dist/UserSettingsView.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-user-settings-view", - "declaration": { - "name": "UserSettingsView", - "module": "dist/UserSettingsView.js" + "name": "IllustrationMessageType", + "module": "dist/types/IllustrationMessageType.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ViewSettingsDialog.js", + "path": "dist/types/MediaGalleryItemLayout.js", "declarations": [ { - "kind": "class", - "description": "### Overview\nThe `ui5-view-settings-dialog` component helps the user to sort data within a list or a table.\nIt consists of several lists like `Sort order` which is built-in and `Sort By` and `Filter By` lists,\nfor which you must be provide items(`ui5-sort-item` & `ui5-filter-item` respectively)\nThese options can be used to create sorters for a table.\n\nThe `ui5-view-settings-dialog` interrupts the current application processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe `ui5-view-settings-dialog` is modal, which means that user action is required before returning to the parent window is possible.\n\n### Structure\nA `ui5-view-settings-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-view-settings-dialog` is usually displayed at the center of the screen.\n\n### Responsive Behavior\n`ui5-view-settings-dialog` stretches on full screen on phones.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js\";`", - "name": "ViewSettingsDialog", - "slots": [ - { - "name": "sortItems", - "description": "Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`", - "_ui5type": { - "text": "Array<SortItem>", - "references": [ - { - "name": "SortItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/SortItem.js" - } - ] - }, - "_ui5privacy": "public" - }, - { - "name": "filterItems", - "description": "Defines the `filterItems` list.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`", - "_ui5type": { - "text": "Array<FilterItem>", - "references": [ - { - "name": "FilterItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/FilterItem.js" - } - ] - }, - "_ui5privacy": "public" - }, - { - "name": "groupItems", - "description": "Defines the list of items against which the user could group data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`", - "_ui5type": { - "text": "Array<GroupItem>", - "references": [ - { - "name": "GroupItem", - "package": "@ui5/webcomponents-fiori", - "module": "dist/GroupItem.js" - } - ] - }, - "_ui5privacy": "public" - } - ], + "kind": "enum", + "name": "MediaGalleryItemLayout", + "description": "Defines the layout of the content displayed in the `ui5-media-gallery-item`.", + "_ui5privacy": "public", "members": [ { "kind": "field", - "name": "sortDescending", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the initial sort order.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Recommended to use when the item contains an image.\n\nWhen a thumbnail is selected, it makes the corresponding enlarged content appear in a square display area.", + "default": "Square", + "name": "Square", + "readonly": true }, { "kind": "field", - "name": "groupDescending", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the initial group order.", + "static": true, "privacy": "public", - "_ui5since": "2.13.0" + "description": "Recommended to use when the item contains video content.\n\nWhen a thumbnail is selected, it makes the corresponding enlarged content appear in a wide display area\n(stretched to fill all of the available width) for optimal user experiance.", + "default": "Wide", + "name": "Wide", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "MediaGalleryItemLayout", + "module": "dist/types/MediaGalleryItemLayout.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/MediaGalleryLayout.js", + "declarations": [ + { + "kind": "enum", + "name": "MediaGalleryLayout", + "description": "Defines the layout type of the thumbnails list of the `ui5-media-gallery` component.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "The layout is determined automatically.", + "default": "Auto", + "name": "Auto", + "readonly": true }, { "kind": "field", - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Indicates if the dialog is open.", + "static": true, "privacy": "public", - "_ui5since": "2.0.0" + "description": "Displays the layout as a vertical split between the thumbnails list and the selected image.", + "default": "Vertical", + "name": "Vertical", + "readonly": true }, { - "kind": "method", - "name": "setConfirmedSettings", - "return": { - "type": { - "text": "void" - } - }, - "parameters": [ - { - "name": "settings", - "type": { - "text": "VSDSettings", - "references": [ - { - "name": "VSDSettings", - "package": "@ui5/webcomponents-fiori", - "module": "dist/ViewSettingsDialog.js" - } - ] - }, - "description": "predefined settings.", - "_ui5privacy": "public" - } - ], - "description": "Sets a JavaScript object, as settings to the `ui5-view-settings-dialog`.\nThis method can be used after the dialog is initially open, as the dialog needs\nto set its initial settings.\nThe `ui5-view-settings-dialog` throws an event called \"before-open\",\nwhich can be used as a trigger point.\nThe object should have the following format:", - "privacy": "public" + "kind": "field", + "static": true, + "privacy": "public", + "description": "Displays the layout as a horizontal split between the thumbnails list and the selected image.", + "default": "Horizontal", + "name": "Horizontal", + "readonly": true } - ], - "events": [ + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "MediaGalleryLayout", + "module": "dist/types/MediaGalleryLayout.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/MediaGalleryMenuHorizontalAlign.js", + "declarations": [ + { + "kind": "enum", + "name": "MediaGalleryMenuHorizontalAlign", + "description": "Defines the horizontal alignment of the thumbnails menu of the `ui5-media-gallery` component.", + "_ui5privacy": "public", + "members": [ { - "name": "confirm", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<ViewSettingsDialogConfirmEventDetail>", - "references": [ - { - "name": "ViewSettingsDialogConfirmEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/ViewSettingsDialog.js" - } - ] - }, - "description": "Fired when confirmation button is activated.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "String" - }, - "name": "sortOrder", - "_ui5privacy": "public", - "description": "The current sort order selected." - }, - { - "type": { - "text": "String" - }, - "name": "sortBy", - "_ui5privacy": "public", - "description": "The currently selected `ui5-sort-item` text attribute." - }, - { - "type": { - "text": "HTMLElement" - }, - "name": "sortByItem", - "_ui5privacy": "public", - "description": "The currently selected `ui5-sort-item`." - }, - { - "type": { - "text": "Boolean" - }, - "name": "sortDescending", - "_ui5privacy": "public", - "description": "The selected sort order (true = descending, false = ascending)." - }, - { - "type": { - "text": "String" - }, - "name": "groupOrder", - "_ui5privacy": "public", - "description": "The current group order selected." - }, - { - "type": { - "text": "String" - }, - "name": "groupBy", - "_ui5privacy": "public", - "description": "The currently selected `ui5-group-item` text attribute." - }, - { - "type": { - "text": "HTMLElement" - }, - "name": "groupByItem", - "_ui5privacy": "public", - "description": "The currently selected `ui5-group-item`." - }, - { - "type": { - "text": "Boolean" - }, - "name": "groupDescending", - "_ui5privacy": "public", - "description": "The selected group order (true = descending, false = ascending)." - }, - { - "type": { - "text": "Array" - }, - "name": "filters", - "_ui5privacy": "public", - "description": "The selected filters items." - } - ] + "kind": "field", + "static": true, + "privacy": "public", + "description": "Displays the menu on the left side of the target.", + "default": "Left", + "name": "Left", + "readonly": true }, { - "name": "cancel", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<ViewSettingsDialogCancelEventDetail>", - "references": [ - { - "name": "ViewSettingsDialogCancelEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/ViewSettingsDialog.js" - } - ] - }, - "description": "Fired when cancel button is activated.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "String" - }, - "name": "sortOrder", - "_ui5privacy": "public", - "description": "The current sort order selected." - }, - { - "type": { - "text": "String" - }, - "name": "sortBy", - "_ui5privacy": "public", - "description": "The currently selected `ui5-sort-item` text attribute." - }, - { - "type": { - "text": "HTMLElement" - }, - "name": "sortByItem", - "_ui5privacy": "public", - "description": "The currently selected `ui5-sort-item`." - }, - { - "type": { - "text": "Boolean" - }, - "name": "sortDescending", - "_ui5privacy": "public", - "description": "The selected sort order (true = descending, false = ascending)." - }, - { - "type": { - "text": "String" - }, - "name": "groupOrder", - "_ui5privacy": "public", - "description": "The current group order selected." - }, - { - "type": { - "text": "String" - }, - "name": "groupBy", - "_ui5privacy": "public", - "description": "The currently selected `ui5-group-item` text attribute." - }, - { - "type": { - "text": "HTMLElement" - }, - "name": "groupByItem", - "_ui5privacy": "public", - "description": "The currently selected `ui5-group-item`." - }, - { - "type": { - "text": "Boolean" - }, - "name": "groupDescending", - "_ui5privacy": "public", - "description": "The selected group order (true = descending, false = ascending)." - }, - { - "type": { - "text": "Array" - }, - "name": "filters", - "_ui5privacy": "public", - "description": "The selected filters items." - } - ] + "kind": "field", + "static": true, + "privacy": "public", + "description": "Displays the menu on the right side of the target.", + "default": "Right", + "name": "Right", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "MediaGalleryMenuHorizontalAlign", + "module": "dist/types/MediaGalleryMenuHorizontalAlign.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/MediaGalleryMenuVerticalAlign.js", + "declarations": [ + { + "kind": "enum", + "name": "MediaGalleryMenuVerticalAlign", + "description": "Types for the vertical alignment of the thumbnails menu of the `ui5-media-gallery` component.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Displays the menu at the top of the reference control.", + "default": "Top", + "name": "Top", + "readonly": true }, { - "name": "before-open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired before the component is opened.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false + "kind": "field", + "static": true, + "privacy": "public", + "description": "Displays the menu at the bottom of the reference control.", + "default": "Bottom", + "name": "Bottom", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "MediaGalleryMenuVerticalAlign", + "module": "dist/types/MediaGalleryMenuVerticalAlign.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/NavigationLayoutMode.js", + "declarations": [ + { + "kind": "enum", + "name": "NavigationLayoutMode", + "description": "Specifies the navigation layout mode.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Automatically calculates the navigation layout mode based on the screen device type.\n`Expanded` on desktop and `Collapsed` on tablet and phone.", + "default": "Auto", + "name": "Auto", + "readonly": true }, { - "name": "open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the dialog is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.0.0" + "kind": "field", + "static": true, + "privacy": "public", + "description": "Collapsed side navigation.", + "default": "Collapsed", + "name": "Collapsed", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Expanded side navigation.", + "default": "Expanded", + "name": "Expanded", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "NavigationLayoutMode", + "module": "dist/types/NavigationLayoutMode.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/NotificationListItemImportance.js", + "declarations": [ + { + "kind": "enum", + "name": "NotificationListItemImportance", + "description": "Different types of NotificationListItemImportance.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "default": "Standard", + "name": "Standard", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "default": "Important", + "name": "Important", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "NotificationListItemImportance", + "module": "dist/types/NotificationListItemImportance.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/PageBackgroundDesign.js", + "declarations": [ + { + "kind": "enum", + "name": "PageBackgroundDesign", + "description": "Available Page Background Design.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Page background color when a List is set as the Page content.", + "default": "List", + "name": "List", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "A solid background color dependent on the theme.", + "default": "Solid", + "name": "Solid", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Transparent background for the page.", + "default": "Transparent", + "name": "Transparent", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "PageBackgroundDesign", + "module": "dist/types/PageBackgroundDesign.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/SearchMode.js", + "declarations": [ + { + "kind": "enum", + "name": "SearchMode", + "description": "Search mode options.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Search field with default appearance.", + "default": "Default", + "name": "Default", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Search field with additional scope select.", + "default": "Scoped", + "name": "Scoped", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "SearchMode", + "module": "dist/types/SearchMode.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/SideContentFallDown.js", + "declarations": [ + { + "kind": "enum", + "name": "SideContentFallDown", + "description": "SideContent FallDown options.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Side content falls down on breakpoints below XL", + "default": "BelowXL", + "name": "BelowXL", + "readonly": true }, { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the dialog is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.0.0" - } - ], - "attributes": [ - { - "description": "Defines the initial sort order.", - "name": "sort-descending", - "default": "false", - "fieldName": "sortDescending", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Side content falls down on breakpoints below L", + "default": "BelowL", + "name": "BelowL", + "readonly": true }, { - "description": "Defines the initial group order.", - "name": "group-descending", - "default": "false", - "fieldName": "groupDescending", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Side content falls down on breakpoints below M", + "default": "BelowM", + "name": "BelowM", + "readonly": true }, { - "description": "Indicates if the dialog is open.", - "name": "open", - "default": "false", - "fieldName": "open", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Side content falls down on breakpoint M and the minimum width for the side content", + "default": "OnMinimumWidth", + "name": "OnMinimumWidth", + "readonly": true } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-view-settings-dialog", - "customElement": true, - "_ui5since": "1.0.0-rc.16", - "_ui5privacy": "public" + ] } ], "exports": [ @@ -12972,156 +13019,110 @@ "kind": "js", "name": "default", "declaration": { - "name": "ViewSettingsDialog", - "module": "dist/ViewSettingsDialog.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-view-settings-dialog", - "declaration": { - "name": "ViewSettingsDialog", - "module": "dist/ViewSettingsDialog.js" + "name": "SideContentFallDown", + "module": "dist/types/SideContentFallDown.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Wizard.js", + "path": "dist/types/SideContentPosition.js", "declarations": [ { - "kind": "class", - "description": "### Overview\n\nThe `ui5-wizard` helps users to complete a complex task by dividing it into sections and guiding them through it.\nIt has two main areas - a navigation area at the top showing the step sequence and a content area below it.\n\n### Structure\n#### Navigation area\nThe top most area of the `ui5-wizard` is occupied by the navigation area.\nIt shows the sequence of steps, where the recommended number of steps is between 3 and 8 steps.\n\n- Steps can have different visual representations - numbers or icons.\n- Steps might have labels for better readability - titleText and subTitleText.\n- Steps are defined by using the `ui5-wizard-step` as slotted element within the `ui5-wizard`.\n\n**Note:** If no selected step is defined, the first step will be auto selected.\n\n**Note:** If multiple selected steps are defined, the last step will be selected.\n\n### Keyboard Handling\nThe user can navigate using the following keyboard shortcuts:\n\n#### Wizard Progress Navigation\n\n\t- [Left] or [Down] - Focus moves backward to the WizardProgressNavAnchors.\n\t- [Up] or [Right] - Focus moves forward to the WizardProgressNavAnchor.\n\t- [Space] / [Enter] or [Return] - Selects an active step\n\t- [Home] or [PAGE UP] - Focus goes to the first step\n\t- [End] or [PAGE DOWN] - Focus goes to the last step\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n#### Content\nThe content occupies the main part of the page. It can hold any type of HTML elements.\nIt's defined by using the `ui5-wizard-step` as slotted element within the `ui5-wizard`.\n\n### Scrolling\nThe component handles user scrolling by selecting the closest step, based on the current scroll position\nand scrolls to particular place, when the user clicks on the step within the navigation area.\n\n**Important:** In order the component's scrolling behaviour to work, it has to be limited from the outside parent element in terms of height.\nThe component or its parent has to be given percentage or absolute height. Otherwise, the component will be scrolled out with the entire page.\n\n**For example:**\n\n```html\n<ui5-dialog style=\"height: 80%\">\n\t<ui5-wizard></ui5-wizard>\n</ui5-dialog>\n```\n\n#### Moving to next step\nThe `ui5-wizard-step` provides the necessary API and it's up to the user of the component to use it to move to the next step.\nYou have to set its `selected` property (and remove the `disabled` one if set) to `true`.\nThe `ui5-wizard` will automatically scroll to the content of the newly selected step.\n\nThe Fiori 3 guidelines recommends having a \"nextStep\" button in the content area.\nYou can place a button, or any other type of element to trigger step change, inside the `ui5-wizard-step`,\nand show/hide it when certain fields are filled or user defined criteria is met.\n\n### Usage\n#### When to use:\nWhen the user has to accomplish a long or unfamiliar task.\n\n#### When not to use:\nWhen the task has less than 3 steps.\n\n### Responsive Behavior\nOn small widths the step's titleText, subtitleText and separators in the navigation area shrink and from particular point the steps are grouped together and overlap.\nTapping on them will show a popover to select the step to navigate to. On mobile device, the grouped steps are presented within a dialog.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/Wizard.js\";` (includes <ui5-wizard-step/>)", - "name": "Wizard", - "cssParts": [ + "kind": "enum", + "name": "SideContentPosition", + "description": "Side Content position options.", + "_ui5privacy": "public", + "members": [ { - "description": "Used to style the progress navigator of the `ui5-wizard`.", - "name": "navigator" + "kind": "field", + "static": true, + "privacy": "public", + "description": "The side content is on the right side of the main container\nin left-to-right mode and on the left side in right-to-left mode.", + "default": "End", + "name": "End", + "readonly": true }, { - "description": "Used to style a `ui5-wizard-step` container.", - "name": "step-content" - } - ], - "slots": [ - { - "name": "default", - "description": "Defines the steps.\n\n**Note:** Use the available `ui5-wizard-step` component.", - "_ui5propertyName": "steps", - "_ui5type": { - "text": "Array<WizardStep>", - "references": [ - { - "name": "WizardStep", - "package": "@ui5/webcomponents-fiori", - "module": "dist/WizardStep.js" - } - ] - }, - "_ui5privacy": "public" + "kind": "field", + "static": true, + "privacy": "public", + "description": "The side content is on the left side of the main container\nin left-to-right mode and on the right side in right-to-left mode.", + "default": "Start", + "name": "Start", + "readonly": true } - ], + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "SideContentPosition", + "module": "dist/types/SideContentPosition.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/SideContentVisibility.js", + "declarations": [ + { + "kind": "enum", + "name": "SideContentVisibility", + "description": "Side Content visibility options.", + "_ui5privacy": "public", "members": [ { "kind": "field", - "name": "contentLayout", - "type": { - "text": "WizardContentLayout", - "references": [ - { - "name": "WizardContentLayout", - "package": "@ui5/webcomponents-fiori", - "module": "dist/types/WizardContentLayout.js" - } - ] - }, - "default": "\"MultipleSteps\"", - "description": "Defines how the content of the `ui5-wizard` would be visualized.", + "static": true, "privacy": "public", - "_ui5since": "1.14.0" - } - ], - "events": [ - { - "name": "step-change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<WizardStepChangeEventDetail>", - "references": [ - { - "name": "WizardStepChangeEventDetail", - "package": "@ui5/webcomponents-fiori", - "module": "dist/Wizard.js" - } - ] - }, - "description": "Fired when the step is changed by user interaction - either with scrolling,\nor by clicking on the steps within the component header.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "WizardStep", - "references": [ - { - "name": "WizardStep", - "package": "@ui5/webcomponents-fiori", - "module": "dist/WizardStep.js" - } - ] - }, - "name": "step", - "_ui5privacy": "public", - "description": "The new step." - }, - { - "type": { - "text": "WizardStep", - "references": [ - { - "name": "WizardStep", - "package": "@ui5/webcomponents-fiori", - "module": "dist/WizardStep.js" - } - ] - }, - "name": "previousStep", - "_ui5privacy": "public", - "description": "The previous step." - }, - { - "type": { - "text": "boolean" - }, - "name": "withScroll", - "_ui5privacy": "public", - "description": "true when the event occurs due to user scrolling." - } - ] - } - ], - "attributes": [ + "description": "Show the side content on any breakpoint", + "default": "AlwaysShow", + "name": "AlwaysShow", + "readonly": true + }, { - "description": "Defines how the content of the `ui5-wizard` would be visualized.", - "name": "content-layout", - "default": "\"MultipleSteps\"", - "fieldName": "contentLayout", - "type": { - "text": "\"MultipleSteps\" | \"SingleStep\"" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Show the side content on XL breakpoint", + "default": "ShowAboveL", + "name": "ShowAboveL", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Show the side content on L and XL breakpoints", + "default": "ShowAboveM", + "name": "ShowAboveM", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Show the side content on M, L and XL breakpoints", + "default": "ShowAboveS", + "name": "ShowAboveS", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Don't show the side content on any breakpoints", + "default": "NeverShow", + "name": "NeverShow", + "readonly": true } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-wizard", - "customElement": true, - "_ui5since": "1.0.0-rc.10", - "_ui5privacy": "public" + ] } ], "exports": [ @@ -13129,168 +13130,229 @@ "kind": "js", "name": "default", "declaration": { - "name": "Wizard", - "module": "dist/Wizard.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-wizard", - "declaration": { - "name": "Wizard", - "module": "dist/Wizard.js" + "name": "SideContentVisibility", + "module": "dist/types/SideContentVisibility.js" } } ] }, { "kind": "javascript-module", - "path": "dist/WizardStep.js", + "path": "dist/types/SideNavigationItemDesign.js", "declarations": [ { - "kind": "class", - "description": "### Overview\n\nA component that represents a logical step as part of the `ui5-wizard`.\nIt is meant to aggregate arbitrary HTML elements that form the content of a single step.\n\n### Structure\n\n- Each wizard step has arbitrary content.\n- Each wizard step might have texts - defined by the `titleText` and `subtitleText` properties.\n- Each wizard step might have an icon - defined by the `icon` property.\n- Each wizard step might display a number in place of the `icon`, when it's missing.\n\n### Usage\nThe `ui5-wizard-step` component should be used only as slot of the `ui5-wizard` component\nand should not be used standalone.", - "name": "WizardStep", - "slots": [ - { - "description": "Defines the step content.", - "name": "default", - "_ui5privacy": "public", - "_ui5type": { - "text": "Array<Node>" - } - } - ], + "kind": "enum", + "name": "SideNavigationItemDesign", + "description": "SideNavigationItem designs.", + "_ui5privacy": "public", + "_ui5since": "2.7.0", "members": [ { "kind": "field", - "name": "titleText", - "type": { - "text": "string | undefined" - }, - "description": "Defines the `titleText` of the step.\n\n**Note:** The text is displayed in the `ui5-wizard` navigation header.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "description": "Design for items that perform navigation, contain navigation child items, or both.", + "default": "Default", + "name": "Default", + "readonly": true }, { "kind": "field", - "name": "subtitleText", - "type": { - "text": "string | undefined" - }, - "description": "Defines the `subtitleText` of the step.\n\n**Note:** the text is displayed in the `ui5-wizard` navigation header.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "1.0.0-rc.15" - }, + "description": "Design for items that trigger an action, such as opening a dialog.\n\n**Note:** Items with this design must not have sub-items.\n\n**Note:** Items that open a dialog must set `hasPopup=\"dialog\"` via `accessibilityAttributes` property.", + "default": "Action", + "name": "Action", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "SideNavigationItemDesign", + "module": "dist/types/SideNavigationItemDesign.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/TimelineGrowingMode.js", + "declarations": [ + { + "kind": "enum", + "name": "TimelineGrowingMode", + "description": "Timeline growing modes.", + "_ui5privacy": "public", + "_ui5since": "2.7.0", + "members": [ { "kind": "field", - "name": "icon", - "type": { - "text": "string | undefined" - }, - "description": "Defines the `icon` of the step.\n\n**Note:** The icon is displayed in the `ui5-wizard` navigation header.\n\nThe SAP-icons font provides numerous options.\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Event `load-more` is fired\nupon pressing a \"More\" button at the end.", + "default": "Button", + "name": "Button", + "readonly": true }, { "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the step is `disabled`. When disabled the step is displayed,\nbut the user can't select the step by clicking or navigate to it with scrolling.\n\n**Note:** Step can't be `selected` and `disabled` at the same time.\nIn this case the `selected` property would take precedence.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Event `load-more` is fired upon scroll.", + "default": "Scroll", + "name": "Scroll", + "readonly": true }, { "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the step's `selected` state - the step that is currently active.\n\n**Note:** Step can't be `selected` and `disabled` at the same time.\nIn this case the `selected` property would take precedence.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "The growing feature is not enabled.", + "default": "None", + "name": "None", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TimelineGrowingMode", + "module": "dist/types/TimelineGrowingMode.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/TimelineLayout.js", + "declarations": [ + { + "kind": "enum", + "name": "TimelineLayout", + "description": "Available Timeline layout orientation", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Vertical layout\nDefault type", + "default": "Vertical", + "name": "Vertical", + "readonly": true }, { "kind": "field", - "name": "branching", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "When `branching` is enabled a dashed line would be displayed after the step,\nmeant to indicate that the next step is not yet known and depends on user choice in the current step.\n\n**Note:** It is recommended to use `branching` on the last known step\nand later add new steps when it becomes clear how the wizard flow should continue.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Horizontal layout", + "default": "Horizontal", + "name": "Horizontal", + "readonly": true } - ], - "attributes": [ + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TimelineLayout", + "module": "dist/types/TimelineLayout.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/UploadCollectionDnDMode.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "UploadCollectionDnDOverlayMode", + "module": "dist/types/UploadCollectionDnDMode.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/UploadCollectionSelectionMode.js", + "declarations": [ + { + "kind": "enum", + "name": "UploadCollectionSelectionMode", + "description": "Different UploadCollection selection modes.", + "_ui5privacy": "public", + "members": [ { - "description": "Defines the `titleText` of the step.\n\n**Note:** The text is displayed in the `ui5-wizard` navigation header.", - "name": "title-text", - "default": "undefined", - "fieldName": "titleText", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Default mode (no selection).", + "default": "None", + "name": "None", + "readonly": true }, { - "description": "Defines the `subtitleText` of the step.\n\n**Note:** the text is displayed in the `ui5-wizard` navigation header.", - "name": "subtitle-text", - "default": "undefined", - "fieldName": "subtitleText", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Right-positioned single selection mode (only one list item can be selected).", + "default": "Single", + "name": "Single", + "readonly": true }, { - "description": "Defines the `icon` of the step.\n\n**Note:** The icon is displayed in the `ui5-wizard` navigation header.\n\nThe SAP-icons font provides numerous options.\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Left-positioned single selection mode (only one list item can be selected).", + "default": "SingleStart", + "name": "SingleStart", + "readonly": true }, { - "description": "Defines if the step is `disabled`. When disabled the step is displayed,\nbut the user can't select the step by clicking or navigate to it with scrolling.\n\n**Note:** Step can't be `selected` and `disabled` at the same time.\nIn this case the `selected` property would take precedence.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Selected item is highlighted but no selection element is visible\n(only one list item can be selected).", + "default": "SingleEnd", + "name": "SingleEnd", + "readonly": true }, { - "description": "Defines the step's `selected` state - the step that is currently active.\n\n**Note:** Step can't be `selected` and `disabled` at the same time.\nIn this case the `selected` property would take precedence.", - "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Selected item is highlighted and selection is changed upon arrow navigation\n(only one list item can be selected - this is always the focused item).", + "default": "SingleAuto", + "name": "SingleAuto", + "readonly": true }, { - "description": "When `branching` is enabled a dashed line would be displayed after the step,\nmeant to indicate that the next step is not yet known and depends on user choice in the current step.\n\n**Note:** It is recommended to use `branching` on the last known step\nand later add new steps when it becomes clear how the wizard flow should continue.", - "name": "branching", - "default": "false", - "fieldName": "branching", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Multi selection mode (more than one list item can be selected).", + "default": "Multiple", + "name": "Multiple", + "readonly": true } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-wizard-step", - "customElement": true, - "_ui5since": "1.0.0-rc.10", - "_ui5privacy": "public", - "_ui5abstract": true + ] } ], "exports": [ @@ -13298,64 +13360,173 @@ "kind": "js", "name": "default", "declaration": { - "name": "WizardStep", - "module": "dist/WizardStep.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-wizard-step", - "declaration": { - "name": "WizardStep", - "module": "dist/WizardStep.js" + "name": "UploadCollectionSelectionMode", + "module": "dist/types/UploadCollectionSelectionMode.js" } } ] }, { "kind": "javascript-module", - "path": "dist/WizardTab.js", - "declarations": [], + "path": "dist/types/UploadState.js", + "declarations": [ + { + "kind": "enum", + "name": "UploadState", + "description": "Different types of UploadState.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "The file has been uploaded successfully.", + "default": "Complete", + "name": "Complete", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "The file cannot be uploaded due to an error.", + "default": "Error", + "name": "Error", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "The file is awaiting an explicit command to start being uploaded.", + "default": "Ready", + "name": "Ready", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "The file is currently being uploaded.", + "default": "Uploading", + "name": "Uploading", + "readonly": true + } + ] + } + ], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "WizardTab", - "module": "dist/WizardTab.js" + "name": "UploadState", + "module": "dist/types/UploadState.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ssr-zxing-shim.js", - "declarations": [], + "path": "dist/types/ViewSettingsDialogMode.js", + "declarations": [ + { + "kind": "enum", + "name": "ViewSettingsDialogMode", + "description": "Different types of ViewSettings.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "_ui5since": "1.0.0-rc.16", + "description": "Default type", + "default": "Sort", + "name": "Sort", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "_ui5since": "1.0.0-rc.16", + "description": "Filter type", + "default": "Filter", + "name": "Filter", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "_ui5since": "2.13.0", + "description": "Group type", + "default": "Group", + "name": "Group", + "readonly": true + } + ] + } + ], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "ZXing", - "module": "dist/ssr-zxing-shim.js" + "name": "ViewSettingsDialogMode", + "module": "dist/types/ViewSettingsDialogMode.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ssr-zxing.js", - "declarations": [], + "path": "dist/types/WizardContentLayout.js", + "declarations": [ + { + "kind": "enum", + "name": "WizardContentLayout", + "description": "Enumeration for different content layouts of the `ui5-wizard`.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Display the content of the `ui5-wizard` as multiple steps in a scroll section.", + "default": "MultipleSteps", + "name": "MultipleSteps", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Display the content of the `ui5-wizard` as single step.", + "default": "SingleStep", + "name": "SingleStep", + "readonly": true + } + ] + } + ], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "ZXing", - "module": "dist/ssr-zxing.js" + "name": "WizardContentLayout", + "module": "dist/types/WizardContentLayout.js" } } ] + }, + { + "kind": "javascript-module", + "path": "dist/upload-utils/UploadCollectionBodyDnD.js", + "declarations": [], + "exports": [] } ] } diff --git a/.storybook/custom-element-manifests/main.json b/.storybook/custom-element-manifests/main.json index 696a8b3a082..c830442856b 100644 --- a/.storybook/custom-element-manifests/main.json +++ b/.storybook/custom-element-manifests/main.json @@ -4,465 +4,303 @@ "modules": [ { "kind": "javascript-module", - "path": "dist/delegate/DragAndDropHandler.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "DragAndDropHandler", - "module": "dist/delegate/DragAndDropHandler.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/colorpicker-utils/ColorValue.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ColorValue", - "module": "dist/colorpicker-utils/ColorValue.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/dynamic-date-range-options/DateRange.js", - "declarations": [ - { - "kind": "class", - "description": "", - "name": "DateRange", - "_ui5since": "2.11.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "DateRange", - "module": "dist/dynamic-date-range-options/DateRange.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/dynamic-date-range-options/LastNextUtils.js", - "declarations": [], - "exports": [] - }, - { - "kind": "javascript-module", - "path": "dist/dynamic-date-range-options/LastOptions.js", - "declarations": [ - { - "kind": "class", - "description": "", - "name": "LastOptions", - "_ui5since": "2.14.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "LastOptions", - "module": "dist/dynamic-date-range-options/LastOptions.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/dynamic-date-range-options/NextOptions.js", - "declarations": [ - { - "kind": "class", - "description": "", - "name": "NextOptions", - "_ui5since": "2.14.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "NextOptions", - "module": "dist/dynamic-date-range-options/NextOptions.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/dynamic-date-range-options/SingleDate.js", - "declarations": [ - { - "kind": "class", - "description": "", - "name": "SingleDate", - "_ui5since": "2.11.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "SingleDate", - "module": "dist/dynamic-date-range-options/SingleDate.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/dynamic-date-range-options/Today.js", - "declarations": [ - { - "kind": "class", - "description": "", - "name": "Today", - "_ui5since": "2.11.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "Today", - "module": "dist/dynamic-date-range-options/Today.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/dynamic-date-range-options/Tomorrow.js", - "declarations": [ - { - "kind": "class", - "description": "", - "name": "Tomorrow", - "_ui5since": "2.11.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "Tomorrow", - "module": "dist/dynamic-date-range-options/Tomorrow.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/dynamic-date-range-options/Yesterday.js", - "declarations": [ - { - "kind": "class", - "description": "", - "name": "Yesterday", - "_ui5since": "2.11.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "Yesterday", - "module": "dist/dynamic-date-range-options/Yesterday.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/dynamic-date-range-options/toDates.js", - "declarations": [], - "exports": [] - }, - { - "kind": "javascript-module", - "path": "dist/features/ColorPaletteMoreColors.js", - "declarations": [], - "exports": [] - }, - { - "kind": "javascript-module", - "path": "dist/features/InputComposition.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "InputComposition", - "module": "dist/features/InputComposition.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/features/InputSuggestions.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "Suggestions", - "module": "dist/features/InputSuggestions.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/features/ListItemStandardExpandableText.js", - "declarations": [], - "exports": [] - }, - { - "kind": "javascript-module", - "path": "dist/popup-utils/OpenedPopupsRegistry.js", + "path": "dist/Assets-fetch.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", - "path": "dist/popup-utils/PopoverRegistry.js", + "path": "dist/Assets-node.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", - "path": "dist/timepicker-utils/TimeSlider.js", + "path": "dist/Assets.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", - "path": "dist/types/AvatarColorScheme.js", + "path": "dist/Avatar.js", "declarations": [ { - "kind": "enum", - "name": "AvatarColorScheme", - "description": "Different types of AvatarColorScheme.", - "_ui5privacy": "public", - "members": [ + "kind": "class", + "description": "### Overview\n\nAn image-like component that has different display options for representing images and icons\nin different shapes and sizes, depending on the use case.\n\nThe shape can be circular or square. There are several predefined sizes, as well as an option to\nset a custom size.\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true.\n- [Shift] - If [Space] is pressed, pressing [Shift] releases the component without triggering the click event.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Avatar.js\";`", + "name": "Avatar", + "slots": [ { - "kind": "field", - "static": true, - "privacy": "public", - "_ui5since": "2.9.0", - "default": "Auto", - "name": "Auto", - "readonly": true + "name": "default", + "description": "Receives the desired `<img>` tag\n\n**Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>\n`ui5-avatar:not(:defined) {`<br/>\n    `visibility: hidden;`<br/>\n`}`", + "_ui5since": "1.0.0-rc.15", + "_ui5propertyName": "image", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "default": "Accent1", - "name": "Accent1", - "readonly": true - }, + "name": "badge", + "description": "Defines the optional badge that will be used for visual affordance.\n\n**Note:** While the slot allows for custom badges, to achieve\nthe Fiori design, you can use the `ui5-tag` with `ui5-icon`\nin the corresponding `icon` slot, without text nodes.", + "_ui5since": "1.7.0", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "default": "Accent2", - "name": "Accent2", - "readonly": true + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "default": "Accent3", - "name": "Accent3", - "readonly": true + "name": "interactive", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the avatar is interactive (focusable and pressable).\n\n**Note:** This property won't have effect if the `disabled`\nproperty is set to `true`.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "default": "Accent4", - "name": "Accent4", - "readonly": true + "name": "icon", + "type": { + "text": "string | undefined" + }, + "description": "Defines the name of the UI5 Icon, that will be displayed.\n\n**Note:** If `image` slot is provided, the property will be ignored.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar icon=\"employee\">`\n\n**Note:** If no icon or an empty one is provided, by default the \"employee\" icon should be displayed.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "default": "Accent5", - "name": "Accent5", - "readonly": true + "name": "fallbackIcon", + "type": { + "text": "string" + }, + "default": "\"employee\"", + "description": "Defines the name of the fallback icon, which should be displayed in the following cases:\n\n\t- If the initials are not valid (more than 3 letters, unsupported languages or empty initials).\n\t- If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).\n\t- If the image src is wrong.\n\n**Note:** If not set, a default fallback icon \"employee\" is displayed.\n\n**Note:** You should import the desired icon first, then use its name as \"fallback-icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar fallback-icon=\"alert\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "default": "Accent6", - "name": "Accent6", - "readonly": true + "name": "initials", + "type": { + "text": "string | undefined" + }, + "description": "Defines the displayed initials.\n\nUp to three Latin letters can be displayed as initials.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "default": "Accent7", - "name": "Accent7", - "readonly": true + "name": "shape", + "type": { + "text": "AvatarShape", + "references": [ + { + "name": "AvatarShape", + "package": "@ui5/webcomponents", + "module": "dist/types/AvatarShape.js" + } + ] + }, + "default": "\"Circle\"", + "description": "Defines the shape of the component.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "default": "Accent8", - "name": "Accent8", - "readonly": true + "name": "size", + "type": { + "text": "AvatarSize", + "references": [ + { + "name": "AvatarSize", + "package": "@ui5/webcomponents", + "module": "dist/types/AvatarSize.js" + } + ] + }, + "default": "\"S\"", + "description": "Defines predefined size of the component.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "default": "Accent9", - "name": "Accent9", - "readonly": true + "name": "colorScheme", + "type": { + "text": "AvatarColorScheme", + "references": [ + { + "name": "AvatarColorScheme", + "package": "@ui5/webcomponents", + "module": "dist/types/AvatarColorScheme.js" + } + ] + }, + "default": "\"Auto\"", + "description": "Defines the background color of the desired image.\nIf `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.", + "privacy": "public" }, { "kind": "field", - "static": true, + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.", + "default": "undefined", "privacy": "public", - "default": "Accent10", - "name": "Accent10", - "readonly": true + "_ui5since": "1.0.0-rc.7" }, { "kind": "field", - "static": true, + "name": "accessibilityAttributes", + "type": { + "text": "AvatarAccessibilityAttributes", + "references": [ + { + "name": "AvatarAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/Avatar.js" + } + ] + }, + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.", "privacy": "public", - "default": "Placeholder", - "name": "Placeholder", - "readonly": true - }, + "_ui5since": "2.0.0" + } + ], + "events": [ { - "kind": "field", - "static": true, - "privacy": "public", - "default": "Transparent", - "name": "Transparent", - "readonly": true + "name": "click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired on mouseup, space and enter if avatar is interactive\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.11.0" } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "AvatarColorScheme", - "module": "dist/types/AvatarColorScheme.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/AvatarGroupType.js", - "declarations": [ - { - "kind": "enum", - "name": "AvatarGroupType", - "description": "Different types of AvatarGroupType.", - "_ui5privacy": "public", - "members": [ + ], + "attributes": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The avatars are displayed as partially overlapped on top of each other and the entire group has one click or tap area.", - "default": "Group", - "name": "Group", - "readonly": true + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The avatars are displayed side-by-side and each avatar has its own click or tap area.", - "default": "Individual", - "name": "Individual", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "AvatarGroupType", - "module": "dist/types/AvatarGroupType.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/AvatarShape.js", - "declarations": [ - { - "kind": "enum", - "name": "AvatarShape", - "description": "Different types of AvatarShape.", - "_ui5privacy": "public", - "members": [ + "description": "Defines if the avatar is interactive (focusable and pressable).\n\n**Note:** This property won't have effect if the `disabled`\nproperty is set to `true`.", + "name": "interactive", + "default": "false", + "fieldName": "interactive", + "type": { + "text": "boolean" + } + }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Circular shape.", - "default": "Circle", - "name": "Circle", - "readonly": true + "description": "Defines the name of the UI5 Icon, that will be displayed.\n\n**Note:** If `image` slot is provided, the property will be ignored.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar icon=\"employee\">`\n\n**Note:** If no icon or an empty one is provided, by default the \"employee\" icon should be displayed.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Square shape.", - "default": "Square", - "name": "Square", - "readonly": true + "description": "Defines the name of the fallback icon, which should be displayed in the following cases:\n\n\t- If the initials are not valid (more than 3 letters, unsupported languages or empty initials).\n\t- If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).\n\t- If the image src is wrong.\n\n**Note:** If not set, a default fallback icon \"employee\" is displayed.\n\n**Note:** You should import the desired icon first, then use its name as \"fallback-icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar fallback-icon=\"alert\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "fallback-icon", + "default": "\"employee\"", + "fieldName": "fallbackIcon", + "type": { + "text": "string" + } + }, + { + "description": "Defines the displayed initials.\n\nUp to three Latin letters can be displayed as initials.", + "name": "initials", + "default": "undefined", + "fieldName": "initials", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the shape of the component.", + "name": "shape", + "default": "\"Circle\"", + "fieldName": "shape", + "type": { + "text": "\"Circle\" | \"Square\"" + } + }, + { + "description": "Defines predefined size of the component.", + "name": "size", + "default": "\"S\"", + "fieldName": "size", + "type": { + "text": "\"XS\" | \"S\" | \"M\" | \"L\" | \"XL\"" + } + }, + { + "description": "Defines the background color of the desired image.\nIf `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.", + "name": "color-scheme", + "default": "\"Auto\"", + "fieldName": "colorScheme", + "type": { + "text": "\"Auto\" | \"Accent1\" | \"Accent2\" | \"Accent3\" | \"Accent4\" | \"Accent5\" | \"Accent6\" | \"Accent7\" | \"Accent8\" | \"Accent9\" | \"Accent10\" | \"Placeholder\" | \"Transparent\"" + } + }, + { + "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "AvatarAccessibilityAttributes" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-avatar", + "customElement": true, + "_ui5since": "1.0.0-rc.6", + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IAvatarGroupItem", + "package": "@ui5/webcomponents", + "module": "dist/AvatarGroup.js" } ] } @@ -472,162 +310,279 @@ "kind": "js", "name": "default", "declaration": { - "name": "AvatarShape", - "module": "dist/types/AvatarShape.js" + "name": "Avatar", + "module": "dist/Avatar.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-avatar", + "declaration": { + "name": "Avatar", + "module": "dist/Avatar.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/AvatarSize.js", + "path": "dist/AvatarGroup.js", "declarations": [ { - "kind": "enum", - "name": "AvatarSize", - "description": "Different types of AvatarSize.", - "_ui5privacy": "public", - "members": [ + "kind": "interface", + "name": "IAvatarGroupItem", + "description": "Interface for components that represent an avatar and may be slotted in numerous higher-order components such as `ui5-avatar-group`", + "_ui5privacy": "public" + }, + { + "kind": "class", + "description": "### Overview\n\nDisplays a group of avatars arranged horizontally. It is useful to visually\nshowcase a group of related avatars, such as, project team members or employees.\n\nThe component allows you to display the avatars in different sizes,\ndepending on your use case.\n\nThe `AvatarGroup` component has two group types:\n\n- `Group` type: The avatars are displayed as partially overlapped on\ntop of each other and the entire group has one click/tap area.\n- `Individual` type: The avatars are displayed side-by-side and each\navatar has its own click/tap area.\n\n### Usage\n\nUse the `AvatarGroup` if:\n\n- You want to display a group of avatars.\n- You want to display several avatars which have something in common.\n\nDo not use the `AvatarGroup` if:\n\n- You want to display a single avatar.\n- You want to display a gallery for simple images.\n- You want to use it for other visual content than avatars.\n\n### Responsive Behavior\n\nWhen the available space is less than the width required to display all avatars,\nan overflow visualization appears as a button placed at the end with the same shape\nand size as the avatars. The visualization displays the number of avatars that have overflowed\nand are not currently visible.\n\n### Keyboard Handling\nThe component provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n`type` Individual:\n\n- [Tab] - Move focus to the overflow button\n- [Left] - Navigate one avatar to the left\n- [Right] - Navigate one avatar to the right\n- [Home] - Navigate to the first avatar\n- [End] - Navigate to the last avatar\n- [Space] / [Enter] or [Return] - Trigger `ui5-click` event\n\n`type` Group:\n\n- [Tab] - Move focus to the next interactive element after the component\n- [Space] / [Enter] or [Return] - Trigger `ui5-click` event", + "name": "AvatarGroup", + "slots": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "component size - 2rem\nfont size - 1rem", - "default": "XS", - "name": "XS", - "readonly": true + "name": "default", + "description": "Defines the items of the component. Use the `ui5-avatar` component as an item.\n\n**Note:** The UX guidelines recommends using avatars with \"Circle\" shape.\n\nMoreover, if you use avatars with \"Square\" shape, there will be visual inconsistency\nas the built-in overflow action has \"Circle\" shape.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<IAvatarGroupItem>", + "references": [ + { + "name": "IAvatarGroupItem", + "package": "@ui5/webcomponents", + "module": "dist/AvatarGroup.js" + } + ] + }, + "_ui5privacy": "public" }, + { + "name": "overflowButton", + "description": "Defines the overflow button of the component.\n\n**Note:** We recommend using the `ui5-button` component.\n\n**Note:** If this slot is not used, the component will display the built-in overflow button.", + "_ui5since": "1.0.0-rc.13", + "_ui5type": { + "text": "Array<IButton>", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "component size - 3rem\nfont size - 1.5rem", - "default": "S", - "name": "S", - "readonly": true + "name": "type", + "type": { + "text": "AvatarGroupType", + "references": [ + { + "name": "AvatarGroupType", + "package": "@ui5/webcomponents", + "module": "dist/types/AvatarGroupType.js" + } + ] + }, + "default": "\"Group\"", + "description": "Defines the mode of the `AvatarGroup`.", + "privacy": "public" }, { "kind": "field", - "static": true, + "name": "accessibilityAttributes", + "type": { + "text": "AvatarGroupAccessibilityAttributes", + "references": [ + { + "name": "AvatarGroupAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/AvatarGroup.js" + } + ] + }, + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.", "privacy": "public", - "description": "component size - 4rem\nfont size - 2rem", - "default": "M", - "name": "M", - "readonly": true + "_ui5since": "2.0.0" }, { "kind": "field", - "static": true, + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible name of the AvatarGroup.\nWhen provided, this will override the default aria-label text.", + "default": "undefined", "privacy": "public", - "description": "component size - 5rem\nfont size - 2.5rem", - "default": "L", - "name": "L", - "readonly": true + "_ui5since": "2.12.0" }, { "kind": "field", - "static": true, + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(s) of the elements that describe the AvatarGroup.\nWhen provided, this will be used as aria-labelledby instead of aria-label.", + "default": "undefined", "privacy": "public", - "description": "component size - 7rem\nfont size - 3rem", - "default": "XL", - "name": "XL", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "AvatarSize", - "module": "dist/types/AvatarSize.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/BackgroundDesign.js", - "declarations": [ - { - "kind": "enum", - "name": "BackgroundDesign", - "description": "Defines background designs.", - "_ui5privacy": "public", - "members": [ + "_ui5since": "2.12.0" + }, { "kind": "field", - "static": true, + "name": "hiddenItems", + "type": { + "text": "Array<IAvatarGroupItem>", + "references": [ + { + "name": "IAvatarGroupItem", + "package": "@ui5/webcomponents", + "module": "dist/AvatarGroup.js" + } + ] + }, + "description": "Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.", + "default": "[]", "privacy": "public", - "description": "A solid background color dependent on the theme.", - "default": "Solid", - "name": "Solid", "readonly": true }, { "kind": "field", - "static": true, + "name": "colorScheme", + "type": { + "text": "Array<AvatarColorScheme>", + "references": [ + { + "name": "AvatarColorScheme", + "package": "@ui5/webcomponents", + "module": "dist/types/AvatarColorScheme.js" + } + ] + }, + "description": "Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component.", + "default": "[]", "privacy": "public", - "description": "Transparent background.", - "default": "Transparent", - "name": "Transparent", "readonly": true + } + ], + "events": [ + { + "name": "click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<AvatarGroupClickEventDetail>", + "references": [ + { + "name": "AvatarGroupClickEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/AvatarGroup.js" + } + ] + }, + "description": "Fired when the component is activated either with a\nclick/tap or by using the Enter or Space key.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "1.0.0-rc.11", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "targetRef", + "_ui5privacy": "public", + "description": "The DOM ref of the clicked item." + }, + { + "type": { + "text": "boolean" + }, + "name": "overflowButtonClicked", + "_ui5privacy": "public", + "description": "indicates if the overflow button is clicked" + } + ] }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "A translucent background depending on the opacity value of the theme.", - "default": "Translucent", - "name": "Translucent", - "readonly": true + "name": "overflow", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the count of visible `ui5-avatar` elements in the\ncomponent has changed", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "1.0.0-rc.13" } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "BackgroundDesign", - "module": "dist/types/BackgroundDesign.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/BarAccessibleRole.js", - "declarations": [ - { - "kind": "enum", - "name": "BarAccessibleRole", - "description": "ListItem accessible roles.", - "_ui5privacy": "public", - "_ui5since": "2.9.0", - "members": [ + ], + "attributes": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the ARIA role \"toolbar\".", - "default": "Toolbar", - "name": "Toolbar", - "readonly": true + "description": "Defines the mode of the `AvatarGroup`.", + "name": "type", + "default": "\"Group\"", + "fieldName": "type", + "type": { + "text": "\"Group\" | \"Individual\"" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the ARIA role \"none\".", - "default": "None", - "name": "None", - "readonly": true + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "AvatarGroupAccessibilityAttributes" + } + }, + { + "description": "Defines the accessible name of the AvatarGroup.\nWhen provided, this will override the default aria-label text.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(s) of the elements that describe the AvatarGroup.\nWhen provided, this will be used as aria-labelledby instead of aria-label.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.", + "name": "hidden-items", + "default": "[]", + "fieldName": "hiddenItems", + "type": { + "text": "any" + } + }, + { + "description": "Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component.", + "name": "color-scheme", + "default": "[]", + "fieldName": "colorScheme", + "type": { + "text": "any" + } } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-avatar-group", + "customElement": true, + "_ui5since": "1.0.0-rc.11", + "_ui5privacy": "public" } ], "exports": [ @@ -635,101 +590,139 @@ "kind": "js", "name": "default", "declaration": { - "name": "BarAccessibleRole", - "module": "dist/types/BarAccessibleRole.js" + "name": "AvatarGroup", + "module": "dist/AvatarGroup.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-avatar-group", + "declaration": { + "name": "AvatarGroup", + "module": "dist/AvatarGroup.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/BarDesign.js", + "path": "dist/Bar.js", "declarations": [ { - "kind": "enum", - "name": "BarDesign", - "description": "Different types of Bar design", - "_ui5privacy": "public", - "members": [ + "kind": "class", + "description": "### Overview\nThe Bar is a container which is primarily used to hold titles, buttons and input elements\nand its design and functionality is the basis for page headers and footers.\nThe component consists of three areas to hold its content - startContent slot, default slot and endContent slot.\nIt has the capability to center content, such as a title, while having other components on the left and right side.\n\n### Usage\nWith the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n\n**Note:** Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n\n### Responsive Behavior\nThe default slot will be centered in the available space between the startContent and the endContent areas,\ntherefore it might not always be centered in the entire bar.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Bar.js\";`", + "name": "Bar", + "cssParts": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Default type", - "default": "Header", - "name": "Header", - "readonly": true + "description": "Used to style the wrapper of the content of the component", + "name": "bar" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Subheader type", - "default": "Subheader", - "name": "Subheader", - "readonly": true + "description": "Used to style the wrapper of the start content of the component", + "name": "startContent" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Footer type", - "default": "Footer", - "name": "Footer", - "readonly": true + "description": "Used to style the wrapper of the middle content of the component", + "name": "midContent" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Floating Footer type - there is visible border on all sides", - "default": "FloatingFooter", - "name": "FloatingFooter", - "readonly": true + "description": "Used to style the wrapper of the end content of the component", + "name": "endContent" } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "BarDesign", - "module": "dist/types/BarDesign.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/BorderDesign.js", - "declarations": [ - { - "kind": "enum", - "name": "BorderDesign", - "description": "Defines border designs.", - "_ui5privacy": "public", + ], + "slots": [ + { + "name": "startContent", + "description": "Defines the content at the start of the bar.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + }, + { + "name": "default", + "description": "Defines the content in the middle of the bar.", + "_ui5propertyName": "middleContent", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + }, + { + "name": "endContent", + "description": "Defines the content at the end of the bar.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "A solid border color dependent on the theme.", - "default": "Solid", - "name": "Solid", - "readonly": true + "name": "design", + "type": { + "text": "BarDesign", + "references": [ + { + "name": "BarDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/BarDesign.js" + } + ] + }, + "default": "\"Header\"", + "description": "Defines the component's design.", + "privacy": "public" }, { "kind": "field", - "static": true, + "name": "accessibleRole", + "type": { + "text": "BarAccessibleRole", + "references": [ + { + "name": "BarAccessibleRole", + "package": "@ui5/webcomponents", + "module": "dist/types/BarAccessibleRole.js" + } + ] + }, + "default": "\"Toolbar\"", + "description": "Specifies the ARIA role applied to the component for accessibility purposes.\n\n**Note:**\n\n- Set accessibleRole to \"toolbar\" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.\n\n- If there is only one or no active element, it is recommended to avoid using the \"toolbar\" role, as it implies a grouping of multiple interactive controls.", "privacy": "public", - "description": "Specifies no border.", - "default": "None", - "name": "None", - "readonly": true + "_ui5since": "2.10.0" } - ] + ], + "attributes": [ + { + "description": "Defines the component's design.", + "name": "design", + "default": "\"Header\"", + "fieldName": "design", + "type": { + "text": "\"Header\" | \"Subheader\" | \"Footer\" | \"FloatingFooter\"" + } + }, + { + "description": "Specifies the ARIA role applied to the component for accessibility purposes.\n\n**Note:**\n\n- Set accessibleRole to \"toolbar\" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.\n\n- If there is only one or no active element, it is recommended to avoid using the \"toolbar\" role, as it implies a grouping of multiple interactive controls.", + "name": "accessible-role", + "default": "\"Toolbar\"", + "fieldName": "accessibleRole", + "type": { + "text": "\"Toolbar\" | \"None\"" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-bar", + "customElement": true, + "_ui5since": "1.0.0-rc.11", + "_ui5privacy": "public" } ], "exports": [ @@ -737,41 +730,173 @@ "kind": "js", "name": "default", "declaration": { - "name": "BorderDesign", - "module": "dist/types/BorderDesign.js" + "name": "Bar", + "module": "dist/Bar.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-bar", + "declaration": { + "name": "Bar", + "module": "dist/Bar.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/BreadcrumbsDesign.js", + "path": "dist/Breadcrumbs.js", "declarations": [ { - "kind": "enum", - "name": "BreadcrumbsDesign", - "description": "Different Breadcrumbs designs.", - "_ui5privacy": "public", + "kind": "class", + "description": "### Overview\nEnables users to navigate between items by providing a list of links to previous steps in the user's navigation path.\nIt helps the user to be aware of their location within the application and allows faster navigation.\n\nThe last three steps can be accessed as links directly, while the remaining links prior to them are available\nin a drop-down menu.\n\nYou can choose the type of separator to be used from a number of predefined options.\n\n### Keyboard Handling\nThe `ui5-breadcrumbs` provides advanced keyboard handling.\n\n- [F4], [Alt] + [Up], [Alt] + [Down], [Space], or [Enter] - If the dropdown arrow is focused - opens/closes the drop-down.\n- [Space],[Enter] - Activates the focused item and triggers the `item-click` event.\n- [Escape] - Closes the drop-down.\n- [Left] - If the drop-down is closed - navigates one item to the left.\n- [Right] - If the drop-down is closed - navigates one item to the right.\n- [Up] - If the drop-down is open - moves focus to the next item.\n- [Down] - If the drop-down is open - moves focus to the previous item.\n- [Home] - Navigates to the first item.\n- [End] - Navigates to the last item.", + "name": "Breadcrumbs", + "slots": [ + { + "name": "default", + "description": "Defines the component items.\n\n**Note:** Use the `ui5-breadcrumbs-item` component to define the desired items.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<BreadcrumbsItem>", + "references": [ + { + "name": "BreadcrumbsItem", + "package": "@ui5/webcomponents", + "module": "dist/BreadcrumbsItem.js" + } + ] + }, + "_ui5privacy": "public" + } + ], "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "Shows the current page as the last item in the trail.\nThe last item contains only plain text and is not a link.", - "default": "Standard", - "name": "Standard", - "readonly": true + "name": "design", + "type": { + "text": "BreadcrumbsDesign", + "references": [ + { + "name": "BreadcrumbsDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/BreadcrumbsDesign.js" + } + ] + }, + "default": "\"Standard\"", + "description": "Defines the visual appearance of the last BreadcrumbsItem.\n\nThe Breadcrumbs supports two visual appearances for the last BreadcrumbsItem:\n- \"Standard\" - displaying the last item as \"current page\" (bold and without separator)\n- \"NoCurrentPage\" - displaying the last item as a regular BreadcrumbsItem, followed by separator", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "All items are displayed as links.", - "default": "NoCurrentPage", - "name": "NoCurrentPage", - "readonly": true + "name": "separators", + "type": { + "text": "BreadcrumbsSeparator", + "references": [ + { + "name": "BreadcrumbsSeparator", + "package": "@ui5/webcomponents", + "module": "dist/types/BreadcrumbsSeparator.js" + } + ] + }, + "default": "\"Slash\"", + "description": "Determines the visual style of the separator between the breadcrumb items.", + "privacy": "public" } - ] + ], + "events": [ + { + "name": "item-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<BreadcrumbsItemClickEventDetail>", + "references": [ + { + "name": "BreadcrumbsItemClickEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Breadcrumbs.js" + } + ] + }, + "description": "Fires when a `BreadcrumbsItem` is clicked.\n\n**Note:** You can prevent browser location change by calling `event.preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "The clicked item." + }, + { + "type": { + "text": "Boolean" + }, + "name": "altKey", + "_ui5privacy": "public", + "description": "Returns whether the \"ALT\" key was pressed when the event was triggered." + }, + { + "type": { + "text": "Boolean" + }, + "name": "ctrlKey", + "_ui5privacy": "public", + "description": "Returns whether the \"CTRL\" key was pressed when the event was triggered." + }, + { + "type": { + "text": "Boolean" + }, + "name": "metaKey", + "_ui5privacy": "public", + "description": "Returns whether the \"META\" key was pressed when the event was triggered." + }, + { + "type": { + "text": "Boolean" + }, + "name": "shiftKey", + "_ui5privacy": "public", + "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered." + } + ] + } + ], + "attributes": [ + { + "description": "Defines the visual appearance of the last BreadcrumbsItem.\n\nThe Breadcrumbs supports two visual appearances for the last BreadcrumbsItem:\n- \"Standard\" - displaying the last item as \"current page\" (bold and without separator)\n- \"NoCurrentPage\" - displaying the last item as a regular BreadcrumbsItem, followed by separator", + "name": "design", + "default": "\"Standard\"", + "fieldName": "design", + "type": { + "text": "\"Standard\" | \"NoCurrentPage\"" + } + }, + { + "description": "Determines the visual style of the separator between the breadcrumb items.", + "name": "separators", + "default": "\"Slash\"", + "fieldName": "separators", + "type": { + "text": "\"Slash\" | \"BackSlash\" | \"DoubleBackSlash\" | \"DoubleGreaterThan\" | \"DoubleSlash\" | \"GreaterThan\"" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-breadcrumbs", + "customElement": true, + "_ui5since": "1.0.0-rc.15", + "_ui5privacy": "public" } ], "exports": [ @@ -779,77 +904,110 @@ "kind": "js", "name": "default", "declaration": { - "name": "BreadcrumbsDesign", - "module": "dist/types/BreadcrumbsDesign.js" + "name": "Breadcrumbs", + "module": "dist/Breadcrumbs.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-breadcrumbs", + "declaration": { + "name": "Breadcrumbs", + "module": "dist/Breadcrumbs.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/BreadcrumbsSeparator.js", + "path": "dist/BreadcrumbsItem.js", "declarations": [ { - "kind": "enum", - "name": "BreadcrumbsSeparator", - "description": "Different Breadcrumbs separators.", - "_ui5privacy": "public", + "kind": "class", + "description": "### Overview\n\nThe `ui5-breadcrumbs-item` component defines the content of an item in `ui5-breadcrumbs`.", + "name": "BreadcrumbsItem", + "slots": [ + { + "name": "default", + "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", + "_ui5propertyName": "text", + "_ui5type": { + "text": "Array<Node>" + }, + "_ui5privacy": "public" + } + ], "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "The separator appears as \"/\".", - "default": "Slash", - "name": "Slash", - "readonly": true + "name": "href", + "type": { + "text": "string | undefined" + }, + "description": "Defines the link href.\n\n**Note:** Standard hyperlink behavior is supported.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "The separator appears as \"\\\".", - "default": "BackSlash", - "name": "BackSlash", - "readonly": true + "name": "target", + "type": { + "text": "string | undefined" + }, + "description": "Defines the link target.\n\nAvailable options are:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**Note:** This property must only be used when the `href` property is set.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "The separator appears as \"\\\\\".", - "default": "DoubleBackSlash", - "name": "DoubleBackSlash", - "readonly": true - }, + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the item.", + "default": "undefined", + "privacy": "public" + } + ], + "attributes": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The separator appears as \">>\".", - "default": "DoubleGreaterThan", - "name": "DoubleGreaterThan", - "readonly": true + "description": "Defines the link href.\n\n**Note:** Standard hyperlink behavior is supported.", + "name": "href", + "default": "undefined", + "fieldName": "href", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The separator appears as \"//\" .", - "default": "DoubleSlash", - "name": "DoubleSlash", - "readonly": true + "description": "Defines the link target.\n\nAvailable options are:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**Note:** This property must only be used when the `href` property is set.", + "name": "target", + "default": "undefined", + "fieldName": "target", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The separator appears as \">\".", - "default": "GreaterThan", - "name": "GreaterThan", - "readonly": true + "description": "Defines the accessible ARIA name of the item.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-breadcrumbs-item", + "customElement": true, + "_ui5since": "1.0.0-rc.15", + "_ui5privacy": "public", + "_ui5abstract": true } ], "exports": [ @@ -857,135 +1015,161 @@ "kind": "js", "name": "default", "declaration": { - "name": "BreadcrumbsSeparator", - "module": "dist/types/BreadcrumbsSeparator.js" + "name": "BreadcrumbsItem", + "module": "dist/BreadcrumbsItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-breadcrumbs-item", + "declaration": { + "name": "BreadcrumbsItem", + "module": "dist/BreadcrumbsItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/BusyIndicatorSize.js", + "path": "dist/BusyIndicator.js", "declarations": [ { - "kind": "enum", - "name": "BusyIndicatorSize", - "description": "Different BusyIndicator sizes.", - "_ui5privacy": "public", + "kind": "class", + "description": "### Overview\n\nThe `ui5-busy-indicator` signals that some operation is going on and that the\nuser must wait. It does not block the current UI screen so other operations could be triggered in parallel.\nIt displays 3 dots and each dot expands and shrinks at a different rate, resulting in a cascading flow of animation.\n\n### Usage\nFor the `ui5-busy-indicator` you can define the size, the text and whether it is shown or hidden.\nIn order to hide it, use the \"active\" property.\n\nIn order to show busy state over an HTML element, simply nest the HTML element in a `ui5-busy-indicator` instance.\n\n**Note:** Since `ui5-busy-indicator` has `display: inline-block;` by default and no width of its own,\nwhenever you need to wrap a block-level element, you should set `display: block` to the busy indicator as well.\n\n#### When to use:\n\n- The user needs to be able to cancel the operation.\n- Only part of the application or a particular component is affected.\n\n#### When not to use:\n\n- The operation takes less than one second.\n- You need to block the screen and prevent the user from starting another activity.\n- Do not show multiple busy indicators at once.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/BusyIndicator.js\";`", + "name": "BusyIndicator", + "slots": [ + { + "description": "Determines the content over which the component will appear.", + "name": "default", + "_ui5privacy": "public", + "_ui5type": { + "text": "Array<Node>" + } + } + ], "members": [ { "kind": "field", - "static": true, + "name": "text", + "type": { + "text": "string | undefined" + }, + "description": "Defines text to be displayed below the component. It can be used to inform the user of the current operation.", "privacy": "public", - "description": "small size", - "default": "S", - "name": "S", - "readonly": true + "default": "undefined", + "_ui5since": "1.0.0-rc.7" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "medium size", - "default": "M", - "name": "M", - "readonly": true + "name": "size", + "type": { + "text": "BusyIndicatorSize", + "references": [ + { + "name": "BusyIndicatorSize", + "package": "@ui5/webcomponents", + "module": "dist/types/BusyIndicatorSize.js" + } + ] + }, + "default": "\"M\"", + "description": "Defines the size of the component.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "large size", - "default": "L", - "name": "L", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "BusyIndicatorSize", - "module": "dist/types/BusyIndicatorSize.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/BusyIndicatorTextPlacement.js", - "declarations": [ - { - "kind": "enum", - "name": "BusyIndicatorTextPlacement", - "description": "Different BusyIndicator text placements.", - "_ui5privacy": "public", - "members": [ + "name": "active", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the busy indicator is visible on the screen. By default it is not.", + "privacy": "public" + }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "The text will be displayed on top of the busy indicator.", - "default": "Top", - "name": "Top", - "readonly": true + "name": "delay", + "type": { + "text": "number" + }, + "default": "1000", + "description": "Defines the delay in milliseconds, after which the busy indicator will be visible on the screen.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "The text will be displayed at the bottom of the busy indicator.", - "default": "Bottom", - "name": "Bottom", - "readonly": true + "name": "textPlacement", + "type": { + "text": "BusyIndicatorTextPlacement", + "references": [ + { + "name": "BusyIndicatorTextPlacement", + "package": "@ui5/webcomponents", + "module": "dist/types/BusyIndicatorTextPlacement.js" + } + ] + }, + "default": "\"Bottom\"", + "description": "Defines the placement of the text.", + "privacy": "public" } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "BusyIndicatorTextPlacement", - "module": "dist/types/BusyIndicatorTextPlacement.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/ButtonAccessibleRole.js", - "declarations": [ - { - "kind": "enum", - "name": "ButtonAccessibleRole", - "description": "Button accessible roles.", - "_ui5privacy": "public", - "_ui5since": "1.23", - "members": [ + ], + "attributes": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents Default (button) ARIA role.", - "default": "Button", - "name": "Button", - "readonly": true + "description": "Defines text to be displayed below the component. It can be used to inform the user of the current operation.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the ARIA role \"link\".", - "default": "Link", - "name": "Link", - "readonly": true + "description": "Defines the size of the component.", + "name": "size", + "default": "\"M\"", + "fieldName": "size", + "type": { + "text": "\"S\" | \"M\" | \"L\"" + } + }, + { + "description": "Defines if the busy indicator is visible on the screen. By default it is not.", + "name": "active", + "default": "false", + "fieldName": "active", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the delay in milliseconds, after which the busy indicator will be visible on the screen.", + "name": "delay", + "default": "1000", + "fieldName": "delay", + "type": { + "text": "number" + } + }, + { + "description": "Defines the placement of the text.", + "name": "text-placement", + "default": "\"Bottom\"", + "fieldName": "textPlacement", + "type": { + "text": "\"Top\" | \"Bottom\"" + } } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-busy-indicator", + "customElement": true, + "_ui5since": "0.12.0", + "_ui5privacy": "public" } ], "exports": [ @@ -993,410 +1177,460 @@ "kind": "js", "name": "default", "declaration": { - "name": "ButtonAccessibleRole", - "module": "dist/types/ButtonAccessibleRole.js" + "name": "BusyIndicator", + "module": "dist/BusyIndicator.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-busy-indicator", + "declaration": { + "name": "BusyIndicator", + "module": "dist/BusyIndicator.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/ButtonBadgeDesign.js", + "path": "dist/Button.js", "declarations": [ { - "kind": "enum", - "name": "ButtonBadgeDesign", - "description": "Determines where the badge will be placed and how it will be styled.", - "_ui5privacy": "public", - "_ui5since": "2.7.0", - "members": [ + "kind": "interface", + "name": "IButton", + "description": "Interface for components that may be used as a button inside numerous higher-order components", + "_ui5privacy": "public" + }, + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-button` component represents a simple push button.\nIt enables users to trigger actions by clicking or tapping the `ui5-button`, or by pressing\ncertain keyboard keys, such as Enter.\n\n### Usage\n\nFor the `ui5-button` UI, you can define text, icon, or both. You can also specify\nwhether the text or the icon is displayed first.\n\nYou can choose from a set of predefined types that offer different\nstyling to correspond to the triggered action.\n\nYou can set the `ui5-button` as enabled or disabled. An enabled\n`ui5-button` can be pressed by clicking or tapping it. The button changes\nits style to provide visual feedback to the user that it is pressed or hovered over with\nthe mouse cursor. A disabled `ui5-button` appears inactive and cannot be pressed.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Button.js\";`", + "name": "Button", + "cssParts": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The badge is displayed after the text, inside the button.", - "default": "InlineText", - "name": "InlineText", - "readonly": true + "description": "Used to style the native button element", + "name": "button" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The badge is displayed at the top-end corner of the button.\n\n**Note:** According to design guidance, the OverlayText design mode is best used in cozy density to avoid potential visual issues in compact.", - "default": "OverlayText", - "name": "OverlayText", - "readonly": true + "description": "Used to style the icon in the native button element", + "name": "icon" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The badge is displayed as an attention dot.", - "default": "AttentionDot", - "name": "AttentionDot", - "readonly": true + "description": "Used to style the end icon in the native button element", + "name": "endIcon" } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ButtonBadgeDesign", - "module": "dist/types/ButtonBadgeDesign.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/ButtonDesign.js", - "declarations": [ - { - "kind": "enum", - "name": "ButtonDesign", - "description": "Different Button designs.", - "_ui5privacy": "public", + ], + "slots": [ + { + "name": "default", + "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", + "_ui5propertyName": "text", + "_ui5type": { + "text": "Array<Node>" + }, + "_ui5privacy": "public" + }, + { + "name": "badge", + "description": "Adds a badge to the button.", + "_ui5since": "2.7.0", + "_ui5type": { + "text": "Array<ButtonBadge>", + "references": [ + { + "name": "ButtonBadge", + "package": "@ui5/webcomponents", + "module": "dist/ButtonBadge.js" + } + ] + }, + "_ui5privacy": "public" + } + ], "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "default type (no special styling)", - "default": "Default", - "name": "Default", - "readonly": true + "name": "design", + "type": { + "text": "ButtonDesign", + "references": [ + { + "name": "ButtonDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/ButtonDesign.js" + } + ] + }, + "default": "\"Default\"", + "description": "Defines the component design.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "accept type (green button)", - "default": "Positive", - "name": "Positive", - "readonly": true + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "reject style (red button)", - "default": "Negative", - "name": "Negative", - "readonly": true + "name": "icon", + "type": { + "text": "string | undefined" + }, + "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "transparent type", - "default": "Transparent", - "name": "Transparent", - "readonly": true + "name": "endIcon", + "type": { + "text": "string | undefined" + }, + "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "static": true, + "name": "submits", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** This property is only applicable within the context of an HTML Form element.`", "privacy": "public", - "description": "emphasized type", - "default": "Emphasized", - "name": "Emphasized", - "readonly": true + "deprecated": "Set the \"type\" property to \"Submit\" to achieve the same result. The \"submits\" property is ignored if \"type\" is set to any value other than \"Button\"." }, { "kind": "field", - "static": true, + "name": "tooltip", + "type": { + "text": "string | undefined" + }, + "description": "Defines the tooltip of the component.\n\n**Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.", + "default": "undefined", "privacy": "public", - "description": "attention type", - "default": "Attention", - "name": "Attention", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ButtonDesign", - "module": "dist/types/ButtonDesign.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/ButtonType.js", - "declarations": [ - { - "kind": "enum", - "name": "ButtonType", - "description": "Determines if the button has special form-related functionality.", - "_ui5privacy": "public", - "members": [ + "_ui5since": "1.2.0" + }, { "kind": "field", - "static": true, + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", "privacy": "public", - "description": "The button does not do anything special when inside a form", - "default": "Button", - "name": "Button", - "readonly": true + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "static": true, + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that label the component.", + "default": "undefined", "privacy": "public", - "description": "The button acts as a submit button (submits a form)", - "default": "Submit", - "name": "Submit", - "readonly": true + "_ui5since": "1.1.0" }, { "kind": "field", - "static": true, + "name": "accessibilityAttributes", + "type": { + "text": "ButtonAccessibilityAttributes", + "references": [ + { + "name": "ButtonAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", "privacy": "public", - "description": "The button acts as a reset button (resets a form)", - "default": "Reset", - "name": "Reset", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ButtonType", - "module": "dist/types/ButtonType.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/CalendarLegendItemType.js", - "declarations": [ - { - "kind": "enum", - "name": "CalendarLegendItemType", - "description": "Enum for calendar legend items' types.", - "_ui5privacy": "public", - "_ui5since": "1.23.0", - "members": [ + "_ui5since": "1.2.0" + }, { "kind": "field", - "static": true, + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", "privacy": "public", - "description": "Set when no type is set.", - "default": "None", - "name": "None", - "readonly": true + "_ui5since": "2.5.0" }, { "kind": "field", - "static": true, + "name": "type", + "type": { + "text": "ButtonType", + "references": [ + { + "name": "ButtonType", + "package": "@ui5/webcomponents", + "module": "dist/types/ButtonType.js" + } + ] + }, + "default": "\"Button\"", + "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", "privacy": "public", - "description": "Represents the \"Working\" item in the calendar legend.", - "default": "Working", - "name": "Working", - "readonly": true + "_ui5since": "1.15.0" }, { "kind": "field", - "static": true, + "name": "accessibleRole", + "type": { + "text": "ButtonAccessibleRole", + "references": [ + { + "name": "ButtonAccessibleRole", + "package": "@ui5/webcomponents", + "module": "dist/types/ButtonAccessibleRole.js" + } + ] + }, + "default": "\"Button\"", + "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.", "privacy": "public", - "description": "Represents the \"NonWorking\" item in the calendar legend.", - "default": "NonWorking", - "name": "NonWorking", - "readonly": true + "_ui5since": "1.23" }, { "kind": "field", - "static": true, + "name": "loading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.", "privacy": "public", - "description": "Represents the \"Type01\" item in the calendar legend.", - "default": "Type01", - "name": "Type01", - "readonly": true + "_ui5since": "2.13.0" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the \"Type02\" item in the calendar legend.", - "default": "Type02", - "name": "Type02", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the \"Type03\" item in the calendar legend.", - "default": "Type03", - "name": "Type03", - "readonly": true - }, - { - "kind": "field", - "static": true, + "name": "loadingDelay", + "type": { + "text": "number" + }, + "default": "1000", + "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.", "privacy": "public", - "description": "Represents the \"Type04\" item in the calendar legend.", - "default": "Type04", - "name": "Type04", - "readonly": true - }, + "_ui5since": "2.13.0" + } + ], + "events": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the \"Type05\" item in the calendar legend.", - "default": "Type05", - "name": "Type05", - "readonly": true - }, + "name": "click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ButtonClickEventDetail>", + "references": [ + { + "name": "ButtonClickEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.10.0", + "_ui5parameters": [ + { + "type": { + "text": "Event" + }, + "name": "originalEvent", + "_ui5privacy": "public", + "description": "Returns original event that comes from user's **click** interaction" + }, + { + "type": { + "text": "boolean" + }, + "name": "altKey", + "_ui5privacy": "public", + "description": "Returns whether the \"ALT\" key was pressed when the event was triggered." + }, + { + "type": { + "text": "boolean" + }, + "name": "ctrlKey", + "_ui5privacy": "public", + "description": "Returns whether the \"CTRL\" key was pressed when the event was triggered." + }, + { + "type": { + "text": "boolean" + }, + "name": "metaKey", + "_ui5privacy": "public", + "description": "Returns whether the \"META\" key was pressed when the event was triggered." + }, + { + "type": { + "text": "boolean" + }, + "name": "shiftKey", + "_ui5privacy": "public", + "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered." + } + ] + } + ], + "attributes": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the \"Type06\" item in the calendar legend.", - "default": "Type06", - "name": "Type06", - "readonly": true + "description": "Defines the component design.", + "name": "design", + "default": "\"Default\"", + "fieldName": "design", + "type": { + "text": "\"Transparent\" | \"Default\" | \"Positive\" | \"Negative\" | \"Emphasized\" | \"Attention\"" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the \"Type07\" item in the calendar legend.", - "default": "Type07", - "name": "Type07", - "readonly": true + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the \"Type08\" item in the calendar legend.", - "default": "Type08", - "name": "Type08", - "readonly": true + "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the \"Type09\" item in the calendar legend.", - "default": "Type09", - "name": "Type09", - "readonly": true + "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "end-icon", + "default": "undefined", + "fieldName": "endIcon", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the \"Type10\" item in the calendar legend.", - "default": "Type10", - "name": "Type10", - "readonly": true + "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** This property is only applicable within the context of an HTML Form element.`", + "name": "submits", + "default": "false", + "fieldName": "submits", + "type": { + "text": "boolean" + }, + "deprecated": "Set the \"type\" property to \"Submit\" to achieve the same result. The \"submits\" property is ignored if \"type\" is set to any value other than \"Button\"." }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the \"Type11\" item in the calendar legend.", - "default": "Type11", - "name": "Type11", - "readonly": true + "description": "Defines the tooltip of the component.\n\n**Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the \"Type12\" item in the calendar legend.", - "default": "Type12", - "name": "Type12", - "readonly": true + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the \"Type13\" item in the calendar legend.", - "default": "Type13", - "name": "Type13", - "readonly": true + "description": "Receives id(or many ids) of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the \"Type14\" item in the calendar legend.", - "default": "Type14", - "name": "Type14", - "readonly": true + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "ButtonAccessibilityAttributes" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the \"Type15\" item in the calendar legend.", - "default": "Type15", - "name": "Type15", - "readonly": true + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the \"Type16\" item in the calendar legend.", - "default": "Type16", - "name": "Type16", - "readonly": true + "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "type", + "default": "\"Button\"", + "fieldName": "type", + "type": { + "text": "\"Button\" | \"Submit\" | \"Reset\"" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the \"Type17\" item in the calendar legend.", - "default": "Type17", - "name": "Type17", - "readonly": true + "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.", + "name": "accessible-role", + "default": "\"Button\"", + "fieldName": "accessibleRole", + "type": { + "text": "\"Button\" | \"Link\"" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the \"Type18\" item in the calendar legend.", - "default": "Type18", - "name": "Type18", - "readonly": true + "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the \"Type19\" item in the calendar legend.", - "default": "Type19", - "name": "Type19", - "readonly": true - }, + "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.", + "name": "loading-delay", + "default": "1000", + "fieldName": "loadingDelay", + "type": { + "text": "number" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-button", + "customElement": true, + "_ui5privacy": "public", + "_ui5implements": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the \"Type20\" item in the calendar legend.", - "default": "Type20", - "name": "Type20", - "readonly": true + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" } ] } @@ -1406,65 +1640,88 @@ "kind": "js", "name": "default", "declaration": { - "name": "CalendarLegendItemType", - "module": "dist/types/CalendarLegendItemType.js" + "name": "Button", + "module": "dist/Button.js" } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/CalendarPickersMode.js", - "declarations": [], - "exports": [ + }, { - "kind": "js", - "name": "default", + "kind": "custom-element-definition", + "name": "ui5-button", "declaration": { - "name": "CalendarPickersMode", - "module": "dist/types/CalendarPickersMode.js" + "name": "Button", + "module": "dist/Button.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/CalendarSelectionMode.js", + "path": "dist/ButtonBadge.js", "declarations": [ { - "kind": "enum", - "name": "CalendarSelectionMode", - "description": "Different Calendar selection mode.", - "_ui5privacy": "public", + "kind": "class", + "description": "The `ui5-button-badge` component defines a badge that appears in the `ui5-button`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ButtonBadge.js\";`", + "name": "ButtonBadge", "members": [ { "kind": "field", - "static": true, + "name": "design", + "type": { + "text": "ButtonBadgeDesign", + "references": [ + { + "name": "ButtonBadgeDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/ButtonBadgeDesign.js" + } + ] + }, + "default": "\"AttentionDot\"", + "description": "Defines the badge placement and appearance.\n- **InlineText** - displayed inside the button after its text, and recommended for **compact** density.\n- **OverlayText** - displayed at the top-end corner of the button, and recommended for **cozy** density.\n- **AttentionDot** - displayed at the top-end corner of the button as a dot, and suitable for both **cozy** and **compact** densities.", "privacy": "public", - "description": "Only one date can be selected at a time", - "default": "Single", - "name": "Single", - "readonly": true + "_ui5since": "2.7.0" }, { "kind": "field", - "static": true, + "name": "text", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.\n\n**Note:** The badge component only accepts numeric values and the \"+\" symbol. Using other characters or formats may result in unpredictable behavior, which is not guaranteed or supported.", "privacy": "public", - "description": "Several dates can be selected", - "default": "Multiple", - "name": "Multiple", - "readonly": true + "_ui5since": "2.7.0" + } + ], + "attributes": [ + { + "description": "Defines the badge placement and appearance.\n- **InlineText** - displayed inside the button after its text, and recommended for **compact** density.\n- **OverlayText** - displayed at the top-end corner of the button, and recommended for **cozy** density.\n- **AttentionDot** - displayed at the top-end corner of the button as a dot, and suitable for both **cozy** and **compact** densities.", + "name": "design", + "default": "\"AttentionDot\"", + "fieldName": "design", + "type": { + "text": "\"InlineText\" | \"OverlayText\" | \"AttentionDot\"" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "A range defined by a start date and an end date can be selected", - "default": "Range", - "name": "Range", - "readonly": true + "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.\n\n**Note:** The badge component only accepts numeric values and the \"+\" symbol. Using other characters or formats may result in unpredictable behavior, which is not guaranteed or supported.", + "name": "text", + "default": "\"\"", + "fieldName": "text", + "type": { + "text": "string" + } } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-button-badge", + "customElement": true, + "_ui5since": "2.7.0", + "_ui5privacy": "public" } ], "exports": [ @@ -1472,610 +1729,495 @@ "kind": "js", "name": "default", "declaration": { - "name": "CalendarSelectionMode", - "module": "dist/types/CalendarSelectionMode.js" + "name": "ButtonBadge", + "module": "dist/ButtonBadge.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-button-badge", + "declaration": { + "name": "ButtonBadge", + "module": "dist/ButtonBadge.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/CalendarWeekNumbering.js", + "path": "dist/Calendar.js", "declarations": [ { - "kind": "enum", - "name": "CalendarWeekNumbering", - "description": "The <code>CalendarWeekNumbering</code> enum defines how to calculate calendar weeks. Each\nvalue defines:\n- The first day of the week,\n- The first week of the year.", - "_ui5privacy": "public", - "_ui5since": "2.2.0", - "members": [ + "kind": "interface", + "name": "ICalendarSelectedDates", + "description": "Interface for components that may be slotted inside a `ui5-calendar`.\n\n**Note:** Use with `ui5-date` or `ui5-date-range` as calendar date selection types.", + "_ui5privacy": "public" + }, + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-calendar` component allows users to select one or more dates.\n\nCurrently selected dates are represented with instances of `ui5-date` as\nchildren of the `ui5-calendar`. The value property of each `ui5-date` must be a\ndate string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.\nWhenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances\nof `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the\n`selection-change` event. This is useful if you want to control the selected dates externally.\n\n### Usage\n\nThe user can navigate to a particular date by:\n\n- Pressing over a month inside the months view\n- Pressing over an year inside the years view\n\nThe user can confirm a date selection by pressing over a date inside the days view.\n\n### Keyboard Handling\nThe `ui5-calendar` provides advanced keyboard handling.\nWhen a picker is showed and focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- Day picker:\n\n- [F4] - Shows month picker\n- [Shift] + [F4] - Shows year picker\n- [Page Up] - Navigate to the previous month\n- [Page Down] - Navigate to the next month\n- [Shift] + [Page Up] - Navigate to the previous year\n- [Shift] + [Page Down] - Navigate to the next year\n- [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards\n- [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards\n- [Home] - Navigate to the first day of the week\n- [End] - Navigate to the last day of the week\n- [Ctrl] + [Home] - Navigate to the first day of the month\n- [Ctrl] + [End] - Navigate to the last day of the month\n\n- Month picker:\n\n- [Page Up] - Navigate to the previous year\n- [Page Down] - Navigate to the next year\n- [Home] - Navigate to the first month of the current row\n- [End] - Navigate to the last month of the current row\n- [Ctrl] + [Home] - Navigate to the first month of the current year\n- [Ctrl] + [End] - Navigate to the last month of the year\n\n- Year picker:\n\n- [Page Up] - Navigate to the previous year range\n- [Page Down] - Navigate the next year range\n- [Home] - Navigate to the first year of the current row\n- [End] - Navigate to the last year of the current row\n- [Ctrl] + [Home] - Navigate to the first year of the current year range\n- [Ctrl] + [End] - Navigate to the last year of the current year range\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n</script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Calendar.js\";`", + "name": "Calendar", + "cssParts": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The default calendar week numbering:\n\nThe framework determines the week numbering scheme; currently it is derived from the\nactive format locale. Future versions of ui5-webcomponents might select a different week numbering\nscheme.", - "default": "Default", - "name": "Default", - "readonly": true + "description": "Used to style the day cells.", + "name": "day-cell" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Official calendar week numbering in most of Europe (ISO 8601 standard):\nMonday is first day of the week, the week containing January 4th is first week of the year.", - "default": "ISO_8601", - "name": "ISO_8601", - "readonly": true + "description": "Used to style the day cells when selected.", + "name": "day-cell-selected" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Official calendar week numbering in much of the Middle East (Middle Eastern calendar):\nSaturday is first day of the week, the week containing January 1st is first week of the year.", - "default": "MiddleEastern", - "name": "MiddleEastern", - "readonly": true + "description": "Used to style the day cells in between of selected dates in range.", + "name": "day-cell-selected-between" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Official calendar week numbering in the United States, Canada, Brazil, Israel, Japan, and\nother countries (Western traditional calendar):\nSunday is first day of the week, the week containing January 1st is first week of the year.", - "default": "WesternTraditional", - "name": "WesternTraditional", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "CalendarWeekNumbering", - "module": "dist/types/CalendarWeekNumbering.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/CarouselArrowsPlacement.js", - "declarations": [ - { - "kind": "enum", - "name": "CarouselArrowsPlacement", - "description": "Different Carousel arrows placement.", - "_ui5privacy": "public", - "members": [ + "description": "Used to style the month cells.", + "name": "month-cell" + }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Carousel arrows are placed on the sides of the current Carousel page.", - "default": "Content", - "name": "Content", - "readonly": true + "description": "Used to style the month cells when selected.", + "name": "month-cell-selected" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Carousel arrows are placed on the sides of the page indicator of the Carousel.", - "default": "Navigation", - "name": "Navigation", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "CarouselArrowsPlacement", - "module": "dist/types/CarouselArrowsPlacement.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/CarouselPageIndicatorType.js", - "declarations": [ - { - "kind": "enum", - "name": "CarouselPageIndicatorType", - "description": "Different Carousel page indicator types.", - "_ui5privacy": "public", - "members": [ + "description": "Used to style the day cells in between of selected months in range.", + "name": "month-cell-selected-between" + }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The page indicator will be visualized as dots if there are fewer than 9 pages.\nIf there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)", - "default": "Default", - "name": "Default", - "readonly": true + "description": "Used to style the month picker root container.", + "name": "month-picker-root" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The page indicator will display the current page and the total number of pages. (e.g. X of Y)", - "default": "Numeric", - "name": "Numeric", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "CarouselPageIndicatorType", - "module": "dist/types/CarouselPageIndicatorType.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/ComboBoxFilter.js", - "declarations": [ - { - "kind": "enum", - "name": "ComboBoxFilter", - "description": "Different filtering types of the ComboBox.", - "_ui5privacy": "public", - "members": [ + "description": "Used to style the year cells.", + "name": "year-cell" + }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Defines filtering by first symbol of each word of item's text.", - "default": "StartsWithPerTerm", - "name": "StartsWithPerTerm", - "readonly": true + "description": "Used to style the year cells when selected.", + "name": "year-cell-selected" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Defines filtering by starting symbol of item's text.", - "default": "StartsWith", - "name": "StartsWith", - "readonly": true + "description": "Used to style the year cells in between of selected years in range.", + "name": "year-cell-selected-between" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Defines contains filtering.", - "default": "Contains", - "name": "Contains", - "readonly": true + "description": "Used to style the year picker root container.", + "name": "year-picker-root" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Removes any filtering applied while typing", - "default": "None", - "name": "None", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ComboBoxFilter", - "module": "dist/types/ComboBoxFilter.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/ExpandableTextOverflowMode.js", - "declarations": [ - { - "kind": "enum", - "name": "ExpandableTextOverflowMode", - "description": "Overflow Mode.", - "_ui5privacy": "public", - "members": [ + "description": "Used to style the year range cells.", + "name": "year-range-cell" + }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Overflowing text is appended in-place.", - "default": "InPlace", - "name": "InPlace", - "readonly": true + "description": "Used to style the year range cells when selected.", + "name": "year-range-cell-selected" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Full text is displayed in a popover.", - "default": "Popover", - "name": "Popover", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ExpandableTextOverflowMode", - "module": "dist/types/ExpandableTextOverflowMode.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/ExpandableTextTemplateParams.js", - "declarations": [], - "exports": [] - }, - { - "kind": "javascript-module", - "path": "dist/types/FormItemSpacing.js", - "declarations": [ - { - "kind": "enum", - "name": "FormItemSpacing", - "description": "Different Button designs.", - "_ui5privacy": "public", - "_ui5since": "2.0.0", - "members": [ + "description": "Used to style the year range cells in between of selected year ranges.", + "name": "year-range-cell-selected-between" + }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Normal spacing (smaller vertical space between form items).", - "default": "Normal", - "name": "Normal", - "readonly": true + "description": "Used to style the year range picker root container.", + "name": "year-range-picker-root" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Large spacing (larger vertical space between form items).", - "default": "Large", - "name": "Large", - "readonly": true + "description": "Used to style the calendar header middle buttons (month/year/year-range buttons).", + "name": "calendar-header-middle-button" + }, + { + "description": "Used to style the calendar header navigation arrow buttons (previous/next buttons).", + "name": "calendar-header-arrow-button" } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "FormItemSpacing", - "module": "dist/types/FormItemSpacing.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/Highlight.js", - "declarations": [ - { - "kind": "enum", - "name": "Highlight", - "description": "Different types of Highlight .", - "_ui5privacy": "public", - "members": [ + ], + "slots": [ { - "kind": "field", - "static": true, - "privacy": "public", - "default": "None", - "name": "None", - "readonly": true + "name": "calendarLegend", + "description": "Defines the calendar legend of the component.", + "_ui5since": "1.23.0", + "_ui5type": { + "text": "Array<CalendarLegend>", + "references": [ + { + "name": "CalendarLegend", + "package": "@ui5/webcomponents", + "module": "dist/CalendarLegend.js" + } + ] + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "default": "Positive", - "name": "Positive", - "readonly": true + "name": "default", + "description": "Defines the selected date or dates (depending on the `selectionMode` property)\nfor this calendar as instances of `ui5-date` or `ui5-date-range`.\nUse `ui5-date` for single or multiple selection, and `ui5-date-range` for range selection.", + "_ui5propertyName": "dates", + "_ui5type": { + "text": "Array<ICalendarSelectedDates>", + "references": [ + { + "name": "ICalendarSelectedDates", + "package": "@ui5/webcomponents", + "module": "dist/Calendar.js" + } + ] + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "default": "Critical", - "name": "Critical", - "readonly": true - }, + "name": "specialDates", + "description": "Defines the special dates, visually emphasized in the calendar.", + "_ui5since": "1.23.0", + "_ui5type": { + "text": "Array<SpecialCalendarDate>", + "references": [ + { + "name": "SpecialCalendarDate", + "package": "@ui5/webcomponents", + "module": "dist/SpecialCalendarDate.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "default": "Negative", - "name": "Negative", - "readonly": true + "name": "selectionMode", + "type": { + "text": "CalendarSelectionMode", + "references": [ + { + "name": "CalendarSelectionMode", + "package": "@ui5/webcomponents", + "module": "dist/types/CalendarSelectionMode.js" + } + ] + }, + "default": "\"Single\"", + "description": "Defines the type of selection used in the calendar component.\nAccepted property values are:\n\n- `CalendarSelectionMode.Single` - enables a single date selection.(default value)\n- `CalendarSelectionMode.Range` - enables selection of a date range.\n- `CalendarSelectionMode.Multiple` - enables selection of multiple dates.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "default": "Information", - "name": "Information", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "Highlight", - "module": "dist/types/Highlight.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/IconDesign.js", - "declarations": [ - { - "kind": "enum", - "name": "IconDesign", - "description": "Different Icon semantic designs.", - "_ui5privacy": "public", - "members": [ + "name": "hideWeekNumbers", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the visibility of the week numbers column.\n\n**Note:** For calendars other than Gregorian,\nthe week numbers are not displayed regardless of what is set.", + "privacy": "public" + }, { "kind": "field", - "static": true, + "name": "primaryCalendarType", + "type": { + "text": "CalendarType | undefined", + "references": [ + { + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" + } + ] + }, + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "default": "undefined", "privacy": "public", - "description": "Contrast design", - "default": "Contrast", - "name": "Contrast", - "readonly": true + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { "kind": "field", - "static": true, + "name": "secondaryCalendarType", + "type": { + "text": "CalendarType | undefined", + "references": [ + { + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" + } + ] + }, + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "default": "undefined", "privacy": "public", - "description": "Critical design", - "default": "Critical", - "name": "Critical", - "readonly": true + "_ui5since": "1.0.0-rc.16", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { "kind": "field", - "static": true, + "name": "formatPattern", + "type": { + "text": "string | undefined" + }, + "description": "Determines the format, displayed in the input field.", + "default": "undefined", + "deprecated": "Use displayFormat and valueFormat instead", "privacy": "public", - "description": "Default design (brand design)", - "default": "Default", - "name": "Default", - "readonly": true + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { "kind": "field", - "static": true, + "name": "displayFormat", + "type": { + "text": "string | undefined" + }, + "description": "Determines the format, displayed in the input field.", + "default": "undefined", "privacy": "public", - "description": "info type", - "default": "Information", - "name": "Information", - "readonly": true + "_ui5since": "2.14.0", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { "kind": "field", - "static": true, + "name": "valueFormat", + "type": { + "text": "string | undefined" + }, + "description": "Determines the format, used for the value attribute.", + "default": "undefined", "privacy": "public", - "description": "Negative design", - "default": "Negative", - "name": "Negative", - "readonly": true + "_ui5since": "2.14.0", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { "kind": "field", - "static": true, + "name": "minDate", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", "privacy": "public", - "description": "Neutral design", - "default": "Neutral", - "name": "Neutral", - "readonly": true + "_ui5since": "1.0.0-rc.6", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { "kind": "field", - "static": true, + "name": "maxDate", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", "privacy": "public", - "description": "Design that indicates an icon which isn't interactive", - "default": "NonInteractive", - "name": "NonInteractive", - "readonly": true + "_ui5since": "1.0.0-rc.6", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { "kind": "field", - "static": true, + "name": "calendarWeekNumbering", + "type": { + "text": "CalendarWeekNumbering", + "references": [ + { + "name": "CalendarWeekNumbering", + "package": "@ui5/webcomponents", + "module": "dist/types/CalendarWeekNumbering.js" + } + ] + }, + "default": "\"Default\"", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", "privacy": "public", - "description": "Positive design", - "default": "Positive", - "name": "Positive", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "IconDesign", - "module": "dist/types/IconDesign.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/IconMode.js", - "declarations": [ - { - "kind": "enum", - "name": "IconMode", - "description": "Different Icon modes.", - "_ui5privacy": "public", - "_ui5since": "2.0.0", - "members": [ + "_ui5since": "2.2.0", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } + } + ], + "events": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Image mode (by default).\nConfigures the component to internally render role=\"img\".", - "default": "Image", - "name": "Image", - "readonly": true + "name": "selection-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<CalendarSelectionChangeEventDetail>", + "references": [ + { + "name": "CalendarSelectionChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Calendar.js" + } + ] + }, + "description": "Fired when the selected dates change.\n\n**Note:** If you call `preventDefault()` for this event, the component will not\ncreate instances of `ui5-date` for the newly selected dates. In that case you should do this manually.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "Array<string>" + }, + "name": "selectedValues", + "_ui5privacy": "public", + "description": "The selected dates" + }, + { + "type": { + "text": "Array<number>" + }, + "name": "selectedDates", + "_ui5privacy": "public", + "description": "The selected dates as UTC timestamps" + } + ] + } + ], + "attributes": [ + { + "description": "Defines the type of selection used in the calendar component.\nAccepted property values are:\n\n- `CalendarSelectionMode.Single` - enables a single date selection.(default value)\n- `CalendarSelectionMode.Range` - enables selection of a date range.\n- `CalendarSelectionMode.Multiple` - enables selection of multiple dates.", + "name": "selection-mode", + "default": "\"Single\"", + "fieldName": "selectionMode", + "type": { + "text": "\"Single\" | \"Multiple\" | \"Range\"" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Decorative mode.\nConfigures the component to internally render role=\"presentation\" and aria-hidden=\"true\",\nmaking it purely decorative without semantic content or interactivity.", - "default": "Decorative", - "name": "Decorative", - "readonly": true + "description": "Defines the visibility of the week numbers column.\n\n**Note:** For calendars other than Gregorian,\nthe week numbers are not displayed regardless of what is set.", + "name": "hide-week-numbers", + "default": "false", + "fieldName": "hideWeekNumbers", + "type": { + "text": "boolean" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Interactive mode.\nConfigures the component to internally render role=\"button\".\nThis mode also supports focus and press handling to enhance interactivity.", - "default": "Interactive", - "name": "Interactive", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "IconMode", - "module": "dist/types/IconMode.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/InputKeyHint.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "InputKeyHint", - "module": "dist/types/InputKeyHint.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/InputType.js", - "declarations": [ - { - "kind": "enum", - "name": "InputType", - "description": "Different input types.", - "_ui5privacy": "public", - "members": [ + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "name": "primary-calendar-type", + "default": "undefined", + "fieldName": "primaryCalendarType", + "type": { + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } + }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Defines a one-line text input field:", - "default": "Text", - "name": "Text", - "readonly": true + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "name": "secondary-calendar-type", + "default": "undefined", + "fieldName": "secondaryCalendarType", + "type": { + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Used for input fields that must contain an e-mail address.", - "default": "Email", - "name": "Email", - "readonly": true + "description": "Determines the format, displayed in the input field.", + "name": "format-pattern", + "default": "undefined", + "fieldName": "formatPattern", + "type": { + "text": "string | undefined" + }, + "deprecated": "Use displayFormat and valueFormat instead", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Defines a numeric input field.", - "default": "Number", - "name": "Number", - "readonly": true + "description": "Determines the format, displayed in the input field.", + "name": "display-format", + "default": "undefined", + "fieldName": "displayFormat", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Defines a password field.", - "default": "Password", - "name": "Password", - "readonly": true + "description": "Determines the format, used for the value attribute.", + "name": "value-format", + "default": "undefined", + "fieldName": "valueFormat", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Used for input fields that should contain a telephone number.", - "default": "Tel", - "name": "Tel", - "readonly": true + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", + "name": "min-date", + "default": "\"\"", + "fieldName": "minDate", + "type": { + "text": "string" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Used for input fields that should contain a URL address.", - "default": "URL", - "name": "URL", - "readonly": true + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", + "name": "max-date", + "default": "\"\"", + "fieldName": "maxDate", + "type": { + "text": "string" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "_ui5since": "2.0.0", - "description": "Used for input fields that should contain a search term.", - "default": "Search", - "name": "Search", - "readonly": true + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "name": "calendar-week-numbering", + "default": "\"Default\"", + "fieldName": "calendarWeekNumbering", + "type": { + "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } } - ] + ], + "superclass": { + "name": "CalendarPart", + "package": "@ui5/webcomponents", + "module": "dist/CalendarPart.js" + }, + "tagName": "ui5-calendar", + "customElement": true, + "_ui5since": "1.0.0-rc.11", + "_ui5privacy": "public" } ], "exports": [ @@ -2083,40 +2225,65 @@ "kind": "js", "name": "default", "declaration": { - "name": "InputType", - "module": "dist/types/InputType.js" + "name": "Calendar", + "module": "dist/Calendar.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-calendar", + "declaration": { + "name": "Calendar", + "module": "dist/Calendar.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/InteractiveAreaSize.js", + "path": "dist/CalendarDate.js", "declarations": [ { - "kind": "enum", - "name": "InteractiveAreaSize", - "description": "Defines the area size around the component that the user can select.", - "_ui5privacy": "public", - "_ui5since": "2.8.0", + "kind": "class", + "description": "### Overview\n\nThe `ui5-date` component defines a calendar date to be used inside `ui5-calendar`", + "name": "CalendarDate", "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "The default target area size (the area taken by the component itself without any extra invisible touch area).", - "default": "Normal", - "name": "Normal", - "readonly": true - }, + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "The date formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", + "privacy": "public" + } + ], + "attributes": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Enlarged target area size (up to 24px in height) provides users with an enhanced dedicated space to interact with the component.", - "default": "Large", - "name": "Large", - "readonly": true + "description": "The date formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-date", + "customElement": true, + "_ui5privacy": "public", + "_ui5abstract": true, + "_ui5implements": [ + { + "name": "ICalendarSelectedDates", + "package": "@ui5/webcomponents", + "module": "dist/Calendar.js" } ] } @@ -2126,40 +2293,85 @@ "kind": "js", "name": "default", "declaration": { - "name": "InteractiveAreaSize", - "module": "dist/types/InteractiveAreaSize.js" + "name": "CalendarDate", + "module": "dist/CalendarDate.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-date", + "declaration": { + "name": "CalendarDate", + "module": "dist/CalendarDate.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/LinkAccessibleRole.js", + "path": "dist/CalendarDateRange.js", "declarations": [ { - "kind": "enum", - "name": "LinkAccessibleRole", - "description": "Link accessible roles.", - "_ui5privacy": "public", - "_ui5since": "2.0.0", + "kind": "class", + "description": "### Overview\n\nThe `ui5-date-range` component defines a range of dates to be used inside `ui5-calendar`", + "name": "CalendarDateRange", "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents Default (link) ARIA role.", - "default": "Link", - "name": "Link", - "readonly": true + "name": "startValue", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Start of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the ARIA role \"button\".", - "default": "Button", - "name": "Button", - "readonly": true + "name": "endValue", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "End of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Start of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", + "name": "start-value", + "default": "\"\"", + "fieldName": "startValue", + "type": { + "text": "string" + } + }, + { + "description": "End of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", + "name": "end-value", + "default": "\"\"", + "fieldName": "endValue", + "type": { + "text": "string" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-date-range", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public", + "_ui5abstract": true, + "_ui5implements": [ + { + "name": "ICalendarSelectedDates", + "package": "@ui5/webcomponents", + "module": "dist/Calendar.js" } ] } @@ -2169,111 +2381,135 @@ "kind": "js", "name": "default", "declaration": { - "name": "LinkAccessibleRole", - "module": "dist/types/LinkAccessibleRole.js" + "name": "CalendarDateRange", + "module": "dist/CalendarDateRange.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-date-range", + "declaration": { + "name": "CalendarDateRange", + "module": "dist/CalendarDateRange.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/LinkDesign.js", + "path": "dist/CalendarLegend.js", "declarations": [ { - "kind": "enum", - "name": "LinkDesign", - "description": "Different link designs.", - "_ui5privacy": "public", - "members": [ + "kind": "class", + "description": "### Overview\n\nThe `ui5-calendar-legend` component is designed for use within the `ui5-calendar` to display a legend.\nEach `ui5-calendar-legend-item` represents a unique date type, specifying its visual style\nand a corresponding textual label.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/CalendarLegend.js\";`", + "name": "CalendarLegend", + "slots": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "default type (no special styling)", - "default": "Default", - "name": "Default", - "readonly": true - }, + "name": "default", + "description": "Defines the items of the component.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<CalendarLegendItem>", + "references": [ + { + "name": "CalendarLegendItem", + "package": "@ui5/webcomponents", + "module": "dist/CalendarLegendItem.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "subtle type (appears as regular text, rather than a link)", - "default": "Subtle", - "name": "Subtle", - "readonly": true + "name": "hideToday", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Hides the Today item in the legend.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "emphasized type", - "default": "Emphasized", - "name": "Emphasized", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "LinkDesign", - "module": "dist/types/LinkDesign.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/ListAccessibleRole.js", - "declarations": [ - { - "kind": "enum", - "name": "ListAccessibleRole", - "description": "List accessible roles.", - "_ui5privacy": "public", - "_ui5since": "2.0.0", - "members": [ + "name": "hideSelectedDay", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Hides the Selected day item in the legend.", + "privacy": "public" + }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the ARIA role \"list\". (by default)", - "default": "List", - "name": "List", - "readonly": true + "name": "hideNonWorkingDay", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Hides the Non-Working day item in the legend.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the ARIA role \"menu\".", - "default": "Menu", - "name": "Menu", - "readonly": true + "name": "hideWorkingDay", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Hides the Working day item in the legend.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Hides the Today item in the legend.", + "name": "hide-today", + "default": "false", + "fieldName": "hideToday", + "type": { + "text": "boolean" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the ARIA role \"tree\".", - "default": "Tree", - "name": "Tree", - "readonly": true + "description": "Hides the Selected day item in the legend.", + "name": "hide-selected-day", + "default": "false", + "fieldName": "hideSelectedDay", + "type": { + "text": "boolean" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the ARIA role \"listbox\".", - "default": "ListBox", - "name": "ListBox", - "readonly": true + "description": "Hides the Non-Working day item in the legend.", + "name": "hide-non-working-day", + "default": "false", + "fieldName": "hideNonWorkingDay", + "type": { + "text": "boolean" + } + }, + { + "description": "Hides the Working day item in the legend.", + "name": "hide-working-day", + "default": "false", + "fieldName": "hideWorkingDay", + "type": { + "text": "boolean" + } } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-calendar-legend", + "customElement": true, + "_ui5since": "1.23.0", + "_ui5privacy": "public" } ], "exports": [ @@ -2281,50 +2517,86 @@ "kind": "js", "name": "default", "declaration": { - "name": "ListAccessibleRole", - "module": "dist/types/ListAccessibleRole.js" + "name": "CalendarLegend", + "module": "dist/CalendarLegend.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-calendar-legend", + "declaration": { + "name": "CalendarLegend", + "module": "dist/CalendarLegend.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/ListGrowingMode.js", + "path": "dist/CalendarLegendItem.js", "declarations": [ { - "kind": "enum", - "name": "ListGrowingMode", - "description": "Different list growing modes.", - "_ui5privacy": "public", + "kind": "class", + "description": "### Overview\n\nEach `ui5-calendar-legend-item` represents a legend item, displaying a color with a label.\nThe color is determined by the `type` property and the label by the `text` property.\nIf a `ui5-special-date` is used within the `ui5-calendar` and a type is set, clicking on a `ui5-calendar-legend-item`\nwith the same type will emphasize the respective date(s) in the calendar.\n\n### Usage\nThe `ui5-calendar-legend-item` is intended to be used within the `ui5-calendar-legend` component.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/CalendarLegendItem.js\";`", + "name": "CalendarLegendItem", "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "Component's \"load-more\" is fired upon pressing a \"More\" button.\nat the bottom.", - "default": "Button", - "name": "Button", - "readonly": true + "name": "text", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text content of the Calendar Legend Item.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Component's \"load-more\" is fired upon scroll.", - "default": "Scroll", - "name": "Scroll", - "readonly": true + "name": "type", + "type": { + "text": "CalendarLegendItemType", + "references": [ + { + "name": "CalendarLegendItemType", + "package": "@ui5/webcomponents", + "module": "dist/types/CalendarLegendItemType.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the type of the Calendar Legend Item.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the text content of the Calendar Legend Item.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Component's growing is not enabled.", - "default": "None", - "name": "None", - "readonly": true + "description": "Defines the type of the Calendar Legend Item.", + "name": "type", + "default": "\"None\"", + "fieldName": "type", + "type": { + "text": "\"None\" | \"Today\" | \"Selected\" | \"Working\" | \"NonWorking\" | \"Type01\" | \"Type02\" | \"Type03\" | \"Type04\" | \"Type05\" | \"Type06\" | \"Type07\" | \"Type08\" | \"Type09\" | \"Type10\" | \"Type11\" | ... 8 more ... | \"Type20\"" + } } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-calendar-legend-item", + "customElement": true, + "_ui5since": "1.23.0", + "_ui5privacy": "public" } ], "exports": [ @@ -2332,214 +2604,282 @@ "kind": "js", "name": "default", "declaration": { - "name": "ListGrowingMode", - "module": "dist/types/ListGrowingMode.js" + "name": "CalendarLegendItem", + "module": "dist/CalendarLegendItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-calendar-legend-item", + "declaration": { + "name": "CalendarLegendItem", + "module": "dist/CalendarLegendItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/ListItemAccessibleRole.js", + "path": "dist/CalendarPart.js", "declarations": [ { - "kind": "enum", - "name": "ListItemAccessibleRole", - "description": "ListItem accessible roles.", - "_ui5privacy": "public", - "_ui5since": "2.0.0", + "kind": "class", + "description": "Abstract base class for Calendar, DayPicker, MonthPicker and YearPicker that adds support for:\n - common properties (timestamp, selectedDates): declarations and methods that operate on them\n - other common code", + "name": "CalendarPart", "members": [ { "kind": "field", - "static": true, + "name": "primaryCalendarType", + "type": { + "text": "CalendarType | undefined", + "references": [ + { + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" + } + ] + }, + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "default": "undefined", "privacy": "public", - "description": "Represents the ARIA role \"listitem\". (by default)", - "default": "ListItem", - "name": "ListItem", - "readonly": true + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { "kind": "field", - "static": true, + "name": "secondaryCalendarType", + "type": { + "text": "CalendarType | undefined", + "references": [ + { + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" + } + ] + }, + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "default": "undefined", "privacy": "public", - "description": "Represents the ARIA role \"menuitem\".", - "default": "MenuItem", - "name": "MenuItem", - "readonly": true + "_ui5since": "1.0.0-rc.16", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { "kind": "field", - "static": true, + "name": "formatPattern", + "type": { + "text": "string | undefined" + }, + "description": "Determines the format, displayed in the input field.", + "default": "undefined", + "deprecated": "Use displayFormat and valueFormat instead", "privacy": "public", - "description": "Represents the ARIA role \"treeitem\".", - "default": "TreeItem", - "name": "TreeItem", - "readonly": true + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { "kind": "field", - "static": true, + "name": "displayFormat", + "type": { + "text": "string | undefined" + }, + "description": "Determines the format, displayed in the input field.", + "default": "undefined", "privacy": "public", - "description": "Represents the ARIA role \"option\".", - "default": "Option", - "name": "Option", - "readonly": true + "_ui5since": "2.14.0", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Represents the ARIA role \"none\".", - "default": "None", - "name": "None", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ListItemAccessibleRole", - "module": "dist/types/ListItemAccessibleRole.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/ListItemType.js", - "declarations": [ - { - "kind": "enum", - "name": "ListItemType", - "description": "Different list item types.", - "_ui5privacy": "public", - "members": [ - { - "kind": "field", - "static": true, + "name": "valueFormat", + "type": { + "text": "string | undefined" + }, + "description": "Determines the format, used for the value attribute.", + "default": "undefined", "privacy": "public", - "description": "Indicates the list item does not have any active feedback when item is pressed.", - "default": "Inactive", - "name": "Inactive", - "readonly": true + "_ui5since": "2.14.0", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { "kind": "field", - "static": true, + "name": "minDate", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", "privacy": "public", - "description": "Indicates that the item is clickable via active feedback when item is pressed.", - "default": "Active", - "name": "Active", - "readonly": true + "_ui5since": "1.0.0-rc.6", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { "kind": "field", - "static": true, + "name": "maxDate", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", "privacy": "public", - "description": "Enables detail button of the list item that fires detail-click event.", - "default": "Detail", - "name": "Detail", - "readonly": true + "_ui5since": "1.0.0-rc.6", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { "kind": "field", - "static": true, + "name": "calendarWeekNumbering", + "type": { + "text": "CalendarWeekNumbering", + "references": [ + { + "name": "CalendarWeekNumbering", + "package": "@ui5/webcomponents", + "module": "dist/types/CalendarWeekNumbering.js" + } + ] + }, + "default": "\"Default\"", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", "privacy": "public", - "description": "Enables the type of navigation, which is specified to add an arrow at the end of the items and fires navigate-click event.", - "default": "Navigation", - "name": "Navigation", - "readonly": true + "_ui5since": "2.2.0", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ListItemType", - "module": "dist/types/ListItemType.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/ListSelectionMode.js", - "declarations": [ - { - "kind": "enum", - "name": "ListSelectionMode", - "description": "Different list selection modes.", + ], + "superclass": { + "name": "DateComponentBase", + "package": "@ui5/webcomponents", + "module": "dist/DateComponentBase.js" + }, + "customElement": true, "_ui5privacy": "public", - "members": [ - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Default mode (no selection).", - "default": "None", - "name": "None", - "readonly": true - }, + "attributes": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Right-positioned single selection mode (only one list item can be selected).", - "default": "Single", - "name": "Single", - "readonly": true + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "name": "primary-calendar-type", + "default": "undefined", + "fieldName": "primaryCalendarType", + "type": { + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Left-positioned single selection mode (only one list item can be selected).", - "default": "SingleStart", - "name": "SingleStart", - "readonly": true + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "name": "secondary-calendar-type", + "default": "undefined", + "fieldName": "secondaryCalendarType", + "type": { + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Selected item is highlighted but no selection element is visible\n(only one list item can be selected).", - "default": "SingleEnd", - "name": "SingleEnd", - "readonly": true + "description": "Determines the format, displayed in the input field.", + "name": "format-pattern", + "default": "undefined", + "fieldName": "formatPattern", + "type": { + "text": "string | undefined" + }, + "deprecated": "Use displayFormat and valueFormat instead", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Selected item is highlighted and selection is changed upon arrow navigation\n(only one list item can be selected - this is always the focused item).", - "default": "SingleAuto", - "name": "SingleAuto", - "readonly": true + "description": "Determines the format, displayed in the input field.", + "name": "display-format", + "default": "undefined", + "fieldName": "displayFormat", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Multi selection mode (more than one list item can be selected).", - "default": "Multiple", - "name": "Multiple", - "readonly": true + "description": "Determines the format, used for the value attribute.", + "name": "value-format", + "default": "undefined", + "fieldName": "valueFormat", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Delete mode (only one list item can be deleted via provided delete button)", - "default": "Delete", - "name": "Delete", - "readonly": true + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", + "name": "min-date", + "default": "\"\"", + "fieldName": "minDate", + "type": { + "text": "string" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } + }, + { + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", + "name": "max-date", + "default": "\"\"", + "fieldName": "maxDate", + "type": { + "text": "string" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } + }, + { + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "name": "calendar-week-numbering", + "default": "\"Default\"", + "fieldName": "calendarWeekNumbering", + "type": { + "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } } ] } @@ -2549,103 +2889,149 @@ "kind": "js", "name": "default", "declaration": { - "name": "ListSelectionMode", - "module": "dist/types/ListSelectionMode.js" + "name": "CalendarPart", + "module": "dist/CalendarPart.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/ListSeparator.js", + "path": "dist/Card.js", "declarations": [ { - "kind": "enum", - "name": "ListSeparator", - "description": "Different types of list items separators.", - "_ui5privacy": "public", - "_ui5since": "2.0.0", + "kind": "class", + "description": "### Overview\n\nThe `ui5-card` is a component that represents information in the form of a\ntile with separate header and content areas.\nThe content area of a `ui5-card` can be arbitrary HTML content.\nThe header can be used through slot `header`. For which there is a `ui5-card-header` component to achieve the card look and feel.\n\nNote: We recommend the usage of `ui5-card-header` for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Card.js\";`\n\n`import \"@ui5/webcomponents/dist/CardHeader.js\";` (for `ui5-card-header`)", + "name": "Card", + "cssParts": [ + { + "description": "Used to style the root DOM element of the card component", + "name": "root" + }, + { + "description": "Used to style the content of the card", + "name": "content" + } + ], + "slots": [ + { + "name": "default", + "description": "Defines the content of the component.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + }, + { + "name": "header", + "description": "Defines the header of the component.\n\n**Note:** Use `ui5-card-header` for the intended design.", + "_ui5since": "1.0.0-rc.15", + "_ui5type": { + "text": "Array<CardHeader>", + "references": [ + { + "name": "CardHeader", + "package": "@ui5/webcomponents", + "module": "dist/CardHeader.js" + } + ] + }, + "_ui5privacy": "public" + } + ], "members": [ { "kind": "field", - "static": true, + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible name of the component, which is used as the name of the card region and should be unique per card.\n\n**Note:** `accessibleName` should be always set, unless `accessibleNameRef` is set.", + "default": "undefined", "privacy": "public", - "description": "Separators between the items including the last and the first one.", - "default": "All", - "name": "All", - "readonly": true + "_ui5since": "1.0.0-rc.16" }, { "kind": "field", - "static": true, + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Defines the IDs of the elements that label the component.", + "default": "undefined", "privacy": "public", - "description": "Separators between the items.\nNote: This enumeration depends on the theme.", - "default": "Inner", - "name": "Inner", - "readonly": true + "_ui5since": "1.0.0-rc.16" }, { "kind": "field", - "static": true, + "name": "loading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if a loading indicator would be displayed over the card.", "privacy": "public", - "description": "No item separators.", - "default": "None", - "name": "None", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ListSeparator", - "module": "dist/types/ListSeparator.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/MenuItemGroupCheckMode.js", - "declarations": [ - { - "kind": "enum", - "name": "MenuItemGroupCheckMode", - "description": "Menu item group check modes.", - "_ui5privacy": "public", - "_ui5since": "2.12.0", - "members": [ + "_ui5since": "2.1.0" + }, { "kind": "field", - "static": true, + "name": "loadingDelay", + "type": { + "text": "number" + }, + "default": "1000", + "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this card.", "privacy": "public", - "description": "default type (items in a group cannot be checked)", - "default": "None", - "name": "None", - "readonly": true + "_ui5since": "2.1.0" + } + ], + "attributes": [ + { + "description": "Defines the accessible name of the component, which is used as the name of the card region and should be unique per card.\n\n**Note:** `accessibleName` should be always set, unless `accessibleNameRef` is set.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Single item check mode (only one item in a group can be checked at a time)", - "default": "Single", - "name": "Single", - "readonly": true + "description": "Defines the IDs of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Multiple items check mode (multiple items in a group can be checked at a time)", - "default": "Multiple", - "name": "Multiple", - "readonly": true + "description": "Defines if a loading indicator would be displayed over the card.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this card.", + "name": "loading-delay", + "default": "1000", + "fieldName": "loadingDelay", + "type": { + "text": "number" + } } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-card", + "customElement": true, + "_ui5privacy": "public" } ], "exports": [ @@ -2653,77 +3039,166 @@ "kind": "js", "name": "default", "declaration": { - "name": "MenuItemGroupCheckMode", - "module": "dist/types/MenuItemGroupCheckMode.js" + "name": "Card", + "module": "dist/Card.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-card", + "declaration": { + "name": "Card", + "module": "dist/Card.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/MessageStripDesign.js", + "path": "dist/CardHeader.js", "declarations": [ { - "kind": "enum", - "name": "MessageStripDesign", - "description": "MessageStrip designs.", - "_ui5privacy": "public", + "kind": "class", + "description": "### Overview\n\nThe `ui5-card-header` is a component, meant to be used as a header of the `ui5-card` component.\nIt displays valuable information, that can be defined with several properties, such as: `titleText`, `subtitleText`, `additionalText`\nand two slots: `avatar` and `action`.\n\n### Keyboard handling\nIn case you enable `interactive` property, you can press the `ui5-card-header` by Space and Enter keys.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/CardHeader\";`", + "name": "CardHeader", + "cssParts": [ + { + "description": "Used to style the root DOM element of the CardHeader", + "name": "root" + }, + { + "description": "Used to style the title of the CardHeader", + "name": "title" + }, + { + "description": "Used to style the subtitle of the CardHeader", + "name": "subtitle" + }, + { + "description": "Used to style the additional text of the CardHeader", + "name": "additional-text" + } + ], + "slots": [ + { + "name": "avatar", + "description": "Defines an avatar image, displayed in the left most part of the header.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + }, + { + "name": "action", + "description": "Defines an action, displayed in the right most part of the header.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "Message should be just an information", - "default": "Information", - "name": "Information", - "readonly": true + "name": "titleText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the title text.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Message is a success message", - "default": "Positive", - "name": "Positive", - "readonly": true + "name": "subtitleText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the subtitle text.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Message is an error", - "default": "Negative", - "name": "Negative", - "readonly": true + "name": "additionalText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the additional text.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Message is a warning", - "default": "Critical", - "name": "Critical", - "readonly": true + "name": "interactive", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the component would be interactive,\ne.g gets hover effect and `click` event is fired, when pressed.", + "privacy": "public" + } + ], + "events": [ + { + "name": "click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the component is activated by mouse/tap or by using the Enter or Space key.\n\n**Note:** The event would be fired only if the `interactive` property is set to true.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ], + "attributes": [ + { + "description": "Defines the title text.", + "name": "title-text", + "default": "undefined", + "fieldName": "titleText", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Message uses custom color set 1", - "default": "ColorSet1", - "name": "ColorSet1", - "readonly": true + "description": "Defines the subtitle text.", + "name": "subtitle-text", + "default": "undefined", + "fieldName": "subtitleText", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Message uses custom color set 2", - "default": "ColorSet2", - "name": "ColorSet2", - "readonly": true + "description": "Defines the additional text.", + "name": "additional-text", + "default": "undefined", + "fieldName": "additionalText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines if the component would be interactive,\ne.g gets hover effect and `click` event is fired, when pressed.", + "name": "interactive", + "default": "false", + "fieldName": "interactive", + "type": { + "text": "boolean" + } } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-card-header", + "customElement": true, + "_ui5since": "1.0.0-rc.15", + "_ui5privacy": "public" } ], "exports": [ @@ -2731,254 +3206,379 @@ "kind": "js", "name": "default", "declaration": { - "name": "MessageStripDesign", - "module": "dist/types/MessageStripDesign.js" + "name": "CardHeader", + "module": "dist/CardHeader.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-card-header", + "declaration": { + "name": "CardHeader", + "module": "dist/CardHeader.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/NotificationListGrowingMode.js", + "path": "dist/Carousel.js", "declarations": [ { - "kind": "enum", - "name": "NotificationListGrowingMode", - "description": "Different notification list growing modes.", - "_ui5privacy": "public", + "kind": "class", + "description": "### Overview\nThe Carousel allows the user to browse through a set of items.\nThe component is mostly used for showing a gallery of images, but can hold any other HTML element.\n\nThere are several ways to perform navigation:\n\n- on desktop - the user can navigate using the navigation arrows or with keyboard shortcuts.\n- on touch devices - the user can navigate using the navigation arrows (always visible) or can use swipe gestures.\n\n### Usage\n\n#### When to use:\n\n- The items you want to display are very different from each other.\n- You want to display the items one after the other.\n\n#### When not to use:\n\n- The items you want to display need to be visible at the same time.\n- The items you want to display are uniform and very similar.\n\n### Hidden Items\n\nCarousel items can be conditionally hidden by adding the `hidden` attribute to any child element.\nHidden items are automatically excluded from carousel navigation and will not be displayed or counted in pagination.\nThis allows for dynamic showing or hiding of carousel items without affecting the overall carousel behavior.\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-carousel` is focused the user can navigate between the items\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] - Navigates to previous and next item\n- [Left] or [Right] - Navigates to previous and next item\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Carousel.js\";`", + "name": "Carousel", + "cssParts": [ + { + "description": "Used to style the content of the component", + "name": "content" + } + ], + "slots": [ + { + "name": "default", + "description": "Defines the content of the component.\n\n**Note:** Items with the `hidden` attribute will be automatically excluded from carousel navigation and page calculations.\nThey will not be displayed or accessible via keyboard navigation. See [sample](./#carousel-with-hidden-items).", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], "members": [ { "kind": "field", - "static": true, + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible name of the component.", + "default": "undefined", "privacy": "public", - "description": "Component's \"load-more\" is fired upon pressing a \"More\" button.\nat the bottom.", - "default": "Button", - "name": "Button", - "readonly": true + "_ui5since": "1.24" }, { "kind": "field", - "static": true, + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Defines the IDs of the elements that label the input.", + "default": "undefined", "privacy": "public", - "description": "Component's growing is not enabled.", - "default": "None", - "name": "None", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "NotificationListGrowingMode", - "module": "dist/types/NotificationListGrowingMode.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/OverflowMode.js", - "declarations": [ - { - "kind": "enum", - "name": "OverflowMode", - "description": "Tabs overflow mode in TabContainer.", - "_ui5privacy": "public", - "members": [ + "_ui5since": "1.24" + }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "End type is used if there should be only one overflow with hidden the tabs at the end of the tab container.", - "default": "End", - "name": "End", - "readonly": true + "name": "cyclic", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "StartAndEnd type is used if there should be two overflows on both ends of the tab container.", - "default": "StartAndEnd", - "name": "StartAndEnd", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "OverflowMode", - "module": "dist/types/OverflowMode.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/PanelAccessibleRole.js", - "declarations": [ - { - "kind": "enum", - "name": "PanelAccessibleRole", - "description": "Panel accessible roles.", - "_ui5privacy": "public", - "members": [ + "name": "itemsPerPage", + "type": { + "text": "string" + }, + "default": "\"S1 M1 L1 XL1\"", + "description": "Defines the number of items per page depending on the carousel width.\n\n- 'S' for screens smaller than 600 pixels.\n- 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n- 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n- 'XL' for screens greater than or equal to 1440 pixels.\n\nOne item per page is shown by default.", + "privacy": "public" + }, { "kind": "field", - "static": true, + "name": "hideNavigationArrows", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.", "privacy": "public", - "description": "Represents the ARIA role \"complementary\".\nA section of the page, designed to be complementary to the main content at a similar level in the DOM hierarchy.", - "default": "Complementary", - "name": "Complementary", - "readonly": true + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "static": true, + "name": "hidePageIndicator", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the visibility of the page indicator.\nIf set to true the page indicator will be hidden.", "privacy": "public", - "description": "Represents the ARIA role \"Form\".\nA landmark region that contains a collection of items and objects that, as a whole, create a form.", - "default": "Form", - "name": "Form", - "readonly": true + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "static": true, + "name": "pageIndicatorType", + "type": { + "text": "CarouselPageIndicatorType", + "references": [ + { + "name": "CarouselPageIndicatorType", + "package": "@ui5/webcomponents", + "module": "dist/types/CarouselPageIndicatorType.js" + } + ] + }, + "default": "\"Default\"", + "description": "Defines the style of the page indicator.\nAvailable options are:\n\n- `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)\n- `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)", "privacy": "public", - "description": "Represents the ARIA role \"Region\".\nA section of a page, that is important enough to be included in a page summary or table of contents.", - "default": "Region", - "name": "Region", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "PanelAccessibleRole", - "module": "dist/types/PanelAccessibleRole.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/PopoverHorizontalAlign.js", - "declarations": [ - { - "kind": "enum", - "name": "PopoverHorizontalAlign", - "description": "Popover horizontal align types.", - "_ui5privacy": "public", - "members": [ + "_ui5since": "1.10" + }, { "kind": "field", - "static": true, + "name": "backgroundDesign", + "type": { + "text": "BackgroundDesign", + "references": [ + { + "name": "BackgroundDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/BackgroundDesign.js" + } + ] + }, + "default": "\"Translucent\"", + "description": "Defines the carousel's background design.", "privacy": "public", - "description": "Popover is centered.", - "default": "Center", - "name": "Center", - "readonly": true + "_ui5since": "1.14" }, { "kind": "field", - "static": true, + "name": "pageIndicatorBackgroundDesign", + "type": { + "text": "BackgroundDesign", + "references": [ + { + "name": "BackgroundDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/BackgroundDesign.js" + } + ] + }, + "default": "\"Solid\"", + "description": "Defines the page indicator background design.", "privacy": "public", - "description": "Popover is aligned with the start of the target.", - "default": "Start", - "name": "Start", - "readonly": true + "_ui5since": "1.14" }, { "kind": "field", - "static": true, + "name": "pageIndicatorBorderDesign", + "type": { + "text": "BorderDesign", + "references": [ + { + "name": "BorderDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/BorderDesign.js" + } + ] + }, + "default": "\"Solid\"", + "description": "Defines the page indicator border design.", "privacy": "public", - "description": "Popover is aligned with the end of the target.", - "default": "End", - "name": "End", - "readonly": true + "_ui5since": "1.14" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Popover is stretched.", - "default": "Stretch", - "name": "Stretch", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "PopoverHorizontalAlign", - "module": "dist/types/PopoverHorizontalAlign.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/PopoverPlacement.js", - "declarations": [ - { - "kind": "enum", - "name": "PopoverPlacement", - "description": "Popover placements.", - "_ui5privacy": "public", - "members": [ + "name": "arrowsPlacement", + "type": { + "text": "CarouselArrowsPlacement", + "references": [ + { + "name": "CarouselArrowsPlacement", + "package": "@ui5/webcomponents", + "module": "dist/types/CarouselArrowsPlacement.js" + } + ] + }, + "default": "\"Content\"", + "description": "Defines the position of arrows.\n\nAvailable options are:\n\n- `Content` - the arrows are placed on the sides of the current page.\n- `Navigation` - the arrows are placed on the sides of the page indicator.", + "privacy": "public" + }, { - "kind": "field", - "static": true, + "kind": "method", + "name": "navigateTo", + "parameters": [ + { + "name": "itemIndex", + "type": { + "text": "number" + }, + "description": "The index of the target page", + "_ui5privacy": "public" + } + ], + "description": "Changes the currently displayed page.", "privacy": "public", - "description": "Popover will be placed at the start of the reference element.", - "default": "Start", - "name": "Start", - "readonly": true + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "static": true, + "name": "visibleItemsIndices", + "type": { + "text": "Array<number>" + }, + "description": "The indices of the currently visible items of the component.", "privacy": "public", - "description": "Popover will be placed at the end of the reference element.", - "default": "End", - "name": "End", - "readonly": true + "default": "[]", + "readonly": true, + "_ui5since": "1.0.0-rc.15" + } + ], + "events": [ + { + "name": "navigate", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<CarouselNavigateEventDetail>", + "references": [ + { + "name": "CarouselNavigateEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Carousel.js" + } + ] + }, + "description": "Fired whenever the page changes due to user interaction,\nwhen the user clicks on the navigation arrows or while resizing,\nbased on the `items-per-page` property.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.0.0-rc.7", + "_ui5parameters": [ + { + "type": { + "text": "Integer" + }, + "name": "selectedIndex", + "_ui5privacy": "public", + "description": "the current selected index" + } + ] + } + ], + "attributes": [ + { + "description": "Defines the accessible name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Popover will be placed at the top of the reference element.", - "default": "Top", - "name": "Top", - "readonly": true + "description": "Defines the IDs of the elements that label the input.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Popover will be placed at the bottom of the reference element.", - "default": "Bottom", - "name": "Bottom", - "readonly": true + "description": "Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.", + "name": "cyclic", + "default": "false", + "fieldName": "cyclic", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the number of items per page depending on the carousel width.\n\n- 'S' for screens smaller than 600 pixels.\n- 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n- 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n- 'XL' for screens greater than or equal to 1440 pixels.\n\nOne item per page is shown by default.", + "name": "items-per-page", + "default": "\"S1 M1 L1 XL1\"", + "fieldName": "itemsPerPage", + "type": { + "text": "string" + } + }, + { + "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.", + "name": "hide-navigation-arrows", + "default": "false", + "fieldName": "hideNavigationArrows", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the visibility of the page indicator.\nIf set to true the page indicator will be hidden.", + "name": "hide-page-indicator", + "default": "false", + "fieldName": "hidePageIndicator", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the style of the page indicator.\nAvailable options are:\n\n- `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)\n- `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)", + "name": "page-indicator-type", + "default": "\"Default\"", + "fieldName": "pageIndicatorType", + "type": { + "text": "\"Default\" | \"Numeric\"" + } + }, + { + "description": "Defines the carousel's background design.", + "name": "background-design", + "default": "\"Translucent\"", + "fieldName": "backgroundDesign", + "type": { + "text": "\"Transparent\" | \"Solid\" | \"Translucent\"" + } + }, + { + "description": "Defines the page indicator background design.", + "name": "page-indicator-background-design", + "default": "\"Solid\"", + "fieldName": "pageIndicatorBackgroundDesign", + "type": { + "text": "\"Transparent\" | \"Solid\" | \"Translucent\"" + } + }, + { + "description": "Defines the page indicator border design.", + "name": "page-indicator-border-design", + "default": "\"Solid\"", + "fieldName": "pageIndicatorBorderDesign", + "type": { + "text": "\"None\" | \"Solid\"" + } + }, + { + "description": "Defines the position of arrows.\n\nAvailable options are:\n\n- `Content` - the arrows are placed on the sides of the current page.\n- `Navigation` - the arrows are placed on the sides of the page indicator.", + "name": "arrows-placement", + "default": "\"Content\"", + "fieldName": "arrowsPlacement", + "type": { + "text": "\"Content\" | \"Navigation\"" + } + }, + { + "description": "The indices of the currently visible items of the component.", + "name": "visible-items-indices", + "default": "[]", + "fieldName": "visibleItemsIndices", + "type": { + "text": "any" + } } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-carousel", + "customElement": true, + "_ui5since": "1.0.0-rc.6", + "_ui5privacy": "public" } ], "exports": [ @@ -2986,221 +3586,335 @@ "kind": "js", "name": "default", "declaration": { - "name": "PopoverPlacement", - "module": "dist/types/PopoverPlacement.js" + "name": "Carousel", + "module": "dist/Carousel.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-carousel", + "declaration": { + "name": "Carousel", + "module": "dist/Carousel.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/PopoverVerticalAlign.js", + "path": "dist/CheckBox.js", "declarations": [ { - "kind": "enum", - "name": "PopoverVerticalAlign", - "description": "Popover vertical align types.", - "_ui5privacy": "public", + "kind": "class", + "description": "### Overview\n\nAllows the user to set a binary value, such as true/false or yes/no for an item.\n\nThe `ui5-checkbox` component consists of a box and a label that describes its purpose.\nIf it's checked, an indicator is displayed inside the box.\nTo check/uncheck the `ui5-checkbox`, the user has to click or tap the square\nbox or its label.\n\nThe `ui5-checkbox` component only has 2 states - checked and unchecked.\nClicking or tapping toggles the `ui5-checkbox` between checked and unchecked state.\n\n### Usage\n\nYou can define the checkbox text with via the `text` property. If the text exceeds the available width, it is truncated by default.\nIn case you prefer text to truncate, set the `wrappingType` property to \"None\".\nThe touchable area for toggling the `ui5-checkbox` ends where the text ends.\n\nYou can disable the `ui5-checkbox` by setting the `disabled` property to\n`true`,\nor use the `ui5-checkbox` in read-only mode by setting the `readonly`\nproperty to `true`.\n\n### Keyboard Handling\n\nThe user can use the following keyboard shortcuts to toggle the checked state of the `ui5-checkbox`.\n\n- [Space],[Enter] - Toggles between different states: checked, not checked.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/CheckBox.js\";`", + "name": "CheckBox", + "cssParts": [ + { + "description": "Used to style the outermost wrapper of the `ui5-checkbox`", + "name": "root" + }, + { + "description": "Used to style the label of the `ui5-checkbox`", + "name": "label" + }, + { + "description": "Used to style the icon of the `ui5-checkbox`", + "name": "icon" + } + ], "members": [ { "kind": "field", - "static": true, + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that label the component", + "default": "undefined", "privacy": "public", - "default": "Center", - "name": "Center", - "readonly": true + "_ui5since": "1.1.0" }, { "kind": "field", - "static": true, + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the component.", "privacy": "public", - "description": "Popover will be placed at the top of the reference control.", - "default": "Top", - "name": "Top", - "readonly": true + "default": "undefined", + "_ui5since": "1.1.0" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Popover will be placed at the bottom of the reference control.", - "default": "Bottom", - "name": "Bottom", - "readonly": true + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Popover will be streched", - "default": "Stretch", - "name": "Stretch", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "PopoverVerticalAlign", - "module": "dist/types/PopoverVerticalAlign.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/PopupAccessibleRole.js", - "declarations": [ - { - "kind": "enum", - "name": "PopupAccessibleRole", - "description": "Popup accessible roles.", - "_ui5privacy": "public", - "members": [ + "name": "readonly", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "privacy": "public" + }, { "kind": "field", - "static": true, + "name": "displayOnly", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the `ui5-checkbox` is in display only state.\n\nWhen set to `true`, the `ui5-checkbox` is not interactive, not editable, not focusable\nand not in the tab chain. This setting is used for forms in review mode.\n\n**Note:** When the property `disabled` is set to `true` this property has no effect.", "privacy": "public", - "description": "Represents no ARIA role.", - "default": "None", - "name": "None", - "readonly": true + "_ui5since": "1.22.0" }, { "kind": "field", - "static": true, + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is required.\n\n**Note:** We advise against using the text property of the checkbox when there is a\nlabel associated with it to avoid having two required asterisks.", "privacy": "public", - "description": "Represents the ARIA role \"dialog\".", - "default": "Dialog", - "name": "Dialog", - "readonly": true + "_ui5since": "1.3.0" }, { "kind": "field", - "static": true, + "name": "indeterminate", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is displayed as partially checked.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction and the resulting visual state depends on the values of the `indeterminate`\nand `checked` properties:\n\n- If the component is checked and indeterminate, it will be displayed as partially checked\n- If the component is checked and it is not indeterminate, it will be displayed as checked\n- If the component is not checked, it will be displayed as not checked regardless value of the indeterminate attribute", "privacy": "public", - "description": "Represents the ARIA role \"alertdialog\".", - "default": "AlertDialog", - "name": "AlertDialog", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "PopupAccessibleRole", - "module": "dist/types/PopupAccessibleRole.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/Priority.js", - "declarations": [ - { - "kind": "enum", - "name": "Priority", - "description": "Different types of Priority.", - "_ui5privacy": "public", - "members": [ + "_ui5since": "1.0.0-rc.15" + }, { "kind": "field", - "static": true, + "name": "checked", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the component is checked.\n\n**Note:** The property can be changed with user interaction,\neither by cliking/tapping on the component, or by\npressing the Enter or Space key.", "privacy": "public", - "description": "High priority.", - "default": "High", - "name": "High", - "readonly": true + "_ui5formProperty": true, + "_ui5formEvents": "change" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Medium priority.", - "default": "Medium", - "name": "Medium", - "readonly": true + "name": "text", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text of the component.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Low priority.", - "default": "Low", - "name": "Low", - "readonly": true + "name": "valueState", + "type": { + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Default, none priority.", - "default": "None", - "name": "None", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "Priority", - "module": "dist/types/Priority.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/RatingIndicatorSize.js", - "declarations": [ - { - "kind": "enum", - "name": "RatingIndicatorSize", - "description": "Types of icon sizes used in the RatingIndicator.\nProvides predefined size categories to ensure consistent scaling and spacing of icons.", - "_ui5privacy": "public", - "_ui5since": "2.6.0", - "members": [ + "name": "wrappingType", + "type": { + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] + }, + "default": "\"Normal\"", + "description": "Defines whether the component text wraps when there is not enough space.\n\n**Note:** for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.\n**Note:** for option \"None\" the text will be truncated with an ellipsis.", + "privacy": "public" + }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Small size for compact layouts.", - "default": "S", - "name": "S", - "readonly": true + "name": "name", + "type": { + "text": "string | undefined" + }, + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Medium size, used as the default option.\nOffers a balanced appearance for most scenarios.", - "default": "M", - "name": "M", - "readonly": true + "name": "value", + "type": { + "text": "string" + }, + "default": "\"on\"", + "description": "Defines the form value of the component that is submitted when the checkbox is checked.\n\nWhen a form containing `ui5-checkbox` elements is submitted, only the values of the\n**checked** checkboxes are included in the form data sent to the server. Unchecked\ncheckboxes do not contribute any data to the form submission.\n\nThis property is particularly useful for **checkbox groups**, where multiple checkboxes with the same `name` but different `value` properties can be used to represent a set of related options.", + "privacy": "public" + } + ], + "events": [ + { + "name": "change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the component checked state changes.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true + } + ], + "attributes": [ + { + "description": "Receives id(or many ids) of the elements that label the component", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Large size for prominent or spacious layouts.", - "default": "L", - "name": "L", - "readonly": true + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", + "type": { + "text": "boolean" + } + }, + { + "description": "Determines whether the `ui5-checkbox` is in display only state.\n\nWhen set to `true`, the `ui5-checkbox` is not interactive, not editable, not focusable\nand not in the tab chain. This setting is used for forms in review mode.\n\n**Note:** When the property `disabled` is set to `true` this property has no effect.", + "name": "display-only", + "default": "false", + "fieldName": "displayOnly", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the component is required.\n\n**Note:** We advise against using the text property of the checkbox when there is a\nlabel associated with it to avoid having two required asterisks.", + "name": "required", + "default": "false", + "fieldName": "required", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the component is displayed as partially checked.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction and the resulting visual state depends on the values of the `indeterminate`\nand `checked` properties:\n\n- If the component is checked and indeterminate, it will be displayed as partially checked\n- If the component is checked and it is not indeterminate, it will be displayed as checked\n- If the component is not checked, it will be displayed as not checked regardless value of the indeterminate attribute", + "name": "indeterminate", + "default": "false", + "fieldName": "indeterminate", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines if the component is checked.\n\n**Note:** The property can be changed with user interaction,\neither by cliking/tapping on the component, or by\npressing the Enter or Space key.", + "name": "checked", + "default": "false", + "fieldName": "checked", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the text of the component.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", + "type": { + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + } + }, + { + "description": "Defines whether the component text wraps when there is not enough space.\n\n**Note:** for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.\n**Note:** for option \"None\" the text will be truncated with an ellipsis.", + "name": "wrapping-type", + "default": "\"Normal\"", + "fieldName": "wrappingType", + "type": { + "text": "\"None\" | \"Normal\"" + } + }, + { + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the form value of the component that is submitted when the checkbox is checked.\n\nWhen a form containing `ui5-checkbox` elements is submitted, only the values of the\n**checked** checkboxes are included in the form data sent to the server. Unchecked\ncheckboxes do not contribute any data to the form submission.\n\nThis property is particularly useful for **checkbox groups**, where multiple checkboxes with the same `name` but different `value` properties can be used to represent a set of related options.", + "name": "value", + "default": "\"on\"", + "fieldName": "value", + "type": { + "text": "string" + } } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-checkbox", + "customElement": true, + "_ui5privacy": "public" } ], "exports": [ @@ -3208,41 +3922,93 @@ "kind": "js", "name": "default", "declaration": { - "name": "RatingIndicatorSize", - "module": "dist/types/RatingIndicatorSize.js" + "name": "CheckBox", + "module": "dist/CheckBox.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-checkbox", + "declaration": { + "name": "CheckBox", + "module": "dist/CheckBox.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/SegmentedButtonSelectionMode.js", + "path": "dist/ColorPalette.js", "declarations": [ { - "kind": "enum", - "name": "SegmentedButtonSelectionMode", - "description": "Different SegmentedButton selection modes.", - "_ui5privacy": "public", - "members": [ + "kind": "interface", + "name": "IColorPaletteItem", + "description": "Interface for components that may be used inside a `ui5-color-palette` or `ui5-color-palette-popover`", + "_ui5privacy": "public" + }, + { + "kind": "class", + "description": "### Overview\nThe `ui5-color-palette` provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.\n\n### Usage\n\nThe `ui5-color-palette` is meant for users that need to select a color from a predefined set.\nTo define the colors, use the `ui5-color-palette-item` component inside the default slot of the `ui5-color-palette`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ColorPalette.js\";`", + "name": "ColorPalette", + "slots": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "There is always one selected. Selecting one deselects the previous one.", - "default": "Single", - "name": "Single", - "readonly": true - }, + "name": "default", + "description": "Defines the `ui5-color-palette-item` elements.", + "_ui5propertyName": "colors", + "_ui5type": { + "text": "Array<IColorPaletteItem>", + "references": [ + { + "name": "IColorPaletteItem", + "package": "@ui5/webcomponents", + "module": "dist/ColorPalette.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "events": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Multiple items can be selected at a time. All items can be deselected.", - "default": "Multiple", - "name": "Multiple", - "readonly": true + "name": "item-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ColorPaletteItemClickEventDetail>", + "references": [ + { + "name": "ColorPaletteItemClickEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ColorPalette.js" + } + ] + }, + "description": "Fired when the user selects a color.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "1.0.0-rc.15", + "_ui5parameters": [ + { + "type": { + "text": "string" + }, + "name": "color", + "_ui5privacy": "public", + "description": "the selected color" + } + ] } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-color-palette", + "customElement": true, + "_ui5since": "1.0.0-rc.12", + "_ui5privacy": "public", + "members": [] } ], "exports": [ @@ -3250,108 +4016,85 @@ "kind": "js", "name": "default", "declaration": { - "name": "SegmentedButtonSelectionMode", - "module": "dist/types/SegmentedButtonSelectionMode.js" + "name": "ColorPalette", + "module": "dist/ColorPalette.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-color-palette", + "declaration": { + "name": "ColorPalette", + "module": "dist/ColorPalette.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/SemanticColor.js", + "path": "dist/ColorPaletteItem.js", "declarations": [ { - "kind": "enum", - "name": "SemanticColor", - "description": "Different types of SemanticColor.", - "_ui5privacy": "public", + "kind": "class", + "description": "### Overview\n\nThe `ui5-color-palette-item` component represents a color in the the `ui5-color-palette`.", + "name": "ColorPaletteItem", "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "Default color (brand color)", - "default": "Default", - "name": "Default", - "readonly": true + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the colour of the component.\n\n**Note:** The value should be a valid CSS color.", + "privacy": "public" }, { "kind": "field", - "static": true, + "name": "selected", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the component is selected.\n\n**Note:** Only one item must be selected per <code>ui5-color-palette</code>.\nIf more than one item is defined as selected, the last one would be considered as the selected one.", "privacy": "public", - "description": "Positive color", - "default": "Positive", - "name": "Positive", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Negative color", - "default": "Negative", - "name": "Negative", - "readonly": true - }, + "_ui5since": "2.0.0" + } + ], + "attributes": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Critical color", - "default": "Critical", - "name": "Critical", - "readonly": true + "description": "Defines the colour of the component.\n\n**Note:** The value should be a valid CSS color.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Neutral color.", - "default": "Neutral", - "name": "Neutral", - "readonly": true + "description": "Defines if the component is selected.\n\n**Note:** Only one item must be selected per <code>ui5-color-palette</code>.\nIf more than one item is defined as selected, the last one would be considered as the selected one.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "SemanticColor", - "module": "dist/types/SemanticColor.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/SwitchDesign.js", - "declarations": [ - { - "kind": "enum", - "name": "SwitchDesign", - "description": "Different types of Switch designs.", + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-color-palette-item", + "customElement": true, + "_ui5since": "1.0.0-rc.12", "_ui5privacy": "public", - "members": [ - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Defines the Switch as Textual", - "default": "Textual", - "name": "Textual", - "readonly": true - }, + "_ui5implements": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Defines the Switch as Graphical", - "default": "Graphical", - "name": "Graphical", - "readonly": true + "name": "IColorPaletteItem", + "package": "@ui5/webcomponents", + "module": "dist/ColorPalette.js" } ] } @@ -3361,163 +4104,217 @@ "kind": "js", "name": "default", "declaration": { - "name": "SwitchDesign", - "module": "dist/types/SwitchDesign.js" + "name": "ColorPaletteItem", + "module": "dist/ColorPaletteItem.js" } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/TabContainerTabsPlacement.js", - "declarations": [], - "exports": [ + }, { - "kind": "js", - "name": "default", + "kind": "custom-element-definition", + "name": "ui5-color-palette-item", "declaration": { - "name": "TabContainerTabsPlacement", - "module": "dist/types/TabContainerTabsPlacement.js" + "name": "ColorPaletteItem", + "module": "dist/ColorPaletteItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/TabLayout.js", + "path": "dist/ColorPalettePopover.js", "declarations": [ { - "kind": "enum", - "name": "TabLayout", - "description": "Tab layout of TabContainer.", - "_ui5privacy": "public", + "kind": "class", + "description": "### Overview\nRepresents a predefined range of colors for easier selection.\n\nOverview\nThe ColorPalettePopover provides the users with a slot to predefine colors.\n\nYou can customize them with the use of the colors property. You can specify a defaultColor and display a \"Default color\" button for the user to choose directly.\nYou can display a \"More colors...\" button that opens an additional color picker for the user to choose specific colors that are not present in the predefined range.\n\n### Usage\n\nThe palette is intended for users, who don't want to check and remember the different values of the colors and spend large amount of time to configure the right color through the color picker.\n\nFor the `ui5-color-palette-popover`\n### ES6 Module Import\n\n`import @ui5/webcomponents/dist/ColorPalettePopover.js\";`", + "name": "ColorPalettePopover", + "slots": [ + { + "name": "default", + "description": "Defines the content of the component.", + "_ui5propertyName": "colors", + "_ui5type": { + "text": "Array<IColorPaletteItem>", + "references": [ + { + "name": "IColorPaletteItem", + "package": "@ui5/webcomponents", + "module": "dist/ColorPalette.js" + } + ] + }, + "_ui5privacy": "public" + } + ], "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "Inline type, the tab \"main text\" and \"additionalText\" are displayed horizotally.", - "default": "Inline", - "name": "Inline", - "readonly": true + "name": "showRecentColors", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the user can see the last used colors in the bottom of the component", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Standard type, the tab \"main text\" and \"additionalText\" are displayed vertically.", - "default": "Standard", - "name": "Standard", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TabLayout", - "module": "dist/types/TabLayout.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/TableCellHorizontalAlign.js", - "declarations": [ - { - "kind": "enum", - "name": "TableCellHorizontalAlign", - "description": "Alignment of the <ui5-table-cell> component.", - "_ui5experimental": true, - "_ui5privacy": "public", - "members": [ + "name": "showMoreColors", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the user can choose a custom color from a component.", + "privacy": "public" + }, { "kind": "field", - "static": true, - "privacy": "public", - "default": "Left", - "name": "Left", - "readonly": true + "name": "showDefaultColor", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the user can choose the default color from a button.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "default": "Start", - "name": "Start", - "readonly": true + "name": "defaultColor", + "type": { + "text": "string | undefined" + }, + "description": "Defines the default color of the component.\n\n**Note:** The default color should be a part of the ColorPalette colors`", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "static": true, + "name": "open", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the open | closed state of the popover.", "privacy": "public", - "default": "Right", - "name": "Right", - "readonly": true + "_ui5since": "1.21.0" }, { "kind": "field", - "static": true, + "name": "opener", + "type": { + "text": "HTMLElement | string | null | undefined" + }, + "description": "Defines the ID or DOM Reference of the element that the popover is shown at.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", "privacy": "public", - "default": "End", - "name": "End", - "readonly": true + "default": "undefined", + "_ui5since": "1.21.0" + } + ], + "events": [ + { + "name": "item-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ColorPalettePopoverItemClickEventDetail>", + "references": [ + { + "name": "ColorPalettePopoverItemClickEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ColorPalettePopover.js" + } + ] + }, + "description": "Fired when the user selects a color.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "string" + }, + "name": "color", + "_ui5privacy": "public", + "description": "the selected color" + } + ] }, { - "kind": "field", - "static": true, - "privacy": "public", - "default": "Center", - "name": "Center", - "readonly": true + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the `ui5-color-palette-popover` is closed due to user interaction.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.21.0" } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableCellHorizontalAlign", - "module": "dist/types/TableCellHorizontalAlign.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/TableGrowingMode.js", - "declarations": [ - { - "kind": "enum", - "name": "TableGrowingMode", - "description": "Growing mode of the <ui5-table> component.", - "_ui5privacy": "public", - "members": [ + ], + "attributes": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Renders a growing button, which can be pressed to load more data.", - "default": "Button", - "name": "Button", - "readonly": true + "description": "Defines whether the user can see the last used colors in the bottom of the component", + "name": "show-recent-colors", + "default": "false", + "fieldName": "showRecentColors", + "type": { + "text": "boolean" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Scroll to load more data.\n\n**Note:** If the table is not scrollable, a growing button will be rendered instead to ensure growing functionality.", - "default": "Scroll", - "name": "Scroll", - "readonly": true + "description": "Defines whether the user can choose a custom color from a component.", + "name": "show-more-colors", + "default": "false", + "fieldName": "showMoreColors", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the user can choose the default color from a button.", + "name": "show-default-color", + "default": "false", + "fieldName": "showDefaultColor", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the default color of the component.\n\n**Note:** The default color should be a part of the ColorPalette colors`", + "name": "default-color", + "default": "undefined", + "fieldName": "defaultColor", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the open | closed state of the popover.", + "name": "open", + "default": "false", + "fieldName": "open", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the ID or DOM Reference of the element that the popover is shown at.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", + "name": "opener", + "default": "undefined", + "fieldName": "opener", + "type": { + "text": "string | HTMLElement | null | undefined" + } } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-color-palette-popover", + "customElement": true, + "_ui5since": "1.0.0-rc.16", + "_ui5privacy": "public" } ], "exports": [ @@ -3525,42 +4322,113 @@ "kind": "js", "name": "default", "declaration": { - "name": "TableGrowingMode", - "module": "dist/types/TableGrowingMode.js" + "name": "ColorPalettePopover", + "module": "dist/ColorPalettePopover.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-color-palette-popover", + "declaration": { + "name": "ColorPalettePopover", + "module": "dist/ColorPalettePopover.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/TableOverflowMode.js", + "path": "dist/ColorPicker.js", "declarations": [ { - "kind": "enum", - "name": "TableOverflowMode", - "description": "Overflow mode of the <ui5-table> component.", - "_ui5experimental": true, - "_ui5privacy": "public", + "kind": "class", + "description": "### Overview\nThe `ui5-color-picker` allows users to choose any color and provides different input options for selecting colors.\n\n### Usage\n\n#### When to use\nUse the color picker if:\n\n- users need to select any color freely.\n\n#### When not to use\n\n- Users need to select one color from a predefined set of colors. Use the ColorPalette component instead.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ColorPicker.js\";`", + "name": "ColorPicker", "members": [ { "kind": "field", - "static": true, + "name": "value", + "type": { + "text": "string" + }, + "default": "\"rgba(255,255,255,1)\"", + "description": "Defines the currently selected color of the component.\n\n**Note**: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.", + "privacy": "public" + }, + { + "kind": "field", + "name": "name", + "type": { + "text": "string | undefined" + }, + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", "privacy": "public", - "description": "Shows a scrollbar, when the table cannot fit all columns.", - "default": "Scroll", - "name": "Scroll", - "readonly": true + "_ui5since": "2.0.0" }, { "kind": "field", - "static": true, + "name": "simplified", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "When set to `true`, the alpha slider and inputs for RGB values will not be displayed.", "privacy": "public", - "description": "Pops in columns, that do not fit into the table anymore.", - "default": "Popin", - "name": "Popin", - "readonly": true + "_ui5since": "2.5.0" } - ] + ], + "events": [ + { + "name": "change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the the selected color is changed", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ], + "attributes": [ + { + "description": "Defines the currently selected color of the component.\n\n**Note**: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.", + "name": "value", + "default": "\"rgba(255,255,255,1)\"", + "fieldName": "value", + "type": { + "text": "string" + } + }, + { + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + } + }, + { + "description": "When set to `true`, the alpha slider and inputs for RGB values will not be displayed.", + "name": "simplified", + "default": "false", + "fieldName": "simplified", + "type": { + "text": "boolean" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-color-picker", + "customElement": true, + "_ui5since": "1.0.0-rc.12", + "_ui5privacy": "public" } ], "exports": [ @@ -3568,577 +4436,461 @@ "kind": "js", "name": "default", "declaration": { - "name": "TableOverflowMode", - "module": "dist/types/TableOverflowMode.js" + "name": "ColorPicker", + "module": "dist/ColorPicker.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-color-picker", + "declaration": { + "name": "ColorPicker", + "module": "dist/ColorPicker.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/TableSelectionBehavior.js", + "path": "dist/ComboBox.js", "declarations": [ { - "kind": "enum", - "name": "TableSelectionBehavior", - "description": "Selection behavior of the `ui5-table` selection components.", - "_ui5privacy": "public", - "_ui5since": "2.11", - "members": [ - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Rows can only be selected by using the row selector column.", - "default": "RowSelector", - "name": "RowSelector", - "readonly": true - }, - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Rows can only be selected by clicking directly on the row, as the row selector column is hidden.\n\n**Note:** In this mode, the `row-click` event of the `ui5-table` component is not fired.", - "default": "RowOnly", - "name": "RowOnly", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableSelectionBehavior", - "module": "dist/types/TableSelectionBehavior.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/TableSelectionMode.js", - "declarations": [ + "kind": "interface", + "name": "IComboBoxItem", + "description": "Interface for components that may be slotted inside a `ui5-combobox`", + "_ui5privacy": "public" + }, { - "kind": "enum", - "name": "TableSelectionMode", - "description": "Selection modes of the <ui5-table> component.", - "_ui5experimental": true, - "_ui5privacy": "public", - "deprecated": "This component is deprecated and will be removed in future releases. Use the `ui5-table-selection-single` or `ui5-table-selection-multi` components instead.", - "members": [ + "kind": "class", + "description": "### Overview\n\nThe `ui5-combobox` component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.\n\nIt is commonly used to enable users to select an option from a predefined list.\n\n### Structure\nThe `ui5-combobox` consists of the following elements:\n\n- Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value.\n- Drop-down arrow - expands\\collapses the option list.\n- Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-combobox` provides advanced keyboard handling.\n\n- [F4], [Alt]+[Up], or [Alt]+[Down] - Toggles the picker.\n- [Escape] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.\n- [Enter] or [Return] - If picker is open, takes over the currently selected item and closes it.\n- [Down] - Selects the next matching item in the picker.\n- [Up] - Selects the previous matching item in the picker.\n- [Page Down] - Moves selection down by page size (10 items by default).\n- [Page Up] - Moves selection up by page size (10 items by default).\n- [Home] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.\n- [End] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.\n- [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ComboBox.js\";`", + "name": "ComboBox", + "slots": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Default mode (no selection).", - "default": "None", - "name": "None", - "readonly": true + "name": "default", + "description": "Defines the component items.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<IComboBoxItem>", + "references": [ + { + "name": "IComboBoxItem", + "package": "@ui5/webcomponents", + "module": "dist/ComboBox.js" + } + ] + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Single selection mode (only one table row can be selected).", - "default": "Single", - "name": "Single", - "readonly": true + "name": "valueStateMessage", + "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the `ui5-combobox` is in `Information`, `Critical` or `Negative` value state.", + "_ui5since": "1.0.0-rc.9", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Multi selection mode (more than one table row can be selected).", - "default": "Multiple", - "name": "Multiple", - "readonly": true + "name": "icon", + "description": "Defines the icon to be displayed in the input field.", + "_ui5since": "1.0.0-rc.9", + "_ui5type": { + "text": "Array<IIcon>", + "references": [ + { + "name": "IIcon", + "package": "@ui5/webcomponents", + "module": "dist/Icon.js" + } + ] + }, + "_ui5privacy": "public" } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableSelectionMode", - "module": "dist/types/TableSelectionMode.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/TableSelectionMultiHeaderSelector.js", - "declarations": [ - { - "kind": "enum", - "name": "TableSelectionMultiHeaderSelector", - "description": "Selectors of the table header row in multi-selection scenarios.", - "_ui5privacy": "public", - "_ui5since": "2.12", + ], "members": [ { "kind": "field", - "static": true, + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the value of the component.", "privacy": "public", - "description": "Renders a checkbox in the table header row that toggles the selection of all rows.", - "default": "SelectAll", - "name": "SelectAll", - "readonly": true + "_ui5formProperty": true, + "_ui5formEvents": "change,input" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Renders an icon in the table header row that removes the selection of all rows.", - "default": "ClearAll", - "name": "ClearAll", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableSelectionMultiHeaderSelector", - "module": "dist/types/TableSelectionMultiHeaderSelector.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/TagDesign.js", - "declarations": [ - { - "kind": "enum", - "name": "TagDesign", - "description": "Defines tag design types.", - "_ui5privacy": "public", - "members": [ - { - "kind": "field", - "static": true, + "name": "name", + "type": { + "text": "string | undefined" + }, + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", "privacy": "public", - "description": "Set1 of generic indication colors that are intended for industry-specific use cases", - "default": "Set1", - "name": "Set1", - "readonly": true + "_ui5since": "2.0.0" }, { "kind": "field", - "static": true, + "name": "noTypeahead", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the value will be autocompleted to match an item", "privacy": "public", - "description": "Set2 of generic indication colors that are intended for industry-specific use cases", - "default": "Set2", - "name": "Set2", - "readonly": true + "_ui5since": "1.19.0" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Neutral design", - "default": "Neutral", - "name": "Neutral", - "readonly": true + "name": "placeholder", + "type": { + "text": "string | undefined" + }, + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Information design", - "default": "Information", - "name": "Information", - "readonly": true + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Positive design", - "default": "Positive", - "name": "Positive", - "readonly": true + "name": "valueState", + "type": { + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Negative design", - "default": "Negative", - "name": "Negative", - "readonly": true + "name": "readonly", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Critical design", - "default": "Critical", - "name": "Critical", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TagDesign", - "module": "dist/types/TagDesign.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/TagSize.js", - "declarations": [ - { - "kind": "enum", - "name": "TagSize", - "description": "Predefined sizes for the tag.", - "_ui5privacy": "public", - "members": [ + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is required.", + "privacy": "public" + }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Small size of the tag", - "default": "S", - "name": "S", - "readonly": true + "name": "loading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether a loading indicator should be shown in the picker.", + "privacy": "public" }, { "kind": "field", - "static": true, - "privacy": "public", - "description": "Large size of the tag", - "default": "L", - "name": "L", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TagSize", - "module": "dist/types/TagSize.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/TextEmptyIndicatorMode.js", - "declarations": [ - { - "kind": "enum", - "name": "TextEmptyIndicatorMode", - "description": "Empty Indicator Mode.", - "_ui5privacy": "public", - "members": [ + "name": "filter", + "type": { + "text": "ComboBoxFilter", + "references": [ + { + "name": "ComboBoxFilter", + "package": "@ui5/webcomponents", + "module": "dist/types/ComboBoxFilter.js" + } + ] + }, + "default": "\"StartsWithPerTerm\"", + "description": "Defines the filter type of the component.", + "privacy": "public" + }, { "kind": "field", - "static": true, + "name": "showClearIcon", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the clear icon of the combobox will be shown.", "privacy": "public", - "description": "Empty indicator is never rendered.", - "default": "Off", - "name": "Off", - "readonly": true + "_ui5since": "1.20.1" }, { "kind": "field", - "static": true, + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", "privacy": "public", - "description": "Empty indicator is rendered always when the component's content is empty.", - "default": "On", - "name": "On", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TextEmptyIndicatorMode", - "module": "dist/types/TextEmptyIndicatorMode.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/TitleLevel.js", - "declarations": [ - { - "kind": "enum", - "name": "TitleLevel", - "description": "Different types of Title level.", - "_ui5privacy": "public", - "members": [ + "_ui5since": "1.0.0-rc.15" + }, { "kind": "field", - "static": true, + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that label the component", + "default": "undefined", "privacy": "public", - "description": "Renders `h1` tag.", - "default": "H1", - "name": "H1", - "readonly": true + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "static": true, + "name": "open", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether the items picker is open.", "privacy": "public", - "description": "Renders `h2` tag.", - "default": "H2", - "name": "H2", - "readonly": true + "_ui5since": "2.9.0" + } + ], + "events": [ + { + "name": "change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the input operation has finished by pressing Enter, focusout or an item is selected.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Renders `h3` tag.", - "default": "H3", - "name": "H3", - "readonly": true + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the dropdown is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.9.0" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Renders `h4` tag.", - "default": "H4", - "name": "H4", - "readonly": true + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the dropdown is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.9.0" }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Renders `h5` tag.", - "default": "H5", - "name": "H5", - "readonly": true + "name": "input", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Renders `h6` tag.", - "default": "H6", - "name": "H6", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TitleLevel", - "module": "dist/types/TitleLevel.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/ToastPlacement.js", - "declarations": [ - { - "kind": "enum", - "name": "ToastPlacement", - "description": "Toast placement.", - "_ui5privacy": "public", - "members": [ + "name": "selection-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ComboBoxSelectionChangeEventDetail>", + "references": [ + { + "name": "ComboBoxSelectionChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ComboBox.js" + } + ] + }, + "description": "Fired when selection is changed by user interaction", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "IComboBoxItem", + "references": [ + { + "name": "IComboBoxItem", + "package": "@ui5/webcomponents", + "module": "dist/ComboBox.js" + } + ] + }, + "name": "item", + "_ui5privacy": "public", + "description": "item to be selected." + } + ] + } + ], + "attributes": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Toast is placed at the `TopStart` position of its container.", - "default": "TopStart", - "name": "TopStart", - "readonly": true + "description": "Defines the value of the component.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Toast is placed at the `TopCenter` position of its container.", - "default": "TopCenter", - "name": "TopCenter", - "readonly": true + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Toast is placed at the `TopEnd` position of its container.", - "default": "TopEnd", - "name": "TopEnd", - "readonly": true + "description": "Defines whether the value will be autocompleted to match an item", + "name": "no-typeahead", + "default": "false", + "fieldName": "noTypeahead", + "type": { + "text": "boolean" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Toast is placed at the `MiddleStart` position of its container.", - "default": "MiddleStart", - "name": "MiddleStart", - "readonly": true + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "name": "placeholder", + "default": "undefined", + "fieldName": "placeholder", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Toast is placed at the `MiddleCenter` position of its container.", - "default": "MiddleCenter", - "name": "MiddleCenter", - "readonly": true + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Toast is placed at the `MiddleEnd` position of its container.", - "default": "MiddleEnd", - "name": "MiddleEnd", - "readonly": true + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", + "type": { + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Toast is placed at the `BottomStart` position of its container.", - "default": "BottomStart", - "name": "BottomStart", - "readonly": true + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", + "type": { + "text": "boolean" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Toast is placed at the `BottomCenter` position of its container.\nDefault placement (no selection)", - "default": "BottomCenter", - "name": "BottomCenter", - "readonly": true + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", + "type": { + "text": "boolean" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Toast is placed at the `BottomEnd` position of its container.", - "default": "BottomEnd", - "name": "BottomEnd", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ToastPlacement", - "module": "dist/types/ToastPlacement.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/ToolbarAlign.js", - "declarations": [ - { - "kind": "enum", - "name": "ToolbarAlign", - "description": "Defines which direction the items of ui5-toolbar will be aligned.", - "_ui5privacy": "public", - "members": [ + "description": "Indicates whether a loading indicator should be shown in the picker.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" + } + }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Toolbar items are situated at the `start` of the Toolbar", - "default": "Start", - "name": "Start", - "readonly": true + "description": "Defines the filter type of the component.", + "name": "filter", + "default": "\"StartsWithPerTerm\"", + "fieldName": "filter", + "type": { + "text": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\"" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "Toolbar items are situated at the `end` of the Toolbar", - "default": "End", - "name": "End", - "readonly": true - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ToolbarAlign", - "module": "dist/types/ToolbarAlign.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/ToolbarDesign.js", - "declarations": [ - { - "kind": "enum", - "name": "ToolbarDesign", - "description": "Defines the available toolbar designs.", - "_ui5privacy": "public", - "_ui5since": "2.0.0", - "members": [ + "description": "Defines whether the clear icon of the combobox will be shown.", + "name": "show-clear-icon", + "default": "false", + "fieldName": "showClearIcon", + "type": { + "text": "boolean" + } + }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The toolbar and its content will be displayed with solid background.", - "default": "Solid", - "name": "Solid", - "readonly": true + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The toolbar and its content will be displayed with transparent background.", - "default": "Transparent", - "name": "Transparent", - "readonly": true + "description": "Receives id(or many ids) of the elements that label the component", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Indicates whether the items picker is open.", + "name": "open", + "default": "false", + "fieldName": "open", + "type": { + "text": "boolean" + } } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-combobox", + "customElement": true, + "_ui5since": "1.0.0-rc.6", + "_ui5privacy": "public" } ], "exports": [ @@ -4146,90 +4898,84 @@ "kind": "js", "name": "default", "declaration": { - "name": "ToolbarDesign", - "module": "dist/types/ToolbarDesign.js" + "name": "ComboBox", + "module": "dist/ComboBox.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-combobox", + "declaration": { + "name": "ComboBox", + "module": "dist/ComboBox.js" } } ] }, { "kind": "javascript-module", - "path": "dist/types/ToolbarItemOverflowBehavior.js", + "path": "dist/ComboBoxItem.js", "declarations": [ { - "kind": "enum", - "name": "ToolbarItemOverflowBehavior", - "description": "Defines the priority of the toolbar item to go inside overflow popover.", - "_ui5privacy": "public", + "kind": "class", + "description": "The `ui5-cb-item` represents the item for a `ui5-combobox`.", + "name": "ComboBoxItem", "members": [ { "kind": "field", - "static": true, - "privacy": "public", - "description": "The item is presented inside the toolbar and goes in the popover, when there is not enough space.", - "default": "Default", - "name": "Default", - "readonly": true + "name": "text", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text of the component.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "static": true, + "name": "additionalText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the additional text of the component.", + "default": "undefined", "privacy": "public", - "description": "When set, the item will never go to the overflow popover.", - "default": "NeverOverflow", - "name": "NeverOverflow", - "readonly": true + "_ui5since": "1.0.0-rc.11" + } + ], + "attributes": [ + { + "description": "Defines the text of the component.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "static": true, - "privacy": "public", - "description": "When set, the item will be always part of the overflow part of ui5-toolbar.", - "default": "AlwaysOverflow", - "name": "AlwaysOverflow", - "readonly": true + "description": "Defines the additional text of the component.", + "name": "additional-text", + "default": "undefined", + "fieldName": "additionalText", + "type": { + "text": "string | undefined" + } } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ToolbarItemOverflowBehavior", - "module": "dist/types/ToolbarItemOverflowBehavior.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/types/WrappingType.js", - "declarations": [ - { - "kind": "enum", - "name": "WrappingType", - "description": "Different types of wrapping.", + ], + "superclass": { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + }, + "tagName": "ui5-cb-item", + "customElement": true, "_ui5privacy": "public", - "members": [ - { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The text will be truncated with an ellipsis.", - "default": "None", - "name": "None", - "readonly": true - }, + "_ui5implements": [ { - "kind": "field", - "static": true, - "privacy": "public", - "description": "The text will wrap. The words will not be broken based on hyphenation.", - "default": "Normal", - "name": "Normal", - "readonly": true + "name": "IComboBoxItem", + "package": "@ui5/webcomponents", + "module": "dist/ComboBox.js" } ] } @@ -4239,294 +4985,484 @@ "kind": "js", "name": "default", "declaration": { - "name": "WrappingType", - "module": "dist/types/WrappingType.js" + "name": "ComboBoxItem", + "module": "dist/ComboBoxItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-cb-item", + "declaration": { + "name": "ComboBoxItem", + "module": "dist/ComboBoxItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Assets-fetch.js", - "declarations": [], - "exports": [] - }, - { - "kind": "javascript-module", - "path": "dist/Assets-node.js", - "declarations": [], - "exports": [] - }, - { - "kind": "javascript-module", - "path": "dist/Assets.js", - "declarations": [], - "exports": [] - }, - { - "kind": "javascript-module", - "path": "dist/Avatar.js", + "path": "dist/ComboBoxItemGroup.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nAn image-like component that has different display options for representing images and icons\nin different shapes and sizes, depending on the use case.\n\nThe shape can be circular or square. There are several predefined sizes, as well as an option to\nset a custom size.\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true.\n- [Shift] - If [Space] is pressed, pressing [Shift] releases the component without triggering the click event.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Avatar.js\";`", - "name": "Avatar", + "description": "The `ui5-cb-group-item` is type of suggestion item,\nthat can be used to split the `ui5-combobox` suggestions into groups.", + "name": "ComboBoxItemGroup", "slots": [ { "name": "default", - "description": "Receives the desired `<img>` tag\n\n**Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>\n`ui5-avatar:not(:defined) {`<br/>\n    `visibility: hidden;`<br/>\n`}`", - "_ui5since": "1.0.0-rc.15", - "_ui5propertyName": "image", + "description": "Defines the items of the <code>ui5-cb-item-group</code>.", + "_ui5propertyName": "items", "_ui5type": { - "text": "Array<HTMLElement>" + "text": "Array<ComboBoxItem>", + "references": [ + { + "name": "ComboBoxItem", + "package": "@ui5/webcomponents", + "module": "dist/ComboBoxItem.js" + } + ] }, - "_ui5privacy": "public" + "_ui5privacy": "public", + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } }, { - "name": "badge", - "description": "Defines the optional badge that will be used for visual affordance.\n\n**Note:** While the slot allows for custom badges, to achieve\nthe Fiori design, you can use the `ui5-tag` with `ui5-icon`\nin the corresponding `icon` slot, without text nodes.", - "_ui5since": "1.7.0", + "name": "header", + "description": "Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.", "_ui5type": { - "text": "Array<HTMLElement>" + "text": "Array<ListItemBase>", + "references": [ + { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + } + ] }, - "_ui5privacy": "public" + "_ui5privacy": "public", + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } } ], "members": [ { "kind": "field", - "name": "disabled", + "name": "headerText", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "privacy": "public" + "description": "Defines the header text of the <code>ui5-li-group</code>.", + "privacy": "public", + "default": "undefined", + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } }, { "kind": "field", - "name": "interactive", + "name": "headerAccessibleName", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines if the avatar is interactive (focusable and pressable).\n\n**Note:** This property won't have effect if the `disabled`\nproperty is set to `true`.", - "privacy": "public" + "description": "Defines the accessible name of the header.", + "privacy": "public", + "default": "undefined", + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } }, { "kind": "field", - "name": "icon", + "name": "wrappingType", "type": { - "text": "string | undefined" + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] }, - "description": "Defines the name of the UI5 Icon, that will be displayed.\n\n**Note:** If `image` slot is provided, the property will be ignored.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar icon=\"employee\">`\n\n**Note:** If no icon or an empty one is provided, by default the \"employee\" icon should be displayed.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "default": "undefined", - "privacy": "public" - }, + "default": "\"None\"", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "privacy": "public", + "_ui5since": "2.15.0", + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } + } + ], + "superclass": { + "name": "ListItemGroup", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + }, + "tagName": "ui5-cb-item-group", + "customElement": true, + "_ui5since": "1.0.0-rc.15", + "_ui5privacy": "public", + "_ui5abstract": true, + "_ui5implements": [ { - "kind": "field", - "name": "fallbackIcon", + "name": "IComboBoxItem", + "package": "@ui5/webcomponents", + "module": "dist/ComboBox.js" + } + ], + "cssParts": [ + { + "description": "Used to style the header item of the group", + "name": "header", + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } + } + ], + "attributes": [ + { + "description": "Defines the header text of the <code>ui5-li-group</code>.", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"employee\"", - "description": "Defines the name of the fallback icon, which should be displayed in the following cases:\n\n\t- If the initials are not valid (more than 3 letters, unsupported languages or empty initials).\n\t- If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).\n\t- If the image src is wrong.\n\n**Note:** If not set, a default fallback icon \"employee\" is displayed.\n\n**Note:** You should import the desired icon first, then use its name as \"fallback-icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar fallback-icon=\"alert\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "privacy": "public" + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } }, { - "kind": "field", - "name": "initials", + "description": "Defines the accessible name of the header.", + "name": "header-accessible-name", + "default": "undefined", + "fieldName": "headerAccessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the displayed initials.\n\nUp to three Latin letters can be displayed as initials.", - "default": "undefined", - "privacy": "public" + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } }, { - "kind": "field", - "name": "shape", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "name": "wrapping-type", + "default": "\"None\"", + "fieldName": "wrappingType", "type": { - "text": "AvatarShape", + "text": "\"None\" | \"Normal\"" + }, + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } + } + ], + "events": [ + { + "name": "move-over", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListItemGroupMoveEventDetail>", "references": [ { - "name": "AvatarShape", + "name": "ListItemGroupMoveEventDetail", "package": "@ui5/webcomponents", - "module": "dist/types/AvatarShape.js" + "module": "dist/ListItemGroup.js" } ] }, - "default": "\"Circle\"", - "description": "Defines the shape of the component.", - "privacy": "public" + "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.1.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + } + ], + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } }, { - "kind": "field", - "name": "size", + "name": "move", + "_ui5privacy": "public", "type": { - "text": "AvatarSize", + "text": "CustomEvent<ListItemGroupMoveEventDetail>", "references": [ { - "name": "AvatarSize", + "name": "ListItemGroupMoveEventDetail", "package": "@ui5/webcomponents", - "module": "dist/types/AvatarSize.js" + "module": "dist/ListItemGroup.js" } ] }, - "default": "\"S\"", - "description": "Defines predefined size of the component.", + "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.1.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + } + ], + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ComboBoxItemGroup", + "module": "dist/ComboBoxItemGroup.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-cb-item-group", + "declaration": { + "name": "ComboBoxItemGroup", + "module": "dist/ComboBoxItemGroup.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/DateComponentBase.js", + "declarations": [ + { + "kind": "class", + "description": "Abstract class that provides common functionality for date-related components (day picker, month picker, year picker, calendar, date picker, date range picker, date time picker)\nThis includes:\n - \"languageAware: true\" metadata setting, CLDR fetch and i18n initialization\n - common properties (primaryCalendar, minDate, maxDate and formatPattern) declaration and methods that operate on them\n - additional common methods", + "name": "DateComponentBase", + "members": [ + { + "kind": "field", + "name": "primaryCalendarType", + "type": { + "text": "CalendarType | undefined", + "references": [ + { + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" + } + ] + }, + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "colorScheme", + "name": "secondaryCalendarType", "type": { - "text": "AvatarColorScheme", + "text": "CalendarType | undefined", "references": [ { - "name": "AvatarColorScheme", - "package": "@ui5/webcomponents", - "module": "dist/types/AvatarColorScheme.js" + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" } ] }, - "default": "\"Auto\"", - "description": "Defines the background color of the desired image.\nIf `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.", + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.16" + }, + { + "kind": "field", + "name": "formatPattern", + "type": { + "text": "string | undefined" + }, + "description": "Determines the format, displayed in the input field.", + "default": "undefined", + "deprecated": "Use displayFormat and valueFormat instead", "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "displayFormat", "type": { "text": "string | undefined" }, - "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.", + "description": "Determines the format, displayed in the input field.", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.7" + "_ui5since": "2.14.0" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "valueFormat", "type": { - "text": "AvatarAccessibilityAttributes", + "text": "string | undefined" + }, + "description": "Determines the format, used for the value attribute.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0" + }, + { + "kind": "field", + "name": "minDate", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", + "privacy": "public", + "_ui5since": "1.0.0-rc.6" + }, + { + "kind": "field", + "name": "maxDate", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", + "privacy": "public", + "_ui5since": "1.0.0-rc.6" + }, + { + "kind": "field", + "name": "calendarWeekNumbering", + "type": { + "text": "CalendarWeekNumbering", "references": [ { - "name": "AvatarAccessibilityAttributes", + "name": "CalendarWeekNumbering", "package": "@ui5/webcomponents", - "module": "dist/Avatar.js" + "module": "dist/types/CalendarWeekNumbering.js" } ] }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.", + "default": "\"Default\"", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", "privacy": "public", - "_ui5since": "2.0.0" - } - ], - "events": [ - { - "name": "click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired on mouseup, space and enter if avatar is interactive\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.11.0" + "_ui5since": "2.2.0" } ], "attributes": [ { - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "name": "primary-calendar-type", + "default": "undefined", + "fieldName": "primaryCalendarType", "type": { - "text": "boolean" + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" } }, { - "description": "Defines if the avatar is interactive (focusable and pressable).\n\n**Note:** This property won't have effect if the `disabled`\nproperty is set to `true`.", - "name": "interactive", - "default": "false", - "fieldName": "interactive", + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "name": "secondary-calendar-type", + "default": "undefined", + "fieldName": "secondaryCalendarType", "type": { - "text": "boolean" + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" } }, { - "description": "Defines the name of the UI5 Icon, that will be displayed.\n\n**Note:** If `image` slot is provided, the property will be ignored.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar icon=\"employee\">`\n\n**Note:** If no icon or an empty one is provided, by default the \"employee\" icon should be displayed.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", + "description": "Determines the format, displayed in the input field.", + "name": "format-pattern", "default": "undefined", - "fieldName": "icon", + "fieldName": "formatPattern", "type": { "text": "string | undefined" - } - }, - { - "description": "Defines the name of the fallback icon, which should be displayed in the following cases:\n\n\t- If the initials are not valid (more than 3 letters, unsupported languages or empty initials).\n\t- If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).\n\t- If the image src is wrong.\n\n**Note:** If not set, a default fallback icon \"employee\" is displayed.\n\n**Note:** You should import the desired icon first, then use its name as \"fallback-icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar fallback-icon=\"alert\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "fallback-icon", - "default": "\"employee\"", - "fieldName": "fallbackIcon", - "type": { - "text": "string" - } + }, + "deprecated": "Use displayFormat and valueFormat instead" }, { - "description": "Defines the displayed initials.\n\nUp to three Latin letters can be displayed as initials.", - "name": "initials", + "description": "Determines the format, displayed in the input field.", + "name": "display-format", "default": "undefined", - "fieldName": "initials", + "fieldName": "displayFormat", "type": { "text": "string | undefined" } }, { - "description": "Defines the shape of the component.", - "name": "shape", - "default": "\"Circle\"", - "fieldName": "shape", - "type": { - "text": "\"Circle\" | \"Square\"" - } - }, - { - "description": "Defines predefined size of the component.", - "name": "size", - "default": "\"S\"", - "fieldName": "size", + "description": "Determines the format, used for the value attribute.", + "name": "value-format", + "default": "undefined", + "fieldName": "valueFormat", "type": { - "text": "\"XS\" | \"S\" | \"M\" | \"L\" | \"XL\"" + "text": "string | undefined" } }, { - "description": "Defines the background color of the desired image.\nIf `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.", - "name": "color-scheme", - "default": "\"Auto\"", - "fieldName": "colorScheme", + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", + "name": "min-date", + "default": "\"\"", + "fieldName": "minDate", "type": { - "text": "\"Auto\" | \"Accent1\" | \"Accent2\" | \"Accent3\" | \"Accent4\" | \"Accent5\" | \"Accent6\" | \"Accent7\" | \"Accent8\" | \"Accent9\" | \"Accent10\" | \"Placeholder\" | \"Transparent\"" + "text": "string" } }, { - "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", + "name": "max-date", + "default": "\"\"", + "fieldName": "maxDate", "type": { - "text": "string | undefined" + "text": "string" } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "name": "calendar-week-numbering", + "default": "\"Default\"", + "fieldName": "calendarWeekNumbering", "type": { - "text": "AvatarAccessibilityAttributes" + "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" } } ], @@ -4535,17 +5471,9 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-avatar", "customElement": true, - "_ui5since": "1.0.0-rc.6", "_ui5privacy": "public", - "_ui5implements": [ - { - "name": "IAvatarGroupItem", - "package": "@ui5/webcomponents", - "module": "dist/AvatarGroup.js" - } - ] + "_ui5abstract": true } ], "exports": [ @@ -4553,64 +5481,27 @@ "kind": "js", "name": "default", "declaration": { - "name": "Avatar", - "module": "dist/Avatar.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-avatar", - "declaration": { - "name": "Avatar", - "module": "dist/Avatar.js" + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" } } ] }, { "kind": "javascript-module", - "path": "dist/AvatarGroup.js", + "path": "dist/DatePicker.js", "declarations": [ - { - "kind": "interface", - "name": "IAvatarGroupItem", - "description": "Interface for components that represent an avatar and may be slotted in numerous higher-order components such as `ui5-avatar-group`", - "_ui5privacy": "public" - }, { "kind": "class", - "description": "### Overview\n\nDisplays a group of avatars arranged horizontally. It is useful to visually\nshowcase a group of related avatars, such as, project team members or employees.\n\nThe component allows you to display the avatars in different sizes,\ndepending on your use case.\n\nThe `AvatarGroup` component has two group types:\n\n- `Group` type: The avatars are displayed as partially overlapped on\ntop of each other and the entire group has one click/tap area.\n- `Individual` type: The avatars are displayed side-by-side and each\navatar has its own click/tap area.\n\n### Usage\n\nUse the `AvatarGroup` if:\n\n- You want to display a group of avatars.\n- You want to display several avatars which have something in common.\n\nDo not use the `AvatarGroup` if:\n\n- You want to display a single avatar.\n- You want to display a gallery for simple images.\n- You want to use it for other visual content than avatars.\n\n### Responsive Behavior\n\nWhen the available space is less than the width required to display all avatars,\nan overflow visualization appears as a button placed at the end with the same shape\nand size as the avatars. The visualization displays the number of avatars that have overflowed\nand are not currently visible.\n\n### Keyboard Handling\nThe component provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n`type` Individual:\n\n- [Tab] - Move focus to the overflow button\n- [Left] - Navigate one avatar to the left\n- [Right] - Navigate one avatar to the right\n- [Home] - Navigate to the first avatar\n- [End] - Navigate to the last avatar\n- [Space] / [Enter] or [Return] - Trigger `ui5-click` event\n\n`type` Group:\n\n- [Tab] - Move focus to the next interactive element after the component\n- [Space] / [Enter] or [Return] - Trigger `ui5-click` event", - "name": "AvatarGroup", + "description": "### Overview\n\nThe `ui5-date-picker` component provides an input field with assigned calendar which opens on user action.\nThe `ui5-date-picker` allows users to select a localized date using touch,\nmouse, or keyboard input. It consists of two parts: the date input field and the\ndate picker.\n\n### Usage\n\nThe user can enter a date by:\n\n- Using the calendar that opens in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and presses the enter key, the calendar shows the corresponding date.\nWhen the user directly triggers the calendar display, the actual date is displayed.\n\n### Formatting\n\nIf a date is entered by typing it into\nthe input field, it must fit to the used date format.\n\nSupported format options are pattern-based on Unicode LDML Date Format notation.\nFor more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\nFor example, if the `format-pattern` is \"yyyy-MM-dd\",\na valid value string is \"2015-07-30\" and the same is displayed in the input.\n\n### Keyboard Handling\nThe `ui5-date-picker` provides advanced keyboard handling.\nIf the `ui5-date-picker` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the [Up], [Down], [Left] or [Right] arrow keys\nto navigate through the dates and select one by pressing the `Space` or `Enter` keys. Moreover you can\nuse TAB to reach the buttons for changing month and year.\n\nIf the `ui5-date-picker` input field is focused and its corresponding picker dialog is not opened,\nthen users can increment or decrement the date referenced by `dateValue` property\nby using the following shortcuts:\n\n- [Page Down] - Decrements the corresponding day of the month by one\n- [Shift] + [Page Down] - Decrements the corresponding month by one\n- [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n- [Page Up] - Increments the corresponding day of the month by one\n- [Shift] + [Page Up] - Increments the corresponding month by one\n- [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one\n\n### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n<script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DatePicker.js\";`", + "name": "DatePicker", "slots": [ { - "name": "default", - "description": "Defines the items of the component. Use the `ui5-avatar` component as an item.\n\n**Note:** The UX guidelines recommends using avatars with \"Circle\" shape.\n\nMoreover, if you use avatars with \"Square\" shape, there will be visual inconsistency\nas the built-in overflow action has \"Circle\" shape.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<IAvatarGroupItem>", - "references": [ - { - "name": "IAvatarGroupItem", - "package": "@ui5/webcomponents", - "module": "dist/AvatarGroup.js" - } - ] - }, - "_ui5privacy": "public" - }, - { - "name": "overflowButton", - "description": "Defines the overflow button of the component.\n\n**Note:** We recommend using the `ui5-button` component.\n\n**Note:** If this slot is not used, the component will display the built-in overflow button.", - "_ui5since": "1.0.0-rc.13", + "name": "valueStateMessage", + "description": "Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.", + "_ui5since": "1.0.0-rc.7", "_ui5type": { - "text": "Array<IButton>", - "references": [ - { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] + "text": "Array<HTMLElement>" }, "_ui5privacy": "public" } @@ -4618,36 +5509,103 @@ "members": [ { "kind": "field", - "name": "type", + "name": "value", "type": { - "text": "AvatarGroupType", - "references": [ - { - "name": "AvatarGroupType", - "package": "@ui5/webcomponents", - "module": "dist/types/AvatarGroupType.js" - } - ] + "text": "string" }, - "default": "\"Group\"", - "description": "Defines the mode of the `AvatarGroup`.", - "privacy": "public" - }, + "default": "\"\"", + "description": "Defines a formatted date value.", + "privacy": "public", + "_ui5formProperty": true, + "_ui5formEvents": "change,input" + }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "valueState", "type": { - "text": "AvatarGroupAccessibilityAttributes", + "text": "ValueState", "references": [ { - "name": "AvatarGroupAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/AvatarGroup.js" + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" } ] }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.", + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is required.", + "privacy": "public", + "_ui5since": "1.0.0-rc.9" + }, + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the component is displayed as disabled.", + "privacy": "public" + }, + { + "kind": "field", + "name": "readonly", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the component is displayed as read-only.", + "privacy": "public" + }, + { + "kind": "field", + "name": "placeholder", + "type": { + "text": "string | undefined" + }, + "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "name", + "type": { + "text": "string | undefined" + }, + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "hideWeekNumbers", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the visibility of the week numbers column.\n\n**Note:** For calendars other than Gregorian,\nthe week numbers are not displayed regardless of what is set.", + "privacy": "public", + "_ui5since": "1.0.0-rc.8" + }, + { + "kind": "field", + "name": "open", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the open or closed state of the popover.", "privacy": "public", "_ui5since": "2.0.0" }, @@ -4657,10 +5615,10 @@ "type": { "text": "string | undefined" }, - "description": "Defines the accessible name of the AvatarGroup.\nWhen provided, this will override the default aria-label text.", + "description": "Defines the aria-label attribute for the component.", "default": "undefined", "privacy": "public", - "_ui5since": "2.12.0" + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", @@ -4668,750 +5626,666 @@ "type": { "text": "string | undefined" }, - "description": "Receives id(s) of the elements that describe the AvatarGroup.\nWhen provided, this will be used as aria-labelledby instead of aria-label.", + "description": "Receives id(or many ids) of the elements that label the component.", "default": "undefined", "privacy": "public", - "_ui5since": "2.12.0" + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "hiddenItems", + "name": "accessibleDescription", "type": { - "text": "Array<IAvatarGroupItem>", - "references": [ - { - "name": "IAvatarGroupItem", - "package": "@ui5/webcomponents", - "module": "dist/AvatarGroup.js" - } - ] + "text": "string | undefined" }, - "description": "Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.", - "default": "[]", + "description": "Defines the accessible description of the component.", + "default": "undefined", "privacy": "public", - "readonly": true + "_ui5since": "2.14.0" }, { "kind": "field", - "name": "colorScheme", + "name": "accessibleDescriptionRef", "type": { - "text": "Array<AvatarColorScheme>", - "references": [ - { - "name": "AvatarColorScheme", - "package": "@ui5/webcomponents", - "module": "dist/types/AvatarColorScheme.js" - } - ] + "text": "string | undefined" }, - "description": "Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component.", - "default": "[]", + "description": "Receives id(or many ids) of the elements that describe the input.", + "default": "undefined", "privacy": "public", - "readonly": true - } - ], - "events": [ + "_ui5since": "2.14.0" + }, { - "name": "click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<AvatarGroupClickEventDetail>", - "references": [ - { - "name": "AvatarGroupClickEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/AvatarGroup.js" - } - ] + "kind": "method", + "name": "isValid", + "return": { + "type": { + "text": "boolean" + } }, - "description": "Fired when the component is activated either with a\nclick/tap or by using the Enter or Space key.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "1.0.0-rc.11", - "_ui5parameters": [ + "parameters": [ { + "name": "value", "type": { - "text": "HTMLElement" + "text": "string" }, - "name": "targetRef", - "_ui5privacy": "public", - "description": "The DOM ref of the clicked item." + "description": "A value to be tested against the current date format", + "_ui5privacy": "public" + } + ], + "description": "Checks if a value is valid against the current date format of the DatePicker.", + "privacy": "public", + "deprecated": "Use isValidValue or isValidDisplayValue instead" + }, + { + "kind": "method", + "name": "isValidValue", + "return": { + "type": { + "text": "boolean" + } + }, + "parameters": [ + { + "name": "value", + "type": { + "text": "string" + }, + "description": "A value to be tested against the current date format", + "_ui5privacy": "public" + } + ], + "description": "Checks if a value is valid against the current date format of the DatePicker.", + "privacy": "public" + }, + { + "kind": "method", + "name": "isValidDisplayValue", + "return": { + "type": { + "text": "boolean" + } + }, + "parameters": [ + { + "name": "value", + "type": { + "text": "string" + }, + "description": "A value to be tested against the current date format", + "_ui5privacy": "public" + } + ], + "description": "Checks if a value is valid against the current date format of the DatePicker.", + "privacy": "public" + }, + { + "kind": "method", + "name": "isInValidRange", + "return": { + "type": { + "text": "boolean" + } + }, + "parameters": [ + { + "name": "value", + "type": { + "text": "string" + }, + "description": "A value to be checked", + "_ui5privacy": "public" + } + ], + "description": "Checks if a date is between the minimum and maximum date.", + "privacy": "public" + }, + { + "kind": "method", + "name": "formatValue", + "return": { + "type": { + "text": "string" }, + "description": "The date as string" + }, + "parameters": [ { + "name": "date", "type": { - "text": "boolean" + "text": "Date" }, - "name": "overflowButtonClicked", - "_ui5privacy": "public", - "description": "indicates if the overflow button is clicked" + "description": "A Java Script date object to be formatted as string", + "_ui5privacy": "public" } - ] + ], + "description": "Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance", + "privacy": "public" }, { - "name": "overflow", - "_ui5privacy": "public", + "kind": "field", + "name": "dateValue", "type": { - "text": "CustomEvent" + "text": "Date | null" }, - "description": "Fired when the count of visible `ui5-avatar` elements in the\ncomponent has changed", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "1.0.0-rc.13" - } - ], - "attributes": [ + "description": "Currently selected date represented as a Local JavaScript Date instance.", + "privacy": "public", + "default": "null", + "readonly": true + }, { - "description": "Defines the mode of the `AvatarGroup`.", - "name": "type", - "default": "\"Group\"", - "fieldName": "type", + "kind": "field", + "name": "primaryCalendarType", "type": { - "text": "\"Group\" | \"Individual\"" + "text": "CalendarType | undefined", + "references": [ + { + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" + } + ] + }, + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "default": "undefined", + "privacy": "public", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "kind": "field", + "name": "secondaryCalendarType", "type": { - "text": "AvatarGroupAccessibilityAttributes" + "text": "CalendarType | undefined", + "references": [ + { + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" + } + ] + }, + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.16", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" } }, { - "description": "Defines the accessible name of the AvatarGroup.\nWhen provided, this will override the default aria-label text.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "kind": "field", + "name": "formatPattern", "type": { "text": "string | undefined" + }, + "description": "Determines the format, displayed in the input field.", + "default": "undefined", + "deprecated": "Use displayFormat and valueFormat instead", + "privacy": "public", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" } }, { - "description": "Receives id(s) of the elements that describe the AvatarGroup.\nWhen provided, this will be used as aria-labelledby instead of aria-label.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "kind": "field", + "name": "displayFormat", "type": { "text": "string | undefined" + }, + "description": "Determines the format, displayed in the input field.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" } }, { - "description": "Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.", - "name": "hidden-items", - "default": "[]", - "fieldName": "hiddenItems", + "kind": "field", + "name": "valueFormat", "type": { - "text": "any" + "text": "string | undefined" + }, + "description": "Determines the format, used for the value attribute.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" } }, { - "description": "Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component.", - "name": "color-scheme", - "default": "[]", - "fieldName": "colorScheme", + "kind": "field", + "name": "minDate", "type": { - "text": "any" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-avatar-group", - "customElement": true, - "_ui5since": "1.0.0-rc.11", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "AvatarGroup", - "module": "dist/AvatarGroup.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-avatar-group", - "declaration": { - "name": "AvatarGroup", - "module": "dist/AvatarGroup.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/Bar.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\nThe Bar is a container which is primarily used to hold titles, buttons and input elements\nand its design and functionality is the basis for page headers and footers.\nThe component consists of three areas to hold its content - startContent slot, default slot and endContent slot.\nIt has the capability to center content, such as a title, while having other components on the left and right side.\n\n### Usage\nWith the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n\n**Note:** Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n\n### Responsive Behavior\nThe default slot will be centered in the available space between the startContent and the endContent areas,\ntherefore it might not always be centered in the entire bar.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Bar.js\";`", - "name": "Bar", - "cssParts": [ - { - "description": "Used to style the wrapper of the content of the component", - "name": "bar" - }, - { - "description": "Used to style the wrapper of the start content of the component", - "name": "startContent" - }, - { - "description": "Used to style the wrapper of the middle content of the component", - "name": "midContent" - }, - { - "description": "Used to style the wrapper of the end content of the component", - "name": "endContent" - } - ], - "slots": [ - { - "name": "startContent", - "description": "Defines the content at the start of the bar.", - "_ui5type": { - "text": "Array<HTMLElement>" + "text": "string" }, - "_ui5privacy": "public" + "default": "\"\"", + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", + "privacy": "public", + "_ui5since": "1.0.0-rc.6", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { - "name": "default", - "description": "Defines the content in the middle of the bar.", - "_ui5propertyName": "middleContent", - "_ui5type": { - "text": "Array<HTMLElement>" + "kind": "field", + "name": "maxDate", + "type": { + "text": "string" }, - "_ui5privacy": "public" + "default": "\"\"", + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", + "privacy": "public", + "_ui5since": "1.0.0-rc.6", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, - { - "name": "endContent", - "description": "Defines the content at the end of the bar.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - } - ], - "members": [ { "kind": "field", - "name": "design", + "name": "calendarWeekNumbering", "type": { - "text": "BarDesign", + "text": "CalendarWeekNumbering", "references": [ { - "name": "BarDesign", + "name": "CalendarWeekNumbering", "package": "@ui5/webcomponents", - "module": "dist/types/BarDesign.js" + "module": "dist/types/CalendarWeekNumbering.js" } ] }, - "default": "\"Header\"", - "description": "Defines the component's design.", - "privacy": "public" - }, + "default": "\"Default\"", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "privacy": "public", + "_ui5since": "2.2.0", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } + } + ], + "events": [ { - "kind": "field", - "name": "accessibleRole", + "name": "change", + "_ui5privacy": "public", "type": { - "text": "BarAccessibleRole", + "text": "CustomEvent<DatePickerChangeEventDetail>", "references": [ { - "name": "BarAccessibleRole", + "name": "DatePickerChangeEventDetail", "package": "@ui5/webcomponents", - "module": "dist/types/BarAccessibleRole.js" + "module": "dist/DatePicker.js" } ] }, - "default": "\"Toolbar\"", - "description": "Specifies the ARIA role applied to the component for accessibility purposes.\n\n**Note:**\n\n- Set accessibleRole to \"toolbar\" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.\n\n- If there is only one or no active element, it is recommended to avoid using the \"toolbar\" role, as it implies a grouping of multiple interactive controls.", - "privacy": "public", - "_ui5since": "2.10.0" - } - ], - "attributes": [ - { - "description": "Defines the component's design.", - "name": "design", - "default": "\"Header\"", - "fieldName": "design", - "type": { - "text": "\"Header\" | \"Subheader\" | \"Footer\" | \"FloatingFooter\"" - } - }, - { - "description": "Specifies the ARIA role applied to the component for accessibility purposes.\n\n**Note:**\n\n- Set accessibleRole to \"toolbar\" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.\n\n- If there is only one or no active element, it is recommended to avoid using the \"toolbar\" role, as it implies a grouping of multiple interactive controls.", - "name": "accessible-role", - "default": "\"Toolbar\"", - "fieldName": "accessibleRole", - "type": { - "text": "\"Toolbar\" | \"None\"" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-bar", - "customElement": true, - "_ui5since": "1.0.0-rc.11", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "Bar", - "module": "dist/Bar.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-bar", - "declaration": { - "name": "Bar", - "module": "dist/Bar.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/Breadcrumbs.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\nEnables users to navigate between items by providing a list of links to previous steps in the user's navigation path.\nIt helps the user to be aware of their location within the application and allows faster navigation.\n\nThe last three steps can be accessed as links directly, while the remaining links prior to them are available\nin a drop-down menu.\n\nYou can choose the type of separator to be used from a number of predefined options.\n\n### Keyboard Handling\nThe `ui5-breadcrumbs` provides advanced keyboard handling.\n\n- [F4], [Alt] + [Up], [Alt] + [Down], [Space], or [Enter] - If the dropdown arrow is focused - opens/closes the drop-down.\n- [Space],[Enter] - Activates the focused item and triggers the `item-click` event.\n- [Escape] - Closes the drop-down.\n- [Left] - If the drop-down is closed - navigates one item to the left.\n- [Right] - If the drop-down is closed - navigates one item to the right.\n- [Up] - If the drop-down is open - moves focus to the next item.\n- [Down] - If the drop-down is open - moves focus to the previous item.\n- [Home] - Navigates to the first item.\n- [End] - Navigates to the last item.", - "name": "Breadcrumbs", - "slots": [ - { - "name": "default", - "description": "Defines the component items.\n\n**Note:** Use the `ui5-breadcrumbs-item` component to define the desired items.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<BreadcrumbsItem>", - "references": [ - { - "name": "BreadcrumbsItem", - "package": "@ui5/webcomponents", - "module": "dist/BreadcrumbsItem.js" - } - ] - }, - "_ui5privacy": "public" - } - ], - "members": [ - { - "kind": "field", - "name": "design", - "type": { - "text": "BreadcrumbsDesign", - "references": [ - { - "name": "BreadcrumbsDesign", - "package": "@ui5/webcomponents", - "module": "dist/types/BreadcrumbsDesign.js" - } - ] - }, - "default": "\"Standard\"", - "description": "Defines the visual appearance of the last BreadcrumbsItem.\n\nThe Breadcrumbs supports two visual appearances for the last BreadcrumbsItem:\n- \"Standard\" - displaying the last item as \"current page\" (bold and without separator)\n- \"NoCurrentPage\" - displaying the last item as a regular BreadcrumbsItem, followed by separator", - "privacy": "public" + "description": "Fired when the input operation has finished by pressing Enter or on focusout.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "string" + }, + "name": "value", + "_ui5privacy": "public", + "description": "The submitted value." + }, + { + "type": { + "text": "boolean" + }, + "name": "valid", + "_ui5privacy": "public", + "description": "Indicator if the value is in correct format pattern and in valid range." + } + ] }, { - "kind": "field", - "name": "separators", - "type": { - "text": "BreadcrumbsSeparator", - "references": [ - { - "name": "BreadcrumbsSeparator", - "package": "@ui5/webcomponents", - "module": "dist/types/BreadcrumbsSeparator.js" - } - ] - }, - "default": "\"Slash\"", - "description": "Determines the visual style of the separator between the breadcrumb items.", - "privacy": "public" - } - ], - "events": [ - { - "name": "item-click", + "name": "input", "_ui5privacy": "public", "type": { - "text": "CustomEvent<BreadcrumbsItemClickEventDetail>", + "text": "CustomEvent<DatePickerInputEventDetail>", "references": [ { - "name": "BreadcrumbsItemClickEventDetail", + "name": "DatePickerInputEventDetail", "package": "@ui5/webcomponents", - "module": "dist/Breadcrumbs.js" + "module": "dist/DatePicker.js" } ] }, - "description": "Fires when a `BreadcrumbsItem` is clicked.\n\n**Note:** You can prevent browser location change by calling `event.preventDefault()`.", + "description": "Fired when the value of the component is changed at each key stroke.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, "_ui5Bubbles": true, "_ui5parameters": [ { "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "The clicked item." - }, - { - "type": { - "text": "Boolean" + "text": "string" }, - "name": "altKey", + "name": "value", "_ui5privacy": "public", - "description": "Returns whether the \"ALT\" key was pressed when the event was triggered." + "description": "The submitted value." }, { "type": { - "text": "Boolean" + "text": "boolean" }, - "name": "ctrlKey", + "name": "valid", "_ui5privacy": "public", - "description": "Returns whether the \"CTRL\" key was pressed when the event was triggered." - }, + "description": "Indicator if the value is in correct format pattern and in valid range." + } + ] + }, + { + "name": "value-state-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<DatePickerValueStateChangeEventDetail>", + "references": [ + { + "name": "DatePickerValueStateChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/DatePicker.js" + } + ] + }, + "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ { "type": { - "text": "Boolean" + "text": "string" }, - "name": "metaKey", + "name": "valueState", "_ui5privacy": "public", - "description": "Returns whether the \"META\" key was pressed when the event was triggered." + "description": "The new `valueState` that will be set." }, { "type": { - "text": "Boolean" + "text": "boolean" }, - "name": "shiftKey", + "name": "valid", "_ui5privacy": "public", - "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered." + "description": "Indicator if the value is in correct format pattern and in valid range." } ] - } - ], - "attributes": [ + }, { - "description": "Defines the visual appearance of the last BreadcrumbsItem.\n\nThe Breadcrumbs supports two visual appearances for the last BreadcrumbsItem:\n- \"Standard\" - displaying the last item as \"current page\" (bold and without separator)\n- \"NoCurrentPage\" - displaying the last item as a regular BreadcrumbsItem, followed by separator", - "name": "design", - "default": "\"Standard\"", - "fieldName": "design", + "name": "open", + "_ui5privacy": "public", "type": { - "text": "\"Standard\" | \"NoCurrentPage\"" - } + "text": "CustomEvent" + }, + "description": "Fired after the component's picker is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.4.0" }, { - "description": "Determines the visual style of the separator between the breadcrumb items.", - "name": "separators", - "default": "\"Slash\"", - "fieldName": "separators", + "name": "close", + "_ui5privacy": "public", "type": { - "text": "\"Slash\" | \"BackSlash\" | \"DoubleBackSlash\" | \"DoubleGreaterThan\" | \"DoubleSlash\" | \"GreaterThan\"" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-breadcrumbs", - "customElement": true, - "_ui5since": "1.0.0-rc.15", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "Breadcrumbs", - "module": "dist/Breadcrumbs.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-breadcrumbs", - "declaration": { - "name": "Breadcrumbs", - "module": "dist/Breadcrumbs.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/BreadcrumbsItem.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-breadcrumbs-item` component defines the content of an item in `ui5-breadcrumbs`.", - "name": "BreadcrumbsItem", - "slots": [ - { - "name": "default", - "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", - "_ui5propertyName": "text", - "_ui5type": { - "text": "Array<Node>" + "text": "CustomEvent" }, - "_ui5privacy": "public" + "description": "Fired after the component's picker is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.4.0" } ], - "members": [ + "attributes": [ { - "kind": "field", - "name": "href", + "description": "Defines a formatted date value.", + "name": "value", + "default": "\"\"", + "fieldName": "value", "type": { - "text": "string | undefined" - }, - "description": "Defines the link href.\n\n**Note:** Standard hyperlink behavior is supported.", - "default": "undefined", - "privacy": "public" + "text": "string" + } }, { - "kind": "field", - "name": "target", + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", "type": { - "text": "string | undefined" - }, - "description": "Defines the link target.\n\nAvailable options are:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**Note:** This property must only be used when the `href` property is set.", - "default": "undefined", - "privacy": "public" + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + } }, { - "kind": "field", - "name": "accessibleName", + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the item.", - "default": "undefined", - "privacy": "public" - } - ], - "attributes": [ + "text": "boolean" + } + }, { - "description": "Defines the link href.\n\n**Note:** Standard hyperlink behavior is supported.", - "name": "href", - "default": "undefined", - "fieldName": "href", + "description": "Determines whether the component is displayed as disabled.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the link target.\n\nAvailable options are:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**Note:** This property must only be used when the `href` property is set.", - "name": "target", - "default": "undefined", - "fieldName": "target", + "description": "Determines whether the component is displayed as read-only.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the accessible ARIA name of the item.", - "name": "accessible-name", + "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", + "name": "placeholder", "default": "undefined", - "fieldName": "accessibleName", + "fieldName": "placeholder", "type": { "text": "string | undefined" } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-breadcrumbs-item", - "customElement": true, - "_ui5since": "1.0.0-rc.15", - "_ui5privacy": "public", - "_ui5abstract": true - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "BreadcrumbsItem", - "module": "dist/BreadcrumbsItem.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-breadcrumbs-item", - "declaration": { - "name": "BreadcrumbsItem", - "module": "dist/BreadcrumbsItem.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/BusyIndicator.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-busy-indicator` signals that some operation is going on and that the\nuser must wait. It does not block the current UI screen so other operations could be triggered in parallel.\nIt displays 3 dots and each dot expands and shrinks at a different rate, resulting in a cascading flow of animation.\n\n### Usage\nFor the `ui5-busy-indicator` you can define the size, the text and whether it is shown or hidden.\nIn order to hide it, use the \"active\" property.\n\nIn order to show busy state over an HTML element, simply nest the HTML element in a `ui5-busy-indicator` instance.\n\n**Note:** Since `ui5-busy-indicator` has `display: inline-block;` by default and no width of its own,\nwhenever you need to wrap a block-level element, you should set `display: block` to the busy indicator as well.\n\n#### When to use:\n\n- The user needs to be able to cancel the operation.\n- Only part of the application or a particular component is affected.\n\n#### When not to use:\n\n- The operation takes less than one second.\n- You need to block the screen and prevent the user from starting another activity.\n- Do not show multiple busy indicators at once.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/BusyIndicator.js\";`", - "name": "BusyIndicator", - "slots": [ - { - "description": "Determines the content over which the component will appear.", - "name": "default", - "_ui5privacy": "public", - "_ui5type": { - "text": "Array<Node>" - } - } - ], - "members": [ + }, { - "kind": "field", - "name": "text", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", "type": { "text": "string | undefined" - }, - "description": "Defines text to be displayed below the component. It can be used to inform the user of the current operation.", - "privacy": "public", - "default": "undefined", - "_ui5since": "1.0.0-rc.7" + } }, { - "kind": "field", - "name": "size", + "description": "Defines the visibility of the week numbers column.\n\n**Note:** For calendars other than Gregorian,\nthe week numbers are not displayed regardless of what is set.", + "name": "hide-week-numbers", + "default": "false", + "fieldName": "hideWeekNumbers", "type": { - "text": "BusyIndicatorSize", - "references": [ - { - "name": "BusyIndicatorSize", - "package": "@ui5/webcomponents", - "module": "dist/types/BusyIndicatorSize.js" - } - ] - }, - "default": "\"M\"", - "description": "Defines the size of the component.", - "privacy": "public" + "text": "boolean" + } }, { - "kind": "field", - "name": "active", + "description": "Defines the open or closed state of the popover.", + "name": "open", + "default": "false", + "fieldName": "open", "type": { "text": "boolean" - }, - "default": "false", - "description": "Defines if the busy indicator is visible on the screen. By default it is not.", - "privacy": "public" + } }, { - "kind": "field", - "name": "delay", + "description": "Defines the aria-label attribute for the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "number" - }, - "default": "1000", - "description": "Defines the delay in milliseconds, after which the busy indicator will be visible on the screen.", - "privacy": "public" + "text": "string | undefined" + } }, { - "kind": "field", - "name": "textPlacement", - "type": { - "text": "BusyIndicatorTextPlacement", - "references": [ - { - "name": "BusyIndicatorTextPlacement", - "package": "@ui5/webcomponents", - "module": "dist/types/BusyIndicatorTextPlacement.js" - } - ] - }, - "default": "\"Bottom\"", - "description": "Defines the placement of the text.", - "privacy": "public" - } - ], - "attributes": [ - { - "description": "Defines text to be displayed below the component. It can be used to inform the user of the current operation.", - "name": "text", + "description": "Receives id(or many ids) of the elements that label the component.", + "name": "accessible-name-ref", "default": "undefined", - "fieldName": "text", + "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" } }, { - "description": "Defines the size of the component.", - "name": "size", - "default": "\"M\"", - "fieldName": "size", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", "type": { - "text": "\"S\" | \"M\" | \"L\"" + "text": "string | undefined" } }, { - "description": "Defines if the busy indicator is visible on the screen. By default it is not.", - "name": "active", - "default": "false", - "fieldName": "active", + "description": "Receives id(or many ids) of the elements that describe the input.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines the delay in milliseconds, after which the busy indicator will be visible on the screen.", - "name": "delay", - "default": "1000", - "fieldName": "delay", + "description": "Currently selected date represented as a Local JavaScript Date instance.", + "name": "date-value", + "default": "null", + "fieldName": "dateValue", "type": { - "text": "number" + "text": "any" } }, { - "description": "Defines the placement of the text.", - "name": "text-placement", - "default": "\"Bottom\"", - "fieldName": "textPlacement", + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "name": "primary-calendar-type", + "default": "undefined", + "fieldName": "primaryCalendarType", "type": { - "text": "\"Top\" | \"Bottom\"" + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } + }, + { + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "name": "secondary-calendar-type", + "default": "undefined", + "fieldName": "secondaryCalendarType", + "type": { + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } + }, + { + "description": "Determines the format, displayed in the input field.", + "name": "format-pattern", + "default": "undefined", + "fieldName": "formatPattern", + "type": { + "text": "string | undefined" + }, + "deprecated": "Use displayFormat and valueFormat instead", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } + }, + { + "description": "Determines the format, displayed in the input field.", + "name": "display-format", + "default": "undefined", + "fieldName": "displayFormat", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } + }, + { + "description": "Determines the format, used for the value attribute.", + "name": "value-format", + "default": "undefined", + "fieldName": "valueFormat", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } + }, + { + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", + "name": "min-date", + "default": "\"\"", + "fieldName": "minDate", + "type": { + "text": "string" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } + }, + { + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", + "name": "max-date", + "default": "\"\"", + "fieldName": "maxDate", + "type": { + "text": "string" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } + }, + { + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "name": "calendar-week-numbering", + "default": "\"Default\"", + "fieldName": "calendarWeekNumbering", + "type": { + "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "DateComponentBase", + "package": "@ui5/webcomponents", + "module": "dist/DateComponentBase.js" }, - "tagName": "ui5-busy-indicator", + "tagName": "ui5-date-picker", "customElement": true, - "_ui5since": "0.12.0", "_ui5privacy": "public" } ], @@ -5420,92 +6294,243 @@ "kind": "js", "name": "default", "declaration": { - "name": "BusyIndicator", - "module": "dist/BusyIndicator.js" + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { "kind": "custom-element-definition", - "name": "ui5-busy-indicator", + "name": "ui5-date-picker", "declaration": { - "name": "BusyIndicator", - "module": "dist/BusyIndicator.js" + "name": "DatePicker", + "module": "dist/DatePicker.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Button.js", + "path": "dist/DateRangePicker.js", "declarations": [ - { - "kind": "interface", - "name": "IButton", - "description": "Interface for components that may be used as a button inside numerous higher-order components", - "_ui5privacy": "public" - }, { "kind": "class", - "description": "### Overview\n\nThe `ui5-button` component represents a simple push button.\nIt enables users to trigger actions by clicking or tapping the `ui5-button`, or by pressing\ncertain keyboard keys, such as Enter.\n\n### Usage\n\nFor the `ui5-button` UI, you can define text, icon, or both. You can also specify\nwhether the text or the icon is displayed first.\n\nYou can choose from a set of predefined types that offer different\nstyling to correspond to the triggered action.\n\nYou can set the `ui5-button` as enabled or disabled. An enabled\n`ui5-button` can be pressed by clicking or tapping it. The button changes\nits style to provide visual feedback to the user that it is pressed or hovered over with\nthe mouse cursor. A disabled `ui5-button` appears inactive and cannot be pressed.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Button.js\";`", - "name": "Button", - "cssParts": [ + "description": "### Overview\nThe DateRangePicker enables the users to enter a localized date range using touch, mouse, keyboard input, or by selecting a date range in the calendar.\n\n### Usage\nThe user can enter a date by:\nUsing the calendar that opens in a popup or typing it in directly in the input field (not available for mobile devices).\nFor the `ui5-daterange-picker`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DateRangePicker.js\";`\n\n### Keyboard Handling\nThe `ui5-daterange-picker` provides advanced keyboard handling.\n\nWhen the `ui5-daterange-picker` input field is focused the user can\nincrement or decrement respectively the range start or end date, depending on where the cursor is.\nThe following shortcuts are available:\n\n- [Page Down] - Decrements the corresponding day of the month by one\n- [Shift] + [Page Down] - Decrements the corresponding month by one\n- [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n- [Page Up] - Increments the corresponding day of the month by one\n- [Shift] + [Page Up] - Increments the corresponding month by one\n- [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one", + "name": "DateRangePicker", + "members": [ { - "description": "Used to style the native button element", - "name": "button" + "kind": "field", + "name": "delimiter", + "type": { + "text": "string" + }, + "default": "\"-\"", + "description": "Determines the symbol which separates the dates.\nIf not supplied, the default time interval delimiter for the current locale will be used.", + "privacy": "public" }, { - "description": "Used to style the icon in the native button element", - "name": "icon" + "kind": "field", + "name": "dateValue", + "type": { + "text": "Date | null" + }, + "description": "**Note:** The getter method is inherited and not supported. If called it will return an empty value.", + "privacy": "public", + "default": "null", + "readonly": true, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } }, { - "description": "Used to style the end icon in the native button element", - "name": "endIcon" - } - ], - "slots": [ + "kind": "field", + "name": "dateValueUTC", + "type": { + "text": "Date | null" + }, + "readonly": true, + "description": "**Note:** The getter method is inherited and not supported. If called it will return an empty value.", + "privacy": "public", + "default": "null", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, { - "name": "default", - "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", - "_ui5propertyName": "text", - "_ui5type": { - "text": "Array<Node>" + "kind": "field", + "name": "startDateValue", + "type": { + "text": "Date | null" }, - "_ui5privacy": "public" + "description": "Returns the start date of the currently selected range as JavaScript Date instance.", + "privacy": "public", + "default": "null", + "readonly": true }, { - "name": "badge", - "description": "Adds a badge to the button.", - "_ui5since": "2.7.0", - "_ui5type": { - "text": "Array<ButtonBadge>", - "references": [ - { - "name": "ButtonBadge", - "package": "@ui5/webcomponents", - "module": "dist/ButtonBadge.js" - } - ] + "kind": "field", + "name": "endDateValue", + "type": { + "text": "Date | null" }, - "_ui5privacy": "public" - } - ], - "members": [ + "description": "Returns the end date of the currently selected range as JavaScript Date instance.", + "privacy": "public", + "default": "null", + "readonly": true + }, + { + "kind": "method", + "name": "isValid", + "return": { + "type": { + "text": "boolean" + } + }, + "parameters": [ + { + "name": "value", + "type": { + "text": "string" + }, + "description": "A value to be tested against the current date format", + "_ui5privacy": "public" + } + ], + "description": "Checks if a value is valid against the current date format of the DatePicker.", + "privacy": "public", + "deprecated": "Use isValidValue or isValidDisplayValue instead", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "kind": "method", + "name": "isValidValue", + "return": { + "type": { + "text": "boolean" + } + }, + "parameters": [ + { + "name": "value", + "type": { + "text": "string" + }, + "description": "A value to be tested against the current date format", + "_ui5privacy": "public" + } + ], + "description": "Checks if a value is valid against the current date format of the DatePicker.", + "privacy": "public", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "kind": "method", + "name": "isValidDisplayValue", + "return": { + "type": { + "text": "boolean" + } + }, + "parameters": [ + { + "name": "value", + "type": { + "text": "string" + }, + "description": "A value to be tested against the current date format", + "_ui5privacy": "public" + } + ], + "description": "Checks if a value is valid against the current date format of the DatePicker.", + "privacy": "public", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "kind": "method", + "name": "isInValidRange", + "return": { + "type": { + "text": "boolean" + } + }, + "parameters": [ + { + "name": "value", + "type": { + "text": "string" + }, + "description": "A value to be checked", + "_ui5privacy": "public" + } + ], + "description": "Checks if a date is between the minimum and maximum date.", + "privacy": "public", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, { "kind": "field", - "name": "design", + "name": "value", "type": { - "text": "ButtonDesign", + "text": "string" + }, + "default": "\"\"", + "description": "Defines a formatted date value.", + "privacy": "public", + "_ui5formProperty": true, + "_ui5formEvents": "change,input", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "kind": "field", + "name": "valueState", + "type": { + "text": "ValueState", "references": [ { - "name": "ButtonDesign", - "package": "@ui5/webcomponents", - "module": "dist/types/ButtonDesign.js" + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" } ] }, - "default": "\"Default\"", - "description": "Defines the component design.", - "privacy": "public" + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "kind": "field", + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is required.", + "privacy": "public", + "_ui5since": "1.0.0-rc.9", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } }, { "kind": "field", @@ -5514,50 +6539,84 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "privacy": "public" + "description": "Determines whether the component is displayed as disabled.", + "privacy": "public", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } }, { "kind": "field", - "name": "icon", + "name": "readonly", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the component is displayed as read-only.", + "privacy": "public", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "kind": "field", + "name": "placeholder", "type": { "text": "string | undefined" }, - "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } }, { "kind": "field", - "name": "endIcon", + "name": "name", "type": { "text": "string | undefined" }, - "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } }, { "kind": "field", - "name": "submits", + "name": "hideWeekNumbers", "type": { "text": "boolean" }, "default": "false", - "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** This property is only applicable within the context of an HTML Form element.`", + "description": "Defines the visibility of the week numbers column.\n\n**Note:** For calendars other than Gregorian,\nthe week numbers are not displayed regardless of what is set.", "privacy": "public", - "deprecated": "Set the \"type\" property to \"Submit\" to achieve the same result. The \"submits\" property is ignored if \"type\" is set to any value other than \"Button\"." + "_ui5since": "1.0.0-rc.8", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } }, { "kind": "field", - "name": "tooltip", + "name": "open", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the tooltip of the component.\n\n**Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.", - "default": "undefined", + "default": "false", + "description": "Defines the open or closed state of the popover.", "privacy": "public", - "_ui5since": "1.2.0" + "_ui5since": "2.0.0", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } }, { "kind": "field", @@ -5565,10 +6624,14 @@ "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines the aria-label attribute for the component.", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "1.0.0-rc.15", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } }, { "kind": "field", @@ -5579,25 +6642,11 @@ "description": "Receives id(or many ids) of the elements that label the component.", "default": "undefined", "privacy": "public", - "_ui5since": "1.1.0" - }, - { - "kind": "field", - "name": "accessibilityAttributes", - "type": { - "text": "ButtonAccessibilityAttributes", - "references": [ - { - "name": "ButtonAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] - }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", - "privacy": "public", - "_ui5since": "1.2.0" + "_ui5since": "1.0.0-rc.15", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } }, { "kind": "field", @@ -5608,193 +6657,372 @@ "description": "Defines the accessible description of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "2.5.0" + "_ui5since": "2.14.0", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } }, { "kind": "field", - "name": "type", + "name": "accessibleDescriptionRef", "type": { - "text": "ButtonType", - "references": [ - { - "name": "ButtonType", - "package": "@ui5/webcomponents", - "module": "dist/types/ButtonType.js" - } - ] + "text": "string | undefined" }, - "default": "\"Button\"", - "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "description": "Receives id(or many ids) of the elements that describe the input.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.15.0" + "_ui5since": "2.14.0", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } }, { - "kind": "field", - "name": "accessibleRole", - "type": { - "text": "ButtonAccessibleRole", - "references": [ - { - "name": "ButtonAccessibleRole", - "package": "@ui5/webcomponents", - "module": "dist/types/ButtonAccessibleRole.js" + "kind": "method", + "name": "formatValue", + "return": { + "type": { + "text": "string" + }, + "description": "The date as string" + }, + "parameters": [ + { + "name": "date", + "type": { + "text": "Date" + }, + "description": "A Java Script date object to be formatted as string", + "_ui5privacy": "public" + } + ], + "description": "Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance", + "privacy": "public", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "kind": "field", + "name": "primaryCalendarType", + "type": { + "text": "CalendarType | undefined", + "references": [ + { + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" } ] }, - "default": "\"Button\"", - "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.", + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.23" + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { "kind": "field", - "name": "loading", + "name": "secondaryCalendarType", "type": { - "text": "boolean" + "text": "CalendarType | undefined", + "references": [ + { + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" + } + ] }, - "default": "false", - "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.", + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "default": "undefined", "privacy": "public", - "_ui5since": "2.13.0" + "_ui5since": "1.0.0-rc.16", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } }, { "kind": "field", - "name": "loadingDelay", + "name": "formatPattern", "type": { - "text": "number" + "text": "string | undefined" }, - "default": "1000", - "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.", + "description": "Determines the format, displayed in the input field.", + "default": "undefined", + "deprecated": "Use displayFormat and valueFormat instead", "privacy": "public", - "_ui5since": "2.13.0" - } - ], - "events": [ + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } + }, { - "name": "click", - "_ui5privacy": "public", + "kind": "field", + "name": "displayFormat", "type": { - "text": "CustomEvent<ButtonClickEventDetail>", + "text": "string | undefined" + }, + "description": "Determines the format, displayed in the input field.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } + }, + { + "kind": "field", + "name": "valueFormat", + "type": { + "text": "string | undefined" + }, + "description": "Determines the format, used for the value attribute.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } + }, + { + "kind": "field", + "name": "minDate", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", + "privacy": "public", + "_ui5since": "1.0.0-rc.6", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } + }, + { + "kind": "field", + "name": "maxDate", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", + "privacy": "public", + "_ui5since": "1.0.0-rc.6", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } + }, + { + "kind": "field", + "name": "calendarWeekNumbering", + "type": { + "text": "CalendarWeekNumbering", "references": [ { - "name": "ButtonClickEventDetail", + "name": "CalendarWeekNumbering", "package": "@ui5/webcomponents", - "module": "dist/Button.js" + "module": "dist/types/CalendarWeekNumbering.js" } ] }, - "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5since": "2.10.0", - "_ui5parameters": [ - { - "type": { - "text": "Event" - }, - "name": "originalEvent", - "_ui5privacy": "public", - "description": "Returns original event that comes from user's **click** interaction" - }, - { - "type": { - "text": "boolean" - }, - "name": "altKey", - "_ui5privacy": "public", - "description": "Returns whether the \"ALT\" key was pressed when the event was triggered." - }, - { - "type": { - "text": "boolean" - }, - "name": "ctrlKey", - "_ui5privacy": "public", - "description": "Returns whether the \"CTRL\" key was pressed when the event was triggered." - }, - { - "type": { - "text": "boolean" - }, - "name": "metaKey", - "_ui5privacy": "public", - "description": "Returns whether the \"META\" key was pressed when the event was triggered." - }, - { - "type": { - "text": "boolean" - }, - "name": "shiftKey", - "_ui5privacy": "public", - "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered." - } - ] + "default": "\"Default\"", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "privacy": "public", + "_ui5since": "2.2.0", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } } ], "attributes": [ { - "description": "Defines the component design.", - "name": "design", - "default": "\"Default\"", - "fieldName": "design", + "description": "Determines the symbol which separates the dates.\nIf not supplied, the default time interval delimiter for the current locale will be used.", + "name": "delimiter", + "default": "\"-\"", + "fieldName": "delimiter", "type": { - "text": "\"Transparent\" | \"Default\" | \"Positive\" | \"Negative\" | \"Emphasized\" | \"Attention\"" + "text": "string" } }, { - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "description": "**Note:** The getter method is inherited and not supported. If called it will return an empty value.", + "name": "date-value", + "default": "null", + "fieldName": "dateValue", + "type": { + "text": "any" + }, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "description": "**Note:** The getter method is inherited and not supported. If called it will return an empty value.", + "name": "date-value-utc", + "default": "null", + "fieldName": "dateValueUTC", + "type": { + "text": "any" + } + }, + { + "description": "Returns the start date of the currently selected range as JavaScript Date instance.", + "name": "start-date-value", + "default": "null", + "fieldName": "startDateValue", + "type": { + "text": "any" + } + }, + { + "description": "Returns the end date of the currently selected range as JavaScript Date instance.", + "name": "end-date-value", + "default": "null", + "fieldName": "endDateValue", + "type": { + "text": "any" + } + }, + { + "description": "Defines a formatted date value.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + }, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", + "type": { + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + }, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "description": "Determines whether the component is displayed as disabled.", "name": "disabled", "default": "false", "fieldName": "disabled", "type": { "text": "boolean" + }, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", + "description": "Determines whether the component is displayed as read-only.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", + "name": "placeholder", "default": "undefined", - "fieldName": "icon", + "fieldName": "placeholder", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "end-icon", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", "default": "undefined", - "fieldName": "endIcon", + "fieldName": "name", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** This property is only applicable within the context of an HTML Form element.`", - "name": "submits", + "description": "Defines the visibility of the week numbers column.\n\n**Note:** For calendars other than Gregorian,\nthe week numbers are not displayed regardless of what is set.", + "name": "hide-week-numbers", "default": "false", - "fieldName": "submits", + "fieldName": "hideWeekNumbers", "type": { "text": "boolean" }, - "deprecated": "Set the \"type\" property to \"Submit\" to achieve the same result. The \"submits\" property is ignored if \"type\" is set to any value other than \"Button\"." + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } }, { - "description": "Defines the tooltip of the component.\n\n**Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", + "description": "Defines the open or closed state of the popover.", + "name": "open", + "default": "false", + "fieldName": "open", "type": { - "text": "string | undefined" + "text": "boolean" + }, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines the aria-label attribute for the component.", "name": "accessible-name", "default": "undefined", "fieldName": "accessibleName", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { @@ -5804,167 +7032,322 @@ "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", "type": { - "text": "ButtonAccessibilityAttributes" + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", + "description": "Receives id(or many ids) of the elements that describe the input.", + "name": "accessible-description-ref", "default": "undefined", - "fieldName": "accessibleDescription", + "fieldName": "accessibleDescriptionRef", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "type", - "default": "\"Button\"", - "fieldName": "type", + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "name": "primary-calendar-type", + "default": "undefined", + "fieldName": "primaryCalendarType", "type": { - "text": "\"Button\" | \"Submit\" | \"Reset\"" + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" } }, { - "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.", - "name": "accessible-role", - "default": "\"Button\"", - "fieldName": "accessibleRole", + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "name": "secondary-calendar-type", + "default": "undefined", + "fieldName": "secondaryCalendarType", "type": { - "text": "\"Button\" | \"Link\"" + "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" } }, { - "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.", - "name": "loading", - "default": "false", - "fieldName": "loading", + "description": "Determines the format, displayed in the input field.", + "name": "format-pattern", + "default": "undefined", + "fieldName": "formatPattern", "type": { - "text": "boolean" + "text": "string | undefined" + }, + "deprecated": "Use displayFormat and valueFormat instead", + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" } }, { - "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.", - "name": "loading-delay", - "default": "1000", - "fieldName": "loadingDelay", + "description": "Determines the format, displayed in the input field.", + "name": "display-format", + "default": "undefined", + "fieldName": "displayFormat", "type": { - "text": "number" + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } + }, + { + "description": "Determines the format, used for the value attribute.", + "name": "value-format", + "default": "undefined", + "fieldName": "valueFormat", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } + }, + { + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", + "name": "min-date", + "default": "\"\"", + "fieldName": "minDate", + "type": { + "text": "string" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } + }, + { + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", + "name": "max-date", + "default": "\"\"", + "fieldName": "maxDate", + "type": { + "text": "string" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" + } + }, + { + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "name": "calendar-week-numbering", + "default": "\"Default\"", + "fieldName": "calendarWeekNumbering", + "type": { + "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" + }, + "inheritedFrom": { + "name": "DateComponentBase", + "module": "dist/DateComponentBase.js" } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-button", + "name": "DatePicker", + "package": "@ui5/webcomponents", + "module": "dist/DatePicker.js" + }, + "tagName": "ui5-daterange-picker", "customElement": true, + "_ui5since": "1.0.0-rc.8", "_ui5privacy": "public", - "_ui5implements": [ + "slots": [ { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" + "name": "valueStateMessage", + "description": "Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.", + "_ui5since": "1.0.0-rc.7", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "Button", - "module": "dist/Button.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-button", - "declaration": { - "name": "Button", - "module": "dist/Button.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/ButtonBadge.js", - "declarations": [ - { - "kind": "class", - "description": "The `ui5-button-badge` component defines a badge that appears in the `ui5-button`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ButtonBadge.js\";`", - "name": "ButtonBadge", - "members": [ + ], + "events": [ { - "kind": "field", - "name": "design", + "name": "change", + "_ui5privacy": "public", "type": { - "text": "ButtonBadgeDesign", + "text": "CustomEvent<DatePickerChangeEventDetail>", "references": [ { - "name": "ButtonBadgeDesign", + "name": "DatePickerChangeEventDetail", "package": "@ui5/webcomponents", - "module": "dist/types/ButtonBadgeDesign.js" + "module": "dist/DatePicker.js" } ] }, - "default": "\"AttentionDot\"", - "description": "Defines the badge placement and appearance.\n- **InlineText** - displayed inside the button after its text, and recommended for **compact** density.\n- **OverlayText** - displayed at the top-end corner of the button, and recommended for **cozy** density.\n- **AttentionDot** - displayed at the top-end corner of the button as a dot, and suitable for both **cozy** and **compact** densities.", - "privacy": "public", - "_ui5since": "2.7.0" + "description": "Fired when the input operation has finished by pressing Enter or on focusout.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "string" + }, + "name": "value", + "_ui5privacy": "public", + "description": "The submitted value." + }, + { + "type": { + "text": "boolean" + }, + "name": "valid", + "_ui5privacy": "public", + "description": "Indicator if the value is in correct format pattern and in valid range." + } + ], + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } }, { - "kind": "field", - "name": "text", + "name": "input", + "_ui5privacy": "public", "type": { - "text": "string" + "text": "CustomEvent<DatePickerInputEventDetail>", + "references": [ + { + "name": "DatePickerInputEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/DatePicker.js" + } + ] }, - "default": "\"\"", - "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.\n\n**Note:** The badge component only accepts numeric values and the \"+\" symbol. Using other characters or formats may result in unpredictable behavior, which is not guaranteed or supported.", - "privacy": "public", - "_ui5since": "2.7.0" - } - ], - "attributes": [ + "description": "Fired when the value of the component is changed at each key stroke.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "string" + }, + "name": "value", + "_ui5privacy": "public", + "description": "The submitted value." + }, + { + "type": { + "text": "boolean" + }, + "name": "valid", + "_ui5privacy": "public", + "description": "Indicator if the value is in correct format pattern and in valid range." + } + ], + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, { - "description": "Defines the badge placement and appearance.\n- **InlineText** - displayed inside the button after its text, and recommended for **compact** density.\n- **OverlayText** - displayed at the top-end corner of the button, and recommended for **cozy** density.\n- **AttentionDot** - displayed at the top-end corner of the button as a dot, and suitable for both **cozy** and **compact** densities.", - "name": "design", - "default": "\"AttentionDot\"", - "fieldName": "design", + "name": "value-state-change", + "_ui5privacy": "public", "type": { - "text": "\"InlineText\" | \"OverlayText\" | \"AttentionDot\"" + "text": "CustomEvent<DatePickerValueStateChangeEventDetail>", + "references": [ + { + "name": "DatePickerValueStateChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/DatePicker.js" + } + ] + }, + "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "string" + }, + "name": "valueState", + "_ui5privacy": "public", + "description": "The new `valueState` that will be set." + }, + { + "type": { + "text": "boolean" + }, + "name": "valid", + "_ui5privacy": "public", + "description": "Indicator if the value is in correct format pattern and in valid range." + } + ], + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.\n\n**Note:** The badge component only accepts numeric values and the \"+\" symbol. Using other characters or formats may result in unpredictable behavior, which is not guaranteed or supported.", - "name": "text", - "default": "\"\"", - "fieldName": "text", + "name": "open", + "_ui5privacy": "public", "type": { - "text": "string" + "text": "CustomEvent" + }, + "description": "Fired after the component's picker is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.4.0", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the component's picker is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.4.0", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" } } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-button-badge", - "customElement": true, - "_ui5since": "2.7.0", - "_ui5privacy": "public" + ] } ], "exports": [ @@ -5972,480 +7355,519 @@ "kind": "js", "name": "default", "declaration": { - "name": "ButtonBadge", - "module": "dist/ButtonBadge.js" + "name": "DateRangePicker", + "module": "dist/DateRangePicker.js" } }, { "kind": "custom-element-definition", - "name": "ui5-button-badge", + "name": "ui5-daterange-picker", "declaration": { - "name": "ButtonBadge", - "module": "dist/ButtonBadge.js" + "name": "DateRangePicker", + "module": "dist/DateRangePicker.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Calendar.js", - "declarations": [ + "path": "dist/DateTimeInput.js", + "declarations": [], + "exports": [ { - "kind": "interface", - "name": "ICalendarSelectedDates", - "description": "Interface for components that may be slotted inside a `ui5-calendar`.\n\n**Note:** Use with `ui5-date` or `ui5-date-range` as calendar date selection types.", - "_ui5privacy": "public" - }, + "kind": "js", + "name": "default", + "declaration": { + "name": "DateTimeInput", + "module": "dist/DateTimeInput.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/DateTimePicker.js", + "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-calendar` component allows users to select one or more dates.\n\nCurrently selected dates are represented with instances of `ui5-date` as\nchildren of the `ui5-calendar`. The value property of each `ui5-date` must be a\ndate string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.\nWhenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances\nof `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the\n`selection-change` event. This is useful if you want to control the selected dates externally.\n\n### Usage\n\nThe user can navigate to a particular date by:\n\n- Pressing over a month inside the months view\n- Pressing over an year inside the years view\n\nThe user can confirm a date selection by pressing over a date inside the days view.\n\n### Keyboard Handling\nThe `ui5-calendar` provides advanced keyboard handling.\nWhen a picker is showed and focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- Day picker:\n\n- [F4] - Shows month picker\n- [Shift] + [F4] - Shows year picker\n- [Page Up] - Navigate to the previous month\n- [Page Down] - Navigate to the next month\n- [Shift] + [Page Up] - Navigate to the previous year\n- [Shift] + [Page Down] - Navigate to the next year\n- [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards\n- [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards\n- [Home] - Navigate to the first day of the week\n- [End] - Navigate to the last day of the week\n- [Ctrl] + [Home] - Navigate to the first day of the month\n- [Ctrl] + [End] - Navigate to the last day of the month\n\n- Month picker:\n\n- [Page Up] - Navigate to the previous year\n- [Page Down] - Navigate to the next year\n- [Home] - Navigate to the first month of the current row\n- [End] - Navigate to the last month of the current row\n- [Ctrl] + [Home] - Navigate to the first month of the current year\n- [Ctrl] + [End] - Navigate to the last month of the year\n\n- Year picker:\n\n- [Page Up] - Navigate to the previous year range\n- [Page Down] - Navigate the next year range\n- [Home] - Navigate to the first year of the current row\n- [End] - Navigate to the last year of the current row\n- [Ctrl] + [Home] - Navigate to the first year of the current year range\n- [Ctrl] + [End] - Navigate to the last year of the current year range\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n</script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Calendar.js\";`", - "name": "Calendar", - "cssParts": [ - { - "description": "Used to style the day cells.", - "name": "day-cell" - }, - { - "description": "Used to style the day cells when selected.", - "name": "day-cell-selected" - }, - { - "description": "Used to style the day cells in between of selected dates in range.", - "name": "day-cell-selected-between" - }, - { - "description": "Used to style the month cells.", - "name": "month-cell" - }, - { - "description": "Used to style the month cells when selected.", - "name": "month-cell-selected" - }, - { - "description": "Used to style the day cells in between of selected months in range.", - "name": "month-cell-selected-between" - }, - { - "description": "Used to style the month picker root container.", - "name": "month-picker-root" - }, - { - "description": "Used to style the year cells.", - "name": "year-cell" - }, - { - "description": "Used to style the year cells when selected.", - "name": "year-cell-selected" - }, - { - "description": "Used to style the year cells in between of selected years in range.", - "name": "year-cell-selected-between" - }, - { - "description": "Used to style the year picker root container.", - "name": "year-picker-root" - }, - { - "description": "Used to style the year range cells.", - "name": "year-range-cell" - }, - { - "description": "Used to style the year range cells when selected.", - "name": "year-range-cell-selected" - }, - { - "description": "Used to style the year range cells in between of selected year ranges.", - "name": "year-range-cell-selected-between" - }, - { - "description": "Used to style the year range picker root container.", - "name": "year-range-picker-root" - }, - { - "description": "Used to style the calendar header middle buttons (month/year/year-range buttons).", - "name": "calendar-header-middle-button" - }, - { - "description": "Used to style the calendar header navigation arrow buttons (previous/next buttons).", - "name": "calendar-header-arrow-button" - } - ], - "slots": [ - { - "name": "calendarLegend", - "description": "Defines the calendar legend of the component.", - "_ui5since": "1.23.0", - "_ui5type": { - "text": "Array<CalendarLegend>", - "references": [ - { - "name": "CalendarLegend", - "package": "@ui5/webcomponents", - "module": "dist/CalendarLegend.js" - } - ] - }, - "_ui5privacy": "public" - }, + "description": "### Overview\nThe `DateTimePicker` component alows users to select both date (day, month and year) and time (hours, minutes and seconds)\nand for the purpose it consists of input field and Date/Time picker.\n\n### Usage\n\nUse the `DateTimePicker` if you need a combined date and time input component.\nDon't use it if you want to use either date, or time value.\nIn this case, use the `DatePicker` or the `TimePicker` components instead.\n\nThe user can set date/time by:\n\n- using the calendar and the time selectors\n- typing in the input field\n\nProgrammatically, to set date/time for the `DateTimePicker`, use the `value` property\n\n### Formatting\n\nThe value entered by typing into the input field must fit to the used date/time format.\n\nSupported format options are pattern-based on Unicode LDML Date Format notation.\nFor more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\n**Example:** the following format `dd/MM/yyyy, hh:mm:ss aa`\ncorresponds the `13/04/2020, 03:16:16 AM` value.\n\nThe small 'h' defines \"12\" hours format and the \"aa\" symbols - \"AM/PM\" time periods.\n\n**Example:** the following format `dd/MM/yyyy, HH:mm:ss`\ncorresponds the `13/04/2020, 15:16:16` value.\n\nThe capital 'H' indicates \"24\" hours format.\n\n**Note:** If the `formatPattern` does NOT include time,\nthe `DateTimePicker` will fallback to the default time format according to the locale.\n\n**Note:** If no placeholder is set to the `DateTimePicker`,\nthe current `formatPattern` is displayed as a placeholder.\nIf another placeholder is needed, it must be set or in case no placeholder is needed - it can be set to an empty string.\n\n**Note:** If the user input does NOT match the `formatPattern`,\nthe `DateTimePicker` makes an attempt to parse it based on the\nlocale settings.\n\n### Responsive behavior\n\nThe `DateTimePicker` is responsive and fully adapts to all devices.\nFor larger screens, such as tablet or desktop, it is displayed as a popover, while\non phone devices, it is displayed full screen.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DateTimePicker.js\";`", + "name": "DateTimePicker", + "members": [ { - "name": "default", - "description": "Defines the selected date or dates (depending on the `selectionMode` property)\nfor this calendar as instances of `ui5-date` or `ui5-date-range`.\nUse `ui5-date` for single or multiple selection, and `ui5-date-range` for range selection.", - "_ui5propertyName": "dates", - "_ui5type": { - "text": "Array<ICalendarSelectedDates>", - "references": [ - { - "name": "ICalendarSelectedDates", - "package": "@ui5/webcomponents", - "module": "dist/Calendar.js" - } - ] + "kind": "field", + "name": "value", + "type": { + "text": "string" }, - "_ui5privacy": "public" + "default": "\"\"", + "description": "Defines a formatted date value.", + "privacy": "public", + "_ui5formProperty": true, + "_ui5formEvents": "change,input", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } }, - { - "name": "specialDates", - "description": "Defines the special dates, visually emphasized in the calendar.", - "_ui5since": "1.23.0", - "_ui5type": { - "text": "Array<SpecialCalendarDate>", - "references": [ - { - "name": "SpecialCalendarDate", - "package": "@ui5/webcomponents", - "module": "dist/SpecialCalendarDate.js" - } - ] - }, - "_ui5privacy": "public" - } - ], - "members": [ { "kind": "field", - "name": "selectionMode", + "name": "valueState", "type": { - "text": "CalendarSelectionMode", + "text": "ValueState", "references": [ { - "name": "CalendarSelectionMode", - "package": "@ui5/webcomponents", - "module": "dist/types/CalendarSelectionMode.js" + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" } ] }, - "default": "\"Single\"", - "description": "Defines the type of selection used in the calendar component.\nAccepted property values are:\n\n- `CalendarSelectionMode.Single` - enables a single date selection.(default value)\n- `CalendarSelectionMode.Range` - enables selection of a date range.\n- `CalendarSelectionMode.Multiple` - enables selection of multiple dates.", - "privacy": "public" + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } }, { "kind": "field", - "name": "hideWeekNumbers", + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "Defines the visibility of the week numbers column.\n\n**Note:** For calendars other than Gregorian,\nthe week numbers are not displayed regardless of what is set.", - "privacy": "public" + "description": "Defines whether the component is required.", + "privacy": "public", + "_ui5since": "1.0.0-rc.9", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } }, { "kind": "field", - "name": "primaryCalendarType", + "name": "disabled", "type": { - "text": "CalendarType | undefined", - "references": [ - { - "name": "CalendarType", - "package": "@ui5/webcomponents-base", - "module": "dist/types/CalendarType.js" - } - ] + "text": "boolean" }, - "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", - "default": "undefined", + "default": "false", + "description": "Determines whether the component is displayed as disabled.", "privacy": "public", "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { "kind": "field", - "name": "secondaryCalendarType", + "name": "readonly", "type": { - "text": "CalendarType | undefined", - "references": [ - { - "name": "CalendarType", - "package": "@ui5/webcomponents-base", - "module": "dist/types/CalendarType.js" - } - ] + "text": "boolean" }, - "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", - "default": "undefined", + "default": "false", + "description": "Determines whether the component is displayed as read-only.", "privacy": "public", - "_ui5since": "1.0.0-rc.16", "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { "kind": "field", - "name": "formatPattern", + "name": "placeholder", "type": { "text": "string | undefined" }, - "description": "Determines the format, displayed in the input field.", + "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", "default": "undefined", - "deprecated": "Use displayFormat and valueFormat instead", "privacy": "public", "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { "kind": "field", - "name": "displayFormat", + "name": "name", "type": { "text": "string | undefined" }, - "description": "Determines the format, displayed in the input field.", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", "default": "undefined", "privacy": "public", - "_ui5since": "2.14.0", "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { "kind": "field", - "name": "valueFormat", + "name": "hideWeekNumbers", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Determines the format, used for the value attribute.", - "default": "undefined", + "default": "false", + "description": "Defines the visibility of the week numbers column.\n\n**Note:** For calendars other than Gregorian,\nthe week numbers are not displayed regardless of what is set.", "privacy": "public", - "_ui5since": "2.14.0", + "_ui5since": "1.0.0-rc.8", "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { "kind": "field", - "name": "minDate", + "name": "open", "type": { - "text": "string" + "text": "boolean" }, - "default": "\"\"", - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", + "default": "false", + "description": "Defines the open or closed state of the popover.", "privacy": "public", - "_ui5since": "1.0.0-rc.6", + "_ui5since": "2.0.0", "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { "kind": "field", - "name": "maxDate", + "name": "accessibleName", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"\"", - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", + "description": "Defines the aria-label attribute for the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.6", + "_ui5since": "1.0.0-rc.15", "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { "kind": "field", - "name": "calendarWeekNumbering", + "name": "accessibleNameRef", "type": { - "text": "CalendarWeekNumbering", - "references": [ - { - "name": "CalendarWeekNumbering", - "package": "@ui5/webcomponents", - "module": "dist/types/CalendarWeekNumbering.js" - } - ] + "text": "string | undefined" }, - "default": "\"Default\"", - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "description": "Receives id(or many ids) of the elements that label the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "2.2.0", + "_ui5since": "1.0.0-rc.15", "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "name": "DatePicker", + "module": "dist/DatePicker.js" } - } - ], - "events": [ + }, { - "name": "selection-change", - "_ui5privacy": "public", + "kind": "field", + "name": "accessibleDescription", "type": { - "text": "CustomEvent<CalendarSelectionChangeEventDetail>", - "references": [ - { - "name": "CalendarSelectionChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Calendar.js" - } - ] + "text": "string | undefined" }, - "description": "Fired when the selected dates change.\n\n**Note:** If you call `preventDefault()` for this event, the component will not\ncreate instances of `ui5-date` for the newly selected dates. In that case you should do this manually.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that describe the input.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "kind": "method", + "name": "isValid", + "return": { + "type": { + "text": "boolean" + } + }, + "parameters": [ { + "name": "value", "type": { - "text": "Array<string>" + "text": "string" }, - "name": "selectedValues", - "_ui5privacy": "public", - "description": "The selected dates" - }, + "description": "A value to be tested against the current date format", + "_ui5privacy": "public" + } + ], + "description": "Checks if a value is valid against the current date format of the DatePicker.", + "privacy": "public", + "deprecated": "Use isValidValue or isValidDisplayValue instead", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "kind": "method", + "name": "isValidValue", + "return": { + "type": { + "text": "boolean" + } + }, + "parameters": [ { + "name": "value", "type": { - "text": "Array<number>" + "text": "string" }, - "name": "selectedDates", - "_ui5privacy": "public", - "description": "The selected dates as UTC timestamps" + "description": "A value to be tested against the current date format", + "_ui5privacy": "public" } - ] - } - ], - "attributes": [ + ], + "description": "Checks if a value is valid against the current date format of the DatePicker.", + "privacy": "public", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, { - "description": "Defines the type of selection used in the calendar component.\nAccepted property values are:\n\n- `CalendarSelectionMode.Single` - enables a single date selection.(default value)\n- `CalendarSelectionMode.Range` - enables selection of a date range.\n- `CalendarSelectionMode.Multiple` - enables selection of multiple dates.", - "name": "selection-mode", - "default": "\"Single\"", - "fieldName": "selectionMode", - "type": { - "text": "\"Single\" | \"Multiple\" | \"Range\"" + "kind": "method", + "name": "isValidDisplayValue", + "return": { + "type": { + "text": "boolean" + } + }, + "parameters": [ + { + "name": "value", + "type": { + "text": "string" + }, + "description": "A value to be tested against the current date format", + "_ui5privacy": "public" + } + ], + "description": "Checks if a value is valid against the current date format of the DatePicker.", + "privacy": "public", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "description": "Defines the visibility of the week numbers column.\n\n**Note:** For calendars other than Gregorian,\nthe week numbers are not displayed regardless of what is set.", - "name": "hide-week-numbers", - "default": "false", - "fieldName": "hideWeekNumbers", + "kind": "method", + "name": "isInValidRange", + "return": { + "type": { + "text": "boolean" + } + }, + "parameters": [ + { + "name": "value", + "type": { + "text": "string" + }, + "description": "A value to be checked", + "_ui5privacy": "public" + } + ], + "description": "Checks if a date is between the minimum and maximum date.", + "privacy": "public", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "kind": "method", + "name": "formatValue", + "return": { + "type": { + "text": "string" + }, + "description": "The date as string" + }, + "parameters": [ + { + "name": "date", + "type": { + "text": "Date" + }, + "description": "A Java Script date object to be formatted as string", + "_ui5privacy": "public" + } + ], + "description": "Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance", + "privacy": "public", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "kind": "field", + "name": "dateValue", "type": { - "text": "boolean" + "text": "Date | null" + }, + "description": "Currently selected date represented as a Local JavaScript Date instance.", + "privacy": "public", + "default": "null", + "readonly": true, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", - "name": "primary-calendar-type", - "default": "undefined", - "fieldName": "primaryCalendarType", + "kind": "field", + "name": "primaryCalendarType", "type": { - "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + "text": "CalendarType | undefined", + "references": [ + { + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" + } + ] }, + "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "default": "undefined", + "privacy": "public", "inheritedFrom": { "name": "DateComponentBase", "module": "dist/DateComponentBase.js" } }, { - "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", - "name": "secondary-calendar-type", - "default": "undefined", - "fieldName": "secondaryCalendarType", + "kind": "field", + "name": "secondaryCalendarType", "type": { - "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + "text": "CalendarType | undefined", + "references": [ + { + "name": "CalendarType", + "package": "@ui5/webcomponents-base", + "module": "dist/types/CalendarType.js" + } + ] }, + "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.16", "inheritedFrom": { "name": "DateComponentBase", "module": "dist/DateComponentBase.js" } }, { - "description": "Determines the format, displayed in the input field.", - "name": "format-pattern", - "default": "undefined", - "fieldName": "formatPattern", + "kind": "field", + "name": "formatPattern", "type": { "text": "string | undefined" }, + "description": "Determines the format, displayed in the input field.", + "default": "undefined", "deprecated": "Use displayFormat and valueFormat instead", + "privacy": "public", "inheritedFrom": { "name": "DateComponentBase", "module": "dist/DateComponentBase.js" } }, { - "description": "Determines the format, displayed in the input field.", - "name": "display-format", - "default": "undefined", - "fieldName": "displayFormat", + "kind": "field", + "name": "displayFormat", "type": { "text": "string | undefined" }, + "description": "Determines the format, displayed in the input field.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0", "inheritedFrom": { "name": "DateComponentBase", "module": "dist/DateComponentBase.js" } }, { - "description": "Determines the format, used for the value attribute.", - "name": "value-format", - "default": "undefined", - "fieldName": "valueFormat", + "kind": "field", + "name": "valueFormat", "type": { "text": "string | undefined" }, + "description": "Determines the format, used for the value attribute.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0", "inheritedFrom": { "name": "DateComponentBase", "module": "dist/DateComponentBase.js" } }, { - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", - "name": "min-date", - "default": "\"\"", - "fieldName": "minDate", + "kind": "field", + "name": "minDate", "type": { "text": "string" }, + "default": "\"\"", + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", + "privacy": "public", + "_ui5since": "1.0.0-rc.6", "inheritedFrom": { "name": "DateComponentBase", "module": "dist/DateComponentBase.js" } }, { - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", - "name": "max-date", - "default": "\"\"", - "fieldName": "maxDate", + "kind": "field", + "name": "maxDate", "type": { "text": "string" }, + "default": "\"\"", + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", + "privacy": "public", + "_ui5since": "1.0.0-rc.6", "inheritedFrom": { "name": "DateComponentBase", "module": "dist/DateComponentBase.js" } }, { - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", - "name": "calendar-week-numbering", - "default": "\"Default\"", - "fieldName": "calendarWeekNumbering", + "kind": "field", + "name": "calendarWeekNumbering", "type": { - "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" + "text": "CalendarWeekNumbering", + "references": [ + { + "name": "CalendarWeekNumbering", + "package": "@ui5/webcomponents", + "module": "dist/types/CalendarWeekNumbering.js" + } + ] }, + "default": "\"Default\"", + "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "privacy": "public", + "_ui5since": "2.2.0", "inheritedFrom": { "name": "DateComponentBase", "module": "dist/DateComponentBase.js" @@ -6453,572 +7875,212 @@ } ], "superclass": { - "name": "CalendarPart", + "name": "DatePicker", "package": "@ui5/webcomponents", - "module": "dist/CalendarPart.js" + "module": "dist/DatePicker.js" }, - "tagName": "ui5-calendar", + "tagName": "ui5-datetime-picker", "customElement": true, - "_ui5since": "1.0.0-rc.11", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "Calendar", - "module": "dist/Calendar.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-calendar", - "declaration": { - "name": "Calendar", - "module": "dist/Calendar.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/CalendarDate.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-date` component defines a calendar date to be used inside `ui5-calendar`", - "name": "CalendarDate", - "members": [ + "_ui5since": "1.0.0-rc.7", + "_ui5privacy": "public", + "slots": [ { - "kind": "field", - "name": "value", - "type": { - "text": "string" + "name": "valueStateMessage", + "description": "Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.", + "_ui5since": "1.0.0-rc.7", + "_ui5type": { + "text": "Array<HTMLElement>" }, - "default": "\"\"", - "description": "The date formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", - "privacy": "public" + "_ui5privacy": "public", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } } ], "attributes": [ { - "description": "The date formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", + "description": "Defines a formatted date value.", "name": "value", "default": "\"\"", "fieldName": "value", "type": { "text": "string" + }, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-date", - "customElement": true, - "_ui5privacy": "public", - "_ui5abstract": true, - "_ui5implements": [ - { - "name": "ICalendarSelectedDates", - "package": "@ui5/webcomponents", - "module": "dist/Calendar.js" - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "CalendarDate", - "module": "dist/CalendarDate.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-date", - "declaration": { - "name": "CalendarDate", - "module": "dist/CalendarDate.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/CalendarDateRange.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-date-range` component defines a range of dates to be used inside `ui5-calendar`", - "name": "CalendarDateRange", - "members": [ + }, { - "kind": "field", - "name": "startValue", + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", "type": { - "text": "string" + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" }, - "default": "\"\"", - "description": "Start of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", - "privacy": "public" + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } }, { - "kind": "field", - "name": "endValue", + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", "type": { - "text": "string" + "text": "boolean" }, - "default": "\"\"", - "description": "End of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", - "privacy": "public" - } - ], - "attributes": [ + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, { - "description": "Start of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", - "name": "start-value", - "default": "\"\"", - "fieldName": "startValue", + "description": "Determines whether the component is displayed as disabled.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", "type": { - "text": "string" + "text": "boolean" + }, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "description": "End of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", - "name": "end-value", - "default": "\"\"", - "fieldName": "endValue", - "type": { - "text": "string" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-date-range", - "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public", - "_ui5abstract": true, - "_ui5implements": [ - { - "name": "ICalendarSelectedDates", - "package": "@ui5/webcomponents", - "module": "dist/Calendar.js" - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "CalendarDateRange", - "module": "dist/CalendarDateRange.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-date-range", - "declaration": { - "name": "CalendarDateRange", - "module": "dist/CalendarDateRange.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/CalendarLegend.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-calendar-legend` component is designed for use within the `ui5-calendar` to display a legend.\nEach `ui5-calendar-legend-item` represents a unique date type, specifying its visual style\nand a corresponding textual label.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/CalendarLegend.js\";`", - "name": "CalendarLegend", - "slots": [ - { - "name": "default", - "description": "Defines the items of the component.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<CalendarLegendItem>", - "references": [ - { - "name": "CalendarLegendItem", - "package": "@ui5/webcomponents", - "module": "dist/CalendarLegendItem.js" - } - ] - }, - "_ui5privacy": "public" - } - ], - "members": [ - { - "kind": "field", - "name": "hideToday", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Hides the Today item in the legend.", - "privacy": "public" - }, - { - "kind": "field", - "name": "hideSelectedDay", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Hides the Selected day item in the legend.", - "privacy": "public" - }, - { - "kind": "field", - "name": "hideNonWorkingDay", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Hides the Non-Working day item in the legend.", - "privacy": "public" - }, - { - "kind": "field", - "name": "hideWorkingDay", + "description": "Determines whether the component is displayed as read-only.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", "type": { "text": "boolean" }, - "default": "false", - "description": "Hides the Working day item in the legend.", - "privacy": "public" - } - ], - "attributes": [ - { - "description": "Hides the Today item in the legend.", - "name": "hide-today", - "default": "false", - "fieldName": "hideToday", - "type": { - "text": "boolean" - } - }, - { - "description": "Hides the Selected day item in the legend.", - "name": "hide-selected-day", - "default": "false", - "fieldName": "hideSelectedDay", - "type": { - "text": "boolean" - } - }, - { - "description": "Hides the Non-Working day item in the legend.", - "name": "hide-non-working-day", - "default": "false", - "fieldName": "hideNonWorkingDay", - "type": { - "text": "boolean" + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "description": "Hides the Working day item in the legend.", - "name": "hide-working-day", - "default": "false", - "fieldName": "hideWorkingDay", - "type": { - "text": "boolean" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-calendar-legend", - "customElement": true, - "_ui5since": "1.23.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "CalendarLegend", - "module": "dist/CalendarLegend.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-calendar-legend", - "declaration": { - "name": "CalendarLegend", - "module": "dist/CalendarLegend.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/CalendarLegendItem.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nEach `ui5-calendar-legend-item` represents a legend item, displaying a color with a label.\nThe color is determined by the `type` property and the label by the `text` property.\nIf a `ui5-special-date` is used within the `ui5-calendar` and a type is set, clicking on a `ui5-calendar-legend-item`\nwith the same type will emphasize the respective date(s) in the calendar.\n\n### Usage\nThe `ui5-calendar-legend-item` is intended to be used within the `ui5-calendar-legend` component.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/CalendarLegendItem.js\";`", - "name": "CalendarLegendItem", - "members": [ - { - "kind": "field", - "name": "text", + "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", + "name": "placeholder", + "default": "undefined", + "fieldName": "placeholder", "type": { "text": "string | undefined" }, - "description": "Defines the text content of the Calendar Legend Item.", - "default": "undefined", - "privacy": "public" + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } }, { - "kind": "field", - "name": "type", - "type": { - "text": "CalendarLegendItemType", - "references": [ - { - "name": "CalendarLegendItemType", - "package": "@ui5/webcomponents", - "module": "dist/types/CalendarLegendItemType.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the type of the Calendar Legend Item.", - "privacy": "public" - } - ], - "attributes": [ - { - "description": "Defines the text content of the Calendar Legend Item.", - "name": "text", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", "default": "undefined", - "fieldName": "text", + "fieldName": "name", "type": { "text": "string | undefined" - } - }, - { - "description": "Defines the type of the Calendar Legend Item.", - "name": "type", - "default": "\"None\"", - "fieldName": "type", - "type": { - "text": "\"None\" | \"Today\" | \"Selected\" | \"Working\" | \"NonWorking\" | \"Type01\" | \"Type02\" | \"Type03\" | \"Type04\" | \"Type05\" | \"Type06\" | \"Type07\" | \"Type08\" | \"Type09\" | \"Type10\" | \"Type11\" | ... 8 more ... | \"Type20\"" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-calendar-legend-item", - "customElement": true, - "_ui5since": "1.23.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "CalendarLegendItem", - "module": "dist/CalendarLegendItem.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-calendar-legend-item", - "declaration": { - "name": "CalendarLegendItem", - "module": "dist/CalendarLegendItem.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/CalendarPart.js", - "declarations": [ - { - "kind": "class", - "description": "Abstract base class for Calendar, DayPicker, MonthPicker and YearPicker that adds support for:\n - common properties (timestamp, selectedDates): declarations and methods that operate on them\n - other common code", - "name": "CalendarPart", - "members": [ - { - "kind": "field", - "name": "primaryCalendarType", - "type": { - "text": "CalendarType | undefined", - "references": [ - { - "name": "CalendarType", - "package": "@ui5/webcomponents-base", - "module": "dist/types/CalendarType.js" - } - ] }, - "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", - "default": "undefined", - "privacy": "public", "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "kind": "field", - "name": "secondaryCalendarType", + "description": "Defines the visibility of the week numbers column.\n\n**Note:** For calendars other than Gregorian,\nthe week numbers are not displayed regardless of what is set.", + "name": "hide-week-numbers", + "default": "false", + "fieldName": "hideWeekNumbers", "type": { - "text": "CalendarType | undefined", - "references": [ - { - "name": "CalendarType", - "package": "@ui5/webcomponents-base", - "module": "dist/types/CalendarType.js" - } - ] + "text": "boolean" }, - "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.16", "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "kind": "field", - "name": "formatPattern", + "description": "Defines the open or closed state of the popover.", + "name": "open", + "default": "false", + "fieldName": "open", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Determines the format, displayed in the input field.", - "default": "undefined", - "deprecated": "Use displayFormat and valueFormat instead", - "privacy": "public", "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "kind": "field", - "name": "displayFormat", + "description": "Defines the aria-label attribute for the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Determines the format, displayed in the input field.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0", "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "kind": "field", - "name": "valueFormat", + "description": "Receives id(or many ids) of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" }, - "description": "Determines the format, used for the value attribute.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0", "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "kind": "field", - "name": "minDate", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"\"", - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", - "privacy": "public", - "_ui5since": "1.0.0-rc.6", "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "kind": "field", - "name": "maxDate", + "description": "Receives id(or many ids) of the elements that describe the input.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"\"", - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", - "privacy": "public", - "_ui5since": "1.0.0-rc.6", "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "kind": "field", - "name": "calendarWeekNumbering", + "description": "Currently selected date represented as a Local JavaScript Date instance.", + "name": "date-value", + "default": "null", + "fieldName": "dateValue", "type": { - "text": "CalendarWeekNumbering", - "references": [ - { - "name": "CalendarWeekNumbering", - "package": "@ui5/webcomponents", - "module": "dist/types/CalendarWeekNumbering.js" - } - ] + "text": "any" }, - "default": "\"Default\"", - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", - "privacy": "public", - "_ui5since": "2.2.0", "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "name": "DatePicker", + "module": "dist/DatePicker.js" } - } - ], - "superclass": { - "name": "DateComponentBase", - "package": "@ui5/webcomponents", - "module": "dist/DateComponentBase.js" - }, - "customElement": true, - "_ui5privacy": "public", - "attributes": [ + }, { "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", "name": "primary-calendar-type", @@ -7124,157 +8186,161 @@ "module": "dist/DateComponentBase.js" } } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "CalendarPart", - "module": "dist/CalendarPart.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/Card.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-card` is a component that represents information in the form of a\ntile with separate header and content areas.\nThe content area of a `ui5-card` can be arbitrary HTML content.\nThe header can be used through slot `header`. For which there is a `ui5-card-header` component to achieve the card look and feel.\n\nNote: We recommend the usage of `ui5-card-header` for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Card.js\";`\n\n`import \"@ui5/webcomponents/dist/CardHeader.js\";` (for `ui5-card-header`)", - "name": "Card", - "cssParts": [ - { - "description": "Used to style the root DOM element of the card component", - "name": "root" - }, - { - "description": "Used to style the content of the card", - "name": "content" - } ], - "slots": [ + "events": [ { - "name": "default", - "description": "Defines the content of the component.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<HTMLElement>" + "name": "change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<DatePickerChangeEventDetail>", + "references": [ + { + "name": "DatePickerChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/DatePicker.js" + } + ] }, - "_ui5privacy": "public" + "description": "Fired when the input operation has finished by pressing Enter or on focusout.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "string" + }, + "name": "value", + "_ui5privacy": "public", + "description": "The submitted value." + }, + { + "type": { + "text": "boolean" + }, + "name": "valid", + "_ui5privacy": "public", + "description": "Indicator if the value is in correct format pattern and in valid range." + } + ], + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } }, { - "name": "header", - "description": "Defines the header of the component.\n\n**Note:** Use `ui5-card-header` for the intended design.", - "_ui5since": "1.0.0-rc.15", - "_ui5type": { - "text": "Array<CardHeader>", + "name": "input", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<DatePickerInputEventDetail>", "references": [ { - "name": "CardHeader", + "name": "DatePickerInputEventDetail", "package": "@ui5/webcomponents", - "module": "dist/CardHeader.js" + "module": "dist/DatePicker.js" } ] }, - "_ui5privacy": "public" - } - ], - "members": [ - { - "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible name of the component, which is used as the name of the card region and should be unique per card.\n\n**Note:** `accessibleName` should be always set, unless `accessibleNameRef` is set.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.16" - }, - { - "kind": "field", - "name": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, - "description": "Defines the IDs of the elements that label the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.16" - }, - { - "kind": "field", - "name": "loading", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if a loading indicator would be displayed over the card.", - "privacy": "public", - "_ui5since": "2.1.0" - }, - { - "kind": "field", - "name": "loadingDelay", - "type": { - "text": "number" - }, - "default": "1000", - "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this card.", - "privacy": "public", - "_ui5since": "2.1.0" - } - ], - "attributes": [ - { - "description": "Defines the accessible name of the component, which is used as the name of the card region and should be unique per card.\n\n**Note:** `accessibleName` should be always set, unless `accessibleNameRef` is set.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" + "description": "Fired when the value of the component is changed at each key stroke.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "string" + }, + "name": "value", + "_ui5privacy": "public", + "description": "The submitted value." + }, + { + "type": { + "text": "boolean" + }, + "name": "valid", + "_ui5privacy": "public", + "description": "Indicator if the value is in correct format pattern and in valid range." + } + ], + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "description": "Defines the IDs of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "name": "value-state-change", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent<DatePickerValueStateChangeEventDetail>", + "references": [ + { + "name": "DatePickerValueStateChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/DatePicker.js" + } + ] + }, + "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "string" + }, + "name": "valueState", + "_ui5privacy": "public", + "description": "The new `valueState` that will be set." + }, + { + "type": { + "text": "boolean" + }, + "name": "valid", + "_ui5privacy": "public", + "description": "Indicator if the value is in correct format pattern and in valid range." + } + ], + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "description": "Defines if a loading indicator would be displayed over the card.", - "name": "loading", - "default": "false", - "fieldName": "loading", + "name": "open", + "_ui5privacy": "public", "type": { - "text": "boolean" + "text": "CustomEvent" + }, + "description": "Fired after the component's picker is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.4.0", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" } }, { - "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this card.", - "name": "loading-delay", - "default": "1000", - "fieldName": "loadingDelay", + "name": "close", + "_ui5privacy": "public", "type": { - "text": "number" + "text": "CustomEvent" + }, + "description": "Fired after the component's picker is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.4.0", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" } } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-card", - "customElement": true, - "_ui5privacy": "public" + ] } ], "exports": [ @@ -7282,213 +8348,178 @@ "kind": "js", "name": "default", "declaration": { - "name": "Card", - "module": "dist/Card.js" + "name": "DateTimePicker", + "module": "dist/DateTimePicker.js" } }, { "kind": "custom-element-definition", - "name": "ui5-card", + "name": "ui5-datetime-picker", "declaration": { - "name": "Card", - "module": "dist/Card.js" + "name": "DateTimePicker", + "module": "dist/DateTimePicker.js" } } ] }, { "kind": "javascript-module", - "path": "dist/CardHeader.js", + "path": "dist/DayPicker.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "DayPicker", + "module": "dist/DayPicker.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/Dialog.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-card-header` is a component, meant to be used as a header of the `ui5-card` component.\nIt displays valuable information, that can be defined with several properties, such as: `titleText`, `subtitleText`, `additionalText`\nand two slots: `avatar` and `action`.\n\n### Keyboard handling\nIn case you enable `interactive` property, you can press the `ui5-card-header` by Space and Enter keys.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/CardHeader\";`", - "name": "CardHeader", + "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`", + "name": "Dialog", "cssParts": [ { - "description": "Used to style the root DOM element of the CardHeader", - "name": "root" - }, - { - "description": "Used to style the title of the CardHeader", - "name": "title" + "description": "Used to style the header of the component", + "name": "header" }, { - "description": "Used to style the subtitle of the CardHeader", - "name": "subtitle" + "description": "Used to style the content of the component", + "name": "content" }, { - "description": "Used to style the additional text of the CardHeader", - "name": "additional-text" + "description": "Used to style the footer of the component", + "name": "footer" } ], "slots": [ { - "name": "avatar", - "description": "Defines an avatar image, displayed in the left most part of the header.", + "name": "header", + "description": "Defines the header HTML Element.\n\n**Note:** When a `ui5-bar` is used in the header, you should remove the default dialog's paddings.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.", "_ui5type": { "text": "Array<HTMLElement>" }, "_ui5privacy": "public" }, { - "name": "action", - "description": "Defines an action, displayed in the right most part of the header.", + "name": "footer", + "description": "Defines the footer HTML Element.\n\n**Note:** When a `ui5-bar` is used in the footer, you should remove the default dialog's paddings.", "_ui5type": { "text": "Array<HTMLElement>" }, "_ui5privacy": "public" + }, + { + "name": "default", + "description": "Defines the content of the Popup.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } } ], "members": [ { "kind": "field", - "name": "titleText", + "name": "headerText", "type": { "text": "string | undefined" }, - "description": "Defines the title text.", + "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "subtitleText", + "name": "stretch", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the subtitle text.", - "default": "undefined", + "default": "false", + "description": "Determines if the dialog will be stretched to full screen on mobile. On desktop,\nthe dialog will be stretched to approximately 90% of the viewport.\n\n**Note:** For better usability of the component it is recommended to set this property to \"true\" when the dialog is opened on phone.", "privacy": "public" }, { "kind": "field", - "name": "additionalText", + "name": "draggable", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the additional text.", - "default": "undefined", - "privacy": "public" + "default": "false", + "description": "Determines whether the component is draggable.\nIf this property is set to true, the Dialog will be draggable by its header.\n\n**Note:** The component can be draggable only in desktop mode.\n\n**Note:** This property overrides the default HTML \"draggable\" attribute native behavior.\nWhen \"draggable\" is set to true, the native browser \"draggable\"\nbehavior is prevented and only the Dialog custom logic (\"draggable by its header\") works.", + "privacy": "public", + "_ui5since": "1.0.0-rc.9" }, { "kind": "field", - "name": "interactive", + "name": "resizable", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the component would be interactive,\ne.g gets hover effect and `click` event is fired, when pressed.", - "privacy": "public" - } - ], - "events": [ + "description": "Configures the component to be resizable.\nIf this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages.\nIn RTL languages, the resize handle will be placed in the bottom left corner.\n\n**Note:** The component can be resizable only in desktop mode.\n\n**Note:** Upon resizing, externally defined height and width styling will be ignored.", + "privacy": "public", + "_ui5since": "1.0.0-rc.10" + }, { - "name": "click", - "_ui5privacy": "public", + "kind": "field", + "name": "state", "type": { - "text": "CustomEvent" + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] }, - "description": "Fired when the component is activated by mouse/tap or by using the Enter or Space key.\n\n**Note:** The event would be fired only if the `interactive` property is set to true.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true - } - ], - "attributes": [ - { - "description": "Defines the title text.", - "name": "title-text", - "default": "undefined", - "fieldName": "titleText", - "type": { - "text": "string | undefined" - } + "default": "\"None\"", + "description": "Defines the state of the `Dialog`.\n\n**Note:** If `\"Negative\"` and `\"Critical\"` states is set, it will change the\naccessibility role to \"alertdialog\", if the accessibleRole property is set to `\"Dialog\"`.", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { - "description": "Defines the subtitle text.", - "name": "subtitle-text", - "default": "undefined", - "fieldName": "subtitleText", + "kind": "field", + "name": "initialFocus", "type": { "text": "string | undefined" - } - }, - { - "description": "Defines the additional text.", - "name": "additional-text", + }, + "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", "default": "undefined", - "fieldName": "additionalText", - "type": { - "text": "string | undefined" + "privacy": "public", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } }, { - "description": "Defines if the component would be interactive,\ne.g gets hover effect and `click` event is fired, when pressed.", - "name": "interactive", - "default": "false", - "fieldName": "interactive", + "kind": "field", + "name": "preventFocusRestore", "type": { "text": "boolean" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-card-header", - "customElement": true, - "_ui5since": "1.0.0-rc.15", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "CardHeader", - "module": "dist/CardHeader.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-card-header", - "declaration": { - "name": "CardHeader", - "module": "dist/CardHeader.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/Carousel.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\nThe Carousel allows the user to browse through a set of items.\nThe component is mostly used for showing a gallery of images, but can hold any other HTML element.\n\nThere are several ways to perform navigation:\n\n- on desktop - the user can navigate using the navigation arrows or with keyboard shortcuts.\n- on touch devices - the user can navigate using the navigation arrows (always visible) or can use swipe gestures.\n\n### Usage\n\n#### When to use:\n\n- The items you want to display are very different from each other.\n- You want to display the items one after the other.\n\n#### When not to use:\n\n- The items you want to display need to be visible at the same time.\n- The items you want to display are uniform and very similar.\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-carousel` is focused the user can navigate between the items\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] - Navigates to previous and next item\n- [Left] or [Right] - Navigates to previous and next item\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Carousel.js\";`", - "name": "Carousel", - "cssParts": [ - { - "description": "Used to style the content of the component", - "name": "content" - } - ], - "slots": [ - { - "name": "default", - "description": "Defines the content of the component.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<HTMLElement>" }, - "_ui5privacy": "public" - } - ], - "members": [ + "default": "false", + "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", + "privacy": "public", + "_ui5since": "1.0.0-rc.8", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, { "kind": "field", "name": "accessibleName", @@ -7498,7 +8529,11 @@ "description": "Defines the accessible name of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "1.24" + "_ui5since": "1.0.0-rc.15", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } }, { "kind": "field", @@ -7506,209 +8541,186 @@ "type": { "text": "string | undefined" }, - "description": "Defines the IDs of the elements that label the input.", + "description": "Defines the IDs of the elements that label the component.", "default": "undefined", "privacy": "public", - "_ui5since": "1.24" + "_ui5since": "1.1.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } }, { "kind": "field", - "name": "cyclic", + "name": "accessibleRole", "type": { - "text": "boolean" + "text": "PopupAccessibleRole", + "references": [ + { + "name": "PopupAccessibleRole", + "package": "@ui5/webcomponents", + "module": "dist/types/PopupAccessibleRole.js" + } + ] }, - "default": "false", - "description": "Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.", - "privacy": "public" + "default": "\"Dialog\"", + "description": "Allows setting a custom role.", + "privacy": "public", + "_ui5since": "1.10.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } }, { "kind": "field", - "name": "itemsPerPage", + "name": "accessibleDescription", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"S1 M1 L1 XL1\"", - "description": "Defines the number of items per page depending on the carousel width.\n\n- 'S' for screens smaller than 600 pixels.\n- 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n- 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n- 'XL' for screens greater than or equal to 1440 pixels.\n\nOne item per page is shown by default.", - "privacy": "public" + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.11.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } }, { "kind": "field", - "name": "hideNavigationArrows", + "name": "accessibleDescriptionRef", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.", + "description": "Receives id(or many ids) of the elements that describe the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "2.11.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } }, { "kind": "field", - "name": "hidePageIndicator", + "name": "preventInitialFocus", "type": { "text": "boolean" }, "default": "false", - "description": "Defines the visibility of the page indicator.\nIf set to true the page indicator will be hidden.", + "description": "Indicates whether initial focus should be prevented.", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "2.0.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } }, { "kind": "field", - "name": "pageIndicatorType", + "name": "open", + "description": "Indicates if the element is open", + "privacy": "public", + "default": "false", "type": { - "text": "CarouselPageIndicatorType", - "references": [ - { - "name": "CarouselPageIndicatorType", - "package": "@ui5/webcomponents", - "module": "dist/types/CarouselPageIndicatorType.js" - } - ] + "text": "boolean" }, - "default": "\"Default\"", - "description": "Defines the style of the page indicator.\nAvailable options are:\n\n- `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)\n- `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)", - "privacy": "public", - "_ui5since": "1.10" + "_ui5since": "1.2.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } }, { - "kind": "field", - "name": "backgroundDesign", - "type": { - "text": "BackgroundDesign", - "references": [ - { - "name": "BackgroundDesign", - "package": "@ui5/webcomponents", - "module": "dist/types/BackgroundDesign.js" - } - ] + "kind": "method", + "name": "applyFocus", + "return": { + "type": { + "text": "Promise<void>" + }, + "description": "Promise that resolves when the focus is applied" }, - "default": "\"Translucent\"", - "description": "Defines the carousel's background design.", + "description": "Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.", "privacy": "public", - "_ui5since": "1.14" + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + } + ], + "attributes": [ + { + "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "name": "pageIndicatorBackgroundDesign", + "description": "Determines if the dialog will be stretched to full screen on mobile. On desktop,\nthe dialog will be stretched to approximately 90% of the viewport.\n\n**Note:** For better usability of the component it is recommended to set this property to \"true\" when the dialog is opened on phone.", + "name": "stretch", + "default": "false", + "fieldName": "stretch", "type": { - "text": "BackgroundDesign", - "references": [ - { - "name": "BackgroundDesign", - "package": "@ui5/webcomponents", - "module": "dist/types/BackgroundDesign.js" - } - ] - }, - "default": "\"Solid\"", - "description": "Defines the page indicator background design.", - "privacy": "public", - "_ui5since": "1.14" + "text": "boolean" + } }, { - "kind": "field", - "name": "pageIndicatorBorderDesign", + "description": "Determines whether the component is draggable.\nIf this property is set to true, the Dialog will be draggable by its header.\n\n**Note:** The component can be draggable only in desktop mode.\n\n**Note:** This property overrides the default HTML \"draggable\" attribute native behavior.\nWhen \"draggable\" is set to true, the native browser \"draggable\"\nbehavior is prevented and only the Dialog custom logic (\"draggable by its header\") works.", + "name": "draggable", + "default": "false", + "fieldName": "draggable", "type": { - "text": "BorderDesign", - "references": [ - { - "name": "BorderDesign", - "package": "@ui5/webcomponents", - "module": "dist/types/BorderDesign.js" - } - ] - }, - "default": "\"Solid\"", - "description": "Defines the page indicator border design.", - "privacy": "public", - "_ui5since": "1.14" + "text": "boolean" + } }, { - "kind": "field", - "name": "arrowsPlacement", + "description": "Configures the component to be resizable.\nIf this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages.\nIn RTL languages, the resize handle will be placed in the bottom left corner.\n\n**Note:** The component can be resizable only in desktop mode.\n\n**Note:** Upon resizing, externally defined height and width styling will be ignored.", + "name": "resizable", + "default": "false", + "fieldName": "resizable", "type": { - "text": "CarouselArrowsPlacement", - "references": [ - { - "name": "CarouselArrowsPlacement", - "package": "@ui5/webcomponents", - "module": "dist/types/CarouselArrowsPlacement.js" - } - ] - }, - "default": "\"Content\"", - "description": "Defines the position of arrows.\n\nAvailable options are:\n\n- `Content` - the arrows are placed on the sides of the current page.\n- `Navigation` - the arrows are placed on the sides of the page indicator.", - "privacy": "public" + "text": "boolean" + } }, { - "kind": "method", - "name": "navigateTo", - "return": { - "type": { - "text": "void" - } - }, - "parameters": [ - { - "name": "itemIndex", - "type": { - "text": "number" - }, - "description": "The index of the target page", - "_ui5privacy": "public" - } - ], - "description": "Changes the currently displayed page.", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "description": "Defines the state of the `Dialog`.\n\n**Note:** If `\"Negative\"` and `\"Critical\"` states is set, it will change the\naccessibility role to \"alertdialog\", if the accessibleRole property is set to `\"Dialog\"`.", + "name": "state", + "default": "\"None\"", + "fieldName": "state", + "type": { + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + } }, { - "kind": "field", - "name": "visibleItemsIndices", + "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", + "name": "initial-focus", + "default": "undefined", + "fieldName": "initialFocus", "type": { - "text": "Array<number>" + "text": "string | undefined" }, - "description": "The indices of the currently visible items of the component.", - "privacy": "public", - "default": "[]", - "readonly": true, - "_ui5since": "1.0.0-rc.15" - } - ], - "events": [ + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, { - "name": "navigate", - "_ui5privacy": "public", + "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", + "name": "prevent-focus-restore", + "default": "false", + "fieldName": "preventFocusRestore", "type": { - "text": "CustomEvent<CarouselNavigateEventDetail>", - "references": [ - { - "name": "CarouselNavigateEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Carousel.js" - } - ] + "text": "boolean" }, - "description": "Fired whenever the page changes due to user interaction,\nwhen the user clicks on the navigation arrows or while resizing,\nbased on the `items-per-page` property.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "1.0.0-rc.7", - "_ui5parameters": [ - { - "type": { - "text": "Integer" - }, - "name": "selectedIndex", - "_ui5privacy": "public", - "description": "the current selected index" - } - ] - } - ], - "attributes": [ + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, { "description": "Defines the accessible name of the component.", "name": "accessible-name", @@ -7716,117 +8728,178 @@ "fieldName": "accessibleName", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } }, { - "description": "Defines the IDs of the elements that label the input.", + "description": "Defines the IDs of the elements that label the component.", "name": "accessible-name-ref", "default": "undefined", "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } }, { - "description": "Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.", - "name": "cyclic", - "default": "false", - "fieldName": "cyclic", + "description": "Allows setting a custom role.", + "name": "accessible-role", + "default": "\"Dialog\"", + "fieldName": "accessibleRole", "type": { - "text": "boolean" + "text": "\"None\" | \"Dialog\" | \"AlertDialog\"" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } }, { - "description": "Defines the number of items per page depending on the carousel width.\n\n- 'S' for screens smaller than 600 pixels.\n- 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n- 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n- 'XL' for screens greater than or equal to 1440 pixels.\n\nOne item per page is shown by default.", - "name": "items-per-page", - "default": "\"S1 M1 L1 XL1\"", - "fieldName": "itemsPerPage", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", "type": { - "text": "string" + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } }, { - "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.", - "name": "hide-navigation-arrows", - "default": "false", - "fieldName": "hideNavigationArrows", + "description": "Receives id(or many ids) of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", "type": { - "text": "boolean" + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } }, { - "description": "Defines the visibility of the page indicator.\nIf set to true the page indicator will be hidden.", - "name": "hide-page-indicator", + "description": "Indicates whether initial focus should be prevented.", + "name": "prevent-initial-focus", "default": "false", - "fieldName": "hidePageIndicator", + "fieldName": "preventInitialFocus", "type": { "text": "boolean" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } }, { - "description": "Defines the style of the page indicator.\nAvailable options are:\n\n- `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)\n- `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)", - "name": "page-indicator-type", - "default": "\"Default\"", - "fieldName": "pageIndicatorType", - "type": { - "text": "\"Default\" | \"Numeric\"" - } - }, - { - "description": "Defines the carousel's background design.", - "name": "background-design", - "default": "\"Translucent\"", - "fieldName": "backgroundDesign", + "description": "Indicates if the element is open", + "name": "open", + "default": "false", + "fieldName": "open", "type": { - "text": "\"Transparent\" | \"Solid\" | \"Translucent\"" + "text": "any" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } - }, + } + ], + "superclass": { + "name": "Popup", + "package": "@ui5/webcomponents", + "module": "dist/Popup.js" + }, + "tagName": "ui5-dialog", + "customElement": true, + "_ui5privacy": "public", + "events": [ { - "description": "Defines the page indicator background design.", - "name": "page-indicator-background-design", - "default": "\"Solid\"", - "fieldName": "pageIndicatorBackgroundDesign", + "name": "before-open", + "_ui5privacy": "public", "type": { - "text": "\"Transparent\" | \"Solid\" | \"Translucent\"" + "text": "CustomEvent" + }, + "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } }, { - "description": "Defines the page indicator border design.", - "name": "page-indicator-border-design", - "default": "\"Solid\"", - "fieldName": "pageIndicatorBorderDesign", + "name": "open", + "_ui5privacy": "public", "type": { - "text": "\"None\" | \"Solid\"" + "text": "CustomEvent" + }, + "description": "Fired after the component is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } }, { - "description": "Defines the position of arrows.\n\nAvailable options are:\n\n- `Content` - the arrows are placed on the sides of the current page.\n- `Navigation` - the arrows are placed on the sides of the page indicator.", - "name": "arrows-placement", - "default": "\"Content\"", - "fieldName": "arrowsPlacement", + "name": "before-close", + "_ui5privacy": "public", "type": { - "text": "\"Content\" | \"Navigation\"" + "text": "CustomEvent<PopupBeforeCloseEventDetail>", + "references": [ + { + "name": "PopupBeforeCloseEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Popup.js" + } + ] + }, + "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "escPressed", + "_ui5privacy": "public", + "description": "Indicates that `ESC` key has triggered the event." + } + ], + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } }, { - "description": "The indices of the currently visible items of the component.", - "name": "visible-items-indices", - "default": "[]", - "fieldName": "visibleItemsIndices", + "name": "close", + "_ui5privacy": "public", "type": { - "text": "any" + "text": "CustomEvent" + }, + "description": "Fired after the component is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-carousel", - "customElement": true, - "_ui5since": "1.0.0-rc.6", - "_ui5privacy": "public" + ] } ], "exports": [ @@ -7834,283 +8907,239 @@ "kind": "js", "name": "default", "declaration": { - "name": "Carousel", - "module": "dist/Carousel.js" + "name": "Dialog", + "module": "dist/Dialog.js" } }, { "kind": "custom-element-definition", - "name": "ui5-carousel", + "name": "ui5-dialog", "declaration": { - "name": "Carousel", - "module": "dist/Carousel.js" + "name": "Dialog", + "module": "dist/Dialog.js" } } ] }, { "kind": "javascript-module", - "path": "dist/CheckBox.js", + "path": "dist/DropIndicator.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "DropIndicator", + "module": "dist/DropIndicator.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/DynamicDateRange.js", "declarations": [ + { + "kind": "interface", + "name": "IDynamicDateRangeOption", + "description": "Represents a dynamic date range option used by the `ui5-dynamic-date-range` component.\n\nRepresents a dynamic date range option used for handling dynamic date ranges.\nThis interface defines the structure and behavior required for implementing\ndynamic date range options, including formatting, parsing, validation, and\nconversion of date range values.\n\n * Properties:\n- `icon`: The icon associated with the dynamic date range option, typically used for UI representation.\n- `operator`: A unique operator identifying the dynamic date range option.\n- `text`: The display text for the dynamic date range option.\n- `template` (optional): A JSX template for rendering the dynamic date range option.\n\nMethods:\n- `format(value: DynamicDateRangeValue): string`: Formats the given dynamic date range value into a string representation.\n- `parse(value: string): DynamicDateRangeValue | undefined`: Parses a string into a dynamic date range value.\n- `toDates(value: DynamicDateRangeValue): Array<Date>`: Converts a dynamic date range value into an array of `Date` objects.\n- `handleSelectionChange?(event: CustomEvent): DynamicDateRangeValue | undefined`: (Optional) Handles selection changes in the UI of the dynamic date range option.\n- `isValidString(value: string): boolean`: Validates whether a given string is a valid representation of the dynamic date range value.", + "_ui5privacy": "public", + "_ui5since": "2.11.0" + }, { "kind": "class", - "description": "### Overview\n\nAllows the user to set a binary value, such as true/false or yes/no for an item.\n\nThe `ui5-checkbox` component consists of a box and a label that describes its purpose.\nIf it's checked, an indicator is displayed inside the box.\nTo check/uncheck the `ui5-checkbox`, the user has to click or tap the square\nbox or its label.\n\nThe `ui5-checkbox` component only has 2 states - checked and unchecked.\nClicking or tapping toggles the `ui5-checkbox` between checked and unchecked state.\n\n### Usage\n\nYou can define the checkbox text with via the `text` property. If the text exceeds the available width, it is truncated by default.\nIn case you prefer text to truncate, set the `wrappingType` property to \"None\".\nThe touchable area for toggling the `ui5-checkbox` ends where the text ends.\n\nYou can disable the `ui5-checkbox` by setting the `disabled` property to\n`true`,\nor use the `ui5-checkbox` in read-only mode by setting the `readonly`\nproperty to `true`.\n\n### Keyboard Handling\n\nThe user can use the following keyboard shortcuts to toggle the checked state of the `ui5-checkbox`.\n\n- [Space],[Enter] - Toggles between different states: checked, not checked.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/CheckBox.js\";`", - "name": "CheckBox", - "cssParts": [ - { - "description": "Used to style the outermost wrapper of the `ui5-checkbox`", - "name": "root" - }, - { - "description": "Used to style the label of the `ui5-checkbox`", - "name": "label" - }, - { - "description": "Used to style the icon of the `ui5-checkbox`", - "name": "icon" - } - ], + "description": "### Overview\n\nThe `ui5-dynamic-date-range` component provides a flexible interface to define date ranges using a combination of absolute dates, relative intervals, and preset ranges (e.g., \"Today\", \"Yesterday\", etc.).\nIt allows users to select a date range from a predefined set of options or enter custom dates.\n\n### Usage\n\nThe component is typically used in scenarios where users need to filter data based on date ranges, such as in reports, dashboards, or data analysis tools.\nIt can be used with the predefined options or extended with custom options to suit specific requirements. You can create your own options by extending the `IDynamicDateRangeOption` interface.\nEvery option should be registered using the `DynamicDateRange.register` method.\n\nIf needed, you can also create a range of dates based on specific option using the `toDates` method.\n\n### Standard Options\n\nThe component comes with a set of standard options, including:\n- \"TODAY\" - Represents the current date. An example value is `{ operator: \"TODAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Today.js\";`\n- \"YESTERDAY\" - Represents the previous date. An example value is `{ operator: \"YESTERDAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Yesterday.js\";`\n- \"TOMORROW\" - Represents the next date. An example value is `{ operator: \"TOMORROW\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Tomorrow.js\";`\n- \"DATE\" - Represents a single date. An example value is `{ operator: \"DATE\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/SingleDate.js\";`\n- \"DATERANGE\" - Represents a range of dates. An example value is `{ operator: \"DATERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateRange.js\";`\n- \"DATETIMERANGE\" - Represents a range of dates with times. An example value is `{ operator: \"DATETIMERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateTimeRange.js\";`\n- \"FROMDATETIME\" - Represents a range from date and time. An example value is `{ operator: \"FROMDATETIME\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/FromDateTime.js\";`\n- \"TODATETIME\" - Represents a range to date and time. An example value is `{ operator: \"TODATETIME\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/ToDateTime.js\";`\n- \"LASTDAYS\" - Represents Last X Days from today. An example value is `{ operator: \"LASTDAYS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTWEEKS\" - Represents Last X Weeks from today. An example value is `{ operator: \"LASTWEEKS\", values: [3]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTMONTHS\" - Represents Last X Months from today. An example value is `{ operator: \"LASTMONTHS\", values: [6]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTQUARTERS\" - Represents Last X Quarters from today. An example value is `{ operator: \"LASTQUARTERS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTYEARS\" - Represents Last X Years from today. An example value is `{ operator: \"LASTYEARS\", values: [1]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"NEXTDAYS\" - Represents Next X Days from today. An example value is `{ operator: \"NEXTDAYS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTWEEKS\" - Represents Next X Weeks from today. An example value is `{ operator: \"NEXTWEEKS\", values: [3]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTMONTHS\" - Represents Next X Months from today. An example value is `{ operator: \"NEXTMONTHS\", values: [6]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTQUARTERS\" - Represents Next X Quarters from today. An example value is `{ operator: \"NEXTQUARTERS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTYEARS\" - Represents Next X Years from today. An example value is `{ operator: \"NEXTYEARS\", values: [1]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DynamicDateRange.js\";`", + "name": "DynamicDateRange", "members": [ { "kind": "field", - "name": "accessibleNameRef", + "name": "value", "type": { - "text": "string | undefined" + "text": "DynamicDateRangeValue | undefined", + "references": [ + { + "name": "DynamicDateRangeValue", + "package": "@ui5/webcomponents", + "module": "dist/DynamicDateRange.js" + } + ] }, - "description": "Receives id(or many ids) of the elements that label the component", + "description": "Defines the value object.", "default": "undefined", "privacy": "public", - "_ui5since": "1.1.0" - }, - { - "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "privacy": "public", - "default": "undefined", - "_ui5since": "1.1.0" + "_ui5noAttribute": true }, { "kind": "field", - "name": "disabled", + "name": "options", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", + "default": "\"\"", + "description": "Defines the options listed as a string, separated by commas and using capital case.\nExample: \"TODAY, YESTERDAY, DATERANGE\"", "privacy": "public" }, { - "kind": "field", - "name": "readonly", - "type": { - "text": "boolean" + "kind": "method", + "name": "toDates", + "return": { + "type": { + "text": "Array<Date>" + }, + "description": "An array of two `Date` objects representing the start and end dates." }, - "default": "false", - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "parameters": [ + { + "name": "value", + "type": { + "text": "DynamicDateRangeValue", + "references": [ + { + "name": "DynamicDateRangeValue", + "package": "@ui5/webcomponents", + "module": "dist/DynamicDateRange.js" + } + ] + }, + "description": "The option to convert into an array of date ranges", + "_ui5privacy": "public" + } + ], + "description": "Converts a `value` into concrete `startDate` and `endDate` JavaScript `Date` objects.", "privacy": "public" - }, + } + ], + "events": [ { - "kind": "field", - "name": "displayOnly", + "name": "change", + "_ui5privacy": "public", "type": { - "text": "boolean" + "text": "CustomEvent" }, - "default": "false", - "description": "Determines whether the `ui5-checkbox` is in display only state.\n\nWhen set to `true`, the `ui5-checkbox` is not interactive, not editable, not focusable\nand not in the tab chain. This setting is used for forms in review mode.\n\n**Note:** When the property `disabled` is set to `true` this property has no effect.", - "privacy": "public", - "_ui5since": "1.22.0" - }, + "description": "Fired when the input operation has finished by pressing Enter or on focusout or a value is selected in the popover.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true + } + ], + "attributes": [ { - "kind": "field", - "name": "required", + "description": "Defines the value object.", + "name": "value", + "default": "undefined", + "fieldName": "value", "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is required.\n\n**Note:** We advise against using the text property of the checkbox when there is a\nlabel associated with it to avoid having two required asterisks.", - "privacy": "public", - "_ui5since": "1.3.0" + "text": "DynamicDateRangeValue | undefined" + } }, { - "kind": "field", - "name": "indeterminate", + "description": "Defines the options listed as a string, separated by commas and using capital case.\nExample: \"TODAY, YESTERDAY, DATERANGE\"", + "name": "options", + "default": "\"\"", + "fieldName": "options", "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is displayed as partially checked.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction and the resulting visual state depends on the values of the `indeterminate`\nand `checked` properties:\n\n- If the component is checked and indeterminate, it will be displayed as partially checked\n- If the component is checked and it is not indeterminate, it will be displayed as checked\n- If the component is not checked, it will be displayed as not checked regardless value of the indeterminate attribute", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" - }, - { - "kind": "field", - "name": "checked", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the component is checked.\n\n**Note:** The property can be changed with user interaction,\neither by cliking/tapping on the component, or by\npressing the Enter or Space key.", - "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change" - }, + "text": "string" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-dynamic-date-range", + "customElement": true, + "_ui5since": "2.11.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "DynamicDateRange", + "module": "dist/DynamicDateRange.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-dynamic-date-range", + "declaration": { + "name": "DynamicDateRange", + "module": "dist/DynamicDateRange.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/ExpandableText.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-expandable-text` component allows displaying a large body of text in a small space. It provides an \"expand/collapse\" functionality, which shows/hides potentially truncated text.\n\n### Usage\n\n#### When to use:\n- To accommodate long texts in limited space, for example in list items, table cell texts, or forms\n\n#### When not to use:\n- The content is critical for the user. In this case use short descriptions that can fit in\n- Strive to provide short and meaningful texts to avoid excessive number of \"Show More\" links on the page\n\n### Responsive Behavior\n\nOn phones, if the component is configured to display the full text in a popover, the popover will appear in full screen.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ExpandableText\";`", + "name": "ExpandableText", + "members": [ { "kind": "field", "name": "text", "type": { "text": "string | undefined" }, - "description": "Defines the text of the component.", + "description": "Text of the component.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "valueState", + "name": "maxCharacters", "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] + "text": "number" }, - "default": "\"None\"", - "description": "Defines the value state of the component.", + "default": "100", + "description": "Maximum number of characters to be displayed initially. If the text length exceeds this limit, the text will be truncated with an ellipsis, and the \"More\" link will be displayed.", "privacy": "public" }, { "kind": "field", - "name": "wrappingType", + "name": "overflowMode", "type": { - "text": "WrappingType", + "text": "ExpandableTextOverflowMode", "references": [ { - "name": "WrappingType", + "name": "ExpandableTextOverflowMode", "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" + "module": "dist/types/ExpandableTextOverflowMode.js" } ] }, - "default": "\"Normal\"", - "description": "Defines whether the component text wraps when there is not enough space.\n\n**Note:** for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.\n**Note:** for option \"None\" the text will be truncated with an ellipsis.", - "privacy": "public" - }, - { - "kind": "field", - "name": "name", - "type": { - "text": "string | undefined" - }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "default": "undefined", + "default": "\"InPlace\"", + "description": "Determines how the full text will be displayed.", "privacy": "public" }, { "kind": "field", - "name": "value", + "name": "emptyIndicatorMode", "type": { - "text": "string" + "text": "TextEmptyIndicatorMode", + "references": [ + { + "name": "TextEmptyIndicatorMode", + "package": "@ui5/webcomponents", + "module": "dist/types/TextEmptyIndicatorMode.js" + } + ] }, - "default": "\"on\"", - "description": "Defines the form value of the component that is submitted when the checkbox is checked.\n\nWhen a form containing `ui5-checkbox` elements is submitted, only the values of the\n**checked** checkboxes are included in the form data sent to the server. Unchecked\ncheckboxes do not contribute any data to the form submission.\n\nThis property is particularly useful for **checkbox groups**, where multiple checkboxes with the same `name` but different `value` properties can be used to represent a set of related options.", + "default": "\"Off\"", + "description": "Specifies if an empty indicator should be displayed when there is no text.", "privacy": "public" } ], - "events": [ - { - "name": "change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the component checked state changes.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true - } - ], "attributes": [ { - "description": "Receives id(or many ids) of the elements that label the component", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", - "name": "readonly", - "default": "false", - "fieldName": "readonly", - "type": { - "text": "boolean" - } - }, - { - "description": "Determines whether the `ui5-checkbox` is in display only state.\n\nWhen set to `true`, the `ui5-checkbox` is not interactive, not editable, not focusable\nand not in the tab chain. This setting is used for forms in review mode.\n\n**Note:** When the property `disabled` is set to `true` this property has no effect.", - "name": "display-only", - "default": "false", - "fieldName": "displayOnly", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the component is required.\n\n**Note:** We advise against using the text property of the checkbox when there is a\nlabel associated with it to avoid having two required asterisks.", - "name": "required", - "default": "false", - "fieldName": "required", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the component is displayed as partially checked.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction and the resulting visual state depends on the values of the `indeterminate`\nand `checked` properties:\n\n- If the component is checked and indeterminate, it will be displayed as partially checked\n- If the component is checked and it is not indeterminate, it will be displayed as checked\n- If the component is not checked, it will be displayed as not checked regardless value of the indeterminate attribute", - "name": "indeterminate", - "default": "false", - "fieldName": "indeterminate", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines if the component is checked.\n\n**Note:** The property can be changed with user interaction,\neither by cliking/tapping on the component, or by\npressing the Enter or Space key.", - "name": "checked", - "default": "false", - "fieldName": "checked", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the text of the component.", + "description": "Text of the component.", "name": "text", "default": "undefined", "fieldName": "text", @@ -8119,39 +9148,30 @@ } }, { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", - "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" - } - }, - { - "description": "Defines whether the component text wraps when there is not enough space.\n\n**Note:** for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.\n**Note:** for option \"None\" the text will be truncated with an ellipsis.", - "name": "wrapping-type", - "default": "\"Normal\"", - "fieldName": "wrappingType", + "description": "Maximum number of characters to be displayed initially. If the text length exceeds this limit, the text will be truncated with an ellipsis, and the \"More\" link will be displayed.", + "name": "max-characters", + "default": "100", + "fieldName": "maxCharacters", "type": { - "text": "\"None\" | \"Normal\"" + "text": "number" } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", - "default": "undefined", - "fieldName": "name", + "description": "Determines how the full text will be displayed.", + "name": "overflow-mode", + "default": "\"InPlace\"", + "fieldName": "overflowMode", "type": { - "text": "string | undefined" + "text": "\"InPlace\" | \"Popover\"" } }, { - "description": "Defines the form value of the component that is submitted when the checkbox is checked.\n\nWhen a form containing `ui5-checkbox` elements is submitted, only the values of the\n**checked** checkboxes are included in the form data sent to the server. Unchecked\ncheckboxes do not contribute any data to the form submission.\n\nThis property is particularly useful for **checkbox groups**, where multiple checkboxes with the same `name` but different `value` properties can be used to represent a set of related options.", - "name": "value", - "default": "\"on\"", - "fieldName": "value", + "description": "Specifies if an empty indicator should be displayed when there is no text.", + "name": "empty-indicator-mode", + "default": "\"Off\"", + "fieldName": "emptyIndicatorMode", "type": { - "text": "string" + "text": "\"On\" | \"Off\"" } } ], @@ -8160,8 +9180,9 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-checkbox", + "tagName": "ui5-expandable-text", "customElement": true, + "_ui5since": "2.6.0", "_ui5privacy": "public" } ], @@ -8170,501 +9191,416 @@ "kind": "js", "name": "default", "declaration": { - "name": "CheckBox", - "module": "dist/CheckBox.js" + "name": "ExpandableText", + "module": "dist/ExpandableText.js" } }, { "kind": "custom-element-definition", - "name": "ui5-checkbox", + "name": "ui5-expandable-text", "declaration": { - "name": "CheckBox", - "module": "dist/CheckBox.js" + "name": "ExpandableText", + "module": "dist/ExpandableText.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ColorPalette.js", + "path": "dist/FileUploader.js", "declarations": [ - { - "kind": "interface", - "name": "IColorPaletteItem", - "description": "Interface for components that may be used inside a `ui5-color-palette` or `ui5-color-palette-popover`", - "_ui5privacy": "public" - }, { "kind": "class", - "description": "### Overview\nThe `ui5-color-palette` provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.\n\n### Usage\n\nThe `ui5-color-palette` is meant for users that need to select a color from a predefined set.\nTo define the colors, use the `ui5-color-palette-item` component inside the default slot of the `ui5-color-palette`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ColorPalette.js\";`", - "name": "ColorPalette", + "description": "### Overview\n\nThe `ui5-file-uploader` opens a file explorer dialog and enables users to upload files.\nThe component consists of input field, but you can provide an HTML element by your choice\nto trigger the file upload, by using the default slot.\nFurthermore, you can set the property \"hideInput\" to \"true\" to hide the input field.\n\nTo get all selected files, you can simply use the read-only \"files\" property.\nTo restrict the types of files the user can select, you can use the \"accept\" property.\n\nAnd, similar to all input based components, the FileUploader supports \"valueState\", \"placeholder\", \"name\", and \"disabled\" properties.\n\nFor the `ui5-file-uploader`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/FileUploader.js\";`", + "name": "FileUploader", "slots": [ { "name": "default", - "description": "Defines the `ui5-color-palette-item` elements.", - "_ui5propertyName": "colors", + "description": "This slot allows you to add custom content to the component, such as a button or any other interactive element to trigger the file selection dialog.\n\n**Note:** For best accessibility experience, set a `tabindex` of \"-1\" on your interactive element, or it will be set automatically.\nThis slot is intended for use cases where you want a button-only file uploader.\nIt is recommended to set `hideInput` property to \"true\" when using this slot.\nNot setting `hideInput` may negatively impact the screen reader users.", + "_ui5propertyName": "content", "_ui5type": { - "text": "Array<IColorPaletteItem>", - "references": [ - { - "name": "IColorPaletteItem", - "package": "@ui5/webcomponents", - "module": "dist/ColorPalette.js" - } - ] + "text": "Array<HTMLElement>" }, "_ui5privacy": "public" - } - ], - "events": [ + }, { - "name": "item-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<ColorPaletteItemClickEventDetail>", - "references": [ - { - "name": "ColorPaletteItemClickEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/ColorPalette.js" - } - ] + "name": "valueStateMessage", + "description": "Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.", + "_ui5since": "1.0.0-rc.9", + "_ui5type": { + "text": "Array<HTMLElement>" }, - "description": "Fired when the user selects a color.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "1.0.0-rc.15", - "_ui5parameters": [ - { - "type": { - "text": "string" - }, - "name": "color", - "_ui5privacy": "public", - "description": "the selected color" - } - ] + "_ui5privacy": "public" } ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-color-palette", - "customElement": true, - "_ui5since": "1.0.0-rc.12", - "_ui5privacy": "public", - "members": [] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ColorPalette", - "module": "dist/ColorPalette.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-color-palette", - "declaration": { - "name": "ColorPalette", - "module": "dist/ColorPalette.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/ColorPaletteItem.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-color-palette-item` component represents a color in the the `ui5-color-palette`.", - "name": "ColorPaletteItem", "members": [ { "kind": "field", - "name": "value", + "name": "accept", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"\"", - "description": "Defines the colour of the component.\n\n**Note:** The value should be a valid CSS color.", + "description": "Comma-separated list of file types that the component should accept.\n\n**Note:** Please make sure you are adding the `.` in front on the file type, e.g. `.png` in case you want to accept png's only.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "selected", + "name": "hideInput", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the component is selected.\n\n**Note:** Only one item must be selected per <code>ui5-color-palette</code>.\nIf more than one item is defined as selected, the last one would be considered as the selected one.", - "privacy": "public", - "_ui5since": "2.0.0" - } - ], - "attributes": [ - { - "description": "Defines the colour of the component.\n\n**Note:** The value should be a valid CSS color.", - "name": "value", - "default": "\"\"", - "fieldName": "value", - "type": { - "text": "string" - } + "description": "If set to \"true\", the input field of component will not be rendered. Only the default slot that is passed will be rendered.\n\n**Note:** Use this property in combination with the default slot to achieve a button-only file uploader design.", + "privacy": "public" }, - { - "description": "Defines if the component is selected.\n\n**Note:** Only one item must be selected per <code>ui5-color-palette</code>.\nIf more than one item is defined as selected, the last one would be considered as the selected one.", - "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-color-palette-item", - "customElement": true, - "_ui5since": "1.0.0-rc.12", - "_ui5privacy": "public", - "_ui5implements": [ - { - "name": "IColorPaletteItem", - "package": "@ui5/webcomponents", - "module": "dist/ColorPalette.js" - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ColorPaletteItem", - "module": "dist/ColorPaletteItem.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-color-palette-item", - "declaration": { - "name": "ColorPaletteItem", - "module": "dist/ColorPaletteItem.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/ColorPalettePopover.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\nRepresents a predefined range of colors for easier selection.\n\nOverview\nThe ColorPalettePopover provides the users with a slot to predefine colors.\n\nYou can customize them with the use of the colors property. You can specify a defaultColor and display a \"Default color\" button for the user to choose directly.\nYou can display a \"More colors...\" button that opens an additional color picker for the user to choose specific colors that are not present in the predefined range.\n\n### Usage\n\nThe palette is intended for users, who don't want to check and remember the different values of the colors and spend large amount of time to configure the right color through the color picker.\n\nFor the `ui5-color-palette-popover`\n### ES6 Module Import\n\n`import @ui5/webcomponents/dist/ColorPalettePopover.js\";`", - "name": "ColorPalettePopover", - "slots": [ - { - "name": "default", - "description": "Defines the content of the component.", - "_ui5propertyName": "colors", - "_ui5type": { - "text": "Array<IColorPaletteItem>", - "references": [ - { - "name": "IColorPaletteItem", - "package": "@ui5/webcomponents", - "module": "dist/ColorPalette.js" - } - ] - }, - "_ui5privacy": "public" - } - ], - "members": [ { "kind": "field", - "name": "showRecentColors", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the user can see the last used colors in the bottom of the component", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", "privacy": "public" }, { "kind": "field", - "name": "showMoreColors", + "name": "multiple", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the user can choose a custom color from a component.", + "description": "Allows multiple files to be chosen.", "privacy": "public" }, { "kind": "field", - "name": "showDefaultColor", + "name": "name", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the user can choose the default color from a button.", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "defaultColor", + "name": "placeholder", "type": { "text": "string | undefined" }, - "description": "Defines the default color of the component.\n\n**Note:** The default color should be a part of the ColorPalette colors`", + "description": "Defines a short hint intended to aid the user with data entry when the component has no value.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "open", + "name": "value", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Defines the open | closed state of the popover.", + "default": "\"\"", + "description": "Defines the name/names of the file/files to upload.", "privacy": "public", - "_ui5since": "1.21.0" + "_ui5formProperty": true, + "_ui5formEvents": "change" }, { "kind": "field", - "name": "opener", + "name": "maxFileSize", "type": { - "text": "HTMLElement | string | null | undefined" + "text": "number | undefined" }, - "description": "Defines the ID or DOM Reference of the element that the popover is shown at.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", - "privacy": "public", + "description": "Defines the maximum file size in megabytes which prevents the upload if at least one file exceeds it.", "default": "undefined", - "_ui5since": "1.21.0" - } - ], - "events": [ + "privacy": "public", + "_ui5since": "2.2.0" + }, { - "name": "item-click", - "_ui5privacy": "public", + "kind": "field", + "name": "valueState", "type": { - "text": "CustomEvent<ColorPalettePopoverItemClickEventDetail>", + "text": "ValueState", "references": [ { - "name": "ColorPalettePopoverItemClickEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/ColorPalettePopover.js" + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" } ] }, - "description": "Fired when the user selects a color.", - "_ui5Cancelable": false, + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is required.", + "privacy": "public", + "_ui5since": "2.13.0" + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.13.0" + }, + { + "kind": "field", + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that label the input.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.13.0" + }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0" + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that describe the input.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0" + }, + { + "kind": "field", + "name": "files", + "type": { + "text": "FileList | null" + }, + "description": "FileList of all selected files.", + "privacy": "public", + "default": "null", + "readonly": true + } + ], + "events": [ + { + "name": "change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<FileUploaderChangeEventDetail>", + "references": [ + { + "name": "FileUploaderChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/FileUploader.js" + } + ] + }, + "description": "Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.", + "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, "_ui5parameters": [ { "type": { - "text": "string" + "text": "FileList | null" }, - "name": "color", + "name": "files", "_ui5privacy": "public", - "description": "the selected color" + "description": "The current files." } ] }, { - "name": "close", + "name": "file-size-exceed", "_ui5privacy": "public", "type": { - "text": "CustomEvent" + "text": "CustomEvent<FileUploaderFileSizeExceedEventDetail>", + "references": [ + { + "name": "FileUploaderFileSizeExceedEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/FileUploader.js" + } + ] }, - "description": "Fired when the `ui5-color-palette-popover` is closed due to user interaction.", + "description": "Event is fired when the size of a file is above the `maxFileSize` property value.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "1.21.0" + "_ui5since": "2.2.0", + "_ui5parameters": [ + { + "type": { + "text": "Array<FileData>", + "references": [ + { + "name": "FileData", + "package": "@ui5/webcomponents", + "module": "dist/FileUploader.js" + } + ] + }, + "name": "filesData", + "_ui5privacy": "public", + "description": "An array of `FileData` objects containing the`fileName` and `fileSize` in MB of each file that exceeds the upload limit." + } + ] } ], "attributes": [ { - "description": "Defines whether the user can see the last used colors in the bottom of the component", - "name": "show-recent-colors", + "description": "Comma-separated list of file types that the component should accept.\n\n**Note:** Please make sure you are adding the `.` in front on the file type, e.g. `.png` in case you want to accept png's only.", + "name": "accept", + "default": "undefined", + "fieldName": "accept", + "type": { + "text": "string | undefined" + } + }, + { + "description": "If set to \"true\", the input field of component will not be rendered. Only the default slot that is passed will be rendered.\n\n**Note:** Use this property in combination with the default slot to achieve a button-only file uploader design.", + "name": "hide-input", "default": "false", - "fieldName": "showRecentColors", + "fieldName": "hideInput", "type": { "text": "boolean" } }, { - "description": "Defines whether the user can choose a custom color from a component.", - "name": "show-more-colors", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", "default": "false", - "fieldName": "showMoreColors", + "fieldName": "disabled", "type": { "text": "boolean" } }, { - "description": "Defines whether the user can choose the default color from a button.", - "name": "show-default-color", + "description": "Allows multiple files to be chosen.", + "name": "multiple", "default": "false", - "fieldName": "showDefaultColor", + "fieldName": "multiple", "type": { "text": "boolean" } }, { - "description": "Defines the default color of the component.\n\n**Note:** The default color should be a part of the ColorPalette colors`", - "name": "default-color", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", "default": "undefined", - "fieldName": "defaultColor", + "fieldName": "name", "type": { "text": "string | undefined" } }, { - "description": "Defines the open | closed state of the popover.", - "name": "open", - "default": "false", - "fieldName": "open", + "description": "Defines a short hint intended to aid the user with data entry when the component has no value.", + "name": "placeholder", + "default": "undefined", + "fieldName": "placeholder", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines the ID or DOM Reference of the element that the popover is shown at.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", - "name": "opener", - "default": "undefined", - "fieldName": "opener", + "description": "Defines the name/names of the file/files to upload.", + "name": "value", + "default": "\"\"", + "fieldName": "value", "type": { - "text": "string | HTMLElement | null | undefined" + "text": "string" } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-color-palette-popover", - "customElement": true, - "_ui5since": "1.0.0-rc.16", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ColorPalettePopover", - "module": "dist/ColorPalettePopover.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-color-palette-popover", - "declaration": { - "name": "ColorPalettePopover", - "module": "dist/ColorPalettePopover.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/ColorPicker.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\nThe `ui5-color-picker` allows users to choose any color and provides different input options for selecting colors.\n\n### Usage\n\n#### When to use\nUse the color picker if:\n\n- users need to select any color freely.\n\n#### When not to use\n\n- Users need to select one color from a predefined set of colors. Use the ColorPalette component instead.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ColorPicker.js\";`", - "name": "ColorPicker", - "members": [ + }, { - "kind": "field", - "name": "value", + "description": "Defines the maximum file size in megabytes which prevents the upload if at least one file exceeds it.", + "name": "max-file-size", + "default": "undefined", + "fieldName": "maxFileSize", "type": { - "text": "string" - }, - "default": "\"rgba(255,255,255,1)\"", - "description": "Defines the currently selected color of the component.\n\n**Note**: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.", - "privacy": "public" + "text": "number | undefined" + } }, { - "kind": "field", - "name": "name", + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", "type": { - "text": "string | undefined" - }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.0.0" + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + } }, { - "kind": "field", - "name": "simplified", + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", "type": { "text": "boolean" - }, - "default": "false", - "description": "When set to `true`, the alpha slider and inputs for RGB values will not be displayed.", - "privacy": "public", - "_ui5since": "2.5.0" - } - ], - "events": [ + } + }, { - "name": "change", - "_ui5privacy": "public", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "CustomEvent" - }, - "description": "Fired when the the selected color is changed", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true - } - ], - "attributes": [ + "text": "string | undefined" + } + }, { - "description": "Defines the currently selected color of the component.\n\n**Note**: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.", - "name": "value", - "default": "\"rgba(255,255,255,1)\"", - "fieldName": "value", + "description": "Receives id(or many ids) of the elements that label the input.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", "type": { - "text": "string" + "text": "string | undefined" } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", "default": "undefined", - "fieldName": "name", + "fieldName": "accessibleDescription", "type": { "text": "string | undefined" } }, { - "description": "When set to `true`, the alpha slider and inputs for RGB values will not be displayed.", - "name": "simplified", - "default": "false", - "fieldName": "simplified", + "description": "Receives id(or many ids) of the elements that describe the input.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", "type": { - "text": "boolean" + "text": "string | undefined" + } + }, + { + "description": "FileList of all selected files.", + "name": "files", + "default": "null", + "fieldName": "files", + "type": { + "text": "any" } } ], @@ -8673,9 +9609,9 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-color-picker", + "tagName": "ui5-file-uploader", "customElement": true, - "_ui5since": "1.0.0-rc.12", + "_ui5since": "1.0.0-rc.6", "_ui5privacy": "public" } ], @@ -8684,71 +9620,75 @@ "kind": "js", "name": "default", "declaration": { - "name": "ColorPicker", - "module": "dist/ColorPicker.js" + "name": "FileUploader", + "module": "dist/FileUploader.js" } }, { "kind": "custom-element-definition", - "name": "ui5-color-picker", + "name": "ui5-file-uploader", "declaration": { - "name": "ColorPicker", - "module": "dist/ColorPicker.js" + "name": "FileUploader", + "module": "dist/FileUploader.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ComboBox.js", + "path": "dist/Filters.js", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "dist/Form.js", "declarations": [ { "kind": "interface", - "name": "IComboBoxItem", - "description": "Interface for components that may be slotted inside a `ui5-combobox`", - "_ui5privacy": "public" + "name": "IFormItem", + "description": "Interface for components that can be slotted inside `ui5-form` as items.", + "_ui5privacy": "public", + "_ui5since": "2.0.0" }, { "kind": "class", - "description": "### Overview\n\nThe `ui5-combobox` component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.\n\nIt is commonly used to enable users to select an option from a predefined list.\n\n### Structure\nThe `ui5-combobox` consists of the following elements:\n\n- Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value.\n- Drop-down arrow - expands\\collapses the option list.\n- Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-combobox` provides advanced keyboard handling.\n\n- [F4], [Alt]+[Up], or [Alt]+[Down] - Toggles the picker.\n- [Escape] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.\n- [Enter] or [Return] - If picker is open, takes over the currently selected item and closes it.\n- [Down] - Selects the next matching item in the picker.\n- [Up] - Selects the previous matching item in the picker.\n- [Page Down] - Moves selection down by page size (10 items by default).\n- [Page Up] - Moves selection up by page size (10 items by default).\n- [Home] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.\n- [End] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.\n- [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ComboBox.js\";`", - "name": "ComboBox", - "slots": [ + "description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (< 600px) – 1 column is recommended (default: 1)\n- **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)\n- **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (> 1439px) – up to 6 columns are recommended (default: 3)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### Items Empty Span\n\nBy default, a form item spans 12 cells, fully divided between its label and field, with no empty space at the end:\n- **Label:** occupies 4 cells.\n- **Field:** occupies 8 cells.\n\nThe `emptySpan` property provides additional layout flexibility by defining empty space at the form item’s end.\n\n**For example:** Setting \"S0 M0 L3 XL3\" (or just \"L3 XL3\") adjusts the layout as follows:\n- **Label:** remains 4 cells.\n- **Field:** is reduced to 5 cells.\n- **Empty space:** 3 cells are added at the end.\n\nGreater values increase the empty space at the end of the form item, reducing the space available for the label and its field.\nHowever, setting `emptySpan` to 1 cell is recommended and typically sufficient to achieve a balanced layout.\n\n### Navigation flow\n\nThe Form component supports two layout options for keyboard navigation:\n\n#### Simple form\n\nIn this \"simple form\" layout, each `ui5-form-item` acts as a standalone group\nwith one item, so focus moves horizontally across the grid from one `ui5-form-item` to the next.\nThis layout is ideal for simpler forms and supports custom arrangements, e.g.,\n\n```\n| 1 | 2 |\n| 3 |\n| 4 | 5 |\n```\n\n#### Complex form\n\nIn this layout, items are grouped into `ui5-form-group` elements, allowing more complex configurations:\n\n- **Single-Column Group**: Focus moves vertically down from one item to the next.\n ```\n | 1 |\n | 2 |\n | 3 |\n ```\n\n- **Multi-Column Group**: Focus moves horizontally within each row, advancing to the next row after completing the current one.\n ```\n | 1 | 4 |\n | 2 | 5 |\n | 3 | 6 |\n ```\n\n### Keyboard Handling\n\n- [Tab] - Moves the focus to the next interactive element within the Form/FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [Tab] - Moves the focus to the previous interactive element within the Form/FormGroup (if available) or to the previous element in the tab chain outside the Form\n- [F6] - Moves the focus to the first interactive element of the next FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [F6] - Moves the focus to the first interactive element of the previous FormGroup (if available) or to the previous element in the tab chain outside the Form\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/Form.js\";\n- import @ui5/webcomponents/dist/FormGroup.js\";\n- import @ui5/webcomponents/dist/FormItem.js\";", + "name": "Form", + "cssParts": [ { - "name": "default", - "description": "Defines the component items.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<IComboBoxItem>", - "references": [ - { - "name": "IComboBoxItem", - "package": "@ui5/webcomponents", - "module": "dist/ComboBox.js" - } - ] - }, - "_ui5privacy": "public" + "description": "Used to style the wrapper of the header.", + "name": "header" }, { - "name": "valueStateMessage", - "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the `ui5-combobox` is in `Information`, `Critical` or `Negative` value state.", - "_ui5since": "1.0.0-rc.9", + "description": "Used to style the element defining the form column layout.", + "name": "layout" + }, + { + "description": "Used to style a single column of the form column layout.", + "name": "column" + } + ], + "slots": [ + { + "name": "header", + "description": "Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored.", "_ui5type": { "text": "Array<HTMLElement>" }, "_ui5privacy": "public" }, { - "name": "icon", - "description": "Defines the icon to be displayed in the input field.", - "_ui5since": "1.0.0-rc.9", + "name": "default", + "description": "Defines the component content - FormGroups or FormItems.\n\n**Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\nEither use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.", + "_ui5propertyName": "items", "_ui5type": { - "text": "Array<IIcon>", + "text": "Array<IFormItem>", "references": [ { - "name": "IIcon", + "name": "IFormItem", "package": "@ui5/webcomponents", - "module": "dist/Icon.js" + "module": "dist/Form.js" } ] }, @@ -8758,348 +9698,348 @@ "members": [ { "kind": "field", - "name": "value", + "name": "accessibleName", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"\"", - "description": "Defines the value of the component.", + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change,input" + "_ui5since": "2.10.0" }, { "kind": "field", - "name": "name", + "name": "accessibleNameRef", "type": { "text": "string | undefined" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "description": "Defines id (or many ids) of the element (or elements) that label the component.", "default": "undefined", "privacy": "public", - "_ui5since": "2.0.0" + "_ui5since": "2.16.0" }, { "kind": "field", - "name": "noTypeahead", + "name": "accessibleMode", "type": { - "text": "boolean" + "text": "FormAccessibleMode", + "references": [ + { + "name": "FormAccessibleMode", + "package": "@ui5/webcomponents", + "module": "dist/types/FormAccessibleMode.js" + } + ] }, - "default": "false", - "description": "Defines whether the value will be autocompleted to match an item", + "default": "\"Display\"", + "description": "Defines the accessibility mode of the component in \"edit\" and \"display\" use-cases.\n\nBased on the mode, the component renders different HTML elements and ARIA attributes,\nwhich are appropriate for the use-case.\n\n**Usage:**\n- Set this property to \"Display\", when the form consists of non-editable (e.g. texts) form items.\n- Set this property to \"Edit\", when the form consists of editable (e.g. input fields) form items.", "privacy": "public", - "_ui5since": "1.19.0" - }, - { - "kind": "field", - "name": "placeholder", - "type": { - "text": "string | undefined" - }, - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", - "default": "undefined", - "privacy": "public" + "_ui5since": "2.16.0" }, { "kind": "field", - "name": "disabled", + "name": "layout", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "default": "\"S1 M1 L2 XL3\"", + "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 3 columns by default (up to 6 columns are recommended)", "privacy": "public" }, { "kind": "field", - "name": "valueState", + "name": "labelSpan", "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] + "text": "string" }, - "default": "\"None\"", - "description": "Defines the value state of the component.", + "default": "\"S12 M4 L4 XL4\"", + "description": "Defines the width proportion of the labels and fields of a form item by breakpoint.\n\nBy default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,\nand 12/12 in S size, e.g in S the label is on top of its associated field.\n\nThe supported values are between 1 and 12. Greater the number, more space the label will use.\n\n**Note:** If \"12\" is set, the label will be displayed on top of its assosiated field.", "privacy": "public" }, { "kind": "field", - "name": "readonly", + "name": "emptySpan", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", - "privacy": "public" + "default": "\"S0 M0 L0 XL0\"", + "description": "Defines the number of cells that are empty at the end of each form item, configurable by breakpoint.\n\nBy default, a form item spans 12 cells, fully divided between its label (4 cells) and field (8 cells), with no empty space at the end.\nThe `emptySpan` provides additional layout flexibility by defining empty space at the form item’s end.\n\n**Note:**\n- The maximum allowable empty space is 10 cells. At least 1 cell each must remain for the label and the field.\n- When `emptySpan` is specified (greater than 0), ensure that the combined value of `emptySpan` and `labelSpan` does not exceed 11. This guarantees a minimum of 1 cell for the field.", + "privacy": "public", + "_ui5since": "2.5.0" }, { "kind": "field", - "name": "required", + "name": "headerText", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is required.", + "description": "Defines the header text of the component.\n\n**Note:** The property gets overridden by the `header` slot.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "loading", + "name": "headerLevel", "type": { - "text": "boolean" + "text": "TitleLevel", + "references": [ + { + "name": "TitleLevel", + "package": "@ui5/webcomponents", + "module": "dist/types/TitleLevel.js" + } + ] }, - "default": "false", - "description": "Indicates whether a loading indicator should be shown in the picker.", - "privacy": "public" + "default": "\"H2\"", + "description": "Defines the compoennt heading level,\nset by the `headerText`.", + "privacy": "public", + "_ui5since": "2.10.0" }, { "kind": "field", - "name": "filter", + "name": "itemSpacing", "type": { - "text": "ComboBoxFilter", + "text": "FormItemSpacing", "references": [ { - "name": "ComboBoxFilter", + "name": "FormItemSpacing", "package": "@ui5/webcomponents", - "module": "dist/types/ComboBoxFilter.js" + "module": "dist/types/FormItemSpacing.js" } ] }, - "default": "\"StartsWithPerTerm\"", - "description": "Defines the filter type of the component.", + "default": "\"Normal\"", + "description": "Defines the vertical spacing between form items.\n\n**Note:** If the Form is meant to be switched between \"display\"(\"non-edit\") and \"edit\" modes,\nwe recommend using \"Large\" item spacing in \"display\"(\"non-edit\") mode, and \"Normal\" - for \"edit\" mode,\nto avoid \"jumping\" effect, caused by the hight difference between texts in \"display\"(\"non-edit\") mode and the input fields in \"edit\" mode.", "privacy": "public" - }, + } + ], + "attributes": [ { - "kind": "field", - "name": "showClearIcon", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the clear icon of the combobox will be shown.", - "privacy": "public", - "_ui5since": "1.20.1" + "text": "string | undefined" + } }, { - "kind": "field", - "name": "accessibleName", + "description": "Defines id (or many ids) of the element (or elements) that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" + } }, { - "kind": "field", - "name": "accessibleNameRef", + "description": "Defines the accessibility mode of the component in \"edit\" and \"display\" use-cases.\n\nBased on the mode, the component renders different HTML elements and ARIA attributes,\nwhich are appropriate for the use-case.\n\n**Usage:**\n- Set this property to \"Display\", when the form consists of non-editable (e.g. texts) form items.\n- Set this property to \"Edit\", when the form consists of editable (e.g. input fields) form items.", + "name": "accessible-mode", + "default": "\"Display\"", + "fieldName": "accessibleMode", "type": { - "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that label the component", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "text": "\"Display\" | \"Edit\"" + } }, { - "kind": "field", - "name": "open", + "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 3 columns by default (up to 6 columns are recommended)", + "name": "layout", + "default": "\"S1 M1 L2 XL3\"", + "fieldName": "layout", "type": { - "text": "boolean" - }, - "default": "false", - "description": "Indicates whether the items picker is open.", - "privacy": "public", - "_ui5since": "2.9.0" - } - ], - "events": [ + "text": "string" + } + }, { - "name": "change", - "_ui5privacy": "public", + "description": "Defines the width proportion of the labels and fields of a form item by breakpoint.\n\nBy default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,\nand 12/12 in S size, e.g in S the label is on top of its associated field.\n\nThe supported values are between 1 and 12. Greater the number, more space the label will use.\n\n**Note:** If \"12\" is set, the label will be displayed on top of its assosiated field.", + "name": "label-span", + "default": "\"S12 M4 L4 XL4\"", + "fieldName": "labelSpan", "type": { - "text": "CustomEvent" - }, - "description": "Fired when the input operation has finished by pressing Enter, focusout or an item is selected.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "text": "string" + } }, { - "name": "open", - "_ui5privacy": "public", + "description": "Defines the number of cells that are empty at the end of each form item, configurable by breakpoint.\n\nBy default, a form item spans 12 cells, fully divided between its label (4 cells) and field (8 cells), with no empty space at the end.\nThe `emptySpan` provides additional layout flexibility by defining empty space at the form item’s end.\n\n**Note:**\n- The maximum allowable empty space is 10 cells. At least 1 cell each must remain for the label and the field.\n- When `emptySpan` is specified (greater than 0), ensure that the combined value of `emptySpan` and `labelSpan` does not exceed 11. This guarantees a minimum of 1 cell for the field.", + "name": "empty-span", + "default": "\"S0 M0 L0 XL0\"", + "fieldName": "emptySpan", "type": { - "text": "CustomEvent" - }, - "description": "Fired when the dropdown is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.9.0" + "text": "string" + } }, { - "name": "close", - "_ui5privacy": "public", + "description": "Defines the header text of the component.\n\n**Note:** The property gets overridden by the `header` slot.", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", "type": { - "text": "CustomEvent" - }, - "description": "Fired when the dropdown is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.9.0" + "text": "string | undefined" + } }, { - "name": "input", - "_ui5privacy": "public", + "description": "Defines the compoennt heading level,\nset by the `headerText`.", + "name": "header-level", + "default": "\"H2\"", + "fieldName": "headerLevel", "type": { - "text": "CustomEvent" - }, - "description": "Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"" + } }, { - "name": "selection-change", - "_ui5privacy": "public", + "description": "Defines the vertical spacing between form items.\n\n**Note:** If the Form is meant to be switched between \"display\"(\"non-edit\") and \"edit\" modes,\nwe recommend using \"Large\" item spacing in \"display\"(\"non-edit\") mode, and \"Normal\" - for \"edit\" mode,\nto avoid \"jumping\" effect, caused by the hight difference between texts in \"display\"(\"non-edit\") mode and the input fields in \"edit\" mode.", + "name": "item-spacing", + "default": "\"Normal\"", + "fieldName": "itemSpacing", "type": { - "text": "CustomEvent<ComboBoxSelectionChangeEventDetail>", + "text": "\"Normal\" | \"Large\"" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-form", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Form", + "module": "dist/Form.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-form", + "declaration": { + "name": "Form", + "module": "dist/Form.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/FormGroup.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe FormGroup (ui5-form-group) represents a group inside the Form (ui5-form) component\nand it consists of FormItem (ui5-form-item) components.\n\nThe layout of the FormGroup is mostly defined and controlled by the overarching Form (ui5-form) component.\nStill, one can influence the layout via the FormGroup's `columnSpan` property,\nthat defines how many columns the group should expand to.\n\n### Usage\n\nТhe FormGroup (ui5-form-group) allows to split a Form into groups,\ne.g to group FormItems that logically belong together.\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/FormGroup.js\";", + "name": "FormGroup", + "slots": [ + { + "name": "default", + "description": "Defines the items of the component.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<FormItem>", "references": [ { - "name": "ComboBoxSelectionChangeEventDetail", + "name": "FormItem", "package": "@ui5/webcomponents", - "module": "dist/ComboBox.js" + "module": "dist/FormItem.js" } ] }, - "description": "Fired when selection is changed by user interaction", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "IComboBoxItem", - "references": [ - { - "name": "IComboBoxItem", - "package": "@ui5/webcomponents", - "module": "dist/ComboBox.js" - } - ] - }, - "name": "item", - "_ui5privacy": "public", - "description": "item to be selected." - } - ] + "_ui5privacy": "public" } ], - "attributes": [ - { - "description": "Defines the value of the component.", - "name": "value", - "default": "\"\"", - "fieldName": "value", - "type": { - "text": "string" - } - }, + "members": [ { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", - "default": "undefined", - "fieldName": "name", + "kind": "field", + "name": "headerText", "type": { "text": "string | undefined" - } - }, - { - "description": "Defines whether the value will be autocompleted to match an item", - "name": "no-typeahead", - "default": "false", - "fieldName": "noTypeahead", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", - "name": "placeholder", + }, + "description": "Defines header text of the component.", "default": "undefined", - "fieldName": "placeholder", - "type": { - "text": "string | undefined" - } + "privacy": "public" }, { - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", + "kind": "field", + "name": "headerLevel", "type": { - "text": "boolean" - } + "text": "TitleLevel", + "references": [ + { + "name": "TitleLevel", + "package": "@ui5/webcomponents", + "module": "dist/types/TitleLevel.js" + } + ] + }, + "default": "\"H3\"", + "description": "Defines the compoennt heading level,\nset by the `headerText`.", + "privacy": "public", + "_ui5since": "2.10.0" }, { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", + "kind": "field", + "name": "columnSpan", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" - } + "text": "number | undefined" + }, + "description": "Defines column span of the component,\ne.g how many columns the group should span to.", + "default": "undefined", + "privacy": "public" }, { - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", - "name": "readonly", - "default": "false", - "fieldName": "readonly", + "kind": "field", + "name": "accessibleName", "type": { - "text": "boolean" - } + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.16.0" }, { - "description": "Defines whether the component is required.", - "name": "required", - "default": "false", - "fieldName": "required", + "kind": "field", + "name": "accessibleNameRef", "type": { - "text": "boolean" - } - }, + "text": "string | undefined" + }, + "description": "Defines id (or many ids) of the element (or elements) that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.16.0" + } + ], + "attributes": [ { - "description": "Indicates whether a loading indicator should be shown in the picker.", - "name": "loading", - "default": "false", - "fieldName": "loading", + "description": "Defines header text of the component.", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines the filter type of the component.", - "name": "filter", - "default": "\"StartsWithPerTerm\"", - "fieldName": "filter", + "description": "Defines the compoennt heading level,\nset by the `headerText`.", + "name": "header-level", + "default": "\"H3\"", + "fieldName": "headerLevel", "type": { - "text": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\"" + "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"" } }, { - "description": "Defines whether the clear icon of the combobox will be shown.", - "name": "show-clear-icon", - "default": "false", - "fieldName": "showClearIcon", + "description": "Defines column span of the component,\ne.g how many columns the group should span to.", + "name": "column-span", + "default": "undefined", + "fieldName": "columnSpan", "type": { - "text": "boolean" + "text": "number | undefined" } }, { @@ -9112,22 +10052,13 @@ } }, { - "description": "Receives id(or many ids) of the elements that label the component", + "description": "Defines id (or many ids) of the element (or elements) that label the component.", "name": "accessible-name-ref", "default": "undefined", "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" } - }, - { - "description": "Indicates whether the items picker is open.", - "name": "open", - "default": "false", - "fieldName": "open", - "type": { - "text": "boolean" - } } ], "superclass": { @@ -9135,10 +10066,17 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-combobox", + "tagName": "ui5-form-group", "customElement": true, - "_ui5since": "1.0.0-rc.6", - "_ui5privacy": "public" + "_ui5since": "2.0.0", + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IFormItem", + "package": "@ui5/webcomponents", + "module": "dist/Form.js" + } + ] } ], "exports": [ @@ -9146,84 +10084,98 @@ "kind": "js", "name": "default", "declaration": { - "name": "ComboBox", - "module": "dist/ComboBox.js" + "name": "FormGroup", + "module": "dist/FormGroup.js" } }, { "kind": "custom-element-definition", - "name": "ui5-combobox", + "name": "ui5-form-group", "declaration": { - "name": "ComboBox", - "module": "dist/ComboBox.js" + "name": "FormGroup", + "module": "dist/FormGroup.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ComboBoxItem.js", + "path": "dist/FormItem.js", "declarations": [ { "kind": "class", - "description": "The `ui5-cb-item` represents the item for a `ui5-combobox`.", - "name": "ComboBoxItem", - "members": [ + "description": "### Overview\n\nThe FormItem (ui5-form-item) represents pair of a label and\none or more components (text or text fields), associated to it.\n\n### Usage\n\nThe FormItem is being used in FormGroup (ui5-form-group) or directly in Form (ui5-form).\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/FormItem.js\";", + "name": "FormItem", + "cssParts": [ { - "kind": "field", - "name": "text", - "type": { - "text": "string | undefined" + "description": "Used to style the parent element of the label and content parts.", + "name": "layout" + }, + { + "description": "Used to style the label part of the form item.", + "name": "label" + }, + { + "description": "Used to style the content part of the form item.", + "name": "content" + } + ], + "slots": [ + { + "name": "labelContent", + "description": "Defines the label of the component.", + "_ui5type": { + "text": "Array<HTMLElement>" }, - "description": "Defines the text of the component.", - "default": "undefined", - "privacy": "public" + "_ui5privacy": "public" }, + { + "name": "default", + "description": "Defines the content of the component,\nassociated to `labelContent`.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "name": "additionalText", + "name": "columnSpan", "type": { - "text": "string | undefined" + "text": "number | undefined" }, - "description": "Defines the additional text of the component.", + "description": "Defines the column span of the component,\ne.g how many columns the component should span to.\n\n**Note:** The column span should be a number between 1 and the available columns of the FormGroup (when items are placed in a group)\nor the Form. The available columns can be affected by the FormGroup#columnSpan and/or the Form#layout.\nA number bigger than the available columns won't take effect.", "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.11" + "privacy": "public" } ], "attributes": [ { - "description": "Defines the text of the component.", - "name": "text", - "default": "undefined", - "fieldName": "text", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the additional text of the component.", - "name": "additional-text", + "description": "Defines the column span of the component,\ne.g how many columns the component should span to.\n\n**Note:** The column span should be a number between 1 and the available columns of the FormGroup (when items are placed in a group)\nor the Form. The available columns can be affected by the FormGroup#columnSpan and/or the Form#layout.\nA number bigger than the available columns won't take effect.", + "name": "column-span", "default": "undefined", - "fieldName": "additionalText", + "fieldName": "columnSpan", "type": { - "text": "string | undefined" + "text": "number | undefined" } } ], "superclass": { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" }, - "tagName": "ui5-cb-item", + "tagName": "ui5-form-item", "customElement": true, + "_ui5since": "2.0.0", "_ui5privacy": "public", "_ui5implements": [ { - "name": "IComboBoxItem", + "name": "IFormItem", "package": "@ui5/webcomponents", - "module": "dist/ComboBox.js" + "module": "dist/Form.js" } ] } @@ -9233,272 +10185,198 @@ "kind": "js", "name": "default", "declaration": { - "name": "ComboBoxItem", - "module": "dist/ComboBoxItem.js" + "name": "FormItem", + "module": "dist/FormItem.js" } }, { "kind": "custom-element-definition", - "name": "ui5-cb-item", + "name": "ui5-form-item", "declaration": { - "name": "ComboBoxItem", - "module": "dist/ComboBoxItem.js" + "name": "FormItem", + "module": "dist/FormItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ComboBoxItemGroup.js", + "path": "dist/GridWalker.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "GridWalker", + "module": "dist/GridWalker.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/Icon.js", "declarations": [ + { + "kind": "interface", + "name": "IIcon", + "description": "Interface for components that represent an icon, usable in numerous higher-order components", + "_ui5privacy": "public" + }, { "kind": "class", - "description": "The `ui5-cb-group-item` is type of suggestion item,\nthat can be used to split the `ui5-combobox` suggestions into groups.", - "name": "ComboBoxItemGroup", - "slots": [ + "description": "### Overview\n\nThe `ui5-icon` component represents an SVG icon.\nThere are two main scenarios how the `ui5-icon` component is used:\nas a purely decorative element,\nor as an interactive element that can be focused and clicked.\n\n### Usage\n\n1. **Get familiar with the icons collections.**\n\nBefore displaying an icon, you need to explore the icons collections to find and import the desired icon.\n\nCurrently there are 3 icons collection, available as 3 npm packages:\n\n- [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n- [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n- [@ui5/webcomponents-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n[icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n\n2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**\n\n`npm i @ui5/webcomponents-icons`\n`npm i @ui5/webcomponents-icons-tnt`\n`npm i @ui5/webcomponents-icons-business-suite`\n\n3. **Then, import the desired icon**.\n\n`import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n\n**For Example**:\n\nFor the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n\n`import \"@ui5/webcomponents-icons/dist/employee.js\";`\n\nFor the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n\n`import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n\nFor the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n\n`import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n\n4. **Display the icon using the `ui5-icon` web component.**\nSet the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\nand the icon name to the `name` property.\n\n`<ui5-icon name=\"employee\"></ui5-icon>`\n`<ui5-icon name=\"tnt/antenna\"></ui5-icon>`\n`<ui5-icon name=\"business-suite/ab-testing\"></ui5-icon>`\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.\n- [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Icon.js\";`", + "name": "Icon", + "cssParts": [ { - "name": "default", - "description": "Defines the items of the <code>ui5-cb-item-group</code>.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<ComboBoxItem>", + "description": "Used to style the outermost wrapper of the `ui5-icon`.", + "name": "root" + } + ], + "members": [ + { + "kind": "field", + "name": "design", + "type": { + "text": "IconDesign", "references": [ { - "name": "ComboBoxItem", + "name": "IconDesign", "package": "@ui5/webcomponents", - "module": "dist/ComboBoxItem.js" + "module": "dist/types/IconDesign.js" } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "default": "\"Default\"", + "description": "Defines the component semantic design.", + "privacy": "public", + "_ui5since": "1.9.2" }, - { - "name": "header", - "description": "Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.", - "_ui5type": { - "text": "Array<ListItemBase>", - "references": [ - { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - } - ] - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } - } - ], - "members": [ { "kind": "field", - "name": "headerText", + "name": "name", "type": { "text": "string | undefined" }, - "description": "Defines the header text of the <code>ui5-li-group</code>.", - "privacy": "public", + "description": "Defines the unique identifier (icon name) of the component.\n\nTo browse all available icons, see the\n[SAP Icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html),\n[SAP Fiori Tools](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT) and\n[SAP Business Suite](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html)\n\nExample:\n`name='add'`, `name='delete'`, `name='employee'`.\n\n**Note:** To use the SAP Fiori Tools icons,\nyou need to set the `tnt` prefix in front of the icon's name.\n\nExample:\n`name='tnt/antenna'`, `name='tnt/actor'`, `name='tnt/api'`.\n\n**Note:** To use the SAP Business Suite icons,\nyou need to set the `business-suite` prefix in front of the icon's name.\n\nExample:\n`name='business-suite/3d'`, `name='business-suite/1x2-grid-layout'`, `name='business-suite/4x4-grid-layout'`.", "default": "undefined", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "privacy": "public" }, { "kind": "field", - "name": "headerAccessibleName", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the accessible name of the header.", - "privacy": "public", + "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.\n\n**Note:** Every icon should have a text alternative in order to\ncalculate its accessible name.", "default": "undefined", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "privacy": "public" }, { "kind": "field", - "name": "wrappingType", + "name": "showTooltip", "type": { - "text": "WrappingType", + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component should have a tooltip.\n\n**Note:** The tooltip text should be provided via the `accessible-name` property.", + "privacy": "public" + }, + { + "kind": "field", + "name": "mode", + "type": { + "text": "IconMode", "references": [ { - "name": "WrappingType", + "name": "IconMode", "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" + "module": "dist/types/IconMode.js" } ] }, - "default": "\"None\"", - "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "default": "\"Decorative\"", + "description": "Defines the mode of the component.", "privacy": "public", - "_ui5since": "2.15.0", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } - } - ], - "superclass": { - "name": "ListItemGroup", - "package": "@ui5/webcomponents", - "module": "dist/ListItemGroup.js" - }, - "tagName": "ui5-cb-item-group", - "customElement": true, - "_ui5since": "1.0.0-rc.15", - "_ui5privacy": "public", - "_ui5abstract": true, - "_ui5implements": [ - { - "name": "IComboBoxItem", - "package": "@ui5/webcomponents", - "module": "dist/ComboBox.js" + "_ui5since": "2.0.0" } ], - "cssParts": [ + "events": [ { - "description": "Used to style the header item of the group", - "name": "header", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "name": "click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired on mouseup, `SPACE` and `ENTER`.\n- on mouse click, the icon fires native `click` event\n- on `SPACE` and `ENTER`, the icon fires custom `click` event", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.11.0" } ], "attributes": [ { - "description": "Defines the header text of the <code>ui5-li-group</code>.", - "name": "header-text", - "default": "undefined", - "fieldName": "headerText", + "description": "Defines the component semantic design.", + "name": "design", + "default": "\"Default\"", + "fieldName": "design", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" + "text": "\"Default\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\" | \"Contrast\" | \"Neutral\" | \"NonInteractive\"" } }, { - "description": "Defines the accessible name of the header.", - "name": "header-accessible-name", + "description": "Defines the unique identifier (icon name) of the component.\n\nTo browse all available icons, see the\n[SAP Icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html),\n[SAP Fiori Tools](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT) and\n[SAP Business Suite](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html)\n\nExample:\n`name='add'`, `name='delete'`, `name='employee'`.\n\n**Note:** To use the SAP Fiori Tools icons,\nyou need to set the `tnt` prefix in front of the icon's name.\n\nExample:\n`name='tnt/antenna'`, `name='tnt/actor'`, `name='tnt/api'`.\n\n**Note:** To use the SAP Business Suite icons,\nyou need to set the `business-suite` prefix in front of the icon's name.\n\nExample:\n`name='business-suite/3d'`, `name='business-suite/1x2-grid-layout'`, `name='business-suite/4x4-grid-layout'`.", + "name": "name", "default": "undefined", - "fieldName": "headerAccessibleName", + "fieldName": "name", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" } }, { - "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", - "name": "wrapping-type", - "default": "\"None\"", - "fieldName": "wrappingType", + "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.\n\n**Note:** Every icon should have a text alternative in order to\ncalculate its accessible name.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "\"None\" | \"Normal\"" - }, - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" + "text": "string | undefined" } - } - ], - "events": [ + }, { - "name": "move-over", - "_ui5privacy": "public", + "description": "Defines whether the component should have a tooltip.\n\n**Note:** The tooltip text should be provided via the `accessible-name` property.", + "name": "show-tooltip", + "default": "false", + "fieldName": "showTooltip", "type": { - "text": "CustomEvent<ListItemGroupMoveEventDetail>", - "references": [ - { - "name": "ListItemGroupMoveEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/ListItemGroup.js" - } - ] - }, - "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5since": "2.1.0", - "_ui5parameters": [ - { - "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." - }, - { - "type": { - "text": "object" - }, - "name": "destination", - "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." - } - ], - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" + "text": "boolean" } }, { - "name": "move", - "_ui5privacy": "public", + "description": "Defines the mode of the component.", + "name": "mode", + "default": "\"Decorative\"", + "fieldName": "mode", "type": { - "text": "CustomEvent<ListItemGroupMoveEventDetail>", - "references": [ - { - "name": "ListItemGroupMoveEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/ListItemGroup.js" - } - ] - }, - "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.1.0", - "_ui5parameters": [ - { - "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." - }, - { - "type": { - "text": "object" - }, - "name": "destination", - "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." - } - ], - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" + "text": "\"Image\" | \"Decorative\" | \"Interactive\"" } } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-icon", + "customElement": true, + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IIcon", + "package": "@ui5/webcomponents", + "module": "dist/Icon.js" + } ] } ], @@ -9507,254 +10385,160 @@ "kind": "js", "name": "default", "declaration": { - "name": "ComboBoxItemGroup", - "module": "dist/ComboBoxItemGroup.js" + "name": "Icon", + "module": "dist/Icon.js" } }, { "kind": "custom-element-definition", - "name": "ui5-cb-item-group", + "name": "ui5-icon", "declaration": { - "name": "ComboBoxItemGroup", - "module": "dist/ComboBoxItemGroup.js" + "name": "Icon", + "module": "dist/Icon.js" } } ] }, { "kind": "javascript-module", - "path": "dist/DateComponentBase.js", + "path": "dist/Input.js", "declarations": [ + { + "kind": "interface", + "name": "IInputSuggestionItem", + "description": "Interface for components that represent a suggestion item, usable in `ui5-input`", + "_ui5privacy": "public" + }, { "kind": "class", - "description": "Abstract class that provides common functionality for date-related components (day picker, month picker, year picker, calendar, date picker, date range picker, date time picker)\nThis includes:\n - \"languageAware: true\" metadata setting, CLDR fetch and i18n initialization\n - common properties (primaryCalendar, minDate, maxDate and formatPattern) declaration and methods that operate on them\n - additional common methods", - "name": "DateComponentBase", - "members": [ + "description": "### Overview\n\nThe `ui5-input` component allows the user to enter and edit text or numeric values in one line.\n\nAdditionally, you can provide `suggestionItems`,\nthat are displayed in a popover right under the input.\n\nThe text field can be editable or read-only (`readonly` property),\nand it can be enabled or disabled (`disabled` property).\nTo visualize semantic states, such as \"Negative\" or \"Critical\", the `valueState` property is provided.\nWhen the user makes changes to the text, the change event is fired,\nwhich enables you to react on any text change.\n\n### Keyboard Handling\nThe `ui5-input` provides the following keyboard shortcuts:\n\n- [Escape] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.\n- [Enter] or [Return] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.\n- [Down] - Focuses the next matching item in the suggestion list. Selection-change event is fired.\n- [Up] - Focuses the previous matching item in the suggestion list. Selection-change event is fired.\n- [Home] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.\n- [End] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.\n- [Page Up] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.\n- [Page Down] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.\n- [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Input.js\";`", + "name": "Input", + "cssParts": [ { - "kind": "field", - "name": "primaryCalendarType", - "type": { - "text": "CalendarType | undefined", + "description": "Used to style the root DOM element of the Input component", + "name": "root" + }, + { + "description": "Used to style the native input element", + "name": "input" + }, + { + "description": "Used to style the clear icon, which can be pressed to clear user input text", + "name": "clear-icon" + } + ], + "slots": [ + { + "name": "default", + "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.", + "_ui5propertyName": "suggestionItems", + "_ui5type": { + "text": "Array<IInputSuggestionItem>", "references": [ { - "name": "CalendarType", - "package": "@ui5/webcomponents-base", - "module": "dist/types/CalendarType.js" + "name": "IInputSuggestionItem", + "package": "@ui5/webcomponents", + "module": "dist/Input.js" } ] }, - "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", - "default": "undefined", - "privacy": "public" + "_ui5privacy": "public" }, { - "kind": "field", - "name": "secondaryCalendarType", - "type": { - "text": "CalendarType | undefined", + "name": "icon", + "description": "Defines the icon to be displayed in the component.", + "_ui5type": { + "text": "Array<IIcon>", "references": [ { - "name": "CalendarType", - "package": "@ui5/webcomponents-base", - "module": "dist/types/CalendarType.js" + "name": "IIcon", + "package": "@ui5/webcomponents", + "module": "dist/Icon.js" } ] }, - "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.16" + "_ui5privacy": "public" }, + { + "name": "valueStateMessage", + "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.", + "_ui5since": "1.0.0-rc.6", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "name": "formatPattern", + "name": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Determines the format, displayed in the input field.", - "default": "undefined", - "deprecated": "Use displayFormat and valueFormat instead", + "default": "false", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", "privacy": "public" }, { "kind": "field", - "name": "displayFormat", + "name": "placeholder", "type": { "text": "string | undefined" }, - "description": "Determines the format, displayed in the input field.", + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0" + "privacy": "public" }, { "kind": "field", - "name": "valueFormat", + "name": "readonly", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Determines the format, used for the value attribute.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0" + "default": "false", + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "privacy": "public" }, { "kind": "field", - "name": "minDate", + "name": "required", "type": { - "text": "string" + "text": "boolean" }, - "default": "\"\"", - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", + "default": "false", + "description": "Defines whether the component is required.", "privacy": "public", - "_ui5since": "1.0.0-rc.6" + "_ui5since": "1.0.0-rc.3" }, { "kind": "field", - "name": "maxDate", + "name": "noTypeahead", "type": { - "text": "string" + "text": "boolean" }, - "default": "\"\"", - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", + "default": "false", + "description": "Defines whether the value will be autcompleted to match an item", "privacy": "public", - "_ui5since": "1.0.0-rc.6" + "_ui5since": "1.4.0" }, { "kind": "field", - "name": "calendarWeekNumbering", + "name": "type", "type": { - "text": "CalendarWeekNumbering", + "text": "InputType", "references": [ { - "name": "CalendarWeekNumbering", + "name": "InputType", "package": "@ui5/webcomponents", - "module": "dist/types/CalendarWeekNumbering.js" + "module": "dist/types/InputType.js" } ] }, - "default": "\"Default\"", - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", - "privacy": "public", - "_ui5since": "2.2.0" - } - ], - "attributes": [ - { - "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", - "name": "primary-calendar-type", - "default": "undefined", - "fieldName": "primaryCalendarType", - "type": { - "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" - } - }, - { - "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", - "name": "secondary-calendar-type", - "default": "undefined", - "fieldName": "secondaryCalendarType", - "type": { - "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" - } - }, - { - "description": "Determines the format, displayed in the input field.", - "name": "format-pattern", - "default": "undefined", - "fieldName": "formatPattern", - "type": { - "text": "string | undefined" - }, - "deprecated": "Use displayFormat and valueFormat instead" - }, - { - "description": "Determines the format, displayed in the input field.", - "name": "display-format", - "default": "undefined", - "fieldName": "displayFormat", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Determines the format, used for the value attribute.", - "name": "value-format", - "default": "undefined", - "fieldName": "valueFormat", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", - "name": "min-date", - "default": "\"\"", - "fieldName": "minDate", - "type": { - "text": "string" - } - }, - { - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", - "name": "max-date", - "default": "\"\"", - "fieldName": "maxDate", - "type": { - "text": "string" - } + "default": "\"Text\"", + "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.", + "privacy": "public" }, - { - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", - "name": "calendar-week-numbering", - "default": "\"Default\"", - "fieldName": "calendarWeekNumbering", - "type": { - "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "customElement": true, - "_ui5privacy": "public", - "_ui5abstract": true - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/DatePicker.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-date-picker` component provides an input field with assigned calendar which opens on user action.\nThe `ui5-date-picker` allows users to select a localized date using touch,\nmouse, or keyboard input. It consists of two parts: the date input field and the\ndate picker.\n\n### Usage\n\nThe user can enter a date by:\n\n- Using the calendar that opens in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and presses the enter key, the calendar shows the corresponding date.\nWhen the user directly triggers the calendar display, the actual date is displayed.\n\n### Formatting\n\nIf a date is entered by typing it into\nthe input field, it must fit to the used date format.\n\nSupported format options are pattern-based on Unicode LDML Date Format notation.\nFor more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\nFor example, if the `format-pattern` is \"yyyy-MM-dd\",\na valid value string is \"2015-07-30\" and the same is displayed in the input.\n\n### Keyboard Handling\nThe `ui5-date-picker` provides advanced keyboard handling.\nIf the `ui5-date-picker` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the [Up], [Down], [Left] or [Right] arrow keys\nto navigate through the dates and select one by pressing the `Space` or `Enter` keys. Moreover you can\nuse TAB to reach the buttons for changing month and year.\n\nIf the `ui5-date-picker` input field is focused and its corresponding picker dialog is not opened,\nthen users can increment or decrement the date referenced by `dateValue` property\nby using the following shortcuts:\n\n- [Page Down] - Decrements the corresponding day of the month by one\n- [Shift] + [Page Down] - Decrements the corresponding month by one\n- [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n- [Page Up] - Increments the corresponding day of the month by one\n- [Shift] + [Page Up] - Increments the corresponding month by one\n- [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one\n\n### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n<script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DatePicker.js\";`", - "name": "DatePicker", - "slots": [ - { - "name": "valueStateMessage", - "description": "Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.", - "_ui5since": "1.0.0-rc.7", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - } - ], - "members": [ { "kind": "field", "name": "value", @@ -9762,7 +10546,7 @@ "text": "string" }, "default": "\"\"", - "description": "Defines a formatted date value.", + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", "privacy": "public", "_ui5formProperty": true, "_ui5formEvents": "change,input" @@ -9786,76 +10570,34 @@ }, { "kind": "field", - "name": "required", + "name": "name", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is required.", - "privacy": "public", - "_ui5since": "1.0.0-rc.9" + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "disabled", + "name": "showSuggestions", "type": { "text": "boolean" }, "default": "false", - "description": "Determines whether the component is displayed as disabled.", - "privacy": "public" - }, - { - "kind": "field", - "name": "readonly", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Determines whether the component is displayed as read-only.", - "privacy": "public" - }, - { - "kind": "field", - "name": "placeholder", - "type": { - "text": "string | undefined" - }, - "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", - "default": "undefined", + "description": "Defines whether the component should show suggestions, if such are present.", "privacy": "public" }, { "kind": "field", - "name": "name", + "name": "maxlength", "type": { - "text": "string | undefined" + "text": "number | undefined" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "description": "Sets the maximum number of characters available in the input field.\n\n**Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.", "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "hideWeekNumbers", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the visibility of the week numbers column.\n\n**Note:** For calendars other than Gregorian,\nthe week numbers are not displayed regardless of what is set.", - "privacy": "public", - "_ui5since": "1.0.0-rc.8" - }, - { - "kind": "field", - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the open or closed state of the popover.", "privacy": "public", - "_ui5since": "2.0.0" + "_ui5since": "1.0.0-rc.5" }, { "kind": "field", @@ -9863,7 +10605,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the aria-label attribute for the component.", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", "privacy": "public", "_ui5since": "1.0.0-rc.15" @@ -9874,7 +10616,7 @@ "type": { "text": "string | undefined" }, - "description": "Receives id(or many ids) of the elements that label the component.", + "description": "Receives id(or many ids) of the elements that label the input.", "default": "undefined", "privacy": "public", "_ui5since": "1.0.0-rc.15" @@ -9888,7 +10630,7 @@ "description": "Defines the accessible description of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "2.14.0" + "_ui5since": "2.9.0" }, { "kind": "field", @@ -9899,265 +10641,29 @@ "description": "Receives id(or many ids) of the elements that describe the input.", "default": "undefined", "privacy": "public", - "_ui5since": "2.14.0" - }, - { - "kind": "method", - "name": "isValid", - "return": { - "type": { - "text": "boolean" - } - }, - "parameters": [ - { - "name": "value", - "type": { - "text": "string" - }, - "description": "A value to be tested against the current date format", - "_ui5privacy": "public" - } - ], - "description": "Checks if a value is valid against the current date format of the DatePicker.", - "privacy": "public", - "deprecated": "Use isValidValue or isValidDisplayValue instead" - }, - { - "kind": "method", - "name": "isValidValue", - "return": { - "type": { - "text": "boolean" - } - }, - "parameters": [ - { - "name": "value", - "type": { - "text": "string" - }, - "description": "A value to be tested against the current date format", - "_ui5privacy": "public" - } - ], - "description": "Checks if a value is valid against the current date format of the DatePicker.", - "privacy": "public" - }, - { - "kind": "method", - "name": "isValidDisplayValue", - "return": { - "type": { - "text": "boolean" - } - }, - "parameters": [ - { - "name": "value", - "type": { - "text": "string" - }, - "description": "A value to be tested against the current date format", - "_ui5privacy": "public" - } - ], - "description": "Checks if a value is valid against the current date format of the DatePicker.", - "privacy": "public" - }, - { - "kind": "method", - "name": "isInValidRange", - "return": { - "type": { - "text": "boolean" - } - }, - "parameters": [ - { - "name": "value", - "type": { - "text": "string" - }, - "description": "A value to be checked", - "_ui5privacy": "public" - } - ], - "description": "Checks if a date is between the minimum and maximum date.", - "privacy": "public" - }, - { - "kind": "method", - "name": "formatValue", - "return": { - "type": { - "text": "string" - }, - "description": "The date as string" - }, - "parameters": [ - { - "name": "date", - "type": { - "text": "Date" - }, - "description": "A Java Script date object to be formatted as string", - "_ui5privacy": "public" - } - ], - "description": "Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance", - "privacy": "public" - }, - { - "kind": "field", - "name": "dateValue", - "type": { - "text": "Date | null" - }, - "description": "Currently selected date represented as a Local JavaScript Date instance.", - "privacy": "public", - "default": "null", - "readonly": true - }, - { - "kind": "field", - "name": "primaryCalendarType", - "type": { - "text": "CalendarType | undefined", - "references": [ - { - "name": "CalendarType", - "package": "@ui5/webcomponents-base", - "module": "dist/types/CalendarType.js" - } - ] - }, - "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", - "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "kind": "field", - "name": "secondaryCalendarType", - "type": { - "text": "CalendarType | undefined", - "references": [ - { - "name": "CalendarType", - "package": "@ui5/webcomponents-base", - "module": "dist/types/CalendarType.js" - } - ] - }, - "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.16", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "kind": "field", - "name": "formatPattern", - "type": { - "text": "string | undefined" - }, - "description": "Determines the format, displayed in the input field.", - "default": "undefined", - "deprecated": "Use displayFormat and valueFormat instead", - "privacy": "public", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "kind": "field", - "name": "displayFormat", - "type": { - "text": "string | undefined" - }, - "description": "Determines the format, displayed in the input field.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "kind": "field", - "name": "valueFormat", - "type": { - "text": "string | undefined" - }, - "description": "Determines the format, used for the value attribute.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "kind": "field", - "name": "minDate", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", - "privacy": "public", - "_ui5since": "1.0.0-rc.6", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "_ui5since": "2.9.0" }, { "kind": "field", - "name": "maxDate", + "name": "showClearIcon", "type": { - "text": "string" + "text": "boolean" }, - "default": "\"\"", - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", + "default": "false", + "description": "Defines whether the clear icon of the input will be shown.", "privacy": "public", - "_ui5since": "1.0.0-rc.6", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "_ui5since": "1.2.0" }, { "kind": "field", - "name": "calendarWeekNumbering", + "name": "open", "type": { - "text": "CalendarWeekNumbering", - "references": [ - { - "name": "CalendarWeekNumbering", - "package": "@ui5/webcomponents", - "module": "dist/types/CalendarWeekNumbering.js" - } - ] + "text": "boolean" }, - "default": "\"Default\"", - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "default": "false", + "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", "privacy": "public", - "_ui5since": "2.2.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "_ui5since": "2.0.0" } ], "events": [ @@ -10165,107 +10671,62 @@ "name": "change", "_ui5privacy": "public", "type": { - "text": "CustomEvent<DatePickerChangeEventDetail>", - "references": [ - { - "name": "DatePickerChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/DatePicker.js" - } - ] + "text": "CustomEvent" }, "description": "Fired when the input operation has finished by pressing Enter or on focusout.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "string" - }, - "name": "value", - "_ui5privacy": "public", - "description": "The submitted value." - }, - { - "type": { - "text": "boolean" - }, - "name": "valid", - "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." - } - ] + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true }, { "name": "input", "_ui5privacy": "public", "type": { - "text": "CustomEvent<DatePickerInputEventDetail>", - "references": [ - { - "name": "DatePickerInputEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/DatePicker.js" - } - ] + "text": "CustomEvent" }, - "description": "Fired when the value of the component is changed at each key stroke.", + "description": "Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, + "_ui5Bubbles": true + }, + { + "name": "select", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when some text has been selected.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "string" - }, - "name": "value", - "_ui5privacy": "public", - "description": "The submitted value." - }, - { - "type": { - "text": "boolean" - }, - "name": "valid", - "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." - } - ] + "_ui5since": "2.0.0" }, { - "name": "value-state-change", + "name": "selection-change", "_ui5privacy": "public", "type": { - "text": "CustomEvent<DatePickerValueStateChangeEventDetail>", + "text": "CustomEvent<InputSelectionChangeEventDetail>", "references": [ { - "name": "DatePickerValueStateChangeEventDetail", + "name": "InputSelectionChangeEventDetail", "package": "@ui5/webcomponents", - "module": "dist/DatePicker.js" + "module": "dist/Input.js" } ] }, - "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, + "description": "Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, "_ui5Bubbles": true, + "_ui5since": "2.0.0", "_ui5parameters": [ { "type": { - "text": "string" - }, - "name": "valueState", - "_ui5privacy": "public", - "description": "The new `valueState` that will be set." - }, - { - "type": { - "text": "boolean" + "text": "HTMLElement" }, - "name": "valid", + "name": "item", "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." + "description": "The previewed suggestion item." } ] }, @@ -10275,11 +10736,11 @@ "type": { "text": "CustomEvent" }, - "description": "Fired after the component's picker is opened.", + "description": "Fired when the suggestions picker is open.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.4.0" + "_ui5Bubbles": true, + "_ui5since": "2.0.0" }, { "name": "close", @@ -10287,30 +10748,39 @@ "type": { "text": "CustomEvent" }, - "description": "Fired after the component's picker is closed.", + "description": "Fired when the suggestions picker is closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": false, - "_ui5since": "2.4.0" + "_ui5since": "2.0.0" } ], "attributes": [ { - "description": "Defines a formatted date value.", - "name": "value", - "default": "\"\"", - "fieldName": "value", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", "type": { - "text": "string" + "text": "boolean" } }, { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "name": "placeholder", + "default": "undefined", + "fieldName": "placeholder", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "string | undefined" + } + }, + { + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", + "type": { + "text": "boolean" } }, { @@ -10323,30 +10793,39 @@ } }, { - "description": "Determines whether the component is displayed as disabled.", - "name": "disabled", + "description": "Defines whether the value will be autcompleted to match an item", + "name": "no-typeahead", "default": "false", - "fieldName": "disabled", + "fieldName": "noTypeahead", "type": { "text": "boolean" } }, { - "description": "Determines whether the component is displayed as read-only.", - "name": "readonly", - "default": "false", - "fieldName": "readonly", + "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.", + "name": "type", + "default": "\"Text\"", + "fieldName": "type", "type": { - "text": "boolean" + "text": "\"Text\" | \"Email\" | \"Number\" | \"Password\" | \"Tel\" | \"URL\" | \"Search\"" } }, { - "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", - "name": "placeholder", - "default": "undefined", - "fieldName": "placeholder", + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", + "name": "value", + "default": "\"\"", + "fieldName": "value", "type": { - "text": "string | undefined" + "text": "string" + } + }, + { + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", + "type": { + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" } }, { @@ -10359,25 +10838,25 @@ } }, { - "description": "Defines the visibility of the week numbers column.\n\n**Note:** For calendars other than Gregorian,\nthe week numbers are not displayed regardless of what is set.", - "name": "hide-week-numbers", + "description": "Defines whether the component should show suggestions, if such are present.", + "name": "show-suggestions", "default": "false", - "fieldName": "hideWeekNumbers", + "fieldName": "showSuggestions", "type": { "text": "boolean" } }, { - "description": "Defines the open or closed state of the popover.", - "name": "open", - "default": "false", - "fieldName": "open", + "description": "Sets the maximum number of characters available in the input field.\n\n**Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.", + "name": "maxlength", + "default": "undefined", + "fieldName": "maxlength", "type": { - "text": "boolean" + "text": "number | undefined" } }, { - "description": "Defines the aria-label attribute for the component.", + "description": "Defines the accessible ARIA name of the component.", "name": "accessible-name", "default": "undefined", "fieldName": "accessibleName", @@ -10386,7 +10865,7 @@ } }, { - "description": "Receives id(or many ids) of the elements that label the component.", + "description": "Receives id(or many ids) of the elements that label the input.", "name": "accessible-name-ref", "default": "undefined", "fieldName": "accessibleNameRef", @@ -10413,126 +10892,164 @@ } }, { - "description": "Currently selected date represented as a Local JavaScript Date instance.", - "name": "date-value", - "default": "null", - "fieldName": "dateValue", + "description": "Defines whether the clear icon of the input will be shown.", + "name": "show-clear-icon", + "default": "false", + "fieldName": "showClearIcon", "type": { - "text": "any" + "text": "boolean" } }, { - "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", - "name": "primary-calendar-type", - "default": "undefined", - "fieldName": "primaryCalendarType", + "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", + "name": "open", + "default": "false", + "fieldName": "open", "type": { - "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "boolean" } - }, + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-input", + "customElement": true, + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Input", + "module": "dist/Input.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-input", + "declaration": { + "name": "Input", + "module": "dist/Input.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/Label.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-label` is a component used to represent a label for elements like input, textarea, select.\nThe `for` property of the `ui5-label` must be the same as the id attribute of the related input element.\nScreen readers read out the label, when the user focuses the labelled control.\n\nThe `ui5-label` appearance can be influenced by properties,\nsuch as `required` and `wrappingType`.\nThe appearance of the Label can be configured in a limited way by using the design property.\nFor a broader choice of designs, you can use custom styles.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Label\";`", + "name": "Label", + "slots": [ { - "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", - "name": "secondary-calendar-type", - "default": "undefined", - "fieldName": "secondaryCalendarType", + "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", + "name": "default", + "_ui5privacy": "public", + "_ui5type": { + "text": "Array<Node>" + } + } + ], + "members": [ + { + "kind": "field", + "name": "for", "type": { - "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + "text": "string | undefined" }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "description": "Defines the labeled input by providing its ID.\n\n**Note:** Can be used with both `ui5-input` and native input.", + "default": "undefined", + "privacy": "public" }, { - "description": "Determines the format, displayed in the input field.", - "name": "format-pattern", - "default": "undefined", - "fieldName": "formatPattern", + "kind": "field", + "name": "showColon", "type": { - "text": "string | undefined" + "text": "boolean" }, - "deprecated": "Use displayFormat and valueFormat instead", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "default": "false", + "description": "Defines whether colon is added to the component text.\n\n**Note:** Usually used in forms.", + "privacy": "public" }, { - "description": "Determines the format, displayed in the input field.", - "name": "display-format", - "default": "undefined", - "fieldName": "displayFormat", + "kind": "field", + "name": "required", "type": { - "text": "string | undefined" + "text": "boolean" }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "default": "false", + "description": "Defines whether an asterisk character is added to the component text.\n\n**Note:** Usually indicates that user input (bound with the `for` property) is required.\nIn that case the `required` property of\nthe corresponding input should also be set.", + "privacy": "public" }, { - "description": "Determines the format, used for the value attribute.", - "name": "value-format", + "kind": "field", + "name": "wrappingType", + "type": { + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] + }, + "default": "\"Normal\"", + "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the labeled input by providing its ID.\n\n**Note:** Can be used with both `ui5-input` and native input.", + "name": "for", "default": "undefined", - "fieldName": "valueFormat", + "fieldName": "for", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" } }, { - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", - "name": "min-date", - "default": "\"\"", - "fieldName": "minDate", + "description": "Defines whether colon is added to the component text.\n\n**Note:** Usually used in forms.", + "name": "show-colon", + "default": "false", + "fieldName": "showColon", "type": { - "text": "string" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "boolean" } }, { - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", - "name": "max-date", - "default": "\"\"", - "fieldName": "maxDate", + "description": "Defines whether an asterisk character is added to the component text.\n\n**Note:** Usually indicates that user input (bound with the `for` property) is required.\nIn that case the `required` property of\nthe corresponding input should also be set.", + "name": "required", + "default": "false", + "fieldName": "required", "type": { - "text": "string" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "boolean" } }, { - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", - "name": "calendar-week-numbering", - "default": "\"Default\"", - "fieldName": "calendarWeekNumbering", + "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.", + "name": "wrapping-type", + "default": "\"Normal\"", + "fieldName": "wrappingType", "type": { - "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "\"None\" | \"Normal\"" } } ], "superclass": { - "name": "DateComponentBase", - "package": "@ui5/webcomponents", - "module": "dist/DateComponentBase.js" + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" }, - "tagName": "ui5-date-picker", + "tagName": "ui5-label", "customElement": true, "_ui5privacy": "public" } @@ -10542,1060 +11059,1336 @@ "kind": "js", "name": "default", "declaration": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "Label", + "module": "dist/Label.js" } }, { "kind": "custom-element-definition", - "name": "ui5-date-picker", + "name": "ui5-label", "declaration": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "Label", + "module": "dist/Label.js" } } ] }, { "kind": "javascript-module", - "path": "dist/DateRangePicker.js", + "path": "dist/Link.js", "declarations": [ { "kind": "class", - "description": "### Overview\nThe DateRangePicker enables the users to enter a localized date range using touch, mouse, keyboard input, or by selecting a date range in the calendar.\n\n### Usage\nThe user can enter a date by:\nUsing the calendar that opens in a popup or typing it in directly in the input field (not available for mobile devices).\nFor the `ui5-daterange-picker`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DateRangePicker.js\";`\n\n### Keyboard Handling\nThe `ui5-daterange-picker` provides advanced keyboard handling.\n\nWhen the `ui5-daterange-picker` input field is focused the user can\nincrement or decrement respectively the range start or end date, depending on where the cursor is.\nThe following shortcuts are available:\n\n- [Page Down] - Decrements the corresponding day of the month by one\n- [Shift] + [Page Down] - Decrements the corresponding month by one\n- [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n- [Page Up] - Increments the corresponding day of the month by one\n- [Shift] + [Page Up] - Increments the corresponding month by one\n- [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one", - "name": "DateRangePicker", + "description": "### Overview\nThe `ui5-link` is a hyperlink component that is used to navigate to other\napps and web pages, or to trigger actions.\nIt is a clickable text element, visualized in such a way that it stands out\nfrom the standard text.\nOn hover, it changes its style to an underlined text to provide additional feedback to the user.\n\n### Usage\n\nYou can set the `ui5-link` to be enabled or disabled.\n\nTo create a visual hierarchy in large lists of links, you can set the less important links as\n`Subtle` or the more important ones as `Emphasized`,\nby using the `design` property.\n\nIf the `href` property is set, the link behaves as the HTML\nanchor tag (`<a></a>`) and opens the specified URL in the given target frame (`target` property).\nTo specify where the linked content is opened, you can use the `target` property.\n\n### Responsive behavior\n\nIf there is not enough space, the text of the `ui5-link` becomes truncated.\nIf the `wrappingType` property is set to `\"Normal\"`, the text is displayed\non several lines instead of being truncated.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Link\";`", + "name": "Link", + "cssParts": [ + { + "description": "Used to style the provided icon within the link", + "name": "icon" + }, + { + "description": "Used to style the provided endIcon within the link", + "name": "endIcon" + } + ], + "slots": [ + { + "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", + "name": "default", + "_ui5privacy": "public", + "_ui5type": { + "text": "Array<Node>" + } + } + ], "members": [ { "kind": "field", - "name": "delimiter", + "name": "disabled", "type": { - "text": "string" + "text": "boolean" }, - "default": "\"-\"", - "description": "Determines the symbol which separates the dates.\nIf not supplied, the default time interval delimiter for the current locale will be used.", + "default": "false", + "description": "Defines whether the component is disabled.\n\n**Note:** When disabled, the click event cannot be triggered by the user.", "privacy": "public" }, { "kind": "field", - "name": "dateValue", + "name": "tooltip", "type": { - "text": "Date | null" + "text": "string | undefined" }, - "description": "**Note:** The getter method is inherited and not supported. If called it will return an empty value.", + "description": "Defines the tooltip of the component.", + "default": "undefined", "privacy": "public", - "default": "null", - "readonly": true, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "2.0.0" }, { "kind": "field", - "name": "dateValueUTC", + "name": "href", "type": { - "text": "Date | null" + "text": "string | undefined" }, - "readonly": true, - "description": "**Note:** The getter method is inherited and not supported. If called it will return an empty value.", - "privacy": "public", - "default": "null", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "startDateValue", + "name": "target", "type": { - "text": "Date | null" + "text": "string | undefined" }, - "description": "Returns the start date of the currently selected range as JavaScript Date instance.", - "privacy": "public", - "default": "null", - "readonly": true + "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "endDateValue", + "name": "design", "type": { - "text": "Date | null" - }, - "description": "Returns the end date of the currently selected range as JavaScript Date instance.", - "privacy": "public", - "default": "null", - "readonly": true - }, - { - "kind": "method", - "name": "isValid", - "return": { - "type": { - "text": "boolean" - } + "text": "LinkDesign", + "references": [ + { + "name": "LinkDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/LinkDesign.js" + } + ] }, - "parameters": [ - { - "name": "value", - "type": { - "text": "string" - }, - "description": "A value to be tested against the current date format", - "_ui5privacy": "public" - } - ], - "description": "Checks if a value is valid against the current date format of the DatePicker.", - "privacy": "public", - "deprecated": "Use isValidValue or isValidDisplayValue instead", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "default": "\"Default\"", + "description": "Defines the component design.\n\n**Note:** Avaialble options are `Default`, `Subtle`, and `Emphasized`.", + "privacy": "public" }, { - "kind": "method", - "name": "isValidValue", - "return": { - "type": { - "text": "boolean" - } + "kind": "field", + "name": "interactiveAreaSize", + "type": { + "text": "InteractiveAreaSize", + "references": [ + { + "name": "InteractiveAreaSize", + "package": "@ui5/webcomponents", + "module": "dist/types/InteractiveAreaSize.js" + } + ] }, - "parameters": [ - { - "name": "value", - "type": { - "text": "string" - }, - "description": "A value to be tested against the current date format", - "_ui5privacy": "public" - } - ], - "description": "Checks if a value is valid against the current date format of the DatePicker.", + "default": "\"Normal\"", + "description": "Defines the target area size of the link:\n- **InteractiveAreaSize.Normal**: The default target area size.\n- **InteractiveAreaSize.Large**: The target area size is enlarged to 24px in height.\n\n**Note:**The property is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.\n**Note:**To improve <code>ui5-link</code>'s reliability and usability, it is recommended to use the <code>InteractiveAreaSize.Large</code> value in scenarios where the <code>ui5-link</code> component is placed inside another interactive component, such as a list item or a table cell.\nSetting the <code>interactiveAreaSize</code> property to <code>InteractiveAreaSize.Large</code> increases the <code>ui5-link</code>'s invisible touch area. As a result, the user's intended one-time selection command is more likely to activate the desired <code>ui5-link</code>, with minimal chance of unintentionally activating the underlying component.", "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "2.8.0" }, { - "kind": "method", - "name": "isValidDisplayValue", - "return": { - "type": { - "text": "boolean" - } + "kind": "field", + "name": "wrappingType", + "type": { + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] }, - "parameters": [ - { - "name": "value", - "type": { - "text": "string" - }, - "description": "A value to be tested against the current date format", - "_ui5privacy": "public" - } - ], - "description": "Checks if a value is valid against the current date format of the DatePicker.", - "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "default": "\"Normal\"", + "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** By default the text will wrap. If \"None\" is set - the text will truncate.", + "privacy": "public" }, { - "kind": "method", - "name": "isInValidRange", - "return": { - "type": { - "text": "boolean" - } + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" }, - "parameters": [ - { - "name": "value", - "type": { - "text": "string" - }, - "description": "A value to be checked", - "_ui5privacy": "public" - } - ], - "description": "Checks if a date is between the minimum and maximum date.", + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "1.2.0" }, { "kind": "field", - "name": "value", + "name": "accessibleNameRef", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"\"", - "description": "Defines a formatted date value.", + "description": "Receives id(or many ids) of the elements that label the input", + "default": "undefined", "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change,input", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "valueState", + "name": "accessibleRole", "type": { - "text": "ValueState", + "text": "LinkAccessibleRole", "references": [ { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" + "name": "LinkAccessibleRole", + "package": "@ui5/webcomponents", + "module": "dist/types/LinkAccessibleRole.js" } ] }, - "default": "\"None\"", - "description": "Defines the value state of the component.", + "default": "\"Link\"", + "description": "Defines the ARIA role of the component.\n\n**Note:** Use the <code>LinkAccessibleRole.Button</code> role in cases when navigation is not expected to occur and the href property is not defined.", "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "1.9.0" }, { "kind": "field", - "name": "required", + "name": "accessibilityAttributes", "type": { - "text": "boolean" + "text": "LinkAccessibilityAttributes", + "references": [ + { + "name": "LinkAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/Link.js" + } + ] }, - "default": "false", - "description": "Defines whether the component is required.", + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.", "privacy": "public", - "_ui5since": "1.0.0-rc.9", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "1.1.0" }, { "kind": "field", - "name": "disabled", + "name": "accessibleDescription", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Determines whether the component is displayed as disabled.", + "description": "Defines the accessible description of the component.", + "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "2.5.0" }, { "kind": "field", - "name": "readonly", + "name": "icon", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Determines whether the component is displayed as read-only.", + "description": "Defines the icon, displayed as graphical element within the component before the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5since": "2.0.0" }, { "kind": "field", - "name": "placeholder", + "name": "endIcon", "type": { "text": "string | undefined" }, - "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", + "description": "Defines the icon, displayed as graphical element within the component after the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "_ui5since": "2.0.0" + } + ], + "events": [ + { + "name": "click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<LinkClickEventDetail>", + "references": [ + { + "name": "LinkClickEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Link.js" + } + ] + }, + "description": "Fired when the component is triggered either with a mouse/tap\nor by using the Enter key.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "altKey", + "_ui5privacy": "public", + "description": "Returns whether the \"ALT\" key was pressed when the event was triggered." + }, + { + "type": { + "text": "boolean" + }, + "name": "ctrlKey", + "_ui5privacy": "public", + "description": "Returns whether the \"CTRL\" key was pressed when the event was triggered." + }, + { + "type": { + "text": "boolean" + }, + "name": "metaKey", + "_ui5privacy": "public", + "description": "Returns whether the \"META\" key was pressed when the event was triggered." + }, + { + "type": { + "text": "boolean" + }, + "name": "shiftKey", + "_ui5privacy": "public", + "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered." + } + ] + } + ], + "attributes": [ + { + "description": "Defines whether the component is disabled.\n\n**Note:** When disabled, the click event cannot be triggered by the user.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" } }, { - "kind": "field", - "name": "name", + "description": "Defines the tooltip of the component.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", "type": { "text": "string | undefined" - }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + } + }, + { + "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.", + "name": "href", "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "fieldName": "href", + "type": { + "text": "string | undefined" } }, { - "kind": "field", - "name": "hideWeekNumbers", + "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", + "name": "target", + "default": "undefined", + "fieldName": "target", "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the visibility of the week numbers column.\n\n**Note:** For calendars other than Gregorian,\nthe week numbers are not displayed regardless of what is set.", - "privacy": "public", - "_ui5since": "1.0.0-rc.8", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "text": "string | undefined" } }, { - "kind": "field", - "name": "open", + "description": "Defines the component design.\n\n**Note:** Avaialble options are `Default`, `Subtle`, and `Emphasized`.", + "name": "design", + "default": "\"Default\"", + "fieldName": "design", "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the open or closed state of the popover.", - "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "text": "\"Default\" | \"Emphasized\" | \"Subtle\"" } }, { - "kind": "field", - "name": "accessibleName", + "description": "Defines the target area size of the link:\n- **InteractiveAreaSize.Normal**: The default target area size.\n- **InteractiveAreaSize.Large**: The target area size is enlarged to 24px in height.\n\n**Note:**The property is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.\n**Note:**To improve <code>ui5-link</code>'s reliability and usability, it is recommended to use the <code>InteractiveAreaSize.Large</code> value in scenarios where the <code>ui5-link</code> component is placed inside another interactive component, such as a list item or a table cell.\nSetting the <code>interactiveAreaSize</code> property to <code>InteractiveAreaSize.Large</code> increases the <code>ui5-link</code>'s invisible touch area. As a result, the user's intended one-time selection command is more likely to activate the desired <code>ui5-link</code>, with minimal chance of unintentionally activating the underlying component.", + "name": "interactive-area-size", + "default": "\"Normal\"", + "fieldName": "interactiveAreaSize", + "type": { + "text": "\"Normal\" | \"Large\"" + } + }, + { + "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** By default the text will wrap. If \"None\" is set - the text will truncate.", + "name": "wrapping-type", + "default": "\"Normal\"", + "fieldName": "wrappingType", + "type": { + "text": "\"None\" | \"Normal\"" + } + }, + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { "text": "string | undefined" - }, - "description": "Defines the aria-label attribute for the component.", + } + }, + { + "description": "Receives id(or many ids) of the elements that label the input", + "name": "accessible-name-ref", "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" } }, { - "kind": "field", - "name": "accessibleNameRef", + "description": "Defines the ARIA role of the component.\n\n**Note:** Use the <code>LinkAccessibleRole.Button</code> role in cases when navigation is not expected to occur and the href property is not defined.", + "name": "accessible-role", + "default": "\"Link\"", + "fieldName": "accessibleRole", + "type": { + "text": "\"Button\" | \"Link\"" + } + }, + { + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "LinkAccessibilityAttributes" + } + }, + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", "type": { "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that label the component.", + } + }, + { + "description": "Defines the icon, displayed as graphical element within the component before the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "fieldName": "icon", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the icon, displayed as graphical element within the component after the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "end-icon", + "default": "undefined", + "fieldName": "endIcon", + "type": { + "text": "string | undefined" } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-link", + "customElement": true, + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Link", + "module": "dist/Link.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-link", + "declaration": { + "name": "Link", + "module": "dist/Link.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/List.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-list` component allows displaying a list of items, advanced keyboard\nhandling support for navigating between items, and predefined modes to improve the development efficiency.\n\nThe `ui5-list` is a container for the available list items:\n\n- `ui5-li`\n- `ui5-li-custom`\n- `ui5-li-group`\n\nTo benefit from the built-in selection mechanism, you can use the available\nselection modes, such as\n`Single`, `Multiple` and `Delete`.\n\nAdditionally, the `ui5-list` provides header, footer, and customization for the list item separators.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe `ui5-list` provides advanced keyboard handling.\nWhen a list is focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Up] or [Down] - Navigates up and down the items\n- [Home] - Navigates to first item\n- [End] - Navigates to the last item\n\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete),\nwhen the `selectionMode` property is in use:\n\n- [Space] - Select an item (if `type` is 'Active') when `selectionMode` is selection\n- [Delete] - Delete an item if `selectionMode` property is `Delete`\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/List.js\";`\n\n`import \"@ui5/webcomponents/dist/ListItemStandard.js\";` (for `ui5-li`)\n\n`import \"@ui5/webcomponents/dist/ListItemCustom.js\";` (for `ui5-li-custom`)\n\n`import \"@ui5/webcomponents/dist/ListItemGroup.js\";` (for `ui5-li-group`)", + "name": "List", + "cssParts": [ + { + "description": "Used to style the button, that is used for growing of the component", + "name": "growing-button" + }, + { + "description": "Used to style the button inner element", + "name": "growing-button-inner" + } + ], + "slots": [ + { + "name": "default", + "description": "Defines the items of the component.\n\n**Note:** Use `ui5-li`, `ui5-li-custom`, and `ui5-li-group` for the intended design.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<ListItemBase | ListItemGroup>" + }, + "_ui5privacy": "public" }, + { + "name": "header", + "description": "Defines the component header.\n\n**Note:** When `header` is set, the\n`headerText` property is ignored.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "name": "accessibleDescription", + "name": "headerText", "type": { "text": "string | undefined" }, - "description": "Defines the accessible description of the component.", + "description": "Defines the component header text.\n\n**Note:** If `header` is set this property is ignored.", "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "footerText", "type": { "text": "string | undefined" }, - "description": "Receives id(or many ids) of the elements that describe the input.", + "description": "Defines the footer text.", "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "privacy": "public" }, { - "kind": "method", - "name": "formatValue", - "return": { - "type": { - "text": "string" - }, - "description": "The date as string" + "kind": "field", + "name": "indent", + "type": { + "text": "boolean" }, - "parameters": [ - { - "name": "date", - "type": { - "text": "Date" - }, - "description": "A Java Script date object to be formatted as string", - "_ui5privacy": "public" - } - ], - "description": "Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance", - "privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "default": "false", + "description": "Determines whether the component is indented.", + "privacy": "public" }, { "kind": "field", - "name": "primaryCalendarType", + "name": "selectionMode", "type": { - "text": "CalendarType | undefined", + "text": "ListSelectionMode", "references": [ { - "name": "CalendarType", - "package": "@ui5/webcomponents-base", - "module": "dist/types/CalendarType.js" + "name": "ListSelectionMode", + "package": "@ui5/webcomponents", + "module": "dist/types/ListSelectionMode.js" } ] }, - "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", + "default": "\"None\"", + "description": "Defines the selection mode of the component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "noDataText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text that is displayed when the component contains no items.", "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "privacy": "public" }, { "kind": "field", - "name": "secondaryCalendarType", + "name": "separators", "type": { - "text": "CalendarType | undefined", + "text": "ListSeparator", "references": [ { - "name": "CalendarType", - "package": "@ui5/webcomponents-base", - "module": "dist/types/CalendarType.js" + "name": "ListSeparator", + "package": "@ui5/webcomponents", + "module": "dist/types/ListSeparator.js" } ] }, - "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.16", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "default": "\"All\"", + "description": "Defines the item separator style that is used.", + "privacy": "public" }, { "kind": "field", - "name": "formatPattern", + "name": "growing", "type": { - "text": "string | undefined" + "text": "ListGrowingMode", + "references": [ + { + "name": "ListGrowingMode", + "package": "@ui5/webcomponents", + "module": "dist/types/ListGrowingMode.js" + } + ] }, - "description": "Determines the format, displayed in the input field.", - "default": "undefined", - "deprecated": "Use displayFormat and valueFormat instead", + "default": "\"None\"", + "description": "Defines whether the component will have growing capability either by pressing a `More` button,\nor via user scroll. In both cases `load-more` event is fired.\n\n**Restrictions:** `growing=\"Scroll\"` is not supported for Internet Explorer,\non IE the component will fallback to `growing=\"Button\"`.", "privacy": "public", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "_ui5since": "1.0.0-rc.13" }, { "kind": "field", - "name": "displayFormat", + "name": "growingButtonText", "type": { "text": "string | undefined" }, - "description": "Determines the format, displayed in the input field.", + "description": "Defines the text that will be displayed inside the growing button.\n\n**Note:** If not specified a built-in text will be displayed.\n\n**Note:** This property takes effect if the `growing` property is set to the `Button`.", "default": "undefined", "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "_ui5since": "1.24" }, { "kind": "field", - "name": "valueFormat", + "name": "loading", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Determines the format, used for the value attribute.", - "default": "undefined", + "default": "false", + "description": "Defines if the component would display a loading indicator over the list.", "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "_ui5since": "1.0.0-rc.6" }, { "kind": "field", - "name": "minDate", + "name": "loadingDelay", "type": { - "text": "string" + "text": "number" }, - "default": "\"\"", - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", - "privacy": "public", - "_ui5since": "1.0.0-rc.6", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "default": "1000", + "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", + "privacy": "public" }, { "kind": "field", - "name": "maxDate", + "name": "accessibleName", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"\"", - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", + "description": "Defines the accessible name of the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.6", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "calendarWeekNumbering", + "name": "accessibilityAttributes", "type": { - "text": "CalendarWeekNumbering", + "text": "ListAccessibilityAttributes", "references": [ { - "name": "CalendarWeekNumbering", + "name": "ListAccessibilityAttributes", "package": "@ui5/webcomponents", - "module": "dist/types/CalendarWeekNumbering.js" + "module": "dist/List.js" } ] }, - "default": "\"Default\"", - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", + "default": "{}", + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`, `growingButton.description`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n- **description**: Defines the accessible ARIA description of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.", "privacy": "public", - "_ui5since": "2.2.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - } - ], - "attributes": [ - { - "description": "Determines the symbol which separates the dates.\nIf not supplied, the default time interval delimiter for the current locale will be used.", - "name": "delimiter", - "default": "\"-\"", - "fieldName": "delimiter", - "type": { - "text": "string" - } + "_ui5since": "2.13.0" }, { - "description": "**Note:** The getter method is inherited and not supported. If called it will return an empty value.", - "name": "date-value", - "default": "null", - "fieldName": "dateValue", + "kind": "field", + "name": "accessibleNameRef", "type": { - "text": "any" + "text": "string | undefined" }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "description": "Defines the IDs of the elements that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { - "description": "**Note:** The getter method is inherited and not supported. If called it will return an empty value.", - "name": "date-value-utc", - "default": "null", - "fieldName": "dateValueUTC", + "kind": "field", + "name": "accessibleDescription", "type": { - "text": "any" - } + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.5.0" }, { - "description": "Returns the start date of the currently selected range as JavaScript Date instance.", - "name": "start-date-value", - "default": "null", - "fieldName": "startDateValue", + "kind": "field", + "name": "accessibleDescriptionRef", "type": { - "text": "any" - } + "text": "string | undefined" + }, + "description": "Defines the IDs of the elements that describe the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.5.0" }, { - "description": "Returns the end date of the currently selected range as JavaScript Date instance.", - "name": "end-date-value", - "default": "null", - "fieldName": "endDateValue", + "kind": "field", + "name": "accessibleRole", "type": { - "text": "any" - } + "text": "ListAccessibleRole", + "references": [ + { + "name": "ListAccessibleRole", + "package": "@ui5/webcomponents", + "module": "dist/types/ListAccessibleRole.js" + } + ] + }, + "default": "\"List\"", + "description": "Defines the accessible role of the component.", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { - "description": "Defines a formatted date value.", - "name": "value", - "default": "\"\"", - "fieldName": "value", + "kind": "field", + "name": "listItems", "type": { - "text": "string" + "text": "Array<ListItemBase>", + "references": [ + { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + } + ] }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "description": "Returns an array containing the list item instances without the groups in a flat structure.", + "default": "[]", + "privacy": "public", + "readonly": true, + "_ui5since": "2.0.0" + } + ], + "events": [ + { + "name": "item-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListItemClickEventDetail>", + "references": [ + { + "name": "ListItemClickEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "description": "Fired when an item is activated, unless the item's `type` property\nis set to `Inactive`.\n\n**Note**: This event is not triggered by interactions with selection components such as the checkboxes and radio buttons,\nassociated with non-default `selectionMode` values, or if any other **interactive** component\n(such as a button or input) within the list item is directly clicked.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "The clicked item." + } + ] }, { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", + "name": "item-close", + "_ui5privacy": "public", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "CustomEvent<ListItemCloseEventDetail>", + "references": [ + { + "name": "ListItemCloseEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "description": "Fired when the `Close` button of any item is clicked\n\n**Note:** This event is only applicable to list items that can be closed (such as notification list items),\nnot to be confused with `item-delete`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.0.0-rc.8", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "the item about to be closed." + } + ] }, { - "description": "Defines whether the component is required.", - "name": "required", - "default": "false", - "fieldName": "required", + "name": "item-toggle", + "_ui5privacy": "public", "type": { - "text": "boolean" + "text": "CustomEvent<ListItemToggleEventDetail>", + "references": [ + { + "name": "ListItemToggleEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "description": "Fired when the `Toggle` button of any item is clicked.\n\n**Note:** This event is only applicable to list items that can be toggled (such as notification group list items).", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.0.0-rc.8", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "the toggled item." + } + ] }, { - "description": "Determines whether the component is displayed as disabled.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", + "name": "item-delete", + "_ui5privacy": "public", "type": { - "text": "boolean" + "text": "CustomEvent<ListItemDeleteEventDetail>", + "references": [ + { + "name": "ListItemDeleteEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "description": "Fired when the Delete button of any item is pressed.\n\n**Note:** A Delete button is displayed on each item,\nwhen the component `selectionMode` property is set to `Delete`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "the deleted item." + } + ] }, { - "description": "Determines whether the component is displayed as read-only.", - "name": "readonly", - "default": "false", - "fieldName": "readonly", + "name": "selection-change", + "_ui5privacy": "public", "type": { - "text": "boolean" + "text": "CustomEvent<ListSelectionChangeEventDetail>", + "references": [ + { + "name": "ListSelectionChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "description": "Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` selection modes.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "Array<ListItemBase>", + "references": [ + { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + } + ] + }, + "name": "selectedItems", + "_ui5privacy": "public", + "description": "An array of the selected items." + }, + { + "type": { + "text": "Array<ListItemBase>", + "references": [ + { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + } + ] + }, + "name": "previouslySelectedItems", + "_ui5privacy": "public", + "description": "An array of the previously selected items." + } + ] }, { - "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", - "name": "placeholder", + "name": "load-more", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user scrolls to the bottom of the list.\n\n**Note:** The event is fired when the `growing='Scroll'` property is enabled.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.0.0-rc.6" + }, + { + "name": "move-over", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListMoveEventDetail>", + "references": [ + { + "name": "ListMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.0.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + } + ] + }, + { + "name": "move", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListMoveEventDetail>", + "references": [ + { + "name": "ListMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + } + ] + } + ], + "attributes": [ + { + "description": "Defines the component header text.\n\n**Note:** If `header` is set this property is ignored.", + "name": "header-text", "default": "undefined", - "fieldName": "placeholder", + "fieldName": "headerText", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", + "description": "Defines the footer text.", + "name": "footer-text", "default": "undefined", - "fieldName": "name", + "fieldName": "footerText", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" } }, { - "description": "Defines the visibility of the week numbers column.\n\n**Note:** For calendars other than Gregorian,\nthe week numbers are not displayed regardless of what is set.", - "name": "hide-week-numbers", + "description": "Determines whether the component is indented.", + "name": "indent", "default": "false", - "fieldName": "hideWeekNumbers", + "fieldName": "indent", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" } }, { - "description": "Defines the open or closed state of the popover.", - "name": "open", - "default": "false", - "fieldName": "open", + "description": "Defines the selection mode of the component.", + "name": "selection-mode", + "default": "\"None\"", + "fieldName": "selectionMode", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "text": "\"None\" | \"Single\" | \"Multiple\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Delete\"" } }, { - "description": "Defines the aria-label attribute for the component.", - "name": "accessible-name", + "description": "Defines the text that is displayed when the component contains no items.", + "name": "no-data-text", "default": "undefined", - "fieldName": "accessibleName", + "fieldName": "noDataText", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" } }, { - "description": "Receives id(or many ids) of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "description": "Defines the item separator style that is used.", + "name": "separators", + "default": "\"All\"", + "fieldName": "separators", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "text": "\"None\" | \"All\" | \"Inner\"" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "description": "Defines whether the component will have growing capability either by pressing a `More` button,\nor via user scroll. In both cases `load-more` event is fired.\n\n**Restrictions:** `growing=\"Scroll\"` is not supported for Internet Explorer,\non IE the component will fallback to `growing=\"Button\"`.", + "name": "growing", + "default": "\"None\"", + "fieldName": "growing", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "text": "\"None\" | \"Button\" | \"Scroll\"" } }, { - "description": "Receives id(or many ids) of the elements that describe the input.", - "name": "accessible-description-ref", + "description": "Defines the text that will be displayed inside the growing button.\n\n**Note:** If not specified a built-in text will be displayed.\n\n**Note:** This property takes effect if the `growing` property is set to the `Button`.", + "name": "growing-button-text", "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "fieldName": "growingButtonText", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" } }, { - "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", - "name": "primary-calendar-type", - "default": "undefined", - "fieldName": "primaryCalendarType", + "description": "Defines if the component would display a loading indicator over the list.", + "name": "loading", + "default": "false", + "fieldName": "loading", "type": { - "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "boolean" } }, { - "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", - "name": "secondary-calendar-type", - "default": "undefined", - "fieldName": "secondaryCalendarType", + "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", + "name": "loading-delay", + "default": "1000", + "fieldName": "loadingDelay", "type": { - "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "number" } }, { - "description": "Determines the format, displayed in the input field.", - "name": "format-pattern", + "description": "Defines the accessible name of the component.", + "name": "accessible-name", "default": "undefined", - "fieldName": "formatPattern", + "fieldName": "accessibleName", "type": { "text": "string | undefined" - }, - "deprecated": "Use displayFormat and valueFormat instead", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" } }, { - "description": "Determines the format, displayed in the input field.", - "name": "display-format", - "default": "undefined", - "fieldName": "displayFormat", + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`, `growingButton.description`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n- **description**: Defines the accessible ARIA description of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "ListAccessibilityAttributes" } }, { - "description": "Determines the format, used for the value attribute.", - "name": "value-format", + "description": "Defines the IDs of the elements that label the component.", + "name": "accessible-name-ref", "default": "undefined", - "fieldName": "valueFormat", + "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" } }, { - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", - "name": "min-date", - "default": "\"\"", - "fieldName": "minDate", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", "type": { - "text": "string" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "string | undefined" } }, { - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", - "name": "max-date", - "default": "\"\"", - "fieldName": "maxDate", + "description": "Defines the IDs of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", "type": { - "text": "string" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "string | undefined" } }, { - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", - "name": "calendar-week-numbering", - "default": "\"Default\"", - "fieldName": "calendarWeekNumbering", + "description": "Defines the accessible role of the component.", + "name": "accessible-role", + "default": "\"List\"", + "fieldName": "accessibleRole", "type": { - "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "\"List\" | \"Menu\" | \"Tree\" | \"ListBox\"" + } + }, + { + "description": "Returns an array containing the list item instances without the groups in a flat structure.", + "name": "list-items", + "default": "[]", + "fieldName": "listItems", + "type": { + "text": "any" } } ], "superclass": { - "name": "DatePicker", - "package": "@ui5/webcomponents", - "module": "dist/DatePicker.js" + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" }, - "tagName": "ui5-daterange-picker", + "tagName": "ui5-list", "customElement": true, - "_ui5since": "1.0.0-rc.8", - "_ui5privacy": "public", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "List", + "module": "dist/List.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-list", + "declaration": { + "name": "List", + "module": "dist/List.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/ListItem.js", + "declarations": [ + { + "kind": "class", + "description": "A class to serve as a base\nfor the `ListItemStandard` and `ListItemCustom` classes.", + "name": "ListItem", "slots": [ { - "name": "valueStateMessage", - "description": "Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.", - "_ui5since": "1.0.0-rc.7", + "name": "deleteButton", + "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.", + "_ui5since": "1.9.0", "_ui5type": { - "text": "Array<HTMLElement>" + "text": "Array<IButton>", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "_ui5privacy": "public" } ], - "events": [ + "members": [ { - "name": "change", - "_ui5privacy": "public", + "kind": "field", + "name": "type", "type": { - "text": "CustomEvent<DatePickerChangeEventDetail>", + "text": "ListItemType", "references": [ { - "name": "DatePickerChangeEventDetail", + "name": "ListItemType", "package": "@ui5/webcomponents", - "module": "dist/DatePicker.js" + "module": "dist/types/ListItemType.js" } ] }, - "description": "Fired when the input operation has finished by pressing Enter or on focusout.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "string" - }, - "name": "value", - "_ui5privacy": "public", - "description": "The submitted value." - }, - { - "type": { - "text": "boolean" - }, - "name": "valid", - "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." - } - ], - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "default": "\"Active\"", + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "privacy": "public" }, { - "name": "input", - "_ui5privacy": "public", + "kind": "field", + "name": "accessibilityAttributes", "type": { - "text": "CustomEvent<DatePickerInputEventDetail>", + "text": "ListItemAccessibilityAttributes", "references": [ { - "name": "DatePickerInputEventDetail", + "name": "ListItemAccessibilityAttributes", "package": "@ui5/webcomponents", - "module": "dist/DatePicker.js" + "module": "dist/ListItem.js" } ] }, - "description": "Fired when the value of the component is changed at each key stroke.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "string" - }, - "name": "value", - "_ui5privacy": "public", - "description": "The submitted value." - }, - { - "type": { - "text": "boolean" - }, - "name": "valid", - "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." - } - ], - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", + "privacy": "public", + "_ui5since": "1.15.0" }, { - "name": "value-state-change", - "_ui5privacy": "public", + "kind": "field", + "name": "navigated", "type": { - "text": "CustomEvent<DatePickerValueStateChangeEventDetail>", + "text": "boolean" + }, + "default": "false", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "privacy": "public", + "_ui5since": "1.10.0" + }, + { + "kind": "field", + "name": "tooltip", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.23.0" + }, + { + "kind": "field", + "name": "highlight", + "type": { + "text": "Highlight", "references": [ { - "name": "DatePickerValueStateChangeEventDetail", + "name": "Highlight", "package": "@ui5/webcomponents", - "module": "dist/DatePicker.js" + "module": "dist/types/Highlight.js" } ] }, - "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "string" - }, - "name": "valueState", - "_ui5privacy": "public", - "description": "The new `valueState` that will be set." - }, - { - "type": { - "text": "boolean" - }, - "name": "valid", - "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." - } - ], - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "default": "\"None\"", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "privacy": "public", + "_ui5since": "1.24" }, { - "name": "open", - "_ui5privacy": "public", + "kind": "field", + "name": "selected", "type": { - "text": "CustomEvent" + "text": "boolean" }, - "description": "Fired after the component's picker is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.4.0", + "default": "false", + "description": "Defines the selected state of the component.", + "privacy": "public", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItemBase", + "module": "dist/ListItemBase.js" } - }, + } + ], + "events": [ { - "name": "close", + "name": "detail-click", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired after the component's picker is closed.", + "description": "Fired when the user clicks on the detail button when type is `Detail`.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.4.0", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "_ui5Bubbles": true + } + ], + "attributes": [ + { + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "name": "type", + "default": "\"Active\"", + "fieldName": "type", + "type": { + "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" + } + }, + { + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "ListItemAccessibilityAttributes" + } + }, + { + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "name": "navigated", + "default": "false", + "fieldName": "navigated", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "highlight", + "default": "\"None\"", + "fieldName": "highlight", + "type": { + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + } + }, + { + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" } } - ] + ], + "superclass": { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + }, + "customElement": true, + "_ui5privacy": "public", + "_ui5abstract": true } ], "exports": [ @@ -11603,989 +12396,1131 @@ "kind": "js", "name": "default", "declaration": { - "name": "DateRangePicker", - "module": "dist/DateRangePicker.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-daterange-picker", - "declaration": { - "name": "DateRangePicker", - "module": "dist/DateRangePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/DateTimeInput.js", - "declarations": [], + "path": "dist/ListItemBase.js", + "declarations": [ + { + "kind": "class", + "description": "A class to serve as a foundation\nfor the `ListItem` and `ListItemGroupHeader` classes.", + "name": "ListItemBase", + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "customElement": true, + "_ui5privacy": "public", + "_ui5abstract": true, + "members": [] + } + ], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "DateTimeInput", - "module": "dist/DateTimeInput.js" + "name": "ListItemBase", + "module": "dist/ListItemBase.js" } } ] }, { "kind": "javascript-module", - "path": "dist/DateTimePicker.js", + "path": "dist/ListItemCustom.js", "declarations": [ { "kind": "class", - "description": "### Overview\nThe `DateTimePicker` component alows users to select both date (day, month and year) and time (hours, minutes and seconds)\nand for the purpose it consists of input field and Date/Time picker.\n\n### Usage\n\nUse the `DateTimePicker` if you need a combined date and time input component.\nDon't use it if you want to use either date, or time value.\nIn this case, use the `DatePicker` or the `TimePicker` components instead.\n\nThe user can set date/time by:\n\n- using the calendar and the time selectors\n- typing in the input field\n\nProgrammatically, to set date/time for the `DateTimePicker`, use the `value` property\n\n### Formatting\n\nThe value entered by typing into the input field must fit to the used date/time format.\n\nSupported format options are pattern-based on Unicode LDML Date Format notation.\nFor more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\n**Example:** the following format `dd/MM/yyyy, hh:mm:ss aa`\ncorresponds the `13/04/2020, 03:16:16 AM` value.\n\nThe small 'h' defines \"12\" hours format and the \"aa\" symbols - \"AM/PM\" time periods.\n\n**Example:** the following format `dd/MM/yyyy, HH:mm:ss`\ncorresponds the `13/04/2020, 15:16:16` value.\n\nThe capital 'H' indicates \"24\" hours format.\n\n**Note:** If the `formatPattern` does NOT include time,\nthe `DateTimePicker` will fallback to the default time format according to the locale.\n\n**Note:** If no placeholder is set to the `DateTimePicker`,\nthe current `formatPattern` is displayed as a placeholder.\nIf another placeholder is needed, it must be set or in case no placeholder is needed - it can be set to an empty string.\n\n**Note:** If the user input does NOT match the `formatPattern`,\nthe `DateTimePicker` makes an attempt to parse it based on the\nlocale settings.\n\n### Responsive behavior\n\nThe `DateTimePicker` is responsive and fully adapts to all devices.\nFor larger screens, such as tablet or desktop, it is displayed as a popover, while\non phone devices, it is displayed full screen.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DateTimePicker.js\";`", - "name": "DateTimePicker", - "members": [ + "description": "A component to be used as custom list item within the `ui5-list`\nthe same way as the standard `ui5-li`.\n\nThe component accepts arbitrary HTML content to allow full customization.", + "name": "ListItemCustom", + "cssParts": [ { - "kind": "field", - "name": "value", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "Defines a formatted date value.", - "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change,input", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "description": "Used to style the main li tag of the list item", + "name": "native-li" + }, + { + "description": "Used to style the content area of the list item", + "name": "content" + }, + { + "description": "Used to style the button rendered when the list item is of type detail", + "name": "detail-button" + }, + { + "description": "Used to style the button rendered when the list item is in delete mode", + "name": "delete-button" + }, + { + "description": "Used to style the radio button rendered when the list item is in single selection mode", + "name": "radio" + }, + { + "description": "Used to style the checkbox rendered when the list item is in multiple selection mode", + "name": "checkbox" + } + ], + "slots": [ + { + "description": "Defines the content of the component.", + "name": "default", + "_ui5privacy": "public", + "_ui5type": { + "text": "Array<Node>" } }, { - "kind": "field", - "name": "valueState", - "type": { - "text": "ValueState", + "name": "deleteButton", + "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.", + "_ui5since": "1.9.0", + "_ui5type": { + "text": "Array<IButton>", "references": [ { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" } ] }, - "default": "\"None\"", - "description": "Defines the value state of the component.", - "privacy": "public", + "_ui5privacy": "public", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } - }, + } + ], + "members": [ { "kind": "field", - "name": "required", + "name": "movable", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is required.", + "description": "Defines whether the item is movable.", "privacy": "public", - "_ui5since": "1.0.0-rc.9", + "_ui5since": "2.0.0", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItemBase", + "module": "dist/ListItemBase.js" } }, { "kind": "field", - "name": "disabled", + "name": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Determines whether the component is displayed as disabled.", + "description": "Defines the text alternative of the component.\n\n**Note**: If not provided a default text alternative will be set, if present.", + "default": "undefined", "privacy": "public", + "_ui5since": "1.0.0-rc.15", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { "kind": "field", - "name": "readonly", + "name": "type", "type": { - "text": "boolean" + "text": "ListItemType", + "references": [ + { + "name": "ListItemType", + "package": "@ui5/webcomponents", + "module": "dist/types/ListItemType.js" + } + ] }, - "default": "false", - "description": "Determines whether the component is displayed as read-only.", + "default": "\"Active\"", + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", "privacy": "public", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { "kind": "field", - "name": "placeholder", + "name": "accessibilityAttributes", "type": { - "text": "string | undefined" + "text": "ListItemAccessibilityAttributes", + "references": [ + { + "name": "ListItemAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/ListItem.js" + } + ] }, - "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", - "default": "undefined", + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", "privacy": "public", + "_ui5since": "1.15.0", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { "kind": "field", - "name": "name", + "name": "navigated", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "default": "undefined", + "default": "false", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", "privacy": "public", + "_ui5since": "1.10.0", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { "kind": "field", - "name": "hideWeekNumbers", + "name": "tooltip", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines the visibility of the week numbers column.\n\n**Note:** For calendars other than Gregorian,\nthe week numbers are not displayed regardless of what is set.", + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.8", + "_ui5since": "1.23.0", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { "kind": "field", - "name": "open", + "name": "highlight", "type": { - "text": "boolean" + "text": "Highlight", + "references": [ + { + "name": "Highlight", + "package": "@ui5/webcomponents", + "module": "dist/types/Highlight.js" + } + ] }, - "default": "false", - "description": "Defines the open or closed state of the popover.", + "default": "\"None\"", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", "privacy": "public", - "_ui5since": "2.0.0", + "_ui5since": "1.24", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { "kind": "field", - "name": "accessibleName", + "name": "selected", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the aria-label attribute for the component.", - "default": "undefined", + "default": "false", + "description": "Defines the selected state of the component.", "privacy": "public", - "_ui5since": "1.0.0-rc.15", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItemBase", + "module": "dist/ListItemBase.js" } - }, + } + ], + "attributes": [ { - "kind": "field", - "name": "accessibleNameRef", + "description": "Defines whether the item is movable.", + "name": "movable", + "default": "false", + "fieldName": "movable", "type": { - "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that label the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "text": "boolean" } }, { - "kind": "field", - "name": "accessibleDescription", + "description": "Defines the text alternative of the component.\n\n**Note**: If not provided a default text alternative will be set, if present.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { "text": "string | undefined" - }, - "description": "Defines the accessible description of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" } }, { - "kind": "field", - "name": "accessibleDescriptionRef", + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "name": "type", + "default": "\"Active\"", + "fieldName": "type", "type": { - "text": "string | undefined" + "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" }, - "description": "Receives id(or many ids) of the elements that describe the input.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "kind": "method", - "name": "isValid", - "return": { - "type": { - "text": "boolean" - } + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "ListItemAccessibilityAttributes" }, - "parameters": [ - { - "name": "value", - "type": { - "text": "string" - }, - "description": "A value to be tested against the current date format", - "_ui5privacy": "public" - } - ], - "description": "Checks if a value is valid against the current date format of the DatePicker.", - "privacy": "public", - "deprecated": "Use isValidValue or isValidDisplayValue instead", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "kind": "method", - "name": "isValidValue", - "return": { - "type": { - "text": "boolean" - } + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "name": "navigated", + "default": "false", + "fieldName": "navigated", + "type": { + "text": "boolean" }, - "parameters": [ - { - "name": "value", - "type": { - "text": "string" - }, - "description": "A value to be tested against the current date format", - "_ui5privacy": "public" - } - ], - "description": "Checks if a value is valid against the current date format of the DatePicker.", - "privacy": "public", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "kind": "method", - "name": "isValidDisplayValue", - "return": { - "type": { - "text": "boolean" - } + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" }, - "parameters": [ - { - "name": "value", - "type": { - "text": "string" - }, - "description": "A value to be tested against the current date format", - "_ui5privacy": "public" - } - ], - "description": "Checks if a value is valid against the current date format of the DatePicker.", - "privacy": "public", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "kind": "method", - "name": "isInValidRange", - "return": { - "type": { - "text": "boolean" - } + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "highlight", + "default": "\"None\"", + "fieldName": "highlight", + "type": { + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" }, - "parameters": [ - { - "name": "value", - "type": { - "text": "string" - }, - "description": "A value to be checked", - "_ui5privacy": "public" - } - ], - "description": "Checks if a date is between the minimum and maximum date.", - "privacy": "public", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "kind": "method", - "name": "formatValue", - "return": { - "type": { - "text": "string" - }, - "description": "The date as string" + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" }, - "parameters": [ - { - "name": "date", - "type": { - "text": "Date" - }, - "description": "A Java Script date object to be formatted as string", - "_ui5privacy": "public" - } - ], - "description": "Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance", - "privacy": "public", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } - }, + } + ], + "superclass": { + "name": "ListItem", + "package": "@ui5/webcomponents", + "module": "dist/ListItem.js" + }, + "tagName": "ui5-li-custom", + "customElement": true, + "_ui5privacy": "public", + "events": [ { - "kind": "field", - "name": "dateValue", + "name": "detail-click", + "_ui5privacy": "public", "type": { - "text": "Date | null" + "text": "CustomEvent" }, - "description": "Currently selected date represented as a Local JavaScript Date instance.", - "privacy": "public", - "default": "null", - "readonly": true, + "description": "Fired when the user clicks on the detail button when type is `Detail`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } - }, + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ListItemCustom", + "module": "dist/ListItemCustom.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-li-custom", + "declaration": { + "name": "ListItemCustom", + "module": "dist/ListItemCustom.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/ListItemGroup.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\nThe `ui5-li-group` is a special list item, used only to create groups of list items.\n\nThis is the item to use inside a `ui5-list`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/ListItemGroup.js\";`", + "name": "ListItemGroup", + "cssParts": [ { - "kind": "field", - "name": "primaryCalendarType", - "type": { - "text": "CalendarType | undefined", + "description": "Used to style the header item of the group", + "name": "header" + } + ], + "slots": [ + { + "name": "default", + "description": "Defines the items of the <code>ui5-li-group</code>.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<ListItemBase>", "references": [ { - "name": "CalendarType", - "package": "@ui5/webcomponents-base", - "module": "dist/types/CalendarType.js" + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" } ] }, - "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", - "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "_ui5privacy": "public" }, { - "kind": "field", - "name": "secondaryCalendarType", - "type": { - "text": "CalendarType | undefined", + "name": "header", + "description": "Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.", + "_ui5type": { + "text": "Array<ListItemBase>", "references": [ { - "name": "CalendarType", - "package": "@ui5/webcomponents-base", - "module": "dist/types/CalendarType.js" + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" } ] }, - "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.16", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, - { - "kind": "field", - "name": "formatPattern", - "type": { - "text": "string | undefined" - }, - "description": "Determines the format, displayed in the input field.", - "default": "undefined", - "deprecated": "Use displayFormat and valueFormat instead", - "privacy": "public", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "name": "displayFormat", + "name": "headerText", "type": { "text": "string | undefined" }, - "description": "Determines the format, displayed in the input field.", - "default": "undefined", + "description": "Defines the header text of the <code>ui5-li-group</code>.", "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "default": "undefined" }, { "kind": "field", - "name": "valueFormat", + "name": "headerAccessibleName", "type": { "text": "string | undefined" }, - "description": "Determines the format, used for the value attribute.", - "default": "undefined", + "description": "Defines the accessible name of the header.", "privacy": "public", - "_ui5since": "2.14.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "default": "undefined" }, { "kind": "field", - "name": "minDate", + "name": "wrappingType", "type": { - "text": "string" + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] }, - "default": "\"\"", - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", + "default": "\"None\"", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", "privacy": "public", - "_ui5since": "1.0.0-rc.6", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } - }, + "_ui5since": "2.15.0" + } + ], + "events": [ { - "kind": "field", - "name": "maxDate", + "name": "move-over", + "_ui5privacy": "public", "type": { - "text": "string" + "text": "CustomEvent<ListItemGroupMoveEventDetail>", + "references": [ + { + "name": "ListItemGroupMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + } + ] }, - "default": "\"\"", - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", - "privacy": "public", - "_ui5since": "1.0.0-rc.6", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.1.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + } + ] }, { - "kind": "field", - "name": "calendarWeekNumbering", + "name": "move", + "_ui5privacy": "public", "type": { - "text": "CalendarWeekNumbering", + "text": "CustomEvent<ListItemGroupMoveEventDetail>", "references": [ { - "name": "CalendarWeekNumbering", + "name": "ListItemGroupMoveEventDetail", "package": "@ui5/webcomponents", - "module": "dist/types/CalendarWeekNumbering.js" + "module": "dist/ListItemGroup.js" } ] }, - "default": "\"Default\"", - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", - "privacy": "public", - "_ui5since": "2.2.0", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" - } + "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.1.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + } + ] + } + ], + "attributes": [ + { + "description": "Defines the header text of the <code>ui5-li-group</code>.", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the accessible name of the header.", + "name": "header-accessible-name", + "default": "undefined", + "fieldName": "headerAccessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "name": "wrapping-type", + "default": "\"None\"", + "fieldName": "wrappingType", + "type": { + "text": "\"None\" | \"Normal\"" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-li-group", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-li-group", + "declaration": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/ListItemGroupHeader.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ListItemGroupHeader", + "module": "dist/ListItemGroupHeader.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/ListItemStandard.js", + "declarations": [ + { + "kind": "class", + "description": "The `ui5-li` represents the simplest type of item for a `ui5-list`.\n\nThis is a list item,\nproviding the most common use cases such as `text`,\n`image` and `icon`.", + "name": "ListItemStandard", + "cssParts": [ + { + "description": "Used to style the title of the list item", + "name": "title" + }, + { + "description": "Used to style the description of the list item", + "name": "description" + }, + { + "description": "Used to style the additionalText of the list item", + "name": "additional-text" + }, + { + "description": "Used to style the icon of the list item", + "name": "icon" + }, + { + "description": "Used to style the main li tag of the list item", + "name": "native-li" + }, + { + "description": "Used to style the content area of the list item", + "name": "content" + }, + { + "description": "Used to style the button rendered when the list item is of type detail", + "name": "detail-button" + }, + { + "description": "Used to style the button rendered when the list item is in delete mode", + "name": "delete-button" + }, + { + "description": "Used to style the radio button rendered when the list item is in single selection mode", + "name": "radio" + }, + { + "description": "Used to style the checkbox rendered when the list item is in multiple selection mode", + "name": "checkbox" } ], - "superclass": { - "name": "DatePicker", - "package": "@ui5/webcomponents", - "module": "dist/DatePicker.js" - }, - "tagName": "ui5-datetime-picker", - "customElement": true, - "_ui5since": "1.0.0-rc.7", - "_ui5privacy": "public", "slots": [ { - "name": "valueStateMessage", - "description": "Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.", - "_ui5since": "1.0.0-rc.7", + "name": "default", + "description": "Defines the custom formatted text of the component.\n\n**Note:** For optimal text wrapping and a consistent layout, it is strongly recommended to use the `text` property.\n\nUse the `default` slot only when custom formatting with HTML elements (e.g., `<b>`, `<i>`) is required.\nBe aware that wrapping (via `wrappingType=\"Normal\"`) may not function correctly with custom HTML content in the `default` slot.\n\nIf both `text` and `default` slot are used, the `text` property takes precedence.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<Node>" + }, + "_ui5privacy": "public" + }, + { + "name": "image", + "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with it's default size - S.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-li` should be customized in order to fit.", + "_ui5since": "2.0.0", "_ui5type": { "text": "Array<HTMLElement>" }, + "_ui5privacy": "public" + }, + { + "name": "deleteButton", + "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.", + "_ui5since": "1.9.0", + "_ui5type": { + "text": "Array<IButton>", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, "_ui5privacy": "public", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } } ], - "attributes": [ + "members": [ { - "description": "Defines a formatted date value.", - "name": "value", - "default": "\"\"", - "fieldName": "value", + "kind": "field", + "name": "text", "type": { - "text": "string" + "text": "string | undefined" }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "description": "Defines the text of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.10.0" }, { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", + "kind": "field", + "name": "description", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "string | undefined" }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "description": "Defines the description displayed right under the item text, if such is present.", + "default": "undefined", + "privacy": "public", + "_ui5since": "0.8.0" }, { - "description": "Defines whether the component is required.", - "name": "required", - "default": "false", - "fieldName": "required", + "kind": "field", + "name": "icon", "type": { - "text": "boolean" + "text": "string | undefined" }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "description": "Defines the `icon` source URI.\n\n**Note:**\nSAP-icons font provides numerous built-in icons. To find all the available icons, see the\n[Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", + "privacy": "public" }, { - "description": "Determines whether the component is displayed as disabled.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", + "kind": "field", + "name": "iconEnd", "type": { "text": "boolean" }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } - }, - { - "description": "Determines whether the component is displayed as read-only.", - "name": "readonly", "default": "false", - "fieldName": "readonly", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "description": "Defines whether the `icon` should be displayed in the beginning of the list item or in the end.", + "privacy": "public" }, { - "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", - "name": "placeholder", - "default": "undefined", - "fieldName": "placeholder", + "kind": "field", + "name": "additionalText", "type": { "text": "string | undefined" }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "description": "Defines the `additionalText`, displayed in the end of the list item.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", - "default": "undefined", - "fieldName": "name", + "kind": "field", + "name": "additionalTextState", "type": { - "text": "string | undefined" + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "default": "\"None\"", + "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { - "description": "Defines the visibility of the week numbers column.\n\n**Note:** For calendars other than Gregorian,\nthe week numbers are not displayed regardless of what is set.", - "name": "hide-week-numbers", - "default": "false", - "fieldName": "hideWeekNumbers", + "kind": "field", + "name": "movable", "type": { "text": "boolean" }, + "default": "false", + "description": "Defines whether the item is movable.", + "privacy": "public", + "_ui5since": "2.0.0", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItemBase", + "module": "dist/ListItemBase.js" } }, { - "description": "Defines the open or closed state of the popover.", - "name": "open", - "default": "false", - "fieldName": "open", + "kind": "field", + "name": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" }, + "description": "Defines the text alternative of the component.\nNote: If not provided a default text alternative will be set, if present.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "description": "Defines the aria-label attribute for the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "kind": "field", + "name": "wrappingType", "type": { - "text": "string | undefined" + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] }, - "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" - } + "default": "\"None\"", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "privacy": "public", + "_ui5since": "2.10.0" }, { - "description": "Receives id(or many ids) of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "kind": "field", + "name": "type", "type": { - "text": "string | undefined" + "text": "ListItemType", + "references": [ + { + "name": "ListItemType", + "package": "@ui5/webcomponents", + "module": "dist/types/ListItemType.js" + } + ] }, + "default": "\"Active\"", + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "privacy": "public", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "kind": "field", + "name": "accessibilityAttributes", "type": { - "text": "string | undefined" + "text": "ListItemAccessibilityAttributes", + "references": [ + { + "name": "ListItemAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/ListItem.js" + } + ] }, + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", + "privacy": "public", + "_ui5since": "1.15.0", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "description": "Receives id(or many ids) of the elements that describe the input.", - "name": "accessible-description-ref", - "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "kind": "field", + "name": "navigated", "type": { - "text": "string | undefined" + "text": "boolean" }, + "default": "false", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "privacy": "public", + "_ui5since": "1.10.0", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "description": "Currently selected date represented as a Local JavaScript Date instance.", - "name": "date-value", - "default": "null", - "fieldName": "dateValue", + "kind": "field", + "name": "tooltip", "type": { - "text": "any" + "text": "string | undefined" }, + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.23.0", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", - "name": "primary-calendar-type", - "default": "undefined", - "fieldName": "primaryCalendarType", + "kind": "field", + "name": "highlight", "type": { - "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + "text": "Highlight", + "references": [ + { + "name": "Highlight", + "package": "@ui5/webcomponents", + "module": "dist/types/Highlight.js" + } + ] }, + "default": "\"None\"", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "privacy": "public", + "_ui5since": "1.24", "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.", - "name": "secondary-calendar-type", - "default": "undefined", - "fieldName": "secondaryCalendarType", + "kind": "field", + "name": "selected", "type": { - "text": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined" + "text": "boolean" }, + "default": "false", + "description": "Defines the selected state of the component.", + "privacy": "public", "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "name": "ListItemBase", + "module": "dist/ListItemBase.js" } - }, + } + ], + "attributes": [ { - "description": "Determines the format, displayed in the input field.", - "name": "format-pattern", + "description": "Defines the text of the component.", + "name": "text", "default": "undefined", - "fieldName": "formatPattern", + "fieldName": "text", "type": { "text": "string | undefined" - }, - "deprecated": "Use displayFormat and valueFormat instead", - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" } }, { - "description": "Determines the format, displayed in the input field.", - "name": "display-format", + "description": "Defines the description displayed right under the item text, if such is present.", + "name": "description", "default": "undefined", - "fieldName": "displayFormat", + "fieldName": "description", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" } }, { - "description": "Determines the format, used for the value attribute.", - "name": "value-format", + "description": "Defines the `icon` source URI.\n\n**Note:**\nSAP-icons font provides numerous built-in icons. To find all the available icons, see the\n[Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", "default": "undefined", - "fieldName": "valueFormat", + "fieldName": "icon", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" } }, { - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", - "name": "min-date", - "default": "\"\"", - "fieldName": "minDate", + "description": "Defines whether the `icon` should be displayed in the beginning of the list item or in the end.", + "name": "icon-end", + "default": "false", + "fieldName": "iconEnd", "type": { - "text": "string" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "boolean" } }, { - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", - "name": "max-date", - "default": "\"\"", - "fieldName": "maxDate", + "description": "Defines the `additionalText`, displayed in the end of the list item.", + "name": "additional-text", + "default": "undefined", + "fieldName": "additionalText", "type": { - "text": "string" - }, - "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "text": "string | undefined" } }, { - "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.", - "name": "calendar-week-numbering", - "default": "\"Default\"", - "fieldName": "calendarWeekNumbering", + "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "additional-text-state", + "default": "\"None\"", + "fieldName": "additionalTextState", "type": { - "text": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"" - }, + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + } + }, + { + "description": "Defines whether the item is movable.", + "name": "movable", + "default": "false", + "fieldName": "movable", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the text alternative of the component.\nNote: If not provided a default text alternative will be set, if present.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "name": "wrapping-type", + "default": "\"None\"", + "fieldName": "wrappingType", + "type": { + "text": "\"None\" | \"Normal\"" + } + }, + { + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "name": "type", + "default": "\"Active\"", + "fieldName": "type", + "type": { + "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" + }, "inheritedFrom": { - "name": "DateComponentBase", - "module": "dist/DateComponentBase.js" + "name": "ListItem", + "module": "dist/ListItem.js" } - } - ], - "events": [ + }, { - "name": "change", - "_ui5privacy": "public", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "CustomEvent<DatePickerChangeEventDetail>", - "references": [ - { - "name": "DatePickerChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/DatePicker.js" - } - ] + "text": "ListItemAccessibilityAttributes" }, - "description": "Fired when the input operation has finished by pressing Enter or on focusout.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "string" - }, - "name": "value", - "_ui5privacy": "public", - "description": "The submitted value." - }, - { - "type": { - "text": "boolean" - }, - "name": "valid", - "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." - } - ], "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "name": "input", - "_ui5privacy": "public", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "name": "navigated", + "default": "false", + "fieldName": "navigated", "type": { - "text": "CustomEvent<DatePickerInputEventDetail>", - "references": [ - { - "name": "DatePickerInputEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/DatePicker.js" - } - ] + "text": "boolean" }, - "description": "Fired when the value of the component is changed at each key stroke.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "string" - }, - "name": "value", - "_ui5privacy": "public", - "description": "The submitted value." - }, - { - "type": { - "text": "boolean" - }, - "name": "valid", - "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." - } - ], "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "name": "value-state-change", - "_ui5privacy": "public", + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", "type": { - "text": "CustomEvent<DatePickerValueStateChangeEventDetail>", - "references": [ - { - "name": "DatePickerValueStateChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/DatePicker.js" - } - ] + "text": "string | undefined" }, - "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "string" - }, - "name": "valueState", - "_ui5privacy": "public", - "description": "The new `valueState` that will be set." - }, - { - "type": { - "text": "boolean" - }, - "name": "valid", - "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." - } - ], "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "name": "open", - "_ui5privacy": "public", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "highlight", + "default": "\"None\"", + "fieldName": "highlight", "type": { - "text": "CustomEvent" + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" }, - "description": "Fired after the component's picker is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.4.0", "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "name": "close", + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + } + ], + "superclass": { + "name": "ListItem", + "package": "@ui5/webcomponents", + "module": "dist/ListItem.js" + }, + "tagName": "ui5-li", + "customElement": true, + "_ui5privacy": "public", + "events": [ + { + "name": "detail-click", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired after the component's picker is closed.", + "description": "Fired when the user clicks on the detail button when type is `Detail`.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.4.0", + "_ui5Bubbles": true, "inheritedFrom": { - "name": "DatePicker", - "module": "dist/DatePicker.js" + "name": "ListItem", + "module": "dist/ListItem.js" } } ] @@ -12596,86 +13531,50 @@ "kind": "js", "name": "default", "declaration": { - "name": "DateTimePicker", - "module": "dist/DateTimePicker.js" + "name": "ListItemStandard", + "module": "dist/ListItemStandard.js" } }, { "kind": "custom-element-definition", - "name": "ui5-datetime-picker", - "declaration": { - "name": "DateTimePicker", - "module": "dist/DateTimePicker.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/DayPicker.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", + "name": "ui5-li", "declaration": { - "name": "DayPicker", - "module": "dist/DayPicker.js" + "name": "ListItemStandard", + "module": "dist/ListItemStandard.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Dialog.js", + "path": "dist/Menu.js", "declarations": [ + { + "kind": "interface", + "name": "IMenuItem", + "description": "Interface for components that may be slotted inside a `ui5-menu`.\n\n**Note:** Use with `ui5-menu-item` or `ui5-menu-separator`. Implementing the interface does not guarantee that any other classes can work with the `ui5-menu`.", + "_ui5privacy": "public" + }, { "kind": "class", - "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`", - "name": "Dialog", - "cssParts": [ - { - "description": "Used to style the header of the component", - "name": "header" - }, - { - "description": "Used to style the content of the component", - "name": "content" - }, - { - "description": "Used to style the footer of the component", - "name": "footer" - } - ], + "description": "### Overview\n\n`ui5-menu` component represents a hierarchical menu structure.\n\n### Structure\n\nThe `ui5-menu` can hold two types of entities:\n\n- `ui5-menu-item` components\n- `ui5-menu-separator` - used to separate menu items with a line\n\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Keyboard Handling\n\nThe `ui5-menu` provides advanced keyboard handling.\nThe user can use the following keyboard shortcuts in order to navigate trough the tree:\n\n- `Arrow Up` / `Arrow Down` - Navigates up and down the menu items that are currently visible.\n- `Arrow Right`, `Space` or `Enter` - Opens a sub-menu if there are menu items nested\nin the currently clicked menu item.\n- `Arrow Left` or `Escape` - Closes the currently opened sub-menu.\n\nwhen there is `endContent` :\n- `Arrow Left` or `ArrowRight` - Navigate between the menu item actions and the menu item itself\n- `Arrow Up` / `Arrow Down` - Navigates up and down the currently visible menu items\n\n**Note:** If the text direction is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.\n\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\nhave the correct accessibility behaviour, including their enabled or disabled states.\nThe menu does not manage these aspects when the menu item state changes.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Menu.js\";`", + "name": "Menu", "slots": [ - { - "name": "header", - "description": "Defines the header HTML Element.\n\n**Note:** When a `ui5-bar` is used in the header, you should remove the default dialog's paddings.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - }, - { - "name": "footer", - "description": "Defines the footer HTML Element.\n\n**Note:** When a `ui5-bar` is used in the footer, you should remove the default dialog's paddings.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - }, { "name": "default", - "description": "Defines the content of the Popup.", - "_ui5propertyName": "content", + "description": "Defines the items of this component.\n\n**Note:** Use `ui5-menu-item` and `ui5-menu-separator` for their intended design.", + "_ui5propertyName": "items", "_ui5type": { - "text": "Array<HTMLElement>" + "text": "Array<IMenuItem>", + "references": [ + { + "name": "IMenuItem", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" + } + ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5privacy": "public" } ], "members": [ @@ -12685,221 +13584,213 @@ "type": { "text": "string | undefined" }, - "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", + "description": "Defines the header text of the menu (displayed on mobile).", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "stretch", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Determines if the dialog will be stretched to full screen on mobile. On desktop,\nthe dialog will be stretched to approximately 90% of the viewport.\n\n**Note:** For better usability of the component it is recommended to set this property to \"true\" when the dialog is opened on phone.", - "privacy": "public" - }, - { - "kind": "field", - "name": "draggable", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Determines whether the component is draggable.\nIf this property is set to true, the Dialog will be draggable by its header.\n\n**Note:** The component can be draggable only in desktop mode.\n\n**Note:** This property overrides the default HTML \"draggable\" attribute native behavior.\nWhen \"draggable\" is set to true, the native browser \"draggable\"\nbehavior is prevented and only the Dialog custom logic (\"draggable by its header\") works.", - "privacy": "public", - "_ui5since": "1.0.0-rc.9" - }, - { - "kind": "field", - "name": "resizable", + "name": "open", "type": { "text": "boolean" }, "default": "false", - "description": "Configures the component to be resizable.\nIf this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages.\nIn RTL languages, the resize handle will be placed in the bottom left corner.\n\n**Note:** The component can be resizable only in desktop mode.\n\n**Note:** Upon resizing, externally defined height and width styling will be ignored.", + "description": "Indicates if the menu is open.", "privacy": "public", - "_ui5since": "1.0.0-rc.10" + "_ui5since": "1.10.0" }, { "kind": "field", - "name": "state", + "name": "placement", "type": { - "text": "ValueState", + "text": "PopoverPlacement", "references": [ { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" + "name": "PopoverPlacement", + "package": "@ui5/webcomponents", + "module": "dist/types/PopoverPlacement.js" } ] }, - "default": "\"None\"", - "description": "Defines the state of the `Dialog`.\n\n**Note:** If `\"Negative\"` and `\"Critical\"` states is set, it will change the\naccessibility role to \"alertdialog\", if the accessibleRole property is set to `\"Dialog\"`.", + "default": "\"Bottom\"", + "description": "Determines on which side the component is placed at.", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "2.16.0" }, { "kind": "field", - "name": "initialFocus", + "name": "horizontalAlign", "type": { - "text": "string | undefined" + "text": "PopoverHorizontalAlign", + "references": [ + { + "name": "PopoverHorizontalAlign", + "package": "@ui5/webcomponents", + "module": "dist/types/PopoverHorizontalAlign.js" + } + ] }, - "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", - "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "default": "\"Start\"", + "description": "Determines the horizontal alignment of the menu relative to its opener control.", + "privacy": "public" }, { "kind": "field", - "name": "preventFocusRestore", + "name": "loading", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", + "description": "Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.", "privacy": "public", - "_ui5since": "1.0.0-rc.8", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5since": "1.13.0" }, { "kind": "field", - "name": "accessibleName", + "name": "loadingDelay", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Defines the accessible name of the component.", - "default": "undefined", + "default": "1000", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.", "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5since": "1.13.0" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "opener", "type": { - "text": "string | undefined" + "text": "HTMLElement | string | null | undefined" }, - "description": "Defines the IDs of the elements that label the component.", - "default": "undefined", + "description": "Defines the ID or DOM Reference of the element at which the menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", "privacy": "public", - "_ui5since": "1.1.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, + "default": "undefined", + "_ui5since": "1.10.0" + } + ], + "events": [ { - "kind": "field", - "name": "accessibleRole", + "name": "item-click", + "_ui5privacy": "public", "type": { - "text": "PopupAccessibleRole", + "text": "CustomEvent<MenuItemClickEventDetail>", "references": [ { - "name": "PopupAccessibleRole", + "name": "MenuItemClickEventDetail", "package": "@ui5/webcomponents", - "module": "dist/types/PopupAccessibleRole.js" + "module": "dist/Menu.js" } ] }, - "default": "\"Dialog\"", - "description": "Allows setting a custom role.", - "privacy": "public", - "_ui5since": "1.10.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "description": "Fired when an item is being clicked.\n\n**Note:** Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "The currently clicked menu item." + }, + { + "type": { + "text": "string" + }, + "name": "text", + "_ui5privacy": "public", + "description": "The text of the currently clicked menu item." + } + ] }, { - "kind": "field", - "name": "accessibleDescription", + "name": "before-open", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent<MenuBeforeOpenEventDetail>", + "references": [ + { + "name": "MenuBeforeOpenEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" + } + ] }, - "description": "Defines the accessible description of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.11.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "description": "Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "1.10.0", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "The `ui5-menu-item` that triggers opening of the sub-menu or undefined when fired upon root menu opening." + } + ] }, { - "kind": "field", - "name": "accessibleDescriptionRef", + "name": "open", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent" }, - "description": "Receives id(or many ids) of the elements that describe the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.11.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "description": "Fired after the menu is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.10.0" }, { - "kind": "field", - "name": "preventInitialFocus", + "name": "before-close", + "_ui5privacy": "public", "type": { - "text": "boolean" + "text": "CustomEvent<MenuBeforeCloseEventDetail>", + "references": [ + { + "name": "MenuBeforeCloseEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" + } + ] }, - "default": "false", - "description": "Indicates whether initial focus should be prevented.", - "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "1.10.0", + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "escPressed", + "_ui5privacy": "public", + "description": "Indicates that `ESC` key has triggered the event." + } + ] }, { - "kind": "field", - "name": "open", - "description": "Indicates if the element is open", - "privacy": "public", - "default": "false", + "name": "close", + "_ui5privacy": "public", "type": { - "text": "boolean" - }, - "_ui5since": "1.2.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, - { - "kind": "method", - "name": "applyFocus", - "return": { - "type": { - "text": "Promise<void>" - }, - "description": "Promise that resolves when the focus is applied" + "text": "CustomEvent" }, - "description": "Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.", - "privacy": "public", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "description": "Fired after the menu is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "1.10.0" } ], "attributes": [ { - "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", + "description": "Defines the header text of the menu (displayed on mobile).", "name": "header-text", "default": "undefined", "fieldName": "headerText", @@ -12908,182 +13799,378 @@ } }, { - "description": "Determines if the dialog will be stretched to full screen on mobile. On desktop,\nthe dialog will be stretched to approximately 90% of the viewport.\n\n**Note:** For better usability of the component it is recommended to set this property to \"true\" when the dialog is opened on phone.", - "name": "stretch", + "description": "Indicates if the menu is open.", + "name": "open", "default": "false", - "fieldName": "stretch", + "fieldName": "open", "type": { "text": "boolean" } }, { - "description": "Determines whether the component is draggable.\nIf this property is set to true, the Dialog will be draggable by its header.\n\n**Note:** The component can be draggable only in desktop mode.\n\n**Note:** This property overrides the default HTML \"draggable\" attribute native behavior.\nWhen \"draggable\" is set to true, the native browser \"draggable\"\nbehavior is prevented and only the Dialog custom logic (\"draggable by its header\") works.", - "name": "draggable", - "default": "false", - "fieldName": "draggable", + "description": "Determines on which side the component is placed at.", + "name": "placement", + "default": "\"Bottom\"", + "fieldName": "placement", "type": { - "text": "boolean" + "text": "\"Top\" | \"Bottom\" | \"Start\" | \"End\"" } }, { - "description": "Configures the component to be resizable.\nIf this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages.\nIn RTL languages, the resize handle will be placed in the bottom left corner.\n\n**Note:** The component can be resizable only in desktop mode.\n\n**Note:** Upon resizing, externally defined height and width styling will be ignored.", - "name": "resizable", + "description": "Determines the horizontal alignment of the menu relative to its opener control.", + "name": "horizontal-align", + "default": "\"Start\"", + "fieldName": "horizontalAlign", + "type": { + "text": "\"Start\" | \"End\" | \"Center\" | \"Stretch\"" + } + }, + { + "description": "Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.", + "name": "loading", "default": "false", - "fieldName": "resizable", + "fieldName": "loading", "type": { "text": "boolean" } }, { - "description": "Defines the state of the `Dialog`.\n\n**Note:** If `\"Negative\"` and `\"Critical\"` states is set, it will change the\naccessibility role to \"alertdialog\", if the accessibleRole property is set to `\"Dialog\"`.", - "name": "state", - "default": "\"None\"", - "fieldName": "state", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.", + "name": "loading-delay", + "default": "1000", + "fieldName": "loadingDelay", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "number" } }, { - "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", - "name": "initial-focus", + "description": "Defines the ID or DOM Reference of the element at which the menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", + "name": "opener", "default": "undefined", - "fieldName": "initialFocus", + "fieldName": "opener", "type": { - "text": "string | undefined" + "text": "string | HTMLElement | null | undefined" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-menu", + "customElement": true, + "_ui5since": "1.3.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Menu", + "module": "dist/Menu.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-menu", + "declaration": { + "name": "Menu", + "module": "dist/Menu.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/MenuItem.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\n`ui5-menu-item` is the item to use inside a `ui5-menu`.\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Usage\n\n`ui5-menu-item` represents a node in a `ui5-menu`. The menu itself is rendered as a list,\nand each `ui5-menu-item` is represented by a list item in that list. Therefore, you should only use\n`ui5-menu-item` directly in your apps. The `ui5-li` list item is internal for the list, and not intended for public use.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MenuItem.js\";`", + "name": "MenuItem", + "slots": [ + { + "name": "default", + "description": "Defines the items of this component.\n\n**Note:** The slot can hold menu item and menu separator items.\n\nIf there are items added to this slot, an arrow will be displayed at the end\nof the item in order to indicate that there are items added. In that case components added\nto `endContent` slot or `additionalText` content will not be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<IMenuItem>", + "references": [ + { + "name": "IMenuItem", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "endContent", + "description": "Defines the components that should be displayed at the end of the menu item.\n\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\nnether `additionalText` nor components added to this slot would be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\nhave the correct accessibility behaviour, including their enabled or disabled states.\nThe menu does not manage these aspects when the menu item state changes.", + "_ui5since": "2.0.0", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + }, + { + "name": "deleteButton", + "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.", + "_ui5since": "1.9.0", + "_ui5type": { + "text": "Array<IButton>", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] }, + "_ui5privacy": "public", "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "name": "ListItem", + "module": "dist/ListItem.js" } + } + ], + "members": [ + { + "kind": "field", + "name": "text", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text of the tree item.", + "default": "undefined", + "privacy": "public" }, { - "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", - "name": "prevent-focus-restore", - "default": "false", - "fieldName": "preventFocusRestore", + "kind": "field", + "name": "additionalText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the `additionalText`, displayed in the end of the menu item.\n\n**Note:** The additional text will not be displayed if there are items added in `items` slot or there are\ncomponents added to `endContent` slot.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.8.0" + }, + { + "kind": "field", + "name": "icon", + "type": { + "text": "string | undefined" + }, + "description": "Defines the icon to be displayed as graphical element within the component.\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).", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "disabled", "type": { "text": "boolean" }, + "default": "false", + "description": "Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.", + "privacy": "public", "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "name": "ListItemBase", + "module": "dist/ListItemBase.js" } }, { - "description": "Defines the accessible name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "kind": "field", + "name": "loading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.", + "privacy": "public", + "_ui5since": "1.13.0" + }, + { + "kind": "field", + "name": "loadingDelay", + "type": { + "text": "number" + }, + "default": "1000", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.", + "privacy": "public", + "_ui5since": "1.13.0" + }, + { + "kind": "field", + "name": "accessibleName", "type": { "text": "string | undefined" }, + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.7.0", "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "description": "Defines the IDs of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "kind": "field", + "name": "tooltip", "type": { "text": "string | undefined" }, + "description": "Defines the text of the tooltip for the menu item.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.23.0", "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "description": "Allows setting a custom role.", - "name": "accessible-role", - "default": "\"Dialog\"", - "fieldName": "accessibleRole", + "kind": "field", + "name": "checked", "type": { - "text": "\"None\" | \"Dialog\" | \"AlertDialog\"" + "text": "boolean" + }, + "default": "false", + "description": "Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.", + "privacy": "public", + "_ui5since": "2.12.0" + }, + { + "kind": "field", + "name": "accessibilityAttributes", + "type": { + "text": "MenuItemAccessibilityAttributes", + "references": [ + { + "name": "MenuItemAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/MenuItem.js" + } + ] }, + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item.\n\n- **role**: Defines the role of the menu item. If not set, menu item will have default role=\"menuitem\".", + "privacy": "public", + "_ui5since": "2.1.0", "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "kind": "field", + "name": "type", "type": { - "text": "string | undefined" + "text": "ListItemType", + "references": [ + { + "name": "ListItemType", + "package": "@ui5/webcomponents", + "module": "dist/types/ListItemType.js" + } + ] }, + "default": "\"Active\"", + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "privacy": "public", "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "description": "Receives id(or many ids) of the elements that describe the component.", - "name": "accessible-description-ref", - "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "kind": "field", + "name": "navigated", "type": { - "text": "string | undefined" + "text": "boolean" }, + "default": "false", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "privacy": "public", + "_ui5since": "1.10.0", "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "description": "Indicates whether initial focus should be prevented.", - "name": "prevent-initial-focus", - "default": "false", - "fieldName": "preventInitialFocus", + "kind": "field", + "name": "highlight", "type": { - "text": "boolean" + "text": "Highlight", + "references": [ + { + "name": "Highlight", + "package": "@ui5/webcomponents", + "module": "dist/types/Highlight.js" + } + ] }, + "default": "\"None\"", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "privacy": "public", + "_ui5since": "1.24", "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "description": "Indicates if the element is open", - "name": "open", - "default": "false", - "fieldName": "open", + "kind": "field", + "name": "selected", "type": { - "text": "any" + "text": "boolean" }, + "default": "false", + "description": "Defines the selected state of the component.", + "privacy": "public", "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "name": "ListItemBase", + "module": "dist/ListItemBase.js" } } ], - "superclass": { - "name": "Popup", - "package": "@ui5/webcomponents", - "module": "dist/Popup.js" - }, - "tagName": "ui5-dialog", - "customElement": true, - "_ui5privacy": "public", "events": [ { "name": "before-open", "_ui5privacy": "public", "type": { - "text": "CustomEvent" + "text": "CustomEvent<MenuBeforeOpenEventDetail>", + "references": [ + { + "name": "MenuBeforeOpenEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/MenuItem.js" + } + ] }, - "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.", + "description": "Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, "_ui5Bubbles": false, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5since": "1.10.0", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "The menu item that triggers opening of the sub-menu or undefined when fired upon root menu opening." + } + ] }, { "name": "open", @@ -13091,32 +14178,29 @@ "type": { "text": "CustomEvent" }, - "description": "Fired after the component is opened.", + "description": "Fired after the menu is opened.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5Bubbles": false }, { "name": "before-close", "_ui5privacy": "public", "type": { - "text": "CustomEvent<PopupBeforeCloseEventDetail>", + "text": "CustomEvent<MenuBeforeCloseEventDetail>", "references": [ { - "name": "PopupBeforeCloseEventDetail", + "name": "MenuBeforeCloseEventDetail", "package": "@ui5/webcomponents", - "module": "dist/Popup.js" + "module": "dist/MenuItem.js" } ] }, - "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.", + "description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, "_ui5Bubbles": false, + "_ui5since": "1.10.0", "_ui5parameters": [ { "type": { @@ -13126,11 +14210,7 @@ "_ui5privacy": "public", "description": "Indicates that `ESC` key has triggered the event." } - ], - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + ] }, { "name": "close", @@ -13138,168 +14218,208 @@ "type": { "text": "CustomEvent" }, - "description": "Fired after the component is closed.", + "description": "Fired after the menu is closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": false, + "_ui5since": "1.10.0" + }, + { + "name": "check", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when an item is checked or unchecked.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.12.0" + }, + { + "name": "detail-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user clicks on the detail button when type is `Detail`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "name": "ListItem", + "module": "dist/ListItem.js" } } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "Dialog", - "module": "dist/Dialog.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-dialog", - "declaration": { - "name": "Dialog", - "module": "dist/Dialog.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/DropIndicator.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "DropIndicator", - "module": "dist/DropIndicator.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/DynamicDateRange.js", - "declarations": [ - { - "kind": "interface", - "name": "IDynamicDateRangeOption", - "description": "Represents a dynamic date range option used by the `ui5-dynamic-date-range` component.\n\nRepresents a dynamic date range option used for handling dynamic date ranges.\nThis interface defines the structure and behavior required for implementing\ndynamic date range options, including formatting, parsing, validation, and\nconversion of date range values.\n\n * Properties:\n- `icon`: The icon associated with the dynamic date range option, typically used for UI representation.\n- `operator`: A unique operator identifying the dynamic date range option.\n- `text`: The display text for the dynamic date range option.\n- `template` (optional): A JSX template for rendering the dynamic date range option.\n\nMethods:\n- `format(value: DynamicDateRangeValue): string`: Formats the given dynamic date range value into a string representation.\n- `parse(value: string): DynamicDateRangeValue | undefined`: Parses a string into a dynamic date range value.\n- `toDates(value: DynamicDateRangeValue): Array<Date>`: Converts a dynamic date range value into an array of `Date` objects.\n- `handleSelectionChange?(event: CustomEvent): DynamicDateRangeValue | undefined`: (Optional) Handles selection changes in the UI of the dynamic date range option.\n- `isValidString(value: string): boolean`: Validates whether a given string is a valid representation of the dynamic date range value.", - "_ui5privacy": "public", - "_ui5since": "2.11.0" - }, - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-dynamic-date-range` component provides a flexible interface to define date ranges using a combination of absolute dates, relative intervals, and preset ranges (e.g., \"Today\", \"Yesterday\", etc.).\nIt allows users to select a date range from a predefined set of options or enter custom dates.\n\n### Usage\n\nThe component is typically used in scenarios where users need to filter data based on date ranges, such as in reports, dashboards, or data analysis tools.\nIt can be used with the predefined options or extended with custom options to suit specific requirements. You can create your own options by extending the `IDynamicDateRangeOption` interface.\nEvery option should be registered using the `DynamicDateRange.register` method.\n\nIf needed, you can also create a range of dates based on specific option using the `toDates` method.\n\n### Standard Options\n\nThe component comes with a set of standard options, including:\n- \"TODAY\" - Represents the current date. An example value is `{ operator: \"TODAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Today.js\";`\n- \"YESTERDAY\" - Represents the previous date. An example value is `{ operator: \"YESTERDAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Yesterday.js\";`\n- \"TOMORROW\" - Represents the next date. An example value is `{ operator: \"TOMORROW\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Tomorrow.js\";`\n- \"DATE\" - Represents a single date. An example value is `{ operator: \"DATE\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/SingleDate.js\";`\n- \"DATERANGE\" - Represents a range of dates. An example value is `{ operator: \"DATERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateRange.js\";`\n- \"LASTDAYS\" - Represents Last X Days from today. An example value is `{ operator: \"LASTDAYS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTWEEKS\" - Represents Last X Weeks from today. An example value is `{ operator: \"LASTWEEKS\", values: [3]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTMONTHS\" - Represents Last X Months from today. An example value is `{ operator: \"LASTMONTHS\", values: [6]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTQUARTERS\" - Represents Last X Quarters from today. An example value is `{ operator: \"LASTQUARTERS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTYEARS\" - Represents Last X Years from today. An example value is `{ operator: \"LASTYEARS\", values: [1]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"NEXTDAYS\" - Represents Next X Days from today. An example value is `{ operator: \"NEXTDAYS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTWEEKS\" - Represents Next X Weeks from today. An example value is `{ operator: \"NEXTWEEKS\", values: [3]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTMONTHS\" - Represents Next X Months from today. An example value is `{ operator: \"NEXTMONTHS\", values: [6]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTQUARTERS\" - Represents Next X Quarters from today. An example value is `{ operator: \"NEXTQUARTERS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTYEARS\" - Represents Next X Years from today. An example value is `{ operator: \"NEXTYEARS\", values: [1]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DynamicDateRange.js\";`", - "name": "DynamicDateRange", - "members": [ + ], + "attributes": [ { - "kind": "field", - "name": "value", + "description": "Defines the text of the tree item.", + "name": "text", + "default": "undefined", + "fieldName": "text", "type": { - "text": "DynamicDateRangeValue | undefined", - "references": [ - { - "name": "DynamicDateRangeValue", - "package": "@ui5/webcomponents", - "module": "dist/DynamicDateRange.js" - } - ] - }, - "description": "Defines the value object.", + "text": "string | undefined" + } + }, + { + "description": "Defines the `additionalText`, displayed in the end of the menu item.\n\n**Note:** The additional text will not be displayed if there are items added in `items` slot or there are\ncomponents added to `endContent` slot.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", + "name": "additional-text", "default": "undefined", - "privacy": "public", - "_ui5noAttribute": true + "fieldName": "additionalText", + "type": { + "text": "string | undefined" + } }, { - "kind": "field", - "name": "options", + "description": "Defines the icon to be displayed as graphical element within the component.\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).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", "type": { - "text": "string" + "text": "string | undefined" + } + }, + { + "description": "Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.", + "name": "loading-delay", + "default": "1000", + "fieldName": "loadingDelay", + "type": { + "text": "number" + } + }, + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the text of the tooltip for the menu item.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" }, - "default": "\"\"", - "description": "Defines the options listed as a string, separated by commas and using capital case.\nExample: \"TODAY, YESTERDAY, DATERANGE\"", - "privacy": "public" + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } }, { - "kind": "method", - "name": "toDates", - "return": { - "type": { - "text": "Array<Date>" - }, - "description": "An array of two `Date` objects representing the start and end dates." + "description": "Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.", + "name": "checked", + "default": "false", + "fieldName": "checked", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item.\n\n- **role**: Defines the role of the menu item. If not set, menu item will have default role=\"menuitem\".", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "MenuItemAccessibilityAttributes" }, - "parameters": [ - { - "name": "value", - "type": { - "text": "DynamicDateRangeValue", - "references": [ - { - "name": "DynamicDateRangeValue", - "package": "@ui5/webcomponents", - "module": "dist/DynamicDateRange.js" - } - ] - }, - "description": "The option to convert into an array of date ranges", - "_ui5privacy": "public" - } - ], - "description": "Converts a `value` into concrete `startDate` and `endDate` JavaScript `Date` objects.", - "privacy": "public" - } - ], - "events": [ + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, { - "name": "change", - "_ui5privacy": "public", + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "name": "type", + "default": "\"Active\"", + "fieldName": "type", "type": { - "text": "CustomEvent" + "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" }, - "description": "Fired when the input operation has finished by pressing Enter or on focusout or a value is selected in the popover.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true - } - ], - "attributes": [ + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, { - "description": "Defines the value object.", - "name": "value", - "default": "undefined", - "fieldName": "value", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "name": "navigated", + "default": "false", + "fieldName": "navigated", "type": { - "text": "DynamicDateRangeValue | undefined" + "text": "boolean" + }, + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "description": "Defines the options listed as a string, separated by commas and using capital case.\nExample: \"TODAY, YESTERDAY, DATERANGE\"", - "name": "options", - "default": "\"\"", - "fieldName": "options", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "highlight", + "default": "\"None\"", + "fieldName": "highlight", "type": { - "text": "string" + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + }, + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, + { + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "ListItem", + "package": "@ui5/webcomponents", + "module": "dist/ListItem.js" }, - "tagName": "ui5-dynamic-date-range", + "tagName": "ui5-menu-item", "customElement": true, - "_ui5since": "2.11.0", - "_ui5privacy": "public" + "_ui5since": "1.3.0", + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IMenuItem", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" + } + ] } ], "exports": [ @@ -13307,119 +14427,73 @@ "kind": "js", "name": "default", "declaration": { - "name": "DynamicDateRange", - "module": "dist/DynamicDateRange.js" + "name": "MenuItem", + "module": "dist/MenuItem.js" } }, { "kind": "custom-element-definition", - "name": "ui5-dynamic-date-range", + "name": "ui5-menu-item", "declaration": { - "name": "DynamicDateRange", - "module": "dist/DynamicDateRange.js" + "name": "MenuItem", + "module": "dist/MenuItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ExpandableText.js", + "path": "dist/MenuItemGroup.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-expandable-text` component allows displaying a large body of text in a small space. It provides an \"expand/collapse\" functionality, which shows/hides potentially truncated text.\n\n### Usage\n\n#### When to use:\n- To accommodate long texts in limited space, for example in list items, table cell texts, or forms\n\n#### When not to use:\n- The content is critical for the user. In this case use short descriptions that can fit in\n- Strive to provide short and meaningful texts to avoid excessive number of \"Show More\" links on the page\n\n### Responsive Behavior\n\nOn phones, if the component is configured to display the full text in a popover, the popover will appear in full screen.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ExpandableText\";`", - "name": "ExpandableText", - "members": [ - { - "kind": "field", - "name": "text", - "type": { - "text": "string | undefined" - }, - "description": "Text of the component.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "maxCharacters", - "type": { - "text": "number" - }, - "default": "100", - "description": "Maximum number of characters to be displayed initially. If the text length exceeds this limit, the text will be truncated with an ellipsis, and the \"More\" link will be displayed.", - "privacy": "public" - }, + "description": "### Overview\n\nThe `ui5-menu-item-group` component represents a group of items designed for use inside a `ui5-menu`.\nItems belonging to the same group should be wrapped by a `ui5-menu-item-group`.\nEach group can have an `checkMode` property, which defines the check mode for the items within the group.\nThe possible values for `checkMode` are:\n- 'None' (default) - no items can be checked\n- 'Single' - Only one item can be checked at a time\n- 'Multiple' - Multiple items can be checked simultaneously\n\n**Note:** If the `checkMode` property is set to 'Single', only one item can remain checked at any given time.\nIf multiple items are marked as checked, the last checked item will take precedence.\n\n### Usage\n\n`ui5-menu-item-group` represents a collection of `ui5-menu-item` components that can have the same check mode.\nThe items are addeed to the group's `items` slot.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MenuItemGroup.js\";`", + "name": "MenuItemGroup", + "slots": [ { - "kind": "field", - "name": "overflowMode", - "type": { - "text": "ExpandableTextOverflowMode", + "name": "default", + "description": "Defines the items of this component.\n**Note:** The slot can hold any combination of components of type `ui5-menu-item` or `ui5-menu-separator` or both.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<IMenuItem>", "references": [ { - "name": "ExpandableTextOverflowMode", + "name": "IMenuItem", "package": "@ui5/webcomponents", - "module": "dist/types/ExpandableTextOverflowMode.js" + "module": "dist/Menu.js" } ] }, - "default": "\"InPlace\"", - "description": "Determines how the full text will be displayed.", - "privacy": "public" - }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "name": "emptyIndicatorMode", + "name": "checkMode", "type": { - "text": "TextEmptyIndicatorMode", + "text": "MenuItemGroupCheckMode", "references": [ { - "name": "TextEmptyIndicatorMode", + "name": "MenuItemGroupCheckMode", "package": "@ui5/webcomponents", - "module": "dist/types/TextEmptyIndicatorMode.js" + "module": "dist/types/MenuItemGroupCheckMode.js" } ] }, - "default": "\"Off\"", - "description": "Specifies if an empty indicator should be displayed when there is no text.", + "default": "\"None\"", + "description": "Defines the component's check mode.", "privacy": "public" } ], "attributes": [ { - "description": "Text of the component.", - "name": "text", - "default": "undefined", - "fieldName": "text", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Maximum number of characters to be displayed initially. If the text length exceeds this limit, the text will be truncated with an ellipsis, and the \"More\" link will be displayed.", - "name": "max-characters", - "default": "100", - "fieldName": "maxCharacters", - "type": { - "text": "number" - } - }, - { - "description": "Determines how the full text will be displayed.", - "name": "overflow-mode", - "default": "\"InPlace\"", - "fieldName": "overflowMode", - "type": { - "text": "\"InPlace\" | \"Popover\"" - } - }, - { - "description": "Specifies if an empty indicator should be displayed when there is no text.", - "name": "empty-indicator-mode", - "default": "\"Off\"", - "fieldName": "emptyIndicatorMode", + "description": "Defines the component's check mode.", + "name": "check-mode", + "default": "\"None\"", + "fieldName": "checkMode", "type": { - "text": "\"On\" | \"Off\"" + "text": "\"None\" | \"Single\" | \"Multiple\"" } } ], @@ -13428,10 +14502,17 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-expandable-text", + "tagName": "ui5-menu-item-group", "customElement": true, - "_ui5since": "2.6.0", - "_ui5privacy": "public" + "_ui5since": "2.12.0", + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IMenuItem", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" + } + ] } ], "exports": [ @@ -13439,44 +14520,95 @@ "kind": "js", "name": "default", "declaration": { - "name": "ExpandableText", - "module": "dist/ExpandableText.js" + "name": "MenuItemGroup", + "module": "dist/MenuItemGroup.js" } }, { "kind": "custom-element-definition", - "name": "ui5-expandable-text", + "name": "ui5-menu-item-group", "declaration": { - "name": "ExpandableText", - "module": "dist/ExpandableText.js" + "name": "MenuItemGroup", + "module": "dist/MenuItemGroup.js" } } ] }, { "kind": "javascript-module", - "path": "dist/FileUploader.js", + "path": "dist/MenuSeparator.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-file-uploader` opens a file explorer dialog and enables users to upload files.\nThe component consists of input field, but you can provide an HTML element by your choice\nto trigger the file upload, by using the default slot.\nFurthermore, you can set the property \"hideInput\" to \"true\" to hide the input field.\n\nTo get all selected files, you can simply use the read-only \"files\" property.\nTo restrict the types of files the user can select, you can use the \"accept\" property.\n\nAnd, similar to all input based components, the FileUploader supports \"valueState\", \"placeholder\", \"name\", and \"disabled\" properties.\n\nFor the `ui5-file-uploader`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/FileUploader.js\";`", - "name": "FileUploader", + "description": "The `ui5-menu-separator` represents a horizontal line to separate menu items inside a `ui5-menu`.", + "name": "MenuSeparator", + "superclass": { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + }, + "tagName": "ui5-menu-separator", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IMenuItem", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" + } + ], + "members": [] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "MenuSeparator", + "module": "dist/MenuSeparator.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-menu-separator", + "declaration": { + "name": "MenuSeparator", + "module": "dist/MenuSeparator.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/MessageStrip.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe ui5-message-strip component allows for the embedding of application-related messages.\nIt supports four semantic designs, each with its own color and icon: \"Information\", \"Positive\", \"Critical\", and \"Negative\".\nAdditionally, users can choose from two color sets (\"ColorSet1\" and \"ColorSet2\"), each containing 10 predefined color schemes.\nEach message shows a \"Close\" button, so that it can be removed from the UI, if needed.\n\n### Usage\n\nFor the `ui5-message-strip` component, you can define whether it displays\nan icon in the beginning and a close button. Moreover, its size and background\ncan be controlled with CSS.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MessageStrip.js\";`", + "name": "MessageStrip", "slots": [ { + "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", "name": "default", - "description": "This slot allows you to add custom content to the component, such as a button or any other interactive element to trigger the file selection dialog.\n\n**Note:** For best accessibility experience, set a `tabindex` of \"-1\" on your interactive element, or it will be set automatically.\nThis slot is intended for use cases where you want a button-only file uploader.\nIt is recommended to set `hideInput` property to \"true\" when using this slot.\nNot setting `hideInput` may negatively impact the screen reader users.", - "_ui5propertyName": "content", + "_ui5privacy": "public", "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" + "text": "Array<Node>" + } }, { - "name": "valueStateMessage", - "description": "Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.", - "_ui5since": "1.0.0-rc.9", + "name": "icon", + "description": "Defines the content to be displayed as graphical element within the component.\n\n**Note:** If no icon is given, the default icon for the component type will be used.\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "_ui5type": { - "text": "Array<HTMLElement>" + "text": "Array<IIcon>", + "references": [ + { + "name": "IIcon", + "package": "@ui5/webcomponents", + "module": "dist/Icon.js" + } + ] }, "_ui5privacy": "public" } @@ -13484,64 +14616,215 @@ "members": [ { "kind": "field", - "name": "accept", + "name": "design", "type": { - "text": "string | undefined" + "text": "MessageStripDesign", + "references": [ + { + "name": "MessageStripDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/MessageStripDesign.js" + } + ] }, - "description": "Comma-separated list of file types that the component should accept.\n\n**Note:** Please make sure you are adding the `.` in front on the file type, e.g. `.png` in case you want to accept png's only.", - "default": "undefined", - "privacy": "public" + "default": "\"Information\"", + "description": "Defines the component type.", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "hideInput", + "name": "colorScheme", "type": { - "text": "boolean" + "text": "string" }, - "default": "false", - "description": "If set to \"true\", the input field of component will not be rendered. Only the default slot that is passed will be rendered.\n\n**Note:** Use this property in combination with the default slot to achieve a button-only file uploader design.", - "privacy": "public" + "default": "\"1\"", + "description": "Defines the color scheme of the component.\nThere are 10 predefined schemes.\nTo use one you can set a number from `\"1\"` to `\"10\"`. The `colorScheme` `\"1\"` will be set by default.", + "privacy": "public", + "_ui5since": "2.0.0" }, { "kind": "field", - "name": "disabled", + "name": "hideIcon", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", - "privacy": "public" + "description": "Defines whether the MessageStrip will show an icon in the beginning.\nYou can directly provide an icon with the `icon` slot. Otherwise, the default icon for the type will be used.\n\n * **Note:** If <code>MessageStripDesign.ColorSet1</code> or <code>MessageStripDesign.ColorSet2</code> value is set to the <code>design</code> property, default icon will not be presented.", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "multiple", + "name": "hideCloseButton", "type": { "text": "boolean" }, "default": "false", - "description": "Allows multiple files to be chosen.", + "description": "Defines whether the MessageStrip renders close button.", "privacy": "public" - }, + } + ], + "events": [ { - "kind": "field", - "name": "name", + "name": "close", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "default": "undefined", - "privacy": "public" + "description": "Fired when the close button is pressed either with a\nclick/tap or by using the Enter or Space key.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + } + ], + "attributes": [ + { + "description": "Defines the component type.", + "name": "design", + "default": "\"Information\"", + "fieldName": "design", + "type": { + "text": "\"Positive\" | \"Negative\" | \"Critical\" | \"Information\" | \"ColorSet1\" | \"ColorSet2\"" + } }, { - "kind": "field", - "name": "placeholder", + "description": "Defines the color scheme of the component.\nThere are 10 predefined schemes.\nTo use one you can set a number from `\"1\"` to `\"10\"`. The `colorScheme` `\"1\"` will be set by default.", + "name": "color-scheme", + "default": "\"1\"", + "fieldName": "colorScheme", "type": { - "text": "string | undefined" + "text": "string" + } + }, + { + "description": "Defines whether the MessageStrip will show an icon in the beginning.\nYou can directly provide an icon with the `icon` slot. Otherwise, the default icon for the type will be used.\n\n * **Note:** If <code>MessageStripDesign.ColorSet1</code> or <code>MessageStripDesign.ColorSet2</code> value is set to the <code>design</code> property, default icon will not be presented.", + "name": "hide-icon", + "default": "false", + "fieldName": "hideIcon", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the MessageStrip renders close button.", + "name": "hide-close-button", + "default": "false", + "fieldName": "hideCloseButton", + "type": { + "text": "boolean" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-message-strip", + "customElement": true, + "_ui5since": "0.9.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "MessageStrip", + "module": "dist/MessageStrip.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-message-strip", + "declaration": { + "name": "MessageStrip", + "module": "dist/MessageStrip.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/MonthPicker.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "MonthPicker", + "module": "dist/MonthPicker.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/MultiComboBox.js", + "declarations": [ + { + "kind": "interface", + "name": "IMultiComboBoxItem", + "description": "Interface for components that may be slotted inside a `ui5-multi-combobox` as items", + "_ui5privacy": "public" + }, + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-multi-combobox` component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.\n\nThe drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options.\nThe options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens.\n### Structure\nThe `ui5-multi-combobox` consists of the following elements:\n\n- Tokenizer - a list of tokens with selected options.\n- Input field - displays the selected option/s as token/s. Users can type to filter the list.\n- Drop-down arrow - expands\\collapses the option list.\n- Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-multi-combobox` provides advanced keyboard handling.\n\n#### Picker\nIf the `ui5-multi-combobox` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the `UP` and `DOWN` arrow keys\nto navigate through the available options and select one by pressing the `Space` or `Enter` keys.\n[Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.\n\n#### Tokens\n\n- Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available).\n- Delete - deletes the token and focuses the previous token.\n- Backspace - deletes the token and focus the next token.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiComboBox.js\";`", + "name": "MultiComboBox", + "cssParts": [ + { + "description": "Used to style each token(where `token-0` corresponds to the first item)", + "name": "token-\\{index\\}" + } + ], + "slots": [ + { + "name": "default", + "description": "Defines the component items.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<IMultiComboBoxItem>", + "references": [ + { + "name": "IMultiComboBoxItem", + "package": "@ui5/webcomponents", + "module": "dist/MultiComboBox.js" + } + ] }, - "description": "Defines a short hint intended to aid the user with data entry when the component has no value.", - "default": "undefined", - "privacy": "public" + "_ui5privacy": "public" }, + { + "name": "icon", + "description": "Defines the icon to be displayed in the component.", + "_ui5since": "1.0.0-rc.9", + "_ui5type": { + "text": "Array<IIcon>", + "references": [ + { + "name": "IIcon", + "package": "@ui5/webcomponents", + "module": "dist/Icon.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "valueStateMessage", + "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.", + "_ui5since": "1.0.0-rc.9", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", "name": "value", @@ -13549,21 +14832,62 @@ "text": "string" }, "default": "\"\"", - "description": "Defines the name/names of the file/files to upload.", + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", "privacy": "public", "_ui5formProperty": true, - "_ui5formEvents": "change" + "_ui5formEvents": "change,input" }, { "kind": "field", - "name": "maxFileSize", + "name": "name", "type": { - "text": "number | undefined" + "text": "string | undefined" }, - "description": "Defines the maximum file size in megabytes which prevents the upload if at least one file exceeds it.", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", "default": "undefined", "privacy": "public", - "_ui5since": "2.2.0" + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "noTypeahead", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the value will be autcompleted to match an item", + "privacy": "public", + "_ui5since": "1.4.0" + }, + { + "kind": "field", + "name": "placeholder", + "type": { + "text": "string | undefined" + }, + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "noValidation", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the user input will be prevented, if no matching item has been found", + "privacy": "public" + }, + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "privacy": "public" }, { "kind": "field", @@ -13582,6 +14906,16 @@ "description": "Defines the value state of the component.", "privacy": "public" }, + { + "kind": "field", + "name": "readonly", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "privacy": "public" + }, { "kind": "field", "name": "required", @@ -13591,62 +14925,78 @@ "default": "false", "description": "Defines whether the component is required.", "privacy": "public", - "_ui5since": "2.13.0" + "_ui5since": "1.0.0-rc.5" }, { "kind": "field", - "name": "accessibleName", + "name": "filter", "type": { - "text": "string | undefined" + "text": "ComboBoxFilter", + "references": [ + { + "name": "ComboBoxFilter", + "package": "@ui5/webcomponents", + "module": "dist/types/ComboBoxFilter.js" + } + ] }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.13.0" + "default": "\"StartsWithPerTerm\"", + "description": "Defines the filter type of the component.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "showClearIcon", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Receives id(or many ids) of the elements that label the input.", - "default": "undefined", + "default": "false", + "description": "Defines whether the clear icon of the multi-combobox will be shown.", "privacy": "public", - "_ui5since": "2.13.0" + "_ui5since": "1.20.1" }, { "kind": "field", - "name": "accessibleDescription", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the accessible description of the component.", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "2.14.0" + "_ui5since": "1.4.0" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "accessibleNameRef", "type": { "text": "string | undefined" }, - "description": "Receives id(or many ids) of the elements that describe the input.", + "description": "Receives id(or many ids) of the elements that label the component.", "default": "undefined", "privacy": "public", - "_ui5since": "2.14.0" + "_ui5since": "1.4.0" }, { "kind": "field", - "name": "files", + "name": "showSelectAll", "type": { - "text": "FileList | null" + "text": "boolean" }, - "description": "FileList of all selected files.", + "default": "false", + "description": "Determines if the select all checkbox is visible on top of suggestions.", + "privacy": "public" + }, + { + "kind": "field", + "name": "open", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether the items picker is open.", "privacy": "public", - "default": "null", - "readonly": true + "_ui5since": "2.9.0" } ], "events": [ @@ -13654,115 +15004,114 @@ "name": "change", "_ui5privacy": "public", "type": { - "text": "CustomEvent<FileUploaderChangeEventDetail>", - "references": [ - { - "name": "FileUploaderChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/FileUploader.js" - } - ] + "text": "CustomEvent" }, - "description": "Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.", + "description": "Fired when the input operation has finished by pressing Enter or on focusout.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "FileList | null" - }, - "name": "files", - "_ui5privacy": "public", - "description": "The current files." - } - ] + "_ui5Bubbles": true }, { - "name": "file-size-exceed", + "name": "input", "_ui5privacy": "public", "type": { - "text": "CustomEvent<FileUploaderFileSizeExceedEventDetail>", + "text": "CustomEvent" + }, + "description": "Fired when the value of the component changes at each keystroke or clear icon is pressed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + }, + { + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the dropdown is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.0.0" + }, + { + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the dropdown is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.0.0" + }, + { + "name": "selection-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<MultiComboBoxSelectionChangeEventDetail>", "references": [ { - "name": "FileUploaderFileSizeExceedEventDetail", + "name": "MultiComboBoxSelectionChangeEventDetail", "package": "@ui5/webcomponents", - "module": "dist/FileUploader.js" + "module": "dist/MultiComboBox.js" } ] }, - "description": "Event is fired when the size of a file is above the `maxFileSize` property value.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, + "description": "Fired when selection is changed by user interaction.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, "_ui5Bubbles": true, - "_ui5since": "2.2.0", "_ui5parameters": [ { "type": { - "text": "Array<FileData>", + "text": "Array<IMultiComboBoxItem>", "references": [ { - "name": "FileData", + "name": "IMultiComboBoxItem", "package": "@ui5/webcomponents", - "module": "dist/FileUploader.js" + "module": "dist/MultiComboBox.js" } ] }, - "name": "filesData", + "name": "items", "_ui5privacy": "public", - "description": "An array of `FileData` objects containing the`fileName` and `fileSize` in MB of each file that exceeds the upload limit." + "description": "an array of the selected items." } ] } ], "attributes": [ { - "description": "Comma-separated list of file types that the component should accept.\n\n**Note:** Please make sure you are adding the `.` in front on the file type, e.g. `.png` in case you want to accept png's only.", - "name": "accept", - "default": "undefined", - "fieldName": "accept", - "type": { - "text": "string | undefined" - } - }, - { - "description": "If set to \"true\", the input field of component will not be rendered. Only the default slot that is passed will be rendered.\n\n**Note:** Use this property in combination with the default slot to achieve a button-only file uploader design.", - "name": "hide-input", - "default": "false", - "fieldName": "hideInput", + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", + "name": "value", + "default": "\"\"", + "fieldName": "value", "type": { - "text": "boolean" + "text": "string" } }, { - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", + "name": "name", + "default": "undefined", + "fieldName": "name", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Allows multiple files to be chosen.", - "name": "multiple", + "description": "Defines whether the value will be autcompleted to match an item", + "name": "no-typeahead", "default": "false", - "fieldName": "multiple", + "fieldName": "noTypeahead", "type": { "text": "boolean" } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", - "default": "undefined", - "fieldName": "name", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines a short hint intended to aid the user with data entry when the component has no value.", + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", "name": "placeholder", "default": "undefined", "fieldName": "placeholder", @@ -13771,21 +15120,21 @@ } }, { - "description": "Defines the name/names of the file/files to upload.", - "name": "value", - "default": "\"\"", - "fieldName": "value", + "description": "Defines if the user input will be prevented, if no matching item has been found", + "name": "no-validation", + "default": "false", + "fieldName": "noValidation", "type": { - "text": "string" + "text": "boolean" } }, { - "description": "Defines the maximum file size in megabytes which prevents the upload if at least one file exceeds it.", - "name": "max-file-size", - "default": "undefined", - "fieldName": "maxFileSize", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", "type": { - "text": "number | undefined" + "text": "boolean" } }, { @@ -13797,6 +15146,15 @@ "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" } }, + { + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", + "type": { + "text": "boolean" + } + }, { "description": "Defines whether the component is required.", "name": "required", @@ -13806,6 +15164,24 @@ "text": "boolean" } }, + { + "description": "Defines the filter type of the component.", + "name": "filter", + "default": "\"StartsWithPerTerm\"", + "fieldName": "filter", + "type": { + "text": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\"" + } + }, + { + "description": "Defines whether the clear icon of the multi-combobox will be shown.", + "name": "show-clear-icon", + "default": "false", + "fieldName": "showClearIcon", + "type": { + "text": "boolean" + } + }, { "description": "Defines the accessible ARIA name of the component.", "name": "accessible-name", @@ -13816,7 +15192,7 @@ } }, { - "description": "Receives id(or many ids) of the elements that label the input.", + "description": "Receives id(or many ids) of the elements that label the component.", "name": "accessible-name-ref", "default": "undefined", "fieldName": "accessibleNameRef", @@ -13825,30 +15201,21 @@ } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Receives id(or many ids) of the elements that describe the input.", - "name": "accessible-description-ref", - "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "description": "Determines if the select all checkbox is visible on top of suggestions.", + "name": "show-select-all", + "default": "false", + "fieldName": "showSelectAll", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "FileList of all selected files.", - "name": "files", - "default": "null", - "fieldName": "files", + "description": "Indicates whether the items picker is open.", + "name": "open", + "default": "false", + "fieldName": "open", "type": { - "text": "any" + "text": "boolean" } } ], @@ -13857,9 +15224,9 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-file-uploader", + "tagName": "ui5-multi-combobox", "customElement": true, - "_ui5since": "1.0.0-rc.6", + "_ui5since": "0.11.0", "_ui5privacy": "public" } ], @@ -13868,244 +15235,125 @@ "kind": "js", "name": "default", "declaration": { - "name": "FileUploader", - "module": "dist/FileUploader.js" + "name": "MultiComboBox", + "module": "dist/MultiComboBox.js" } }, { "kind": "custom-element-definition", - "name": "ui5-file-uploader", + "name": "ui5-multi-combobox", "declaration": { - "name": "FileUploader", - "module": "dist/FileUploader.js" + "name": "MultiComboBox", + "module": "dist/MultiComboBox.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Filters.js", - "declarations": [], - "exports": [] - }, - { - "kind": "javascript-module", - "path": "dist/Form.js", + "path": "dist/MultiComboBoxItem.js", "declarations": [ - { - "kind": "interface", - "name": "IFormItem", - "description": "Interface for components that can be slotted inside `ui5-form` as items.", - "_ui5privacy": "public", - "_ui5since": "2.0.0" - }, { "kind": "class", - "description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (< 600px) – 1 column is recommended (default: 1)\n- **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)\n- **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (> 1439px) – up to 6 columns are recommended (default: 3)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### Items Empty Span\n\nBy default, a form item spans 12 cells, fully divided between its label and field, with no empty space at the end:\n- **Label:** occupies 4 cells.\n- **Field:** occupies 8 cells.\n\nThe `emptySpan` property provides additional layout flexibility by defining empty space at the form item’s end.\n\n**For example:** Setting \"S0 M0 L3 XL3\" (or just \"L3 XL3\") adjusts the layout as follows:\n- **Label:** remains 4 cells.\n- **Field:** is reduced to 5 cells.\n- **Empty space:** 3 cells are added at the end.\n\nGreater values increase the empty space at the end of the form item, reducing the space available for the label and its field.\nHowever, setting `emptySpan` to 1 cell is recommended and typically sufficient to achieve a balanced layout.\n\n### Navigation flow\n\nThe Form component supports two layout options for keyboard navigation:\n\n#### Simple form\n\nIn this \"simple form\" layout, each `ui5-form-item` acts as a standalone group\nwith one item, so focus moves horizontally across the grid from one `ui5-form-item` to the next.\nThis layout is ideal for simpler forms and supports custom arrangements, e.g.,\n\n```\n| 1 | 2 |\n| 3 |\n| 4 | 5 |\n```\n\n#### Complex form\n\nIn this layout, items are grouped into `ui5-form-group` elements, allowing more complex configurations:\n\n- **Single-Column Group**: Focus moves vertically down from one item to the next.\n ```\n | 1 |\n | 2 |\n | 3 |\n ```\n\n- **Multi-Column Group**: Focus moves horizontally within each row, advancing to the next row after completing the current one.\n ```\n | 1 | 4 |\n | 2 | 5 |\n | 3 | 6 |\n ```\n\n### Keyboard Handling\n\n- [Tab] - Moves the focus to the next interactive element within the Form/FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [Tab] - Moves the focus to the previous interactive element within the Form/FormGroup (if available) or to the previous element in the tab chain outside the Form\n- [F6] - Moves the focus to the first interactive element of the next FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [F6] - Moves the focus to the first interactive element of the previous FormGroup (if available) or to the previous element in the tab chain outside the Form\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/Form.js\";\n- import @ui5/webcomponents/dist/FormGroup.js\";\n- import @ui5/webcomponents/dist/FormItem.js\";", - "name": "Form", - "cssParts": [ - { - "description": "Used to style the wrapper of the header.", - "name": "header" - }, - { - "description": "Used to style the element defining the form column layout.", - "name": "layout" - }, - { - "description": "Used to style a single column of the form column layout.", - "name": "column" - } - ], - "slots": [ - { - "name": "header", - "description": "Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - }, - { - "name": "default", - "description": "Defines the component content - FormGroups or FormItems.\n\n**Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\nEither use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<IFormItem>", - "references": [ - { - "name": "IFormItem", - "package": "@ui5/webcomponents", - "module": "dist/Form.js" - } - ] - }, - "_ui5privacy": "public" - } - ], + "description": "The `ui5-mcb-item` represents the item for a `ui5-multi-combobox`.", + "name": "MultiComboBoxItem", "members": [ { "kind": "field", - "name": "accessibleName", + "name": "selected", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", + "default": "false", + "description": "Defines the selected state of the component.", "privacy": "public", - "_ui5since": "2.10.0" - }, - { - "kind": "field", - "name": "layout", - "type": { - "text": "string" - }, - "default": "\"S1 M1 L2 XL3\"", - "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 3 columns by default (up to 6 columns are recommended)", - "privacy": "public" - }, - { - "kind": "field", - "name": "labelSpan", - "type": { - "text": "string" - }, - "default": "\"S12 M4 L4 XL4\"", - "description": "Defines the width proportion of the labels and fields of a form item by breakpoint.\n\nBy default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,\nand 12/12 in S size, e.g in S the label is on top of its associated field.\n\nThe supported values are between 1 and 12. Greater the number, more space the label will use.\n\n**Note:** If \"12\" is set, the label will be displayed on top of its assosiated field.", - "privacy": "public" + "inheritedFrom": { + "name": "ListItemBase", + "module": "dist/ListItemBase.js" + } }, { "kind": "field", - "name": "emptySpan", + "name": "text", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"S0 M0 L0 XL0\"", - "description": "Defines the number of cells that are empty at the end of each form item, configurable by breakpoint.\n\nBy default, a form item spans 12 cells, fully divided between its label (4 cells) and field (8 cells), with no empty space at the end.\nThe `emptySpan` provides additional layout flexibility by defining empty space at the form item’s end.\n\n**Note:**\n- The maximum allowable empty space is 10 cells. At least 1 cell each must remain for the label and the field.\n- When `emptySpan` is specified (greater than 0), ensure that the combined value of `emptySpan` and `labelSpan` does not exceed 11. This guarantees a minimum of 1 cell for the field.", + "description": "Defines the text of the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "2.5.0" + "inheritedFrom": { + "name": "ComboBoxItem", + "module": "dist/ComboBoxItem.js" + } }, { "kind": "field", - "name": "headerText", + "name": "additionalText", "type": { "text": "string | undefined" }, - "description": "Defines the header text of the component.\n\n**Note:** The property gets overridden by the `header` slot.", + "description": "Defines the additional text of the component.", "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "headerLevel", - "type": { - "text": "TitleLevel", - "references": [ - { - "name": "TitleLevel", - "package": "@ui5/webcomponents", - "module": "dist/types/TitleLevel.js" - } - ] - }, - "default": "\"H2\"", - "description": "Defines the compoennt heading level,\nset by the `headerText`.", "privacy": "public", - "_ui5since": "2.10.0" - }, - { - "kind": "field", - "name": "itemSpacing", - "type": { - "text": "FormItemSpacing", - "references": [ - { - "name": "FormItemSpacing", - "package": "@ui5/webcomponents", - "module": "dist/types/FormItemSpacing.js" - } - ] - }, - "default": "\"Normal\"", - "description": "Defines the vertical spacing between form items.\n\n**Note:** If the Form is meant to be switched between \"non-edit\" and \"edit\" modes,\nwe recommend using \"Large\" item spacing in \"non-edit\" mode, and \"Normal\" - for \"edit\" mode,\nto avoid \"jumping\" effect, caused by the hight difference between texts in \"non-edit\" mode and the input fields in \"edit\" mode.", - "privacy": "public" + "_ui5since": "1.0.0-rc.11", + "inheritedFrom": { + "name": "ComboBoxItem", + "module": "dist/ComboBoxItem.js" + } } ], "attributes": [ { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 3 columns by default (up to 6 columns are recommended)", - "name": "layout", - "default": "\"S1 M1 L2 XL3\"", - "fieldName": "layout", - "type": { - "text": "string" - } - }, - { - "description": "Defines the width proportion of the labels and fields of a form item by breakpoint.\n\nBy default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,\nand 12/12 in S size, e.g in S the label is on top of its associated field.\n\nThe supported values are between 1 and 12. Greater the number, more space the label will use.\n\n**Note:** If \"12\" is set, the label will be displayed on top of its assosiated field.", - "name": "label-span", - "default": "\"S12 M4 L4 XL4\"", - "fieldName": "labelSpan", - "type": { - "text": "string" - } - }, - { - "description": "Defines the number of cells that are empty at the end of each form item, configurable by breakpoint.\n\nBy default, a form item spans 12 cells, fully divided between its label (4 cells) and field (8 cells), with no empty space at the end.\nThe `emptySpan` provides additional layout flexibility by defining empty space at the form item’s end.\n\n**Note:**\n- The maximum allowable empty space is 10 cells. At least 1 cell each must remain for the label and the field.\n- When `emptySpan` is specified (greater than 0), ensure that the combined value of `emptySpan` and `labelSpan` does not exceed 11. This guarantees a minimum of 1 cell for the field.", - "name": "empty-span", - "default": "\"S0 M0 L0 XL0\"", - "fieldName": "emptySpan", + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", "type": { - "text": "string" + "text": "boolean" } }, { - "description": "Defines the header text of the component.\n\n**Note:** The property gets overridden by the `header` slot.", - "name": "header-text", + "description": "Defines the text of the component.", + "name": "text", "default": "undefined", - "fieldName": "headerText", + "fieldName": "text", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "ComboBoxItem", + "module": "dist/ComboBoxItem.js" } }, { - "description": "Defines the compoennt heading level,\nset by the `headerText`.", - "name": "header-level", - "default": "\"H2\"", - "fieldName": "headerLevel", - "type": { - "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"" - } - }, - { - "description": "Defines the vertical spacing between form items.\n\n**Note:** If the Form is meant to be switched between \"non-edit\" and \"edit\" modes,\nwe recommend using \"Large\" item spacing in \"non-edit\" mode, and \"Normal\" - for \"edit\" mode,\nto avoid \"jumping\" effect, caused by the hight difference between texts in \"non-edit\" mode and the input fields in \"edit\" mode.", - "name": "item-spacing", - "default": "\"Normal\"", - "fieldName": "itemSpacing", + "description": "Defines the additional text of the component.", + "name": "additional-text", + "default": "undefined", + "fieldName": "additionalText", "type": { - "text": "\"Normal\" | \"Large\"" + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "ComboBoxItem", + "module": "dist/ComboBoxItem.js" } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "ComboBoxItem", + "package": "@ui5/webcomponents", + "module": "dist/ComboBoxItem.js" }, - "tagName": "ui5-form", + "tagName": "ui5-mcb-item", "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public" + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IMultiComboBoxItem", + "package": "@ui5/webcomponents", + "module": "dist/MultiComboBox.js" + } + ] } ], "exports": [ @@ -14113,44 +15361,67 @@ "kind": "js", "name": "default", "declaration": { - "name": "Form", - "module": "dist/Form.js" + "name": "MultiComboBoxItem", + "module": "dist/MultiComboBoxItem.js" } }, { "kind": "custom-element-definition", - "name": "ui5-form", + "name": "ui5-mcb-item", "declaration": { - "name": "Form", - "module": "dist/Form.js" + "name": "MultiComboBoxItem", + "module": "dist/MultiComboBoxItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/FormGroup.js", + "path": "dist/MultiComboBoxItemGroup.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe FormGroup (ui5-form-group) represents a group inside the Form (ui5-form) component\nand it consists of FormItem (ui5-form-item) components.\n\nThe layout of the FormGroup is mostly defined and controlled by the overarching Form (ui5-form) component.\nStill, one can influence the layout via the FormGroup's `columnSpan` property,\nthat defines how many columns the group should expand to.\n\n### Usage\n\nТhe FormGroup (ui5-form-group) allows to split a Form into groups,\ne.g to group FormItems that logically belong together.\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/FormGroup.js\";", - "name": "FormGroup", + "description": "The `ui5-mcb-item-group` is type of suggestion item,\nthat can be used to split the `ui5-multi-combobox` suggestions into groups.", + "name": "MultiComboBoxItemGroup", "slots": [ { "name": "default", - "description": "Defines the items of the component.", + "description": "Defines the items of the <code>ui5-mcb-item-group</code>.", "_ui5propertyName": "items", "_ui5type": { - "text": "Array<FormItem>", + "text": "Array<MultiComboBoxItem>", "references": [ { - "name": "FormItem", + "name": "MultiComboBoxItem", "package": "@ui5/webcomponents", - "module": "dist/FormItem.js" + "module": "dist/MultiComboBoxItem.js" } ] }, - "_ui5privacy": "public" + "_ui5privacy": "public", + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } + }, + { + "name": "header", + "description": "Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.", + "_ui5type": { + "text": "Array<ListItemBase>", + "references": [ + { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + } + ] + }, + "_ui5privacy": "public", + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } } ], "members": [ @@ -14160,82 +15431,200 @@ "type": { "text": "string | undefined" }, - "description": "Defines header text of the component.", + "description": "Defines the header text of the <code>ui5-li-group</code>.", + "privacy": "public", "default": "undefined", - "privacy": "public" + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } }, { "kind": "field", - "name": "headerLevel", + "name": "headerAccessibleName", "type": { - "text": "TitleLevel", + "text": "string | undefined" + }, + "description": "Defines the accessible name of the header.", + "privacy": "public", + "default": "undefined", + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } + }, + { + "kind": "field", + "name": "wrappingType", + "type": { + "text": "WrappingType", "references": [ { - "name": "TitleLevel", + "name": "WrappingType", "package": "@ui5/webcomponents", - "module": "dist/types/TitleLevel.js" + "module": "dist/types/WrappingType.js" } ] }, - "default": "\"H3\"", - "description": "Defines the compoennt heading level,\nset by the `headerText`.", + "default": "\"None\"", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", "privacy": "public", - "_ui5since": "2.10.0" - }, + "_ui5since": "2.15.0", + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } + } + ], + "superclass": { + "name": "ComboBoxItemGroup", + "package": "@ui5/webcomponents", + "module": "dist/ComboBoxItemGroup.js" + }, + "tagName": "ui5-mcb-item-group", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public", + "_ui5implements": [ { - "kind": "field", - "name": "columnSpan", - "type": { - "text": "number | undefined" - }, - "description": "Defines column span of the component,\ne.g how many columns the group should span to.", - "default": "undefined", - "privacy": "public" + "name": "IMultiComboBoxItem", + "package": "@ui5/webcomponents", + "module": "dist/MultiComboBox.js" + } + ], + "cssParts": [ + { + "description": "Used to style the header item of the group", + "name": "header", + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } } ], "attributes": [ { - "description": "Defines header text of the component.", + "description": "Defines the header text of the <code>ui5-li-group</code>.", "name": "header-text", "default": "undefined", "fieldName": "headerText", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" } }, { - "description": "Defines the compoennt heading level,\nset by the `headerText`.", - "name": "header-level", - "default": "\"H3\"", - "fieldName": "headerLevel", + "description": "Defines the accessible name of the header.", + "name": "header-accessible-name", + "default": "undefined", + "fieldName": "headerAccessibleName", "type": { - "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"" + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" } }, { - "description": "Defines column span of the component,\ne.g how many columns the group should span to.", - "name": "column-span", - "default": "undefined", - "fieldName": "columnSpan", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "name": "wrapping-type", + "default": "\"None\"", + "fieldName": "wrappingType", "type": { - "text": "number | undefined" + "text": "\"None\" | \"Normal\"" + }, + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" } } ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-form-group", - "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public", - "_ui5implements": [ + "events": [ { - "name": "IFormItem", - "package": "@ui5/webcomponents", - "module": "dist/Form.js" + "name": "move-over", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListItemGroupMoveEventDetail>", + "references": [ + { + "name": "ListItemGroupMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + } + ] + }, + "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.1.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + } + ], + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } + }, + { + "name": "move", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListItemGroupMoveEventDetail>", + "references": [ + { + "name": "ListItemGroupMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + } + ] + }, + "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.1.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + } + ], + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } } ] } @@ -14245,350 +15634,44 @@ "kind": "js", "name": "default", "declaration": { - "name": "FormGroup", - "module": "dist/FormGroup.js" + "name": "MultiComboBoxItemGroup", + "module": "dist/MultiComboBoxItemGroup.js" } }, { "kind": "custom-element-definition", - "name": "ui5-form-group", + "name": "ui5-mcb-item-group", "declaration": { - "name": "FormGroup", - "module": "dist/FormGroup.js" + "name": "MultiComboBoxItemGroup", + "module": "dist/MultiComboBoxItemGroup.js" } } ] }, { "kind": "javascript-module", - "path": "dist/FormItem.js", + "path": "dist/MultiInput.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe FormItem (ui5-form-item) represents pair of a label and\none or more components (text or text fields), associated to it.\n\n### Usage\n\nThe FormItem is being used in FormGroup (ui5-form-group) or directly in Form (ui5-form).\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/FormItem.js\";", - "name": "FormItem", - "cssParts": [ - { - "description": "Used to style the parent element of the label and content parts.", - "name": "layout" - }, - { - "description": "Used to style the label part of the form item.", - "name": "label" - }, - { - "description": "Used to style the content part of the form item.", - "name": "content" - } - ], + "description": "### Overview\nA `ui5-multi-input` field allows the user to enter multiple values, which are displayed as `ui5-token`.\n\nUser can choose interaction for creating tokens.\nFiori Guidelines say that user should create tokens when:\n\n- Type a value in the input and press enter or focus out the input field (`change` event is fired)\n- Move between suggestion items (`selection-change` event is fired)\n- Clicking on a suggestion item (`selection-change` event is fired if the clicked item is different than the current value. Also `change` event is fired )\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiInput.js\";`", + "name": "MultiInput", "slots": [ { - "name": "labelContent", - "description": "Defines the label of the component.", + "name": "tokens", + "description": "Defines the component tokens.", "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - }, - { - "name": "default", - "description": "Defines the content of the component,\nassociated to `labelContent`.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - } - ], - "members": [ - { - "kind": "field", - "name": "columnSpan", - "type": { - "text": "number | undefined" - }, - "description": "Defines the column span of the component,\ne.g how many columns the component should span to.\n\n**Note:** The column span should be a number between 1 and the available columns of the FormGroup (when items are placed in a group)\nor the Form. The available columns can be affected by the FormGroup#columnSpan and/or the Form#layout.\nA number bigger than the available columns won't take effect.", - "default": "undefined", - "privacy": "public" - } - ], - "attributes": [ - { - "description": "Defines the column span of the component,\ne.g how many columns the component should span to.\n\n**Note:** The column span should be a number between 1 and the available columns of the FormGroup (when items are placed in a group)\nor the Form. The available columns can be affected by the FormGroup#columnSpan and/or the Form#layout.\nA number bigger than the available columns won't take effect.", - "name": "column-span", - "default": "undefined", - "fieldName": "columnSpan", - "type": { - "text": "number | undefined" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-form-item", - "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public", - "_ui5implements": [ - { - "name": "IFormItem", - "package": "@ui5/webcomponents", - "module": "dist/Form.js" - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "FormItem", - "module": "dist/FormItem.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-form-item", - "declaration": { - "name": "FormItem", - "module": "dist/FormItem.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/GridWalker.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "GridWalker", - "module": "dist/GridWalker.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/Icon.js", - "declarations": [ - { - "kind": "interface", - "name": "IIcon", - "description": "Interface for components that represent an icon, usable in numerous higher-order components", - "_ui5privacy": "public" - }, - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-icon` component represents an SVG icon.\nThere are two main scenarios how the `ui5-icon` component is used:\nas a purely decorative element,\nor as an interactive element that can be focused and clicked.\n\n### Usage\n\n1. **Get familiar with the icons collections.**\n\nBefore displaying an icon, you need to explore the icons collections to find and import the desired icon.\n\nCurrently there are 3 icons collection, available as 3 npm packages:\n\n- [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n- [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n- [@ui5/webcomponents-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n[icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n\n2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**\n\n`npm i @ui5/webcomponents-icons`\n`npm i @ui5/webcomponents-icons-tnt`\n`npm i @ui5/webcomponents-icons-business-suite`\n\n3. **Then, import the desired icon**.\n\n`import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n\n**For Example**:\n\nFor the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n\n`import \"@ui5/webcomponents-icons/dist/employee.js\";`\n\nFor the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n\n`import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n\nFor the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n\n`import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n\n4. **Display the icon using the `ui5-icon` web component.**\nSet the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\nand the icon name to the `name` property.\n\n`<ui5-icon name=\"employee\"></ui5-icon>`\n`<ui5-icon name=\"tnt/antenna\"></ui5-icon>`\n`<ui5-icon name=\"business-suite/ab-testing\"></ui5-icon>`\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.\n- [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Icon.js\";`", - "name": "Icon", - "cssParts": [ - { - "description": "Used to style the outermost wrapper of the `ui5-icon`.", - "name": "root" - } - ], - "members": [ - { - "kind": "field", - "name": "design", - "type": { - "text": "IconDesign", - "references": [ - { - "name": "IconDesign", - "package": "@ui5/webcomponents", - "module": "dist/types/IconDesign.js" - } - ] - }, - "default": "\"Default\"", - "description": "Defines the component semantic design.", - "privacy": "public", - "_ui5since": "1.9.2" - }, - { - "kind": "field", - "name": "name", - "type": { - "text": "string | undefined" - }, - "description": "Defines the unique identifier (icon name) of the component.\n\nTo browse all available icons, see the\n[SAP Icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html),\n[SAP Fiori Tools](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT) and\n[SAP Business Suite](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html)\n\nExample:\n`name='add'`, `name='delete'`, `name='employee'`.\n\n**Note:** To use the SAP Fiori Tools icons,\nyou need to set the `tnt` prefix in front of the icon's name.\n\nExample:\n`name='tnt/antenna'`, `name='tnt/actor'`, `name='tnt/api'`.\n\n**Note:** To use the SAP Business Suite icons,\nyou need to set the `business-suite` prefix in front of the icon's name.\n\nExample:\n`name='business-suite/3d'`, `name='business-suite/1x2-grid-layout'`, `name='business-suite/4x4-grid-layout'`.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.\n\n**Note:** Every icon should have a text alternative in order to\ncalculate its accessible name.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "showTooltip", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component should have a tooltip.\n\n**Note:** The tooltip text should be provided via the `accessible-name` property.", - "privacy": "public" - }, - { - "kind": "field", - "name": "mode", - "type": { - "text": "IconMode", + "text": "Array<IToken>", "references": [ { - "name": "IconMode", + "name": "IToken", "package": "@ui5/webcomponents", - "module": "dist/types/IconMode.js" + "module": "dist/MultiInput.js" } ] }, - "default": "\"Decorative\"", - "description": "Defines the mode of the component.", - "privacy": "public", - "_ui5since": "2.0.0" - } - ], - "events": [ - { - "name": "click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired on mouseup, `SPACE` and `ENTER`.\n- on mouse click, the icon fires native `click` event\n- on `SPACE` and `ENTER`, the icon fires custom `click` event", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.11.0" - } - ], - "attributes": [ - { - "description": "Defines the component semantic design.", - "name": "design", - "default": "\"Default\"", - "fieldName": "design", - "type": { - "text": "\"Default\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\" | \"Contrast\" | \"Neutral\" | \"NonInteractive\"" - } - }, - { - "description": "Defines the unique identifier (icon name) of the component.\n\nTo browse all available icons, see the\n[SAP Icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html),\n[SAP Fiori Tools](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT) and\n[SAP Business Suite](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html)\n\nExample:\n`name='add'`, `name='delete'`, `name='employee'`.\n\n**Note:** To use the SAP Fiori Tools icons,\nyou need to set the `tnt` prefix in front of the icon's name.\n\nExample:\n`name='tnt/antenna'`, `name='tnt/actor'`, `name='tnt/api'`.\n\n**Note:** To use the SAP Business Suite icons,\nyou need to set the `business-suite` prefix in front of the icon's name.\n\nExample:\n`name='business-suite/3d'`, `name='business-suite/1x2-grid-layout'`, `name='business-suite/4x4-grid-layout'`.", - "name": "name", - "default": "undefined", - "fieldName": "name", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.\n\n**Note:** Every icon should have a text alternative in order to\ncalculate its accessible name.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines whether the component should have a tooltip.\n\n**Note:** The tooltip text should be provided via the `accessible-name` property.", - "name": "show-tooltip", - "default": "false", - "fieldName": "showTooltip", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the mode of the component.", - "name": "mode", - "default": "\"Decorative\"", - "fieldName": "mode", - "type": { - "text": "\"Image\" | \"Decorative\" | \"Interactive\"" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-icon", - "customElement": true, - "_ui5privacy": "public", - "_ui5implements": [ - { - "name": "IIcon", - "package": "@ui5/webcomponents", - "module": "dist/Icon.js" - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "Icon", - "module": "dist/Icon.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-icon", - "declaration": { - "name": "Icon", - "module": "dist/Icon.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/Input.js", - "declarations": [ - { - "kind": "interface", - "name": "IInputSuggestionItem", - "description": "Interface for components that represent a suggestion item, usable in `ui5-input`", - "_ui5privacy": "public" - }, - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-input` component allows the user to enter and edit text or numeric values in one line.\n\nAdditionally, you can provide `suggestionItems`,\nthat are displayed in a popover right under the input.\n\nThe text field can be editable or read-only (`readonly` property),\nand it can be enabled or disabled (`disabled` property).\nTo visualize semantic states, such as \"Negative\" or \"Critical\", the `valueState` property is provided.\nWhen the user makes changes to the text, the change event is fired,\nwhich enables you to react on any text change.\n\n### Keyboard Handling\nThe `ui5-input` provides the following keyboard shortcuts:\n\n- [Escape] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.\n- [Enter] or [Return] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.\n- [Down] - Focuses the next matching item in the suggestion list. Selection-change event is fired.\n- [Up] - Focuses the previous matching item in the suggestion list. Selection-change event is fired.\n- [Home] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.\n- [End] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.\n- [Page Up] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.\n- [Page Down] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.\n- [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Input.js\";`", - "name": "Input", - "cssParts": [ - { - "description": "Used to style the root DOM element of the Input component", - "name": "root" - }, - { - "description": "Used to style the native input element", - "name": "input" + "_ui5privacy": "public" }, - { - "description": "Used to style the clear icon, which can be pressed to clear user input text", - "name": "clear-icon" - } - ], - "slots": [ { "name": "default", "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.", @@ -14603,7 +15686,11 @@ } ] }, - "_ui5privacy": "public" + "_ui5privacy": "public", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } }, { "name": "icon", @@ -14618,7 +15705,11 @@ } ] }, - "_ui5privacy": "public" + "_ui5privacy": "public", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } }, { "name": "valueStateMessage", @@ -14627,10 +15718,38 @@ "_ui5type": { "text": "Array<HTMLElement>" }, - "_ui5privacy": "public" + "_ui5privacy": "public", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } } ], "members": [ + { + "kind": "field", + "name": "showValueHelpIcon", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether a value help icon will be visualized in the end of the input.\nPressing the icon will fire `value-help-trigger` event.", + "privacy": "public" + }, + { + "kind": "field", + "name": "name", + "type": { + "text": "string | undefined" + }, + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", + "default": "undefined", + "privacy": "public", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } + }, { "kind": "field", "name": "disabled", @@ -14639,7 +15758,11 @@ }, "default": "false", "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", - "privacy": "public" + "privacy": "public", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } }, { "kind": "field", @@ -14649,7 +15772,11 @@ }, "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } }, { "kind": "field", @@ -14659,7 +15786,11 @@ }, "default": "false", "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", - "privacy": "public" + "privacy": "public", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } }, { "kind": "field", @@ -14670,7 +15801,11 @@ "default": "false", "description": "Defines whether the component is required.", "privacy": "public", - "_ui5since": "1.0.0-rc.3" + "_ui5since": "1.0.0-rc.3", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } }, { "kind": "field", @@ -14681,7 +15816,11 @@ "default": "false", "description": "Defines whether the value will be autcompleted to match an item", "privacy": "public", - "_ui5since": "1.4.0" + "_ui5since": "1.4.0", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } }, { "kind": "field", @@ -14698,7 +15837,11 @@ }, "default": "\"Text\"", "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.", - "privacy": "public" + "privacy": "public", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } }, { "kind": "field", @@ -14710,7 +15853,11 @@ "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", "privacy": "public", "_ui5formProperty": true, - "_ui5formEvents": "change,input" + "_ui5formEvents": "change,input", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } }, { "kind": "field", @@ -14727,17 +15874,11 @@ }, "default": "\"None\"", "description": "Defines the value state of the component.", - "privacy": "public" - }, - { - "kind": "field", - "name": "name", - "type": { - "text": "string | undefined" - }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "default": "undefined", - "privacy": "public" + "privacy": "public", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } }, { "kind": "field", @@ -14747,7 +15888,11 @@ }, "default": "false", "description": "Defines whether the component should show suggestions, if such are present.", - "privacy": "public" + "privacy": "public", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } }, { "kind": "field", @@ -14758,7 +15903,11 @@ "description": "Sets the maximum number of characters available in the input field.\n\n**Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.5" + "_ui5since": "1.0.0-rc.5", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } }, { "kind": "field", @@ -14769,7 +15918,11 @@ "description": "Defines the accessible ARIA name of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "1.0.0-rc.15", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } }, { "kind": "field", @@ -14780,7 +15933,11 @@ "description": "Receives id(or many ids) of the elements that label the input.", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "1.0.0-rc.15", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } }, { "kind": "field", @@ -14791,7 +15948,11 @@ "description": "Defines the accessible description of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "2.9.0" + "_ui5since": "2.9.0", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } }, { "kind": "field", @@ -14802,7 +15963,11 @@ "description": "Receives id(or many ids) of the elements that describe the input.", "default": "undefined", "privacy": "public", - "_ui5since": "2.9.0" + "_ui5since": "2.9.0", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } }, { "kind": "field", @@ -14813,7 +15978,11 @@ "default": "false", "description": "Defines whether the clear icon of the input will be shown.", "privacy": "public", - "_ui5since": "1.2.0" + "_ui5since": "1.2.0", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } }, { "kind": "field", @@ -14824,10 +15993,53 @@ "default": "false", "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", "privacy": "public", - "_ui5since": "2.0.0" + "_ui5since": "2.0.0", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } } ], "events": [ + { + "name": "value-help-trigger", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the value help icon is pressed\nand F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + }, + { + "name": "token-delete", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<MultiInputTokenDeleteEventDetail>", + "references": [ + { + "name": "MultiInputTokenDeleteEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/MultiInput.js" + } + ] + }, + "description": "Fired when tokens are being deleted.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "Array" + }, + "name": "tokens", + "_ui5privacy": "public", + "description": "An array containing the deleted tokens." + } + ] + }, { "name": "change", "_ui5privacy": "public", @@ -14837,7 +16049,11 @@ "description": "Fired when the input operation has finished by pressing Enter or on focusout.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "_ui5Bubbles": true, + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } }, { "name": "input", @@ -14848,7 +16064,11 @@ "description": "Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": true + "_ui5Bubbles": true, + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } }, { "name": "select", @@ -14860,7 +16080,11 @@ "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "2.0.0" + "_ui5since": "2.0.0", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } }, { "name": "selection-change", @@ -14889,7 +16113,11 @@ "_ui5privacy": "public", "description": "The previewed suggestion item." } - ] + ], + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } }, { "name": "open", @@ -14901,10 +16129,14 @@ "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "2.0.0" - }, - { - "name": "close", + "_ui5since": "2.0.0", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } + }, + { + "name": "close", "_ui5privacy": "public", "type": { "text": "CustomEvent" @@ -14913,10 +16145,36 @@ "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": false, - "_ui5since": "2.0.0" + "_ui5since": "2.0.0", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } } ], "attributes": [ + { + "description": "Determines whether a value help icon will be visualized in the end of the input.\nPressing the icon will fire `value-help-trigger` event.", + "name": "show-value-help-icon", + "default": "false", + "fieldName": "showValueHelpIcon", + "type": { + "text": "boolean" + } + }, + { + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } + }, { "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", "name": "disabled", @@ -14924,6 +16182,10 @@ "fieldName": "disabled", "type": { "text": "boolean" + }, + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" } }, { @@ -14933,6 +16195,10 @@ "fieldName": "placeholder", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" } }, { @@ -14942,6 +16208,10 @@ "fieldName": "readonly", "type": { "text": "boolean" + }, + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" } }, { @@ -14951,6 +16221,10 @@ "fieldName": "required", "type": { "text": "boolean" + }, + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" } }, { @@ -14960,6 +16234,10 @@ "fieldName": "noTypeahead", "type": { "text": "boolean" + }, + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" } }, { @@ -14969,6 +16247,10 @@ "fieldName": "type", "type": { "text": "\"Text\" | \"Email\" | \"Number\" | \"Password\" | \"Tel\" | \"URL\" | \"Search\"" + }, + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" } }, { @@ -14978,6 +16260,10 @@ "fieldName": "value", "type": { "text": "string" + }, + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" } }, { @@ -14987,15 +16273,10 @@ "fieldName": "valueState", "type": { "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" - } - }, - { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", - "default": "undefined", - "fieldName": "name", - "type": { - "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" } }, { @@ -15005,6 +16286,10 @@ "fieldName": "showSuggestions", "type": { "text": "boolean" + }, + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" } }, { @@ -15014,6 +16299,10 @@ "fieldName": "maxlength", "type": { "text": "number | undefined" + }, + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" } }, { @@ -15023,6 +16312,10 @@ "fieldName": "accessibleName", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" } }, { @@ -15032,6 +16325,10 @@ "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" } }, { @@ -15041,6 +16338,10 @@ "fieldName": "accessibleDescription", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" } }, { @@ -15050,6 +16351,10 @@ "fieldName": "accessibleDescriptionRef", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" } }, { @@ -15059,6 +16364,10 @@ "fieldName": "showClearIcon", "type": { "text": "boolean" + }, + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" } }, { @@ -15068,17 +16377,48 @@ "fieldName": "open", "type": { "text": "boolean" + }, + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "Input", + "package": "@ui5/webcomponents", + "module": "dist/Input.js" }, - "tagName": "ui5-input", + "tagName": "ui5-multi-input", "customElement": true, - "_ui5privacy": "public" + "_ui5since": "1.0.0-rc.9", + "_ui5privacy": "public", + "cssParts": [ + { + "description": "Used to style the root DOM element of the Input component", + "name": "root", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } + }, + { + "description": "Used to style the native input element", + "name": "input", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } + }, + { + "description": "Used to style the clear icon, which can be pressed to clear user input text", + "name": "clear-icon", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } + } + ] } ], "exports": [ @@ -15086,133 +16426,299 @@ "kind": "js", "name": "default", "declaration": { - "name": "Input", - "module": "dist/Input.js" + "name": "MultiInput", + "module": "dist/MultiInput.js" } }, { "kind": "custom-element-definition", - "name": "ui5-input", + "name": "ui5-multi-input", "declaration": { - "name": "Input", - "module": "dist/Input.js" + "name": "MultiInput", + "module": "dist/MultiInput.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Label.js", + "path": "dist/Option.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-label` is a component used to represent a label for elements like input, textarea, select.\nThe `for` property of the `ui5-label` must be the same as the id attribute of the related input element.\nScreen readers read out the label, when the user focuses the labelled control.\n\nThe `ui5-label` appearance can be influenced by properties,\nsuch as `required` and `wrappingType`.\nThe appearance of the Label can be configured in a limited way by using the design property.\nFor a broader choice of designs, you can use custom styles.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Label\";`", - "name": "Label", + "description": "### Overview\n\nThe `ui5-option` component defines the content of an option in the `ui5-select`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Option.js\";`", + "name": "Option", "slots": [ { - "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", "name": "default", - "_ui5privacy": "public", + "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", + "_ui5propertyName": "text", "_ui5type": { "text": "Array<Node>" - } + }, + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "for", + "name": "value", "type": { "text": "string | undefined" }, - "description": "Defines the labeled input by providing its ID.\n\n**Note:** Can be used with both `ui5-input` and native input.", + "description": "Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.\nFor more information on HTML Form support, see the `name` property of `ui5-select`.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "showColon", + "name": "icon", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether colon is added to the component text.\n\n**Note:** Usually used in forms.", + "description": "Defines the `icon` source URI.\n\n**Note:**\nSAP-icons font provides numerous built-in icons. To find all the available icons, see the\n[Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "required", + "name": "additionalText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the `additionalText`, displayed in the end of the option.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "tooltip", + "type": { + "text": "string | undefined" + }, + "description": "Defines the tooltip of the option.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "selected", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether an asterisk character is added to the component text.\n\n**Note:** Usually indicates that user input (bound with the `for` property) is required.\nIn that case the `required` property of\nthe corresponding input should also be set.", + "description": "Defines the selected state of the component.", + "privacy": "public", + "inheritedFrom": { + "name": "ListItemBase", + "module": "dist/ListItemBase.js" + } + } + ], + "attributes": [ + { + "description": "Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.\nFor more information on HTML Form support, see the `name` property of `ui5-select`.", + "name": "value", + "default": "undefined", + "fieldName": "value", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the `icon` source URI.\n\n**Note:**\nSAP-icons font provides numerous built-in icons. To find all the available icons, see the\n[Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the `additionalText`, displayed in the end of the option.", + "name": "additional-text", + "default": "undefined", + "fieldName": "additionalText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the tooltip of the option.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } + } + ], + "superclass": { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + }, + "tagName": "ui5-option", + "customElement": true, + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IOption", + "package": "@ui5/webcomponents", + "module": "dist/Select.js" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Option", + "module": "dist/Option.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-option", + "declaration": { + "name": "Option", + "module": "dist/Option.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/OptionCustom.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-option-custom` component defines a custom content of an option in the `ui5-select`.\nA component to be the same way as the standard `ui5-option`.\nThe component accepts arbitrary HTML content to allow full customization.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/OptionCustom.js\";`", + "name": "OptionCustom", + "slots": [ + { + "name": "default", + "description": "Defines the content of the component.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<Node>" + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "displayText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text, displayed inside the `ui5-select` input filed\nwhen the option gets selected.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "wrappingType", + "name": "value", "type": { - "text": "WrappingType", - "references": [ - { - "name": "WrappingType", - "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" - } - ] + "text": "string | undefined" }, - "default": "\"Normal\"", - "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.", + "description": "Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.\nFor more information on HTML Form support, see the `name` property of `ui5-select`.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "tooltip", + "type": { + "text": "string | undefined" + }, + "description": "Defines the tooltip of the option.", + "default": "undefined", "privacy": "public" + }, + { + "kind": "field", + "name": "selected", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the selected state of the component.", + "privacy": "public", + "inheritedFrom": { + "name": "ListItemBase", + "module": "dist/ListItemBase.js" + } } ], "attributes": [ { - "description": "Defines the labeled input by providing its ID.\n\n**Note:** Can be used with both `ui5-input` and native input.", - "name": "for", + "description": "Defines the text, displayed inside the `ui5-select` input filed\nwhen the option gets selected.", + "name": "display-text", "default": "undefined", - "fieldName": "for", + "fieldName": "displayText", "type": { "text": "string | undefined" } }, { - "description": "Defines whether colon is added to the component text.\n\n**Note:** Usually used in forms.", - "name": "show-colon", - "default": "false", - "fieldName": "showColon", + "description": "Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.\nFor more information on HTML Form support, see the `name` property of `ui5-select`.", + "name": "value", + "default": "undefined", + "fieldName": "value", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines whether an asterisk character is added to the component text.\n\n**Note:** Usually indicates that user input (bound with the `for` property) is required.\nIn that case the `required` property of\nthe corresponding input should also be set.", - "name": "required", - "default": "false", - "fieldName": "required", + "description": "Defines the tooltip of the option.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.", - "name": "wrapping-type", - "default": "\"Normal\"", - "fieldName": "wrappingType", + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", "type": { - "text": "\"None\" | \"Normal\"" + "text": "boolean" } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" }, - "tagName": "ui5-label", + "tagName": "ui5-option-custom", "customElement": true, - "_ui5privacy": "public" + "_ui5since": "2.0.0", + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IOption", + "package": "@ui5/webcomponents", + "module": "dist/Select.js" + } + ] } ], "exports": [ @@ -15220,140 +16726,130 @@ "kind": "js", "name": "default", "declaration": { - "name": "Label", - "module": "dist/Label.js" + "name": "OptionCustom", + "module": "dist/OptionCustom.js" } }, { "kind": "custom-element-definition", - "name": "ui5-label", + "name": "ui5-option-custom", "declaration": { - "name": "Label", - "module": "dist/Label.js" + "name": "OptionCustom", + "module": "dist/OptionCustom.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Link.js", + "path": "dist/Panel.js", "declarations": [ { "kind": "class", - "description": "### Overview\nThe `ui5-link` is a hyperlink component that is used to navigate to other\napps and web pages, or to trigger actions.\nIt is a clickable text element, visualized in such a way that it stands out\nfrom the standard text.\nOn hover, it changes its style to an underlined text to provide additional feedback to the user.\n\n### Usage\n\nYou can set the `ui5-link` to be enabled or disabled.\n\nTo create a visual hierarchy in large lists of links, you can set the less important links as\n`Subtle` or the more important ones as `Emphasized`,\nby using the `design` property.\n\nIf the `href` property is set, the link behaves as the HTML\nanchor tag (`<a></a>`) and opens the specified URL in the given target frame (`target` property).\nTo specify where the linked content is opened, you can use the `target` property.\n\n### Responsive behavior\n\nIf there is not enough space, the text of the `ui5-link` becomes truncated.\nIf the `wrappingType` property is set to `\"Normal\"`, the text is displayed\non several lines instead of being truncated.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Link\";`", - "name": "Link", + "description": "### Overview\n\nThe `ui5-panel` component is a container which has a header and a\ncontent area and is used\nfor grouping and displaying information. It can be collapsed to save space on the screen.\n\n### Guidelines:\n\n- Nesting two or more panels is not recommended.\n- Do not stack too many panels on one page.\n\n### Structure\nThe panel's header area consists of a title bar with a header text or custom header.\n\nThe header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state.\n\nThe custom header can be set through the `header` slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.\n\nThe content area can contain an arbitrary set of controls.\n\n**Note:** The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.\n\n### Responsive Behavior\n\n- If the width of the panel is set to 100% (default), the panel and its children are\nresized responsively,\ndepending on its parent container.\n- If the panel has a fixed height, it will take up the space even if the panel is\ncollapsed.\n- When the panel is expandable (the `fixed` property is set to `false`),\nan arrow icon (pointing to the right) appears in front of the header.\n- When the animation is activated, expand/collapse uses a smooth animation to open or\nclose the content area.\n- When the panel expands/collapses, the arrow icon rotates 90 degrees\nclockwise/counter-clockwise.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Panel.js\";`", + "name": "Panel", "cssParts": [ { - "description": "Used to style the provided icon within the link", - "name": "icon" + "description": "Used to style the wrapper of the header.", + "name": "header" }, { - "description": "Used to style the provided endIcon within the link", - "name": "endIcon" + "description": "Used to style the wrapper of the content.", + "name": "content" } ], "slots": [ { - "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", + "description": "Defines the content of the component. The content is visible only when the component is expanded.", "name": "default", "_ui5privacy": "public", "_ui5type": { "text": "Array<Node>" } + }, + { + "name": "header", + "description": "Defines the component header area.\n\n**Note:** When a header is provided, the `headerText` property is ignored.", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "disabled", + "name": "headerText", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the component is disabled.\n\n**Note:** When disabled, the click event cannot be triggered by the user.", + "description": "This property is used to set the header text of the component.\nThe text is visible in both expanded and collapsed states.\n\n**Note:** This property is overridden by the `header` slot.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "tooltip", + "name": "fixed", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the tooltip of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.0.0" + "default": "false", + "description": "Determines whether the component is in a fixed state that is not\nexpandable/collapsible by user interaction.", + "privacy": "public" }, { "kind": "field", - "name": "href", + "name": "collapsed", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.", - "default": "undefined", + "default": "false", + "description": "Indicates whether the component is collapsed and only the header is displayed.", "privacy": "public" }, { "kind": "field", - "name": "target", + "name": "noAnimation", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", - "default": "undefined", - "privacy": "public" + "default": "false", + "description": "Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.", + "privacy": "public", + "_ui5since": "1.0.0-rc.16" }, { "kind": "field", - "name": "design", + "name": "accessibleRole", "type": { - "text": "LinkDesign", + "text": "PanelAccessibleRole", "references": [ { - "name": "LinkDesign", + "name": "PanelAccessibleRole", "package": "@ui5/webcomponents", - "module": "dist/types/LinkDesign.js" + "module": "dist/types/PanelAccessibleRole.js" } ] }, - "default": "\"Default\"", - "description": "Defines the component design.\n\n**Note:** Avaialble options are `Default`, `Subtle`, and `Emphasized`.", + "default": "\"Form\"", + "description": "Sets the accessible ARIA role of the component.\nDepending on the usage, you can change the role from the default `Form`\nto `Region` or `Complementary`.", "privacy": "public" }, { "kind": "field", - "name": "interactiveAreaSize", + "name": "headerLevel", "type": { - "text": "InteractiveAreaSize", + "text": "TitleLevel", "references": [ { - "name": "InteractiveAreaSize", + "name": "TitleLevel", "package": "@ui5/webcomponents", - "module": "dist/types/InteractiveAreaSize.js" + "module": "dist/types/TitleLevel.js" } ] }, - "default": "\"Normal\"", - "description": "Defines the target area size of the link:\n- **InteractiveAreaSize.Normal**: The default target area size.\n- **InteractiveAreaSize.Large**: The target area size is enlarged to 24px in height.\n\n**Note:**The property is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.\n**Note:**To improve <code>ui5-link</code>'s reliability and usability, it is recommended to use the <code>InteractiveAreaSize.Large</code> value in scenarios where the <code>ui5-link</code> component is placed inside another interactive component, such as a list item or a table cell.\nSetting the <code>interactiveAreaSize</code> property to <code>InteractiveAreaSize.Large</code> increases the <code>ui5-link</code>'s invisible touch area. As a result, the user's intended one-time selection command is more likely to activate the desired <code>ui5-link</code>, with minimal chance of unintentionally activating the underlying component.", - "privacy": "public", - "_ui5since": "2.8.0" - }, - { - "kind": "field", - "name": "wrappingType", - "type": { - "text": "WrappingType", - "references": [ - { - "name": "WrappingType", - "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" - } - ] - }, - "default": "\"Normal\"", - "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** By default the text will wrap. If \"None\" is set - the text will truncate.", + "default": "\"H2\"", + "description": "Defines the \"aria-level\" of component heading,\nset by the `headerText`.", "privacy": "public" }, { @@ -15365,205 +16861,86 @@ "description": "Defines the accessible ARIA name of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "1.2.0" - }, - { - "kind": "field", - "name": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that label the input", - "default": "undefined", - "privacy": "public", "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "accessibleRole", - "type": { - "text": "LinkAccessibleRole", - "references": [ - { - "name": "LinkAccessibleRole", - "package": "@ui5/webcomponents", - "module": "dist/types/LinkAccessibleRole.js" - } - ] - }, - "default": "\"Link\"", - "description": "Defines the ARIA role of the component.\n\n**Note:** Use the <code>LinkAccessibleRole.Button</code> role in cases when navigation is not expected to occur and the href property is not defined.", - "privacy": "public", - "_ui5since": "1.9.0" - }, - { - "kind": "field", - "name": "accessibilityAttributes", - "type": { - "text": "LinkAccessibilityAttributes", - "references": [ - { - "name": "LinkAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/Link.js" - } - ] - }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.", - "privacy": "public", - "_ui5since": "1.1.0" - }, - { - "kind": "field", - "name": "accessibleDescription", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible description of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.5.0" - }, - { - "kind": "field", - "name": "icon", - "type": { - "text": "string | undefined" - }, - "description": "Defines the icon, displayed as graphical element within the component before the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.0.0" - }, - { - "kind": "field", - "name": "endIcon", + "name": "stickyHeader", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the icon, displayed as graphical element within the component after the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "default": "undefined", + "default": "false", + "description": "Indicates whether the Panel header is sticky or not.\nIf stickyHeader is set to true, then whenever you scroll the content or\nthe application, the header of the panel will be always visible and\na solid color will be used for its design.", "privacy": "public", - "_ui5since": "2.0.0" + "_ui5since": "1.16.0-rc.1" } ], "events": [ { - "name": "click", + "name": "toggle", "_ui5privacy": "public", "type": { - "text": "CustomEvent<LinkClickEventDetail>", - "references": [ - { - "name": "LinkClickEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Link.js" - } - ] + "text": "CustomEvent" }, - "description": "Fired when the component is triggered either with a mouse/tap\nor by using the Enter key.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "boolean" - }, - "name": "altKey", - "_ui5privacy": "public", - "description": "Returns whether the \"ALT\" key was pressed when the event was triggered." - }, - { - "type": { - "text": "boolean" - }, - "name": "ctrlKey", - "_ui5privacy": "public", - "description": "Returns whether the \"CTRL\" key was pressed when the event was triggered." - }, - { - "type": { - "text": "boolean" - }, - "name": "metaKey", - "_ui5privacy": "public", - "description": "Returns whether the \"META\" key was pressed when the event was triggered." - }, - { - "type": { - "text": "boolean" - }, - "name": "shiftKey", - "_ui5privacy": "public", - "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered." - } - ] + "description": "Fired when the component is expanded/collapsed by user interaction.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true } ], "attributes": [ { - "description": "Defines whether the component is disabled.\n\n**Note:** When disabled, the click event cannot be triggered by the user.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the tooltip of the component.", - "name": "tooltip", + "description": "This property is used to set the header text of the component.\nThe text is visible in both expanded and collapsed states.\n\n**Note:** This property is overridden by the `header` slot.", + "name": "header-text", "default": "undefined", - "fieldName": "tooltip", + "fieldName": "headerText", "type": { "text": "string | undefined" } }, { - "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.", - "name": "href", - "default": "undefined", - "fieldName": "href", + "description": "Determines whether the component is in a fixed state that is not\nexpandable/collapsible by user interaction.", + "name": "fixed", + "default": "false", + "fieldName": "fixed", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", - "name": "target", - "default": "undefined", - "fieldName": "target", + "description": "Indicates whether the component is collapsed and only the header is displayed.", + "name": "collapsed", + "default": "false", + "fieldName": "collapsed", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the component design.\n\n**Note:** Avaialble options are `Default`, `Subtle`, and `Emphasized`.", - "name": "design", - "default": "\"Default\"", - "fieldName": "design", + "description": "Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.", + "name": "no-animation", + "default": "false", + "fieldName": "noAnimation", "type": { - "text": "\"Default\" | \"Emphasized\" | \"Subtle\"" + "text": "boolean" } }, { - "description": "Defines the target area size of the link:\n- **InteractiveAreaSize.Normal**: The default target area size.\n- **InteractiveAreaSize.Large**: The target area size is enlarged to 24px in height.\n\n**Note:**The property is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes.\n**Note:**To improve <code>ui5-link</code>'s reliability and usability, it is recommended to use the <code>InteractiveAreaSize.Large</code> value in scenarios where the <code>ui5-link</code> component is placed inside another interactive component, such as a list item or a table cell.\nSetting the <code>interactiveAreaSize</code> property to <code>InteractiveAreaSize.Large</code> increases the <code>ui5-link</code>'s invisible touch area. As a result, the user's intended one-time selection command is more likely to activate the desired <code>ui5-link</code>, with minimal chance of unintentionally activating the underlying component.", - "name": "interactive-area-size", - "default": "\"Normal\"", - "fieldName": "interactiveAreaSize", + "description": "Sets the accessible ARIA role of the component.\nDepending on the usage, you can change the role from the default `Form`\nto `Region` or `Complementary`.", + "name": "accessible-role", + "default": "\"Form\"", + "fieldName": "accessibleRole", "type": { - "text": "\"Normal\" | \"Large\"" + "text": "\"Complementary\" | \"Form\" | \"Region\"" } }, { - "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** By default the text will wrap. If \"None\" is set - the text will truncate.", - "name": "wrapping-type", - "default": "\"Normal\"", - "fieldName": "wrappingType", + "description": "Defines the \"aria-level\" of component heading,\nset by the `headerText`.", + "name": "header-level", + "default": "\"H2\"", + "fieldName": "headerLevel", "type": { - "text": "\"None\" | \"Normal\"" + "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"" } }, { @@ -15576,57 +16953,12 @@ } }, { - "description": "Receives id(or many ids) of the elements that label the input", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the ARIA role of the component.\n\n**Note:** Use the <code>LinkAccessibleRole.Button</code> role in cases when navigation is not expected to occur and the href property is not defined.", - "name": "accessible-role", - "default": "\"Link\"", - "fieldName": "accessibleRole", - "type": { - "text": "\"Button\" | \"Link\"" - } - }, - { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", - "type": { - "text": "LinkAccessibilityAttributes" - } - }, - { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the icon, displayed as graphical element within the component before the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the icon, displayed as graphical element within the component after the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "end-icon", - "default": "undefined", - "fieldName": "endIcon", + "description": "Indicates whether the Panel header is sticky or not.\nIf stickyHeader is set to true, then whenever you scroll the content or\nthe application, the header of the panel will be always visible and\na solid color will be used for its design.", + "name": "sticky-header", + "default": "false", + "fieldName": "stickyHeader", "type": { - "text": "string | undefined" + "text": "boolean" } } ], @@ -15635,7 +16967,7 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-link", + "tagName": "ui5-panel", "customElement": true, "_ui5privacy": "public" } @@ -15645,55 +16977,71 @@ "kind": "js", "name": "default", "declaration": { - "name": "Link", - "module": "dist/Link.js" + "name": "Panel", + "module": "dist/Panel.js" } }, { "kind": "custom-element-definition", - "name": "ui5-link", + "name": "ui5-panel", "declaration": { - "name": "Link", - "module": "dist/Link.js" + "name": "Panel", + "module": "dist/Panel.js" } } ] }, { "kind": "javascript-module", - "path": "dist/List.js", + "path": "dist/Popover.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-list` component allows displaying a list of items, advanced keyboard\nhandling support for navigating between items, and predefined modes to improve the development efficiency.\n\nThe `ui5-list` is a container for the available list items:\n\n- `ui5-li`\n- `ui5-li-custom`\n- `ui5-li-group`\n\nTo benefit from the built-in selection mechanism, you can use the available\nselection modes, such as\n`Single`, `Multiple` and `Delete`.\n\nAdditionally, the `ui5-list` provides header, footer, and customization for the list item separators.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe `ui5-list` provides advanced keyboard handling.\nWhen a list is focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Up] or [Down] - Navigates up and down the items\n- [Home] - Navigates to first item\n- [End] - Navigates to the last item\n\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete),\nwhen the `selectionMode` property is in use:\n\n- [Space] - Select an item (if `type` is 'Active') when `selectionMode` is selection\n- [Delete] - Delete an item if `selectionMode` property is `Delete`\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/List.js\";`\n\n`import \"@ui5/webcomponents/dist/ListItemStandard.js\";` (for `ui5-li`)\n\n`import \"@ui5/webcomponents/dist/ListItemCustom.js\";` (for `ui5-li-custom`)\n\n`import \"@ui5/webcomponents/dist/ListItemGroup.js\";` (for `ui5-li-group`)", - "name": "List", + "description": "### Overview\n\nThe `ui5-popover` component displays additional information for an object\nin a compact way and without leaving the page.\nThe Popover can contain various UI elements, such as fields, tables, images, and charts.\nIt can also include actions in the footer.\n\n### Structure\n\nThe popover has three main areas:\n\n- Header (optional)\n- Content\n- Footer (optional)\n\n**Note:** The `ui5-popover` is closed when the user clicks\nor taps outside the popover\nor selects an action within the popover. You can prevent this with the\n`modal` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Popover.js\";`", + "name": "Popover", "cssParts": [ { - "description": "Used to style the button, that is used for growing of the component", - "name": "growing-button" + "description": "Used to style the header of the component", + "name": "header" }, { - "description": "Used to style the button inner element", - "name": "growing-button-inner" + "description": "Used to style the content of the component", + "name": "content" + }, + { + "description": "Used to style the footer of the component", + "name": "footer" } ], "slots": [ { - "name": "default", - "description": "Defines the items of the component.\n\n**Note:** Use `ui5-li`, `ui5-li-custom`, and `ui5-li-group` for the intended design.", - "_ui5propertyName": "items", + "name": "header", + "description": "Defines the header HTML Element.", "_ui5type": { - "text": "Array<ListItemBase | ListItemGroup>" + "text": "Array<HTMLElement>" }, "_ui5privacy": "public" }, { - "name": "header", - "description": "Defines the component header.\n\n**Note:** When `header` is set, the\n`headerText` property is ignored.", + "name": "footer", + "description": "Defines the footer HTML Element.", "_ui5type": { "text": "Array<HTMLElement>" }, "_ui5privacy": "public" + }, + { + "name": "default", + "description": "Defines the content of the Popup.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } } ], "members": [ @@ -15703,163 +17051,183 @@ "type": { "text": "string | undefined" }, - "description": "Defines the component header text.\n\n**Note:** If `header` is set this property is ignored.", + "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "footerText", + "name": "placement", "type": { - "text": "string | undefined" + "text": "PopoverPlacement", + "references": [ + { + "name": "PopoverPlacement", + "package": "@ui5/webcomponents", + "module": "dist/types/PopoverPlacement.js" + } + ] }, - "description": "Defines the footer text.", - "default": "undefined", + "default": "\"End\"", + "description": "Determines on which side the component is placed at.", "privacy": "public" }, { "kind": "field", - "name": "indent", + "name": "horizontalAlign", "type": { - "text": "boolean" + "text": "PopoverHorizontalAlign", + "references": [ + { + "name": "PopoverHorizontalAlign", + "package": "@ui5/webcomponents", + "module": "dist/types/PopoverHorizontalAlign.js" + } + ] }, - "default": "false", - "description": "Determines whether the component is indented.", + "default": "\"Center\"", + "description": "Determines the horizontal alignment of the component.", "privacy": "public" }, { "kind": "field", - "name": "selectionMode", + "name": "verticalAlign", "type": { - "text": "ListSelectionMode", + "text": "PopoverVerticalAlign", "references": [ { - "name": "ListSelectionMode", + "name": "PopoverVerticalAlign", "package": "@ui5/webcomponents", - "module": "dist/types/ListSelectionMode.js" + "module": "dist/types/PopoverVerticalAlign.js" } ] }, - "default": "\"None\"", - "description": "Defines the selection mode of the component.", + "default": "\"Center\"", + "description": "Determines the vertical alignment of the component.", "privacy": "public" }, { "kind": "field", - "name": "noDataText", + "name": "modal", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the text that is displayed when the component contains no items.", - "default": "undefined", + "default": "false", + "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.", "privacy": "public" }, { "kind": "field", - "name": "separators", + "name": "hideArrow", "type": { - "text": "ListSeparator", - "references": [ - { - "name": "ListSeparator", - "package": "@ui5/webcomponents", - "module": "dist/types/ListSeparator.js" - } - ] + "text": "boolean" }, - "default": "\"All\"", - "description": "Defines the item separator style that is used.", - "privacy": "public" + "default": "false", + "description": "Determines whether the component arrow is hidden.", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "growing", + "name": "allowTargetOverlap", "type": { - "text": "ListGrowingMode", - "references": [ - { - "name": "ListGrowingMode", - "package": "@ui5/webcomponents", - "module": "dist/types/ListGrowingMode.js" - } - ] + "text": "boolean" }, - "default": "\"None\"", - "description": "Defines whether the component will have growing capability either by pressing a `More` button,\nor via user scroll. In both cases `load-more` event is fired.\n\n**Restrictions:** `growing=\"Scroll\"` is not supported for Internet Explorer,\non IE the component will fallback to `growing=\"Button\"`.", + "default": "false", + "description": "Determines if there is no enough space, the component can be placed\nover the target.", + "privacy": "public" + }, + { + "kind": "field", + "name": "opener", + "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", "privacy": "public", - "_ui5since": "1.0.0-rc.13" + "default": "undefined", + "type": { + "text": "HTMLElement | string | null | undefined" + }, + "_ui5since": "1.2.0" }, { "kind": "field", - "name": "growingButtonText", + "name": "initialFocus", "type": { "text": "string | undefined" }, - "description": "Defines the text that will be displayed inside the growing button.\n\n**Note:** If not specified a built-in text will be displayed.\n\n**Note:** This property takes effect if the `growing` property is set to the `Button`.", + "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", "default": "undefined", "privacy": "public", - "_ui5since": "1.24" + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } }, { "kind": "field", - "name": "loading", + "name": "preventFocusRestore", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the component would display a loading indicator over the list.", + "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", "privacy": "public", - "_ui5since": "1.0.0-rc.6" + "_ui5since": "1.0.0-rc.8", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } }, { "kind": "field", - "name": "loadingDelay", + "name": "accessibleName", "type": { - "text": "number" + "text": "string | undefined" }, - "default": "1000", - "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", - "privacy": "public" + "description": "Defines the accessible name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } }, { "kind": "field", - "name": "accessibleName", + "name": "accessibleNameRef", "type": { "text": "string | undefined" }, - "description": "Defines the accessible name of the component.", + "description": "Defines the IDs of the elements that label the component.", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "1.1.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "accessibleRole", "type": { - "text": "ListAccessibilityAttributes", + "text": "PopupAccessibleRole", "references": [ { - "name": "ListAccessibilityAttributes", + "name": "PopupAccessibleRole", "package": "@ui5/webcomponents", - "module": "dist/List.js" + "module": "dist/types/PopupAccessibleRole.js" } ] }, - "default": "{}", - "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.", - "privacy": "public", - "_ui5since": "2.13.0" - }, - { - "kind": "field", - "name": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, - "description": "Defines the IDs of the elements that label the component.", - "default": "undefined", + "default": "\"Dialog\"", + "description": "Allows setting a custom role.", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "1.10.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } }, { "kind": "field", @@ -15870,7 +17238,11 @@ "description": "Defines the accessible description of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "2.5.0" + "_ui5since": "2.11.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } }, { "kind": "field", @@ -15878,303 +17250,65 @@ "type": { "text": "string | undefined" }, - "description": "Defines the IDs of the elements that describe the component.", + "description": "Receives id(or many ids) of the elements that describe the component.", "default": "undefined", "privacy": "public", - "_ui5since": "2.5.0" + "_ui5since": "2.11.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } }, { "kind": "field", - "name": "accessibleRole", + "name": "preventInitialFocus", "type": { - "text": "ListAccessibleRole", - "references": [ - { - "name": "ListAccessibleRole", - "package": "@ui5/webcomponents", - "module": "dist/types/ListAccessibleRole.js" - } - ] + "text": "boolean" }, - "default": "\"List\"", - "description": "Defines the accessible role of the component.", + "default": "false", + "description": "Indicates whether initial focus should be prevented.", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "2.0.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } }, { "kind": "field", - "name": "listItems", - "type": { - "text": "Array<ListItemBase>", - "references": [ - { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - } - ] - }, - "description": "Returns an array containing the list item instances without the groups in a flat structure.", - "default": "[]", + "name": "open", + "description": "Indicates if the element is open", "privacy": "public", - "readonly": true, - "_ui5since": "2.0.0" - } - ], - "events": [ - { - "name": "item-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<ListItemClickEventDetail>", - "references": [ - { - "name": "ListItemClickEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/List.js" - } - ] - }, - "description": "Fired when an item is activated, unless the item's `type` property\nis set to `Inactive`.\n\n**Note**: This event is not triggered by interactions with selection components such as the checkboxes and radio buttons,\nassociated with non-default `selectionMode` values, or if any other **interactive** component\n(such as a button or input) within the list item is directly clicked.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "The clicked item." - } - ] - }, - { - "name": "item-close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<ListItemCloseEventDetail>", - "references": [ - { - "name": "ListItemCloseEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/List.js" - } - ] - }, - "description": "Fired when the `Close` button of any item is clicked\n\n**Note:** This event is only applicable to list items that can be closed (such as notification list items),\nnot to be confused with `item-delete`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "1.0.0-rc.8", - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "the item about to be closed." - } - ] - }, - { - "name": "item-toggle", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<ListItemToggleEventDetail>", - "references": [ - { - "name": "ListItemToggleEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/List.js" - } - ] - }, - "description": "Fired when the `Toggle` button of any item is clicked.\n\n**Note:** This event is only applicable to list items that can be toggled (such as notification group list items).", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "1.0.0-rc.8", - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "the toggled item." - } - ] - }, - { - "name": "item-delete", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<ListItemDeleteEventDetail>", - "references": [ - { - "name": "ListItemDeleteEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/List.js" - } - ] - }, - "description": "Fired when the Delete button of any item is pressed.\n\n**Note:** A Delete button is displayed on each item,\nwhen the component `selectionMode` property is set to `Delete`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "the deleted item." - } - ] - }, - { - "name": "selection-change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<ListSelectionChangeEventDetail>", - "references": [ - { - "name": "ListSelectionChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/List.js" - } - ] - }, - "description": "Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` selection modes.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "Array<ListItemBase>", - "references": [ - { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - } - ] - }, - "name": "selectedItems", - "_ui5privacy": "public", - "description": "An array of the selected items." - }, - { - "type": { - "text": "Array<ListItemBase>", - "references": [ - { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - } - ] - }, - "name": "previouslySelectedItems", - "_ui5privacy": "public", - "description": "An array of the previously selected items." - } - ] - }, - { - "name": "load-more", - "_ui5privacy": "public", + "default": "false", "type": { - "text": "CustomEvent" + "text": "boolean" }, - "description": "Fired when the user scrolls to the bottom of the list.\n\n**Note:** The event is fired when the `growing='Scroll'` property is enabled.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "1.0.0-rc.6" + "_ui5since": "1.2.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } }, { - "name": "move-over", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<ListMoveEventDetail>", - "references": [ - { - "name": "ListMoveEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/List.js" - } - ] - }, - "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5since": "2.0.0", - "_ui5parameters": [ - { - "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." + "kind": "method", + "name": "applyFocus", + "return": { + "type": { + "text": "Promise<void>" }, - { - "type": { - "text": "object" - }, - "name": "destination", - "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." - } - ] - }, - { - "name": "move", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<ListMoveEventDetail>", - "references": [ - { - "name": "ListMoveEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/List.js" - } - ] + "description": "Promise that resolves when the focus is applied" }, - "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." - }, - { - "type": { - "text": "object" - }, - "name": "destination", - "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." - } - ] + "description": "Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.", + "privacy": "public", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } } ], "attributes": [ { - "description": "Defines the component header text.\n\n**Note:** If `header` is set this property is ignored.", + "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", "name": "header-text", "default": "undefined", "fieldName": "headerText", @@ -16183,84 +17317,92 @@ } }, { - "description": "Defines the footer text.", - "name": "footer-text", - "default": "undefined", - "fieldName": "footerText", + "description": "Determines on which side the component is placed at.", + "name": "placement", + "default": "\"End\"", + "fieldName": "placement", "type": { - "text": "string | undefined" + "text": "\"Top\" | \"Bottom\" | \"Start\" | \"End\"" } }, { - "description": "Determines whether the component is indented.", - "name": "indent", - "default": "false", - "fieldName": "indent", + "description": "Determines the horizontal alignment of the component.", + "name": "horizontal-align", + "default": "\"Center\"", + "fieldName": "horizontalAlign", "type": { - "text": "boolean" + "text": "\"Start\" | \"End\" | \"Center\" | \"Stretch\"" } }, { - "description": "Defines the selection mode of the component.", - "name": "selection-mode", - "default": "\"None\"", - "fieldName": "selectionMode", + "description": "Determines the vertical alignment of the component.", + "name": "vertical-align", + "default": "\"Center\"", + "fieldName": "verticalAlign", "type": { - "text": "\"None\" | \"Single\" | \"Multiple\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Delete\"" + "text": "\"Top\" | \"Bottom\" | \"Center\" | \"Stretch\"" } }, { - "description": "Defines the text that is displayed when the component contains no items.", - "name": "no-data-text", - "default": "undefined", - "fieldName": "noDataText", + "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.", + "name": "modal", + "default": "false", + "fieldName": "modal", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Defines the item separator style that is used.", - "name": "separators", - "default": "\"All\"", - "fieldName": "separators", + "description": "Determines whether the component arrow is hidden.", + "name": "hide-arrow", + "default": "false", + "fieldName": "hideArrow", "type": { - "text": "\"None\" | \"All\" | \"Inner\"" + "text": "boolean" } }, { - "description": "Defines whether the component will have growing capability either by pressing a `More` button,\nor via user scroll. In both cases `load-more` event is fired.\n\n**Restrictions:** `growing=\"Scroll\"` is not supported for Internet Explorer,\non IE the component will fallback to `growing=\"Button\"`.", - "name": "growing", - "default": "\"None\"", - "fieldName": "growing", + "description": "Determines if there is no enough space, the component can be placed\nover the target.", + "name": "allow-target-overlap", + "default": "false", + "fieldName": "allowTargetOverlap", "type": { - "text": "\"None\" | \"Button\" | \"Scroll\"" + "text": "boolean" } }, { - "description": "Defines the text that will be displayed inside the growing button.\n\n**Note:** If not specified a built-in text will be displayed.\n\n**Note:** This property takes effect if the `growing` property is set to the `Button`.", - "name": "growing-button-text", + "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", + "name": "opener", "default": "undefined", - "fieldName": "growingButtonText", + "fieldName": "opener", "type": { - "text": "string | undefined" + "text": "any" } }, { - "description": "Defines if the component would display a loading indicator over the list.", - "name": "loading", - "default": "false", - "fieldName": "loading", + "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", + "name": "initial-focus", + "default": "undefined", + "fieldName": "initialFocus", "type": { - "text": "boolean" + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } }, { - "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", - "name": "loading-delay", - "default": "1000", - "fieldName": "loadingDelay", + "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", + "name": "prevent-focus-restore", + "default": "false", + "fieldName": "preventFocusRestore", "type": { - "text": "number" + "text": "boolean" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } }, { @@ -16270,15 +17412,10 @@ "fieldName": "accessibleName", "type": { "text": "string | undefined" - } - }, - { - "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", - "type": { - "text": "ListAccessibilityAttributes" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } }, { @@ -16288,6 +17425,23 @@ "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, + { + "description": "Allows setting a custom role.", + "name": "accessible-role", + "default": "\"Dialog\"", + "fieldName": "accessibleRole", + "type": { + "text": "\"None\" | \"Dialog\" | \"AlertDialog\"" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } }, { @@ -16297,289 +17451,452 @@ "fieldName": "accessibleDescription", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } }, { - "description": "Defines the IDs of the elements that describe the component.", + "description": "Receives id(or many ids) of the elements that describe the component.", "name": "accessible-description-ref", "default": "undefined", "fieldName": "accessibleDescriptionRef", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } }, { - "description": "Defines the accessible role of the component.", - "name": "accessible-role", - "default": "\"List\"", - "fieldName": "accessibleRole", + "description": "Indicates whether initial focus should be prevented.", + "name": "prevent-initial-focus", + "default": "false", + "fieldName": "preventInitialFocus", "type": { - "text": "\"List\" | \"Menu\" | \"Tree\" | \"ListBox\"" + "text": "boolean" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } }, { - "description": "Returns an array containing the list item instances without the groups in a flat structure.", - "name": "list-items", - "default": "[]", - "fieldName": "listItems", + "description": "Indicates if the element is open", + "name": "open", + "default": "false", + "fieldName": "open", "type": { "text": "any" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "Popup", + "package": "@ui5/webcomponents", + "module": "dist/Popup.js" }, - "tagName": "ui5-list", + "tagName": "ui5-popover", "customElement": true, - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "List", - "module": "dist/List.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-list", - "declaration": { - "name": "List", - "module": "dist/List.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/ListItem.js", - "declarations": [ - { - "kind": "class", - "description": "A class to serve as a base\nfor the `ListItemStandard` and `ListItemCustom` classes.", - "name": "ListItem", - "slots": [ + "_ui5since": "1.0.0-rc.6", + "_ui5privacy": "public", + "events": [ { - "name": "deleteButton", - "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.", - "_ui5since": "1.9.0", - "_ui5type": { - "text": "Array<IButton>", - "references": [ - { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" + "name": "before-open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, + { + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the component is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, + { + "name": "before-close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<PopupBeforeCloseEventDetail>", + "references": [ + { + "name": "PopupBeforeCloseEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Popup.js" } ] }, + "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "escPressed", + "_ui5privacy": "public", + "description": "Indicates that `ESC` key has triggered the event." + } + ], + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, + { + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the component is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Popover", + "module": "dist/Popover.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-popover", + "declaration": { + "name": "Popover", + "module": "dist/Popover.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/Popup.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\nBase class for all popup Web Components.\n\nIf you need to create your own popup-like custom UI5 Web Components.\n\n1. The Popup class handles modality:\n - The \"isModal\" getter can be overridden by derivatives to provide their own conditions when they are modal or not\n - Derivatives may call the \"blockPageScrolling\" and \"unblockPageScrolling\" static methods to temporarily remove scrollbars on the html element\n - Derivatives may call the \"openPopup\" and \"closePopup\" methods which handle focus, manage the popup registry and for modal popups, manage the blocking layer\n\n 2. Provides blocking layer (relevant for modal popups only):\n - Controlled by the \"open\" and \"close\" methods\n\n3. The Popup class \"traps\" focus:\n - Derivatives may call the \"applyInitialFocus\" method (usually when opening, to transfer focus inside the popup)\n\n4. The template of this component exposes two inline partials you can override in derivatives:\n - beforeContent (upper part of the box, useful for header/title/close button)\n - afterContent (lower part, useful for footer/action buttons)", + "name": "Popup", + "slots": [ + { + "name": "default", + "description": "Defines the content of the Popup.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<HTMLElement>" + }, "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "type", + "name": "initialFocus", "type": { - "text": "ListItemType", - "references": [ - { - "name": "ListItemType", - "package": "@ui5/webcomponents", - "module": "dist/types/ListItemType.js" - } - ] + "text": "string | undefined" }, - "default": "\"Active\"", - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "preventFocusRestore", "type": { - "text": "ListItemAccessibilityAttributes", - "references": [ - { - "name": "ListItemAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" - } - ] + "text": "boolean" }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", + "default": "false", + "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", "privacy": "public", - "_ui5since": "1.15.0" + "_ui5since": "1.0.0-rc.8" }, { "kind": "field", - "name": "navigated", + "name": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "description": "Defines the accessible name of the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.10.0" + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "tooltip", + "name": "accessibleNameRef", "type": { "text": "string | undefined" }, - "description": "Defines the text of the tooltip that would be displayed for the list item.", + "description": "Defines the IDs of the elements that label the component.", "default": "undefined", "privacy": "public", - "_ui5since": "1.23.0" + "_ui5since": "1.1.0" }, { "kind": "field", - "name": "highlight", + "name": "accessibleRole", "type": { - "text": "Highlight", + "text": "PopupAccessibleRole", "references": [ { - "name": "Highlight", + "name": "PopupAccessibleRole", "package": "@ui5/webcomponents", - "module": "dist/types/Highlight.js" + "module": "dist/types/PopupAccessibleRole.js" } ] }, - "default": "\"None\"", - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "default": "\"Dialog\"", + "description": "Allows setting a custom role.", "privacy": "public", - "_ui5since": "1.24" + "_ui5since": "1.10.0" }, { "kind": "field", - "name": "selected", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.11.0" + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that describe the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.11.0" + }, + { + "kind": "field", + "name": "preventInitialFocus", "type": { "text": "boolean" }, "default": "false", - "description": "Defines the selected state of the component.", + "description": "Indicates whether initial focus should be prevented.", "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "open", + "description": "Indicates if the element is open", + "privacy": "public", + "default": "false", + "type": { + "text": "boolean" + }, + "_ui5since": "1.2.0" + }, + { + "kind": "method", + "name": "applyFocus", + "return": { + "type": { + "text": "Promise<void>" + }, + "description": "Promise that resolves when the focus is applied" + }, + "description": "Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.", + "privacy": "public" } ], "events": [ { - "name": "detail-click", + "name": "before-open", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the user clicks on the detail button when type is `Detail`.", + "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false + }, + { + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the component is opened.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "_ui5Bubbles": false + }, + { + "name": "before-close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<PopupBeforeCloseEventDetail>", + "references": [ + { + "name": "PopupBeforeCloseEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Popup.js" + } + ] + }, + "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "escPressed", + "_ui5privacy": "public", + "description": "Indicates that `ESC` key has triggered the event." + } + ] + }, + { + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the component is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false } ], "attributes": [ { - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", - "name": "type", - "default": "\"Active\"", - "fieldName": "type", + "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", + "name": "initial-focus", + "default": "undefined", + "fieldName": "initialFocus", "type": { - "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" + "text": "string | undefined" } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", + "name": "prevent-focus-restore", + "default": "false", + "fieldName": "preventFocusRestore", "type": { - "text": "ListItemAccessibilityAttributes" + "text": "boolean" } }, { - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", - "name": "navigated", - "default": "false", - "fieldName": "navigated", + "description": "Defines the accessible name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines the text of the tooltip that would be displayed for the list item.", - "name": "tooltip", + "description": "Defines the IDs of the elements that label the component.", + "name": "accessible-name-ref", "default": "undefined", - "fieldName": "tooltip", + "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" } }, { - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "highlight", - "default": "\"None\"", - "fieldName": "highlight", + "description": "Allows setting a custom role.", + "name": "accessible-role", + "default": "\"Dialog\"", + "fieldName": "accessibleRole", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Dialog\" | \"AlertDialog\"" } }, { - "description": "Defines the selected state of the component.", - "name": "selected", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Indicates whether initial focus should be prevented.", + "name": "prevent-initial-focus", "default": "false", - "fieldName": "selected", + "fieldName": "preventInitialFocus", "type": { "text": "boolean" } + }, + { + "description": "Indicates if the element is open", + "name": "open", + "default": "false", + "fieldName": "open", + "type": { + "text": "any" + } } ], - "superclass": { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - }, - "customElement": true, - "_ui5privacy": "public", - "_ui5abstract": true - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/ListItemBase.js", - "declarations": [ - { - "kind": "class", - "description": "A class to serve as a foundation\nfor the `ListItem` and `ListItemGroupHeader` classes.", - "name": "ListItemBase", "superclass": { "name": "UI5Element", "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, "customElement": true, - "_ui5privacy": "public", - "_ui5abstract": true, - "members": [] + "_ui5privacy": "public" } ], "exports": [ @@ -16587,340 +17904,440 @@ "kind": "js", "name": "default", "declaration": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" + "name": "Popup", + "module": "dist/Popup.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ListItemCustom.js", + "path": "dist/ProgressIndicator.js", "declarations": [ { "kind": "class", - "description": "A component to be used as custom list item within the `ui5-list`\nthe same way as the standard `ui5-li`.\n\nThe component accepts arbitrary HTML content to allow full customization.", - "name": "ListItemCustom", + "description": "### Overview\nShows the progress of a process in a graphical way. To indicate the progress,\nthe inside of the component is filled with a color.\n\n### Responsive Behavior\nYou can change the size of the Progress Indicator by changing its `width` or `height` CSS properties.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ProgressIndicator.js\";`", + "name": "ProgressIndicator", "cssParts": [ { - "description": "Used to style the main li tag of the list item", - "name": "native-li" - }, - { - "description": "Used to style the content area of the list item", - "name": "content" - }, - { - "description": "Used to style the button rendered when the list item is of type detail", - "name": "detail-button" - }, - { - "description": "Used to style the button rendered when the list item is in delete mode", - "name": "delete-button" - }, - { - "description": "Used to style the radio button rendered when the list item is in single selection mode", - "name": "radio" + "description": "Used to style the main bar of the `ui5-progress-indicator`", + "name": "bar" }, { - "description": "Used to style the checkbox rendered when the list item is in multiple selection mode", - "name": "checkbox" + "description": "Used to style the remaining bar of the `ui5-progress-indicator`", + "name": "remaining-bar" } ], - "slots": [ - { - "description": "Defines the content of the component.", - "name": "default", - "_ui5privacy": "public", - "_ui5type": { - "text": "Array<Node>" - } - }, + "members": [ { - "name": "deleteButton", - "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.", - "_ui5since": "1.9.0", - "_ui5type": { - "text": "Array<IButton>", - "references": [ - { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - } - ], - "members": [ + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.16.0" + }, { "kind": "field", - "name": "movable", + "name": "hideValue", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the item is movable.", - "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } + "description": "Defines whether the component value is shown.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "value", + "type": { + "text": "number" + }, + "default": "0", + "description": "Specifies the numerical value in percent for the length of the component.\n\n**Note:**\nIf a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0.", + "privacy": "public" + }, + { + "kind": "field", + "name": "displayValue", "type": { "text": "string | undefined" }, - "description": "Defines the text alternative of the component.\n\n**Note**: If not provided a default text alternative will be set, if present.", + "description": "Specifies the text value to be displayed in the bar.\n\n**Note:**\n\n- If there is no value provided or the value is empty, the default percentage value is shown.\n- If `hideValue` property is `true` both the `displayValue` and `value` property values are not shown.", "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "privacy": "public" }, { "kind": "field", - "name": "type", + "name": "valueState", "type": { - "text": "ListItemType", + "text": "ValueState", "references": [ { - "name": "ListItemType", - "package": "@ui5/webcomponents", - "module": "dist/types/ListItemType.js" + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" } ] }, - "default": "\"Active\"", - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", - "privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether the component value is shown.", + "name": "hide-value", + "default": "false", + "fieldName": "hideValue", + "type": { + "text": "boolean" + } + }, + { + "description": "Specifies the numerical value in percent for the length of the component.\n\n**Note:**\nIf a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0.", + "name": "value", + "default": "0", + "fieldName": "value", + "type": { + "text": "number" + } + }, + { + "description": "Specifies the text value to be displayed in the bar.\n\n**Note:**\n\n- If there is no value provided or the value is empty, the default percentage value is shown.\n- If `hideValue` property is `true` both the `displayValue` and `value` property values are not shown.", + "name": "display-value", + "default": "undefined", + "fieldName": "displayValue", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", + "type": { + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-progress-indicator", + "customElement": true, + "_ui5since": "1.0.0-rc.8", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ProgressIndicator", + "module": "dist/ProgressIndicator.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-progress-indicator", + "declaration": { + "name": "ProgressIndicator", + "module": "dist/ProgressIndicator.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/RadioButton.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-radio-button` component enables users to select a single option from a set of options.\nWhen a `ui5-radio-button` is selected by the user, the\n`change` event is fired.\nWhen a `ui5-radio-button` that is within a group is selected, the one\nthat was previously selected gets automatically deselected. You can group radio buttons by using the `name` property.\n\n**Note:** If `ui5-radio-button` is not part of a group, it can be selected once, but can not be deselected back.\n\n### Keyboard Handling\n\nOnce the `ui5-radio-button` is on focus, it might be selected by pressing the Space and Enter keys.\n\nThe Arrow Down/Arrow Up and Arrow Left/Arrow Right keys can be used to change selection between next/previous radio buttons in one group,\nwhile TAB and SHIFT + TAB can be used to enter or leave the radio button group.\n\n**Note:** On entering radio button group, the focus goes to the currently selected radio button.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/RadioButton\";`", + "name": "RadioButton", + "cssParts": [ + { + "description": "Used to style the outer ring of the `ui5-radio-button`.", + "name": "outer-ring" }, + { + "description": "Used to style the inner ring of the `ui5-radio-button`.", + "name": "inner-ring" + } + ], + "members": [ { "kind": "field", - "name": "accessibilityAttributes", + "name": "disabled", "type": { - "text": "ListItemAccessibilityAttributes", - "references": [ - { - "name": "ListItemAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" - } - ] + "text": "boolean" }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", + "default": "false", + "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", + "privacy": "public" + }, + { + "kind": "field", + "name": "readonly", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component isn't editable or selectable.\nHowever, because it's focusable, it still provides visual feedback upon user interaction.", + "privacy": "public" + }, + { + "kind": "field", + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is required.", "privacy": "public", - "_ui5since": "1.15.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.9.0" }, { "kind": "field", - "name": "navigated", + "name": "checked", "type": { "text": "boolean" }, "default": "false", - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.\n\n**Note:** Only enabled radio buttons can be checked.\nRead-only radio buttons are not selectable, and therefore are always unchecked.", "privacy": "public", - "_ui5since": "1.10.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.0.0-rc.15", + "_ui5formProperty": true, + "_ui5formEvents": "change" }, { "kind": "field", - "name": "tooltip", + "name": "text", "type": { "text": "string | undefined" }, - "description": "Defines the text of the tooltip that would be displayed for the list item.", + "description": "Defines the text of the component.", "default": "undefined", - "privacy": "public", - "_ui5since": "1.23.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "privacy": "public" }, { "kind": "field", - "name": "highlight", + "name": "valueState", "type": { - "text": "Highlight", + "text": "ValueState", "references": [ { - "name": "Highlight", - "package": "@ui5/webcomponents", - "module": "dist/types/Highlight.js" + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" } ] }, "default": "\"None\"", - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "description": "Defines the value state of the component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "name", + "type": { + "text": "string | undefined" + }, + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\nRadio buttons with the same `name` will form a radio button group.\n\n**Note:** By this name the component will be identified upon submission in an HTML form.\n\n**Note:** The selection can be changed with `ARROW_UP/DOWN` and `ARROW_LEFT/RIGHT` keys between radio buttons in same group.\n\n**Note:** Only one radio button can be selected per group.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the form value of the component.\nWhen a form with a radio button group is submitted, the group's value\nwill be the value of the currently selected radio button.", + "privacy": "public" + }, + { + "kind": "field", + "name": "wrappingType", + "type": { + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] + }, + "default": "\"Normal\"", + "description": "Defines whether the component text wraps when there is not enough space.\n\n**Note:** for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.", + "privacy": "public" + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.24", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "_ui5since": "1.6.0" }, { "kind": "field", - "name": "selected", + "name": "accessibleNameRef", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines the selected state of the component.", + "description": "Defines the IDs of the elements that label the component.", + "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } + "_ui5since": "1.1.0" + } + ], + "events": [ + { + "name": "change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the component checked state changes.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.0.0-rc.15" } ], "attributes": [ { - "description": "Defines whether the item is movable.", - "name": "movable", + "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", "default": "false", - "fieldName": "movable", + "fieldName": "disabled", "type": { "text": "boolean" } }, { - "description": "Defines the text alternative of the component.\n\n**Note**: If not provided a default text alternative will be set, if present.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", - "name": "type", - "default": "\"Active\"", - "fieldName": "type", + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component isn't editable or selectable.\nHowever, because it's focusable, it still provides visual feedback upon user interaction.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", "type": { - "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "text": "boolean" } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", "type": { - "text": "ListItemAccessibilityAttributes" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "text": "boolean" } }, { - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", - "name": "navigated", + "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.\n\n**Note:** Only enabled radio buttons can be checked.\nRead-only radio buttons are not selectable, and therefore are always unchecked.", + "name": "checked", "default": "false", - "fieldName": "navigated", + "fieldName": "checked", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" } }, { - "description": "Defines the text of the tooltip that would be displayed for the list item.", - "name": "tooltip", + "description": "Defines the text of the component.", + "name": "text", "default": "undefined", - "fieldName": "tooltip", + "fieldName": "text", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" } }, { - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "highlight", + "description": "Defines the value state of the component.", + "name": "value-state", "default": "\"None\"", - "fieldName": "highlight", + "fieldName": "valueState", "type": { "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" } }, { - "description": "Defines the selected state of the component.", - "name": "selected", - "default": "false", - "fieldName": "selected", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\nRadio buttons with the same `name` will form a radio button group.\n\n**Note:** By this name the component will be identified upon submission in an HTML form.\n\n**Note:** The selection can be changed with `ARROW_UP/DOWN` and `ARROW_LEFT/RIGHT` keys between radio buttons in same group.\n\n**Note:** Only one radio button can be selected per group.", + "name": "name", + "default": "undefined", + "fieldName": "name", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "text": "string | undefined" + } + }, + { + "description": "Defines the form value of the component.\nWhen a form with a radio button group is submitted, the group's value\nwill be the value of the currently selected radio button.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + } + }, + { + "description": "Defines whether the component text wraps when there is not enough space.\n\n**Note:** for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.", + "name": "wrapping-type", + "default": "\"Normal\"", + "fieldName": "wrappingType", + "type": { + "text": "\"None\" | \"Normal\"" + } + }, + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the IDs of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" } } ], "superclass": { - "name": "ListItem", - "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" }, - "tagName": "ui5-li-custom", + "tagName": "ui5-radio-button", "customElement": true, - "_ui5privacy": "public", - "events": [ - { - "name": "detail-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the user clicks on the detail button when type is `Detail`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - } - ] + "_ui5privacy": "public" } ], "exports": [ @@ -16928,432 +18345,207 @@ "kind": "js", "name": "default", "declaration": { - "name": "ListItemCustom", - "module": "dist/ListItemCustom.js" + "name": "RadioButton", + "module": "dist/RadioButton.js" } }, { "kind": "custom-element-definition", - "name": "ui5-li-custom", + "name": "ui5-radio-button", "declaration": { - "name": "ListItemCustom", - "module": "dist/ListItemCustom.js" + "name": "RadioButton", + "module": "dist/RadioButton.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ListItemGroup.js", + "path": "dist/RadioButtonGroup.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "RadioButtonGroup", + "module": "dist/RadioButtonGroup.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/RangeSlider.js", "declarations": [ { "kind": "class", - "description": "### Overview\nThe `ui5-li-group` is a special list item, used only to create groups of list items.\n\nThis is the item to use inside a `ui5-list`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/ListItemGroup.js\";`", - "name": "ListItemGroup", + "description": "### Overview\nRepresents a numerical interval and two handles (grips) to select a sub-range within it.\nThe purpose of the component to enable visual selection of sub-ranges within a given interval.\n\n### Structure\nThe most important properties of the Range Slider are:\n\n- min - The minimum value of the slider range.\n- max - The maximum value of the slider range.\n- value - The current value of the slider.\n- step - Determines the increments in which the slider will move.\n- showTooltip - Determines if a tooltip should be displayed above the handle.\n- showTickmarks - Displays a visual divider between the step values.\n- labelInterval - Labels some or all of the tickmarks with their values.\n\n#### Notes:\n\n- The right and left handle can be moved individually and their positions could therefore switch.\n- The entire range can be moved along the interval.\n\n### Usage\nThe most common use case is to select and move sub-ranges on a continuous numerical scale.\n\n### Responsive Behavior\nYou can move the currently selected range by clicking on it and dragging it along the interval.\n\n### Keyboard Handling\n\n- `Left or Down Arrow` - Moves a component's handle or the entire selection one step to the left;\n- `Right or Up Arrow` - Moves a component's handle or the entire selection one step to the right;\n- `Left or Down Arrow + Ctrl/Cmd` - Moves a component's handle to the left or the entire range with step equal to 1/10th of the entire range;\n- `Right or Up Arrow + Ctrl/Cmd` - Moves a component's handle to the right or the entire range with step equal to 1/10th of the entire range;\n- `Plus` - Same as `Right or Up Arrow`;\n- `Minus` - Same as `Left or Down Arrow`;\n- `Home` - Moves the entire selection or the selected handle to the beginning of the component's range;\n- `End` - Moves the entire selection or the selected handle to the end of the component's range;\n- `Page Up` - Same as `Right or Up Arrow + Ctrl/Cmd`;\n- `Page Down` - Same as `Left or Down Arrow + Ctrl/Cmd`;\n- `Escape` - Resets the `startValue` and `endValue` properties to the values prior the component focusing;\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/RangeSlider.js\";`", + "name": "RangeSlider", "cssParts": [ { - "description": "Used to style the header item of the group", - "name": "header" - } - ], - "slots": [ + "description": "Used to style the progress container, the horizontal bar that visually represents the range between the minimum and maximum values, of the `ui5-range-slider`.", + "name": "progress-container" + }, { - "name": "default", - "description": "Defines the items of the <code>ui5-li-group</code>.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<ListItemBase>", - "references": [ - { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - } - ] - }, - "_ui5privacy": "public" + "description": "Used to style the progress bar, which shows the progress of the `ui5-range-slider`.", + "name": "progress-bar" }, { - "name": "header", - "description": "Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.", - "_ui5type": { - "text": "Array<ListItemBase>", - "references": [ - { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - } - ] - }, - "_ui5privacy": "public" + "description": "Used to style the handles of the `ui5-range-slider`.", + "name": "handle" } ], "members": [ { "kind": "field", - "name": "headerText", + "name": "startValue", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Defines the header text of the <code>ui5-li-group</code>.", + "default": "0", + "description": "Defines start point of a selection - position of a first handle on the slider.", "privacy": "public", - "default": "undefined" + "_ui5formProperty": true, + "_ui5formEvents": "change,input" }, { "kind": "field", - "name": "headerAccessibleName", + "name": "endValue", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Defines the accessible name of the header.", + "default": "100", + "description": "Defines end point of a selection - position of a second handle on the slider.", "privacy": "public", - "default": "undefined" + "_ui5formProperty": true, + "_ui5formEvents": "change,input" }, { "kind": "field", - "name": "wrappingType", + "name": "min", "type": { - "text": "WrappingType", - "references": [ - { - "name": "WrappingType", - "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" - } - ] + "text": "number" }, - "default": "\"None\"", - "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "default": "0", + "description": "Defines the minimum value of the slider.", "privacy": "public", - "_ui5since": "2.15.0" - } - ], - "events": [ - { - "name": "move-over", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<ListItemGroupMoveEventDetail>", - "references": [ - { - "name": "ListItemGroupMoveEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/ListItemGroup.js" - } - ] - }, - "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5since": "2.1.0", - "_ui5parameters": [ - { - "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." - }, - { - "type": { - "text": "object" - }, - "name": "destination", - "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." - } - ] - }, - { - "name": "move", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<ListItemGroupMoveEventDetail>", - "references": [ - { - "name": "ListItemGroupMoveEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/ListItemGroup.js" - } - ] - }, - "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.1.0", - "_ui5parameters": [ - { - "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." - }, - { - "type": { - "text": "object" - }, - "name": "destination", - "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." - } - ] - } - ], - "attributes": [ - { - "description": "Defines the header text of the <code>ui5-li-group</code>.", - "name": "header-text", - "default": "undefined", - "fieldName": "headerText", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the accessible name of the header.", - "name": "header-accessible-name", - "default": "undefined", - "fieldName": "headerAccessibleName", - "type": { - "text": "string | undefined" + "inheritedFrom": { + "name": "SliderBase", + "module": "dist/SliderBase.js" } }, { - "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", - "name": "wrapping-type", - "default": "\"None\"", - "fieldName": "wrappingType", + "kind": "field", + "name": "max", "type": { - "text": "\"None\" | \"Normal\"" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-li-group", - "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-li-group", - "declaration": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/ListItemGroupHeader.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "ListItemGroupHeader", - "module": "dist/ListItemGroupHeader.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/ListItemStandard.js", - "declarations": [ - { - "kind": "class", - "description": "The `ui5-li` represents the simplest type of item for a `ui5-list`.\n\nThis is a list item,\nproviding the most common use cases such as `text`,\n`image` and `icon`.", - "name": "ListItemStandard", - "cssParts": [ - { - "description": "Used to style the title of the list item", - "name": "title" - }, - { - "description": "Used to style the description of the list item", - "name": "description" - }, - { - "description": "Used to style the additionalText of the list item", - "name": "additional-text" - }, - { - "description": "Used to style the icon of the list item", - "name": "icon" - }, - { - "description": "Used to style the main li tag of the list item", - "name": "native-li" - }, - { - "description": "Used to style the content area of the list item", - "name": "content" - }, - { - "description": "Used to style the button rendered when the list item is of type detail", - "name": "detail-button" - }, - { - "description": "Used to style the button rendered when the list item is in delete mode", - "name": "delete-button" - }, - { - "description": "Used to style the radio button rendered when the list item is in single selection mode", - "name": "radio" - }, - { - "description": "Used to style the checkbox rendered when the list item is in multiple selection mode", - "name": "checkbox" - } - ], - "slots": [ - { - "name": "default", - "description": "Defines the custom formatted text of the component.\n\n**Note:** For optimal text wrapping and a consistent layout, it is strongly recommended to use the `text` property.\n\nUse the `default` slot only when custom formatting with HTML elements (e.g., `<b>`, `<i>`) is required.\nBe aware that wrapping (via `wrappingType=\"Normal\"`) may not function correctly with custom HTML content in the `default` slot.\n\nIf both `text` and `default` slot are used, the `text` property takes precedence.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<Node>" - }, - "_ui5privacy": "public" - }, - { - "name": "image", - "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with it's default size - S.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-li` should be customized in order to fit.", - "_ui5since": "2.0.0", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - }, - { - "name": "deleteButton", - "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.", - "_ui5since": "1.9.0", - "_ui5type": { - "text": "Array<IButton>", - "references": [ - { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] + "text": "number" }, - "_ui5privacy": "public", + "default": "100", + "description": "Defines the maximum value of the slider.", + "privacy": "public", "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } - } - ], - "members": [ + }, { "kind": "field", - "name": "text", + "name": "name", "type": { "text": "string | undefined" }, - "description": "Defines the text of the component.", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", "default": "undefined", "privacy": "public", - "_ui5since": "2.10.0" + "_ui5since": "2.0.0", + "inheritedFrom": { + "name": "SliderBase", + "module": "dist/SliderBase.js" + } }, { "kind": "field", - "name": "description", + "name": "step", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Defines the description displayed right under the item text, if such is present.", - "default": "undefined", + "default": "1", + "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", "privacy": "public", - "_ui5since": "0.8.0" + "inheritedFrom": { + "name": "SliderBase", + "module": "dist/SliderBase.js" + } }, { "kind": "field", - "name": "icon", + "name": "labelInterval", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Defines the `icon` source URI.\n\n**Note:**\nSAP-icons font provides numerous built-in icons. To find all the available icons, see the\n[Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "default": "undefined", - "privacy": "public" + "default": "0", + "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", + "privacy": "public", + "inheritedFrom": { + "name": "SliderBase", + "module": "dist/SliderBase.js" + } }, { "kind": "field", - "name": "iconEnd", + "name": "showTickmarks", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the `icon` should be displayed in the beginning of the list item or in the end.", - "privacy": "public" + "description": "Enables tickmarks visualization for each step.\n\n**Note:** The step must be a positive number.", + "privacy": "public", + "inheritedFrom": { + "name": "SliderBase", + "module": "dist/SliderBase.js" + } }, { "kind": "field", - "name": "additionalText", + "name": "showTooltip", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the `additionalText`, displayed in the end of the list item.", - "default": "undefined", + "default": "false", + "description": "Enables handle tooltip displaying the current value.", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "inheritedFrom": { + "name": "SliderBase", + "module": "dist/SliderBase.js" + } }, { "kind": "field", - "name": "additionalTextState", + "name": "editableTooltip", "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] + "text": "boolean" }, - "default": "\"None\"", - "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "default": "false", + "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "inheritedFrom": { + "name": "SliderBase", + "module": "dist/SliderBase.js" + } }, { "kind": "field", - "name": "movable", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the item is movable.", + "description": "Defines whether the slider is in disabled state.", "privacy": "public", - "_ui5since": "2.0.0", "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } }, { @@ -17362,326 +18554,204 @@ "type": { "text": "string | undefined" }, - "description": "Defines the text alternative of the component.\nNote: If not provided a default text alternative will be set, if present.", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.15", + "_ui5since": "1.4.0", "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" + } + } + ], + "attributes": [ + { + "description": "Defines start point of a selection - position of a first handle on the slider.", + "name": "start-value", + "default": "undefined", + "fieldName": "startValue", + "type": { + "text": "number" } }, { - "kind": "field", - "name": "wrappingType", + "description": "Defines end point of a selection - position of a second handle on the slider.", + "name": "end-value", + "default": "undefined", + "fieldName": "endValue", "type": { - "text": "WrappingType", - "references": [ - { - "name": "WrappingType", - "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", - "privacy": "public", - "_ui5since": "2.10.0" + "text": "number" + } }, { - "kind": "field", - "name": "type", + "description": "Defines the minimum value of the slider.", + "name": "min", + "default": "0", + "fieldName": "min", "type": { - "text": "ListItemType", - "references": [ - { - "name": "ListItemType", - "package": "@ui5/webcomponents", - "module": "dist/types/ListItemType.js" - } - ] + "text": "number" }, - "default": "\"Active\"", - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", - "privacy": "public", "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } }, { - "kind": "field", - "name": "accessibilityAttributes", + "description": "Defines the maximum value of the slider.", + "name": "max", + "default": "100", + "fieldName": "max", "type": { - "text": "ListItemAccessibilityAttributes", - "references": [ - { - "name": "ListItemAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" - } - ] + "text": "number" }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", - "privacy": "public", - "_ui5since": "1.15.0", "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } }, { - "kind": "field", - "name": "navigated", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", - "privacy": "public", - "_ui5since": "1.10.0", "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } }, { - "kind": "field", - "name": "tooltip", + "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", + "name": "step", + "default": "1", + "fieldName": "step", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Defines the text of the tooltip that would be displayed for the list item.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.23.0", "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } }, { - "kind": "field", - "name": "highlight", + "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", + "name": "label-interval", + "default": "0", + "fieldName": "labelInterval", "type": { - "text": "Highlight", - "references": [ - { - "name": "Highlight", - "package": "@ui5/webcomponents", - "module": "dist/types/Highlight.js" - } - ] + "text": "number" }, - "default": "\"None\"", - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "privacy": "public", - "_ui5since": "1.24", "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } }, { - "kind": "field", - "name": "selected", + "description": "Enables tickmarks visualization for each step.\n\n**Note:** The step must be a positive number.", + "name": "show-tickmarks", + "default": "false", + "fieldName": "showTickmarks", "type": { "text": "boolean" }, - "default": "false", - "description": "Defines the selected state of the component.", - "privacy": "public", "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } - } - ], - "attributes": [ + }, { - "description": "Defines the text of the component.", - "name": "text", - "default": "undefined", - "fieldName": "text", + "description": "Enables handle tooltip displaying the current value.", + "name": "show-tooltip", + "default": "false", + "fieldName": "showTooltip", "type": { - "text": "string | undefined" + "text": "boolean" + }, + "inheritedFrom": { + "name": "SliderBase", + "module": "dist/SliderBase.js" } }, { - "description": "Defines the description displayed right under the item text, if such is present.", - "name": "description", - "default": "undefined", - "fieldName": "description", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the `icon` source URI.\n\n**Note:**\nSAP-icons font provides numerous built-in icons. To find all the available icons, see the\n[Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines whether the `icon` should be displayed in the beginning of the list item or in the end.", - "name": "icon-end", - "default": "false", - "fieldName": "iconEnd", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the `additionalText`, displayed in the end of the list item.", - "name": "additional-text", - "default": "undefined", - "fieldName": "additionalText", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "additional-text-state", - "default": "\"None\"", - "fieldName": "additionalTextState", - "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" - } - }, - { - "description": "Defines whether the item is movable.", - "name": "movable", + "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", + "name": "editable-tooltip", "default": "false", - "fieldName": "movable", + "fieldName": "editableTooltip", "type": { "text": "boolean" - } - }, - { - "description": "Defines the text alternative of the component.\nNote: If not provided a default text alternative will be set, if present.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", - "name": "wrapping-type", - "default": "\"None\"", - "fieldName": "wrappingType", - "type": { - "text": "\"None\" | \"Normal\"" - } - }, - { - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", - "name": "type", - "default": "\"Active\"", - "fieldName": "type", - "type": { - "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", - "type": { - "text": "ListItemAccessibilityAttributes" }, "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } }, { - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", - "name": "navigated", + "description": "Defines whether the slider is in disabled state.", + "name": "disabled", "default": "false", - "fieldName": "navigated", + "fieldName": "disabled", "type": { "text": "boolean" }, "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } }, { - "description": "Defines the text of the tooltip that would be displayed for the list item.", - "name": "tooltip", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", "default": "undefined", - "fieldName": "tooltip", + "fieldName": "accessibleName", "type": { "text": "string | undefined" }, "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "highlight", - "default": "\"None\"", - "fieldName": "highlight", - "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "description": "Defines the selected state of the component.", - "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } } ], "superclass": { - "name": "ListItem", + "name": "SliderBase", "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" + "module": "dist/SliderBase.js" }, - "tagName": "ui5-li", + "tagName": "ui5-range-slider", "customElement": true, + "_ui5since": "1.0.0-rc.11", "_ui5privacy": "public", "events": [ { - "name": "detail-click", + "name": "change", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the user clicks on the detail button when type is `Detail`.", + "description": "Fired when the value changes and the user has finished interacting with the slider.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" + } + }, + { + "name": "input", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "inheritedFrom": { + "name": "SliderBase", + "module": "dist/SliderBase.js" } } ] @@ -17692,298 +18762,226 @@ "kind": "js", "name": "default", "declaration": { - "name": "ListItemStandard", - "module": "dist/ListItemStandard.js" + "name": "RangeSlider", + "module": "dist/RangeSlider.js" } }, { "kind": "custom-element-definition", - "name": "ui5-li", + "name": "ui5-range-slider", "declaration": { - "name": "ListItemStandard", - "module": "dist/ListItemStandard.js" + "name": "RangeSlider", + "module": "dist/RangeSlider.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Menu.js", + "path": "dist/RatingIndicator.js", "declarations": [ - { - "kind": "interface", - "name": "IMenuItem", - "description": "Interface for components that may be slotted inside a `ui5-menu`.\n\n**Note:** Use with `ui5-menu-item` or `ui5-menu-separator`. Implementing the interface does not guarantee that any other classes can work with the `ui5-menu`.", - "_ui5privacy": "public" - }, { "kind": "class", - "description": "### Overview\n\n`ui5-menu` component represents a hierarchical menu structure.\n\n### Structure\n\nThe `ui5-menu` can hold two types of entities:\n\n- `ui5-menu-item` components\n- `ui5-menu-separator` - used to separate menu items with a line\n\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Keyboard Handling\n\nThe `ui5-menu` provides advanced keyboard handling.\nThe user can use the following keyboard shortcuts in order to navigate trough the tree:\n\n- `Arrow Up` / `Arrow Down` - Navigates up and down the menu items that are currently visible.\n- `Arrow Right`, `Space` or `Enter` - Opens a sub-menu if there are menu items nested\nin the currently clicked menu item.\n- `Arrow Left` or `Escape` - Closes the currently opened sub-menu.\n\nwhen there is `endContent` :\n- `Arrow Left` or `ArrowRight` - Navigate between the menu item actions and the menu item itself\n- `Arrow Up` / `Arrow Down` - Navigates up and down the currently visible menu items\n\n**Note:** If the text direction is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.\n\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\nhave the correct accessibility behaviour, including their enabled or disabled states.\nThe menu does not manage these aspects when the menu item state changes.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Menu.js\";`", - "name": "Menu", - "slots": [ - { - "name": "default", - "description": "Defines the items of this component.\n\n**Note:** Use `ui5-menu-item` and `ui5-menu-separator` for their intended design.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<IMenuItem>", - "references": [ - { - "name": "IMenuItem", - "package": "@ui5/webcomponents", - "module": "dist/Menu.js" - } - ] - }, - "_ui5privacy": "public" - } - ], + "description": "### Overview\nThe Rating Indicator is used to display a specific number of icons that are used to rate an item.\nAdditionally, it is also used to display the average and overall ratings.\n\n### Usage\nThe recommended number of icons is between 5 and 7.\n\n### Responsive Behavior\nYou can change the size of the Rating Indicator by changing its `font-size` CSS property.\n\nExample: `<ui5-rating-indicator style=\"font-size: 3rem;\"></ui5-rating-indicator>`\n\n### Keyboard Handling\nWhen the `ui5-rating-indicator` is focused, the user can change the rating\nwith the following keyboard shortcuts:\n\n- [RIGHT/UP] - Increases the value of the rating by one step. If the highest value is reached, does nothing\n- [LEFT/DOWN] - Decreases the value of the rating by one step. If the lowest value is reached, does nothing.\n- [Home] - Sets the lowest value.\n- [End] - Sets the highest value.\n- [SPACE/ENTER/RETURN] - Increases the value of the rating by one step. If the highest value is reached, sets the rating to the lowest value.\n- Any number - Changes value to the corresponding number. If typed number is larger than the number of values, sets the highest value.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/RatingIndicator.js\";`", + "name": "RatingIndicator", "members": [ { "kind": "field", - "name": "headerText", + "name": "value", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Defines the header text of the menu (displayed on mobile).", - "default": "undefined", + "default": "0", + "description": "The indicated value of the rating.\n\n**Note:** If you set a number which is not round, it would be shown as follows:\n\n- 1.0 - 1.2 -> 1\n- 1.3 - 1.7 -> 1.5\n- 1.8 - 1.9 -> 2", "privacy": "public" }, { "kind": "field", - "name": "open", + "name": "max", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Indicates if the menu is open.", + "default": "5", + "description": "The number of displayed rating symbols.", "privacy": "public", - "_ui5since": "1.10.0" + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "horizontalAlign", + "name": "size", "type": { - "text": "PopoverHorizontalAlign", + "text": "RatingIndicatorSize", "references": [ { - "name": "PopoverHorizontalAlign", + "name": "RatingIndicatorSize", "package": "@ui5/webcomponents", - "module": "dist/types/PopoverHorizontalAlign.js" + "module": "dist/types/RatingIndicatorSize.js" } ] }, - "default": "\"Start\"", - "description": "Determines the horizontal alignment of the menu relative to its opener control.", - "privacy": "public" + "default": "\"M\"", + "description": "Defines the size of the component.", + "privacy": "public", + "_ui5since": "2.6.0" }, { "kind": "field", - "name": "loading", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.", - "privacy": "public", - "_ui5since": "1.13.0" + "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", + "privacy": "public" }, { "kind": "field", - "name": "loadingDelay", + "name": "readonly", "type": { - "text": "number" + "text": "boolean" }, - "default": "1000", - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.", - "privacy": "public", - "_ui5since": "1.13.0" + "default": "false", + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "privacy": "public" }, { "kind": "field", - "name": "opener", + "name": "accessibleName", "type": { - "text": "HTMLElement | string | null | undefined" + "text": "string | undefined" }, - "description": "Defines the ID or DOM Reference of the element at which the menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", - "privacy": "public", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", - "_ui5since": "1.10.0" - } - ], - "events": [ - { - "name": "item-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<MenuItemClickEventDetail>", - "references": [ - { - "name": "MenuItemClickEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Menu.js" - } - ] - }, - "description": "Fired when an item is being clicked.\n\n**Note:** Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "The currently clicked menu item." - }, - { - "type": { - "text": "string" - }, - "name": "text", - "_ui5privacy": "public", - "description": "The text of the currently clicked menu item." - } - ] + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { - "name": "before-open", - "_ui5privacy": "public", + "kind": "field", + "name": "accessibleNameRef", "type": { - "text": "CustomEvent<MenuBeforeOpenEventDetail>", - "references": [ - { - "name": "MenuBeforeOpenEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Menu.js" - } - ] + "text": "string | undefined" }, - "description": "Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5since": "1.10.0", - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "The `ui5-menu-item` that triggers opening of the sub-menu or undefined when fired upon root menu opening." - } - ] + "description": "Receives id(or many ids) of the elements that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.15.0" }, { - "name": "open", - "_ui5privacy": "public", + "kind": "field", + "name": "required", "type": { - "text": "CustomEvent" + "text": "boolean" }, - "description": "Fired after the menu is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "1.10.0" + "default": "false", + "description": "Defines whether the component is required.", + "privacy": "public", + "_ui5since": "1.15.0" }, { - "name": "before-close", - "_ui5privacy": "public", + "kind": "field", + "name": "tooltip", "type": { - "text": "CustomEvent<MenuBeforeCloseEventDetail>", - "references": [ - { - "name": "MenuBeforeCloseEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Menu.js" - } - ] + "text": "string | undefined" }, - "description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5since": "1.10.0", - "_ui5parameters": [ - { - "type": { - "text": "boolean" - }, - "name": "escPressed", - "_ui5privacy": "public", - "description": "Indicates that `ESC` key has triggered the event." - } - ] - }, + "description": "Defines the tooltip of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.19.0" + } + ], + "events": [ { - "name": "close", + "name": "change", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired after the menu is closed.", + "description": "The event is fired when the value changes.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "1.10.0" + "_ui5Bubbles": true } ], "attributes": [ { - "description": "Defines the header text of the menu (displayed on mobile).", - "name": "header-text", - "default": "undefined", - "fieldName": "headerText", + "description": "The indicated value of the rating.\n\n**Note:** If you set a number which is not round, it would be shown as follows:\n\n- 1.0 - 1.2 -> 1\n- 1.3 - 1.7 -> 1.5\n- 1.8 - 1.9 -> 2", + "name": "value", + "default": "0", + "fieldName": "value", "type": { - "text": "string | undefined" + "text": "number" } }, { - "description": "Indicates if the menu is open.", - "name": "open", - "default": "false", - "fieldName": "open", + "description": "The number of displayed rating symbols.", + "name": "max", + "default": "5", + "fieldName": "max", "type": { - "text": "boolean" + "text": "number" } }, { - "description": "Determines the horizontal alignment of the menu relative to its opener control.", - "name": "horizontal-align", - "default": "\"Start\"", - "fieldName": "horizontalAlign", + "description": "Defines the size of the component.", + "name": "size", + "default": "\"M\"", + "fieldName": "size", "type": { - "text": "\"Center\" | \"Start\" | \"End\" | \"Stretch\"" + "text": "\"S\" | \"M\" | \"L\"" } }, { - "description": "Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.", - "name": "loading", + "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", "default": "false", - "fieldName": "loading", + "fieldName": "disabled", "type": { "text": "boolean" } }, { - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.", - "name": "loading-delay", - "default": "1000", - "fieldName": "loadingDelay", + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", "type": { - "text": "number" + "text": "boolean" } }, { - "description": "Defines the ID or DOM Reference of the element at which the menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", - "name": "opener", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", "default": "undefined", - "fieldName": "opener", + "fieldName": "accessibleName", "type": { - "text": "string | HTMLElement | null | undefined" + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the tooltip of the component.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" } } ], @@ -17992,9 +18990,9 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-menu", + "tagName": "ui5-rating-indicator", "customElement": true, - "_ui5since": "1.3.0", + "_ui5since": "1.0.0-rc.8", "_ui5privacy": "public" } ], @@ -18003,649 +19001,697 @@ "kind": "js", "name": "default", "declaration": { - "name": "Menu", - "module": "dist/Menu.js" + "name": "RatingIndicator", + "module": "dist/RatingIndicator.js" } }, { "kind": "custom-element-definition", - "name": "ui5-menu", + "name": "ui5-rating-indicator", "declaration": { - "name": "Menu", - "module": "dist/Menu.js" + "name": "RatingIndicator", + "module": "dist/RatingIndicator.js" } } ] }, { "kind": "javascript-module", - "path": "dist/MenuItem.js", + "path": "dist/ResponsivePopover.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\n`ui5-menu-item` is the item to use inside a `ui5-menu`.\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Usage\n\n`ui5-menu-item` represents a node in a `ui5-menu`. The menu itself is rendered as a list,\nand each `ui5-menu-item` is represented by a list item in that list. Therefore, you should only use\n`ui5-menu-item` directly in your apps. The `ui5-li` list item is internal for the list, and not intended for public use.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MenuItem.js\";`", - "name": "MenuItem", - "slots": [ + "description": "### Overview\nThe `ui5-responsive-popover` acts as a Popover on desktop and tablet, while on phone it acts as a Dialog.\nThe component improves tremendously the user experience on mobile.\n\n### Usage\nUse it when you want to make sure that all the content is visible on any device.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ResponsivePopover.js\";`", + "name": "ResponsivePopover", + "cssParts": [ { - "name": "default", - "description": "Defines the items of this component.\n\n**Note:** The slot can hold menu item and menu separator items.\n\nIf there are items added to this slot, an arrow will be displayed at the end\nof the item in order to indicate that there are items added. In that case components added\nto `endContent` slot or `additionalText` content will not be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<IMenuItem>", - "references": [ - { - "name": "IMenuItem", - "package": "@ui5/webcomponents", - "module": "dist/Menu.js" - } - ] - }, - "_ui5privacy": "public" + "description": "Used to style the header of the component", + "name": "header", + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" + } }, { - "name": "endContent", - "description": "Defines the components that should be displayed at the end of the menu item.\n\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\nnether `additionalText` nor components added to this slot would be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\nhave the correct accessibility behaviour, including their enabled or disabled states.\nThe menu does not manage these aspects when the menu item state changes.", - "_ui5since": "2.0.0", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" + "description": "Used to style the content of the component", + "name": "content", + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" + } }, { - "name": "deleteButton", - "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.", - "_ui5since": "1.9.0", - "_ui5type": { - "text": "Array<IButton>", - "references": [ - { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] - }, - "_ui5privacy": "public", + "description": "Used to style the footer of the component", + "name": "footer", "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "Popover", + "module": "dist/Popover.js" } } ], "members": [ { "kind": "field", - "name": "text", + "name": "headerText", "type": { "text": "string | undefined" }, - "description": "Defines the text of the tree item.", + "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" + } }, { "kind": "field", - "name": "additionalText", + "name": "placement", "type": { - "text": "string | undefined" + "text": "PopoverPlacement", + "references": [ + { + "name": "PopoverPlacement", + "package": "@ui5/webcomponents", + "module": "dist/types/PopoverPlacement.js" + } + ] }, - "description": "Defines the `additionalText`, displayed in the end of the menu item.\n\n**Note:** The additional text will not be displayed if there are items added in `items` slot or there are\ncomponents added to `endContent` slot.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", - "default": "undefined", + "default": "\"End\"", + "description": "Determines on which side the component is placed at.", "privacy": "public", - "_ui5since": "1.8.0" + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" + } }, { "kind": "field", - "name": "icon", + "name": "horizontalAlign", "type": { - "text": "string | undefined" + "text": "PopoverHorizontalAlign", + "references": [ + { + "name": "PopoverHorizontalAlign", + "package": "@ui5/webcomponents", + "module": "dist/types/PopoverHorizontalAlign.js" + } + ] }, - "description": "Defines the icon to be displayed as graphical element within the component.\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).", - "default": "undefined", - "privacy": "public" + "default": "\"Center\"", + "description": "Determines the horizontal alignment of the component.", + "privacy": "public", + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" + } }, { "kind": "field", - "name": "disabled", + "name": "verticalAlign", + "type": { + "text": "PopoverVerticalAlign", + "references": [ + { + "name": "PopoverVerticalAlign", + "package": "@ui5/webcomponents", + "module": "dist/types/PopoverVerticalAlign.js" + } + ] + }, + "default": "\"Center\"", + "description": "Determines the vertical alignment of the component.", + "privacy": "public", + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" + } + }, + { + "kind": "field", + "name": "modal", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.", + "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.", "privacy": "public", "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" + "name": "Popover", + "module": "dist/Popover.js" } }, { "kind": "field", - "name": "loading", + "name": "hideArrow", "type": { "text": "boolean" }, "default": "false", - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.", + "description": "Determines whether the component arrow is hidden.", "privacy": "public", - "_ui5since": "1.13.0" + "_ui5since": "1.0.0-rc.15", + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" + } }, { "kind": "field", - "name": "loadingDelay", + "name": "allowTargetOverlap", "type": { - "text": "number" + "text": "boolean" }, - "default": "1000", - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.", + "default": "false", + "description": "Determines if there is no enough space, the component can be placed\nover the target.", "privacy": "public", - "_ui5since": "1.13.0" + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" + } }, { "kind": "field", - "name": "accessibleName", + "name": "opener", + "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", + "privacy": "public", + "default": "undefined", "type": { - "text": "string | undefined" + "text": "HTMLElement | string | null | undefined" }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.7.0", + "_ui5since": "1.2.0", "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "Popover", + "module": "dist/Popover.js" } }, { "kind": "field", - "name": "tooltip", + "name": "initialFocus", "type": { "text": "string | undefined" }, - "description": "Defines the text of the tooltip for the menu item.", + "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", "default": "undefined", "privacy": "public", - "_ui5since": "1.23.0", "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "Popup", + "module": "dist/Popup.js" } }, { "kind": "field", - "name": "checked", + "name": "preventFocusRestore", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.", + "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", "privacy": "public", - "_ui5since": "2.12.0" + "_ui5since": "1.0.0-rc.8", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } }, { "kind": "field", - "name": "accessibilityAttributes", + "name": "accessibleName", "type": { - "text": "MenuItemAccessibilityAttributes", - "references": [ - { - "name": "MenuItemAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/MenuItem.js" - } - ] + "text": "string | undefined" }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item.\n\n- **role**: Defines the role of the menu item. If not set, menu item will have default role=\"menuitem\".", + "description": "Defines the accessible name of the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "2.1.0", + "_ui5since": "1.0.0-rc.15", "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "Popup", + "module": "dist/Popup.js" } }, { "kind": "field", - "name": "type", + "name": "accessibleNameRef", "type": { - "text": "ListItemType", + "text": "string | undefined" + }, + "description": "Defines the IDs of the elements that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.1.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, + { + "kind": "field", + "name": "accessibleRole", + "type": { + "text": "PopupAccessibleRole", "references": [ { - "name": "ListItemType", + "name": "PopupAccessibleRole", "package": "@ui5/webcomponents", - "module": "dist/types/ListItemType.js" + "module": "dist/types/PopupAccessibleRole.js" } ] }, - "default": "\"Active\"", - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "default": "\"Dialog\"", + "description": "Allows setting a custom role.", "privacy": "public", + "_ui5since": "1.10.0", "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "Popup", + "module": "dist/Popup.js" } }, { "kind": "field", - "name": "navigated", + "name": "accessibleDescription", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "description": "Defines the accessible description of the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.10.0", + "_ui5since": "2.11.0", "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "Popup", + "module": "dist/Popup.js" } }, { "kind": "field", - "name": "highlight", + "name": "accessibleDescriptionRef", "type": { - "text": "Highlight", - "references": [ - { - "name": "Highlight", - "package": "@ui5/webcomponents", - "module": "dist/types/Highlight.js" - } - ] + "text": "string | undefined" }, - "default": "\"None\"", - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "description": "Receives id(or many ids) of the elements that describe the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.24", + "_ui5since": "2.11.0", "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "Popup", + "module": "dist/Popup.js" } }, { "kind": "field", - "name": "selected", + "name": "preventInitialFocus", "type": { "text": "boolean" }, "default": "false", - "description": "Defines the selected state of the component.", + "description": "Indicates whether initial focus should be prevented.", "privacy": "public", + "_ui5since": "2.0.0", "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" + "name": "Popup", + "module": "dist/Popup.js" } - } - ], - "events": [ - { - "name": "before-open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<MenuBeforeOpenEventDetail>", - "references": [ - { - "name": "MenuBeforeOpenEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/MenuItem.js" - } - ] - }, - "description": "Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, - "_ui5since": "1.10.0", - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "The menu item that triggers opening of the sub-menu or undefined when fired upon root menu opening." - } - ] }, { + "kind": "field", "name": "open", - "_ui5privacy": "public", + "description": "Indicates if the element is open", + "privacy": "public", + "default": "false", "type": { - "text": "CustomEvent" + "text": "boolean" }, - "description": "Fired after the menu is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false + "_ui5since": "1.2.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } }, { - "name": "before-close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<MenuBeforeCloseEventDetail>", - "references": [ - { - "name": "MenuBeforeCloseEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/MenuItem.js" - } - ] + "kind": "method", + "name": "applyFocus", + "return": { + "type": { + "text": "Promise<void>" + }, + "description": "Promise that resolves when the focus is applied" }, - "description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, - "_ui5since": "1.10.0", - "_ui5parameters": [ - { - "type": { - "text": "boolean" - }, - "name": "escPressed", - "_ui5privacy": "public", - "description": "Indicates that `ESC` key has triggered the event." - } - ] - }, + "description": "Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.", + "privacy": "public", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + } + ], + "superclass": { + "name": "Popover", + "package": "@ui5/webcomponents", + "module": "dist/Popover.js" + }, + "tagName": "ui5-responsive-popover", + "customElement": true, + "_ui5since": "1.0.0-rc.6", + "_ui5privacy": "public", + "slots": [ { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" + "name": "header", + "description": "Defines the header HTML Element.", + "_ui5type": { + "text": "Array<HTMLElement>" }, - "description": "Fired after the menu is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "1.10.0" + "_ui5privacy": "public", + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" + } }, { - "name": "check", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" + "name": "footer", + "description": "Defines the footer HTML Element.", + "_ui5type": { + "text": "Array<HTMLElement>" }, - "description": "Fired when an item is checked or unchecked.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.12.0" + "_ui5privacy": "public", + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" + } }, { - "name": "detail-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" + "name": "default", + "description": "Defines the content of the Popup.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<HTMLElement>" }, - "description": "Fired when the user clicks on the detail button when type is `Detail`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5privacy": "public", "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "Popup", + "module": "dist/Popup.js" } } ], "attributes": [ { - "description": "Defines the text of the tree item.", - "name": "text", + "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", + "name": "header-text", "default": "undefined", - "fieldName": "text", + "fieldName": "headerText", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" } }, { - "description": "Defines the `additionalText`, displayed in the end of the menu item.\n\n**Note:** The additional text will not be displayed if there are items added in `items` slot or there are\ncomponents added to `endContent` slot.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", - "name": "additional-text", - "default": "undefined", - "fieldName": "additionalText", + "description": "Determines on which side the component is placed at.", + "name": "placement", + "default": "\"End\"", + "fieldName": "placement", "type": { - "text": "string | undefined" + "text": "\"Top\" | \"Bottom\" | \"Start\" | \"End\"" + }, + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" } }, { - "description": "Defines the icon to be displayed as graphical element within the component.\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).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", + "description": "Determines the horizontal alignment of the component.", + "name": "horizontal-align", + "default": "\"Center\"", + "fieldName": "horizontalAlign", "type": { - "text": "string | undefined" + "text": "\"Start\" | \"End\" | \"Center\" | \"Stretch\"" + }, + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" } }, { - "description": "Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", + "description": "Determines the vertical alignment of the component.", + "name": "vertical-align", + "default": "\"Center\"", + "fieldName": "verticalAlign", "type": { - "text": "boolean" + "text": "\"Top\" | \"Bottom\" | \"Center\" | \"Stretch\"" + }, + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" } }, { - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.", - "name": "loading", + "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.", + "name": "modal", "default": "false", - "fieldName": "loading", + "fieldName": "modal", "type": { "text": "boolean" + }, + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" } }, { - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.", - "name": "loading-delay", - "default": "1000", - "fieldName": "loadingDelay", + "description": "Determines whether the component arrow is hidden.", + "name": "hide-arrow", + "default": "false", + "fieldName": "hideArrow", "type": { - "text": "number" + "text": "boolean" + }, + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" + "description": "Determines if there is no enough space, the component can be placed\nover the target.", + "name": "allow-target-overlap", + "default": "false", + "fieldName": "allowTargetOverlap", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" } }, { - "description": "Defines the text of the tooltip for the menu item.", - "name": "tooltip", + "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", + "name": "opener", "default": "undefined", - "fieldName": "tooltip", + "fieldName": "opener", + "type": { + "text": "any" + }, + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" + } + }, + { + "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", + "name": "initial-focus", + "default": "undefined", + "fieldName": "initialFocus", "type": { "text": "string | undefined" }, "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "Popup", + "module": "dist/Popup.js" } }, { - "description": "Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.", - "name": "checked", + "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", + "name": "prevent-focus-restore", "default": "false", - "fieldName": "checked", + "fieldName": "preventFocusRestore", "type": { "text": "boolean" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item.\n\n- **role**: Defines the role of the menu item. If not set, menu item will have default role=\"menuitem\".", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", + "description": "Defines the accessible name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "MenuItemAccessibilityAttributes" + "text": "string | undefined" }, "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "Popup", + "module": "dist/Popup.js" } }, { - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", - "name": "type", - "default": "\"Active\"", - "fieldName": "type", + "description": "Defines the IDs of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", "type": { - "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" + "text": "string | undefined" }, "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "Popup", + "module": "dist/Popup.js" } }, { - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", - "name": "navigated", - "default": "false", - "fieldName": "navigated", + "description": "Allows setting a custom role.", + "name": "accessible-role", + "default": "\"Dialog\"", + "fieldName": "accessibleRole", "type": { - "text": "boolean" + "text": "\"None\" | \"Dialog\" | \"AlertDialog\"" }, "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "Popup", + "module": "dist/Popup.js" } }, { - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "highlight", - "default": "\"None\"", - "fieldName": "highlight", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "string | undefined" }, "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "Popup", + "module": "dist/Popup.js" } }, { - "description": "Defines the selected state of the component.", - "name": "selected", + "description": "Receives id(or many ids) of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, + { + "description": "Indicates whether initial focus should be prevented.", + "name": "prevent-initial-focus", "default": "false", - "fieldName": "selected", + "fieldName": "preventInitialFocus", "type": { "text": "boolean" }, "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" + "name": "Popup", + "module": "dist/Popup.js" + } + }, + { + "description": "Indicates if the element is open", + "name": "open", + "default": "false", + "fieldName": "open", + "type": { + "text": "any" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } } ], - "superclass": { - "name": "ListItem", - "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" - }, - "tagName": "ui5-menu-item", - "customElement": true, - "_ui5since": "1.3.0", - "_ui5privacy": "public", - "_ui5implements": [ + "events": [ { - "name": "IMenuItem", - "package": "@ui5/webcomponents", - "module": "dist/Menu.js" - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "MenuItem", - "module": "dist/MenuItem.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-menu-item", - "declaration": { - "name": "MenuItem", - "module": "dist/MenuItem.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/MenuItemGroup.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-menu-item-group` component represents a group of items designed for use inside a `ui5-menu`.\nItems belonging to the same group should be wrapped by a `ui5-menu-item-group`.\nEach group can have an `checkMode` property, which defines the check mode for the items within the group.\nThe possible values for `checkMode` are:\n- 'None' (default) - no items can be checked\n- 'Single' - Only one item can be checked at a time\n- 'Multiple' - Multiple items can be checked simultaneously\n\n**Note:** If the `checkMode` property is set to 'Single', only one item can remain checked at any given time.\nIf multiple items are marked as checked, the last checked item will take precedence.\n\n### Usage\n\n`ui5-menu-item-group` represents a collection of `ui5-menu-item` components that can have the same check mode.\nThe items are addeed to the group's `items` slot.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MenuItemGroup.js\";`", - "name": "MenuItemGroup", - "slots": [ + "name": "before-open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, { - "name": "default", - "description": "Defines the items of this component.\n**Note:** The slot can hold any combination of components of type `ui5-menu-item` or `ui5-menu-separator` or both.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<IMenuItem>", - "references": [ - { - "name": "IMenuItem", - "package": "@ui5/webcomponents", - "module": "dist/Menu.js" - } - ] + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" }, - "_ui5privacy": "public" - } - ], - "members": [ + "description": "Fired after the component is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, { - "kind": "field", - "name": "checkMode", + "name": "before-close", + "_ui5privacy": "public", "type": { - "text": "MenuItemGroupCheckMode", + "text": "CustomEvent<PopupBeforeCloseEventDetail>", "references": [ { - "name": "MenuItemGroupCheckMode", + "name": "PopupBeforeCloseEventDetail", "package": "@ui5/webcomponents", - "module": "dist/types/MenuItemGroupCheckMode.js" + "module": "dist/Popup.js" } ] }, - "default": "\"None\"", - "description": "Defines the component's check mode.", - "privacy": "public" - } - ], - "attributes": [ + "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "escPressed", + "_ui5privacy": "public", + "description": "Indicates that `ESC` key has triggered the event." + } + ], + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, { - "description": "Defines the component's check mode.", - "name": "check-mode", - "default": "\"None\"", - "fieldName": "checkMode", + "name": "close", + "_ui5privacy": "public", "type": { - "text": "\"None\" | \"Single\" | \"Multiple\"" + "text": "CustomEvent" + }, + "description": "Fired after the component is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" } } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-menu-item-group", - "customElement": true, - "_ui5since": "2.12.0", - "_ui5privacy": "public", - "_ui5implements": [ - { - "name": "IMenuItem", - "package": "@ui5/webcomponents", - "module": "dist/Menu.js" - } ] } ], @@ -18654,93 +19700,46 @@ "kind": "js", "name": "default", "declaration": { - "name": "MenuItemGroup", - "module": "dist/MenuItemGroup.js" + "name": "ResponsivePopover", + "module": "dist/ResponsivePopover.js" } }, { "kind": "custom-element-definition", - "name": "ui5-menu-item-group", + "name": "ui5-responsive-popover", "declaration": { - "name": "MenuItemGroup", - "module": "dist/MenuItemGroup.js" + "name": "ResponsivePopover", + "module": "dist/ResponsivePopover.js" } } ] }, { "kind": "javascript-module", - "path": "dist/MenuSeparator.js", + "path": "dist/SegmentedButton.js", "declarations": [ { - "kind": "class", - "description": "The `ui5-menu-separator` represents a horizontal line to separate menu items inside a `ui5-menu`.", - "name": "MenuSeparator", - "superclass": { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - }, - "tagName": "ui5-menu-separator", - "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public", - "_ui5implements": [ - { - "name": "IMenuItem", - "package": "@ui5/webcomponents", - "module": "dist/Menu.js" - } - ], - "members": [] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "MenuSeparator", - "module": "dist/MenuSeparator.js" - } + "kind": "interface", + "name": "ISegmentedButtonItem", + "description": "Interface for components that may be slotted inside `ui5-segmented-button` as items", + "_ui5privacy": "public" }, - { - "kind": "custom-element-definition", - "name": "ui5-menu-separator", - "declaration": { - "name": "MenuSeparator", - "module": "dist/MenuSeparator.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/MessageStrip.js", - "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe ui5-message-strip component allows for the embedding of application-related messages.\nIt supports four semantic designs, each with its own color and icon: \"Information\", \"Positive\", \"Critical\", and \"Negative\".\nAdditionally, users can choose from two color sets (\"ColorSet1\" and \"ColorSet2\"), each containing 10 predefined color schemes.\nEach message shows a \"Close\" button, so that it can be removed from the UI, if needed.\n\n### Usage\n\nFor the `ui5-message-strip` component, you can define whether it displays\nan icon in the beginning and a close button. Moreover, its size and background\ncan be controlled with CSS.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MessageStrip.js\";`", - "name": "MessageStrip", + "description": "### Overview\n\nThe `ui5-segmented-button` shows a group of items. When the user clicks or taps\none of the items, it stays in a pressed state. It automatically resizes the items\nto fit proportionally within the component. When no width is set, the component uses the available width.\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SegmentedButton.js\";`", + "name": "SegmentedButton", "slots": [ { - "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", "name": "default", - "_ui5privacy": "public", - "_ui5type": { - "text": "Array<Node>" - } - }, - { - "name": "icon", - "description": "Defines the content to be displayed as graphical element within the component.\n\n**Note:** If no icon is given, the default icon for the component type will be used.\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the items of `ui5-segmented-button`.\n\n**Note:** Multiple items are allowed.\n\n**Note:** Use the `ui5-segmented-button-item` for the intended design.", + "_ui5propertyName": "items", "_ui5type": { - "text": "Array<IIcon>", + "text": "Array<ISegmentedButtonItem>", "references": [ { - "name": "IIcon", + "name": "ISegmentedButtonItem", "package": "@ui5/webcomponents", - "module": "dist/Icon.js" + "module": "dist/SegmentedButton.js" } ] }, @@ -18750,104 +19749,197 @@ "members": [ { "kind": "field", - "name": "design", + "name": "accessibleName", "type": { - "text": "MessageStripDesign", - "references": [ - { - "name": "MessageStripDesign", - "package": "@ui5/webcomponents", - "module": "dist/types/MessageStripDesign.js" - } - ] + "text": "string | undefined" }, - "default": "\"Information\"", - "description": "Defines the component type.", + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "1.0.3" }, { "kind": "field", - "name": "colorScheme", + "name": "accessibleNameRef", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"1\"", - "description": "Defines the color scheme of the component.\nThere are 10 predefined schemes.\nTo use one you can set a number from `\"1\"` to `\"10\"`. The `colorScheme` `\"1\"` will be set by default.", + "description": "Defines the IDs of the HTML Elements that label the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "2.0.0" + "_ui5since": "2.15.0" }, { "kind": "field", - "name": "hideIcon", + "name": "accessibleDescription", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the MessageStrip will show an icon in the beginning.\nYou can directly provide an icon with the `icon` slot. Otherwise, the default icon for the type will be used.\n\n * **Note:** If <code>MessageStripDesign.ColorSet1</code> or <code>MessageStripDesign.ColorSet2</code> value is set to the <code>design</code> property, default icon will not be presented.", + "description": "Defines the accessible description of the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "2.15.0" }, { "kind": "field", - "name": "hideCloseButton", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Defines the IDs of the HTML Elements that describe the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.15.0" + }, + { + "kind": "field", + "name": "selectionMode", + "type": { + "text": "SegmentedButtonSelectionMode", + "references": [ + { + "name": "SegmentedButtonSelectionMode", + "package": "@ui5/webcomponents", + "module": "dist/types/SegmentedButtonSelectionMode.js" + } + ] + }, + "default": "\"Single\"", + "description": "Defines the component selection mode.", + "privacy": "public", + "_ui5since": "1.14.0" + }, + { + "kind": "field", + "name": "itemsFitContent", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the MessageStrip renders close button.", - "privacy": "public" + "description": "Determines whether the segmented button items should be sized to fit their content.\n\nIf set to `true`, each item will be sized to fit its content, with any extra space distributed after the last item.\nIf set to `false` (the default), all items will be equally sized to fill the available space.", + "privacy": "public", + "_ui5since": "2.16.0" + }, + { + "kind": "field", + "name": "selectedItems", + "type": { + "text": "Array<ISegmentedButtonItem>", + "references": [ + { + "name": "ISegmentedButtonItem", + "package": "@ui5/webcomponents", + "module": "dist/SegmentedButton.js" + } + ] + }, + "description": "Returns an array of the currently selected items.", + "privacy": "public", + "default": "[]", + "readonly": true, + "_ui5since": "1.14.0" } ], "events": [ { - "name": "close", + "name": "selection-change", "_ui5privacy": "public", "type": { - "text": "CustomEvent" + "text": "CustomEvent<SegmentedButtonSelectionChangeEventDetail>", + "references": [ + { + "name": "SegmentedButtonSelectionChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/SegmentedButton.js" + } + ] }, - "description": "Fired when the close button is pressed either with a\nclick/tap or by using the Enter or Space key.", + "description": "Fired when the selected item changes.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": false + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "Array<ISegmentedButtonItem>", + "references": [ + { + "name": "ISegmentedButtonItem", + "package": "@ui5/webcomponents", + "module": "dist/SegmentedButton.js" + } + ] + }, + "name": "selectedItems", + "_ui5privacy": "public", + "description": "an array of selected items. Since: 1.14.0" + } + ] } ], "attributes": [ { - "description": "Defines the component type.", - "name": "design", - "default": "\"Information\"", - "fieldName": "design", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "\"Positive\" | \"Negative\" | \"Critical\" | \"Information\" | \"ColorSet1\" | \"ColorSet2\"" + "text": "string | undefined" } }, { - "description": "Defines the color scheme of the component.\nThere are 10 predefined schemes.\nTo use one you can set a number from `\"1\"` to `\"10\"`. The `colorScheme` `\"1\"` will be set by default.", - "name": "color-scheme", - "default": "\"1\"", - "fieldName": "colorScheme", + "description": "Defines the IDs of the HTML Elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", "type": { - "text": "string" + "text": "string | undefined" } }, { - "description": "Defines whether the MessageStrip will show an icon in the beginning.\nYou can directly provide an icon with the `icon` slot. Otherwise, the default icon for the type will be used.\n\n * **Note:** If <code>MessageStripDesign.ColorSet1</code> or <code>MessageStripDesign.ColorSet2</code> value is set to the <code>design</code> property, default icon will not be presented.", - "name": "hide-icon", - "default": "false", - "fieldName": "hideIcon", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines whether the MessageStrip renders close button.", - "name": "hide-close-button", + "description": "Defines the IDs of the HTML Elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the component selection mode.", + "name": "selection-mode", + "default": "\"Single\"", + "fieldName": "selectionMode", + "type": { + "text": "\"Single\" | \"Multiple\"" + } + }, + { + "description": "Determines whether the segmented button items should be sized to fit their content.\n\nIf set to `true`, each item will be sized to fit its content, with any extra space distributed after the last item.\nIf set to `false` (the default), all items will be equally sized to fill the available space.", + "name": "items-fit-content", "default": "false", - "fieldName": "hideCloseButton", + "fieldName": "itemsFitContent", "type": { "text": "boolean" } + }, + { + "description": "Returns an array of the currently selected items.", + "name": "selected-items", + "default": "[]", + "fieldName": "selectedItems", + "type": { + "text": "any" + } } ], "superclass": { @@ -18855,9 +19947,9 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-message-strip", + "tagName": "ui5-segmented-button", "customElement": true, - "_ui5since": "0.9.0", + "_ui5since": "1.0.0-rc.6", "_ui5privacy": "public" } ], @@ -18866,92 +19958,290 @@ "kind": "js", "name": "default", "declaration": { - "name": "MessageStrip", - "module": "dist/MessageStrip.js" + "name": "SegmentedButton", + "module": "dist/SegmentedButton.js" } }, { "kind": "custom-element-definition", - "name": "ui5-message-strip", + "name": "ui5-segmented-button", "declaration": { - "name": "MessageStrip", - "module": "dist/MessageStrip.js" + "name": "SegmentedButton", + "module": "dist/SegmentedButton.js" } } ] }, { "kind": "javascript-module", - "path": "dist/MonthPicker.js", - "declarations": [], + "path": "dist/SegmentedButtonItem.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nUsers can use the `ui5-segmented-button-item` as part of a `ui5-segmented-button`.\n\nClicking or tapping on a `ui5-segmented-button-item` changes its state to `selected`.\nThe item returns to its initial state when the user clicks or taps on it again.\nBy applying additional custom CSS-styling classes, apps can give a different style to any\n`ui5-segmented-button-item`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SegmentedButtonItem.js\";`", + "name": "SegmentedButtonItem", + "slots": [ + { + "name": "default", + "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", + "_ui5propertyName": "text", + "_ui5type": { + "text": "Array<Node>" + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is disabled.\nA disabled component can't be selected or\nfocused, and it is not in the tab chain.", + "privacy": "public" + }, + { + "kind": "field", + "name": "selected", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the component is displayed as selected.", + "privacy": "public" + }, + { + "kind": "field", + "name": "tooltip", + "type": { + "text": "string | undefined" + }, + "description": "Defines the tooltip of the component.\n\n**Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.2.0" + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.1.0" + }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.15.0" + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Defines the IDs of the HTML Elements that describe the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.15.0" + }, + { + "kind": "field", + "name": "icon", + "type": { + "text": "string | undefined" + }, + "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines whether the component is disabled.\nA disabled component can't be selected or\nfocused, and it is not in the tab chain.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + } + }, + { + "description": "Determines whether the component is displayed as selected.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the tooltip of the component.\n\n**Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the IDs of the HTML Elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-segmented-button-item", + "customElement": true, + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "ISegmentedButtonItem", + "package": "@ui5/webcomponents", + "module": "dist/SegmentedButton.js" + }, + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + } + ], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "MonthPicker", - "module": "dist/MonthPicker.js" + "name": "SegmentedButtonItem", + "module": "dist/SegmentedButtonItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-segmented-button-item", + "declaration": { + "name": "SegmentedButtonItem", + "module": "dist/SegmentedButtonItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/MultiComboBox.js", + "path": "dist/Select.js", "declarations": [ { "kind": "interface", - "name": "IMultiComboBoxItem", - "description": "Interface for components that may be slotted inside a `ui5-multi-combobox` as items", + "name": "IOption", + "description": "Interface for components that may be slotted inside `ui5-select` as options", "_ui5privacy": "public" }, { "kind": "class", - "description": "### Overview\n\nThe `ui5-multi-combobox` component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.\n\nThe drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options.\nThe options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens.\n### Structure\nThe `ui5-multi-combobox` consists of the following elements:\n\n- Tokenizer - a list of tokens with selected options.\n- Input field - displays the selected option/s as token/s. Users can type to filter the list.\n- Drop-down arrow - expands\\collapses the option list.\n- Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-multi-combobox` provides advanced keyboard handling.\n\n#### Picker\nIf the `ui5-multi-combobox` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the `UP` and `DOWN` arrow keys\nto navigate through the available options and select one by pressing the `Space` or `Enter` keys.\n[Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.\n\n#### Tokens\n\n- Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available).\n- Delete - deletes the token and focuses the previous token.\n- Backspace - deletes the token and focus the next token.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiComboBox.js\";`", - "name": "MultiComboBox", + "description": "### Overview\n\nThe `ui5-select` component is used to create a drop-down list.\n\n### Usage\n\nThere are two main usages of the `ui5-select>`.\n\n- With Option (`ui5-option`) web component:\n\nThe available options of the Select are defined by using the Option component.\nThe Option comes with predefined design and layout, including `icon`, `text` and `additional-text`.\n\n- With OptionCustom (`ui5-option-custom`) web component.\n\nOptions with custom content are defined by using the OptionCustom component.\nThe OptionCustom component comes with no predefined layout and it expects consumers to define it.\n\n### Selection\n\nThe options can be selected via user interaction (click or with the use of the Space and Enter keys)\nand programmatically - the Select component supports two distinct selection APIs, though mixing them is not supported:\n- The \"value\" property of the Select component\n- The \"selected\" property on individual options\n\n**Note:** If the \"value\" property is set but does not match any option,\nno option will be selected and the Select component will be displayed as empty.\n\n**Note:** when both \"value\" and \"selected\" are both used (although discouraged),\nthe \"value\" property will take precedence.\n\n### Keyboard Handling\n\nThe `ui5-select` provides advanced keyboard handling.\n\n- [F4] / [Alt] + [Up] / [Alt] + [Down] / [Space] or [Enter] - Opens/closes the drop-down.\n- [Up] or [Down] - If the drop-down is closed - changes selection to the next or the previous option. If the drop-down is opened - moves focus to the next or the previous option.\n- [Space], [Enter] - If the drop-down is opened - selects the focused option.\n- [Escape] - Closes the drop-down without changing the selection.\n- [Home] - Navigates to first option\n- [End] - Navigates to the last option\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Select\";`\n\n`import \"@ui5/webcomponents/dist/Option\";`\n`import \"@ui5/webcomponents/dist/OptionCustom\";`", + "name": "Select", "cssParts": [ { - "description": "Used to style each token(where `token-0` corresponds to the first item)", - "name": "token-\\{index\\}" + "description": "Used to style the popover element", + "name": "popover" } ], "slots": [ { "name": "default", - "description": "Defines the component items.", - "_ui5propertyName": "items", + "description": "Defines the component options.\n\n**Note:** Only one selected option is allowed.\nIf more than one option is defined as selected, the last one would be considered as the selected one.\n\n**Note:** Use the `ui5-option` component to define the desired options.", + "_ui5propertyName": "options", "_ui5type": { - "text": "Array<IMultiComboBoxItem>", + "text": "Array<IOption>", "references": [ { - "name": "IMultiComboBoxItem", + "name": "IOption", "package": "@ui5/webcomponents", - "module": "dist/MultiComboBox.js" + "module": "dist/Select.js" } ] }, "_ui5privacy": "public" }, { - "name": "icon", - "description": "Defines the icon to be displayed in the component.", - "_ui5since": "1.0.0-rc.9", + "name": "valueStateMessage", + "description": "Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.", "_ui5type": { - "text": "Array<IIcon>", - "references": [ - { - "name": "IIcon", - "package": "@ui5/webcomponents", - "module": "dist/Icon.js" - } - ] + "text": "Array<HTMLElement>" }, "_ui5privacy": "public" }, { - "name": "valueStateMessage", - "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.", - "_ui5since": "1.0.0-rc.9", + "name": "label", + "description": "Defines the HTML element that will be displayed in the component input part,\nrepresenting the selected option.\n\n**Note:** If not specified and `ui5-option-custom` is used,\neither the option's `display-text` or its textContent will be displayed.\n\n**Note:** If not specified and `ui5-option` is used,\nthe option's textContent will be displayed.", + "_ui5since": "1.17.0", "_ui5type": { "text": "Array<HTMLElement>" }, @@ -18961,68 +20251,24 @@ "members": [ { "kind": "field", - "name": "value", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", - "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change,input" - }, - { - "kind": "field", - "name": "name", - "type": { - "text": "string | undefined" - }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.0.0" - }, - { - "kind": "field", - "name": "noTypeahead", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the value will be autcompleted to match an item", - "privacy": "public", - "_ui5since": "1.4.0" + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is noninteractive.", + "privacy": "public" }, { "kind": "field", - "name": "placeholder", + "name": "name", "type": { "text": "string | undefined" }, - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", "default": "undefined", "privacy": "public" }, - { - "kind": "field", - "name": "noValidation", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the user input will be prevented, if no matching item has been found", - "privacy": "public" - }, - { - "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", - "privacy": "public" - }, { "kind": "field", "name": "valueState", @@ -19040,16 +20286,6 @@ "description": "Defines the value state of the component.", "privacy": "public" }, - { - "kind": "field", - "name": "readonly", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", - "privacy": "public" - }, { "kind": "field", "name": "required", @@ -19059,35 +20295,18 @@ "default": "false", "description": "Defines whether the component is required.", "privacy": "public", - "_ui5since": "1.0.0-rc.5" - }, - { - "kind": "field", - "name": "filter", - "type": { - "text": "ComboBoxFilter", - "references": [ - { - "name": "ComboBoxFilter", - "package": "@ui5/webcomponents", - "module": "dist/types/ComboBoxFilter.js" - } - ] - }, - "default": "\"StartsWithPerTerm\"", - "description": "Defines the filter type of the component.", - "privacy": "public" + "_ui5since": "1.0.0-rc.9" }, { "kind": "field", - "name": "showClearIcon", + "name": "readonly", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the clear icon of the multi-combobox will be shown.", + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", "privacy": "public", - "_ui5since": "1.20.1" + "_ui5since": "1.21.0" }, { "kind": "field", @@ -19096,9 +20315,9 @@ "text": "string | undefined" }, "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", "privacy": "public", - "_ui5since": "1.4.0" + "default": "undefined", + "_ui5since": "1.0.0-rc.9" }, { "kind": "field", @@ -19106,169 +20325,206 @@ "type": { "text": "string | undefined" }, - "description": "Receives id(or many ids) of the elements that label the component.", + "description": "Receives id(or many ids) of the elements that label the select.", "default": "undefined", "privacy": "public", - "_ui5since": "1.4.0" + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "showSelectAll", + "name": "accessibleDescription", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Determines if the select all checkbox is visible on top of suggestions.", - "privacy": "public" + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0" }, { "kind": "field", - "name": "open", + "name": "accessibleDescriptionRef", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Indicates whether the items picker is open.", + "description": "Receives id(or many ids) of the elements that describe the select.", + "default": "undefined", "privacy": "public", - "_ui5since": "2.9.0" - } - ], - "events": [ - { - "name": "change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the input operation has finished by pressing Enter or on focusout.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "_ui5since": "2.14.0" }, { - "name": "input", - "_ui5privacy": "public", + "kind": "field", + "name": "tooltip", "type": { - "text": "CustomEvent" + "text": "string | undefined" }, - "description": "Fired when the value of the component changes at each keystroke or clear icon is pressed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "description": "Defines the tooltip of the select.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.8.0" }, { - "name": "open", - "_ui5privacy": "public", + "kind": "field", + "name": "textSeparator", "type": { - "text": "CustomEvent" + "text": "SelectTextSeparator", + "references": [ + { + "name": "SelectTextSeparator", + "package": "@ui5/webcomponents", + "module": "dist/types/SelectTextSeparator.js" + } + ] }, - "description": "Fired when the dropdown is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.0.0" + "default": "\"Dash\"", + "description": "Defines the separator type for the two columns layout when Select is in read-only mode.", + "privacy": "public", + "_ui5since": "2.16.0" }, { - "name": "close", - "_ui5privacy": "public", + "kind": "field", + "name": "value", + "description": "Defines the value of the component:\n\n- when get - returns the value of the component or the value/text content of the selected option.\n- when set - selects the option with matching `value` property or text content.\n\n**Note:** Use either the Select's value or the Options' selected property.\nMixed usage could result in unexpected behavior.\n\n**Note:** If the given value does not match any existing option,\nno option will be selected and the Select component will be displayed as empty.", + "privacy": "public", + "default": "\"\"", "type": { - "text": "CustomEvent" + "text": "string" }, - "description": "Fired when the dropdown is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.0.0" + "_ui5since": "1.20.0", + "_ui5formProperty": true, + "_ui5formEvents": "change,liveChange" }, { - "name": "selection-change", - "_ui5privacy": "public", + "kind": "field", + "name": "selectedOption", "type": { - "text": "CustomEvent<MultiComboBoxSelectionChangeEventDetail>", + "text": "IOption | undefined", "references": [ { - "name": "MultiComboBoxSelectionChangeEventDetail", + "name": "IOption", "package": "@ui5/webcomponents", - "module": "dist/MultiComboBox.js" + "module": "dist/Select.js" } ] }, - "description": "Fired when selection is changed by user interaction.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "Array<IMultiComboBoxItem>", - "references": [ - { - "name": "IMultiComboBoxItem", - "package": "@ui5/webcomponents", - "module": "dist/MultiComboBox.js" + "description": "Currently selected `ui5-option` element.", + "privacy": "public", + "default": "undefined", + "readonly": true + } + ], + "events": [ + { + "name": "change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<SelectChangeEventDetail>", + "references": [ + { + "name": "SelectChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Select.js" + } + ] + }, + "description": "Fired when the selected option changes.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "IOption", + "references": [ + { + "name": "IOption", + "package": "@ui5/webcomponents", + "module": "dist/Select.js" } ] }, - "name": "items", + "name": "selectedOption", "_ui5privacy": "public", - "description": "an array of the selected items." + "description": "the selected option." } ] - } - ], - "attributes": [ - { - "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", - "name": "value", - "default": "\"\"", - "fieldName": "value", - "type": { - "text": "string" - } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", - "name": "name", - "default": "undefined", - "fieldName": "name", + "name": "live-change", + "_ui5privacy": "public", "type": { - "text": "string | undefined" - } + "text": "CustomEvent<SelectLiveChangeEventDetail>", + "references": [ + { + "name": "SelectLiveChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Select.js" + } + ] + }, + "description": "Fired when the user navigates through the options, but the selection is not finalized,\nor when pressing the ESC key to revert the current selection.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.17.0", + "_ui5parameters": [ + { + "type": { + "text": "IOption", + "references": [ + { + "name": "IOption", + "package": "@ui5/webcomponents", + "module": "dist/Select.js" + } + ] + }, + "name": "selectedOption", + "_ui5privacy": "public", + "description": "the selected option." + } + ] }, { - "description": "Defines whether the value will be autcompleted to match an item", - "name": "no-typeahead", - "default": "false", - "fieldName": "noTypeahead", + "name": "open", + "_ui5privacy": "public", "type": { - "text": "boolean" - } + "text": "CustomEvent" + }, + "description": "Fired after the component's dropdown menu opens.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false }, { - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", - "name": "placeholder", - "default": "undefined", - "fieldName": "placeholder", + "name": "close", + "_ui5privacy": "public", "type": { - "text": "string | undefined" - } - }, + "text": "CustomEvent" + }, + "description": "Fired after the component's dropdown menu closes.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + } + ], + "attributes": [ { - "description": "Defines if the user input will be prevented, if no matching item has been found", - "name": "no-validation", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is noninteractive.", + "name": "disabled", "default": "false", - "fieldName": "noValidation", + "fieldName": "disabled", "type": { "text": "boolean" } }, { - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", "type": { - "text": "boolean" + "text": "string | undefined" } }, { @@ -19280,6 +20536,15 @@ "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" } }, + { + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", + "type": { + "text": "boolean" + } + }, { "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", "name": "readonly", @@ -19290,66 +20555,75 @@ } }, { - "description": "Defines whether the component is required.", - "name": "required", - "default": "false", - "fieldName": "required", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines the filter type of the component.", - "name": "filter", - "default": "\"StartsWithPerTerm\"", - "fieldName": "filter", + "description": "Receives id(or many ids) of the elements that label the select.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", "type": { - "text": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\"" + "text": "string | undefined" } }, { - "description": "Defines whether the clear icon of the multi-combobox will be shown.", - "name": "show-clear-icon", - "default": "false", - "fieldName": "showClearIcon", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", + "description": "Receives id(or many ids) of the elements that describe the select.", + "name": "accessible-description-ref", "default": "undefined", - "fieldName": "accessibleName", + "fieldName": "accessibleDescriptionRef", "type": { "text": "string | undefined" } }, { - "description": "Receives id(or many ids) of the elements that label the component.", - "name": "accessible-name-ref", + "description": "Defines the tooltip of the select.", + "name": "tooltip", "default": "undefined", - "fieldName": "accessibleNameRef", + "fieldName": "tooltip", "type": { "text": "string | undefined" } }, { - "description": "Determines if the select all checkbox is visible on top of suggestions.", - "name": "show-select-all", - "default": "false", - "fieldName": "showSelectAll", + "description": "Defines the separator type for the two columns layout when Select is in read-only mode.", + "name": "text-separator", + "default": "\"Dash\"", + "fieldName": "textSeparator", "type": { - "text": "boolean" + "text": "\"Bullet\" | \"Dash\" | \"VerticalLine\"" } }, { - "description": "Indicates whether the items picker is open.", - "name": "open", - "default": "false", - "fieldName": "open", + "description": "Defines the value of the component:\n\n- when get - returns the value of the component or the value/text content of the selected option.\n- when set - selects the option with matching `value` property or text content.\n\n**Note:** Use either the Select's value or the Options' selected property.\nMixed usage could result in unexpected behavior.\n\n**Note:** If the given value does not match any existing option,\nno option will be selected and the Select component will be displayed as empty.", + "name": "value", + "default": "\"\"", + "fieldName": "value", "type": { - "text": "boolean" + "text": "any" + } + }, + { + "description": "Currently selected `ui5-option` element.", + "name": "selected-option", + "default": "undefined", + "fieldName": "selectedOption", + "type": { + "text": "any" } } ], @@ -19358,9 +20632,9 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-multi-combobox", + "tagName": "ui5-select", "customElement": true, - "_ui5since": "0.11.0", + "_ui5since": "0.8.0", "_ui5privacy": "public" } ], @@ -19369,395 +20643,381 @@ "kind": "js", "name": "default", "declaration": { - "name": "MultiComboBox", - "module": "dist/MultiComboBox.js" + "name": "Select", + "module": "dist/Select.js" } }, { "kind": "custom-element-definition", - "name": "ui5-multi-combobox", + "name": "ui5-select", "declaration": { - "name": "MultiComboBox", - "module": "dist/MultiComboBox.js" + "name": "Select", + "module": "dist/Select.js" } } ] }, { "kind": "javascript-module", - "path": "dist/MultiComboBoxItem.js", + "path": "dist/Slider.js", "declarations": [ { "kind": "class", - "description": "The `ui5-mcb-item` represents the item for a `ui5-multi-combobox`.", - "name": "MultiComboBoxItem", + "description": "### Overview\nThe Slider component represents a numerical range and a handle (grip).\nThe purpose of the component is to enable visual selection of a value in\na continuous numerical range by moving an adjustable handle.\n\n### Structure\nThe most important properties of the Slider are:\n\n- min - The minimum value of the slider range.\n- max - The maximum value of the slider range.\n- value - The current value of the slider range.\n- step - Determines the increments in which the slider will move.\n- showTooltip - Determines if a tooltip should be displayed above the handle.\n- showTickmarks - Displays a visual divider between the step values.\n- labelInterval - Labels some or all of the tickmarks with their values.\n\n### Usage\nThe most common use case is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).\n\n### Responsive Behavior\nThe `ui5-slider` component adjusts to the size of its parent container by recalculating and\nresizing the width of the control. You can move the slider handle in several different ways:\n\n- Drag and drop the handle to the desired value.\n- Click/tap on the range bar to move the handle to that location.\n\n### Keyboard Handling\n\n- `Left or Down Arrow` - Moves the handle one step to the left, effectively decreasing the component's value by `step` amount;\n- `Right or Up Arrow` - Moves the handle one step to the right, effectively increasing the component's value by `step` amount;\n- `Left or Down Arrow + Ctrl/Cmd` - Moves the handle to the left with step equal to 1/10th of the entire range, effectively decreasing the component's value by 1/10th of the range;\n- `Right or Up Arrow + Ctrl/Cmd` - Moves the handle to the right with step equal to 1/10th of the entire range, effectively increasing the component's value by 1/10th of the range;\n- `Plus` - Same as `Right or Up Arrow`;\n- `Minus` - Same as `Left or Down Arrow`;\n- `Home` - Moves the handle to the beginning of the range;\n- `End` - Moves the handle to the end of the range;\n- `Page Up` - Same as `Right or Up + Ctrl/Cmd`;\n- `Page Down` - Same as `Left or Down + Ctrl/Cmd`;\n- `Escape` - Resets the value property after interaction, to the position prior the component's focusing;\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Slider.js\";`", + "name": "Slider", + "cssParts": [ + { + "description": "Used to style the progress container, the horizontal bar that visually represents the range between the minimum and maximum values, of the `ui5-slider`.", + "name": "progress-container" + }, + { + "description": "Used to style the progress bar, which shows the progress of the `ui5-slider`.", + "name": "progress-bar" + }, + { + "description": "Used to style the handle of the `ui5-slider`.", + "name": "handle" + } + ], "members": [ { "kind": "field", - "name": "selected", + "name": "value", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Defines the selected state of the component.", + "default": "0", "privacy": "public", + "description": "Current value of the slider", + "_ui5formProperty": true, + "_ui5formEvents": "change,input", "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } }, { "kind": "field", - "name": "text", + "name": "min", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Defines the text of the component.", - "default": "undefined", + "default": "0", + "description": "Defines the minimum value of the slider.", "privacy": "public", "inheritedFrom": { - "name": "ComboBoxItem", - "module": "dist/ComboBoxItem.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } }, { "kind": "field", - "name": "additionalText", + "name": "max", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Defines the additional text of the component.", - "default": "undefined", + "default": "100", + "description": "Defines the maximum value of the slider.", "privacy": "public", - "_ui5since": "1.0.0-rc.11", "inheritedFrom": { - "name": "ComboBoxItem", - "module": "dist/ComboBoxItem.js" - } - } - ], - "attributes": [ - { - "description": "Defines the selected state of the component.", - "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" + "name": "SliderBase", + "module": "dist/SliderBase.js" } }, { - "description": "Defines the text of the component.", - "name": "text", - "default": "undefined", - "fieldName": "text", + "kind": "field", + "name": "name", "type": { "text": "string | undefined" }, + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.0.0", "inheritedFrom": { - "name": "ComboBoxItem", - "module": "dist/ComboBoxItem.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } }, { - "description": "Defines the additional text of the component.", - "name": "additional-text", - "default": "undefined", - "fieldName": "additionalText", + "kind": "field", + "name": "step", "type": { - "text": "string | undefined" + "text": "number" }, + "default": "1", + "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", + "privacy": "public", "inheritedFrom": { - "name": "ComboBoxItem", - "module": "dist/ComboBoxItem.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } - } - ], - "superclass": { - "name": "ComboBoxItem", - "package": "@ui5/webcomponents", - "module": "dist/ComboBoxItem.js" - }, - "tagName": "ui5-mcb-item", - "customElement": true, - "_ui5privacy": "public", - "_ui5implements": [ - { - "name": "IMultiComboBoxItem", - "package": "@ui5/webcomponents", - "module": "dist/MultiComboBox.js" - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "MultiComboBoxItem", - "module": "dist/MultiComboBoxItem.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-mcb-item", - "declaration": { - "name": "MultiComboBoxItem", - "module": "dist/MultiComboBoxItem.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/MultiComboBoxItemGroup.js", - "declarations": [ - { - "kind": "class", - "description": "The `ui5-mcb-item-group` is type of suggestion item,\nthat can be used to split the `ui5-multi-combobox` suggestions into groups.", - "name": "MultiComboBoxItemGroup", - "slots": [ + }, { - "name": "default", - "description": "Defines the items of the <code>ui5-mcb-item-group</code>.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<MultiComboBoxItem>", - "references": [ - { - "name": "MultiComboBoxItem", - "package": "@ui5/webcomponents", - "module": "dist/MultiComboBoxItem.js" - } - ] + "kind": "field", + "name": "labelInterval", + "type": { + "text": "number" }, - "_ui5privacy": "public", + "default": "0", + "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", + "privacy": "public", "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } }, { - "name": "header", - "description": "Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.", - "_ui5type": { - "text": "Array<ListItemBase>", - "references": [ - { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - } - ] + "kind": "field", + "name": "showTickmarks", + "type": { + "text": "boolean" }, - "_ui5privacy": "public", + "default": "false", + "description": "Enables tickmarks visualization for each step.\n\n**Note:** The step must be a positive number.", + "privacy": "public", "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } - } - ], - "members": [ + }, { "kind": "field", - "name": "headerText", + "name": "showTooltip", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the header text of the <code>ui5-li-group</code>.", + "default": "false", + "description": "Enables handle tooltip displaying the current value.", "privacy": "public", - "default": "undefined", "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } }, { "kind": "field", - "name": "headerAccessibleName", + "name": "editableTooltip", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible name of the header.", + "default": "false", + "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", "privacy": "public", - "default": "undefined", "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } }, { "kind": "field", - "name": "wrappingType", + "name": "disabled", "type": { - "text": "WrappingType", - "references": [ - { - "name": "WrappingType", - "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" - } - ] + "text": "boolean" }, - "default": "\"None\"", - "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "default": "false", + "description": "Defines whether the slider is in disabled state.", "privacy": "public", - "_ui5since": "2.15.0", "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } - } - ], - "superclass": { - "name": "ComboBoxItemGroup", - "package": "@ui5/webcomponents", - "module": "dist/ComboBoxItemGroup.js" - }, - "tagName": "ui5-mcb-item-group", - "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public", - "_ui5implements": [ - { - "name": "IMultiComboBoxItem", - "package": "@ui5/webcomponents", - "module": "dist/MultiComboBox.js" - } - ], - "cssParts": [ + }, { - "description": "Used to style the header item of the group", - "name": "header", + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.4.0", "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } } ], "attributes": [ { - "description": "Defines the header text of the <code>ui5-li-group</code>.", - "name": "header-text", + "description": "Current value of the slider", + "name": "value", "default": "undefined", - "fieldName": "headerText", + "fieldName": "value", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" + "text": "number" } }, { - "description": "Defines the accessible name of the header.", - "name": "header-accessible-name", + "description": "Defines the minimum value of the slider.", + "name": "min", + "default": "0", + "fieldName": "min", + "type": { + "text": "number" + }, + "inheritedFrom": { + "name": "SliderBase", + "module": "dist/SliderBase.js" + } + }, + { + "description": "Defines the maximum value of the slider.", + "name": "max", + "default": "100", + "fieldName": "max", + "type": { + "text": "number" + }, + "inheritedFrom": { + "name": "SliderBase", + "module": "dist/SliderBase.js" + } + }, + { + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", "default": "undefined", - "fieldName": "headerAccessibleName", + "fieldName": "name", "type": { "text": "string | undefined" }, "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } }, { - "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", - "name": "wrapping-type", - "default": "\"None\"", - "fieldName": "wrappingType", + "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", + "name": "step", + "default": "1", + "fieldName": "step", "type": { - "text": "\"None\" | \"Normal\"" + "text": "number" }, "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" + } + }, + { + "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", + "name": "label-interval", + "default": "0", + "fieldName": "labelInterval", + "type": { + "text": "number" + }, + "inheritedFrom": { + "name": "SliderBase", + "module": "dist/SliderBase.js" + } + }, + { + "description": "Enables tickmarks visualization for each step.\n\n**Note:** The step must be a positive number.", + "name": "show-tickmarks", + "default": "false", + "fieldName": "showTickmarks", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "SliderBase", + "module": "dist/SliderBase.js" + } + }, + { + "description": "Enables handle tooltip displaying the current value.", + "name": "show-tooltip", + "default": "false", + "fieldName": "showTooltip", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "SliderBase", + "module": "dist/SliderBase.js" + } + }, + { + "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", + "name": "editable-tooltip", + "default": "false", + "fieldName": "editableTooltip", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "SliderBase", + "module": "dist/SliderBase.js" + } + }, + { + "description": "Defines whether the slider is in disabled state.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "SliderBase", + "module": "dist/SliderBase.js" + } + }, + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "SliderBase", + "module": "dist/SliderBase.js" } } ], + "superclass": { + "name": "SliderBase", + "package": "@ui5/webcomponents", + "module": "dist/SliderBase.js" + }, + "tagName": "ui5-slider", + "customElement": true, + "_ui5since": "1.0.0-rc.11", + "_ui5privacy": "public", "events": [ { - "name": "move-over", + "name": "change", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ListItemGroupMoveEventDetail>", - "references": [ - { - "name": "ListItemGroupMoveEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/ListItemGroup.js" - } - ] + "text": "CustomEvent" }, - "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, + "description": "Fired when the value changes and the user has finished interacting with the slider.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "2.1.0", - "_ui5parameters": [ - { - "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." - }, - { - "type": { - "text": "object" - }, - "name": "destination", - "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." - } - ], "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } }, { - "name": "move", + "name": "input", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ListItemGroupMoveEventDetail>", - "references": [ - { - "name": "ListItemGroupMoveEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/ListItemGroup.js" - } - ] + "text": "CustomEvent" }, - "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "description": "Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "2.1.0", - "_ui5parameters": [ - { - "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." - }, - { - "type": { - "text": "object" - }, - "name": "destination", - "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." - } - ], "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" + "name": "SliderBase", + "module": "dist/SliderBase.js" } } ] @@ -19768,106 +21028,47 @@ "kind": "js", "name": "default", "declaration": { - "name": "MultiComboBoxItemGroup", - "module": "dist/MultiComboBoxItemGroup.js" + "name": "Slider", + "module": "dist/Slider.js" } }, { "kind": "custom-element-definition", - "name": "ui5-mcb-item-group", + "name": "ui5-slider", "declaration": { - "name": "MultiComboBoxItemGroup", - "module": "dist/MultiComboBoxItemGroup.js" + "name": "Slider", + "module": "dist/Slider.js" } } ] }, { "kind": "javascript-module", - "path": "dist/MultiInput.js", + "path": "dist/SliderBase.js", "declarations": [ { "kind": "class", - "description": "### Overview\nA `ui5-multi-input` field allows the user to enter multiple values, which are displayed as `ui5-token`.\n\nUser can choose interaction for creating tokens.\nFiori Guidelines say that user should create tokens when:\n\n- Type a value in the input and press enter or focus out the input field (`change` event is fired)\n- Move between suggestion items (`selection-change` event is fired)\n- Clicking on a suggestion item (`selection-change` event is fired if the clicked item is different than the current value. Also `change` event is fired )\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiInput.js\";`", - "name": "MultiInput", - "slots": [ - { - "name": "tokens", - "description": "Defines the component tokens.", - "_ui5type": { - "text": "Array<IToken>", - "references": [ - { - "name": "IToken", - "package": "@ui5/webcomponents", - "module": "dist/MultiInput.js" - } - ] - }, - "_ui5privacy": "public" - }, - { - "name": "default", - "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.", - "_ui5propertyName": "suggestionItems", - "_ui5type": { - "text": "Array<IInputSuggestionItem>", - "references": [ - { - "name": "IInputSuggestionItem", - "package": "@ui5/webcomponents", - "module": "dist/Input.js" - } - ] - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } - }, + "description": "### Overview", + "name": "SliderBase", + "members": [ { - "name": "icon", - "description": "Defines the icon to be displayed in the component.", - "_ui5type": { - "text": "Array<IIcon>", - "references": [ - { - "name": "IIcon", - "package": "@ui5/webcomponents", - "module": "dist/Icon.js" - } - ] + "kind": "field", + "name": "min", + "type": { + "text": "number" }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "default": "0", + "description": "Defines the minimum value of the slider.", + "privacy": "public" }, - { - "name": "valueStateMessage", - "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.", - "_ui5since": "1.0.0-rc.6", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } - } - ], - "members": [ { "kind": "field", - "name": "showValueHelpIcon", + "name": "max", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Determines whether a value help icon will be visualized in the end of the input.\nPressing the icon will fire `value-help-trigger` event.", + "default": "100", + "description": "Defines the maximum value of the slider.", "privacy": "public" }, { @@ -19876,683 +21077,892 @@ "type": { "text": "string | undefined" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "_ui5since": "2.0.0" }, { "kind": "field", - "name": "disabled", + "name": "step", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", - "privacy": "public", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "default": "1", + "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", + "privacy": "public" }, { "kind": "field", - "name": "placeholder", + "name": "labelInterval", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", - "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "default": "0", + "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", + "privacy": "public" }, { "kind": "field", - "name": "readonly", + "name": "showTickmarks", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", - "privacy": "public", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "description": "Enables tickmarks visualization for each step.\n\n**Note:** The step must be a positive number.", + "privacy": "public" }, { "kind": "field", - "name": "required", + "name": "showTooltip", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is required.", - "privacy": "public", - "_ui5since": "1.0.0-rc.3", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "description": "Enables handle tooltip displaying the current value.", + "privacy": "public" }, { "kind": "field", - "name": "noTypeahead", + "name": "editableTooltip", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the value will be autcompleted to match an item", - "privacy": "public", - "_ui5since": "1.4.0", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", + "privacy": "public" }, { "kind": "field", - "name": "type", + "name": "disabled", "type": { - "text": "InputType", - "references": [ - { - "name": "InputType", - "package": "@ui5/webcomponents", - "module": "dist/types/InputType.js" - } - ] + "text": "boolean" }, - "default": "\"Text\"", - "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.", - "privacy": "public", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "default": "false", + "description": "Defines whether the slider is in disabled state.", + "privacy": "public" }, { "kind": "field", - "name": "value", + "name": "accessibleName", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"\"", - "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change,input", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } - }, + "_ui5since": "1.4.0" + } + ], + "events": [ { - "kind": "field", - "name": "valueState", + "name": "change", + "_ui5privacy": "public", "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] + "text": "CustomEvent" }, - "default": "\"None\"", - "description": "Defines the value state of the component.", - "privacy": "public", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "description": "Fired when the value changes and the user has finished interacting with the slider.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true }, { - "kind": "field", - "name": "showSuggestions", + "name": "input", + "_ui5privacy": "public", "type": { - "text": "boolean" + "text": "CustomEvent" }, - "default": "false", - "description": "Defines whether the component should show suggestions, if such are present.", - "privacy": "public", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } - }, + "description": "Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ], + "attributes": [ { - "kind": "field", - "name": "maxlength", + "description": "Defines the minimum value of the slider.", + "name": "min", + "default": "0", + "fieldName": "min", "type": { - "text": "number | undefined" - }, - "description": "Sets the maximum number of characters available in the input field.\n\n**Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.5", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" + "text": "number" } }, { - "kind": "field", - "name": "accessibleName", + "description": "Defines the maximum value of the slider.", + "name": "max", + "default": "100", + "fieldName": "max", "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" + "text": "number" } }, { - "kind": "field", - "name": "accessibleNameRef", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", "type": { "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that label the input.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" } }, { - "kind": "field", - "name": "accessibleDescription", + "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", + "name": "step", + "default": "1", + "fieldName": "step", "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible description of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.9.0", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" + "text": "number" } }, { - "kind": "field", - "name": "accessibleDescriptionRef", + "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", + "name": "label-interval", + "default": "0", + "fieldName": "labelInterval", "type": { - "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that describe the input.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.9.0", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" + "text": "number" } }, { - "kind": "field", - "name": "showClearIcon", + "description": "Enables tickmarks visualization for each step.\n\n**Note:** The step must be a positive number.", + "name": "show-tickmarks", + "default": "false", + "fieldName": "showTickmarks", "type": { "text": "boolean" - }, + } + }, + { + "description": "Enables handle tooltip displaying the current value.", + "name": "show-tooltip", "default": "false", - "description": "Defines whether the clear icon of the input will be shown.", - "privacy": "public", - "_ui5since": "1.2.0", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" + "fieldName": "showTooltip", + "type": { + "text": "boolean" } }, { - "kind": "field", - "name": "open", + "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", + "name": "editable-tooltip", + "default": "false", + "fieldName": "editableTooltip", "type": { "text": "boolean" - }, + } + }, + { + "description": "Defines whether the slider is in disabled state.", + "name": "disabled", "default": "false", - "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", - "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" + "fieldName": "disabled", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" } } ], - "events": [ + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "customElement": true, + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "SliderBase", + "module": "dist/SliderBase.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/SliderTooltip.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "SliderTooltip", + "module": "dist/SliderTooltip.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/SpecialCalendarDate.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-special-date` component defines a special calendar date to be used inside `ui5-calendar`,\nwhich is visually distinguished from the rest of the dates.", + "name": "SpecialCalendarDate", + "members": [ { - "name": "value-help-trigger", - "_ui5privacy": "public", + "kind": "field", + "name": "value", "type": { - "text": "CustomEvent" + "text": "string" }, - "description": "Fired when the value help icon is pressed\nand F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "default": "\"\"", + "description": "The date formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", + "privacy": "public" }, { - "name": "token-delete", - "_ui5privacy": "public", + "kind": "field", + "name": "type", "type": { - "text": "CustomEvent<MultiInputTokenDeleteEventDetail>", + "text": "CalendarLegendItemType", "references": [ { - "name": "MultiInputTokenDeleteEventDetail", + "name": "CalendarLegendItemType", "package": "@ui5/webcomponents", - "module": "dist/MultiInput.js" + "module": "dist/types/CalendarLegendItemType.js" } ] }, - "description": "Fired when tokens are being deleted.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "Array" - }, - "name": "tokens", - "_ui5privacy": "public", - "description": "An array containing the deleted tokens." - } - ] + "default": "\"None\"", + "description": "Defines the type of the special date.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "The date formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + } }, { - "name": "change", - "_ui5privacy": "public", + "description": "Defines the type of the special date.", + "name": "type", + "default": "\"None\"", + "fieldName": "type", "type": { - "text": "CustomEvent" - }, - "description": "Fired when the input operation has finished by pressing Enter or on focusout.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" + "text": "\"None\" | \"Today\" | \"Selected\" | \"Working\" | \"NonWorking\" | \"Type01\" | \"Type02\" | \"Type03\" | \"Type04\" | \"Type05\" | \"Type06\" | \"Type07\" | \"Type08\" | \"Type09\" | \"Type10\" | \"Type11\" | ... 8 more ... | \"Type20\"" } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-special-date", + "customElement": true, + "_ui5since": "1.23.0", + "_ui5privacy": "public", + "_ui5abstract": true + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "SpecialCalendarDate", + "module": "dist/SpecialCalendarDate.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-special-date", + "declaration": { + "name": "SpecialCalendarDate", + "module": "dist/SpecialCalendarDate.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/SplitButton.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\n`ui5-split-button` enables users to trigger actions. It is constructed of two separate actions -\ndefault action and arrow action that can be activated by clicking or tapping, or by\npressing certain keyboard keys - `Space` or `Enter` for default action,\nand `Arrow Down` or `Arrow Up` for arrow action.\n\n### Usage\n\n`ui5-split-button` consists two separate buttons:\n\n- for the first one (default action) you can define some `text` or an `icon`, or both.\n- the second one (arrow action) contains only `slim-arrow-down` icon.\n\nYou can choose a `design` from a set of predefined types (the same as for ui5-button) that offer\ndifferent styling to correspond to the triggered action. Both text and arrow actions have the same design.\n\nYou can set the `ui5-split-button` as enabled or disabled. Both parts of an enabled\n`ui5-split-button` can be pressed by clicking or tapping it, or by certain keys, which changes\nthe style to provide visual feedback to the user that it is pressed or hovered over with\nthe mouse cursor. A disabled `ui5-split-button` appears inactive and any of the two buttons\ncannot be pressed.\n\n### Keyboard Handling\n\n- `Space` or `Enter` - triggers the default action\n- `Shift` or `Escape` - if `Space` is pressed, releases the default action button without triggering the click event.\n- `Arrow Down`, `Arrow Up`, `Alt`+`Arrow Down`, `Alt`+`Arrow Up`, or `F4` - triggers the arrow action\nThere are separate events that are fired on activating of `ui5-split-button` parts:\n\n- `click` for the first button (default action)\n- `arrow-click` for the second button (arrow action)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SplitButton.js\";`", + "name": "SplitButton", + "cssParts": [ + { + "description": "Used to style the native button element", + "name": "button" }, { - "name": "input", - "_ui5privacy": "public", + "description": "Used to style the icon in the native button element", + "name": "icon" + }, + { + "description": "Used to style the end icon in the native button element", + "name": "endIcon" + } + ], + "slots": [ + { + "name": "default", + "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", + "_ui5propertyName": "text", + "_ui5type": { + "text": "Array<Node>" + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "icon", "type": { - "text": "CustomEvent" + "text": "string | undefined" }, - "description": "Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\n\nSee all available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", + "privacy": "public" }, { - "name": "select", - "_ui5privacy": "public", + "kind": "field", + "name": "activeArrowButton", "type": { - "text": "CustomEvent" + "text": "boolean" }, - "description": "Fired when some text has been selected.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "default": "false", + "description": "Defines whether the arrow button should have the active state styles or not.", + "privacy": "public", + "_ui5since": "1.21.0" }, { - "name": "selection-change", - "_ui5privacy": "public", + "kind": "field", + "name": "design", "type": { - "text": "CustomEvent<InputSelectionChangeEventDetail>", + "text": "ButtonDesign", "references": [ { - "name": "InputSelectionChangeEventDetail", + "name": "ButtonDesign", "package": "@ui5/webcomponents", - "module": "dist/Input.js" + "module": "dist/types/ButtonDesign.js" } ] }, - "description": "Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.0.0", - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "The previewed suggestion item." - } - ], - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "default": "\"Default\"", + "description": "Defines the component design.", + "privacy": "public" }, { - "name": "open", + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "privacy": "public" + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "accessibilityAttributes", + "type": { + "text": "SplitButtonAccessibilityAttributes", + "references": [ + { + "name": "SplitButtonAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/SplitButton.js" + } + ] + }, + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Provides a human-readable description for the role of the button.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n\t- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", + "privacy": "public", + "_ui5since": "2.13.0" + } + ], + "events": [ + { + "name": "click", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the suggestions picker is open.", + "description": "Fired when the user clicks on the default action.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "_ui5Bubbles": true }, { - "name": "close", + "name": "arrow-click", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the suggestions picker is closed.", + "description": "Fired when the user clicks on the arrow action.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "_ui5Bubbles": true } ], "attributes": [ { - "description": "Determines whether a value help icon will be visualized in the end of the input.\nPressing the icon will fire `value-help-trigger` event.", - "name": "show-value-help-icon", + "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\n\nSee all available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether the arrow button should have the active state styles or not.", + "name": "active-arrow-button", "default": "false", - "fieldName": "showValueHelpIcon", + "fieldName": "activeArrowButton", "type": { "text": "boolean" } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", - "name": "name", - "default": "undefined", - "fieldName": "name", + "description": "Defines the component design.", + "name": "design", + "default": "\"Default\"", + "fieldName": "design", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" + "text": "\"Transparent\" | \"Default\" | \"Positive\" | \"Negative\" | \"Emphasized\" | \"Attention\"" } }, { - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", "name": "disabled", "default": "false", "fieldName": "disabled", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" } }, { - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", - "name": "placeholder", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", "default": "undefined", - "fieldName": "placeholder", + "fieldName": "accessibleName", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" } }, { - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", - "name": "readonly", - "default": "false", - "fieldName": "readonly", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Provides a human-readable description for the role of the button.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n\t- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" + "text": "SplitButtonAccessibilityAttributes" } - }, + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-split-button", + "customElement": true, + "_ui5since": "1.1.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "SplitButton", + "module": "dist/SplitButton.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-split-button", + "declaration": { + "name": "SplitButton", + "module": "dist/SplitButton.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/StepInput.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-step-input` consists of an input field and buttons with icons to increase/decrease the value\nwith the predefined step.\n\nThe user can change the value of the component by pressing the increase/decrease buttons,\nby typing a number directly, by using the keyboard up/down and page up/down,\nor by using the mouse scroll wheel. Decimal values are supported.\n\n### Usage\n\nThe default step is 1 but the app developer can set a different one.\n\nApp developers can set a maximum and minimum value for the `StepInput`.\nThe increase/decrease button and the up/down keyboard navigation become disabled when\nthe value reaches the max/min or a new value is entered from the input which is greater/less than the max/min.\n\n#### When to use:\n\n- To adjust amounts, quantities, or other values quickly.\n- To adjust values for a specific step.\n\n#### When not to use:\n\n- To enter a static number (for example, postal code, phone number, or ID). In this case,\nuse the regular `ui5-input` instead.\n- To display a value that rarely needs to be adjusted and does not pertain to a particular step.\nIn this case, use the regular `ui5-input` instead.\n- To enter dates and times. In this case, use date/time related components instead.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/StepInput.js\";`", + "name": "StepInput", + "slots": [ { - "description": "Defines whether the component is required.", - "name": "required", - "default": "false", - "fieldName": "required", - "type": { - "text": "boolean" + "name": "valueStateMessage", + "description": "Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.", + "_ui5type": { + "text": "Array<HTMLElement>" }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } - }, + "_ui5privacy": "public" + } + ], + "members": [ { - "description": "Defines whether the value will be autcompleted to match an item", - "name": "no-typeahead", - "default": "false", - "fieldName": "noTypeahead", + "kind": "field", + "name": "value", "type": { - "text": "boolean" + "text": "number" }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "default": "0", + "description": "Defines a value of the component.", + "privacy": "public" }, { - "description": "Defines the HTML type of the component.\n\n**Notes:**\n\n- The particular effect of this property differs depending on the browser\nand the current language settings, especially for type `Number`.\n- The property is mostly intended to be used with touch devices\nthat use different soft keyboard layouts depending on the given input type.", - "name": "type", - "default": "\"Text\"", - "fieldName": "type", + "kind": "field", + "name": "min", "type": { - "text": "\"Text\" | \"Email\" | \"Number\" | \"Password\" | \"Tel\" | \"URL\" | \"Search\"" + "text": "number | undefined" }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "description": "Defines a minimum value of the component.", + "default": "undefined", + "privacy": "public" }, { - "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", - "name": "value", - "default": "\"\"", - "fieldName": "value", + "kind": "field", + "name": "max", "type": { - "text": "string" + "text": "number | undefined" }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "description": "Defines a maximum value of the component.", + "default": "undefined", + "privacy": "public" }, { - "description": "Defines the value state of the component.", - "name": "value-state", + "kind": "field", + "name": "step", + "type": { + "text": "number" + }, + "default": "1", + "description": "Defines a step of increasing/decreasing the value of the component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "valueState", + "type": { + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] + }, "default": "\"None\"", - "fieldName": "valueState", + "description": "Defines the value state of the component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "required", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "boolean" }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "default": "false", + "description": "Defines whether the component is required.", + "privacy": "public" }, { - "description": "Defines whether the component should show suggestions, if such are present.", - "name": "show-suggestions", + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, "default": "false", - "fieldName": "showSuggestions", + "description": "Determines whether the component is displayed as disabled.", + "privacy": "public" + }, + { + "kind": "field", + "name": "readonly", "type": { "text": "boolean" }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "default": "false", + "description": "Determines whether the component is displayed as read-only.", + "privacy": "public" }, { - "description": "Sets the maximum number of characters available in the input field.\n\n**Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.", - "name": "maxlength", + "kind": "field", + "name": "placeholder", + "type": { + "text": "string | undefined" + }, + "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", "default": "undefined", - "fieldName": "maxlength", + "privacy": "public" + }, + { + "kind": "field", + "name": "name", "type": { - "text": "number | undefined" + "text": "string | undefined" }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", + "privacy": "public" }, { + "kind": "field", + "name": "valuePrecision", + "type": { + "text": "number" + }, + "default": "0", + "description": "Determines the number of digits after the decimal point of the component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", "default": "undefined", - "fieldName": "accessibleName", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "accessibleNameRef", "type": { "text": "string | undefined" }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" - } + "description": "Receives id(or many ids) of the elements that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + } + ], + "events": [ + { + "name": "change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the input operation has finished by pressing Enter or on focusout.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true }, { - "description": "Receives id(or many ids) of the elements that label the input.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "name": "input", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent" }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" + "description": "Fired when the value of the component changes at each keystroke.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.6.0" + }, + { + "name": "value-state-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<StepInputValueStateChangeEventDetail>", + "references": [ + { + "name": "StepInputValueStateChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/StepInput.js" + } + ] + }, + "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "1.23.0", + "_ui5parameters": [ + { + "type": { + "text": "string" + }, + "name": "valueState", + "_ui5privacy": "public", + "description": "The new `valueState` that will be set." + }, + { + "type": { + "text": "boolean" + }, + "name": "valid", + "_ui5privacy": "public", + "description": "Indicator if the value is in between the min and max value." + } + ] + } + ], + "attributes": [ + { + "description": "Defines a value of the component.", + "name": "value", + "default": "0", + "fieldName": "value", + "type": { + "text": "number" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", + "description": "Defines a minimum value of the component.", + "name": "min", "default": "undefined", - "fieldName": "accessibleDescription", + "fieldName": "min", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" + "text": "number | undefined" } }, { - "description": "Receives id(or many ids) of the elements that describe the input.", - "name": "accessible-description-ref", + "description": "Defines a maximum value of the component.", + "name": "max", "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "fieldName": "max", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" + "text": "number | undefined" } }, { - "description": "Defines whether the clear icon of the input will be shown.", - "name": "show-clear-icon", + "description": "Defines a step of increasing/decreasing the value of the component.", + "name": "step", + "default": "1", + "fieldName": "step", + "type": { + "text": "number" + } + }, + { + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", + "type": { + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + } + }, + { + "description": "Defines whether the component is required.", + "name": "required", "default": "false", - "fieldName": "showClearIcon", + "fieldName": "required", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" } }, { - "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", - "name": "open", + "description": "Determines whether the component is displayed as disabled.", + "name": "disabled", "default": "false", - "fieldName": "open", + "fieldName": "disabled", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" } - } - ], - "superclass": { - "name": "Input", - "package": "@ui5/webcomponents", - "module": "dist/Input.js" - }, - "tagName": "ui5-multi-input", - "customElement": true, - "_ui5since": "1.0.0-rc.9", - "_ui5privacy": "public", - "cssParts": [ + }, { - "description": "Used to style the root DOM element of the Input component", - "name": "root", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" + "description": "Determines whether the component is displayed as read-only.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", + "type": { + "text": "boolean" } }, { - "description": "Used to style the native input element", - "name": "input", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" + "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", + "name": "placeholder", + "default": "undefined", + "fieldName": "placeholder", + "type": { + "text": "string | undefined" } }, { - "description": "Used to style the clear icon, which can be pressed to clear user input text", - "name": "clear-icon", - "inheritedFrom": { - "name": "Input", - "module": "dist/Input.js" + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Determines the number of digits after the decimal point of the component.", + "name": "value-precision", + "default": "0", + "fieldName": "valuePrecision", + "type": { + "text": "number" + } + }, + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" } } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-step-input", + "customElement": true, + "_ui5since": "1.0.0-rc.13", + "_ui5privacy": "public" } ], "exports": [ @@ -20560,57 +21970,36 @@ "kind": "js", "name": "default", "declaration": { - "name": "MultiInput", - "module": "dist/MultiInput.js" + "name": "StepInput", + "module": "dist/StepInput.js" } }, { "kind": "custom-element-definition", - "name": "ui5-multi-input", + "name": "ui5-step-input", "declaration": { - "name": "MultiInput", - "module": "dist/MultiInput.js" + "name": "StepInput", + "module": "dist/StepInput.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Option.js", + "path": "dist/SuggestionItem.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-option` component defines the content of an option in the `ui5-select`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Option.js\";`", - "name": "Option", - "slots": [ - { - "name": "default", - "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", - "_ui5propertyName": "text", - "_ui5type": { - "text": "Array<Node>" - }, - "_ui5privacy": "public" - } - ], + "description": "The `ui5-suggestion-item` represents the suggestion item of the `ui5-input`.", + "name": "SuggestionItem", "members": [ { "kind": "field", - "name": "value", - "type": { - "text": "string | undefined" - }, - "description": "Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.\nFor more information on HTML Form support, see the `name` property of `ui5-select`.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "icon", + "name": "text", "type": { "text": "string | undefined" }, - "description": "Defines the `icon` source URI.\n\n**Note:**\nSAP-icons font provides numerous built-in icons. To find all the available icons, see the\n[Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the text of the component.", "default": "undefined", "privacy": "public" }, @@ -20620,82 +22009,30 @@ "type": { "text": "string | undefined" }, - "description": "Defines the `additionalText`, displayed in the end of the option.", + "description": "Defines the `additionalText`, displayed in the end of the item.", "default": "undefined", "privacy": "public", "_ui5since": "1.0.0-rc.15" - }, - { - "kind": "field", - "name": "tooltip", - "type": { - "text": "string | undefined" - }, - "description": "Defines the tooltip of the option.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.0.0" - }, - { - "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the selected state of the component.", - "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } } ], "attributes": [ { - "description": "Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.\nFor more information on HTML Form support, see the `name` property of `ui5-select`.", - "name": "value", - "default": "undefined", - "fieldName": "value", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the `icon` source URI.\n\n**Note:**\nSAP-icons font provides numerous built-in icons. To find all the available icons, see the\n[Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", + "description": "Defines the text of the component.", + "name": "text", "default": "undefined", - "fieldName": "icon", + "fieldName": "text", "type": { "text": "string | undefined" } }, { - "description": "Defines the `additionalText`, displayed in the end of the option.", + "description": "Defines the `additionalText`, displayed in the end of the item.", "name": "additional-text", "default": "undefined", "fieldName": "additionalText", "type": { "text": "string | undefined" } - }, - { - "description": "Defines the tooltip of the option.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the selected state of the component.", - "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" - } } ], "superclass": { @@ -20703,14 +22040,15 @@ "package": "@ui5/webcomponents", "module": "dist/ListItemBase.js" }, - "tagName": "ui5-option", + "tagName": "ui5-suggestion-item", "customElement": true, "_ui5privacy": "public", + "_ui5abstract": true, "_ui5implements": [ { - "name": "IOption", + "name": "IInputSuggestionItemSelectable", "package": "@ui5/webcomponents", - "module": "dist/Select.js" + "module": "dist/Input.js" } ] } @@ -20720,28 +22058,28 @@ "kind": "js", "name": "default", "declaration": { - "name": "Option", - "module": "dist/Option.js" + "name": "SuggestionItem", + "module": "dist/SuggestionItem.js" } }, { "kind": "custom-element-definition", - "name": "ui5-option", + "name": "ui5-suggestion-item", "declaration": { - "name": "Option", - "module": "dist/Option.js" + "name": "SuggestionItem", + "module": "dist/SuggestionItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/OptionCustom.js", + "path": "dist/SuggestionItemCustom.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-option-custom` component defines a custom content of an option in the `ui5-select`.\nA component to be the same way as the standard `ui5-option`.\nThe component accepts arbitrary HTML content to allow full customization.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/OptionCustom.js\";`", - "name": "OptionCustom", + "description": "The `ui5-suggestion-item-custom` is type of suggestion item,\nthat can be used to place suggestion items with custom content in the input.\nThe text property is considered only for autocomplete.\nIn case the user needs highlighting functionality, check \"@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js\"", + "name": "SuggestionItemCustom", "slots": [ { "name": "default", @@ -20756,101 +22094,306 @@ "members": [ { "kind": "field", - "name": "displayText", + "name": "text", "type": { "text": "string | undefined" }, - "description": "Defines the text, displayed inside the `ui5-select` input filed\nwhen the option gets selected.", + "description": "Defines the text of the `ui5-suggestion-item-custom`.\n**Note:** The text property is considered only for autocomplete.", "default": "undefined", "privacy": "public" - }, + } + ], + "attributes": [ { - "kind": "field", - "name": "value", - "type": { - "text": "string | undefined" - }, - "description": "Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.\nFor more information on HTML Form support, see the `name` property of `ui5-select`.", + "description": "Defines the text of the `ui5-suggestion-item-custom`.\n**Note:** The text property is considered only for autocomplete.", + "name": "text", "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "tooltip", + "fieldName": "text", "type": { "text": "string | undefined" + } + } + ], + "superclass": { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + }, + "tagName": "ui5-suggestion-item-custom", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IInputSuggestionItemSelectable", + "package": "@ui5/webcomponents", + "module": "dist/Input.js" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "SuggestionItemCustom", + "module": "dist/SuggestionItemCustom.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-suggestion-item-custom", + "declaration": { + "name": "SuggestionItemCustom", + "module": "dist/SuggestionItemCustom.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/SuggestionItemGroup.js", + "declarations": [ + { + "kind": "class", + "description": "The `ui5-suggestion-item-group` is type of suggestion item,\nthat can be used to split the `ui5-input` suggestions into groups.", + "name": "SuggestionItemGroup", + "slots": [ + { + "name": "default", + "description": "Defines the items of the <code>ui5-suggestion-item-group</code>.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<SuggestionListItem>", + "references": [ + { + "name": "SuggestionListItem", + "package": "@ui5/webcomponents", + "module": "dist/SuggestionListItem.js" + } + ] }, - "description": "Defines the tooltip of the option.", - "default": "undefined", - "privacy": "public" + "_ui5privacy": "public", + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } }, { - "kind": "field", - "name": "selected", - "type": { - "text": "boolean" + "name": "header", + "description": "Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.", + "_ui5type": { + "text": "Array<ListItemBase>", + "references": [ + { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + } + ] }, - "default": "false", - "description": "Defines the selected state of the component.", - "privacy": "public", + "_ui5privacy": "public", "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } + } + ], + "superclass": { + "name": "ListItemGroup", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + }, + "tagName": "ui5-suggestion-item-group", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public", + "cssParts": [ + { + "description": "Used to style the header item of the group", + "name": "header", + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" } } ], "attributes": [ { - "description": "Defines the text, displayed inside the `ui5-select` input filed\nwhen the option gets selected.", - "name": "display-text", + "description": "Defines the header text of the <code>ui5-li-group</code>.", + "name": "header-text", "default": "undefined", - "fieldName": "displayText", + "fieldName": "headerText", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" } }, { - "description": "Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.\nFor more information on HTML Form support, see the `name` property of `ui5-select`.", - "name": "value", + "description": "Defines the accessible name of the header.", + "name": "header-accessible-name", "default": "undefined", - "fieldName": "value", + "fieldName": "headerAccessibleName", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" } }, { - "description": "Defines the tooltip of the option.", - "name": "tooltip", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "name": "wrapping-type", + "default": "\"None\"", + "fieldName": "wrappingType", + "type": { + "text": "\"None\" | \"Normal\"" + }, + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } + } + ], + "members": [ + { + "kind": "field", + "name": "headerText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the header text of the <code>ui5-li-group</code>.", + "privacy": "public", "default": "undefined", - "fieldName": "tooltip", + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } + }, + { + "kind": "field", + "name": "headerAccessibleName", "type": { "text": "string | undefined" + }, + "description": "Defines the accessible name of the header.", + "privacy": "public", + "default": "undefined", + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" } }, { - "description": "Defines the selected state of the component.", - "name": "selected", - "default": "false", - "fieldName": "selected", + "kind": "field", + "name": "wrappingType", "type": { - "text": "boolean" + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "privacy": "public", + "_ui5since": "2.15.0", + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" } } ], - "superclass": { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - }, - "tagName": "ui5-option-custom", - "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public", - "_ui5implements": [ + "events": [ { - "name": "IOption", - "package": "@ui5/webcomponents", - "module": "dist/Select.js" + "name": "move-over", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListItemGroupMoveEventDetail>", + "references": [ + { + "name": "ListItemGroupMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + } + ] + }, + "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.1.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + } + ], + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } + }, + { + "name": "move", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ListItemGroupMoveEventDetail>", + "references": [ + { + "name": "ListItemGroupMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + } + ] + }, + "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.1.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + } + ], + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } } ] } @@ -20860,240 +22403,300 @@ "kind": "js", "name": "default", "declaration": { - "name": "OptionCustom", - "module": "dist/OptionCustom.js" + "name": "SuggestionItemGroup", + "module": "dist/SuggestionItemGroup.js" } }, { "kind": "custom-element-definition", - "name": "ui5-option-custom", + "name": "ui5-suggestion-item-group", "declaration": { - "name": "OptionCustom", - "module": "dist/OptionCustom.js" + "name": "SuggestionItemGroup", + "module": "dist/SuggestionItemGroup.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Panel.js", + "path": "dist/SuggestionListItem.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "SuggestionListItem", + "module": "dist/SuggestionListItem.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/Switch.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-panel` component is a container which has a header and a\ncontent area and is used\nfor grouping and displaying information. It can be collapsed to save space on the screen.\n\n### Guidelines:\n\n- Nesting two or more panels is not recommended.\n- Do not stack too many panels on one page.\n\n### Structure\nThe panel's header area consists of a title bar with a header text or custom header.\n\nThe header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state.\n\nThe custom header can be set through the `header` slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.\n\nThe content area can contain an arbitrary set of controls.\n\n**Note:** The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.\n\n### Responsive Behavior\n\n- If the width of the panel is set to 100% (default), the panel and its children are\nresized responsively,\ndepending on its parent container.\n- If the panel has a fixed height, it will take up the space even if the panel is\ncollapsed.\n- When the panel is expandable (the `fixed` property is set to `false`),\nan arrow icon (pointing to the right) appears in front of the header.\n- When the animation is activated, expand/collapse uses a smooth animation to open or\nclose the content area.\n- When the panel expands/collapses, the arrow icon rotates 90 degrees\nclockwise/counter-clockwise.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Panel.js\";`", - "name": "Panel", + "description": "### Overview\nThe `ui5-switch` component is used for changing between binary states.\n\nThe component can display texts, that will be switched, based on the component state, via the `textOn` and `textOff` properties,\nbut texts longer than 3 letters will be cutted off.\n\nHowever, users are able to customize the width of `ui5-switch` with pure CSS (`<ui5-switch style=\"width: 200px\">`), and set widths, depending on the texts they would use.\n\nNote: the component would not automatically stretch to fit the whole text width.\n\n### Keyboard Handling\nThe state can be changed by pressing the Space and Enter keys.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Switch\";`", + "name": "Switch", "cssParts": [ { - "description": "Used to style the wrapper of the header.", - "name": "header" + "description": "Used to style the track, where the handle is being slid", + "name": "slider" }, { - "description": "Used to style the wrapper of the content.", - "name": "content" - } - ], - "slots": [ + "description": "Used to style the `textOn` property text", + "name": "text-on" + }, { - "description": "Defines the content of the component. The content is visible only when the component is expanded.", - "name": "default", - "_ui5privacy": "public", - "_ui5type": { - "text": "Array<Node>" - } + "description": "Used to style the `textOff` property text", + "name": "text-off" }, { - "name": "header", - "description": "Defines the component header area.\n\n**Note:** When a header is provided, the `headerText` property is ignored.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" + "description": "Used to style the handle of the switch", + "name": "handle" } ], "members": [ { "kind": "field", - "name": "headerText", + "name": "design", "type": { - "text": "string | undefined" + "text": "SwitchDesign", + "references": [ + { + "name": "SwitchDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/SwitchDesign.js" + } + ] }, - "description": "This property is used to set the header text of the component.\nThe text is visible in both expanded and collapsed states.\n\n**Note:** This property is overridden by the `header` slot.", - "default": "undefined", + "default": "\"Textual\"", + "description": "Defines the component design.\n\n**Note:** If `Graphical` type is set,\npositive and negative icons will replace the `textOn` and `textOff`.", "privacy": "public" }, { "kind": "field", - "name": "fixed", + "name": "checked", "type": { "text": "boolean" }, "default": "false", - "description": "Determines whether the component is in a fixed state that is not\nexpandable/collapsible by user interaction.", - "privacy": "public" + "description": "Defines if the component is checked.\n\n**Note:** The property can be changed with user interaction,\neither by cliking the component, or by pressing the `Enter` or `Space` key.", + "privacy": "public", + "_ui5formProperty": true, + "_ui5formEvents": "change" }, { "kind": "field", - "name": "collapsed", + "name": "disabled", "type": { "text": "boolean" }, "default": "false", - "description": "Indicates whether the component is collapsed and only the header is displayed.", + "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is noninteractive.", "privacy": "public" }, { "kind": "field", - "name": "noAnimation", + "name": "textOn", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.", - "privacy": "public", - "_ui5since": "1.0.0-rc.16" + "description": "Defines the text, displayed when the component is checked.\n\n**Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "accessibleRole", + "name": "textOff", "type": { - "text": "PanelAccessibleRole", - "references": [ - { - "name": "PanelAccessibleRole", - "package": "@ui5/webcomponents", - "module": "dist/types/PanelAccessibleRole.js" - } - ] + "text": "string | undefined" }, - "default": "\"Form\"", - "description": "Sets the accessible ARIA role of the component.\nDepending on the usage, you can change the role from the default `Form`\nto `Region` or `Complementary`.", + "description": "Defines the text, displayed when the component is not checked.\n\n**Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "headerLevel", + "name": "accessibleName", "type": { - "text": "TitleLevel", - "references": [ - { - "name": "TitleLevel", - "package": "@ui5/webcomponents", - "module": "dist/types/TitleLevel.js" - } - ] + "text": "string | undefined" }, - "default": "\"H2\"", - "description": "Defines the \"aria-level\" of component heading,\nset by the `headerText`.", - "privacy": "public" + "description": "Sets the accessible ARIA name of the component.\n\n**Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\nProviding an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.2.0" }, { "kind": "field", - "name": "accessibleName", + "name": "accessibleNameRef", "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", + "description": "Receives id(or many ids) of the elements that label the component.\n\n**Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\nProviding an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "1.1.0" }, { "kind": "field", - "name": "stickyHeader", + "name": "tooltip", + "type": { + "text": "string | undefined" + }, + "description": "Defines the tooltip of the component.\n\n**Note:** If applicable an external label reference should always be the preferred option to provide context to the `ui5-switch` component over a tooltip.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.9.0" + }, + { + "kind": "field", + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "Indicates whether the Panel header is sticky or not.\nIf stickyHeader is set to true, then whenever you scroll the content or\nthe application, the header of the panel will be always visible and\na solid color will be used for its design.", + "description": "Defines whether the component is required.", "privacy": "public", - "_ui5since": "1.16.0-rc.1" + "_ui5since": "1.16.0" + }, + { + "kind": "field", + "name": "name", + "type": { + "text": "string | undefined" + }, + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.16.0" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the form value of the component.", + "privacy": "public", + "_ui5since": "2.12.0" } ], "events": [ { - "name": "toggle", + "name": "change", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the component is expanded/collapsed by user interaction.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, + "description": "Fired when the component checked state changes.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, "_ui5Bubbles": true } ], "attributes": [ { - "description": "This property is used to set the header text of the component.\nThe text is visible in both expanded and collapsed states.\n\n**Note:** This property is overridden by the `header` slot.", - "name": "header-text", - "default": "undefined", - "fieldName": "headerText", + "description": "Defines the component design.\n\n**Note:** If `Graphical` type is set,\npositive and negative icons will replace the `textOn` and `textOff`.", + "name": "design", + "default": "\"Textual\"", + "fieldName": "design", "type": { - "text": "string | undefined" + "text": "\"Textual\" | \"Graphical\"" } }, { - "description": "Determines whether the component is in a fixed state that is not\nexpandable/collapsible by user interaction.", - "name": "fixed", + "description": "Defines if the component is checked.\n\n**Note:** The property can be changed with user interaction,\neither by cliking the component, or by pressing the `Enter` or `Space` key.", + "name": "checked", "default": "false", - "fieldName": "fixed", + "fieldName": "checked", "type": { "text": "boolean" } }, { - "description": "Indicates whether the component is collapsed and only the header is displayed.", - "name": "collapsed", + "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is noninteractive.", + "name": "disabled", "default": "false", - "fieldName": "collapsed", + "fieldName": "disabled", "type": { "text": "boolean" } }, { - "description": "Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.", - "name": "no-animation", - "default": "false", - "fieldName": "noAnimation", + "description": "Defines the text, displayed when the component is checked.\n\n**Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).", + "name": "text-on", + "default": "undefined", + "fieldName": "textOn", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Sets the accessible ARIA role of the component.\nDepending on the usage, you can change the role from the default `Form`\nto `Region` or `Complementary`.", - "name": "accessible-role", - "default": "\"Form\"", - "fieldName": "accessibleRole", + "description": "Defines the text, displayed when the component is not checked.\n\n**Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).", + "name": "text-off", + "default": "undefined", + "fieldName": "textOff", "type": { - "text": "\"Complementary\" | \"Form\" | \"Region\"" + "text": "string | undefined" } }, { - "description": "Defines the \"aria-level\" of component heading,\nset by the `headerText`.", - "name": "header-level", - "default": "\"H2\"", - "fieldName": "headerLevel", + "description": "Sets the accessible ARIA name of the component.\n\n**Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\nProviding an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"" + "text": "string | undefined" } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", + "description": "Receives id(or many ids) of the elements that label the component.\n\n**Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\nProviding an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.", + "name": "accessible-name-ref", "default": "undefined", - "fieldName": "accessibleName", + "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" } }, { - "description": "Indicates whether the Panel header is sticky or not.\nIf stickyHeader is set to true, then whenever you scroll the content or\nthe application, the header of the panel will be always visible and\na solid color will be used for its design.", - "name": "sticky-header", + "description": "Defines the tooltip of the component.\n\n**Note:** If applicable an external label reference should always be the preferred option to provide context to the `ui5-switch` component over a tooltip.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether the component is required.", + "name": "required", "default": "false", - "fieldName": "stickyHeader", + "fieldName": "required", "type": { "text": "boolean" } + }, + { + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the form value of the component.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + } } ], "superclass": { @@ -21101,8 +22704,9 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-panel", + "tagName": "ui5-switch", "customElement": true, + "_ui5since": "0.8.0", "_ui5privacy": "public" } ], @@ -21111,612 +22715,682 @@ "kind": "js", "name": "default", "declaration": { - "name": "Panel", - "module": "dist/Panel.js" + "name": "Switch", + "module": "dist/Switch.js" } }, { "kind": "custom-element-definition", - "name": "ui5-panel", + "name": "ui5-switch", "declaration": { - "name": "Panel", - "module": "dist/Panel.js" + "name": "Switch", + "module": "dist/Switch.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Popover.js", + "path": "dist/Tab.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-popover` component displays additional information for an object\nin a compact way and without leaving the page.\nThe Popover can contain various UI elements, such as fields, tables, images, and charts.\nIt can also include actions in the footer.\n\n### Structure\n\nThe popover has three main areas:\n\n- Header (optional)\n- Content\n- Footer (optional)\n\n**Note:** The `ui5-popover` is closed when the user clicks\nor taps outside the popover\nor selects an action within the popover. You can prevent this with the\n`modal` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Popover.js\";`", - "name": "Popover", - "cssParts": [ - { - "description": "Used to style the header of the component", - "name": "header" - }, - { - "description": "Used to style the content of the component", - "name": "content" - }, - { - "description": "Used to style the footer of the component", - "name": "footer" - } - ], + "description": "The `ui5-tab` represents a selectable item inside a `ui5-tabcontainer`.\nIt defines both the item in the tab strip (top part of the `ui5-tabcontainer`) and the\ncontent that is presented to the user once the tab is selected.", + "name": "Tab", "slots": [ { - "name": "header", - "description": "Defines the header HTML Element.", + "name": "default", + "description": "Holds the content associated with this tab.", + "_ui5propertyName": "content", "_ui5type": { - "text": "Array<HTMLElement>" + "text": "Array<Node>" }, "_ui5privacy": "public" }, { - "name": "footer", - "description": "Defines the footer HTML Element.", + "name": "items", + "description": "Defines hierarchies with nested sub tabs.\n\n**Note:** Use `ui5-tab` and `ui5-tab-separator` for the intended design.", "_ui5type": { - "text": "Array<HTMLElement>" + "text": "Array<ITab>", + "references": [ + { + "name": "ITab", + "package": "@ui5/webcomponents", + "module": "dist/TabContainer.js" + } + ] }, "_ui5privacy": "public" - }, - { - "name": "default", - "description": "Defines the content of the Popup.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } } ], "members": [ { "kind": "field", - "name": "headerText", + "name": "text", "type": { "text": "string | undefined" }, - "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", + "description": "The text to be displayed for the item.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "placement", + "name": "disabled", "type": { - "text": "PopoverPlacement", - "references": [ - { - "name": "PopoverPlacement", - "package": "@ui5/webcomponents", - "module": "dist/types/PopoverPlacement.js" - } - ] + "text": "boolean" }, - "default": "\"End\"", - "description": "Determines on which side the component is placed at.", + "default": "false", + "description": "Disabled tabs can't be selected.", "privacy": "public" }, { "kind": "field", - "name": "horizontalAlign", + "name": "additionalText", "type": { - "text": "PopoverHorizontalAlign", - "references": [ - { - "name": "PopoverHorizontalAlign", - "package": "@ui5/webcomponents", - "module": "dist/types/PopoverHorizontalAlign.js" - } - ] + "text": "string | undefined" }, - "default": "\"Center\"", - "description": "Determines the horizontal alignment of the component.", + "description": "Represents the \"additionalText\" text, which is displayed in the tab. In the cases when in the same time there are tabs with icons and tabs without icons, if a tab has no icon the \"additionalText\" is displayed larger.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "verticalAlign", + "name": "icon", "type": { - "text": "PopoverVerticalAlign", + "text": "string | undefined" + }, + "description": "Defines the icon source URI to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous built-in icons.\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "design", + "type": { + "text": "SemanticColor", "references": [ { - "name": "PopoverVerticalAlign", + "name": "SemanticColor", "package": "@ui5/webcomponents", - "module": "dist/types/PopoverVerticalAlign.js" + "module": "dist/types/SemanticColor.js" } ] }, - "default": "\"Center\"", - "description": "Determines the vertical alignment of the component.", + "default": "\"Default\"", + "description": "Defines the component's design color.\n\nThe design is applied to:\n\n- the component icon\n- the `text` when the component overflows\n- the tab selection line\n\nAvailable designs are: `\"Default\"`, `\"Neutral\"`, `\"Positive\"`, `\"Critical\"` and `\"Negative\"`.\n\n**Note:** The design depends on the current theme.", "privacy": "public" }, { "kind": "field", - "name": "modal", + "name": "selected", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.", + "description": "Specifies if the component is selected.", "privacy": "public" }, { "kind": "field", - "name": "hideArrow", + "name": "movable", "type": { "text": "boolean" }, "default": "false", - "description": "Determines whether the component arrow is hidden.", + "description": "Defines if the tab is movable.", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "2.0.0" }, { - "kind": "field", - "name": "allowTargetOverlap", - "type": { - "text": "boolean" + "kind": "method", + "name": "getDomRefInStrip", + "return": { + "type": { + "text": "HTMLElement | undefined" + } }, + "description": "Returns the DOM reference of the tab that is placed in the header.\n\n**Note:** Tabs, placed in the `items` slot of other tabs are not shown in the header. Calling this method on such tabs will return `undefined`.\n\n**Note:** If you need a DOM ref to the tab content please use the `getDomRef` method.", + "privacy": "public", + "_ui5since": "1.0.0-rc.16" + } + ], + "attributes": [ + { + "description": "The text to be displayed for the item.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Disabled tabs can't be selected.", + "name": "disabled", "default": "false", - "description": "Determines if there is no enough space, the component can be placed\nover the target.", - "privacy": "public" + "fieldName": "disabled", + "type": { + "text": "boolean" + } }, { - "kind": "field", - "name": "opener", - "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", - "privacy": "public", + "description": "Represents the \"additionalText\" text, which is displayed in the tab. In the cases when in the same time there are tabs with icons and tabs without icons, if a tab has no icon the \"additionalText\" is displayed larger.", + "name": "additional-text", "default": "undefined", + "fieldName": "additionalText", "type": { - "text": "HTMLElement | string | null | undefined" - }, - "_ui5since": "1.2.0" + "text": "string | undefined" + } }, { - "kind": "field", - "name": "initialFocus", + "description": "Defines the icon source URI to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous built-in icons.\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", "type": { "text": "string | undefined" - }, - "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", - "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" } }, { - "kind": "field", - "name": "preventFocusRestore", + "description": "Defines the component's design color.\n\nThe design is applied to:\n\n- the component icon\n- the `text` when the component overflows\n- the tab selection line\n\nAvailable designs are: `\"Default\"`, `\"Neutral\"`, `\"Positive\"`, `\"Critical\"` and `\"Negative\"`.\n\n**Note:** The design depends on the current theme.", + "name": "design", + "default": "\"Default\"", + "fieldName": "design", + "type": { + "text": "\"Default\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Neutral\"" + } + }, + { + "description": "Specifies if the component is selected.", + "name": "selected", + "default": "false", + "fieldName": "selected", "type": { "text": "boolean" - }, + } + }, + { + "description": "Defines if the tab is movable.", + "name": "movable", "default": "false", - "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", - "privacy": "public", - "_ui5since": "1.0.0-rc.8", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "fieldName": "movable", + "type": { + "text": "boolean" } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-tab", + "customElement": true, + "_ui5privacy": "public", + "_ui5abstract": true, + "_ui5implements": [ + { + "name": "ITab", + "package": "@ui5/webcomponents", + "module": "dist/TabContainer.js" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Tab", + "module": "dist/Tab.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-tab", + "declaration": { + "name": "Tab", + "module": "dist/Tab.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TabContainer.js", + "declarations": [ + { + "kind": "interface", + "name": "ITab", + "description": "Interface for components that may be slotted inside `ui5-tabcontainer` as items\n\n**Note:** Use directly `ui5-tab` or `ui5-tab-seprator`. Implementing the interface does not guarantee that the class can work as a tab.", + "_ui5privacy": "public" + }, + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-tabcontainer` represents a collection of tabs with associated content.\nNavigation through the tabs changes the content display of the currently active content area.\nA tab can be labeled with text only, or icons with text.\n\n### Structure\n\nThe `ui5-tabcontainer` can hold two types of entities:\n\n- `ui5-tab` - contains all the information on an item (text and icon)\n- `ui5-tab-separator` - used to separate tabs with a line\n\n### Hierarchies\nMultiple sub tabs could be placed underneath one main tab. Nesting allows deeper hierarchies with indentations\nto indicate the level of each nested tab. When a tab has both sub tabs and own content its click area is split\nto allow the user to display the content or alternatively to expand / collapse the list of sub tabs.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TabContainer.js\";`\n\n`import \"@ui5/webcomponents/dist/Tab.js\";` (for `ui5-tab`)\n\n`import \"@ui5/webcomponents/dist/TabSeparator.js\";` (for `ui5-tab-separator`)", + "name": "TabContainer", + "cssParts": [ + { + "description": "Used to style the content of the component", + "name": "content" + }, + { + "description": "Used to style the tabstrip of the component", + "name": "tabstrip" + } + ], + "slots": [ + { + "name": "default", + "description": "Defines the tabs.\n\n**Note:** Use `ui5-tab` and `ui5-tab-separator` for the intended design.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<ITab>", + "references": [ + { + "name": "ITab", + "package": "@ui5/webcomponents", + "module": "dist/TabContainer.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "overflowButton", + "description": "Defines the button which will open the overflow menu. If nothing is provided to this slot,\nthe default button will be used.", + "_ui5since": "1.0.0-rc.9", + "_ui5type": { + "text": "Array<IButton>", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "_ui5privacy": "public" }, + { + "name": "startOverflowButton", + "description": "Defines the button which will open the start overflow menu if available. If nothing is provided to this slot,\nthe default button will be used.", + "_ui5since": "1.1.0", + "_ui5type": { + "text": "Array<IButton>", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "name": "accessibleName", + "name": "collapsed", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "default": "false", + "description": "Defines whether the tab content is collapsed.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "tabLayout", "type": { - "text": "string | undefined" + "text": "TabLayout", + "references": [ + { + "name": "TabLayout", + "package": "@ui5/webcomponents", + "module": "dist/types/TabLayout.js" + } + ] }, - "description": "Defines the IDs of the elements that label the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.1.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "default": "\"Standard\"", + "description": "Defines the alignment of the content and the `additionalText` of a tab.\n\n**Note:**\nThe content and the `additionalText` would be displayed vertically by default,\nbut when set to `Inline`, they would be displayed horizontally.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleRole", + "name": "overflowMode", "type": { - "text": "PopupAccessibleRole", + "text": "OverflowMode", "references": [ { - "name": "PopupAccessibleRole", + "name": "OverflowMode", "package": "@ui5/webcomponents", - "module": "dist/types/PopupAccessibleRole.js" + "module": "dist/types/OverflowMode.js" } ] }, - "default": "\"Dialog\"", - "description": "Allows setting a custom role.", + "default": "\"End\"", + "description": "Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible.\nAll other tabs that can 't fit on the screen are available in an overflow tab \"More\".\n\n**Note:**\nOnly one overflow at the end would be displayed by default,\nbut when set to `StartAndEnd`, there will be two overflows on both ends, and tab order will not change on tab selection.", "privacy": "public", - "_ui5since": "1.10.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5since": "1.1.0" }, { "kind": "field", - "name": "accessibleDescription", + "name": "headerBackgroundDesign", "type": { - "text": "string | undefined" + "text": "BackgroundDesign", + "references": [ + { + "name": "BackgroundDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/BackgroundDesign.js" + } + ] }, - "description": "Defines the accessible description of the component.", - "default": "undefined", + "default": "\"Solid\"", + "description": "Sets the background color of the Tab Container's header as `Solid`, `Transparent`, or `Translucent`.", "privacy": "public", - "_ui5since": "2.11.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5since": "1.10.0" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "contentBackgroundDesign", "type": { - "text": "string | undefined" + "text": "BackgroundDesign", + "references": [ + { + "name": "BackgroundDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/BackgroundDesign.js" + } + ] }, - "description": "Receives id(or many ids) of the elements that describe the component.", - "default": "undefined", + "default": "\"Solid\"", + "description": "Sets the background color of the Tab Container's content as `Solid`, `Transparent`, or `Translucent`.", "privacy": "public", - "_ui5since": "2.11.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5since": "1.10.0" }, { "kind": "field", - "name": "preventInitialFocus", + "name": "noAutoSelection", "type": { "text": "boolean" }, "default": "false", - "description": "Indicates whether initial focus should be prevented.", + "description": "Defines if automatic tab selection is deactivated.\n\n**Note:** By default, if none of the child tabs have the `selected` property set, the first tab will be automatically selected.\nSetting this property to `true` allows preventing this behavior.", "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "_ui5since": "2.9.0" }, { "kind": "field", - "name": "open", - "description": "Indicates if the element is open", - "privacy": "public", - "default": "false", + "name": "allItems", "type": { - "text": "boolean" - }, - "_ui5since": "1.2.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, - { - "kind": "method", - "name": "applyFocus", - "return": { - "type": { - "text": "Promise<void>" - }, - "description": "Promise that resolves when the focus is applied" + "text": "Array<ITab>", + "references": [ + { + "name": "ITab", + "package": "@ui5/webcomponents", + "module": "dist/TabContainer.js" + } + ] }, - "description": "Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.", + "description": "Returns all slotted tabs and their subTabs in a flattened array.\nThe order of tabs is depth-first.", "privacy": "public", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "default": "[]", + "readonly": true } ], - "attributes": [ - { - "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", - "name": "header-text", - "default": "undefined", - "fieldName": "headerText", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Determines on which side the component is placed at.", - "name": "placement", - "default": "\"End\"", - "fieldName": "placement", - "type": { - "text": "\"Top\" | \"Bottom\" | \"Start\" | \"End\"" - } - }, - { - "description": "Determines the horizontal alignment of the component.", - "name": "horizontal-align", - "default": "\"Center\"", - "fieldName": "horizontalAlign", - "type": { - "text": "\"Center\" | \"Start\" | \"End\" | \"Stretch\"" - } - }, - { - "description": "Determines the vertical alignment of the component.", - "name": "vertical-align", - "default": "\"Center\"", - "fieldName": "verticalAlign", - "type": { - "text": "\"Top\" | \"Bottom\" | \"Center\" | \"Stretch\"" - } - }, - { - "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.", - "name": "modal", - "default": "false", - "fieldName": "modal", - "type": { - "text": "boolean" - } - }, - { - "description": "Determines whether the component arrow is hidden.", - "name": "hide-arrow", - "default": "false", - "fieldName": "hideArrow", - "type": { - "text": "boolean" - } - }, + "events": [ { - "description": "Determines if there is no enough space, the component can be placed\nover the target.", - "name": "allow-target-overlap", - "default": "false", - "fieldName": "allowTargetOverlap", + "name": "tab-select", + "_ui5privacy": "public", "type": { - "text": "boolean" - } + "text": "CustomEvent<TabContainerTabSelectEventDetail>", + "references": [ + { + "name": "TabContainerTabSelectEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/TabContainer.js" + } + ] + }, + "description": "Fired when a tab is selected.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.0.0", + "_ui5parameters": [ + { + "type": { + "text": "Tab", + "references": [ + { + "name": "Tab", + "package": "@ui5/webcomponents", + "module": "dist/Tab.js" + } + ] + }, + "name": "tab", + "_ui5privacy": "public", + "description": "The selected `tab`." + }, + { + "type": { + "text": "Integer" + }, + "name": "tabIndex", + "_ui5privacy": "public", + "description": "The selected `tab` index in the flattened array of all tabs and their subTabs, provided by the `allItems` getter." + } + ] }, { - "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", - "name": "opener", - "default": "undefined", - "fieldName": "opener", + "name": "move-over", + "_ui5privacy": "public", "type": { - "text": "any" - } + "text": "CustomEvent<TabContainerMoveEventDetail>", + "references": [ + { + "name": "TabContainerMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/TabContainer.js" + } + ] + }, + "description": "Fired when element is being moved over the tab container.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.0.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + } + ] }, { - "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", - "name": "initial-focus", - "default": "undefined", - "fieldName": "initialFocus", + "name": "move", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent<TabContainerMoveEventDetail>", + "references": [ + { + "name": "TabContainerMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/TabContainer.js" + } + ] }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, + "description": "Fired when element is moved to the tab container.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + } + ] + } + ], + "attributes": [ { - "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", - "name": "prevent-focus-restore", + "description": "Defines whether the tab content is collapsed.", + "name": "collapsed", "default": "false", - "fieldName": "preventFocusRestore", + "fieldName": "collapsed", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, - { - "description": "Defines the accessible name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" } }, { - "description": "Defines the IDs of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "description": "Defines the alignment of the content and the `additionalText` of a tab.\n\n**Note:**\nThe content and the `additionalText` would be displayed vertically by default,\nbut when set to `Inline`, they would be displayed horizontally.", + "name": "tab-layout", + "default": "\"Standard\"", + "fieldName": "tabLayout", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "\"Standard\" | \"Inline\"" } }, { - "description": "Allows setting a custom role.", - "name": "accessible-role", - "default": "\"Dialog\"", - "fieldName": "accessibleRole", + "description": "Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible.\nAll other tabs that can 't fit on the screen are available in an overflow tab \"More\".\n\n**Note:**\nOnly one overflow at the end would be displayed by default,\nbut when set to `StartAndEnd`, there will be two overflows on both ends, and tab order will not change on tab selection.", + "name": "overflow-mode", + "default": "\"End\"", + "fieldName": "overflowMode", "type": { - "text": "\"None\" | \"Dialog\" | \"AlertDialog\"" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "\"End\" | \"StartAndEnd\"" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "description": "Sets the background color of the Tab Container's header as `Solid`, `Transparent`, or `Translucent`.", + "name": "header-background-design", + "default": "\"Solid\"", + "fieldName": "headerBackgroundDesign", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "\"Transparent\" | \"Solid\" | \"Translucent\"" } }, { - "description": "Receives id(or many ids) of the elements that describe the component.", - "name": "accessible-description-ref", - "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "description": "Sets the background color of the Tab Container's content as `Solid`, `Transparent`, or `Translucent`.", + "name": "content-background-design", + "default": "\"Solid\"", + "fieldName": "contentBackgroundDesign", "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "\"Transparent\" | \"Solid\" | \"Translucent\"" } }, { - "description": "Indicates whether initial focus should be prevented.", - "name": "prevent-initial-focus", + "description": "Defines if automatic tab selection is deactivated.\n\n**Note:** By default, if none of the child tabs have the `selected` property set, the first tab will be automatically selected.\nSetting this property to `true` allows preventing this behavior.", + "name": "no-auto-selection", "default": "false", - "fieldName": "preventInitialFocus", + "fieldName": "noAutoSelection", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" } }, { - "description": "Indicates if the element is open", - "name": "open", - "default": "false", - "fieldName": "open", + "description": "Returns all slotted tabs and their subTabs in a flattened array.\nThe order of tabs is depth-first.", + "name": "all-items", + "default": "[]", + "fieldName": "allItems", "type": { "text": "any" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" } } ], "superclass": { - "name": "Popup", - "package": "@ui5/webcomponents", - "module": "dist/Popup.js" + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" }, - "tagName": "ui5-popover", + "tagName": "ui5-tabcontainer", "customElement": true, - "_ui5since": "1.0.0-rc.6", - "_ui5privacy": "public", - "events": [ - { - "name": "before-open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, - { - "name": "open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the component is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TabContainer", + "module": "dist/TabContainer.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-tabcontainer", + "declaration": { + "name": "TabContainer", + "module": "dist/TabContainer.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TabSeparator.js", + "declarations": [ + { + "kind": "class", + "description": "The `ui5-tab-separator` represents a vertical line to separate tabs inside a `ui5-tabcontainer`.", + "name": "TabSeparator", + "members": [ { - "name": "before-close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<PopupBeforeCloseEventDetail>", - "references": [ - { - "name": "PopupBeforeCloseEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Popup.js" - } - ] - }, - "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, - "_ui5parameters": [ - { - "type": { - "text": "boolean" - }, - "name": "escPressed", - "_ui5privacy": "public", - "description": "Indicates that `ESC` key has triggered the event." + "kind": "method", + "name": "getDomRefInStrip", + "return": { + "type": { + "text": "HTMLElement | undefined" } - ], - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, - { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" }, - "description": "Fired after the component is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "description": "Returns the DOM reference of the separator that is placed in the header.\n\n**Note:** Separators, placed in the `items` slot of other tabs are not shown in the header. Calling this method on such separators will return `undefined`.", + "privacy": "public" + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-tab-separator", + "customElement": true, + "_ui5privacy": "public", + "_ui5abstract": true, + "_ui5implements": [ + { + "name": "ITab", + "package": "@ui5/webcomponents", + "module": "dist/TabContainer.js" } ] } @@ -21726,71 +23400,108 @@ "kind": "js", "name": "default", "declaration": { - "name": "Popover", - "module": "dist/Popover.js" + "name": "TabSeparator", + "module": "dist/TabSeparator.js" } }, { "kind": "custom-element-definition", - "name": "ui5-popover", + "name": "ui5-tab-separator", "declaration": { - "name": "Popover", - "module": "dist/Popover.js" + "name": "TabSeparator", + "module": "dist/TabSeparator.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Popup.js", + "path": "dist/Table.js", "declarations": [ + { + "kind": "interface", + "name": "ITableFeature", + "description": "Interface for components that can be slotted inside the `features` slot of the `ui5-table`.", + "_ui5experimental": true, + "_ui5privacy": "public" + }, + { + "kind": "interface", + "name": "ITableGrowing", + "description": "Interface for components that can be slotted inside the `features` slot of the `ui5-table`\nand provide growing/data loading functionality.", + "_ui5experimental": true, + "_ui5privacy": "public" + }, { "kind": "class", - "description": "### Overview\nBase class for all popup Web Components.\n\nIf you need to create your own popup-like custom UI5 Web Components.\n\n1. The Popup class handles modality:\n - The \"isModal\" getter can be overridden by derivatives to provide their own conditions when they are modal or not\n - Derivatives may call the \"blockPageScrolling\" and \"unblockPageScrolling\" static methods to temporarily remove scrollbars on the html element\n - Derivatives may call the \"openPopup\" and \"closePopup\" methods which handle focus, manage the popup registry and for modal popups, manage the blocking layer\n\n 2. Provides blocking layer (relevant for modal popups only):\n - Controlled by the \"open\" and \"close\" methods\n\n3. The Popup class \"traps\" focus:\n - Derivatives may call the \"applyInitialFocus\" method (usually when opening, to transfer focus inside the popup)\n\n4. The template of this component exposes two inline partials you can override in derivatives:\n - beforeContent (upper part of the box, useful for header/title/close button)\n - afterContent (lower part, useful for footer/action buttons)", - "name": "Popup", + "description": "### Overview\n\nThe `ui5-table` component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner.\nTo render the `ui5-table`, you need to define the columns and rows. You can use the provided `ui5-table-header-row` and `ui5-table-row` components for this purpose.\n\n### Features\n\nThe `ui5-table` can be enhanced in its functionalities by applying different features.\nFeatures can be slotted into the `features` slot, to enable them in the component.\nFeatures need to be imported separately, as they are not enabled by default.\n\nThe following features are currently available:\n\n* [TableSelectionMulti](../TableSelectionMulti) - adds multi-selection capabilities to the table\n* [TableSelectionSingle](../TableSelectionSingle) - adds single-selection capabilities to the table\n* [TableGrowing](../TableGrowing) - provides growing capabilities to load more data\n* [TableVirtualizer](../TableVirtualizer) - adds virtualization capabilities to the table\n\n### Keyboard Handling\n\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\nFurthermore, you can interact with `ui5-table` via the following keys:\n\nIf the focus is on a row, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Selects the first cell of the row\n* <kbd>Space</kbd> - Toggles the selection of the row\n* <kbd>Ctrl/Cmd + A</kbd> - In multi selection mode, toggles the selection of all rows\n* <kbd>Home</kbd> - Navigates to the first row, if the focus is on the first row, navigates to the header row\n* <kbd>End</kbd> - Navigates to the last row, if the focus is on the last row, navigates to the growing button\n* <kbd>Page Up</kbd> - Navigates one page up, if the focus is on the first row, navigates to the header row\n* <kbd>Page Down</kbd> - Navigates one page down, if the focus is on the last row, navigates to the growing button\n* <kbd>F2</kbd> - Focuses the first tabbable element in the row\n* <kbd>F7</kbd> - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\nIf the focus is on a cell, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Navigates right\n* <kbd>Left</kbd> - Navigates left, if the focus is on the first cell of the row, the focus is moved to the row.\n* <kbd>Home</kbd> - Navigates to the first cell of the current row, if the focus is on the first cell, navigates to the corresponding row\n* <kbd>End</kbd> - Navigates to the last cell of the current row, if the focus is on the last cell, navigates to the corresponding row\n* <kbd>Page Up</kbd> - Navigates one page up while keeping the focus in same column\n* <kbd>Page Down</kbd> - Navigates one page down while keeping the focus in same column\n* <kbd>F2</kbd> - Toggles the focus between the first tabbable cell content and the cell\n* <kbd>Enter</kbd> - Focuses the first tabbable cell content\n* <kbd>F7</kbd> - If the focus is on an interactive element inside a row, moves focus to the corresponding row and remembers the focus position of the element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\nIf the focus is on an interactive cell content, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default\n* <kbd>Up</kbd> - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default\n* <kbd>[Shift]Tab</kbd> - Move the focus to the element in the tab chain\n\n### Accessibility\n\nThe `ui5-table` follows the [ARIA grid design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).\nThis pattern enables cell-based keyboard navigation and, as explained above, we also support row-based keyboard navigation.\nSince the grid design pattern does not inherently provide row-based keyboard behavior, if the focus is on a row, not only the row information but also the corresponding column headers for each cell must be announced.\nThis can only be achieved through a custom accessibility announcement.\nTo support this, UI5 Web Components expose its own accessibility metadata via the `accessibilityInfo` property.\nThe `ui5-table` uses this information to create the required custom announcements dynamically.\nIf you include custom web components inside table cells that are not part of the standard UI5 Web Components set, their accessibility information can be provided using the `data-ui5-table-acc-text` attribute.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Table.js\";` (`ui5-table`)\\\n`import \"@ui5/webcomponents/dist/TableRow.js\";` (`ui5-table-row`)\\\n`import \"@ui5/webcomponents/dist/TableCell.js\";` (`ui5-table-cell`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";` (`ui5-table-header-row`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";` (`ui5-table-header-cell`)", + "name": "Table", "slots": [ { "name": "default", - "description": "Defines the content of the Popup.", - "_ui5propertyName": "content", + "description": "Defines the rows of the component.\n\n**Note:** Use `ui5-table-row` for the intended design.", + "_ui5propertyName": "rows", "_ui5type": { - "text": "Array<HTMLElement>" + "text": "Array<TableRow>", + "references": [ + { + "name": "TableRow", + "package": "@ui5/webcomponents", + "module": "dist/TableRow.js" + } + ] }, "_ui5privacy": "public" - } - ], - "members": [ + }, { - "kind": "field", - "name": "initialFocus", - "type": { - "text": "string | undefined" - }, - "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", - "default": "undefined", - "privacy": "public" + "name": "headerRow", + "description": "Defines the header row of the component.\n\n**Note:** Use `ui5-table-header-row` for the intended design.", + "_ui5type": { + "text": "Array<TableHeaderRow>", + "references": [ + { + "name": "TableHeaderRow", + "package": "@ui5/webcomponents", + "module": "dist/TableHeaderRow.js" + } + ] + }, + "_ui5privacy": "public" }, { - "kind": "field", - "name": "preventFocusRestore", - "type": { - "text": "boolean" + "name": "noData", + "description": "Defines the custom visualization if there is no data available.", + "_ui5type": { + "text": "Array<HTMLElement>" }, - "default": "false", - "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", - "privacy": "public", - "_ui5since": "1.0.0-rc.8" + "_ui5privacy": "public" }, + { + "name": "features", + "description": "Defines the features of the component.", + "_ui5type": { + "text": "Array<ITableFeature>", + "references": [ + { + "name": "ITableFeature", + "package": "@ui5/webcomponents", + "module": "dist/Table.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the accessible name of the component.", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "privacy": "public" }, { "kind": "field", @@ -21798,229 +23509,327 @@ "type": { "text": "string | undefined" }, - "description": "Defines the IDs of the elements that label the component.", + "description": "Identifies the element (or elements) that labels the component.", "default": "undefined", - "privacy": "public", - "_ui5since": "1.1.0" + "privacy": "public" }, { "kind": "field", - "name": "accessibleRole", + "name": "noDataText", "type": { - "text": "PopupAccessibleRole", + "text": "string | undefined" + }, + "description": "Defines the text to be displayed when there are no rows in the component.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "overflowMode", + "type": { + "text": "TableOverflowMode", "references": [ { - "name": "PopupAccessibleRole", + "name": "TableOverflowMode", "package": "@ui5/webcomponents", - "module": "dist/types/PopupAccessibleRole.js" + "module": "dist/types/TableOverflowMode.js" } ] }, - "default": "\"Dialog\"", - "description": "Allows setting a custom role.", - "privacy": "public", - "_ui5since": "1.10.0" + "default": "\"Scroll\"", + "description": "Defines the mode of the <code>ui5-table</code> overflow behavior.\n\nAvailable options are:\n\n<code>Scroll</code> - Columns are shown as regular columns and horizontal scrolling is enabled.\n<code>Popin</code> - Columns are shown as pop-ins instead of regular columns.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescription", + "name": "loading", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible description of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.11.0" + "default": "false", + "description": "Defines if the loading indicator should be shown.\n\n**Note:** When the component is loading, it is not interactive.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "loadingDelay", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Receives id(or many ids) of the elements that describe the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.11.0" + "default": "1000", + "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", + "privacy": "public" }, { "kind": "field", - "name": "preventInitialFocus", + "name": "rowActionCount", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Indicates whether initial focus should be prevented.", + "default": "0", + "description": "Defines the maximum number of row actions that is displayed, which determines the width of the row action column.\n\n**Note:** It is recommended to use a maximum of 3 row actions, as exceeding this limit may take up too much space on smaller screens.", "privacy": "public", - "_ui5since": "2.0.0" + "_ui5since": "2.7.0" }, { "kind": "field", - "name": "open", - "description": "Indicates if the element is open", - "privacy": "public", - "default": "false", + "name": "alternateRowColors", "type": { "text": "boolean" }, - "_ui5since": "1.2.0" - }, - { - "kind": "method", - "name": "applyFocus", - "return": { - "type": { - "text": "Promise<void>" - }, - "description": "Promise that resolves when the focus is applied" - }, - "description": "Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.", - "privacy": "public" + "default": "false", + "description": "Determines whether the table rows are displayed with alternating background colors.", + "privacy": "public", + "_ui5since": "2.17" } ], "events": [ { - "name": "before-open", + "name": "row-click", "_ui5privacy": "public", "type": { - "text": "CustomEvent" + "text": "CustomEvent<TableRowClickEventDetail>", + "references": [ + { + "name": "TableRowClickEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Table.js" + } + ] }, - "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false + "description": "Fired when an interactive row is clicked.\n\n**Note:** This event is not fired if the `behavior` property of the selection component is set to `RowOnly`.\nIn that case, use the `change` event of the selection component instead.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "TableRow", + "references": [ + { + "name": "TableRow", + "package": "@ui5/webcomponents", + "module": "dist/TableRow.js" + } + ] + }, + "name": "row", + "_ui5privacy": "public", + "description": "The row instance" + } + ] }, { - "name": "open", + "name": "move-over", "_ui5privacy": "public", "type": { - "text": "CustomEvent" + "text": "CustomEvent<TableMoveEventDetail>", + "references": [ + { + "name": "TableMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Table.js" + } + ] }, - "description": "Fired after the component is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false + "description": "Fired when a movable item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n\n**Note:** If the dragging operation is a cross-browser operation or files are moved to a potential drop target,\nthe `source` parameter will be `null`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "Event" + }, + "name": "originalEvent", + "_ui5privacy": "public", + "description": "The original `dragover` event" + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "The source object" + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "The destination object" + } + ] }, { - "name": "before-close", + "name": "move", "_ui5privacy": "public", "type": { - "text": "CustomEvent<PopupBeforeCloseEventDetail>", + "text": "CustomEvent<TableMoveEventDetail>", "references": [ { - "name": "PopupBeforeCloseEventDetail", + "name": "TableMoveEventDetail", "package": "@ui5/webcomponents", - "module": "dist/Popup.js" + "module": "dist/Table.js" } ] }, - "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, + "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Notes:**\n\nThe `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\nIf the dragging operation is a cross-browser operation or files are moved to a potential drop target,\nthe `source` parameter will be `null`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, "_ui5parameters": [ { "type": { - "text": "boolean" + "text": "Event" }, - "name": "escPressed", + "name": "originalEvent", "_ui5privacy": "public", - "description": "Indicates that `ESC` key has triggered the event." + "description": "The original `drop` event" + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "The source object" + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "The destination object" } ] }, { - "name": "close", + "name": "row-action-click", "_ui5privacy": "public", "type": { - "text": "CustomEvent" + "text": "CustomEvent<TableRowActionClickEventDetail>", + "references": [ + { + "name": "TableRowActionClickEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Table.js" + } + ] }, - "description": "Fired after the component is closed.", + "description": "Fired when a row action is clicked.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": false + "_ui5Bubbles": true, + "_ui5since": "2.6.0", + "_ui5parameters": [ + { + "type": { + "text": "TableRowActionBase", + "references": [ + { + "name": "TableRowActionBase", + "package": "@ui5/webcomponents", + "module": "dist/TableRowActionBase.js" + } + ] + }, + "name": "action", + "_ui5privacy": "public", + "description": "The row action instance" + }, + { + "type": { + "text": "TableRow", + "references": [ + { + "name": "TableRow", + "package": "@ui5/webcomponents", + "module": "dist/TableRow.js" + } + ] + }, + "name": "row", + "_ui5privacy": "public", + "description": "The row instance" + } + ] } ], "attributes": [ { - "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", - "name": "initial-focus", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", "default": "undefined", - "fieldName": "initialFocus", + "fieldName": "accessibleName", "type": { "text": "string | undefined" } }, { - "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", - "name": "prevent-focus-restore", - "default": "false", - "fieldName": "preventFocusRestore", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the accessible name of the component.", - "name": "accessible-name", + "description": "Identifies the element (or elements) that labels the component.", + "name": "accessible-name-ref", "default": "undefined", - "fieldName": "accessibleName", + "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" } }, { - "description": "Defines the IDs of the elements that label the component.", - "name": "accessible-name-ref", + "description": "Defines the text to be displayed when there are no rows in the component.", + "name": "no-data-text", "default": "undefined", - "fieldName": "accessibleNameRef", + "fieldName": "noDataText", "type": { "text": "string | undefined" } }, { - "description": "Allows setting a custom role.", - "name": "accessible-role", - "default": "\"Dialog\"", - "fieldName": "accessibleRole", + "description": "Defines the mode of the <code>ui5-table</code> overflow behavior.\n\nAvailable options are:\n\n<code>Scroll</code> - Columns are shown as regular columns and horizontal scrolling is enabled.\n<code>Popin</code> - Columns are shown as pop-ins instead of regular columns.", + "name": "overflow-mode", + "default": "\"Scroll\"", + "fieldName": "overflowMode", "type": { - "text": "\"None\" | \"Dialog\" | \"AlertDialog\"" + "text": "\"Scroll\" | \"Popin\"" } }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", + "description": "Defines if the loading indicator should be shown.\n\n**Note:** When the component is loading, it is not interactive.", + "name": "loading", + "default": "false", + "fieldName": "loading", "type": { - "text": "string | undefined" + "text": "boolean" } }, { - "description": "Receives id(or many ids) of the elements that describe the component.", - "name": "accessible-description-ref", - "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", + "name": "loading-delay", + "default": "1000", + "fieldName": "loadingDelay", "type": { - "text": "string | undefined" + "text": "number" } }, { - "description": "Indicates whether initial focus should be prevented.", - "name": "prevent-initial-focus", - "default": "false", - "fieldName": "preventInitialFocus", + "description": "Defines the maximum number of row actions that is displayed, which determines the width of the row action column.\n\n**Note:** It is recommended to use a maximum of 3 row actions, as exceeding this limit may take up too much space on smaller screens.", + "name": "row-action-count", + "default": "0", + "fieldName": "rowActionCount", "type": { - "text": "boolean" + "text": "number" } }, { - "description": "Indicates if the element is open", - "name": "open", + "description": "Determines whether the table rows are displayed with alternating background colors.", + "name": "alternate-row-colors", "default": "false", - "fieldName": "open", + "fieldName": "alternateRowColors", "type": { - "text": "any" + "text": "boolean" } } ], @@ -22029,7 +23838,9 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, + "tagName": "ui5-table", "customElement": true, + "_ui5since": "2.0.0", "_ui5privacy": "public" } ], @@ -22038,146 +23849,90 @@ "kind": "js", "name": "default", "declaration": { - "name": "Popup", - "module": "dist/Popup.js" + "name": "Table", + "module": "dist/Table.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-table", + "declaration": { + "name": "Table", + "module": "dist/Table.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ProgressIndicator.js", + "path": "dist/TableCell.js", "declarations": [ { "kind": "class", - "description": "### Overview\nShows the progress of a process in a graphical way. To indicate the progress,\nthe inside of the component is filled with a color.\n\n### Responsive Behavior\nYou can change the size of the Progress Indicator by changing its `width` or `height` CSS properties.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ProgressIndicator.js\";`", - "name": "ProgressIndicator", - "cssParts": [ - { - "description": "Used to style the main bar of the `ui5-progress-indicator`", - "name": "bar" - }, - { - "description": "Used to style the remaining bar of the `ui5-progress-indicator`", - "name": "remaining-bar" - } - ], + "description": "### Overview\n\nThe `ui5-table-cell` represents a cell inside of a `ui5-table`.\nIt is tightly coupled to the `ui5-table` and thus should only be used in the table component.\n\n### ES6 Module Import\n\n`import @ui5/webcomponents/dist/TableCell.js;`", + "name": "TableCell", "members": [ { "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.16.0" - }, - { - "kind": "field", - "name": "hideValue", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component value is shown.", - "privacy": "public" - }, - { - "kind": "field", - "name": "value", - "type": { - "text": "number" - }, - "default": "0", - "description": "Specifies the numerical value in percent for the length of the component.\n\n**Note:**\nIf a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0.", - "privacy": "public" - }, - { - "kind": "field", - "name": "displayValue", - "type": { - "text": "string | undefined" - }, - "description": "Specifies the text value to be displayed in the bar.\n\n**Note:**\n\n- If there is no value provided or the value is empty, the default percentage value is shown.\n- If `hideValue` property is `true` both the `displayValue` and `value` property values are not shown.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "valueState", + "name": "horizontalAlign", "type": { - "text": "ValueState", + "text": "TableCellHorizontalAlign | undefined", "references": [ { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" + "name": "TableCellHorizontalAlign", + "package": "@ui5/webcomponents", + "module": "dist/types/TableCellHorizontalAlign.js" } ] }, - "default": "\"None\"", - "description": "Defines the value state of the component.", - "privacy": "public" - } - ], - "attributes": [ - { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines whether the component value is shown.", - "name": "hide-value", - "default": "false", - "fieldName": "hideValue", - "type": { - "text": "boolean" - } - }, - { - "description": "Specifies the numerical value in percent for the length of the component.\n\n**Note:**\nIf a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0.", - "name": "value", - "default": "0", - "fieldName": "value", - "type": { - "text": "number" - } - }, - { - "description": "Specifies the text value to be displayed in the bar.\n\n**Note:**\n\n- If there is no value provided or the value is empty, the default percentage value is shown.\n- If `hideValue` property is `true` both the `displayValue` and `value` property values are not shown.", - "name": "display-value", + "description": "Determines the horizontal alignment of table cells.", "default": "undefined", - "fieldName": "displayValue", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", - "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "privacy": "public", + "inheritedFrom": { + "name": "TableCellBase", + "module": "dist/TableCellBase.js" } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "TableCellBase", + "package": "@ui5/webcomponents", + "module": "dist/TableCellBase.js" }, - "tagName": "ui5-progress-indicator", + "tagName": "ui5-table-cell", "customElement": true, - "_ui5since": "1.0.0-rc.8", - "_ui5privacy": "public" + "_ui5since": "2.0.0", + "_ui5privacy": "public", + "slots": [ + { + "name": "default", + "description": "Defines the content of the component.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<Node>" + }, + "_ui5privacy": "public", + "inheritedFrom": { + "name": "TableCellBase", + "module": "dist/TableCellBase.js" + } + } + ], + "attributes": [ + { + "description": "Determines the horizontal alignment of table cells.", + "name": "horizontal-align", + "default": "undefined", + "fieldName": "horizontalAlign", + "type": { + "text": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined" + }, + "inheritedFrom": { + "name": "TableCellBase", + "module": "dist/TableCellBase.js" + } + } + ] } ], "exports": [ @@ -22185,223 +23940,208 @@ "kind": "js", "name": "default", "declaration": { - "name": "ProgressIndicator", - "module": "dist/ProgressIndicator.js" + "name": "TableCell", + "module": "dist/TableCell.js" } }, { "kind": "custom-element-definition", - "name": "ui5-progress-indicator", + "name": "ui5-table-cell", "declaration": { - "name": "ProgressIndicator", - "module": "dist/ProgressIndicator.js" + "name": "TableCell", + "module": "dist/TableCell.js" } } ] }, { "kind": "javascript-module", - "path": "dist/RadioButton.js", + "path": "dist/TableCellBase.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-radio-button` component enables users to select a single option from a set of options.\nWhen a `ui5-radio-button` is selected by the user, the\n`change` event is fired.\nWhen a `ui5-radio-button` that is within a group is selected, the one\nthat was previously selected gets automatically deselected. You can group radio buttons by using the `name` property.\n\n**Note:** If `ui5-radio-button` is not part of a group, it can be selected once, but can not be deselected back.\n\n### Keyboard Handling\n\nOnce the `ui5-radio-button` is on focus, it might be selected by pressing the Space and Enter keys.\n\nThe Arrow Down/Arrow Up and Arrow Left/Arrow Right keys can be used to change selection between next/previous radio buttons in one group,\nwhile TAB and SHIFT + TAB can be used to enter or leave the radio button group.\n\n**Note:** On entering radio button group, the focus goes to the currently selected radio button.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/RadioButton\";`", - "name": "RadioButton", - "cssParts": [ - { - "description": "Used to style the outer ring of the `ui5-radio-button`.", - "name": "outer-ring" - }, + "description": "A class to serve as a foundation for the `TableCell` and `TableHeaderCell` classes.", + "name": "TableCellBase", + "slots": [ { - "description": "Used to style the inner ring of the `ui5-radio-button`.", - "name": "inner-ring" + "name": "default", + "description": "Defines the content of the component.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<Node>" + }, + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", - "privacy": "public" - }, - { - "kind": "field", - "name": "readonly", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component isn't editable or selectable.\nHowever, because it's focusable, it still provides visual feedback upon user interaction.", - "privacy": "public" - }, - { - "kind": "field", - "name": "required", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is required.", - "privacy": "public", - "_ui5since": "1.9.0" - }, - { - "kind": "field", - "name": "checked", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.\n\n**Note:** Only enabled radio buttons can be checked.\nRead-only radio buttons are not selectable, and therefore are always unchecked.", - "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "_ui5formProperty": true, - "_ui5formEvents": "change" - }, - { - "kind": "field", - "name": "text", - "type": { - "text": "string | undefined" - }, - "description": "Defines the text of the component.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "valueState", + "name": "horizontalAlign", "type": { - "text": "ValueState", + "text": "TableCellHorizontalAlign | undefined", "references": [ { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" + "name": "TableCellHorizontalAlign", + "package": "@ui5/webcomponents", + "module": "dist/types/TableCellHorizontalAlign.js" } ] }, - "default": "\"None\"", - "description": "Defines the value state of the component.", - "privacy": "public" - }, - { - "kind": "field", - "name": "name", - "type": { - "text": "string | undefined" - }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\nRadio buttons with the same `name` will form a radio button group.\n\n**Note:** By this name the component will be identified upon submission in an HTML form.\n\n**Note:** The selection can be changed with `ARROW_UP/DOWN` and `ARROW_LEFT/RIGHT` keys between radio buttons in same group.\n\n**Note:** Only one radio button can be selected per group.", + "description": "Determines the horizontal alignment of table cells.", "default": "undefined", "privacy": "public" - }, + } + ], + "attributes": [ { - "kind": "field", - "name": "value", + "description": "Determines the horizontal alignment of table cells.", + "name": "horizontal-align", + "default": "undefined", + "fieldName": "horizontalAlign", "type": { - "text": "string" - }, - "default": "\"\"", - "description": "Defines the form value of the component.\nWhen a form with a radio button group is submitted, the group's value\nwill be the value of the currently selected radio button.", - "privacy": "public" - }, + "text": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public", + "_ui5abstract": true + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableCellBase", + "module": "dist/TableCellBase.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableCustomAnnouncement.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableCustomAnnouncement", + "module": "dist/TableCustomAnnouncement.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableDragAndDrop.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableDragAndDrop", + "module": "dist/TableDragAndDrop.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableExtension.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableExtension", + "module": "dist/TableExtension.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableGrowing.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-table-growing` component is used inside the `ui5-table` to add a growing/data loading functionalities\nto the table.\n\nThe component offers two options:\n* Button - a More button is displayed, clicking it will load more data.\n* Scroll - additional data is loaded automatically when the user scrolls to the end of the table.\n\n### Usage\n\nThe `ui5-table-growing` component is only used inside the `ui5-table` component as a feature.\nIt has to be slotted inside the `ui5-table` in the `features` slot.\nThe component is not intended to be used as a standalone component.\n\n```html\n<ui5-table>\n\t<ui5-table-growing mode=\"Button\" text=\"More\" slot=\"features\"></ui5-table-growing>\n</ui5-table>\n```\n\n**Notes**:\n* When the `ui5-table-growing` component is used with the `Scroll` mode and the table is currently not scrollable,\nthe component will render a growing button instead to ensure growing capabilities until the table becomes scrollable.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableGrowing.js\";`", + "name": "TableGrowing", + "members": [ { "kind": "field", - "name": "wrappingType", + "name": "mode", "type": { - "text": "WrappingType", + "text": "TableGrowingMode", "references": [ { - "name": "WrappingType", + "name": "TableGrowingMode", "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" + "module": "dist/types/TableGrowingMode.js" } ] }, - "default": "\"Normal\"", - "description": "Defines whether the component text wraps when there is not enough space.\n\n**Note:** for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.", + "default": "\"Button\"", + "description": "Defines the mode of the <code>ui5-table</code> growing.\n\nAvailable options are:\n\nButton - Shows a More button at the bottom of the table, pressing it will load more rows.\n\nScroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable,\na growing button will be rendered instead to ensure growing functionality.", "privacy": "public" }, { "kind": "field", - "name": "accessibleName", + "name": "text", "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines the text that will be displayed inside the growing button.\nHas no effect when mode is set to `Scroll`.\n\n**Note:** When not provided and the mode is set to Button, a default text is displayed, corresponding to the\ncurrent language.", "default": "undefined", - "privacy": "public", - "_ui5since": "1.6.0" + "privacy": "public" }, { "kind": "field", - "name": "accessibleNameRef", + "name": "subtext", "type": { "text": "string | undefined" }, - "description": "Defines the IDs of the elements that label the component.", + "description": "Defines the text that will be displayed below the `text` inside the growing button.\nHas no effect when mode is set to Scroll.", "default": "undefined", - "privacy": "public", - "_ui5since": "1.1.0" + "privacy": "public" } ], "events": [ { - "name": "change", + "name": "load-more", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the component checked state changes.", + "description": "Fired when the growing button is pressed or the user scrolls to the end of the table.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "1.0.0-rc.15" + "_ui5Bubbles": true } ], "attributes": [ { - "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component isn't editable or selectable.\nHowever, because it's focusable, it still provides visual feedback upon user interaction.", - "name": "readonly", - "default": "false", - "fieldName": "readonly", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the component is required.", - "name": "required", - "default": "false", - "fieldName": "required", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.\n\n**Note:** Only enabled radio buttons can be checked.\nRead-only radio buttons are not selectable, and therefore are always unchecked.", - "name": "checked", - "default": "false", - "fieldName": "checked", + "description": "Defines the mode of the <code>ui5-table</code> growing.\n\nAvailable options are:\n\nButton - Shows a More button at the bottom of the table, pressing it will load more rows.\n\nScroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable,\na growing button will be rendered instead to ensure growing functionality.", + "name": "mode", + "default": "\"Button\"", + "fieldName": "mode", "type": { - "text": "boolean" + "text": "\"Button\" | \"Scroll\"" } }, { - "description": "Defines the text of the component.", + "description": "Defines the text that will be displayed inside the growing button.\nHas no effect when mode is set to `Scroll`.\n\n**Note:** When not provided and the mode is set to Button, a default text is displayed, corresponding to the\ncurrent language.", "name": "text", "default": "undefined", "fieldName": "text", @@ -22410,55 +24150,10 @@ } }, { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", - "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" - } - }, - { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\nRadio buttons with the same `name` will form a radio button group.\n\n**Note:** By this name the component will be identified upon submission in an HTML form.\n\n**Note:** The selection can be changed with `ARROW_UP/DOWN` and `ARROW_LEFT/RIGHT` keys between radio buttons in same group.\n\n**Note:** Only one radio button can be selected per group.", - "name": "name", - "default": "undefined", - "fieldName": "name", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the form value of the component.\nWhen a form with a radio button group is submitted, the group's value\nwill be the value of the currently selected radio button.", - "name": "value", - "default": "\"\"", - "fieldName": "value", - "type": { - "text": "string" - } - }, - { - "description": "Defines whether the component text wraps when there is not enough space.\n\n**Note:** for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.", - "name": "wrapping-type", - "default": "\"Normal\"", - "fieldName": "wrappingType", - "type": { - "text": "\"None\" | \"Normal\"" - } - }, - { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the IDs of the elements that label the component.", - "name": "accessible-name-ref", + "description": "Defines the text that will be displayed below the `text` inside the growing button.\nHas no effect when mode is set to Scroll.", + "name": "subtext", "default": "undefined", - "fieldName": "accessibleNameRef", + "fieldName": "subtext", "type": { "text": "string | undefined" } @@ -22469,8 +24164,9 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-radio-button", + "tagName": "ui5-table-growing", "customElement": true, + "_ui5since": "2.0.0", "_ui5privacy": "public" } ], @@ -22479,416 +24175,304 @@ "kind": "js", "name": "default", "declaration": { - "name": "RadioButton", - "module": "dist/RadioButton.js" + "name": "TableGrowing", + "module": "dist/TableGrowing.js" } }, { "kind": "custom-element-definition", - "name": "ui5-radio-button", - "declaration": { - "name": "RadioButton", - "module": "dist/RadioButton.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/RadioButtonGroup.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", + "name": "ui5-table-growing", "declaration": { - "name": "RadioButtonGroup", - "module": "dist/RadioButtonGroup.js" + "name": "TableGrowing", + "module": "dist/TableGrowing.js" } } ] }, { "kind": "javascript-module", - "path": "dist/RangeSlider.js", + "path": "dist/TableHeaderCell.js", "declarations": [ { "kind": "class", - "description": "### Overview\nRepresents a numerical interval and two handles (grips) to select a sub-range within it.\nThe purpose of the component to enable visual selection of sub-ranges within a given interval.\n\n### Structure\nThe most important properties of the Range Slider are:\n\n- min - The minimum value of the slider range.\n- max - The maximum value of the slider range.\n- value - The current value of the slider.\n- step - Determines the increments in which the slider will move.\n- showTooltip - Determines if a tooltip should be displayed above the handle.\n- showTickmarks - Displays a visual divider between the step values.\n- labelInterval - Labels some or all of the tickmarks with their values.\n\n#### Notes:\n\n- The right and left handle can be moved individually and their positions could therefore switch.\n- The entire range can be moved along the interval.\n\n### Usage\nThe most common use case is to select and move sub-ranges on a continuous numerical scale.\n\n### Responsive Behavior\nYou can move the currently selected range by clicking on it and dragging it along the interval.\n\n### Keyboard Handling\n\n- `Left or Down Arrow` - Moves a component's handle or the entire selection one step to the left;\n- `Right or Up Arrow` - Moves a component's handle or the entire selection one step to the right;\n- `Left or Down Arrow + Ctrl/Cmd` - Moves a component's handle to the left or the entire range with step equal to 1/10th of the entire range;\n- `Right or Up Arrow + Ctrl/Cmd` - Moves a component's handle to the right or the entire range with step equal to 1/10th of the entire range;\n- `Plus` - Same as `Right or Up Arrow`;\n- `Minus` - Same as `Left or Down Arrow`;\n- `Home` - Moves the entire selection or the selected handle to the beginning of the component's range;\n- `End` - Moves the entire selection or the selected handle to the end of the component's range;\n- `Page Up` - Same as `Right or Up Arrow + Ctrl/Cmd`;\n- `Page Down` - Same as `Left or Down Arrow + Ctrl/Cmd`;\n- `Escape` - Resets the `startValue` and `endValue` properties to the values prior the component focusing;\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/RangeSlider.js\";`", - "name": "RangeSlider", - "cssParts": [ - { - "description": "Used to style the progress container, the horizontal bar that visually represents the range between the minimum and maximum values, of the `ui5-range-slider`.", - "name": "progress-container" - }, + "description": "### Overview\n\nThe `ui5-table-header-cell` component represents a column in the `ui5-table`.\n\nAs it is tightly coupled to the `ui5-table`, it should only be used in the `ui5-table-header-row`\nto ensure correct layout and design.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";`", + "name": "TableHeaderCell", + "slots": [ { - "description": "Used to style the progress bar, which shows the progress of the `ui5-range-slider`.", - "name": "progress-bar" + "name": "action", + "description": "Defines the action of the column.\n\n**Note:** While multiple actions are technically possible, this is not supported.", + "_ui5since": "2.8.0", + "_ui5type": { + "text": "Array<TableHeaderCellActionBase>", + "references": [ + { + "name": "TableHeaderCellActionBase", + "package": "@ui5/webcomponents", + "module": "dist/TableHeaderCellActionBase.js" + } + ] + }, + "_ui5privacy": "public" }, { - "description": "Used to style the handles of the `ui5-range-slider`.", - "name": "handle" + "name": "default", + "description": "Defines the content of the component.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array<Node>" + }, + "_ui5privacy": "public", + "inheritedFrom": { + "name": "TableCellBase", + "module": "dist/TableCellBase.js" + } } ], "members": [ { "kind": "field", - "name": "startValue", + "name": "width", "type": { - "text": "number" + "text": "string | undefined" }, - "default": "0", - "description": "Defines start point of a selection - position of a first handle on the slider.", - "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change,input" + "description": "Defines the width of the column.\n\nBy default, the column will grow and shrink according to the available space.\nThis will distribute the space proportionally among all columns with no specific width set.\n\nSee [\\<length\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/length) and\n[\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) for possible width values.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "endValue", + "name": "minWidth", "type": { - "text": "number" + "text": "string | undefined" }, - "default": "100", - "description": "Defines end point of a selection - position of a second handle on the slider.", + "description": "Defines the minimum width of the column.\n\nIf the table is in `Popin` mode and the minimum width does not fit anymore,\nthe column will move into the popin.\n\nBy default, the table prevents the column from becoming too small.\nChanging this value to a small value might lead to accessibility issues.\n\n**Note:** This property only takes effect for columns with a [\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) value\nor the default width.", "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change,input" + "default": "undefined" }, { "kind": "field", - "name": "min", + "name": "importance", "type": { "text": "number" }, "default": "0", - "description": "Defines the minimum value of the slider.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "description": "Defines the importance of the column.\n\nThis property affects the popin behaviour.\nColumns with higher importance will move into the popin area later then less important\ncolumns.", + "privacy": "public" }, { "kind": "field", - "name": "max", + "name": "popinText", "type": { - "text": "number" + "text": "string | undefined" }, - "default": "100", - "description": "Defines the maximum value of the slider.", + "description": "The text for the column when it pops in.", + "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "_ui5since": "2.7.0" }, { "kind": "field", - "name": "name", + "name": "sortIndicator", "type": { - "text": "string | undefined" + "text": "SortOrder", + "references": [ + { + "name": "SortOrder", + "package": "@ui5/webcomponents-base", + "module": "dist/types/SortOrder.js" + } + ] }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "default": "undefined", + "default": "\"None\"", + "description": "Defines the sort indicator of the column.", "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "_ui5since": "2.8.0" }, { "kind": "field", - "name": "step", + "name": "popinHidden", "type": { - "text": "number" + "text": "boolean" }, - "default": "1", - "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", + "default": "false", + "description": "Defines if the column is hidden in the popin.\n\n**Note:** Please be aware that hiding the column in the popin might lead to accessibility issues as\nusers might not be able to access the content of the column on small screens.", "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "_ui5since": "2.8.0" }, { "kind": "field", - "name": "labelInterval", + "name": "horizontalAlign", "type": { - "text": "number" - }, - "default": "0", - "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - }, - { - "kind": "field", - "name": "showTickmarks", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Enables tickmarks visualization for each step.\n\n**Note:** The step must be a positive number.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - }, - { - "kind": "field", - "name": "showTooltip", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Enables handle tooltip displaying the current value.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - }, - { - "kind": "field", - "name": "editableTooltip", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - }, - { - "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the slider is in disabled state.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - }, - { - "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" + "text": "TableCellHorizontalAlign | undefined", + "references": [ + { + "name": "TableCellHorizontalAlign", + "package": "@ui5/webcomponents", + "module": "dist/types/TableCellHorizontalAlign.js" + } + ] }, - "description": "Defines the accessible ARIA name of the component.", + "description": "Determines the horizontal alignment of table cells.", "default": "undefined", "privacy": "public", - "_ui5since": "1.4.0", "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" + "name": "TableCellBase", + "module": "dist/TableCellBase.js" } } ], "attributes": [ { - "description": "Defines start point of a selection - position of a first handle on the slider.", - "name": "start-value", + "description": "Defines the width of the column.\n\nBy default, the column will grow and shrink according to the available space.\nThis will distribute the space proportionally among all columns with no specific width set.\n\nSee [\\<length\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/length) and\n[\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) for possible width values.", + "name": "width", "default": "undefined", - "fieldName": "startValue", + "fieldName": "width", "type": { - "text": "number" + "text": "string | undefined" } }, { - "description": "Defines end point of a selection - position of a second handle on the slider.", - "name": "end-value", + "description": "Defines the minimum width of the column.\n\nIf the table is in `Popin` mode and the minimum width does not fit anymore,\nthe column will move into the popin.\n\nBy default, the table prevents the column from becoming too small.\nChanging this value to a small value might lead to accessibility issues.\n\n**Note:** This property only takes effect for columns with a [\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) value\nor the default width.", + "name": "min-width", "default": "undefined", - "fieldName": "endValue", + "fieldName": "minWidth", "type": { - "text": "number" + "text": "string | undefined" } }, { - "description": "Defines the minimum value of the slider.", - "name": "min", + "description": "Defines the importance of the column.\n\nThis property affects the popin behaviour.\nColumns with higher importance will move into the popin area later then less important\ncolumns.", + "name": "importance", "default": "0", - "fieldName": "min", - "type": { - "text": "number" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - }, - { - "description": "Defines the maximum value of the slider.", - "name": "max", - "default": "100", - "fieldName": "max", + "fieldName": "importance", "type": { "text": "number" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", + "description": "The text for the column when it pops in.", + "name": "popin-text", "default": "undefined", - "fieldName": "name", + "fieldName": "popinText", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - }, - { - "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", - "name": "step", - "default": "1", - "fieldName": "step", - "type": { - "text": "number" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - }, - { - "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", - "name": "label-interval", - "default": "0", - "fieldName": "labelInterval", - "type": { - "text": "number" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - }, - { - "description": "Enables tickmarks visualization for each step.\n\n**Note:** The step must be a positive number.", - "name": "show-tickmarks", - "default": "false", - "fieldName": "showTickmarks", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - }, - { - "description": "Enables handle tooltip displaying the current value.", - "name": "show-tooltip", - "default": "false", - "fieldName": "showTooltip", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" } }, { - "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", - "name": "editable-tooltip", - "default": "false", - "fieldName": "editableTooltip", + "description": "Defines the sort indicator of the column.", + "name": "sort-indicator", + "default": "\"None\"", + "fieldName": "sortIndicator", "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" + "text": "\"None\" | \"Ascending\" | \"Descending\"" } }, { - "description": "Defines whether the slider is in disabled state.", - "name": "disabled", + "description": "Defines if the column is hidden in the popin.\n\n**Note:** Please be aware that hiding the column in the popin might lead to accessibility issues as\nusers might not be able to access the content of the column on small screens.", + "name": "popin-hidden", "default": "false", - "fieldName": "disabled", + "fieldName": "popinHidden", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", + "description": "Determines the horizontal alignment of table cells.", + "name": "horizontal-align", "default": "undefined", - "fieldName": "accessibleName", + "fieldName": "horizontalAlign", "type": { - "text": "string | undefined" + "text": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined" }, "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" + "name": "TableCellBase", + "module": "dist/TableCellBase.js" } } ], "superclass": { - "name": "SliderBase", + "name": "TableCellBase", "package": "@ui5/webcomponents", - "module": "dist/SliderBase.js" + "module": "dist/TableCellBase.js" }, - "tagName": "ui5-range-slider", + "tagName": "ui5-table-header-cell", "customElement": true, - "_ui5since": "1.0.0-rc.11", + "_ui5since": "2.0.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableHeaderCell", + "module": "dist/TableHeaderCell.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-table-header-cell", + "declaration": { + "name": "TableHeaderCell", + "module": "dist/TableHeaderCell.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableHeaderCellActionAI.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-table-header-cell-action-ai` component defines a dedicated AI action for the table column.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderCellActionAI.js\";`", + "name": "TableHeaderCellActionAI", + "superclass": { + "name": "TableHeaderCellActionBase", + "package": "@ui5/webcomponents", + "module": "dist/TableHeaderCellActionBase.js" + }, + "tagName": "ui5-table-header-cell-action-ai", + "customElement": true, + "_ui5since": "2.8.0", "_ui5privacy": "public", "events": [ { - "name": "change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the value changes and the user has finished interacting with the slider.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - }, - { - "name": "input", + "name": "click", "_ui5privacy": "public", "type": { - "text": "CustomEvent" + "text": "CustomEvent<TableHeaderCellActionClickEventDetail>", + "references": [ + { + "name": "TableHeaderCellActionClickEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/TableHeaderCellActionBase.js" + } + ] }, - "description": "Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.", + "description": "Fired when a header cell action is clicked.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, + "_ui5since": "2.8.0", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "targetRef", + "_ui5privacy": "public", + "description": "The reference to the element that triggered the event" + } + ], "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" + "name": "TableHeaderCellActionBase", + "module": "dist/TableHeaderCellActionBase.js" } } - ] + ], + "members": [] } ], "exports": [ @@ -22896,237 +24480,139 @@ "kind": "js", "name": "default", "declaration": { - "name": "RangeSlider", - "module": "dist/RangeSlider.js" + "name": "TableHeaderCellActionAI", + "module": "dist/TableHeaderCellActionAI.js" } }, { "kind": "custom-element-definition", - "name": "ui5-range-slider", + "name": "ui5-table-header-cell-action-ai", "declaration": { - "name": "RangeSlider", - "module": "dist/RangeSlider.js" + "name": "TableHeaderCellActionAI", + "module": "dist/TableHeaderCellActionAI.js" } } ] }, { "kind": "javascript-module", - "path": "dist/RatingIndicator.js", + "path": "dist/TableHeaderCellActionBase.js", "declarations": [ { "kind": "class", - "description": "### Overview\nThe Rating Indicator is used to display a specific number of icons that are used to rate an item.\nAdditionally, it is also used to display the average and overall ratings.\n\n### Usage\nThe recommended number of icons is between 5 and 7.\n\n### Responsive Behavior\nYou can change the size of the Rating Indicator by changing its `font-size` CSS property.\n\nExample: `<ui5-rating-indicator style=\"font-size: 3rem;\"></ui5-rating-indicator>`\n\n### Keyboard Handling\nWhen the `ui5-rating-indicator` is focused, the user can change the rating\nwith the following keyboard shortcuts:\n\n- [RIGHT/UP] - Increases the value of the rating by one step. If the highest value is reached, does nothing\n- [LEFT/DOWN] - Decreases the value of the rating by one step. If the lowest value is reached, does nothing.\n- [Home] - Sets the lowest value.\n- [End] - Sets the highest value.\n- [SPACE/ENTER/RETURN] - Increases the value of the rating by one step. If the highest value is reached, sets the rating to the lowest value.\n- Any number - Changes value to the corresponding number. If typed number is larger than the number of values, sets the highest value.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/RatingIndicator.js\";`", - "name": "RatingIndicator", - "members": [ - { - "kind": "field", - "name": "value", - "type": { - "text": "number" - }, - "default": "0", - "description": "The indicated value of the rating.\n\n**Note:** If you set a number which is not round, it would be shown as follows:\n\n- 1.0 - 1.2 -> 1\n- 1.3 - 1.7 -> 1.5\n- 1.8 - 1.9 -> 2", - "privacy": "public" - }, - { - "kind": "field", - "name": "max", - "type": { - "text": "number" - }, - "default": "5", - "description": "The number of displayed rating symbols.", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" - }, + "description": "The `TableHeaderCellActionBase` class serves as a foundation for table header cell actions.", + "name": "TableHeaderCellActionBase", + "events": [ { - "kind": "field", - "name": "size", + "name": "click", + "_ui5privacy": "public", "type": { - "text": "RatingIndicatorSize", + "text": "CustomEvent<TableHeaderCellActionClickEventDetail>", "references": [ { - "name": "RatingIndicatorSize", + "name": "TableHeaderCellActionClickEventDetail", "package": "@ui5/webcomponents", - "module": "dist/types/RatingIndicatorSize.js" + "module": "dist/TableHeaderCellActionBase.js" } ] }, - "default": "\"M\"", - "description": "Defines the size of the component.", - "privacy": "public", - "_ui5since": "2.6.0" - }, + "description": "Fired when a header cell action is clicked.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.8.0", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "targetRef", + "_ui5privacy": "public", + "description": "The reference to the element that triggered the event" + } + ] + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "customElement": true, + "_ui5since": "2.8.0", + "_ui5privacy": "public", + "_ui5abstract": true, + "members": [] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableHeaderCellActionBase", + "module": "dist/TableHeaderCellActionBase.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableHeaderRow.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-table-header-row` component represents the table headers of a `ui5-table`.\n\nIt is tightly coupled to the `ui5-table` and should therefore be used in the `ui5-table` only.\nThe header row is placed in the `headerRow` slot of the table.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";`", + "name": "TableHeaderRow", + "slots": [ { - "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" + "name": "default", + "description": "Defines the cells of the component.\n\n**Note:** Use `ui5-table-header-cell` for the intended design.", + "_ui5propertyName": "cells", + "_ui5type": { + "text": "Array<TableHeaderCell>", + "references": [ + { + "name": "TableHeaderCell", + "package": "@ui5/webcomponents", + "module": "dist/TableHeaderCell.js" + } + ] }, - "default": "false", - "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", - "privacy": "public" - }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "name": "readonly", + "name": "sticky", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "description": "Sticks the `ui5-table-header-row` to the top of a table.\n\nNote: If used in combination with overflowMode \"Scroll\", the table needs a defined height for the sticky header to work as expected.", "privacy": "public" - }, - { - "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" - }, - { - "kind": "field", - "name": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that label the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.15.0" - }, - { - "kind": "field", - "name": "required", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is required.", - "privacy": "public", - "_ui5since": "1.15.0" - }, - { - "kind": "field", - "name": "tooltip", - "type": { - "text": "string | undefined" - }, - "description": "Defines the tooltip of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.19.0" - } - ], - "events": [ - { - "name": "change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "The event is fired when the value changes.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true } ], "attributes": [ { - "description": "The indicated value of the rating.\n\n**Note:** If you set a number which is not round, it would be shown as follows:\n\n- 1.0 - 1.2 -> 1\n- 1.3 - 1.7 -> 1.5\n- 1.8 - 1.9 -> 2", - "name": "value", - "default": "0", - "fieldName": "value", + "description": "Sticks the `ui5-table-header-row` to the top of a table.\n\nNote: If used in combination with overflowMode \"Scroll\", the table needs a defined height for the sticky header to work as expected.", + "name": "sticky", + "default": "false", + "fieldName": "sticky", "type": { - "text": "number" - } - }, - { - "description": "The number of displayed rating symbols.", - "name": "max", - "default": "5", - "fieldName": "max", - "type": { - "text": "number" - } - }, - { - "description": "Defines the size of the component.", - "name": "size", - "default": "\"M\"", - "fieldName": "size", - "type": { - "text": "\"S\" | \"M\" | \"L\"" - } - }, - { - "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", - "name": "readonly", - "default": "false", - "fieldName": "readonly", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Receives id(or many ids) of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines whether the component is required.", - "name": "required", - "default": "false", - "fieldName": "required", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the tooltip of the component.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", - "type": { - "text": "string | undefined" + "text": "boolean" } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "TableRowBase", + "package": "@ui5/webcomponents", + "module": "dist/TableRowBase.js" }, - "tagName": "ui5-rating-indicator", + "tagName": "ui5-table-header-row", "customElement": true, - "_ui5since": "1.0.0-rc.8", + "_ui5since": "2.0.0", "_ui5privacy": "public" } ], @@ -23135,695 +24621,482 @@ "kind": "js", "name": "default", "declaration": { - "name": "RatingIndicator", - "module": "dist/RatingIndicator.js" + "name": "TableHeaderRow", + "module": "dist/TableHeaderRow.js" } }, { "kind": "custom-element-definition", - "name": "ui5-rating-indicator", + "name": "ui5-table-header-row", "declaration": { - "name": "RatingIndicator", - "module": "dist/RatingIndicator.js" + "name": "TableHeaderRow", + "module": "dist/TableHeaderRow.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ResponsivePopover.js", + "path": "dist/TableNavigation.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableNavigation", + "module": "dist/TableNavigation.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableRow.js", "declarations": [ { "kind": "class", - "description": "### Overview\nThe `ui5-responsive-popover` acts as a Popover on desktop and tablet, while on phone it acts as a Dialog.\nThe component improves tremendously the user experience on mobile.\n\n### Usage\nUse it when you want to make sure that all the content is visible on any device.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ResponsivePopover.js\";`", - "name": "ResponsivePopover", - "cssParts": [ - { - "description": "Used to style the header of the component", - "name": "header", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } - }, - { - "description": "Used to style the content of the component", - "name": "content", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } - }, - { - "description": "Used to style the footer of the component", - "name": "footer", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } - } - ], - "members": [ - { - "kind": "field", - "name": "headerText", - "type": { - "text": "string | undefined" - }, - "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", - "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } - }, + "description": "### Overview\n\nThe `ui5-table-row` component represents a row in the `ui5-table`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableRow.js\";`", + "name": "TableRow", + "slots": [ { - "kind": "field", - "name": "placement", - "type": { - "text": "PopoverPlacement", + "name": "default", + "description": "Defines the cells of the component.\n\n**Note:** Use `ui5-table-cell` for the intended design.", + "_ui5propertyName": "cells", + "_ui5type": { + "text": "Array<TableCell>", "references": [ { - "name": "PopoverPlacement", + "name": "TableCell", "package": "@ui5/webcomponents", - "module": "dist/types/PopoverPlacement.js" + "module": "dist/TableCell.js" } ] }, - "default": "\"End\"", - "description": "Determines on which side the component is placed at.", - "privacy": "public", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } + "_ui5privacy": "public" }, { - "kind": "field", - "name": "horizontalAlign", - "type": { - "text": "PopoverHorizontalAlign", + "name": "actions", + "description": "Defines the actions of the component.\n\n**Note:** Use `ui5-table-row-action` or `ui5-table-row-action-navigation` for the intended design.", + "_ui5since": "2.7.0", + "_ui5type": { + "text": "Array<TableRowActionBase>", "references": [ { - "name": "PopoverHorizontalAlign", + "name": "TableRowActionBase", "package": "@ui5/webcomponents", - "module": "dist/types/PopoverHorizontalAlign.js" + "module": "dist/TableRowActionBase.js" } ] }, - "default": "\"Center\"", - "description": "Determines the horizontal alignment of the component.", - "privacy": "public", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "rowKey", + "type": { + "text": "string | undefined" + }, + "description": "Unique identifier of the row.\n\n**Note:** For selection features to work properly, this property is mandatory, and its value must not contain spaces.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "verticalAlign", + "name": "position", "type": { - "text": "PopoverVerticalAlign", - "references": [ - { - "name": "PopoverVerticalAlign", - "package": "@ui5/webcomponents", - "module": "dist/types/PopoverVerticalAlign.js" - } - ] + "text": "number | undefined" }, - "default": "\"Center\"", - "description": "Determines the vertical alignment of the component.", + "description": "Defines the 0-based position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.", + "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } + "_ui5since": "2.5.0" }, { "kind": "field", - "name": "modal", + "name": "interactive", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.", - "privacy": "public", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } + "description": "Defines the interactive state of the row.", + "privacy": "public" }, { "kind": "field", - "name": "hideArrow", + "name": "navigated", "type": { "text": "boolean" }, "default": "false", - "description": "Determines whether the component arrow is hidden.", - "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } + "description": "Defines the navigated state of the row.", + "privacy": "public" }, { "kind": "field", - "name": "allowTargetOverlap", + "name": "movable", "type": { "text": "boolean" }, "default": "false", - "description": "Determines if there is no enough space, the component can be placed\nover the target.", + "description": "Defines whether the row is movable.", "privacy": "public", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" + "_ui5since": "2.6.0" + } + ], + "attributes": [ + { + "description": "Unique identifier of the row.\n\n**Note:** For selection features to work properly, this property is mandatory, and its value must not contain spaces.", + "name": "row-key", + "default": "undefined", + "fieldName": "rowKey", + "type": { + "text": "string | undefined" } }, { - "kind": "field", - "name": "opener", - "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", - "privacy": "public", + "description": "Defines the 0-based position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.", + "name": "position", "default": "undefined", + "fieldName": "position", "type": { - "text": "HTMLElement | string | null | undefined" - }, - "_ui5since": "1.2.0", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" + "text": "number | undefined" } }, { - "kind": "field", - "name": "initialFocus", + "description": "Defines the interactive state of the row.", + "name": "interactive", + "default": "false", + "fieldName": "interactive", "type": { - "text": "string | undefined" - }, - "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", - "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "boolean" } }, { - "kind": "field", - "name": "preventFocusRestore", + "description": "Defines the navigated state of the row.", + "name": "navigated", + "default": "false", + "fieldName": "navigated", "type": { "text": "boolean" - }, - "default": "false", - "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", - "privacy": "public", - "_ui5since": "1.0.0-rc.8", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" } }, { - "kind": "field", - "name": "accessibleName", + "description": "Defines whether the row is movable.", + "name": "movable", + "default": "false", + "fieldName": "movable", "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "boolean" } - }, + } + ], + "superclass": { + "name": "TableRowBase", + "package": "@ui5/webcomponents", + "module": "dist/TableRowBase.js" + }, + "tagName": "ui5-table-row", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableRow", + "module": "dist/TableRow.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-table-row", + "declaration": { + "name": "TableRow", + "module": "dist/TableRow.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableRowAction.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-table-row-action` component defines an action for table rows.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableRowAction.js\";`", + "name": "TableRowAction", + "members": [ { "kind": "field", - "name": "accessibleNameRef", + "name": "icon", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Defines the IDs of the elements that label the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.1.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "default": "\"\"", + "description": "Defines the icon of the row action.\n\n**Note:** For row actions to work properly, this property is mandatory.\n\n**Note:** SAP-icons font provides numerous built-in icons. To find all the available icons, see the\n[Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "privacy": "public" }, { "kind": "field", - "name": "accessibleRole", + "name": "text", "type": { - "text": "PopupAccessibleRole", - "references": [ - { - "name": "PopupAccessibleRole", - "package": "@ui5/webcomponents", - "module": "dist/types/PopupAccessibleRole.js" - } - ] + "text": "string" }, - "default": "\"Dialog\"", - "description": "Allows setting a custom role.", - "privacy": "public", - "_ui5since": "1.10.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "default": "\"\"", + "description": "Defines the text of the row action.\n\n**Note:** For row actions to work properly, this property is mandatory.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescription", + "name": "invisible", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the accessible description of the component.", - "default": "undefined", + "default": "false", + "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", "privacy": "public", - "_ui5since": "2.11.0", "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "name": "TableRowActionBase", + "module": "dist/TableRowActionBase.js" } - }, + } + ], + "attributes": [ { - "kind": "field", - "name": "accessibleDescriptionRef", + "description": "Defines the icon of the row action.\n\n**Note:** For row actions to work properly, this property is mandatory.\n\n**Note:** SAP-icons font provides numerous built-in icons. To find all the available icons, see the\n[Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "\"\"", + "fieldName": "icon", "type": { - "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that describe the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.11.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "string" } }, { - "kind": "field", - "name": "preventInitialFocus", + "description": "Defines the text of the row action.\n\n**Note:** For row actions to work properly, this property is mandatory.", + "name": "text", + "default": "\"\"", + "fieldName": "text", "type": { - "text": "boolean" - }, - "default": "false", - "description": "Indicates whether initial focus should be prevented.", - "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "text": "string" } }, { - "kind": "field", - "name": "open", - "description": "Indicates if the element is open", - "privacy": "public", + "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", + "name": "invisible", "default": "false", + "fieldName": "invisible", "type": { "text": "boolean" }, - "_ui5since": "1.2.0", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, - { - "kind": "method", - "name": "applyFocus", - "return": { - "type": { - "text": "Promise<void>" - }, - "description": "Promise that resolves when the focus is applied" - }, - "description": "Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.", - "privacy": "public", "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "name": "TableRowActionBase", + "module": "dist/TableRowActionBase.js" } } ], "superclass": { - "name": "Popover", + "name": "TableRowActionBase", "package": "@ui5/webcomponents", - "module": "dist/Popover.js" + "module": "dist/TableRowActionBase.js" }, - "tagName": "ui5-responsive-popover", + "tagName": "ui5-table-row-action", "customElement": true, - "_ui5since": "1.0.0-rc.6", + "_ui5since": "2.7.0", "_ui5privacy": "public", - "slots": [ + "events": [ { - "name": "header", - "description": "Defines the header HTML Element.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, + "name": "click", "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when a row action is clicked.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.9.0", "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } - }, - { - "name": "footer", - "description": "Defines the footer HTML Element.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } - }, - { - "name": "default", - "description": "Defines the content of the Popup.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "name": "TableRowActionBase", + "module": "dist/TableRowActionBase.js" } } - ], - "attributes": [ - { - "description": "Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.", - "name": "header-text", - "default": "undefined", - "fieldName": "headerText", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } - }, - { - "description": "Determines on which side the component is placed at.", - "name": "placement", - "default": "\"End\"", - "fieldName": "placement", - "type": { - "text": "\"Top\" | \"Bottom\" | \"Start\" | \"End\"" - }, - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } - }, + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableRowAction", + "module": "dist/TableRowAction.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-table-row-action", + "declaration": { + "name": "TableRowAction", + "module": "dist/TableRowAction.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableRowActionBase.js", + "declarations": [ + { + "kind": "class", + "description": "The `TableRowActionBase` class serves as a foundation for table row actions.", + "name": "TableRowActionBase", + "members": [ { - "description": "Determines the horizontal alignment of the component.", - "name": "horizontal-align", - "default": "\"Center\"", - "fieldName": "horizontalAlign", + "kind": "field", + "name": "invisible", "type": { - "text": "\"Center\" | \"Start\" | \"End\" | \"Stretch\"" + "text": "boolean" }, - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } - }, + "default": "false", + "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", + "privacy": "public" + } + ], + "events": [ { - "description": "Determines the vertical alignment of the component.", - "name": "vertical-align", - "default": "\"Center\"", - "fieldName": "verticalAlign", + "name": "click", + "_ui5privacy": "public", "type": { - "text": "\"Top\" | \"Bottom\" | \"Center\" | \"Stretch\"" + "text": "CustomEvent" }, - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } - }, + "description": "Fired when a row action is clicked.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.9.0" + } + ], + "attributes": [ { - "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.", - "name": "modal", + "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", + "name": "invisible", "default": "false", - "fieldName": "modal", + "fieldName": "invisible", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" } - }, + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "customElement": true, + "_ui5since": "2.7.0", + "_ui5privacy": "public", + "_ui5abstract": true + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableRowActionBase", + "module": "dist/TableRowActionBase.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableRowActionNavigation.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-table-row-action-navigation` component defines a navigation action for table rows.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableRowActionNavigation.js\";`", + "name": "TableRowActionNavigation", + "members": [ { - "description": "Determines whether the component arrow is hidden.", - "name": "hide-arrow", - "default": "false", - "fieldName": "hideArrow", + "kind": "field", + "name": "interactive", "type": { "text": "boolean" }, - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } - }, - { - "description": "Determines if there is no enough space, the component can be placed\nover the target.", - "name": "allow-target-overlap", "default": "false", - "fieldName": "allowTargetOverlap", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } - }, - { - "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", - "name": "opener", - "default": "undefined", - "fieldName": "opener", - "type": { - "text": "any" - }, - "inheritedFrom": { - "name": "Popover", - "module": "dist/Popover.js" - } - }, - { - "description": "Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.", - "name": "initial-focus", - "default": "undefined", - "fieldName": "initialFocus", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } + "description": "Defines the interactive state of the navigation action.", + "privacy": "public" }, { - "description": "Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.", - "name": "prevent-focus-restore", - "default": "false", - "fieldName": "preventFocusRestore", + "kind": "field", + "name": "invisible", "type": { "text": "boolean" }, + "default": "false", + "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", + "privacy": "public", "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, - { - "description": "Defines the accessible name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, - { - "description": "Defines the IDs of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, - { - "description": "Allows setting a custom role.", - "name": "accessible-role", - "default": "\"Dialog\"", - "fieldName": "accessibleRole", - "type": { - "text": "\"None\" | \"Dialog\" | \"AlertDialog\"" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, - { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, - { - "description": "Receives id(or many ids) of the elements that describe the component.", - "name": "accessible-description-ref", - "default": "undefined", - "fieldName": "accessibleDescriptionRef", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "name": "TableRowActionBase", + "module": "dist/TableRowActionBase.js" } - }, + } + ], + "attributes": [ { - "description": "Indicates whether initial focus should be prevented.", - "name": "prevent-initial-focus", + "description": "Defines the interactive state of the navigation action.", + "name": "interactive", "default": "false", - "fieldName": "preventInitialFocus", + "fieldName": "interactive", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" } }, { - "description": "Indicates if the element is open", - "name": "open", + "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", + "name": "invisible", "default": "false", - "fieldName": "open", + "fieldName": "invisible", "type": { - "text": "any" + "text": "boolean" }, "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "name": "TableRowActionBase", + "module": "dist/TableRowActionBase.js" } } ], + "superclass": { + "name": "TableRowActionBase", + "package": "@ui5/webcomponents", + "module": "dist/TableRowActionBase.js" + }, + "tagName": "ui5-table-row-action-navigation", + "customElement": true, + "_ui5since": "2.7.0", + "_ui5privacy": "public", "events": [ { - "name": "before-open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, - { - "name": "open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the component is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, - { - "name": "before-close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<PopupBeforeCloseEventDetail>", - "references": [ - { - "name": "PopupBeforeCloseEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Popup.js" - } - ] - }, - "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": false, - "_ui5parameters": [ - { - "type": { - "text": "boolean" - }, - "name": "escPressed", - "_ui5privacy": "public", - "description": "Indicates that `ESC` key has triggered the event." - } - ], - "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" - } - }, - { - "name": "close", + "name": "click", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired after the component is closed.", + "description": "Fired when a row action is clicked.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, + "_ui5Bubbles": true, + "_ui5since": "2.9.0", "inheritedFrom": { - "name": "Popup", - "module": "dist/Popup.js" + "name": "TableRowActionBase", + "module": "dist/TableRowActionBase.js" } } ] @@ -23834,225 +25107,249 @@ "kind": "js", "name": "default", "declaration": { - "name": "ResponsivePopover", - "module": "dist/ResponsivePopover.js" + "name": "TableRowActionNavigation", + "module": "dist/TableRowActionNavigation.js" } }, { "kind": "custom-element-definition", - "name": "ui5-responsive-popover", + "name": "ui5-table-row-action-navigation", "declaration": { - "name": "ResponsivePopover", - "module": "dist/ResponsivePopover.js" + "name": "TableRowActionNavigation", + "module": "dist/TableRowActionNavigation.js" } } ] }, { "kind": "javascript-module", - "path": "dist/SegmentedButton.js", + "path": "dist/TableRowBase.js", "declarations": [ { - "kind": "interface", - "name": "ISegmentedButtonItem", - "description": "Interface for components that may be slotted inside `ui5-segmented-button` as items", - "_ui5privacy": "public" - }, + "kind": "class", + "description": "A class to serve as a foundation for the `TableRow` and `TableHeaderRow` classes.", + "name": "TableRowBase", + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public", + "_ui5abstract": true, + "members": [] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableRowBase", + "module": "dist/TableRowBase.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableSelection.js", + "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-segmented-button` shows a group of items. When the user clicks or taps\none of the items, it stays in a pressed state. It automatically resizes the items\nto fit proportionally within the component. When no width is set, the component uses the available width.\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SegmentedButton.js\";`", - "name": "SegmentedButton", - "slots": [ + "description": "### Overview\n\nThe `ui5-table-selection` component is used inside the `ui5-table` to add key-based selection capabilities to the `ui5-table`.\n\nThe component offers three selection modes:\n* Single - select a single row.\n* Multiple - select multiple rows.\n* None - no selection active.\n\nAs the selection is key-based, `ui5-table-row` components need to define a unique `row-key` property.\n\n### Usage\n\nThe `ui5-table-selection` component is only used inside the `ui5-table` component as a feature.\nIt has to be slotted inside the `ui5-table` in the `features` slot.\nThe component is not intended to be used as a standalone component.\n\n```html\n<ui5-table>\n\t<ui5-table-selection mode=\"Multiple\" slot=\"features\"></ui5-table-selection>\n</ui5-table>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableSelection.js\";`", + "name": "TableSelection", + "members": [ { - "name": "default", - "description": "Defines the items of `ui5-segmented-button`.\n\n**Note:** Multiple items are allowed.\n\n**Note:** Use the `ui5-segmented-button-item` for the intended design.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<ISegmentedButtonItem>", + "kind": "field", + "name": "mode", + "type": { + "text": "TableSelectionMode", "references": [ { - "name": "ISegmentedButtonItem", + "name": "TableSelectionMode", "package": "@ui5/webcomponents", - "module": "dist/SegmentedButton.js" + "module": "dist/types/TableSelectionMode.js" } ] }, - "_ui5privacy": "public" - } - ], - "members": [ + "default": "\"Multiple\"", + "description": "Defines the selection mode.", + "privacy": "public" + }, { "kind": "field", - "name": "accessibleName", + "name": "selected", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.3" - }, + "default": "\"\"", + "description": "Defines the selected rows separated by a space.", + "privacy": "public" + } + ], + "events": [ { - "kind": "field", - "name": "accessibleNameRef", + "name": "change", + "_ui5privacy": "public", "type": { - "text": "string | undefined" + "text": "CustomEvent" }, - "description": "Defines the IDs of the HTML Elements that label the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.15.0" - }, + "description": "Fired when the selection is changed by user interaction.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ], + "attributes": [ { - "kind": "field", - "name": "accessibleDescription", + "description": "Defines the selection mode.", + "name": "mode", + "default": "\"Multiple\"", + "fieldName": "mode", "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible description of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.15.0" + "text": "\"None\" | \"Single\" | \"Multiple\"" + } }, + { + "description": "Defines the selected rows separated by a space.", + "name": "selected", + "default": "\"\"", + "fieldName": "selected", + "type": { + "text": "string" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "deprecated": "This component is deprecated and will be removed in future releases. Use the `ui5-table-selection-single` or `ui5-table-selection-multi` components instead.", + "tagName": "ui5-table-selection", + "customElement": true, + "_ui5experimental": "This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.", + "_ui5since": "2.0.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableSelection", + "module": "dist/TableSelection.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-table-selection", + "declaration": { + "name": "TableSelection", + "module": "dist/TableSelection.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableSelectionBase.js", + "declarations": [ + { + "kind": "class", + "description": "The `TableSelectionBase` class serves as a foundation for table selections.", + "name": "TableSelectionBase", + "members": [ { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "selected", "type": { "text": "string | undefined" }, - "description": "Defines the IDs of the HTML Elements that describe the component.", + "description": "Defines the selected elements of the component.", "default": "undefined", - "privacy": "public", - "_ui5since": "2.15.0" + "privacy": "public" }, { "kind": "field", - "name": "selectionMode", + "name": "behavior", "type": { - "text": "SegmentedButtonSelectionMode", + "text": "TableSelectionBehavior", "references": [ { - "name": "SegmentedButtonSelectionMode", + "name": "TableSelectionBehavior", "package": "@ui5/webcomponents", - "module": "dist/types/SegmentedButtonSelectionMode.js" + "module": "dist/types/TableSelectionBehavior.js" } ] }, - "default": "\"Single\"", - "description": "Defines the component selection mode.", + "default": "\"RowSelector\"", + "description": "Defines the selection behavior.", "privacy": "public", - "_ui5since": "1.14.0" + "_ui5since": "2.11" }, { - "kind": "field", - "name": "selectedItems", - "type": { - "text": "Array<ISegmentedButtonItem>", - "references": [ - { - "name": "ISegmentedButtonItem", - "package": "@ui5/webcomponents", - "module": "dist/SegmentedButton.js" - } - ] + "kind": "method", + "name": "getRowByKey", + "return": { + "type": { + "text": "TableRow | undefined", + "references": [ + { + "name": "TableRow", + "package": "@ui5/webcomponents", + "module": "dist/TableRow.js" + } + ] + } }, - "description": "Returns an array of the currently selected items.", - "privacy": "public", - "default": "[]", - "readonly": true, - "_ui5since": "1.14.0" + "parameters": [ + { + "name": "rowKey", + "type": { + "text": "string" + }, + "description": "The row key", + "_ui5privacy": "public" + } + ], + "description": "Returns the table row instance for the given row key.", + "privacy": "public" } ], "events": [ { - "name": "selection-change", + "name": "change", "_ui5privacy": "public", "type": { - "text": "CustomEvent<SegmentedButtonSelectionChangeEventDetail>", - "references": [ - { - "name": "SegmentedButtonSelectionChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/SegmentedButton.js" - } - ] + "text": "CustomEvent" }, - "description": "Fired when the selected item changes.", + "description": "Fired when the selection is changed by user interaction.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "Array<ISegmentedButtonItem>", - "references": [ - { - "name": "ISegmentedButtonItem", - "package": "@ui5/webcomponents", - "module": "dist/SegmentedButton.js" - } - ] - }, - "name": "selectedItems", - "_ui5privacy": "public", - "description": "an array of selected items. Since: 1.14.0" - } - ] + "_ui5Bubbles": true } ], "attributes": [ { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the IDs of the HTML Elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the IDs of the HTML Elements that describe the component.", - "name": "accessible-description-ref", + "description": "Defines the selected elements of the component.", + "name": "selected", "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "fieldName": "selected", "type": { "text": "string | undefined" } }, { - "description": "Defines the component selection mode.", - "name": "selection-mode", - "default": "\"Single\"", - "fieldName": "selectionMode", - "type": { - "text": "\"Single\" | \"Multiple\"" - } - }, - { - "description": "Returns an array of the currently selected items.", - "name": "selected-items", - "default": "[]", - "fieldName": "selectedItems", + "description": "Defines the selection behavior.", + "name": "behavior", + "default": "\"RowSelector\"", + "fieldName": "behavior", "type": { - "text": "any" + "text": "\"RowSelector\" | \"RowOnly\"" } } ], @@ -24061,9 +25358,8 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-segmented-button", "customElement": true, - "_ui5since": "1.0.0-rc.6", + "_ui5since": "2.8.0", "_ui5privacy": "public" } ], @@ -24072,218 +25368,219 @@ "kind": "js", "name": "default", "declaration": { - "name": "SegmentedButton", - "module": "dist/SegmentedButton.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-segmented-button", - "declaration": { - "name": "SegmentedButton", - "module": "dist/SegmentedButton.js" + "name": "TableSelectionBase", + "module": "dist/TableSelectionBase.js" } } ] }, { "kind": "javascript-module", - "path": "dist/SegmentedButtonItem.js", + "path": "dist/TableSelectionMulti.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nUsers can use the `ui5-segmented-button-item` as part of a `ui5-segmented-button`.\n\nClicking or tapping on a `ui5-segmented-button-item` changes its state to `selected`.\nThe item returns to its initial state when the user clicks or taps on it again.\nBy applying additional custom CSS-styling classes, apps can give a different style to any\n`ui5-segmented-button-item`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SegmentedButtonItem.js\";`", - "name": "SegmentedButtonItem", - "slots": [ - { - "name": "default", - "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", - "_ui5propertyName": "text", - "_ui5type": { - "text": "Array<Node>" - }, - "_ui5privacy": "public" - } - ], + "description": "### Overview\n\nThe `ui5-table-selection-multi` component is used inside the `ui5-table` to add multi-selection capabilities to the `ui5-table`.\nSince selection is key-based, each `ui5-table-row` must define a unique `row-key` property.\n\n### Usage\n\nThe `ui5-table-selection-multi` component is a feature designed exclusively for use within the `ui5-table` component.\nIt must be placed inside the `features` slot of `ui5-table`.\nThis component is not intended for standalone use.\n\n```html\n<ui5-table>\n\t<ui5-table-selection-multi slot=\"features\" selected=\"Row1 Row3\"></ui5-table-selection-multi>\n</ui5-table>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableSelectionMulti.js\";`", + "name": "TableSelectionMulti", "members": [ - { - "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is disabled.\nA disabled component can't be selected or\nfocused, and it is not in the tab chain.", - "privacy": "public" - }, { "kind": "field", "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Determines whether the component is displayed as selected.", - "privacy": "public" - }, - { - "kind": "field", - "name": "tooltip", "type": { "text": "string | undefined" }, - "description": "Defines the tooltip of the component.\n\n**Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.", + "description": "Defines the `row-key` values of selected rows, with each value separated by a space.", "default": "undefined", "privacy": "public", - "_ui5since": "1.2.0" + "inheritedFrom": { + "name": "TableSelectionBase", + "module": "dist/TableSelectionBase.js" + } }, { "kind": "field", - "name": "accessibleName", + "name": "headerSelector", "type": { - "text": "string | undefined" + "text": "TableSelectionMultiHeaderSelector", + "references": [ + { + "name": "TableSelectionMultiHeaderSelector", + "package": "@ui5/webcomponents", + "module": "dist/types/TableSelectionMultiHeaderSelector.js" + } + ] }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", + "default": "\"SelectAll\"", + "description": "Defines the selector of the header row.", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "2.12" }, { - "kind": "field", - "name": "accessibleNameRef", - "type": { - "text": "string | undefined" + "kind": "method", + "name": "getSelectedRows", + "return": { + "type": { + "text": "Array<TableRow>", + "references": [ + { + "name": "TableRow", + "package": "@ui5/webcomponents", + "module": "dist/TableRow.js" + } + ] + } }, - "description": "Receives id(or many ids) of the elements that label the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.1.0" + "description": "Returns an array of the selected rows.", + "privacy": "public" }, { - "kind": "field", - "name": "accessibleDescription", - "type": { - "text": "string | undefined" + "kind": "method", + "name": "getSelectedAsSet", + "return": { + "type": { + "text": "Set<string>" + } }, - "description": "Defines the accessible description of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.15.0" + "description": "Returns the `selected` property as a set of unique `row-key` values.", + "privacy": "public" + }, + { + "kind": "method", + "name": "setSelectedAsSet", + "return": { + "type": { + "text": "void" + } + }, + "parameters": [ + { + "name": "selectedSet", + "type": { + "text": "Set<string>" + }, + "description": "A set of `row-key` values", + "_ui5privacy": "public" + } + ], + "description": "Sets the `selected` property using the provided set of unique `row-key` values.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "behavior", "type": { - "text": "string | undefined" + "text": "TableSelectionBehavior", + "references": [ + { + "name": "TableSelectionBehavior", + "package": "@ui5/webcomponents", + "module": "dist/types/TableSelectionBehavior.js" + } + ] }, - "description": "Defines the IDs of the HTML Elements that describe the component.", - "default": "undefined", + "default": "\"RowSelector\"", + "description": "Defines the selection behavior.", "privacy": "public", - "_ui5since": "2.15.0" + "_ui5since": "2.11", + "inheritedFrom": { + "name": "TableSelectionBase", + "module": "dist/TableSelectionBase.js" + } }, { - "kind": "field", - "name": "icon", - "type": { - "text": "string | undefined" + "kind": "method", + "name": "getRowByKey", + "return": { + "type": { + "text": "TableRow | undefined", + "references": [ + { + "name": "TableRow", + "package": "@ui5/webcomponents", + "module": "dist/TableRow.js" + } + ] + } }, - "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "default": "undefined", - "privacy": "public" + "parameters": [ + { + "name": "rowKey", + "type": { + "text": "string" + }, + "description": "The row key", + "_ui5privacy": "public" + } + ], + "description": "Returns the table row instance for the given row key.", + "privacy": "public", + "inheritedFrom": { + "name": "TableSelectionBase", + "module": "dist/TableSelectionBase.js" + } } ], "attributes": [ { - "description": "Defines whether the component is disabled.\nA disabled component can't be selected or\nfocused, and it is not in the tab chain.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } - }, - { - "description": "Determines whether the component is displayed as selected.", + "description": "Defines the `row-key` values of selected rows, with each value separated by a space.", "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the tooltip of the component.\n\n**Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Receives id(or many ids) of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", "default": "undefined", - "fieldName": "accessibleDescription", + "fieldName": "selected", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "TableSelectionBase", + "module": "dist/TableSelectionBase.js" } }, { - "description": "Defines the IDs of the HTML Elements that describe the component.", - "name": "accessible-description-ref", - "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "description": "Defines the selector of the header row.", + "name": "header-selector", + "default": "\"SelectAll\"", + "fieldName": "headerSelector", "type": { - "text": "string | undefined" + "text": "\"SelectAll\" | \"ClearAll\"" } }, { - "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", + "description": "Defines the selection behavior.", + "name": "behavior", + "default": "\"RowSelector\"", + "fieldName": "behavior", "type": { - "text": "string | undefined" + "text": "\"RowSelector\" | \"RowOnly\"" + }, + "inheritedFrom": { + "name": "TableSelectionBase", + "module": "dist/TableSelectionBase.js" } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "TableSelectionBase", + "package": "@ui5/webcomponents", + "module": "dist/TableSelectionBase.js" }, - "tagName": "ui5-segmented-button-item", + "tagName": "ui5-table-selection-multi", "customElement": true, + "_ui5since": "2.8.0", "_ui5privacy": "public", - "_ui5implements": [ - { - "name": "ISegmentedButtonItem", - "package": "@ui5/webcomponents", - "module": "dist/SegmentedButton.js" - }, + "events": [ { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" + "name": "change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the selection is changed by user interaction.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "inheritedFrom": { + "name": "TableSelectionBase", + "module": "dist/TableSelectionBase.js" + } } ] } @@ -24293,424 +25590,640 @@ "kind": "js", "name": "default", "declaration": { - "name": "SegmentedButtonItem", - "module": "dist/SegmentedButtonItem.js" + "name": "TableSelectionMulti", + "module": "dist/TableSelectionMulti.js" } }, { "kind": "custom-element-definition", - "name": "ui5-segmented-button-item", + "name": "ui5-table-selection-multi", "declaration": { - "name": "SegmentedButtonItem", - "module": "dist/SegmentedButtonItem.js" + "name": "TableSelectionMulti", + "module": "dist/TableSelectionMulti.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Select.js", + "path": "dist/TableSelectionSingle.js", "declarations": [ - { - "kind": "interface", - "name": "IOption", - "description": "Interface for components that may be slotted inside `ui5-select` as options", - "_ui5privacy": "public" - }, { "kind": "class", - "description": "### Overview\n\nThe `ui5-select` component is used to create a drop-down list.\n\n### Usage\n\nThere are two main usages of the `ui5-select>`.\n\n- With Option (`ui5-option`) web component:\n\nThe available options of the Select are defined by using the Option component.\nThe Option comes with predefined design and layout, including `icon`, `text` and `additional-text`.\n\n- With OptionCustom (`ui5-option-custom`) web component.\n\nOptions with custom content are defined by using the OptionCustom component.\nThe OptionCustom component comes with no predefined layout and it expects consumers to define it.\n\n### Selection\n\nThe options can be selected via user interaction (click or with the use of the Space and Enter keys)\nand programmatically - the Select component supports two distinct selection APIs, though mixing them is not supported:\n- The \"value\" property of the Select component\n- The \"selected\" property on individual options\n\n**Note:** If the \"value\" property is set but does not match any option,\nno option will be selected and the Select component will be displayed as empty.\n\n**Note:** when both \"value\" and \"selected\" are both used (although discouraged),\nthe \"value\" property will take precedence.\n\n### Keyboard Handling\n\nThe `ui5-select` provides advanced keyboard handling.\n\n- [F4] / [Alt] + [Up] / [Alt] + [Down] / [Space] or [Enter] - Opens/closes the drop-down.\n- [Up] or [Down] - If the drop-down is closed - changes selection to the next or the previous option. If the drop-down is opened - moves focus to the next or the previous option.\n- [Space], [Enter] - If the drop-down is opened - selects the focused option.\n- [Escape] - Closes the drop-down without changing the selection.\n- [Home] - Navigates to first option\n- [End] - Navigates to the last option\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Select\";`\n\n`import \"@ui5/webcomponents/dist/Option\";`\n`import \"@ui5/webcomponents/dist/OptionCustom\";`", - "name": "Select", - "cssParts": [ + "description": "### Overview\n\nThe `ui5-table-selection-single` component is used inside the `ui5-table` to add single selection capabilities to the `ui5-table`.\nSince selection is key-based, each `ui5-table-row` must define a unique `row-key` property.\n\n### Usage\n\nThe `ui5-table-selection-single` component is a feature designed exclusively for use within the `ui5-table` component.\nIt must be placed inside the `features` slot of `ui5-table`.\nThis component is not intended for standalone use.\n\n```html\n<ui5-table>\n\t<ui5-table-selection-single slot=\"features\" selected=\"Row1\"></ui5-table-selection-single>\n</ui5-table>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableSelectionSingle.js\";`", + "name": "TableSelectionSingle", + "members": [ { - "description": "Used to style the popover element", - "name": "popover" - } - ], - "slots": [ + "kind": "field", + "name": "selected", + "type": { + "text": "string | undefined" + }, + "description": "Defines the `row-key` value of the selected row.", + "default": "undefined", + "privacy": "public", + "inheritedFrom": { + "name": "TableSelectionBase", + "module": "dist/TableSelectionBase.js" + } + }, { - "name": "default", - "description": "Defines the component options.\n\n**Note:** Only one selected option is allowed.\nIf more than one option is defined as selected, the last one would be considered as the selected one.\n\n**Note:** Use the `ui5-option` component to define the desired options.", - "_ui5propertyName": "options", - "_ui5type": { - "text": "Array<IOption>", + "kind": "method", + "name": "getSelectedRow", + "return": { + "type": { + "text": "TableRow | undefined", + "references": [ + { + "name": "TableRow", + "package": "@ui5/webcomponents", + "module": "dist/TableRow.js" + } + ] + } + }, + "description": "Returns the selected row.", + "privacy": "public" + }, + { + "kind": "field", + "name": "behavior", + "type": { + "text": "TableSelectionBehavior", "references": [ { - "name": "IOption", + "name": "TableSelectionBehavior", "package": "@ui5/webcomponents", - "module": "dist/Select.js" + "module": "dist/types/TableSelectionBehavior.js" } ] }, - "_ui5privacy": "public" + "default": "\"RowSelector\"", + "description": "Defines the selection behavior.", + "privacy": "public", + "_ui5since": "2.11", + "inheritedFrom": { + "name": "TableSelectionBase", + "module": "dist/TableSelectionBase.js" + } }, { - "name": "valueStateMessage", - "description": "Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.", - "_ui5type": { - "text": "Array<HTMLElement>" + "kind": "method", + "name": "getRowByKey", + "return": { + "type": { + "text": "TableRow | undefined", + "references": [ + { + "name": "TableRow", + "package": "@ui5/webcomponents", + "module": "dist/TableRow.js" + } + ] + } }, - "_ui5privacy": "public" + "parameters": [ + { + "name": "rowKey", + "type": { + "text": "string" + }, + "description": "The row key", + "_ui5privacy": "public" + } + ], + "description": "Returns the table row instance for the given row key.", + "privacy": "public", + "inheritedFrom": { + "name": "TableSelectionBase", + "module": "dist/TableSelectionBase.js" + } + } + ], + "attributes": [ + { + "description": "Defines the `row-key` value of the selected row.", + "name": "selected", + "default": "undefined", + "fieldName": "selected", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "TableSelectionBase", + "module": "dist/TableSelectionBase.js" + } }, { - "name": "label", - "description": "Defines the HTML element that will be displayed in the component input part,\nrepresenting the selected option.\n\n**Note:** If not specified and `ui5-option-custom` is used,\neither the option's `display-text` or its textContent will be displayed.\n\n**Note:** If not specified and `ui5-option` is used,\nthe option's textContent will be displayed.", - "_ui5since": "1.17.0", - "_ui5type": { - "text": "Array<HTMLElement>" + "description": "Defines the selection behavior.", + "name": "behavior", + "default": "\"RowSelector\"", + "fieldName": "behavior", + "type": { + "text": "\"RowSelector\" | \"RowOnly\"" }, - "_ui5privacy": "public" + "inheritedFrom": { + "name": "TableSelectionBase", + "module": "dist/TableSelectionBase.js" + } } ], + "superclass": { + "name": "TableSelectionBase", + "package": "@ui5/webcomponents", + "module": "dist/TableSelectionBase.js" + }, + "tagName": "ui5-table-selection-single", + "customElement": true, + "_ui5since": "2.8.0", + "_ui5privacy": "public", + "events": [ + { + "name": "change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the selection is changed by user interaction.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "inheritedFrom": { + "name": "TableSelectionBase", + "module": "dist/TableSelectionBase.js" + } + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableSelectionSingle", + "module": "dist/TableSelectionSingle.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-table-selection-single", + "declaration": { + "name": "TableSelectionSingle", + "module": "dist/TableSelectionSingle.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TableUtils.js", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "dist/TableVirtualizer.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-table-virtualizer` component is used inside the `ui5-table` to virtualize the table rows, if the `overflowMode` property of the table is set to 'Scroll'.\nIt is responsible for rendering only the rows that are visible in the viewport and updating them on scroll.\nThis allows large numbers of rows to exist, but maintain high performance by only paying the cost for those that are currently visible.\n\n**Note:** The maximum number of virtualized rows is limited by browser constraints, specifically the maximum supported height for a DOM element.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TableVirtualizer.js\";`", + "name": "TableVirtualizer", "members": [ { "kind": "field", - "name": "disabled", + "name": "rowHeight", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is noninteractive.", + "default": "45", + "description": "Defines the height of the rows in the table.\n\n**Note:** For virtualization to work properly, this property is mandatory.", "privacy": "public" }, { "kind": "field", - "name": "name", + "name": "rowCount", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "default": "undefined", + "default": "100", + "description": "Defines the total count of rows in the table.\n\n**Note:** For virtualization to work properly, this property is mandatory.", "privacy": "public" }, { "kind": "field", - "name": "valueState", + "name": "extraRows", "type": { - "text": "ValueState", + "text": "number" + }, + "default": "0", + "description": "Defines the count of extra rows to be rendered at the top and bottom of the table.\n\n**Note:** This property is experimental and may be changed or deleted in the future.", + "privacy": "public" + }, + { + "kind": "method", + "name": "reset", + "return": { + "type": { + "text": "void" + } + }, + "description": "Resets the virtualizer to its initial state and triggers the `range-change` event.", + "privacy": "public" + } + ], + "events": [ + { + "name": "range-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<RangeChangeEventDetail>", "references": [ { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" + "name": "RangeChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/TableVirtualizer.js" } ] }, - "default": "\"None\"", - "description": "Defines the value state of the component.", - "privacy": "public" - }, + "description": "Fired when the virtualizer is changed by user interaction e.g. on scrolling.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5parameters": [ + { + "type": { + "text": "number" + }, + "name": "first", + "_ui5privacy": "public", + "description": "The 0-based index of the first children currently rendered" + }, + { + "type": { + "text": "number" + }, + "name": "last", + "_ui5privacy": "public", + "description": "The 0-based index of the last children currently rendered" + } + ] + } + ], + "attributes": [ { - "kind": "field", - "name": "required", + "description": "Defines the height of the rows in the table.\n\n**Note:** For virtualization to work properly, this property is mandatory.", + "name": "row-height", + "default": "45", + "fieldName": "rowHeight", "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is required.", - "privacy": "public", - "_ui5since": "1.0.0-rc.9" + "text": "number" + } }, { - "kind": "field", - "name": "readonly", + "description": "Defines the total count of rows in the table.\n\n**Note:** For virtualization to work properly, this property is mandatory.", + "name": "row-count", + "default": "100", + "fieldName": "rowCount", "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", - "privacy": "public", - "_ui5since": "1.21.0" + "text": "number" + } }, { - "kind": "field", - "name": "accessibleName", + "description": "Defines the count of extra rows to be rendered at the top and bottom of the table.\n\n**Note:** This property is experimental and may be changed or deleted in the future.", + "name": "extra-rows", + "default": "0", + "fieldName": "extraRows", "type": { - "text": "string | undefined" + "text": "number" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-table-virtualizer", + "customElement": true, + "_ui5experimental": "This component is not intended to be used in a productive enviroment. The API is under development and may be changed in the future.", + "_ui5since": "2.5.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableVirtualizer", + "module": "dist/TableVirtualizer.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-table-virtualizer", + "declaration": { + "name": "TableVirtualizer", + "module": "dist/TableVirtualizer.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/Tag.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-tag` is a component which serves\nthe purpose to attract the user attention to some piece\nof information (state, quantity, condition, etc.).\nIt can contain icon and text information, and its design can be chosen from specific design types.\n\n### Usage Guidelines\n\n- If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the `wrappingType` property.\n- Colors can be semantic or not semantic.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Tag.js\";`", + "name": "Tag", + "cssParts": [ + { + "description": "Used to style the root element.", + "name": "root" + } + ], + "slots": [ + { + "name": "default", + "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", + "_ui5propertyName": "text", + "_ui5type": { + "text": "Array<Node>" }, - "description": "Defines the accessible ARIA name of the component.", - "privacy": "public", - "default": "undefined", - "_ui5since": "1.0.0-rc.9" + "_ui5privacy": "public" }, + { + "name": "icon", + "description": "Defines the icon to be displayed in the component.", + "_ui5type": { + "text": "Array<IIcon>", + "references": [ + { + "name": "IIcon", + "package": "@ui5/webcomponents", + "module": "dist/Icon.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "name": "accessibleNameRef", + "name": "design", "type": { - "text": "string | undefined" + "text": "TagDesign", + "references": [ + { + "name": "TagDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/TagDesign.js" + } + ] }, - "description": "Receives id(or many ids) of the elements that label the select.", - "default": "undefined", + "default": "\"Neutral\"", + "description": "Defines the design type of the component.", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "1.22.0" }, { "kind": "field", - "name": "accessibleDescription", + "name": "colorScheme", "type": { - "text": "string | undefined" + "text": "string" }, - "description": "Defines the accessible description of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "2.14.0" + "default": "\"1\"", + "description": "Defines the color scheme of the component.\nThere are 10 predefined schemes.\nTo use one you can set a number from `\"1\"` to `\"10\"`. The `colorScheme` `\"1\"` will be set by default.", + "privacy": "public" }, { "kind": "field", - "name": "accessibleDescriptionRef", + "name": "hideStateIcon", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Receives id(or many ids) of the elements that describe the select.", - "default": "undefined", + "default": "false", + "description": "Defines if the default state icon is shown.", "privacy": "public", - "_ui5since": "2.14.0" + "_ui5since": "1.22.0" }, { "kind": "field", - "name": "tooltip", + "name": "interactive", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the tooltip of the select.", - "default": "undefined", + "default": "false", + "description": "Defines if the component is interactive (focusable and pressable).", "privacy": "public", - "_ui5since": "2.8.0" + "_ui5since": "1.22.0" }, { "kind": "field", - "name": "value", - "description": "Defines the value of the component:\n\n- when get - returns the value of the component or the value/text content of the selected option.\n- when set - selects the option with matching `value` property or text content.\n\n**Note:** Use either the Select's value or the Options' selected property.\nMixed usage could result in unexpected behavior.\n\n**Note:** If the given value does not match any existing option,\nno option will be selected and the Select component will be displayed as empty.", - "privacy": "public", - "default": "\"\"", + "name": "wrappingType", "type": { - "text": "string" + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] }, - "_ui5since": "1.20.0", - "_ui5formProperty": true, - "_ui5formEvents": "change,liveChange" + "default": "\"Normal\"", + "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** For option \"Normal\" the text will wrap and the\nwords will not be broken based on hyphenation.", + "privacy": "public", + "_ui5since": "1.22.0" }, { "kind": "field", - "name": "selectedOption", + "name": "size", "type": { - "text": "IOption | undefined", + "text": "TagSize", "references": [ { - "name": "IOption", + "name": "TagSize", "package": "@ui5/webcomponents", - "module": "dist/Select.js" + "module": "dist/types/TagSize.js" } ] }, - "description": "Currently selected `ui5-option` element.", + "default": "\"S\"", + "description": "Defines predefined size of the component.", "privacy": "public", - "default": "undefined", - "readonly": true + "_ui5since": "2.0.0" } ], "events": [ { - "name": "change", + "name": "click", "_ui5privacy": "public", "type": { - "text": "CustomEvent<SelectChangeEventDetail>", - "references": [ - { - "name": "SelectChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Select.js" - } - ] + "text": "CustomEvent" }, - "description": "Fired when the selected option changes.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, + "description": "Fired when the user clicks on an interactive tag.\n\n**Note:** The event will be fired if the `interactive` property is `true`", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "IOption", - "references": [ - { - "name": "IOption", - "package": "@ui5/webcomponents", - "module": "dist/Select.js" - } - ] - }, - "name": "selectedOption", - "_ui5privacy": "public", - "description": "the selected option." - } - ] - }, - { - "name": "live-change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<SelectLiveChangeEventDetail>", - "references": [ - { - "name": "SelectLiveChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Select.js" - } - ] - }, - "description": "Fired when the user navigates through the options, but the selection is not finalized,\nor when pressing the ESC key to revert the current selection.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "1.17.0", - "_ui5parameters": [ - { - "type": { - "text": "IOption", - "references": [ - { - "name": "IOption", - "package": "@ui5/webcomponents", - "module": "dist/Select.js" - } - ] - }, - "name": "selectedOption", - "_ui5privacy": "public", - "description": "the selected option." - } - ] - }, - { - "name": "open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the component's dropdown menu opens.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false - }, - { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the component's dropdown menu closes.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false + "_ui5since": "1.22.0" } ], "attributes": [ { - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is noninteractive.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } - }, - { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", - "default": "undefined", - "fieldName": "name", + "description": "Defines the design type of the component.", + "name": "design", + "default": "\"Neutral\"", + "fieldName": "design", "type": { - "text": "string | undefined" + "text": "\"Positive\" | \"Negative\" | \"Critical\" | \"Information\" | \"Neutral\" | \"Set1\" | \"Set2\"" } }, { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", + "description": "Defines the color scheme of the component.\nThere are 10 predefined schemes.\nTo use one you can set a number from `\"1\"` to `\"10\"`. The `colorScheme` `\"1\"` will be set by default.", + "name": "color-scheme", + "default": "\"1\"", + "fieldName": "colorScheme", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "string" } }, { - "description": "Defines whether the component is required.", - "name": "required", + "description": "Defines if the default state icon is shown.", + "name": "hide-state-icon", "default": "false", - "fieldName": "required", + "fieldName": "hideStateIcon", "type": { "text": "boolean" } }, { - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", - "name": "readonly", + "description": "Defines if the component is interactive (focusable and pressable).", + "name": "interactive", "default": "false", - "fieldName": "readonly", + "fieldName": "interactive", "type": { "text": "boolean" } }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", + "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** For option \"Normal\" the text will wrap and the\nwords will not be broken based on hyphenation.", + "name": "wrapping-type", + "default": "\"Normal\"", + "fieldName": "wrappingType", "type": { - "text": "string | undefined" + "text": "\"None\" | \"Normal\"" } }, { - "description": "Receives id(or many ids) of the elements that label the select.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "description": "Defines predefined size of the component.", + "name": "size", + "default": "\"S\"", + "fieldName": "size", "type": { - "text": "string | undefined" + "text": "\"S\" | \"L\"" } - }, + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-tag", + "customElement": true, + "_ui5since": "2.0.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Tag", + "module": "dist/Tag.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-tag", + "declaration": { + "name": "Tag", + "module": "dist/Tag.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/Text.js", + "declarations": [ + { + "kind": "class", + "description": "<h3>Overview</h3>\n\nThe `ui5-text` component displays text that can be used in any content area of an application.\n\n<h3>Usage</h3>\n\n- Use the `ui5-text` if you want to display text inside a form, table, or any other content area.\n- Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).\n\n<h3>Responsive behavior</h3>\n\nThe `ui5-text` component is fully adaptive to all screen sizes.\nBy default, the text will wrap when the space is not enough.\nIn addition, the component supports truncation via the <code>max-lines</code> property,\nby defining the number of lines the text should wrap before start truncating.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Text\";</code>", + "name": "Text", + "slots": [ { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", - "type": { - "text": "string | undefined" - } - }, + "name": "default", + "description": "Defines the text of the component.", + "_ui5propertyName": "text", + "_ui5type": { + "text": "Array<Node>" + }, + "_ui5privacy": "public" + } + ], + "members": [ { - "description": "Receives id(or many ids) of the elements that describe the select.", - "name": "accessible-description-ref", - "default": "undefined", - "fieldName": "accessibleDescriptionRef", + "kind": "field", + "name": "maxLines", "type": { - "text": "string | undefined" - } + "text": "number" + }, + "default": "Infinity", + "description": "Defines the number of lines the text should wrap before it truncates.", + "privacy": "public" }, { - "description": "Defines the tooltip of the select.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", + "kind": "field", + "name": "emptyIndicatorMode", "type": { - "text": "string | undefined" - } - }, + "text": "TextEmptyIndicatorMode", + "references": [ + { + "name": "TextEmptyIndicatorMode", + "package": "@ui5/webcomponents", + "module": "dist/types/TextEmptyIndicatorMode.js" + } + ] + }, + "default": "\"Off\"", + "description": "Specifies if an empty indicator should be displayed when there is no text.", + "privacy": "public", + "_ui5since": "2.2.0" + } + ], + "attributes": [ { - "description": "Defines the value of the component:\n\n- when get - returns the value of the component or the value/text content of the selected option.\n- when set - selects the option with matching `value` property or text content.\n\n**Note:** Use either the Select's value or the Options' selected property.\nMixed usage could result in unexpected behavior.\n\n**Note:** If the given value does not match any existing option,\nno option will be selected and the Select component will be displayed as empty.", - "name": "value", - "default": "\"\"", - "fieldName": "value", + "description": "Defines the number of lines the text should wrap before it truncates.", + "name": "max-lines", + "default": "Infinity", + "fieldName": "maxLines", "type": { - "text": "any" + "text": "number" } }, { - "description": "Currently selected `ui5-option` element.", - "name": "selected-option", - "default": "undefined", - "fieldName": "selectedOption", + "description": "Specifies if an empty indicator should be displayed when there is no text.", + "name": "empty-indicator-mode", + "default": "\"Off\"", + "fieldName": "emptyIndicatorMode", "type": { - "text": "any" + "text": "\"On\" | \"Off\"" } } ], @@ -24719,9 +26232,9 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-select", + "tagName": "ui5-text", "customElement": true, - "_ui5since": "0.8.0", + "_ui5since": "2.0.0", "_ui5privacy": "public" } ], @@ -24730,40 +26243,43 @@ "kind": "js", "name": "default", "declaration": { - "name": "Select", - "module": "dist/Select.js" + "name": "Text", + "module": "dist/Text.js" } }, { "kind": "custom-element-definition", - "name": "ui5-select", + "name": "ui5-text", "declaration": { - "name": "Select", - "module": "dist/Select.js" + "name": "Text", + "module": "dist/Text.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Slider.js", + "path": "dist/TextArea.js", "declarations": [ { "kind": "class", - "description": "### Overview\nThe Slider component represents a numerical range and a handle (grip).\nThe purpose of the component is to enable visual selection of a value in\na continuous numerical range by moving an adjustable handle.\n\n### Structure\nThe most important properties of the Slider are:\n\n- min - The minimum value of the slider range.\n- max - The maximum value of the slider range.\n- value - The current value of the slider range.\n- step - Determines the increments in which the slider will move.\n- showTooltip - Determines if a tooltip should be displayed above the handle.\n- showTickmarks - Displays a visual divider between the step values.\n- labelInterval - Labels some or all of the tickmarks with their values.\n\n### Usage\nThe most common use case is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).\n\n### Responsive Behavior\nThe `ui5-slider` component adjusts to the size of its parent container by recalculating and\nresizing the width of the control. You can move the slider handle in several different ways:\n\n- Drag and drop the handle to the desired value.\n- Click/tap on the range bar to move the handle to that location.\n\n### Keyboard Handling\n\n- `Left or Down Arrow` - Moves the handle one step to the left, effectively decreasing the component's value by `step` amount;\n- `Right or Up Arrow` - Moves the handle one step to the right, effectively increasing the component's value by `step` amount;\n- `Left or Down Arrow + Ctrl/Cmd` - Moves the handle to the left with step equal to 1/10th of the entire range, effectively decreasing the component's value by 1/10th of the range;\n- `Right or Up Arrow + Ctrl/Cmd` - Moves the handle to the right with step equal to 1/10th of the entire range, effectively increasing the component's value by 1/10th of the range;\n- `Plus` - Same as `Right or Up Arrow`;\n- `Minus` - Same as `Left or Down Arrow`;\n- `Home` - Moves the handle to the beginning of the range;\n- `End` - Moves the handle to the end of the range;\n- `Page Up` - Same as `Right or Up + Ctrl/Cmd`;\n- `Page Down` - Same as `Left or Down + Ctrl/Cmd`;\n- `Escape` - Resets the value property after interaction, to the position prior the component's focusing;\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Slider.js\";`", - "name": "Slider", + "description": "### Overview\n\nThe `ui5-textarea` component is used to enter multiple rows of text.\n\nWhen empty, it can hold a placeholder similar to a `ui5-input`.\nYou can define the rows of the `ui5-textarea` and also determine specific behavior when handling long texts.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TextArea.js\";`", + "name": "TextArea", "cssParts": [ { - "description": "Used to style the progress container, the horizontal bar that visually represents the range between the minimum and maximum values, of the `ui5-slider`.", - "name": "progress-container" - }, - { - "description": "Used to style the progress bar, which shows the progress of the `ui5-slider`.", - "name": "progress-bar" - }, + "description": "Used to style the native textarea", + "name": "textarea" + } + ], + "slots": [ { - "description": "Used to style the handle of the `ui5-slider`.", - "name": "handle" + "name": "valueStateMessage", + "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n \n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed if the component has\n`valueState` of type `Information`, `Critical` or `Negative`.", + "_ui5since": "1.0.0-rc.7", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public" } ], "members": [ @@ -24771,144 +26287,132 @@ "kind": "field", "name": "value", "type": { - "text": "number" + "text": "string" }, - "default": "0", + "default": "\"\"", + "description": "Defines the value of the component.", "privacy": "public", - "description": "Current value of the slider", "_ui5formProperty": true, - "_ui5formEvents": "change,input", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "_ui5formEvents": "change,input" }, { "kind": "field", - "name": "min", + "name": "disabled", "type": { - "text": "number" + "text": "boolean" }, - "default": "0", - "description": "Defines the minimum value of the slider.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "default": "false", + "description": "Indicates whether the user can interact with the component or not.\n\n**Note:** A disabled component is completely noninteractive.", + "privacy": "public" }, { "kind": "field", - "name": "max", + "name": "readonly", "type": { - "text": "number" + "text": "boolean" }, - "default": "100", - "description": "Defines the maximum value of the slider.", + "default": "false", + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "privacy": "public" + }, + { + "kind": "field", + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is required.", "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "_ui5since": "1.0.0-rc.3" }, { "kind": "field", - "name": "name", + "name": "placeholder", "type": { "text": "string | undefined" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "description": "Defines a short hint intended to aid the user with data entry when the component has no value.", "default": "undefined", - "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "privacy": "public" }, { "kind": "field", - "name": "step", + "name": "valueState", "type": { - "text": "number" + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] }, - "default": "1", - "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", + "default": "\"None\"", + "description": "Defines the value state of the component.\n\n**Note:** If `maxlength` property is set,\nthe component turns into \"Critical\" state once the characters exceeds the limit.\nIn this case, only the \"Negative\" state is considered and can be applied.", "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "_ui5since": "1.0.0-rc.7" }, { "kind": "field", - "name": "labelInterval", + "name": "rows", "type": { "text": "number" }, "default": "0", - "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "description": "Defines the number of visible text rows for the component.\n\n**Notes:**\n\n- If the `growing` property is enabled, this property defines the minimum rows to be displayed\nin the textarea.\n- The CSS `height` property wins over the `rows` property, if both are set.", + "privacy": "public" }, { "kind": "field", - "name": "showTickmarks", + "name": "maxlength", "type": { - "text": "boolean" + "text": "number | undefined" }, - "default": "false", - "description": "Enables tickmarks visualization for each step.\n\n**Note:** The step must be a positive number.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "description": "Defines the maximum number of characters that the `value` can have.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "showTooltip", + "name": "showExceededText", "type": { "text": "boolean" }, "default": "false", - "description": "Enables handle tooltip displaying the current value.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.", + "privacy": "public" }, { "kind": "field", - "name": "editableTooltip", + "name": "growing", "type": { "text": "boolean" }, "default": "false", - "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "description": "Enables the component to automatically grow and shrink dynamically with its content.", + "privacy": "public" }, { "kind": "field", - "name": "disabled", + "name": "growingMaxRows", "type": { - "text": "boolean" + "text": "number" }, - "default": "false", - "description": "Defines whether the slider is in disabled state.", - "privacy": "public", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "default": "0", + "description": "Defines the maximum number of rows that the component can grow.", + "privacy": "public" + }, + { + "kind": "field", + "name": "name", + "type": { + "text": "string | undefined" + }, + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", @@ -24919,138 +26423,215 @@ "description": "Defines the accessible ARIA name of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "1.4.0", - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - } - ], - "attributes": [ - { - "description": "Current value of the slider", - "name": "value", - "default": "undefined", - "fieldName": "value", - "type": { - "text": "number" - } + "_ui5since": "1.0.0-rc.15" }, { - "description": "Defines the minimum value of the slider.", - "name": "min", - "default": "0", - "fieldName": "min", + "kind": "field", + "name": "accessibleNameRef", "type": { - "text": "number" + "text": "string | undefined" }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "description": "Receives id(or many ids) of the elements that label the textarea.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { - "description": "Defines the maximum value of the slider.", - "name": "max", - "default": "100", - "fieldName": "max", + "kind": "field", + "name": "accessibleDescription", "type": { - "text": "number" + "text": "string | undefined" }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.16.0" }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", - "default": "undefined", - "fieldName": "name", + "kind": "field", + "name": "accessibleDescriptionRef", "type": { "text": "string | undefined" }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } - }, + "description": "Receives id(or many ids) of the elements that describe the textarea.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.16.0" + } + ], + "events": [ { - "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", - "name": "step", - "default": "1", - "fieldName": "step", + "name": "change", + "_ui5privacy": "public", "type": { - "text": "number" + "text": "CustomEvent" }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" - } + "description": "Fired when the text has changed and the focus leaves the component.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true }, { - "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", - "name": "label-interval", - "default": "0", - "fieldName": "labelInterval", + "name": "input", + "_ui5privacy": "public", "type": { - "text": "number" + "text": "CustomEvent<TextAreaInputEventDetail>", + "references": [ + { + "name": "TextAreaInputEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/TextArea.js" + } + ] }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" + "description": "Fired when the value of the component changes at each keystroke or when\nsomething is pasted.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "1.0.0-rc.5", + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "escapePressed", + "_ui5privacy": "public", + "description": "Indicates whether the Escape key was pressed, which triggers a revert to the previous value" + } + ] + }, + { + "name": "select", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when some text has been selected.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.23.0" + }, + { + "name": "scroll", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when textarea is scrolled.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.23.0" + } + ], + "attributes": [ + { + "description": "Defines the value of the component.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" } }, { - "description": "Enables tickmarks visualization for each step.\n\n**Note:** The step must be a positive number.", - "name": "show-tickmarks", + "description": "Indicates whether the user can interact with the component or not.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", "default": "false", - "fieldName": "showTickmarks", + "fieldName": "disabled", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" } }, { - "description": "Enables handle tooltip displaying the current value.", - "name": "show-tooltip", + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "name": "readonly", "default": "false", - "fieldName": "showTooltip", + "fieldName": "readonly", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" } }, { - "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", - "name": "editable-tooltip", + "description": "Defines whether the component is required.", + "name": "required", "default": "false", - "fieldName": "editableTooltip", + "fieldName": "required", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" } }, { - "description": "Defines whether the slider is in disabled state.", - "name": "disabled", + "description": "Defines a short hint intended to aid the user with data entry when the component has no value.", + "name": "placeholder", + "default": "undefined", + "fieldName": "placeholder", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the value state of the component.\n\n**Note:** If `maxlength` property is set,\nthe component turns into \"Critical\" state once the characters exceeds the limit.\nIn this case, only the \"Negative\" state is considered and can be applied.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", + "type": { + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + } + }, + { + "description": "Defines the number of visible text rows for the component.\n\n**Notes:**\n\n- If the `growing` property is enabled, this property defines the minimum rows to be displayed\nin the textarea.\n- The CSS `height` property wins over the `rows` property, if both are set.", + "name": "rows", + "default": "0", + "fieldName": "rows", + "type": { + "text": "number" + } + }, + { + "description": "Defines the maximum number of characters that the `value` can have.", + "name": "maxlength", + "default": "undefined", + "fieldName": "maxlength", + "type": { + "text": "number | undefined" + } + }, + { + "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.", + "name": "show-exceeded-text", "default": "false", - "fieldName": "disabled", + "fieldName": "showExceededText", "type": { "text": "boolean" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" + } + }, + { + "description": "Enables the component to automatically grow and shrink dynamically with its content.", + "name": "growing", + "default": "false", + "fieldName": "growing", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the maximum number of rows that the component can grow.", + "name": "growing-max-rows", + "default": "0", + "fieldName": "growingMaxRows", + "type": { + "text": "number" + } + }, + { + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" } }, { @@ -25060,54 +26641,44 @@ "fieldName": "accessibleName", "type": { "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" } - } - ], - "superclass": { - "name": "SliderBase", - "package": "@ui5/webcomponents", - "module": "dist/SliderBase.js" - }, - "tagName": "ui5-slider", - "customElement": true, - "_ui5since": "1.0.0-rc.11", - "_ui5privacy": "public", - "events": [ + }, { - "name": "change", - "_ui5privacy": "public", + "description": "Receives id(or many ids) of the elements that label the textarea.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", "type": { - "text": "CustomEvent" - }, - "description": "Fired when the value changes and the user has finished interacting with the slider.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" + "text": "string | undefined" } }, { - "name": "input", - "_ui5privacy": "public", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", "type": { - "text": "CustomEvent" - }, - "description": "Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "SliderBase", - "module": "dist/SliderBase.js" + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that describe the textarea.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" } } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-textarea", + "customElement": true, + "_ui5privacy": "public" } ], "exports": [ @@ -25115,48 +26686,67 @@ "kind": "js", "name": "default", "declaration": { - "name": "Slider", - "module": "dist/Slider.js" + "name": "TextArea", + "module": "dist/TextArea.js" + } + }, + { + "kind": "js", + "name": "BaseTextArea", + "declaration": { + "name": "TextArea", + "module": "dist/TextArea.js" } }, { "kind": "custom-element-definition", - "name": "ui5-slider", + "name": "ui5-textarea", "declaration": { - "name": "Slider", - "module": "dist/Slider.js" + "name": "TextArea", + "module": "dist/TextArea.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-textarea", + "declaration": { + "name": "TextArea", + "module": "dist/TextArea.js" } } ] }, { "kind": "javascript-module", - "path": "dist/SliderBase.js", + "path": "dist/TimePicker.js", "declarations": [ { "kind": "class", - "description": "### Overview", - "name": "SliderBase", - "members": [ + "description": "### Overview\nThe `ui5-time-picker` component provides an input field with assigned clocks which are opened on user action.\nThe `ui5-time-picker` allows users to select a localized time using touch, mouse, or keyboard input.\nIt consists of two parts: the time input field and the clocks.\n\n### Usage\nThe user can enter a time by:\n\n- Using the clocks that are displayed in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and chooses the enter key, the clocks show the corresponding time (hours, minutes and seconds separately).\nWhen the user directly triggers the clocks display, the actual time is displayed.\nFor the `ui5-time-picker`\n\n### Formatting\n\nIf a time is entered by typing it into\nthe input field, it must fit to the used time format.\n\nSupported format options are pattern-based on Unicode LDML Date Format notation.\nFor more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\nFor example, if the `format-pattern` is \"HH:mm:ss\",\na valid value string is \"11:42:35\" and the same is displayed in the input.\n\n### Keyboard handling\n[F4], [Alt]+[Up], [Alt]+[Down] Open/Close picker dialog and move focus to it.\n\nWhen closed:\n\n- [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.\n- [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.\n- [Shift]+[Page Up] - Increments minutes by 1.\n- [Shift]+[Page Down] - Decrements minutes by 1.\n- [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.\n- [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.\n-\n\nWhen opened:\n\n- [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.\n- [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.\n- [Shift]+[Page Up] - Increments minutes by 1.\n- [Shift]+[Page Down] - Decrements minutes by 1.\n- [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.\n- [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.\n- [A] or [P] - Selects AM or PM respectively.\n- [0]-[9] - Allows direct time selecting (hours/minutes/seconds).\n- [:] - Allows switching between hours/minutes/seconds clocks. If the last clock is displayed and [:] is pressed, the first clock is beind displayed.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TimePicker.js\";`", + "name": "TimePicker", + "slots": [ { - "kind": "field", - "name": "min", - "type": { - "text": "number" + "name": "valueStateMessage", + "description": "Defines the value state message that will be displayed as pop up under the `ui5-time-picker`.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the `ui5-time-picker` is in `Information`, `Critical` or `Negative` value state.", + "_ui5since": "1.0.0-rc.8", + "_ui5type": { + "text": "Array<HTMLElement>" }, - "default": "0", - "description": "Defines the minimum value of the slider.", - "privacy": "public" - }, + "_ui5privacy": "public" + } + ], + "members": [ { "kind": "field", - "name": "max", + "name": "value", "type": { - "text": "number" + "text": "string" }, - "default": "100", - "description": "Defines the maximum value of the slider.", - "privacy": "public" + "default": "\"\"", + "description": "Defines a formatted time value.", + "privacy": "public", + "_ui5formProperty": true, + "_ui5formEvents": "change,input" }, { "kind": "field", @@ -25171,63 +26761,82 @@ }, { "kind": "field", - "name": "step", + "name": "valueState", "type": { - "text": "number" + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] }, - "default": "1", - "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", + "default": "\"None\"", + "description": "Defines the value state of the component.", "privacy": "public" }, { "kind": "field", - "name": "labelInterval", + "name": "disabled", "type": { - "text": "number" + "text": "boolean" }, - "default": "0", - "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", + "default": "false", + "description": "Defines the disabled state of the comonent.", "privacy": "public" }, { "kind": "field", - "name": "showTickmarks", + "name": "readonly", "type": { "text": "boolean" }, "default": "false", - "description": "Enables tickmarks visualization for each step.\n\n**Note:** The step must be a positive number.", + "description": "Defines the readonly state of the comonent.", "privacy": "public" }, { "kind": "field", - "name": "showTooltip", + "name": "placeholder", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Enables handle tooltip displaying the current value.", + "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "editableTooltip", + "name": "formatPattern", + "type": { + "text": "string | undefined" + }, + "description": "Determines the format, displayed in the input field.\n\nExample:\nHH:mm:ss -> 11:42:35\nhh:mm:ss a -> 2:23:15 PM\nmm:ss -> 12:04 (only minutes and seconds)", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "open", "type": { "text": "boolean" }, "default": "false", - "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", - "privacy": "public" + "description": "Defines the open or closed state of the popover.", + "privacy": "public", + "_ui5since": "2.0.0" }, { "kind": "field", - "name": "disabled", + "name": "required", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the slider is in disabled state.", - "privacy": "public" + "description": "Defines whether the component is required.", + "privacy": "public", + "_ui5since": "2.1.0" }, { "kind": "field", @@ -25235,126 +26844,323 @@ "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines the aria-label attribute for the component.", "default": "undefined", "privacy": "public", - "_ui5since": "1.4.0" - } - ], - "events": [ - { - "name": "change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the value changes and the user has finished interacting with the slider.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "_ui5since": "2.1.0" }, { - "name": "input", - "_ui5privacy": "public", + "kind": "field", + "name": "accessibleNameRef", "type": { - "text": "CustomEvent" + "text": "string | undefined" }, - "description": "Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true - } - ], - "attributes": [ - { - "description": "Defines the minimum value of the slider.", - "name": "min", - "default": "0", - "fieldName": "min", - "type": { - "text": "number" - } - }, - { - "description": "Defines the maximum value of the slider.", - "name": "max", - "default": "100", - "fieldName": "max", - "type": { - "text": "number" - } + "description": "Receives id (or many ids) of the elements that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.1.0" }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", - "default": "undefined", - "fieldName": "name", + "kind": "field", + "name": "accessibleDescription", "type": { "text": "string | undefined" - } + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0" }, { - "description": "Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10).\n\n**Note:** If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.", - "name": "step", - "default": "1", - "fieldName": "step", + "kind": "field", + "name": "accessibleDescriptionRef", "type": { - "text": "number" - } + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that describe the input.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.14.0" }, { - "description": "Displays a label with a value on every N-th step.\n\n**Note:** The step and tickmarks properties must be enabled.\nExample - if the step value is set to 2 and the label interval is also specified to 2 - then every second\ntickmark will be labelled, which means every 4th value number.", - "name": "label-interval", - "default": "0", - "fieldName": "labelInterval", + "kind": "field", + "name": "dateValue", "type": { - "text": "number" - } + "text": "Date | null" + }, + "description": "Currently selected time represented as JavaScript Date instance", + "privacy": "public", + "default": "null", + "readonly": true }, { - "description": "Enables tickmarks visualization for each step.\n\n**Note:** The step must be a positive number.", - "name": "show-tickmarks", - "default": "false", - "fieldName": "showTickmarks", - "type": { - "text": "boolean" - } + "kind": "method", + "name": "formatValue", + "return": { + "type": { + "text": "string" + }, + "description": "formatted value" + }, + "parameters": [ + { + "name": "date", + "type": { + "text": "Date" + }, + "description": "A Java Script date object to be formatted as string", + "_ui5privacy": "public" + } + ], + "description": "Formats a Java Script date object into a string representing a locale date and time\naccording to the `formatPattern` property of the TimePicker instance", + "privacy": "public" }, { - "description": "Enables handle tooltip displaying the current value.", - "name": "show-tooltip", - "default": "false", - "fieldName": "showTooltip", - "type": { - "text": "boolean" - } - }, + "kind": "method", + "name": "isValid", + "return": { + "type": { + "text": "boolean" + } + }, + "parameters": [ + { + "name": "value", + "type": { + "text": "string | undefined" + }, + "description": "The value to be tested against the current date format", + "_ui5privacy": "public" + } + ], + "description": "Checks if a value is valid against the current `formatPattern` value.\n\n**Note:** an empty string is considered as valid value.", + "privacy": "public" + } + ], + "events": [ { - "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.", - "name": "editable-tooltip", - "default": "false", - "fieldName": "editableTooltip", + "name": "change", + "_ui5privacy": "public", "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the slider is in disabled state.", - "name": "disabled", - "default": "false", + "text": "CustomEvent<TimePickerChangeEventDetail>", + "references": [ + { + "name": "TimePickerChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/TimePicker.js" + } + ] + }, + "description": "Fired when the input operation has finished by clicking the \"OK\" button or\nwhen the text in the input field has changed and the focus leaves the input field.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "string" + }, + "name": "value", + "_ui5privacy": "public", + "description": "The submitted value." + }, + { + "type": { + "text": "boolean" + }, + "name": "valid", + "_ui5privacy": "public", + "description": "Indicator if the value is in correct format pattern and in valid range." + } + ] + }, + { + "name": "input", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<TimePickerInputEventDetail>", + "references": [ + { + "name": "TimePickerInputEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/TimePicker.js" + } + ] + }, + "description": "Fired when the value of the `ui5-time-picker` is changed at each key stroke.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "string" + }, + "name": "value", + "_ui5privacy": "public", + "description": "The current value." + }, + { + "type": { + "text": "boolean" + }, + "name": "valid", + "_ui5privacy": "public", + "description": "Indicator if the value is in correct format pattern and in valid range." + } + ] + }, + { + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the value-help dialog of the component is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.0.0" + }, + { + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired after the value-help dialog of the component is closed.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.0.0" + } + ], + "attributes": [ + { + "description": "Defines a formatted time value.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + } + }, + { + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", + "type": { + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + } + }, + { + "description": "Defines the disabled state of the comonent.", + "name": "disabled", + "default": "false", "fieldName": "disabled", "type": { "text": "boolean" } }, { - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines the readonly state of the comonent.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", + "name": "placeholder", + "default": "undefined", + "fieldName": "placeholder", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Determines the format, displayed in the input field.\n\nExample:\nHH:mm:ss -> 11:42:35\nhh:mm:ss a -> 2:23:15 PM\nmm:ss -> 12:04 (only minutes and seconds)", + "name": "format-pattern", + "default": "undefined", + "fieldName": "formatPattern", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the open or closed state of the popover.", + "name": "open", + "default": "false", + "fieldName": "open", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the aria-label attribute for the component.", "name": "accessible-name", "default": "undefined", "fieldName": "accessibleName", "type": { "text": "string | undefined" } + }, + { + "description": "Receives id (or many ids) of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that describe the input.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Currently selected time represented as JavaScript Date instance", + "name": "date-value", + "default": "null", + "fieldName": "dateValue", + "type": { + "text": "any" + } } ], "superclass": { @@ -25362,7 +27168,9 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, + "tagName": "ui5-time-picker", "customElement": true, + "_ui5since": "1.0.0-rc.6", "_ui5privacy": "public" } ], @@ -25371,81 +27179,177 @@ "kind": "js", "name": "default", "declaration": { - "name": "SliderBase", - "module": "dist/SliderBase.js" + "name": "TimePicker", + "module": "dist/TimePicker.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-time-picker", + "declaration": { + "name": "TimePicker", + "module": "dist/TimePicker.js" } } ] }, { "kind": "javascript-module", - "path": "dist/SliderTooltip.js", + "path": "dist/TimePickerClock.js", "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "SliderTooltip", - "module": "dist/SliderTooltip.js" + "name": "TimePickerClock", + "module": "dist/TimePickerClock.js" } } ] }, { "kind": "javascript-module", - "path": "dist/SpecialCalendarDate.js", + "path": "dist/TimePickerInternals.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TimePickerInternals", + "module": "dist/TimePickerInternals.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TimeSelectionClocks.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TimeSelectionClocks", + "module": "dist/TimeSelectionClocks.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/TimeSelectionInputs.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TimeSelectionInputs", + "module": "dist/TimeSelectionInputs.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/Title.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-special-date` component defines a special calendar date to be used inside `ui5-calendar`,\nwhich is visually distinguished from the rest of the dates.", - "name": "SpecialCalendarDate", + "description": "### Overview\n\nThe `ui5-title` component is used to display titles inside a page.\nIt is a simple, large-sized text with explicit header/title semantics.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Title.js\";`", + "name": "Title", + "slots": [ + { + "description": "Defines the text of the component.\nThis component supports nesting a `Link` component inside.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", + "name": "default", + "_ui5privacy": "public", + "_ui5type": { + "text": "Array<Node>" + } + } + ], "members": [ { "kind": "field", - "name": "value", + "name": "wrappingType", "type": { - "text": "string" + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] }, - "default": "\"\"", - "description": "The date formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", + "default": "\"Normal\"", + "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.", "privacy": "public" }, { "kind": "field", - "name": "type", + "name": "level", "type": { - "text": "CalendarLegendItemType", + "text": "TitleLevel", "references": [ { - "name": "CalendarLegendItemType", + "name": "TitleLevel", "package": "@ui5/webcomponents", - "module": "dist/types/CalendarLegendItemType.js" + "module": "dist/types/TitleLevel.js" } ] }, - "default": "\"None\"", - "description": "Defines the type of the special date.", + "default": "\"H2\"", + "description": "Defines the component level.\nAvailable options are: `\"H6\"` to `\"H1\"`.\nThis property does not influence the style of the component.\nUse the property `size` for this purpose instead.", + "privacy": "public" + }, + { + "kind": "field", + "name": "size", + "type": { + "text": "TitleLevel", + "references": [ + { + "name": "TitleLevel", + "package": "@ui5/webcomponents", + "module": "dist/types/TitleLevel.js" + } + ] + }, + "default": "\"H5\"", + "description": "Defines the visual appearance of the title.\nAvailable options are: `\"H6\"` to `\"H1\"`.", "privacy": "public" } ], "attributes": [ { - "description": "The date formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.", - "name": "value", - "default": "\"\"", - "fieldName": "value", + "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.", + "name": "wrapping-type", + "default": "\"Normal\"", + "fieldName": "wrappingType", "type": { - "text": "string" + "text": "\"None\" | \"Normal\"" } }, { - "description": "Defines the type of the special date.", - "name": "type", - "default": "\"None\"", - "fieldName": "type", + "description": "Defines the component level.\nAvailable options are: `\"H6\"` to `\"H1\"`.\nThis property does not influence the style of the component.\nUse the property `size` for this purpose instead.", + "name": "level", + "default": "\"H2\"", + "fieldName": "level", "type": { - "text": "\"None\" | \"Today\" | \"Selected\" | \"Working\" | \"NonWorking\" | \"Type01\" | \"Type02\" | \"Type03\" | \"Type04\" | \"Type05\" | \"Type06\" | \"Type07\" | \"Type08\" | \"Type09\" | \"Type10\" | \"Type11\" | ... 8 more ... | \"Type20\"" + "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"" + } + }, + { + "description": "Defines the visual appearance of the title.\nAvailable options are: `\"H6\"` to `\"H1\"`.", + "name": "size", + "default": "\"H5\"", + "fieldName": "size", + "type": { + "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"" } } ], @@ -25454,11 +27358,9 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-special-date", + "tagName": "ui5-title", "customElement": true, - "_ui5since": "1.23.0", - "_ui5privacy": "public", - "_ui5abstract": true + "_ui5privacy": "public" } ], "exports": [ @@ -25466,209 +27368,119 @@ "kind": "js", "name": "default", "declaration": { - "name": "SpecialCalendarDate", - "module": "dist/SpecialCalendarDate.js" + "name": "Title", + "module": "dist/Title.js" } }, { "kind": "custom-element-definition", - "name": "ui5-special-date", + "name": "ui5-title", "declaration": { - "name": "SpecialCalendarDate", - "module": "dist/SpecialCalendarDate.js" + "name": "Title", + "module": "dist/Title.js" } } ] }, { "kind": "javascript-module", - "path": "dist/SplitButton.js", + "path": "dist/Toast.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\n`ui5-split-button` enables users to trigger actions. It is constructed of two separate actions -\ndefault action and arrow action that can be activated by clicking or tapping, or by\npressing certain keyboard keys - `Space` or `Enter` for default action,\nand `Arrow Down` or `Arrow Up` for arrow action.\n\n### Usage\n\n`ui5-split-button` consists two separate buttons:\n\n- for the first one (default action) you can define some `text` or an `icon`, or both.\n- the second one (arrow action) contains only `slim-arrow-down` icon.\n\nYou can choose a `design` from a set of predefined types (the same as for ui5-button) that offer\ndifferent styling to correspond to the triggered action. Both text and arrow actions have the same design.\n\nYou can set the `ui5-split-button` as enabled or disabled. Both parts of an enabled\n`ui5-split-button` can be pressed by clicking or tapping it, or by certain keys, which changes\nthe style to provide visual feedback to the user that it is pressed or hovered over with\nthe mouse cursor. A disabled `ui5-split-button` appears inactive and any of the two buttons\ncannot be pressed.\n\n### Keyboard Handling\n\n- `Space` or `Enter` - triggers the default action\n- `Shift` or `Escape` - if `Space` is pressed, releases the default action button without triggering the click event.\n- `Arrow Down`, `Arrow Up`, `Alt`+`Arrow Down`, `Alt`+`Arrow Up`, or `F4` - triggers the arrow action\nThere are separate events that are fired on activating of `ui5-split-button` parts:\n\n- `click` for the first button (default action)\n- `arrow-click` for the second button (arrow action)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SplitButton.js\";`", - "name": "SplitButton", - "cssParts": [ - { - "description": "Used to style the native button element", - "name": "button" - }, - { - "description": "Used to style the icon in the native button element", - "name": "icon" - }, - { - "description": "Used to style the end icon in the native button element", - "name": "endIcon" - } - ], + "description": "### Overview\n\nThe `ui5-toast` is a small, non-disruptive popup for success or information messages that\ndisappears automatically after a few seconds.\n\n### Usage\n\n#### When to use:\n\n- You want to display a short success or information message.\n- You do not want to interrupt users while they are performing an action.\n- You want to confirm a successful action.\n\n#### When not to use:\n\n- You want to display error or warning message.\n- You want to interrupt users while they are performing an action.\n- You want to make sure that users read the message before they leave the page.\n- You want users to be able to copy some part of the message text.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Toast.js\";`", + "name": "Toast", "slots": [ { - "name": "default", "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", - "_ui5propertyName": "text", + "name": "default", + "_ui5privacy": "public", "_ui5type": { "text": "Array<Node>" - }, - "_ui5privacy": "public" + } } ], "members": [ { "kind": "field", - "name": "icon", + "name": "duration", "type": { - "text": "string | undefined" + "text": "number" }, - "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\n\nSee all available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "default": "undefined", + "default": "3000", + "description": "Defines the duration in milliseconds for which component\nremains on the screen before it's automatically closed.\n\n**Note:** The minimum supported value is `500` ms\nand even if a lower value is set, the duration would remain `500` ms.", "privacy": "public" }, { "kind": "field", - "name": "activeArrowButton", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the arrow button should have the active state styles or not.", - "privacy": "public", - "_ui5since": "1.21.0" - }, - { - "kind": "field", - "name": "design", + "name": "placement", "type": { - "text": "ButtonDesign", + "text": "ToastPlacement", "references": [ { - "name": "ButtonDesign", + "name": "ToastPlacement", "package": "@ui5/webcomponents", - "module": "dist/types/ButtonDesign.js" + "module": "dist/types/ToastPlacement.js" } ] }, - "default": "\"Default\"", - "description": "Defines the component design.", + "default": "\"BottomCenter\"", + "description": "Defines the placement of the component.", "privacy": "public" }, { "kind": "field", - "name": "disabled", + "name": "open", "type": { "text": "boolean" }, "default": "false", - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "privacy": "public" - }, - { - "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "accessibilityAttributes", - "type": { - "text": "SplitButtonAccessibilityAttributes", - "references": [ - { - "name": "SplitButtonAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/SplitButton.js" - } - ] - }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Provides a human-readable description for the role of the button.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n\t- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", + "description": "Indicates whether the component is open (visible).", "privacy": "public", - "_ui5since": "2.13.0" + "_ui5since": "2.0.0" } ], "events": [ { - "name": "click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the user clicks on the default action.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true - }, - { - "name": "arrow-click", + "name": "close", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the user clicks on the arrow action.", + "description": "Fired after the component is auto closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "_ui5Bubbles": false, + "_ui5since": "2.0.0" } ], "attributes": [ { - "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\n\nSee all available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", + "description": "Defines the duration in milliseconds for which component\nremains on the screen before it's automatically closed.\n\n**Note:** The minimum supported value is `500` ms\nand even if a lower value is set, the duration would remain `500` ms.", + "name": "duration", + "default": "3000", + "fieldName": "duration", "type": { - "text": "string | undefined" + "text": "number" } }, { - "description": "Defines whether the arrow button should have the active state styles or not.", - "name": "active-arrow-button", - "default": "false", - "fieldName": "activeArrowButton", + "description": "Defines the placement of the component.", + "name": "placement", + "default": "\"BottomCenter\"", + "fieldName": "placement", "type": { - "text": "boolean" + "text": "\"TopStart\" | \"TopCenter\" | \"TopEnd\" | \"MiddleStart\" | \"MiddleCenter\" | \"MiddleEnd\" | \"BottomStart\" | \"BottomCenter\" | \"BottomEnd\"" } }, { - "description": "Defines the component design.", - "name": "design", - "default": "\"Default\"", - "fieldName": "design", - "type": { - "text": "\"Transparent\" | \"Default\" | \"Positive\" | \"Negative\" | \"Emphasized\" | \"Attention\"" - } - }, - { - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "name": "disabled", + "description": "Indicates whether the component is open (visible).", + "name": "open", "default": "false", - "fieldName": "disabled", + "fieldName": "open", "type": { "text": "boolean" } - }, - { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Provides a human-readable description for the role of the button.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n\t- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", - "type": { - "text": "SplitButtonAccessibilityAttributes" - } } ], "superclass": { @@ -25676,9 +27488,9 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-split-button", + "tagName": "ui5-toast", "customElement": true, - "_ui5since": "1.1.0", + "_ui5since": "1.0.0-rc.6", "_ui5privacy": "public" } ], @@ -25687,105 +27499,59 @@ "kind": "js", "name": "default", "declaration": { - "name": "SplitButton", - "module": "dist/SplitButton.js" + "name": "Toast", + "module": "dist/Toast.js" } }, { "kind": "custom-element-definition", - "name": "ui5-split-button", + "name": "ui5-toast", "declaration": { - "name": "SplitButton", - "module": "dist/SplitButton.js" + "name": "Toast", + "module": "dist/Toast.js" } } ] }, { "kind": "javascript-module", - "path": "dist/StepInput.js", + "path": "dist/ToggleButton.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-step-input` consists of an input field and buttons with icons to increase/decrease the value\nwith the predefined step.\n\nThe user can change the value of the component by pressing the increase/decrease buttons,\nby typing a number directly, by using the keyboard up/down and page up/down,\nor by using the mouse scroll wheel. Decimal values are supported.\n\n### Usage\n\nThe default step is 1 but the app developer can set a different one.\n\nApp developers can set a maximum and minimum value for the `StepInput`.\nThe increase/decrease button and the up/down keyboard navigation become disabled when\nthe value reaches the max/min or a new value is entered from the input which is greater/less than the max/min.\n\n#### When to use:\n\n- To adjust amounts, quantities, or other values quickly.\n- To adjust values for a specific step.\n\n#### When not to use:\n\n- To enter a static number (for example, postal code, phone number, or ID). In this case,\nuse the regular `ui5-input` instead.\n- To display a value that rarely needs to be adjusted and does not pertain to a particular step.\nIn this case, use the regular `ui5-input` instead.\n- To enter dates and times. In this case, use date/time related components instead.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/StepInput.js\";`", - "name": "StepInput", - "slots": [ - { - "name": "valueStateMessage", - "description": "Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - } - ], + "description": "### Overview\n\nThe `ui5-toggle-button` component is an enhanced `ui5-button`\nthat can be toggled between pressed and normal states.\nUsers can use the `ui5-toggle-button` as a switch to turn a setting on or off.\nIt can also be used to represent an independent choice similar to a check box.\n\nClicking or tapping on a `ui5-toggle-button` changes its state to `pressed`. The button returns to\nits initial state when the user clicks or taps on it again.\nBy applying additional custom CSS-styling classes, apps can give a different style to any `ui5-toggle-button`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ToggleButton.js\";`", + "name": "ToggleButton", "members": [ { "kind": "field", - "name": "value", - "type": { - "text": "number" - }, - "default": "0", - "description": "Defines a value of the component.", - "privacy": "public" - }, - { - "kind": "field", - "name": "min", - "type": { - "text": "number | undefined" - }, - "description": "Defines a minimum value of the component.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "max", - "type": { - "text": "number | undefined" - }, - "description": "Defines a maximum value of the component.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "step", + "name": "pressed", "type": { - "text": "number" + "text": "boolean" }, - "default": "1", - "description": "Defines a step of increasing/decreasing the value of the component.", + "default": "false", + "description": "Determines whether the component is displayed as pressed.", "privacy": "public" }, { "kind": "field", - "name": "valueState", + "name": "design", "type": { - "text": "ValueState", + "text": "ButtonDesign", "references": [ { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" + "name": "ButtonDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/ButtonDesign.js" } ] }, - "default": "\"None\"", - "description": "Defines the value state of the component.", - "privacy": "public" - }, - { - "kind": "field", - "name": "required", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is required.", - "privacy": "public" + "default": "\"Default\"", + "description": "Defines the component design.", + "privacy": "public", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } }, { "kind": "field", @@ -25794,48 +27560,70 @@ "text": "boolean" }, "default": "false", - "description": "Determines whether the component is displayed as disabled.", - "privacy": "public" + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "privacy": "public", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } }, { "kind": "field", - "name": "readonly", + "name": "icon", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Determines whether the component is displayed as read-only.", - "privacy": "public" + "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", + "privacy": "public", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } }, { "kind": "field", - "name": "placeholder", + "name": "endIcon", "type": { "text": "string | undefined" }, - "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", + "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "default": "undefined", - "privacy": "public" + "privacy": "public", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } }, { "kind": "field", - "name": "name", + "name": "submits", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "default": "undefined", - "privacy": "public" + "default": "false", + "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** This property is only applicable within the context of an HTML Form element.`", + "privacy": "public", + "deprecated": "Set the \"type\" property to \"Submit\" to achieve the same result. The \"submits\" property is ignored if \"type\" is set to any value other than \"Button\".", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } }, { "kind": "field", - "name": "valuePrecision", + "name": "tooltip", "type": { - "text": "number" + "text": "string | undefined" }, - "default": "0", - "description": "Determines the number of digits after the decimal point of the component.", - "privacy": "public" + "description": "Defines the tooltip of the component.\n\n**Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.2.0", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } }, { "kind": "field", @@ -25846,7 +27634,11 @@ "description": "Defines the accessible ARIA name of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "_ui5since": "1.0.0-rc.15", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } }, { "kind": "field", @@ -25857,169 +27649,211 @@ "description": "Receives id(or many ids) of the elements that label the component.", "default": "undefined", "privacy": "public", - "_ui5since": "1.0.0-rc.15" - } - ], - "events": [ + "_ui5since": "1.1.0", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } + }, { - "name": "change", - "_ui5privacy": "public", + "kind": "field", + "name": "accessibilityAttributes", "type": { - "text": "CustomEvent" + "text": "ButtonAccessibilityAttributes", + "references": [ + { + "name": "ButtonAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] }, - "description": "Fired when the input operation has finished by pressing Enter or on focusout.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "privacy": "public", + "_ui5since": "1.2.0", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } }, { - "name": "input", - "_ui5privacy": "public", + "kind": "field", + "name": "accessibleDescription", "type": { - "text": "CustomEvent" + "text": "string | undefined" }, - "description": "Fired when the value of the component changes at each keystroke.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5since": "2.6.0" + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.5.0", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } }, { - "name": "value-state-change", - "_ui5privacy": "public", + "kind": "field", + "name": "type", "type": { - "text": "CustomEvent<StepInputValueStateChangeEventDetail>", + "text": "ButtonType", "references": [ { - "name": "StepInputValueStateChangeEventDetail", + "name": "ButtonType", "package": "@ui5/webcomponents", - "module": "dist/StepInput.js" + "module": "dist/types/ButtonType.js" } ] }, - "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5since": "1.23.0", - "_ui5parameters": [ - { - "type": { - "text": "string" - }, - "name": "valueState", - "_ui5privacy": "public", - "description": "The new `valueState` that will be set." - }, - { - "type": { - "text": "boolean" - }, - "name": "valid", - "_ui5privacy": "public", - "description": "Indicator if the value is in between the min and max value." - } - ] - } - ], - "attributes": [ - { - "description": "Defines a value of the component.", - "name": "value", - "default": "0", - "fieldName": "value", - "type": { - "text": "number" + "default": "\"Button\"", + "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "privacy": "public", + "_ui5since": "1.15.0", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" } }, { - "description": "Defines a minimum value of the component.", - "name": "min", - "default": "undefined", - "fieldName": "min", + "kind": "field", + "name": "accessibleRole", "type": { - "text": "number | undefined" + "text": "ButtonAccessibleRole", + "references": [ + { + "name": "ButtonAccessibleRole", + "package": "@ui5/webcomponents", + "module": "dist/types/ButtonAccessibleRole.js" + } + ] + }, + "default": "\"Button\"", + "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.", + "privacy": "public", + "_ui5since": "1.23", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" } }, { - "description": "Defines a maximum value of the component.", - "name": "max", - "default": "undefined", - "fieldName": "max", + "kind": "field", + "name": "loading", "type": { - "text": "number | undefined" + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.", + "privacy": "public", + "_ui5since": "2.13.0", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" } }, { - "description": "Defines a step of increasing/decreasing the value of the component.", - "name": "step", - "default": "1", - "fieldName": "step", + "kind": "field", + "name": "loadingDelay", "type": { "text": "number" + }, + "default": "1000", + "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.", + "privacy": "public", + "_ui5since": "2.13.0", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" } - }, + } + ], + "attributes": [ { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", + "description": "Determines whether the component is displayed as pressed.", + "name": "pressed", + "default": "false", + "fieldName": "pressed", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "boolean" } }, { - "description": "Defines whether the component is required.", - "name": "required", - "default": "false", - "fieldName": "required", + "description": "Defines the component design.", + "name": "design", + "default": "\"Default\"", + "fieldName": "design", "type": { - "text": "boolean" + "text": "\"Transparent\" | \"Default\" | \"Positive\" | \"Negative\" | \"Emphasized\" | \"Attention\"" + }, + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" } }, { - "description": "Determines whether the component is displayed as disabled.", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", "name": "disabled", "default": "false", "fieldName": "disabled", "type": { "text": "boolean" + }, + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" } }, { - "description": "Determines whether the component is displayed as read-only.", - "name": "readonly", - "default": "false", - "fieldName": "readonly", + "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", "type": { - "text": "boolean" + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" } }, { - "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", - "name": "placeholder", + "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "end-icon", "default": "undefined", - "fieldName": "placeholder", + "fieldName": "endIcon", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" } }, { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", - "default": "undefined", - "fieldName": "name", + "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** This property is only applicable within the context of an HTML Form element.`", + "name": "submits", + "default": "false", + "fieldName": "submits", "type": { - "text": "string | undefined" + "text": "boolean" + }, + "deprecated": "Set the \"type\" property to \"Submit\" to achieve the same result. The \"submits\" property is ignored if \"type\" is set to any value other than \"Button\".", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" } }, { - "description": "Determines the number of digits after the decimal point of the component.", - "name": "value-precision", - "default": "0", - "fieldName": "valuePrecision", + "description": "Defines the tooltip of the component.\n\n**Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", "type": { - "text": "number" + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" } }, { @@ -26029,6 +27863,10 @@ "fieldName": "accessibleName", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" } }, { @@ -26038,104 +27876,225 @@ "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-step-input", - "customElement": true, - "_ui5since": "1.0.0-rc.13", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "StepInput", - "module": "dist/StepInput.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-step-input", - "declaration": { - "name": "StepInput", - "module": "dist/StepInput.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/SuggestionItem.js", - "declarations": [ - { - "kind": "class", - "description": "The `ui5-suggestion-item` represents the suggestion item of the `ui5-input`.", - "name": "SuggestionItem", - "members": [ + }, { - "kind": "field", - "name": "text", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "string | undefined" + "text": "ButtonAccessibilityAttributes" }, - "description": "Defines the text of the component.", - "default": "undefined", - "privacy": "public" + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } }, { - "kind": "field", - "name": "additionalText", + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", "type": { "text": "string | undefined" }, - "description": "Defines the `additionalText`, displayed in the end of the item.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" - } - ], - "attributes": [ + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } + }, { - "description": "Defines the text of the component.", - "name": "text", - "default": "undefined", - "fieldName": "text", + "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "name": "type", + "default": "\"Button\"", + "fieldName": "type", "type": { - "text": "string | undefined" + "text": "\"Button\" | \"Submit\" | \"Reset\"" + }, + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" } }, { - "description": "Defines the `additionalText`, displayed in the end of the item.", - "name": "additional-text", - "default": "undefined", - "fieldName": "additionalText", + "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.", + "name": "accessible-role", + "default": "\"Button\"", + "fieldName": "accessibleRole", "type": { - "text": "string | undefined" + "text": "\"Button\" | \"Link\"" + }, + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } + }, + { + "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } + }, + { + "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.", + "name": "loading-delay", + "default": "1000", + "fieldName": "loadingDelay", + "type": { + "text": "number" + }, + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" } } ], "superclass": { - "name": "ListItemBase", + "name": "Button", "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" + "module": "dist/Button.js" }, - "tagName": "ui5-suggestion-item", + "tagName": "ui5-toggle-button", "customElement": true, "_ui5privacy": "public", - "_ui5abstract": true, - "_ui5implements": [ + "slots": [ { - "name": "IInputSuggestionItemSelectable", - "package": "@ui5/webcomponents", - "module": "dist/Input.js" + "name": "default", + "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", + "_ui5propertyName": "text", + "_ui5type": { + "text": "Array<Node>" + }, + "_ui5privacy": "public", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } + }, + { + "name": "badge", + "description": "Adds a badge to the button.", + "_ui5since": "2.7.0", + "_ui5type": { + "text": "Array<ButtonBadge>", + "references": [ + { + "name": "ButtonBadge", + "package": "@ui5/webcomponents", + "module": "dist/ButtonBadge.js" + } + ] + }, + "_ui5privacy": "public", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } + } + ], + "cssParts": [ + { + "description": "Used to style the native button element", + "name": "button", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } + }, + { + "description": "Used to style the icon in the native button element", + "name": "icon", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } + }, + { + "description": "Used to style the end icon in the native button element", + "name": "endIcon", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } + } + ], + "events": [ + { + "name": "click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<ButtonClickEventDetail>", + "references": [ + { + "name": "ButtonClickEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.10.0", + "_ui5parameters": [ + { + "type": { + "text": "Event" + }, + "name": "originalEvent", + "_ui5privacy": "public", + "description": "Returns original event that comes from user's **click** interaction" + }, + { + "type": { + "text": "boolean" + }, + "name": "altKey", + "_ui5privacy": "public", + "description": "Returns whether the \"ALT\" key was pressed when the event was triggered." + }, + { + "type": { + "text": "boolean" + }, + "name": "ctrlKey", + "_ui5privacy": "public", + "description": "Returns whether the \"CTRL\" key was pressed when the event was triggered." + }, + { + "type": { + "text": "boolean" + }, + "name": "metaKey", + "_ui5privacy": "public", + "description": "Returns whether the \"META\" key was pressed when the event was triggered." + }, + { + "type": { + "text": "boolean" + }, + "name": "shiftKey", + "_ui5privacy": "public", + "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered." + } + ], + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } } ] } @@ -26145,35 +28104,57 @@ "kind": "js", "name": "default", "declaration": { - "name": "SuggestionItem", - "module": "dist/SuggestionItem.js" + "name": "ToggleButton", + "module": "dist/ToggleButton.js" } }, { "kind": "custom-element-definition", - "name": "ui5-suggestion-item", + "name": "ui5-toggle-button", "declaration": { - "name": "SuggestionItem", - "module": "dist/SuggestionItem.js" + "name": "ToggleButton", + "module": "dist/ToggleButton.js" } } ] }, { "kind": "javascript-module", - "path": "dist/SuggestionItemCustom.js", + "path": "dist/ToggleSpinButton.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ToggleSpinButton", + "module": "dist/ToggleSpinButton.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/Token.js", "declarations": [ { "kind": "class", - "description": "The `ui5-suggestion-item-custom` is type of suggestion item,\nthat can be used to place suggestion items with custom content in the input.\nThe text property is considered only for autocomplete.\nIn case the user needs highlighting functionality, check \"@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js\"", - "name": "SuggestionItemCustom", + "description": "### Overview\n\nTokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Token.js\";`", + "name": "Token", "slots": [ { - "name": "default", - "description": "Defines the content of the component.", - "_ui5propertyName": "content", + "name": "closeIcon", + "description": "Defines the close icon for the token. If nothing is provided to this slot, the default close icon will be used.\nAccepts `ui5-icon`.", + "_ui5since": "1.0.0-rc.9", "_ui5type": { - "text": "Array<Node>" + "text": "Array<IIcon>", + "references": [ + { + "name": "IIcon", + "package": "@ui5/webcomponents", + "module": "dist/Icon.js" + } + ] }, "_ui5privacy": "public" } @@ -26185,36 +28166,55 @@ "type": { "text": "string | undefined" }, - "description": "Defines the text of the `ui5-suggestion-item-custom`.\n**Note:** The text property is considered only for autocomplete.", + "description": "Defines the text of the token.", "default": "undefined", "privacy": "public" + }, + { + "kind": "field", + "name": "selected", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is selected or not.", + "privacy": "public" } ], "attributes": [ { - "description": "Defines the text of the `ui5-suggestion-item-custom`.\n**Note:** The text property is considered only for autocomplete.", + "description": "Defines the text of the token.", "name": "text", "default": "undefined", "fieldName": "text", "type": { "text": "string | undefined" } + }, + { + "description": "Defines whether the component is selected or not.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } } ], "superclass": { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" }, - "tagName": "ui5-suggestion-item-custom", + "tagName": "ui5-token", "customElement": true, - "_ui5since": "2.0.0", + "_ui5since": "1.0.0-rc.9", "_ui5privacy": "public", "_ui5implements": [ { - "name": "IInputSuggestionItemSelectable", + "name": "IToken", "package": "@ui5/webcomponents", - "module": "dist/Input.js" + "module": "dist/MultiInput.js" } ] } @@ -26224,488 +28224,224 @@ "kind": "js", "name": "default", "declaration": { - "name": "SuggestionItemCustom", - "module": "dist/SuggestionItemCustom.js" + "name": "Token", + "module": "dist/Token.js" } }, { "kind": "custom-element-definition", - "name": "ui5-suggestion-item-custom", + "name": "ui5-token", "declaration": { - "name": "SuggestionItemCustom", - "module": "dist/SuggestionItemCustom.js" + "name": "Token", + "module": "dist/Token.js" } } ] }, { "kind": "javascript-module", - "path": "dist/SuggestionItemGroup.js", + "path": "dist/Tokenizer.js", "declarations": [ { "kind": "class", - "description": "The `ui5-suggestion-item-group` is type of suggestion item,\nthat can be used to split the `ui5-input` suggestions into groups.", - "name": "SuggestionItemGroup", + "description": "### Overview\n\nA `ui5-tokenizer` is an invisible container for `ui5-token`s that supports keyboard navigation and token selection.\n\nThe `ui5-tokenizer` consists of two parts:\n- Tokens - displays the available tokens.\n- N-more indicator - contains the number of the remaining tokens that cannot be displayed due to the limited space.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe `ui5-tokenizer` provides advanced keyboard handling.\nWhen a token is focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Left] or [Right] / [Up] or [Down] - Navigates left and right through the tokens.\n- [Home] - Navigates to the first token.\n- [End] - Navigates to the last token.\n\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete):\n\n- [Space] - Selects a token.\n- [Backspace] / [Delete] - Deletes a token.\n**Note:** The deletion of a token is handled by the application with the use of the `token-delete` event.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Tokenizer.js\";`", + "name": "Tokenizer", "slots": [ { "name": "default", - "description": "Defines the items of the <code>ui5-suggestion-item-group</code>.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<SuggestionListItem>", - "references": [ - { - "name": "SuggestionListItem", - "package": "@ui5/webcomponents", - "module": "dist/SuggestionListItem.js" - } - ] - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } - }, - { - "name": "header", - "description": "Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.", + "description": "Defines the tokens to be displayed.", + "_ui5propertyName": "tokens", "_ui5type": { - "text": "Array<ListItemBase>", + "text": "Array<Token>", "references": [ { - "name": "ListItemBase", + "name": "Token", "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" + "module": "dist/Token.js" } ] }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "_ui5privacy": "public" } ], - "superclass": { - "name": "ListItemGroup", - "package": "@ui5/webcomponents", - "module": "dist/ListItemGroup.js" - }, - "tagName": "ui5-suggestion-item-group", - "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public", - "cssParts": [ + "members": [ { - "description": "Used to style the header item of the group", - "name": "header", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } - } - ], - "attributes": [ + "kind": "field", + "name": "readonly", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "privacy": "public" + }, { - "description": "Defines the header text of the <code>ui5-li-group</code>.", - "name": "header-text", - "default": "undefined", - "fieldName": "headerText", + "kind": "field", + "name": "multiLine", "type": { - "text": "string | undefined" + "text": "boolean" }, - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "default": "false", + "description": "Defines whether tokens are displayed on multiple lines.\n\n**Note:** The `multiLine` property is in an experimental state and is a subject to change.", + "privacy": "public", + "_ui5since": "2.5.0" }, { - "description": "Defines the accessible name of the header.", - "name": "header-accessible-name", - "default": "undefined", - "fieldName": "headerAccessibleName", + "kind": "field", + "name": "name", "type": { "text": "string | undefined" }, - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", + "default": "undefined", + "privacy": "public" }, { - "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", - "name": "wrapping-type", - "default": "\"None\"", - "fieldName": "wrappingType", + "kind": "field", + "name": "showClearAll", "type": { - "text": "\"None\" | \"Normal\"" + "text": "boolean" }, - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } - } - ], - "members": [ + "default": "false", + "description": "Defines whether \"Clear All\" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.\n\n**Note:** The `showClearAll` property is in an experimental state and is a subject to change.", + "privacy": "public", + "_ui5since": "2.5.0" + }, { "kind": "field", - "name": "headerText", + "name": "disabled", "type": { - "text": "string | undefined" + "text": "boolean" }, - "description": "Defines the header text of the <code>ui5-li-group</code>.", - "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "default": "false", + "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", + "privacy": "public" }, { "kind": "field", - "name": "headerAccessibleName", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Defines the accessible name of the header.", - "privacy": "public", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "privacy": "public" }, { "kind": "field", - "name": "wrappingType", + "name": "accessibleNameRef", "type": { - "text": "WrappingType", - "references": [ - { - "name": "WrappingType", - "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" - } - ] + "text": "string | undefined" }, - "default": "\"None\"", - "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", - "privacy": "public", - "_ui5since": "2.15.0", - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + "description": "Receives id(or many ids) of the elements that label the component.", + "default": "undefined", + "privacy": "public" } ], "events": [ { - "name": "move-over", + "name": "token-delete", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ListItemGroupMoveEventDetail>", + "text": "CustomEvent<TokenizerTokenDeleteEventDetail>", "references": [ { - "name": "ListItemGroupMoveEventDetail", + "name": "TokenizerTokenDeleteEventDetail", "package": "@ui5/webcomponents", - "module": "dist/ListItemGroup.js" + "module": "dist/Tokenizer.js" } ] }, - "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, + "description": "Fired when tokens are being deleted (delete icon, delete or backspace is pressed)", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "2.1.0", "_ui5parameters": [ { "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." - }, - { - "type": { - "text": "object" + "text": "Array" }, - "name": "destination", + "name": "tokens", "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + "description": "An array containing the deleted tokens." } - ], - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } + ] }, { - "name": "move", + "name": "selection-change", "_ui5privacy": "public", "type": { - "text": "CustomEvent<ListItemGroupMoveEventDetail>", + "text": "CustomEvent<TokenizerSelectionChangeEventDetail>", "references": [ { - "name": "ListItemGroupMoveEventDetail", + "name": "TokenizerSelectionChangeEventDetail", "package": "@ui5/webcomponents", - "module": "dist/ListItemGroup.js" + "module": "dist/Tokenizer.js" } ] }, - "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "description": "Fired when token selection is changed by user interaction", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "2.1.0", "_ui5parameters": [ { "type": { - "text": "object" + "text": "Array<Token>", + "references": [ + { + "name": "Token", + "package": "@ui5/webcomponents", + "module": "dist/Token.js" + } + ] }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." - }, - { - "type": { - "text": "object" - }, - "name": "destination", + "name": "tokens", "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + "description": "An array of the selected items." } - ], - "inheritedFrom": { - "name": "ListItemGroup", - "module": "dist/ListItemGroup.js" - } - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "SuggestionItemGroup", - "module": "dist/SuggestionItemGroup.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-suggestion-item-group", - "declaration": { - "name": "SuggestionItemGroup", - "module": "dist/SuggestionItemGroup.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/SuggestionListItem.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "SuggestionListItem", - "module": "dist/SuggestionListItem.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/Switch.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\nThe `ui5-switch` component is used for changing between binary states.\n\nThe component can display texts, that will be switched, based on the component state, via the `textOn` and `textOff` properties,\nbut texts longer than 3 letters will be cutted off.\n\nHowever, users are able to customize the width of `ui5-switch` with pure CSS (`<ui5-switch style=\"width: 200px\">`), and set widths, depending on the texts they would use.\n\nNote: the component would not automatically stretch to fit the whole text width.\n\n### Keyboard Handling\nThe state can be changed by pressing the Space and Enter keys.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Switch\";`", - "name": "Switch", - "cssParts": [ - { - "description": "Used to style the track, where the handle is being slid", - "name": "slider" - }, - { - "description": "Used to style the `textOn` property text", - "name": "text-on" - }, - { - "description": "Used to style the `textOff` property text", - "name": "text-off" - }, - { - "description": "Used to style the handle of the switch", - "name": "handle" + ] } ], - "members": [ - { - "kind": "field", - "name": "design", - "type": { - "text": "SwitchDesign", - "references": [ - { - "name": "SwitchDesign", - "package": "@ui5/webcomponents", - "module": "dist/types/SwitchDesign.js" - } - ] - }, - "default": "\"Textual\"", - "description": "Defines the component design.\n\n**Note:** If `Graphical` type is set,\npositive and negative icons will replace the `textOn` and `textOff`.", - "privacy": "public" - }, + "attributes": [ { - "kind": "field", - "name": "checked", - "type": { - "text": "boolean" - }, + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "name": "readonly", "default": "false", - "description": "Defines if the component is checked.\n\n**Note:** The property can be changed with user interaction,\neither by cliking the component, or by pressing the `Enter` or `Space` key.", - "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change" - }, - { - "kind": "field", - "name": "disabled", + "fieldName": "readonly", "type": { "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is noninteractive.", - "privacy": "public" - }, - { - "kind": "field", - "name": "textOn", - "type": { - "text": "string | undefined" - }, - "description": "Defines the text, displayed when the component is checked.\n\n**Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "textOff", - "type": { - "text": "string | undefined" - }, - "description": "Defines the text, displayed when the component is not checked.\n\n**Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Sets the accessible ARIA name of the component.\n\n**Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\nProviding an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.2.0" - }, - { - "kind": "field", - "name": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that label the component.\n\n**Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\nProviding an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.1.0" - }, - { - "kind": "field", - "name": "tooltip", - "type": { - "text": "string | undefined" - }, - "description": "Defines the tooltip of the component.\n\n**Note:** If applicable an external label reference should always be the preferred option to provide context to the `ui5-switch` component over a tooltip.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.9.0" + } }, { - "kind": "field", - "name": "required", + "description": "Defines whether tokens are displayed on multiple lines.\n\n**Note:** The `multiLine` property is in an experimental state and is a subject to change.", + "name": "multi-line", + "default": "false", + "fieldName": "multiLine", "type": { "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is required.", - "privacy": "public", - "_ui5since": "1.16.0" + } }, { - "kind": "field", + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", "name": "name", - "type": { - "text": "string | undefined" - }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", "default": "undefined", - "privacy": "public", - "_ui5since": "1.16.0" - }, - { - "kind": "field", - "name": "value", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "Defines the form value of the component.", - "privacy": "public", - "_ui5since": "2.12.0" - } - ], - "events": [ - { - "name": "change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the component checked state changes.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true - } - ], - "attributes": [ - { - "description": "Defines the component design.\n\n**Note:** If `Graphical` type is set,\npositive and negative icons will replace the `textOn` and `textOff`.", - "name": "design", - "default": "\"Textual\"", - "fieldName": "design", + "fieldName": "name", "type": { - "text": "\"Textual\" | \"Graphical\"" + "text": "string | undefined" } }, { - "description": "Defines if the component is checked.\n\n**Note:** The property can be changed with user interaction,\neither by cliking the component, or by pressing the `Enter` or `Space` key.", - "name": "checked", + "description": "Defines whether \"Clear All\" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.\n\n**Note:** The `showClearAll` property is in an experimental state and is a subject to change.", + "name": "show-clear-all", "default": "false", - "fieldName": "checked", + "fieldName": "showClearAll", "type": { "text": "boolean" } }, { - "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is noninteractive.", + "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", "name": "disabled", "default": "false", "fieldName": "disabled", @@ -26714,25 +28450,7 @@ } }, { - "description": "Defines the text, displayed when the component is checked.\n\n**Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).", - "name": "text-on", - "default": "undefined", - "fieldName": "textOn", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the text, displayed when the component is not checked.\n\n**Note:** We recommend using short texts, up to 3 letters (larger texts would be cut off).", - "name": "text-off", - "default": "undefined", - "fieldName": "textOff", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Sets the accessible ARIA name of the component.\n\n**Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\nProviding an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.", + "description": "Defines the accessible ARIA name of the component.", "name": "accessible-name", "default": "undefined", "fieldName": "accessibleName", @@ -26741,49 +28459,13 @@ } }, { - "description": "Receives id(or many ids) of the elements that label the component.\n\n**Note**: We recommend that you set an accessibleNameRef pointing to an external label or at least an `accessibleName`.\nProviding an `accessibleNameRef` or an `accessibleName` is mandatory in the cases when `textOn` and `textOff` properties aren't set.", + "description": "Receives id(or many ids) of the elements that label the component.", "name": "accessible-name-ref", "default": "undefined", "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" } - }, - { - "description": "Defines the tooltip of the component.\n\n**Note:** If applicable an external label reference should always be the preferred option to provide context to the `ui5-switch` component over a tooltip.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines whether the component is required.", - "name": "required", - "default": "false", - "fieldName": "required", - "type": { - "text": "boolean" - } - }, - { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", - "default": "undefined", - "fieldName": "name", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the form value of the component.", - "name": "value", - "default": "\"\"", - "fieldName": "value", - "type": { - "text": "string" - } } ], "superclass": { @@ -26791,9 +28473,10 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-switch", + "tagName": "ui5-tokenizer", "customElement": true, - "_ui5since": "0.8.0", + "_ui5experimental": "This component is availabe since 2.0 under an experimental flag and its API and behaviour are subject to change.", + "_ui5since": "2.0.0", "_ui5privacy": "public" } ], @@ -26802,48 +28485,40 @@ "kind": "js", "name": "default", "declaration": { - "name": "Switch", - "module": "dist/Switch.js" + "name": "Tokenizer", + "module": "dist/Tokenizer.js" } }, { "kind": "custom-element-definition", - "name": "ui5-switch", + "name": "ui5-tokenizer", "declaration": { - "name": "Switch", - "module": "dist/Switch.js" + "name": "Tokenizer", + "module": "dist/Tokenizer.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Tab.js", + "path": "dist/Toolbar.js", "declarations": [ { "kind": "class", - "description": "The `ui5-tab` represents a selectable item inside a `ui5-tabcontainer`.\nIt defines both the item in the tab strip (top part of the `ui5-tabcontainer`) and the\ncontent that is presented to the user once the tab is selected.", - "name": "Tab", + "description": "### Overview\n\nThe `ui5-toolbar` component is used to create a horizontal layout with items.\nThe items can be overflowing in a popover, when the space is not enough to show all of them.\n\n### Keyboard Handling\nThe `ui5-toolbar` provides advanced keyboard handling.\n\n- The control is not interactive, but can contain of interactive elements\n- [Tab] - iterates through elements\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Toolbar.js\";`", + "name": "Toolbar", "slots": [ { "name": "default", - "description": "Holds the content associated with this tab.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<Node>" - }, - "_ui5privacy": "public" - }, - { - "name": "items", - "description": "Defines hierarchies with nested sub tabs.\n\n**Note:** Use `ui5-tab` and `ui5-tab-separator` for the intended design.", + "description": "Defines the items of the component.\n\n**Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here.", + "_ui5propertyName": "items", "_ui5type": { - "text": "Array<ITab>", + "text": "Array<ToolbarItem>", "references": [ { - "name": "ITab", + "name": "ToolbarItem", "package": "@ui5/webcomponents", - "module": "dist/TabContainer.js" + "module": "dist/ToolbarItem.js" } ] }, @@ -26853,41 +28528,38 @@ "members": [ { "kind": "field", - "name": "text", - "type": { - "text": "string | undefined" - }, - "description": "The text to be displayed for the item.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "disabled", + "name": "alignContent", "type": { - "text": "boolean" + "text": "ToolbarAlign", + "references": [ + { + "name": "ToolbarAlign", + "package": "@ui5/webcomponents", + "module": "dist/types/ToolbarAlign.js" + } + ] }, - "default": "false", - "description": "Disabled tabs can't be selected.", + "default": "\"End\"", + "description": "Indicated the direction in which the Toolbar items will be aligned.", "privacy": "public" }, { "kind": "field", - "name": "additionalText", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "Represents the \"additionalText\" text, which is displayed in the tab. In the cases when in the same time there are tabs with icons and tabs without icons, if a tab has no icon the \"additionalText\" is displayed larger.", + "description": "Defines the accessible ARIA name of the component.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "icon", + "name": "accessibleNameRef", "type": { "text": "string | undefined" }, - "description": "Defines the icon source URI to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous built-in icons.\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Receives id(or many ids) of the elements that label the input.", "default": "undefined", "privacy": "public" }, @@ -26895,115 +28567,67 @@ "kind": "field", "name": "design", "type": { - "text": "SemanticColor", + "text": "ToolbarDesign", "references": [ { - "name": "SemanticColor", + "name": "ToolbarDesign", "package": "@ui5/webcomponents", - "module": "dist/types/SemanticColor.js" + "module": "dist/types/ToolbarDesign.js" } ] }, - "default": "\"Default\"", - "description": "Defines the component's design color.\n\nThe design is applied to:\n\n- the component icon\n- the `text` when the component overflows\n- the tab selection line\n\nAvailable designs are: `\"Default\"`, `\"Neutral\"`, `\"Positive\"`, `\"Critical\"` and `\"Negative\"`.\n\n**Note:** The design depends on the current theme.", - "privacy": "public" - }, - { - "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Specifies if the component is selected.", - "privacy": "public" - }, - { - "kind": "field", - "name": "movable", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the tab is movable.", + "default": "\"Solid\"", + "description": "Defines the toolbar design.", "privacy": "public", "_ui5since": "2.0.0" }, { "kind": "method", - "name": "getDomRefInStrip", + "name": "isOverflowOpen", "return": { "type": { - "text": "HTMLElement | undefined" + "text": "boolean" } }, - "description": "Returns the DOM reference of the tab that is placed in the header.\n\n**Note:** Tabs, placed in the `items` slot of other tabs are not shown in the header. Calling this method on such tabs will return `undefined`.\n\n**Note:** If you need a DOM ref to the tab content please use the `getDomRef` method.", - "privacy": "public", - "_ui5since": "1.0.0-rc.16" + "description": "Returns if the overflow popup is open.", + "privacy": "public" } ], "attributes": [ { - "description": "The text to be displayed for the item.", - "name": "text", - "default": "undefined", - "fieldName": "text", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Disabled tabs can't be selected.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", + "description": "Indicated the direction in which the Toolbar items will be aligned.", + "name": "align-content", + "default": "\"End\"", + "fieldName": "alignContent", "type": { - "text": "boolean" + "text": "\"Start\" | \"End\"" } }, { - "description": "Represents the \"additionalText\" text, which is displayed in the tab. In the cases when in the same time there are tabs with icons and tabs without icons, if a tab has no icon the \"additionalText\" is displayed larger.", - "name": "additional-text", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", "default": "undefined", - "fieldName": "additionalText", + "fieldName": "accessibleName", "type": { "text": "string | undefined" } }, { - "description": "Defines the icon source URI to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous built-in icons.\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", + "description": "Receives id(or many ids) of the elements that label the input.", + "name": "accessible-name-ref", "default": "undefined", - "fieldName": "icon", + "fieldName": "accessibleNameRef", "type": { "text": "string | undefined" } }, { - "description": "Defines the component's design color.\n\nThe design is applied to:\n\n- the component icon\n- the `text` when the component overflows\n- the tab selection line\n\nAvailable designs are: `\"Default\"`, `\"Neutral\"`, `\"Positive\"`, `\"Critical\"` and `\"Negative\"`.\n\n**Note:** The design depends on the current theme.", + "description": "Defines the toolbar design.", "name": "design", - "default": "\"Default\"", + "default": "\"Solid\"", "fieldName": "design", "type": { - "text": "\"Default\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Neutral\"" - } - }, - { - "description": "Specifies if the component is selected.", - "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines if the tab is movable.", - "name": "movable", - "default": "false", - "fieldName": "movable", - "type": { - "text": "boolean" + "text": "\"Transparent\" | \"Solid\"" } } ], @@ -27012,17 +28636,10 @@ "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-tab", + "tagName": "ui5-toolbar", "customElement": true, - "_ui5privacy": "public", - "_ui5abstract": true, - "_ui5implements": [ - { - "name": "ITab", - "package": "@ui5/webcomponents", - "module": "dist/TabContainer.js" - } - ] + "_ui5since": "1.17.0", + "_ui5privacy": "public" } ], "exports": [ @@ -27030,398 +28647,320 @@ "kind": "js", "name": "default", "declaration": { - "name": "Tab", - "module": "dist/Tab.js" + "name": "Toolbar", + "module": "dist/Toolbar.js" } }, { "kind": "custom-element-definition", - "name": "ui5-tab", + "name": "ui5-toolbar", "declaration": { - "name": "Tab", - "module": "dist/Tab.js" + "name": "Toolbar", + "module": "dist/Toolbar.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TabContainer.js", + "path": "dist/ToolbarButton.js", "declarations": [ - { - "kind": "interface", - "name": "ITab", - "description": "Interface for components that may be slotted inside `ui5-tabcontainer` as items\n\n**Note:** Use directly `ui5-tab` or `ui5-tab-seprator`. Implementing the interface does not guarantee that the class can work as a tab.", - "_ui5privacy": "public" - }, { "kind": "class", - "description": "### Overview\n\nThe `ui5-tabcontainer` represents a collection of tabs with associated content.\nNavigation through the tabs changes the content display of the currently active content area.\nA tab can be labeled with text only, or icons with text.\n\n### Structure\n\nThe `ui5-tabcontainer` can hold two types of entities:\n\n- `ui5-tab` - contains all the information on an item (text and icon)\n- `ui5-tab-separator` - used to separate tabs with a line\n\n### Hierarchies\nMultiple sub tabs could be placed underneath one main tab. Nesting allows deeper hierarchies with indentations\nto indicate the level of each nested tab. When a tab has both sub tabs and own content its click area is split\nto allow the user to display the content or alternatively to expand / collapse the list of sub tabs.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TabContainer.js\";`\n\n`import \"@ui5/webcomponents/dist/Tab.js\";` (for `ui5-tab`)\n\n`import \"@ui5/webcomponents/dist/TabSeparator.js\";` (for `ui5-tab-separator`)", - "name": "TabContainer", - "cssParts": [ + "description": "### Overview\nThe `ui5-toolbar-button` represents an abstract action,\nused in the `ui5-toolbar`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/ToolbarButton.js\";`", + "name": "ToolbarButton", + "members": [ { - "description": "Used to style the content of the component", - "name": "content" + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the action is disabled.\n\n**Note:** a disabled action can't be pressed or focused, and it is not in the tab chain.", + "privacy": "public" }, { - "description": "Used to style the tabstrip of the component", - "name": "tabstrip" - } - ], - "slots": [ - { - "name": "default", - "description": "Defines the tabs.\n\n**Note:** Use `ui5-tab` and `ui5-tab-separator` for the intended design.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<ITab>", + "kind": "field", + "name": "design", + "type": { + "text": "ButtonDesign", "references": [ { - "name": "ITab", + "name": "ButtonDesign", "package": "@ui5/webcomponents", - "module": "dist/TabContainer.js" + "module": "dist/types/ButtonDesign.js" } ] }, - "_ui5privacy": "public" + "default": "\"Default\"", + "description": "Defines the action design.", + "privacy": "public" }, { - "name": "overflowButton", - "description": "Defines the button which will open the overflow menu. If nothing is provided to this slot,\nthe default button will be used.", - "_ui5since": "1.0.0-rc.9", - "_ui5type": { - "text": "Array<IButton>", - "references": [ - { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] + "kind": "field", + "name": "icon", + "type": { + "text": "string | undefined" }, - "_ui5privacy": "public" + "description": "Defines the `icon` source URI.\n\n**Note:** SAP-icons font provides numerous buil-in icons. To find all the available icons, see the\n[Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", + "privacy": "public" }, { - "name": "startOverflowButton", - "description": "Defines the button which will open the start overflow menu if available. If nothing is provided to this slot,\nthe default button will be used.", - "_ui5since": "1.1.0", - "_ui5type": { - "text": "Array<IButton>", - "references": [ - { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] + "kind": "field", + "name": "endIcon", + "type": { + "text": "string | undefined" }, - "_ui5privacy": "public" - } - ], - "members": [ + "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", + "privacy": "public" + }, { "kind": "field", - "name": "collapsed", + "name": "tooltip", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines whether the tab content is collapsed.", + "description": "Defines the tooltip of the component.\n\n**Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "tabLayout", + "name": "accessibleName", "type": { - "text": "TabLayout", - "references": [ - { - "name": "TabLayout", - "package": "@ui5/webcomponents", - "module": "dist/types/TabLayout.js" - } - ] + "text": "string | undefined" }, - "default": "\"Standard\"", - "description": "Defines the alignment of the content and the `additionalText` of a tab.\n\n**Note:**\nThe content and the `additionalText` would be displayed vertically by default,\nbut when set to `Inline`, they would be displayed horizontally.", + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "overflowMode", + "name": "accessibleNameRef", "type": { - "text": "OverflowMode", - "references": [ - { - "name": "OverflowMode", - "package": "@ui5/webcomponents", - "module": "dist/types/OverflowMode.js" - } - ] + "text": "string | undefined" }, - "default": "\"End\"", - "description": "Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible.\nAll other tabs that can 't fit on the screen are available in an overflow tab \"More\".\n\n**Note:**\nOnly one overflow at the end would be displayed by default,\nbut when set to `StartAndEnd`, there will be two overflows on both ends, and tab order will not change on tab selection.", - "privacy": "public", - "_ui5since": "1.1.0" + "description": "Receives id(or many ids) of the elements that label the component.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "headerBackgroundDesign", + "name": "accessibilityAttributes", "type": { - "text": "BackgroundDesign", + "text": "ToolbarButtonAccessibilityAttributes", "references": [ { - "name": "BackgroundDesign", + "name": "ToolbarButtonAccessibilityAttributes", "package": "@ui5/webcomponents", - "module": "dist/types/BackgroundDesign.js" + "module": "dist/ToolbarButton.js" } ] }, - "default": "\"Solid\"", - "description": "Sets the background color of the Tab Container's header as `Solid`, `Transparent`, or `Translucent`.", - "privacy": "public", - "_ui5since": "1.10.0" + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "privacy": "public" }, { "kind": "field", - "name": "contentBackgroundDesign", + "name": "text", "type": { - "text": "BackgroundDesign", - "references": [ - { - "name": "BackgroundDesign", - "package": "@ui5/webcomponents", - "module": "dist/types/BackgroundDesign.js" - } - ] + "text": "string | undefined" }, - "default": "\"Solid\"", - "description": "Sets the background color of the Tab Container's content as `Solid`, `Transparent`, or `Translucent`.", + "description": "Button text", "privacy": "public", - "_ui5since": "1.10.0" + "default": "undefined" }, { "kind": "field", - "name": "noAutoSelection", + "name": "width", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines if automatic tab selection is deactivated.\n\n**Note:** By default, if none of the child tabs have the `selected` property set, the first tab will be automatically selected.\nSetting this property to `true` allows preventing this behavior.", - "privacy": "public", - "_ui5since": "2.9.0" + "description": "Defines the width of the button.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "allItems", + "name": "overflowPriority", "type": { - "text": "Array<ITab>", + "text": "ToolbarItemOverflowBehavior", "references": [ { - "name": "ITab", + "name": "ToolbarItemOverflowBehavior", "package": "@ui5/webcomponents", - "module": "dist/TabContainer.js" + "module": "dist/types/ToolbarItemOverflowBehavior.js" } ] }, - "description": "Returns all slotted tabs and their subTabs in a flattened array.\nThe order of tabs is depth-first.", + "default": "\"Default\"", + "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", "privacy": "public", - "default": "[]", - "readonly": true + "inheritedFrom": { + "name": "ToolbarItem", + "module": "dist/ToolbarItem.js" + } + }, + { + "kind": "field", + "name": "preventOverflowClosing", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", + "privacy": "public", + "inheritedFrom": { + "name": "ToolbarItem", + "module": "dist/ToolbarItem.js" + } } ], "events": [ { - "name": "tab-select", + "name": "click", "_ui5privacy": "public", "type": { - "text": "CustomEvent<TabContainerTabSelectEventDetail>", - "references": [ - { - "name": "TabContainerTabSelectEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/TabContainer.js" - } - ] + "text": "CustomEvent" }, - "description": "Fired when a tab is selected.", + "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5since": "2.0.0", - "_ui5parameters": [ - { - "type": { - "text": "Tab", - "references": [ - { - "name": "Tab", - "package": "@ui5/webcomponents", - "module": "dist/Tab.js" - } - ] - }, - "name": "tab", - "_ui5privacy": "public", - "description": "The selected `tab`." - }, - { - "type": { - "text": "Integer" - }, - "name": "tabIndex", - "_ui5privacy": "public", - "description": "The selected `tab` index in the flattened array of all tabs and their subTabs, provided by the `allItems` getter." - } - ] + "_ui5Bubbles": true + } + ], + "attributes": [ + { + "description": "Defines if the action is disabled.\n\n**Note:** a disabled action can't be pressed or focused, and it is not in the tab chain.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + } }, { - "name": "move-over", - "_ui5privacy": "public", + "description": "Defines the action design.", + "name": "design", + "default": "\"Default\"", + "fieldName": "design", "type": { - "text": "CustomEvent<TabContainerMoveEventDetail>", - "references": [ - { - "name": "TabContainerMoveEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/TabContainer.js" - } - ] - }, - "description": "Fired when element is being moved over the tab container.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5since": "2.0.0", - "_ui5parameters": [ - { - "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." - }, - { - "type": { - "text": "object" - }, - "name": "destination", - "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." - } - ] + "text": "\"Transparent\" | \"Default\" | \"Positive\" | \"Negative\" | \"Emphasized\" | \"Attention\"" + } }, { - "name": "move", - "_ui5privacy": "public", + "description": "Defines the `icon` source URI.\n\n**Note:** SAP-icons font provides numerous buil-in icons. To find all the available icons, see the\n[Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", "type": { - "text": "CustomEvent<TabContainerMoveEventDetail>", - "references": [ - { - "name": "TabContainerMoveEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/TabContainer.js" - } - ] - }, - "description": "Fired when element is moved to the tab container.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under `element` property." - }, - { - "type": { - "text": "object" - }, - "name": "destination", - "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." - } - ] - } - ], - "attributes": [ + "text": "string | undefined" + } + }, { - "description": "Defines whether the tab content is collapsed.", - "name": "collapsed", - "default": "false", - "fieldName": "collapsed", + "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "end-icon", + "default": "undefined", + "fieldName": "endIcon", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Defines the alignment of the content and the `additionalText` of a tab.\n\n**Note:**\nThe content and the `additionalText` would be displayed vertically by default,\nbut when set to `Inline`, they would be displayed horizontally.", - "name": "tab-layout", - "default": "\"Standard\"", - "fieldName": "tabLayout", + "description": "Defines the tooltip of the component.\n\n**Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", "type": { - "text": "\"Standard\" | \"Inline\"" + "text": "string | undefined" } }, { - "description": "Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible.\nAll other tabs that can 't fit on the screen are available in an overflow tab \"More\".\n\n**Note:**\nOnly one overflow at the end would be displayed by default,\nbut when set to `StartAndEnd`, there will be two overflows on both ends, and tab order will not change on tab selection.", - "name": "overflow-mode", - "default": "\"End\"", - "fieldName": "overflowMode", + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "\"End\" | \"StartAndEnd\"" + "text": "string | undefined" } }, { - "description": "Sets the background color of the Tab Container's header as `Solid`, `Transparent`, or `Translucent`.", - "name": "header-background-design", - "default": "\"Solid\"", - "fieldName": "headerBackgroundDesign", + "description": "Receives id(or many ids) of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", "type": { - "text": "\"Transparent\" | \"Solid\" | \"Translucent\"" + "text": "string | undefined" } }, { - "description": "Sets the background color of the Tab Container's content as `Solid`, `Transparent`, or `Translucent`.", - "name": "content-background-design", - "default": "\"Solid\"", - "fieldName": "contentBackgroundDesign", + "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "\"Transparent\" | \"Solid\" | \"Translucent\"" + "text": "ButtonAccessibilityAttributes" } }, { - "description": "Defines if automatic tab selection is deactivated.\n\n**Note:** By default, if none of the child tabs have the `selected` property set, the first tab will be automatically selected.\nSetting this property to `true` allows preventing this behavior.", - "name": "no-auto-selection", - "default": "false", - "fieldName": "noAutoSelection", + "description": "Button text", + "name": "text", + "default": "undefined", + "fieldName": "text", "type": { - "text": "boolean" + "text": "string | undefined" } }, { - "description": "Returns all slotted tabs and their subTabs in a flattened array.\nThe order of tabs is depth-first.", - "name": "all-items", - "default": "[]", - "fieldName": "allItems", + "description": "Defines the width of the button.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", + "name": "width", + "default": "undefined", + "fieldName": "width", "type": { - "text": "any" + "text": "string | undefined" + } + }, + { + "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "name": "overflow-priority", + "default": "\"Default\"", + "fieldName": "overflowPriority", + "type": { + "text": "\"Default\" | \"NeverOverflow\" | \"AlwaysOverflow\"" + }, + "inheritedFrom": { + "name": "ToolbarItem", + "module": "dist/ToolbarItem.js" + } + }, + { + "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", + "name": "prevent-overflow-closing", + "default": "false", + "fieldName": "preventOverflowClosing", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "ToolbarItem", + "module": "dist/ToolbarItem.js" } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "ToolbarItem", + "package": "@ui5/webcomponents", + "module": "dist/ToolbarItem.js" }, - "tagName": "ui5-tabcontainer", + "tagName": "ui5-toolbar-button", "customElement": true, - "_ui5privacy": "public" + "_ui5since": "1.17.0", + "_ui5privacy": "public", + "_ui5abstract": true } ], "exports": [ @@ -27429,57 +28968,86 @@ "kind": "js", "name": "default", "declaration": { - "name": "TabContainer", - "module": "dist/TabContainer.js" + "name": "ToolbarButton", + "module": "dist/ToolbarButton.js" } }, { "kind": "custom-element-definition", - "name": "ui5-tabcontainer", + "name": "ui5-toolbar-button", "declaration": { - "name": "TabContainer", - "module": "dist/TabContainer.js" + "name": "ToolbarButton", + "module": "dist/ToolbarButton.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TabSeparator.js", + "path": "dist/ToolbarItem.js", "declarations": [ { "kind": "class", - "description": "The `ui5-tab-separator` represents a vertical line to separate tabs inside a `ui5-tabcontainer`.", - "name": "TabSeparator", + "description": "Represents an abstract class for items, used in the `ui5-toolbar`.", + "name": "ToolbarItem", "members": [ { - "kind": "method", - "name": "getDomRefInStrip", - "return": { - "type": { - "text": "HTMLElement | undefined" - } + "kind": "field", + "name": "overflowPriority", + "type": { + "text": "ToolbarItemOverflowBehavior", + "references": [ + { + "name": "ToolbarItemOverflowBehavior", + "package": "@ui5/webcomponents", + "module": "dist/types/ToolbarItemOverflowBehavior.js" + } + ] }, - "description": "Returns the DOM reference of the separator that is placed in the header.\n\n**Note:** Separators, placed in the `items` slot of other tabs are not shown in the header. Calling this method on such separators will return `undefined`.", + "default": "\"Default\"", + "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "privacy": "public" + }, + { + "kind": "field", + "name": "preventOverflowClosing", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", "privacy": "public" } ], + "attributes": [ + { + "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "name": "overflow-priority", + "default": "\"Default\"", + "fieldName": "overflowPriority", + "type": { + "text": "\"Default\" | \"NeverOverflow\" | \"AlwaysOverflow\"" + } + }, + { + "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", + "name": "prevent-overflow-closing", + "default": "false", + "fieldName": "preventOverflowClosing", + "type": { + "text": "boolean" + } + } + ], "superclass": { "name": "UI5Element", "package": "@ui5/webcomponents-base", "module": "dist/UI5Element.js" }, - "tagName": "ui5-tab-separator", "customElement": true, + "_ui5since": "1.17.0", "_ui5privacy": "public", - "_ui5abstract": true, - "_ui5implements": [ - { - "name": "ITab", - "package": "@ui5/webcomponents", - "module": "dist/TabContainer.js" - } - ] + "_ui5abstract": true } ], "exports": [ @@ -27487,99 +29055,85 @@ "kind": "js", "name": "default", "declaration": { - "name": "TabSeparator", - "module": "dist/TabSeparator.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-tab-separator", - "declaration": { - "name": "TabSeparator", - "module": "dist/TabSeparator.js" + "name": "ToolbarItem", + "module": "dist/ToolbarItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Table.js", + "path": "dist/ToolbarSelect.js", "declarations": [ - { - "kind": "interface", - "name": "ITableFeature", - "description": "Interface for components that can be slotted inside the `features` slot of the `ui5-table`.", - "_ui5experimental": true, - "_ui5privacy": "public" - }, - { - "kind": "interface", - "name": "ITableGrowing", - "description": "Interface for components that can be slotted inside the `features` slot of the `ui5-table`\nand provide growing/data loading functionality.", - "_ui5experimental": true, - "_ui5privacy": "public" - }, { "kind": "class", - "description": "### Overview\n\nThe `ui5-table` component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner.\nTo render the `ui5-table`, you need to define the columns and rows. You can use the provided `ui5-table-header-row` and `ui5-table-row` components for this purpose.\n\n### Features\n\nThe `ui5-table` can be enhanced in its functionalities by applying different features.\nFeatures can be slotted into the `features` slot, to enable them in the component.\nFeatures need to be imported separately, as they are not enabled by default.\n\nThe following features are currently available:\n\n* [TableSelection](../TableSelection) - adds selection capabilities to the table\n* [TableGrowing](../TableGrowing) - provides growing capabilities to load more data\n\n### Keyboard Handling\n\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\nFurthermore, you can interact with `ui5-table` via the following keys:\n\nIf the focus is on a row, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Selects the first cell of the row\n* <kbd>Space</kbd> - Toggles the selection of the row\n* <kbd>Ctrl/Cmd + A</kbd> - In multi selection mode, toggles the selection of all rows\n* <kbd>Home</kbd> - Navigates to the first row, if the focus is on the first row, navigates to the header row\n* <kbd>End</kbd> - Navigates to the last row, if the focus is on the last row, navigates to the growing button\n* <kbd>Page Up</kbd> - Navigates one page up, if the focus is on the first row, navigates to the header row\n* <kbd>Page Down</kbd> - Navigates one page down, if the focus is on the last row, navigates to the growing button\n* <kbd>F2</kbd> - Focuses the first tabbable element in the row\n* <kbd>F7</kbd> - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\n\nIf the focus is on a cell, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Navigates right\n* <kbd>Left</kbd> - Navigates left, if the focus is on the first cell of the row, the focus is moved to the row.\n* <kbd>Home</kbd> - Navigates to the first cell of the current row, if the focus is on the first cell, navigates to the corresponding row\n* <kbd>End</kbd> - Navigates to the last cell of the current row, if the focus is on the last cell, navigates to the corresponding row\n* <kbd>Page Up</kbd> - Navigates one page up while keeping the focus in same column\n* <kbd>Page Down</kbd> - Navigates one page down while keeping the focus in same column\n* <kbd>F2</kbd> - Toggles the focus between the first tabbable cell content and the cell\n* <kbd>Enter</kbd> - Focuses the first tabbable cell content\n* <kbd>F7</kbd> - If the focus is on an interactive element inside a row, moves focus to the corresponding row and remembers the focus position of the element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\n\nIf the focus is on an interactive cell content, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default\n* <kbd>Up</kbd> - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default\n* <kbd>[Shift]Tab</kbd> - Move the focus to the element in the tab chain\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Table.js\";`\\\n`import \"@ui5/webcomponents/dist/TableRow.js\";` (`ui5-table-row`)\\\n`import \"@ui5/webcomponents/dist/TableCell.js\";` (`ui5-table-cell`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";` (`ui5-table-header-row`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";` (`ui5-table-header-cell`)", - "name": "Table", + "description": "### Overview\nThe `ui5-toolbar-select` component is used to create a toolbar drop-down list.\nThe items inside the `ui5-toolbar-select` define the available options by using the `ui5-toolbar-select-option` component.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/ToolbarSelect.js\";`\n\n`import \"@ui5/webcomponents/dist/ToolbarSelectOption.js\";` (comes with `ui5-toolbar-select`)", + "name": "ToolbarSelect", "slots": [ { "name": "default", - "description": "Defines the rows of the component.\n\n**Note:** Use `ui5-table-row` for the intended design.", - "_ui5propertyName": "rows", + "description": "Defines the component options.\n\n**Note:** Only one selected option is allowed.\nIf more than one option is defined as selected, the last one would be considered as the selected one.\n\n**Note:** Use the `ui5-toolbar-select-option` component to define the desired options.", + "_ui5propertyName": "options", "_ui5type": { - "text": "Array<TableRow>", + "text": "Array<ToolbarSelectOption>", "references": [ { - "name": "TableRow", + "name": "ToolbarSelectOption", "package": "@ui5/webcomponents", - "module": "dist/TableRow.js" + "module": "dist/ToolbarSelectOption.js" } ] }, "_ui5privacy": "public" }, { - "name": "headerRow", - "description": "Defines the header row of the component.\n\n**Note:** Use `ui5-table-header-row` for the intended design.", + "name": "label", + "description": "Defines the HTML element that will be displayed in the component input part,\nrepresenting the selected option.", + "_ui5since": "2.15.0", "_ui5type": { - "text": "Array<TableHeaderRow>", - "references": [ - { - "name": "TableHeaderRow", - "package": "@ui5/webcomponents", - "module": "dist/TableHeaderRow.js" - } - ] + "text": "Array<HTMLElement>" }, "_ui5privacy": "public" - }, + } + ], + "members": [ { - "name": "noData", - "description": "Defines the custom visualization if there is no data available.", - "_ui5type": { - "text": "Array<HTMLElement>" + "kind": "field", + "name": "width", + "type": { + "text": "string | undefined" }, - "_ui5privacy": "public" + "description": "Defines the width of the select.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", + "default": "undefined", + "privacy": "public" }, { - "name": "features", - "description": "Defines the features of the component.", - "_ui5type": { - "text": "Array<ITableFeature>", + "kind": "field", + "name": "valueState", + "type": { + "text": "ValueState", "references": [ { - "name": "ITableFeature", - "package": "@ui5/webcomponents", - "module": "dist/Table.js" + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" } ] }, - "_ui5privacy": "public" - } - ], - "members": [ + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is noninteractive.", + "privacy": "public" + }, { "kind": "field", "name": "accessibleName", @@ -27587,8 +29141,8 @@ "text": "string | undefined" }, "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public" + "privacy": "public", + "default": "undefined" }, { "kind": "field", @@ -27596,319 +29150,201 @@ "type": { "text": "string | undefined" }, - "description": "Identifies the element (or elements) that labels the component.", + "description": "Receives id(or many ids) of the elements that label the select.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "noDataText", + "name": "value", + "description": "Defines the value of the component:", + "privacy": "public", + "default": "\"\"", "type": { "text": "string | undefined" }, - "description": "Defines the text to be displayed when there are no rows in the component.", - "default": "undefined", - "privacy": "public" + "_ui5since": "2.15.0" }, { "kind": "field", - "name": "overflowMode", + "name": "overflowPriority", "type": { - "text": "TableOverflowMode", + "text": "ToolbarItemOverflowBehavior", "references": [ { - "name": "TableOverflowMode", + "name": "ToolbarItemOverflowBehavior", "package": "@ui5/webcomponents", - "module": "dist/types/TableOverflowMode.js" + "module": "dist/types/ToolbarItemOverflowBehavior.js" } ] }, - "default": "\"Scroll\"", - "description": "Defines the mode of the <code>ui5-table</code> overflow behavior.\n\nAvailable options are:\n\n<code>Scroll</code> - Columns are shown as regular columns and horizontal scrolling is enabled.\n<code>Popin</code> - Columns are shown as pop-ins instead of regular columns.", - "privacy": "public" + "default": "\"Default\"", + "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "privacy": "public", + "inheritedFrom": { + "name": "ToolbarItem", + "module": "dist/ToolbarItem.js" + } }, { "kind": "field", - "name": "loading", + "name": "preventOverflowClosing", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the loading indicator should be shown.\n\n**Note:** When the component is loading, it is not interactive.", - "privacy": "public" - }, - { - "kind": "field", - "name": "loadingDelay", - "type": { - "text": "number" - }, - "default": "1000", - "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", - "privacy": "public" - }, - { - "kind": "field", - "name": "rowActionCount", - "type": { - "text": "number" - }, - "default": "0", - "description": "Defines the maximum number of row actions that is displayed, which determines the width of the row action column.\n\n**Note:** It is recommended to use a maximum of 3 row actions, as exceeding this limit may take up too much space on smaller screens.", + "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", "privacy": "public", - "_ui5since": "2.7.0" + "inheritedFrom": { + "name": "ToolbarItem", + "module": "dist/ToolbarItem.js" + } } ], "events": [ { - "name": "row-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<TableRowClickEventDetail>", - "references": [ - { - "name": "TableRowClickEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Table.js" - } - ] - }, - "description": "Fired when an interactive row is clicked.\n\n**Note:** This event is not fired if the `behavior` property of the selection component is set to `RowOnly`.\nIn that case, use the `change` event of the selection component instead.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "TableRow", - "references": [ - { - "name": "TableRow", - "package": "@ui5/webcomponents", - "module": "dist/TableRow.js" - } - ] - }, - "name": "row", - "_ui5privacy": "public", - "description": "The row instance" - } - ] - }, - { - "name": "move-over", + "name": "change", "_ui5privacy": "public", "type": { - "text": "CustomEvent<TableMoveEventDetail>", + "text": "CustomEvent<ToolbarSelectChangeEventDetail>", "references": [ { - "name": "TableMoveEventDetail", + "name": "ToolbarSelectChangeEventDetail", "package": "@ui5/webcomponents", - "module": "dist/Table.js" + "module": "dist/ToolbarSelect.js" } ] }, - "description": "Fired when a movable item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n\n**Note:** If the dragging operation is a cross-browser operation or files are moved to a potential drop target,\nthe `source` parameter will be `null`.", + "description": "Fired when the selected option changes.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, "_ui5Bubbles": true, "_ui5parameters": [ { "type": { - "text": "Event" - }, - "name": "originalEvent", - "_ui5privacy": "public", - "description": "The original `dragover` event" - }, - { - "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "The source object" - }, - { - "type": { - "text": "object" + "text": "HTMLElement" }, - "name": "destination", + "name": "selectedOption", "_ui5privacy": "public", - "description": "The destination object" + "description": "the selected option." } ] }, { - "name": "move", + "name": "open", "_ui5privacy": "public", "type": { - "text": "CustomEvent<TableMoveEventDetail>", - "references": [ - { - "name": "TableMoveEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Table.js" - } - ] + "text": "CustomEvent" }, - "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Notes:**\n\nThe `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\nIf the dragging operation is a cross-browser operation or files are moved to a potential drop target,\nthe `source` parameter will be `null`.", + "description": "Fired after the component's dropdown menu opens.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "Event" - }, - "name": "originalEvent", - "_ui5privacy": "public", - "description": "The original `drop` event" - }, - { - "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "The source object" - }, - { - "type": { - "text": "object" - }, - "name": "destination", - "_ui5privacy": "public", - "description": "The destination object" - } - ] + "_ui5Bubbles": true }, { - "name": "row-action-click", + "name": "close", "_ui5privacy": "public", "type": { - "text": "CustomEvent<TableRowActionClickEventDetail>", - "references": [ - { - "name": "TableRowActionClickEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Table.js" - } - ] + "text": "CustomEvent" }, - "description": "Fired when a row action is clicked.", + "description": "Fired after the component's dropdown menu closes.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.6.0", - "_ui5parameters": [ - { - "type": { - "text": "TableRowActionBase", - "references": [ - { - "name": "TableRowActionBase", - "package": "@ui5/webcomponents", - "module": "dist/TableRowActionBase.js" - } - ] - }, - "name": "action", - "_ui5privacy": "public", - "description": "The row action instance" - }, - { - "type": { - "text": "TableRow", - "references": [ - { - "name": "TableRow", - "package": "@ui5/webcomponents", - "module": "dist/TableRow.js" - } - ] - }, - "name": "row", - "_ui5privacy": "public", - "description": "The row instance" - } - ] + "_ui5Bubbles": false } ], "attributes": [ { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", + "description": "Defines the width of the select.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", + "name": "width", "default": "undefined", - "fieldName": "accessibleName", + "fieldName": "width", "type": { "text": "string | undefined" } }, { - "description": "Identifies the element (or elements) that labels the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", "type": { - "text": "string | undefined" + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" } }, { - "description": "Defines the text to be displayed when there are no rows in the component.", - "name": "no-data-text", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is noninteractive.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", "default": "undefined", - "fieldName": "noDataText", + "fieldName": "accessibleName", "type": { "text": "string | undefined" } }, { - "description": "Defines the mode of the <code>ui5-table</code> overflow behavior.\n\nAvailable options are:\n\n<code>Scroll</code> - Columns are shown as regular columns and horizontal scrolling is enabled.\n<code>Popin</code> - Columns are shown as pop-ins instead of regular columns.", - "name": "overflow-mode", - "default": "\"Scroll\"", - "fieldName": "overflowMode", + "description": "Receives id(or many ids) of the elements that label the select.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", "type": { - "text": "\"Scroll\" | \"Popin\"" + "text": "string | undefined" } }, { - "description": "Defines if the loading indicator should be shown.\n\n**Note:** When the component is loading, it is not interactive.", - "name": "loading", - "default": "false", - "fieldName": "loading", + "description": "Defines the value of the component:", + "name": "value", + "default": "\"\"", + "fieldName": "value", "type": { - "text": "boolean" + "text": "any" } }, { - "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", - "name": "loading-delay", - "default": "1000", - "fieldName": "loadingDelay", + "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "name": "overflow-priority", + "default": "\"Default\"", + "fieldName": "overflowPriority", "type": { - "text": "number" + "text": "\"Default\" | \"NeverOverflow\" | \"AlwaysOverflow\"" + }, + "inheritedFrom": { + "name": "ToolbarItem", + "module": "dist/ToolbarItem.js" } }, { - "description": "Defines the maximum number of row actions that is displayed, which determines the width of the row action column.\n\n**Note:** It is recommended to use a maximum of 3 row actions, as exceeding this limit may take up too much space on smaller screens.", - "name": "row-action-count", - "default": "0", - "fieldName": "rowActionCount", + "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", + "name": "prevent-overflow-closing", + "default": "false", + "fieldName": "preventOverflowClosing", "type": { - "text": "number" + "text": "boolean" + }, + "inheritedFrom": { + "name": "ToolbarItem", + "module": "dist/ToolbarItem.js" } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "ToolbarItem", + "package": "@ui5/webcomponents", + "module": "dist/ToolbarItem.js" }, - "tagName": "ui5-table", + "tagName": "ui5-toolbar-select", "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public" + "_ui5since": "1.17.0", + "_ui5privacy": "public", + "_ui5abstract": true } ], "exports": [ @@ -27916,90 +29352,72 @@ "kind": "js", "name": "default", "declaration": { - "name": "Table", - "module": "dist/Table.js" + "name": "ToolbarSelect", + "module": "dist/ToolbarSelect.js" } }, { "kind": "custom-element-definition", - "name": "ui5-table", + "name": "ui5-toolbar-select", "declaration": { - "name": "Table", - "module": "dist/Table.js" + "name": "ToolbarSelect", + "module": "dist/ToolbarSelect.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TableCell.js", + "path": "dist/ToolbarSelectOption.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-table-cell` represents a cell inside of a `ui5-table`.\nIt is tightly coupled to the `ui5-table` and thus should only be used in the table component.\n\n### ES6 Module Import\n\n`import @ui5/webcomponents/dist/TableCell.js;`", - "name": "TableCell", - "members": [ - { - "kind": "field", - "name": "horizontalAlign", - "type": { - "text": "TableCellHorizontalAlign | undefined", - "references": [ - { - "name": "TableCellHorizontalAlign", - "package": "@ui5/webcomponents", - "module": "dist/types/TableCellHorizontalAlign.js" - } - ] - }, - "description": "Determines the horizontal alignment of table cells.", - "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "TableCellBase", - "module": "dist/TableCellBase.js" - } - } - ], - "superclass": { - "name": "TableCellBase", - "package": "@ui5/webcomponents", - "module": "dist/TableCellBase.js" - }, - "tagName": "ui5-table-cell", - "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public", + "description": "### Overview\n\nThe `ui5-toolbar-select-option` component defines the content of an option in the `ui5-toolbar-select`.", + "name": "ToolbarSelectOption", "slots": [ { "name": "default", - "description": "Defines the content of the component.", - "_ui5propertyName": "content", + "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", + "_ui5propertyName": "text", "_ui5type": { "text": "Array<Node>" }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "TableCellBase", - "module": "dist/TableCellBase.js" - } + "_ui5privacy": "public" } ], - "attributes": [ + "members": [ { - "description": "Determines the horizontal alignment of table cells.", - "name": "horizontal-align", - "default": "undefined", - "fieldName": "horizontalAlign", + "kind": "field", + "name": "selected", "type": { - "text": "\"Center\" | \"Start\" | \"End\" | \"Left\" | \"Right\" | undefined" + "text": "boolean" }, - "inheritedFrom": { - "name": "TableCellBase", - "module": "dist/TableCellBase.js" + "default": "false", + "description": "Defines the selected state of the component.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" } } - ] + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-toolbar-select-option", + "customElement": true, + "_ui5since": "1.17.0", + "_ui5privacy": "public", + "_ui5abstract": true } ], "exports": [ @@ -28007,78 +29425,103 @@ "kind": "js", "name": "default", "declaration": { - "name": "TableCell", - "module": "dist/TableCell.js" + "name": "ToolbarSelectOption", + "module": "dist/ToolbarSelectOption.js" } }, { "kind": "custom-element-definition", - "name": "ui5-table-cell", + "name": "ui5-toolbar-select-option", "declaration": { - "name": "TableCell", - "module": "dist/TableCell.js" + "name": "ToolbarSelectOption", + "module": "dist/ToolbarSelectOption.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TableCellBase.js", + "path": "dist/ToolbarSeparator.js", "declarations": [ { "kind": "class", - "description": "A class to serve as a foundation for the `TableCell` and `TableHeaderCell` classes.", - "name": "TableCellBase", - "slots": [ - { - "name": "default", - "description": "Defines the content of the component.", - "_ui5propertyName": "content", - "_ui5type": { - "text": "Array<Node>" - }, - "_ui5privacy": "public" - } - ], - "members": [ + "description": "### Overview\nThe `ui5-toolbar-separator` is an element, used for visual separation between two elements.\nIt takes no space in calculating toolbar items width.", + "name": "ToolbarSeparator", + "members": [ { "kind": "field", - "name": "horizontalAlign", + "name": "overflowPriority", "type": { - "text": "TableCellHorizontalAlign | undefined", + "text": "ToolbarItemOverflowBehavior", "references": [ { - "name": "TableCellHorizontalAlign", + "name": "ToolbarItemOverflowBehavior", "package": "@ui5/webcomponents", - "module": "dist/types/TableCellHorizontalAlign.js" + "module": "dist/types/ToolbarItemOverflowBehavior.js" } ] }, - "description": "Determines the horizontal alignment of table cells.", - "default": "undefined", - "privacy": "public" - } - ], - "attributes": [ + "default": "\"Default\"", + "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "privacy": "public", + "inheritedFrom": { + "name": "ToolbarItem", + "module": "dist/ToolbarItem.js" + } + }, { - "description": "Determines the horizontal alignment of table cells.", - "name": "horizontal-align", - "default": "undefined", - "fieldName": "horizontalAlign", + "kind": "field", + "name": "preventOverflowClosing", "type": { - "text": "\"Center\" | \"Start\" | \"End\" | \"Left\" | \"Right\" | undefined" + "text": "boolean" + }, + "default": "false", + "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", + "privacy": "public", + "inheritedFrom": { + "name": "ToolbarItem", + "module": "dist/ToolbarItem.js" } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "ToolbarItem", + "package": "@ui5/webcomponents", + "module": "dist/ToolbarItem.js" }, + "tagName": "ui5-toolbar-separator", "customElement": true, - "_ui5since": "2.0.0", + "_ui5since": "1.17.0", "_ui5privacy": "public", - "_ui5abstract": true + "_ui5abstract": true, + "attributes": [ + { + "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "name": "overflow-priority", + "default": "\"Default\"", + "fieldName": "overflowPriority", + "type": { + "text": "\"Default\" | \"NeverOverflow\" | \"AlwaysOverflow\"" + }, + "inheritedFrom": { + "name": "ToolbarItem", + "module": "dist/ToolbarItem.js" + } + }, + { + "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", + "name": "prevent-overflow-closing", + "default": "false", + "fieldName": "preventOverflowClosing", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "ToolbarItem", + "module": "dist/ToolbarItem.js" + } + } + ] } ], "exports": [ @@ -28086,155 +29529,122 @@ "kind": "js", "name": "default", "declaration": { - "name": "TableCellBase", - "module": "dist/TableCellBase.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableCustomAnnouncement.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableCustomAnnouncement", - "module": "dist/TableCustomAnnouncement.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableDragAndDrop.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableDragAndDrop", - "module": "dist/TableDragAndDrop.js" + "name": "ToolbarSeparator", + "module": "dist/ToolbarSeparator.js" } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableExtension.js", - "declarations": [], - "exports": [ + }, { - "kind": "js", - "name": "default", + "kind": "custom-element-definition", + "name": "ui5-toolbar-separator", "declaration": { - "name": "TableExtension", - "module": "dist/TableExtension.js" + "name": "ToolbarSeparator", + "module": "dist/ToolbarSeparator.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TableGrowing.js", + "path": "dist/ToolbarSpacer.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-table-growing` component is used inside the `ui5-table` to add a growing/data loading functionalities\nto the table.\n\nThe component offers two options:\n* Button - a More button is displayed, clicking it will load more data.\n* Scroll - additional data is loaded automatically when the user scrolls to the end of the table.\n\n### Usage\n\nThe `ui5-table-growing` component is only used inside the `ui5-table` component as a feature.\nIt has to be slotted inside the `ui5-table` in the `features` slot.\nThe component is not intended to be used as a standalone component.\n\n```html\n<ui5-table>\n\t<ui5-table-growing mode=\"Button\" text=\"More\" slot=\"features\"></ui5-table-growing>\n</ui5-table>\n```\n\n**Notes**:\n* When the `ui5-table-growing` component is used with the `Scroll` mode and the table is currently not scrollable,\nthe component will render a growing button instead to ensure growing capabilities until the table becomes scrollable.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableGrowing.js\";`", - "name": "TableGrowing", + "description": "### Overview\nThe `ui5-toolbar-spacer` is an element, used for taking needed space for toolbar items to take 100% width.\nIt takes no space in calculating toolbar items width.", + "name": "ToolbarSpacer", "members": [ { "kind": "field", - "name": "mode", + "name": "width", "type": { - "text": "TableGrowingMode", - "references": [ - { - "name": "TableGrowingMode", - "package": "@ui5/webcomponents", - "module": "dist/types/TableGrowingMode.js" - } - ] + "text": "string | undefined" }, - "default": "\"Button\"", - "description": "Defines the mode of the <code>ui5-table</code> growing.\n\nAvailable options are:\n\nButton - Shows a More button at the bottom of the table, pressing it will load more rows.\n\nScroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable,\na growing button will be rendered instead to ensure growing functionality.", - "privacy": "public" + "description": "Defines the width of the spacer.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", + "privacy": "public", + "default": "undefined" }, { "kind": "field", - "name": "text", + "name": "overflowPriority", "type": { - "text": "string | undefined" + "text": "ToolbarItemOverflowBehavior", + "references": [ + { + "name": "ToolbarItemOverflowBehavior", + "package": "@ui5/webcomponents", + "module": "dist/types/ToolbarItemOverflowBehavior.js" + } + ] }, - "description": "Defines the text that will be displayed inside the growing button.\nHas no effect when mode is set to `Scroll`.\n\n**Note:** When not provided and the mode is set to Button, a default text is displayed, corresponding to the\ncurrent language.", - "default": "undefined", - "privacy": "public" + "default": "\"Default\"", + "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "privacy": "public", + "inheritedFrom": { + "name": "ToolbarItem", + "module": "dist/ToolbarItem.js" + } }, { "kind": "field", - "name": "subtext", - "type": { - "text": "string | undefined" - }, - "description": "Defines the text that will be displayed below the `text` inside the growing button.\nHas no effect when mode is set to Scroll.", - "default": "undefined", - "privacy": "public" - } - ], - "events": [ - { - "name": "load-more", - "_ui5privacy": "public", + "name": "preventOverflowClosing", "type": { - "text": "CustomEvent" + "text": "boolean" }, - "description": "Fired when the growing button is pressed or the user scrolls to the end of the table.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "default": "false", + "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", + "privacy": "public", + "inheritedFrom": { + "name": "ToolbarItem", + "module": "dist/ToolbarItem.js" + } } ], "attributes": [ { - "description": "Defines the mode of the <code>ui5-table</code> growing.\n\nAvailable options are:\n\nButton - Shows a More button at the bottom of the table, pressing it will load more rows.\n\nScroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable,\na growing button will be rendered instead to ensure growing functionality.", - "name": "mode", - "default": "\"Button\"", - "fieldName": "mode", + "description": "Defines the width of the spacer.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", + "name": "width", + "default": "undefined", + "fieldName": "width", "type": { - "text": "\"Button\" | \"Scroll\"" + "text": "string | undefined" } }, { - "description": "Defines the text that will be displayed inside the growing button.\nHas no effect when mode is set to `Scroll`.\n\n**Note:** When not provided and the mode is set to Button, a default text is displayed, corresponding to the\ncurrent language.", - "name": "text", - "default": "undefined", - "fieldName": "text", + "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "name": "overflow-priority", + "default": "\"Default\"", + "fieldName": "overflowPriority", "type": { - "text": "string | undefined" + "text": "\"Default\" | \"NeverOverflow\" | \"AlwaysOverflow\"" + }, + "inheritedFrom": { + "name": "ToolbarItem", + "module": "dist/ToolbarItem.js" } }, { - "description": "Defines the text that will be displayed below the `text` inside the growing button.\nHas no effect when mode is set to Scroll.", - "name": "subtext", - "default": "undefined", - "fieldName": "subtext", + "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", + "name": "prevent-overflow-closing", + "default": "false", + "fieldName": "preventOverflowClosing", "type": { - "text": "string | undefined" + "text": "boolean" + }, + "inheritedFrom": { + "name": "ToolbarItem", + "module": "dist/ToolbarItem.js" } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "ToolbarItem", + "package": "@ui5/webcomponents", + "module": "dist/ToolbarItem.js" }, - "tagName": "ui5-table-growing", + "tagName": "ui5-toolbar-spacer", "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public" + "_ui5since": "1.17.0", + "_ui5privacy": "public", + "_ui5abstract": true } ], "exports": [ @@ -28242,444 +29652,517 @@ "kind": "js", "name": "default", "declaration": { - "name": "TableGrowing", - "module": "dist/TableGrowing.js" + "name": "ToolbarSpacer", + "module": "dist/ToolbarSpacer.js" } }, { "kind": "custom-element-definition", - "name": "ui5-table-growing", + "name": "ui5-toolbar-spacer", "declaration": { - "name": "TableGrowing", - "module": "dist/TableGrowing.js" + "name": "ToolbarSpacer", + "module": "dist/ToolbarSpacer.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TableHeaderCell.js", + "path": "dist/Tree.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-table-header-cell` component represents a column in the `ui5-table`.\n\nAs it is tightly coupled to the `ui5-table`, it should only be used in the `ui5-table-header-row`\nto ensure correct layout and design.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";`", - "name": "TableHeaderCell", + "description": "### Overview\nThe `ui5-tree` component provides a tree structure for displaying data in a hierarchy.\n\n### Usage\n\n#### When to use:\n\n- To display hierarchically structured items.\n- To select one or more items out of a set of hierarchically structured items.\n\n#### When not to use:\n\n- To display items not hierarchically structured. In this case, use the List component.\n- To select one item from a very small number of non-hierarchical items. Select or ComboBox might be more appropriate.\n- The hierarchy turns out to have only two levels. In this case, use List with group items.\n\n### Keyboard Handling\n\nThe `ui5-tree` provides advanced keyboard handling.\nThe user can use the following keyboard shortcuts in order to navigate trough the tree:\n\n- [Up] or [Down] - Navigates up and down the tree items that are currently visible.\n- [Right] - Drills down the tree by expanding the tree nodes.\n- [Left] - Goes up the tree and collapses the tree nodes.\n\nThe user can use the following keyboard shortcuts to perform selection,\nwhen the `selectionMode` property is in use:\n\n- [Space] - Selects the currently focused item upon keyup.\n- [Enter] - Selects the currently focused item upon keydown.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Tree.js\";`\n\n`import \"@ui5/webcomponents/dist/TreeItem.js\";`", + "name": "Tree", "slots": [ { - "name": "action", - "description": "Defines the action of the column.\n\n**Note:** While multiple actions are technically possible, this is not supported.", - "_ui5since": "2.8.0", + "name": "default", + "description": "Defines the items of the component. Tree items may have other tree items as children.\n\n**Note:** Use `ui5-tree-item` for the intended design.", + "_ui5propertyName": "items", "_ui5type": { - "text": "Array<TableHeaderCellActionBase>", + "text": "Array<TreeItemBase>", "references": [ { - "name": "TableHeaderCellActionBase", + "name": "TreeItemBase", "package": "@ui5/webcomponents", - "module": "dist/TableHeaderCellActionBase.js" + "module": "dist/TreeItemBase.js" } ] }, "_ui5privacy": "public" }, { - "name": "default", - "description": "Defines the content of the component.", - "_ui5propertyName": "content", + "name": "header", + "description": "Defines the component header.\n\n**Note:** When the `header` slot is set, the\n`headerText` property is ignored.", "_ui5type": { - "text": "Array<Node>" + "text": "Array<HTMLElement>" }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "TableCellBase", - "module": "dist/TableCellBase.js" - } + "_ui5privacy": "public" } ], "members": [ { "kind": "field", - "name": "width", + "name": "selectionMode", + "type": { + "text": "ListSelectionMode | undefined", + "references": [ + { + "name": "ListSelectionMode", + "package": "@ui5/webcomponents", + "module": "dist/types/ListSelectionMode.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the selection mode of the component. Since the tree uses a `ui5-list` to display its structure,\nthe tree modes are exactly the same as the list modes, and are all applicable.", + "privacy": "public" + }, + { + "kind": "field", + "name": "noDataText", "type": { "text": "string | undefined" }, - "description": "Defines the width of the column.\n\nBy default, the column will grow and shrink according to the available space.\nThis will distribute the space proportionally among all columns with no specific width set.\n\nSee [\\<length\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/length) and\n[\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) for possible width values.", + "description": "Defines the text that is displayed when the component contains no items.", "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "minWidth", + "name": "headerText", "type": { "text": "string | undefined" }, - "description": "Defines the minimum width of the column.\n\nIf the table is in `Popin` mode and the minimum width does not fit anymore,\nthe column will move into the popin.\n\nBy default, the table prevents the column from becoming too small.\nChanging this value to a small value might lead to accessibility issues.\n\n**Note:** This property only takes effect for columns with a [\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) value\nor the default width.", - "privacy": "public", - "default": "undefined" + "description": "Defines the component header text.\n\n**Note:** If the `header` slot is set, this property is ignored.", + "default": "undefined", + "privacy": "public" }, { "kind": "field", - "name": "importance", + "name": "footerText", "type": { - "text": "number" + "text": "string | undefined" }, - "default": "0", - "description": "Defines the importance of the column.\n\nThis property affects the popin behaviour.\nColumns with higher importance will move into the popin area later then less important\ncolumns.", + "description": "Defines the component footer text.", + "default": "undefined", "privacy": "public" }, { "kind": "field", - "name": "popinText", + "name": "accessibleName", "type": { "text": "string | undefined" }, - "description": "The text for the column when it pops in.", + "description": "Defines the accessible name of the component.", "default": "undefined", "privacy": "public", - "_ui5since": "2.7.0" + "_ui5since": "1.8.0" }, { "kind": "field", - "name": "sortIndicator", + "name": "accessibleNameRef", "type": { - "text": "SortOrder", - "references": [ - { - "name": "SortOrder", - "package": "@ui5/webcomponents-base", - "module": "dist/types/SortOrder.js" - } - ] + "text": "string | undefined" }, - "default": "\"None\"", - "description": "Defines the sort indicator of the column.", + "description": "Defines the IDs of the elements that label the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "2.8.0" + "_ui5since": "1.8.0" }, { "kind": "field", - "name": "popinHidden", + "name": "accessibleDescription", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines if the column is hidden in the popin.\n\n**Note:** Please be aware that hiding the column in the popin might lead to accessibility issues as\nusers might not be able to access the content of the column on small screens.", + "description": "Defines the accessible description of the component.", + "default": "undefined", "privacy": "public", - "_ui5since": "2.8.0" + "_ui5since": "2.5.0" }, { "kind": "field", - "name": "horizontalAlign", + "name": "accessibleDescriptionRef", "type": { - "text": "TableCellHorizontalAlign | undefined", - "references": [ - { - "name": "TableCellHorizontalAlign", - "package": "@ui5/webcomponents", - "module": "dist/types/TableCellHorizontalAlign.js" - } - ] + "text": "string | undefined" }, - "description": "Determines the horizontal alignment of table cells.", + "description": "Defines the IDs of the elements that describe the component.", "default": "undefined", "privacy": "public", - "inheritedFrom": { - "name": "TableCellBase", - "module": "dist/TableCellBase.js" - } + "_ui5since": "2.5.0" + }, + { + "kind": "method", + "name": "walk", + "return": { + "type": { + "text": "void" + } + }, + "parameters": [ + { + "name": "callback", + "type": { + "text": "WalkCallback", + "references": [ + { + "name": "WalkCallback", + "package": "@ui5/webcomponents", + "module": "dist/Tree.js" + } + ] + }, + "description": "function to execute on each node of the tree with 3 arguments: the node, the level and the index", + "_ui5privacy": "public" + } + ], + "description": "Perform Depth-First-Search walk on the tree and run a callback on each node", + "privacy": "public" } ], - "attributes": [ + "events": [ { - "description": "Defines the width of the column.\n\nBy default, the column will grow and shrink according to the available space.\nThis will distribute the space proportionally among all columns with no specific width set.\n\nSee [\\<length\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/length) and\n[\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) for possible width values.", - "name": "width", - "default": "undefined", - "fieldName": "width", + "name": "item-toggle", + "_ui5privacy": "public", "type": { - "text": "string | undefined" - } + "text": "CustomEvent<TreeItemToggleEventDetail>", + "references": [ + { + "name": "TreeItemToggleEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Tree.js" + } + ] + }, + "description": "Fired when a tree item is expanded or collapsed.\n\n**Note:** You can call `preventDefault()` on the event object to suppress the event, if needed.\nThis may be handy for example if you want to dynamically load tree items upon the user expanding a node.\nEven if you prevented the event's default behavior, you can always manually call `toggle()` on a tree item.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "the toggled item." + } + ] }, { - "description": "Defines the minimum width of the column.\n\nIf the table is in `Popin` mode and the minimum width does not fit anymore,\nthe column will move into the popin.\n\nBy default, the table prevents the column from becoming too small.\nChanging this value to a small value might lead to accessibility issues.\n\n**Note:** This property only takes effect for columns with a [\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) value\nor the default width.", - "name": "min-width", - "default": "undefined", - "fieldName": "minWidth", + "name": "item-mouseover", + "_ui5privacy": "public", "type": { - "text": "string | undefined" - } + "text": "CustomEvent<TreeItemMouseoverEventDetail>", + "references": [ + { + "name": "TreeItemMouseoverEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Tree.js" + } + ] + }, + "description": "Fired when the mouse cursor enters the tree item borders.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.0.0-rc.16", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "the hovered item." + } + ] }, { - "description": "Defines the importance of the column.\n\nThis property affects the popin behaviour.\nColumns with higher importance will move into the popin area later then less important\ncolumns.", - "name": "importance", - "default": "0", - "fieldName": "importance", + "name": "item-mouseout", + "_ui5privacy": "public", "type": { - "text": "number" - } + "text": "CustomEvent<TreeItemMouseoutEventDetail>", + "references": [ + { + "name": "TreeItemMouseoutEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Tree.js" + } + ] + }, + "description": "Fired when the mouse cursor leaves the tree item borders.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "1.0.0-rc.16", + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "the hovered item." + } + ] }, { - "description": "The text for the column when it pops in.", - "name": "popin-text", - "default": "undefined", - "fieldName": "popinText", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the sort indicator of the column.", - "name": "sort-indicator", - "default": "\"None\"", - "fieldName": "sortIndicator", - "type": { - "text": "\"None\" | \"Ascending\" | \"Descending\"" - } - }, - { - "description": "Defines if the column is hidden in the popin.\n\n**Note:** Please be aware that hiding the column in the popin might lead to accessibility issues as\nusers might not be able to access the content of the column on small screens.", - "name": "popin-hidden", - "default": "false", - "fieldName": "popinHidden", - "type": { - "text": "boolean" - } - }, - { - "description": "Determines the horizontal alignment of table cells.", - "name": "horizontal-align", - "default": "undefined", - "fieldName": "horizontalAlign", + "name": "item-click", + "_ui5privacy": "public", "type": { - "text": "\"Center\" | \"Start\" | \"End\" | \"Left\" | \"Right\" | undefined" + "text": "CustomEvent<TreeItemClickEventDetail>", + "references": [ + { + "name": "TreeItemClickEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Tree.js" + } + ] }, - "inheritedFrom": { - "name": "TableCellBase", - "module": "dist/TableCellBase.js" - } - } - ], - "superclass": { - "name": "TableCellBase", - "package": "@ui5/webcomponents", - "module": "dist/TableCellBase.js" - }, - "tagName": "ui5-table-header-cell", - "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableHeaderCell", - "module": "dist/TableHeaderCell.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-table-header-cell", - "declaration": { - "name": "TableHeaderCell", - "module": "dist/TableHeaderCell.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableHeaderCellActionAI.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-table-header-cell-action-ai` component defines a dedicated AI action for the table column.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderCellActionAI.js\";`", - "name": "TableHeaderCellActionAI", - "superclass": { - "name": "TableHeaderCellActionBase", - "package": "@ui5/webcomponents", - "module": "dist/TableHeaderCellActionBase.js" - }, - "tagName": "ui5-table-header-cell-action-ai", - "customElement": true, - "_ui5since": "2.8.0", - "_ui5privacy": "public", - "events": [ + "description": "Fired when a tree item is activated.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "The clicked item." + } + ] + }, { - "name": "click", + "name": "item-delete", "_ui5privacy": "public", "type": { - "text": "CustomEvent<TableHeaderCellActionClickEventDetail>", + "text": "CustomEvent<TreeItemDeleteEventDetail>", "references": [ { - "name": "TableHeaderCellActionClickEventDetail", + "name": "TreeItemDeleteEventDetail", "package": "@ui5/webcomponents", - "module": "dist/TableHeaderCellActionBase.js" + "module": "dist/Tree.js" } ] }, - "description": "Fired when a header cell action is clicked.", + "description": "Fired when the Delete button of any tree item is pressed.\n\n**Note:** A Delete button is displayed on each item,\nwhen the component `selectionMode` property is set to `Delete`.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "2.8.0", "_ui5parameters": [ { "type": { "text": "HTMLElement" }, - "name": "targetRef", + "name": "item", "_ui5privacy": "public", - "description": "The reference to the element that triggered the event" + "description": "the deleted item." } - ], - "inheritedFrom": { - "name": "TableHeaderCellActionBase", - "module": "dist/TableHeaderCellActionBase.js" - } - } - ], - "members": [] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableHeaderCellActionAI", - "module": "dist/TableHeaderCellActionAI.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-table-header-cell-action-ai", - "declaration": { - "name": "TableHeaderCellActionAI", - "module": "dist/TableHeaderCellActionAI.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableHeaderCellActionBase.js", - "declarations": [ - { - "kind": "class", - "description": "The `TableHeaderCellActionBase` class serves as a foundation for table header cell actions.", - "name": "TableHeaderCellActionBase", - "events": [ + ] + }, { - "name": "click", + "name": "selection-change", "_ui5privacy": "public", "type": { - "text": "CustomEvent<TableHeaderCellActionClickEventDetail>", + "text": "CustomEvent<TreeSelectionChangeEventDetail>", "references": [ { - "name": "TableHeaderCellActionClickEventDetail", + "name": "TreeSelectionChangeEventDetail", "package": "@ui5/webcomponents", - "module": "dist/TableHeaderCellActionBase.js" + "module": "dist/Tree.js" } ] }, - "description": "Fired when a header cell action is clicked.", + "description": "Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` modes.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "2.8.0", "_ui5parameters": [ + { + "type": { + "text": "Array" + }, + "name": "selectedItems", + "_ui5privacy": "public", + "description": "An array of the selected items." + }, + { + "type": { + "text": "Array" + }, + "name": "previouslySelectedItems", + "_ui5privacy": "public", + "description": "An array of the previously selected items." + }, { "type": { "text": "HTMLElement" }, - "name": "targetRef", + "name": "targetItem", "_ui5privacy": "public", - "description": "The reference to the element that triggered the event" + "description": "The item triggering the event." } ] - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "customElement": true, - "_ui5since": "2.8.0", - "_ui5privacy": "public", - "_ui5abstract": true, - "members": [] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableHeaderCellActionBase", - "module": "dist/TableHeaderCellActionBase.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableHeaderRow.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-table-header-row` component represents the table headers of a `ui5-table`.\n\nIt is tightly coupled to the `ui5-table` and should therefore be used in the `ui5-table` only.\nThe header row is placed in the `headerRow` slot of the table.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";`", - "name": "TableHeaderRow", - "slots": [ + }, { - "name": "default", - "description": "Defines the cells of the component.\n\n**Note:** Use `ui5-table-header-cell` for the intended design.", - "_ui5propertyName": "cells", - "_ui5type": { - "text": "Array<TableHeaderCell>", + "name": "move", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent<TreeMoveEventDetail>", "references": [ { - "name": "TableHeaderCell", + "name": "TreeMoveEventDetail", "package": "@ui5/webcomponents", - "module": "dist/TableHeaderCell.js" + "module": "dist/Tree.js" } ] }, - "_ui5privacy": "public" - } - ], - "members": [ + "description": "Fired when a movable tree item is moved over a potential drop target during a drag-and-drop operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under the `element` property." + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + } + ] + }, { - "kind": "field", - "name": "sticky", + "name": "move-over", + "_ui5privacy": "public", "type": { - "text": "boolean" + "text": "CustomEvent<TreeMoveEventDetail>", + "references": [ + { + "name": "TreeMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Tree.js" + } + ] }, - "default": "false", - "description": "Sticks the `ui5-table-header-row` to the top of a table.\n\nNote: If used in combination with overflowMode \"Scroll\", the table needs a defined height for the sticky header to work as expected.", - "privacy": "public" + "description": "Fired when a movable tree item is dropped onto a drop target.\n\n**Note:** The `move` event is fired only if there was a preceding `move-over` event with prevented default action.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under the `element` property." + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + } + ] } ], "attributes": [ { - "description": "Sticks the `ui5-table-header-row` to the top of a table.\n\nNote: If used in combination with overflowMode \"Scroll\", the table needs a defined height for the sticky header to work as expected.", - "name": "sticky", - "default": "false", - "fieldName": "sticky", + "description": "Defines the selection mode of the component. Since the tree uses a `ui5-list` to display its structure,\nthe tree modes are exactly the same as the list modes, and are all applicable.", + "name": "selection-mode", + "default": "\"None\"", + "fieldName": "selectionMode", "type": { - "text": "boolean" + "text": "\"None\" | \"Single\" | \"Multiple\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Delete\" | undefined" + } + }, + { + "description": "Defines the text that is displayed when the component contains no items.", + "name": "no-data-text", + "default": "undefined", + "fieldName": "noDataText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the component header text.\n\n**Note:** If the `header` slot is set, this property is ignored.", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the component footer text.", + "name": "footer-text", + "default": "undefined", + "fieldName": "footerText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the accessible name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the IDs of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the IDs of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" } } ], "superclass": { - "name": "TableRowBase", - "package": "@ui5/webcomponents", - "module": "dist/TableRowBase.js" + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" }, - "tagName": "ui5-table-header-row", + "tagName": "ui5-tree", "customElement": true, - "_ui5since": "2.0.0", + "_ui5since": "1.0.0-rc.8", "_ui5privacy": "public" } ], @@ -28688,118 +30171,91 @@ "kind": "js", "name": "default", "declaration": { - "name": "TableHeaderRow", - "module": "dist/TableHeaderRow.js" + "name": "Tree", + "module": "dist/Tree.js" } }, { "kind": "custom-element-definition", - "name": "ui5-table-header-row", - "declaration": { - "name": "TableHeaderRow", - "module": "dist/TableHeaderRow.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableNavigation.js", - "declarations": [], - "exports": [ - { - "kind": "js", - "name": "default", + "name": "ui5-tree", "declaration": { - "name": "TableNavigation", - "module": "dist/TableNavigation.js" + "name": "Tree", + "module": "dist/Tree.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TableRow.js", + "path": "dist/TreeItem.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-table-row` component represents a row in the `ui5-table`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableRow.js\";`", - "name": "TableRow", - "slots": [ + "description": "### Overview\nThe `ui5-tree-item` represents a node in a tree structure, shown as a `ui5-list`.\n\nThis is the item to use inside a `ui5-tree`.\nYou can represent an arbitrary tree structure by recursively nesting tree items.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TreeItem.js\";`", + "name": "TreeItem", + "cssParts": [ { - "name": "default", - "description": "Defines the cells of the component.\n\n**Note:** Use `ui5-table-cell` for the intended design.", - "_ui5propertyName": "cells", - "_ui5type": { - "text": "Array<TableCell>", - "references": [ - { - "name": "TableCell", - "package": "@ui5/webcomponents", - "module": "dist/TableCell.js" - } - ] - }, - "_ui5privacy": "public" + "description": "Used to style the title of the tree list item", + "name": "title" }, { - "name": "actions", - "description": "Defines the actions of the component.\n\n**Note:** Use `ui5-table-row-action` or `ui5-table-row-action-navigation` for the intended design.", - "_ui5since": "2.7.0", - "_ui5type": { - "text": "Array<TableRowActionBase>", - "references": [ - { - "name": "TableRowActionBase", - "package": "@ui5/webcomponents", - "module": "dist/TableRowActionBase.js" - } - ] - }, - "_ui5privacy": "public" + "description": "Used to style the additionalText of the tree list item", + "name": "additionalText" + }, + { + "description": "Used to style the icon of the tree list item", + "name": "icon" } ], "members": [ { "kind": "field", - "name": "rowKey", + "name": "text", "type": { "text": "string | undefined" }, - "description": "Unique identifier of the row.\n\n**Note:** For selection features to work properly, this property is mandatory, and its value must not contain spaces.", - "default": "undefined", - "privacy": "public" + "description": "Defines the text of the tree item.", + "privacy": "public", + "default": "undefined" }, { "kind": "field", - "name": "position", + "name": "additionalText", "type": { - "text": "number | undefined" + "text": "string | undefined" }, - "description": "Defines the 0-based position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.", + "description": "Defines the `additionalText`, displayed in the end of the tree item.", "default": "undefined", "privacy": "public", - "_ui5since": "2.5.0" + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "interactive", + "name": "icon", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines the interactive state of the row.", - "privacy": "public" + "description": "If set, an icon will be displayed before the text of the tree list item.", + "privacy": "public", + "default": "undefined", + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" + } }, { "kind": "field", - "name": "navigated", + "name": "expanded", "type": { "text": "boolean" }, "default": "false", - "description": "Defines the navigated state of the row.", - "privacy": "public" + "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.", + "privacy": "public", + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" + } }, { "kind": "field", @@ -28808,189 +30264,472 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether the row is movable.", + "description": "Defines whether the item is movable.", "privacy": "public", - "_ui5since": "2.6.0" - } - ], - "attributes": [ + "_ui5since": "2.0.0", + "inheritedFrom": { + "name": "ListItemBase", + "module": "dist/ListItemBase.js" + } + }, { - "description": "Unique identifier of the row.\n\n**Note:** For selection features to work properly, this property is mandatory, and its value must not contain spaces.", - "name": "row-key", - "default": "undefined", - "fieldName": "rowKey", + "kind": "field", + "name": "indeterminate", "type": { - "text": "string | undefined" + "text": "boolean" + }, + "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", + "default": "false", + "privacy": "public", + "_ui5since": "1.1.0", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "description": "Defines the 0-based position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.", - "name": "position", - "default": "undefined", - "fieldName": "position", + "kind": "field", + "name": "hasChildren", "type": { - "text": "number | undefined" + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\n\n**Note:** This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\nSet this to `true` for nodes you intend to load lazily, when the user clicks the expand button.\nIt is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.", + "privacy": "public", + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" } }, { - "description": "Defines the interactive state of the row.", - "name": "interactive", - "default": "false", - "fieldName": "interactive", + "kind": "field", + "name": "additionalTextState", "type": { - "text": "boolean" + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "privacy": "public", + "_ui5since": "1.0.0-rc.15", + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" } }, { - "description": "Defines the navigated state of the row.", - "name": "navigated", - "default": "false", - "fieldName": "navigated", + "kind": "field", + "name": "accessibleName", "type": { - "text": "boolean" + "text": "string | undefined" + }, + "description": "Defines the accessible name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.8.0", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "description": "Defines whether the row is movable.", - "name": "movable", - "default": "false", - "fieldName": "movable", + "kind": "method", + "name": "toggle", + "return": { + "type": { + "text": "void" + } + }, + "description": "Call this method to manually switch the `expanded` state of a tree item.", + "privacy": "public", + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" + } + }, + { + "kind": "field", + "name": "type", + "type": { + "text": "ListItemType", + "references": [ + { + "name": "ListItemType", + "package": "@ui5/webcomponents", + "module": "dist/types/ListItemType.js" + } + ] + }, + "default": "\"Active\"", + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "privacy": "public", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, + { + "kind": "field", + "name": "accessibilityAttributes", + "type": { + "text": "ListItemAccessibilityAttributes", + "references": [ + { + "name": "ListItemAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/ListItem.js" + } + ] + }, + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", + "privacy": "public", + "_ui5since": "1.15.0", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, + { + "kind": "field", + "name": "navigated", "type": { "text": "boolean" + }, + "default": "false", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "privacy": "public", + "_ui5since": "1.10.0", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" } - } - ], - "superclass": { - "name": "TableRowBase", - "package": "@ui5/webcomponents", - "module": "dist/TableRowBase.js" - }, - "tagName": "ui5-table-row", - "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableRow", - "module": "dist/TableRow.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-table-row", - "declaration": { - "name": "TableRow", - "module": "dist/TableRow.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableRowAction.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-table-row-action` component defines an action for table rows.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableRowAction.js\";`", - "name": "TableRowAction", - "members": [ + }, { "kind": "field", - "name": "icon", + "name": "tooltip", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"\"", - "description": "Defines the icon of the row action.\n\n**Note:** For row actions to work properly, this property is mandatory.\n\n**Note:** SAP-icons font provides numerous built-in icons. To find all the available icons, see the\n[Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "privacy": "public" + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.23.0", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } }, { "kind": "field", - "name": "text", + "name": "highlight", "type": { - "text": "string" + "text": "Highlight", + "references": [ + { + "name": "Highlight", + "package": "@ui5/webcomponents", + "module": "dist/types/Highlight.js" + } + ] }, - "default": "\"\"", - "description": "Defines the text of the row action.\n\n**Note:** For row actions to work properly, this property is mandatory.", - "privacy": "public" + "default": "\"None\"", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "privacy": "public", + "_ui5since": "1.24", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } }, { "kind": "field", - "name": "invisible", + "name": "selected", "type": { "text": "boolean" }, "default": "false", - "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", + "description": "Defines the selected state of the component.", "privacy": "public", "inheritedFrom": { - "name": "TableRowActionBase", - "module": "dist/TableRowActionBase.js" + "name": "ListItemBase", + "module": "dist/ListItemBase.js" } } ], "attributes": [ { - "description": "Defines the icon of the row action.\n\n**Note:** For row actions to work properly, this property is mandatory.\n\n**Note:** SAP-icons font provides numerous built-in icons. To find all the available icons, see the\n[Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the text of the tree item.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the `additionalText`, displayed in the end of the tree item.", + "name": "additional-text", + "default": "undefined", + "fieldName": "additionalText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "If set, an icon will be displayed before the text of the tree list item.", "name": "icon", - "default": "\"\"", + "default": "undefined", "fieldName": "icon", "type": { - "text": "string" + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" } }, { - "description": "Defines the text of the row action.\n\n**Note:** For row actions to work properly, this property is mandatory.", - "name": "text", - "default": "\"\"", - "fieldName": "text", + "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.", + "name": "expanded", + "default": "false", + "fieldName": "expanded", "type": { - "text": "string" + "text": "boolean" + }, + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" } }, { - "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", - "name": "invisible", + "description": "Defines whether the item is movable.", + "name": "movable", "default": "false", - "fieldName": "invisible", + "fieldName": "movable", "type": { "text": "boolean" }, "inheritedFrom": { - "name": "TableRowActionBase", - "module": "dist/TableRowActionBase.js" + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" + } + }, + { + "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", + "name": "indeterminate", + "default": "false", + "fieldName": "indeterminate", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" + } + }, + { + "description": "Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\n\n**Note:** This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\nSet this to `true` for nodes you intend to load lazily, when the user clicks the expand button.\nIt is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.", + "name": "has-children", + "default": "false", + "fieldName": "hasChildren", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" + } + }, + { + "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "additional-text-state", + "default": "\"None\"", + "fieldName": "additionalTextState", + "type": { + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + }, + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" + } + }, + { + "description": "Defines the accessible name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" + } + }, + { + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "name": "type", + "default": "\"Active\"", + "fieldName": "type", + "type": { + "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" + }, + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, + { + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "ListItemAccessibilityAttributes" + }, + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, + { + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "name": "navigated", + "default": "false", + "fieldName": "navigated", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, + { + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, + { + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "highlight", + "default": "\"None\"", + "fieldName": "highlight", + "type": { + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + }, + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, + { + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" } } ], "superclass": { - "name": "TableRowActionBase", + "name": "TreeItemBase", "package": "@ui5/webcomponents", - "module": "dist/TableRowActionBase.js" + "module": "dist/TreeItemBase.js" }, - "tagName": "ui5-table-row-action", + "tagName": "ui5-tree-item", "customElement": true, - "_ui5since": "2.7.0", + "_ui5since": "1.0.0-rc.8", "_ui5privacy": "public", + "slots": [ + { + "name": "default", + "description": "Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<TreeItemBase>", + "references": [ + { + "name": "TreeItemBase", + "package": "@ui5/webcomponents", + "module": "dist/TreeItemBase.js" + } + ] + }, + "_ui5privacy": "public", + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" + } + }, + { + "name": "image", + "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with size XS.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-tree-item` should be customized in order to fit.", + "_ui5since": "2.10.0", + "_ui5type": { + "text": "Array<HTMLElement>" + }, + "_ui5privacy": "public", + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" + } + }, + { + "name": "deleteButton", + "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.", + "_ui5since": "1.9.0", + "_ui5type": { + "text": "Array<IButton>", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "_ui5privacy": "public", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + } + ], "events": [ { - "name": "click", + "name": "detail-click", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when a row action is clicked.", + "description": "Fired when the user clicks on the detail button when type is `Detail`.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": true, - "_ui5since": "2.9.0", "inheritedFrom": { - "name": "TableRowActionBase", - "module": "dist/TableRowActionBase.js" + "name": "ListItem", + "module": "dist/ListItem.js" } } ] @@ -29001,655 +30740,458 @@ "kind": "js", "name": "default", "declaration": { - "name": "TableRowAction", - "module": "dist/TableRowAction.js" + "name": "TreeItem", + "module": "dist/TreeItem.js" } }, { "kind": "custom-element-definition", - "name": "ui5-table-row-action", + "name": "ui5-tree-item", "declaration": { - "name": "TableRowAction", - "module": "dist/TableRowAction.js" + "name": "TreeItem", + "module": "dist/TreeItem.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TableRowActionBase.js", + "path": "dist/TreeItemBase.js", "declarations": [ { "kind": "class", - "description": "The `TableRowActionBase` class serves as a foundation for table row actions.", - "name": "TableRowActionBase", - "members": [ + "description": "A class to serve as a foundation\nfor the `TreeItem` and `TreeItemCustom` classes.", + "name": "TreeItemBase", + "slots": [ { - "kind": "field", - "name": "invisible", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", - "privacy": "public" - } - ], - "events": [ + "name": "default", + "description": "Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<TreeItemBase>", + "references": [ + { + "name": "TreeItemBase", + "package": "@ui5/webcomponents", + "module": "dist/TreeItemBase.js" + } + ] + }, + "_ui5privacy": "public" + }, { - "name": "click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" + "name": "image", + "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with size XS.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-tree-item` should be customized in order to fit.", + "_ui5since": "2.10.0", + "_ui5type": { + "text": "Array<HTMLElement>" }, - "description": "Fired when a row action is clicked.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.9.0" - } - ], - "attributes": [ + "_ui5privacy": "public" + }, { - "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", - "name": "invisible", - "default": "false", - "fieldName": "invisible", - "type": { - "text": "boolean" + "name": "deleteButton", + "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.", + "_ui5since": "1.9.0", + "_ui5type": { + "text": "Array<IButton>", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "_ui5privacy": "public", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" } } ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "customElement": true, - "_ui5since": "2.7.0", - "_ui5privacy": "public", - "_ui5abstract": true - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableRowActionBase", - "module": "dist/TableRowActionBase.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableRowActionNavigation.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-table-row-action-navigation` component defines a navigation action for table rows.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableRowActionNavigation.js\";`", - "name": "TableRowActionNavigation", "members": [ { "kind": "field", - "name": "interactive", + "name": "icon", + "type": { + "text": "string | undefined" + }, + "description": "If set, an icon will be displayed before the text of the tree list item.", + "privacy": "public", + "default": "undefined" + }, + { + "kind": "field", + "name": "expanded", "type": { "text": "boolean" }, "default": "false", - "description": "Defines the interactive state of the navigation action.", + "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.", "privacy": "public" }, { "kind": "field", - "name": "invisible", + "name": "movable", "type": { "text": "boolean" }, "default": "false", - "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", + "description": "Defines whether the item is movable.", "privacy": "public", + "_ui5since": "2.0.0", "inheritedFrom": { - "name": "TableRowActionBase", - "module": "dist/TableRowActionBase.js" - } - } - ], - "attributes": [ - { - "description": "Defines the interactive state of the navigation action.", - "name": "interactive", - "default": "false", - "fieldName": "interactive", - "type": { - "text": "boolean" + "name": "ListItemBase", + "module": "dist/ListItemBase.js" } }, { - "description": "Defines the visibility of the row action.\n\n**Note:** Invisible row actions still take up space, allowing to hide the action while maintaining its position.", - "name": "invisible", - "default": "false", - "fieldName": "invisible", + "kind": "field", + "name": "indeterminate", "type": { "text": "boolean" }, + "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", + "default": "false", + "privacy": "public", + "_ui5since": "1.1.0", "inheritedFrom": { - "name": "TableRowActionBase", - "module": "dist/TableRowActionBase.js" + "name": "ListItem", + "module": "dist/ListItem.js" } - } - ], - "superclass": { - "name": "TableRowActionBase", - "package": "@ui5/webcomponents", - "module": "dist/TableRowActionBase.js" - }, - "tagName": "ui5-table-row-action-navigation", - "customElement": true, - "_ui5since": "2.7.0", - "_ui5privacy": "public", - "events": [ + }, { - "name": "click", - "_ui5privacy": "public", + "kind": "field", + "name": "hasChildren", "type": { - "text": "CustomEvent" + "text": "boolean" }, - "description": "Fired when a row action is clicked.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.9.0", - "inheritedFrom": { - "name": "TableRowActionBase", - "module": "dist/TableRowActionBase.js" - } - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableRowActionNavigation", - "module": "dist/TableRowActionNavigation.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-table-row-action-navigation", - "declaration": { - "name": "TableRowActionNavigation", - "module": "dist/TableRowActionNavigation.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableRowBase.js", - "declarations": [ - { - "kind": "class", - "description": "A class to serve as a foundation for the `TableRow` and `TableHeaderRow` classes.", - "name": "TableRowBase", - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public", - "_ui5abstract": true, - "members": [] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableRowBase", - "module": "dist/TableRowBase.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableSelection.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-table-selection` component is used inside the `ui5-table` to add key-based selection capabilities to the `ui5-table`.\n\nThe component offers three selection modes:\n* Single - select a single row.\n* Multiple - select multiple rows.\n* None - no selection active.\n\nAs the selection is key-based, `ui5-table-row` components need to define a unique `row-key` property.\n\n### Usage\n\nThe `ui5-table-selection` component is only used inside the `ui5-table` component as a feature.\nIt has to be slotted inside the `ui5-table` in the `features` slot.\nThe component is not intended to be used as a standalone component.\n\n```html\n<ui5-table>\n\t<ui5-table-selection mode=\"Multiple\" slot=\"features\"></ui5-table-selection>\n</ui5-table>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableSelection.js\";`", - "name": "TableSelection", - "members": [ + "default": "false", + "description": "Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\n\n**Note:** This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\nSet this to `true` for nodes you intend to load lazily, when the user clicks the expand button.\nIt is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.", + "privacy": "public" + }, { "kind": "field", - "name": "mode", + "name": "additionalTextState", "type": { - "text": "TableSelectionMode", + "text": "ValueState", "references": [ { - "name": "TableSelectionMode", - "package": "@ui5/webcomponents", - "module": "dist/types/TableSelectionMode.js" + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" } ] }, - "default": "\"Multiple\"", - "description": "Defines the selection mode.", - "privacy": "public" + "default": "\"None\"", + "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" }, { "kind": "field", - "name": "selected", + "name": "accessibleName", "type": { - "text": "string" + "text": "string | undefined" }, - "default": "\"\"", - "description": "Defines the selected rows separated by a space.", + "description": "Defines the accessible name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.8.0", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, + { + "kind": "method", + "name": "toggle", + "return": { + "type": { + "text": "void" + } + }, + "description": "Call this method to manually switch the `expanded` state of a tree item.", "privacy": "public" - } - ], - "events": [ + }, { - "name": "change", - "_ui5privacy": "public", + "kind": "field", + "name": "type", "type": { - "text": "CustomEvent" + "text": "ListItemType", + "references": [ + { + "name": "ListItemType", + "package": "@ui5/webcomponents", + "module": "dist/types/ListItemType.js" + } + ] }, - "description": "Fired when the selection is changed by user interaction.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true - } - ], - "attributes": [ + "default": "\"Active\"", + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "privacy": "public", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, { - "description": "Defines the selection mode.", - "name": "mode", - "default": "\"Multiple\"", - "fieldName": "mode", + "kind": "field", + "name": "accessibilityAttributes", "type": { - "text": "\"None\" | \"Single\" | \"Multiple\"" + "text": "ListItemAccessibilityAttributes", + "references": [ + { + "name": "ListItemAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/ListItem.js" + } + ] + }, + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", + "privacy": "public", + "_ui5since": "1.15.0", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "description": "Defines the selected rows separated by a space.", - "name": "selected", - "default": "\"\"", - "fieldName": "selected", + "kind": "field", + "name": "navigated", "type": { - "text": "string" + "text": "boolean" + }, + "default": "false", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "privacy": "public", + "_ui5since": "1.10.0", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "deprecated": "This component is deprecated and will be removed in future releases. Use the `ui5-table-selection-single` or `ui5-table-selection-multi` components instead.", - "tagName": "ui5-table-selection", - "customElement": true, - "_ui5experimental": "This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.", - "_ui5since": "2.0.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableSelection", - "module": "dist/TableSelection.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-table-selection", - "declaration": { - "name": "TableSelection", - "module": "dist/TableSelection.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableSelectionBase.js", - "declarations": [ - { - "kind": "class", - "description": "The `TableSelectionBase` class serves as a foundation for table selections.", - "name": "TableSelectionBase", - "members": [ + }, { "kind": "field", - "name": "selected", + "name": "tooltip", "type": { "text": "string | undefined" }, - "description": "Defines the selected elements of the component.", + "description": "Defines the text of the tooltip that would be displayed for the list item.", "default": "undefined", - "privacy": "public" + "privacy": "public", + "_ui5since": "1.23.0", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } }, { "kind": "field", - "name": "behavior", + "name": "highlight", "type": { - "text": "TableSelectionBehavior", + "text": "Highlight", "references": [ { - "name": "TableSelectionBehavior", + "name": "Highlight", "package": "@ui5/webcomponents", - "module": "dist/types/TableSelectionBehavior.js" + "module": "dist/types/Highlight.js" } ] }, - "default": "\"RowSelector\"", - "description": "Defines the selection behavior.", + "default": "\"None\"", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", "privacy": "public", - "_ui5since": "2.11" + "_ui5since": "1.24", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } }, { - "kind": "method", - "name": "getRowByKey", - "return": { - "type": { - "text": "TableRow | undefined", - "references": [ - { - "name": "TableRow", - "package": "@ui5/webcomponents", - "module": "dist/TableRow.js" - } - ] - } + "kind": "field", + "name": "selected", + "type": { + "text": "boolean" }, - "parameters": [ - { - "name": "rowKey", - "type": { - "text": "string" - }, - "description": "The row key", - "_ui5privacy": "public" - } - ], - "description": "Returns the table row instance for the given row key.", - "privacy": "public" + "default": "false", + "description": "Defines the selected state of the component.", + "privacy": "public", + "inheritedFrom": { + "name": "ListItemBase", + "module": "dist/ListItemBase.js" + } } ], "events": [ { - "name": "change", + "name": "detail-click", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when the selection is changed by user interaction.", + "description": "Fired when the user clicks on the detail button when type is `Detail`.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "_ui5Bubbles": true, + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } } ], "attributes": [ { - "description": "Defines the selected elements of the component.", - "name": "selected", + "description": "If set, an icon will be displayed before the text of the tree list item.", + "name": "icon", "default": "undefined", - "fieldName": "selected", + "fieldName": "icon", "type": { "text": "string | undefined" } }, { - "description": "Defines the selection behavior.", - "name": "behavior", - "default": "\"RowSelector\"", - "fieldName": "behavior", + "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.", + "name": "expanded", + "default": "false", + "fieldName": "expanded", "type": { - "text": "\"RowSelector\" | \"RowOnly\"" + "text": "boolean" } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "customElement": true, - "_ui5since": "2.8.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableSelectionMulti.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-table-selection-multi` component is used inside the `ui5-table` to add multi-selection capabilities to the `ui5-table`.\nSince selection is key-based, each `ui5-table-row` must define a unique `row-key` property.\n\n### Usage\n\nThe `ui5-table-selection-multi` component is a feature designed exclusively for use within the `ui5-table` component.\nIt must be placed inside the `features` slot of `ui5-table`.\nThis component is not intended for standalone use.\n\n```html\n<ui5-table>\n\t<ui5-table-selection-multi slot=\"features\" selected=\"Row1 Row3\"></ui5-table-selection-multi>\n</ui5-table>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableSelectionMulti.js\";`", - "name": "TableSelectionMulti", - "members": [ + }, { - "kind": "field", - "name": "selected", + "description": "Defines whether the item is movable.", + "name": "movable", + "default": "false", + "fieldName": "movable", "type": { - "text": "string | undefined" - }, - "description": "Defines the `row-key` values of selected rows, with each value separated by a space.", - "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" + "text": "boolean" } }, { - "kind": "field", - "name": "headerSelector", + "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", + "name": "indeterminate", + "default": "false", + "fieldName": "indeterminate", "type": { - "text": "TableSelectionMultiHeaderSelector", - "references": [ - { - "name": "TableSelectionMultiHeaderSelector", - "package": "@ui5/webcomponents", - "module": "dist/types/TableSelectionMultiHeaderSelector.js" - } - ] - }, - "default": "\"SelectAll\"", - "description": "Defines the selector of the header row.", - "privacy": "public", - "_ui5since": "2.12" + "text": "boolean" + } }, { - "kind": "method", - "name": "getSelectedRows", - "return": { - "type": { - "text": "Array<TableRow>", - "references": [ - { - "name": "TableRow", - "package": "@ui5/webcomponents", - "module": "dist/TableRow.js" - } - ] - } - }, - "description": "Returns an array of the selected rows.", - "privacy": "public" + "description": "Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\n\n**Note:** This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\nSet this to `true` for nodes you intend to load lazily, when the user clicks the expand button.\nIt is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.", + "name": "has-children", + "default": "false", + "fieldName": "hasChildren", + "type": { + "text": "boolean" + } }, { - "kind": "method", - "name": "getSelectedAsSet", - "return": { - "type": { - "text": "Set<string>" - } - }, - "description": "Returns the `selected` property as a set of unique `row-key` values.", - "privacy": "public" + "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "additional-text-state", + "default": "\"None\"", + "fieldName": "additionalTextState", + "type": { + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + } }, { - "kind": "method", - "name": "setSelectedAsSet", - "return": { - "type": { - "text": "void" - } + "description": "Defines the accessible name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "name": "type", + "default": "\"Active\"", + "fieldName": "type", + "type": { + "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" }, - "parameters": [ - { - "name": "selectedSet", - "type": { - "text": "Set<string>" - }, - "description": "A set of `row-key` values", - "_ui5privacy": "public" - } - ], - "description": "Sets the `selected` property using the provided set of unique `row-key` values.", - "privacy": "public" + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } }, { - "kind": "field", - "name": "behavior", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", "type": { - "text": "TableSelectionBehavior", - "references": [ - { - "name": "TableSelectionBehavior", - "package": "@ui5/webcomponents", - "module": "dist/types/TableSelectionBehavior.js" - } - ] + "text": "ListItemAccessibilityAttributes" }, - "default": "\"RowSelector\"", - "description": "Defines the selection behavior.", - "privacy": "public", - "_ui5since": "2.11", "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "kind": "method", - "name": "getRowByKey", - "return": { - "type": { - "text": "TableRow | undefined", - "references": [ - { - "name": "TableRow", - "package": "@ui5/webcomponents", - "module": "dist/TableRow.js" - } - ] - } + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "name": "navigated", + "default": "false", + "fieldName": "navigated", + "type": { + "text": "boolean" }, - "parameters": [ - { - "name": "rowKey", - "type": { - "text": "string" - }, - "description": "The row key", - "_ui5privacy": "public" - } - ], - "description": "Returns the table row instance for the given row key.", - "privacy": "public", "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" + "name": "ListItem", + "module": "dist/ListItem.js" } - } - ], - "attributes": [ + }, { - "description": "Defines the `row-key` values of selected rows, with each value separated by a space.", - "name": "selected", + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "name": "tooltip", "default": "undefined", - "fieldName": "selected", + "fieldName": "tooltip", "type": { "text": "string | undefined" }, "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "description": "Defines the selector of the header row.", - "name": "header-selector", - "default": "\"SelectAll\"", - "fieldName": "headerSelector", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "highlight", + "default": "\"None\"", + "fieldName": "highlight", "type": { - "text": "\"SelectAll\" | \"ClearAll\"" + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + }, + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "description": "Defines the selection behavior.", - "name": "behavior", - "default": "\"RowSelector\"", - "fieldName": "behavior", + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", "type": { - "text": "\"RowSelector\" | \"RowOnly\"" + "text": "boolean" }, "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" + "name": "ListItem", + "module": "dist/ListItem.js" } } ], "superclass": { - "name": "TableSelectionBase", + "name": "ListItem", "package": "@ui5/webcomponents", - "module": "dist/TableSelectionBase.js" + "module": "dist/ListItem.js" }, - "tagName": "ui5-table-selection-multi", "customElement": true, - "_ui5since": "2.8.0", "_ui5privacy": "public", - "events": [ - { - "name": "change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the selection is changed by user interaction.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" - } - } - ] + "_ui5abstract": true } ], "exports": [ @@ -29657,553 +31199,548 @@ "kind": "js", "name": "default", "declaration": { - "name": "TableSelectionMulti", - "module": "dist/TableSelectionMulti.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-table-selection-multi", - "declaration": { - "name": "TableSelectionMulti", - "module": "dist/TableSelectionMulti.js" + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TableSelectionSingle.js", + "path": "dist/TreeItemCustom.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-table-selection-single` component is used inside the `ui5-table` to add single selection capabilities to the `ui5-table`.\nSince selection is key-based, each `ui5-table-row` must define a unique `row-key` property.\n\n### Usage\n\nThe `ui5-table-selection-single` component is a feature designed exclusively for use within the `ui5-table` component.\nIt must be placed inside the `features` slot of `ui5-table`.\nThis component is not intended for standalone use.\n\n```html\n<ui5-table>\n\t<ui5-table-selection-single slot=\"features\" selected=\"Row1\"></ui5-table-selection-single>\n</ui5-table>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableSelectionSingle.js\";`", - "name": "TableSelectionSingle", - "members": [ + "description": "The `ui5-tree-item-custom` represents a node in a tree structure, shown as a `ui5-list`.\n\nThis is the item to use inside a `ui5-tree`.\nYou can represent an arbitrary tree structure by recursively nesting tree items.\n\nYou can use this item to put any custom content inside the tree item.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TreeItemCustom.js\";`", + "name": "TreeItemCustom", + "cssParts": [ { - "kind": "field", - "name": "selected", - "type": { - "text": "string | undefined" - }, - "description": "Defines the `row-key` value of the selected row.", - "default": "undefined", - "privacy": "public", - "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" - } + "description": "Used to style the title of the tree list item", + "name": "title" }, { - "kind": "method", - "name": "getSelectedRow", - "return": { - "type": { - "text": "TableRow | undefined", - "references": [ - { - "name": "TableRow", - "package": "@ui5/webcomponents", - "module": "dist/TableRow.js" - } - ] - } + "description": "Used to style the additionalText of the tree list item", + "name": "additionalText" + }, + { + "description": "Used to style the icon of the tree list item", + "name": "icon" + } + ], + "slots": [ + { + "name": "content", + "description": "Defines the content of the `ui5-tree-item`.", + "_ui5type": { + "text": "Array<HTMLElement>" }, - "description": "Returns the selected row.", - "privacy": "public" + "_ui5privacy": "public" }, { - "kind": "field", - "name": "behavior", - "type": { - "text": "TableSelectionBehavior", + "name": "default", + "description": "Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array<TreeItemBase>", "references": [ { - "name": "TableSelectionBehavior", + "name": "TreeItemBase", "package": "@ui5/webcomponents", - "module": "dist/types/TableSelectionBehavior.js" + "module": "dist/TreeItemBase.js" } ] }, - "default": "\"RowSelector\"", - "description": "Defines the selection behavior.", - "privacy": "public", - "_ui5since": "2.11", + "_ui5privacy": "public", "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" } }, { - "kind": "method", - "name": "getRowByKey", - "return": { - "type": { - "text": "TableRow | undefined", - "references": [ - { - "name": "TableRow", - "package": "@ui5/webcomponents", - "module": "dist/TableRow.js" - } - ] - } + "name": "image", + "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with size XS.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-tree-item` should be customized in order to fit.", + "_ui5since": "2.10.0", + "_ui5type": { + "text": "Array<HTMLElement>" }, - "parameters": [ - { - "name": "rowKey", - "type": { - "text": "string" - }, - "description": "The row key", - "_ui5privacy": "public" - } - ], - "description": "Returns the table row instance for the given row key.", - "privacy": "public", + "_ui5privacy": "public", "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" + } + }, + { + "name": "deleteButton", + "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.", + "_ui5since": "1.9.0", + "_ui5type": { + "text": "Array<IButton>", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "_ui5privacy": "public", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" } } ], - "attributes": [ + "members": [ { - "description": "Defines the `row-key` value of the selected row.", - "name": "selected", - "default": "undefined", - "fieldName": "selected", + "kind": "field", + "name": "hideSelectionElement", "type": { - "text": "string | undefined" + "text": "boolean" }, - "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" - } + "default": "false", + "description": "Defines whether the tree list item should display the selection element.", + "privacy": "public" }, { - "description": "Defines the selection behavior.", - "name": "behavior", - "default": "\"RowSelector\"", - "fieldName": "behavior", + "kind": "field", + "name": "icon", "type": { - "text": "\"RowSelector\" | \"RowOnly\"" + "text": "string | undefined" }, + "description": "If set, an icon will be displayed before the text of the tree list item.", + "privacy": "public", + "default": "undefined", "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" } - } - ], - "superclass": { - "name": "TableSelectionBase", - "package": "@ui5/webcomponents", - "module": "dist/TableSelectionBase.js" - }, - "tagName": "ui5-table-selection-single", - "customElement": true, - "_ui5since": "2.8.0", - "_ui5privacy": "public", - "events": [ + }, { - "name": "change", - "_ui5privacy": "public", + "kind": "field", + "name": "expanded", "type": { - "text": "CustomEvent" + "text": "boolean" }, - "description": "Fired when the selection is changed by user interaction.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "default": "false", + "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.", + "privacy": "public", "inheritedFrom": { - "name": "TableSelectionBase", - "module": "dist/TableSelectionBase.js" + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" } - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableSelectionSingle", - "module": "dist/TableSelectionSingle.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-table-selection-single", - "declaration": { - "name": "TableSelectionSingle", - "module": "dist/TableSelectionSingle.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/TableUtils.js", - "declarations": [], - "exports": [] - }, - { - "kind": "javascript-module", - "path": "dist/TableVirtualizer.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-table-virtualizer` component is used inside the `ui5-table` to virtualize the table rows, if the `overflowMode` property of the table is set to 'Scroll'.\nIt is responsible for rendering only the rows that are visible in the viewport and updating them on scroll.\nThis allows large numbers of rows to exist, but maintain high performance by only paying the cost for those that are currently visible.\n\n**Note:** The maximum number of virtualized rows is limited by browser constraints, specifically the maximum supported height for a DOM element.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TableVirtualizer.js\";`", - "name": "TableVirtualizer", - "members": [ + }, { "kind": "field", - "name": "rowHeight", + "name": "movable", "type": { - "text": "number" + "text": "boolean" }, - "default": "45", - "description": "Defines the height of the rows in the table.\n\n**Note:** For virtualization to work properly, this property is mandatory.", - "privacy": "public" + "default": "false", + "description": "Defines whether the item is movable.", + "privacy": "public", + "_ui5since": "2.0.0", + "inheritedFrom": { + "name": "ListItemBase", + "module": "dist/ListItemBase.js" + } }, { "kind": "field", - "name": "rowCount", + "name": "indeterminate", "type": { - "text": "number" + "text": "boolean" }, - "default": "100", - "description": "Defines the total count of rows in the table.\n\n**Note:** For virtualization to work properly, this property is mandatory.", - "privacy": "public" + "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", + "default": "false", + "privacy": "public", + "_ui5since": "1.1.0", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } }, { "kind": "field", - "name": "extraRows", + "name": "hasChildren", "type": { - "text": "number" + "text": "boolean" }, - "default": "0", - "description": "Defines the count of extra rows to be rendered at the top and bottom of the table.\n\n**Note:** This property is experimental and may be changed or deleted in the future.", - "privacy": "public" + "default": "false", + "description": "Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\n\n**Note:** This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\nSet this to `true` for nodes you intend to load lazily, when the user clicks the expand button.\nIt is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.", + "privacy": "public", + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" + } }, { - "kind": "method", - "name": "reset", - "return": { - "type": { - "text": "void" - } - }, - "description": "Resets the virtualizer to its initial state and triggers the `range-change` event.", - "privacy": "public" - } - ], - "events": [ - { - "name": "range-change", - "_ui5privacy": "public", + "kind": "field", + "name": "additionalTextState", "type": { - "text": "CustomEvent<RangeChangeEventDetail>", + "text": "ValueState", "references": [ { - "name": "RangeChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/TableVirtualizer.js" + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" } ] }, - "description": "Fired when the virtualizer is changed by user interaction e.g. on scrolling.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5parameters": [ - { - "type": { - "text": "number" - }, - "name": "first", - "_ui5privacy": "public", - "description": "The 0-based index of the first children currently rendered" - }, - { - "type": { - "text": "number" - }, - "name": "last", - "_ui5privacy": "public", - "description": "The 0-based index of the last children currently rendered" - } - ] - } - ], - "attributes": [ - { - "description": "Defines the height of the rows in the table.\n\n**Note:** For virtualization to work properly, this property is mandatory.", - "name": "row-height", - "default": "45", - "fieldName": "rowHeight", - "type": { - "text": "number" + "default": "\"None\"", + "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "privacy": "public", + "_ui5since": "1.0.0-rc.15", + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" } }, { - "description": "Defines the total count of rows in the table.\n\n**Note:** For virtualization to work properly, this property is mandatory.", - "name": "row-count", - "default": "100", - "fieldName": "rowCount", + "kind": "field", + "name": "accessibleName", "type": { - "text": "number" + "text": "string | undefined" + }, + "description": "Defines the accessible name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.8.0", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" } }, { - "description": "Defines the count of extra rows to be rendered at the top and bottom of the table.\n\n**Note:** This property is experimental and may be changed or deleted in the future.", - "name": "extra-rows", - "default": "0", - "fieldName": "extraRows", - "type": { - "text": "number" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-table-virtualizer", - "customElement": true, - "_ui5experimental": "This component is not intended to be used in a productive enviroment. The API is under development and may be changed in the future.", - "_ui5since": "2.5.0", - "_ui5privacy": "public" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "TableVirtualizer", - "module": "dist/TableVirtualizer.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-table-virtualizer", - "declaration": { - "name": "TableVirtualizer", - "module": "dist/TableVirtualizer.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "dist/Tag.js", - "declarations": [ - { - "kind": "class", - "description": "### Overview\n\nThe `ui5-tag` is a component which serves\nthe purpose to attract the user attention to some piece\nof information (state, quantity, condition, etc.).\nIt can contain icon and text information, and its design can be chosen from specific design types.\n\n### Usage Guidelines\n\n- If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the `wrappingType` property.\n- Colors can be semantic or not semantic.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Tag.js\";`", - "name": "Tag", - "cssParts": [ - { - "description": "Used to style the root element.", - "name": "root" - } - ], - "slots": [ - { - "name": "default", - "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", - "_ui5propertyName": "text", - "_ui5type": { - "text": "Array<Node>" + "kind": "method", + "name": "toggle", + "return": { + "type": { + "text": "void" + } }, - "_ui5privacy": "public" + "description": "Call this method to manually switch the `expanded` state of a tree item.", + "privacy": "public", + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" + } }, { - "name": "icon", - "description": "Defines the icon to be displayed in the component.", - "_ui5type": { - "text": "Array<IIcon>", + "kind": "field", + "name": "type", + "type": { + "text": "ListItemType", "references": [ { - "name": "IIcon", + "name": "ListItemType", "package": "@ui5/webcomponents", - "module": "dist/Icon.js" + "module": "dist/types/ListItemType.js" } ] }, - "_ui5privacy": "public" - } - ], - "members": [ + "default": "\"Active\"", + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "privacy": "public", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, { "kind": "field", - "name": "design", + "name": "accessibilityAttributes", "type": { - "text": "TagDesign", + "text": "ListItemAccessibilityAttributes", "references": [ { - "name": "TagDesign", + "name": "ListItemAccessibilityAttributes", "package": "@ui5/webcomponents", - "module": "dist/types/TagDesign.js" + "module": "dist/ListItem.js" } ] }, - "default": "\"Neutral\"", - "description": "Defines the design type of the component.", + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", "privacy": "public", - "_ui5since": "1.22.0" - }, - { - "kind": "field", - "name": "colorScheme", - "type": { - "text": "string" - }, - "default": "\"1\"", - "description": "Defines the color scheme of the component.\nThere are 10 predefined schemes.\nTo use one you can set a number from `\"1\"` to `\"10\"`. The `colorScheme` `\"1\"` will be set by default.", - "privacy": "public" + "_ui5since": "1.15.0", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } }, { "kind": "field", - "name": "hideStateIcon", + "name": "navigated", "type": { "text": "boolean" }, "default": "false", - "description": "Defines if the default state icon is shown.", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", "privacy": "public", - "_ui5since": "1.22.0" + "_ui5since": "1.10.0", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } }, { "kind": "field", - "name": "interactive", + "name": "tooltip", "type": { - "text": "boolean" + "text": "string | undefined" }, - "default": "false", - "description": "Defines if the component is interactive (focusable and pressable).", + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "default": "undefined", "privacy": "public", - "_ui5since": "1.22.0" + "_ui5since": "1.23.0", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } }, { "kind": "field", - "name": "wrappingType", + "name": "highlight", "type": { - "text": "WrappingType", + "text": "Highlight", "references": [ { - "name": "WrappingType", + "name": "Highlight", "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" + "module": "dist/types/Highlight.js" } ] }, - "default": "\"Normal\"", - "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** For option \"Normal\" the text will wrap and the\nwords will not be broken based on hyphenation.", + "default": "\"None\"", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", "privacy": "public", - "_ui5since": "1.22.0" + "_ui5since": "1.24", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } }, { "kind": "field", - "name": "size", + "name": "selected", "type": { - "text": "TagSize", - "references": [ - { - "name": "TagSize", - "package": "@ui5/webcomponents", - "module": "dist/types/TagSize.js" - } - ] + "text": "boolean" }, - "default": "\"S\"", - "description": "Defines predefined size of the component.", + "default": "false", + "description": "Defines the selected state of the component.", "privacy": "public", - "_ui5since": "2.0.0" + "inheritedFrom": { + "name": "ListItemBase", + "module": "dist/ListItemBase.js" + } } ], - "events": [ + "attributes": [ { - "name": "click", - "_ui5privacy": "public", + "description": "Defines whether the tree list item should display the selection element.", + "name": "hide-selection-element", + "default": "false", + "fieldName": "hideSelectionElement", "type": { - "text": "CustomEvent" + "text": "boolean" + } + }, + { + "description": "If set, an icon will be displayed before the text of the tree list item.", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" }, - "description": "Fired when the user clicks on an interactive tag.\n\n**Note:** The event will be fired if the `interactive` property is `true`", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "1.22.0" - } - ], - "attributes": [ + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" + } + }, { - "description": "Defines the design type of the component.", - "name": "design", - "default": "\"Neutral\"", - "fieldName": "design", + "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.", + "name": "expanded", + "default": "false", + "fieldName": "expanded", "type": { - "text": "\"Positive\" | \"Negative\" | \"Critical\" | \"Information\" | \"Neutral\" | \"Set1\" | \"Set2\"" + "text": "boolean" + }, + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" } }, { - "description": "Defines the color scheme of the component.\nThere are 10 predefined schemes.\nTo use one you can set a number from `\"1\"` to `\"10\"`. The `colorScheme` `\"1\"` will be set by default.", - "name": "color-scheme", - "default": "\"1\"", - "fieldName": "colorScheme", + "description": "Defines whether the item is movable.", + "name": "movable", + "default": "false", + "fieldName": "movable", "type": { - "text": "string" + "text": "boolean" + }, + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" } }, { - "description": "Defines if the default state icon is shown.", - "name": "hide-state-icon", + "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", + "name": "indeterminate", "default": "false", - "fieldName": "hideStateIcon", + "fieldName": "indeterminate", "type": { "text": "boolean" + }, + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" } }, { - "description": "Defines if the component is interactive (focusable and pressable).", - "name": "interactive", + "description": "Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\n\n**Note:** This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\nSet this to `true` for nodes you intend to load lazily, when the user clicks the expand button.\nIt is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.", + "name": "has-children", "default": "false", - "fieldName": "interactive", + "fieldName": "hasChildren", "type": { "text": "boolean" + }, + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" } }, { - "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** For option \"Normal\" the text will wrap and the\nwords will not be broken based on hyphenation.", - "name": "wrapping-type", - "default": "\"Normal\"", - "fieldName": "wrappingType", + "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "additional-text-state", + "default": "\"None\"", + "fieldName": "additionalTextState", "type": { - "text": "\"None\" | \"Normal\"" + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + }, + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" } }, { - "description": "Defines predefined size of the component.", - "name": "size", - "default": "\"S\"", - "fieldName": "size", + "description": "Defines the accessible name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", "type": { - "text": "\"S\" | \"L\"" + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "TreeItemBase", + "module": "dist/TreeItemBase.js" + } + }, + { + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "name": "type", + "default": "\"Active\"", + "fieldName": "type", + "type": { + "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" + }, + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, + { + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "ListItemAccessibilityAttributes" + }, + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, + { + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "name": "navigated", + "default": "false", + "fieldName": "navigated", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, + { + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, + { + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "highlight", + "default": "\"None\"", + "fieldName": "highlight", + "type": { + "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + }, + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, + { + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" } } ], "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" + "name": "TreeItemBase", + "package": "@ui5/webcomponents", + "module": "dist/TreeItemBase.js" }, - "tagName": "ui5-tag", + "tagName": "ui5-tree-item-custom", "customElement": true, - "_ui5since": "2.0.0", - "_ui5privacy": "public" + "_ui5since": "1.9.2", + "_ui5privacy": "public", + "events": [ + { + "name": "detail-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user clicks on the detail button when type is `Detail`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + } + ] } ], "exports": [ @@ -30211,97 +31748,104 @@ "kind": "js", "name": "default", "declaration": { - "name": "Tag", - "module": "dist/Tag.js" + "name": "TreeItemCustom", + "module": "dist/TreeItemCustom.js" } }, { "kind": "custom-element-definition", - "name": "ui5-tag", + "name": "ui5-tree-item-custom", "declaration": { - "name": "Tag", - "module": "dist/Tag.js" + "name": "TreeItemCustom", + "module": "dist/TreeItemCustom.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Text.js", - "declarations": [ + "path": "dist/TreeList.js", + "declarations": [], + "exports": [ { - "kind": "class", - "description": "<h3>Overview</h3>\n\nThe `ui5-text` component displays text that can be used in any content area of an application.\n\n<h3>Usage</h3>\n\n- Use the `ui5-text` if you want to display text inside a form, table, or any other content area.\n- Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).\n\n<h3>Responsive behavior</h3>\n\nThe `ui5-text` component is fully adaptive to all screen sizes.\nBy default, the text will wrap when the space is not enough.\nIn addition, the component supports truncation via the <code>max-lines</code> property,\nby defining the number of lines the text should wrap before start truncating.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Text\";</code>", - "name": "Text", - "slots": [ - { - "name": "default", - "description": "Defines the text of the component.", - "_ui5propertyName": "text", - "_ui5type": { - "text": "Array<Node>" - }, - "_ui5privacy": "public" - } - ], - "members": [ - { - "kind": "field", - "name": "maxLines", - "type": { - "text": "number" - }, - "default": "Infinity", - "description": "Defines the number of lines the text should wrap before it truncates.", - "privacy": "public" - }, - { - "kind": "field", - "name": "emptyIndicatorMode", - "type": { - "text": "TextEmptyIndicatorMode", - "references": [ - { - "name": "TextEmptyIndicatorMode", - "package": "@ui5/webcomponents", - "module": "dist/types/TextEmptyIndicatorMode.js" - } - ] - }, - "default": "\"Off\"", - "description": "Specifies if an empty indicator should be displayed when there is no text.", - "privacy": "public", - "_ui5since": "2.2.0" - } - ], - "attributes": [ - { - "description": "Defines the number of lines the text should wrap before it truncates.", - "name": "max-lines", - "default": "Infinity", - "fieldName": "maxLines", - "type": { - "text": "number" - } - }, - { - "description": "Specifies if an empty indicator should be displayed when there is no text.", - "name": "empty-indicator-mode", - "default": "\"Off\"", - "fieldName": "emptyIndicatorMode", - "type": { - "text": "\"On\" | \"Off\"" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-text", - "customElement": true, - "_ui5since": "2.0.0", + "kind": "js", + "name": "default", + "declaration": { + "name": "TreeList", + "module": "dist/TreeList.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/YearPicker.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "YearPicker", + "module": "dist/YearPicker.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/YearRangePicker.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "YearRangePicker", + "module": "dist/YearRangePicker.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/colorpicker-utils/ColorValue.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ColorValue", + "module": "dist/colorpicker-utils/ColorValue.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/delegate/DragAndDropHandler.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "DragAndDropHandler", + "module": "dist/delegate/DragAndDropHandler.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/dynamic-date-range-options/DateRange.js", + "declarations": [ + { + "kind": "class", + "description": "", + "name": "DateRange", + "_ui5since": "2.11.0", "_ui5privacy": "public" } ], @@ -30310,401 +31854,44 @@ "kind": "js", "name": "default", "declaration": { - "name": "Text", - "module": "dist/Text.js" + "name": "DateRange", + "module": "dist/dynamic-date-range-options/DateRange.js" } - }, + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/dynamic-date-range-options/DateTimeRange.js", + "declarations": [ { - "kind": "custom-element-definition", - "name": "ui5-text", + "kind": "class", + "description": "", + "name": "DateTimeRange", + "_ui5since": "2.16.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", "declaration": { - "name": "Text", - "module": "dist/Text.js" + "name": "DateTimeRange", + "module": "dist/dynamic-date-range-options/DateTimeRange.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TextArea.js", + "path": "dist/dynamic-date-range-options/FromDateTime.js", "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-textarea` component is used to enter multiple rows of text.\n\nWhen empty, it can hold a placeholder similar to a `ui5-input`.\nYou can define the rows of the `ui5-textarea` and also determine specific behavior when handling long texts.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TextArea.js\";`", - "name": "TextArea", - "cssParts": [ - { - "description": "Used to style the native textarea", - "name": "textarea" - } - ], - "slots": [ - { - "name": "valueStateMessage", - "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n \n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed if the component has\n`valueState` of type `Information`, `Critical` or `Negative`.", - "_ui5since": "1.0.0-rc.7", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - } - ], - "members": [ - { - "kind": "field", - "name": "value", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "Defines the value of the component.", - "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change,input" - }, - { - "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Indicates whether the user can interact with the component or not.\n\n**Note:** A disabled component is completely noninteractive.", - "privacy": "public" - }, - { - "kind": "field", - "name": "readonly", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", - "privacy": "public" - }, - { - "kind": "field", - "name": "required", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is required.", - "privacy": "public", - "_ui5since": "1.0.0-rc.3" - }, - { - "kind": "field", - "name": "placeholder", - "type": { - "text": "string | undefined" - }, - "description": "Defines a short hint intended to aid the user with data entry when the component has no value.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "valueState", - "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the value state of the component.\n\n**Note:** If `maxlength` property is set,\nthe component turns into \"Critical\" state once the characters exceeds the limit.\nIn this case, only the \"Negative\" state is considered and can be applied.", - "privacy": "public", - "_ui5since": "1.0.0-rc.7" - }, - { - "kind": "field", - "name": "rows", - "type": { - "text": "number" - }, - "default": "0", - "description": "Defines the number of visible text rows for the component.\n\n**Notes:**\n\n- If the `growing` property is enabled, this property defines the minimum rows to be displayed\nin the textarea.\n- The CSS `height` property wins over the `rows` property, if both are set.", - "privacy": "public" - }, - { - "kind": "field", - "name": "maxlength", - "type": { - "text": "number | undefined" - }, - "description": "Defines the maximum number of characters that the `value` can have.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "showExceededText", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.", - "privacy": "public" - }, - { - "kind": "field", - "name": "growing", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Enables the component to automatically grow and shrink dynamically with its content.", - "privacy": "public" - }, - { - "kind": "field", - "name": "growingMaxRows", - "type": { - "text": "number" - }, - "default": "0", - "description": "Defines the maximum number of rows that the component can grow.", - "privacy": "public" - }, - { - "kind": "field", - "name": "name", - "type": { - "text": "string | undefined" - }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "default": "undefined", - "privacy": "public" - }, - { - "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" - }, - { - "kind": "field", - "name": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that label the textarea.", - "default": "undefined", - "privacy": "public", - "_ui5since": "1.0.0-rc.15" - } - ], - "events": [ - { - "name": "change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the text has changed and the focus leaves the component.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true - }, - { - "name": "input", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<TextAreaInputEventDetail>", - "references": [ - { - "name": "TextAreaInputEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/TextArea.js" - } - ] - }, - "description": "Fired when the value of the component changes at each keystroke or when\nsomething is pasted.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5since": "1.0.0-rc.5", - "_ui5parameters": [ - { - "type": { - "text": "boolean" - }, - "name": "escapePressed", - "_ui5privacy": "public", - "description": "Indicates whether the Escape key was pressed, which triggers a revert to the previous value" - } - ] - }, - { - "name": "select", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when some text has been selected.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "1.23.0" - }, - { - "name": "scroll", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when textarea is scrolled.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "1.23.0" - } - ], - "attributes": [ - { - "description": "Defines the value of the component.", - "name": "value", - "default": "\"\"", - "fieldName": "value", - "type": { - "text": "string" - } - }, - { - "description": "Indicates whether the user can interact with the component or not.\n\n**Note:** A disabled component is completely noninteractive.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", - "name": "readonly", - "default": "false", - "fieldName": "readonly", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the component is required.", - "name": "required", - "default": "false", - "fieldName": "required", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines a short hint intended to aid the user with data entry when the component has no value.", - "name": "placeholder", - "default": "undefined", - "fieldName": "placeholder", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the value state of the component.\n\n**Note:** If `maxlength` property is set,\nthe component turns into \"Critical\" state once the characters exceeds the limit.\nIn this case, only the \"Negative\" state is considered and can be applied.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", - "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" - } - }, - { - "description": "Defines the number of visible text rows for the component.\n\n**Notes:**\n\n- If the `growing` property is enabled, this property defines the minimum rows to be displayed\nin the textarea.\n- The CSS `height` property wins over the `rows` property, if both are set.", - "name": "rows", - "default": "0", - "fieldName": "rows", - "type": { - "text": "number" - } - }, - { - "description": "Defines the maximum number of characters that the `value` can have.", - "name": "maxlength", - "default": "undefined", - "fieldName": "maxlength", - "type": { - "text": "number | undefined" - } - }, - { - "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.", - "name": "show-exceeded-text", - "default": "false", - "fieldName": "showExceededText", - "type": { - "text": "boolean" - } - }, - { - "description": "Enables the component to automatically grow and shrink dynamically with its content.", - "name": "growing", - "default": "false", - "fieldName": "growing", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the maximum number of rows that the component can grow.", - "name": "growing-max-rows", - "default": "0", - "fieldName": "growingMaxRows", - "type": { - "text": "number" - } - }, - { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", - "default": "undefined", - "fieldName": "name", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Receives id(or many ids) of the elements that label the textarea.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-textarea", - "customElement": true, + "description": "", + "name": "FromDateTime", + "_ui5since": "2.11.0", "_ui5privacy": "public" } ], @@ -30713,476 +31900,565 @@ "kind": "js", "name": "default", "declaration": { - "name": "TextArea", - "module": "dist/TextArea.js" + "name": "FromDateTime", + "module": "dist/dynamic-date-range-options/FromDateTime.js" } - }, + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/dynamic-date-range-options/LastNextUtils.js", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "dist/dynamic-date-range-options/LastOptions.js", + "declarations": [ { - "kind": "custom-element-definition", - "name": "ui5-textarea", + "kind": "class", + "description": "", + "name": "LastOptions", + "_ui5since": "2.14.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", "declaration": { - "name": "TextArea", - "module": "dist/TextArea.js" + "name": "LastOptions", + "module": "dist/dynamic-date-range-options/LastOptions.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/dynamic-date-range-options/NextOptions.js", + "declarations": [ + { + "kind": "class", + "description": "", + "name": "NextOptions", + "_ui5since": "2.14.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "NextOptions", + "module": "dist/dynamic-date-range-options/NextOptions.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/dynamic-date-range-options/SingleDate.js", + "declarations": [ + { + "kind": "class", + "description": "", + "name": "SingleDate", + "_ui5since": "2.11.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "SingleDate", + "module": "dist/dynamic-date-range-options/SingleDate.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/dynamic-date-range-options/ToDateTime.js", + "declarations": [ + { + "kind": "class", + "description": "", + "name": "ToDateTime", + "_ui5since": "2.11.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ToDateTime", + "module": "dist/dynamic-date-range-options/ToDateTime.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/dynamic-date-range-options/Today.js", + "declarations": [ + { + "kind": "class", + "description": "", + "name": "Today", + "_ui5since": "2.11.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Today", + "module": "dist/dynamic-date-range-options/Today.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/dynamic-date-range-options/Tomorrow.js", + "declarations": [ + { + "kind": "class", + "description": "", + "name": "Tomorrow", + "_ui5since": "2.11.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Tomorrow", + "module": "dist/dynamic-date-range-options/Tomorrow.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/dynamic-date-range-options/Yesterday.js", + "declarations": [ + { + "kind": "class", + "description": "", + "name": "Yesterday", + "_ui5since": "2.11.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Yesterday", + "module": "dist/dynamic-date-range-options/Yesterday.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TimePicker.js", + "path": "dist/dynamic-date-range-options/toDates.js", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "dist/features/ColorPaletteMoreColors.js", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "dist/features/InputComposition.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "InputComposition", + "module": "dist/features/InputComposition.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/features/InputSuggestions.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Suggestions", + "module": "dist/features/InputSuggestions.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/features/ListItemStandardExpandableText.js", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "dist/popup-utils/OpenedPopupsRegistry.js", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "dist/popup-utils/PopoverRegistry.js", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "dist/timepicker-utils/TimeSlider.js", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "dist/types/AvatarColorScheme.js", "declarations": [ { - "kind": "class", - "description": "### Overview\nThe `ui5-time-picker` component provides an input field with assigned clocks which are opened on user action.\nThe `ui5-time-picker` allows users to select a localized time using touch, mouse, or keyboard input.\nIt consists of two parts: the time input field and the clocks.\n\n### Usage\nThe user can enter a time by:\n\n- Using the clocks that are displayed in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and chooses the enter key, the clocks show the corresponding time (hours, minutes and seconds separately).\nWhen the user directly triggers the clocks display, the actual time is displayed.\nFor the `ui5-time-picker`\n\n### Formatting\n\nIf a time is entered by typing it into\nthe input field, it must fit to the used time format.\n\nSupported format options are pattern-based on Unicode LDML Date Format notation.\nFor more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\nFor example, if the `format-pattern` is \"HH:mm:ss\",\na valid value string is \"11:42:35\" and the same is displayed in the input.\n\n### Keyboard handling\n[F4], [Alt]+[Up], [Alt]+[Down] Open/Close picker dialog and move focus to it.\n\nWhen closed:\n\n- [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.\n- [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.\n- [Shift]+[Page Up] - Increments minutes by 1.\n- [Shift]+[Page Down] - Decrements minutes by 1.\n- [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.\n- [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.\n-\n\nWhen opened:\n\n- [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.\n- [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.\n- [Shift]+[Page Up] - Increments minutes by 1.\n- [Shift]+[Page Down] - Decrements minutes by 1.\n- [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.\n- [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.\n- [A] or [P] - Selects AM or PM respectively.\n- [0]-[9] - Allows direct time selecting (hours/minutes/seconds).\n- [:] - Allows switching between hours/minutes/seconds clocks. If the last clock is displayed and [:] is pressed, the first clock is beind displayed.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TimePicker.js\";`", - "name": "TimePicker", - "slots": [ - { - "name": "valueStateMessage", - "description": "Defines the value state message that will be displayed as pop up under the `ui5-time-picker`.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the `ui5-time-picker` is in `Information`, `Critical` or `Negative` value state.", - "_ui5since": "1.0.0-rc.8", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - } - ], + "kind": "enum", + "name": "AvatarColorScheme", + "description": "Different types of AvatarColorScheme.", + "_ui5privacy": "public", "members": [ { "kind": "field", - "name": "value", - "type": { - "text": "string" - }, - "default": "\"\"", - "description": "Defines a formatted time value.", + "static": true, "privacy": "public", - "_ui5formProperty": true, - "_ui5formEvents": "change,input" + "_ui5since": "2.9.0", + "default": "Auto", + "name": "Auto", + "readonly": true }, { "kind": "field", - "name": "name", - "type": { - "text": "string | undefined" - }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "2.0.0" + "default": "Accent1", + "name": "Accent1", + "readonly": true }, { "kind": "field", - "name": "valueState", - "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the value state of the component.", - "privacy": "public" + "static": true, + "privacy": "public", + "default": "Accent2", + "name": "Accent2", + "readonly": true }, { "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the disabled state of the comonent.", - "privacy": "public" + "static": true, + "privacy": "public", + "default": "Accent3", + "name": "Accent3", + "readonly": true }, { "kind": "field", - "name": "readonly", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the readonly state of the comonent.", - "privacy": "public" + "static": true, + "privacy": "public", + "default": "Accent4", + "name": "Accent4", + "readonly": true }, { "kind": "field", - "name": "placeholder", - "type": { - "text": "string | undefined" - }, - "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "default": "Accent5", + "name": "Accent5", + "readonly": true }, { "kind": "field", - "name": "formatPattern", - "type": { - "text": "string | undefined" - }, - "description": "Determines the format, displayed in the input field.\n\nExample:\nHH:mm:ss -> 11:42:35\nhh:mm:ss a -> 2:23:15 PM\nmm:ss -> 12:04 (only minutes and seconds)", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "default": "Accent6", + "name": "Accent6", + "readonly": true }, { "kind": "field", - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the open or closed state of the popover.", + "static": true, "privacy": "public", - "_ui5since": "2.0.0" + "default": "Accent7", + "name": "Accent7", + "readonly": true }, { "kind": "field", - "name": "required", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is required.", + "static": true, "privacy": "public", - "_ui5since": "2.1.0" + "default": "Accent8", + "name": "Accent8", + "readonly": true }, { "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the aria-label attribute for the component.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "2.1.0" + "default": "Accent9", + "name": "Accent9", + "readonly": true }, { "kind": "field", - "name": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, - "description": "Receives id (or many ids) of the elements that label the component.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "2.1.0" + "default": "Accent10", + "name": "Accent10", + "readonly": true }, { "kind": "field", - "name": "accessibleDescription", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible description of the component.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "2.14.0" + "default": "Placeholder", + "name": "Placeholder", + "readonly": true }, { "kind": "field", - "name": "accessibleDescriptionRef", - "type": { - "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that describe the input.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "2.14.0" - }, + "default": "Transparent", + "name": "Transparent", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "AvatarColorScheme", + "module": "dist/types/AvatarColorScheme.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/AvatarGroupType.js", + "declarations": [ + { + "kind": "enum", + "name": "AvatarGroupType", + "description": "Different types of AvatarGroupType.", + "_ui5privacy": "public", + "members": [ { "kind": "field", - "name": "dateValue", - "type": { - "text": "Date | null" - }, - "description": "Currently selected time represented as JavaScript Date instance", + "static": true, "privacy": "public", - "default": "null", + "description": "The avatars are displayed as partially overlapped on top of each other and the entire group has one click or tap area.", + "default": "Group", + "name": "Group", "readonly": true }, { - "kind": "method", - "name": "formatValue", - "return": { - "type": { - "text": "string" - }, - "description": "formatted value" - }, - "parameters": [ - { - "name": "date", - "type": { - "text": "Date" - }, - "description": "A Java Script date object to be formatted as string", - "_ui5privacy": "public" - } - ], - "description": "Formats a Java Script date object into a string representing a locale date and time\naccording to the `formatPattern` property of the TimePicker instance", - "privacy": "public" - }, - { - "kind": "method", - "name": "isValid", - "return": { - "type": { - "text": "boolean" - } - }, - "parameters": [ - { - "name": "value", - "type": { - "text": "string | undefined" - }, - "description": "The value to be tested against the current date format", - "_ui5privacy": "public" - } - ], - "description": "Checks if a value is valid against the current `formatPattern` value.\n\n**Note:** an empty string is considered as valid value.", - "privacy": "public" + "kind": "field", + "static": true, + "privacy": "public", + "description": "The avatars are displayed side-by-side and each avatar has its own click or tap area.", + "default": "Individual", + "name": "Individual", + "readonly": true } - ], - "events": [ - { - "name": "change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<TimePickerChangeEventDetail>", - "references": [ - { - "name": "TimePickerChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/TimePicker.js" - } - ] - }, - "description": "Fired when the input operation has finished by clicking the \"OK\" button or\nwhen the text in the input field has changed and the focus leaves the input field.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "string" - }, - "name": "value", - "_ui5privacy": "public", - "description": "The submitted value." - }, - { - "type": { - "text": "boolean" - }, - "name": "valid", - "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." - } - ] - }, - { - "name": "input", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<TimePickerInputEventDetail>", - "references": [ - { - "name": "TimePickerInputEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/TimePicker.js" - } - ] - }, - "description": "Fired when the value of the `ui5-time-picker` is changed at each key stroke.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "string" - }, - "name": "value", - "_ui5privacy": "public", - "description": "The current value." - }, - { - "type": { - "text": "boolean" - }, - "name": "valid", - "_ui5privacy": "public", - "description": "Indicator if the value is in correct format pattern and in valid range." - } - ] - }, + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "AvatarGroupType", + "module": "dist/types/AvatarGroupType.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/AvatarShape.js", + "declarations": [ + { + "kind": "enum", + "name": "AvatarShape", + "description": "Different types of AvatarShape.", + "_ui5privacy": "public", + "members": [ { - "name": "open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the value-help dialog of the component is opened.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.0.0" + "kind": "field", + "static": true, + "privacy": "public", + "description": "Circular shape.", + "default": "Circle", + "name": "Circle", + "readonly": true }, { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the value-help dialog of the component is closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.0.0" + "kind": "field", + "static": true, + "privacy": "public", + "description": "Square shape.", + "default": "Square", + "name": "Square", + "readonly": true } - ], - "attributes": [ - { - "description": "Defines a formatted time value.", - "name": "value", - "default": "\"\"", - "fieldName": "value", - "type": { - "text": "string" - } - }, - { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "name", - "default": "undefined", - "fieldName": "name", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", - "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" - } - }, - { - "description": "Defines the disabled state of the comonent.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the readonly state of the comonent.", - "name": "readonly", - "default": "false", - "fieldName": "readonly", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines a short hint, intended to aid the user with data entry when the\ncomponent has no value.\n\n**Note:** When no placeholder is set, the format pattern is displayed as a placeholder.\nPassing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.", - "name": "placeholder", - "default": "undefined", - "fieldName": "placeholder", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Determines the format, displayed in the input field.\n\nExample:\nHH:mm:ss -> 11:42:35\nhh:mm:ss a -> 2:23:15 PM\nmm:ss -> 12:04 (only minutes and seconds)", - "name": "format-pattern", - "default": "undefined", - "fieldName": "formatPattern", - "type": { - "text": "string | undefined" - } - }, + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "AvatarShape", + "module": "dist/types/AvatarShape.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/AvatarSize.js", + "declarations": [ + { + "kind": "enum", + "name": "AvatarSize", + "description": "Different types of AvatarSize.", + "_ui5privacy": "public", + "members": [ { - "description": "Defines the open or closed state of the popover.", - "name": "open", - "default": "false", - "fieldName": "open", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "component size - 2rem\nfont size - 1rem", + "default": "XS", + "name": "XS", + "readonly": true }, { - "description": "Defines whether the component is required.", - "name": "required", - "default": "false", - "fieldName": "required", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "component size - 3rem\nfont size - 1.5rem", + "default": "S", + "name": "S", + "readonly": true }, { - "description": "Defines the aria-label attribute for the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "component size - 4rem\nfont size - 2rem", + "default": "M", + "name": "M", + "readonly": true }, { - "description": "Receives id (or many ids) of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "component size - 5rem\nfont size - 2.5rem", + "default": "L", + "name": "L", + "readonly": true }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "component size - 7rem\nfont size - 3rem", + "default": "XL", + "name": "XL", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "AvatarSize", + "module": "dist/types/AvatarSize.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/BackgroundDesign.js", + "declarations": [ + { + "kind": "enum", + "name": "BackgroundDesign", + "description": "Defines background designs.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "A solid background color dependent on the theme.", + "default": "Solid", + "name": "Solid", + "readonly": true }, { - "description": "Receives id(or many ids) of the elements that describe the input.", - "name": "accessible-description-ref", - "default": "undefined", - "fieldName": "accessibleDescriptionRef", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Transparent background.", + "default": "Transparent", + "name": "Transparent", + "readonly": true }, { - "description": "Currently selected time represented as JavaScript Date instance", - "name": "date-value", - "default": "null", - "fieldName": "dateValue", - "type": { - "text": "any" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "A translucent background depending on the opacity value of the theme.", + "default": "Translucent", + "name": "Translucent", + "readonly": true } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-time-picker", - "customElement": true, - "_ui5since": "1.0.0-rc.6", - "_ui5privacy": "public" + ] } ], "exports": [ @@ -31190,188 +32466,357 @@ "kind": "js", "name": "default", "declaration": { - "name": "TimePicker", - "module": "dist/TimePicker.js" + "name": "BackgroundDesign", + "module": "dist/types/BackgroundDesign.js" } - }, + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/BarAccessibleRole.js", + "declarations": [ { - "kind": "custom-element-definition", - "name": "ui5-time-picker", + "kind": "enum", + "name": "BarAccessibleRole", + "description": "ListItem accessible roles.", + "_ui5privacy": "public", + "_ui5since": "2.9.0", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the ARIA role \"toolbar\".", + "default": "Toolbar", + "name": "Toolbar", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the ARIA role \"none\".", + "default": "None", + "name": "None", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", "declaration": { - "name": "TimePicker", - "module": "dist/TimePicker.js" + "name": "BarAccessibleRole", + "module": "dist/types/BarAccessibleRole.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TimePickerClock.js", - "declarations": [], + "path": "dist/types/BarDesign.js", + "declarations": [ + { + "kind": "enum", + "name": "BarDesign", + "description": "Different types of Bar design", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Default type", + "default": "Header", + "name": "Header", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Subheader type", + "default": "Subheader", + "name": "Subheader", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Footer type", + "default": "Footer", + "name": "Footer", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Floating Footer type - there is visible border on all sides", + "default": "FloatingFooter", + "name": "FloatingFooter", + "readonly": true + } + ] + } + ], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "TimePickerClock", - "module": "dist/TimePickerClock.js" + "name": "BarDesign", + "module": "dist/types/BarDesign.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TimePickerInternals.js", - "declarations": [], + "path": "dist/types/BorderDesign.js", + "declarations": [ + { + "kind": "enum", + "name": "BorderDesign", + "description": "Defines border designs.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "A solid border color dependent on the theme.", + "default": "Solid", + "name": "Solid", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Specifies no border.", + "default": "None", + "name": "None", + "readonly": true + } + ] + } + ], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "TimePickerInternals", - "module": "dist/TimePickerInternals.js" + "name": "BorderDesign", + "module": "dist/types/BorderDesign.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TimeSelectionClocks.js", - "declarations": [], + "path": "dist/types/BreadcrumbsDesign.js", + "declarations": [ + { + "kind": "enum", + "name": "BreadcrumbsDesign", + "description": "Different Breadcrumbs designs.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Shows the current page as the last item in the trail.\nThe last item contains only plain text and is not a link.", + "default": "Standard", + "name": "Standard", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "All items are displayed as links.", + "default": "NoCurrentPage", + "name": "NoCurrentPage", + "readonly": true + } + ] + } + ], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "TimeSelectionClocks", - "module": "dist/TimeSelectionClocks.js" + "name": "BreadcrumbsDesign", + "module": "dist/types/BreadcrumbsDesign.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TimeSelectionInputs.js", - "declarations": [], + "path": "dist/types/BreadcrumbsSeparator.js", + "declarations": [ + { + "kind": "enum", + "name": "BreadcrumbsSeparator", + "description": "Different Breadcrumbs separators.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "The separator appears as \"/\".", + "default": "Slash", + "name": "Slash", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "The separator appears as \"\\\".", + "default": "BackSlash", + "name": "BackSlash", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "The separator appears as \"\\\\\".", + "default": "DoubleBackSlash", + "name": "DoubleBackSlash", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "The separator appears as \">>\".", + "default": "DoubleGreaterThan", + "name": "DoubleGreaterThan", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "The separator appears as \"//\" .", + "default": "DoubleSlash", + "name": "DoubleSlash", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "The separator appears as \">\".", + "default": "GreaterThan", + "name": "GreaterThan", + "readonly": true + } + ] + } + ], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "TimeSelectionInputs", - "module": "dist/TimeSelectionInputs.js" + "name": "BreadcrumbsSeparator", + "module": "dist/types/BreadcrumbsSeparator.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Title.js", + "path": "dist/types/BusyIndicatorSize.js", "declarations": [ { - "kind": "class", - "description": "### Overview\n\nThe `ui5-title` component is used to display titles inside a page.\nIt is a simple, large-sized text with explicit header/title semantics.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Title.js\";`", - "name": "Title", - "slots": [ - { - "description": "Defines the text of the component.\nThis component supports nesting a `Link` component inside.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", - "name": "default", - "_ui5privacy": "public", - "_ui5type": { - "text": "Array<Node>" - } - } - ], + "kind": "enum", + "name": "BusyIndicatorSize", + "description": "Different BusyIndicator sizes.", + "_ui5privacy": "public", "members": [ { "kind": "field", - "name": "wrappingType", - "type": { - "text": "WrappingType", - "references": [ - { - "name": "WrappingType", - "package": "@ui5/webcomponents", - "module": "dist/types/WrappingType.js" - } - ] - }, - "default": "\"Normal\"", - "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "small size", + "default": "S", + "name": "S", + "readonly": true }, { "kind": "field", - "name": "level", - "type": { - "text": "TitleLevel", - "references": [ - { - "name": "TitleLevel", - "package": "@ui5/webcomponents", - "module": "dist/types/TitleLevel.js" - } - ] - }, - "default": "\"H2\"", - "description": "Defines the component level.\nAvailable options are: `\"H6\"` to `\"H1\"`.\nThis property does not influence the style of the component.\nUse the property `size` for this purpose instead.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "medium size", + "default": "M", + "name": "M", + "readonly": true }, { "kind": "field", - "name": "size", - "type": { - "text": "TitleLevel", - "references": [ - { - "name": "TitleLevel", - "package": "@ui5/webcomponents", - "module": "dist/types/TitleLevel.js" - } - ] - }, - "default": "\"H5\"", - "description": "Defines the visual appearance of the title.\nAvailable options are: `\"H6\"` to `\"H1\"`.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "large size", + "default": "L", + "name": "L", + "readonly": true } - ], - "attributes": [ - { - "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.", - "name": "wrapping-type", - "default": "\"Normal\"", - "fieldName": "wrappingType", - "type": { - "text": "\"None\" | \"Normal\"" - } - }, + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "BusyIndicatorSize", + "module": "dist/types/BusyIndicatorSize.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/BusyIndicatorTextPlacement.js", + "declarations": [ + { + "kind": "enum", + "name": "BusyIndicatorTextPlacement", + "description": "Different BusyIndicator text placements.", + "_ui5privacy": "public", + "members": [ { - "description": "Defines the component level.\nAvailable options are: `\"H6\"` to `\"H1\"`.\nThis property does not influence the style of the component.\nUse the property `size` for this purpose instead.", - "name": "level", - "default": "\"H2\"", - "fieldName": "level", - "type": { - "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "The text will be displayed on top of the busy indicator.", + "default": "Top", + "name": "Top", + "readonly": true }, { - "description": "Defines the visual appearance of the title.\nAvailable options are: `\"H6\"` to `\"H1\"`.", - "name": "size", - "default": "\"H5\"", - "fieldName": "size", - "type": { - "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "The text will be displayed at the bottom of the busy indicator.", + "default": "Bottom", + "name": "Bottom", + "readonly": true } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-title", - "customElement": true, - "_ui5privacy": "public" + ] } ], "exports": [ @@ -31379,130 +32824,94 @@ "kind": "js", "name": "default", "declaration": { - "name": "Title", - "module": "dist/Title.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-title", - "declaration": { - "name": "Title", - "module": "dist/Title.js" + "name": "BusyIndicatorTextPlacement", + "module": "dist/types/BusyIndicatorTextPlacement.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Toast.js", + "path": "dist/types/ButtonAccessibleRole.js", "declarations": [ { - "kind": "class", - "description": "### Overview\n\nThe `ui5-toast` is a small, non-disruptive popup for success or information messages that\ndisappears automatically after a few seconds.\n\n### Usage\n\n#### When to use:\n\n- You want to display a short success or information message.\n- You do not want to interrupt users while they are performing an action.\n- You want to confirm a successful action.\n\n#### When not to use:\n\n- You want to display error or warning message.\n- You want to interrupt users while they are performing an action.\n- You want to make sure that users read the message before they leave the page.\n- You want users to be able to copy some part of the message text.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Toast.js\";`", - "name": "Toast", - "slots": [ - { - "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", - "name": "default", - "_ui5privacy": "public", - "_ui5type": { - "text": "Array<Node>" - } - } - ], + "kind": "enum", + "name": "ButtonAccessibleRole", + "description": "Button accessible roles.", + "_ui5privacy": "public", + "_ui5since": "1.23", "members": [ { "kind": "field", - "name": "duration", - "type": { - "text": "number" - }, - "default": "3000", - "description": "Defines the duration in milliseconds for which component\nremains on the screen before it's automatically closed.\n\n**Note:** The minimum supported value is `500` ms\nand even if a lower value is set, the duration would remain `500` ms.", - "privacy": "public" - }, - { - "kind": "field", - "name": "placement", - "type": { - "text": "ToastPlacement", - "references": [ - { - "name": "ToastPlacement", - "package": "@ui5/webcomponents", - "module": "dist/types/ToastPlacement.js" - } - ] - }, - "default": "\"BottomCenter\"", - "description": "Defines the placement of the component.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Represents Default (button) ARIA role.", + "default": "Button", + "name": "Button", + "readonly": true }, { "kind": "field", - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Indicates whether the component is open (visible).", + "static": true, "privacy": "public", - "_ui5since": "2.0.0" - } - ], - "events": [ - { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the component is auto closed.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false, - "_ui5since": "2.0.0" + "description": "Represents the ARIA role \"link\".", + "default": "Link", + "name": "Link", + "readonly": true } - ], - "attributes": [ + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ButtonAccessibleRole", + "module": "dist/types/ButtonAccessibleRole.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/ButtonBadgeDesign.js", + "declarations": [ + { + "kind": "enum", + "name": "ButtonBadgeDesign", + "description": "Determines where the badge will be placed and how it will be styled.", + "_ui5privacy": "public", + "_ui5since": "2.7.0", + "members": [ { - "description": "Defines the duration in milliseconds for which component\nremains on the screen before it's automatically closed.\n\n**Note:** The minimum supported value is `500` ms\nand even if a lower value is set, the duration would remain `500` ms.", - "name": "duration", - "default": "3000", - "fieldName": "duration", - "type": { - "text": "number" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "The badge is displayed after the text, inside the button.", + "default": "InlineText", + "name": "InlineText", + "readonly": true }, { - "description": "Defines the placement of the component.", - "name": "placement", - "default": "\"BottomCenter\"", - "fieldName": "placement", - "type": { - "text": "\"TopStart\" | \"TopCenter\" | \"TopEnd\" | \"MiddleStart\" | \"MiddleCenter\" | \"MiddleEnd\" | \"BottomStart\" | \"BottomCenter\" | \"BottomEnd\"" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "The badge is displayed at the top-end corner of the button.\n\n**Note:** According to design guidance, the OverlayText design mode is best used in cozy density to avoid potential visual issues in compact.", + "default": "OverlayText", + "name": "OverlayText", + "readonly": true }, { - "description": "Indicates whether the component is open (visible).", - "name": "open", - "default": "false", - "fieldName": "open", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "The badge is displayed as an attention dot.", + "default": "AttentionDot", + "name": "AttentionDot", + "readonly": true } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-toast", - "customElement": true, - "_ui5since": "1.0.0-rc.6", - "_ui5privacy": "public" + ] } ], "exports": [ @@ -31510,602 +32919,485 @@ "kind": "js", "name": "default", "declaration": { - "name": "Toast", - "module": "dist/Toast.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-toast", - "declaration": { - "name": "Toast", - "module": "dist/Toast.js" + "name": "ButtonBadgeDesign", + "module": "dist/types/ButtonBadgeDesign.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ToggleButton.js", + "path": "dist/types/ButtonDesign.js", "declarations": [ { - "kind": "class", - "description": "### Overview\n\nThe `ui5-toggle-button` component is an enhanced `ui5-button`\nthat can be toggled between pressed and normal states.\nUsers can use the `ui5-toggle-button` as a switch to turn a setting on or off.\nIt can also be used to represent an independent choice similar to a check box.\n\nClicking or tapping on a `ui5-toggle-button` changes its state to `pressed`. The button returns to\nits initial state when the user clicks or taps on it again.\nBy applying additional custom CSS-styling classes, apps can give a different style to any `ui5-toggle-button`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ToggleButton.js\";`", - "name": "ToggleButton", + "kind": "enum", + "name": "ButtonDesign", + "description": "Different Button designs.", + "_ui5privacy": "public", "members": [ { "kind": "field", - "name": "pressed", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Determines whether the component is displayed as pressed.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "default type (no special styling)", + "default": "Default", + "name": "Default", + "readonly": true }, { "kind": "field", - "name": "design", - "type": { - "text": "ButtonDesign", - "references": [ - { - "name": "ButtonDesign", - "package": "@ui5/webcomponents", - "module": "dist/types/ButtonDesign.js" - } - ] - }, - "default": "\"Default\"", - "description": "Defines the component design.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "description": "accept type (green button)", + "default": "Positive", + "name": "Positive", + "readonly": true }, { "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "description": "reject style (red button)", + "default": "Negative", + "name": "Negative", + "readonly": true }, { "kind": "field", - "name": "icon", - "type": { - "text": "string | undefined" - }, - "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "default": "undefined", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "description": "transparent type", + "default": "Transparent", + "name": "Transparent", + "readonly": true }, { "kind": "field", - "name": "endIcon", - "type": { - "text": "string | undefined" - }, - "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "default": "undefined", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "description": "emphasized type", + "default": "Emphasized", + "name": "Emphasized", + "readonly": true }, { "kind": "field", - "name": "submits", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** This property is only applicable within the context of an HTML Form element.`", + "static": true, "privacy": "public", - "deprecated": "Set the \"type\" property to \"Submit\" to achieve the same result. The \"submits\" property is ignored if \"type\" is set to any value other than \"Button\".", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "description": "attention type", + "default": "Attention", + "name": "Attention", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ButtonDesign", + "module": "dist/types/ButtonDesign.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/ButtonType.js", + "declarations": [ + { + "kind": "enum", + "name": "ButtonType", + "description": "Determines if the button has special form-related functionality.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "The button does not do anything special when inside a form", + "default": "Button", + "name": "Button", + "readonly": true }, { "kind": "field", - "name": "tooltip", - "type": { - "text": "string | undefined" - }, - "description": "Defines the tooltip of the component.\n\n**Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "1.2.0", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "description": "The button acts as a submit button (submits a form)", + "default": "Submit", + "name": "Submit", + "readonly": true }, { "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "description": "The button acts as a reset button (resets a form)", + "default": "Reset", + "name": "Reset", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ButtonType", + "module": "dist/types/ButtonType.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/CalendarLegendItemType.js", + "declarations": [ + { + "kind": "enum", + "name": "CalendarLegendItemType", + "description": "Enum for calendar legend items' types.", + "_ui5privacy": "public", + "_ui5since": "1.23.0", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Set when no type is set.", + "default": "None", + "name": "None", + "readonly": true }, { "kind": "field", - "name": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that label the component.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "1.1.0", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "description": "Represents the \"Working\" item in the calendar legend.", + "default": "Working", + "name": "Working", + "readonly": true }, { "kind": "field", - "name": "accessibilityAttributes", - "type": { - "text": "ButtonAccessibilityAttributes", - "references": [ - { - "name": "ButtonAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] - }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "static": true, "privacy": "public", - "_ui5since": "1.2.0", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "description": "Represents the \"NonWorking\" item in the calendar legend.", + "default": "NonWorking", + "name": "NonWorking", + "readonly": true }, { "kind": "field", - "name": "accessibleDescription", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible description of the component.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "2.5.0", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "description": "Represents the \"Type01\" item in the calendar legend.", + "default": "Type01", + "name": "Type01", + "readonly": true }, { "kind": "field", - "name": "type", - "type": { - "text": "ButtonType", - "references": [ - { - "name": "ButtonType", - "package": "@ui5/webcomponents", - "module": "dist/types/ButtonType.js" - } - ] - }, - "default": "\"Button\"", - "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", + "static": true, "privacy": "public", - "_ui5since": "1.15.0", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "description": "Represents the \"Type02\" item in the calendar legend.", + "default": "Type02", + "name": "Type02", + "readonly": true }, { "kind": "field", - "name": "accessibleRole", - "type": { - "text": "ButtonAccessibleRole", - "references": [ - { - "name": "ButtonAccessibleRole", - "package": "@ui5/webcomponents", - "module": "dist/types/ButtonAccessibleRole.js" - } - ] - }, - "default": "\"Button\"", - "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.", + "static": true, "privacy": "public", - "_ui5since": "1.23", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "description": "Represents the \"Type03\" item in the calendar legend.", + "default": "Type03", + "name": "Type03", + "readonly": true }, { "kind": "field", - "name": "loading", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.", + "static": true, "privacy": "public", - "_ui5since": "2.13.0", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "description": "Represents the \"Type04\" item in the calendar legend.", + "default": "Type04", + "name": "Type04", + "readonly": true }, { "kind": "field", - "name": "loadingDelay", - "type": { - "text": "number" - }, - "default": "1000", - "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.", + "static": true, "privacy": "public", - "_ui5since": "2.13.0", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } - } - ], - "attributes": [ + "description": "Represents the \"Type05\" item in the calendar legend.", + "default": "Type05", + "name": "Type05", + "readonly": true + }, { - "description": "Determines whether the component is displayed as pressed.", - "name": "pressed", - "default": "false", - "fieldName": "pressed", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the \"Type06\" item in the calendar legend.", + "default": "Type06", + "name": "Type06", + "readonly": true }, { - "description": "Defines the component design.", - "name": "design", - "default": "\"Default\"", - "fieldName": "design", - "type": { - "text": "\"Transparent\" | \"Default\" | \"Positive\" | \"Negative\" | \"Emphasized\" | \"Attention\"" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the \"Type07\" item in the calendar legend.", + "default": "Type07", + "name": "Type07", + "readonly": true }, { - "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the \"Type08\" item in the calendar legend.", + "default": "Type08", + "name": "Type08", + "readonly": true }, { - "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the \"Type09\" item in the calendar legend.", + "default": "Type09", + "name": "Type09", + "readonly": true }, { - "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "end-icon", - "default": "undefined", - "fieldName": "endIcon", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the \"Type10\" item in the calendar legend.", + "default": "Type10", + "name": "Type10", + "readonly": true }, { - "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** This property is only applicable within the context of an HTML Form element.`", - "name": "submits", - "default": "false", - "fieldName": "submits", - "type": { - "text": "boolean" - }, - "deprecated": "Set the \"type\" property to \"Submit\" to achieve the same result. The \"submits\" property is ignored if \"type\" is set to any value other than \"Button\".", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the \"Type11\" item in the calendar legend.", + "default": "Type11", + "name": "Type11", + "readonly": true }, { - "description": "Defines the tooltip of the component.\n\n**Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the \"Type12\" item in the calendar legend.", + "default": "Type12", + "name": "Type12", + "readonly": true }, { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the \"Type13\" item in the calendar legend.", + "default": "Type13", + "name": "Type13", + "readonly": true }, { - "description": "Receives id(or many ids) of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the \"Type14\" item in the calendar legend.", + "default": "Type14", + "name": "Type14", + "readonly": true }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", - "type": { - "text": "ButtonAccessibilityAttributes" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the \"Type15\" item in the calendar legend.", + "default": "Type15", + "name": "Type15", + "readonly": true }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the \"Type16\" item in the calendar legend.", + "default": "Type16", + "name": "Type16", + "readonly": true }, { - "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.", - "name": "type", - "default": "\"Button\"", - "fieldName": "type", - "type": { - "text": "\"Button\" | \"Submit\" | \"Reset\"" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the \"Type17\" item in the calendar legend.", + "default": "Type17", + "name": "Type17", + "readonly": true }, { - "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.", - "name": "accessible-role", - "default": "\"Button\"", - "fieldName": "accessibleRole", - "type": { - "text": "\"Button\" | \"Link\"" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the \"Type18\" item in the calendar legend.", + "default": "Type18", + "name": "Type18", + "readonly": true }, { - "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.", - "name": "loading", - "default": "false", - "fieldName": "loading", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the \"Type19\" item in the calendar legend.", + "default": "Type19", + "name": "Type19", + "readonly": true }, { - "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.", - "name": "loading-delay", - "default": "1000", - "fieldName": "loadingDelay", - "type": { - "text": "number" - }, - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the \"Type20\" item in the calendar legend.", + "default": "Type20", + "name": "Type20", + "readonly": true } - ], - "superclass": { - "name": "Button", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - }, - "tagName": "ui5-toggle-button", - "customElement": true, + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "CalendarLegendItemType", + "module": "dist/types/CalendarLegendItemType.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/CalendarPickersMode.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "CalendarPickersMode", + "module": "dist/types/CalendarPickersMode.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/CalendarSelectionMode.js", + "declarations": [ + { + "kind": "enum", + "name": "CalendarSelectionMode", + "description": "Different Calendar selection mode.", "_ui5privacy": "public", - "slots": [ + "members": [ { - "name": "default", - "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", - "_ui5propertyName": "text", - "_ui5type": { - "text": "Array<Node>" - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Only one date can be selected at a time", + "default": "Single", + "name": "Single", + "readonly": true }, { - "name": "badge", - "description": "Adds a badge to the button.", - "_ui5since": "2.7.0", - "_ui5type": { - "text": "Array<ButtonBadge>", - "references": [ - { - "name": "ButtonBadge", - "package": "@ui5/webcomponents", - "module": "dist/ButtonBadge.js" - } - ] - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Several dates can be selected", + "default": "Multiple", + "name": "Multiple", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "A range defined by a start date and an end date can be selected", + "default": "Range", + "name": "Range", + "readonly": true } - ], - "cssParts": [ + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "CalendarSelectionMode", + "module": "dist/types/CalendarSelectionMode.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/CalendarWeekNumbering.js", + "declarations": [ + { + "kind": "enum", + "name": "CalendarWeekNumbering", + "description": "The <code>CalendarWeekNumbering</code> enum defines how to calculate calendar weeks. Each\nvalue defines:\n- The first day of the week,\n- The first week of the year.", + "_ui5privacy": "public", + "_ui5since": "2.2.0", + "members": [ { - "description": "Used to style the native button element", - "name": "button", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "The default calendar week numbering:\n\nThe framework determines the week numbering scheme; currently it is derived from the\nactive format locale. Future versions of ui5-webcomponents might select a different week numbering\nscheme.", + "default": "Default", + "name": "Default", + "readonly": true }, { - "description": "Used to style the icon in the native button element", - "name": "icon", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Official calendar week numbering in most of Europe (ISO 8601 standard):\nMonday is first day of the week, the week containing January 4th is first week of the year.", + "default": "ISO_8601", + "name": "ISO_8601", + "readonly": true }, { - "description": "Used to style the end icon in the native button element", - "name": "endIcon", - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } - } - ], - "events": [ - { - "name": "click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<ButtonClickEventDetail>", - "references": [ - { - "name": "ButtonClickEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] - }, - "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5since": "2.10.0", - "_ui5parameters": [ - { - "type": { - "text": "Event" - }, - "name": "originalEvent", - "_ui5privacy": "public", - "description": "Returns original event that comes from user's **click** interaction" - }, - { - "type": { - "text": "boolean" - }, - "name": "altKey", - "_ui5privacy": "public", - "description": "Returns whether the \"ALT\" key was pressed when the event was triggered." - }, - { - "type": { - "text": "boolean" - }, - "name": "ctrlKey", - "_ui5privacy": "public", - "description": "Returns whether the \"CTRL\" key was pressed when the event was triggered." - }, - { - "type": { - "text": "boolean" - }, - "name": "metaKey", - "_ui5privacy": "public", - "description": "Returns whether the \"META\" key was pressed when the event was triggered." - }, - { - "type": { - "text": "boolean" - }, - "name": "shiftKey", - "_ui5privacy": "public", - "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered." - } - ], - "inheritedFrom": { - "name": "Button", - "module": "dist/Button.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Official calendar week numbering in much of the Middle East (Middle Eastern calendar):\nSaturday is first day of the week, the week containing January 1st is first week of the year.", + "default": "MiddleEastern", + "name": "MiddleEastern", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Official calendar week numbering in the United States, Canada, Brazil, Israel, Japan, and\nother countries (Western traditional calendar):\nSunday is first day of the week, the week containing January 1st is first week of the year.", + "default": "WesternTraditional", + "name": "WesternTraditional", + "readonly": true } ] } @@ -32115,117 +33407,81 @@ "kind": "js", "name": "default", "declaration": { - "name": "ToggleButton", - "module": "dist/ToggleButton.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-toggle-button", - "declaration": { - "name": "ToggleButton", - "module": "dist/ToggleButton.js" + "name": "CalendarWeekNumbering", + "module": "dist/types/CalendarWeekNumbering.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ToggleSpinButton.js", - "declarations": [], + "path": "dist/types/CarouselArrowsPlacement.js", + "declarations": [ + { + "kind": "enum", + "name": "CarouselArrowsPlacement", + "description": "Different Carousel arrows placement.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Carousel arrows are placed on the sides of the current Carousel page.", + "default": "Content", + "name": "Content", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Carousel arrows are placed on the sides of the page indicator of the Carousel.", + "default": "Navigation", + "name": "Navigation", + "readonly": true + } + ] + } + ], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "ToggleSpinButton", - "module": "dist/ToggleSpinButton.js" + "name": "CarouselArrowsPlacement", + "module": "dist/types/CarouselArrowsPlacement.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Token.js", + "path": "dist/types/CarouselPageIndicatorType.js", "declarations": [ { - "kind": "class", - "description": "### Overview\n\nTokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Token.js\";`", - "name": "Token", - "slots": [ - { - "name": "closeIcon", - "description": "Defines the close icon for the token. If nothing is provided to this slot, the default close icon will be used.\nAccepts `ui5-icon`.", - "_ui5since": "1.0.0-rc.9", - "_ui5type": { - "text": "Array<IIcon>", - "references": [ - { - "name": "IIcon", - "package": "@ui5/webcomponents", - "module": "dist/Icon.js" - } - ] - }, - "_ui5privacy": "public" - } - ], + "kind": "enum", + "name": "CarouselPageIndicatorType", + "description": "Different Carousel page indicator types.", + "_ui5privacy": "public", "members": [ { "kind": "field", - "name": "text", - "type": { - "text": "string | undefined" - }, - "description": "Defines the text of the token.", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "The page indicator will be visualized as dots if there are fewer than 9 pages.\nIf there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)", + "default": "Default", + "name": "Default", + "readonly": true }, { "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is selected or not.", - "privacy": "public" - } - ], - "attributes": [ - { - "description": "Defines the text of the token.", - "name": "text", - "default": "undefined", - "fieldName": "text", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines whether the component is selected or not.", - "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" - } - } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-token", - "customElement": true, - "_ui5since": "1.0.0-rc.9", - "_ui5privacy": "public", - "_ui5implements": [ - { - "name": "IToken", - "package": "@ui5/webcomponents", - "module": "dist/MultiInput.js" + "static": true, + "privacy": "public", + "description": "The page indicator will display the current page and the total number of pages. (e.g. X of Y)", + "default": "Numeric", + "name": "Numeric", + "readonly": true } ] } @@ -32235,260 +33491,150 @@ "kind": "js", "name": "default", "declaration": { - "name": "Token", - "module": "dist/Token.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-token", - "declaration": { - "name": "Token", - "module": "dist/Token.js" + "name": "CarouselPageIndicatorType", + "module": "dist/types/CarouselPageIndicatorType.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Tokenizer.js", + "path": "dist/types/ComboBoxFilter.js", "declarations": [ { - "kind": "class", - "description": "### Overview\n\nA `ui5-tokenizer` is an invisible container for `ui5-token`s that supports keyboard navigation and token selection.\n\nThe `ui5-tokenizer` consists of two parts:\n- Tokens - displays the available tokens.\n- N-more indicator - contains the number of the remaining tokens that cannot be displayed due to the limited space.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe `ui5-tokenizer` provides advanced keyboard handling.\nWhen a token is focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Left] or [Right] / [Up] or [Down] - Navigates left and right through the tokens.\n- [Home] - Navigates to the first token.\n- [End] - Navigates to the last token.\n\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete):\n\n- [Space] - Selects a token.\n- [Backspace] / [Delete] - Deletes a token.\n**Note:** The deletion of a token is handled by the application with the use of the `token-delete` event.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Tokenizer.js\";`", - "name": "Tokenizer", - "slots": [ - { - "name": "default", - "description": "Defines the tokens to be displayed.", - "_ui5propertyName": "tokens", - "_ui5type": { - "text": "Array<Token>", - "references": [ - { - "name": "Token", - "package": "@ui5/webcomponents", - "module": "dist/Token.js" - } - ] - }, - "_ui5privacy": "public" - } - ], + "kind": "enum", + "name": "ComboBoxFilter", + "description": "Different filtering types of the ComboBox.", + "_ui5privacy": "public", "members": [ { "kind": "field", - "name": "readonly", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", - "privacy": "public" - }, - { - "kind": "field", - "name": "multiLine", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether tokens are displayed on multiple lines.\n\n**Note:** The `multiLine` property is in an experimental state and is a subject to change.", + "static": true, "privacy": "public", - "_ui5since": "2.5.0" + "description": "Defines filtering by first symbol of each word of item's text.", + "default": "StartsWithPerTerm", + "name": "StartsWithPerTerm", + "readonly": true }, { "kind": "field", - "name": "name", - "type": { - "text": "string | undefined" - }, - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Defines filtering by starting symbol of item's text.", + "default": "StartsWith", + "name": "StartsWith", + "readonly": true }, { "kind": "field", - "name": "showClearAll", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether \"Clear All\" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.\n\n**Note:** The `showClearAll` property is in an experimental state and is a subject to change.", + "static": true, "privacy": "public", - "_ui5since": "2.5.0" + "description": "Defines contains filtering.", + "default": "Contains", + "name": "Contains", + "readonly": true }, { "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", - "privacy": "public" - }, + "static": true, + "privacy": "public", + "description": "Removes any filtering applied while typing", + "default": "None", + "name": "None", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ComboBoxFilter", + "module": "dist/types/ComboBoxFilter.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/ExpandableTextOverflowMode.js", + "declarations": [ + { + "kind": "enum", + "name": "ExpandableTextOverflowMode", + "description": "Overflow Mode.", + "_ui5privacy": "public", + "members": [ { "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Overflowing text is appended in-place.", + "default": "InPlace", + "name": "InPlace", + "readonly": true }, { "kind": "field", - "name": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that label the component.", - "default": "undefined", - "privacy": "public" - } - ], - "events": [ - { - "name": "token-delete", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<TokenizerTokenDeleteEventDetail>", - "references": [ - { - "name": "TokenizerTokenDeleteEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Tokenizer.js" - } - ] - }, - "description": "Fired when tokens are being deleted (delete icon, delete or backspace is pressed)", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "Array" - }, - "name": "tokens", - "_ui5privacy": "public", - "description": "An array containing the deleted tokens." - } - ] - }, - { - "name": "selection-change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<TokenizerSelectionChangeEventDetail>", - "references": [ - { - "name": "TokenizerSelectionChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Tokenizer.js" - } - ] - }, - "description": "Fired when token selection is changed by user interaction", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "Array<Token>", - "references": [ - { - "name": "Token", - "package": "@ui5/webcomponents", - "module": "dist/Token.js" - } - ] - }, - "name": "tokens", - "_ui5privacy": "public", - "description": "An array of the selected items." - } - ] + "static": true, + "privacy": "public", + "description": "Full text is displayed in a popover.", + "default": "Popover", + "name": "Popover", + "readonly": true } - ], - "attributes": [ - { - "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", - "name": "readonly", - "default": "false", - "fieldName": "readonly", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether tokens are displayed on multiple lines.\n\n**Note:** The `multiLine` property is in an experimental state and is a subject to change.", - "name": "multi-line", - "default": "false", - "fieldName": "multiLine", - "type": { - "text": "boolean" - } - }, - { - "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", - "name": "name", - "default": "undefined", - "fieldName": "name", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines whether \"Clear All\" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.\n\n**Note:** The `showClearAll` property is in an experimental state and is a subject to change.", - "name": "show-clear-all", - "default": "false", - "fieldName": "showClearAll", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } - }, + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ExpandableTextOverflowMode", + "module": "dist/types/ExpandableTextOverflowMode.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/ExpandableTextTemplateParams.js", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "dist/types/FormAccessibleMode.js", + "declarations": [ + { + "kind": "enum", + "name": "FormAccessibleMode", + "description": "Accessibility modes of the Form.\n\nBased on the mode, the Form and its items will render different HTML elements and ARIA attributes,\nwhich are appropriate for the use-case.\n\n**Usage:**\n- \"Display\" mode should be used when the form consists of non-editable (e.g. texts) form items.\n- \"Edit\" mode should be used when the form consists of editable (e.g. input fields) form items.", + "_ui5privacy": "public", + "_ui5since": "2.16.0", + "members": [ { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Display mode.", + "default": "Display", + "name": "Display", + "readonly": true }, { - "description": "Receives id(or many ids) of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Edit mode.", + "default": "Edit", + "name": "Edit", + "readonly": true } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-tokenizer", - "customElement": true, - "_ui5experimental": "This component is availabe since 2.0 under an experimental flag and its API and behaviour are subject to change.", - "_ui5since": "2.0.0", - "_ui5privacy": "public" + ] } ], "exports": [ @@ -32496,161 +33642,106 @@ "kind": "js", "name": "default", "declaration": { - "name": "Tokenizer", - "module": "dist/Tokenizer.js" + "name": "FormAccessibleMode", + "module": "dist/types/FormAccessibleMode.js" } - }, + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/FormItemSpacing.js", + "declarations": [ + { + "kind": "enum", + "name": "FormItemSpacing", + "description": "Different spacing of the form items.", + "_ui5privacy": "public", + "_ui5since": "2.0.0", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Normal spacing (smaller vertical space between form items).", + "default": "Normal", + "name": "Normal", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Large spacing (larger vertical space between form items).", + "default": "Large", + "name": "Large", + "readonly": true + } + ] + } + ], + "exports": [ { - "kind": "custom-element-definition", - "name": "ui5-tokenizer", + "kind": "js", + "name": "default", "declaration": { - "name": "Tokenizer", - "module": "dist/Tokenizer.js" + "name": "FormItemSpacing", + "module": "dist/types/FormItemSpacing.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Toolbar.js", + "path": "dist/types/Highlight.js", "declarations": [ { - "kind": "class", - "description": "### Overview\n\nThe `ui5-toolbar` component is used to create a horizontal layout with items.\nThe items can be overflowing in a popover, when the space is not enough to show all of them.\n\n### Keyboard Handling\nThe `ui5-toolbar` provides advanced keyboard handling.\n\n- The control is not interactive, but can contain of interactive elements\n- [Tab] - iterates through elements\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Toolbar.js\";`", - "name": "Toolbar", - "slots": [ - { - "name": "default", - "description": "Defines the items of the component.\n\n**Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<ToolbarItem>", - "references": [ - { - "name": "ToolbarItem", - "package": "@ui5/webcomponents", - "module": "dist/ToolbarItem.js" - } - ] - }, - "_ui5privacy": "public" - } - ], + "kind": "enum", + "name": "Highlight", + "description": "Different types of Highlight .", + "_ui5privacy": "public", "members": [ { "kind": "field", - "name": "alignContent", - "type": { - "text": "ToolbarAlign", - "references": [ - { - "name": "ToolbarAlign", - "package": "@ui5/webcomponents", - "module": "dist/types/ToolbarAlign.js" - } - ] - }, - "default": "\"End\"", - "description": "Indicated the direction in which the Toolbar items will be aligned.", - "privacy": "public" + "static": true, + "privacy": "public", + "default": "None", + "name": "None", + "readonly": true }, { "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "default": "Positive", + "name": "Positive", + "readonly": true }, { "kind": "field", - "name": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that label the input.", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "default": "Critical", + "name": "Critical", + "readonly": true }, { "kind": "field", - "name": "design", - "type": { - "text": "ToolbarDesign", - "references": [ - { - "name": "ToolbarDesign", - "package": "@ui5/webcomponents", - "module": "dist/types/ToolbarDesign.js" - } - ] - }, - "default": "\"Solid\"", - "description": "Defines the toolbar design.", + "static": true, "privacy": "public", - "_ui5since": "2.0.0" - }, - { - "kind": "method", - "name": "isOverflowOpen", - "return": { - "type": { - "text": "boolean" - } - }, - "description": "Returns if the overflow popup is open.", - "privacy": "public" - } - ], - "attributes": [ - { - "description": "Indicated the direction in which the Toolbar items will be aligned.", - "name": "align-content", - "default": "\"End\"", - "fieldName": "alignContent", - "type": { - "text": "\"Start\" | \"End\"" - } - }, - { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Receives id(or many ids) of the elements that label the input.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - } + "default": "Negative", + "name": "Negative", + "readonly": true }, { - "description": "Defines the toolbar design.", - "name": "design", - "default": "\"Solid\"", - "fieldName": "design", - "type": { - "text": "\"Transparent\" | \"Solid\"" - } + "kind": "field", + "static": true, + "privacy": "public", + "default": "Information", + "name": "Information", + "readonly": true } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-toolbar", - "customElement": true, - "_ui5since": "1.17.0", - "_ui5privacy": "public" + ] } ], "exports": [ @@ -32658,320 +33749,147 @@ "kind": "js", "name": "default", "declaration": { - "name": "Toolbar", - "module": "dist/Toolbar.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-toolbar", - "declaration": { - "name": "Toolbar", - "module": "dist/Toolbar.js" + "name": "Highlight", + "module": "dist/types/Highlight.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ToolbarButton.js", + "path": "dist/types/IconDesign.js", "declarations": [ { - "kind": "class", - "description": "### Overview\nThe `ui5-toolbar-button` represents an abstract action,\nused in the `ui5-toolbar`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/ToolbarButton.js\";`", - "name": "ToolbarButton", + "kind": "enum", + "name": "IconDesign", + "description": "Different Icon semantic designs.", + "_ui5privacy": "public", "members": [ { "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the action is disabled.\n\n**Note:** a disabled action can't be pressed or focused, and it is not in the tab chain.", - "privacy": "public" - }, - { - "kind": "field", - "name": "design", - "type": { - "text": "ButtonDesign", - "references": [ - { - "name": "ButtonDesign", - "package": "@ui5/webcomponents", - "module": "dist/types/ButtonDesign.js" - } - ] - }, - "default": "\"Default\"", - "description": "Defines the action design.", - "privacy": "public" - }, - { - "kind": "field", - "name": "icon", - "type": { - "text": "string | undefined" - }, - "description": "Defines the `icon` source URI.\n\n**Note:** SAP-icons font provides numerous buil-in icons. To find all the available icons, see the\n[Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Contrast design", + "default": "Contrast", + "name": "Contrast", + "readonly": true }, { "kind": "field", - "name": "endIcon", - "type": { - "text": "string | undefined" - }, - "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Critical design", + "default": "Critical", + "name": "Critical", + "readonly": true }, { "kind": "field", - "name": "tooltip", - "type": { - "text": "string | undefined" - }, - "description": "Defines the tooltip of the component.\n\n**Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Default design (brand design)", + "default": "Default", + "name": "Default", + "readonly": true }, { "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "info type", + "default": "Information", + "name": "Information", + "readonly": true }, { "kind": "field", - "name": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that label the component.", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Negative design", + "default": "Negative", + "name": "Negative", + "readonly": true }, { "kind": "field", - "name": "accessibilityAttributes", - "type": { - "text": "ToolbarButtonAccessibilityAttributes", - "references": [ - { - "name": "ToolbarButtonAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/ToolbarButton.js" - } - ] - }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Neutral design", + "default": "Neutral", + "name": "Neutral", + "readonly": true }, { "kind": "field", - "name": "text", - "type": { - "text": "string | undefined" - }, - "description": "Button text", + "static": true, "privacy": "public", - "default": "undefined" + "description": "Design that indicates an icon which isn't interactive", + "default": "NonInteractive", + "name": "NonInteractive", + "readonly": true }, { "kind": "field", - "name": "width", - "type": { - "text": "string | undefined" - }, - "description": "Defines the width of the button.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", - "default": "undefined", - "privacy": "public" - }, + "static": true, + "privacy": "public", + "description": "Positive design", + "default": "Positive", + "name": "Positive", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "IconDesign", + "module": "dist/types/IconDesign.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/IconMode.js", + "declarations": [ + { + "kind": "enum", + "name": "IconMode", + "description": "Different Icon modes.", + "_ui5privacy": "public", + "_ui5since": "2.0.0", + "members": [ { "kind": "field", - "name": "overflowPriority", - "type": { - "text": "ToolbarItemOverflowBehavior", - "references": [ - { - "name": "ToolbarItemOverflowBehavior", - "package": "@ui5/webcomponents", - "module": "dist/types/ToolbarItemOverflowBehavior.js" - } - ] - }, - "default": "\"Default\"", - "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } + "description": "Image mode (by default).\nConfigures the component to internally render role=\"img\".", + "default": "Image", + "name": "Image", + "readonly": true }, { "kind": "field", - "name": "preventOverflowClosing", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } - } - ], - "events": [ - { - "name": "click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true - } - ], - "attributes": [ - { - "description": "Defines if the action is disabled.\n\n**Note:** a disabled action can't be pressed or focused, and it is not in the tab chain.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the action design.", - "name": "design", - "default": "\"Default\"", - "fieldName": "design", - "type": { - "text": "\"Transparent\" | \"Default\" | \"Positive\" | \"Negative\" | \"Emphasized\" | \"Attention\"" - } - }, - { - "description": "Defines the `icon` source URI.\n\n**Note:** SAP-icons font provides numerous buil-in icons. To find all the available icons, see the\n[Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "icon", - "default": "undefined", - "fieldName": "icon", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the icon, displayed as graphical element within the component after the button text.\n\n**Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\nUsage of `endIcon` only should be avoided.\n\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", - "name": "end-icon", - "default": "undefined", - "fieldName": "endIcon", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the tooltip of the component.\n\n**Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Receives id(or many ids) of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", - "type": { - "text": "ButtonAccessibilityAttributes" - } - }, - { - "description": "Button text", - "name": "text", - "default": "undefined", - "fieldName": "text", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the width of the button.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", - "name": "width", - "default": "undefined", - "fieldName": "width", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", - "name": "overflow-priority", - "default": "\"Default\"", - "fieldName": "overflowPriority", - "type": { - "text": "\"Default\" | \"NeverOverflow\" | \"AlwaysOverflow\"" - }, - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } + "description": "Decorative mode.\nConfigures the component to internally render role=\"presentation\" and aria-hidden=\"true\",\nmaking it purely decorative without semantic content or interactivity.", + "default": "Decorative", + "name": "Decorative", + "readonly": true }, { - "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", - "name": "prevent-overflow-closing", - "default": "false", - "fieldName": "preventOverflowClosing", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Interactive mode.\nConfigures the component to internally render role=\"button\".\nThis mode also supports focus and press handling to enhance interactivity.", + "default": "Interactive", + "name": "Interactive", + "readonly": true } - ], - "superclass": { - "name": "ToolbarItem", - "package": "@ui5/webcomponents", - "module": "dist/ToolbarItem.js" - }, - "tagName": "ui5-toolbar-button", - "customElement": true, - "_ui5since": "1.17.0", - "_ui5privacy": "public", - "_ui5abstract": true + ] } ], "exports": [ @@ -32979,86 +33897,102 @@ "kind": "js", "name": "default", "declaration": { - "name": "ToolbarButton", - "module": "dist/ToolbarButton.js" + "name": "IconMode", + "module": "dist/types/IconMode.js" } - }, + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/InputKeyHint.js", + "declarations": [], + "exports": [ { - "kind": "custom-element-definition", - "name": "ui5-toolbar-button", + "kind": "js", + "name": "default", "declaration": { - "name": "ToolbarButton", - "module": "dist/ToolbarButton.js" + "name": "InputKeyHint", + "module": "dist/types/InputKeyHint.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ToolbarItem.js", + "path": "dist/types/InputType.js", "declarations": [ { - "kind": "class", - "description": "Represents an abstract class for items, used in the `ui5-toolbar`.", - "name": "ToolbarItem", + "kind": "enum", + "name": "InputType", + "description": "Different input types.", + "_ui5privacy": "public", "members": [ { "kind": "field", - "name": "overflowPriority", - "type": { - "text": "ToolbarItemOverflowBehavior", - "references": [ - { - "name": "ToolbarItemOverflowBehavior", - "package": "@ui5/webcomponents", - "module": "dist/types/ToolbarItemOverflowBehavior.js" - } - ] - }, - "default": "\"Default\"", - "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Defines a one-line text input field:", + "default": "Text", + "name": "Text", + "readonly": true }, { "kind": "field", - "name": "preventOverflowClosing", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", - "privacy": "public" - } - ], - "attributes": [ + "static": true, + "privacy": "public", + "description": "Used for input fields that must contain an e-mail address.", + "default": "Email", + "name": "Email", + "readonly": true + }, { - "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", - "name": "overflow-priority", - "default": "\"Default\"", - "fieldName": "overflowPriority", - "type": { - "text": "\"Default\" | \"NeverOverflow\" | \"AlwaysOverflow\"" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Defines a numeric input field.", + "default": "Number", + "name": "Number", + "readonly": true }, { - "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", - "name": "prevent-overflow-closing", - "default": "false", - "fieldName": "preventOverflowClosing", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Defines a password field.", + "default": "Password", + "name": "Password", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Used for input fields that should contain a telephone number.", + "default": "Tel", + "name": "Tel", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Used for input fields that should contain a URL address.", + "default": "URL", + "name": "URL", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "_ui5since": "2.0.0", + "description": "Used for input fields that should contain a search term.", + "default": "Search", + "name": "Search", + "readonly": true } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "customElement": true, - "_ui5since": "1.17.0", - "_ui5privacy": "public", - "_ui5abstract": true + ] } ], "exports": [ @@ -33066,296 +34000,318 @@ "kind": "js", "name": "default", "declaration": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" + "name": "InputType", + "module": "dist/types/InputType.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ToolbarSelect.js", + "path": "dist/types/InteractiveAreaSize.js", "declarations": [ { - "kind": "class", - "description": "### Overview\nThe `ui5-toolbar-select` component is used to create a toolbar drop-down list.\nThe items inside the `ui5-toolbar-select` define the available options by using the `ui5-toolbar-select-option` component.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/ToolbarSelect.js\";`\n\n`import \"@ui5/webcomponents/dist/ToolbarSelectOption.js\";` (comes with `ui5-toolbar-select`)", - "name": "ToolbarSelect", - "slots": [ + "kind": "enum", + "name": "InteractiveAreaSize", + "description": "Defines the area size around the component that the user can select.", + "_ui5privacy": "public", + "_ui5since": "2.8.0", + "members": [ { - "name": "default", - "description": "Defines the component options.\n\n**Note:** Only one selected option is allowed.\nIf more than one option is defined as selected, the last one would be considered as the selected one.\n\n**Note:** Use the `ui5-toolbar-select-option` component to define the desired options.", - "_ui5propertyName": "options", - "_ui5type": { - "text": "Array<ToolbarSelectOption>", - "references": [ - { - "name": "ToolbarSelectOption", - "package": "@ui5/webcomponents", - "module": "dist/ToolbarSelectOption.js" - } - ] - }, - "_ui5privacy": "public" + "kind": "field", + "static": true, + "privacy": "public", + "description": "The default target area size (the area taken by the component itself without any extra invisible touch area).", + "default": "Normal", + "name": "Normal", + "readonly": true }, { - "name": "label", - "description": "Defines the HTML element that will be displayed in the component input part,\nrepresenting the selected option.", - "_ui5since": "2.15.0", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" + "kind": "field", + "static": true, + "privacy": "public", + "description": "Enlarged target area size (up to 24px in height) provides users with an enhanced dedicated space to interact with the component.", + "default": "Large", + "name": "Large", + "readonly": true } - ], + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "InteractiveAreaSize", + "module": "dist/types/InteractiveAreaSize.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/LinkAccessibleRole.js", + "declarations": [ + { + "kind": "enum", + "name": "LinkAccessibleRole", + "description": "Link accessible roles.", + "_ui5privacy": "public", + "_ui5since": "2.0.0", "members": [ { "kind": "field", - "name": "width", - "type": { - "text": "string | undefined" - }, - "description": "Defines the width of the select.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Represents Default (link) ARIA role.", + "default": "Link", + "name": "Link", + "readonly": true }, { "kind": "field", - "name": "valueState", - "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the value state of the component.", - "privacy": "public" - }, + "static": true, + "privacy": "public", + "description": "Represents the ARIA role \"button\".", + "default": "Button", + "name": "Button", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "LinkAccessibleRole", + "module": "dist/types/LinkAccessibleRole.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/LinkDesign.js", + "declarations": [ + { + "kind": "enum", + "name": "LinkDesign", + "description": "Different link designs.", + "_ui5privacy": "public", + "members": [ { "kind": "field", - "name": "disabled", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is noninteractive.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "default type (no special styling)", + "default": "Default", + "name": "Default", + "readonly": true }, { "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible ARIA name of the component.", + "static": true, "privacy": "public", - "default": "undefined" + "description": "subtle type (appears as regular text, rather than a link)", + "default": "Subtle", + "name": "Subtle", + "readonly": true }, { "kind": "field", - "name": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, - "description": "Receives id(or many ids) of the elements that label the select.", - "default": "undefined", - "privacy": "public" - }, + "static": true, + "privacy": "public", + "description": "emphasized type", + "default": "Emphasized", + "name": "Emphasized", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "LinkDesign", + "module": "dist/types/LinkDesign.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/ListAccessibleRole.js", + "declarations": [ + { + "kind": "enum", + "name": "ListAccessibleRole", + "description": "List accessible roles.", + "_ui5privacy": "public", + "_ui5since": "2.0.0", + "members": [ { "kind": "field", - "name": "value", - "description": "Defines the value of the component:", + "static": true, "privacy": "public", - "default": "\"\"", - "type": { - "text": "string | undefined" - }, - "_ui5since": "2.15.0" + "description": "Represents the ARIA role \"list\". (by default)", + "default": "List", + "name": "List", + "readonly": true }, { "kind": "field", - "name": "overflowPriority", - "type": { - "text": "ToolbarItemOverflowBehavior", - "references": [ - { - "name": "ToolbarItemOverflowBehavior", - "package": "@ui5/webcomponents", - "module": "dist/types/ToolbarItemOverflowBehavior.js" - } - ] - }, - "default": "\"Default\"", - "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } + "description": "Represents the ARIA role \"menu\".", + "default": "Menu", + "name": "Menu", + "readonly": true }, { "kind": "field", - "name": "preventOverflowClosing", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } - } - ], - "events": [ - { - "name": "change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<ToolbarSelectChangeEventDetail>", - "references": [ - { - "name": "ToolbarSelectChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/ToolbarSelect.js" - } - ] - }, - "description": "Fired when the selected option changes.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "selectedOption", - "_ui5privacy": "public", - "description": "the selected option." - } - ] - }, - { - "name": "open", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the component's dropdown menu opens.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true + "description": "Represents the ARIA role \"tree\".", + "default": "Tree", + "name": "Tree", + "readonly": true }, { - "name": "close", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired after the component's dropdown menu closes.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": false + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the ARIA role \"listbox\".", + "default": "ListBox", + "name": "ListBox", + "readonly": true } - ], - "attributes": [ + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ListAccessibleRole", + "module": "dist/types/ListAccessibleRole.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/ListGrowingMode.js", + "declarations": [ + { + "kind": "enum", + "name": "ListGrowingMode", + "description": "Different list growing modes.", + "_ui5privacy": "public", + "members": [ { - "description": "Defines the width of the select.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", - "name": "width", - "default": "undefined", - "fieldName": "width", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Component's \"load-more\" is fired upon pressing a \"More\" button.\nat the bottom.", + "default": "Button", + "name": "Button", + "readonly": true }, { - "description": "Defines the value state of the component.", - "name": "value-state", - "default": "\"None\"", - "fieldName": "valueState", - "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Component's \"load-more\" is fired upon scroll.", + "default": "Scroll", + "name": "Scroll", + "readonly": true }, { - "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is noninteractive.", - "name": "disabled", - "default": "false", - "fieldName": "disabled", - "type": { - "text": "boolean" - } - }, + "kind": "field", + "static": true, + "privacy": "public", + "description": "Component's growing is not enabled.", + "default": "None", + "name": "None", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ListGrowingMode", + "module": "dist/types/ListGrowingMode.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/ListItemAccessibleRole.js", + "declarations": [ + { + "kind": "enum", + "name": "ListItemAccessibleRole", + "description": "ListItem accessible roles.", + "_ui5privacy": "public", + "_ui5since": "2.0.0", + "members": [ { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the ARIA role \"listitem\". (by default)", + "default": "ListItem", + "name": "ListItem", + "readonly": true }, { - "description": "Receives id(or many ids) of the elements that label the select.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the ARIA role \"menuitem\".", + "default": "MenuItem", + "name": "MenuItem", + "readonly": true }, { - "description": "Defines the value of the component:", - "name": "value", - "default": "\"\"", - "fieldName": "value", - "type": { - "text": "any" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the ARIA role \"treeitem\".", + "default": "TreeItem", + "name": "TreeItem", + "readonly": true }, { - "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", - "name": "overflow-priority", - "default": "\"Default\"", - "fieldName": "overflowPriority", - "type": { - "text": "\"Default\" | \"NeverOverflow\" | \"AlwaysOverflow\"" - }, - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the ARIA role \"option\".", + "default": "Option", + "name": "Option", + "readonly": true }, { - "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", - "name": "prevent-overflow-closing", - "default": "false", - "fieldName": "preventOverflowClosing", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the ARIA role \"none\".", + "default": "None", + "name": "None", + "readonly": true } - ], - "superclass": { - "name": "ToolbarItem", - "package": "@ui5/webcomponents", - "module": "dist/ToolbarItem.js" - }, - "tagName": "ui5-toolbar-select", - "customElement": true, - "_ui5since": "1.17.0", - "_ui5privacy": "public", - "_ui5abstract": true + ] } ], "exports": [ @@ -33363,72 +34319,59 @@ "kind": "js", "name": "default", "declaration": { - "name": "ToolbarSelect", - "module": "dist/ToolbarSelect.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-toolbar-select", - "declaration": { - "name": "ToolbarSelect", - "module": "dist/ToolbarSelect.js" + "name": "ListItemAccessibleRole", + "module": "dist/types/ListItemAccessibleRole.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ToolbarSelectOption.js", + "path": "dist/types/ListItemType.js", "declarations": [ { - "kind": "class", - "description": "### Overview\n\nThe `ui5-toolbar-select-option` component defines the content of an option in the `ui5-toolbar-select`.", - "name": "ToolbarSelectOption", - "slots": [ - { - "name": "default", - "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", - "_ui5propertyName": "text", - "_ui5type": { - "text": "Array<Node>" - }, - "_ui5privacy": "public" - } - ], + "kind": "enum", + "name": "ListItemType", + "description": "Different list item types.", + "_ui5privacy": "public", "members": [ { "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the selected state of the component.", - "privacy": "public" - } - ], - "attributes": [ + "static": true, + "privacy": "public", + "description": "Indicates the list item does not have any active feedback when item is pressed.", + "default": "Inactive", + "name": "Inactive", + "readonly": true + }, { - "description": "Defines the selected state of the component.", - "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Indicates that the item is clickable via active feedback when item is pressed.", + "default": "Active", + "name": "Active", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Enables detail button of the list item that fires detail-click event.", + "default": "Detail", + "name": "Detail", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Enables the type of navigation, which is specified to add an arrow at the end of the items and fires navigate-click event.", + "default": "Navigation", + "name": "Navigation", + "readonly": true } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-toolbar-select-option", - "customElement": true, - "_ui5since": "1.17.0", - "_ui5privacy": "public", - "_ui5abstract": true + ] } ], "exports": [ @@ -33436,101 +34379,84 @@ "kind": "js", "name": "default", "declaration": { - "name": "ToolbarSelectOption", - "module": "dist/ToolbarSelectOption.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-toolbar-select-option", - "declaration": { - "name": "ToolbarSelectOption", - "module": "dist/ToolbarSelectOption.js" + "name": "ListItemType", + "module": "dist/types/ListItemType.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ToolbarSeparator.js", + "path": "dist/types/ListSelectionMode.js", "declarations": [ { - "kind": "class", - "description": "### Overview\nThe `ui5-toolbar-separator` is an element, used for visual separation between two elements.\nIt takes no space in calculating toolbar items width.", - "name": "ToolbarSeparator", + "kind": "enum", + "name": "ListSelectionMode", + "description": "Different list selection modes.", + "_ui5privacy": "public", "members": [ { "kind": "field", - "name": "overflowPriority", - "type": { - "text": "ToolbarItemOverflowBehavior", - "references": [ - { - "name": "ToolbarItemOverflowBehavior", - "package": "@ui5/webcomponents", - "module": "dist/types/ToolbarItemOverflowBehavior.js" - } - ] - }, - "default": "\"Default\"", - "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } + "description": "Default mode (no selection).", + "default": "None", + "name": "None", + "readonly": true }, { "kind": "field", - "name": "preventOverflowClosing", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } - } - ], - "superclass": { - "name": "ToolbarItem", - "package": "@ui5/webcomponents", - "module": "dist/ToolbarItem.js" - }, - "tagName": "ui5-toolbar-separator", - "customElement": true, - "_ui5since": "1.17.0", - "_ui5privacy": "public", - "_ui5abstract": true, - "attributes": [ + "description": "Right-positioned single selection mode (only one list item can be selected).", + "default": "Single", + "name": "Single", + "readonly": true + }, { - "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", - "name": "overflow-priority", - "default": "\"Default\"", - "fieldName": "overflowPriority", - "type": { - "text": "\"Default\" | \"NeverOverflow\" | \"AlwaysOverflow\"" - }, - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Left-positioned single selection mode (only one list item can be selected).", + "default": "SingleStart", + "name": "SingleStart", + "readonly": true }, { - "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", - "name": "prevent-overflow-closing", - "default": "false", - "fieldName": "preventOverflowClosing", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Selected item is highlighted but no selection element is visible\n(only one list item can be selected).", + "default": "SingleEnd", + "name": "SingleEnd", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Selected item is highlighted and selection is changed upon arrow navigation\n(only one list item can be selected - this is always the focused item).", + "default": "SingleAuto", + "name": "SingleAuto", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Multi selection mode (more than one list item can be selected).", + "default": "Multiple", + "name": "Multiple", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Delete mode (only one list item can be deleted via provided delete button)", + "default": "Delete", + "name": "Delete", + "readonly": true } ] } @@ -33540,122 +34466,103 @@ "kind": "js", "name": "default", "declaration": { - "name": "ToolbarSeparator", - "module": "dist/ToolbarSeparator.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-toolbar-separator", - "declaration": { - "name": "ToolbarSeparator", - "module": "dist/ToolbarSeparator.js" + "name": "ListSelectionMode", + "module": "dist/types/ListSelectionMode.js" } } ] }, { "kind": "javascript-module", - "path": "dist/ToolbarSpacer.js", + "path": "dist/types/ListSeparator.js", "declarations": [ { - "kind": "class", - "description": "### Overview\nThe `ui5-toolbar-spacer` is an element, used for taking needed space for toolbar items to take 100% width.\nIt takes no space in calculating toolbar items width.", - "name": "ToolbarSpacer", + "kind": "enum", + "name": "ListSeparator", + "description": "Different types of list items separators.", + "_ui5privacy": "public", + "_ui5since": "2.0.0", "members": [ { "kind": "field", - "name": "width", - "type": { - "text": "string | undefined" - }, - "description": "Defines the width of the spacer.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", + "static": true, "privacy": "public", - "default": "undefined" + "description": "Separators between the items including the last and the first one.", + "default": "All", + "name": "All", + "readonly": true }, { "kind": "field", - "name": "overflowPriority", - "type": { - "text": "ToolbarItemOverflowBehavior", - "references": [ - { - "name": "ToolbarItemOverflowBehavior", - "package": "@ui5/webcomponents", - "module": "dist/types/ToolbarItemOverflowBehavior.js" - } - ] - }, - "default": "\"Default\"", - "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } + "description": "Separators between the items.\nNote: This enumeration depends on the theme.", + "default": "Inner", + "name": "Inner", + "readonly": true }, { "kind": "field", - "name": "preventOverflowClosing", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } + "description": "No item separators.", + "default": "None", + "name": "None", + "readonly": true } - ], - "attributes": [ + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ListSeparator", + "module": "dist/types/ListSeparator.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/MenuItemGroupCheckMode.js", + "declarations": [ + { + "kind": "enum", + "name": "MenuItemGroupCheckMode", + "description": "Menu item group check modes.", + "_ui5privacy": "public", + "_ui5since": "2.12.0", + "members": [ { - "description": "Defines the width of the spacer.\n\n**Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.", - "name": "width", - "default": "undefined", - "fieldName": "width", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "default type (items in a group cannot be checked)", + "default": "None", + "name": "None", + "readonly": true }, { - "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", - "name": "overflow-priority", - "default": "\"Default\"", - "fieldName": "overflowPriority", - "type": { - "text": "\"Default\" | \"NeverOverflow\" | \"AlwaysOverflow\"" - }, - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Single item check mode (only one item in a group can be checked at a time)", + "default": "Single", + "name": "Single", + "readonly": true }, { - "description": "Defines if the toolbar overflow popup should close upon intereaction with the item.\nIt will close by default.", - "name": "prevent-overflow-closing", - "default": "false", - "fieldName": "preventOverflowClosing", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "ToolbarItem", - "module": "dist/ToolbarItem.js" - } - } - ], - "superclass": { - "name": "ToolbarItem", - "package": "@ui5/webcomponents", - "module": "dist/ToolbarItem.js" - }, - "tagName": "ui5-toolbar-spacer", - "customElement": true, - "_ui5since": "1.17.0", - "_ui5privacy": "public", - "_ui5abstract": true + "kind": "field", + "static": true, + "privacy": "public", + "description": "Multiple items check mode (multiple items in a group can be checked at a time)", + "default": "Multiple", + "name": "Multiple", + "readonly": true + } + ] } ], "exports": [ @@ -33663,518 +34570,272 @@ "kind": "js", "name": "default", "declaration": { - "name": "ToolbarSpacer", - "module": "dist/ToolbarSpacer.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-toolbar-spacer", - "declaration": { - "name": "ToolbarSpacer", - "module": "dist/ToolbarSpacer.js" + "name": "MenuItemGroupCheckMode", + "module": "dist/types/MenuItemGroupCheckMode.js" } } ] }, { "kind": "javascript-module", - "path": "dist/Tree.js", + "path": "dist/types/MessageStripDesign.js", "declarations": [ { - "kind": "class", - "description": "### Overview\nThe `ui5-tree` component provides a tree structure for displaying data in a hierarchy.\n\n### Usage\n\n#### When to use:\n\n- To display hierarchically structured items.\n- To select one or more items out of a set of hierarchically structured items.\n\n#### When not to use:\n\n- To display items not hierarchically structured. In this case, use the List component.\n- To select one item from a very small number of non-hierarchical items. Select or ComboBox might be more appropriate.\n- The hierarchy turns out to have only two levels. In this case, use List with group items.\n\n### Keyboard Handling\n\nThe `ui5-tree` provides advanced keyboard handling.\nThe user can use the following keyboard shortcuts in order to navigate trough the tree:\n\n- [Up] or [Down] - Navigates up and down the tree items that are currently visible.\n- [Right] - Drills down the tree by expanding the tree nodes.\n- [Left] - Goes up the tree and collapses the tree nodes.\n\nThe user can use the following keyboard shortcuts to perform selection,\nwhen the `selectionMode` property is in use:\n\n- [Space] - Selects the currently focused item upon keyup.\n- [Enter] - Selects the currently focused item upon keydown.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Tree.js\";`\n\n`import \"@ui5/webcomponents/dist/TreeItem.js\";`", - "name": "Tree", - "slots": [ - { - "name": "default", - "description": "Defines the items of the component. Tree items may have other tree items as children.\n\n**Note:** Use `ui5-tree-item` for the intended design.", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<TreeItemBase>", - "references": [ - { - "name": "TreeItemBase", - "package": "@ui5/webcomponents", - "module": "dist/TreeItemBase.js" - } - ] - }, - "_ui5privacy": "public" - }, - { - "name": "header", - "description": "Defines the component header.\n\n**Note:** When the `header` slot is set, the\n`headerText` property is ignored.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - } - ], + "kind": "enum", + "name": "MessageStripDesign", + "description": "MessageStrip designs.", + "_ui5privacy": "public", "members": [ { "kind": "field", - "name": "selectionMode", - "type": { - "text": "ListSelectionMode | undefined", - "references": [ - { - "name": "ListSelectionMode", - "package": "@ui5/webcomponents", - "module": "dist/types/ListSelectionMode.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the selection mode of the component. Since the tree uses a `ui5-list` to display its structure,\nthe tree modes are exactly the same as the list modes, and are all applicable.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Message should be just an information", + "default": "Information", + "name": "Information", + "readonly": true }, { "kind": "field", - "name": "noDataText", - "type": { - "text": "string | undefined" - }, - "description": "Defines the text that is displayed when the component contains no items.", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Message is a success message", + "default": "Positive", + "name": "Positive", + "readonly": true }, { "kind": "field", - "name": "headerText", - "type": { - "text": "string | undefined" - }, - "description": "Defines the component header text.\n\n**Note:** If the `header` slot is set, this property is ignored.", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Message is an error", + "default": "Negative", + "name": "Negative", + "readonly": true }, { "kind": "field", - "name": "footerText", - "type": { - "text": "string | undefined" - }, - "description": "Defines the component footer text.", - "default": "undefined", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Message is a warning", + "default": "Critical", + "name": "Critical", + "readonly": true }, { "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible name of the component.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "1.8.0" + "description": "Message uses custom color set 1", + "default": "ColorSet1", + "name": "ColorSet1", + "readonly": true }, { "kind": "field", - "name": "accessibleNameRef", - "type": { - "text": "string | undefined" - }, - "description": "Defines the IDs of the elements that label the component.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "1.8.0" - }, + "description": "Message uses custom color set 2", + "default": "ColorSet2", + "name": "ColorSet2", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "MessageStripDesign", + "module": "dist/types/MessageStripDesign.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/NotificationListGrowingMode.js", + "declarations": [ + { + "kind": "enum", + "name": "NotificationListGrowingMode", + "description": "Different notification list growing modes.", + "_ui5privacy": "public", + "members": [ { "kind": "field", - "name": "accessibleDescription", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible description of the component.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "2.5.0" + "description": "Component's \"load-more\" is fired upon pressing a \"More\" button.\nat the bottom.", + "default": "Button", + "name": "Button", + "readonly": true }, { "kind": "field", - "name": "accessibleDescriptionRef", - "type": { - "text": "string | undefined" - }, - "description": "Defines the IDs of the elements that describe the component.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "2.5.0" - }, - { - "kind": "method", - "name": "walk", - "return": { - "type": { - "text": "void" - } - }, - "parameters": [ - { - "name": "callback", - "type": { - "text": "WalkCallback", - "references": [ - { - "name": "WalkCallback", - "package": "@ui5/webcomponents", - "module": "dist/Tree.js" - } - ] - }, - "description": "function to execute on each node of the tree with 3 arguments: the node, the level and the index", - "_ui5privacy": "public" - } - ], - "description": "Perform Depth-First-Search walk on the tree and run a callback on each node", - "privacy": "public" - } - ], - "events": [ - { - "name": "item-toggle", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<TreeItemToggleEventDetail>", - "references": [ - { - "name": "TreeItemToggleEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Tree.js" - } - ] - }, - "description": "Fired when a tree item is expanded or collapsed.\n\n**Note:** You can call `preventDefault()` on the event object to suppress the event, if needed.\nThis may be handy for example if you want to dynamically load tree items upon the user expanding a node.\nEven if you prevented the event's default behavior, you can always manually call `toggle()` on a tree item.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "the toggled item." - } - ] - }, - { - "name": "item-mouseover", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<TreeItemMouseoverEventDetail>", - "references": [ - { - "name": "TreeItemMouseoverEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Tree.js" - } - ] - }, - "description": "Fired when the mouse cursor enters the tree item borders.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "1.0.0-rc.16", - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "the hovered item." - } - ] - }, - { - "name": "item-mouseout", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<TreeItemMouseoutEventDetail>", - "references": [ - { - "name": "TreeItemMouseoutEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Tree.js" - } - ] - }, - "description": "Fired when the mouse cursor leaves the tree item borders.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "1.0.0-rc.16", - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "the hovered item." - } - ] - }, - { - "name": "item-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<TreeItemClickEventDetail>", - "references": [ - { - "name": "TreeItemClickEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Tree.js" - } - ] - }, - "description": "Fired when a tree item is activated.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "The clicked item." - } - ] - }, - { - "name": "item-delete", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<TreeItemDeleteEventDetail>", - "references": [ - { - "name": "TreeItemDeleteEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Tree.js" - } - ] - }, - "description": "Fired when the Delete button of any tree item is pressed.\n\n**Note:** A Delete button is displayed on each item,\nwhen the component `selectionMode` property is set to `Delete`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "HTMLElement" - }, - "name": "item", - "_ui5privacy": "public", - "description": "the deleted item." - } - ] - }, - { - "name": "selection-change", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<TreeSelectionChangeEventDetail>", - "references": [ - { - "name": "TreeSelectionChangeEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Tree.js" - } - ] - }, - "description": "Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` modes.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "Array" - }, - "name": "selectedItems", - "_ui5privacy": "public", - "description": "An array of the selected items." - }, - { - "type": { - "text": "Array" - }, - "name": "previouslySelectedItems", - "_ui5privacy": "public", - "description": "An array of the previously selected items." - }, - { - "type": { - "text": "HTMLElement" - }, - "name": "targetItem", - "_ui5privacy": "public", - "description": "The item triggering the event." - } - ] - }, - { - "name": "move", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<TreeMoveEventDetail>", - "references": [ - { - "name": "TreeMoveEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Tree.js" - } - ] - }, - "description": "Fired when a movable tree item is moved over a potential drop target during a drag-and-drop operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under the `element` property." - }, - { - "type": { - "text": "object" - }, - "name": "destination", - "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." - } - ] - }, - { - "name": "move-over", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent<TreeMoveEventDetail>", - "references": [ - { - "name": "TreeMoveEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/Tree.js" - } - ] - }, - "description": "Fired when a movable tree item is dropped onto a drop target.\n\n**Note:** The `move` event is fired only if there was a preceding `move-over` event with prevented default action.", - "_ui5Cancelable": true, - "_ui5allowPreventDefault": true, - "_ui5Bubbles": true, - "_ui5parameters": [ - { - "type": { - "text": "object" - }, - "name": "source", - "_ui5privacy": "public", - "description": "Contains information about the moved element under the `element` property." - }, - { - "type": { - "text": "object" - }, - "name": "destination", - "_ui5privacy": "public", - "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." - } - ] + "description": "Component's growing is not enabled.", + "default": "None", + "name": "None", + "readonly": true } - ], - "attributes": [ + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "NotificationListGrowingMode", + "module": "dist/types/NotificationListGrowingMode.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/OverflowMode.js", + "declarations": [ + { + "kind": "enum", + "name": "OverflowMode", + "description": "Tabs overflow mode in TabContainer.", + "_ui5privacy": "public", + "members": [ { - "description": "Defines the selection mode of the component. Since the tree uses a `ui5-list` to display its structure,\nthe tree modes are exactly the same as the list modes, and are all applicable.", - "name": "selection-mode", - "default": "\"None\"", - "fieldName": "selectionMode", - "type": { - "text": "\"None\" | \"Single\" | \"Multiple\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Delete\" | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "End type is used if there should be only one overflow with hidden the tabs at the end of the tab container.", + "default": "End", + "name": "End", + "readonly": true }, { - "description": "Defines the text that is displayed when the component contains no items.", - "name": "no-data-text", - "default": "undefined", - "fieldName": "noDataText", - "type": { - "text": "string | undefined" - } - }, + "kind": "field", + "static": true, + "privacy": "public", + "description": "StartAndEnd type is used if there should be two overflows on both ends of the tab container.", + "default": "StartAndEnd", + "name": "StartAndEnd", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "OverflowMode", + "module": "dist/types/OverflowMode.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/PanelAccessibleRole.js", + "declarations": [ + { + "kind": "enum", + "name": "PanelAccessibleRole", + "description": "Panel accessible roles.", + "_ui5privacy": "public", + "members": [ { - "description": "Defines the component header text.\n\n**Note:** If the `header` slot is set, this property is ignored.", - "name": "header-text", - "default": "undefined", - "fieldName": "headerText", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the ARIA role \"complementary\".\nA section of the page, designed to be complementary to the main content at a similar level in the DOM hierarchy.", + "default": "Complementary", + "name": "Complementary", + "readonly": true }, { - "description": "Defines the component footer text.", - "name": "footer-text", - "default": "undefined", - "fieldName": "footerText", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the ARIA role \"Form\".\nA landmark region that contains a collection of items and objects that, as a whole, create a form.", + "default": "Form", + "name": "Form", + "readonly": true }, { - "description": "Defines the accessible name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Represents the ARIA role \"Region\".\nA section of a page, that is important enough to be included in a page summary or table of contents.", + "default": "Region", + "name": "Region", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "PanelAccessibleRole", + "module": "dist/types/PanelAccessibleRole.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/PopoverHorizontalAlign.js", + "declarations": [ + { + "kind": "enum", + "name": "PopoverHorizontalAlign", + "description": "Popover horizontal align types.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Popover is centered.", + "default": "Center", + "name": "Center", + "readonly": true }, { - "description": "Defines the IDs of the elements that label the component.", - "name": "accessible-name-ref", - "default": "undefined", - "fieldName": "accessibleNameRef", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Popover is aligned with the start of the target.", + "default": "Start", + "name": "Start", + "readonly": true }, { - "description": "Defines the accessible description of the component.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Popover is aligned with the end of the target.", + "default": "End", + "name": "End", + "readonly": true }, { - "description": "Defines the IDs of the elements that describe the component.", - "name": "accessible-description-ref", - "default": "undefined", - "fieldName": "accessibleDescriptionRef", - "type": { - "text": "string | undefined" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Popover is stretched.", + "default": "Stretch", + "name": "Stretch", + "readonly": true } - ], - "superclass": { - "name": "UI5Element", - "package": "@ui5/webcomponents-base", - "module": "dist/UI5Element.js" - }, - "tagName": "ui5-tree", - "customElement": true, - "_ui5since": "1.0.0-rc.8", - "_ui5privacy": "public" + ] } ], "exports": [ @@ -34182,566 +34843,484 @@ "kind": "js", "name": "default", "declaration": { - "name": "Tree", - "module": "dist/Tree.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-tree", - "declaration": { - "name": "Tree", - "module": "dist/Tree.js" + "name": "PopoverHorizontalAlign", + "module": "dist/types/PopoverHorizontalAlign.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TreeItem.js", + "path": "dist/types/PopoverPlacement.js", "declarations": [ { - "kind": "class", - "description": "### Overview\nThe `ui5-tree-item` represents a node in a tree structure, shown as a `ui5-list`.\n\nThis is the item to use inside a `ui5-tree`.\nYou can represent an arbitrary tree structure by recursively nesting tree items.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TreeItem.js\";`", - "name": "TreeItem", - "cssParts": [ + "kind": "enum", + "name": "PopoverPlacement", + "description": "Popover placements.", + "_ui5privacy": "public", + "members": [ { - "description": "Used to style the title of the tree list item", - "name": "title" + "kind": "field", + "static": true, + "privacy": "public", + "description": "Popover will be placed at the start of the reference element.", + "default": "Start", + "name": "Start", + "readonly": true }, { - "description": "Used to style the additionalText of the tree list item", - "name": "additionalText" + "kind": "field", + "static": true, + "privacy": "public", + "description": "Popover will be placed at the end of the reference element.", + "default": "End", + "name": "End", + "readonly": true }, { - "description": "Used to style the icon of the tree list item", - "name": "icon" + "kind": "field", + "static": true, + "privacy": "public", + "description": "Popover will be placed at the top of the reference element.", + "default": "Top", + "name": "Top", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Popover will be placed at the bottom of the reference element.", + "default": "Bottom", + "name": "Bottom", + "readonly": true } - ], + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "PopoverPlacement", + "module": "dist/types/PopoverPlacement.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/PopoverVerticalAlign.js", + "declarations": [ + { + "kind": "enum", + "name": "PopoverVerticalAlign", + "description": "Popover vertical align types.", + "_ui5privacy": "public", "members": [ { "kind": "field", - "name": "text", - "type": { - "text": "string | undefined" - }, - "description": "Defines the text of the tree item.", + "static": true, "privacy": "public", - "default": "undefined" + "default": "Center", + "name": "Center", + "readonly": true }, { "kind": "field", - "name": "additionalText", - "type": { - "text": "string | undefined" - }, - "description": "Defines the `additionalText`, displayed in the end of the tree item.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "description": "Popover will be placed at the top of the reference control.", + "default": "Top", + "name": "Top", + "readonly": true }, { "kind": "field", - "name": "icon", - "type": { - "text": "string | undefined" - }, - "description": "If set, an icon will be displayed before the text of the tree list item.", + "static": true, "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "description": "Popover will be placed at the bottom of the reference control.", + "default": "Bottom", + "name": "Bottom", + "readonly": true }, { "kind": "field", - "name": "expanded", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, + "description": "Popover will be streched", + "default": "Stretch", + "name": "Stretch", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "PopoverVerticalAlign", + "module": "dist/types/PopoverVerticalAlign.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/PopupAccessibleRole.js", + "declarations": [ + { + "kind": "enum", + "name": "PopupAccessibleRole", + "description": "Popup accessible roles.", + "_ui5privacy": "public", + "members": [ { "kind": "field", - "name": "movable", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the item is movable.", + "static": true, "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } + "description": "Represents no ARIA role.", + "default": "None", + "name": "None", + "readonly": true }, { "kind": "field", - "name": "indeterminate", - "type": { - "text": "boolean" - }, - "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", - "default": "false", + "static": true, "privacy": "public", - "_ui5since": "1.1.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Represents the ARIA role \"dialog\".", + "default": "Dialog", + "name": "Dialog", + "readonly": true }, { "kind": "field", - "name": "hasChildren", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\n\n**Note:** This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\nSet this to `true` for nodes you intend to load lazily, when the user clicks the expand button.\nIt is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, + "description": "Represents the ARIA role \"alertdialog\".", + "default": "AlertDialog", + "name": "AlertDialog", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "PopupAccessibleRole", + "module": "dist/types/PopupAccessibleRole.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/Priority.js", + "declarations": [ + { + "kind": "enum", + "name": "Priority", + "description": "Different types of Priority.", + "_ui5privacy": "public", + "members": [ { "kind": "field", - "name": "additionalTextState", - "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "static": true, "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "description": "High priority.", + "default": "High", + "name": "High", + "readonly": true }, { "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible name of the component.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "1.8.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Medium priority.", + "default": "Medium", + "name": "Medium", + "readonly": true }, { - "kind": "method", - "name": "toggle", - "return": { - "type": { - "text": "void" - } - }, - "description": "Call this method to manually switch the `expanded` state of a tree item.", + "kind": "field", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "description": "Low priority.", + "default": "Low", + "name": "Low", + "readonly": true }, { "kind": "field", - "name": "type", - "type": { - "text": "ListItemType", - "references": [ - { - "name": "ListItemType", - "package": "@ui5/webcomponents", - "module": "dist/types/ListItemType.js" - } - ] - }, - "default": "\"Active\"", - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, + "description": "Default, none priority.", + "default": "None", + "name": "None", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Priority", + "module": "dist/types/Priority.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/RatingIndicatorSize.js", + "declarations": [ + { + "kind": "enum", + "name": "RatingIndicatorSize", + "description": "Types of icon sizes used in the RatingIndicator.\nProvides predefined size categories to ensure consistent scaling and spacing of icons.", + "_ui5privacy": "public", + "_ui5since": "2.6.0", + "members": [ { "kind": "field", - "name": "accessibilityAttributes", - "type": { - "text": "ListItemAccessibilityAttributes", - "references": [ - { - "name": "ListItemAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" - } - ] - }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", + "static": true, "privacy": "public", - "_ui5since": "1.15.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Small size for compact layouts.", + "default": "S", + "name": "S", + "readonly": true }, { "kind": "field", - "name": "navigated", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "static": true, "privacy": "public", - "_ui5since": "1.10.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Medium size, used as the default option.\nOffers a balanced appearance for most scenarios.", + "default": "M", + "name": "M", + "readonly": true }, { "kind": "field", - "name": "tooltip", - "type": { - "text": "string | undefined" - }, - "description": "Defines the text of the tooltip that would be displayed for the list item.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "1.23.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, + "description": "Large size for prominent or spacious layouts.", + "default": "L", + "name": "L", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "RatingIndicatorSize", + "module": "dist/types/RatingIndicatorSize.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/SegmentedButtonSelectionMode.js", + "declarations": [ + { + "kind": "enum", + "name": "SegmentedButtonSelectionMode", + "description": "Different SegmentedButton selection modes.", + "_ui5privacy": "public", + "members": [ { "kind": "field", - "name": "highlight", - "type": { - "text": "Highlight", - "references": [ - { - "name": "Highlight", - "package": "@ui5/webcomponents", - "module": "dist/types/Highlight.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "static": true, "privacy": "public", - "_ui5since": "1.24", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "There is always one selected. Selecting one deselects the previous one.", + "default": "Single", + "name": "Single", + "readonly": true }, { "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the selected state of the component.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } + "description": "Multiple items can be selected at a time. All items can be deselected.", + "default": "Multiple", + "name": "Multiple", + "readonly": true } - ], - "attributes": [ - { - "description": "Defines the text of the tree item.", - "name": "text", - "default": "undefined", - "fieldName": "text", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the `additionalText`, displayed in the end of the tree item.", - "name": "additional-text", - "default": "undefined", - "fieldName": "additionalText", - "type": { - "text": "string | undefined" - } - }, - { - "description": "If set, an icon will be displayed before the text of the tree list item.", - "name": "icon", - "default": "undefined", - "fieldName": "icon", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, - { - "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.", - "name": "expanded", - "default": "false", - "fieldName": "expanded", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, - { - "description": "Defines whether the item is movable.", - "name": "movable", - "default": "false", - "fieldName": "movable", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, - { - "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", - "name": "indeterminate", - "default": "false", - "fieldName": "indeterminate", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, - { - "description": "Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\n\n**Note:** This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\nSet this to `true` for nodes you intend to load lazily, when the user clicks the expand button.\nIt is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.", - "name": "has-children", - "default": "false", - "fieldName": "hasChildren", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "SegmentedButtonSelectionMode", + "module": "dist/types/SegmentedButtonSelectionMode.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/SelectTextSeparator.js", + "declarations": [ + { + "kind": "enum", + "name": "SelectTextSeparator", + "description": "Defines the separator types for Select component two-column layout.", + "_ui5privacy": "public", + "_ui5since": "2.16.0", + "members": [ { - "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "additional-text-state", - "default": "\"None\"", - "fieldName": "additionalTextState", - "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Will show bullet(·) as separator on two columns layout when Select is in read-only mode.", + "default": "Bullet", + "name": "Bullet", + "readonly": true }, { - "description": "Defines the accessible name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Will show N-dash(–) as separator on two columns layout when Select is in read-only mode.", + "default": "Dash", + "name": "Dash", + "readonly": true }, { - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", - "name": "type", - "default": "\"Active\"", - "fieldName": "type", - "type": { - "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, + "kind": "field", + "static": true, + "privacy": "public", + "description": "Will show vertical line(|) as separator on two columns layout when Select is in read-only mode.", + "default": "VerticalLine", + "name": "VerticalLine", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "SelectTextSeparator", + "module": "dist/types/SelectTextSeparator.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/SemanticColor.js", + "declarations": [ + { + "kind": "enum", + "name": "SemanticColor", + "description": "Different types of SemanticColor.", + "_ui5privacy": "public", + "members": [ { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", - "type": { - "text": "ListItemAccessibilityAttributes" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Default color (brand color)", + "default": "Default", + "name": "Default", + "readonly": true }, { - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", - "name": "navigated", - "default": "false", - "fieldName": "navigated", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Positive color", + "default": "Positive", + "name": "Positive", + "readonly": true }, { - "description": "Defines the text of the tooltip that would be displayed for the list item.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Negative color", + "default": "Negative", + "name": "Negative", + "readonly": true }, { - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "highlight", - "default": "\"None\"", - "fieldName": "highlight", - "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Critical color", + "default": "Critical", + "name": "Critical", + "readonly": true }, { - "description": "Defines the selected state of the component.", - "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Neutral color.", + "default": "Neutral", + "name": "Neutral", + "readonly": true } - ], - "superclass": { - "name": "TreeItemBase", - "package": "@ui5/webcomponents", - "module": "dist/TreeItemBase.js" - }, - "tagName": "ui5-tree-item", - "customElement": true, - "_ui5since": "1.0.0-rc.8", + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "SemanticColor", + "module": "dist/types/SemanticColor.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/SwitchDesign.js", + "declarations": [ + { + "kind": "enum", + "name": "SwitchDesign", + "description": "Different types of Switch designs.", "_ui5privacy": "public", - "slots": [ - { - "name": "default", - "description": "Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<TreeItemBase>", - "references": [ - { - "name": "TreeItemBase", - "package": "@ui5/webcomponents", - "module": "dist/TreeItemBase.js" - } - ] - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, + "members": [ { - "name": "image", - "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with size XS.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-tree-item` should be customized in order to fit.", - "_ui5since": "2.10.0", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Defines the Switch as Textual", + "default": "Textual", + "name": "Textual", + "readonly": true }, { - "name": "deleteButton", - "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.", - "_ui5since": "1.9.0", - "_ui5type": { - "text": "Array<IButton>", - "references": [ - { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - } - ], - "events": [ - { - "name": "detail-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the user clicks on the detail button when type is `Detail`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Defines the Switch as Graphical", + "default": "Graphical", + "name": "Graphical", + "readonly": true } ] } @@ -34751,458 +35330,206 @@ "kind": "js", "name": "default", "declaration": { - "name": "TreeItem", - "module": "dist/TreeItem.js" - } - }, - { - "kind": "custom-element-definition", - "name": "ui5-tree-item", - "declaration": { - "name": "TreeItem", - "module": "dist/TreeItem.js" + "name": "SwitchDesign", + "module": "dist/types/SwitchDesign.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/TabContainerTabsPlacement.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TabContainerTabsPlacement", + "module": "dist/types/TabContainerTabsPlacement.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TreeItemBase.js", + "path": "dist/types/TabLayout.js", "declarations": [ { - "kind": "class", - "description": "A class to serve as a foundation\nfor the `TreeItem` and `TreeItemCustom` classes.", - "name": "TreeItemBase", - "slots": [ - { - "name": "default", - "description": "Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<TreeItemBase>", - "references": [ - { - "name": "TreeItemBase", - "package": "@ui5/webcomponents", - "module": "dist/TreeItemBase.js" - } - ] - }, - "_ui5privacy": "public" - }, - { - "name": "image", - "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with size XS.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-tree-item` should be customized in order to fit.", - "_ui5since": "2.10.0", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - }, - { - "name": "deleteButton", - "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.", - "_ui5since": "1.9.0", - "_ui5type": { - "text": "Array<IButton>", - "references": [ - { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - } - ], + "kind": "enum", + "name": "TabLayout", + "description": "Tab layout of TabContainer.", + "_ui5privacy": "public", "members": [ { "kind": "field", - "name": "icon", - "type": { - "text": "string | undefined" - }, - "description": "If set, an icon will be displayed before the text of the tree list item.", - "privacy": "public", - "default": "undefined" - }, - { - "kind": "field", - "name": "expanded", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.", - "privacy": "public" - }, - { - "kind": "field", - "name": "movable", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the item is movable.", + "static": true, "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } + "description": "Inline type, the tab \"main text\" and \"additionalText\" are displayed horizotally.", + "default": "Inline", + "name": "Inline", + "readonly": true }, { "kind": "field", - "name": "indeterminate", - "type": { - "text": "boolean" - }, - "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", - "default": "false", + "static": true, "privacy": "public", - "_ui5since": "1.1.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "kind": "field", - "name": "hasChildren", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\n\n**Note:** This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\nSet this to `true` for nodes you intend to load lazily, when the user clicks the expand button.\nIt is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.", - "privacy": "public" - }, + "description": "Standard type, the tab \"main text\" and \"additionalText\" are displayed vertically.", + "default": "Standard", + "name": "Standard", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TabLayout", + "module": "dist/types/TabLayout.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/TableCellHorizontalAlign.js", + "declarations": [ + { + "kind": "enum", + "name": "TableCellHorizontalAlign", + "description": "Alignment of the <ui5-table-cell> component.", + "_ui5experimental": true, + "_ui5privacy": "public", + "members": [ { "kind": "field", - "name": "additionalTextState", - "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "static": true, "privacy": "public", - "_ui5since": "1.0.0-rc.15" + "default": "Left", + "name": "Left", + "readonly": true }, { "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible name of the component.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "1.8.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "kind": "method", - "name": "toggle", - "return": { - "type": { - "text": "void" - } - }, - "description": "Call this method to manually switch the `expanded` state of a tree item.", - "privacy": "public" + "default": "Start", + "name": "Start", + "readonly": true }, { "kind": "field", - "name": "type", - "type": { - "text": "ListItemType", - "references": [ - { - "name": "ListItemType", - "package": "@ui5/webcomponents", - "module": "dist/types/ListItemType.js" - } - ] - }, - "default": "\"Active\"", - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "default": "Right", + "name": "Right", + "readonly": true }, { "kind": "field", - "name": "accessibilityAttributes", - "type": { - "text": "ListItemAccessibilityAttributes", - "references": [ - { - "name": "ListItemAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" - } - ] - }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", + "static": true, "privacy": "public", - "_ui5since": "1.15.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "default": "End", + "name": "End", + "readonly": true }, { "kind": "field", - "name": "navigated", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "static": true, "privacy": "public", - "_ui5since": "1.10.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, + "default": "Center", + "name": "Center", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableCellHorizontalAlign", + "module": "dist/types/TableCellHorizontalAlign.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/TableGrowingMode.js", + "declarations": [ + { + "kind": "enum", + "name": "TableGrowingMode", + "description": "Growing mode of the <ui5-table> component.", + "_ui5privacy": "public", + "members": [ { "kind": "field", - "name": "tooltip", - "type": { - "text": "string | undefined" - }, - "description": "Defines the text of the tooltip that would be displayed for the list item.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "1.23.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Renders a growing button, which can be pressed to load more data.", + "default": "Button", + "name": "Button", + "readonly": true }, { "kind": "field", - "name": "highlight", - "type": { - "text": "Highlight", - "references": [ - { - "name": "Highlight", - "package": "@ui5/webcomponents", - "module": "dist/types/Highlight.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "static": true, "privacy": "public", - "_ui5since": "1.24", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, + "description": "Scroll to load more data.\n\n**Note:** If the table is not scrollable, a growing button will be rendered instead to ensure growing functionality.", + "default": "Scroll", + "name": "Scroll", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableGrowingMode", + "module": "dist/types/TableGrowingMode.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/TableOverflowMode.js", + "declarations": [ + { + "kind": "enum", + "name": "TableOverflowMode", + "description": "Overflow mode of the <ui5-table> component.", + "_ui5experimental": true, + "_ui5privacy": "public", + "members": [ { "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the selected state of the component.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } - } - ], - "events": [ - { - "name": "detail-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the user clicks on the detail button when type is `Detail`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - } - ], - "attributes": [ - { - "description": "If set, an icon will be displayed before the text of the tree list item.", - "name": "icon", - "default": "undefined", - "fieldName": "icon", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.", - "name": "expanded", - "default": "false", - "fieldName": "expanded", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the item is movable.", - "name": "movable", - "default": "false", - "fieldName": "movable", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", - "name": "indeterminate", - "default": "false", - "fieldName": "indeterminate", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\n\n**Note:** This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\nSet this to `true` for nodes you intend to load lazily, when the user clicks the expand button.\nIt is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.", - "name": "has-children", - "default": "false", - "fieldName": "hasChildren", - "type": { - "text": "boolean" - } - }, - { - "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "additional-text-state", - "default": "\"None\"", - "fieldName": "additionalTextState", - "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" - } - }, - { - "description": "Defines the accessible name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - } - }, - { - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", - "name": "type", - "default": "\"Active\"", - "fieldName": "type", - "type": { - "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", - "type": { - "text": "ListItemAccessibilityAttributes" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", - "name": "navigated", - "default": "false", - "fieldName": "navigated", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "description": "Defines the text of the tooltip that would be displayed for the list item.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, - { - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "highlight", - "default": "\"None\"", - "fieldName": "highlight", - "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Shows a scrollbar, when the table cannot fit all columns.", + "default": "Scroll", + "name": "Scroll", + "readonly": true }, { - "description": "Defines the selected state of the component.", - "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Pops in columns, that do not fit into the table anymore.", + "default": "Popin", + "name": "Popin", + "readonly": true } - ], - "superclass": { - "name": "ListItem", - "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" - }, - "customElement": true, - "_ui5privacy": "public", - "_ui5abstract": true + ] } ], "exports": [ @@ -35210,546 +35537,490 @@ "kind": "js", "name": "default", "declaration": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" + "name": "TableOverflowMode", + "module": "dist/types/TableOverflowMode.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TreeItemCustom.js", + "path": "dist/types/TableSelectionBehavior.js", "declarations": [ { - "kind": "class", - "description": "The `ui5-tree-item-custom` represents a node in a tree structure, shown as a `ui5-list`.\n\nThis is the item to use inside a `ui5-tree`.\nYou can represent an arbitrary tree structure by recursively nesting tree items.\n\nYou can use this item to put any custom content inside the tree item.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TreeItemCustom.js\";`", - "name": "TreeItemCustom", - "cssParts": [ - { - "description": "Used to style the title of the tree list item", - "name": "title" - }, + "kind": "enum", + "name": "TableSelectionBehavior", + "description": "Selection behavior of the `ui5-table` selection components.", + "_ui5privacy": "public", + "_ui5since": "2.11", + "members": [ { - "description": "Used to style the additionalText of the tree list item", - "name": "additionalText" + "kind": "field", + "static": true, + "privacy": "public", + "description": "Rows can only be selected by using the row selector column.", + "default": "RowSelector", + "name": "RowSelector", + "readonly": true }, { - "description": "Used to style the icon of the tree list item", - "name": "icon" + "kind": "field", + "static": true, + "privacy": "public", + "description": "Rows can only be selected by clicking directly on the row, as the row selector column is hidden.\n\n**Note:** In this mode, the `row-click` event of the `ui5-table` component is not fired.", + "default": "RowOnly", + "name": "RowOnly", + "readonly": true } - ], - "slots": [ - { - "name": "content", - "description": "Defines the content of the `ui5-tree-item`.", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public" - }, + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableSelectionBehavior", + "module": "dist/types/TableSelectionBehavior.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/TableSelectionMode.js", + "declarations": [ + { + "kind": "enum", + "name": "TableSelectionMode", + "description": "Selection modes of the <ui5-table> component.", + "_ui5experimental": true, + "_ui5privacy": "public", + "deprecated": "This component is deprecated and will be removed in future releases. Use the `ui5-table-selection-single` or `ui5-table-selection-multi` components instead.", + "members": [ { - "name": "default", - "description": "Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`", - "_ui5propertyName": "items", - "_ui5type": { - "text": "Array<TreeItemBase>", - "references": [ - { - "name": "TreeItemBase", - "package": "@ui5/webcomponents", - "module": "dist/TreeItemBase.js" - } - ] - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Default mode (no selection).", + "default": "None", + "name": "None", + "readonly": true }, { - "name": "image", - "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with size XS.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-tree-item` should be customized in order to fit.", - "_ui5since": "2.10.0", - "_ui5type": { - "text": "Array<HTMLElement>" - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Single selection mode (only one table row can be selected).", + "default": "Single", + "name": "Single", + "readonly": true }, { - "name": "deleteButton", - "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.", - "_ui5since": "1.9.0", - "_ui5type": { - "text": "Array<IButton>", - "references": [ - { - "name": "IButton", - "package": "@ui5/webcomponents", - "module": "dist/Button.js" - } - ] - }, - "_ui5privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Multi selection mode (more than one table row can be selected).", + "default": "Multiple", + "name": "Multiple", + "readonly": true } - ], + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableSelectionMode", + "module": "dist/types/TableSelectionMode.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/TableSelectionMultiHeaderSelector.js", + "declarations": [ + { + "kind": "enum", + "name": "TableSelectionMultiHeaderSelector", + "description": "Selectors of the table header row in multi-selection scenarios.", + "_ui5privacy": "public", + "_ui5since": "2.12", "members": [ { "kind": "field", - "name": "hideSelectionElement", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the tree list item should display the selection element.", - "privacy": "public" + "static": true, + "privacy": "public", + "description": "Renders a checkbox in the table header row that toggles the selection of all rows.", + "default": "SelectAll", + "name": "SelectAll", + "readonly": true }, { "kind": "field", - "name": "icon", - "type": { - "text": "string | undefined" - }, - "description": "If set, an icon will be displayed before the text of the tree list item.", + "static": true, "privacy": "public", - "default": "undefined", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, + "description": "Renders an icon in the table header row that removes the selection of all rows.", + "default": "ClearAll", + "name": "ClearAll", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableSelectionMultiHeaderSelector", + "module": "dist/types/TableSelectionMultiHeaderSelector.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/TagDesign.js", + "declarations": [ + { + "kind": "enum", + "name": "TagDesign", + "description": "Defines tag design types.", + "_ui5privacy": "public", + "members": [ { "kind": "field", - "name": "expanded", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "description": "Set1 of generic indication colors that are intended for industry-specific use cases", + "default": "Set1", + "name": "Set1", + "readonly": true }, { "kind": "field", - "name": "movable", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the item is movable.", + "static": true, "privacy": "public", - "_ui5since": "2.0.0", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } + "description": "Set2 of generic indication colors that are intended for industry-specific use cases", + "default": "Set2", + "name": "Set2", + "readonly": true }, { "kind": "field", - "name": "indeterminate", - "type": { - "text": "boolean" - }, - "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", - "default": "false", + "static": true, "privacy": "public", - "_ui5since": "1.1.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Neutral design", + "default": "Neutral", + "name": "Neutral", + "readonly": true }, { "kind": "field", - "name": "hasChildren", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\n\n**Note:** This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\nSet this to `true` for nodes you intend to load lazily, when the user clicks the expand button.\nIt is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "description": "Information design", + "default": "Information", + "name": "Information", + "readonly": true }, { "kind": "field", - "name": "additionalTextState", - "type": { - "text": "ValueState", - "references": [ - { - "name": "ValueState", - "package": "@ui5/webcomponents-base", - "module": "dist/types/ValueState.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "static": true, "privacy": "public", - "_ui5since": "1.0.0-rc.15", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "description": "Positive design", + "default": "Positive", + "name": "Positive", + "readonly": true }, { "kind": "field", - "name": "accessibleName", - "type": { - "text": "string | undefined" - }, - "description": "Defines the accessible name of the component.", - "default": "undefined", + "static": true, "privacy": "public", - "_ui5since": "1.8.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Negative design", + "default": "Negative", + "name": "Negative", + "readonly": true }, { - "kind": "method", - "name": "toggle", - "return": { - "type": { - "text": "void" - } - }, - "description": "Call this method to manually switch the `expanded` state of a tree item.", + "kind": "field", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, + "description": "Critical design", + "default": "Critical", + "name": "Critical", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TagDesign", + "module": "dist/types/TagDesign.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/TagSize.js", + "declarations": [ + { + "kind": "enum", + "name": "TagSize", + "description": "Predefined sizes for the tag.", + "_ui5privacy": "public", + "members": [ { "kind": "field", - "name": "type", - "type": { - "text": "ListItemType", - "references": [ - { - "name": "ListItemType", - "package": "@ui5/webcomponents", - "module": "dist/types/ListItemType.js" - } - ] - }, - "default": "\"Active\"", - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Small size of the tag", + "default": "S", + "name": "S", + "readonly": true }, { "kind": "field", - "name": "accessibilityAttributes", - "type": { - "text": "ListItemAccessibilityAttributes", - "references": [ - { - "name": "ListItemAccessibilityAttributes", - "package": "@ui5/webcomponents", - "module": "dist/ListItem.js" - } - ] - }, - "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", + "static": true, "privacy": "public", - "_ui5since": "1.15.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - }, + "description": "Large size of the tag", + "default": "L", + "name": "L", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TagSize", + "module": "dist/types/TagSize.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/TextEmptyIndicatorMode.js", + "declarations": [ + { + "kind": "enum", + "name": "TextEmptyIndicatorMode", + "description": "Empty Indicator Mode.", + "_ui5privacy": "public", + "members": [ { "kind": "field", - "name": "navigated", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "static": true, "privacy": "public", - "_ui5since": "1.10.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Empty indicator is never rendered.", + "default": "Off", + "name": "Off", + "readonly": true }, { "kind": "field", - "name": "tooltip", - "type": { - "text": "string | undefined" - }, - "description": "Defines the text of the tooltip that would be displayed for the list item.", - "default": "undefined", + "static": true, + "privacy": "public", + "description": "Empty indicator is rendered always when the component's content is empty.", + "default": "On", + "name": "On", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TextEmptyIndicatorMode", + "module": "dist/types/TextEmptyIndicatorMode.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/TitleLevel.js", + "declarations": [ + { + "kind": "enum", + "name": "TitleLevel", + "description": "Different types of Title level.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, "privacy": "public", - "_ui5since": "1.23.0", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Renders `h1` tag.", + "default": "H1", + "name": "H1", + "readonly": true }, { "kind": "field", - "name": "highlight", - "type": { - "text": "Highlight", - "references": [ - { - "name": "Highlight", - "package": "@ui5/webcomponents", - "module": "dist/types/Highlight.js" - } - ] - }, - "default": "\"None\"", - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "static": true, "privacy": "public", - "_ui5since": "1.24", - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "description": "Renders `h2` tag.", + "default": "H2", + "name": "H2", + "readonly": true }, { "kind": "field", - "name": "selected", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Defines the selected state of the component.", + "static": true, "privacy": "public", - "inheritedFrom": { - "name": "ListItemBase", - "module": "dist/ListItemBase.js" - } - } - ], - "attributes": [ - { - "description": "Defines whether the tree list item should display the selection element.", - "name": "hide-selection-element", - "default": "false", - "fieldName": "hideSelectionElement", - "type": { - "text": "boolean" - } - }, - { - "description": "If set, an icon will be displayed before the text of the tree list item.", - "name": "icon", - "default": "undefined", - "fieldName": "icon", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "description": "Renders `h3` tag.", + "default": "H3", + "name": "H3", + "readonly": true }, { - "description": "Defines whether the tree list item will show a collapse or expand icon inside its toggle button.", - "name": "expanded", - "default": "false", - "fieldName": "expanded", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Renders `h4` tag.", + "default": "H4", + "name": "H4", + "readonly": true }, { - "description": "Defines whether the item is movable.", - "name": "movable", - "default": "false", - "fieldName": "movable", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Renders `h5` tag.", + "default": "H5", + "name": "H5", + "readonly": true }, { - "description": "Defines whether the selection of a tree node is displayed as partially selected.\n\n**Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction, meaning that the resulting visual state depends on the values of the `indeterminate`\nand `selected` properties:\n\n- If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n- If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n- If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\n**Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.", - "name": "indeterminate", - "default": "false", - "fieldName": "indeterminate", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } - }, + "kind": "field", + "static": true, + "privacy": "public", + "description": "Renders `h6` tag.", + "default": "H6", + "name": "H6", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TitleLevel", + "module": "dist/types/TitleLevel.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/ToastPlacement.js", + "declarations": [ + { + "kind": "enum", + "name": "ToastPlacement", + "description": "Toast placement.", + "_ui5privacy": "public", + "members": [ { - "description": "Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\n\n**Note:** This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\nSet this to `true` for nodes you intend to load lazily, when the user clicks the expand button.\nIt is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.", - "name": "has-children", - "default": "false", - "fieldName": "hasChildren", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Toast is placed at the `TopStart` position of its container.", + "default": "TopStart", + "name": "TopStart", + "readonly": true }, { - "description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "additional-text-state", - "default": "\"None\"", - "fieldName": "additionalTextState", - "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Toast is placed at the `TopCenter` position of its container.", + "default": "TopCenter", + "name": "TopCenter", + "readonly": true }, { - "description": "Defines the accessible name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "TreeItemBase", - "module": "dist/TreeItemBase.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Toast is placed at the `TopEnd` position of its container.", + "default": "TopEnd", + "name": "TopEnd", + "readonly": true }, { - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.", - "name": "type", - "default": "\"Active\"", - "fieldName": "type", - "type": { - "text": "\"Navigation\" | \"Inactive\" | \"Active\" | \"Detail\"" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Toast is placed at the `MiddleStart` position of its container.", + "default": "MiddleStart", + "name": "MiddleStart", + "readonly": true }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", - "name": "accessibility-attributes", - "default": "{}", - "fieldName": "accessibilityAttributes", - "type": { - "text": "ListItemAccessibilityAttributes" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Toast is placed at the `MiddleCenter` position of its container.", + "default": "MiddleCenter", + "name": "MiddleCenter", + "readonly": true }, { - "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", - "name": "navigated", - "default": "false", - "fieldName": "navigated", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Toast is placed at the `MiddleEnd` position of its container.", + "default": "MiddleEnd", + "name": "MiddleEnd", + "readonly": true }, { - "description": "Defines the text of the tooltip that would be displayed for the list item.", - "name": "tooltip", - "default": "undefined", - "fieldName": "tooltip", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Toast is placed at the `BottomStart` position of its container.", + "default": "BottomStart", + "name": "BottomStart", + "readonly": true }, { - "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", - "name": "highlight", - "default": "\"None\"", - "fieldName": "highlight", - "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Toast is placed at the `BottomCenter` position of its container.\nDefault placement (no selection)", + "default": "BottomCenter", + "name": "BottomCenter", + "readonly": true }, { - "description": "Defines the selected state of the component.", - "name": "selected", - "default": "false", - "fieldName": "selected", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } - } - ], - "superclass": { - "name": "TreeItemBase", - "package": "@ui5/webcomponents", - "module": "dist/TreeItemBase.js" - }, - "tagName": "ui5-tree-item-custom", - "customElement": true, - "_ui5since": "1.9.2", - "_ui5privacy": "public", - "events": [ - { - "name": "detail-click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent" - }, - "description": "Fired when the user clicks on the detail button when type is `Detail`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "inheritedFrom": { - "name": "ListItem", - "module": "dist/ListItem.js" - } + "kind": "field", + "static": true, + "privacy": "public", + "description": "Toast is placed at the `BottomEnd` position of its container.", + "default": "BottomEnd", + "name": "BottomEnd", + "readonly": true } ] } @@ -35759,61 +36030,186 @@ "kind": "js", "name": "default", "declaration": { - "name": "TreeItemCustom", - "module": "dist/TreeItemCustom.js" + "name": "ToastPlacement", + "module": "dist/types/ToastPlacement.js" } - }, + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/types/ToolbarAlign.js", + "declarations": [ { - "kind": "custom-element-definition", - "name": "ui5-tree-item-custom", + "kind": "enum", + "name": "ToolbarAlign", + "description": "Defines which direction the items of ui5-toolbar will be aligned.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Toolbar items are situated at the `start` of the Toolbar", + "default": "Start", + "name": "Start", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Toolbar items are situated at the `end` of the Toolbar", + "default": "End", + "name": "End", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", "declaration": { - "name": "TreeItemCustom", - "module": "dist/TreeItemCustom.js" + "name": "ToolbarAlign", + "module": "dist/types/ToolbarAlign.js" } } ] }, { "kind": "javascript-module", - "path": "dist/TreeList.js", - "declarations": [], + "path": "dist/types/ToolbarDesign.js", + "declarations": [ + { + "kind": "enum", + "name": "ToolbarDesign", + "description": "Defines the available toolbar designs.", + "_ui5privacy": "public", + "_ui5since": "2.0.0", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "The toolbar and its content will be displayed with solid background.", + "default": "Solid", + "name": "Solid", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "The toolbar and its content will be displayed with transparent background.", + "default": "Transparent", + "name": "Transparent", + "readonly": true + } + ] + } + ], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "TreeList", - "module": "dist/TreeList.js" + "name": "ToolbarDesign", + "module": "dist/types/ToolbarDesign.js" } } ] }, { "kind": "javascript-module", - "path": "dist/YearPicker.js", - "declarations": [], + "path": "dist/types/ToolbarItemOverflowBehavior.js", + "declarations": [ + { + "kind": "enum", + "name": "ToolbarItemOverflowBehavior", + "description": "Defines the priority of the toolbar item to go inside overflow popover.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "The item is presented inside the toolbar and goes in the popover, when there is not enough space.", + "default": "Default", + "name": "Default", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "When set, the item will never go to the overflow popover.", + "default": "NeverOverflow", + "name": "NeverOverflow", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "When set, the item will be always part of the overflow part of ui5-toolbar.", + "default": "AlwaysOverflow", + "name": "AlwaysOverflow", + "readonly": true + } + ] + } + ], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "YearPicker", - "module": "dist/YearPicker.js" + "name": "ToolbarItemOverflowBehavior", + "module": "dist/types/ToolbarItemOverflowBehavior.js" } } ] }, { "kind": "javascript-module", - "path": "dist/YearRangePicker.js", - "declarations": [], + "path": "dist/types/WrappingType.js", + "declarations": [ + { + "kind": "enum", + "name": "WrappingType", + "description": "Different types of wrapping.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "The text will be truncated with an ellipsis.", + "default": "None", + "name": "None", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "The text will wrap. The words will not be broken based on hyphenation.", + "default": "Normal", + "name": "Normal", + "readonly": true + } + ] + } + ], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "YearRangePicker", - "module": "dist/YearRangePicker.js" + "name": "WrappingType", + "module": "dist/types/WrappingType.js" } } ] diff --git a/.storybook/utils.ts b/.storybook/utils.ts index c82d1618371..8ffa0a22afa 100644 --- a/.storybook/utils.ts +++ b/.storybook/utils.ts @@ -1,5 +1,5 @@ import type * as CEM from '@ui5/webcomponents-tools/lib/cem/types-internal'; -import { useMemo } from 'react'; +import { useMemo, useRef, useState, useTransition } from 'react'; // @ts-expect-error: storybook can handle this import cemAi from './custom-element-manifests/ai.json'; // @ts-expect-error: storybook can handle this @@ -85,3 +85,79 @@ export function useGetSubComponentsOfModule(moduleName: string, tags: string[]) return findSubComponentsRecursively(moduleName, cem); }, [cem, moduleName]); } + +type StartStreamOptions = { + text: string; + onComplete?: (fullText: string) => void; + onProcessingComplete?: () => void; +}; +export function useFakeStream(typingDelay = 10, startingDelay = 1500) { + const [value, setValue] = useState(''); + const [transitionIsPending, startTransition] = useTransition(); // active character updates + const [isProcessing, setIsProcessing] = useState(false); // starting delay + const [isTyping, setIsTyping] = useState(false); // actively typing characters + const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null); + const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null); + + const startStream = ({ text, onComplete, onProcessingComplete }: StartStreamOptions) => { + // Stop previous stream and timeout + if (intervalRef.current) { + clearInterval(intervalRef.current); + intervalRef.current = null; + } + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + timeoutRef.current = null; + } + + setValue(''); + setIsProcessing(true); + + timeoutRef.current = setTimeout(() => { + setIsProcessing(false); + + if (onProcessingComplete) { + onProcessingComplete(); + } + + setIsTyping(true); + let index = 0; + + intervalRef.current = setInterval(() => { + if (index < text.length) { + const nextChar = text[index]; + index++; + + startTransition(() => { + setValue((prev) => prev + nextChar); + }); + } else { + if (intervalRef.current) { + clearInterval(intervalRef.current); + intervalRef.current = null; + } + setIsTyping(false); + + if (onComplete) { + onComplete(text); + } + } + }, typingDelay); + }, startingDelay); + }; + + const stopStream = () => { + if (intervalRef.current) { + clearInterval(intervalRef.current); + intervalRef.current = null; + } + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + timeoutRef.current = null; + } + setIsProcessing(false); + setIsTyping(false); + }; + + return { value, transitionIsPending, isProcessing, isTyping, setValue, startStream, stopStream }; +} diff --git a/config/version-info.json b/config/version-info.json index ac042a05390..13d1d6738aa 100644 --- a/config/version-info.json +++ b/config/version-info.json @@ -57,5 +57,6 @@ "2.12.0": "2.12.0", "2.13.1": "2.13.0", "2.14.0": "2.14.0", - "2.15.0": "2.15.0" + "2.15.0": "2.15.0", + "2.16.0": "2.16.1" } diff --git a/package.json b/package.json index beff56038c3..6f5c03fe50d 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "prettier:all": "prettier --write --config ./prettier.config.js \"**/*\"", "lint": "eslint .", "lerna:version-dryrun": "lerna version --conventional-graduate --no-git-tag-version --no-push", - "wrappers:main": "WITH_WEB_COMPONENT_DOCS_LINK='true' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents --out ./packages/main/src/webComponents", + "wrappers:main": "WITH_WEB_COMPONENT_DOCS_LINK='true' node packages/cli/dist/bin/index.js create-wrappers --packageName '@ui5/webcomponents' --out ./packages/main/src/webComponents", "wrappers:fiori": "WITH_WEB_COMPONENT_DOCS_LINK='true' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-fiori --out ./packages/main/src/webComponents", "wrappers:compat": "WITH_WEB_COMPONENT_DOCS_LINK='true' WITH_WEB_COMPONENT_IMPORT_PATH='@ui5/webcomponents-react-base/withWebComponent' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-compat --out ./packages/compat/src/components && prettier --log-level silent --write ./packages/compat/src/components", "wrappers:ai": "WITH_WEB_COMPONENT_DOCS_LINK='true' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-ai --out ./packages/ai/src/components && prettier --log-level silent --write ./packages/ai/src/components", @@ -40,11 +40,11 @@ "@storybook/addon-a11y": "9.1.16", "@storybook/addon-docs": "9.1.16", "@storybook/react-vite": "9.1.16", - "@ui5/webcomponents": "2.15.1", - "@ui5/webcomponents-ai": "2.15.1", - "@ui5/webcomponents-compat": "2.15.1", - "@ui5/webcomponents-fiori": "2.15.1", - "@ui5/webcomponents-icons": "2.15.1", + "@ui5/webcomponents": "2.16.1", + "@ui5/webcomponents-ai": "2.16.1", + "@ui5/webcomponents-compat": "2.16.1", + "@ui5/webcomponents-fiori": "2.16.1", + "@ui5/webcomponents-icons": "2.16.1", "react": "19.2.0", "react-dom": "19.2.0", "remark-gfm": "4.0.1", @@ -66,7 +66,7 @@ "@types/node": "24.9.2", "@types/react": "19.1.17", "@types/react-dom": "19.1.11", - "@ui5/webcomponents-tools": "2.15.1", + "@ui5/webcomponents-tools": "2.16.1", "@vitejs/plugin-react": "5.0.4", "chromatic": "13.2.1", "cssnano": "7.1.2", diff --git a/packages/ai/package.json b/packages/ai/package.json index d8c353c7bae..f5c4b835e50 100644 --- a/packages/ai/package.json +++ b/packages/ai/package.json @@ -26,6 +26,14 @@ "./PromptInput": { "types": "./dist/components/PromptInput/index.d.ts", "default": "./dist/components/PromptInput/index.js" + }, + "./Input": { + "types": "./dist/components/Input/index.d.ts", + "default": "./dist/components/Input/index.js" + }, + "./TextArea": { + "types": "./dist/components/TextArea/index.d.ts", + "default": "./dist/components/TextArea/index.js" } }, "homepage": "https://ui5.github.io/webcomponents-react", @@ -45,7 +53,7 @@ "@ui5/webcomponents-react-base": "workspace:~" }, "peerDependencies": { - "@ui5/webcomponents-ai": "~2.15.0", + "@ui5/webcomponents-ai": "~2.16.1", "react": "^18 || ^19" }, "publishConfig": { diff --git a/packages/ai/src/components/Input/Input.mdx b/packages/ai/src/components/Input/Input.mdx new file mode 100644 index 00000000000..9a8f202fd9a --- /dev/null +++ b/packages/ai/src/components/Input/Input.mdx @@ -0,0 +1,347 @@ +import { ControlsWithNote, DocsHeader, Footer } from '@sb/components'; +import { Canvas, Meta } from '@storybook/addon-docs/blocks'; +import * as ComponentStories from './Input.stories.tsx'; + +<Meta of={ComponentStories} /> + +<DocsHeader of={ComponentStories} experimental /> + +<br /> + +## Example + +<Canvas of={ComponentStories.Default} /> + +## Properties + +<ControlsWithNote of={ComponentStories.Default} /> + +## Input with Fake Stream + +Input component implementing simple stream handling. + +<Canvas of={ComponentStories.WithFakeStream} /> + +<details> + + <summary>Show Static Code</summary> + + ```tsx + function useFakeStream(typingDelay = 10, startingDelay = 1500) { + const [value, setValue] = useState(''); + const [transitionIsPending, startTransition] = useTransition(); // active character updates + const [isProcessing, setIsProcessing] = useState(false); // starting delay + const [isTyping, setIsTyping] = useState(false); // actively typing characters + const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null); + const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null); + + type StartStreamOptions = { + text: string; + onComplete?: (fullText: string) => void; + onProcessingComplete?: () => void; + }; + + const startStream = ({ text, onComplete, onProcessingComplete }: StartStreamOptions) => { + // Stop previous stream and timeout + if (intervalRef.current) { + clearInterval(intervalRef.current); + intervalRef.current = null; + } + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + timeoutRef.current = null; + } + + setValue(''); + setIsProcessing(true); + + timeoutRef.current = setTimeout(() => { + setIsProcessing(false); + + if (onProcessingComplete) { + onProcessingComplete(); + } + + setIsTyping(true); + let index = 0; + + intervalRef.current = setInterval(() => { + if (index < text.length) { + const nextChar = text[index]; + index++; + + startTransition(() => { + setValue((prev) => prev + nextChar); + }); + } else { + if (intervalRef.current) { + clearInterval(intervalRef.current); + intervalRef.current = null; + } + setIsTyping(false); + + if (onComplete) { + onComplete(text); + } + } + }, typingDelay); + }, startingDelay); + }; + + const stopStream = () => { + if (intervalRef.current) { + clearInterval(intervalRef.current); + intervalRef.current = null; + } + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + timeoutRef.current = null; + } + setIsProcessing(false); + setIsTyping(false); + }; + + return { value, transitionIsPending, isProcessing, isTyping, setValue, startStream, stopStream }; + } + + const SAMPLE_TEXTS = { + en: 'Innovation managers lead with creativity.', + bg: 'Мениджърите по иновации водят с креативност.', + de: 'Innovationsmanager führen mit Kreativität.', + expanded: 'They combine creative ideas with strategic action.', + simplified: 'They lead using creativity.', + summarized: 'Driving innovation creatively.', + }; + + const MENU_CONFIG = [ + { + text: 'Regenerate', + action: 'regenerate', + processingLabel: 'Regenerating text...', + completedLabel: 'Regenerated text', + textKey: 'en', + replaces: 'generate', + }, + { + text: 'Fix spelling and grammar', + action: 'fixSpelling', + processingLabel: 'Fixing spelling and grammar...', + completedLabel: 'Fixed spelling and grammar', + textKey: 'en', + }, + { + text: 'Rewrite text', + isGroup: true, + children: [ + { + text: 'Simplify', + action: 'simplify', + processingLabel: 'Simplifying text...', + completedLabel: 'Simplified text', + textKey: 'simplified', + isChild: true, + }, + { + text: 'Expand', + action: 'expand', + processingLabel: 'Expanding text...', + completedLabel: 'Expanded text', + textKey: 'expanded', + isChild: true, + }, + { + text: 'Summarize', + action: 'summarize', + processingLabel: 'Summarizing text...', + completedLabel: 'Summarized text', + textKey: 'summarized', + isChild: true, + }, + ], + }, + { + text: 'Translate', + isGroup: true, + children: [ + { + text: 'English', + action: 'translateEN', + processingLabel: 'Translating to English...', + completedLabel: 'Translated to English', + textKey: 'en', + isChild: true, + }, + { + text: 'German', + action: 'translateDE', + processingLabel: 'Translating to German...', + completedLabel: 'Translated to German', + textKey: 'de', + isChild: true, + }, + { + text: 'Bulgarian', + action: 'translateBG', + processingLabel: 'Translating to Bulgarian...', + completedLabel: 'Translated to Bulgarian', + textKey: 'bg', + isChild: true, + }, + ], + }, + ]; + + type VersionHistoryItem = { + action: string; + endAction: string; + timestamp: string; + value: string; + }; + + const initialPlaceholder = 'Write your title'; + + function AIInput(props) { + const [versionHistory, setVersionHistory] = useState<VersionHistoryItem[]>([]); + const [currentHistoryIndex, setCurrentHistoryIndex] = useState(-1); + const [placeholder, setPlaceholder] = useState(initialPlaceholder); + const hasHistory = versionHistory.length > 0; + const currentActionRef = useRef<string>(''); + const { value, isTyping, isProcessing, setValue, startStream, stopStream } = useFakeStream(50); + + const handleVersionChange: InputPropTypes['onVersionChange'] = (e) => { + setCurrentHistoryIndex((prev) => (e.detail.backwards ? prev - 1 : prev + 1)); + }; + + const handleItemClick: InputPropTypes['onItemClick'] = (e) => { + const { action, processingLabel, textKey } = e.detail.item.dataset; + if (isProcessing || !action) { + return; + } + currentActionRef.current = action; + + let text = SAMPLE_TEXTS[textKey ?? 'en']; + switch (action) { + case 'simplify': { + text = SAMPLE_TEXTS.simplified; + break; + } + case 'expand': { + text = SAMPLE_TEXTS.expanded; + break; + } + case 'summarize': { + text = SAMPLE_TEXTS.expanded; + break; + } + case 'translateEN': { + text = SAMPLE_TEXTS.en; + break; + } + case 'translateDE': { + text = SAMPLE_TEXTS.de; + break; + } + case 'translateBG': { + text = SAMPLE_TEXTS.bg; + break; + } + } + + setPlaceholder(processingLabel); + startStream({ + text, + onProcessingComplete: () => { + setPlaceholder(initialPlaceholder); + }, + onComplete: (fullText) => { + setVersionHistory((prev) => [ + ...prev, + { action, endAction: 'completed', timestamp: new Date().toISOString(), value: fullText }, + ]); + setCurrentHistoryIndex((prev) => prev + 1); + setValue(''); + }, + }); + }; + + const handleStopGeneration: InputPropTypes['onStopGeneration'] = (e) => { + stopStream(); + setVersionHistory((prev) => [ + ...prev, + { + action: currentActionRef.current, + endAction: 'stopped', + timestamp: new Date().toISOString(), + value: e.target.value, + }, + ]); + setCurrentHistoryIndex((prev) => prev + 1); + setValue(''); + }; + + const handleInput: InputPropTypes['onInput'] = (e) => { + setValue(e.target.value); + }; + + return ( + <Input + {...props} + style={{ width: '400px' }} + value={isProcessing ? '' : value || versionHistory[currentHistoryIndex]?.value || ''} + placeholder={placeholder} + currentVersion={currentHistoryIndex + 1} + totalVersions={versionHistory.length} + loading={isProcessing || isTyping} + onVersionChange={handleVersionChange} + onStopGeneration={handleStopGeneration} + onItemClick={handleItemClick} + onInput={handleInput} + actions={ + <> + {hasHistory ? ( + MENU_CONFIG.map((configItem, index) => { + if (configItem.replaces && !hasHistory) { + return null; + } + + if (configItem.isGroup && Array.isArray(configItem.children)) { + return ( + <MenuItem key={index} text={configItem.text}> + {configItem.children.map((child) => ( + <MenuItem + key={child.text} + text={child.text} + data-action={child.action} + data-processing-label={child.processingLabel} + data-completed-label={child.completedLabel} + data-text-key={child.textKey} + /> + ))} + </MenuItem> + ); + } + + return ( + <MenuItem + key={configItem.text} + text={configItem.text} + data-action={configItem.action} + data-processing-label={configItem.processingLabel} + data-completed-label={configItem.completedLabel} + data-text-key={configItem.textKey} + /> + ); + }) + ) : ( + <MenuItem key="generate" text="Generate" data-action="generate" data-processing-label="Processing..." /> + )} + </> + } + /> + ); + } + ``` + +</details> + +<Footer /> diff --git a/packages/ai/src/components/Input/Input.stories.tsx b/packages/ai/src/components/Input/Input.stories.tsx new file mode 100644 index 00000000000..c4e6bd8ae33 --- /dev/null +++ b/packages/ai/src/components/Input/Input.stories.tsx @@ -0,0 +1,267 @@ +import type { Meta, StoryObj } from '@storybook/react-vite'; +import { MenuItem } from '@ui5/webcomponents-react'; +import { useRef, useState } from 'react'; +import { useFakeStream } from '../../../../../.storybook/utils.js'; +import type { InputPropTypes } from './index.js'; +import { Input } from './index.js'; + +const meta = { + title: 'Input', + component: Input, + argTypes: { + actions: { control: { disable: true } }, + children: { control: { disable: true } }, + icon: { control: { disable: true } }, + valueStateMessage: { control: { disable: true } }, + }, + tags: ['package:@ui5/webcomponents-ai', 'experimental'], +} satisfies Meta<typeof Input>; + +export default meta; +type Story = StoryObj<typeof meta>; + +export const Default: Story = { + render(args) { + return <Input {...args} actions={<MenuItem key="generate" text="Generate" data-action="generate" />} />; + }, +}; + +const SAMPLE_TEXTS = { + en: 'Innovation managers lead with creativity.', + bg: 'Мениджърите по иновации водят с креативност.', + de: 'Innovationsmanager führen mit Kreativität.', + expanded: 'They combine creative ideas with strategic action.', + simplified: 'They lead using creativity.', + summarized: 'Driving innovation creatively.', +}; + +const MENU_CONFIG = [ + { + text: 'Regenerate', + action: 'regenerate', + processingLabel: 'Regenerating text...', + completedLabel: 'Regenerated text', + textKey: 'en', + replaces: 'generate', + }, + { + text: 'Fix spelling and grammar', + action: 'fixSpelling', + processingLabel: 'Fixing spelling and grammar...', + completedLabel: 'Fixed spelling and grammar', + textKey: 'en', + }, + { + text: 'Rewrite text', + isGroup: true, + children: [ + { + text: 'Simplify', + action: 'simplify', + processingLabel: 'Simplifying text...', + completedLabel: 'Simplified text', + textKey: 'simplified', + isChild: true, + }, + { + text: 'Expand', + action: 'expand', + processingLabel: 'Expanding text...', + completedLabel: 'Expanded text', + textKey: 'expanded', + isChild: true, + }, + { + text: 'Summarize', + action: 'summarize', + processingLabel: 'Summarizing text...', + completedLabel: 'Summarized text', + textKey: 'summarized', + isChild: true, + }, + ], + }, + { + text: 'Translate', + isGroup: true, + children: [ + { + text: 'English', + action: 'translateEN', + processingLabel: 'Translating to English...', + completedLabel: 'Translated to English', + textKey: 'en', + isChild: true, + }, + { + text: 'German', + action: 'translateDE', + processingLabel: 'Translating to German...', + completedLabel: 'Translated to German', + textKey: 'de', + isChild: true, + }, + { + text: 'Bulgarian', + action: 'translateBG', + processingLabel: 'Translating to Bulgarian...', + completedLabel: 'Translated to Bulgarian', + textKey: 'bg', + isChild: true, + }, + ], + }, +]; + +type VersionHistoryItem = { + action: string; + endAction: string; + timestamp: string; + value: string; +}; + +const initialPlaceholder = 'Write your title'; + +export const WithFakeStream: Story = { + name: 'with Stream', + render: (args) => { + const [versionHistory, setVersionHistory] = useState<VersionHistoryItem[]>([]); + const [currentHistoryIndex, setCurrentHistoryIndex] = useState(-1); + const [placeholder, setPlaceholder] = useState(initialPlaceholder); + const hasHistory = versionHistory.length > 0; + const currentActionRef = useRef<string>(''); + const { value, isTyping, isProcessing, setValue, startStream, stopStream } = useFakeStream(50); + + const handleVersionChange: InputPropTypes['onVersionChange'] = (e) => { + setCurrentHistoryIndex((prev) => (e.detail.backwards ? prev - 1 : prev + 1)); + }; + + const handleItemClick: InputPropTypes['onItemClick'] = (e) => { + const { action, processingLabel, textKey } = e.detail.item.dataset; + if (isProcessing || !action) { + return; + } + currentActionRef.current = action; + + let text = SAMPLE_TEXTS[textKey ?? 'en']; + switch (action) { + case 'simplify': { + text = SAMPLE_TEXTS.simplified; + break; + } + case 'expand': { + text = SAMPLE_TEXTS.expanded; + break; + } + case 'summarize': { + text = SAMPLE_TEXTS.expanded; + break; + } + case 'translateEN': { + text = SAMPLE_TEXTS.en; + break; + } + case 'translateDE': { + text = SAMPLE_TEXTS.de; + break; + } + case 'translateBG': { + text = SAMPLE_TEXTS.bg; + break; + } + } + + setPlaceholder(processingLabel); + startStream({ + text, + onProcessingComplete: () => { + setPlaceholder(initialPlaceholder); + }, + onComplete: (fullText) => { + setVersionHistory((prev) => [ + ...prev, + { action, endAction: 'completed', timestamp: new Date().toISOString(), value: fullText }, + ]); + setCurrentHistoryIndex((prev) => prev + 1); + setValue(''); + }, + }); + }; + + const handleStopGeneration: InputPropTypes['onStopGeneration'] = (e) => { + stopStream(); + setVersionHistory((prev) => [ + ...prev, + { + action: currentActionRef.current, + endAction: 'stopped', + timestamp: new Date().toISOString(), + value: e.target.value, + }, + ]); + setCurrentHistoryIndex((prev) => prev + 1); + setValue(''); + }; + + const handleInput: InputPropTypes['onInput'] = (e) => { + setValue(e.target.value); + }; + + return ( + <Input + {...args} + style={{ width: '400px' }} + value={isProcessing ? '' : value || versionHistory[currentHistoryIndex]?.value || ''} + placeholder={placeholder} + currentVersion={currentHistoryIndex + 1} + totalVersions={versionHistory.length} + loading={isProcessing || isTyping} + onVersionChange={handleVersionChange} + onStopGeneration={handleStopGeneration} + onItemClick={handleItemClick} + onInput={handleInput} + actions={ + <> + {hasHistory ? ( + MENU_CONFIG.map((configItem, index) => { + if (configItem.replaces && !hasHistory) { + return null; + } + + if (configItem.isGroup && Array.isArray(configItem.children)) { + return ( + <MenuItem key={index} text={configItem.text}> + {configItem.children.map((child) => ( + <MenuItem + key={child.text} + text={child.text} + data-action={child.action} + data-processing-label={child.processingLabel} + data-completed-label={child.completedLabel} + data-text-key={child.textKey} + /> + ))} + </MenuItem> + ); + } + + return ( + <MenuItem + key={configItem.text} + text={configItem.text} + data-action={configItem.action} + data-processing-label={configItem.processingLabel} + data-completed-label={configItem.completedLabel} + data-text-key={configItem.textKey} + /> + ); + }) + ) : ( + <MenuItem key="generate" text="Generate" data-action="generate" data-processing-label="Processing..." /> + )} + </> + } + /> + ); + }, +}; diff --git a/packages/ai/src/components/Input/index.tsx b/packages/ai/src/components/Input/index.tsx new file mode 100644 index 00000000000..9e2fdab883f --- /dev/null +++ b/packages/ai/src/components/Input/index.tsx @@ -0,0 +1,415 @@ +'use client'; + +import '@ui5/webcomponents-ai/dist/Input.js'; +import type { InputSelectionChangeEventDetail } from '@ui5/webcomponents/dist/Input.js'; +import type InputType from '@ui5/webcomponents/dist/types/InputType.js'; +import type { InputVersionChangeEventDetail, InputItemClickEventDetail } from '@ui5/webcomponents-ai/dist/Input.js'; +import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; +import type { ReactNode } from 'react'; + +interface InputAttributes { + /** + * Defines the accessible description of the component. + * + * **Note:** Available since [v2.9.0](https://github.com/UI5/webcomponents/releases/tag/v2.9.0) of **@ui5/webcomponents-ai**. + * @default undefined + */ + accessibleDescription?: string | undefined; + + /** + * Receives id(or many ids) of the elements that describe the input. + * + * **Note:** Available since [v2.9.0](https://github.com/UI5/webcomponents/releases/tag/v2.9.0) of **@ui5/webcomponents-ai**. + * @default undefined + */ + accessibleDescriptionRef?: string | undefined; + + /** + * Defines the accessible ARIA name of the component. + * @default undefined + */ + accessibleName?: string | undefined; + + /** + * Receives id(or many ids) of the elements that label the input. + * @default undefined + */ + accessibleNameRef?: string | undefined; + + /** + * Indicates the index of the currently displayed version. + * @default 0 + */ + currentVersion?: number; + + /** + * Defines whether the component is in disabled state. + * + * **Note:** A disabled component is completely noninteractive. + * @default false + */ + disabled?: boolean; + + /** + * Defines whether the AI Writing Assistant is currently loading. + * + * When `true`, indicates that an AI action is in progress. + * @default false + */ + loading?: boolean; + + /** + * Sets the maximum number of characters available in the input field. + * + * **Note:** This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored. + * @default undefined + */ + maxlength?: number | undefined; + + /** + * Determines the name by which the component will be identified upon submission in an HTML form. + * + * **Note:** This property is only applicable within the context of an HTML Form element. + * @default undefined + */ + name?: string | undefined; + + /** + * Defines whether the value will be autcompleted to match an item + * + * **Note:** Available since [v1.4.0](https://github.com/UI5/webcomponents/releases/tag/v1.4.0) of **@ui5/webcomponents-ai**. + * @default false + */ + noTypeahead?: boolean; + + /** + * Defines whether the suggestions picker is open. + * The picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly. + * The picker will close automatically and `close` event will be fired if the input is not in the viewport. + * + * **Note:** Available since [v2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-ai**. + * @default false + */ + open?: boolean; + + /** + * Defines a short hint intended to aid the user with data entry when the + * component has no value. + * @default undefined + */ + placeholder?: string | undefined; + + /** + * Defines whether the component is read-only. + * + * **Note:** A read-only component is not editable, + * but still provides visual feedback upon user interaction. + * @default false + */ + readonly?: boolean; + + /** + * Defines whether the component is required. + * @default false + */ + required?: boolean; + + /** + * Defines whether the clear icon of the input will be shown. + * + * **Note:** Available since [v1.2.0](https://github.com/UI5/webcomponents/releases/tag/v1.2.0) of **@ui5/webcomponents-ai**. + * @default false + */ + showClearIcon?: boolean; + + /** + * Defines whether the component should show suggestions, if such are present. + * @default false + */ + showSuggestions?: boolean; + + /** + * Indicates the total number of result versions available. + * + * When not set or set to 0, the versioning will be hidden. + * @default 0 + */ + totalVersions?: number; + + /** + * Defines the HTML type of the component. + * + * **Notes:** + * + * - The particular effect of this property differs depending on the browser + * and the current language settings, especially for type `Number`. + * - The property is mostly intended to be used with touch devices + * that use different soft keyboard layouts depending on the given input type. + * @default "Text" + */ + type?: InputType | keyof typeof InputType; + + /** + * Defines the value of the component. + * + * **Note:** The property is updated upon typing. + */ + value?: string; + + /** + * Defines the value state of the component. + * @default "None" + */ + valueState?: ValueState | keyof typeof ValueState; +} + +interface InputDomRef extends Required<InputAttributes>, Ui5DomRef {} + +interface InputPropTypes + extends InputAttributes, + Omit< + CommonProps, + | keyof InputAttributes + | 'actions' + | 'children' + | 'icon' + | 'valueStateMessage' + | 'onButtonClick' + | 'onChange' + | 'onClose' + | 'onInput' + | 'onItemClick' + | 'onOpen' + | 'onSelect' + | 'onSelectionChange' + | 'onStopGeneration' + | 'onVersionChange' + > { + /** + * Defines the items of the menu for the component. + * + * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="actions"`). + * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. + * + * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. + * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). + * + * __Supported Node Type/s:__ `Array<HTMLElement>` + */ + actions?: UI5WCSlotsNode; + + /** + * Defines the suggestion items. + * + * **Note:** The suggestions would be displayed only if the `showSuggestions` + * property is set to `true`. + * + * **Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items. + * + * __Supported Node Type/s:__ `Array<IInputSuggestionItem>` + */ + children?: ReactNode | ReactNode[]; + + /** + * Defines the icon to be displayed in the component. + * + * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="icon"`). + * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. + * + * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. + * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). + * + * __Supported Node Type/s:__ `Array<IIcon>` + */ + icon?: UI5WCSlotsNode; + + /** + * Defines the value state message that will be displayed as pop up under the component. + * The value state message slot should contain only one root element. + * + * **Note:** If not specified, a default text (in the respective language) will be displayed. + * + * **Note:** The `valueStateMessage` would be displayed, + * when the component is in `Information`, `Critical` or `Negative` value state. + * + * **Note:** If the component has `suggestionItems`, + * the `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone. + * + * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="valueStateMessage"`). + * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. + * + * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. + * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). + * + * __Supported Node Type/s:__ `Array<HTMLElement>` + */ + valueStateMessage?: UI5WCSlotsNode; + /** + * Fired when the user selects the AI button. + * + * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|❌| + */ + onButtonClick?: (event: Ui5CustomEvent<InputDomRef>) => void; + + /** + * Fired when the input operation has finished by pressing Enter or on focusout. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| + */ + onChange?: (event: Ui5CustomEvent<InputDomRef>) => void; + + /** + * Fired when the suggestions picker is closed. + * + * **Note:** Available since [v2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-ai**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|❌| + */ + onClose?: (event: Ui5CustomEvent<InputDomRef>) => void; + + /** + * Fired when the value of the component changes at each keystroke, + * and when a suggestion item has been selected. + * + * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| + */ + onInput?: (event: Ui5CustomEvent<InputDomRef>) => void; + + /** + * Fired when an item from the AI actions menu is clicked. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|❌| + */ + onItemClick?: (event: Ui5CustomEvent<InputDomRef, InputItemClickEventDetail>) => void; + + /** + * Fired when the suggestions picker is open. + * + * **Note:** Available since [v2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-ai**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| + */ + onOpen?: (event: Ui5CustomEvent<InputDomRef>) => void; + + /** + * Fired when some text has been selected. + * + * **Note:** Available since [v2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-ai**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| + */ + onSelect?: (event: Ui5CustomEvent<InputDomRef>) => void; + + /** + * Fired when the user navigates to a suggestion item via the ARROW keys, + * as a preview, before the final selection. + * + * **Note:** Available since [v2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-ai**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| + */ + onSelectionChange?: (event: Ui5CustomEvent<InputDomRef, InputSelectionChangeEventDetail>) => void; + + /** + * Fired when the user selects the "Stop" button to stop ongoing AI text generation. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|❌| + */ + onStopGeneration?: (event: Ui5CustomEvent<InputDomRef>) => void; + + /** + * Fired when the user selects the version navigation buttons. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|❌| + */ + onVersionChange?: (event: Ui5CustomEvent<InputDomRef, InputVersionChangeEventDetail>) => void; +} + +/** + * The `Input` component extends the standard `ui5-input` with **AI Writing Assistant** capabilities. + * + * ### Structure + * + * The `Input` consists of the following main parts: + * + * - **Input Field** – Inherits all standard Input behaviors. + * - **AI Action Button** – Appears when focused or loading, providing access to AI-related actions or stopping generation. + * + * The component automatically determines which elements to render based on its internal state: + * - The AI Button is only shown when there are available `actions`. + * - The version navigation appears only when `totalVersions > 1`. + * + * ### Keyboard Support + * + * - **Shift + F4** — Opens the AI menu. + * - **Ctrl + Shift + Z / Y** — Navigates backward/forward between AI-generated versions. + * + * + * + * __Note:__ This is a UI5 Web Component! [Input UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/ai/Input) | [Repository](https://github.com/UI5/webcomponents) + * + * @since [2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of __@ui5/webcomponents-ai__. + * @experimental The **@ui5/webcomponents-ai** package is under active development and considered experimental. Component APIs are subject to change. + */ +const Input = withWebComponent<InputPropTypes, InputDomRef>( + 'ui5-ai-input', + [ + 'accessibleDescription', + 'accessibleDescriptionRef', + 'accessibleName', + 'accessibleNameRef', + 'currentVersion', + 'maxlength', + 'name', + 'placeholder', + 'totalVersions', + 'type', + 'value', + 'valueState', + ], + ['disabled', 'loading', 'noTypeahead', 'open', 'readonly', 'required', 'showClearIcon', 'showSuggestions'], + ['actions', 'icon', 'valueStateMessage'], + [ + 'button-click', + 'change', + 'close', + 'input', + 'item-click', + 'open', + 'select', + 'selection-change', + 'stop-generation', + 'version-change', + ], +); + +Input.displayName = 'Input'; + +export { Input }; +export type { InputDomRef, InputPropTypes }; diff --git a/packages/ai/src/components/TextArea/TextArea.mdx b/packages/ai/src/components/TextArea/TextArea.mdx new file mode 100644 index 00000000000..fe96c0d6659 --- /dev/null +++ b/packages/ai/src/components/TextArea/TextArea.mdx @@ -0,0 +1,19 @@ +import { ControlsWithNote, DocsHeader, Footer } from '@sb/components'; +import { Canvas, Meta } from '@storybook/addon-docs/blocks'; +import * as ComponentStories from './TextArea.stories.tsx'; + +<Meta of={ComponentStories} /> + +<DocsHeader of={ComponentStories} experimental /> + +<br /> + +## Example + +<Canvas of={ComponentStories.Default} /> + +## Properties + +<ControlsWithNote of={ComponentStories.Default} /> + +<Footer /> diff --git a/packages/ai/src/components/TextArea/TextArea.stories.tsx b/packages/ai/src/components/TextArea/TextArea.stories.tsx new file mode 100644 index 00000000000..f1b834e57cd --- /dev/null +++ b/packages/ai/src/components/TextArea/TextArea.stories.tsx @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react-vite'; +import { TextArea } from './index.js'; + +const meta = { + title: 'TextArea', + component: TextArea, + argTypes: { + menu: { control: { disable: true } }, + valueStateMessage: { control: { disable: true } }, + }, + tags: ['package:@ui5/webcomponents-ai', 'experimental'], +} satisfies Meta<typeof TextArea>; + +export default meta; +type Story = StoryObj<typeof meta>; + +export const Default: Story = {}; diff --git a/packages/ai/src/components/TextArea/index.tsx b/packages/ai/src/components/TextArea/index.tsx new file mode 100644 index 00000000000..6581d8c1ebe --- /dev/null +++ b/packages/ai/src/components/TextArea/index.tsx @@ -0,0 +1,313 @@ +'use client'; + +import '@ui5/webcomponents-ai/dist/TextArea.js'; +import type { TextAreaInputEventDetail } from '@ui5/webcomponents/dist/TextArea.js'; +import type { TextAreaVersionChangeEventDetail } from '@ui5/webcomponents-ai/dist/TextArea.js'; +import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; + +interface TextAreaAttributes { + /** + * Defines the accessible description of the component. + * + * **Note:** Available since [v2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of **@ui5/webcomponents-ai**. + * @default undefined + */ + accessibleDescription?: string | undefined; + + /** + * Receives id(or many ids) of the elements that describe the textarea. + * + * **Note:** Available since [v2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of **@ui5/webcomponents-ai**. + * @default undefined + */ + accessibleDescriptionRef?: string | undefined; + + /** + * Defines the accessible ARIA name of the component. + * @default undefined + */ + accessibleName?: string | undefined; + + /** + * Receives id(or many ids) of the elements that label the textarea. + * @default undefined + */ + accessibleNameRef?: string | undefined; + + /** + * Indicates the index of the currently displayed version. + * @default 0 + */ + currentVersion?: number; + + /** + * Indicates whether the user can interact with the component or not. + * + * **Note:** A disabled component is completely noninteractive. + * @default false + */ + disabled?: boolean; + + /** + * Enables the component to automatically grow and shrink dynamically with its content. + * @default false + */ + growing?: boolean; + + /** + * Defines the maximum number of rows that the component can grow. + * @default 0 + */ + growingMaxRows?: number; + + /** + * Defines whether the `TextArea` is currently in a loading(processing) state. + * @default false + */ + loading?: boolean; + + /** + * Defines the maximum number of characters that the `value` can have. + * @default undefined + */ + maxlength?: number | undefined; + + /** + * Determines the name by which the component will be identified upon submission in an HTML form. + * + * **Note:** This property is only applicable within the context of an HTML Form element. + * @default undefined + */ + name?: string | undefined; + + /** + * Defines a short hint intended to aid the user with data entry when the component has no value. + * @default undefined + */ + placeholder?: string | undefined; + + /** + * Defines the prompt description of the current action. + */ + promptDescription?: string; + + /** + * Defines whether the component is read-only. + * + * **Note:** A read-only component is not editable, + * but still provides visual feedback upon user interaction. + * @default false + */ + readonly?: boolean; + + /** + * Defines whether the component is required. + * @default false + */ + required?: boolean; + + /** + * Defines the number of visible text rows for the component. + * + * **Notes:** + * + * - If the `growing` property is enabled, this property defines the minimum rows to be displayed + * in the textarea. + * - The CSS `height` property wins over the `rows` property, if both are set. + * @default 0 + */ + rows?: number; + + /** + * Determines whether the characters exceeding the maximum allowed character count are visible + * in the component. + * + * If set to `false`, the user is not allowed to enter more characters than what is set in the + * `maxlength` property. + * If set to `true` the characters exceeding the `maxlength` value are selected on + * paste and the counter below the component displays their number. + * @default false + */ + showExceededText?: boolean; + + /** + * Indicates the total number of result versions available. + * + * Notes: + * Versioning is hidden if the value is `0` + * @default 0 + */ + totalVersions?: number; + + /** + * Defines the value of the component. + */ + value?: string; + + /** + * Defines the value state of the component. + * + * **Note:** If `maxlength` property is set, + * the component turns into "Critical" state once the characters exceeds the limit. + * In this case, only the "Negative" state is considered and can be applied. + * @default "None" + */ + valueState?: ValueState | keyof typeof ValueState; +} + +interface TextAreaDomRef extends Required<TextAreaAttributes>, Ui5DomRef {} + +interface TextAreaPropTypes + extends TextAreaAttributes, + Omit< + CommonProps, + | keyof TextAreaAttributes + | 'menu' + | 'valueStateMessage' + | 'onChange' + | 'onInput' + | 'onScroll' + | 'onSelect' + | 'onStopGeneration' + | 'onVersionChange' + > { + /** + * Defines a slot for `ui5-menu` integration. This slot allows you to pass a `ui5-menu` instance that will be associated with the assistant. + * + * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="menu"`). + * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. + * + * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. + * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). + * + * __Supported Node Type/s:__ `HTMLElement` + */ + menu?: UI5WCSlotsNode; + + /** + * Defines the value state message that will be displayed as pop up under the component. + * The value state message slot should contain only one root element. + * + * **Note:** If not specified, a default text (in the respective language) will be displayed. + * + * **Note:** The `valueStateMessage` would be displayed if the component has + * `valueState` of type `Information`, `Critical` or `Negative`. + * + * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="valueStateMessage"`). + * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. + * + * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. + * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). + * + * __Supported Node Type/s:__ `Array<HTMLElement>` + */ + valueStateMessage?: UI5WCSlotsNode; + /** + * Fired when the text has changed and the focus leaves the component. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| + */ + onChange?: (event: Ui5CustomEvent<TextAreaDomRef>) => void; + + /** + * Fired when the value of the component changes at each keystroke or when + * something is pasted. + * + * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| + */ + onInput?: (event: Ui5CustomEvent<TextAreaDomRef, TextAreaInputEventDetail>) => void; + + /** + * Fired when textarea is scrolled. + * + * **Note:** Available since [v1.23.0](https://github.com/UI5/webcomponents/releases/tag/v1.23.0) of **@ui5/webcomponents-ai**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| + */ + onScroll?: (event: Ui5CustomEvent<TextAreaDomRef>) => void; + + /** + * Fired when some text has been selected. + * + * **Note:** Available since [v1.23.0](https://github.com/UI5/webcomponents/releases/tag/v1.23.0) of **@ui5/webcomponents-ai**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| + */ + onSelect?: (event: Ui5CustomEvent<TextAreaDomRef>) => void; + + /** + * Fired when the user requests to stop AI text generation. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|❌| + */ + onStopGeneration?: (event: Ui5CustomEvent<TextAreaDomRef>) => void; + + /** + * Fired when the user clicks on version navigation buttons. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|❌| + */ + onVersionChange?: (event: Ui5CustomEvent<TextAreaDomRef, TextAreaVersionChangeEventDetail>) => void; +} + +/** + * The `TextArea` component extends the standard TextArea with Writing Assistant capabilities. + * It provides AI-powered text generation, editing suggestions, and version management functionality. + * + * ### Structure + * The `TextArea` consists of the following elements: + * - TextArea: The main text input area with all standard textarea functionality + * - WritingAssistant: Dedicated toolbar containing: + * - Versioning: A component with left/right navigation buttons and a label for browsing AI-generated versions + * - AI Button: Opens a menu that can be extended with custom AI generation options through slotting + * + * + * + * __Note:__ This is a UI5 Web Component! [TextArea UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/ai/TextArea) | [Repository](https://github.com/UI5/webcomponents) + * + * @since [2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of __@ui5/webcomponents-ai__. + * @experimental The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change. + */ +const TextArea = withWebComponent<TextAreaPropTypes, TextAreaDomRef>( + 'ui5-ai-textarea', + [ + 'accessibleDescription', + 'accessibleDescriptionRef', + 'accessibleName', + 'accessibleNameRef', + 'currentVersion', + 'growingMaxRows', + 'maxlength', + 'name', + 'placeholder', + 'promptDescription', + 'rows', + 'totalVersions', + 'value', + 'valueState', + ], + ['disabled', 'growing', 'loading', 'readonly', 'required', 'showExceededText'], + ['menu', 'valueStateMessage'], + ['change', 'input', 'scroll', 'select', 'stop-generation', 'version-change'], +); + +TextArea.displayName = 'TextArea'; + +export { TextArea }; +export type { TextAreaDomRef, TextAreaPropTypes }; diff --git a/packages/ai/src/index.ts b/packages/ai/src/index.ts index c304f05c596..ba3a14e8ea0 100644 --- a/packages/ai/src/index.ts +++ b/packages/ai/src/index.ts @@ -1,7 +1,11 @@ export { Button } from './components/Button/index.js'; export { ButtonState } from './components/ButtonState/index.js'; +export { Input } from './components/Input/index.js'; export { PromptInput } from './components/PromptInput/index.js'; +export { TextArea } from './components/TextArea/index.js'; export type { ButtonDomRef, ButtonPropTypes } from './components/Button/index.js'; export type { ButtonStateDomRef, ButtonStatePropTypes } from './components/ButtonState/index.js'; +export type { InputDomRef, InputPropTypes } from './components/Input/index.js'; export type { PromptInputDomRef, PromptInputPropTypes } from './components/PromptInput/index.js'; +export type { TextAreaDomRef, TextAreaPropTypes } from './components/TextArea/index.js'; diff --git a/packages/base/package.json b/packages/base/package.json index 0e293a1b9a9..7919595d7e8 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -88,7 +88,7 @@ }, "peerDependencies": { "@types/react": "*", - "@ui5/webcomponents-base": "~2.15.0", + "@ui5/webcomponents-base": "~2.16.1", "react": "^18 || ^19" }, "peerDependenciesMeta": { diff --git a/packages/charts/package.json b/packages/charts/package.json index 841c3946e84..95f2d4ac53a 100644 --- a/packages/charts/package.json +++ b/packages/charts/package.json @@ -131,8 +131,8 @@ "recharts": "2.15.4" }, "peerDependencies": { - "@ui5/webcomponents-react": "~2.15.0", - "@ui5/webcomponents-react-base": "~2.15.0", + "@ui5/webcomponents-react": "~2.16.0", + "@ui5/webcomponents-react-base": "~2.16.0", "react": "^18 || ^19" }, "publishConfig": { diff --git a/packages/compat/package.json b/packages/compat/package.json index ce352364aa8..8b2a9fbad3f 100644 --- a/packages/compat/package.json +++ b/packages/compat/package.json @@ -93,8 +93,8 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents-compat": "~2.15.0", - "@ui5/webcomponents-react": "~2.15.0", + "@ui5/webcomponents-compat": "~2.16.1", + "@ui5/webcomponents-react": "~2.16.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/packages/cypress-commands/package.json b/packages/cypress-commands/package.json index c0e49e240d0..8e58199a1c0 100644 --- a/packages/cypress-commands/package.json +++ b/packages/cypress-commands/package.json @@ -23,8 +23,8 @@ "clean": "rimraf dist api-commands.json api-queries.json" }, "peerDependencies": { - "@ui5/webcomponents": "~2.15.0", - "@ui5/webcomponents-base": "~2.15.0", + "@ui5/webcomponents": "~2.16.1", + "@ui5/webcomponents-base": "~2.16.1", "cypress": "^12 || ^13 || ^14 || ^15" }, "peerDependenciesMeta": { diff --git a/packages/main/package.json b/packages/main/package.json index 98b3a5d4d64..d23db99314f 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -793,10 +793,10 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents": "~2.15.0", - "@ui5/webcomponents-base": "~2.15.0", - "@ui5/webcomponents-fiori": "~2.15.0", - "@ui5/webcomponents-icons": "~2.15.0", + "@ui5/webcomponents": "~2.16.1", + "@ui5/webcomponents-base": "~2.16.1", + "@ui5/webcomponents-fiori": "~2.16.1", + "@ui5/webcomponents-icons": "~2.16.1", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts index 70fef2d0e3b..28ce1e28681 100644 --- a/packages/main/src/components/AnalyticalTable/types/index.ts +++ b/packages/main/src/components/AnalyticalTable/types/index.ts @@ -764,9 +764,7 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> { /** * Indicates whether a loading indicator should be shown. * - * __Note:__ - * - If the data array is not empty and loading is set to `true` a `BusyIndicator` will be displayed on top of the table, otherwise a skeleton placeholder will be shown. You can control this behavior via the `alwaysShowBusyIndicator` prop. - * - __We recommend setting this prop to `true` when loading times are under 1 second.__ + * __Note:__ If the data array is not empty and loading is set to `true` a `BusyIndicator` will be displayed on top of the table, otherwise a skeleton placeholder will be shown. You can control this behavior via the `alwaysShowBusyIndicator` prop. */ loading?: boolean; /** @@ -781,6 +779,8 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> { showOverlay?: boolean; /** * If `true`, always shows the `BusyIndicator` component when loading instead of the skeleton loader. + * + * __We recommend setting this prop to `true` when loading times are under 1 second.__ */ alwaysShowBusyIndicator?: boolean; /** diff --git a/packages/main/src/webComponents/Carousel/index.tsx b/packages/main/src/webComponents/Carousel/index.tsx index 1de05c7cc0e..a8e0bbda42d 100644 --- a/packages/main/src/webComponents/Carousel/index.tsx +++ b/packages/main/src/webComponents/Carousel/index.tsx @@ -112,7 +112,6 @@ interface CarouselDomRef extends Required<CarouselAttributes>, Ui5DomRef { /** * Changes the currently displayed page. * @param {number} itemIndex - The index of the target page - * @returns {void} */ navigateTo: (itemIndex: number) => void; @@ -128,6 +127,9 @@ interface CarouselPropTypes /** * Defines the content of the component. * + * **Note:** Items with the `hidden` attribute will be automatically excluded from carousel navigation and page calculations. + * They will not be displayed or accessible via keyboard navigation. See [sample](./#carousel-with-hidden-items). + * * __Supported Node Type/s:__ `Array<HTMLElement>` */ children?: ReactNode | ReactNode[]; @@ -164,6 +166,12 @@ interface CarouselPropTypes * - The items you want to display need to be visible at the same time. * - The items you want to display are uniform and very similar. * + * ### Hidden Items + * + * Carousel items can be conditionally hidden by adding the `hidden` attribute to any child element. + * Hidden items are automatically excluded from carousel navigation and will not be displayed or counted in pagination. + * This allows for dynamic showing or hiding of carousel items without affecting the overall carousel behavior. + * * ### Keyboard Handling * * #### Basic Navigation diff --git a/packages/main/src/webComponents/DynamicDateRange/index.tsx b/packages/main/src/webComponents/DynamicDateRange/index.tsx index 07dd3a0ef11..edf259bac54 100644 --- a/packages/main/src/webComponents/DynamicDateRange/index.tsx +++ b/packages/main/src/webComponents/DynamicDateRange/index.tsx @@ -63,6 +63,9 @@ interface DynamicDateRangePropTypes * - "TOMORROW" - Represents the next date. An example value is `{ operator: "TOMORROW"}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/Tomorrow.js";` * - "DATE" - Represents a single date. An example value is `{ operator: "DATE", values: [new Date()]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/SingleDate.js";` * - "DATERANGE" - Represents a range of dates. An example value is `{ operator: "DATERANGE", values: [new Date(), new Date()]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/DateRange.js";` + * - "DATETIMERANGE" - Represents a range of dates with times. An example value is `{ operator: "DATETIMERANGE", values: [new Date(), new Date()]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/DateTimeRange.js";` + * - "FROMDATETIME" - Represents a range from date and time. An example value is `{ operator: "FROMDATETIME", values: [new Date()]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/FromDateTime.js";` + * - "TODATETIME" - Represents a range to date and time. An example value is `{ operator: "TODATETIME", values: [new Date()]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/ToDateTime.js";` * - "LASTDAYS" - Represents Last X Days from today. An example value is `{ operator: "LASTDAYS", values: [2]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js";` * - "LASTWEEKS" - Represents Last X Weeks from today. An example value is `{ operator: "LASTWEEKS", values: [3]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js";` * - "LASTMONTHS" - Represents Last X Months from today. An example value is `{ operator: "LASTMONTHS", values: [6]}`. Import: `import "@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js";` diff --git a/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx b/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx index a0c7b80cc60..17e57a74812 100644 --- a/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx +++ b/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx @@ -5,6 +5,8 @@ import type { FCLAccessibilityAttributes, FlexibleColumnLayoutColumnLayout, FlexibleColumnLayoutLayoutChangeEventDetail, + FlexibleColumnLayoutLayoutConfigurationChangeEventDetail, + LayoutConfiguration, } from '@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js'; import type FCLLayout from '@ui5/webcomponents-fiori/dist/types/FCLLayout.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; @@ -55,6 +57,24 @@ interface FlexibleColumnLayoutAttributes { * @default "OneColumn" */ layout?: FCLLayout | keyof typeof FCLLayout; + + /** + * Allows to customize the column proportions per screen size and layout. + * If no custom proportion provided for a specific layout, the default will be used. + * + * **Notes:** + * + * - The proportions should be given in percentages. For example ["30%", "40%", "30%"], ["70%", "30%", 0], etc. + * - The proportions should add up to 100%. + * - Hidden columns are marked as "0px", e.g. ["0px", "70%", "30%"]. Specifying 0 or "0%" for hidden columns is also valid. + * - If the proportions do not match the layout (e.g. if provided proportions ["70%", "30%", "0px"] for "OneColumn" layout), then the default proportions will be used instead. + * - Whenever the user drags the columns separator to resize the columns, the `layoutsConfiguration` object will be updated with the user-specified proportions for the given layout (and the `layout-configuration-change` event will be fired). + * - No custom configuration available for the phone screen size, as the default of 100% column width is always used there. + * + * **Note:** Available since [v2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of **@ui5/webcomponents-fiori**. + * @default {} + */ + layoutsConfiguration?: LayoutConfiguration; } interface FlexibleColumnLayoutDomRef extends Required<FlexibleColumnLayoutAttributes>, Ui5DomRef { @@ -91,7 +111,12 @@ interface FlexibleColumnLayoutPropTypes extends FlexibleColumnLayoutAttributes, Omit< CommonProps, - keyof FlexibleColumnLayoutAttributes | 'endColumn' | 'midColumn' | 'startColumn' | 'onLayoutChange' + | keyof FlexibleColumnLayoutAttributes + | 'endColumn' + | 'midColumn' + | 'startColumn' + | 'onLayoutChange' + | 'onLayoutConfigurationChange' > { /** * Defines the content in the end column. @@ -142,6 +167,19 @@ interface FlexibleColumnLayoutPropTypes onLayoutChange?: ( event: Ui5CustomEvent<FlexibleColumnLayoutDomRef, FlexibleColumnLayoutLayoutChangeEventDetail>, ) => void; + + /** + * Fired when the `layoutsConfiguration` changes via user interaction by dragging the separators. + * + * **Note:** Available since [v2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of **@ui5/webcomponents-fiori**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| + */ + onLayoutConfigurationChange?: ( + event: Ui5CustomEvent<FlexibleColumnLayoutDomRef, FlexibleColumnLayoutLayoutConfigurationChangeEventDetail>, + ) => void; } /** @@ -187,10 +225,10 @@ interface FlexibleColumnLayoutPropTypes */ const FlexibleColumnLayout = withWebComponent<FlexibleColumnLayoutPropTypes, FlexibleColumnLayoutDomRef>( 'ui5-flexible-column-layout', - ['accessibilityAttributes', 'layout'], + ['accessibilityAttributes', 'layout', 'layoutsConfiguration'], ['disableResizing'], ['endColumn', 'midColumn', 'startColumn'], - ['layout-change'], + ['layout-change', 'layout-configuration-change'], ); FlexibleColumnLayout.displayName = 'FlexibleColumnLayout'; diff --git a/packages/main/src/webComponents/Form/index.tsx b/packages/main/src/webComponents/Form/index.tsx index bf947d435d5..de5628d0ce0 100644 --- a/packages/main/src/webComponents/Form/index.tsx +++ b/packages/main/src/webComponents/Form/index.tsx @@ -1,13 +1,29 @@ 'use client'; import '@ui5/webcomponents/dist/Form.js'; +import type FormAccessibleMode from '@ui5/webcomponents/dist/types/FormAccessibleMode.js'; import type FormItemSpacing from '@ui5/webcomponents/dist/types/FormItemSpacing.js'; import type TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js'; -import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; interface FormAttributes { + /** + * Defines the accessibility mode of the component in "edit" and "display" use-cases. + * + * Based on the mode, the component renders different HTML elements and ARIA attributes, + * which are appropriate for the use-case. + * + * **Usage:** + * - Set this property to "Display", when the form consists of non-editable (e.g. texts) form items. + * - Set this property to "Edit", when the form consists of editable (e.g. input fields) form items. + * + * **Note:** Available since [v2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of **@ui5/webcomponents**. + * @default "Display" + */ + accessibleMode?: FormAccessibleMode | keyof typeof FormAccessibleMode; + /** * Defines the accessible ARIA name of the component. * @@ -16,6 +32,14 @@ interface FormAttributes { */ accessibleName?: string | undefined; + /** + * Defines id (or many ids) of the element (or elements) that label the component. + * + * **Note:** Available since [v2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleNameRef?: string | undefined; + /** * Defines the number of cells that are empty at the end of each form item, configurable by breakpoint. * @@ -51,9 +75,9 @@ interface FormAttributes { /** * Defines the vertical spacing between form items. * - * **Note:** If the Form is meant to be switched between "non-edit" and "edit" modes, - * we recommend using "Large" item spacing in "non-edit" mode, and "Normal" - for "edit" mode, - * to avoid "jumping" effect, caused by the hight difference between texts in "non-edit" mode and the input fields in "edit" mode. + * **Note:** If the Form is meant to be switched between "display"("non-edit") and "edit" modes, + * we recommend using "Large" item spacing in "display"("non-edit") mode, and "Normal" - for "edit" mode, + * to avoid "jumping" effect, caused by the hight difference between texts in "display"("non-edit") mode and the input fields in "edit" mode. * @default "Normal" */ itemSpacing?: FormItemSpacing | keyof typeof FormItemSpacing; @@ -253,7 +277,17 @@ interface FormPropTypes extends FormAttributes, Omit<CommonProps, keyof FormAttr */ const Form = withWebComponent<FormPropTypes, FormDomRef>( 'ui5-form', - ['accessibleName', 'emptySpan', 'headerLevel', 'headerText', 'itemSpacing', 'labelSpan', 'layout'], + [ + 'accessibleMode', + 'accessibleName', + 'accessibleNameRef', + 'emptySpan', + 'headerLevel', + 'headerText', + 'itemSpacing', + 'labelSpan', + 'layout', + ], [], ['header'], [], diff --git a/packages/main/src/webComponents/FormGroup/index.tsx b/packages/main/src/webComponents/FormGroup/index.tsx index cd520eeec7d..efa9e86951c 100644 --- a/packages/main/src/webComponents/FormGroup/index.tsx +++ b/packages/main/src/webComponents/FormGroup/index.tsx @@ -7,6 +7,22 @@ import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; interface FormGroupAttributes { + /** + * Defines the accessible ARIA name of the component. + * + * **Note:** Available since [v2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleName?: string | undefined; + + /** + * Defines id (or many ids) of the element (or elements) that label the component. + * + * **Note:** Available since [v2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleNameRef?: string | undefined; + /** * Defines column span of the component, * e.g how many columns the group should span to. @@ -64,7 +80,7 @@ interface FormGroupPropTypes extends FormGroupAttributes, Omit<CommonProps, keyo */ const FormGroup = withWebComponent<FormGroupPropTypes, FormGroupDomRef>( 'ui5-form-group', - ['columnSpan', 'headerLevel', 'headerText'], + ['accessibleName', 'accessibleNameRef', 'columnSpan', 'headerLevel', 'headerText'], [], [], [], diff --git a/packages/main/src/webComponents/GroupItem/index.tsx b/packages/main/src/webComponents/GroupItem/index.tsx index 461ce3ec82a..6cae218b525 100644 --- a/packages/main/src/webComponents/GroupItem/index.tsx +++ b/packages/main/src/webComponents/GroupItem/index.tsx @@ -35,7 +35,7 @@ interface GroupItemPropTypes extends GroupItemAttributes, Omit<CommonProps, keyo * * __Note:__ This is a UI5 Web Component! [GroupItem UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/GroupItem) | [Repository](https://github.com/UI5/webcomponents) * - * @since [2.13.0](https://github.com/UI5/webcomponents/releases/tag/v2.13.0) of __@ui5/webcomponents-fiori__. + * @since [2.15.0](https://github.com/UI5/webcomponents/releases/tag/v2.15.0) of __@ui5/webcomponents-fiori__. * @abstract */ const GroupItem = withWebComponent<GroupItemPropTypes, GroupItemDomRef>( diff --git a/packages/main/src/webComponents/List/index.tsx b/packages/main/src/webComponents/List/index.tsx index 478efef256e..8e9cc3f5535 100644 --- a/packages/main/src/webComponents/List/index.tsx +++ b/packages/main/src/webComponents/List/index.tsx @@ -25,13 +25,16 @@ interface ListAttributes { * * The accessibilityAttributes object has the following field: * - * - **growingButton**: `growingButton.name`. + * - **growingButton**: `growingButton.name`, `growingButton.description`. * * The accessibility attributes support the following values: * * - **name**: Defines the accessible ARIA name of the growing button. * Accepts any string. * + * - **description**: Defines the accessible ARIA description of the growing button. + * Accepts any string. + * * **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change. * * **Note:** Available since [v2.13.0](https://github.com/UI5/webcomponents/releases/tag/v2.13.0) of **@ui5/webcomponents**. diff --git a/packages/main/src/webComponents/Menu/index.tsx b/packages/main/src/webComponents/Menu/index.tsx index df539d63fd5..8c0aacb569c 100644 --- a/packages/main/src/webComponents/Menu/index.tsx +++ b/packages/main/src/webComponents/Menu/index.tsx @@ -7,8 +7,9 @@ import type { MenuItemClickEventDetail, } from '@ui5/webcomponents/dist/Menu.js'; import type PopoverHorizontalAlign from '@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js'; -import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; interface MenuAttributes { @@ -57,6 +58,14 @@ interface MenuAttributes { * @default undefined */ opener?: HTMLElement | string | null | undefined; + + /** + * Determines on which side the component is placed at. + * + * **Note:** Available since [v2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of **@ui5/webcomponents**. + * @default "Bottom" + */ + placement?: PopoverPlacement | keyof typeof PopoverPlacement; } interface MenuDomRef extends Required<MenuAttributes>, Ui5DomRef {} @@ -179,7 +188,7 @@ interface MenuPropTypes */ const Menu = withWebComponent<MenuPropTypes, MenuDomRef>( 'ui5-menu', - ['headerText', 'horizontalAlign', 'loadingDelay', 'opener'], + ['headerText', 'horizontalAlign', 'loadingDelay', 'opener', 'placement'], ['loading', 'open'], [], ['before-close', 'before-open', 'close', 'item-click', 'open'], diff --git a/packages/main/src/webComponents/SearchItem/index.tsx b/packages/main/src/webComponents/SearchItem/index.tsx index a2ab84a9ee0..9ab46cd3dac 100644 --- a/packages/main/src/webComponents/SearchItem/index.tsx +++ b/packages/main/src/webComponents/SearchItem/index.tsx @@ -49,7 +49,27 @@ interface SearchItemDomRef extends Required<SearchItemAttributes>, Ui5DomRef {} interface SearchItemPropTypes extends SearchItemAttributes, - Omit<CommonProps, keyof SearchItemAttributes | 'image' | 'onDelete'> { + Omit<CommonProps, keyof SearchItemAttributes | 'actions' | 'image' | 'onDelete'> { + /** + * Defines the actionable elements. + * This slot allows placing additional interactive elements (such as buttons, icons, or tags) + * next to the delete button, providing flexible customization for various user actions. + * + * **Note:** While the slot is flexible, for consistency with design guidelines, + * it's recommended to use `ui5-button` with `Transparent` design or `ui5-icon` elements. + * + * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="actions"`). + * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. + * + * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. + * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). + * + * **Note:** Available since [v2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of **@ui5/webcomponents-fiori**. + * + * __Supported Node Type/s:__ `Array<HTMLElement>` + */ + actions?: UI5WCSlotsNode; + /** * **Note:** While the slot allows the option of setting a custom avatar, to comply with the * design guidelines, use the `ui5-avatar` with size - XS. @@ -89,7 +109,7 @@ const SearchItem = withWebComponent<SearchItemPropTypes, SearchItemDomRef>( 'ui5-search-item', ['description', 'icon', 'scopeName', 'text'], ['deletable', 'selected'], - ['image'], + ['actions', 'image'], ['delete'], ); diff --git a/packages/main/src/webComponents/SearchItemShowMore/index.tsx b/packages/main/src/webComponents/SearchItemShowMore/index.tsx index 51b2c29ffa4..712d60c7097 100644 --- a/packages/main/src/webComponents/SearchItemShowMore/index.tsx +++ b/packages/main/src/webComponents/SearchItemShowMore/index.tsx @@ -1,8 +1,9 @@ 'use client'; import '@ui5/webcomponents-fiori/dist/SearchItemShowMore.js'; +import type { ShowMoreItemClickEventDetail } from '@ui5/webcomponents-fiori/dist/SearchItemShowMore.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; -import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface SearchItemShowMoreAttributes { /** @@ -24,7 +25,19 @@ interface SearchItemShowMoreDomRef extends Required<SearchItemShowMoreAttributes interface SearchItemShowMorePropTypes extends SearchItemShowMoreAttributes, - Omit<CommonProps, keyof SearchItemShowMoreAttributes> {} + Omit<CommonProps, keyof SearchItemShowMoreAttributes | 'onClick'> { + /** + * Fired when the component is activated, either with a mouse/tap + * or by pressing the Enter or Space keys. + * + * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| + */ + onClick?: (event: Ui5CustomEvent<SearchItemShowMoreDomRef, ShowMoreItemClickEventDetail>) => void; +} /** * A `SearchItemShowMore` is a special type of ui5-li that acts as a button to progressively reveal additional (overflow) items within a group. @@ -41,7 +54,7 @@ const SearchItemShowMore = withWebComponent<SearchItemShowMorePropTypes, SearchI ['itemsToShowCount'], ['selected'], [], - [], + ['click'], ); SearchItemShowMore.displayName = 'SearchItemShowMore'; diff --git a/packages/main/src/webComponents/SegmentedButton/index.tsx b/packages/main/src/webComponents/SegmentedButton/index.tsx index bcce083eb8b..5b221910e62 100644 --- a/packages/main/src/webComponents/SegmentedButton/index.tsx +++ b/packages/main/src/webComponents/SegmentedButton/index.tsx @@ -43,6 +43,17 @@ interface SegmentedButtonAttributes { */ accessibleNameRef?: string | undefined; + /** + * Determines whether the segmented button items should be sized to fit their content. + * + * If set to `true`, each item will be sized to fit its content, with any extra space distributed after the last item. + * If set to `false` (the default), all items will be equally sized to fill the available space. + * + * **Note:** Available since [v2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of **@ui5/webcomponents**. + * @default false + */ + itemsFitContent?: boolean; + /** * Defines the component selection mode. * @@ -97,7 +108,7 @@ interface SegmentedButtonPropTypes const SegmentedButton = withWebComponent<SegmentedButtonPropTypes, SegmentedButtonDomRef>( 'ui5-segmented-button', ['accessibleDescription', 'accessibleDescriptionRef', 'accessibleName', 'accessibleNameRef', 'selectionMode'], - [], + ['itemsFitContent'], [], ['selection-change'], ); diff --git a/packages/main/src/webComponents/Select/index.tsx b/packages/main/src/webComponents/Select/index.tsx index a32136eae3e..788394eabe1 100644 --- a/packages/main/src/webComponents/Select/index.tsx +++ b/packages/main/src/webComponents/Select/index.tsx @@ -2,6 +2,7 @@ import '@ui5/webcomponents/dist/Select.js'; import type { IOption, SelectChangeEventDetail, SelectLiveChangeEventDetail } from '@ui5/webcomponents/dist/Select.js'; +import type SelectTextSeparator from '@ui5/webcomponents/dist/types/SelectTextSeparator.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; @@ -69,6 +70,14 @@ interface SelectAttributes { */ required?: boolean; + /** + * Defines the separator type for the two columns layout when Select is in read-only mode. + * + * **Note:** Available since [v2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of **@ui5/webcomponents**. + * @default "Dash" + */ + textSeparator?: SelectTextSeparator | keyof typeof SelectTextSeparator; + /** * Defines the tooltip of the select. * @@ -272,6 +281,7 @@ const Select = withWebComponent<SelectPropTypes, SelectDomRef>( 'accessibleName', 'accessibleNameRef', 'name', + 'textSeparator', 'tooltip', 'value', 'valueState', diff --git a/packages/main/src/webComponents/SideNavigation/index.tsx b/packages/main/src/webComponents/SideNavigation/index.tsx index 5025c3c4cf3..1363a7c1d5c 100644 --- a/packages/main/src/webComponents/SideNavigation/index.tsx +++ b/packages/main/src/webComponents/SideNavigation/index.tsx @@ -17,6 +17,12 @@ interface SideNavigationAttributes { /** * Defines whether the `SideNavigation` is expanded or collapsed. + * + * **Note:** The collapsed mode is not supported on phones. + * The `SideNavigation` component is intended to be used within a `NavigationLayout` + * component to ensure proper responsive behavior. If you choose not to use the + * `NavigationLayout`, you will need to implement the appropriate responsive patterns yourself, + * particularly for phones where the collapsed mode should not be used. * @default false */ collapsed?: boolean; diff --git a/packages/main/src/webComponents/Table/index.tsx b/packages/main/src/webComponents/Table/index.tsx index fb37156f153..a3d3ce6bd33 100644 --- a/packages/main/src/webComponents/Table/index.tsx +++ b/packages/main/src/webComponents/Table/index.tsx @@ -24,6 +24,14 @@ interface TableAttributes { */ accessibleNameRef?: string | undefined; + /** + * Determines whether the table rows are displayed with alternating background colors. + * + * **Note:** Available since [v2.17](https://github.com/UI5/webcomponents/releases/tag/v2.17) of **@ui5/webcomponents**. + * @default false + */ + alternateRowColors?: boolean; + /** * Defines if the loading indicator should be shown. * @@ -199,8 +207,10 @@ interface TablePropTypes * * The following features are currently available: * - * * [TableSelection](../TableSelection) - adds selection capabilities to the table + * * [TableSelectionMulti](../TableSelectionMulti) - adds multi-selection capabilities to the table + * * [TableSelectionSingle](../TableSelectionSingle) - adds single-selection capabilities to the table * * [TableGrowing](../TableGrowing) - provides growing capabilities to load more data + * * [TableVirtualizer](../TableVirtualizer) - adds virtualization capabilities to the table * * ### Keyboard Handling * @@ -224,7 +234,6 @@ interface TablePropTypes * * <kbd>F7</kbd> - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row * * <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table * - * * If the focus is on a cell, the following keyboard shortcuts are available: * * <kbd>Down</kbd> - Navigates down * * <kbd>Up</kbd> - Navigates up @@ -239,13 +248,22 @@ interface TablePropTypes * * <kbd>F7</kbd> - If the focus is on an interactive element inside a row, moves focus to the corresponding row and remembers the focus position of the element within the row * * <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table * - * * If the focus is on an interactive cell content, the following keyboard shortcuts are available: * * <kbd>Down</kbd> - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default * * <kbd>Up</kbd> - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default * * <kbd>[Shift]Tab</kbd> - Move the focus to the element in the tab chain * - * \ + * ### Accessibility + * + * The `Table` follows the [ARIA grid design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/). + * This pattern enables cell-based keyboard navigation and, as explained above, we also support row-based keyboard navigation. + * Since the grid design pattern does not inherently provide row-based keyboard behavior, if the focus is on a row, not only the row information but also the corresponding column headers for each cell must be announced. + * This can only be achieved through a custom accessibility announcement. + * To support this, UI5 Web Components expose its own accessibility metadata via the `accessibilityInfo` property. + * The `Table` uses this information to create the required custom announcements dynamically. + * If you include custom web components inside table cells that are not part of the standard UI5 Web Components set, their accessibility information can be provided using the `data-ui5-table-acc-text` attribute. + * + * )\ * `import "@ui5/webcomponents/dist/TableRow.js";` (`TableRow`)\ * `import "@ui5/webcomponents/dist/TableCell.js";` (`TableCell`)\ * `import "@ui5/webcomponents/dist/TableHeaderRow.js";` (`TableHeaderRow`)\ @@ -258,7 +276,7 @@ interface TablePropTypes const Table = withWebComponent<TablePropTypes, TableDomRef>( 'ui5-table', ['accessibleName', 'accessibleNameRef', 'loadingDelay', 'noDataText', 'overflowMode', 'rowActionCount'], - ['loading'], + ['alternateRowColors', 'loading'], ['features', 'headerRow', 'noData'], ['move-over', 'move', 'row-action-click', 'row-click'], ); diff --git a/packages/main/src/webComponents/TextArea/index.tsx b/packages/main/src/webComponents/TextArea/index.tsx index fa844ba82d1..6a8e735b0b0 100644 --- a/packages/main/src/webComponents/TextArea/index.tsx +++ b/packages/main/src/webComponents/TextArea/index.tsx @@ -7,6 +7,22 @@ import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; interface TextAreaAttributes { + /** + * Defines the accessible description of the component. + * + * **Note:** Available since [v2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleDescription?: string | undefined; + + /** + * Receives id(or many ids) of the elements that describe the textarea. + * + * **Note:** Available since [v2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleDescriptionRef?: string | undefined; + /** * Defines the accessible ARIA name of the component. * @default undefined @@ -197,6 +213,8 @@ interface TextAreaPropTypes const TextArea = withWebComponent<TextAreaPropTypes, TextAreaDomRef>( 'ui5-textarea', [ + 'accessibleDescription', + 'accessibleDescriptionRef', 'accessibleName', 'accessibleNameRef', 'growingMaxRows', diff --git a/packages/main/src/webComponents/UploadCollection/index.tsx b/packages/main/src/webComponents/UploadCollection/index.tsx index 6f69f0179c7..87e232cb840 100644 --- a/packages/main/src/webComponents/UploadCollection/index.tsx +++ b/packages/main/src/webComponents/UploadCollection/index.tsx @@ -1,6 +1,7 @@ 'use client'; import '@ui5/webcomponents-fiori/dist/UploadCollection.js'; +import type TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js'; import type UploadCollectionSelectionMode from '@ui5/webcomponents-fiori/dist/types/UploadCollectionSelectionMode.js'; import type { UploadCollectionItemDeleteEventDetail, @@ -33,6 +34,14 @@ interface UploadCollectionAttributes { */ noDataDescription?: string | undefined; + /** + * Defines the header level of the 'No data' text. + * + * **Note:** Available since [v2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of **@ui5/webcomponents-fiori**. + * @default "H2" + */ + noDataHeaderLevel?: TitleLevel | keyof typeof TitleLevel; + /** * Allows you to set your own text for the 'No data' text. * @default undefined @@ -112,7 +121,7 @@ interface UploadCollectionPropTypes */ const UploadCollection = withWebComponent<UploadCollectionPropTypes, UploadCollectionDomRef>( 'ui5-upload-collection', - ['accessibleName', 'noDataDescription', 'noDataText', 'selectionMode'], + ['accessibleName', 'noDataDescription', 'noDataHeaderLevel', 'noDataText', 'selectionMode'], ['hideDragOverlay'], ['header'], ['item-delete', 'selection-change'], diff --git a/packages/main/src/webComponents/UserMenuAccount/index.tsx b/packages/main/src/webComponents/UserMenuAccount/index.tsx index 564a2fb896e..ef24befd9bd 100644 --- a/packages/main/src/webComponents/UserMenuAccount/index.tsx +++ b/packages/main/src/webComponents/UserMenuAccount/index.tsx @@ -5,6 +5,11 @@ import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface UserMenuAccountAttributes { + /** + * Defines additional information for the user. + */ + additionalInfo?: string; + /** * Defines the avatar initials of the user. * @default undefined @@ -64,7 +69,7 @@ interface UserMenuAccountPropTypes */ const UserMenuAccount = withWebComponent<UserMenuAccountPropTypes, UserMenuAccountDomRef>( 'ui5-user-menu-account', - ['avatarInitials', 'avatarSrc', 'description', 'subtitleText', 'titleText'], + ['additionalInfo', 'avatarInitials', 'avatarSrc', 'description', 'subtitleText', 'titleText'], ['loading', 'selected'], [], [], diff --git a/packages/main/src/webComponents/UserSettingsDialog/UserSettingsDialog.stories.tsx b/packages/main/src/webComponents/UserSettingsDialog/UserSettingsDialog.stories.tsx index 434f9a5d719..d609cadb8fa 100644 --- a/packages/main/src/webComponents/UserSettingsDialog/UserSettingsDialog.stories.tsx +++ b/packages/main/src/webComponents/UserSettingsDialog/UserSettingsDialog.stories.tsx @@ -106,7 +106,7 @@ export const Default: Story = { text="User Account" tooltip="User Account" headerText="User Account" - pages={ + tabs={ <> <UserSettingsView> <Icon name="person-placeholder" /> @@ -166,7 +166,7 @@ export const Default: Story = { text="Language & Region" tooltip="Language & Region" headerText="Language & Region" - pages={ + tabs={ <UserSettingsView> <div className="us-container"> <div className="lr-item"> diff --git a/packages/main/src/webComponents/UserSettingsItem/index.tsx b/packages/main/src/webComponents/UserSettingsItem/index.tsx index 85bf77d85ae..308932a8940 100644 --- a/packages/main/src/webComponents/UserSettingsItem/index.tsx +++ b/packages/main/src/webComponents/UserSettingsItem/index.tsx @@ -67,23 +67,23 @@ interface UserSettingsItemDomRef extends Required<UserSettingsItemAttributes>, U interface UserSettingsItemPropTypes extends UserSettingsItemAttributes, - Omit<CommonProps, keyof UserSettingsItemAttributes | 'children' | 'pages' | 'onSelectionChange'> { + Omit<CommonProps, keyof UserSettingsItemAttributes | 'children' | 'tabs' | 'onSelectionChange'> { /** - * Defines the tab views of the user settings item. + * Defines the page views of the user settings item. + * + * If there are no tab views, the first page view will be shown unless there is selected one. If there is selected page + * view it will be shown no matter if there are tab views. * - * The tab views are displayed by default if there is no selected page view. + * The page views are displayed by default if there is no selected tab view. * * __Supported Node Type/s:__ `Array<UserSettingsView>` */ children?: ReactNode | ReactNode[]; /** - * Defines the page views of the user settings item. - * - * If there are no tab views, the first page view will be shown unless there is selected one. If there is selected page - * view it will be shown no matter if there are tab views. + * Defines the tab views of the user settings item. * - * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="pages"`). + * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="tabs"`). * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. * * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. @@ -91,7 +91,7 @@ interface UserSettingsItemPropTypes * * __Supported Node Type/s:__ `Array<UserSettingsView>` */ - pages?: UI5WCSlotsNode; + tabs?: UI5WCSlotsNode; /** * Fired when a selected view changed. * @@ -123,7 +123,7 @@ const UserSettingsItem = withWebComponent<UserSettingsItemPropTypes, UserSetting 'ui5-user-settings-item', ['accessibleName', 'headerText', 'icon', 'loadingReason', 'text', 'tooltip'], ['disabled', 'loading', 'selected'], - ['pages'], + ['tabs'], ['selection-change'], ); diff --git a/yarn.lock b/yarn.lock index 4a3c4fc50e3..9d80fcbd94e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5426,43 +5426,42 @@ __metadata: dependencies: "@ui5/webcomponents-react-base": "workspace:~" peerDependencies: - "@ui5/webcomponents-ai": ~2.15.0 + "@ui5/webcomponents-ai": ~2.16.1 react: ^18 || ^19 languageName: unknown linkType: soft -"@ui5/webcomponents-ai@npm:2.15.1": - version: 2.15.1 - resolution: "@ui5/webcomponents-ai@npm:2.15.1" +"@ui5/webcomponents-ai@npm:2.16.1": + version: 2.16.1 + resolution: "@ui5/webcomponents-ai@npm:2.16.1" dependencies: - "@ui5/webcomponents": "npm:2.15.1" - "@ui5/webcomponents-base": "npm:2.15.1" - "@ui5/webcomponents-icons": "npm:2.15.1" - "@ui5/webcomponents-theming": "npm:2.15.1" - checksum: 10c0/5776db53e3494e2c322a86860e9a74f982535cd1a616d0e1f54a9e4f7349f4f8a79f305e89e00bfd88d4be9400ff5e5be6b4b4599c7ca97e438a3478de77f211 + "@ui5/webcomponents": "npm:2.16.1" + "@ui5/webcomponents-base": "npm:2.16.1" + "@ui5/webcomponents-icons": "npm:2.16.1" + "@ui5/webcomponents-theming": "npm:2.16.1" + checksum: 10c0/7c64b32a751400a98002d32316f68149d1c2d2b3224084df80809c79224ec20ee2d84fc1e9d9e9ec30839a0504942a23356a6f383eb562cac6661b7d6a1dda07 languageName: node linkType: hard -"@ui5/webcomponents-base@npm:2.15.1": - version: 2.15.1 - resolution: "@ui5/webcomponents-base@npm:2.15.1" +"@ui5/webcomponents-base@npm:2.16.1": + version: 2.16.1 + resolution: "@ui5/webcomponents-base@npm:2.16.1" dependencies: "@lit-labs/ssr-dom-shim": "npm:^1.1.2" - chokidar-cli: "npm:^3.0.0" lit-html: "npm:^2.0.1" - checksum: 10c0/26ab42348375c1bc7de312fdf9ad798d34bd8b0625ed13df2e5287c873d2e270f50946acb78b6b49f2522ea30bf0972337cd30467f47e4909092b1d314b1e5ee + checksum: 10c0/e206c005fef7af3dea53f81271c2749b4d31bf4156283fa55ac0c7039232455b77deeed8a07769eafabc36df2264989baae3b1ed1279ce03d7c6238bf23bf3dd languageName: node linkType: hard -"@ui5/webcomponents-compat@npm:2.15.1": - version: 2.15.1 - resolution: "@ui5/webcomponents-compat@npm:2.15.1" +"@ui5/webcomponents-compat@npm:2.16.1": + version: 2.16.1 + resolution: "@ui5/webcomponents-compat@npm:2.16.1" dependencies: - "@ui5/webcomponents": "npm:2.15.1" - "@ui5/webcomponents-base": "npm:2.15.1" - "@ui5/webcomponents-icons": "npm:2.15.1" - "@ui5/webcomponents-theming": "npm:2.15.1" - checksum: 10c0/21b6d33cda72ef75319b44a8e059ae0adf13cfa00e4adb193186973b3c4fab40af751cfaa7ad2f5e3c27f5fb43a7a95ba8ebe4715f354b40637524a79a8abf03 + "@ui5/webcomponents": "npm:2.16.1" + "@ui5/webcomponents-base": "npm:2.16.1" + "@ui5/webcomponents-icons": "npm:2.16.1" + "@ui5/webcomponents-theming": "npm:2.16.1" + checksum: 10c0/3a022f44a5ac69304d502c351f5f50629dc5810d0c5e3ae7b404a179e9a4ed53abc66f53c40f2ad944c8397b4eb96e1ec7d1fa37d01e70d2b03b81e2837f3fb3 languageName: node linkType: hard @@ -5470,8 +5469,8 @@ __metadata: version: 0.0.0-use.local resolution: "@ui5/webcomponents-cypress-commands@workspace:packages/cypress-commands" peerDependencies: - "@ui5/webcomponents": ~2.15.0 - "@ui5/webcomponents-base": ~2.15.0 + "@ui5/webcomponents": ~2.16.1 + "@ui5/webcomponents-base": ~2.16.1 cypress: ^12 || ^13 || ^14 || ^15 peerDependenciesMeta: "@ui5/webcomponents": @@ -5481,53 +5480,53 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-fiori@npm:2.15.1": - version: 2.15.1 - resolution: "@ui5/webcomponents-fiori@npm:2.15.1" +"@ui5/webcomponents-fiori@npm:2.16.1": + version: 2.16.1 + resolution: "@ui5/webcomponents-fiori@npm:2.16.1" dependencies: - "@ui5/webcomponents": "npm:2.15.1" - "@ui5/webcomponents-base": "npm:2.15.1" - "@ui5/webcomponents-icons": "npm:2.15.1" - "@ui5/webcomponents-theming": "npm:2.15.1" + "@ui5/webcomponents": "npm:2.16.1" + "@ui5/webcomponents-base": "npm:2.16.1" + "@ui5/webcomponents-icons": "npm:2.16.1" + "@ui5/webcomponents-theming": "npm:2.16.1" "@zxing/library": "npm:^0.21.3" - checksum: 10c0/d875b84f3e691e39f9a287dfa83be10c8c84087d6debbaa4a84b813aa8dcf73cb99fc331fc1c595ab68db9417c2c707f36cdd8348177bd0555e86b5aa255d1b2 + checksum: 10c0/06a119201fa883f8985a4eec3c9288281e5d5ed6907896518e4c8fe45af25427ced47b6409c6f5da4bcd52cda2ab72b0306a945d3f371f687da1e5b2008ebfed languageName: node linkType: hard -"@ui5/webcomponents-icons-business-suite@npm:2.15.1": - version: 2.15.1 - resolution: "@ui5/webcomponents-icons-business-suite@npm:2.15.1" +"@ui5/webcomponents-icons-business-suite@npm:2.16.1": + version: 2.16.1 + resolution: "@ui5/webcomponents-icons-business-suite@npm:2.16.1" dependencies: - "@ui5/webcomponents-base": "npm:2.15.1" - checksum: 10c0/0c4613b18eb706150497e2f8e7c6fc75f0b6b828e37ed6f2ae96b98dff102507e73d9d3b209269f0c2d696e6c411252c26ed964d565ccef460c5c4da3c8d25ff + "@ui5/webcomponents-base": "npm:2.16.1" + checksum: 10c0/8095db058743f53fc3fceb583842bc614deae5d070953f57c2ae3923ad9ad2b5653add51e4dd579e515f103874755a5c8850089e6a8c9e3ed6fd911640d71e9c languageName: node linkType: hard -"@ui5/webcomponents-icons-tnt@npm:2.15.1": - version: 2.15.1 - resolution: "@ui5/webcomponents-icons-tnt@npm:2.15.1" +"@ui5/webcomponents-icons-tnt@npm:2.16.1": + version: 2.16.1 + resolution: "@ui5/webcomponents-icons-tnt@npm:2.16.1" dependencies: - "@ui5/webcomponents-base": "npm:2.15.1" - checksum: 10c0/b851d852670862896aa46027a716f07bd612fef33752f9b3116a7a4769c38e8982f5f1ff9ed1190668a64d8a662204c14db7b634edfa11270d5a76ce833c305f + "@ui5/webcomponents-base": "npm:2.16.1" + checksum: 10c0/f6ee5893d5e3533b9b633897b3ac2067d2b744c6b89f11a6380c8c22d9af4b84c3c10bb5ffdc15aaad2f933acb8ea4af7448ada9093fd31f853debbbce455d5b languageName: node linkType: hard -"@ui5/webcomponents-icons@npm:2.15.1": - version: 2.15.1 - resolution: "@ui5/webcomponents-icons@npm:2.15.1" +"@ui5/webcomponents-icons@npm:2.16.1": + version: 2.16.1 + resolution: "@ui5/webcomponents-icons@npm:2.16.1" dependencies: - "@ui5/webcomponents-base": "npm:2.15.1" - checksum: 10c0/cdca04ff1cee0204988b52df94584a17693d68aab41ba6a8d89b7ea773c7ee0c51a3d177a0664cb1189c686b2863b02704527848c492a82845bf400b63a5863c + "@ui5/webcomponents-base": "npm:2.16.1" + checksum: 10c0/ef76bc9fc80b580edb2bdc7da000dde21b7b7d35d1e4976a4344192c164fdf627ce589b0121092c750ce9201e4580595a7dc79a7c529dc3f910c3d0f6163d8bb languageName: node linkType: hard -"@ui5/webcomponents-localization@npm:2.15.1": - version: 2.15.1 - resolution: "@ui5/webcomponents-localization@npm:2.15.1" +"@ui5/webcomponents-localization@npm:2.16.1": + version: 2.16.1 + resolution: "@ui5/webcomponents-localization@npm:2.16.1" dependencies: "@types/openui5": "npm:^1.113.0" - "@ui5/webcomponents-base": "npm:2.15.1" - checksum: 10c0/0a8bf01f9b496dd1132b205e0acffc72b21df0d8d81dd19becb27414eb0f38d069ea52562ccbc5d9fe742bf327d6f0c3fb73b5e9dc53caa866aae08d104ccd0b + "@ui5/webcomponents-base": "npm:2.16.1" + checksum: 10c0/881e232c55c0991368cd81e60d941f6d70b44e062153ab5887a34c85e8dc84afc14df2432b9d5e8dafc617c1eba951f8220afd442b2b9e6fc81aa274f536c0d4 languageName: node linkType: hard @@ -5536,7 +5535,7 @@ __metadata: resolution: "@ui5/webcomponents-react-base@workspace:packages/base" peerDependencies: "@types/react": "*" - "@ui5/webcomponents-base": ~2.15.0 + "@ui5/webcomponents-base": ~2.16.1 react: ^18 || ^19 peerDependenciesMeta: "@types/react": @@ -5554,8 +5553,8 @@ __metadata: react-content-loader: "npm:7.1.1" recharts: "npm:2.15.4" peerDependencies: - "@ui5/webcomponents-react": ~2.15.0 - "@ui5/webcomponents-react-base": ~2.15.0 + "@ui5/webcomponents-react": ~2.16.0 + "@ui5/webcomponents-react-base": ~2.16.0 react: ^18 || ^19 languageName: unknown linkType: soft @@ -5580,8 +5579,8 @@ __metadata: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@ui5/webcomponents-compat": ~2.15.0 - "@ui5/webcomponents-react": ~2.15.0 + "@ui5/webcomponents-compat": ~2.16.1 + "@ui5/webcomponents-react": ~2.16.0 react: ^18 || ^19 react-dom: ^18 || ^19 peerDependenciesMeta: @@ -5607,10 +5606,10 @@ __metadata: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@ui5/webcomponents": ~2.15.0 - "@ui5/webcomponents-base": ~2.15.0 - "@ui5/webcomponents-fiori": ~2.15.0 - "@ui5/webcomponents-icons": ~2.15.0 + "@ui5/webcomponents": ~2.16.1 + "@ui5/webcomponents-base": ~2.16.1 + "@ui5/webcomponents-fiori": ~2.16.1 + "@ui5/webcomponents-icons": ~2.16.1 react: ^18 || ^19 react-dom: ^18 || ^19 peerDependenciesMeta: @@ -5627,19 +5626,19 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-theming@npm:2.15.1": - version: 2.15.1 - resolution: "@ui5/webcomponents-theming@npm:2.15.1" +"@ui5/webcomponents-theming@npm:2.16.1": + version: 2.16.1 + resolution: "@ui5/webcomponents-theming@npm:2.16.1" dependencies: "@sap-theming/theming-base-content": "npm:11.29.3" - "@ui5/webcomponents-base": "npm:2.15.1" - checksum: 10c0/ca4d0e73a7bab66a56bc0555d74bf1554ba0c6aca0dde8b9c320171b50f90ade301afc15d0619e97e0f808651891357e6a383b10f9237225c4736e006c5c13c2 + "@ui5/webcomponents-base": "npm:2.16.1" + checksum: 10c0/647702822cace50a8dfc458a84e28dd9edaf2622c0ff6893fd69ccae97b12d372270fbd296cefd0aaf1ae92ff4fd4c68b1116a87521188be6fc8253190eef33b languageName: node linkType: hard -"@ui5/webcomponents-tools@npm:2.15.1": - version: 2.15.1 - resolution: "@ui5/webcomponents-tools@npm:2.15.1" +"@ui5/webcomponents-tools@npm:2.16.1": + version: 2.16.1 + resolution: "@ui5/webcomponents-tools@npm:2.16.1" dependencies: "@custom-elements-manifest/analyzer": "npm:^0.10.10" "@typescript-eslint/eslint-plugin": "npm:^6.9.0" @@ -5698,21 +5697,21 @@ __metadata: ui5nps: bin/ui5nps.js wc-create-ui5-element: bin/create-ui5-element.js wc-dev: bin/dev.js - checksum: 10c0/7076bc24dc761236e1620a5cd376385107d26ff34bb861cf5f873f91feb05f32d084ef3d728772ca47da6c788c0fe8bd372c12d96c4d9b333d51f3a2ae130c1e + checksum: 10c0/a0acd17c558e0e68396abc110f94c4844e6fc9615f2579473c433df8c41b21d021c1bc5093ddd5a31fc7d8346c83da7ccc82b010b738cdf7f7cc7c9d3a3b3c33 languageName: node linkType: hard -"@ui5/webcomponents@npm:2.15.1": - version: 2.15.1 - resolution: "@ui5/webcomponents@npm:2.15.1" +"@ui5/webcomponents@npm:2.16.1": + version: 2.16.1 + resolution: "@ui5/webcomponents@npm:2.16.1" dependencies: - "@ui5/webcomponents-base": "npm:2.15.1" - "@ui5/webcomponents-icons": "npm:2.15.1" - "@ui5/webcomponents-icons-business-suite": "npm:2.15.1" - "@ui5/webcomponents-icons-tnt": "npm:2.15.1" - "@ui5/webcomponents-localization": "npm:2.15.1" - "@ui5/webcomponents-theming": "npm:2.15.1" - checksum: 10c0/3c187ed57d6e4cfe40d6973c15e12a1e96007b870cf535364b225913436473ebd3f93b2502745255b4790e0bc5702b007670ab5778a2dc84207005dd8db3e777 + "@ui5/webcomponents-base": "npm:2.16.1" + "@ui5/webcomponents-icons": "npm:2.16.1" + "@ui5/webcomponents-icons-business-suite": "npm:2.16.1" + "@ui5/webcomponents-icons-tnt": "npm:2.16.1" + "@ui5/webcomponents-localization": "npm:2.16.1" + "@ui5/webcomponents-theming": "npm:2.16.1" + checksum: 10c0/f23d486a009349a24a157a9703f298e0d1fb2f4d6b1bb2cef9d66c094006240a2fd12e7e2c9c2c6edaa8613442ed81ac01179764f8e367dc36b65db46334d9d7 languageName: node linkType: hard @@ -20899,12 +20898,12 @@ __metadata: "@types/node": "npm:24.9.2" "@types/react": "npm:19.1.17" "@types/react-dom": "npm:19.1.11" - "@ui5/webcomponents": "npm:2.15.1" - "@ui5/webcomponents-ai": "npm:2.15.1" - "@ui5/webcomponents-compat": "npm:2.15.1" - "@ui5/webcomponents-fiori": "npm:2.15.1" - "@ui5/webcomponents-icons": "npm:2.15.1" - "@ui5/webcomponents-tools": "npm:2.15.1" + "@ui5/webcomponents": "npm:2.16.1" + "@ui5/webcomponents-ai": "npm:2.16.1" + "@ui5/webcomponents-compat": "npm:2.16.1" + "@ui5/webcomponents-fiori": "npm:2.16.1" + "@ui5/webcomponents-icons": "npm:2.16.1" + "@ui5/webcomponents-tools": "npm:2.16.1" "@vitejs/plugin-react": "npm:5.0.4" chromatic: "npm:13.2.1" cssnano: "npm:7.1.2"