@ui5/webcomponents 0.0.0-4e88b8243 → 0.0.0-50f1454ef
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +489 -0
- package/README.md +22 -17
- package/cypress/specs/Avatar.cy.tsx +55 -0
- package/cypress/specs/AvatarGroup.cy.tsx +66 -0
- package/cypress/specs/Breadcrumbs.mobile.cy.tsx +53 -0
- package/cypress/specs/{Button.cy.ts → Button.cy.tsx} +109 -37
- package/cypress/specs/Calendar.cy.tsx +710 -0
- package/cypress/specs/CalendarLegend.cy.tsx +77 -0
- package/cypress/specs/Card.cy.tsx +338 -0
- package/cypress/specs/Carousel.cy.tsx +581 -0
- package/cypress/specs/Carousel.mobile.cy.tsx +67 -0
- package/cypress/specs/ColorPalette.cy.tsx +213 -0
- package/cypress/specs/ColorPicker.cy.tsx +332 -0
- package/cypress/specs/ComboBox.cy.tsx +198 -0
- package/cypress/specs/DateControlsWithTimezone.cy.tsx +75 -0
- package/cypress/specs/DatePicker.cy.tsx +1699 -0
- package/cypress/specs/DateRangePicker.cy.tsx +594 -0
- package/cypress/specs/DateTimePicker.cy.tsx +568 -0
- package/cypress/specs/DayPicker.cy.tsx +81 -0
- package/cypress/specs/Dialog.cy.tsx +133 -0
- package/cypress/specs/{ExpandableText.cy.ts → ExpandableText.cy.tsx} +27 -23
- package/cypress/specs/F6.cy.tsx +977 -0
- package/cypress/specs/Form.cy.tsx +1022 -0
- package/cypress/specs/FormSupport.cy.tsx +975 -0
- package/cypress/specs/Input.cy.tsx +978 -0
- package/cypress/specs/Label.cy.tsx +144 -0
- package/cypress/specs/Link.cy.tsx +216 -0
- package/cypress/specs/List.cy.tsx +309 -0
- package/cypress/specs/List.mobile.cy.tsx +31 -0
- package/cypress/specs/{LitKeyFunction.cy.ts → LitKeyFunction.cy.tsx} +10 -9
- package/cypress/specs/{Menu.cy.ts → Menu.cy.tsx} +210 -92
- package/cypress/specs/MessageStrip.cy.tsx +171 -0
- package/cypress/specs/MultiComboBox.cy.tsx +189 -0
- package/cypress/specs/MultiInput.cy.tsx +72 -0
- package/cypress/specs/Popover.cy.tsx +419 -0
- package/cypress/specs/RTL.cy.tsx +18 -0
- package/cypress/specs/RadioButton.cy.tsx +499 -0
- package/cypress/specs/RangeSlider.cy.tsx +52 -0
- package/cypress/specs/RatingIndicator.cy.tsx +279 -0
- package/cypress/specs/{ResponsivePopover.mobile.cy.ts → ResponsivePopover.mobile.cy.tsx} +35 -16
- package/cypress/specs/SegmentedButton.cy.tsx +215 -0
- package/cypress/specs/Select.cy.tsx +241 -0
- package/cypress/specs/Slider.cy.tsx +87 -0
- package/cypress/specs/{StepInput.cy.ts → StepInput.cy.tsx} +4 -6
- package/cypress/specs/TabContainer.cy.tsx +78 -0
- package/cypress/specs/Table.cy.tsx +1025 -0
- package/cypress/specs/{TableDragAndDrop.cy.ts → TableDragAndDrop.cy.tsx} +27 -24
- package/cypress/specs/TableGrowing.cy.tsx +336 -0
- package/cypress/specs/TableLoading.cy.tsx +48 -0
- package/cypress/specs/TableNavigation.cy.tsx +223 -0
- package/cypress/specs/TableNavigationFixedHeader.cy.tsx +199 -0
- package/cypress/specs/TableRowActions.cy.tsx +239 -0
- package/cypress/specs/TableSelection.cy.tsx +275 -0
- package/cypress/specs/TableSelections.cy.tsx +332 -0
- package/cypress/specs/TableUtils.cy.tsx +63 -0
- package/cypress/specs/{TableVirtualizer.cy.ts → TableVirtualizer.cy.tsx} +12 -15
- package/cypress/specs/Tag.cy.tsx +120 -0
- package/cypress/specs/Text.cy.tsx +46 -0
- package/cypress/specs/{TextArea.cy.ts → TextArea.cy.tsx} +85 -49
- package/cypress/specs/Title.cy.tsx +36 -0
- package/cypress/specs/{Toast.cy.ts → Toast.cy.tsx} +17 -16
- package/cypress/specs/Tokenizer.cy.tsx +209 -0
- package/cypress/specs/Toolbar.cy.tsx +194 -0
- package/cypress/specs/Tree.cy.tsx +72 -0
- package/cypress/specs/base/{AccessibilityTextsHelper.cy.ts → AccessibilityTextsHelper.cy.tsx} +193 -41
- package/cypress/specs/base/{Events.cy.ts → Events.cy.tsx} +78 -60
- package/cypress/specs/base/{IconCollection.cy.ts → IconCollection.cy.tsx} +4 -4
- package/cypress/specs/base/{IgnoreCustomElements.cy.ts → IgnoreCustomElements.cy.tsx} +15 -12
- package/cypress/specs/base/Tooltips.cy.tsx +64 -0
- package/cypress/support/commands/Calendar.commands.ts +21 -0
- package/cypress/support/commands/ColorPalette.commands.ts +27 -3
- package/cypress/support/commands/ColorPicker.commands.ts +38 -0
- package/cypress/support/commands/DatePicker.commands.ts +218 -0
- package/cypress/support/commands/DateTimePicker.commands.ts +105 -0
- package/cypress/support/commands/Dialog.commands.ts +16 -0
- package/cypress/support/commands/Menu.commands.ts +7 -7
- package/cypress/support/commands/Popover.commands.ts +16 -0
- package/cypress/support/commands/ResponsivePopover.commands.ts +42 -0
- package/cypress/support/commands/SegmentedButton.commands.ts +32 -0
- package/cypress/support/commands/utils/popup-open.ts +35 -0
- package/cypress/support/commands.ts +37 -2
- package/cypress/support/component-index.html +12 -0
- package/cypress/support/component.ts +19 -2
- package/cypress/tsconfig.json +9 -3
- package/cypress.config.js +11 -6
- package/dist/.tsbuildinfo +1 -1
- package/dist/Avatar.d.ts +10 -5
- package/dist/Avatar.js +9 -6
- package/dist/Avatar.js.map +1 -1
- package/dist/AvatarGroup.d.ts +4 -3
- package/dist/AvatarGroup.js +6 -2
- package/dist/AvatarGroup.js.map +1 -1
- package/dist/AvatarGroupTemplate.js +1 -0
- package/dist/AvatarGroupTemplate.js.map +1 -1
- package/dist/AvatarTemplate.js +1 -1
- package/dist/AvatarTemplate.js.map +1 -1
- package/dist/Bar.d.ts +18 -0
- package/dist/Bar.js +22 -0
- package/dist/Bar.js.map +1 -1
- package/dist/BarTemplate.js +1 -1
- package/dist/BarTemplate.js.map +1 -1
- package/dist/Breadcrumbs.d.ts +5 -0
- package/dist/Breadcrumbs.js +9 -0
- package/dist/Breadcrumbs.js.map +1 -1
- package/dist/BreadcrumbsPopoverTemplate.js +5 -1
- package/dist/BreadcrumbsPopoverTemplate.js.map +1 -1
- package/dist/BusyIndicatorTemplate.js +1 -1
- package/dist/BusyIndicatorTemplate.js.map +1 -1
- package/dist/Button.d.ts +24 -6
- package/dist/Button.js +72 -18
- package/dist/Button.js.map +1 -1
- package/dist/ButtonBadge.d.ts +38 -0
- package/dist/ButtonBadge.js +71 -0
- package/dist/ButtonBadge.js.map +1 -0
- package/dist/ButtonBadgeTemplate.d.ts +2 -0
- package/dist/ButtonBadgeTemplate.js +6 -0
- package/dist/ButtonBadgeTemplate.js.map +1 -0
- package/dist/ButtonTemplate.js +9 -4
- package/dist/ButtonTemplate.js.map +1 -1
- package/dist/Calendar.d.ts +4 -0
- package/dist/Calendar.js +21 -11
- package/dist/Calendar.js.map +1 -1
- package/dist/CalendarHeaderTemplate.js +2 -1
- package/dist/CalendarHeaderTemplate.js.map +1 -1
- package/dist/CardHeader.d.ts +1 -1
- package/dist/CardHeader.js +1 -1
- package/dist/CardHeader.js.map +1 -1
- package/dist/CardHeaderTemplate.js +1 -1
- package/dist/CardHeaderTemplate.js.map +1 -1
- package/dist/Carousel.d.ts +4 -1
- package/dist/Carousel.js +4 -1
- package/dist/Carousel.js.map +1 -1
- package/dist/CarouselTemplate.js +2 -2
- package/dist/CarouselTemplate.js.map +1 -1
- package/dist/CheckBox.d.ts +3 -0
- package/dist/CheckBox.js +3 -0
- package/dist/CheckBox.js.map +1 -1
- package/dist/ColorPalette.d.ts +21 -12
- package/dist/ColorPalette.js +38 -32
- package/dist/ColorPalette.js.map +1 -1
- package/dist/ColorPaletteItemTemplate.js +1 -1
- package/dist/ColorPaletteItemTemplate.js.map +1 -1
- package/dist/ColorPalettePopover.d.ts +0 -1
- package/dist/ColorPalettePopover.js +0 -1
- package/dist/ColorPalettePopover.js.map +1 -1
- package/dist/ColorPaletteTemplate.js +2 -2
- package/dist/ColorPaletteTemplate.js.map +1 -1
- package/dist/ColorPicker.d.ts +33 -28
- package/dist/ColorPicker.js +146 -100
- package/dist/ColorPicker.js.map +1 -1
- package/dist/ColorPickerTemplate.js +5 -3
- package/dist/ColorPickerTemplate.js.map +1 -1
- package/dist/ComboBox.d.ts +4 -3
- package/dist/ComboBox.js +28 -7
- package/dist/ComboBox.js.map +1 -1
- package/dist/ComboBoxItemGroupTemplate.js +2 -2
- package/dist/ComboBoxItemGroupTemplate.js.map +1 -1
- package/dist/DatePicker.d.ts +9 -5
- package/dist/DatePicker.js +42 -22
- package/dist/DatePicker.js.map +1 -1
- package/dist/DatePickerInputTemplate.js +2 -2
- package/dist/DatePickerInputTemplate.js.map +1 -1
- package/dist/DatePickerPopoverTemplate.js +34 -1
- package/dist/DatePickerPopoverTemplate.js.map +1 -1
- package/dist/DateRangePicker.d.ts +6 -2
- package/dist/DateRangePicker.js +10 -8
- package/dist/DateRangePicker.js.map +1 -1
- package/dist/DateTimeInput.d.ts +21 -0
- package/dist/DateTimeInput.js +48 -0
- package/dist/DateTimeInput.js.map +1 -0
- package/dist/DateTimePicker.d.ts +1 -18
- package/dist/DateTimePicker.js +5 -25
- package/dist/DateTimePicker.js.map +1 -1
- package/dist/DateTimePickerTemplate.js +16 -18
- package/dist/DateTimePickerTemplate.js.map +1 -1
- package/dist/DayPicker.d.ts +5 -0
- package/dist/DayPicker.js +24 -6
- package/dist/DayPicker.js.map +1 -1
- package/dist/DayPickerTemplate.js +1 -1
- package/dist/DayPickerTemplate.js.map +1 -1
- package/dist/Dialog.js +1 -0
- package/dist/Dialog.js.map +1 -1
- package/dist/DialogTemplate.js +1 -1
- package/dist/DialogTemplate.js.map +1 -1
- package/dist/ExpandableText.d.ts +3 -2
- package/dist/ExpandableText.js +0 -7
- package/dist/ExpandableText.js.map +1 -1
- package/dist/ExpandableTextTemplate.js +1 -1
- package/dist/ExpandableTextTemplate.js.map +1 -1
- package/dist/FileUploader.js +1 -1
- package/dist/FileUploader.js.map +1 -1
- package/dist/Form.d.ts +23 -3
- package/dist/Form.js +40 -5
- package/dist/Form.js.map +1 -1
- package/dist/FormGroup.d.ts +9 -1
- package/dist/FormGroup.js +11 -1
- package/dist/FormGroup.js.map +1 -1
- package/dist/FormItem.d.ts +0 -1
- package/dist/FormItem.js +0 -1
- package/dist/FormItem.js.map +1 -1
- package/dist/FormTemplate.js +3 -3
- package/dist/FormTemplate.js.map +1 -1
- package/dist/Icon.d.ts +1 -1
- package/dist/Icon.js +3 -4
- package/dist/Icon.js.map +1 -1
- package/dist/Input.d.ts +43 -17
- package/dist/Input.js +91 -38
- package/dist/Input.js.map +1 -1
- package/dist/InputPopoverTemplate.d.ts +4 -1
- package/dist/InputPopoverTemplate.js +3 -2
- package/dist/InputPopoverTemplate.js.map +1 -1
- package/dist/InputTemplate.d.ts +3 -1
- package/dist/InputTemplate.js +7 -5
- package/dist/InputTemplate.js.map +1 -1
- package/dist/Link.d.ts +15 -0
- package/dist/Link.js +17 -0
- package/dist/Link.js.map +1 -1
- package/dist/List.d.ts +18 -6
- package/dist/List.js +63 -18
- package/dist/List.js.map +1 -1
- package/dist/ListBoxItemGroupTemplate.d.ts +4 -0
- package/dist/ListBoxItemGroupTemplate.js +13 -0
- package/dist/ListBoxItemGroupTemplate.js.map +1 -0
- package/dist/ListItem.d.ts +7 -8
- package/dist/ListItem.js +18 -10
- package/dist/ListItem.js.map +1 -1
- package/dist/ListItemGroupHeader.d.ts +6 -0
- package/dist/ListItemGroupHeader.js +19 -2
- package/dist/ListItemGroupHeader.js.map +1 -1
- package/dist/ListItemGroupHeaderTemplate.js +3 -3
- package/dist/ListItemGroupHeaderTemplate.js.map +1 -1
- package/dist/ListItemGroupTemplate.d.ts +1 -3
- package/dist/ListItemGroupTemplate.js +5 -8
- package/dist/ListItemGroupTemplate.js.map +1 -1
- package/dist/ListItemStandard.d.ts +48 -6
- package/dist/ListItemStandard.js +69 -9
- package/dist/ListItemStandard.js.map +1 -1
- package/dist/ListItemStandardTemplate.js +33 -1
- package/dist/ListItemStandardTemplate.js.map +1 -1
- package/dist/ListItemTemplate.js +3 -3
- package/dist/ListItemTemplate.js.map +1 -1
- package/dist/ListTemplate.js +2 -2
- package/dist/ListTemplate.js.map +1 -1
- package/dist/Menu.d.ts +17 -6
- package/dist/Menu.js +99 -55
- package/dist/Menu.js.map +1 -1
- package/dist/MenuItem.d.ts +30 -7
- package/dist/MenuItem.js +148 -24
- package/dist/MenuItem.js.map +1 -1
- package/dist/MenuItemTemplate.d.ts +1 -5
- package/dist/MenuItemTemplate.js +3 -3
- package/dist/MenuItemTemplate.js.map +1 -1
- package/dist/MenuTemplate.js +2 -2
- package/dist/MenuTemplate.js.map +1 -1
- package/dist/MessageStrip.js +1 -3
- package/dist/MessageStrip.js.map +1 -1
- package/dist/MessageStripTemplate.js +3 -3
- package/dist/MessageStripTemplate.js.map +1 -1
- package/dist/MonthPicker.js +7 -1
- package/dist/MonthPicker.js.map +1 -1
- package/dist/MultiComboBox.d.ts +7 -12
- package/dist/MultiComboBox.js +48 -52
- package/dist/MultiComboBox.js.map +1 -1
- package/dist/MultiComboBoxItemGroupTemplate.js +2 -2
- package/dist/MultiComboBoxItemGroupTemplate.js.map +1 -1
- package/dist/MultiComboBoxPopoverTemplate.d.ts +2 -0
- package/dist/MultiComboBoxPopoverTemplate.js +35 -0
- package/dist/MultiComboBoxPopoverTemplate.js.map +1 -0
- package/dist/MultiComboBoxTemplate.d.ts +2 -0
- package/dist/MultiComboBoxTemplate.js +26 -0
- package/dist/MultiComboBoxTemplate.js.map +1 -0
- package/dist/MultiInput.d.ts +4 -1
- package/dist/MultiInput.js +8 -2
- package/dist/MultiInput.js.map +1 -1
- package/dist/MultiInputTemplate.js +2 -1
- package/dist/MultiInputTemplate.js.map +1 -1
- package/dist/OptionCustom.d.ts +1 -3
- package/dist/OptionCustom.js.map +1 -1
- package/dist/Panel.d.ts +3 -1
- package/dist/Panel.js +1 -1
- package/dist/Panel.js.map +1 -1
- package/dist/Popover.d.ts +6 -8
- package/dist/Popover.js +23 -22
- package/dist/Popover.js.map +1 -1
- package/dist/Popup.js +5 -8
- package/dist/Popup.js.map +1 -1
- package/dist/PopupTemplate.d.ts +1 -1
- package/dist/RadioButtonGroup.js +3 -2
- package/dist/RadioButtonGroup.js.map +1 -1
- package/dist/RangeSliderTemplate.js +2 -2
- package/dist/RangeSliderTemplate.js.map +1 -1
- package/dist/RatingIndicator.js +4 -1
- package/dist/RatingIndicator.js.map +1 -1
- package/dist/ResponsivePopoverTemplate.js +1 -1
- package/dist/ResponsivePopoverTemplate.js.map +1 -1
- package/dist/Select.d.ts +66 -10
- package/dist/Select.js +95 -29
- package/dist/Select.js.map +1 -1
- package/dist/SelectPopoverTemplate.d.ts +2 -0
- package/dist/SelectPopoverTemplate.js +28 -0
- package/dist/SelectPopoverTemplate.js.map +1 -0
- package/dist/SelectTemplate.d.ts +2 -0
- package/dist/SelectTemplate.js +23 -0
- package/dist/SelectTemplate.js.map +1 -0
- package/dist/Slider.d.ts +1 -0
- package/dist/Slider.js +8 -0
- package/dist/Slider.js.map +1 -1
- package/dist/SliderBase.d.ts +2 -1
- package/dist/SliderBase.js +14 -2
- package/dist/SliderBase.js.map +1 -1
- package/dist/SliderBaseTemplate.js +3 -4
- package/dist/SliderBaseTemplate.js.map +1 -1
- package/dist/SliderTemplate.js +1 -1
- package/dist/SliderTemplate.js.map +1 -1
- package/dist/SpecialCalendarDate.d.ts +6 -0
- package/dist/SpecialCalendarDate.js +9 -0
- package/dist/SpecialCalendarDate.js.map +1 -1
- package/dist/SplitButton.d.ts +9 -21
- package/dist/SplitButton.js +40 -74
- package/dist/SplitButton.js.map +1 -1
- package/dist/SplitButtonTemplate.js +1 -1
- package/dist/SplitButtonTemplate.js.map +1 -1
- package/dist/SuggestionItemGroup.js +2 -0
- package/dist/SuggestionItemGroup.js.map +1 -1
- package/dist/SuggestionListItem.d.ts +1 -1
- package/dist/SuggestionListItem.js +1 -1
- package/dist/SuggestionListItem.js.map +1 -1
- package/dist/Switch.js +0 -1
- package/dist/Switch.js.map +1 -1
- package/dist/SwitchTemplate.js +1 -1
- package/dist/SwitchTemplate.js.map +1 -1
- package/dist/Tab.d.ts +1 -1
- package/dist/TabContainer.d.ts +10 -21
- package/dist/TabContainer.js +22 -32
- package/dist/TabContainer.js.map +1 -1
- package/dist/TabContainerTemplate.js +1 -0
- package/dist/TabContainerTemplate.js.map +1 -1
- package/dist/Table.d.ts +70 -36
- package/dist/Table.js +130 -115
- package/dist/Table.js.map +1 -1
- package/dist/TableCell.d.ts +3 -1
- package/dist/TableCell.js +23 -5
- package/dist/TableCell.js.map +1 -1
- package/dist/TableCellBase.d.ts +4 -2
- package/dist/TableCellBase.js +11 -14
- package/dist/TableCellBase.js.map +1 -1
- package/dist/TableCellTemplate.d.ts +2 -0
- package/dist/TableCellTemplate.js +6 -0
- package/dist/TableCellTemplate.js.map +1 -0
- package/dist/TableDragAndDrop.d.ts +1 -1
- package/dist/TableDragAndDrop.js.map +1 -1
- package/dist/TableExtension.d.ts +1 -1
- package/dist/TableExtension.js +1 -1
- package/dist/TableExtension.js.map +1 -1
- package/dist/TableGrowing.d.ts +19 -14
- package/dist/TableGrowing.js +33 -31
- package/dist/TableGrowing.js.map +1 -1
- package/dist/TableGrowingTemplate.d.ts +2 -0
- package/dist/TableGrowingTemplate.js +6 -0
- package/dist/TableGrowingTemplate.js.map +1 -0
- package/dist/TableHeaderCell.d.ts +53 -13
- package/dist/TableHeaderCell.js +37 -37
- package/dist/TableHeaderCell.js.map +1 -1
- package/dist/TableHeaderCellActionAI.d.ts +29 -0
- package/dist/TableHeaderCellActionAI.js +49 -0
- package/dist/TableHeaderCellActionAI.js.map +1 -0
- package/dist/TableHeaderCellActionBase.d.ts +35 -0
- package/dist/TableHeaderCellActionBase.js +57 -0
- package/dist/TableHeaderCellActionBase.js.map +1 -0
- package/dist/TableHeaderCellActionBaseTemplate.d.ts +2 -0
- package/dist/TableHeaderCellActionBaseTemplate.js +7 -0
- package/dist/TableHeaderCellActionBaseTemplate.js.map +1 -0
- package/dist/TableHeaderCellTemplate.d.ts +2 -0
- package/dist/TableHeaderCellTemplate.js +19 -0
- package/dist/TableHeaderCellTemplate.js.map +1 -0
- package/dist/TableHeaderRow.d.ts +4 -3
- package/dist/TableHeaderRow.js +11 -11
- package/dist/TableHeaderRow.js.map +1 -1
- package/dist/TableHeaderRowTemplate.d.ts +2 -0
- package/dist/TableHeaderRowTemplate.js +11 -0
- package/dist/TableHeaderRowTemplate.js.map +1 -0
- package/dist/TableNavigation.d.ts +2 -2
- package/dist/TableNavigation.js +6 -7
- package/dist/TableNavigation.js.map +1 -1
- package/dist/TableRow.d.ts +26 -7
- package/dist/TableRow.js +66 -45
- package/dist/TableRow.js.map +1 -1
- package/dist/TableRowAction.d.ts +47 -0
- package/dist/TableRowAction.js +71 -0
- package/dist/TableRowAction.js.map +1 -0
- package/dist/TableRowActionBase.d.ts +39 -0
- package/dist/TableRowActionBase.js +112 -0
- package/dist/TableRowActionBase.js.map +1 -0
- package/dist/TableRowActionBaseTemplate.d.ts +2 -0
- package/dist/TableRowActionBaseTemplate.js +15 -0
- package/dist/TableRowActionBaseTemplate.js.map +1 -0
- package/dist/TableRowActionNavigation.d.ts +38 -0
- package/dist/TableRowActionNavigation.js +65 -0
- package/dist/TableRowActionNavigation.js.map +1 -0
- package/dist/TableRowBase.d.ts +9 -6
- package/dist/TableRowBase.js +30 -27
- package/dist/TableRowBase.js.map +1 -1
- package/dist/TableRowTemplate.d.ts +2 -0
- package/dist/TableRowTemplate.js +18 -0
- package/dist/TableRowTemplate.js.map +1 -0
- package/dist/TableSelection.d.ts +10 -8
- package/dist/TableSelection.js +40 -39
- package/dist/TableSelection.js.map +1 -1
- package/dist/TableSelectionBase.d.ts +77 -0
- package/dist/TableSelectionBase.js +107 -0
- package/dist/TableSelectionBase.js.map +1 -0
- package/dist/TableSelectionMulti.d.ts +90 -0
- package/dist/TableSelectionMulti.js +255 -0
- package/dist/TableSelectionMulti.js.map +1 -0
- package/dist/TableSelectionSingle.d.ts +49 -0
- package/dist/TableSelectionSingle.js +67 -0
- package/dist/TableSelectionSingle.js.map +1 -0
- package/dist/TableTemplate.d.ts +2 -0
- package/dist/TableTemplate.js +18 -0
- package/dist/TableTemplate.js.map +1 -0
- package/dist/TableUtils.d.ts +9 -1
- package/dist/TableUtils.js +26 -2
- package/dist/TableUtils.js.map +1 -1
- package/dist/TableVirtualizer.d.ts +2 -2
- package/dist/TableVirtualizer.js +7 -5
- package/dist/TableVirtualizer.js.map +1 -1
- package/dist/Tag.d.ts +3 -2
- package/dist/Tag.js +3 -1
- package/dist/Tag.js.map +1 -1
- package/dist/TagTemplate.js +2 -2
- package/dist/TagTemplate.js.map +1 -1
- package/dist/TextArea.js +1 -4
- package/dist/TextArea.js.map +1 -1
- package/dist/TimePicker.d.ts +15 -7
- package/dist/TimePicker.js +61 -19
- package/dist/TimePicker.js.map +1 -1
- package/dist/TimePickerClock.d.ts +22 -52
- package/dist/TimePickerClock.js +71 -224
- package/dist/TimePickerClock.js.map +1 -1
- package/dist/TimePickerClockTemplate.js +9 -6
- package/dist/TimePickerClockTemplate.js.map +1 -1
- package/dist/TimePickerInternals.d.ts +2 -1
- package/dist/TimePickerInternals.js.map +1 -1
- package/dist/TimePickerPopoverTemplate.js +34 -2
- package/dist/TimePickerPopoverTemplate.js.map +1 -1
- package/dist/TimePickerTemplate.js +4 -3
- package/dist/TimePickerTemplate.js.map +1 -1
- package/dist/TimeSelectionClocks.d.ts +15 -3
- package/dist/TimeSelectionClocks.js +64 -28
- package/dist/TimeSelectionClocks.js.map +1 -1
- package/dist/TimeSelectionClocksTemplate.js +1 -1
- package/dist/TimeSelectionClocksTemplate.js.map +1 -1
- package/dist/ToastTemplate.js +3 -2
- package/dist/ToastTemplate.js.map +1 -1
- package/dist/Token.d.ts +1 -5
- package/dist/Token.js +6 -8
- package/dist/Token.js.map +1 -1
- package/dist/TokenTemplate.js +1 -1
- package/dist/TokenTemplate.js.map +1 -1
- package/dist/Tokenizer.d.ts +7 -2
- package/dist/Tokenizer.js +3 -26
- package/dist/Tokenizer.js.map +1 -1
- package/dist/TokenizerPopoverTemplate.js +0 -1
- package/dist/TokenizerPopoverTemplate.js.map +1 -1
- package/dist/Toolbar.d.ts +6 -5
- package/dist/Toolbar.js +15 -51
- package/dist/Toolbar.js.map +1 -1
- package/dist/ToolbarButton.d.ts +7 -5
- package/dist/ToolbarButton.js +15 -4
- package/dist/ToolbarButton.js.map +1 -1
- package/dist/ToolbarButtonTemplate.js +1 -1
- package/dist/ToolbarButtonTemplate.js.map +1 -1
- package/dist/ToolbarItem.d.ts +6 -17
- package/dist/ToolbarItem.js +18 -8
- package/dist/ToolbarItem.js.map +1 -1
- package/dist/ToolbarPopoverButtonTemplate.js +1 -1
- package/dist/ToolbarPopoverButtonTemplate.js.map +1 -1
- package/dist/ToolbarPopoverSelectTemplate.js +1 -1
- package/dist/ToolbarPopoverSelectTemplate.js.map +1 -1
- package/dist/ToolbarPopoverTemplate.js +1 -1
- package/dist/ToolbarPopoverTemplate.js.map +1 -1
- package/dist/ToolbarSelect.d.ts +9 -11
- package/dist/ToolbarSelect.js +41 -41
- package/dist/ToolbarSelect.js.map +1 -1
- package/dist/ToolbarSelectTemplate.js +1 -1
- package/dist/ToolbarSelectTemplate.js.map +1 -1
- package/dist/ToolbarTemplate.js +1 -1
- package/dist/ToolbarTemplate.js.map +1 -1
- package/dist/Tree.js +3 -0
- package/dist/Tree.js.map +1 -1
- package/dist/TreeItemBase.d.ts +16 -1
- package/dist/TreeItemBase.js +14 -0
- package/dist/TreeItemBase.js.map +1 -1
- package/dist/TreeItemBaseTemplate.js +5 -1
- package/dist/TreeItemBaseTemplate.js.map +1 -1
- package/dist/TreeItemCustom.js +5 -1
- package/dist/TreeItemCustom.js.map +1 -1
- package/dist/TreeItemTemplate.js +1 -1
- package/dist/TreeItemTemplate.js.map +1 -1
- package/dist/TreeList.js +3 -1
- package/dist/TreeList.js.map +1 -1
- package/dist/YearPicker.js +2 -2
- package/dist/YearPicker.js.map +1 -1
- package/dist/YearPickerTemplate.js +1 -1
- package/dist/YearPickerTemplate.js.map +1 -1
- package/dist/bundle.esm.d.ts +2 -3
- package/dist/bundle.esm.js +8 -7
- package/dist/bundle.esm.js.map +1 -1
- package/dist/colorpicker-utils/ColorValue.d.ts +53 -0
- package/dist/colorpicker-utils/ColorValue.js +143 -0
- package/dist/colorpicker-utils/ColorValue.js.map +1 -0
- package/dist/css/themes/Avatar.css +1 -1
- package/dist/css/themes/AvatarGroup.css +1 -1
- package/dist/css/themes/Bar.css +1 -1
- package/dist/css/themes/Breadcrumbs.css +1 -1
- package/dist/css/themes/BusyIndicator.css +1 -1
- package/dist/css/themes/Button.css +1 -1
- package/dist/css/themes/ButtonBadge.css +1 -0
- package/dist/css/themes/Calendar.css +1 -1
- package/dist/css/themes/CalendarHeader.css +1 -1
- package/dist/css/themes/CalendarLegend.css +1 -1
- package/dist/css/themes/CalendarLegendItem.css +1 -1
- package/dist/css/themes/Card.css +1 -1
- package/dist/css/themes/CardHeader.css +1 -1
- package/dist/css/themes/Carousel.css +1 -1
- package/dist/css/themes/CheckBox.css +1 -1
- package/dist/css/themes/ColorPalette.css +1 -1
- package/dist/css/themes/ColorPaletteItem.css +1 -1
- package/dist/css/themes/ColorPalettePopover.css +1 -1
- package/dist/css/themes/ColorPicker.css +1 -1
- package/dist/css/themes/ComboBox.css +1 -1
- package/dist/css/themes/ComboBoxItem.css +1 -1
- package/dist/css/themes/ComboBoxPopover.css +1 -1
- package/dist/css/themes/DatePicker.css +1 -1
- package/dist/css/themes/DatePickerPopover.css +1 -1
- package/dist/css/themes/DateTimePickerPopover.css +1 -1
- package/dist/css/themes/DayPicker.css +1 -1
- package/dist/css/themes/Dialog.css +1 -1
- package/dist/css/themes/FileUploader.css +1 -1
- package/dist/css/themes/Form.css +1 -1
- package/dist/css/themes/FormItem.css +1 -1
- package/dist/css/themes/FormItemSpan.css +1 -1
- package/dist/css/themes/GrowingButton.css +1 -1
- package/dist/css/themes/Icon.css +1 -1
- package/dist/css/themes/Input.css +1 -1
- package/dist/css/themes/InputIcon.css +1 -1
- package/dist/css/themes/InputSharedStyles.css +1 -1
- package/dist/css/themes/Label.css +1 -1
- package/dist/css/themes/Link.css +1 -1
- package/dist/css/themes/List.css +1 -1
- package/dist/css/themes/ListItem.css +1 -1
- package/dist/css/themes/ListItemBase.css +1 -1
- package/dist/css/themes/ListItemCustom.css +1 -1
- package/dist/css/themes/ListItemGroup.css +1 -1
- package/dist/css/themes/ListItemGroupHeader.css +1 -1
- package/dist/css/themes/ListItemIcon.css +1 -1
- package/dist/css/themes/Menu.css +1 -1
- package/dist/css/themes/MenuItem.css +1 -1
- package/dist/css/themes/MessageStrip.css +1 -1
- package/dist/css/themes/MonthPicker.css +1 -1
- package/dist/css/themes/MultiComboBox.css +1 -1
- package/dist/css/themes/MultiComboBoxItem.css +1 -1
- package/dist/css/themes/MultiComboBoxPopover.css +1 -1
- package/dist/css/themes/MultiInput.css +1 -1
- package/dist/css/themes/OptionBase.css +1 -1
- package/dist/css/themes/Panel.css +1 -1
- package/dist/css/themes/Popover.css +1 -1
- package/dist/css/themes/PopupsCommon.css +1 -1
- package/dist/css/themes/ProgressIndicator.css +1 -1
- package/dist/css/themes/RadioButton.css +1 -1
- package/dist/css/themes/RangeSlider.css +1 -1
- package/dist/css/themes/RatingIndicator.css +1 -1
- package/dist/css/themes/ResponsivePopover.css +1 -1
- package/dist/css/themes/ResponsivePopoverCommon.css +1 -1
- package/dist/css/themes/SegmentedButton.css +1 -1
- package/dist/css/themes/SegmentedButtonItem.css +1 -1
- package/dist/css/themes/Select.css +1 -1
- package/dist/css/themes/SliderBase.css +1 -1
- package/dist/css/themes/SplitButton.css +1 -1
- package/dist/css/themes/StepInput.css +1 -1
- package/dist/css/themes/SuggestionItem.css +1 -1
- package/dist/css/themes/SuggestionItemCustom.css +1 -1
- package/dist/css/themes/Switch.css +1 -1
- package/dist/css/themes/TabContainer.css +1 -1
- package/dist/css/themes/TabInOverflow.css +1 -1
- package/dist/css/themes/TabInStrip.css +1 -1
- package/dist/css/themes/TabSemanticIcon.css +1 -1
- package/dist/css/themes/TabSeparatorInOverflow.css +1 -1
- package/dist/css/themes/Table.css +1 -1
- package/dist/css/themes/TableCell.css +1 -1
- package/dist/css/themes/TableCellBase.css +1 -1
- package/dist/css/themes/TableGrowing.css +1 -1
- package/dist/css/themes/TableHeaderCell.css +1 -1
- package/dist/css/themes/TableHeaderCellActionBase.css +1 -0
- package/dist/css/themes/TableHeaderRow.css +1 -1
- package/dist/css/themes/TableRow.css +1 -1
- package/dist/css/themes/TableRowActionBase.css +1 -0
- package/dist/css/themes/TableRowBase.css +1 -1
- package/dist/css/themes/Tag.css +1 -1
- package/dist/css/themes/Text.css +1 -1
- package/dist/css/themes/TextArea.css +1 -1
- package/dist/css/themes/TimePicker.css +1 -1
- package/dist/css/themes/TimePickerClock.css +1 -1
- package/dist/css/themes/TimePickerPopover.css +1 -1
- package/dist/css/themes/Toast.css +1 -1
- package/dist/css/themes/ToggleButton.css +1 -1
- package/dist/css/themes/Token.css +1 -1
- package/dist/css/themes/Tokenizer.css +1 -1
- package/dist/css/themes/TokenizerPopover.css +1 -1
- package/dist/css/themes/Toolbar.css +1 -1
- package/dist/css/themes/ToolbarPopover.css +1 -1
- package/dist/css/themes/ToolbarSelect.css +1 -0
- package/dist/css/themes/TreeItem.css +1 -1
- package/dist/css/themes/ValueStateMessage.css +1 -1
- package/dist/css/themes/YearPicker.css +1 -1
- package/dist/css/themes/sap_fiori_3/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_fiori_3_dark/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_fiori_3_hcb/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_fiori_3_hcw/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon_dark/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon_hcb/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon_hcw/parameters-bundle.css +1 -1
- package/dist/custom-elements-internal.json +11970 -9476
- package/dist/custom-elements.json +2993 -1158
- package/dist/features/ColorPaletteMoreColors.d.ts +1 -11
- package/dist/features/ColorPaletteMoreColors.js +3 -18
- package/dist/features/ColorPaletteMoreColors.js.map +1 -1
- package/dist/features/ColorPaletteMoreColorsTemplate.js +1 -1
- package/dist/features/ColorPaletteMoreColorsTemplate.js.map +1 -1
- package/dist/features/InputSuggestions.d.ts +4 -7
- package/dist/features/InputSuggestions.js +11 -20
- package/dist/features/InputSuggestions.js.map +1 -1
- package/dist/features/InputSuggestionsTemplate.d.ts +5 -1
- package/dist/features/InputSuggestionsTemplate.js +9 -5
- package/dist/features/InputSuggestionsTemplate.js.map +1 -1
- package/dist/features/ListItemStandardExpandableText.d.ts +1 -0
- package/dist/features/ListItemStandardExpandableText.js +5 -0
- package/dist/features/ListItemStandardExpandableText.js.map +1 -0
- package/dist/features/ListItemStandardExpandableTextTemplate.d.ts +10 -0
- package/dist/features/ListItemStandardExpandableTextTemplate.js +14 -0
- package/dist/features/ListItemStandardExpandableTextTemplate.js.map +1 -0
- package/dist/generated/assets/i18n/messagebundle_ar.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_bg.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_ca.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_cnr.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_cs.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_cy.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_da.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_de.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_el.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_en.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_en_GB.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_en_US_sappsd.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_en_US_saprigi.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_en_US_saptrc.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_es.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_es_MX.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_et.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_fi.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_fr.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_fr_CA.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_hi.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_hr.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_hu.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_id.json +1 -0
- package/dist/generated/assets/i18n/messagebundle_it.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_iw.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_ja.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_kk.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_ko.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_lt.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_lv.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_mk.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_ms.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_nl.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_no.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_pl.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_pt.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_pt_PT.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_ro.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_ru.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_sh.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_sk.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_sl.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_sr.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_sv.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_th.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_tr.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_uk.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_vi.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_zh_CN.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_zh_TW.json +1 -1
- package/dist/generated/assets/themes/sap_fiori_3/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_fiori_3_dark/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_fiori_3_hcb/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_fiori_3_hcw/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_dark/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_hcb/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_hcw/parameters-bundle.css.json +1 -1
- package/dist/generated/i18n/i18n-defaults.d.ts +19 -2
- package/dist/generated/i18n/i18n-defaults.js +20 -3
- package/dist/generated/i18n/i18n-defaults.js.map +1 -1
- package/dist/generated/json-imports/Themes-fetch.js +1 -5
- package/dist/generated/json-imports/Themes-fetch.js.map +1 -1
- package/dist/generated/json-imports/Themes.js +1 -5
- package/dist/generated/json-imports/Themes.js.map +1 -1
- package/dist/generated/json-imports/i18n-fetch.js +2 -2
- package/dist/generated/json-imports/i18n-fetch.js.map +1 -1
- package/dist/generated/json-imports/i18n.js +2 -2
- package/dist/generated/json-imports/i18n.js.map +1 -1
- package/dist/generated/themes/Avatar.css.d.ts +1 -1
- package/dist/generated/themes/Avatar.css.js +1 -1
- package/dist/generated/themes/Avatar.css.js.map +1 -1
- package/dist/generated/themes/AvatarGroup.css.d.ts +1 -1
- package/dist/generated/themes/AvatarGroup.css.js +1 -1
- package/dist/generated/themes/AvatarGroup.css.js.map +1 -1
- package/dist/generated/themes/Bar.css.d.ts +1 -1
- package/dist/generated/themes/Bar.css.js +1 -1
- package/dist/generated/themes/Bar.css.js.map +1 -1
- package/dist/generated/themes/Breadcrumbs.css.d.ts +1 -1
- package/dist/generated/themes/Breadcrumbs.css.js +1 -1
- package/dist/generated/themes/Breadcrumbs.css.js.map +1 -1
- package/dist/generated/themes/BusyIndicator.css.d.ts +1 -1
- package/dist/generated/themes/BusyIndicator.css.js +1 -1
- package/dist/generated/themes/BusyIndicator.css.js.map +1 -1
- package/dist/generated/themes/Button.css.d.ts +1 -1
- package/dist/generated/themes/Button.css.js +1 -1
- package/dist/generated/themes/Button.css.js.map +1 -1
- package/dist/generated/themes/ButtonBadge.css.d.ts +2 -0
- package/dist/generated/themes/ButtonBadge.css.js +8 -0
- package/dist/generated/themes/ButtonBadge.css.js.map +1 -0
- package/dist/generated/themes/Calendar.css.d.ts +1 -1
- package/dist/generated/themes/Calendar.css.js +1 -1
- package/dist/generated/themes/Calendar.css.js.map +1 -1
- package/dist/generated/themes/CalendarHeader.css.d.ts +1 -1
- package/dist/generated/themes/CalendarHeader.css.js +1 -1
- package/dist/generated/themes/CalendarHeader.css.js.map +1 -1
- package/dist/generated/themes/CalendarLegend.css.d.ts +1 -1
- package/dist/generated/themes/CalendarLegend.css.js +1 -1
- package/dist/generated/themes/CalendarLegend.css.js.map +1 -1
- package/dist/generated/themes/CalendarLegendItem.css.d.ts +1 -1
- package/dist/generated/themes/CalendarLegendItem.css.js +1 -1
- package/dist/generated/themes/CalendarLegendItem.css.js.map +1 -1
- package/dist/generated/themes/Card.css.d.ts +1 -1
- package/dist/generated/themes/Card.css.js +1 -1
- package/dist/generated/themes/Card.css.js.map +1 -1
- package/dist/generated/themes/CardHeader.css.d.ts +1 -1
- package/dist/generated/themes/CardHeader.css.js +1 -1
- package/dist/generated/themes/CardHeader.css.js.map +1 -1
- package/dist/generated/themes/Carousel.css.d.ts +1 -1
- package/dist/generated/themes/Carousel.css.js +1 -1
- package/dist/generated/themes/Carousel.css.js.map +1 -1
- package/dist/generated/themes/CheckBox.css.d.ts +1 -1
- package/dist/generated/themes/CheckBox.css.js +1 -1
- package/dist/generated/themes/CheckBox.css.js.map +1 -1
- package/dist/generated/themes/ColorPalette.css.d.ts +1 -1
- package/dist/generated/themes/ColorPalette.css.js +1 -1
- package/dist/generated/themes/ColorPalette.css.js.map +1 -1
- package/dist/generated/themes/ColorPaletteItem.css.d.ts +1 -1
- package/dist/generated/themes/ColorPaletteItem.css.js +1 -1
- package/dist/generated/themes/ColorPaletteItem.css.js.map +1 -1
- package/dist/generated/themes/ColorPalettePopover.css.d.ts +1 -1
- package/dist/generated/themes/ColorPalettePopover.css.js +1 -1
- package/dist/generated/themes/ColorPalettePopover.css.js.map +1 -1
- package/dist/generated/themes/ColorPicker.css.d.ts +1 -1
- package/dist/generated/themes/ColorPicker.css.js +1 -1
- package/dist/generated/themes/ColorPicker.css.js.map +1 -1
- package/dist/generated/themes/ComboBox.css.d.ts +1 -1
- package/dist/generated/themes/ComboBox.css.js +1 -1
- package/dist/generated/themes/ComboBox.css.js.map +1 -1
- package/dist/generated/themes/ComboBoxItem.css.d.ts +1 -1
- package/dist/generated/themes/ComboBoxItem.css.js +1 -1
- package/dist/generated/themes/ComboBoxItem.css.js.map +1 -1
- package/dist/generated/themes/ComboBoxPopover.css.d.ts +1 -1
- package/dist/generated/themes/ComboBoxPopover.css.js +1 -1
- package/dist/generated/themes/ComboBoxPopover.css.js.map +1 -1
- package/dist/generated/themes/DatePicker.css.d.ts +1 -1
- package/dist/generated/themes/DatePicker.css.js +1 -1
- package/dist/generated/themes/DatePicker.css.js.map +1 -1
- package/dist/generated/themes/DatePickerPopover.css.d.ts +1 -1
- package/dist/generated/themes/DatePickerPopover.css.js +1 -1
- package/dist/generated/themes/DatePickerPopover.css.js.map +1 -1
- package/dist/generated/themes/DateTimePickerPopover.css.d.ts +1 -1
- package/dist/generated/themes/DateTimePickerPopover.css.js +1 -1
- package/dist/generated/themes/DateTimePickerPopover.css.js.map +1 -1
- package/dist/generated/themes/DayPicker.css.d.ts +1 -1
- package/dist/generated/themes/DayPicker.css.js +1 -1
- package/dist/generated/themes/DayPicker.css.js.map +1 -1
- package/dist/generated/themes/Dialog.css.d.ts +1 -1
- package/dist/generated/themes/Dialog.css.js +1 -1
- package/dist/generated/themes/Dialog.css.js.map +1 -1
- package/dist/generated/themes/FileUploader.css.d.ts +1 -1
- package/dist/generated/themes/FileUploader.css.js +1 -1
- package/dist/generated/themes/FileUploader.css.js.map +1 -1
- package/dist/generated/themes/Form.css.d.ts +1 -1
- package/dist/generated/themes/Form.css.js +1 -1
- package/dist/generated/themes/Form.css.js.map +1 -1
- package/dist/generated/themes/FormItem.css.d.ts +1 -1
- package/dist/generated/themes/FormItem.css.js +1 -1
- package/dist/generated/themes/FormItem.css.js.map +1 -1
- package/dist/generated/themes/FormItemSpan.css.d.ts +1 -1
- package/dist/generated/themes/FormItemSpan.css.js +1 -1
- package/dist/generated/themes/FormItemSpan.css.js.map +1 -1
- package/dist/generated/themes/GrowingButton.css.d.ts +1 -1
- package/dist/generated/themes/GrowingButton.css.js +1 -1
- package/dist/generated/themes/GrowingButton.css.js.map +1 -1
- package/dist/generated/themes/Icon.css.d.ts +1 -1
- package/dist/generated/themes/Icon.css.js +1 -1
- package/dist/generated/themes/Icon.css.js.map +1 -1
- package/dist/generated/themes/Input.css.d.ts +1 -1
- package/dist/generated/themes/Input.css.js +1 -1
- package/dist/generated/themes/Input.css.js.map +1 -1
- package/dist/generated/themes/InputIcon.css.d.ts +1 -1
- package/dist/generated/themes/InputIcon.css.js +1 -1
- package/dist/generated/themes/InputIcon.css.js.map +1 -1
- package/dist/generated/themes/InputSharedStyles.css.d.ts +1 -1
- package/dist/generated/themes/InputSharedStyles.css.js +1 -1
- package/dist/generated/themes/InputSharedStyles.css.js.map +1 -1
- package/dist/generated/themes/Label.css.d.ts +1 -1
- package/dist/generated/themes/Label.css.js +1 -1
- package/dist/generated/themes/Label.css.js.map +1 -1
- package/dist/generated/themes/Link.css.d.ts +1 -1
- package/dist/generated/themes/Link.css.js +1 -1
- package/dist/generated/themes/Link.css.js.map +1 -1
- package/dist/generated/themes/List.css.d.ts +1 -1
- package/dist/generated/themes/List.css.js +1 -1
- package/dist/generated/themes/List.css.js.map +1 -1
- package/dist/generated/themes/ListItem.css.d.ts +1 -1
- package/dist/generated/themes/ListItem.css.js +1 -1
- package/dist/generated/themes/ListItem.css.js.map +1 -1
- package/dist/generated/themes/ListItemBase.css.d.ts +1 -1
- package/dist/generated/themes/ListItemBase.css.js +1 -1
- package/dist/generated/themes/ListItemBase.css.js.map +1 -1
- package/dist/generated/themes/ListItemCustom.css.d.ts +1 -1
- package/dist/generated/themes/ListItemCustom.css.js +1 -1
- package/dist/generated/themes/ListItemCustom.css.js.map +1 -1
- package/dist/generated/themes/ListItemGroup.css.d.ts +1 -1
- package/dist/generated/themes/ListItemGroup.css.js +1 -1
- package/dist/generated/themes/ListItemGroup.css.js.map +1 -1
- package/dist/generated/themes/ListItemGroupHeader.css.d.ts +1 -1
- package/dist/generated/themes/ListItemGroupHeader.css.js +1 -1
- package/dist/generated/themes/ListItemGroupHeader.css.js.map +1 -1
- package/dist/generated/themes/ListItemIcon.css.d.ts +1 -1
- package/dist/generated/themes/ListItemIcon.css.js +1 -1
- package/dist/generated/themes/ListItemIcon.css.js.map +1 -1
- package/dist/generated/themes/Menu.css.d.ts +1 -1
- package/dist/generated/themes/Menu.css.js +1 -1
- package/dist/generated/themes/Menu.css.js.map +1 -1
- package/dist/generated/themes/MenuItem.css.d.ts +1 -1
- package/dist/generated/themes/MenuItem.css.js +1 -1
- package/dist/generated/themes/MenuItem.css.js.map +1 -1
- package/dist/generated/themes/MessageStrip.css.d.ts +1 -1
- package/dist/generated/themes/MessageStrip.css.js +1 -1
- package/dist/generated/themes/MessageStrip.css.js.map +1 -1
- package/dist/generated/themes/MonthPicker.css.d.ts +1 -1
- package/dist/generated/themes/MonthPicker.css.js +1 -1
- package/dist/generated/themes/MonthPicker.css.js.map +1 -1
- package/dist/generated/themes/MultiComboBox.css.d.ts +1 -1
- package/dist/generated/themes/MultiComboBox.css.js +1 -1
- package/dist/generated/themes/MultiComboBox.css.js.map +1 -1
- package/dist/generated/themes/MultiComboBoxItem.css.d.ts +1 -1
- package/dist/generated/themes/MultiComboBoxItem.css.js +1 -1
- package/dist/generated/themes/MultiComboBoxItem.css.js.map +1 -1
- package/dist/generated/themes/MultiComboBoxPopover.css.d.ts +1 -1
- package/dist/generated/themes/MultiComboBoxPopover.css.js +1 -1
- package/dist/generated/themes/MultiComboBoxPopover.css.js.map +1 -1
- package/dist/generated/themes/MultiInput.css.d.ts +1 -1
- package/dist/generated/themes/MultiInput.css.js +1 -1
- package/dist/generated/themes/MultiInput.css.js.map +1 -1
- package/dist/generated/themes/OptionBase.css.d.ts +1 -1
- package/dist/generated/themes/OptionBase.css.js +1 -1
- package/dist/generated/themes/OptionBase.css.js.map +1 -1
- package/dist/generated/themes/Panel.css.d.ts +1 -1
- package/dist/generated/themes/Panel.css.js +1 -1
- package/dist/generated/themes/Panel.css.js.map +1 -1
- package/dist/generated/themes/Popover.css.d.ts +1 -1
- package/dist/generated/themes/Popover.css.js +1 -1
- package/dist/generated/themes/Popover.css.js.map +1 -1
- package/dist/generated/themes/PopupsCommon.css.d.ts +1 -1
- package/dist/generated/themes/PopupsCommon.css.js +1 -1
- package/dist/generated/themes/PopupsCommon.css.js.map +1 -1
- package/dist/generated/themes/ProgressIndicator.css.d.ts +1 -1
- package/dist/generated/themes/ProgressIndicator.css.js +1 -1
- package/dist/generated/themes/ProgressIndicator.css.js.map +1 -1
- package/dist/generated/themes/RadioButton.css.d.ts +1 -1
- package/dist/generated/themes/RadioButton.css.js +1 -1
- package/dist/generated/themes/RadioButton.css.js.map +1 -1
- package/dist/generated/themes/RangeSlider.css.d.ts +1 -1
- package/dist/generated/themes/RangeSlider.css.js +1 -1
- package/dist/generated/themes/RangeSlider.css.js.map +1 -1
- package/dist/generated/themes/RatingIndicator.css.d.ts +1 -1
- package/dist/generated/themes/RatingIndicator.css.js +1 -1
- package/dist/generated/themes/RatingIndicator.css.js.map +1 -1
- package/dist/generated/themes/ResponsivePopover.css.d.ts +1 -1
- package/dist/generated/themes/ResponsivePopover.css.js +1 -1
- package/dist/generated/themes/ResponsivePopover.css.js.map +1 -1
- package/dist/generated/themes/ResponsivePopoverCommon.css.d.ts +1 -1
- package/dist/generated/themes/ResponsivePopoverCommon.css.js +1 -1
- package/dist/generated/themes/ResponsivePopoverCommon.css.js.map +1 -1
- package/dist/generated/themes/SegmentedButton.css.d.ts +1 -1
- package/dist/generated/themes/SegmentedButton.css.js +1 -1
- package/dist/generated/themes/SegmentedButton.css.js.map +1 -1
- package/dist/generated/themes/SegmentedButtonItem.css.d.ts +1 -1
- package/dist/generated/themes/SegmentedButtonItem.css.js +1 -1
- package/dist/generated/themes/SegmentedButtonItem.css.js.map +1 -1
- package/dist/generated/themes/Select.css.d.ts +1 -1
- package/dist/generated/themes/Select.css.js +1 -1
- package/dist/generated/themes/Select.css.js.map +1 -1
- package/dist/generated/themes/SliderBase.css.d.ts +1 -1
- package/dist/generated/themes/SliderBase.css.js +1 -1
- package/dist/generated/themes/SliderBase.css.js.map +1 -1
- package/dist/generated/themes/SplitButton.css.d.ts +1 -1
- package/dist/generated/themes/SplitButton.css.js +1 -1
- package/dist/generated/themes/SplitButton.css.js.map +1 -1
- package/dist/generated/themes/StepInput.css.d.ts +1 -1
- package/dist/generated/themes/StepInput.css.js +1 -1
- package/dist/generated/themes/StepInput.css.js.map +1 -1
- package/dist/generated/themes/SuggestionItem.css.d.ts +1 -1
- package/dist/generated/themes/SuggestionItem.css.js +1 -1
- package/dist/generated/themes/SuggestionItem.css.js.map +1 -1
- package/dist/generated/themes/SuggestionItemCustom.css.d.ts +1 -1
- package/dist/generated/themes/SuggestionItemCustom.css.js +1 -1
- package/dist/generated/themes/SuggestionItemCustom.css.js.map +1 -1
- package/dist/generated/themes/Switch.css.d.ts +1 -1
- package/dist/generated/themes/Switch.css.js +1 -1
- package/dist/generated/themes/Switch.css.js.map +1 -1
- package/dist/generated/themes/TabContainer.css.d.ts +1 -1
- package/dist/generated/themes/TabContainer.css.js +1 -1
- package/dist/generated/themes/TabContainer.css.js.map +1 -1
- package/dist/generated/themes/TabInOverflow.css.d.ts +1 -1
- package/dist/generated/themes/TabInOverflow.css.js +1 -1
- package/dist/generated/themes/TabInOverflow.css.js.map +1 -1
- package/dist/generated/themes/TabInStrip.css.d.ts +1 -1
- package/dist/generated/themes/TabInStrip.css.js +1 -1
- package/dist/generated/themes/TabInStrip.css.js.map +1 -1
- package/dist/generated/themes/TabSemanticIcon.css.d.ts +1 -1
- package/dist/generated/themes/TabSemanticIcon.css.js +1 -1
- package/dist/generated/themes/TabSemanticIcon.css.js.map +1 -1
- package/dist/generated/themes/TabSeparatorInOverflow.css.d.ts +1 -1
- package/dist/generated/themes/TabSeparatorInOverflow.css.js +1 -1
- package/dist/generated/themes/TabSeparatorInOverflow.css.js.map +1 -1
- package/dist/generated/themes/Table.css.d.ts +1 -1
- package/dist/generated/themes/Table.css.js +1 -1
- package/dist/generated/themes/Table.css.js.map +1 -1
- package/dist/generated/themes/TableCell.css.d.ts +1 -1
- package/dist/generated/themes/TableCell.css.js +1 -1
- package/dist/generated/themes/TableCell.css.js.map +1 -1
- package/dist/generated/themes/TableCellBase.css.d.ts +1 -1
- package/dist/generated/themes/TableCellBase.css.js +1 -1
- package/dist/generated/themes/TableCellBase.css.js.map +1 -1
- package/dist/generated/themes/TableGrowing.css.d.ts +1 -1
- package/dist/generated/themes/TableGrowing.css.js +1 -1
- package/dist/generated/themes/TableGrowing.css.js.map +1 -1
- package/dist/generated/themes/TableHeaderCell.css.d.ts +1 -1
- package/dist/generated/themes/TableHeaderCell.css.js +1 -1
- package/dist/generated/themes/TableHeaderCell.css.js.map +1 -1
- package/dist/generated/themes/TableHeaderCellActionBase.css.d.ts +2 -0
- package/dist/generated/themes/TableHeaderCellActionBase.css.js +8 -0
- package/dist/generated/themes/TableHeaderCellActionBase.css.js.map +1 -0
- package/dist/generated/themes/TableHeaderRow.css.d.ts +1 -1
- package/dist/generated/themes/TableHeaderRow.css.js +1 -1
- package/dist/generated/themes/TableHeaderRow.css.js.map +1 -1
- package/dist/generated/themes/TableRow.css.d.ts +1 -1
- package/dist/generated/themes/TableRow.css.js +1 -1
- package/dist/generated/themes/TableRow.css.js.map +1 -1
- package/dist/generated/themes/TableRowActionBase.css.d.ts +2 -0
- package/dist/generated/themes/TableRowActionBase.css.js +8 -0
- package/dist/generated/themes/TableRowActionBase.css.js.map +1 -0
- package/dist/generated/themes/TableRowBase.css.d.ts +1 -1
- package/dist/generated/themes/TableRowBase.css.js +1 -1
- package/dist/generated/themes/TableRowBase.css.js.map +1 -1
- package/dist/generated/themes/Tag.css.d.ts +1 -1
- package/dist/generated/themes/Tag.css.js +1 -1
- package/dist/generated/themes/Tag.css.js.map +1 -1
- package/dist/generated/themes/Text.css.d.ts +1 -1
- package/dist/generated/themes/Text.css.js +1 -1
- package/dist/generated/themes/Text.css.js.map +1 -1
- package/dist/generated/themes/TextArea.css.d.ts +1 -1
- package/dist/generated/themes/TextArea.css.js +1 -1
- package/dist/generated/themes/TextArea.css.js.map +1 -1
- package/dist/generated/themes/TimePicker.css.d.ts +1 -1
- package/dist/generated/themes/TimePicker.css.js +1 -1
- package/dist/generated/themes/TimePicker.css.js.map +1 -1
- package/dist/generated/themes/TimePickerClock.css.d.ts +1 -1
- package/dist/generated/themes/TimePickerClock.css.js +1 -1
- package/dist/generated/themes/TimePickerClock.css.js.map +1 -1
- package/dist/generated/themes/TimePickerPopover.css.d.ts +1 -1
- package/dist/generated/themes/TimePickerPopover.css.js +1 -1
- package/dist/generated/themes/TimePickerPopover.css.js.map +1 -1
- package/dist/generated/themes/Toast.css.d.ts +1 -1
- package/dist/generated/themes/Toast.css.js +1 -1
- package/dist/generated/themes/Toast.css.js.map +1 -1
- package/dist/generated/themes/ToggleButton.css.d.ts +1 -1
- package/dist/generated/themes/ToggleButton.css.js +1 -1
- package/dist/generated/themes/ToggleButton.css.js.map +1 -1
- package/dist/generated/themes/Token.css.d.ts +1 -1
- package/dist/generated/themes/Token.css.js +1 -1
- package/dist/generated/themes/Token.css.js.map +1 -1
- package/dist/generated/themes/Tokenizer.css.d.ts +1 -1
- package/dist/generated/themes/Tokenizer.css.js +1 -1
- package/dist/generated/themes/Tokenizer.css.js.map +1 -1
- package/dist/generated/themes/TokenizerPopover.css.d.ts +1 -1
- package/dist/generated/themes/TokenizerPopover.css.js +1 -1
- package/dist/generated/themes/TokenizerPopover.css.js.map +1 -1
- package/dist/generated/themes/Toolbar.css.d.ts +1 -1
- package/dist/generated/themes/Toolbar.css.js +1 -1
- package/dist/generated/themes/Toolbar.css.js.map +1 -1
- package/dist/generated/themes/ToolbarPopover.css.d.ts +1 -1
- package/dist/generated/themes/ToolbarPopover.css.js +1 -1
- package/dist/generated/themes/ToolbarPopover.css.js.map +1 -1
- package/dist/generated/themes/ToolbarSelect.css.d.ts +2 -0
- package/dist/generated/themes/{MyDemo.css.js → ToolbarSelect.css.js} +3 -2
- package/dist/generated/themes/ToolbarSelect.css.js.map +1 -0
- package/dist/generated/themes/TreeItem.css.d.ts +1 -1
- package/dist/generated/themes/TreeItem.css.js +1 -1
- package/dist/generated/themes/TreeItem.css.js.map +1 -1
- package/dist/generated/themes/ValueStateMessage.css.d.ts +1 -1
- package/dist/generated/themes/ValueStateMessage.css.js +1 -1
- package/dist/generated/themes/ValueStateMessage.css.js.map +1 -1
- package/dist/generated/themes/YearPicker.css.d.ts +1 -1
- package/dist/generated/themes/YearPicker.css.js +1 -1
- package/dist/generated/themes/YearPicker.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js.map +1 -1
- package/dist/popup-utils/PopoverRegistry.js +2 -2
- package/dist/popup-utils/PopoverRegistry.js.map +1 -1
- package/dist/types/AvatarColorScheme.d.ts +5 -0
- package/dist/types/AvatarColorScheme.js +5 -0
- package/dist/types/AvatarColorScheme.js.map +1 -1
- package/dist/types/BarAccessibleRole.d.ts +18 -0
- package/dist/types/BarAccessibleRole.js +20 -0
- package/dist/types/BarAccessibleRole.js.map +1 -0
- package/dist/types/ButtonBadgeDesign.d.ts +25 -0
- package/dist/types/ButtonBadgeDesign.js +27 -0
- package/dist/types/ButtonBadgeDesign.js.map +1 -0
- package/dist/types/ExpandableTextTemplateParams.d.ts +13 -0
- package/dist/types/ExpandableTextTemplateParams.js +2 -0
- package/dist/types/ExpandableTextTemplateParams.js.map +1 -0
- package/dist/types/InputKeyHint.d.ts +16 -0
- package/dist/types/InputKeyHint.js +18 -0
- package/dist/types/InputKeyHint.js.map +1 -0
- package/dist/types/InteractiveAreaSize.d.ts +19 -0
- package/dist/types/InteractiveAreaSize.js +21 -0
- package/dist/types/InteractiveAreaSize.js.map +1 -0
- package/dist/types/ListItemAccessibleRole.d.ts +5 -0
- package/dist/types/ListItemAccessibleRole.js +5 -0
- package/dist/types/ListItemAccessibleRole.js.map +1 -1
- package/dist/types/TableCellHorizontalAlign.d.ts +1 -0
- package/dist/types/TableCellHorizontalAlign.js +1 -0
- package/dist/types/TableCellHorizontalAlign.js.map +1 -1
- package/dist/types/TableGrowingMode.d.ts +3 -0
- package/dist/types/TableGrowingMode.js +3 -0
- package/dist/types/TableGrowingMode.js.map +1 -1
- package/dist/types/TableOverflowMode.d.ts +1 -0
- package/dist/types/TableOverflowMode.js +1 -0
- package/dist/types/TableOverflowMode.js.map +1 -1
- package/dist/types/TableSelectionMode.d.ts +2 -0
- package/dist/types/TableSelectionMode.js +2 -0
- package/dist/types/TableSelectionMode.js.map +1 -1
- package/dist/vscode.html-custom-data.json +339 -105
- package/dist/web-types.json +885 -208
- package/package-scripts.cjs +4 -0
- package/package.json +18 -11
- package/src/AvatarGroupTemplate.tsx +1 -0
- package/src/AvatarTemplate.tsx +1 -1
- package/src/BarTemplate.tsx +2 -2
- package/src/BreadcrumbsPopoverTemplate.tsx +6 -1
- package/src/BusyIndicatorTemplate.tsx +1 -0
- package/src/ButtonBadgeTemplate.tsx +6 -0
- package/src/ButtonTemplate.tsx +8 -5
- package/src/CalendarHeaderTemplate.tsx +12 -0
- package/src/CardHeaderTemplate.tsx +1 -2
- package/src/CarouselTemplate.tsx +3 -2
- package/src/ColorPaletteItemTemplate.tsx +1 -0
- package/src/ColorPaletteTemplate.tsx +2 -2
- package/src/ColorPickerTemplate.tsx +37 -37
- package/src/ComboBoxItemGroupTemplate.tsx +2 -2
- package/src/DatePickerInputTemplate.tsx +5 -4
- package/src/DatePickerPopoverTemplate.tsx +51 -0
- package/src/DateTimePickerTemplate.tsx +48 -51
- package/src/DayPickerTemplate.tsx +1 -0
- package/src/DialogTemplate.tsx +1 -1
- package/src/ExpandableTextTemplate.tsx +0 -1
- package/src/FormTemplate.tsx +3 -2
- package/src/InputPopoverTemplate.tsx +5 -2
- package/src/InputTemplate.tsx +14 -4
- package/src/ListBoxItemGroupTemplate.tsx +33 -0
- package/src/ListItemGroupHeaderTemplate.tsx +5 -3
- package/src/ListItemGroupTemplate.tsx +21 -19
- package/src/ListItemStandardTemplate.tsx +55 -16
- package/src/ListItemTemplate.tsx +2 -4
- package/src/ListTemplate.tsx +2 -1
- package/src/MenuItemTemplate.tsx +7 -19
- package/src/MenuTemplate.tsx +2 -0
- package/src/MessageStripTemplate.tsx +4 -3
- package/src/MultiComboBoxItemGroupTemplate.tsx +2 -2
- package/src/MultiComboBoxPopoverTemplate.tsx +150 -0
- package/src/MultiComboBoxTemplate.tsx +121 -0
- package/src/MultiInputTemplate.tsx +4 -0
- package/src/RangeSliderTemplate.tsx +2 -2
- package/src/ResponsivePopoverTemplate.tsx +1 -0
- package/src/SelectPopoverTemplate.tsx +107 -0
- package/src/SelectTemplate.tsx +78 -0
- package/src/SliderBaseTemplate.tsx +2 -9
- package/src/SliderTemplate.tsx +3 -2
- package/src/SplitButtonTemplate.tsx +0 -1
- package/src/SwitchTemplate.tsx +1 -7
- package/src/TabContainerTemplate.tsx +1 -0
- package/src/TableCellTemplate.tsx +15 -0
- package/src/TableGrowingTemplate.tsx +23 -0
- package/src/TableHeaderCellActionBaseTemplate.tsx +14 -0
- package/src/TableHeaderCellTemplate.tsx +26 -0
- package/src/TableHeaderRowTemplate.tsx +44 -0
- package/src/TableRowActionBaseTemplate.tsx +30 -0
- package/src/TableRowTemplate.tsx +77 -0
- package/src/TableTemplate.tsx +77 -0
- package/src/TagTemplate.tsx +2 -1
- package/src/TimePickerClockTemplate.tsx +35 -36
- package/src/TimePickerPopoverTemplate.tsx +54 -1
- package/src/TimePickerTemplate.tsx +7 -5
- package/src/TimeSelectionClocksTemplate.tsx +2 -1
- package/src/ToastTemplate.tsx +6 -4
- package/src/TokenTemplate.tsx +1 -0
- package/src/TokenizerPopoverTemplate.tsx +0 -1
- package/src/ToolbarButtonTemplate.tsx +1 -0
- package/src/ToolbarPopoverButtonTemplate.tsx +1 -0
- package/src/ToolbarPopoverSelectTemplate.tsx +4 -0
- package/src/ToolbarPopoverTemplate.tsx +1 -0
- package/src/ToolbarSelectTemplate.tsx +4 -0
- package/src/ToolbarTemplate.tsx +1 -0
- package/src/TreeItemBaseTemplate.tsx +7 -1
- package/src/TreeItemTemplate.tsx +1 -1
- package/src/YearPickerTemplate.tsx +1 -1
- package/src/features/ColorPaletteMoreColorsTemplate.tsx +2 -2
- package/src/features/InputSuggestionsTemplate.tsx +12 -6
- package/src/features/ListItemStandardExpandableTextTemplate.tsx +31 -0
- package/src/i18n/messagebundle.properties +57 -10
- package/src/i18n/messagebundle_ar.properties +32 -8
- package/src/i18n/messagebundle_bg.properties +33 -9
- package/src/i18n/messagebundle_ca.properties +32 -8
- package/src/i18n/messagebundle_cnr.properties +32 -8
- package/src/i18n/messagebundle_cs.properties +26 -2
- package/src/i18n/messagebundle_cy.properties +32 -8
- package/src/i18n/messagebundle_da.properties +32 -8
- package/src/i18n/messagebundle_de.properties +33 -9
- package/src/i18n/messagebundle_el.properties +32 -8
- package/src/i18n/messagebundle_en.properties +246 -3
- package/src/i18n/messagebundle_en_GB.properties +27 -3
- package/src/i18n/messagebundle_en_US_sappsd.properties +27 -3
- package/src/i18n/messagebundle_en_US_saprigi.properties +29 -3
- package/src/i18n/messagebundle_en_US_saptrc.properties +27 -3
- package/src/i18n/messagebundle_es.properties +33 -9
- package/src/i18n/messagebundle_es_MX.properties +32 -8
- package/src/i18n/messagebundle_et.properties +32 -8
- package/src/i18n/messagebundle_fi.properties +32 -8
- package/src/i18n/messagebundle_fr.properties +37 -13
- package/src/i18n/messagebundle_fr_CA.properties +36 -12
- package/src/i18n/messagebundle_hi.properties +32 -8
- package/src/i18n/messagebundle_hr.properties +38 -14
- package/src/i18n/messagebundle_hu.properties +33 -9
- package/src/i18n/messagebundle_id.properties +32 -8
- package/src/i18n/messagebundle_it.properties +48 -24
- package/src/i18n/messagebundle_iw.properties +32 -8
- package/src/i18n/messagebundle_ja.properties +32 -8
- package/src/i18n/messagebundle_kk.properties +27 -3
- package/src/i18n/messagebundle_ko.properties +33 -9
- package/src/i18n/messagebundle_lt.properties +32 -8
- package/src/i18n/messagebundle_lv.properties +45 -21
- package/src/i18n/messagebundle_mk.properties +32 -8
- package/src/i18n/messagebundle_ms.properties +34 -10
- package/src/i18n/messagebundle_nl.properties +32 -8
- package/src/i18n/messagebundle_no.properties +32 -8
- package/src/i18n/messagebundle_pl.properties +32 -8
- package/src/i18n/messagebundle_pt.properties +33 -9
- package/src/i18n/messagebundle_pt_PT.properties +32 -8
- package/src/i18n/messagebundle_ro.properties +34 -10
- package/src/i18n/messagebundle_ru.properties +34 -10
- package/src/i18n/messagebundle_sh.properties +32 -8
- package/src/i18n/messagebundle_sk.properties +33 -9
- package/src/i18n/messagebundle_sl.properties +34 -10
- package/src/i18n/messagebundle_sr.properties +32 -8
- package/src/i18n/messagebundle_sv.properties +33 -9
- package/src/i18n/messagebundle_th.properties +33 -9
- package/src/i18n/messagebundle_tr.properties +31 -7
- package/src/i18n/messagebundle_uk.properties +30 -6
- package/src/i18n/messagebundle_vi.properties +34 -10
- package/src/i18n/messagebundle_zh_CN.properties +32 -8
- package/src/i18n/messagebundle_zh_TW.properties +32 -8
- package/src/themes/Avatar.css +57 -3
- package/src/themes/Bar.css +22 -29
- package/src/themes/Breadcrumbs.css +1 -1
- package/src/themes/BusyIndicator.css +2 -2
- package/src/themes/Button.css +39 -1
- package/src/themes/ButtonBadge.css +17 -0
- package/src/themes/CalendarHeader.css +10 -0
- package/src/themes/CalendarLegendItem.css +14 -1
- package/src/themes/CheckBox.css +14 -1
- package/src/themes/ColorPaletteItem.css +3 -3
- package/src/themes/ColorPicker.css +51 -46
- package/src/themes/ComboBoxPopover.css +1 -2
- package/src/themes/DatePicker.css +4 -0
- package/src/themes/DatePickerPopover.css +7 -0
- package/src/themes/DateTimePickerPopover.css +9 -0
- package/src/themes/DayPicker.css +2 -1
- package/src/themes/FormItem.css +4 -5
- package/src/themes/Icon.css +1 -1
- package/src/themes/Input.css +8 -3
- package/src/themes/Label.css +1 -1
- package/src/themes/Link.css +9 -0
- package/src/themes/List.css +4 -3
- package/src/themes/ListItem.css +85 -13
- package/src/themes/ListItemBase.css +6 -6
- package/src/themes/Menu.css +7 -0
- package/src/themes/MenuItem.css +5 -1
- package/src/themes/MessageStrip.css +3 -3
- package/src/themes/OptionBase.css +1 -0
- package/src/themes/PopupsCommon.css +7 -4
- package/src/themes/SegmentedButton.css +1 -1
- package/src/themes/Select.css +14 -0
- package/src/themes/SplitButton.css +8 -8
- package/src/themes/Switch.css +1 -10
- package/src/themes/TabContainer.css +4 -0
- package/src/themes/TabInOverflow.css +6 -6
- package/src/themes/TabInStrip.css +48 -28
- package/src/themes/TabSemanticIcon.css +3 -3
- package/src/themes/Table.css +3 -3
- package/src/themes/TableCell.css +6 -1
- package/src/themes/TableCellBase.css +2 -2
- package/src/themes/TableGrowing.css +9 -6
- package/src/themes/TableHeaderCell.css +20 -3
- package/src/themes/TableHeaderCellActionBase.css +23 -0
- package/src/themes/TableHeaderRow.css +2 -0
- package/src/themes/TableRow.css +99 -73
- package/src/themes/TableRowActionBase.css +14 -0
- package/src/themes/TableRowBase.css +26 -8
- package/src/themes/Tag.css +1 -6
- package/src/themes/Text.css +9 -5
- package/src/themes/TextArea.css +10 -24
- package/src/themes/TimePicker.css +4 -0
- package/src/themes/TimePickerClock.css +180 -9
- package/src/themes/TimePickerPopover.css +5 -0
- package/src/themes/Toast.css +1 -1
- package/src/themes/Token.css +10 -10
- package/src/themes/Toolbar.css +13 -1
- package/src/themes/ToolbarSelect.css +8 -0
- package/src/themes/TreeItem.css +9 -0
- package/src/themes/base/Avatar-parameters.css +1 -4
- package/src/themes/base/Bar-parameters.css +2 -6
- package/src/themes/base/BusyIndicator-parameters.css +1 -2
- package/src/themes/base/Button-parameters.css +1 -9
- package/src/themes/base/ButtonBadge-parameters.css +3 -0
- package/src/themes/base/CalendarHeader-parameters.css +0 -1
- package/src/themes/base/CalendarLegendItem-parameters.css +1 -1
- package/src/themes/base/CheckBox-parameters.css +0 -7
- package/src/themes/base/ColorPalette-parameters.css +0 -5
- package/src/themes/base/ColorPicker-parameters.css +4 -5
- package/src/themes/base/DatePicker-parameters.css +0 -3
- package/src/themes/base/DayPicker-parameters.css +0 -18
- package/src/themes/base/Input-parameters.css +1 -5
- package/src/themes/base/InputIcon-parameters.css +2 -2
- package/src/themes/base/Link-parameters.css +1 -1
- package/src/themes/base/ListItemBase-parameters.css +0 -2
- package/src/themes/base/Menu-parameters.css +0 -1
- package/src/themes/base/MessageStrip-parameters.css +4 -15
- package/src/themes/base/Panel-parameters.css +0 -1
- package/src/themes/base/ProgressIndicator-parameters.css +0 -1
- package/src/themes/base/RadioButton-parameters.css +0 -1
- package/src/themes/base/SegmentedButtton-parameters.css +0 -4
- package/src/themes/base/Select-parameters.css +0 -5
- package/src/themes/base/SliderBase-parameters.css +0 -1
- package/src/themes/base/SplitButton-parameters.css +1 -16
- package/src/themes/base/Switch-parameters.css +0 -3
- package/src/themes/base/TabContainer-parameters.css +4 -27
- package/src/themes/base/Table-parameters.css +4 -9
- package/src/themes/base/Tag-parameters.css +0 -3
- package/src/themes/base/TextArea-parameters.css +0 -2
- package/src/themes/base/TimePicker-parameters.css +0 -1
- package/src/themes/base/TimelineItem-parameters.css +0 -5
- package/src/themes/base/Toast-parameters.css +2 -2
- package/src/themes/base/ToggleButton-parameters.css +0 -6
- package/src/themes/base/Token-parameters.css +0 -5
- package/src/themes/base/Toolbar-parameters.css +2 -1
- package/src/themes/base/YearPicker-parameters.css +0 -1
- package/src/themes/base/rtl-parameters.css +0 -4
- package/src/themes/base/sizes-parameters.css +35 -39
- package/src/themes/sap_fiori_3/Button-parameters.css +0 -4
- package/src/themes/sap_fiori_3/DayPicker-parameters.css +0 -1
- package/src/themes/sap_fiori_3/Input-parameters.css +1 -0
- package/src/themes/sap_fiori_3/MessageStrip-parameters.css +2 -3
- package/src/themes/sap_fiori_3/TabContainer-parameters.css +0 -3
- package/src/themes/sap_fiori_3/parameters-bundle.css +2 -2
- package/src/themes/sap_fiori_3/sizes-parameters.css +6 -0
- package/src/themes/sap_fiori_3_dark/Button-parameters.css +0 -4
- package/src/themes/sap_fiori_3_dark/Input-parameters.css +1 -0
- package/src/themes/sap_fiori_3_dark/MessageStrip-parameters.css +2 -4
- package/src/themes/sap_fiori_3_dark/TabContainer-parameters.css +0 -3
- package/src/themes/sap_fiori_3_dark/parameters-bundle.css +1 -1
- package/src/themes/sap_fiori_3_dark/sizes-parameters.css +6 -0
- package/src/themes/sap_fiori_3_hcb/Button-parameters.css +0 -2
- package/src/themes/sap_fiori_3_hcb/ColorPicker-parameters.css +5 -1
- package/src/themes/sap_fiori_3_hcb/DayPicker-parameters.css +0 -1
- package/src/themes/sap_fiori_3_hcb/Input-parameters.css +1 -2
- package/src/themes/sap_fiori_3_hcb/MessageStrip-parameters.css +3 -6
- package/src/themes/sap_fiori_3_hcb/Select-parameters.css +0 -5
- package/src/themes/sap_fiori_3_hcb/SliderBase-parameters.css +0 -1
- package/src/themes/sap_fiori_3_hcb/SplitButton-parameters.css +4 -10
- package/src/themes/sap_fiori_3_hcb/TabContainer-parameters.css +2 -21
- package/src/themes/sap_fiori_3_hcb/parameters-bundle.css +4 -5
- package/src/themes/sap_fiori_3_hcb/sizes-parameters.css +5 -2
- package/src/themes/sap_fiori_3_hcw/Button-parameters.css +0 -2
- package/src/themes/sap_fiori_3_hcw/ColorPicker-parameters.css +5 -1
- package/src/themes/sap_fiori_3_hcw/DayPicker-parameters.css +0 -1
- package/src/themes/sap_fiori_3_hcw/Input-parameters.css +1 -2
- package/src/themes/sap_fiori_3_hcw/MessageStrip-parameters.css +3 -6
- package/src/themes/sap_fiori_3_hcw/Select-parameters.css +0 -5
- package/src/themes/sap_fiori_3_hcw/SliderBase-parameters.css +0 -1
- package/src/themes/sap_fiori_3_hcw/SplitButton-parameters.css +3 -9
- package/src/themes/sap_fiori_3_hcw/TabContainer-parameters.css +2 -21
- package/src/themes/sap_fiori_3_hcw/parameters-bundle.css +5 -5
- package/src/themes/sap_fiori_3_hcw/sizes-parameters.css +5 -2
- package/src/themes/sap_horizon/Avatar-parameters.css +2 -2
- package/src/themes/sap_horizon/Button-parameters.css +1 -3
- package/src/themes/sap_horizon/CalendarHeader-parameters.css +0 -1
- package/src/themes/sap_horizon/CalendarLegendItem-parameters.css +1 -0
- package/src/themes/sap_horizon/ColorPalette-parameters.css +0 -5
- package/src/themes/sap_horizon/ColorPicker-parameters.css +0 -4
- package/src/themes/sap_horizon/DatePicker-parameters.css +0 -1
- package/src/themes/sap_horizon/DayPicker-parameters.css +0 -5
- package/src/themes/sap_horizon/InputIcon-parameters.css +1 -1
- package/src/themes/sap_horizon/Link-parameters.css +1 -0
- package/src/themes/sap_horizon/Panel-parameters.css +0 -1
- package/src/themes/sap_horizon/ProgressIndicatorLayout-parameters.css +0 -1
- package/src/themes/sap_horizon/RadioButton-parameters.css +5 -1
- package/src/themes/sap_horizon/SegmentedButtton-parameters.css +0 -4
- package/src/themes/sap_horizon/SplitButton-parameters.css +1 -6
- package/src/themes/sap_horizon/Switch-parameters.css +7 -9
- package/src/themes/sap_horizon/TabContainer-parameters.css +4 -10
- package/src/themes/sap_horizon/Tag-parameters.css +32 -2
- package/src/themes/sap_horizon/TimePicker-parameters.css +0 -1
- package/src/themes/sap_horizon/Token-parameters.css +0 -5
- package/src/themes/sap_horizon/parameters-bundle.css +3 -4
- package/src/themes/sap_horizon/sizes-parameters.css +0 -4
- package/src/themes/sap_horizon_dark/Avatar-parameters.css +1 -1
- package/src/themes/sap_horizon_dark/Button-parameters.css +1 -3
- package/src/themes/sap_horizon_dark/CalendarHeader-parameters.css +0 -1
- package/src/themes/sap_horizon_dark/CalendarLegendItem-parameters.css +1 -0
- package/src/themes/sap_horizon_dark/ColorPalette-parameters.css +0 -5
- package/src/themes/sap_horizon_dark/ColorPicker-parameters.css +0 -4
- package/src/themes/sap_horizon_dark/DatePicker-parameters.css +0 -1
- package/src/themes/sap_horizon_dark/DayPicker-parameters.css +0 -5
- package/src/themes/sap_horizon_dark/InputIcon-parameters.css +1 -1
- package/src/themes/sap_horizon_dark/Link-parameters.css +1 -0
- package/src/themes/sap_horizon_dark/MessageStrip-parameters.css +2 -4
- package/src/themes/sap_horizon_dark/Panel-parameters.css +0 -1
- package/src/themes/sap_horizon_dark/RadioButton-parameters.css +5 -1
- package/src/themes/sap_horizon_dark/SegmentedButtton-parameters.css +0 -4
- package/src/themes/sap_horizon_dark/SplitButton-parameters.css +0 -5
- package/src/themes/sap_horizon_dark/Switch-parameters.css +7 -9
- package/src/themes/sap_horizon_dark/TabContainer-parameters.css +4 -10
- package/src/themes/sap_horizon_dark/Tag-parameters.css +32 -2
- package/src/themes/sap_horizon_dark/TimePicker-parameters.css +0 -1
- package/src/themes/sap_horizon_dark/Token-parameters.css +0 -5
- package/src/themes/sap_horizon_dark/parameters-bundle.css +4 -4
- package/src/themes/sap_horizon_dark/sizes-parameters.css +0 -4
- package/src/themes/sap_horizon_hcb/Avatar-parameters.css +2 -2
- package/src/themes/sap_horizon_hcb/BusyIndicator-parameters.css +0 -1
- package/src/themes/sap_horizon_hcb/CalendarHeader-parameters.css +0 -1
- package/src/themes/sap_horizon_hcb/ColorPicker-parameters.css +3 -4
- package/src/themes/sap_horizon_hcb/DayPicker-parameters.css +0 -5
- package/src/themes/sap_horizon_hcb/Input-parameters.css +1 -2
- package/src/themes/sap_horizon_hcb/Link-parameters.css +1 -0
- package/src/themes/sap_horizon_hcb/MessageStrip-parameters.css +3 -6
- package/src/themes/sap_horizon_hcb/Panel-parameters.css +0 -1
- package/src/themes/sap_horizon_hcb/RadioButton-parameters.css +5 -5
- package/src/themes/sap_horizon_hcb/SegmentedButtton-parameters.css +0 -7
- package/src/themes/sap_horizon_hcb/Select-parameters.css +0 -5
- package/src/themes/sap_horizon_hcb/SplitButton-parameters.css +4 -10
- package/src/themes/sap_horizon_hcb/Switch-parameters.css +7 -30
- package/src/themes/sap_horizon_hcb/TabContainer-parameters.css +6 -24
- package/src/themes/sap_horizon_hcb/Tag-parameters.css +20 -22
- package/src/themes/sap_horizon_hcb/parameters-bundle.css +4 -4
- package/src/themes/sap_horizon_hcb/sizes-parameters.css +2 -3
- package/src/themes/sap_horizon_hcw/Avatar-parameters.css +2 -2
- package/src/themes/sap_horizon_hcw/BusyIndicator-parameters.css +0 -1
- package/src/themes/sap_horizon_hcw/CalendarHeader-parameters.css +0 -1
- package/src/themes/sap_horizon_hcw/ColorPicker-parameters.css +3 -4
- package/src/themes/sap_horizon_hcw/DayPicker-parameters.css +0 -5
- package/src/themes/sap_horizon_hcw/Input-parameters.css +1 -2
- package/src/themes/sap_horizon_hcw/Link-parameters.css +1 -0
- package/src/themes/sap_horizon_hcw/MessageStrip-parameters.css +3 -6
- package/src/themes/sap_horizon_hcw/Panel-parameters.css +0 -1
- package/src/themes/sap_horizon_hcw/RadioButton-parameters.css +5 -5
- package/src/themes/sap_horizon_hcw/SegmentedButtton-parameters.css +0 -7
- package/src/themes/sap_horizon_hcw/Select-parameters.css +0 -5
- package/src/themes/sap_horizon_hcw/SplitButton-parameters.css +4 -10
- package/src/themes/sap_horizon_hcw/Switch-parameters.css +7 -9
- package/src/themes/sap_horizon_hcw/TabContainer-parameters.css +6 -24
- package/src/themes/sap_horizon_hcw/Tag-parameters.css +20 -23
- package/src/themes/sap_horizon_hcw/parameters-bundle.css +4 -4
- package/src/themes/sap_horizon_hcw/sizes-parameters.css +2 -3
- package/vitest.config.js +9 -0
- package/cypress/specs/ColorPalette.cy.ts +0 -47
- package/cypress/specs/ColorPicker.cy.ts +0 -27
- package/cypress/specs/ComboBox.cy.ts +0 -22
- package/cypress/specs/F6.cy.ts +0 -793
- package/cypress/specs/Form.cy.ts +0 -856
- package/cypress/specs/FormSupport.cy.ts +0 -960
- package/cypress/specs/Input.cy.ts +0 -131
- package/cypress/specs/Link.cy.ts +0 -16
- package/cypress/specs/List.cy.ts +0 -155
- package/cypress/specs/MessageStrip.cy.ts +0 -91
- package/cypress/specs/MultiComboBox.cy.ts +0 -22
- package/cypress/specs/MultiInput.cy.ts +0 -47
- package/cypress/specs/Popover.cy.ts +0 -62
- package/cypress/specs/RTL.cy.ts +0 -17
- package/cypress/specs/RatingIndicator.cy.ts +0 -66
- package/cypress/specs/Select.cy.ts +0 -39
- package/cypress/specs/Table.cy.ts +0 -606
- package/cypress/specs/TableGrowing.cy.ts +0 -280
- package/cypress/specs/TableLoading.cy.ts +0 -44
- package/cypress/specs/TableUtils.cy.ts +0 -26
- package/cypress/specs/Tokenizer.cy.ts +0 -114
- package/cypress/specs/Toolbar.cy.ts +0 -99
- package/cypress/specs/Tree.cy.ts +0 -29
- package/cypress/specs/base/Tooltips.cy.ts +0 -55
- package/dist/MyDemo.d.ts +0 -34
- package/dist/MyDemo.js +0 -59
- package/dist/MyDemo.js.map +0 -1
- package/dist/MyDemoTemplate.d.ts +0 -2
- package/dist/MyDemoTemplate.js +0 -5
- package/dist/MyDemoTemplate.js.map +0 -1
- package/dist/NavigationMenu.d.ts +0 -34
- package/dist/NavigationMenu.js +0 -64
- package/dist/NavigationMenu.js.map +0 -1
- package/dist/NavigationMenuItem.d.ts +0 -76
- package/dist/NavigationMenuItem.js +0 -76
- package/dist/NavigationMenuItem.js.map +0 -1
- package/dist/NavigationMenuItemTemplate.d.ts +0 -3
- package/dist/NavigationMenuItemTemplate.js +0 -44
- package/dist/NavigationMenuItemTemplate.js.map +0 -1
- package/dist/NavigationMenuTemplate.d.ts +0 -2
- package/dist/NavigationMenuTemplate.js +0 -15
- package/dist/NavigationMenuTemplate.js.map +0 -1
- package/dist/SuggestionItemGroupTemplate.d.ts +0 -2
- package/dist/SuggestionItemGroupTemplate.js +0 -5
- package/dist/SuggestionItemGroupTemplate.js.map +0 -1
- package/dist/css/themes/BrowserScrollbar.css +0 -1
- package/dist/css/themes/MyDemo.css +0 -0
- package/dist/css/themes/NavigationMenu.css +0 -1
- package/dist/css/themes/NavigationMenuItem.css +0 -1
- package/dist/css/themes/sap_horizon_dark_exp/parameters-bundle.css +0 -1
- package/dist/css/themes/sap_horizon_exp/parameters-bundle.css +0 -1
- package/dist/css/themes/sap_horizon_hcb_exp/parameters-bundle.css +0 -1
- package/dist/css/themes/sap_horizon_hcw_exp/parameters-bundle.css +0 -1
- package/dist/generated/assets/i18n/messagebundle_in.json +0 -1
- package/dist/generated/assets/themes/sap_horizon_dark_exp/parameters-bundle.css.json +0 -1
- package/dist/generated/assets/themes/sap_horizon_exp/parameters-bundle.css.json +0 -1
- package/dist/generated/assets/themes/sap_horizon_hcb_exp/parameters-bundle.css.json +0 -1
- package/dist/generated/assets/themes/sap_horizon_hcw_exp/parameters-bundle.css.json +0 -1
- package/dist/generated/templates/MultiComboBoxPopoverTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/MultiComboBoxPopoverTemplate.lit.js +0 -29
- package/dist/generated/templates/MultiComboBoxPopoverTemplate.lit.js.map +0 -1
- package/dist/generated/templates/MultiComboBoxTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/MultiComboBoxTemplate.lit.js +0 -39
- package/dist/generated/templates/MultiComboBoxTemplate.lit.js.map +0 -1
- package/dist/generated/templates/SelectPopoverTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/SelectPopoverTemplate.lit.js +0 -19
- package/dist/generated/templates/SelectPopoverTemplate.lit.js.map +0 -1
- package/dist/generated/templates/SelectTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/SelectTemplate.lit.js +0 -24
- package/dist/generated/templates/SelectTemplate.lit.js.map +0 -1
- package/dist/generated/templates/TableCellTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/TableCellTemplate.lit.js +0 -10
- package/dist/generated/templates/TableCellTemplate.lit.js.map +0 -1
- package/dist/generated/templates/TableGrowingTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/TableGrowingTemplate.lit.js +0 -9
- package/dist/generated/templates/TableGrowingTemplate.lit.js.map +0 -1
- package/dist/generated/templates/TableHeaderCellTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/TableHeaderCellTemplate.lit.js +0 -7
- package/dist/generated/templates/TableHeaderCellTemplate.lit.js.map +0 -1
- package/dist/generated/templates/TableHeaderRowTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/TableHeaderRowTemplate.lit.js +0 -11
- package/dist/generated/templates/TableHeaderRowTemplate.lit.js.map +0 -1
- package/dist/generated/templates/TableRowTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/TableRowTemplate.lit.js +0 -14
- package/dist/generated/templates/TableRowTemplate.lit.js.map +0 -1
- package/dist/generated/templates/TableTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/TableTemplate.lit.js +0 -12
- package/dist/generated/templates/TableTemplate.lit.js.map +0 -1
- package/dist/generated/themes/BrowserScrollbar.css.d.ts +0 -2
- package/dist/generated/themes/BrowserScrollbar.css.js +0 -8
- package/dist/generated/themes/BrowserScrollbar.css.js.map +0 -1
- package/dist/generated/themes/MyDemo.css.d.ts +0 -2
- package/dist/generated/themes/MyDemo.css.js.map +0 -1
- package/dist/generated/themes/NavigationMenu.css.d.ts +0 -2
- package/dist/generated/themes/NavigationMenu.css.js +0 -8
- package/dist/generated/themes/NavigationMenu.css.js.map +0 -1
- package/dist/generated/themes/NavigationMenuItem.css.d.ts +0 -2
- package/dist/generated/themes/NavigationMenuItem.css.js +0 -8
- package/dist/generated/themes/NavigationMenuItem.css.js.map +0 -1
- package/dist/generated/themes/sap_horizon_dark_exp/parameters-bundle.css.d.ts +0 -2
- package/dist/generated/themes/sap_horizon_dark_exp/parameters-bundle.css.js +0 -3
- package/dist/generated/themes/sap_horizon_dark_exp/parameters-bundle.css.js.map +0 -1
- package/dist/generated/themes/sap_horizon_exp/parameters-bundle.css.d.ts +0 -2
- package/dist/generated/themes/sap_horizon_exp/parameters-bundle.css.js +0 -3
- package/dist/generated/themes/sap_horizon_exp/parameters-bundle.css.js.map +0 -1
- package/dist/generated/themes/sap_horizon_hcb_exp/parameters-bundle.css.d.ts +0 -2
- package/dist/generated/themes/sap_horizon_hcb_exp/parameters-bundle.css.js +0 -3
- package/dist/generated/themes/sap_horizon_hcb_exp/parameters-bundle.css.js.map +0 -1
- package/dist/generated/themes/sap_horizon_hcw_exp/parameters-bundle.css.d.ts +0 -2
- package/dist/generated/themes/sap_horizon_hcw_exp/parameters-bundle.css.js +0 -3
- package/dist/generated/themes/sap_horizon_hcw_exp/parameters-bundle.css.js.map +0 -1
- package/src/MultiComboBox.hbs +0 -106
- package/src/MultiComboBoxPopover.hbs +0 -144
- package/src/NavigationMenuItemTemplate.tsx +0 -144
- package/src/NavigationMenuTemplate.tsx +0 -67
- package/src/Select.hbs +0 -51
- package/src/SelectPopover.hbs +0 -78
- package/src/SuggestionItemGroupTemplate.tsx +0 -6
- package/src/Table.hbs +0 -63
- package/src/TableCell.hbs +0 -11
- package/src/TableGrowing.hbs +0 -19
- package/src/TableHeaderCell.hbs +0 -1
- package/src/TableHeaderRow.hbs +0 -24
- package/src/TableRow.hbs +0 -36
- package/src/i18n/messagebundle_in.properties +0 -172
- package/src/themes/BrowserScrollbar.css +0 -25
- package/src/themes/NavigationMenu.css +0 -17
- package/src/themes/NavigationMenuItem.css +0 -54
- package/src/themes/base/MultiComboBox-parameters.css +0 -3
- package/src/themes/base/SelectPopover-parameters.css +0 -4
- package/src/themes/sap_fiori_3/MultiComboBox-parameters.css +0 -5
- package/src/themes/sap_fiori_3/TimePicker-parameters.css +0 -5
- package/src/themes/sap_fiori_3_dark/MultiComboBox-parameters.css +0 -5
- package/src/themes/sap_fiori_3_hcb/BusyIndicator-parameters.css +0 -5
- package/src/themes/sap_fiori_3_hcb/DatePicker-parameters.css +0 -5
- package/src/themes/sap_fiori_3_hcb/TimePicker-parameters.css +0 -5
- package/src/themes/sap_fiori_3_hcb/ToggleButton-parameters.css +0 -6
- package/src/themes/sap_fiori_3_hcw/BusyIndicator-parameters.css +0 -5
- package/src/themes/sap_fiori_3_hcw/DatePicker-parameters.css +0 -5
- package/src/themes/sap_fiori_3_hcw/TimePicker-parameters.css +0 -5
- package/src/themes/sap_fiori_3_hcw/ToggleButton-parameters.css +0 -6
- package/src/themes/sap_horizon/ListItemBase-parameters.css +0 -5
- package/src/themes/sap_horizon/MultiComboBox-parameters.css +0 -5
- package/src/themes/sap_horizon/SelectPopover-parameters.css +0 -4
- package/src/themes/sap_horizon/ToggleButton-parameters.css +0 -1
- package/src/themes/sap_horizon_dark/ListItemBase-parameters.css +0 -5
- package/src/themes/sap_horizon_dark/MultiComboBox-parameters.css +0 -5
- package/src/themes/sap_horizon_dark/SelectPopover-parameters.css +0 -4
- package/src/themes/sap_horizon_dark/ToggleButton-parameters.css +0 -1
- package/src/themes/sap_horizon_dark_exp/Avatar-parameters.css +0 -54
- package/src/themes/sap_horizon_dark_exp/Breadcrumbs-parameters.css +0 -3
- package/src/themes/sap_horizon_dark_exp/Button-parameters.css +0 -17
- package/src/themes/sap_horizon_dark_exp/CalendarHeader-parameters.css +0 -19
- package/src/themes/sap_horizon_dark_exp/CalendarLegendItem-parameters.css +0 -6
- package/src/themes/sap_horizon_dark_exp/Card-parameters.css +0 -15
- package/src/themes/sap_horizon_dark_exp/Carousel-parameters.css +0 -5
- package/src/themes/sap_horizon_dark_exp/CheckBox-parameters.css +0 -44
- package/src/themes/sap_horizon_dark_exp/ColorPalette-parameters.css +0 -25
- package/src/themes/sap_horizon_dark_exp/ColorPicker-parameters.css +0 -12
- package/src/themes/sap_horizon_dark_exp/DatePicker-parameters.css +0 -6
- package/src/themes/sap_horizon_dark_exp/DayPicker-parameters.css +0 -68
- package/src/themes/sap_horizon_dark_exp/Dialog-parameters.css +0 -9
- package/src/themes/sap_horizon_dark_exp/FileUploader-parameters.css +0 -5
- package/src/themes/sap_horizon_dark_exp/GrowingButton-parameters.css +0 -6
- package/src/themes/sap_horizon_dark_exp/Icon-parameters.css +0 -3
- package/src/themes/sap_horizon_dark_exp/Input-parameters.css +0 -34
- package/src/themes/sap_horizon_dark_exp/InputIcon-parameters.css +0 -24
- package/src/themes/sap_horizon_dark_exp/Link-parameters.css +0 -15
- package/src/themes/sap_horizon_dark_exp/List-parameters.css +0 -5
- package/src/themes/sap_horizon_dark_exp/ListItemBase-parameters.css +0 -5
- package/src/themes/sap_horizon_dark_exp/Menu-parameters.css +0 -5
- package/src/themes/sap_horizon_dark_exp/MessageStrip-parameters.css +0 -5
- package/src/themes/sap_horizon_dark_exp/MonthPicker-parameters.css +0 -16
- package/src/themes/sap_horizon_dark_exp/MultiComboBox-parameters.css +0 -5
- package/src/themes/sap_horizon_dark_exp/Panel-parameters.css +0 -14
- package/src/themes/sap_horizon_dark_exp/PopupsCommon-parameters.css +0 -5
- package/src/themes/sap_horizon_dark_exp/RadioButton-parameters.css +0 -23
- package/src/themes/sap_horizon_dark_exp/RatingIndicator-parameters.css +0 -17
- package/src/themes/sap_horizon_dark_exp/SegmentedButtton-parameters.css +0 -13
- package/src/themes/sap_horizon_dark_exp/Select-parameters.css +0 -5
- package/src/themes/sap_horizon_dark_exp/SelectPopover-parameters.css +0 -4
- package/src/themes/sap_horizon_dark_exp/SliderBase-parameters.css +0 -72
- package/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css +0 -31
- package/src/themes/sap_horizon_dark_exp/StepInput-parameters.css +0 -25
- package/src/themes/sap_horizon_dark_exp/Switch-parameters.css +0 -148
- package/src/themes/sap_horizon_dark_exp/TabContainer-parameters.css +0 -38
- package/src/themes/sap_horizon_dark_exp/Tag-parameters.css +0 -1
- package/src/themes/sap_horizon_dark_exp/TextArea-parameters.css +0 -45
- package/src/themes/sap_horizon_dark_exp/TimePicker-parameters.css +0 -6
- package/src/themes/sap_horizon_dark_exp/ToggleButton-parameters.css +0 -1
- package/src/themes/sap_horizon_dark_exp/Token-parameters.css +0 -28
- package/src/themes/sap_horizon_dark_exp/Tokenizer-parameters.css +0 -5
- package/src/themes/sap_horizon_dark_exp/ValueStateMessage-parameters.css +0 -12
- package/src/themes/sap_horizon_dark_exp/YearPicker-parameters.css +0 -15
- package/src/themes/sap_horizon_dark_exp/parameters-bundle.css +0 -57
- package/src/themes/sap_horizon_dark_exp/rtl-parameters.css +0 -6
- package/src/themes/sap_horizon_dark_exp/sizes-parameters.css +0 -52
- package/src/themes/sap_horizon_exp/Avatar-parameters.css +0 -54
- package/src/themes/sap_horizon_exp/AvatarGroup-parameters.css +0 -5
- package/src/themes/sap_horizon_exp/Breadcrumbs-parameters.css +0 -3
- package/src/themes/sap_horizon_exp/Button-parameters.css +0 -17
- package/src/themes/sap_horizon_exp/CalendarHeader-parameters.css +0 -19
- package/src/themes/sap_horizon_exp/Card-parameters.css +0 -15
- package/src/themes/sap_horizon_exp/Carousel-parameters.css +0 -5
- package/src/themes/sap_horizon_exp/CheckBox-parameters.css +0 -44
- package/src/themes/sap_horizon_exp/ColorPalette-parameters.css +0 -25
- package/src/themes/sap_horizon_exp/ColorPicker-parameters.css +0 -12
- package/src/themes/sap_horizon_exp/DatePicker-parameters.css +0 -6
- package/src/themes/sap_horizon_exp/DayPicker-parameters.css +0 -71
- package/src/themes/sap_horizon_exp/Dialog-parameters.css +0 -9
- package/src/themes/sap_horizon_exp/FileUploader-parameters.css +0 -5
- package/src/themes/sap_horizon_exp/GrowingButton-parameters.css +0 -6
- package/src/themes/sap_horizon_exp/Icon-parameters.css +0 -3
- package/src/themes/sap_horizon_exp/Input-parameters.css +0 -34
- package/src/themes/sap_horizon_exp/InputIcon-parameters.css +0 -24
- package/src/themes/sap_horizon_exp/Link-parameters.css +0 -15
- package/src/themes/sap_horizon_exp/List-parameters.css +0 -5
- package/src/themes/sap_horizon_exp/ListItemBase-parameters.css +0 -5
- package/src/themes/sap_horizon_exp/Menu-parameters.css +0 -5
- package/src/themes/sap_horizon_exp/MessageStrip-parameters.css +0 -5
- package/src/themes/sap_horizon_exp/MonthPicker-parameters.css +0 -16
- package/src/themes/sap_horizon_exp/MultiComboBox-parameters.css +0 -5
- package/src/themes/sap_horizon_exp/Panel-parameters.css +0 -14
- package/src/themes/sap_horizon_exp/PopupsCommon-parameters.css +0 -5
- package/src/themes/sap_horizon_exp/ProgressIndicator-parameters.css +0 -32
- package/src/themes/sap_horizon_exp/ProgressIndicatorLayout-parameters.css +0 -40
- package/src/themes/sap_horizon_exp/RadioButton-parameters.css +0 -23
- package/src/themes/sap_horizon_exp/RatingIndicator-parameters.css +0 -17
- package/src/themes/sap_horizon_exp/SegmentedButtton-parameters.css +0 -13
- package/src/themes/sap_horizon_exp/Select-parameters.css +0 -5
- package/src/themes/sap_horizon_exp/SelectPopover-parameters.css +0 -4
- package/src/themes/sap_horizon_exp/SliderBase-parameters.css +0 -71
- package/src/themes/sap_horizon_exp/SplitButton-parameters.css +0 -31
- package/src/themes/sap_horizon_exp/StepInput-parameters.css +0 -25
- package/src/themes/sap_horizon_exp/Switch-parameters.css +0 -150
- package/src/themes/sap_horizon_exp/TabContainer-parameters.css +0 -38
- package/src/themes/sap_horizon_exp/Tag-parameters.css +0 -1
- package/src/themes/sap_horizon_exp/TextArea-parameters.css +0 -45
- package/src/themes/sap_horizon_exp/TimePicker-parameters.css +0 -6
- package/src/themes/sap_horizon_exp/ToggleButton-parameters.css +0 -1
- package/src/themes/sap_horizon_exp/Token-parameters.css +0 -28
- package/src/themes/sap_horizon_exp/Tokenizer-parameters.css +0 -5
- package/src/themes/sap_horizon_exp/ValueStateMessage-parameters.css +0 -12
- package/src/themes/sap_horizon_exp/YearPicker-parameters.css +0 -15
- package/src/themes/sap_horizon_exp/parameters-bundle.css +0 -57
- package/src/themes/sap_horizon_exp/rtl-parameters.css +0 -6
- package/src/themes/sap_horizon_exp/sizes-parameters.css +0 -51
- package/src/themes/sap_horizon_hcb/DatePicker-parameters.css +0 -5
- package/src/themes/sap_horizon_hcb/TimePicker-parameters.css +0 -5
- package/src/themes/sap_horizon_hcb/ToggleButton-parameters.css +0 -1
- package/src/themes/sap_horizon_hcb_exp/Avatar-parameters.css +0 -54
- package/src/themes/sap_horizon_hcb_exp/BusyIndicator-parameters.css +0 -5
- package/src/themes/sap_horizon_hcb_exp/Button-parameters.css +0 -9
- package/src/themes/sap_horizon_hcb_exp/CalendarHeader-parameters.css +0 -11
- package/src/themes/sap_horizon_hcb_exp/Card-parameters.css +0 -11
- package/src/themes/sap_horizon_hcb_exp/Carousel-parameters.css +0 -9
- package/src/themes/sap_horizon_hcb_exp/CheckBox-parameters.css +0 -45
- package/src/themes/sap_horizon_hcb_exp/ColorPicker-parameters.css +0 -10
- package/src/themes/sap_horizon_hcb_exp/DatePicker-parameters.css +0 -5
- package/src/themes/sap_horizon_hcb_exp/DayPicker-parameters.css +0 -70
- package/src/themes/sap_horizon_hcb_exp/FileUploader-parameters.css +0 -6
- package/src/themes/sap_horizon_hcb_exp/GrowingButton-parameters.css +0 -8
- package/src/themes/sap_horizon_hcb_exp/Input-parameters.css +0 -32
- package/src/themes/sap_horizon_hcb_exp/InputIcon-parameters.css +0 -11
- package/src/themes/sap_horizon_hcb_exp/Link-parameters.css +0 -11
- package/src/themes/sap_horizon_hcb_exp/ListItem-parameters.css +0 -3
- package/src/themes/sap_horizon_hcb_exp/Menu-parameters.css +0 -5
- package/src/themes/sap_horizon_hcb_exp/MessageStrip-parameters.css +0 -10
- package/src/themes/sap_horizon_hcb_exp/MonthPicker-parameters.css +0 -12
- package/src/themes/sap_horizon_hcb_exp/Panel-parameters.css +0 -10
- package/src/themes/sap_horizon_hcb_exp/PopupsCommon-parameters.css +0 -5
- package/src/themes/sap_horizon_hcb_exp/ProgressIndicator-parameters.css +0 -15
- package/src/themes/sap_horizon_hcb_exp/RadioButton-parameters.css +0 -26
- package/src/themes/sap_horizon_hcb_exp/RatingIndicator-parameters.css +0 -16
- package/src/themes/sap_horizon_hcb_exp/SegmentedButtton-parameters.css +0 -8
- package/src/themes/sap_horizon_hcb_exp/Select-parameters.css +0 -10
- package/src/themes/sap_horizon_hcb_exp/SliderBase-parameters.css +0 -78
- package/src/themes/sap_horizon_hcb_exp/SplitButton-parameters.css +0 -34
- package/src/themes/sap_horizon_hcb_exp/Switch-parameters.css +0 -144
- package/src/themes/sap_horizon_hcb_exp/TabContainer-parameters.css +0 -49
- package/src/themes/sap_horizon_hcb_exp/Tag-parameters.css +0 -1
- package/src/themes/sap_horizon_hcb_exp/TextArea-parameters.css +0 -42
- package/src/themes/sap_horizon_hcb_exp/TimePicker-parameters.css +0 -5
- package/src/themes/sap_horizon_hcb_exp/ToggleButton-parameters.css +0 -1
- package/src/themes/sap_horizon_hcb_exp/Token-parameters.css +0 -17
- package/src/themes/sap_horizon_hcb_exp/ValueStateMessage-parameters.css +0 -13
- package/src/themes/sap_horizon_hcb_exp/YearPicker-parameters.css +0 -12
- package/src/themes/sap_horizon_hcb_exp/parameters-bundle.css +0 -52
- package/src/themes/sap_horizon_hcb_exp/sizes-parameters.css +0 -16
- package/src/themes/sap_horizon_hcw/DatePicker-parameters.css +0 -5
- package/src/themes/sap_horizon_hcw/TimePicker-parameters.css +0 -5
- package/src/themes/sap_horizon_hcw/ToggleButton-parameters.css +0 -1
- package/src/themes/sap_horizon_hcw_exp/Avatar-parameters.css +0 -54
- package/src/themes/sap_horizon_hcw_exp/BusyIndicator-parameters.css +0 -5
- package/src/themes/sap_horizon_hcw_exp/Button-parameters.css +0 -9
- package/src/themes/sap_horizon_hcw_exp/CalendarHeader-parameters.css +0 -11
- package/src/themes/sap_horizon_hcw_exp/Card-parameters.css +0 -11
- package/src/themes/sap_horizon_hcw_exp/Carousel-parameters.css +0 -9
- package/src/themes/sap_horizon_hcw_exp/CheckBox-parameters.css +0 -45
- package/src/themes/sap_horizon_hcw_exp/ColorPicker-parameters.css +0 -10
- package/src/themes/sap_horizon_hcw_exp/DatePicker-parameters.css +0 -5
- package/src/themes/sap_horizon_hcw_exp/DayPicker-parameters.css +0 -69
- package/src/themes/sap_horizon_hcw_exp/FileUploader-parameters.css +0 -6
- package/src/themes/sap_horizon_hcw_exp/GrowingButton-parameters.css +0 -8
- package/src/themes/sap_horizon_hcw_exp/Input-parameters.css +0 -32
- package/src/themes/sap_horizon_hcw_exp/InputIcon-parameters.css +0 -11
- package/src/themes/sap_horizon_hcw_exp/Link-parameters.css +0 -11
- package/src/themes/sap_horizon_hcw_exp/ListItem-parameters.css +0 -3
- package/src/themes/sap_horizon_hcw_exp/Menu-parameters.css +0 -5
- package/src/themes/sap_horizon_hcw_exp/MessageStrip-parameters.css +0 -10
- package/src/themes/sap_horizon_hcw_exp/MonthPicker-parameters.css +0 -12
- package/src/themes/sap_horizon_hcw_exp/Panel-parameters.css +0 -11
- package/src/themes/sap_horizon_hcw_exp/PopupsCommon-parameters.css +0 -5
- package/src/themes/sap_horizon_hcw_exp/RadioButton-parameters.css +0 -30
- package/src/themes/sap_horizon_hcw_exp/RatingIndicator-parameters.css +0 -16
- package/src/themes/sap_horizon_hcw_exp/SegmentedButtton-parameters.css +0 -8
- package/src/themes/sap_horizon_hcw_exp/Select-parameters.css +0 -10
- package/src/themes/sap_horizon_hcw_exp/SliderBase-parameters.css +0 -78
- package/src/themes/sap_horizon_hcw_exp/SplitButton-parameters.css +0 -34
- package/src/themes/sap_horizon_hcw_exp/Switch-parameters.css +0 -149
- package/src/themes/sap_horizon_hcw_exp/TabContainer-parameters.css +0 -49
- package/src/themes/sap_horizon_hcw_exp/Tag-parameters.css +0 -1
- package/src/themes/sap_horizon_hcw_exp/TextArea-parameters.css +0 -42
- package/src/themes/sap_horizon_hcw_exp/TimePicker-parameters.css +0 -5
- package/src/themes/sap_horizon_hcw_exp/ToggleButton-parameters.css +0 -1
- package/src/themes/sap_horizon_hcw_exp/Token-parameters.css +0 -17
- package/src/themes/sap_horizon_hcw_exp/ValueStateMessage-parameters.css +0 -13
- package/src/themes/sap_horizon_hcw_exp/YearPicker-parameters.css +0 -12
- package/src/themes/sap_horizon_hcw_exp/parameters-bundle.css +0 -52
- package/src/themes/sap_horizon_hcw_exp/sizes-parameters.css +0 -16
- /package/cypress/specs/base/{InvisibleMessage.cy.ts → InvisibleMessage.cy.tsx} +0 -0
package/dist/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@ui5/webcomponents",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.11.0-rc.1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "ui5-avatar",
|
|
11
|
-
"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\";`\n---\n\n\n### **Slots:**\n - **default** - Receives the desired `<img>` tag\n\n**Note:** If you experience flickering of the provided image, you can hide the component until it is
|
|
11
|
+
"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\";`\n---\n\n\n### **Slots:**\n - **default** - 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`}`\n- **badge** - 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.",
|
|
12
12
|
"doc-url": "",
|
|
13
13
|
"attributes": [
|
|
14
14
|
{
|
|
@@ -54,10 +54,10 @@
|
|
|
54
54
|
},
|
|
55
55
|
{
|
|
56
56
|
"name": "color-scheme",
|
|
57
|
-
"description": "Defines the background color of the desired image.",
|
|
57
|
+
"description": "Defines the background color of the desired image.\nIf `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.",
|
|
58
58
|
"value": {
|
|
59
|
-
"type": "\"Accent1\" | \"Accent2\" | \"Accent3\" | \"Accent4\" | \"Accent5\" | \"Accent6\" | \"Accent7\" | \"Accent8\" | \"Accent9\" | \"Accent10\" | \"Placeholder\"",
|
|
60
|
-
"default": "\"
|
|
59
|
+
"type": "\"Auto\" | \"Accent1\" | \"Accent2\" | \"Accent3\" | \"Accent4\" | \"Accent5\" | \"Accent6\" | \"Accent7\" | \"Accent8\" | \"Accent9\" | \"Accent10\" | \"Placeholder\"",
|
|
60
|
+
"default": "\"Auto\""
|
|
61
61
|
}
|
|
62
62
|
},
|
|
63
63
|
{
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"slots": [
|
|
78
78
|
{
|
|
79
79
|
"name": "default",
|
|
80
|
-
"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
|
|
80
|
+
"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`}`"
|
|
81
81
|
},
|
|
82
82
|
{
|
|
83
83
|
"name": "badge",
|
|
@@ -124,9 +124,9 @@
|
|
|
124
124
|
},
|
|
125
125
|
{
|
|
126
126
|
"name": "color-scheme",
|
|
127
|
-
"description": "Defines the background color of the desired image.",
|
|
127
|
+
"description": "Defines the background color of the desired image.\nIf `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.",
|
|
128
128
|
"value": {
|
|
129
|
-
"type": "\"Accent1\" | \"Accent2\" | \"Accent3\" | \"Accent4\" | \"Accent5\" | \"Accent6\" | \"Accent7\" | \"Accent8\" | \"Accent9\" | \"Accent10\" | \"Placeholder\""
|
|
129
|
+
"type": "\"Auto\" | \"Accent1\" | \"Accent2\" | \"Accent3\" | \"Accent4\" | \"Accent5\" | \"Accent6\" | \"Accent7\" | \"Accent8\" | \"Accent9\" | \"Accent10\" | \"Placeholder\""
|
|
130
130
|
}
|
|
131
131
|
},
|
|
132
132
|
{
|
|
@@ -242,6 +242,14 @@
|
|
|
242
242
|
"type": "\"Header\" | \"Subheader\" | \"Footer\" | \"FloatingFooter\"",
|
|
243
243
|
"default": "\"Header\""
|
|
244
244
|
}
|
|
245
|
+
},
|
|
246
|
+
{
|
|
247
|
+
"name": "accessible-role",
|
|
248
|
+
"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.",
|
|
249
|
+
"value": {
|
|
250
|
+
"type": "\"Toolbar\" | \"None\"",
|
|
251
|
+
"default": "\"Toolbar\""
|
|
252
|
+
}
|
|
245
253
|
}
|
|
246
254
|
],
|
|
247
255
|
"slots": [
|
|
@@ -267,6 +275,11 @@
|
|
|
267
275
|
"value": {
|
|
268
276
|
"type": "\"Header\" | \"Subheader\" | \"Footer\" | \"FloatingFooter\""
|
|
269
277
|
}
|
|
278
|
+
},
|
|
279
|
+
{
|
|
280
|
+
"name": "accessible-role",
|
|
281
|
+
"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.",
|
|
282
|
+
"value": { "type": "\"Toolbar\" | \"None\"" }
|
|
270
283
|
}
|
|
271
284
|
],
|
|
272
285
|
"events": []
|
|
@@ -452,7 +465,7 @@
|
|
|
452
465
|
},
|
|
453
466
|
{
|
|
454
467
|
"name": "ui5-button",
|
|
455
|
-
"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\";`\n---\n\n\n### **Events:**\n - **
|
|
468
|
+
"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\";`\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`.\n\n### **Slots:**\n - **default** - 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.\n- **badge** - Adds a badge to the button.\n\n### **CSS Parts:**\n - **button** - Used to style the native button element\n- **icon** - Used to style the icon in the native button element\n- **endIcon** - Used to style the end icon in the native button element",
|
|
456
469
|
"doc-url": "",
|
|
457
470
|
"attributes": [
|
|
458
471
|
{
|
|
@@ -532,12 +545,13 @@
|
|
|
532
545
|
{
|
|
533
546
|
"name": "default",
|
|
534
547
|
"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."
|
|
535
|
-
}
|
|
548
|
+
},
|
|
549
|
+
{ "name": "badge", "description": "Adds a badge to the button." }
|
|
536
550
|
],
|
|
537
551
|
"events": [
|
|
538
552
|
{
|
|
539
|
-
"name": "
|
|
540
|
-
"description": "Fired when the component is activated either with a
|
|
553
|
+
"name": "click",
|
|
554
|
+
"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`."
|
|
541
555
|
}
|
|
542
556
|
],
|
|
543
557
|
"js": {
|
|
@@ -607,12 +621,50 @@
|
|
|
607
621
|
],
|
|
608
622
|
"events": [
|
|
609
623
|
{
|
|
610
|
-
"name": "
|
|
611
|
-
"description": "Fired when the component is activated either with a
|
|
624
|
+
"name": "click",
|
|
625
|
+
"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`."
|
|
612
626
|
}
|
|
613
627
|
]
|
|
614
628
|
}
|
|
615
629
|
},
|
|
630
|
+
{
|
|
631
|
+
"name": "ui5-button-badge",
|
|
632
|
+
"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",
|
|
633
|
+
"doc-url": "",
|
|
634
|
+
"attributes": [
|
|
635
|
+
{
|
|
636
|
+
"name": "design",
|
|
637
|
+
"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.",
|
|
638
|
+
"value": {
|
|
639
|
+
"type": "\"InlineText\" | \"OverlayText\" | \"AttentionDot\"",
|
|
640
|
+
"default": "\"AttentionDot\""
|
|
641
|
+
}
|
|
642
|
+
},
|
|
643
|
+
{
|
|
644
|
+
"name": "text",
|
|
645
|
+
"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.",
|
|
646
|
+
"value": { "type": "string", "default": "\"\"" }
|
|
647
|
+
}
|
|
648
|
+
],
|
|
649
|
+
"events": [],
|
|
650
|
+
"js": {
|
|
651
|
+
"properties": [
|
|
652
|
+
{
|
|
653
|
+
"name": "design",
|
|
654
|
+
"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.",
|
|
655
|
+
"value": {
|
|
656
|
+
"type": "\"InlineText\" | \"OverlayText\" | \"AttentionDot\""
|
|
657
|
+
}
|
|
658
|
+
},
|
|
659
|
+
{
|
|
660
|
+
"name": "text",
|
|
661
|
+
"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.",
|
|
662
|
+
"value": { "type": "string" }
|
|
663
|
+
}
|
|
664
|
+
],
|
|
665
|
+
"events": []
|
|
666
|
+
}
|
|
667
|
+
},
|
|
616
668
|
{
|
|
617
669
|
"name": "ui5-calendar",
|
|
618
670
|
"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\";`\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- **specialDates** - Defines the special dates, visually emphasized in the calendar.\n\n### **CSS Parts:**\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- **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 day cells in between of selected years in range.",
|
|
@@ -877,7 +929,7 @@
|
|
|
877
929
|
"name": "type",
|
|
878
930
|
"description": "Defines the type of the Calendar Legend Item.",
|
|
879
931
|
"value": {
|
|
880
|
-
"type": "\"
|
|
932
|
+
"type": "\"None\" | \"Today\" | \"Selected\" | \"Working\" | \"NonWorking\" | \"Type01\" | \"Type02\" | \"Type03\" | \"Type04\" | \"Type05\" | \"Type06\" | \"Type07\" | \"Type08\" | \"Type09\" | \"Type10\" | \"Type11\" | ... 8 more ... | \"Type20\"",
|
|
881
933
|
"default": "\"None\""
|
|
882
934
|
}
|
|
883
935
|
}
|
|
@@ -894,7 +946,7 @@
|
|
|
894
946
|
"name": "type",
|
|
895
947
|
"description": "Defines the type of the Calendar Legend Item.",
|
|
896
948
|
"value": {
|
|
897
|
-
"type": "\"
|
|
949
|
+
"type": "\"None\" | \"Today\" | \"Selected\" | \"Working\" | \"NonWorking\" | \"Type01\" | \"Type02\" | \"Type03\" | \"Type04\" | \"Type05\" | \"Type06\" | \"Type07\" | \"Type08\" | \"Type09\" | \"Type10\" | \"Type11\" | ... 8 more ... | \"Type20\""
|
|
898
950
|
}
|
|
899
951
|
}
|
|
900
952
|
],
|
|
@@ -1237,7 +1289,7 @@
|
|
|
1237
1289
|
},
|
|
1238
1290
|
{
|
|
1239
1291
|
"name": "required",
|
|
1240
|
-
"description": "Defines whether the component is required.",
|
|
1292
|
+
"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.",
|
|
1241
1293
|
"value": { "type": "boolean", "default": "false" }
|
|
1242
1294
|
},
|
|
1243
1295
|
{
|
|
@@ -1259,7 +1311,7 @@
|
|
|
1259
1311
|
"name": "value-state",
|
|
1260
1312
|
"description": "Defines the value state of the component.",
|
|
1261
1313
|
"value": {
|
|
1262
|
-
"type": "\"
|
|
1314
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
1263
1315
|
"default": "\"None\""
|
|
1264
1316
|
}
|
|
1265
1317
|
},
|
|
@@ -1312,7 +1364,7 @@
|
|
|
1312
1364
|
},
|
|
1313
1365
|
{
|
|
1314
1366
|
"name": "required",
|
|
1315
|
-
"description": "Defines whether the component is required.",
|
|
1367
|
+
"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.",
|
|
1316
1368
|
"value": { "type": "boolean" }
|
|
1317
1369
|
},
|
|
1318
1370
|
{
|
|
@@ -1334,7 +1386,7 @@
|
|
|
1334
1386
|
"name": "value-state",
|
|
1335
1387
|
"description": "Defines the value state of the component.",
|
|
1336
1388
|
"value": {
|
|
1337
|
-
"type": "\"
|
|
1389
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
1338
1390
|
}
|
|
1339
1391
|
},
|
|
1340
1392
|
{
|
|
@@ -1428,7 +1480,7 @@
|
|
|
1428
1480
|
},
|
|
1429
1481
|
{
|
|
1430
1482
|
"name": "show-more-colors",
|
|
1431
|
-
"description": "Defines whether the user can choose a custom color from a component
|
|
1483
|
+
"description": "Defines whether the user can choose a custom color from a component.",
|
|
1432
1484
|
"value": { "type": "boolean", "default": "false" }
|
|
1433
1485
|
},
|
|
1434
1486
|
{
|
|
@@ -1480,7 +1532,7 @@
|
|
|
1480
1532
|
},
|
|
1481
1533
|
{
|
|
1482
1534
|
"name": "show-more-colors",
|
|
1483
|
-
"description": "Defines whether the user can choose a custom color from a component
|
|
1535
|
+
"description": "Defines whether the user can choose a custom color from a component.",
|
|
1484
1536
|
"value": { "type": "boolean" }
|
|
1485
1537
|
},
|
|
1486
1538
|
{
|
|
@@ -1574,7 +1626,7 @@
|
|
|
1574
1626
|
},
|
|
1575
1627
|
{
|
|
1576
1628
|
"name": "ui5-combobox",
|
|
1577
|
-
"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\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ComboBox.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter, focusout or an item is selected.\n- **input** - Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed.\n- **selection-change** - Fired when selection is changed by user interaction\n\n### **Slots:**\n - **default** - Defines the component items.\n- **valueStateMessage** - 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.\n- **icon** - Defines the icon to be displayed in the input field.",
|
|
1629
|
+
"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\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ComboBox.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter, focusout or an item is selected.\n- **open** - Fired when the dropdown is opened.\n- **close** - Fired when the dropdown is closed.\n- **input** - Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed.\n- **selection-change** - Fired when selection is changed by user interaction\n\n### **Slots:**\n - **default** - Defines the component items.\n- **valueStateMessage** - 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.\n- **icon** - Defines the icon to be displayed in the input field.",
|
|
1578
1630
|
"doc-url": "",
|
|
1579
1631
|
"attributes": [
|
|
1580
1632
|
{
|
|
@@ -1606,7 +1658,7 @@
|
|
|
1606
1658
|
"name": "value-state",
|
|
1607
1659
|
"description": "Defines the value state of the component.",
|
|
1608
1660
|
"value": {
|
|
1609
|
-
"type": "\"
|
|
1661
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
1610
1662
|
"default": "\"None\""
|
|
1611
1663
|
}
|
|
1612
1664
|
},
|
|
@@ -1647,6 +1699,11 @@
|
|
|
1647
1699
|
"name": "accessible-name-ref",
|
|
1648
1700
|
"description": "Receives id(or many ids) of the elements that label the component",
|
|
1649
1701
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
1702
|
+
},
|
|
1703
|
+
{
|
|
1704
|
+
"name": "open",
|
|
1705
|
+
"description": "Indicates whether the items picker is open.",
|
|
1706
|
+
"value": { "type": "boolean", "default": "false" }
|
|
1650
1707
|
}
|
|
1651
1708
|
],
|
|
1652
1709
|
"slots": [
|
|
@@ -1668,6 +1725,14 @@
|
|
|
1668
1725
|
"name": "change",
|
|
1669
1726
|
"description": "Fired when the input operation has finished by pressing Enter, focusout or an item is selected."
|
|
1670
1727
|
},
|
|
1728
|
+
{
|
|
1729
|
+
"name": "open",
|
|
1730
|
+
"description": "Fired when the dropdown is opened."
|
|
1731
|
+
},
|
|
1732
|
+
{
|
|
1733
|
+
"name": "close",
|
|
1734
|
+
"description": "Fired when the dropdown is closed."
|
|
1735
|
+
},
|
|
1671
1736
|
{
|
|
1672
1737
|
"name": "input",
|
|
1673
1738
|
"description": "Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed."
|
|
@@ -1708,7 +1773,7 @@
|
|
|
1708
1773
|
"name": "value-state",
|
|
1709
1774
|
"description": "Defines the value state of the component.",
|
|
1710
1775
|
"value": {
|
|
1711
|
-
"type": "\"
|
|
1776
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
1712
1777
|
}
|
|
1713
1778
|
},
|
|
1714
1779
|
{
|
|
@@ -1747,6 +1812,11 @@
|
|
|
1747
1812
|
"name": "accessible-name-ref",
|
|
1748
1813
|
"description": "Receives id(or many ids) of the elements that label the component",
|
|
1749
1814
|
"value": { "type": "string | undefined" }
|
|
1815
|
+
},
|
|
1816
|
+
{
|
|
1817
|
+
"name": "open",
|
|
1818
|
+
"description": "Indicates whether the items picker is open.",
|
|
1819
|
+
"value": { "type": "boolean" }
|
|
1750
1820
|
}
|
|
1751
1821
|
],
|
|
1752
1822
|
"events": [
|
|
@@ -1754,6 +1824,14 @@
|
|
|
1754
1824
|
"name": "change",
|
|
1755
1825
|
"description": "Fired when the input operation has finished by pressing Enter, focusout or an item is selected."
|
|
1756
1826
|
},
|
|
1827
|
+
{
|
|
1828
|
+
"name": "open",
|
|
1829
|
+
"description": "Fired when the dropdown is opened."
|
|
1830
|
+
},
|
|
1831
|
+
{
|
|
1832
|
+
"name": "close",
|
|
1833
|
+
"description": "Fired when the dropdown is closed."
|
|
1834
|
+
},
|
|
1757
1835
|
{
|
|
1758
1836
|
"name": "input",
|
|
1759
1837
|
"description": "Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed."
|
|
@@ -1800,7 +1878,7 @@
|
|
|
1800
1878
|
},
|
|
1801
1879
|
{
|
|
1802
1880
|
"name": "ui5-cb-item-group",
|
|
1803
|
-
"description": "The `ui5-cb-group-item` is type of suggestion item,\nthat can be used to split the `ui5-combobox` suggestions into groups.\n---\n\n\n### **Events:**\n - **move-over** - 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()`.\n- **move** - 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.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-cb-item-group</code
|
|
1881
|
+
"description": "The `ui5-cb-group-item` is type of suggestion item,\nthat can be used to split the `ui5-combobox` suggestions into groups.\n---\n\n\n### **Events:**\n - **move-over** - 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()`.\n- **move** - 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.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-cb-item-group</code>.\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",
|
|
1804
1882
|
"doc-url": "",
|
|
1805
1883
|
"attributes": [
|
|
1806
1884
|
{
|
|
@@ -1818,6 +1896,10 @@
|
|
|
1818
1896
|
{
|
|
1819
1897
|
"name": "default",
|
|
1820
1898
|
"description": "Defines the items of the <code>ui5-cb-item-group</code>."
|
|
1899
|
+
},
|
|
1900
|
+
{
|
|
1901
|
+
"name": "header",
|
|
1902
|
+
"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."
|
|
1821
1903
|
}
|
|
1822
1904
|
],
|
|
1823
1905
|
"events": [
|
|
@@ -1869,7 +1951,7 @@
|
|
|
1869
1951
|
"name": "value-state",
|
|
1870
1952
|
"description": "Defines the value state of the component.",
|
|
1871
1953
|
"value": {
|
|
1872
|
-
"type": "\"
|
|
1954
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
1873
1955
|
"default": "\"None\""
|
|
1874
1956
|
}
|
|
1875
1957
|
},
|
|
@@ -2002,7 +2084,7 @@
|
|
|
2002
2084
|
"name": "value-state",
|
|
2003
2085
|
"description": "Defines the value state of the component.",
|
|
2004
2086
|
"value": {
|
|
2005
|
-
"type": "\"
|
|
2087
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
2006
2088
|
}
|
|
2007
2089
|
},
|
|
2008
2090
|
{
|
|
@@ -2118,7 +2200,7 @@
|
|
|
2118
2200
|
},
|
|
2119
2201
|
{
|
|
2120
2202
|
"name": "ui5-daterange-picker",
|
|
2121
|
-
"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\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component is changed at each key stroke.\n- **value-state-change** - 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.\n- **open** - Fired after the component's picker is opened.\n- **close** - Fired after the component's picker is closed.\n\n### **Methods:**\n - **isValid(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n- **isInValidRange(value: _string_): _boolean_** - Checks if a date is between the minimum and maximum date.\n- **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance",
|
|
2203
|
+
"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\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component is changed at each key stroke.\n- **value-state-change** - 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.\n- **open** - Fired after the component's picker is opened.\n- **close** - Fired after the component's picker is closed.\n\n### **Methods:**\n - **isValid(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n- **isInValidRange(value: _string_): _boolean_** - Checks if a date is between the minimum and maximum date.\n- **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance\n\n### **Slots:**\n - **valueStateMessage** - 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.",
|
|
2122
2204
|
"doc-url": "",
|
|
2123
2205
|
"attributes": [
|
|
2124
2206
|
{
|
|
@@ -2155,7 +2237,7 @@
|
|
|
2155
2237
|
"name": "value-state",
|
|
2156
2238
|
"description": "Defines the value state of the component.",
|
|
2157
2239
|
"value": {
|
|
2158
|
-
"type": "\"
|
|
2240
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
2159
2241
|
"default": "\"None\""
|
|
2160
2242
|
}
|
|
2161
2243
|
},
|
|
@@ -2244,6 +2326,12 @@
|
|
|
2244
2326
|
}
|
|
2245
2327
|
}
|
|
2246
2328
|
],
|
|
2329
|
+
"slots": [
|
|
2330
|
+
{
|
|
2331
|
+
"name": "valueStateMessage",
|
|
2332
|
+
"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."
|
|
2333
|
+
}
|
|
2334
|
+
],
|
|
2247
2335
|
"events": [
|
|
2248
2336
|
{
|
|
2249
2337
|
"name": "change",
|
|
@@ -2302,7 +2390,7 @@
|
|
|
2302
2390
|
"name": "value-state",
|
|
2303
2391
|
"description": "Defines the value state of the component.",
|
|
2304
2392
|
"value": {
|
|
2305
|
-
"type": "\"
|
|
2393
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
2306
2394
|
}
|
|
2307
2395
|
},
|
|
2308
2396
|
{
|
|
@@ -2413,7 +2501,7 @@
|
|
|
2413
2501
|
},
|
|
2414
2502
|
{
|
|
2415
2503
|
"name": "ui5-datetime-picker",
|
|
2416
|
-
"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\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component is changed at each key stroke.\n- **value-state-change** - 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.\n- **open** - Fired after the component's picker is opened.\n- **close** - Fired after the component's picker is closed.\n\n### **Methods:**\n - **isValid(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n- **isInValidRange(value: _string_): _boolean_** - Checks if a date is between the minimum and maximum date.\n- **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance",
|
|
2504
|
+
"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\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component is changed at each key stroke.\n- **value-state-change** - 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.\n- **open** - Fired after the component's picker is opened.\n- **close** - Fired after the component's picker is closed.\n\n### **Methods:**\n - **isValid(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n- **isInValidRange(value: _string_): _boolean_** - Checks if a date is between the minimum and maximum date.\n- **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance\n\n### **Slots:**\n - **valueStateMessage** - 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.",
|
|
2417
2505
|
"doc-url": "",
|
|
2418
2506
|
"attributes": [
|
|
2419
2507
|
{
|
|
@@ -2425,7 +2513,7 @@
|
|
|
2425
2513
|
"name": "value-state",
|
|
2426
2514
|
"description": "Defines the value state of the component.",
|
|
2427
2515
|
"value": {
|
|
2428
|
-
"type": "\"
|
|
2516
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
2429
2517
|
"default": "\"None\""
|
|
2430
2518
|
}
|
|
2431
2519
|
},
|
|
@@ -2519,6 +2607,12 @@
|
|
|
2519
2607
|
}
|
|
2520
2608
|
}
|
|
2521
2609
|
],
|
|
2610
|
+
"slots": [
|
|
2611
|
+
{
|
|
2612
|
+
"name": "valueStateMessage",
|
|
2613
|
+
"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."
|
|
2614
|
+
}
|
|
2615
|
+
],
|
|
2522
2616
|
"events": [
|
|
2523
2617
|
{
|
|
2524
2618
|
"name": "change",
|
|
@@ -2552,7 +2646,7 @@
|
|
|
2552
2646
|
"name": "value-state",
|
|
2553
2647
|
"description": "Defines the value state of the component.",
|
|
2554
2648
|
"value": {
|
|
2555
|
-
"type": "\"
|
|
2649
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
2556
2650
|
}
|
|
2557
2651
|
},
|
|
2558
2652
|
{
|
|
@@ -2668,7 +2762,7 @@
|
|
|
2668
2762
|
},
|
|
2669
2763
|
{
|
|
2670
2764
|
"name": "ui5-dialog",
|
|
2671
|
-
"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\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **header** - 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.\n- **footer** - 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.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
|
|
2765
|
+
"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\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **header** - 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.\n- **footer** - 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.\n- **default** - Defines the content of the Popup.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
|
|
2672
2766
|
"doc-url": "",
|
|
2673
2767
|
"attributes": [
|
|
2674
2768
|
{
|
|
@@ -2695,7 +2789,7 @@
|
|
|
2695
2789
|
"name": "state",
|
|
2696
2790
|
"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\"`.",
|
|
2697
2791
|
"value": {
|
|
2698
|
-
"type": "\"
|
|
2792
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
2699
2793
|
"default": "\"None\""
|
|
2700
2794
|
}
|
|
2701
2795
|
},
|
|
@@ -2746,6 +2840,10 @@
|
|
|
2746
2840
|
{
|
|
2747
2841
|
"name": "footer",
|
|
2748
2842
|
"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."
|
|
2843
|
+
},
|
|
2844
|
+
{
|
|
2845
|
+
"name": "default",
|
|
2846
|
+
"description": "Defines the content of the Popup."
|
|
2749
2847
|
}
|
|
2750
2848
|
],
|
|
2751
2849
|
"events": [
|
|
@@ -2792,7 +2890,7 @@
|
|
|
2792
2890
|
"name": "state",
|
|
2793
2891
|
"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\"`.",
|
|
2794
2892
|
"value": {
|
|
2795
|
-
"type": "\"
|
|
2893
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
2796
2894
|
}
|
|
2797
2895
|
},
|
|
2798
2896
|
{
|
|
@@ -2956,7 +3054,7 @@
|
|
|
2956
3054
|
"name": "value-state",
|
|
2957
3055
|
"description": "Defines the value state of the component.",
|
|
2958
3056
|
"value": {
|
|
2959
|
-
"type": "\"
|
|
3057
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
2960
3058
|
"default": "\"None\""
|
|
2961
3059
|
}
|
|
2962
3060
|
},
|
|
@@ -3032,7 +3130,7 @@
|
|
|
3032
3130
|
"name": "value-state",
|
|
3033
3131
|
"description": "Defines the value state of the component.",
|
|
3034
3132
|
"value": {
|
|
3035
|
-
"type": "\"
|
|
3133
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
3036
3134
|
}
|
|
3037
3135
|
},
|
|
3038
3136
|
{
|
|
@@ -3058,6 +3156,11 @@
|
|
|
3058
3156
|
"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\";\n---\n\n\n### **Slots:**\n - **header** - Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored.\n- **default** - 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.\n\n### **CSS Parts:**\n - **header** - Used to style the wrapper of the header.\n- **layout** - Used to style the element defining the form column layout.\n- **column** - Used to style a single column of the form column layout.",
|
|
3059
3157
|
"doc-url": "",
|
|
3060
3158
|
"attributes": [
|
|
3159
|
+
{
|
|
3160
|
+
"name": "accessible-name",
|
|
3161
|
+
"description": "Defines the accessible ARIA name of the component.",
|
|
3162
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
3163
|
+
},
|
|
3061
3164
|
{
|
|
3062
3165
|
"name": "layout",
|
|
3063
3166
|
"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)",
|
|
@@ -3078,6 +3181,14 @@
|
|
|
3078
3181
|
"description": "Defines the header text of the component.\n\n**Note:** The property gets overridden by the `header` slot.",
|
|
3079
3182
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
3080
3183
|
},
|
|
3184
|
+
{
|
|
3185
|
+
"name": "header-level",
|
|
3186
|
+
"description": "Defines the compoennt heading level,\nset by the `headerText`.",
|
|
3187
|
+
"value": {
|
|
3188
|
+
"type": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"",
|
|
3189
|
+
"default": "\"H2\""
|
|
3190
|
+
}
|
|
3191
|
+
},
|
|
3081
3192
|
{
|
|
3082
3193
|
"name": "item-spacing",
|
|
3083
3194
|
"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.",
|
|
@@ -3100,6 +3211,11 @@
|
|
|
3100
3211
|
"events": [],
|
|
3101
3212
|
"js": {
|
|
3102
3213
|
"properties": [
|
|
3214
|
+
{
|
|
3215
|
+
"name": "accessible-name",
|
|
3216
|
+
"description": "Defines the accessible ARIA name of the component.",
|
|
3217
|
+
"value": { "type": "string | undefined" }
|
|
3218
|
+
},
|
|
3103
3219
|
{
|
|
3104
3220
|
"name": "layout",
|
|
3105
3221
|
"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)",
|
|
@@ -3120,6 +3236,13 @@
|
|
|
3120
3236
|
"description": "Defines the header text of the component.\n\n**Note:** The property gets overridden by the `header` slot.",
|
|
3121
3237
|
"value": { "type": "string | undefined" }
|
|
3122
3238
|
},
|
|
3239
|
+
{
|
|
3240
|
+
"name": "header-level",
|
|
3241
|
+
"description": "Defines the compoennt heading level,\nset by the `headerText`.",
|
|
3242
|
+
"value": {
|
|
3243
|
+
"type": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\""
|
|
3244
|
+
}
|
|
3245
|
+
},
|
|
3123
3246
|
{
|
|
3124
3247
|
"name": "item-spacing",
|
|
3125
3248
|
"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.",
|
|
@@ -3139,6 +3262,14 @@
|
|
|
3139
3262
|
"description": "Defines header text of the component.",
|
|
3140
3263
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
3141
3264
|
},
|
|
3265
|
+
{
|
|
3266
|
+
"name": "header-level",
|
|
3267
|
+
"description": "Defines the compoennt heading level,\nset by the `headerText`.",
|
|
3268
|
+
"value": {
|
|
3269
|
+
"type": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"",
|
|
3270
|
+
"default": "\"H3\""
|
|
3271
|
+
}
|
|
3272
|
+
},
|
|
3142
3273
|
{
|
|
3143
3274
|
"name": "column-span",
|
|
3144
3275
|
"description": "Defines column span of the component,\ne.g how many columns the group should span to.",
|
|
@@ -3159,6 +3290,13 @@
|
|
|
3159
3290
|
"description": "Defines header text of the component.",
|
|
3160
3291
|
"value": { "type": "string | undefined" }
|
|
3161
3292
|
},
|
|
3293
|
+
{
|
|
3294
|
+
"name": "header-level",
|
|
3295
|
+
"description": "Defines the compoennt heading level,\nset by the `headerText`.",
|
|
3296
|
+
"value": {
|
|
3297
|
+
"type": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\""
|
|
3298
|
+
}
|
|
3299
|
+
},
|
|
3162
3300
|
{
|
|
3163
3301
|
"name": "column-span",
|
|
3164
3302
|
"description": "Defines column span of the component,\ne.g how many columns the group should span to.",
|
|
@@ -3234,7 +3372,7 @@
|
|
|
3234
3372
|
"description": "Defines the mode of the component.",
|
|
3235
3373
|
"value": {
|
|
3236
3374
|
"type": "\"Image\" | \"Decorative\" | \"Interactive\"",
|
|
3237
|
-
"default": "\"
|
|
3375
|
+
"default": "\"Decorative\""
|
|
3238
3376
|
}
|
|
3239
3377
|
}
|
|
3240
3378
|
],
|
|
@@ -3276,7 +3414,7 @@
|
|
|
3276
3414
|
},
|
|
3277
3415
|
{
|
|
3278
3416
|
"name": "ui5-input",
|
|
3279
|
-
"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
|
|
3417
|
+
"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\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Input.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.\n- **select** - Fired when some text has been selected.\n- **selection-change** - Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.\n- **open** - Fired when the suggestions picker is open.\n- **close** - Fired when the suggestions picker is closed.\n\n### **Slots:**\n - **default** - 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.\n- **icon** - Defines the icon to be displayed in the component.\n- **valueStateMessage** - 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.\n\n### **CSS Parts:**\n - **root** - Used to style the root DOM element of the Input component\n- **input** - Used to style the native input element\n- **clear-icon** - Used to style the clear icon, which can be pressed to clear user input text",
|
|
3280
3418
|
"doc-url": "",
|
|
3281
3419
|
"attributes": [
|
|
3282
3420
|
{
|
|
@@ -3321,7 +3459,7 @@
|
|
|
3321
3459
|
"name": "value-state",
|
|
3322
3460
|
"description": "Defines the value state of the component.",
|
|
3323
3461
|
"value": {
|
|
3324
|
-
"type": "\"
|
|
3462
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
3325
3463
|
"default": "\"None\""
|
|
3326
3464
|
}
|
|
3327
3465
|
},
|
|
@@ -3332,7 +3470,7 @@
|
|
|
3332
3470
|
},
|
|
3333
3471
|
{
|
|
3334
3472
|
"name": "show-suggestions",
|
|
3335
|
-
"description": "Defines whether the component should show suggestions, if such are present
|
|
3473
|
+
"description": "Defines whether the component should show suggestions, if such are present.",
|
|
3336
3474
|
"value": { "type": "boolean", "default": "false" }
|
|
3337
3475
|
},
|
|
3338
3476
|
{
|
|
@@ -3350,6 +3488,16 @@
|
|
|
3350
3488
|
"description": "Receives id(or many ids) of the elements that label the input.",
|
|
3351
3489
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
3352
3490
|
},
|
|
3491
|
+
{
|
|
3492
|
+
"name": "accessible-description",
|
|
3493
|
+
"description": "Defines the accessible description of the component.",
|
|
3494
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
3495
|
+
},
|
|
3496
|
+
{
|
|
3497
|
+
"name": "accessible-description-ref",
|
|
3498
|
+
"description": "Receives id(or many ids) of the elements that describe the input.",
|
|
3499
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
3500
|
+
},
|
|
3353
3501
|
{
|
|
3354
3502
|
"name": "show-clear-icon",
|
|
3355
3503
|
"description": "Defines whether the clear icon of the input will be shown.",
|
|
@@ -3364,7 +3512,7 @@
|
|
|
3364
3512
|
"slots": [
|
|
3365
3513
|
{
|
|
3366
3514
|
"name": "default",
|
|
3367
|
-
"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
|
|
3515
|
+
"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."
|
|
3368
3516
|
},
|
|
3369
3517
|
{
|
|
3370
3518
|
"name": "icon",
|
|
@@ -3444,7 +3592,7 @@
|
|
|
3444
3592
|
"name": "value-state",
|
|
3445
3593
|
"description": "Defines the value state of the component.",
|
|
3446
3594
|
"value": {
|
|
3447
|
-
"type": "\"
|
|
3595
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
3448
3596
|
}
|
|
3449
3597
|
},
|
|
3450
3598
|
{
|
|
@@ -3454,7 +3602,7 @@
|
|
|
3454
3602
|
},
|
|
3455
3603
|
{
|
|
3456
3604
|
"name": "show-suggestions",
|
|
3457
|
-
"description": "Defines whether the component should show suggestions, if such are present
|
|
3605
|
+
"description": "Defines whether the component should show suggestions, if such are present.",
|
|
3458
3606
|
"value": { "type": "boolean" }
|
|
3459
3607
|
},
|
|
3460
3608
|
{
|
|
@@ -3472,6 +3620,16 @@
|
|
|
3472
3620
|
"description": "Receives id(or many ids) of the elements that label the input.",
|
|
3473
3621
|
"value": { "type": "string | undefined" }
|
|
3474
3622
|
},
|
|
3623
|
+
{
|
|
3624
|
+
"name": "accessible-description",
|
|
3625
|
+
"description": "Defines the accessible description of the component.",
|
|
3626
|
+
"value": { "type": "string | undefined" }
|
|
3627
|
+
},
|
|
3628
|
+
{
|
|
3629
|
+
"name": "accessible-description-ref",
|
|
3630
|
+
"description": "Receives id(or many ids) of the elements that describe the input.",
|
|
3631
|
+
"value": { "type": "string | undefined" }
|
|
3632
|
+
},
|
|
3475
3633
|
{
|
|
3476
3634
|
"name": "show-clear-icon",
|
|
3477
3635
|
"description": "Defines whether the clear icon of the input will be shown.",
|
|
@@ -3606,6 +3764,14 @@
|
|
|
3606
3764
|
"default": "\"Default\""
|
|
3607
3765
|
}
|
|
3608
3766
|
},
|
|
3767
|
+
{
|
|
3768
|
+
"name": "interactive-area-size",
|
|
3769
|
+
"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.",
|
|
3770
|
+
"value": {
|
|
3771
|
+
"type": "\"Normal\" | \"Large\"",
|
|
3772
|
+
"default": "\"Normal\""
|
|
3773
|
+
}
|
|
3774
|
+
},
|
|
3609
3775
|
{
|
|
3610
3776
|
"name": "wrapping-type",
|
|
3611
3777
|
"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.",
|
|
@@ -3695,6 +3861,11 @@
|
|
|
3695
3861
|
"description": "Defines the component design.\n\n**Note:** Avaialble options are `Default`, `Subtle`, and `Emphasized`.",
|
|
3696
3862
|
"value": { "type": "\"Default\" | \"Emphasized\" | \"Subtle\"" }
|
|
3697
3863
|
},
|
|
3864
|
+
{
|
|
3865
|
+
"name": "interactive-area-size",
|
|
3866
|
+
"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.",
|
|
3867
|
+
"value": { "type": "\"Normal\" | \"Large\"" }
|
|
3868
|
+
},
|
|
3698
3869
|
{
|
|
3699
3870
|
"name": "wrapping-type",
|
|
3700
3871
|
"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.",
|
|
@@ -3746,7 +3917,7 @@
|
|
|
3746
3917
|
},
|
|
3747
3918
|
{
|
|
3748
3919
|
"name": "ui5-list",
|
|
3749
|
-
"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`)\n---\n\n\n### **Events:**\n - **item-click** - Fired when an item is activated, unless the item's `type` property\nis set to `Inactive`.\n- **item-close** - 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`.\n- **item-toggle** - 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).\n- **item-delete** - 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`.\n- **selection-change** - Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` selection modes.\n- **load-more** - 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.\n- **move-over** - 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()`.\n- **move** - 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.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n\n**Note:** Use `ui5-li`, `ui5-li-custom`, and `ui5-li-group` for the intended design.\n- **header** - Defines the component header.\n\n**Note:** When `header` is set, the\n`headerText` property is ignored.\n\n### **CSS Parts:**\n - **growing-button** - Used to style the button, that is used for growing of the component\n- **growing-button-inner** - Used to style the button inner element",
|
|
3920
|
+
"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`)\n---\n\n\n### **Events:**\n - **item-click** - 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.\n- **item-close** - 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`.\n- **item-toggle** - 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).\n- **item-delete** - 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`.\n- **selection-change** - Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` selection modes.\n- **load-more** - 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.\n- **move-over** - 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()`.\n- **move** - 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.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n\n**Note:** Use `ui5-li`, `ui5-li-custom`, and `ui5-li-group` for the intended design.\n- **header** - Defines the component header.\n\n**Note:** When `header` is set, the\n`headerText` property is ignored.\n\n### **CSS Parts:**\n - **growing-button** - Used to style the button, that is used for growing of the component\n- **growing-button-inner** - Used to style the button inner element",
|
|
3750
3921
|
"doc-url": "",
|
|
3751
3922
|
"attributes": [
|
|
3752
3923
|
{
|
|
@@ -3768,7 +3939,7 @@
|
|
|
3768
3939
|
"name": "selection-mode",
|
|
3769
3940
|
"description": "Defines the selection mode of the component.",
|
|
3770
3941
|
"value": {
|
|
3771
|
-
"type": "\"
|
|
3942
|
+
"type": "\"None\" | \"Single\" | \"Multiple\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Delete\"",
|
|
3772
3943
|
"default": "\"None\""
|
|
3773
3944
|
}
|
|
3774
3945
|
},
|
|
@@ -3789,7 +3960,7 @@
|
|
|
3789
3960
|
"name": "growing",
|
|
3790
3961
|
"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\"`.",
|
|
3791
3962
|
"value": {
|
|
3792
|
-
"type": "\"
|
|
3963
|
+
"type": "\"None\" | \"Button\" | \"Scroll\"",
|
|
3793
3964
|
"default": "\"None\""
|
|
3794
3965
|
}
|
|
3795
3966
|
},
|
|
@@ -3855,7 +4026,7 @@
|
|
|
3855
4026
|
"events": [
|
|
3856
4027
|
{
|
|
3857
4028
|
"name": "item-click",
|
|
3858
|
-
"description": "Fired when an item is activated, unless the item's `type` property\nis set to `Inactive
|
|
4029
|
+
"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."
|
|
3859
4030
|
},
|
|
3860
4031
|
{
|
|
3861
4032
|
"name": "item-close",
|
|
@@ -3907,7 +4078,7 @@
|
|
|
3907
4078
|
"name": "selection-mode",
|
|
3908
4079
|
"description": "Defines the selection mode of the component.",
|
|
3909
4080
|
"value": {
|
|
3910
|
-
"type": "\"
|
|
4081
|
+
"type": "\"None\" | \"Single\" | \"Multiple\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Delete\""
|
|
3911
4082
|
}
|
|
3912
4083
|
},
|
|
3913
4084
|
{
|
|
@@ -3923,7 +4094,7 @@
|
|
|
3923
4094
|
{
|
|
3924
4095
|
"name": "growing",
|
|
3925
4096
|
"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\"`.",
|
|
3926
|
-
"value": { "type": "\"
|
|
4097
|
+
"value": { "type": "\"None\" | \"Button\" | \"Scroll\"" }
|
|
3927
4098
|
},
|
|
3928
4099
|
{
|
|
3929
4100
|
"name": "growing-button-text",
|
|
@@ -3976,7 +4147,7 @@
|
|
|
3976
4147
|
"events": [
|
|
3977
4148
|
{
|
|
3978
4149
|
"name": "item-click",
|
|
3979
|
-
"description": "Fired when an item is activated, unless the item's `type` property\nis set to `Inactive
|
|
4150
|
+
"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."
|
|
3980
4151
|
},
|
|
3981
4152
|
{
|
|
3982
4153
|
"name": "item-close",
|
|
@@ -4011,7 +4182,7 @@
|
|
|
4011
4182
|
},
|
|
4012
4183
|
{
|
|
4013
4184
|
"name": "ui5-li-custom",
|
|
4014
|
-
"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.\n---\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Slots:**\n - **default** - Defines the content of the component.\n\n### **CSS Parts:**\n - **native-li** - Used to style the main li tag of the list item\n- **content** - Used to style the content area of the list item\n- **detail-button** - Used to style the button rendered when the list item is of type detail\n- **delete-button** - Used to style the button rendered when the list item is in delete mode\n- **radio** - Used to style the radio button rendered when the list item is in single selection mode\n- **checkbox** - Used to style the checkbox rendered when the list item is in multiple selection mode",
|
|
4185
|
+
"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.\n---\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Slots:**\n - **default** - Defines the content of the component.\n- **deleteButton** - 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.\n\n### **CSS Parts:**\n - **native-li** - Used to style the main li tag of the list item\n- **content** - Used to style the content area of the list item\n- **detail-button** - Used to style the button rendered when the list item is of type detail\n- **delete-button** - Used to style the button rendered when the list item is in delete mode\n- **radio** - Used to style the radio button rendered when the list item is in single selection mode\n- **checkbox** - Used to style the checkbox rendered when the list item is in multiple selection mode",
|
|
4015
4186
|
"doc-url": "",
|
|
4016
4187
|
"attributes": [
|
|
4017
4188
|
{
|
|
@@ -4054,7 +4225,7 @@
|
|
|
4054
4225
|
"name": "highlight",
|
|
4055
4226
|
"description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
|
|
4056
4227
|
"value": {
|
|
4057
|
-
"type": "\"
|
|
4228
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
4058
4229
|
"default": "\"None\""
|
|
4059
4230
|
}
|
|
4060
4231
|
},
|
|
@@ -4068,6 +4239,10 @@
|
|
|
4068
4239
|
{
|
|
4069
4240
|
"name": "default",
|
|
4070
4241
|
"description": "Defines the content of the component."
|
|
4242
|
+
},
|
|
4243
|
+
{
|
|
4244
|
+
"name": "deleteButton",
|
|
4245
|
+
"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."
|
|
4071
4246
|
}
|
|
4072
4247
|
],
|
|
4073
4248
|
"events": [
|
|
@@ -4114,7 +4289,7 @@
|
|
|
4114
4289
|
"name": "highlight",
|
|
4115
4290
|
"description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
|
|
4116
4291
|
"value": {
|
|
4117
|
-
"type": "\"
|
|
4292
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
4118
4293
|
}
|
|
4119
4294
|
},
|
|
4120
4295
|
{
|
|
@@ -4194,9 +4369,14 @@
|
|
|
4194
4369
|
},
|
|
4195
4370
|
{
|
|
4196
4371
|
"name": "ui5-li",
|
|
4197
|
-
"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`.\n---\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:**
|
|
4372
|
+
"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`.\n---\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Slots:**\n - **default** - 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.\n- **image** - **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.\n- **deleteButton** - 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.\n\n### **CSS Parts:**\n - **title** - Used to style the title of the list item\n- **description** - Used to style the description of the list item\n- **additional-text** - Used to style the additionalText of the list item\n- **icon** - Used to style the icon of the list item\n- **native-li** - Used to style the main li tag of the list item\n- **content** - Used to style the content area of the list item\n- **detail-button** - Used to style the button rendered when the list item is of type detail\n- **delete-button** - Used to style the button rendered when the list item is in delete mode\n- **radio** - Used to style the radio button rendered when the list item is in single selection mode\n- **checkbox** - Used to style the checkbox rendered when the list item is in multiple selection mode",
|
|
4198
4373
|
"doc-url": "",
|
|
4199
4374
|
"attributes": [
|
|
4375
|
+
{
|
|
4376
|
+
"name": "text",
|
|
4377
|
+
"description": "Defines the text of the component.",
|
|
4378
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
4379
|
+
},
|
|
4200
4380
|
{
|
|
4201
4381
|
"name": "description",
|
|
4202
4382
|
"description": "Defines the description displayed right under the item text, if such is present.",
|
|
@@ -4221,7 +4401,7 @@
|
|
|
4221
4401
|
"name": "additional-text-state",
|
|
4222
4402
|
"description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
|
|
4223
4403
|
"value": {
|
|
4224
|
-
"type": "\"
|
|
4404
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
4225
4405
|
"default": "\"None\""
|
|
4226
4406
|
}
|
|
4227
4407
|
},
|
|
@@ -4235,6 +4415,14 @@
|
|
|
4235
4415
|
"description": "Defines the text alternative of the component.\nNote: If not provided a default text alternative will be set, if present.",
|
|
4236
4416
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
4237
4417
|
},
|
|
4418
|
+
{
|
|
4419
|
+
"name": "wrapping-type",
|
|
4420
|
+
"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).",
|
|
4421
|
+
"value": {
|
|
4422
|
+
"type": "\"None\" | \"Normal\"",
|
|
4423
|
+
"default": "\"None\""
|
|
4424
|
+
}
|
|
4425
|
+
},
|
|
4238
4426
|
{
|
|
4239
4427
|
"name": "type",
|
|
4240
4428
|
"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.",
|
|
@@ -4265,7 +4453,7 @@
|
|
|
4265
4453
|
"name": "highlight",
|
|
4266
4454
|
"description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
|
|
4267
4455
|
"value": {
|
|
4268
|
-
"type": "\"
|
|
4456
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
4269
4457
|
"default": "\"None\""
|
|
4270
4458
|
}
|
|
4271
4459
|
},
|
|
@@ -4278,11 +4466,15 @@
|
|
|
4278
4466
|
"slots": [
|
|
4279
4467
|
{
|
|
4280
4468
|
"name": "default",
|
|
4281
|
-
"description": "Defines the text of the component.\n\n**Note:**
|
|
4469
|
+
"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."
|
|
4282
4470
|
},
|
|
4283
4471
|
{
|
|
4284
4472
|
"name": "image",
|
|
4285
4473
|
"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."
|
|
4474
|
+
},
|
|
4475
|
+
{
|
|
4476
|
+
"name": "deleteButton",
|
|
4477
|
+
"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."
|
|
4286
4478
|
}
|
|
4287
4479
|
],
|
|
4288
4480
|
"events": [
|
|
@@ -4293,6 +4485,11 @@
|
|
|
4293
4485
|
],
|
|
4294
4486
|
"js": {
|
|
4295
4487
|
"properties": [
|
|
4488
|
+
{
|
|
4489
|
+
"name": "text",
|
|
4490
|
+
"description": "Defines the text of the component.",
|
|
4491
|
+
"value": { "type": "string | undefined" }
|
|
4492
|
+
},
|
|
4296
4493
|
{
|
|
4297
4494
|
"name": "description",
|
|
4298
4495
|
"description": "Defines the description displayed right under the item text, if such is present.",
|
|
@@ -4317,7 +4514,7 @@
|
|
|
4317
4514
|
"name": "additional-text-state",
|
|
4318
4515
|
"description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
|
|
4319
4516
|
"value": {
|
|
4320
|
-
"type": "\"
|
|
4517
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
4321
4518
|
}
|
|
4322
4519
|
},
|
|
4323
4520
|
{
|
|
@@ -4330,6 +4527,11 @@
|
|
|
4330
4527
|
"description": "Defines the text alternative of the component.\nNote: If not provided a default text alternative will be set, if present.",
|
|
4331
4528
|
"value": { "type": "string | undefined" }
|
|
4332
4529
|
},
|
|
4530
|
+
{
|
|
4531
|
+
"name": "wrapping-type",
|
|
4532
|
+
"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).",
|
|
4533
|
+
"value": { "type": "\"None\" | \"Normal\"" }
|
|
4534
|
+
},
|
|
4333
4535
|
{
|
|
4334
4536
|
"name": "type",
|
|
4335
4537
|
"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.",
|
|
@@ -4356,7 +4558,7 @@
|
|
|
4356
4558
|
"name": "highlight",
|
|
4357
4559
|
"description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
|
|
4358
4560
|
"value": {
|
|
4359
|
-
"type": "\"
|
|
4561
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
4360
4562
|
}
|
|
4361
4563
|
},
|
|
4362
4564
|
{
|
|
@@ -4375,7 +4577,7 @@
|
|
|
4375
4577
|
},
|
|
4376
4578
|
{
|
|
4377
4579
|
"name": "ui5-menu",
|
|
4378
|
-
"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\nNote: if the text ditrection is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Menu.js\";`\n---\n\n\n### **Events:**\n - **item-click** - 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.\n- **before-open** - Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening
|
|
4580
|
+
"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\nNote: if the text ditrection is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Menu.js\";`\n---\n\n\n### **Events:**\n - **item-click** - 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.\n- **before-open** - 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.\n- **open** - Fired after the menu is opened.\n- **before-close** - Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.\n- **close** - Fired after the menu is closed.\n\n### **Slots:**\n - **default** - Defines the items of this component.\n\n**Note:** Use `ui5-menu-item` and `ui5-menu-separator` for their intended design.",
|
|
4379
4581
|
"doc-url": "",
|
|
4380
4582
|
"attributes": [
|
|
4381
4583
|
{
|
|
@@ -4385,9 +4587,17 @@
|
|
|
4385
4587
|
},
|
|
4386
4588
|
{
|
|
4387
4589
|
"name": "open",
|
|
4388
|
-
"description": "Indicates if the menu is open",
|
|
4590
|
+
"description": "Indicates if the menu is open.",
|
|
4389
4591
|
"value": { "type": "boolean", "default": "false" }
|
|
4390
4592
|
},
|
|
4593
|
+
{
|
|
4594
|
+
"name": "horizontal-align",
|
|
4595
|
+
"description": "Determines the horizontal alignment of the menu relative to its opener control.",
|
|
4596
|
+
"value": {
|
|
4597
|
+
"type": "\"Center\" | \"Start\" | \"End\" | \"Stretch\"",
|
|
4598
|
+
"default": "\"Start\""
|
|
4599
|
+
}
|
|
4600
|
+
},
|
|
4391
4601
|
{
|
|
4392
4602
|
"name": "loading",
|
|
4393
4603
|
"description": "Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.",
|
|
@@ -4395,7 +4605,7 @@
|
|
|
4395
4605
|
},
|
|
4396
4606
|
{
|
|
4397
4607
|
"name": "loading-delay",
|
|
4398
|
-
"description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover
|
|
4608
|
+
"description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.",
|
|
4399
4609
|
"value": { "type": "number", "default": "1000" }
|
|
4400
4610
|
},
|
|
4401
4611
|
{
|
|
@@ -4420,19 +4630,19 @@
|
|
|
4420
4630
|
},
|
|
4421
4631
|
{
|
|
4422
4632
|
"name": "before-open",
|
|
4423
|
-
"description": "Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening
|
|
4633
|
+
"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."
|
|
4424
4634
|
},
|
|
4425
4635
|
{
|
|
4426
4636
|
"name": "open",
|
|
4427
|
-
"description": "Fired after the menu is opened.
|
|
4637
|
+
"description": "Fired after the menu is opened."
|
|
4428
4638
|
},
|
|
4429
4639
|
{
|
|
4430
4640
|
"name": "before-close",
|
|
4431
|
-
"description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.
|
|
4641
|
+
"description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing."
|
|
4432
4642
|
},
|
|
4433
4643
|
{
|
|
4434
4644
|
"name": "close",
|
|
4435
|
-
"description": "Fired after the menu is closed.
|
|
4645
|
+
"description": "Fired after the menu is closed."
|
|
4436
4646
|
}
|
|
4437
4647
|
],
|
|
4438
4648
|
"js": {
|
|
@@ -4444,9 +4654,16 @@
|
|
|
4444
4654
|
},
|
|
4445
4655
|
{
|
|
4446
4656
|
"name": "open",
|
|
4447
|
-
"description": "Indicates if the menu is open",
|
|
4657
|
+
"description": "Indicates if the menu is open.",
|
|
4448
4658
|
"value": { "type": "boolean" }
|
|
4449
4659
|
},
|
|
4660
|
+
{
|
|
4661
|
+
"name": "horizontal-align",
|
|
4662
|
+
"description": "Determines the horizontal alignment of the menu relative to its opener control.",
|
|
4663
|
+
"value": {
|
|
4664
|
+
"type": "\"Center\" | \"Start\" | \"End\" | \"Stretch\""
|
|
4665
|
+
}
|
|
4666
|
+
},
|
|
4450
4667
|
{
|
|
4451
4668
|
"name": "loading",
|
|
4452
4669
|
"description": "Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.",
|
|
@@ -4454,7 +4671,7 @@
|
|
|
4454
4671
|
},
|
|
4455
4672
|
{
|
|
4456
4673
|
"name": "loading-delay",
|
|
4457
|
-
"description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover
|
|
4674
|
+
"description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.",
|
|
4458
4675
|
"value": { "type": "number" }
|
|
4459
4676
|
},
|
|
4460
4677
|
{
|
|
@@ -4470,26 +4687,26 @@
|
|
|
4470
4687
|
},
|
|
4471
4688
|
{
|
|
4472
4689
|
"name": "before-open",
|
|
4473
|
-
"description": "Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening
|
|
4690
|
+
"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."
|
|
4474
4691
|
},
|
|
4475
4692
|
{
|
|
4476
4693
|
"name": "open",
|
|
4477
|
-
"description": "Fired after the menu is opened.
|
|
4694
|
+
"description": "Fired after the menu is opened."
|
|
4478
4695
|
},
|
|
4479
4696
|
{
|
|
4480
4697
|
"name": "before-close",
|
|
4481
|
-
"description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.
|
|
4698
|
+
"description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing."
|
|
4482
4699
|
},
|
|
4483
4700
|
{
|
|
4484
4701
|
"name": "close",
|
|
4485
|
-
"description": "Fired after the menu is closed.
|
|
4702
|
+
"description": "Fired after the menu is closed."
|
|
4486
4703
|
}
|
|
4487
4704
|
]
|
|
4488
4705
|
}
|
|
4489
4706
|
},
|
|
4490
4707
|
{
|
|
4491
4708
|
"name": "ui5-menu-item",
|
|
4492
|
-
"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\";`\n---\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Slots:**\n - **default** - Defines the items of this component.\n\n**Note:** The slot can hold `ui5-menu-item` and `ui5-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`.\n- **endContent** - 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
|
|
4709
|
+
"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\";`\n---\n\n\n### **Events:**\n - **before-open** - 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.\n- **open** - Fired after the menu is opened.\n- **before-close** - Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.\n- **close** - Fired after the menu is closed.\n- **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Slots:**\n - **default** - Defines the items of this component.\n\n**Note:** The slot can hold `ui5-menu-item` and `ui5-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`.\n- **endContent** - 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- **deleteButton** - 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.",
|
|
4493
4710
|
"doc-url": "",
|
|
4494
4711
|
"attributes": [
|
|
4495
4712
|
{
|
|
@@ -4536,7 +4753,7 @@
|
|
|
4536
4753
|
"name": "accessibility-attributes",
|
|
4537
4754
|
"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\".",
|
|
4538
4755
|
"value": {
|
|
4539
|
-
"type": "
|
|
4756
|
+
"type": "MenuItemAccessibilityAttributes",
|
|
4540
4757
|
"default": "{}"
|
|
4541
4758
|
}
|
|
4542
4759
|
},
|
|
@@ -4557,7 +4774,7 @@
|
|
|
4557
4774
|
"name": "highlight",
|
|
4558
4775
|
"description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
|
|
4559
4776
|
"value": {
|
|
4560
|
-
"type": "\"
|
|
4777
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
4561
4778
|
"default": "\"None\""
|
|
4562
4779
|
}
|
|
4563
4780
|
},
|
|
@@ -4575,9 +4792,29 @@
|
|
|
4575
4792
|
{
|
|
4576
4793
|
"name": "endContent",
|
|
4577
4794
|
"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`."
|
|
4795
|
+
},
|
|
4796
|
+
{
|
|
4797
|
+
"name": "deleteButton",
|
|
4798
|
+
"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."
|
|
4578
4799
|
}
|
|
4579
4800
|
],
|
|
4580
4801
|
"events": [
|
|
4802
|
+
{
|
|
4803
|
+
"name": "before-open",
|
|
4804
|
+
"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."
|
|
4805
|
+
},
|
|
4806
|
+
{
|
|
4807
|
+
"name": "open",
|
|
4808
|
+
"description": "Fired after the menu is opened."
|
|
4809
|
+
},
|
|
4810
|
+
{
|
|
4811
|
+
"name": "before-close",
|
|
4812
|
+
"description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing."
|
|
4813
|
+
},
|
|
4814
|
+
{
|
|
4815
|
+
"name": "close",
|
|
4816
|
+
"description": "Fired after the menu is closed."
|
|
4817
|
+
},
|
|
4581
4818
|
{
|
|
4582
4819
|
"name": "detail-click",
|
|
4583
4820
|
"description": "Fired when the user clicks on the detail button when type is `Detail`."
|
|
@@ -4628,7 +4865,7 @@
|
|
|
4628
4865
|
{
|
|
4629
4866
|
"name": "accessibility-attributes",
|
|
4630
4867
|
"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\".",
|
|
4631
|
-
"value": { "type": "
|
|
4868
|
+
"value": { "type": "MenuItemAccessibilityAttributes" }
|
|
4632
4869
|
},
|
|
4633
4870
|
{
|
|
4634
4871
|
"name": "type",
|
|
@@ -4646,7 +4883,7 @@
|
|
|
4646
4883
|
"name": "highlight",
|
|
4647
4884
|
"description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
|
|
4648
4885
|
"value": {
|
|
4649
|
-
"type": "\"
|
|
4886
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
4650
4887
|
}
|
|
4651
4888
|
},
|
|
4652
4889
|
{
|
|
@@ -4656,6 +4893,22 @@
|
|
|
4656
4893
|
}
|
|
4657
4894
|
],
|
|
4658
4895
|
"events": [
|
|
4896
|
+
{
|
|
4897
|
+
"name": "before-open",
|
|
4898
|
+
"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."
|
|
4899
|
+
},
|
|
4900
|
+
{
|
|
4901
|
+
"name": "open",
|
|
4902
|
+
"description": "Fired after the menu is opened."
|
|
4903
|
+
},
|
|
4904
|
+
{
|
|
4905
|
+
"name": "before-close",
|
|
4906
|
+
"description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing."
|
|
4907
|
+
},
|
|
4908
|
+
{
|
|
4909
|
+
"name": "close",
|
|
4910
|
+
"description": "Fired after the menu is closed."
|
|
4911
|
+
},
|
|
4659
4912
|
{
|
|
4660
4913
|
"name": "detail-click",
|
|
4661
4914
|
"description": "Fired when the user clicks on the detail button when type is `Detail`."
|
|
@@ -4788,7 +5041,7 @@
|
|
|
4788
5041
|
"name": "value-state",
|
|
4789
5042
|
"description": "Defines the value state of the component.",
|
|
4790
5043
|
"value": {
|
|
4791
|
-
"type": "\"
|
|
5044
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
4792
5045
|
"default": "\"None\""
|
|
4793
5046
|
}
|
|
4794
5047
|
},
|
|
@@ -4832,8 +5085,8 @@
|
|
|
4832
5085
|
},
|
|
4833
5086
|
{
|
|
4834
5087
|
"name": "open",
|
|
4835
|
-
"description": "Indicates whether the
|
|
4836
|
-
"value": { "type": "
|
|
5088
|
+
"description": "Indicates whether the items picker is open.",
|
|
5089
|
+
"value": { "type": "boolean", "default": "false" }
|
|
4837
5090
|
}
|
|
4838
5091
|
],
|
|
4839
5092
|
"slots": [
|
|
@@ -4908,7 +5161,7 @@
|
|
|
4908
5161
|
"name": "value-state",
|
|
4909
5162
|
"description": "Defines the value state of the component.",
|
|
4910
5163
|
"value": {
|
|
4911
|
-
"type": "\"
|
|
5164
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
4912
5165
|
}
|
|
4913
5166
|
},
|
|
4914
5167
|
{
|
|
@@ -4950,8 +5203,8 @@
|
|
|
4950
5203
|
},
|
|
4951
5204
|
{
|
|
4952
5205
|
"name": "open",
|
|
4953
|
-
"description": "Indicates whether the
|
|
4954
|
-
"value": { "type": "
|
|
5206
|
+
"description": "Indicates whether the items picker is open.",
|
|
5207
|
+
"value": { "type": "boolean" }
|
|
4955
5208
|
}
|
|
4956
5209
|
],
|
|
4957
5210
|
"events": [
|
|
@@ -5023,7 +5276,7 @@
|
|
|
5023
5276
|
},
|
|
5024
5277
|
{
|
|
5025
5278
|
"name": "ui5-mcb-item-group",
|
|
5026
|
-
"description": "The `ui5-mcb-item-group` is type of suggestion item,\nthat can be used to split the `ui5-multi-combobox` suggestions into groups.\n---\n\n\n### **Events:**\n - **move-over** - 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()`.\n- **move** - 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.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-mcb-item-group</code
|
|
5279
|
+
"description": "The `ui5-mcb-item-group` is type of suggestion item,\nthat can be used to split the `ui5-multi-combobox` suggestions into groups.\n---\n\n\n### **Events:**\n - **move-over** - 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()`.\n- **move** - 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.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-mcb-item-group</code>.\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",
|
|
5027
5280
|
"doc-url": "",
|
|
5028
5281
|
"attributes": [
|
|
5029
5282
|
{
|
|
@@ -5041,6 +5294,10 @@
|
|
|
5041
5294
|
{
|
|
5042
5295
|
"name": "default",
|
|
5043
5296
|
"description": "Defines the items of the <code>ui5-mcb-item-group</code>."
|
|
5297
|
+
},
|
|
5298
|
+
{
|
|
5299
|
+
"name": "header",
|
|
5300
|
+
"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."
|
|
5044
5301
|
}
|
|
5045
5302
|
],
|
|
5046
5303
|
"events": [
|
|
@@ -5080,7 +5337,7 @@
|
|
|
5080
5337
|
},
|
|
5081
5338
|
{
|
|
5082
5339
|
"name": "ui5-multi-input",
|
|
5083
|
-
"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\";`\n---\n\n\n### **Events:**\n - **value-help-trigger** - Fired when the value help icon is pressed\nand F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.\n- **token-delete** - Fired when tokens are being deleted.\n- **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.\n- **select** - Fired when some text has been selected.\n- **selection-change** - Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.\n- **open** - Fired when the suggestions picker is open.\n- **close** - Fired when the suggestions picker is closed.\n\n### **Slots:**\n - **tokens** - Defines the component tokens
|
|
5340
|
+
"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\";`\n---\n\n\n### **Events:**\n - **value-help-trigger** - Fired when the value help icon is pressed\nand F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.\n- **token-delete** - Fired when tokens are being deleted.\n- **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.\n- **select** - Fired when some text has been selected.\n- **selection-change** - Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.\n- **open** - Fired when the suggestions picker is open.\n- **close** - Fired when the suggestions picker is closed.\n\n### **Slots:**\n - **tokens** - Defines the component tokens.\n- **default** - 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.\n- **icon** - Defines the icon to be displayed in the component.\n- **valueStateMessage** - 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.\n\n### **CSS Parts:**\n - **root** - Used to style the root DOM element of the Input component\n- **input** - Used to style the native input element\n- **clear-icon** - Used to style the clear icon, which can be pressed to clear user input text",
|
|
5084
5341
|
"doc-url": "",
|
|
5085
5342
|
"attributes": [
|
|
5086
5343
|
{
|
|
@@ -5135,13 +5392,13 @@
|
|
|
5135
5392
|
"name": "value-state",
|
|
5136
5393
|
"description": "Defines the value state of the component.",
|
|
5137
5394
|
"value": {
|
|
5138
|
-
"type": "\"
|
|
5395
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
5139
5396
|
"default": "\"None\""
|
|
5140
5397
|
}
|
|
5141
5398
|
},
|
|
5142
5399
|
{
|
|
5143
5400
|
"name": "show-suggestions",
|
|
5144
|
-
"description": "Defines whether the component should show suggestions, if such are present
|
|
5401
|
+
"description": "Defines whether the component should show suggestions, if such are present.",
|
|
5145
5402
|
"value": { "type": "boolean", "default": "false" }
|
|
5146
5403
|
},
|
|
5147
5404
|
{
|
|
@@ -5159,6 +5416,16 @@
|
|
|
5159
5416
|
"description": "Receives id(or many ids) of the elements that label the input.",
|
|
5160
5417
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
5161
5418
|
},
|
|
5419
|
+
{
|
|
5420
|
+
"name": "accessible-description",
|
|
5421
|
+
"description": "Defines the accessible description of the component.",
|
|
5422
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
5423
|
+
},
|
|
5424
|
+
{
|
|
5425
|
+
"name": "accessible-description-ref",
|
|
5426
|
+
"description": "Receives id(or many ids) of the elements that describe the input.",
|
|
5427
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
5428
|
+
},
|
|
5162
5429
|
{
|
|
5163
5430
|
"name": "show-clear-icon",
|
|
5164
5431
|
"description": "Defines whether the clear icon of the input will be shown.",
|
|
@@ -5171,7 +5438,22 @@
|
|
|
5171
5438
|
}
|
|
5172
5439
|
],
|
|
5173
5440
|
"slots": [
|
|
5174
|
-
{
|
|
5441
|
+
{
|
|
5442
|
+
"name": "tokens",
|
|
5443
|
+
"description": "Defines the component tokens."
|
|
5444
|
+
},
|
|
5445
|
+
{
|
|
5446
|
+
"name": "default",
|
|
5447
|
+
"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."
|
|
5448
|
+
},
|
|
5449
|
+
{
|
|
5450
|
+
"name": "icon",
|
|
5451
|
+
"description": "Defines the icon to be displayed in the component."
|
|
5452
|
+
},
|
|
5453
|
+
{
|
|
5454
|
+
"name": "valueStateMessage",
|
|
5455
|
+
"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."
|
|
5456
|
+
}
|
|
5175
5457
|
],
|
|
5176
5458
|
"events": [
|
|
5177
5459
|
{
|
|
@@ -5260,12 +5542,12 @@
|
|
|
5260
5542
|
"name": "value-state",
|
|
5261
5543
|
"description": "Defines the value state of the component.",
|
|
5262
5544
|
"value": {
|
|
5263
|
-
"type": "\"
|
|
5545
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
5264
5546
|
}
|
|
5265
5547
|
},
|
|
5266
5548
|
{
|
|
5267
5549
|
"name": "show-suggestions",
|
|
5268
|
-
"description": "Defines whether the component should show suggestions, if such are present
|
|
5550
|
+
"description": "Defines whether the component should show suggestions, if such are present.",
|
|
5269
5551
|
"value": { "type": "boolean" }
|
|
5270
5552
|
},
|
|
5271
5553
|
{
|
|
@@ -5283,6 +5565,16 @@
|
|
|
5283
5565
|
"description": "Receives id(or many ids) of the elements that label the input.",
|
|
5284
5566
|
"value": { "type": "string | undefined" }
|
|
5285
5567
|
},
|
|
5568
|
+
{
|
|
5569
|
+
"name": "accessible-description",
|
|
5570
|
+
"description": "Defines the accessible description of the component.",
|
|
5571
|
+
"value": { "type": "string | undefined" }
|
|
5572
|
+
},
|
|
5573
|
+
{
|
|
5574
|
+
"name": "accessible-description-ref",
|
|
5575
|
+
"description": "Receives id(or many ids) of the elements that describe the input.",
|
|
5576
|
+
"value": { "type": "string | undefined" }
|
|
5577
|
+
},
|
|
5286
5578
|
{
|
|
5287
5579
|
"name": "show-clear-icon",
|
|
5288
5580
|
"description": "Defines whether the clear icon of the input will be shown.",
|
|
@@ -5401,7 +5693,7 @@
|
|
|
5401
5693
|
},
|
|
5402
5694
|
{
|
|
5403
5695
|
"name": "ui5-option-custom",
|
|
5404
|
-
"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\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the
|
|
5696
|
+
"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\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the content of the component.",
|
|
5405
5697
|
"doc-url": "",
|
|
5406
5698
|
"attributes": [
|
|
5407
5699
|
{
|
|
@@ -5428,7 +5720,7 @@
|
|
|
5428
5720
|
"slots": [
|
|
5429
5721
|
{
|
|
5430
5722
|
"name": "default",
|
|
5431
|
-
"description": "Defines the
|
|
5723
|
+
"description": "Defines the content of the component."
|
|
5432
5724
|
}
|
|
5433
5725
|
],
|
|
5434
5726
|
"events": [],
|
|
@@ -5581,7 +5873,7 @@
|
|
|
5581
5873
|
},
|
|
5582
5874
|
{
|
|
5583
5875
|
"name": "ui5-popover",
|
|
5584
|
-
"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\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **header** - Defines the header HTML Element.\n- **footer** - Defines the footer HTML Element.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
|
|
5876
|
+
"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\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **header** - Defines the header HTML Element.\n- **footer** - Defines the footer HTML Element.\n- **default** - Defines the content of the Popup.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
|
|
5585
5877
|
"doc-url": "",
|
|
5586
5878
|
"attributes": [
|
|
5587
5879
|
{
|
|
@@ -5601,7 +5893,7 @@
|
|
|
5601
5893
|
"name": "horizontal-align",
|
|
5602
5894
|
"description": "Determines the horizontal alignment of the component.",
|
|
5603
5895
|
"value": {
|
|
5604
|
-
"type": "\"
|
|
5896
|
+
"type": "\"Center\" | \"Start\" | \"End\" | \"Stretch\"",
|
|
5605
5897
|
"default": "\"Center\""
|
|
5606
5898
|
}
|
|
5607
5899
|
},
|
|
@@ -5680,6 +5972,10 @@
|
|
|
5680
5972
|
{
|
|
5681
5973
|
"name": "footer",
|
|
5682
5974
|
"description": "Defines the footer HTML Element."
|
|
5975
|
+
},
|
|
5976
|
+
{
|
|
5977
|
+
"name": "default",
|
|
5978
|
+
"description": "Defines the content of the Popup."
|
|
5683
5979
|
}
|
|
5684
5980
|
],
|
|
5685
5981
|
"events": [
|
|
@@ -5718,7 +6014,7 @@
|
|
|
5718
6014
|
"name": "horizontal-align",
|
|
5719
6015
|
"description": "Determines the horizontal alignment of the component.",
|
|
5720
6016
|
"value": {
|
|
5721
|
-
"type": "\"
|
|
6017
|
+
"type": "\"Center\" | \"Start\" | \"End\" | \"Stretch\""
|
|
5722
6018
|
}
|
|
5723
6019
|
},
|
|
5724
6020
|
{
|
|
@@ -5833,7 +6129,7 @@
|
|
|
5833
6129
|
"name": "value-state",
|
|
5834
6130
|
"description": "Defines the value state of the component.",
|
|
5835
6131
|
"value": {
|
|
5836
|
-
"type": "\"
|
|
6132
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
5837
6133
|
"default": "\"None\""
|
|
5838
6134
|
}
|
|
5839
6135
|
}
|
|
@@ -5865,7 +6161,7 @@
|
|
|
5865
6161
|
"name": "value-state",
|
|
5866
6162
|
"description": "Defines the value state of the component.",
|
|
5867
6163
|
"value": {
|
|
5868
|
-
"type": "\"
|
|
6164
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
5869
6165
|
}
|
|
5870
6166
|
}
|
|
5871
6167
|
],
|
|
@@ -5906,7 +6202,7 @@
|
|
|
5906
6202
|
"name": "value-state",
|
|
5907
6203
|
"description": "Defines the value state of the component.",
|
|
5908
6204
|
"value": {
|
|
5909
|
-
"type": "\"
|
|
6205
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
5910
6206
|
"default": "\"None\""
|
|
5911
6207
|
}
|
|
5912
6208
|
},
|
|
@@ -5976,7 +6272,7 @@
|
|
|
5976
6272
|
"name": "value-state",
|
|
5977
6273
|
"description": "Defines the value state of the component.",
|
|
5978
6274
|
"value": {
|
|
5979
|
-
"type": "\"
|
|
6275
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
5980
6276
|
}
|
|
5981
6277
|
},
|
|
5982
6278
|
{
|
|
@@ -6279,7 +6575,7 @@
|
|
|
6279
6575
|
},
|
|
6280
6576
|
{
|
|
6281
6577
|
"name": "ui5-responsive-popover",
|
|
6282
|
-
"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\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
|
|
6578
|
+
"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\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **header** - Defines the header HTML Element.\n- **footer** - Defines the footer HTML Element.\n- **default** - Defines the content of the Popup.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
|
|
6283
6579
|
"doc-url": "",
|
|
6284
6580
|
"attributes": [
|
|
6285
6581
|
{
|
|
@@ -6299,7 +6595,7 @@
|
|
|
6299
6595
|
"name": "horizontal-align",
|
|
6300
6596
|
"description": "Determines the horizontal alignment of the component.",
|
|
6301
6597
|
"value": {
|
|
6302
|
-
"type": "\"
|
|
6598
|
+
"type": "\"Center\" | \"Start\" | \"End\" | \"Stretch\"",
|
|
6303
6599
|
"default": "\"Center\""
|
|
6304
6600
|
}
|
|
6305
6601
|
},
|
|
@@ -6370,6 +6666,20 @@
|
|
|
6370
6666
|
"value": { "type": "any", "default": "false" }
|
|
6371
6667
|
}
|
|
6372
6668
|
],
|
|
6669
|
+
"slots": [
|
|
6670
|
+
{
|
|
6671
|
+
"name": "header",
|
|
6672
|
+
"description": "Defines the header HTML Element."
|
|
6673
|
+
},
|
|
6674
|
+
{
|
|
6675
|
+
"name": "footer",
|
|
6676
|
+
"description": "Defines the footer HTML Element."
|
|
6677
|
+
},
|
|
6678
|
+
{
|
|
6679
|
+
"name": "default",
|
|
6680
|
+
"description": "Defines the content of the Popup."
|
|
6681
|
+
}
|
|
6682
|
+
],
|
|
6373
6683
|
"events": [
|
|
6374
6684
|
{
|
|
6375
6685
|
"name": "before-open",
|
|
@@ -6406,7 +6716,7 @@
|
|
|
6406
6716
|
"name": "horizontal-align",
|
|
6407
6717
|
"description": "Determines the horizontal alignment of the component.",
|
|
6408
6718
|
"value": {
|
|
6409
|
-
"type": "\"
|
|
6719
|
+
"type": "\"Center\" | \"Start\" | \"End\" | \"Stretch\""
|
|
6410
6720
|
}
|
|
6411
6721
|
},
|
|
6412
6722
|
{
|
|
@@ -6635,7 +6945,7 @@
|
|
|
6635
6945
|
},
|
|
6636
6946
|
{
|
|
6637
6947
|
"name": "ui5-select",
|
|
6638
|
-
"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\
|
|
6948
|
+
"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\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the selected option changes.\n- **live-change** - 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.\n- **open** - Fired after the component's dropdown menu opens.\n- **close** - Fired after the component's dropdown menu closes.\n\n### **Slots:**\n - **default** - 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.\n- **valueStateMessage** - 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.\n- **label** - 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.\n\n### **CSS Parts:**\n - **popover** - Used to style the popover element",
|
|
6639
6949
|
"doc-url": "",
|
|
6640
6950
|
"attributes": [
|
|
6641
6951
|
{
|
|
@@ -6652,7 +6962,7 @@
|
|
|
6652
6962
|
"name": "value-state",
|
|
6653
6963
|
"description": "Defines the value state of the component.",
|
|
6654
6964
|
"value": {
|
|
6655
|
-
"type": "\"
|
|
6965
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
6656
6966
|
"default": "\"None\""
|
|
6657
6967
|
}
|
|
6658
6968
|
},
|
|
@@ -6676,9 +6986,14 @@
|
|
|
6676
6986
|
"description": "Receives id(or many ids) of the elements that label the select.",
|
|
6677
6987
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
6678
6988
|
},
|
|
6989
|
+
{
|
|
6990
|
+
"name": "tooltip",
|
|
6991
|
+
"description": "Defines the tooltip of the select.",
|
|
6992
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
6993
|
+
},
|
|
6679
6994
|
{
|
|
6680
6995
|
"name": "value",
|
|
6681
|
-
"description": "Defines the value of the component:\n\n- when get - returns the value of the component
|
|
6996
|
+
"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.",
|
|
6682
6997
|
"value": { "type": "any", "default": "\"\"" }
|
|
6683
6998
|
},
|
|
6684
6999
|
{
|
|
@@ -6735,7 +7050,7 @@
|
|
|
6735
7050
|
"name": "value-state",
|
|
6736
7051
|
"description": "Defines the value state of the component.",
|
|
6737
7052
|
"value": {
|
|
6738
|
-
"type": "\"
|
|
7053
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
6739
7054
|
}
|
|
6740
7055
|
},
|
|
6741
7056
|
{
|
|
@@ -6758,9 +7073,14 @@
|
|
|
6758
7073
|
"description": "Receives id(or many ids) of the elements that label the select.",
|
|
6759
7074
|
"value": { "type": "string | undefined" }
|
|
6760
7075
|
},
|
|
7076
|
+
{
|
|
7077
|
+
"name": "tooltip",
|
|
7078
|
+
"description": "Defines the tooltip of the select.",
|
|
7079
|
+
"value": { "type": "string | undefined" }
|
|
7080
|
+
},
|
|
6761
7081
|
{
|
|
6762
7082
|
"name": "value",
|
|
6763
|
-
"description": "Defines the value of the component:\n\n- when get - returns the value of the component
|
|
7083
|
+
"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.",
|
|
6764
7084
|
"value": { "type": "any" }
|
|
6765
7085
|
},
|
|
6766
7086
|
{
|
|
@@ -6944,7 +7264,7 @@
|
|
|
6944
7264
|
"name": "type",
|
|
6945
7265
|
"description": "Defines the type of the special date.",
|
|
6946
7266
|
"value": {
|
|
6947
|
-
"type": "\"
|
|
7267
|
+
"type": "\"None\" | \"Today\" | \"Selected\" | \"Working\" | \"NonWorking\" | \"Type01\" | \"Type02\" | \"Type03\" | \"Type04\" | \"Type05\" | \"Type06\" | \"Type07\" | \"Type08\" | \"Type09\" | \"Type10\" | \"Type11\" | ... 8 more ... | \"Type20\"",
|
|
6948
7268
|
"default": "\"None\""
|
|
6949
7269
|
}
|
|
6950
7270
|
}
|
|
@@ -6961,7 +7281,7 @@
|
|
|
6961
7281
|
"name": "type",
|
|
6962
7282
|
"description": "Defines the type of the special date.",
|
|
6963
7283
|
"value": {
|
|
6964
|
-
"type": "\"
|
|
7284
|
+
"type": "\"None\" | \"Today\" | \"Selected\" | \"Working\" | \"NonWorking\" | \"Type01\" | \"Type02\" | \"Type03\" | \"Type04\" | \"Type05\" | \"Type06\" | \"Type07\" | \"Type08\" | \"Type09\" | \"Type10\" | \"Type11\" | ... 8 more ... | \"Type20\""
|
|
6965
7285
|
}
|
|
6966
7286
|
}
|
|
6967
7287
|
],
|
|
@@ -6970,7 +7290,7 @@
|
|
|
6970
7290
|
},
|
|
6971
7291
|
{
|
|
6972
7292
|
"name": "ui5-split-button",
|
|
6973
|
-
"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\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the user clicks on the default action.\n- **arrow-click** - Fired when the user clicks on the arrow action.\n\n### **Slots:**\n - **default** - 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
|
|
7293
|
+
"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\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the user clicks on the default action.\n- **arrow-click** - Fired when the user clicks on the arrow action.\n\n### **Slots:**\n - **default** - 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.\n\n### **CSS Parts:**\n - **button** - Used to style the native button element\n- **icon** - Used to style the icon in the native button element\n- **endIcon** - Used to style the end icon in the native button element",
|
|
6974
7294
|
"doc-url": "",
|
|
6975
7295
|
"attributes": [
|
|
6976
7296
|
{
|
|
@@ -7089,7 +7409,7 @@
|
|
|
7089
7409
|
"name": "value-state",
|
|
7090
7410
|
"description": "Defines the value state of the component.",
|
|
7091
7411
|
"value": {
|
|
7092
|
-
"type": "\"
|
|
7412
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
7093
7413
|
"default": "\"None\""
|
|
7094
7414
|
}
|
|
7095
7415
|
},
|
|
@@ -7180,7 +7500,7 @@
|
|
|
7180
7500
|
"name": "value-state",
|
|
7181
7501
|
"description": "Defines the value state of the component.",
|
|
7182
7502
|
"value": {
|
|
7183
|
-
"type": "\"
|
|
7503
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
7184
7504
|
}
|
|
7185
7505
|
},
|
|
7186
7506
|
{
|
|
@@ -7304,7 +7624,7 @@
|
|
|
7304
7624
|
},
|
|
7305
7625
|
{
|
|
7306
7626
|
"name": "ui5-suggestion-item-group",
|
|
7307
|
-
"description": "The `ui5-suggestion-item-group` is type of suggestion item,\nthat can be used to split the `ui5-input` suggestions into groups.\n---\n\n\n### **Events:**\n - **move-over** - 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()`.\n- **move** - 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.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-suggestion-item-group</code
|
|
7627
|
+
"description": "The `ui5-suggestion-item-group` is type of suggestion item,\nthat can be used to split the `ui5-input` suggestions into groups.\n---\n\n\n### **Events:**\n - **move-over** - 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()`.\n- **move** - 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.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-suggestion-item-group</code>.\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",
|
|
7308
7628
|
"doc-url": "",
|
|
7309
7629
|
"attributes": [
|
|
7310
7630
|
{
|
|
@@ -7322,6 +7642,10 @@
|
|
|
7322
7642
|
{
|
|
7323
7643
|
"name": "default",
|
|
7324
7644
|
"description": "Defines the items of the <code>ui5-suggestion-item-group</code>."
|
|
7645
|
+
},
|
|
7646
|
+
{
|
|
7647
|
+
"name": "header",
|
|
7648
|
+
"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."
|
|
7325
7649
|
}
|
|
7326
7650
|
],
|
|
7327
7651
|
"events": [
|
|
@@ -7615,6 +7939,11 @@
|
|
|
7615
7939
|
"default": "\"Solid\""
|
|
7616
7940
|
}
|
|
7617
7941
|
},
|
|
7942
|
+
{
|
|
7943
|
+
"name": "no-auto-selection",
|
|
7944
|
+
"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.",
|
|
7945
|
+
"value": { "type": "boolean", "default": "false" }
|
|
7946
|
+
},
|
|
7618
7947
|
{
|
|
7619
7948
|
"name": "all-items",
|
|
7620
7949
|
"description": "Returns all slotted tabs and their subTabs in a flattened array.\nThe order of tabs is depth-first.",
|
|
@@ -7680,6 +8009,11 @@
|
|
|
7680
8009
|
"type": "\"Transparent\" | \"Solid\" | \"Translucent\""
|
|
7681
8010
|
}
|
|
7682
8011
|
},
|
|
8012
|
+
{
|
|
8013
|
+
"name": "no-auto-selection",
|
|
8014
|
+
"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.",
|
|
8015
|
+
"value": { "type": "boolean" }
|
|
8016
|
+
},
|
|
7683
8017
|
{
|
|
7684
8018
|
"name": "all-items",
|
|
7685
8019
|
"description": "Returns all slotted tabs and their subTabs in a flattened array.\nThe order of tabs is depth-first.",
|
|
@@ -7721,7 +8055,7 @@
|
|
|
7721
8055
|
},
|
|
7722
8056
|
{
|
|
7723
8057
|
"name": "ui5-table",
|
|
7724
|
-
"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`)\n---\n\n\n### **Events:**\n - **row-click** - Fired when an interactive row is clicked.\n- **move-over** - 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`.\n- **move** - 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`.\n\n### **Slots:**\n - **default** - Defines the rows of the component.\n\
|
|
8058
|
+
"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`)\n---\n\n\n### **Events:**\n - **row-click** - Fired when an interactive row is clicked.\n- **move-over** - 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`.\n- **move** - 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`.\n- **row-action-click** - Fired when a row action is clicked.\n\n### **Slots:**\n - **default** - Defines the rows of the component.\n\n**Note:** Use `ui5-table-row` for the intended design.\n- **headerRow** - Defines the header row of the component.\n\n**Note:** Use `ui5-table-header-row` for the intended design.\n- **noData** - Defines the custom visualization if there is no data available.\n- **features** - Defines the features of the component.",
|
|
7725
8059
|
"doc-url": "",
|
|
7726
8060
|
"attributes": [
|
|
7727
8061
|
{
|
|
@@ -7741,7 +8075,7 @@
|
|
|
7741
8075
|
},
|
|
7742
8076
|
{
|
|
7743
8077
|
"name": "overflow-mode",
|
|
7744
|
-
"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
|
|
8078
|
+
"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.",
|
|
7745
8079
|
"value": {
|
|
7746
8080
|
"type": "\"Scroll\" | \"Popin\"",
|
|
7747
8081
|
"default": "\"Scroll\""
|
|
@@ -7749,26 +8083,31 @@
|
|
|
7749
8083
|
},
|
|
7750
8084
|
{
|
|
7751
8085
|
"name": "loading",
|
|
7752
|
-
"description": "Defines if the loading indicator should be shown.\n\n
|
|
8086
|
+
"description": "Defines if the loading indicator should be shown.\n\n**Note:** When the component is loading, it is not interactive.",
|
|
7753
8087
|
"value": { "type": "boolean", "default": "false" }
|
|
7754
8088
|
},
|
|
7755
8089
|
{
|
|
7756
8090
|
"name": "loading-delay",
|
|
7757
8091
|
"description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.",
|
|
7758
8092
|
"value": { "type": "number", "default": "1000" }
|
|
8093
|
+
},
|
|
8094
|
+
{
|
|
8095
|
+
"name": "row-action-count",
|
|
8096
|
+
"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.",
|
|
8097
|
+
"value": { "type": "number", "default": "0" }
|
|
7759
8098
|
}
|
|
7760
8099
|
],
|
|
7761
8100
|
"slots": [
|
|
7762
8101
|
{
|
|
7763
8102
|
"name": "default",
|
|
7764
|
-
"description": "Defines the rows of the component.\n\
|
|
8103
|
+
"description": "Defines the rows of the component.\n\n**Note:** Use `ui5-table-row` for the intended design."
|
|
7765
8104
|
},
|
|
7766
8105
|
{
|
|
7767
8106
|
"name": "headerRow",
|
|
7768
|
-
"description": "Defines the header row of the component.\n\
|
|
8107
|
+
"description": "Defines the header row of the component.\n\n**Note:** Use `ui5-table-header-row` for the intended design."
|
|
7769
8108
|
},
|
|
7770
8109
|
{
|
|
7771
|
-
"name": "
|
|
8110
|
+
"name": "noData",
|
|
7772
8111
|
"description": "Defines the custom visualization if there is no data available."
|
|
7773
8112
|
},
|
|
7774
8113
|
{
|
|
@@ -7788,6 +8127,10 @@
|
|
|
7788
8127
|
{
|
|
7789
8128
|
"name": "move",
|
|
7790
8129
|
"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`."
|
|
8130
|
+
},
|
|
8131
|
+
{
|
|
8132
|
+
"name": "row-action-click",
|
|
8133
|
+
"description": "Fired when a row action is clicked."
|
|
7791
8134
|
}
|
|
7792
8135
|
],
|
|
7793
8136
|
"js": {
|
|
@@ -7809,18 +8152,23 @@
|
|
|
7809
8152
|
},
|
|
7810
8153
|
{
|
|
7811
8154
|
"name": "overflow-mode",
|
|
7812
|
-
"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
|
|
8155
|
+
"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.",
|
|
7813
8156
|
"value": { "type": "\"Scroll\" | \"Popin\"" }
|
|
7814
8157
|
},
|
|
7815
8158
|
{
|
|
7816
8159
|
"name": "loading",
|
|
7817
|
-
"description": "Defines if the loading indicator should be shown.\n\n
|
|
8160
|
+
"description": "Defines if the loading indicator should be shown.\n\n**Note:** When the component is loading, it is not interactive.",
|
|
7818
8161
|
"value": { "type": "boolean" }
|
|
7819
8162
|
},
|
|
7820
8163
|
{
|
|
7821
8164
|
"name": "loading-delay",
|
|
7822
8165
|
"description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.",
|
|
7823
8166
|
"value": { "type": "number" }
|
|
8167
|
+
},
|
|
8168
|
+
{
|
|
8169
|
+
"name": "row-action-count",
|
|
8170
|
+
"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.",
|
|
8171
|
+
"value": { "type": "number" }
|
|
7824
8172
|
}
|
|
7825
8173
|
],
|
|
7826
8174
|
"events": [
|
|
@@ -7835,32 +8183,42 @@
|
|
|
7835
8183
|
{
|
|
7836
8184
|
"name": "move",
|
|
7837
8185
|
"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`."
|
|
8186
|
+
},
|
|
8187
|
+
{
|
|
8188
|
+
"name": "row-action-click",
|
|
8189
|
+
"description": "Fired when a row action is clicked."
|
|
7838
8190
|
}
|
|
7839
8191
|
]
|
|
7840
8192
|
}
|
|
7841
8193
|
},
|
|
7842
8194
|
{
|
|
7843
8195
|
"name": "ui5-table-cell",
|
|
7844
|
-
"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;`\n---\n",
|
|
8196
|
+
"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;`\n---\n\n\n### **Slots:**\n - **default** - Defines the content of the component.",
|
|
7845
8197
|
"doc-url": "",
|
|
7846
8198
|
"attributes": [
|
|
7847
8199
|
{
|
|
7848
8200
|
"name": "horizontal-align",
|
|
7849
|
-
"description": "Determines the horizontal alignment of table cells
|
|
8201
|
+
"description": "Determines the horizontal alignment of table cells.",
|
|
7850
8202
|
"value": {
|
|
7851
|
-
"type": "\"
|
|
8203
|
+
"type": "\"Center\" | \"Start\" | \"End\" | \"Left\" | \"Right\" | undefined",
|
|
7852
8204
|
"default": "undefined"
|
|
7853
8205
|
}
|
|
7854
8206
|
}
|
|
7855
8207
|
],
|
|
8208
|
+
"slots": [
|
|
8209
|
+
{
|
|
8210
|
+
"name": "default",
|
|
8211
|
+
"description": "Defines the content of the component."
|
|
8212
|
+
}
|
|
8213
|
+
],
|
|
7856
8214
|
"events": [],
|
|
7857
8215
|
"js": {
|
|
7858
8216
|
"properties": [
|
|
7859
8217
|
{
|
|
7860
8218
|
"name": "horizontal-align",
|
|
7861
|
-
"description": "Determines the horizontal alignment of table cells
|
|
8219
|
+
"description": "Determines the horizontal alignment of table cells.",
|
|
7862
8220
|
"value": {
|
|
7863
|
-
"type": "\"
|
|
8221
|
+
"type": "\"Center\" | \"Start\" | \"End\" | \"Left\" | \"Right\" | undefined"
|
|
7864
8222
|
}
|
|
7865
8223
|
}
|
|
7866
8224
|
],
|
|
@@ -7869,25 +8227,25 @@
|
|
|
7869
8227
|
},
|
|
7870
8228
|
{
|
|
7871
8229
|
"name": "ui5-table-growing",
|
|
7872
|
-
"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
|
|
8230
|
+
"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\";`\n---\n\n\n### **Events:**\n - **load-more** - Fired when the growing button is pressed or the user scrolls to the end of the table.",
|
|
7873
8231
|
"doc-url": "",
|
|
7874
8232
|
"attributes": [
|
|
7875
8233
|
{
|
|
7876
|
-
"name": "
|
|
7877
|
-
"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
|
|
8234
|
+
"name": "mode",
|
|
8235
|
+
"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.",
|
|
7878
8236
|
"value": {
|
|
7879
8237
|
"type": "\"Button\" | \"Scroll\"",
|
|
7880
8238
|
"default": "\"Button\""
|
|
7881
8239
|
}
|
|
7882
8240
|
},
|
|
7883
8241
|
{
|
|
7884
|
-
"name": "
|
|
7885
|
-
"description": "Defines the text that will be displayed inside the growing button.\nHas no effect when
|
|
8242
|
+
"name": "text",
|
|
8243
|
+
"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.",
|
|
7886
8244
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
7887
8245
|
},
|
|
7888
8246
|
{
|
|
7889
|
-
"name": "
|
|
7890
|
-
"description": "Defines the text that will be displayed below the `
|
|
8247
|
+
"name": "subtext",
|
|
8248
|
+
"description": "Defines the text that will be displayed below the `text` inside the growing button.\nHas no effect when mode is set to Scroll.",
|
|
7891
8249
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
7892
8250
|
}
|
|
7893
8251
|
],
|
|
@@ -7900,18 +8258,18 @@
|
|
|
7900
8258
|
"js": {
|
|
7901
8259
|
"properties": [
|
|
7902
8260
|
{
|
|
7903
|
-
"name": "
|
|
7904
|
-
"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
|
|
8261
|
+
"name": "mode",
|
|
8262
|
+
"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.",
|
|
7905
8263
|
"value": { "type": "\"Button\" | \"Scroll\"" }
|
|
7906
8264
|
},
|
|
7907
8265
|
{
|
|
7908
|
-
"name": "
|
|
7909
|
-
"description": "Defines the text that will be displayed inside the growing button.\nHas no effect when
|
|
8266
|
+
"name": "text",
|
|
8267
|
+
"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.",
|
|
7910
8268
|
"value": { "type": "string | undefined" }
|
|
7911
8269
|
},
|
|
7912
8270
|
{
|
|
7913
|
-
"name": "
|
|
7914
|
-
"description": "Defines the text that will be displayed below the `
|
|
8271
|
+
"name": "subtext",
|
|
8272
|
+
"description": "Defines the text that will be displayed below the `text` inside the growing button.\nHas no effect when mode is set to Scroll.",
|
|
7915
8273
|
"value": { "type": "string | undefined" }
|
|
7916
8274
|
}
|
|
7917
8275
|
],
|
|
@@ -7925,72 +8283,126 @@
|
|
|
7925
8283
|
},
|
|
7926
8284
|
{
|
|
7927
8285
|
"name": "ui5-table-header-cell",
|
|
7928
|
-
"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\";`\n---\n",
|
|
8286
|
+
"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\";`\n---\n\n\n### **Slots:**\n - **action** - Defines the action of the column.\n\n**Note:** While multiple actions are technically possible, this is not supported.\n- **default** - Defines the content of the component.",
|
|
7929
8287
|
"doc-url": "",
|
|
7930
8288
|
"attributes": [
|
|
7931
8289
|
{
|
|
7932
8290
|
"name": "width",
|
|
7933
|
-
"description": "Defines the width of column.",
|
|
7934
|
-
"value": { "type": "string", "default": "
|
|
8291
|
+
"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.",
|
|
8292
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
7935
8293
|
},
|
|
7936
8294
|
{
|
|
7937
8295
|
"name": "min-width",
|
|
7938
|
-
"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\
|
|
7939
|
-
"value": { "type": "string", "default": "
|
|
7940
|
-
},
|
|
7941
|
-
{
|
|
7942
|
-
"name": "max-width",
|
|
7943
|
-
"description": "Defines the maximum width of the column.",
|
|
7944
|
-
"value": { "type": "string", "default": "\"auto\"" }
|
|
8296
|
+
"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.",
|
|
8297
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
7945
8298
|
},
|
|
7946
8299
|
{
|
|
7947
8300
|
"name": "importance",
|
|
7948
8301
|
"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.",
|
|
7949
8302
|
"value": { "type": "number", "default": "0" }
|
|
7950
8303
|
},
|
|
8304
|
+
{
|
|
8305
|
+
"name": "popin-text",
|
|
8306
|
+
"description": "The text for the column when it pops in.",
|
|
8307
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
8308
|
+
},
|
|
8309
|
+
{
|
|
8310
|
+
"name": "sort-indicator",
|
|
8311
|
+
"description": "Defines the sort indicator of the column.",
|
|
8312
|
+
"value": {
|
|
8313
|
+
"type": "\"None\" | \"Ascending\" | \"Descending\"",
|
|
8314
|
+
"default": "\"None\""
|
|
8315
|
+
}
|
|
8316
|
+
},
|
|
8317
|
+
{
|
|
8318
|
+
"name": "popin-hidden",
|
|
8319
|
+
"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.",
|
|
8320
|
+
"value": { "type": "boolean", "default": "false" }
|
|
8321
|
+
},
|
|
7951
8322
|
{
|
|
7952
8323
|
"name": "horizontal-align",
|
|
7953
|
-
"description": "Determines the horizontal alignment of table cells
|
|
8324
|
+
"description": "Determines the horizontal alignment of table cells.",
|
|
7954
8325
|
"value": {
|
|
7955
|
-
"type": "\"
|
|
8326
|
+
"type": "\"Center\" | \"Start\" | \"End\" | \"Left\" | \"Right\" | undefined",
|
|
7956
8327
|
"default": "undefined"
|
|
7957
8328
|
}
|
|
7958
8329
|
}
|
|
7959
8330
|
],
|
|
8331
|
+
"slots": [
|
|
8332
|
+
{
|
|
8333
|
+
"name": "action",
|
|
8334
|
+
"description": "Defines the action of the column.\n\n**Note:** While multiple actions are technically possible, this is not supported."
|
|
8335
|
+
},
|
|
8336
|
+
{
|
|
8337
|
+
"name": "default",
|
|
8338
|
+
"description": "Defines the content of the component."
|
|
8339
|
+
}
|
|
8340
|
+
],
|
|
7960
8341
|
"events": [],
|
|
7961
8342
|
"js": {
|
|
7962
8343
|
"properties": [
|
|
7963
8344
|
{
|
|
7964
8345
|
"name": "width",
|
|
7965
|
-
"description": "Defines the width of column.",
|
|
7966
|
-
"value": { "type": "string" }
|
|
8346
|
+
"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.",
|
|
8347
|
+
"value": { "type": "string | undefined" }
|
|
7967
8348
|
},
|
|
7968
8349
|
{
|
|
7969
8350
|
"name": "min-width",
|
|
7970
|
-
"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\
|
|
7971
|
-
"value": { "type": "string" }
|
|
7972
|
-
},
|
|
7973
|
-
{
|
|
7974
|
-
"name": "max-width",
|
|
7975
|
-
"description": "Defines the maximum width of the column.",
|
|
7976
|
-
"value": { "type": "string" }
|
|
8351
|
+
"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.",
|
|
8352
|
+
"value": { "type": "string | undefined" }
|
|
7977
8353
|
},
|
|
7978
8354
|
{
|
|
7979
8355
|
"name": "importance",
|
|
7980
8356
|
"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.",
|
|
7981
8357
|
"value": { "type": "number" }
|
|
7982
8358
|
},
|
|
8359
|
+
{
|
|
8360
|
+
"name": "popin-text",
|
|
8361
|
+
"description": "The text for the column when it pops in.",
|
|
8362
|
+
"value": { "type": "string | undefined" }
|
|
8363
|
+
},
|
|
8364
|
+
{
|
|
8365
|
+
"name": "sort-indicator",
|
|
8366
|
+
"description": "Defines the sort indicator of the column.",
|
|
8367
|
+
"value": { "type": "\"None\" | \"Ascending\" | \"Descending\"" }
|
|
8368
|
+
},
|
|
8369
|
+
{
|
|
8370
|
+
"name": "popin-hidden",
|
|
8371
|
+
"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.",
|
|
8372
|
+
"value": { "type": "boolean" }
|
|
8373
|
+
},
|
|
7983
8374
|
{
|
|
7984
8375
|
"name": "horizontal-align",
|
|
7985
|
-
"description": "Determines the horizontal alignment of table cells
|
|
8376
|
+
"description": "Determines the horizontal alignment of table cells.",
|
|
7986
8377
|
"value": {
|
|
7987
|
-
"type": "\"
|
|
8378
|
+
"type": "\"Center\" | \"Start\" | \"End\" | \"Left\" | \"Right\" | undefined"
|
|
7988
8379
|
}
|
|
7989
8380
|
}
|
|
7990
8381
|
],
|
|
7991
8382
|
"events": []
|
|
7992
8383
|
}
|
|
7993
8384
|
},
|
|
8385
|
+
{
|
|
8386
|
+
"name": "ui5-table-header-cell-action-ai",
|
|
8387
|
+
"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\";`\n---\n\n\n### **Events:**\n - **click** - Fired when a header cell action is clicked.",
|
|
8388
|
+
"doc-url": "",
|
|
8389
|
+
"attributes": [],
|
|
8390
|
+
"events": [
|
|
8391
|
+
{
|
|
8392
|
+
"name": "click",
|
|
8393
|
+
"description": "Fired when a header cell action is clicked."
|
|
8394
|
+
}
|
|
8395
|
+
],
|
|
8396
|
+
"js": {
|
|
8397
|
+
"properties": [],
|
|
8398
|
+
"events": [
|
|
8399
|
+
{
|
|
8400
|
+
"name": "click",
|
|
8401
|
+
"description": "Fired when a header cell action is clicked."
|
|
8402
|
+
}
|
|
8403
|
+
]
|
|
8404
|
+
}
|
|
8405
|
+
},
|
|
7994
8406
|
{
|
|
7995
8407
|
"name": "ui5-table-header-row",
|
|
7996
8408
|
"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\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the cells of the component.\n\n**Note:** Use `ui5-table-header-cell` for the intended design.",
|
|
@@ -8022,18 +8434,18 @@
|
|
|
8022
8434
|
},
|
|
8023
8435
|
{
|
|
8024
8436
|
"name": "ui5-table-row",
|
|
8025
|
-
"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\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the cells of the component.\n\n**Note:** Use `ui5-table-cell` for the intended design.",
|
|
8437
|
+
"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\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the cells of the component.\n\n**Note:** Use `ui5-table-cell` for the intended design.\n- **actions** - Defines the actions of the component.\n\n**Note:** Use `ui5-table-row-action` or `ui5-table-row-action-navigation` for the intended design.",
|
|
8026
8438
|
"doc-url": "",
|
|
8027
8439
|
"attributes": [
|
|
8028
8440
|
{
|
|
8029
8441
|
"name": "row-key",
|
|
8030
|
-
"description": "Unique identifier of the row.",
|
|
8031
|
-
"value": { "type": "string", "default": "
|
|
8442
|
+
"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.",
|
|
8443
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
8032
8444
|
},
|
|
8033
8445
|
{
|
|
8034
8446
|
"name": "position",
|
|
8035
|
-
"description": "Defines the position of the row
|
|
8036
|
-
"value": { "type": "number", "default": "
|
|
8447
|
+
"description": "Defines the position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.",
|
|
8448
|
+
"value": { "type": "number | undefined", "default": "undefined" }
|
|
8037
8449
|
},
|
|
8038
8450
|
{
|
|
8039
8451
|
"name": "interactive",
|
|
@@ -8055,6 +8467,10 @@
|
|
|
8055
8467
|
{
|
|
8056
8468
|
"name": "default",
|
|
8057
8469
|
"description": "Defines the cells of the component.\n\n**Note:** Use `ui5-table-cell` for the intended design."
|
|
8470
|
+
},
|
|
8471
|
+
{
|
|
8472
|
+
"name": "actions",
|
|
8473
|
+
"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."
|
|
8058
8474
|
}
|
|
8059
8475
|
],
|
|
8060
8476
|
"events": [],
|
|
@@ -8062,13 +8478,13 @@
|
|
|
8062
8478
|
"properties": [
|
|
8063
8479
|
{
|
|
8064
8480
|
"name": "row-key",
|
|
8065
|
-
"description": "Unique identifier of the row.",
|
|
8066
|
-
"value": { "type": "string" }
|
|
8481
|
+
"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.",
|
|
8482
|
+
"value": { "type": "string | undefined" }
|
|
8067
8483
|
},
|
|
8068
8484
|
{
|
|
8069
8485
|
"name": "position",
|
|
8070
|
-
"description": "Defines the position of the row
|
|
8071
|
-
"value": { "type": "number" }
|
|
8486
|
+
"description": "Defines the position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.",
|
|
8487
|
+
"value": { "type": "number | undefined" }
|
|
8072
8488
|
},
|
|
8073
8489
|
{
|
|
8074
8490
|
"name": "interactive",
|
|
@@ -8089,16 +8505,112 @@
|
|
|
8089
8505
|
"events": []
|
|
8090
8506
|
}
|
|
8091
8507
|
},
|
|
8508
|
+
{
|
|
8509
|
+
"name": "ui5-table-row-action",
|
|
8510
|
+
"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\";`\n---\n\n\n### **Events:**\n - **click** - Fired when a row action is clicked.",
|
|
8511
|
+
"doc-url": "",
|
|
8512
|
+
"attributes": [
|
|
8513
|
+
{
|
|
8514
|
+
"name": "icon",
|
|
8515
|
+
"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).",
|
|
8516
|
+
"value": { "type": "string", "default": "\"\"" }
|
|
8517
|
+
},
|
|
8518
|
+
{
|
|
8519
|
+
"name": "text",
|
|
8520
|
+
"description": "Defines the text of the row action.\n\n**Note:** For row actions to work properly, this property is mandatory.",
|
|
8521
|
+
"value": { "type": "string", "default": "\"\"" }
|
|
8522
|
+
},
|
|
8523
|
+
{
|
|
8524
|
+
"name": "invisible",
|
|
8525
|
+
"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.",
|
|
8526
|
+
"value": { "type": "boolean", "default": "false" }
|
|
8527
|
+
}
|
|
8528
|
+
],
|
|
8529
|
+
"events": [
|
|
8530
|
+
{
|
|
8531
|
+
"name": "click",
|
|
8532
|
+
"description": "Fired when a row action is clicked."
|
|
8533
|
+
}
|
|
8534
|
+
],
|
|
8535
|
+
"js": {
|
|
8536
|
+
"properties": [
|
|
8537
|
+
{
|
|
8538
|
+
"name": "icon",
|
|
8539
|
+
"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).",
|
|
8540
|
+
"value": { "type": "string" }
|
|
8541
|
+
},
|
|
8542
|
+
{
|
|
8543
|
+
"name": "text",
|
|
8544
|
+
"description": "Defines the text of the row action.\n\n**Note:** For row actions to work properly, this property is mandatory.",
|
|
8545
|
+
"value": { "type": "string" }
|
|
8546
|
+
},
|
|
8547
|
+
{
|
|
8548
|
+
"name": "invisible",
|
|
8549
|
+
"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.",
|
|
8550
|
+
"value": { "type": "boolean" }
|
|
8551
|
+
}
|
|
8552
|
+
],
|
|
8553
|
+
"events": [
|
|
8554
|
+
{
|
|
8555
|
+
"name": "click",
|
|
8556
|
+
"description": "Fired when a row action is clicked."
|
|
8557
|
+
}
|
|
8558
|
+
]
|
|
8559
|
+
}
|
|
8560
|
+
},
|
|
8561
|
+
{
|
|
8562
|
+
"name": "ui5-table-row-action-navigation",
|
|
8563
|
+
"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\";`\n---\n\n\n### **Events:**\n - **click** - Fired when a row action is clicked.",
|
|
8564
|
+
"doc-url": "",
|
|
8565
|
+
"attributes": [
|
|
8566
|
+
{
|
|
8567
|
+
"name": "interactive",
|
|
8568
|
+
"description": "Defines the interactive state of the navigation action.",
|
|
8569
|
+
"value": { "type": "boolean", "default": "false" }
|
|
8570
|
+
},
|
|
8571
|
+
{
|
|
8572
|
+
"name": "invisible",
|
|
8573
|
+
"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.",
|
|
8574
|
+
"value": { "type": "boolean", "default": "false" }
|
|
8575
|
+
}
|
|
8576
|
+
],
|
|
8577
|
+
"events": [
|
|
8578
|
+
{
|
|
8579
|
+
"name": "click",
|
|
8580
|
+
"description": "Fired when a row action is clicked."
|
|
8581
|
+
}
|
|
8582
|
+
],
|
|
8583
|
+
"js": {
|
|
8584
|
+
"properties": [
|
|
8585
|
+
{
|
|
8586
|
+
"name": "interactive",
|
|
8587
|
+
"description": "Defines the interactive state of the navigation action.",
|
|
8588
|
+
"value": { "type": "boolean" }
|
|
8589
|
+
},
|
|
8590
|
+
{
|
|
8591
|
+
"name": "invisible",
|
|
8592
|
+
"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.",
|
|
8593
|
+
"value": { "type": "boolean" }
|
|
8594
|
+
}
|
|
8595
|
+
],
|
|
8596
|
+
"events": [
|
|
8597
|
+
{
|
|
8598
|
+
"name": "click",
|
|
8599
|
+
"description": "Fired when a row action is clicked."
|
|
8600
|
+
}
|
|
8601
|
+
]
|
|
8602
|
+
}
|
|
8603
|
+
},
|
|
8092
8604
|
{
|
|
8093
8605
|
"name": "ui5-table-selection",
|
|
8094
|
-
"description": "### Overview\n\nThe `ui5-table-selection` component is used inside the `ui5-table`
|
|
8606
|
+
"description": "@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.\n\n### 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\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the selection is changed by user interaction.",
|
|
8095
8607
|
"doc-url": "",
|
|
8096
8608
|
"attributes": [
|
|
8097
8609
|
{
|
|
8098
8610
|
"name": "mode",
|
|
8099
8611
|
"description": "Defines the selection mode.",
|
|
8100
8612
|
"value": {
|
|
8101
|
-
"type": "\"
|
|
8613
|
+
"type": "\"None\" | \"Single\" | \"Multiple\"",
|
|
8102
8614
|
"default": "\"Multiple\""
|
|
8103
8615
|
}
|
|
8104
8616
|
},
|
|
@@ -8111,7 +8623,7 @@
|
|
|
8111
8623
|
"events": [
|
|
8112
8624
|
{
|
|
8113
8625
|
"name": "change",
|
|
8114
|
-
"description": "Fired when selection is changed by user interaction."
|
|
8626
|
+
"description": "Fired when the selection is changed by user interaction."
|
|
8115
8627
|
}
|
|
8116
8628
|
],
|
|
8117
8629
|
"js": {
|
|
@@ -8119,7 +8631,7 @@
|
|
|
8119
8631
|
{
|
|
8120
8632
|
"name": "mode",
|
|
8121
8633
|
"description": "Defines the selection mode.",
|
|
8122
|
-
"value": { "type": "\"
|
|
8634
|
+
"value": { "type": "\"None\" | \"Single\" | \"Multiple\"" }
|
|
8123
8635
|
},
|
|
8124
8636
|
{
|
|
8125
8637
|
"name": "selected",
|
|
@@ -8130,7 +8642,73 @@
|
|
|
8130
8642
|
"events": [
|
|
8131
8643
|
{
|
|
8132
8644
|
"name": "change",
|
|
8133
|
-
"description": "Fired when selection is changed by user interaction."
|
|
8645
|
+
"description": "Fired when the selection is changed by user interaction."
|
|
8646
|
+
}
|
|
8647
|
+
]
|
|
8648
|
+
}
|
|
8649
|
+
},
|
|
8650
|
+
{
|
|
8651
|
+
"name": "ui5-table-selection-multi",
|
|
8652
|
+
"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\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the selection is changed by user interaction.\n\n### **Methods:**\n - **getSelectedRows(): _Array<TableRow>_** - Returns an array of the selected rows.\n- **getSelectedAsSet(): _Set<string>_** - Returns the `selected` property as a set of unique `row-key` values.\n- **setSelectedAsSet(selectedSet: _Set<string>_): _void_** - Sets the `selected` property using the provided set of unique `row-key` values.\n- **getRowByKey(rowKey: _string_): _TableRow | undefined_** - Returns the table row instance for the given row key.",
|
|
8653
|
+
"doc-url": "",
|
|
8654
|
+
"attributes": [
|
|
8655
|
+
{
|
|
8656
|
+
"name": "selected",
|
|
8657
|
+
"description": "Defines the `row-key` values of selected rows, with each value separated by a space.",
|
|
8658
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
8659
|
+
}
|
|
8660
|
+
],
|
|
8661
|
+
"events": [
|
|
8662
|
+
{
|
|
8663
|
+
"name": "change",
|
|
8664
|
+
"description": "Fired when the selection is changed by user interaction."
|
|
8665
|
+
}
|
|
8666
|
+
],
|
|
8667
|
+
"js": {
|
|
8668
|
+
"properties": [
|
|
8669
|
+
{
|
|
8670
|
+
"name": "selected",
|
|
8671
|
+
"description": "Defines the `row-key` values of selected rows, with each value separated by a space.",
|
|
8672
|
+
"value": { "type": "string | undefined" }
|
|
8673
|
+
}
|
|
8674
|
+
],
|
|
8675
|
+
"events": [
|
|
8676
|
+
{
|
|
8677
|
+
"name": "change",
|
|
8678
|
+
"description": "Fired when the selection is changed by user interaction."
|
|
8679
|
+
}
|
|
8680
|
+
]
|
|
8681
|
+
}
|
|
8682
|
+
},
|
|
8683
|
+
{
|
|
8684
|
+
"name": "ui5-table-selection-single",
|
|
8685
|
+
"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\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the selection is changed by user interaction.\n\n### **Methods:**\n - **getSelectedRow(): _TableRow | undefined_** - Returns the selected row.\n- **getRowByKey(rowKey: _string_): _TableRow | undefined_** - Returns the table row instance for the given row key.",
|
|
8686
|
+
"doc-url": "",
|
|
8687
|
+
"attributes": [
|
|
8688
|
+
{
|
|
8689
|
+
"name": "selected",
|
|
8690
|
+
"description": "Defines the `row-key` value of the selected row.",
|
|
8691
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
8692
|
+
}
|
|
8693
|
+
],
|
|
8694
|
+
"events": [
|
|
8695
|
+
{
|
|
8696
|
+
"name": "change",
|
|
8697
|
+
"description": "Fired when the selection is changed by user interaction."
|
|
8698
|
+
}
|
|
8699
|
+
],
|
|
8700
|
+
"js": {
|
|
8701
|
+
"properties": [
|
|
8702
|
+
{
|
|
8703
|
+
"name": "selected",
|
|
8704
|
+
"description": "Defines the `row-key` value of the selected row.",
|
|
8705
|
+
"value": { "type": "string | undefined" }
|
|
8706
|
+
}
|
|
8707
|
+
],
|
|
8708
|
+
"events": [
|
|
8709
|
+
{
|
|
8710
|
+
"name": "change",
|
|
8711
|
+
"description": "Fired when the selection is changed by user interaction."
|
|
8134
8712
|
}
|
|
8135
8713
|
]
|
|
8136
8714
|
}
|
|
@@ -8142,12 +8720,12 @@
|
|
|
8142
8720
|
"attributes": [
|
|
8143
8721
|
{
|
|
8144
8722
|
"name": "row-height",
|
|
8145
|
-
"description": "Defines the height of the rows in the table.\n\n**Note:**
|
|
8723
|
+
"description": "Defines the height of the rows in the table.\n\n**Note:** For virtualization to work properly, this property is mandatory.",
|
|
8146
8724
|
"value": { "type": "number", "default": "45" }
|
|
8147
8725
|
},
|
|
8148
8726
|
{
|
|
8149
8727
|
"name": "row-count",
|
|
8150
|
-
"description": "Defines the total count of rows in the table.\n\n**Note:**
|
|
8728
|
+
"description": "Defines the total count of rows in the table.\n\n**Note:** For virtualization to work properly, this property is mandatory.",
|
|
8151
8729
|
"value": { "type": "number", "default": "100" }
|
|
8152
8730
|
},
|
|
8153
8731
|
{
|
|
@@ -8166,12 +8744,12 @@
|
|
|
8166
8744
|
"properties": [
|
|
8167
8745
|
{
|
|
8168
8746
|
"name": "row-height",
|
|
8169
|
-
"description": "Defines the height of the rows in the table.\n\n**Note:**
|
|
8747
|
+
"description": "Defines the height of the rows in the table.\n\n**Note:** For virtualization to work properly, this property is mandatory.",
|
|
8170
8748
|
"value": { "type": "number" }
|
|
8171
8749
|
},
|
|
8172
8750
|
{
|
|
8173
8751
|
"name": "row-count",
|
|
8174
|
-
"description": "Defines the total count of rows in the table.\n\n**Note:**
|
|
8752
|
+
"description": "Defines the total count of rows in the table.\n\n**Note:** For virtualization to work properly, this property is mandatory.",
|
|
8175
8753
|
"value": { "type": "number" }
|
|
8176
8754
|
},
|
|
8177
8755
|
{
|
|
@@ -8190,7 +8768,7 @@
|
|
|
8190
8768
|
},
|
|
8191
8769
|
{
|
|
8192
8770
|
"name": "ui5-tag",
|
|
8193
|
-
"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\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the user clicks on an interactive tag.\n\n**Note:** The event will be fired if the `interactive` property is `true`\n\n### **Slots:**\n - **default** - 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.\n- **icon** - Defines the icon to be displayed in the component.",
|
|
8771
|
+
"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\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the user clicks on an interactive tag.\n\n**Note:** The event will be fired if the `interactive` property is `true`\n\n### **Slots:**\n - **default** - 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.\n- **icon** - Defines the icon to be displayed in the component.\n\n### **CSS Parts:**\n - **root** - Used to style the root element.",
|
|
8194
8772
|
"doc-url": "",
|
|
8195
8773
|
"attributes": [
|
|
8196
8774
|
{
|
|
@@ -8362,7 +8940,7 @@
|
|
|
8362
8940
|
"name": "value-state",
|
|
8363
8941
|
"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.",
|
|
8364
8942
|
"value": {
|
|
8365
|
-
"type": "\"
|
|
8943
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
8366
8944
|
"default": "\"None\""
|
|
8367
8945
|
}
|
|
8368
8946
|
},
|
|
@@ -8462,7 +9040,7 @@
|
|
|
8462
9040
|
"name": "value-state",
|
|
8463
9041
|
"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.",
|
|
8464
9042
|
"value": {
|
|
8465
|
-
"type": "\"
|
|
9043
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
8466
9044
|
}
|
|
8467
9045
|
},
|
|
8468
9046
|
{
|
|
@@ -8545,7 +9123,7 @@
|
|
|
8545
9123
|
"name": "value-state",
|
|
8546
9124
|
"description": "Defines the value state of the component.",
|
|
8547
9125
|
"value": {
|
|
8548
|
-
"type": "\"
|
|
9126
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
8549
9127
|
"default": "\"None\""
|
|
8550
9128
|
}
|
|
8551
9129
|
},
|
|
@@ -8635,7 +9213,7 @@
|
|
|
8635
9213
|
"name": "value-state",
|
|
8636
9214
|
"description": "Defines the value state of the component.",
|
|
8637
9215
|
"value": {
|
|
8638
|
-
"type": "\"
|
|
9216
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
8639
9217
|
}
|
|
8640
9218
|
},
|
|
8641
9219
|
{
|
|
@@ -8832,7 +9410,7 @@
|
|
|
8832
9410
|
},
|
|
8833
9411
|
{
|
|
8834
9412
|
"name": "ui5-toggle-button",
|
|
8835
|
-
"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\";`\n---\n\n\n### **Events:**\n - **
|
|
9413
|
+
"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\";`\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`.\n\n### **Slots:**\n - **default** - 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.\n- **badge** - Adds a badge to the button.\n\n### **CSS Parts:**\n - **button** - Used to style the native button element\n- **icon** - Used to style the icon in the native button element\n- **endIcon** - Used to style the end icon in the native button element",
|
|
8836
9414
|
"doc-url": "",
|
|
8837
9415
|
"attributes": [
|
|
8838
9416
|
{
|
|
@@ -8913,10 +9491,17 @@
|
|
|
8913
9491
|
}
|
|
8914
9492
|
}
|
|
8915
9493
|
],
|
|
9494
|
+
"slots": [
|
|
9495
|
+
{
|
|
9496
|
+
"name": "default",
|
|
9497
|
+
"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."
|
|
9498
|
+
},
|
|
9499
|
+
{ "name": "badge", "description": "Adds a badge to the button." }
|
|
9500
|
+
],
|
|
8916
9501
|
"events": [
|
|
8917
9502
|
{
|
|
8918
|
-
"name": "
|
|
8919
|
-
"description": "Fired when the component is activated either with a
|
|
9503
|
+
"name": "click",
|
|
9504
|
+
"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`."
|
|
8920
9505
|
}
|
|
8921
9506
|
],
|
|
8922
9507
|
"js": {
|
|
@@ -8991,8 +9576,8 @@
|
|
|
8991
9576
|
],
|
|
8992
9577
|
"events": [
|
|
8993
9578
|
{
|
|
8994
|
-
"name": "
|
|
8995
|
-
"description": "Fired when the component is activated either with a
|
|
9579
|
+
"name": "click",
|
|
9580
|
+
"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`."
|
|
8996
9581
|
}
|
|
8997
9582
|
]
|
|
8998
9583
|
}
|
|
@@ -9038,7 +9623,7 @@
|
|
|
9038
9623
|
},
|
|
9039
9624
|
{
|
|
9040
9625
|
"name": "ui5-tokenizer",
|
|
9041
|
-
"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\";`\n---\n\n\n### **Events:**\n - **token-delete** - Fired when tokens are being deleted (delete icon, delete or backspace is pressed)\n- **selection-change** - Fired when token selection is changed by user interaction",
|
|
9626
|
+
"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\";`\n---\n\n\n### **Events:**\n - **token-delete** - Fired when tokens are being deleted (delete icon, delete or backspace is pressed)\n- **selection-change** - Fired when token selection is changed by user interaction\n\n### **Slots:**\n - **default** - Defines the tokens to be displayed.",
|
|
9042
9627
|
"doc-url": "",
|
|
9043
9628
|
"attributes": [
|
|
9044
9629
|
{
|
|
@@ -9072,6 +9657,12 @@
|
|
|
9072
9657
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
9073
9658
|
}
|
|
9074
9659
|
],
|
|
9660
|
+
"slots": [
|
|
9661
|
+
{
|
|
9662
|
+
"name": "default",
|
|
9663
|
+
"description": "Defines the tokens to be displayed."
|
|
9664
|
+
}
|
|
9665
|
+
],
|
|
9075
9666
|
"events": [
|
|
9076
9667
|
{
|
|
9077
9668
|
"name": "token-delete",
|
|
@@ -9359,7 +9950,7 @@
|
|
|
9359
9950
|
"name": "value-state",
|
|
9360
9951
|
"description": "Defines the value state of the component.",
|
|
9361
9952
|
"value": {
|
|
9362
|
-
"type": "\"
|
|
9953
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
9363
9954
|
"default": "\"None\""
|
|
9364
9955
|
}
|
|
9365
9956
|
},
|
|
@@ -9423,7 +10014,7 @@
|
|
|
9423
10014
|
"name": "value-state",
|
|
9424
10015
|
"description": "Defines the value state of the component.",
|
|
9425
10016
|
"value": {
|
|
9426
|
-
"type": "\"
|
|
10017
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
9427
10018
|
}
|
|
9428
10019
|
},
|
|
9429
10020
|
{
|
|
@@ -9594,7 +10185,7 @@
|
|
|
9594
10185
|
"name": "selection-mode",
|
|
9595
10186
|
"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.",
|
|
9596
10187
|
"value": {
|
|
9597
|
-
"type": "\"
|
|
10188
|
+
"type": "\"None\" | \"Single\" | \"Multiple\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Delete\" | undefined",
|
|
9598
10189
|
"default": "\"None\""
|
|
9599
10190
|
}
|
|
9600
10191
|
},
|
|
@@ -9676,7 +10267,7 @@
|
|
|
9676
10267
|
"name": "selection-mode",
|
|
9677
10268
|
"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.",
|
|
9678
10269
|
"value": {
|
|
9679
|
-
"type": "\"
|
|
10270
|
+
"type": "\"None\" | \"Single\" | \"Multiple\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Delete\" | undefined"
|
|
9680
10271
|
}
|
|
9681
10272
|
},
|
|
9682
10273
|
{
|
|
@@ -9745,7 +10336,7 @@
|
|
|
9745
10336
|
},
|
|
9746
10337
|
{
|
|
9747
10338
|
"name": "ui5-tree-item",
|
|
9748
|
-
"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\";`\n---\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Methods:**\n - **toggle(): _void_** - Call this method to manually switch the `expanded` state of a tree item.\n\n### **CSS Parts:**\n - **title** - Used to style the title of the tree list item\n- **additionalText** - Used to style the additionalText of the tree list item\n- **icon** - Used to style the icon of the tree list item",
|
|
10339
|
+
"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\";`\n---\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Methods:**\n - **toggle(): _void_** - Call this method to manually switch the `expanded` state of a tree item.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`\n- **image** - **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.\n- **deleteButton** - 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.\n\n### **CSS Parts:**\n - **title** - Used to style the title of the tree list item\n- **additionalText** - Used to style the additionalText of the tree list item\n- **icon** - Used to style the icon of the tree list item",
|
|
9749
10340
|
"doc-url": "",
|
|
9750
10341
|
"attributes": [
|
|
9751
10342
|
{
|
|
@@ -9787,7 +10378,7 @@
|
|
|
9787
10378
|
"name": "additional-text-state",
|
|
9788
10379
|
"description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
|
|
9789
10380
|
"value": {
|
|
9790
|
-
"type": "\"
|
|
10381
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
9791
10382
|
"default": "\"None\""
|
|
9792
10383
|
}
|
|
9793
10384
|
},
|
|
@@ -9826,7 +10417,7 @@
|
|
|
9826
10417
|
"name": "highlight",
|
|
9827
10418
|
"description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
|
|
9828
10419
|
"value": {
|
|
9829
|
-
"type": "\"
|
|
10420
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
9830
10421
|
"default": "\"None\""
|
|
9831
10422
|
}
|
|
9832
10423
|
},
|
|
@@ -9836,6 +10427,20 @@
|
|
|
9836
10427
|
"value": { "type": "boolean", "default": "false" }
|
|
9837
10428
|
}
|
|
9838
10429
|
],
|
|
10430
|
+
"slots": [
|
|
10431
|
+
{
|
|
10432
|
+
"name": "default",
|
|
10433
|
+
"description": "Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`"
|
|
10434
|
+
},
|
|
10435
|
+
{
|
|
10436
|
+
"name": "image",
|
|
10437
|
+
"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."
|
|
10438
|
+
},
|
|
10439
|
+
{
|
|
10440
|
+
"name": "deleteButton",
|
|
10441
|
+
"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."
|
|
10442
|
+
}
|
|
10443
|
+
],
|
|
9839
10444
|
"events": [
|
|
9840
10445
|
{
|
|
9841
10446
|
"name": "detail-click",
|
|
@@ -9883,7 +10488,7 @@
|
|
|
9883
10488
|
"name": "additional-text-state",
|
|
9884
10489
|
"description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
|
|
9885
10490
|
"value": {
|
|
9886
|
-
"type": "\"
|
|
10491
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
9887
10492
|
}
|
|
9888
10493
|
},
|
|
9889
10494
|
{
|
|
@@ -9917,7 +10522,7 @@
|
|
|
9917
10522
|
"name": "highlight",
|
|
9918
10523
|
"description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
|
|
9919
10524
|
"value": {
|
|
9920
|
-
"type": "\"
|
|
10525
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
9921
10526
|
}
|
|
9922
10527
|
},
|
|
9923
10528
|
{
|
|
@@ -9936,7 +10541,7 @@
|
|
|
9936
10541
|
},
|
|
9937
10542
|
{
|
|
9938
10543
|
"name": "ui5-tree-item-custom",
|
|
9939
|
-
"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\";`\n---\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Methods:**\n - **toggle(): _void_** - Call this method to manually switch the `expanded` state of a tree item.\n\n### **Slots:**\n - **content** - Defines the content of the `ui5-tree-item`.\n\n### **CSS Parts:**\n - **title** - Used to style the title of the tree list item\n- **additionalText** - Used to style the additionalText of the tree list item\n- **icon** - Used to style the icon of the tree list item",
|
|
10544
|
+
"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\";`\n---\n\n\n### **Events:**\n - **detail-click** - Fired when the user clicks on the detail button when type is `Detail`.\n\n### **Methods:**\n - **toggle(): _void_** - Call this method to manually switch the `expanded` state of a tree item.\n\n### **Slots:**\n - **content** - Defines the content of the `ui5-tree-item`.\n- **default** - Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`\n- **image** - **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.\n- **deleteButton** - 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.\n\n### **CSS Parts:**\n - **title** - Used to style the title of the tree list item\n- **additionalText** - Used to style the additionalText of the tree list item\n- **icon** - Used to style the icon of the tree list item",
|
|
9940
10545
|
"doc-url": "",
|
|
9941
10546
|
"attributes": [
|
|
9942
10547
|
{
|
|
@@ -9973,7 +10578,7 @@
|
|
|
9973
10578
|
"name": "additional-text-state",
|
|
9974
10579
|
"description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
|
|
9975
10580
|
"value": {
|
|
9976
|
-
"type": "\"
|
|
10581
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
9977
10582
|
"default": "\"None\""
|
|
9978
10583
|
}
|
|
9979
10584
|
},
|
|
@@ -10012,7 +10617,7 @@
|
|
|
10012
10617
|
"name": "highlight",
|
|
10013
10618
|
"description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
|
|
10014
10619
|
"value": {
|
|
10015
|
-
"type": "\"
|
|
10620
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"",
|
|
10016
10621
|
"default": "\"None\""
|
|
10017
10622
|
}
|
|
10018
10623
|
},
|
|
@@ -10026,6 +10631,18 @@
|
|
|
10026
10631
|
{
|
|
10027
10632
|
"name": "content",
|
|
10028
10633
|
"description": "Defines the content of the `ui5-tree-item`."
|
|
10634
|
+
},
|
|
10635
|
+
{
|
|
10636
|
+
"name": "default",
|
|
10637
|
+
"description": "Defines the items of the component.\n\n**Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`"
|
|
10638
|
+
},
|
|
10639
|
+
{
|
|
10640
|
+
"name": "image",
|
|
10641
|
+
"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."
|
|
10642
|
+
},
|
|
10643
|
+
{
|
|
10644
|
+
"name": "deleteButton",
|
|
10645
|
+
"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."
|
|
10029
10646
|
}
|
|
10030
10647
|
],
|
|
10031
10648
|
"events": [
|
|
@@ -10070,7 +10687,7 @@
|
|
|
10070
10687
|
"name": "additional-text-state",
|
|
10071
10688
|
"description": "Defines the state of the `additionalText`.\n\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
|
|
10072
10689
|
"value": {
|
|
10073
|
-
"type": "\"
|
|
10690
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
10074
10691
|
}
|
|
10075
10692
|
},
|
|
10076
10693
|
{
|
|
@@ -10104,7 +10721,7 @@
|
|
|
10104
10721
|
"name": "highlight",
|
|
10105
10722
|
"description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.",
|
|
10106
10723
|
"value": {
|
|
10107
|
-
"type": "\"
|
|
10724
|
+
"type": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\""
|
|
10108
10725
|
}
|
|
10109
10726
|
},
|
|
10110
10727
|
{
|
|
@@ -10146,6 +10763,14 @@
|
|
|
10146
10763
|
"name": "part(button)",
|
|
10147
10764
|
"description": "Used to style the native button element"
|
|
10148
10765
|
},
|
|
10766
|
+
{
|
|
10767
|
+
"name": "part(icon)",
|
|
10768
|
+
"description": "Used to style the icon in the native button element"
|
|
10769
|
+
},
|
|
10770
|
+
{
|
|
10771
|
+
"name": "part(endIcon)",
|
|
10772
|
+
"description": "Used to style the end icon in the native button element"
|
|
10773
|
+
},
|
|
10149
10774
|
{
|
|
10150
10775
|
"name": "part(day-cell)",
|
|
10151
10776
|
"description": "Used to style the day cells."
|
|
@@ -10222,6 +10847,10 @@
|
|
|
10222
10847
|
"name": "part(icon)",
|
|
10223
10848
|
"description": "Used to style the icon of the `ui5-checkbox`"
|
|
10224
10849
|
},
|
|
10850
|
+
{
|
|
10851
|
+
"name": "part(header)",
|
|
10852
|
+
"description": "Used to style the header item of the group"
|
|
10853
|
+
},
|
|
10225
10854
|
{
|
|
10226
10855
|
"name": "part(header)",
|
|
10227
10856
|
"description": "Used to style the header of the component"
|
|
@@ -10362,6 +10991,22 @@
|
|
|
10362
10991
|
"name": "part(token-\\{index\\})",
|
|
10363
10992
|
"description": "Used to style each token(where `token-0` corresponds to the first item)"
|
|
10364
10993
|
},
|
|
10994
|
+
{
|
|
10995
|
+
"name": "part(header)",
|
|
10996
|
+
"description": "Used to style the header item of the group"
|
|
10997
|
+
},
|
|
10998
|
+
{
|
|
10999
|
+
"name": "part(root)",
|
|
11000
|
+
"description": "Used to style the root DOM element of the Input component"
|
|
11001
|
+
},
|
|
11002
|
+
{
|
|
11003
|
+
"name": "part(input)",
|
|
11004
|
+
"description": "Used to style the native input element"
|
|
11005
|
+
},
|
|
11006
|
+
{
|
|
11007
|
+
"name": "part(clear-icon)",
|
|
11008
|
+
"description": "Used to style the clear icon, which can be pressed to clear user input text"
|
|
11009
|
+
},
|
|
10365
11010
|
{
|
|
10366
11011
|
"name": "part(header)",
|
|
10367
11012
|
"description": "Used to style the wrapper of the header."
|
|
@@ -10438,6 +11083,22 @@
|
|
|
10438
11083
|
"name": "part(handle)",
|
|
10439
11084
|
"description": "Used to style the handle of the `ui5-slider`."
|
|
10440
11085
|
},
|
|
11086
|
+
{
|
|
11087
|
+
"name": "part(button)",
|
|
11088
|
+
"description": "Used to style the native button element"
|
|
11089
|
+
},
|
|
11090
|
+
{
|
|
11091
|
+
"name": "part(icon)",
|
|
11092
|
+
"description": "Used to style the icon in the native button element"
|
|
11093
|
+
},
|
|
11094
|
+
{
|
|
11095
|
+
"name": "part(endIcon)",
|
|
11096
|
+
"description": "Used to style the end icon in the native button element"
|
|
11097
|
+
},
|
|
11098
|
+
{
|
|
11099
|
+
"name": "part(header)",
|
|
11100
|
+
"description": "Used to style the header item of the group"
|
|
11101
|
+
},
|
|
10441
11102
|
{
|
|
10442
11103
|
"name": "part(slider)",
|
|
10443
11104
|
"description": "Used to style the track, where the handle is being slid"
|
|
@@ -10462,10 +11123,26 @@
|
|
|
10462
11123
|
"name": "part(tabstrip)",
|
|
10463
11124
|
"description": "Used to style the tabstrip of the component"
|
|
10464
11125
|
},
|
|
11126
|
+
{
|
|
11127
|
+
"name": "part(root)",
|
|
11128
|
+
"description": "Used to style the root element."
|
|
11129
|
+
},
|
|
10465
11130
|
{
|
|
10466
11131
|
"name": "part(textarea)",
|
|
10467
11132
|
"description": "Used to style the native textarea"
|
|
10468
11133
|
},
|
|
11134
|
+
{
|
|
11135
|
+
"name": "part(button)",
|
|
11136
|
+
"description": "Used to style the native button element"
|
|
11137
|
+
},
|
|
11138
|
+
{
|
|
11139
|
+
"name": "part(icon)",
|
|
11140
|
+
"description": "Used to style the icon in the native button element"
|
|
11141
|
+
},
|
|
11142
|
+
{
|
|
11143
|
+
"name": "part(endIcon)",
|
|
11144
|
+
"description": "Used to style the end icon in the native button element"
|
|
11145
|
+
},
|
|
10469
11146
|
{
|
|
10470
11147
|
"name": "part(title)",
|
|
10471
11148
|
"description": "Used to style the title of the tree list item"
|