\n`ui5-avatar:not(:defined) {`
\n `visibility: hidden;`
\n`}`" } ], "events": [ { "name": "click", "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`." } ], "js": { "properties": [ { "name": "accessibility-attributes", "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`.", "value": { "type": "AvatarAccessibilityAttributes" } }, { "name": "accessible-name", "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.", "value": { "type": "string | undefined" } }, { "name": "color-scheme", "description": "Defines the background color of the desired image.\nIf `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.", "value": { "type": "\"Auto\" | \"Accent1\" | \"Accent2\" | \"Accent3\" | \"Accent4\" | \"Accent5\" | \"Accent6\" | \"Accent7\" | \"Accent8\" | \"Accent9\" | \"Accent10\" | \"Placeholder\" | \"Transparent\"" } }, { "name": "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.", "value": { "type": "boolean" } }, { "name": "fallback-icon", "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`
ButtonAccessibleRole.Link role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.",
"value": {
"type": "\"Button\" | \"Link\"",
"default": "\"Button\""
}
},
{
"name": "design",
"description": "Defines the component design.",
"value": {
"type": "\"Transparent\" | \"Positive\" | \"Negative\" | \"Default\" | \"Emphasized\" | \"Attention\"",
"default": "\"Default\""
}
},
{
"name": "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.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "end-icon",
"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).",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "form",
"description": "Associates the button with a form element by the form's `id` attribute.\nWhen set, the button can submit or reset the specified form even if the button\nis not a descendant of that form.\n\n**Note:** This property takes effect only when the button's \"type\" property is set to \"Submit\" or \"Reset\".",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "icon",
"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).",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "loading",
"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.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "loading-delay",
"description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.",
"value": { "type": "number", "default": "1000" }
},
{
"name": "submits",
"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.`",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "tooltip",
"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.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "type",
"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.",
"value": {
"type": "\"Button\" | \"Submit\" | \"Reset\"",
"default": "\"Button\""
}
}
],
"slots": [
{ "name": "badge", "description": "Adds a badge to the button." },
{
"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."
}
],
"events": [
{
"name": "click",
"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`."
}
],
"js": {
"properties": [
{
"name": "accessibility-attributes",
"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.",
"value": { "type": "ButtonAccessibilityAttributes" }
},
{
"name": "accessible-description",
"description": "Defines the accessible description of the component.",
"value": { "type": "string | undefined" }
},
{
"name": "accessible-name",
"description": "Defines the accessible ARIA name of the component.",
"value": { "type": "string | undefined" }
},
{
"name": "accessible-name-ref",
"description": "Receives id(or many ids) of the elements that label the component.",
"value": { "type": "string | undefined" }
},
{
"name": "accessible-role",
"description": "Describes the accessibility role of the button.\n\n**Note:** Use ButtonAccessibleRole.Link role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.",
"value": { "type": "\"Button\" | \"Link\"" }
},
{
"name": "design",
"description": "Defines the component design.",
"value": {
"type": "\"Transparent\" | \"Positive\" | \"Negative\" | \"Default\" | \"Emphasized\" | \"Attention\""
}
},
{
"name": "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.",
"value": { "type": "boolean" }
},
{
"name": "end-icon",
"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).",
"value": { "type": "string | undefined" }
},
{
"name": "form",
"description": "Associates the button with a form element by the form's `id` attribute.\nWhen set, the button can submit or reset the specified form even if the button\nis not a descendant of that form.\n\n**Note:** This property takes effect only when the button's \"type\" property is set to \"Submit\" or \"Reset\".",
"value": { "type": "string | undefined" }
},
{
"name": "icon",
"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).",
"value": { "type": "string | undefined" }
},
{
"name": "loading",
"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.",
"value": { "type": "boolean" }
},
{
"name": "loading-delay",
"description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.",
"value": { "type": "number" }
},
{
"name": "submits",
"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.`",
"value": { "type": "boolean" }
},
{
"name": "tooltip",
"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.",
"value": { "type": "string | undefined" }
},
{
"name": "type",
"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.",
"value": { "type": "\"Button\" | \"Submit\" | \"Reset\"" }
}
],
"events": [
{
"name": "click",
"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`."
}
]
}
},
{
"name": "ui5-button-badge",
"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\";`\n---\n",
"doc-url": "",
"attributes": [
{
"name": "design",
"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.",
"value": {
"type": "\"InlineText\" | \"OverlayText\" | \"AttentionDot\"",
"default": "\"AttentionDot\""
}
},
{
"name": "text",
"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.",
"value": { "type": "string", "default": "\"\"" }
}
],
"events": [],
"js": {
"properties": [
{
"name": "design",
"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.",
"value": {
"type": "\"InlineText\" | \"OverlayText\" | \"AttentionDot\""
}
},
{
"name": "text",
"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.",
"value": { "type": "string" }
}
],
"events": []
}
},
{
"name": "ui5-calendar",
"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\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Calendar.js\";`\n---\n\n\n### **Events:**\n - **selection-change** - 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.\n\n### **Slots:**\n - **calendarLegend** - Defines the calendar legend of the component.\n- **default** - 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.\n- **disabledDates** - Defines the disabled date ranges that cannot be selected in the calendar.\nUse `ui5-date-range` elements to specify ranges of disabled dates.\nEach range can define a start date, an end date, or both.\n- **specialDates** - Defines the special dates, visually emphasized in the calendar.\n\n### **CSS Parts:**\n - **calendar-header-arrow-button** - Used to style the calendar header navigation arrow buttons (previous/next buttons).\n- **calendar-header-middle-button** - Used to style the calendar header middle buttons (month/year/year-range buttons).\n- **day-cell** - Used to style the day cells.\n- **day-cell-selected** - Used to style the day cells when selected.\n- **day-cell-selected-between** - Used to style the day cells in between of selected dates in range.\n- **month-cell** - Used to style the month cells.\n- **month-cell-selected** - Used to style the month cells when selected.\n- **month-cell-selected-between** - Used to style the day cells in between of selected months in range.\n- **month-picker-root** - Used to style the month picker root container.\n- **year-cell** - Used to style the year cells.\n- **year-cell-selected** - Used to style the year cells when selected.\n- **year-cell-selected-between** - Used to style the year cells in between of selected years in range.\n- **year-picker-root** - Used to style the year picker root container.\n- **year-range-cell** - Used to style the year range cells.\n- **year-range-cell-selected** - Used to style the year range cells when selected.\n- **year-range-cell-selected-between** - Used to style the year range cells in between of selected year ranges.\n- **year-range-picker-root** - Used to style the year range picker root container.",
"doc-url": "",
"attributes": [
{
"name": "calendar-week-numbering",
"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.",
"value": {
"type": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"",
"default": "\"Default\""
}
},
{
"name": "display-format",
"description": "Determines the format, displayed in the input field.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "format-pattern",
"description": "Determines the format, displayed in the input field.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "hide-week-numbers",
"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.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "max-date",
"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).",
"value": { "type": "string", "default": "\"\"" }
},
{
"name": "min-date",
"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).",
"value": { "type": "string", "default": "\"\"" }
},
{
"name": "primary-calendar-type",
"description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.",
"value": {
"type": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined",
"default": "undefined"
}
},
{
"name": "secondary-calendar-type",
"description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.",
"value": {
"type": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined",
"default": "undefined"
}
},
{
"name": "selection-mode",
"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.",
"value": {
"type": "\"Single\" | \"Multiple\" | \"Range\"",
"default": "\"Single\""
}
},
{
"name": "value-format",
"description": "Determines the format, used for the value attribute.",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"slots": [
{
"name": "calendarLegend",
"description": "Defines the calendar legend of the component."
},
{
"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."
},
{
"name": "disabledDates",
"description": "Defines the disabled date ranges that cannot be selected in the calendar.\nUse `ui5-date-range` elements to specify ranges of disabled dates.\nEach range can define a start date, an end date, or both."
},
{
"name": "specialDates",
"description": "Defines the special dates, visually emphasized in the calendar."
}
],
"events": [
{
"name": "selection-change",
"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."
}
],
"js": {
"properties": [
{
"name": "calendar-week-numbering",
"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.",
"value": {
"type": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\""
}
},
{
"name": "display-format",
"description": "Determines the format, displayed in the input field.",
"value": { "type": "string | undefined" }
},
{
"name": "format-pattern",
"description": "Determines the format, displayed in the input field.",
"value": { "type": "string | undefined" }
},
{
"name": "hide-week-numbers",
"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.",
"value": { "type": "boolean" }
},
{
"name": "max-date",
"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).",
"value": { "type": "string" }
},
{
"name": "min-date",
"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).",
"value": { "type": "string" }
},
{
"name": "primary-calendar-type",
"description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.",
"value": {
"type": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined"
}
},
{
"name": "secondary-calendar-type",
"description": "Defines the secondary calendar type.\nIf not set, the calendar will only show the primary calendar type.",
"value": {
"type": "\"Gregorian\" | \"Islamic\" | \"Japanese\" | \"Buddhist\" | \"Persian\" | undefined"
}
},
{
"name": "selection-mode",
"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.",
"value": { "type": "\"Single\" | \"Multiple\" | \"Range\"" }
},
{
"name": "value-format",
"description": "Determines the format, used for the value attribute.",
"value": { "type": "string | undefined" }
}
],
"events": [
{
"name": "selection-change",
"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."
}
]
}
},
{
"name": "ui5-date",
"description": "### Overview\n\nThe `ui5-date` component defines a calendar date to be used inside `ui5-calendar`\n---\n",
"doc-url": "",
"attributes": [
{
"name": "value",
"description": "The date formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.",
"value": { "type": "string", "default": "\"\"" }
}
],
"events": [],
"js": {
"properties": [
{
"name": "value",
"description": "The date formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.",
"value": { "type": "string" }
}
],
"events": []
}
},
{
"name": "ui5-date-range",
"description": "### Overview\n\nThe `ui5-date-range` component defines a range of dates to be used inside `ui5-calendar`\n---\n",
"doc-url": "",
"attributes": [
{
"name": "end-value",
"description": "End of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.",
"value": { "type": "string", "default": "\"\"" }
},
{
"name": "start-value",
"description": "Start of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.",
"value": { "type": "string", "default": "\"\"" }
}
],
"events": [],
"js": {
"properties": [
{
"name": "end-value",
"description": "End of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.",
"value": { "type": "string" }
},
{
"name": "start-value",
"description": "Start of date range formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.",
"value": { "type": "string" }
}
],
"events": []
}
},
{
"name": "ui5-calendar-legend",
"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\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the items of the component.",
"doc-url": "",
"attributes": [
{
"name": "hide-non-working-day",
"description": "Hides the Non-Working day item in the legend.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "hide-selected-day",
"description": "Hides the Selected day item in the legend.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "hide-today",
"description": "Hides the Today item in the legend.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "hide-working-day",
"description": "Hides the Working day item in the legend.",
"value": { "type": "boolean", "default": "false" }
}
],
"slots": [
{
"name": "default",
"description": "Defines the items of the component."
}
],
"events": [],
"js": {
"properties": [
{
"name": "hide-non-working-day",
"description": "Hides the Non-Working day item in the legend.",
"value": { "type": "boolean" }
},
{
"name": "hide-selected-day",
"description": "Hides the Selected day item in the legend.",
"value": { "type": "boolean" }
},
{
"name": "hide-today",
"description": "Hides the Today item in the legend.",
"value": { "type": "boolean" }
},
{
"name": "hide-working-day",
"description": "Hides the Working day item in the legend.",
"value": { "type": "boolean" }
}
],
"events": []
}
},
{
"name": "ui5-calendar-legend-item",
"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\";`\n---\n",
"doc-url": "",
"attributes": [
{
"name": "text",
"description": "Defines the text content of the Calendar Legend Item.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "type",
"description": "Defines the type of the Calendar Legend Item.",
"value": {
"type": "\"None\" | \"Today\" | \"Selected\" | \"Working\" | \"NonWorking\" | \"Type01\" | \"Type02\" | \"Type03\" | \"Type04\" | \"Type05\" | \"Type06\" | \"Type07\" | \"Type08\" | \"Type09\" | \"Type10\" | \"Type11\" | ... 8 more ... | \"Type20\"",
"default": "\"None\""
}
}
],
"events": [],
"js": {
"properties": [
{
"name": "text",
"description": "Defines the text content of the Calendar Legend Item.",
"value": { "type": "string | undefined" }
},
{
"name": "type",
"description": "Defines the type of the Calendar Legend Item.",
"value": {
"type": "\"None\" | \"Today\" | \"Selected\" | \"Working\" | \"NonWorking\" | \"Type01\" | \"Type02\" | \"Type03\" | \"Type04\" | \"Type05\" | \"Type06\" | \"Type07\" | \"Type08\" | \"Type09\" | \"Type10\" | \"Type11\" | ... 8 more ... | \"Type20\""
}
}
],
"events": []
}
},
{
"name": "ui5-card",
"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`)\n---\n\n\n### **Slots:**\n - **default** - Defines the content of the component.\n- **header** - Defines the header of the component.\n\n**Note:** Use `ui5-card-header` for the intended design.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the card\n- **root** - Used to style the root DOM element of the card component",
"doc-url": "",
"attributes": [
{
"name": "accessible-name",
"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.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "accessible-name-ref",
"description": "Defines the IDs of the elements that label the component.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "loading",
"description": "Defines if a loading indicator would be displayed over the card.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "loading-delay",
"description": "Defines the delay in milliseconds, after which the loading indicator will show up for this card.",
"value": { "type": "number", "default": "1000" }
}
],
"slots": [
{
"name": "default",
"description": "Defines the content of the component."
},
{
"name": "header",
"description": "Defines the header of the component.\n\n**Note:** Use `ui5-card-header` for the intended design."
}
],
"events": [],
"js": {
"properties": [
{
"name": "accessible-name",
"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.",
"value": { "type": "string | undefined" }
},
{
"name": "accessible-name-ref",
"description": "Defines the IDs of the elements that label the component.",
"value": { "type": "string | undefined" }
},
{
"name": "loading",
"description": "Defines if a loading indicator would be displayed over the card.",
"value": { "type": "boolean" }
},
{
"name": "loading-delay",
"description": "Defines the delay in milliseconds, after which the loading indicator will show up for this card.",
"value": { "type": "number" }
}
],
"events": []
}
},
{
"name": "ui5-card-header",
"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\";`\n---\n\n\n### **Events:**\n - **click** - 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.\n\n### **Slots:**\n - **action** - Defines an action, displayed in the right most part of the header.\n- **avatar** - Defines an avatar image, displayed in the left most part of the header.\n\n### **CSS Parts:**\n - **additional-text** - Used to style the additional text of the CardHeader\n- **root** - Used to style the root DOM element of the CardHeader\n- **subtitle** - Used to style the subtitle of the CardHeader\n- **title** - Used to style the title of the CardHeader",
"doc-url": "",
"attributes": [
{
"name": "additional-text",
"description": "Defines the additional text.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "interactive",
"description": "Defines if the component would be interactive,\ne.g gets hover effect and `click` event is fired, when pressed.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "subtitle-text",
"description": "Defines the subtitle text.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "title-text",
"description": "Defines the title text.",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"slots": [
{
"name": "action",
"description": "Defines an action, displayed in the right most part of the header."
},
{
"name": "avatar",
"description": "Defines an avatar image, displayed in the left most part of the header."
}
],
"events": [
{
"name": "click",
"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."
}
],
"js": {
"properties": [
{
"name": "additional-text",
"description": "Defines the additional text.",
"value": { "type": "string | undefined" }
},
{
"name": "interactive",
"description": "Defines if the component would be interactive,\ne.g gets hover effect and `click` event is fired, when pressed.",
"value": { "type": "boolean" }
},
{
"name": "subtitle-text",
"description": "Defines the subtitle text.",
"value": { "type": "string | undefined" }
},
{
"name": "title-text",
"description": "Defines the title text.",
"value": { "type": "string | undefined" }
}
],
"events": [
{
"name": "click",
"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."
}
]
}
},
{
"name": "ui5-carousel",
"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\";`\n---\n\n\n### **Events:**\n - **navigate** - 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.\n\n### **Methods:**\n - **navigateTo(itemIndex: _number_): _void_** - Changes the currently displayed page.\n\n### **Slots:**\n - **default** - 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).\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component",
"doc-url": "",
"attributes": [
{
"name": "accessible-name",
"description": "Defines the accessible name of the component.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "accessible-name-ref",
"description": "Defines the IDs of the elements that label the input.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "arrows-placement",
"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.",
"value": {
"type": "\"Content\" | \"Navigation\"",
"default": "\"Content\""
}
},
{
"name": "background-design",
"description": "Defines the carousel's background design.",
"value": {
"type": "\"Transparent\" | \"Solid\" | \"Translucent\"",
"default": "\"Translucent\""
}
},
{
"name": "cyclic",
"description": "Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "hide-navigation-arrows",
"description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "hide-page-indicator",
"description": "Defines the visibility of the page indicator.\nIf set to true the page indicator will be hidden.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "items-per-page",
"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.",
"value": { "type": "string", "default": "\"S1 M1 L1 XL1\"" }
},
{
"name": "page-indicator-background-design",
"description": "Defines the page indicator background design.",
"value": {
"type": "\"Transparent\" | \"Solid\" | \"Translucent\"",
"default": "\"Solid\""
}
},
{
"name": "page-indicator-border-design",
"description": "Defines the page indicator border design.",
"value": {
"type": "\"None\" | \"Solid\"",
"default": "\"Solid\""
}
},
{
"name": "page-indicator-type",
"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)",
"value": {
"type": "\"Default\" | \"Numeric\"",
"default": "\"Default\""
}
},
{
"name": "visible-items-indices",
"description": "The indices of the currently visible items of the component.",
"value": { "type": "any", "default": "[]" }
}
],
"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)."
}
],
"events": [
{
"name": "navigate",
"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."
}
],
"js": {
"properties": [
{
"name": "accessible-name",
"description": "Defines the accessible name of the component.",
"value": { "type": "string | undefined" }
},
{
"name": "accessible-name-ref",
"description": "Defines the IDs of the elements that label the input.",
"value": { "type": "string | undefined" }
},
{
"name": "arrows-placement",
"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.",
"value": { "type": "\"Content\" | \"Navigation\"" }
},
{
"name": "background-design",
"description": "Defines the carousel's background design.",
"value": {
"type": "\"Transparent\" | \"Solid\" | \"Translucent\""
}
},
{
"name": "cyclic",
"description": "Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.",
"value": { "type": "boolean" }
},
{
"name": "hide-navigation-arrows",
"description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.",
"value": { "type": "boolean" }
},
{
"name": "hide-page-indicator",
"description": "Defines the visibility of the page indicator.\nIf set to true the page indicator will be hidden.",
"value": { "type": "boolean" }
},
{
"name": "items-per-page",
"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.",
"value": { "type": "string" }
},
{
"name": "page-indicator-background-design",
"description": "Defines the page indicator background design.",
"value": {
"type": "\"Transparent\" | \"Solid\" | \"Translucent\""
}
},
{
"name": "page-indicator-border-design",
"description": "Defines the page indicator border design.",
"value": { "type": "\"None\" | \"Solid\"" }
},
{
"name": "page-indicator-type",
"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)",
"value": { "type": "\"Default\" | \"Numeric\"" }
},
{
"name": "visible-items-indices",
"description": "The indices of the currently visible items of the component.",
"value": { "type": "any" }
}
],
"events": [
{
"name": "navigate",
"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."
}
]
}
},
{
"name": "ui5-checkbox",
"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\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the component checked state changes.\n\n### **CSS Parts:**\n - **icon** - Used to style the icon of the `ui5-checkbox`\n- **label** - Used to style the label of the `ui5-checkbox`\n- **root** - Used to style the outermost wrapper of the `ui5-checkbox`",
"doc-url": "",
"attributes": [
{
"name": "accessible-name",
"description": "Defines the accessible ARIA name of the component.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "accessible-name-ref",
"description": "Receives id(or many ids) of the elements that label the component",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "checked",
"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.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "disabled",
"description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "display-only",
"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.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "indeterminate",
"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",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "name",
"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.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "readonly",
"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.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "required",
"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.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "text",
"description": "Defines the text of the component.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "value",
"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.",
"value": { "type": "string", "default": "\"on\"" }
},
{
"name": "value-state",
"description": "Defines the value state of the component.",
"value": {
"type": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"",
"default": "\"None\""
}
},
{
"name": "wrapping-type",
"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.",
"value": {
"type": "\"None\" | \"Normal\"",
"default": "\"Normal\""
}
}
],
"events": [
{
"name": "change",
"description": "Fired when the component checked state changes."
}
],
"js": {
"properties": [
{
"name": "accessible-name",
"description": "Defines the accessible ARIA name of the component.",
"value": { "type": "string | undefined" }
},
{
"name": "accessible-name-ref",
"description": "Receives id(or many ids) of the elements that label the component",
"value": { "type": "string | undefined" }
},
{
"name": "checked",
"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.",
"value": { "type": "boolean" }
},
{
"name": "disabled",
"description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.",
"value": { "type": "boolean" }
},
{
"name": "display-only",
"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.",
"value": { "type": "boolean" }
},
{
"name": "indeterminate",
"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",
"value": { "type": "boolean" }
},
{
"name": "name",
"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.",
"value": { "type": "string | undefined" }
},
{
"name": "readonly",
"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.",
"value": { "type": "boolean" }
},
{
"name": "required",
"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.",
"value": { "type": "boolean" }
},
{
"name": "text",
"description": "Defines the text of the component.",
"value": { "type": "string | undefined" }
},
{
"name": "value",
"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.",
"value": { "type": "string" }
},
{
"name": "value-state",
"description": "Defines the value state of the component.",
"value": {
"type": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\""
}
},
{
"name": "wrapping-type",
"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.",
"value": { "type": "\"None\" | \"Normal\"" }
}
],
"events": [
{
"name": "change",
"description": "Fired when the component checked state changes."
}
]
}
},
{
"name": "ui5-color-palette",
"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\";`\n---\n\n\n### **Events:**\n - **item-click** - Fired when the user selects a color.\n\n### **Slots:**\n - **default** - Defines the `ui5-color-palette-item` elements.",
"doc-url": "",
"attributes": [
{
"name": "accessible-name",
"description": "Defines the accessible name of the component.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "accessible-name-ref",
"description": "Receives id(or many ids) of the elements that label the component.",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"slots": [
{
"name": "default",
"description": "Defines the `ui5-color-palette-item` elements."
}
],
"events": [
{
"name": "item-click",
"description": "Fired when the user selects a color."
}
],
"js": {
"properties": [
{
"name": "accessible-name",
"description": "Defines the accessible name of the component.",
"value": { "type": "string | undefined" }
},
{
"name": "accessible-name-ref",
"description": "Receives id(or many ids) of the elements that label the component.",
"value": { "type": "string | undefined" }
}
],
"events": [
{
"name": "item-click",
"description": "Fired when the user selects a color."
}
]
}
},
{
"name": "ui5-color-palette-item",
"description": "### Overview\n\nThe `ui5-color-palette-item` component represents a color in the the `ui5-color-palette`.\n---\n\n\n### **Events:**\n - **click** - 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`.",
"doc-url": "",
"attributes": [
{
"name": "selected",
"description": "Defines if the component is selected.\n\n**Note:** Only one item must be selected per ui5-color-palette.\nIf more than one item is defined as selected, the last one would be considered as the selected one.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "tooltip",
"description": "Defines the tooltip of the component. When not set, the color value is used as the tooltip.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "value",
"description": "Defines the colour of the component.\n\n**Note:** The value should be a valid CSS color.",
"value": { "type": "string", "default": "\"\"" }
}
],
"events": [
{
"name": "click",
"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`."
}
],
"js": {
"properties": [
{
"name": "selected",
"description": "Defines if the component is selected.\n\n**Note:** Only one item must be selected per ui5-color-palette.\nIf more than one item is defined as selected, the last one would be considered as the selected one.",
"value": { "type": "boolean" }
},
{
"name": "tooltip",
"description": "Defines the tooltip of the component. When not set, the color value is used as the tooltip.",
"value": { "type": "string | undefined" }
},
{
"name": "value",
"description": "Defines the colour of the component.\n\n**Note:** The value should be a valid CSS color.",
"value": { "type": "string" }
}
],
"events": [
{
"name": "click",
"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`."
}
]
}
},
{
"name": "ui5-color-palette-popover",
"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\";`\n---\n\n\n### **Events:**\n - **close** - Fired when the `ui5-color-palette-popover` is closed due to user interaction.\n- **item-click** - Fired when the user selects a color.\n\n### **Slots:**\n - **default** - Defines the content of the component.",
"doc-url": "",
"attributes": [
{
"name": "accessible-name",
"description": "Defines the accessible name of the component.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "accessible-name-ref",
"description": "Receives id(or many ids) of the elements that label the component.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "default-color",
"description": "Defines the default color of the component.\n\n**Note:** The default color should be a part of the ColorPalette colors`",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "open",
"description": "Defines the open | closed state of the popover.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "opener",
"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.",
"value": {
"type": "string | HTMLElement | null | undefined",
"default": "undefined"
}
},
{
"name": "placement",
"description": "Determines on which side the component is placed at.",
"value": {
"type": "\"Top\" | \"Bottom\" | \"Start\" | \"End\"",
"default": "\"Bottom\""
}
},
{
"name": "show-default-color",
"description": "Defines whether the user can choose the default color from a button.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "show-more-colors",
"description": "Defines whether the user can choose a custom color from a component.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "show-recent-colors",
"description": "Defines whether the user can see the last used colors in the bottom of the component",
"value": { "type": "boolean", "default": "false" }
}
],
"slots": [
{
"name": "default",
"description": "Defines the content of the component."
}
],
"events": [
{
"name": "close",
"description": "Fired when the `ui5-color-palette-popover` is closed due to user interaction."
},
{
"name": "item-click",
"description": "Fired when the user selects a color."
}
],
"js": {
"properties": [
{
"name": "accessible-name",
"description": "Defines the accessible name of the component.",
"value": { "type": "string | undefined" }
},
{
"name": "accessible-name-ref",
"description": "Receives id(or many ids) of the elements that label the component.",
"value": { "type": "string | undefined" }
},
{
"name": "default-color",
"description": "Defines the default color of the component.\n\n**Note:** The default color should be a part of the ColorPalette colors`",
"value": { "type": "string | undefined" }
},
{
"name": "open",
"description": "Defines the open | closed state of the popover.",
"value": { "type": "boolean" }
},
{
"name": "opener",
"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.",
"value": { "type": "string | HTMLElement | null | undefined" }
},
{
"name": "placement",
"description": "Determines on which side the component is placed at.",
"value": {
"type": "\"Top\" | \"Bottom\" | \"Start\" | \"End\""
}
},
{
"name": "show-default-color",
"description": "Defines whether the user can choose the default color from a button.",
"value": { "type": "boolean" }
},
{
"name": "show-more-colors",
"description": "Defines whether the user can choose a custom color from a component.",
"value": { "type": "boolean" }
},
{
"name": "show-recent-colors",
"description": "Defines whether the user can see the last used colors in the bottom of the component",
"value": { "type": "boolean" }
}
],
"events": [
{
"name": "close",
"description": "Fired when the `ui5-color-palette-popover` is closed due to user interaction."
},
{
"name": "item-click",
"description": "Fired when the user selects a color."
}
]
}
},
{
"name": "ui5-color-picker",
"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\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the the selected color is changed",
"doc-url": "",
"attributes": [
{
"name": "accessible-name",
"description": "Defines the accessible name of the component.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "accessible-name-ref",
"description": "Receives id(or many ids) of the elements that label the component.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "name",
"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.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "simplified",
"description": "When set to `true`, the alpha slider and inputs for RGB values will not be displayed.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "value",
"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.",
"value": {
"type": "string",
"default": "\"rgba(255,255,255,1)\""
}
}
],
"events": [
{
"name": "change",
"description": "Fired when the the selected color is changed"
}
],
"js": {
"properties": [
{
"name": "accessible-name",
"description": "Defines the accessible name of the component.",
"value": { "type": "string | undefined" }
},
{
"name": "accessible-name-ref",
"description": "Receives id(or many ids) of the elements that label the component.",
"value": { "type": "string | undefined" }
},
{
"name": "name",
"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.",
"value": { "type": "string | undefined" }
},
{
"name": "simplified",
"description": "When set to `true`, the alpha slider and inputs for RGB values will not be displayed.",
"value": { "type": "boolean" }
},
{
"name": "value",
"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.",
"value": { "type": "string" }
}
],
"events": [
{
"name": "change",
"description": "Fired when the the selected color is changed"
}
]
}
},
{
"name": "ui5-combobox",
"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### Working with Values\n\nThe ComboBox offers two ways to work with item selection:\n\n**1. Display Text Only (using `value`):**\n```html\nui5-cb-item-group.\n- **header** - 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.\n\n### **CSS Parts:**\n - **header** - Used to style the header item of the group\n- **title** - Used to style the title of the group header",
"doc-url": "",
"attributes": [
{
"name": "header-accessible-name",
"description": "Defines the accessible name of the header.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "header-text",
"description": "Defines the header text of the ui5-li-group.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "wrapping-type",
"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.\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).", "value": { "type": "\"None\" | \"Normal\"", "default": "\"None\"" } } ], "slots": [ { "name": "default", "description": "Defines the items of the
ui5-cb-item-group."
},
{
"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."
}
],
"events": [
{
"name": "move",
"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."
},
{
"name": "move-over",
"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()`."
}
],
"js": {
"properties": [
{
"name": "header-accessible-name",
"description": "Defines the accessible name of the header.",
"value": { "type": "string | undefined" }
},
{
"name": "header-text",
"description": "Defines the header text of the ui5-li-group.",
"value": { "type": "string | undefined" }
},
{
"name": "wrapping-type",
"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.\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).", "value": { "type": "\"None\" | \"Normal\"" } } ], "events": [ { "name": "move", "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." }, { "name": "move-over", "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()`." } ] } }, { "name": "ui5-date-picker", "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 valueFormat is \"yyyy-MM-dd\", the displayFormat is \"MMM d, y\", and the used locale is English, a valid value string is \"2015-07-30\", which leads to an output of \"Jul 30, 2015\".\nIf no placeholder is set to the DatePicker, the used displayFormat is displayed as a placeholder. If another placeholder is needed, it must be set.\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