@ui5/webcomponents 0.0.0-fb61e9889 → 0.0.0-fd6264051
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 +398 -0
- package/README.md +4 -3
- package/customI18n.js +50 -0
- package/dist/Assets-static.js +1 -1
- package/dist/Assets.js +1 -1
- package/dist/Avatar.js +4 -9
- package/dist/AvatarGroup.js +11 -13
- package/dist/Badge.js +3 -9
- package/dist/Breadcrumbs.js +36 -14
- package/dist/BreadcrumbsItem.js +4 -10
- package/dist/BusyIndicator.js +6 -9
- package/dist/Button.js +73 -34
- package/dist/Calendar.js +8 -1
- package/dist/CalendarHeader.js +4 -5
- package/dist/Card.js +19 -12
- package/dist/CardHeader.js +4 -10
- package/dist/Carousel.js +18 -12
- package/dist/CheckBox.js +43 -10
- package/dist/ColorPalette.js +15 -10
- package/dist/ColorPaletteItem.js +13 -6
- package/dist/ColorPalettePopover.js +34 -11
- package/dist/ColorPicker.js +43 -5
- package/dist/ComboBox.js +171 -55
- package/dist/DateComponentBase.js +9 -12
- package/dist/DatePicker.js +24 -14
- package/dist/DateRangePicker.js +30 -2
- package/dist/DateTimePicker.js +7 -6
- package/dist/DayPicker.js +8 -3
- package/dist/Dialog.js +44 -27
- package/dist/DurationPicker.js +1 -1
- package/dist/FileUploader.js +26 -20
- package/dist/GroupHeaderListItem.js +3 -11
- package/dist/Icon.js +13 -13
- package/dist/Input.js +273 -62
- package/dist/Interfaces.js +1 -1
- package/dist/Label.js +7 -1
- package/dist/Link.js +48 -20
- package/dist/List.js +27 -28
- package/dist/ListItem.js +7 -11
- package/dist/MessageStrip.js +46 -17
- package/dist/MultiComboBox.js +234 -47
- package/dist/MultiComboBoxItem.js +4 -10
- package/dist/MultiInput.js +56 -9
- package/dist/Option.js +15 -10
- package/dist/Panel.js +19 -12
- package/dist/Popover.js +144 -65
- package/dist/Popup.js +80 -43
- package/dist/ProgressIndicator.js +11 -10
- package/dist/RadioButton.js +19 -11
- package/dist/RangeSlider.js +14 -10
- package/dist/RatingIndicator.js +43 -14
- package/dist/ResponsivePopover.js +19 -15
- package/dist/SegmentedButton.js +19 -7
- package/dist/SegmentedButtonItem.js +8 -3
- package/dist/Select.js +48 -23
- package/dist/Slider.js +8 -4
- package/dist/SliderBase.js +11 -4
- package/dist/SplitButton.js +431 -0
- package/dist/StepInput.js +16 -14
- package/dist/Switch.js +39 -10
- package/dist/Tab.js +35 -17
- package/dist/TabContainer.js +527 -119
- package/dist/TabSeparator.js +42 -3
- package/dist/Table.js +266 -15
- package/dist/TableColumn.js +0 -7
- package/dist/TableGroupRow.js +7 -4
- package/dist/TableRow.js +89 -16
- package/dist/TextArea.js +39 -17
- package/dist/TimePicker.js +1 -1
- package/dist/TimePickerBase.js +5 -6
- package/dist/TimeSelection.js +7 -8
- package/dist/ToggleButton.js +5 -0
- package/dist/Token.js +24 -10
- package/dist/Tokenizer.js +217 -22
- package/dist/Tree.js +43 -1
- package/dist/TreeItem.js +23 -2
- package/dist/TreeListItem.js +25 -11
- package/dist/WheelSlider.js +9 -9
- package/dist/api.json +451 -115
- package/dist/css/themes/Avatar.css +1 -0
- package/dist/css/themes/AvatarGroup.css +1 -0
- package/dist/css/themes/Badge.css +1 -0
- package/dist/css/themes/Breadcrumbs.css +1 -0
- package/dist/css/themes/BreadcrumbsPopover.css +1 -0
- package/dist/css/themes/BrowserScrollbar.css +1 -0
- package/dist/css/themes/BusyIndicator.css +1 -0
- package/dist/css/themes/Button.css +1 -0
- package/dist/css/themes/Button.ie11.css +1 -0
- package/dist/css/themes/Calendar.css +1 -0
- package/dist/css/themes/CalendarHeader.css +1 -0
- package/dist/css/themes/Card.css +1 -0
- package/dist/css/themes/CardHeader.css +1 -0
- package/dist/css/themes/Carousel.css +1 -0
- package/dist/css/themes/CheckBox.css +1 -0
- package/dist/css/themes/ColorPalette.css +1 -0
- package/dist/css/themes/ColorPaletteItem.css +1 -0
- package/dist/css/themes/ColorPalettePopover.css +1 -0
- package/dist/css/themes/ColorPaletteStaticArea.css +1 -0
- package/dist/css/themes/ColorPicker.css +1 -0
- package/dist/css/themes/ComboBox.css +1 -0
- package/dist/css/themes/ComboBoxPopover.css +1 -0
- package/dist/css/themes/CustomListItem.css +1 -0
- package/dist/css/themes/DatePicker.css +1 -0
- package/dist/css/themes/DatePickerPopover.css +1 -0
- package/dist/css/themes/DateRangePicker.css +1 -0
- package/dist/css/themes/DateTimePicker.css +1 -0
- package/dist/css/themes/DateTimePickerPopover.css +1 -0
- package/dist/css/themes/DayPicker.css +1 -0
- package/dist/css/themes/Dialog.css +1 -0
- package/dist/css/themes/FileUploader.css +1 -0
- package/dist/css/themes/GroupHeaderListItem.css +1 -0
- package/dist/css/themes/GrowingButton.css +1 -0
- package/dist/css/themes/Icon.css +1 -0
- package/dist/css/themes/Input.css +1 -0
- package/dist/css/themes/InputIcon.css +1 -0
- package/dist/css/themes/InvisibleTextStyles.css +1 -0
- package/dist/css/themes/Label.css +1 -0
- package/dist/css/themes/Link.css +1 -0
- package/dist/css/themes/List.css +1 -0
- package/dist/css/themes/ListItem.css +1 -0
- package/dist/css/themes/ListItemBase.css +1 -0
- package/dist/css/themes/MessageStrip.css +1 -0
- package/dist/css/themes/MonthPicker.css +1 -0
- package/dist/css/themes/MultiComboBox.css +1 -0
- package/dist/css/themes/MultiInput.css +1 -0
- package/dist/css/themes/Panel.css +1 -0
- package/dist/css/themes/Popover.css +1 -0
- package/dist/css/themes/Popup.css +1 -0
- package/dist/css/themes/PopupGlobal.css +1 -0
- package/dist/css/themes/PopupStaticAreaStyles.css +1 -0
- package/dist/css/themes/PopupsCommon.css +1 -0
- package/dist/css/themes/ProgressIndicator.css +1 -0
- package/dist/css/themes/RadioButton.css +1 -0
- package/dist/css/themes/RatingIndicator.css +1 -0
- package/dist/css/themes/ResponsivePopover.css +1 -0
- package/dist/css/themes/ResponsivePopoverCommon.css +1 -0
- package/dist/css/themes/SegmentedButton.css +1 -0
- package/dist/css/themes/Select.css +1 -0
- package/dist/css/themes/SelectPopover.css +1 -0
- package/dist/css/themes/SliderBase.css +1 -0
- package/dist/css/themes/SplitButton.css +1 -0
- package/dist/css/themes/StepInput.css +1 -0
- package/dist/css/themes/Suggestions.css +1 -0
- package/dist/css/themes/Switch.css +1 -0
- package/dist/css/themes/Tab.css +1 -0
- package/dist/css/themes/TabContainer.css +1 -0
- package/dist/css/themes/TabInOverflow.css +1 -0
- package/dist/css/themes/TabInStrip.css +1 -0
- package/dist/css/themes/TabSeparatorInOverflow.css +1 -0
- package/dist/css/themes/TabSeparatorInStrip.css +1 -0
- package/dist/css/themes/Table.css +1 -0
- package/dist/css/themes/TableCell.css +1 -0
- package/dist/css/themes/TableColumn.css +1 -0
- package/dist/css/themes/TableGroupRow.css +1 -0
- package/dist/css/themes/TableRow.css +1 -0
- package/dist/css/themes/TapHighlightColor.css +1 -0
- package/dist/css/themes/TextArea.css +1 -0
- package/dist/css/themes/TimePicker.css +1 -0
- package/dist/css/themes/TimePickerPopover.css +1 -0
- package/dist/css/themes/TimeSelection.css +1 -0
- package/dist/css/themes/Title.css +1 -0
- package/dist/css/themes/Toast.css +1 -0
- package/dist/css/themes/ToggleButton.css +1 -0
- package/dist/css/themes/ToggleButton.ie11.css +1 -0
- package/dist/css/themes/Token.css +1 -0
- package/dist/css/themes/Tokenizer.css +1 -0
- package/dist/css/themes/TokenizerPopover.css +1 -0
- package/dist/css/themes/Tree.css +1 -0
- package/dist/css/themes/TreeListItem.css +1 -0
- package/dist/css/themes/ValueStateMessage.css +1 -0
- package/dist/css/themes/WheelSlider.css +1 -0
- package/dist/css/themes/YearPicker.css +1 -0
- package/dist/css/themes/sap_belize/parameters-bundle.css +1 -0
- package/dist/css/themes/sap_belize_hcb/parameters-bundle.css +1 -0
- package/dist/css/themes/sap_belize_hcw/parameters-bundle.css +1 -0
- package/dist/css/themes/sap_fiori_3/parameters-bundle.css +1 -0
- package/dist/css/themes/sap_fiori_3_dark/parameters-bundle.css +1 -0
- package/dist/css/themes/sap_fiori_3_hcb/parameters-bundle.css +1 -0
- package/dist/css/themes/sap_fiori_3_hcw/parameters-bundle.css +1 -0
- package/dist/css/themes/sap_horizon/parameters-bundle.css +1 -0
- package/dist/css/themes/sap_horizon_dark/parameters-bundle.css +1 -0
- package/dist/css/themes/sap_horizon_exp/parameters-bundle.css +1 -0
- package/dist/css/themes/sap_horizon_hcb/parameters-bundle.css +1 -0
- package/dist/css/themes/sap_horizon_hcw/parameters-bundle.css +1 -0
- package/dist/features/ColorPaletteMoreColors.js +7 -7
- package/dist/features/InputSuggestions.js +192 -38
- 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_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_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_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_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_belize/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_belize_hcb/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_belize_hcw/parameters-bundle.css.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 -0
- package/dist/generated/assets/themes/sap_horizon_exp/parameters-bundle.css.json +1 -0
- package/dist/generated/assets/themes/sap_horizon_hcb/parameters-bundle.css.json +1 -0
- package/dist/generated/assets/themes/sap_horizon_hcw/parameters-bundle.css.json +1 -0
- package/dist/generated/i18n/i18n-defaults.js +2 -2
- package/dist/generated/json-imports/Themes-static.js +10 -2
- package/dist/generated/json-imports/Themes.js +5 -1
- package/dist/generated/templates/AvatarGroupTemplate.lit.js +1 -1
- package/dist/generated/templates/BreadcrumbsPopoverTemplate.lit.js +1 -1
- package/dist/generated/templates/BreadcrumbsTemplate.lit.js +1 -1
- package/dist/generated/templates/BusyIndicatorTemplate.lit.js +1 -1
- package/dist/generated/templates/ButtonTemplate.lit.js +1 -1
- package/dist/generated/templates/CalendarTemplate.lit.js +1 -1
- package/dist/generated/templates/CardHeaderTemplate.lit.js +1 -1
- package/dist/generated/templates/CarouselTemplate.lit.js +4 -4
- package/dist/generated/templates/CheckBoxTemplate.lit.js +1 -1
- package/dist/generated/templates/ColorPaletteItemTemplate.lit.js +1 -1
- package/dist/generated/templates/ColorPalettePopoverTemplate.lit.js +1 -1
- package/dist/generated/templates/ColorPickerTemplate.lit.js +1 -1
- package/dist/generated/templates/ComboBoxPopoverTemplate.lit.js +3 -3
- package/dist/generated/templates/ComboBoxTemplate.lit.js +4 -3
- package/dist/generated/templates/CustomListItemTemplate.lit.js +5 -5
- package/dist/generated/templates/DatePickerPopoverTemplate.lit.js +1 -1
- package/dist/generated/templates/DatePickerTemplate.lit.js +1 -1
- package/dist/generated/templates/DateTimePickerPopoverTemplate.lit.js +2 -2
- package/dist/generated/templates/DayPickerTemplate.lit.js +1 -1
- package/dist/generated/templates/DialogTemplate.lit.js +3 -3
- package/dist/generated/templates/FileUploaderPopoverTemplate.lit.js +5 -4
- package/dist/generated/templates/GroupHeaderListItemTemplate.lit.js +1 -1
- package/dist/generated/templates/InputPopoverTemplate.lit.js +5 -5
- package/dist/generated/templates/InputTemplate.lit.js +7 -5
- package/dist/generated/templates/LinkTemplate.lit.js +1 -1
- package/dist/generated/templates/ListItemTemplate.lit.js +5 -5
- package/dist/generated/templates/ListTemplate.lit.js +2 -2
- package/dist/generated/templates/MessageStripTemplate.lit.js +4 -4
- package/dist/generated/templates/MultiComboBoxPopoverTemplate.lit.js +4 -4
- package/dist/generated/templates/MultiComboBoxTemplate.lit.js +4 -3
- package/dist/generated/templates/MultiInputTemplate.lit.js +8 -6
- package/dist/generated/templates/PanelTemplate.lit.js +2 -2
- package/dist/generated/templates/PopoverTemplate.lit.js +3 -3
- package/dist/generated/templates/PopupBlockLayerTemplate.lit.js +1 -1
- package/dist/generated/templates/PopupTemplate.lit.js +1 -1
- package/dist/generated/templates/RangeSliderTemplate.lit.js +1 -1
- package/dist/generated/templates/RatingIndicatorTemplate.lit.js +1 -1
- package/dist/generated/templates/ResponsivePopoverTemplate.lit.js +5 -5
- package/dist/generated/templates/SegmentedButtonItemTemplate.lit.js +1 -1
- package/dist/generated/templates/SegmentedButtonTemplate.lit.js +1 -1
- package/dist/generated/templates/SelectPopoverTemplate.lit.js +4 -4
- package/dist/generated/templates/SliderBaseTemplate.lit.js +1 -1
- package/dist/generated/templates/SliderTemplate.lit.js +1 -1
- package/dist/generated/templates/SplitButtonTemplate.lit.js +7 -0
- package/dist/generated/templates/StandardListItemTemplate.lit.js +5 -5
- package/dist/generated/templates/StepInputTemplate.lit.js +4 -2
- package/dist/generated/templates/SuggestionListItemTemplate.lit.js +5 -5
- package/dist/generated/templates/SwitchTemplate.lit.js +4 -2
- package/dist/generated/templates/TabContainerPopoverTemplate.lit.js +4 -2
- package/dist/generated/templates/TabContainerTemplate.lit.js +10 -11
- package/dist/generated/templates/TabInOverflowTemplate.lit.js +1 -1
- package/dist/generated/templates/TabInStripTemplate.lit.js +2 -4
- package/dist/generated/templates/TabSeparatorInOverflowTemplate.lit.js +7 -0
- package/dist/generated/templates/TabSeparatorInStripTemplate.lit.js +7 -0
- package/dist/generated/templates/TableGroupRowTemplate.lit.js +1 -1
- package/dist/generated/templates/TableRowTemplate.lit.js +2 -2
- package/dist/generated/templates/TableTemplate.lit.js +3 -3
- package/dist/generated/templates/TextAreaPopoverTemplate.lit.js +1 -1
- package/dist/generated/templates/TextAreaTemplate.lit.js +1 -1
- package/dist/generated/templates/TimePickerPopoverTemplate.lit.js +1 -1
- package/dist/generated/templates/ToggleButtonTemplate.lit.js +1 -1
- package/dist/generated/templates/TokenTemplate.lit.js +1 -1
- package/dist/generated/templates/TokenizerTemplate.lit.js +1 -1
- package/dist/generated/templates/TreeListItemTemplate.lit.js +5 -5
- package/dist/generated/templates/TreeTemplate.lit.js +1 -1
- package/dist/generated/templates/WheelSliderTemplate.lit.js +2 -2
- package/dist/generated/themes/Avatar.css.js +3 -3
- package/dist/generated/themes/AvatarGroup.css.js +3 -3
- package/dist/generated/themes/Badge.css.js +3 -3
- package/dist/generated/themes/Breadcrumbs.css.js +3 -3
- package/dist/generated/themes/BreadcrumbsPopover.css.js +3 -3
- package/dist/generated/themes/BrowserScrollbar.css.js +3 -3
- package/dist/generated/themes/BusyIndicator.css.js +3 -3
- package/dist/generated/themes/Button.css.js +3 -3
- package/dist/generated/themes/Button.ie11.css.js +3 -3
- package/dist/generated/themes/Calendar.css.js +3 -3
- package/dist/generated/themes/CalendarHeader.css.js +3 -3
- package/dist/generated/themes/Card.css.js +3 -3
- package/dist/generated/themes/CardHeader.css.js +3 -3
- package/dist/generated/themes/Carousel.css.js +3 -3
- package/dist/generated/themes/CheckBox.css.js +3 -3
- package/dist/generated/themes/ColorPalette.css.js +3 -3
- package/dist/generated/themes/ColorPaletteItem.css.js +3 -3
- package/dist/generated/themes/ColorPalettePopover.css.js +3 -3
- package/dist/generated/themes/ColorPaletteStaticArea.css.js +3 -3
- package/dist/generated/themes/ColorPicker.css.js +3 -3
- package/dist/generated/themes/ComboBox.css.js +3 -3
- package/dist/generated/themes/ComboBoxPopover.css.js +3 -3
- package/dist/generated/themes/CustomListItem.css.js +3 -3
- package/dist/generated/themes/DatePicker.css.js +3 -3
- package/dist/generated/themes/DatePickerPopover.css.js +3 -3
- package/dist/generated/themes/DateRangePicker.css.js +3 -3
- package/dist/generated/themes/DateTimePicker.css.js +3 -3
- package/dist/generated/themes/DateTimePickerPopover.css.js +3 -3
- package/dist/generated/themes/DayPicker.css.js +3 -3
- package/dist/generated/themes/Dialog.css.js +3 -3
- package/dist/generated/themes/FileUploader.css.js +3 -3
- package/dist/generated/themes/GroupHeaderListItem.css.js +3 -3
- package/dist/generated/themes/GrowingButton.css.js +3 -3
- package/dist/generated/themes/Icon.css.js +3 -3
- package/dist/generated/themes/Input.css.js +3 -3
- package/dist/generated/themes/InputIcon.css.js +3 -3
- package/dist/generated/themes/InvisibleTextStyles.css.js +3 -3
- package/dist/generated/themes/Label.css.js +3 -3
- package/dist/generated/themes/Link.css.js +3 -3
- package/dist/generated/themes/List.css.js +3 -3
- package/dist/generated/themes/ListItem.css.js +3 -3
- package/dist/generated/themes/ListItemBase.css.js +3 -3
- package/dist/generated/themes/MessageStrip.css.js +3 -3
- package/dist/generated/themes/MonthPicker.css.js +3 -3
- package/dist/generated/themes/MultiComboBox.css.js +3 -3
- package/dist/generated/themes/MultiInput.css.js +3 -3
- package/dist/generated/themes/Panel.css.js +3 -3
- package/dist/generated/themes/Popover.css.js +3 -3
- package/dist/generated/themes/Popup.css.js +3 -3
- package/dist/generated/themes/PopupGlobal.css.js +8 -0
- package/dist/generated/themes/PopupStaticAreaStyles.css.js +3 -3
- package/dist/generated/themes/PopupsCommon.css.js +3 -3
- package/dist/generated/themes/ProgressIndicator.css.js +3 -3
- package/dist/generated/themes/RadioButton.css.js +3 -3
- package/dist/generated/themes/RatingIndicator.css.js +3 -3
- package/dist/generated/themes/ResponsivePopover.css.js +3 -3
- package/dist/generated/themes/ResponsivePopoverCommon.css.js +3 -3
- package/dist/generated/themes/SegmentedButton.css.js +3 -3
- package/dist/generated/themes/Select.css.js +3 -3
- package/dist/generated/themes/SelectPopover.css.js +3 -3
- package/dist/generated/themes/SliderBase.css.js +3 -3
- package/dist/generated/themes/SplitButton.css.js +8 -0
- package/dist/generated/themes/StepInput.css.js +3 -3
- package/dist/generated/themes/Suggestions.css.js +8 -0
- package/dist/generated/themes/Switch.css.js +3 -3
- package/dist/generated/themes/Tab.css.js +3 -3
- package/dist/generated/themes/TabContainer.css.js +3 -3
- package/dist/generated/themes/TabInOverflow.css.js +3 -3
- package/dist/generated/themes/TabInStrip.css.js +3 -3
- package/dist/generated/themes/TabSeparatorInOverflow.css.js +8 -0
- package/dist/generated/themes/TabSeparatorInStrip.css.js +8 -0
- package/dist/generated/themes/Table.css.js +3 -3
- package/dist/generated/themes/TableCell.css.js +3 -3
- package/dist/generated/themes/TableColumn.css.js +3 -3
- package/dist/generated/themes/TableGroupRow.css.js +3 -3
- package/dist/generated/themes/TableRow.css.js +3 -3
- package/dist/generated/themes/TapHighlightColor.css.js +3 -3
- package/dist/generated/themes/TextArea.css.js +3 -3
- package/dist/generated/themes/TimePicker.css.js +3 -3
- package/dist/generated/themes/TimePickerPopover.css.js +3 -3
- package/dist/generated/themes/TimeSelection.css.js +3 -3
- package/dist/generated/themes/Title.css.js +3 -3
- package/dist/generated/themes/Toast.css.js +3 -3
- package/dist/generated/themes/ToggleButton.css.js +3 -3
- package/dist/generated/themes/ToggleButton.ie11.css.js +3 -3
- package/dist/generated/themes/Token.css.js +3 -3
- package/dist/generated/themes/Tokenizer.css.js +3 -3
- package/dist/generated/themes/TokenizerPopover.css.js +8 -0
- package/dist/generated/themes/Tree.css.js +3 -3
- package/dist/generated/themes/TreeListItem.css.js +3 -3
- package/dist/generated/themes/ValueStateMessage.css.js +3 -3
- package/dist/generated/themes/WheelSlider.css.js +3 -3
- package/dist/generated/themes/YearPicker.css.js +3 -3
- package/dist/generated/themes/sap_belize/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_belize_hcb/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_belize_hcw/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js +1 -0
- package/dist/generated/themes/sap_horizon_exp/parameters-bundle.css.js +1 -0
- package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js +1 -0
- package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js +1 -0
- package/dist/i18n/messagebundle.properties +29 -1
- package/dist/i18n/messagebundle_ar.properties +21 -4
- package/dist/i18n/messagebundle_bg.properties +21 -4
- package/dist/i18n/messagebundle_ca.properties +21 -4
- package/dist/i18n/messagebundle_cs.properties +21 -4
- package/dist/i18n/messagebundle_cy.properties +21 -4
- package/dist/i18n/messagebundle_da.properties +21 -4
- package/dist/i18n/messagebundle_de.properties +21 -4
- package/dist/i18n/messagebundle_el.properties +21 -4
- package/dist/i18n/messagebundle_en.properties +18 -1
- package/dist/i18n/messagebundle_en_GB.properties +18 -1
- package/dist/i18n/messagebundle_en_US_sappsd.properties +18 -1
- package/dist/i18n/messagebundle_en_US_saprigi.properties +20 -1
- package/dist/i18n/messagebundle_en_US_saptrc.properties +18 -1
- package/dist/i18n/messagebundle_es.properties +21 -4
- package/dist/i18n/messagebundle_es_MX.properties +21 -4
- package/dist/i18n/messagebundle_et.properties +21 -4
- package/dist/i18n/messagebundle_fi.properties +22 -5
- package/dist/i18n/messagebundle_fr.properties +21 -4
- package/dist/i18n/messagebundle_fr_CA.properties +21 -4
- package/dist/i18n/messagebundle_hi.properties +21 -4
- package/dist/i18n/messagebundle_hr.properties +21 -4
- package/dist/i18n/messagebundle_hu.properties +21 -4
- package/dist/i18n/messagebundle_id.properties +21 -4
- package/dist/i18n/messagebundle_it.properties +21 -4
- package/dist/i18n/messagebundle_iw.properties +21 -4
- package/dist/i18n/messagebundle_ja.properties +23 -6
- package/dist/i18n/messagebundle_kk.properties +21 -4
- package/dist/i18n/messagebundle_ko.properties +21 -4
- package/dist/i18n/messagebundle_lt.properties +21 -4
- package/dist/i18n/messagebundle_lv.properties +21 -4
- package/dist/i18n/messagebundle_ms.properties +21 -4
- package/dist/i18n/messagebundle_nl.properties +21 -4
- package/dist/i18n/messagebundle_no.properties +21 -4
- package/dist/i18n/messagebundle_pl.properties +21 -4
- package/dist/i18n/messagebundle_pt.properties +21 -4
- package/dist/i18n/messagebundle_pt_PT.properties +21 -4
- package/dist/i18n/messagebundle_ro.properties +21 -4
- package/dist/i18n/messagebundle_ru.properties +22 -5
- package/dist/i18n/messagebundle_sh.properties +21 -4
- package/dist/i18n/messagebundle_sk.properties +21 -4
- package/dist/i18n/messagebundle_sl.properties +21 -4
- package/dist/i18n/messagebundle_sv.properties +21 -4
- package/dist/i18n/messagebundle_th.properties +20 -3
- package/dist/i18n/messagebundle_tr.properties +21 -4
- package/dist/i18n/messagebundle_uk.properties +21 -4
- package/dist/i18n/messagebundle_vi.properties +21 -4
- package/dist/i18n/messagebundle_zh_CN.properties +21 -4
- package/dist/i18n/messagebundle_zh_TW.properties +20 -3
- package/dist/types/HasPopup.js +62 -0
- package/dist/types/TabsOverflowMode.js +40 -0
- package/package.json +10 -8
- package/src/Assets-static.js +1 -1
- package/src/Assets.js +1 -1
- package/src/Avatar.js +4 -9
- package/src/AvatarGroup.hbs +1 -1
- package/src/AvatarGroup.js +11 -13
- package/src/Badge.js +3 -9
- package/src/Breadcrumbs.hbs +3 -2
- package/src/Breadcrumbs.js +36 -14
- package/src/BreadcrumbsItem.js +4 -10
- package/src/BreadcrumbsPopover.hbs +2 -3
- package/src/BusyIndicator.hbs +1 -1
- package/src/BusyIndicator.js +6 -9
- package/src/Button.hbs +5 -5
- package/src/Button.js +73 -34
- package/src/Calendar.hbs +1 -1
- package/src/Calendar.js +8 -1
- package/src/CalendarHeader.js +4 -5
- package/src/Card.js +19 -12
- package/src/CardHeader.hbs +12 -5
- package/src/CardHeader.js +4 -10
- package/src/Carousel.hbs +4 -3
- package/src/Carousel.js +18 -12
- package/src/CheckBox.hbs +1 -0
- package/src/CheckBox.js +43 -10
- package/src/ColorPalette.js +15 -10
- package/src/ColorPaletteItem.hbs +2 -2
- package/src/ColorPaletteItem.js +13 -6
- package/src/ColorPalettePopover.hbs +8 -6
- package/src/ColorPalettePopover.js +34 -11
- package/src/ColorPicker.hbs +1 -0
- package/src/ColorPicker.js +43 -5
- package/src/ComboBox.hbs +5 -0
- package/src/ComboBox.js +171 -55
- package/src/ComboBoxPopover.hbs +4 -1
- package/src/DateComponentBase.js +9 -12
- package/src/DatePicker.hbs +1 -1
- package/src/DatePicker.js +24 -14
- package/src/DatePickerPopover.hbs +0 -2
- package/src/DateRangePicker.js +30 -2
- package/src/DateTimePicker.js +7 -6
- package/src/DateTimePickerPopover.hbs +1 -1
- package/src/DayPicker.hbs +1 -1
- package/src/DayPicker.js +8 -3
- package/src/Dialog.hbs +4 -3
- package/src/Dialog.js +44 -27
- package/src/DurationPicker.js +1 -1
- package/src/FileUploader.js +26 -20
- package/src/FileUploaderPopover.hbs +3 -1
- package/src/GroupHeaderListItem.hbs +1 -1
- package/src/GroupHeaderListItem.js +3 -11
- package/src/Icon.js +13 -13
- package/src/Input.hbs +10 -2
- package/src/Input.js +273 -62
- package/src/InputPopover.hbs +9 -8
- package/src/Interfaces.js +1 -1
- package/src/Label.js +7 -1
- package/src/Link.hbs +2 -1
- package/src/Link.js +48 -20
- package/src/List.hbs +6 -6
- package/src/List.js +27 -28
- package/src/ListItem.hbs +3 -2
- package/src/ListItem.js +7 -11
- package/src/MessageStrip.hbs +5 -5
- package/src/MessageStrip.js +46 -17
- package/src/MultiComboBox.hbs +4 -0
- package/src/MultiComboBox.js +234 -47
- package/src/MultiComboBoxItem.js +4 -10
- package/src/MultiComboBoxPopover.hbs +5 -3
- package/src/MultiInput.js +56 -9
- package/src/Option.js +15 -10
- package/src/Panel.hbs +5 -4
- package/src/Panel.js +19 -12
- package/src/Popover.hbs +2 -2
- package/src/Popover.js +144 -65
- package/src/Popup.hbs +1 -1
- package/src/Popup.js +80 -43
- package/src/PopupBlockLayer.hbs +1 -1
- package/src/ProgressIndicator.js +11 -10
- package/src/RadioButton.js +19 -11
- package/src/RangeSlider.hbs +4 -0
- package/src/RangeSlider.js +14 -10
- package/src/RatingIndicator.hbs +2 -0
- package/src/RatingIndicator.js +43 -14
- package/src/ResponsivePopover.hbs +7 -5
- package/src/ResponsivePopover.js +19 -15
- package/src/SegmentedButton.hbs +1 -0
- package/src/SegmentedButton.js +19 -7
- package/src/SegmentedButtonItem.hbs +1 -1
- package/src/SegmentedButtonItem.js +8 -3
- package/src/Select.js +48 -23
- package/src/SelectPopover.hbs +6 -3
- package/src/Slider.hbs +1 -0
- package/src/Slider.js +8 -4
- package/src/SliderBase.hbs +1 -1
- package/src/SliderBase.js +11 -4
- package/src/SplitButton.hbs +53 -0
- package/src/SplitButton.js +431 -0
- package/src/StepInput.hbs +8 -4
- package/src/StepInput.js +16 -14
- package/src/Switch.hbs +14 -3
- package/src/Switch.js +39 -10
- package/src/Tab.js +35 -17
- package/src/TabContainer.hbs +49 -54
- package/src/TabContainer.js +527 -119
- package/src/TabContainerPopover.hbs +11 -7
- package/src/TabInOverflow.hbs +0 -1
- package/src/TabInStrip.hbs +4 -14
- package/src/TabSeparator.js +42 -3
- package/src/TabSeparatorInOverflow.hbs +8 -0
- package/src/TabSeparatorInStrip.hbs +6 -0
- package/src/Table.hbs +13 -3
- package/src/Table.js +266 -15
- package/src/TableColumn.js +0 -7
- package/src/TableGroupRow.hbs +1 -0
- package/src/TableGroupRow.js +7 -4
- package/src/TableRow.hbs +2 -0
- package/src/TableRow.js +89 -16
- package/src/TextArea.hbs +1 -1
- package/src/TextArea.js +39 -17
- package/src/TextAreaPopover.hbs +2 -2
- package/src/TimePicker.js +1 -1
- package/src/TimePickerBase.js +5 -6
- package/src/TimePickerPopover.hbs +0 -1
- package/src/TimeSelection.js +7 -8
- package/src/ToggleButton.js +5 -0
- package/src/Token.hbs +2 -0
- package/src/Token.js +24 -10
- package/src/Tokenizer.hbs +2 -1
- package/src/Tokenizer.js +217 -22
- package/src/Tree.hbs +3 -0
- package/src/Tree.js +43 -1
- package/src/TreeItem.js +23 -2
- package/src/TreeListItem.hbs +1 -1
- package/src/TreeListItem.js +25 -11
- package/src/WheelSlider.hbs +2 -2
- package/src/WheelSlider.js +9 -9
- package/src/features/ColorPaletteMoreColors.js +7 -7
- package/src/features/InputSuggestions.js +192 -38
- package/src/i18n/messagebundle.properties +29 -1
- package/src/i18n/messagebundle_ar.properties +21 -4
- package/src/i18n/messagebundle_bg.properties +21 -4
- package/src/i18n/messagebundle_ca.properties +21 -4
- package/src/i18n/messagebundle_cs.properties +21 -4
- package/src/i18n/messagebundle_cy.properties +21 -4
- package/src/i18n/messagebundle_da.properties +21 -4
- package/src/i18n/messagebundle_de.properties +21 -4
- package/src/i18n/messagebundle_el.properties +21 -4
- package/src/i18n/messagebundle_en.properties +18 -1
- package/src/i18n/messagebundle_en_GB.properties +18 -1
- package/src/i18n/messagebundle_en_US_sappsd.properties +18 -1
- package/src/i18n/messagebundle_en_US_saprigi.properties +20 -1
- package/src/i18n/messagebundle_en_US_saptrc.properties +18 -1
- package/src/i18n/messagebundle_es.properties +21 -4
- package/src/i18n/messagebundle_es_MX.properties +21 -4
- package/src/i18n/messagebundle_et.properties +21 -4
- package/src/i18n/messagebundle_fi.properties +22 -5
- package/src/i18n/messagebundle_fr.properties +21 -4
- package/src/i18n/messagebundle_fr_CA.properties +21 -4
- package/src/i18n/messagebundle_hi.properties +21 -4
- package/src/i18n/messagebundle_hr.properties +21 -4
- package/src/i18n/messagebundle_hu.properties +21 -4
- package/src/i18n/messagebundle_id.properties +21 -4
- package/src/i18n/messagebundle_it.properties +21 -4
- package/src/i18n/messagebundle_iw.properties +21 -4
- package/src/i18n/messagebundle_ja.properties +23 -6
- package/src/i18n/messagebundle_kk.properties +21 -4
- package/src/i18n/messagebundle_ko.properties +21 -4
- package/src/i18n/messagebundle_lt.properties +21 -4
- package/src/i18n/messagebundle_lv.properties +21 -4
- package/src/i18n/messagebundle_ms.properties +21 -4
- package/src/i18n/messagebundle_nl.properties +21 -4
- package/src/i18n/messagebundle_no.properties +21 -4
- package/src/i18n/messagebundle_pl.properties +21 -4
- package/src/i18n/messagebundle_pt.properties +21 -4
- package/src/i18n/messagebundle_pt_PT.properties +21 -4
- package/src/i18n/messagebundle_ro.properties +21 -4
- package/src/i18n/messagebundle_ru.properties +22 -5
- package/src/i18n/messagebundle_sh.properties +21 -4
- package/src/i18n/messagebundle_sk.properties +21 -4
- package/src/i18n/messagebundle_sl.properties +21 -4
- package/src/i18n/messagebundle_sv.properties +21 -4
- package/src/i18n/messagebundle_th.properties +20 -3
- package/src/i18n/messagebundle_tr.properties +21 -4
- package/src/i18n/messagebundle_uk.properties +21 -4
- package/src/i18n/messagebundle_vi.properties +21 -4
- package/src/i18n/messagebundle_zh_CN.properties +21 -4
- package/src/i18n/messagebundle_zh_TW.properties +20 -3
- package/src/themes/Avatar.css +228 -0
- package/src/themes/AvatarGroup.css +82 -0
- package/src/themes/Badge.css +247 -0
- package/src/themes/Breadcrumbs.css +100 -0
- package/src/themes/BreadcrumbsPopover.css +6 -0
- package/src/themes/BrowserScrollbar.css +25 -0
- package/src/themes/BusyIndicator.css +143 -0
- package/src/themes/Button.css +306 -0
- package/src/themes/Button.ie11.css +48 -0
- package/src/themes/Calendar.css +23 -0
- package/src/themes/CalendarHeader.css +137 -0
- package/src/themes/Card.css +42 -0
- package/src/themes/CardHeader.css +133 -0
- package/src/themes/Carousel.css +140 -0
- package/src/themes/CheckBox.css +289 -0
- package/src/themes/ColorPalette.css +70 -0
- package/src/themes/ColorPaletteItem.css +70 -0
- package/src/themes/ColorPalettePopover.css +17 -0
- package/src/themes/ColorPaletteStaticArea.css +17 -0
- package/src/themes/ColorPicker.css +190 -0
- package/src/themes/ComboBox.css +9 -0
- package/src/themes/ComboBoxPopover.css +17 -0
- package/src/themes/CustomListItem.css +31 -0
- package/src/themes/DatePicker.css +46 -0
- package/src/themes/DatePickerPopover.css +9 -0
- package/src/themes/DateRangePicker.css +16 -0
- package/src/themes/DateTimePicker.css +11 -0
- package/src/themes/DateTimePickerPopover.css +78 -0
- package/src/themes/DayPicker.css +269 -0
- package/src/themes/Dialog.css +66 -0
- package/src/themes/FileUploader.css +40 -0
- package/src/themes/GroupHeaderListItem.css +24 -0
- package/src/themes/GrowingButton.css +67 -0
- package/src/themes/Icon.css +38 -0
- package/src/themes/Input.css +407 -0
- package/src/themes/InputIcon.css +53 -0
- package/src/themes/InvisibleTextStyles.css +9 -0
- package/src/themes/Label.css +85 -0
- package/src/themes/Link.css +77 -0
- package/src/themes/List.css +116 -0
- package/src/themes/ListItem.css +231 -0
- package/src/themes/ListItemBase.css +85 -0
- package/src/themes/MessageStrip.css +123 -0
- package/src/themes/MonthPicker.css +86 -0
- package/src/themes/MultiComboBox.css +36 -0
- package/src/themes/MultiInput.css +14 -0
- package/src/themes/Panel.css +100 -0
- package/src/themes/Popover.css +102 -0
- package/src/themes/Popup.css +5 -0
- package/src/themes/PopupGlobal.css +3 -0
- package/src/themes/PopupStaticAreaStyles.css +17 -0
- package/src/themes/PopupsCommon.css +127 -0
- package/src/themes/ProgressIndicator.css +158 -0
- package/src/themes/RadioButton.css +249 -0
- package/src/themes/RatingIndicator.css +52 -0
- package/src/themes/ResponsivePopover.css +29 -0
- package/src/themes/ResponsivePopoverCommon.css +208 -0
- package/src/themes/SegmentedButton.css +88 -0
- package/src/themes/Select.css +53 -0
- package/src/themes/SelectPopover.css +19 -0
- package/src/themes/SliderBase.css +253 -0
- package/src/themes/SplitButton.css +98 -0
- package/src/themes/StepInput.css +269 -0
- package/src/themes/Suggestions.css +28 -0
- package/src/themes/Switch.css +370 -0
- package/src/themes/Tab.css +9 -0
- package/src/themes/TabContainer.css +128 -0
- package/src/themes/TabInOverflow.css +65 -0
- package/src/themes/TabInStrip.css +374 -0
- package/src/themes/TabSeparatorInOverflow.css +8 -0
- package/src/themes/TabSeparatorInStrip.css +5 -0
- package/src/themes/Table.css +91 -0
- package/src/themes/TableCell.css +28 -0
- package/src/themes/TableColumn.css +29 -0
- package/src/themes/TableGroupRow.css +34 -0
- package/src/themes/TableRow.css +85 -0
- package/src/themes/TapHighlightColor.css +3 -0
- package/src/themes/TextArea.css +309 -0
- package/src/themes/TimePicker.css +50 -0
- package/src/themes/TimePickerPopover.css +15 -0
- package/src/themes/TimeSelection.css +27 -0
- package/src/themes/Title.css +65 -0
- package/src/themes/Toast.css +93 -0
- package/src/themes/ToggleButton.css +88 -0
- package/src/themes/ToggleButton.ie11.css +48 -0
- package/src/themes/Token.css +117 -0
- package/src/themes/Tokenizer.css +85 -0
- package/src/themes/TokenizerPopover.css +4 -0
- package/src/themes/Tree.css +11 -0
- package/src/themes/TreeListItem.css +107 -0
- package/src/themes/ValueStateMessage.css +86 -0
- package/src/themes/WheelSlider.css +203 -0
- package/src/themes/YearPicker.css +86 -0
- package/src/themes/base/Avatar-parameters.css +38 -0
- package/src/themes/base/AvatarGroup-parameter.css +6 -0
- package/src/themes/base/Badge-parameters.css +61 -0
- package/src/themes/base/BrowserScrollbar-parameters.css +4 -0
- package/src/themes/base/BusyIndicator-parameters.css +5 -0
- package/src/themes/base/Button-parameters.css +30 -0
- package/src/themes/base/CalendarHeader-parameters.css +20 -0
- package/src/themes/base/Card-parameters.css +17 -0
- package/src/themes/base/Carousel-parameters.css +9 -0
- package/src/themes/base/CheckBox-parameters.css +53 -0
- package/src/themes/base/ColorPalette-parameters.css +14 -0
- package/src/themes/base/ColorPicker-parameters.css +8 -0
- package/src/themes/base/DatePicker-parameters.css +6 -0
- package/src/themes/base/DayPicker-parameters.css +41 -0
- package/src/themes/base/Dialog-parameters.css +9 -0
- package/src/themes/base/GroupHeaderListItem-parameters.css +3 -0
- package/src/themes/base/GrowingButton-parameters.css +6 -0
- package/src/themes/base/Input-parameters.css +63 -0
- package/src/themes/base/InputIcon-parameters.css +11 -0
- package/src/themes/base/Link-parameters.css +8 -0
- package/src/themes/base/List-parameters.css +3 -0
- package/src/themes/base/ListItemBase-parameters.css +10 -0
- package/src/themes/base/MessageStrip-parameters.css +21 -0
- package/src/themes/base/MonthPicker-parameters.css +16 -0
- package/src/themes/base/MultiComboBox-parameters.css +3 -0
- package/src/themes/base/Panel-parameters.css +11 -0
- package/src/themes/base/PopupsCommon-parameters.css +13 -0
- package/src/themes/base/ProgressIndicator-parameters.css +21 -0
- package/src/themes/base/RadioButton-parameters.css +32 -0
- package/src/themes/base/RatingIndicator-parameters.css +3 -0
- package/src/themes/base/SegmentedButtton-parameters.css +8 -0
- package/src/themes/base/Select-parameters.css +11 -0
- package/src/themes/base/SelectPopover-parameters.css +4 -0
- package/src/themes/base/SliderBase-parameters.css +64 -0
- package/src/themes/base/StepInput-parameters.css +23 -0
- package/src/themes/base/Suggestions-parameters.css +3 -0
- package/src/themes/base/Switch-parameters.css +96 -0
- package/src/themes/base/TabContainer-parameters.css +84 -0
- package/src/themes/base/Table-parameters.css +6 -0
- package/src/themes/base/TableColumn-parameters.css +3 -0
- package/src/themes/base/TableRow-parameters.css +3 -0
- package/src/themes/base/TextArea-parameters.css +22 -0
- package/src/themes/base/TimePicker-parameters.css +4 -0
- package/src/themes/base/TimelineItem-parameters.css +10 -0
- package/src/themes/base/Title-parameters.css +8 -0
- package/src/themes/base/Toast-parameters.css +6 -0
- package/src/themes/base/ToggleButton-parameters.css +8 -0
- package/src/themes/base/Token-parameters.css +19 -0
- package/src/themes/base/Tokenizer-parameters.css +4 -0
- package/src/themes/base/ValueStateMessage-parameters.css +7 -0
- package/src/themes/base/WheelSlider-parameters.css +15 -0
- package/src/themes/base/YearPicker-parameters.css +16 -0
- package/src/themes/base/sizes-parameters.css +302 -0
- package/src/themes/sap_belize/BrowserScrollbar-parameters.css +4 -0
- package/src/themes/sap_belize/Carousel-parameters.css +9 -0
- package/src/themes/sap_belize/Dialog-parameters.css +5 -0
- package/src/themes/sap_belize/Input-parameters.css +6 -0
- package/src/themes/sap_belize/InputIcon-parameters.css +5 -0
- package/src/themes/sap_belize/ProgressIndicator-parameters.css +8 -0
- package/src/themes/sap_belize/SliderBase-parameters.css +22 -0
- package/src/themes/sap_belize/TabContainer-parameters.css +6 -0
- package/src/themes/sap_belize/Table-parameters.css +7 -0
- package/src/themes/sap_belize/TimePicker-parameters.css +5 -0
- package/src/themes/sap_belize/WheelSlider-parameters.css +17 -0
- package/src/themes/sap_belize/parameters-bundle.css +48 -0
- package/src/themes/sap_belize_hcb/Avatar-parameters.css +18 -0
- package/src/themes/sap_belize_hcb/Badge-parameters.css +43 -0
- package/src/themes/sap_belize_hcb/BrowserScrollbar-parameters.css +4 -0
- package/src/themes/sap_belize_hcb/Button-parameters.css +12 -0
- package/src/themes/sap_belize_hcb/CalendarHeader-parameters.css +11 -0
- package/src/themes/sap_belize_hcb/Card-parameters.css +6 -0
- package/src/themes/sap_belize_hcb/Carousel-parameters.css +9 -0
- package/src/themes/sap_belize_hcb/CheckBox-parameters.css +12 -0
- package/src/themes/sap_belize_hcb/DatePicker-parameters.css +6 -0
- package/src/themes/sap_belize_hcb/DayPicker-parameters.css +13 -0
- package/src/themes/sap_belize_hcb/Dialog-parameters.css +7 -0
- package/src/themes/sap_belize_hcb/GrowingButton-parameters.css +8 -0
- package/src/themes/sap_belize_hcb/Input-parameters.css +14 -0
- package/src/themes/sap_belize_hcb/InputIcon-parameters.css +5 -0
- package/src/themes/sap_belize_hcb/Link-parameters.css +7 -0
- package/src/themes/sap_belize_hcb/MessageStrip-parameters.css +10 -0
- package/src/themes/sap_belize_hcb/MonthPicker-parameters.css +10 -0
- package/src/themes/sap_belize_hcb/Panel-parameters.css +5 -0
- package/src/themes/sap_belize_hcb/ProgressIndicator-parameters.css +11 -0
- package/src/themes/sap_belize_hcb/RadioButton-parameters.css +10 -0
- package/src/themes/sap_belize_hcb/Select-parameters.css +12 -0
- package/src/themes/sap_belize_hcb/SliderBase-parameters.css +17 -0
- package/src/themes/sap_belize_hcb/Switch-parameters.css +44 -0
- package/src/themes/sap_belize_hcb/TabContainer-parameters.css +44 -0
- package/src/themes/sap_belize_hcb/Table-parameters.css +7 -0
- package/src/themes/sap_belize_hcb/TableRow-parameters.css +5 -0
- package/src/themes/sap_belize_hcb/TextArea-parameters.css +6 -0
- package/src/themes/sap_belize_hcb/ToggleButton-parameters.css +7 -0
- package/src/themes/sap_belize_hcb/Token-parameters.css +6 -0
- package/src/themes/sap_belize_hcb/ValueStateMessage-parameters.css +5 -0
- package/src/themes/sap_belize_hcb/WheelSlider-parameters.css +17 -0
- package/src/themes/sap_belize_hcb/YearPicker-parameters.css +10 -0
- package/src/themes/sap_belize_hcb/parameters-bundle.css +47 -0
- package/src/themes/sap_belize_hcw/Avatar-parameters.css +18 -0
- package/src/themes/sap_belize_hcw/Badge-parameters.css +43 -0
- package/src/themes/sap_belize_hcw/BrowserScrollbar-parameters.css +4 -0
- package/src/themes/sap_belize_hcw/Button-parameters.css +12 -0
- package/src/themes/sap_belize_hcw/CalendarHeader-parameters.css +11 -0
- package/src/themes/sap_belize_hcw/Card-parameters.css +6 -0
- package/src/themes/sap_belize_hcw/Carousel-parameters.css +9 -0
- package/src/themes/sap_belize_hcw/CheckBox-parameters.css +12 -0
- package/src/themes/sap_belize_hcw/DatePicker-parameters.css +5 -0
- package/src/themes/sap_belize_hcw/DayPicker-parameters.css +14 -0
- package/src/themes/sap_belize_hcw/Dialog-parameters.css +7 -0
- package/src/themes/sap_belize_hcw/GrowingButton-parameters.css +8 -0
- package/src/themes/sap_belize_hcw/Input-parameters.css +14 -0
- package/src/themes/sap_belize_hcw/InputIcon-parameters.css +5 -0
- package/src/themes/sap_belize_hcw/Link-parameters.css +7 -0
- package/src/themes/sap_belize_hcw/MessageStrip-parameters.css +10 -0
- package/src/themes/sap_belize_hcw/MonthPicker-parameters.css +10 -0
- package/src/themes/sap_belize_hcw/Panel-parameters.css +5 -0
- package/src/themes/sap_belize_hcw/ProgressIndicator-parameters.css +11 -0
- package/src/themes/sap_belize_hcw/RadioButton-parameters.css +10 -0
- package/src/themes/sap_belize_hcw/Select-parameters.css +12 -0
- package/src/themes/sap_belize_hcw/SliderBase-parameters.css +17 -0
- package/src/themes/sap_belize_hcw/Switch-parameters.css +43 -0
- package/src/themes/sap_belize_hcw/TabContainer-parameters.css +44 -0
- package/src/themes/sap_belize_hcw/Table-parameters.css +7 -0
- package/src/themes/sap_belize_hcw/TableRow-parameters.css +5 -0
- package/src/themes/sap_belize_hcw/TextArea-parameters.css +6 -0
- package/src/themes/sap_belize_hcw/ToggleButton-parameters.css +6 -0
- package/src/themes/sap_belize_hcw/Token-parameters.css +6 -0
- package/src/themes/sap_belize_hcw/ValueStateMessage-parameters.css +5 -0
- package/src/themes/sap_belize_hcw/WheelSlider-parameters.css +17 -0
- package/src/themes/sap_belize_hcw/YearPicker-parameters.css +10 -0
- package/src/themes/sap_belize_hcw/parameters-bundle.css +47 -0
- package/src/themes/sap_fiori_3/Avatar-parameters.css +9 -0
- package/src/themes/sap_fiori_3/Button-parameters.css +14 -0
- package/src/themes/sap_fiori_3/CalendarHeader-parameters.css +8 -0
- package/src/themes/sap_fiori_3/CheckBox-parameters.css +13 -0
- package/src/themes/sap_fiori_3/DayPicker-parameters.css +6 -0
- package/src/themes/sap_fiori_3/Input-parameters.css +7 -0
- package/src/themes/sap_fiori_3/Link-parameters.css +7 -0
- package/src/themes/sap_fiori_3/List-parameters.css +5 -0
- package/src/themes/sap_fiori_3/MonthPicker-parameters.css +5 -0
- package/src/themes/sap_fiori_3/MultiComboBox-parameters.css +5 -0
- package/src/themes/sap_fiori_3/Panel-parameters.css +6 -0
- package/src/themes/sap_fiori_3/SliderBase-parameters.css +5 -0
- package/src/themes/sap_fiori_3/TabContainer-parameters.css +12 -0
- package/src/themes/sap_fiori_3/TimePicker-parameters.css +5 -0
- package/src/themes/sap_fiori_3/Token-parameters.css +9 -0
- package/src/themes/sap_fiori_3/WheelSlider-parameters.css +16 -0
- package/src/themes/sap_fiori_3/YearPicker-parameters.css +5 -0
- package/src/themes/sap_fiori_3/parameters-bundle.css +48 -0
- package/src/themes/sap_fiori_3_dark/Avatar-parameters.css +9 -0
- package/src/themes/sap_fiori_3_dark/Button-parameters.css +14 -0
- package/src/themes/sap_fiori_3_dark/CalendarHeader-parameters.css +8 -0
- package/src/themes/sap_fiori_3_dark/CheckBox-parameters.css +13 -0
- package/src/themes/sap_fiori_3_dark/DayPicker-parameters.css +6 -0
- package/src/themes/sap_fiori_3_dark/Input-parameters.css +7 -0
- package/src/themes/sap_fiori_3_dark/Link-parameters.css +7 -0
- package/src/themes/sap_fiori_3_dark/List-parameters.css +5 -0
- package/src/themes/sap_fiori_3_dark/MonthPicker-parameters.css +5 -0
- package/src/themes/sap_fiori_3_dark/MultiComboBox-parameters.css +5 -0
- package/src/themes/sap_fiori_3_dark/Panel-parameters.css +6 -0
- package/src/themes/sap_fiori_3_dark/SliderBase-parameters.css +5 -0
- package/src/themes/sap_fiori_3_dark/TabContainer-parameters.css +12 -0
- package/src/themes/sap_fiori_3_dark/Token-parameters.css +8 -0
- package/src/themes/sap_fiori_3_dark/WheelSlider-parameters.css +15 -0
- package/src/themes/sap_fiori_3_dark/YearPicker-parameters.css +5 -0
- package/src/themes/sap_fiori_3_dark/parameters-bundle.css +47 -0
- package/src/themes/sap_fiori_3_hcb/Avatar-parameters.css +24 -0
- package/src/themes/sap_fiori_3_hcb/Badge-parameters.css +43 -0
- package/src/themes/sap_fiori_3_hcb/Button-parameters.css +10 -0
- package/src/themes/sap_fiori_3_hcb/CalendarHeader-parameters.css +11 -0
- package/src/themes/sap_fiori_3_hcb/Card-parameters.css +6 -0
- package/src/themes/sap_fiori_3_hcb/Carousel-parameters.css +9 -0
- package/src/themes/sap_fiori_3_hcb/CheckBox-parameters.css +13 -0
- package/src/themes/sap_fiori_3_hcb/DatePicker-parameters.css +5 -0
- package/src/themes/sap_fiori_3_hcb/DayPicker-parameters.css +17 -0
- package/src/themes/sap_fiori_3_hcb/Dialog-parameters.css +7 -0
- package/src/themes/sap_fiori_3_hcb/GrowingButton-parameters.css +8 -0
- package/src/themes/sap_fiori_3_hcb/Input-parameters.css +21 -0
- package/src/themes/sap_fiori_3_hcb/InputIcon-parameters.css +5 -0
- package/src/themes/sap_fiori_3_hcb/Link-parameters.css +7 -0
- package/src/themes/sap_fiori_3_hcb/MessageStrip-parameters.css +10 -0
- package/src/themes/sap_fiori_3_hcb/MonthPicker-parameters.css +11 -0
- package/src/themes/sap_fiori_3_hcb/Panel-parameters.css +5 -0
- package/src/themes/sap_fiori_3_hcb/ProgressIndicator-parameters.css +11 -0
- package/src/themes/sap_fiori_3_hcb/RadioButton-parameters.css +10 -0
- package/src/themes/sap_fiori_3_hcb/Select-parameters.css +12 -0
- package/src/themes/sap_fiori_3_hcb/SliderBase-parameters.css +14 -0
- package/src/themes/sap_fiori_3_hcb/Switch-parameters.css +43 -0
- package/src/themes/sap_fiori_3_hcb/TabContainer-parameters.css +44 -0
- package/src/themes/sap_fiori_3_hcb/Table-parameters.css +5 -0
- package/src/themes/sap_fiori_3_hcb/TableRow-parameters.css +5 -0
- package/src/themes/sap_fiori_3_hcb/TextArea-parameters.css +10 -0
- package/src/themes/sap_fiori_3_hcb/TimePicker-parameters.css +5 -0
- package/src/themes/sap_fiori_3_hcb/ToggleButton-parameters.css +6 -0
- package/src/themes/sap_fiori_3_hcb/Token-parameters.css +7 -0
- package/src/themes/sap_fiori_3_hcb/ValueStateMessage-parameters.css +5 -0
- package/src/themes/sap_fiori_3_hcb/WheelSlider-parameters.css +17 -0
- package/src/themes/sap_fiori_3_hcb/YearPicker-parameters.css +11 -0
- package/src/themes/sap_fiori_3_hcb/parameters-bundle.css +48 -0
- package/src/themes/sap_fiori_3_hcw/Avatar-parameters.css +24 -0
- package/src/themes/sap_fiori_3_hcw/Badge-parameters.css +43 -0
- package/src/themes/sap_fiori_3_hcw/Button-parameters.css +10 -0
- package/src/themes/sap_fiori_3_hcw/CalendarHeader-parameters.css +11 -0
- package/src/themes/sap_fiori_3_hcw/Card-parameters.css +6 -0
- package/src/themes/sap_fiori_3_hcw/Carousel-parameters.css +9 -0
- package/src/themes/sap_fiori_3_hcw/CheckBox-parameters.css +13 -0
- package/src/themes/sap_fiori_3_hcw/DatePicker-parameters.css +5 -0
- package/src/themes/sap_fiori_3_hcw/DayPicker-parameters.css +17 -0
- package/src/themes/sap_fiori_3_hcw/Dialog-parameters.css +7 -0
- package/src/themes/sap_fiori_3_hcw/GrowingButton-parameters.css +8 -0
- package/src/themes/sap_fiori_3_hcw/Input-parameters.css +21 -0
- package/src/themes/sap_fiori_3_hcw/InputIcon-parameters.css +5 -0
- package/src/themes/sap_fiori_3_hcw/Link-parameters.css +7 -0
- package/src/themes/sap_fiori_3_hcw/MessageStrip-parameters.css +10 -0
- package/src/themes/sap_fiori_3_hcw/MonthPicker-parameters.css +11 -0
- package/src/themes/sap_fiori_3_hcw/Panel-parameters.css +5 -0
- package/src/themes/sap_fiori_3_hcw/ProgressIndicator-parameters.css +11 -0
- package/src/themes/sap_fiori_3_hcw/RadioButton-parameters.css +10 -0
- package/src/themes/sap_fiori_3_hcw/Select-parameters.css +12 -0
- package/src/themes/sap_fiori_3_hcw/SliderBase-parameters.css +13 -0
- package/src/themes/sap_fiori_3_hcw/Switch-parameters.css +43 -0
- package/src/themes/sap_fiori_3_hcw/TabContainer-parameters.css +44 -0
- package/src/themes/sap_fiori_3_hcw/Table-parameters.css +5 -0
- package/src/themes/sap_fiori_3_hcw/TableRow-parameters.css +5 -0
- package/src/themes/sap_fiori_3_hcw/TextArea-parameters.css +10 -0
- package/src/themes/sap_fiori_3_hcw/TimePicker-parameters.css +5 -0
- package/src/themes/sap_fiori_3_hcw/ToggleButton-parameters.css +6 -0
- package/src/themes/sap_fiori_3_hcw/Token-parameters.css +7 -0
- package/src/themes/sap_fiori_3_hcw/ValueStateMessage-parameters.css +5 -0
- package/src/themes/sap_fiori_3_hcw/WheelSlider-parameters.css +17 -0
- package/src/themes/sap_fiori_3_hcw/YearPicker-parameters.css +11 -0
- package/src/themes/sap_fiori_3_hcw/parameters-bundle.css +48 -0
- package/src/themes/sap_horizon/Avatar-parameters.css +33 -0
- package/src/themes/sap_horizon/BusyIndicator-parameters.css +7 -0
- package/src/themes/sap_horizon/Button-parameters.css +20 -0
- package/src/themes/sap_horizon/CalendarHeader-parameters.css +19 -0
- package/src/themes/sap_horizon/Card-parameters.css +10 -0
- package/src/themes/sap_horizon/CheckBox-parameters.css +34 -0
- package/src/themes/sap_horizon/ColorPalette-parameters.css +16 -0
- package/src/themes/sap_horizon/ColorPicker-parameters.css +10 -0
- package/src/themes/sap_horizon/DatePicker-parameters.css +6 -0
- package/src/themes/sap_horizon/DayPicker-parameters.css +31 -0
- package/src/themes/sap_horizon/Dialog-parameters.css +11 -0
- package/src/themes/sap_horizon/GrowingButton-parameters.css +5 -0
- package/src/themes/sap_horizon/Input-parameters.css +35 -0
- package/src/themes/sap_horizon/InputIcon-parameters.css +17 -0
- package/src/themes/sap_horizon/Link-parameters.css +10 -0
- package/src/themes/sap_horizon/List-parameters.css +5 -0
- package/src/themes/sap_horizon/ListItemBase-parameters.css +6 -0
- package/src/themes/sap_horizon/MessageStrip-parameters.css +9 -0
- package/src/themes/sap_horizon/MonthPicker-parameters.css +17 -0
- package/src/themes/sap_horizon/MultiComboBox-parameters.css +5 -0
- package/src/themes/sap_horizon/Panel-parameters.css +12 -0
- package/src/themes/sap_horizon/PopupsCommon-parameters.css +9 -0
- package/src/themes/sap_horizon/ProgressIndicator-parameters.css +23 -0
- package/src/themes/sap_horizon/RadioButton-parameters.css +9 -0
- package/src/themes/sap_horizon/RatingIndicator-parameters.css +3 -0
- package/src/themes/sap_horizon/SegmentedButtton-parameters.css +10 -0
- package/src/themes/sap_horizon/Select-parameters.css +5 -0
- package/src/themes/sap_horizon/SelectPopover-parameters.css +4 -0
- package/src/themes/sap_horizon/SliderBase-parameters.css +44 -0
- package/src/themes/sap_horizon/StepInput-parameters.css +25 -0
- package/src/themes/sap_horizon/Suggestions-parameters.css +5 -0
- package/src/themes/sap_horizon/Switch-parameters.css +31 -0
- package/src/themes/sap_horizon/TabContainer-parameters.css +25 -0
- package/src/themes/sap_horizon/Table-parameters.css +8 -0
- package/src/themes/sap_horizon/TableColumn-parameters.css +5 -0
- package/src/themes/sap_horizon/TableRow-parameters.css +5 -0
- package/src/themes/sap_horizon/TextArea-parameters.css +22 -0
- package/src/themes/sap_horizon/TimePicker-parameters.css +6 -0
- package/src/themes/sap_horizon/ToggleButton-parameters.css +11 -0
- package/src/themes/sap_horizon/Token-parameters.css +28 -0
- package/src/themes/sap_horizon/Tokenizer-parameters.css +6 -0
- package/src/themes/sap_horizon/ValueStateMessage-parameters.css +8 -0
- package/src/themes/sap_horizon/WheelSlider-parameters.css +19 -0
- package/src/themes/sap_horizon/YearPicker-parameters.css +16 -0
- package/src/themes/sap_horizon/parameters-bundle.css +57 -0
- package/src/themes/sap_horizon/sizes-parameters.css +8 -0
- package/src/themes/sap_horizon_dark/Avatar-parameters.css +33 -0
- package/src/themes/sap_horizon_dark/BusyIndicator-parameters.css +7 -0
- package/src/themes/sap_horizon_dark/Button-parameters.css +20 -0
- package/src/themes/sap_horizon_dark/CalendarHeader-parameters.css +19 -0
- package/src/themes/sap_horizon_dark/Card-parameters.css +10 -0
- package/src/themes/sap_horizon_dark/CheckBox-parameters.css +34 -0
- package/src/themes/sap_horizon_dark/ColorPalette-parameters.css +16 -0
- package/src/themes/sap_horizon_dark/ColorPicker-parameters.css +10 -0
- package/src/themes/sap_horizon_dark/DatePicker-parameters.css +6 -0
- package/src/themes/sap_horizon_dark/DayPicker-parameters.css +31 -0
- package/src/themes/sap_horizon_dark/Dialog-parameters.css +11 -0
- package/src/themes/sap_horizon_dark/GrowingButton-parameters.css +5 -0
- package/src/themes/sap_horizon_dark/Input-parameters.css +35 -0
- package/src/themes/sap_horizon_dark/InputIcon-parameters.css +17 -0
- package/src/themes/sap_horizon_dark/Link-parameters.css +10 -0
- package/src/themes/sap_horizon_dark/List-parameters.css +5 -0
- package/src/themes/sap_horizon_dark/ListItemBase-parameters.css +7 -0
- package/src/themes/sap_horizon_dark/MessageStrip-parameters.css +9 -0
- package/src/themes/sap_horizon_dark/MonthPicker-parameters.css +17 -0
- package/src/themes/sap_horizon_dark/MultiComboBox-parameters.css +5 -0
- package/src/themes/sap_horizon_dark/Panel-parameters.css +12 -0
- package/src/themes/sap_horizon_dark/PopupsCommon-parameters.css +10 -0
- package/src/themes/sap_horizon_dark/ProgressIndicator-parameters.css +23 -0
- package/src/themes/sap_horizon_dark/RadioButton-parameters.css +9 -0
- package/src/themes/sap_horizon_dark/RatingIndicator-parameters.css +3 -0
- package/src/themes/sap_horizon_dark/SegmentedButtton-parameters.css +10 -0
- package/src/themes/sap_horizon_dark/Select-parameters.css +5 -0
- package/src/themes/sap_horizon_dark/SelectPopover-parameters.css +4 -0
- package/src/themes/sap_horizon_dark/SliderBase-parameters.css +44 -0
- package/src/themes/sap_horizon_dark/StepInput-parameters.css +25 -0
- package/src/themes/sap_horizon_dark/Suggestions-parameters.css +5 -0
- package/src/themes/sap_horizon_dark/Switch-parameters.css +31 -0
- package/src/themes/sap_horizon_dark/TabContainer-parameters.css +25 -0
- package/src/themes/sap_horizon_dark/Table-parameters.css +8 -0
- package/src/themes/sap_horizon_dark/TableColumn-parameters.css +5 -0
- package/src/themes/sap_horizon_dark/TableRow-parameters.css +5 -0
- package/src/themes/sap_horizon_dark/TextArea-parameters.css +22 -0
- package/src/themes/sap_horizon_dark/TimePicker-parameters.css +6 -0
- package/src/themes/sap_horizon_dark/ToggleButton-parameters.css +11 -0
- package/src/themes/sap_horizon_dark/Token-parameters.css +28 -0
- package/src/themes/sap_horizon_dark/Tokenizer-parameters.css +6 -0
- package/src/themes/sap_horizon_dark/ValueStateMessage-parameters.css +8 -0
- package/src/themes/sap_horizon_dark/WheelSlider-parameters.css +19 -0
- package/src/themes/sap_horizon_dark/YearPicker-parameters.css +16 -0
- package/src/themes/sap_horizon_dark/parameters-bundle.css +57 -0
- package/src/themes/sap_horizon_dark/sizes-parameters.css +8 -0
- package/src/themes/sap_horizon_exp/Badge-parameters.css +91 -0
- package/src/themes/sap_horizon_exp/Button-parameters.css +12 -0
- package/src/themes/sap_horizon_exp/CalendarHeader-parameters.css +8 -0
- package/src/themes/sap_horizon_exp/CheckBox-parameters.css +35 -0
- package/src/themes/sap_horizon_exp/DatePicker-parameters.css +5 -0
- package/src/themes/sap_horizon_exp/DayPicker-parameters.css +6 -0
- package/src/themes/sap_horizon_exp/Input-parameters.css +46 -0
- package/src/themes/sap_horizon_exp/InputIcon-parameters.css +9 -0
- package/src/themes/sap_horizon_exp/Link-parameters.css +7 -0
- package/src/themes/sap_horizon_exp/List-parameters.css +5 -0
- package/src/themes/sap_horizon_exp/MonthPicker-parameters.css +5 -0
- package/src/themes/sap_horizon_exp/MultiComboBox-parameters.css +7 -0
- package/src/themes/sap_horizon_exp/Panel-parameters.css +6 -0
- package/src/themes/sap_horizon_exp/Popover-parameters.css +5 -0
- package/src/themes/sap_horizon_exp/RadioButton-parameters.css +30 -0
- package/src/themes/sap_horizon_exp/Select-parameters.css +5 -0
- package/src/themes/sap_horizon_exp/SliderBase-parameters.css +30 -0
- package/src/themes/sap_horizon_exp/Switch-parameters.css +46 -0
- package/src/themes/sap_horizon_exp/TabContainer-parameters.css +40 -0
- package/src/themes/sap_horizon_exp/TimePicker-parameters.css +5 -0
- package/src/themes/sap_horizon_exp/Token-parameters.css +9 -0
- package/src/themes/sap_horizon_exp/WheelSlider-parameters.css +16 -0
- package/src/themes/sap_horizon_exp/YearPicker-parameters.css +5 -0
- package/src/themes/sap_horizon_exp/parameters-bundle.css +46 -0
- package/src/themes/sap_horizon_hcb/Avatar-parameters.css +24 -0
- package/src/themes/sap_horizon_hcb/Badge-parameters.css +43 -0
- package/src/themes/sap_horizon_hcb/Button-parameters.css +10 -0
- package/src/themes/sap_horizon_hcb/CalendarHeader-parameters.css +11 -0
- package/src/themes/sap_horizon_hcb/Card-parameters.css +6 -0
- package/src/themes/sap_horizon_hcb/Carousel-parameters.css +9 -0
- package/src/themes/sap_horizon_hcb/CheckBox-parameters.css +13 -0
- package/src/themes/sap_horizon_hcb/DatePicker-parameters.css +5 -0
- package/src/themes/sap_horizon_hcb/DayPicker-parameters.css +17 -0
- package/src/themes/sap_horizon_hcb/Dialog-parameters.css +7 -0
- package/src/themes/sap_horizon_hcb/GrowingButton-parameters.css +8 -0
- package/src/themes/sap_horizon_hcb/Input-parameters.css +21 -0
- package/src/themes/sap_horizon_hcb/InputIcon-parameters.css +5 -0
- package/src/themes/sap_horizon_hcb/Link-parameters.css +7 -0
- package/src/themes/sap_horizon_hcb/MessageStrip-parameters.css +10 -0
- package/src/themes/sap_horizon_hcb/MonthPicker-parameters.css +11 -0
- package/src/themes/sap_horizon_hcb/Panel-parameters.css +5 -0
- package/src/themes/sap_horizon_hcb/ProgressIndicator-parameters.css +11 -0
- package/src/themes/sap_horizon_hcb/RadioButton-parameters.css +10 -0
- package/src/themes/sap_horizon_hcb/Select-parameters.css +12 -0
- package/src/themes/sap_horizon_hcb/SliderBase-parameters.css +14 -0
- package/src/themes/sap_horizon_hcb/Switch-parameters.css +43 -0
- package/src/themes/sap_horizon_hcb/TabContainer-parameters.css +44 -0
- package/src/themes/sap_horizon_hcb/Table-parameters.css +5 -0
- package/src/themes/sap_horizon_hcb/TableRow-parameters.css +5 -0
- package/src/themes/sap_horizon_hcb/TextArea-parameters.css +10 -0
- package/src/themes/sap_horizon_hcb/TimePicker-parameters.css +5 -0
- package/src/themes/sap_horizon_hcb/ToggleButton-parameters.css +6 -0
- package/src/themes/sap_horizon_hcb/Token-parameters.css +7 -0
- package/src/themes/sap_horizon_hcb/ValueStateMessage-parameters.css +5 -0
- package/src/themes/sap_horizon_hcb/WheelSlider-parameters.css +17 -0
- package/src/themes/sap_horizon_hcb/YearPicker-parameters.css +11 -0
- package/src/themes/sap_horizon_hcb/parameters-bundle.css +48 -0
- package/src/themes/sap_horizon_hcw/Avatar-parameters.css +24 -0
- package/src/themes/sap_horizon_hcw/Badge-parameters.css +43 -0
- package/src/themes/sap_horizon_hcw/Button-parameters.css +10 -0
- package/src/themes/sap_horizon_hcw/CalendarHeader-parameters.css +11 -0
- package/src/themes/sap_horizon_hcw/Card-parameters.css +6 -0
- package/src/themes/sap_horizon_hcw/Carousel-parameters.css +9 -0
- package/src/themes/sap_horizon_hcw/CheckBox-parameters.css +13 -0
- package/src/themes/sap_horizon_hcw/DatePicker-parameters.css +5 -0
- package/src/themes/sap_horizon_hcw/DayPicker-parameters.css +17 -0
- package/src/themes/sap_horizon_hcw/Dialog-parameters.css +7 -0
- package/src/themes/sap_horizon_hcw/GrowingButton-parameters.css +8 -0
- package/src/themes/sap_horizon_hcw/Input-parameters.css +21 -0
- package/src/themes/sap_horizon_hcw/InputIcon-parameters.css +5 -0
- package/src/themes/sap_horizon_hcw/Link-parameters.css +7 -0
- package/src/themes/sap_horizon_hcw/MessageStrip-parameters.css +10 -0
- package/src/themes/sap_horizon_hcw/MonthPicker-parameters.css +11 -0
- package/src/themes/sap_horizon_hcw/Panel-parameters.css +5 -0
- package/src/themes/sap_horizon_hcw/ProgressIndicator-parameters.css +11 -0
- package/src/themes/sap_horizon_hcw/RadioButton-parameters.css +10 -0
- package/src/themes/sap_horizon_hcw/Select-parameters.css +12 -0
- package/src/themes/sap_horizon_hcw/SliderBase-parameters.css +13 -0
- package/src/themes/sap_horizon_hcw/Switch-parameters.css +43 -0
- package/src/themes/sap_horizon_hcw/TabContainer-parameters.css +44 -0
- package/src/themes/sap_horizon_hcw/Table-parameters.css +5 -0
- package/src/themes/sap_horizon_hcw/TableRow-parameters.css +5 -0
- package/src/themes/sap_horizon_hcw/TextArea-parameters.css +10 -0
- package/src/themes/sap_horizon_hcw/TimePicker-parameters.css +5 -0
- package/src/themes/sap_horizon_hcw/ToggleButton-parameters.css +6 -0
- package/src/themes/sap_horizon_hcw/Token-parameters.css +7 -0
- package/src/themes/sap_horizon_hcw/ValueStateMessage-parameters.css +5 -0
- package/src/themes/sap_horizon_hcw/WheelSlider-parameters.css +17 -0
- package/src/themes/sap_horizon_hcw/YearPicker-parameters.css +11 -0
- package/src/themes/sap_horizon_hcw/parameters-bundle.css +48 -0
- package/src/types/HasPopup.js +62 -0
- package/src/types/TabsOverflowMode.js +40 -0
- package/dist/generated/templates/TabSeparatorTemplate.lit.js +0 -7
- package/src/TabSeparator.hbs +0 -1
package/dist/api.json
CHANGED
|
@@ -78,6 +78,7 @@
|
|
|
78
78
|
"slots": [
|
|
79
79
|
{
|
|
80
80
|
"name": "default",
|
|
81
|
+
"propertyName": "image",
|
|
81
82
|
"visibility": "public",
|
|
82
83
|
"since": "1.0.0-rc.15",
|
|
83
84
|
"type": "HTMLElement",
|
|
@@ -110,7 +111,7 @@
|
|
|
110
111
|
"name": "colorScheme",
|
|
111
112
|
"readonly": "true",
|
|
112
113
|
"visibility": "public",
|
|
113
|
-
"type": "
|
|
114
|
+
"type": "AvatarColorScheme[]",
|
|
114
115
|
"description": "Returns an array containing the <code>AvatarColorScheme</code> values that correspond to the avatars in the component.",
|
|
115
116
|
"defaultValue": "[]"
|
|
116
117
|
},
|
|
@@ -118,7 +119,7 @@
|
|
|
118
119
|
"name": "hiddenItems",
|
|
119
120
|
"readonly": "true",
|
|
120
121
|
"visibility": "public",
|
|
121
|
-
"type": "
|
|
122
|
+
"type": "HTMLElement[]",
|
|
122
123
|
"description": "Returns an array containing the <code>ui5-avatar</code> instances that are currently not displayed due to lack of space.",
|
|
123
124
|
"defaultValue": "[]"
|
|
124
125
|
},
|
|
@@ -253,9 +254,10 @@
|
|
|
253
254
|
"events": [
|
|
254
255
|
{
|
|
255
256
|
"name": "item-click",
|
|
257
|
+
"allowPreventDefault": "true",
|
|
256
258
|
"visibility": "public",
|
|
257
259
|
"parameters": [ { "name": "item", "type": "HTMLElement", "description": "The clicked item." } ],
|
|
258
|
-
"description": "Fires when a <code>BreadcrumbsItem</code> is clicked."
|
|
260
|
+
"description": "Fires when a <code>BreadcrumbsItem</code> is clicked. <b>Note:</b> You can prevent browser location change by calling <code>event.preventDefault()</code>."
|
|
259
261
|
}
|
|
260
262
|
]
|
|
261
263
|
},
|
|
@@ -288,12 +290,6 @@
|
|
|
288
290
|
"description": "Defines the link href. <br><br> <b>Note:</b> Standard hyperlink behavior is supported.",
|
|
289
291
|
"defaultValue": "\"\""
|
|
290
292
|
},
|
|
291
|
-
{
|
|
292
|
-
"name": "stableDomRef",
|
|
293
|
-
"visibility": "public",
|
|
294
|
-
"type": "string",
|
|
295
|
-
"description": "Defines the stable selector that you can use via <code>getStableDomRef</code> method."
|
|
296
|
-
},
|
|
297
293
|
{
|
|
298
294
|
"name": "target",
|
|
299
295
|
"visibility": "public",
|
|
@@ -350,7 +346,7 @@
|
|
|
350
346
|
"name": "text",
|
|
351
347
|
"visibility": "public",
|
|
352
348
|
"since": "1.0.0-rc.7",
|
|
353
|
-
"type": "
|
|
349
|
+
"type": "string",
|
|
354
350
|
"description": "Defines text to be displayed below the component. It can be used to inform the user of the current operation.",
|
|
355
351
|
"defaultValue": "\"\""
|
|
356
352
|
}
|
|
@@ -378,12 +374,28 @@
|
|
|
378
374
|
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-button</code> component represents a simple push button. It enables users to trigger actions by clicking or tapping the <code>ui5-button</code>, or by pressing certain keyboard keys, such as Enter.\n\n<h3>Usage</h3>\n\nFor the <code>ui5-button</code> UI, you can define text, icon, or both. You can also specify whether the text or the icon is displayed first. <br><br> You can choose from a set of predefined types that offer different styling to correspond to the triggered action. <br><br> You can set the <code>ui5-button</code> as enabled or disabled. An enabled <code>ui5-button</code> can be pressed by clicking or tapping it. The button changes its style to provide visual feedback to the user that it is pressed or hovered over with the mouse cursor. A disabled <code>ui5-button</code> appears inactive and cannot be pressed.\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-button</code> exposes the following CSS Shadow Parts: <ul> <li>button - Used to style the native button element</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Button\";</code>",
|
|
379
375
|
"constructor": { "visibility": "public" },
|
|
380
376
|
"properties": [
|
|
377
|
+
{
|
|
378
|
+
"name": "accessibilityAttributes",
|
|
379
|
+
"visibility": "public",
|
|
380
|
+
"since": "1.2.0",
|
|
381
|
+
"type": "object",
|
|
382
|
+
"noattribute": "true",
|
|
383
|
+
"description": "An object of strings that defines several additional accessibility attribute values for customization depending on the use case.\n\nIt supports the following fields:\n\n<ul> <li><code>expanded</code>: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values: <ul> <li><code>true</code></li> <li><code>false</code></li> </ul> </li> <li><code>hasPopup</code>: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. Accepts the following string values: <ul> <li><code>Dialog</code></li> <li><code>Grid</code></li> <li><code>ListBox</code></li> <li><code>Menu</code></li> <li><code>Tree</code></li> </ul> </li> <li><code>controls</code>: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.</li> </ul>"
|
|
384
|
+
},
|
|
381
385
|
{
|
|
382
386
|
"name": "accessibleName",
|
|
383
387
|
"visibility": "public",
|
|
384
388
|
"since": "1.0.0-rc.15",
|
|
385
|
-
"type": "
|
|
386
|
-
"description": "
|
|
389
|
+
"type": "string",
|
|
390
|
+
"description": "Defines the accessible aria name of the component."
|
|
391
|
+
},
|
|
392
|
+
{
|
|
393
|
+
"name": "accessibleNameRef",
|
|
394
|
+
"visibility": "public",
|
|
395
|
+
"since": "1.1.0",
|
|
396
|
+
"type": "string",
|
|
397
|
+
"description": "Receives id(or many ids) of the elements that label the component.",
|
|
398
|
+
"defaultValue": "\"\""
|
|
387
399
|
},
|
|
388
400
|
{
|
|
389
401
|
"name": "design",
|
|
@@ -419,6 +431,13 @@
|
|
|
419
431
|
"type": "boolean",
|
|
420
432
|
"description": "When set to <code>true</code>, the component will automatically submit the nearest form element upon <code>press</code>. <br><br> <b>Note:</b> For the <code>submits</code> property to have effect, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>",
|
|
421
433
|
"defaultValue": "false"
|
|
434
|
+
},
|
|
435
|
+
{
|
|
436
|
+
"name": "tooltip",
|
|
437
|
+
"visibility": "public",
|
|
438
|
+
"since": "1.2.0",
|
|
439
|
+
"type": "string",
|
|
440
|
+
"description": "Defines the tooltip of the component. <br> <b>Note:</b> We recommend setting tooltip to icon-only components."
|
|
422
441
|
}
|
|
423
442
|
],
|
|
424
443
|
"slots": [
|
|
@@ -450,7 +469,7 @@
|
|
|
450
469
|
"visibility": "public",
|
|
451
470
|
"since": "1.0.0-rc.11",
|
|
452
471
|
"extends": "CalendarPart",
|
|
453
|
-
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-calendar</code> component allows users to select one or more dates. <br><br> Currently selected dates are represented with instances of <code>ui5-date</code> as children of the <code>ui5-calendar</code>. The value property of each <code>ui5-date</code> must be a date string, correctly formatted according to the <code>ui5-calendar</code>'s <code>formatPattern</code> property. Whenever the user changes the date selection, <code>ui5-calendar</code> will automatically create/remove instances of <code>ui5-date</code> in itself, unless you prevent this behavior by calling <code>preventDefault()</code> for the <code>selected-dates-change</code> event. This is useful if you want to control the selected dates externally. <br><br>\n\n<h3>Usage</h3>\n\nThe user can navigate to a particular date by: <br> <ul> <li>Pressing over a month inside the months view</li> <li>Pressing over an year inside the years view</li> </ul> <br> The user can confirm a date selection by pressing over a date inside the days view. <br><br>\n\n<h3>Keyboard Handling</h3> The <code>ui5-calendar</code> provides advanced keyboard handling. When a picker is showed and focused the user can use the following keyboard shortcuts in order to perform a navigation: <br> - Day picker: <br> <ul> <li>[F4] - Shows month picker</li> <li>[SHIFT] + [F4] - Shows year picker</li> <li>[PAGEUP] - Navigate to the previous month</li> <li>[PAGEDOWN] - Navigate to the next month</li> <li>[SHIFT] + [PAGEUP] - Navigate to the previous year</li> <li>[SHIFT] + [PAGEDOWN] - Navigate to the next year</li> <li>[CTRL] + [SHIFT] + [PAGEUP] - Navigate ten years backwards</li> <li>[CTRL] + [SHIFT] + [PAGEDOWN] - Navigate ten years forwards</li> <li>[HOME] - Navigate to the first day of the week</li> <li>[END] - Navigate to the last day of the week</li> <li>[CTRL] + [HOME] - Navigate to the first day of the month</li> <li>[CTRL] + [END] - Navigate to the last day of the month</li> </ul> <br> - Month picker: <br> <ul> <li>[PAGEUP] - Navigate to the previous year</li> <li>[PAGEDOWN] - Navigate to the next year</li> <li>[HOME] - Navigate to the first month of the current row</li> <li>[END] - Navigate to the last month of the current row</li> <li>[CTRL] + [HOME] - Navigate to the first month of the current year</li> <li>[CTRL] + [END] - Navigate to the last month of the year</li> </ul> <br> - Year picker: <br> <ul> <li>[PAGEUP] - Navigate to the previous year range</li> <li>[PAGEDOWN] - Navigate the next year range</li> <li>[HOME] - Navigate to the first year of the current row</li> <li>[END] - Navigate to the last year of the current row</li> <li>[CTRL] + [HOME] - Navigate to the first year of the current year range</li> <li>[CTRL] + [END] - Navigate to the last year of the current year range</li> </ul> <br>\n\n<h3>Calendar types</h3> The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian. By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar, you need to set the <code>primaryCalendarType</code> property and import one or more of the following modules: <br><br>\n\n<code>import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";</code> <br><br>\n\nOr, you can use the global configuration and set the <code>calendarType</code> key: <br> <code> <script data-id=\"sap-ui-config\" type=\"application/json\"> { \"calendarType\": \"Japanese\" } </script> </code>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Calendar\";</code>",
|
|
472
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-calendar</code> component allows users to select one or more dates. <br><br> Currently selected dates are represented with instances of <code>ui5-date</code> as children of the <code>ui5-calendar</code>. The value property of each <code>ui5-date</code> must be a date string, correctly formatted according to the <code>ui5-calendar</code>'s <code>formatPattern</code> property. Whenever the user changes the date selection, <code>ui5-calendar</code> will automatically create/remove instances of <code>ui5-date</code> in itself, unless you prevent this behavior by calling <code>preventDefault()</code> for the <code>selected-dates-change</code> event. This is useful if you want to control the selected dates externally. <br><br>\n\n<h3>Usage</h3>\n\nThe user can navigate to a particular date by: <br> <ul> <li>Pressing over a month inside the months view</li> <li>Pressing over an year inside the years view</li> </ul> <br> The user can confirm a date selection by pressing over a date inside the days view. <br><br>\n\n<h3>Keyboard Handling</h3> The <code>ui5-calendar</code> provides advanced keyboard handling. When a picker is showed and focused the user can use the following keyboard shortcuts in order to perform a navigation: <br> - Day picker: <br> <ul> <li>[F4] - Shows month picker</li> <li>[SHIFT] + [F4] - Shows year picker</li> <li>[PAGEUP] - Navigate to the previous month</li> <li>[PAGEDOWN] - Navigate to the next month</li> <li>[SHIFT] + [PAGEUP] - Navigate to the previous year</li> <li>[SHIFT] + [PAGEDOWN] - Navigate to the next year</li> <li>[CTRL] + [SHIFT] + [PAGEUP] - Navigate ten years backwards</li> <li>[CTRL] + [SHIFT] + [PAGEDOWN] - Navigate ten years forwards</li> <li>[HOME] - Navigate to the first day of the week</li> <li>[END] - Navigate to the last day of the week</li> <li>[CTRL] + [HOME] - Navigate to the first day of the month</li> <li>[CTRL] + [END] - Navigate to the last day of the month</li> </ul> <br> - Month picker: <br> <ul> <li>[PAGEUP] - Navigate to the previous year</li> <li>[PAGEDOWN] - Navigate to the next year</li> <li>[HOME] - Navigate to the first month of the current row</li> <li>[END] - Navigate to the last month of the current row</li> <li>[CTRL] + [HOME] - Navigate to the first month of the current year</li> <li>[CTRL] + [END] - Navigate to the last month of the year</li> </ul> <br> - Year picker: <br> <ul> <li>[PAGEUP] - Navigate to the previous year range</li> <li>[PAGEDOWN] - Navigate the next year range</li> <li>[HOME] - Navigate to the first year of the current row</li> <li>[END] - Navigate to the last year of the current row</li> <li>[CTRL] + [HOME] - Navigate to the first year of the current year range</li> <li>[CTRL] + [END] - Navigate to the last year of the current year range</li> </ul> <br>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br>\n\n<h3>Calendar types</h3> The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian. By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar, you need to set the <code>primaryCalendarType</code> property and import one or more of the following modules: <br><br>\n\n<code>import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";</code> <br><br>\n\nOr, you can use the global configuration and set the <code>calendarType</code> key: <br> <code> <script data-id=\"sap-ui-config\" type=\"application/json\"> { \"calendarType\": \"Japanese\" } </script> </code>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Calendar\";</code>",
|
|
454
473
|
"constructor": { "visibility": "public" },
|
|
455
474
|
"properties": [
|
|
456
475
|
{
|
|
@@ -592,8 +611,16 @@
|
|
|
592
611
|
"name": "accessibleName",
|
|
593
612
|
"visibility": "public",
|
|
594
613
|
"since": "1.0.0-rc.16",
|
|
595
|
-
"type": "
|
|
596
|
-
"description": "Defines the accessible name of the component, which is used as the name of the card region and should be unique per card. <b>Note:</b> <code>accessibleName</code> should be always set.",
|
|
614
|
+
"type": "string",
|
|
615
|
+
"description": "Defines the accessible name of the component, which is used as the name of the card region and should be unique per card. <b>Note:</b> <code>accessibleName</code> should be always set, unless <code>accessibleNameRef</code> is set.",
|
|
616
|
+
"defaultValue": "\"\""
|
|
617
|
+
},
|
|
618
|
+
{
|
|
619
|
+
"name": "accessibleNameRef",
|
|
620
|
+
"visibility": "public",
|
|
621
|
+
"since": "1.0.0-rc.16",
|
|
622
|
+
"type": "string",
|
|
623
|
+
"description": "Defines the IDs of the elements that label the component.",
|
|
597
624
|
"defaultValue": "\"\""
|
|
598
625
|
}
|
|
599
626
|
],
|
|
@@ -691,7 +718,7 @@
|
|
|
691
718
|
"visibility": "public",
|
|
692
719
|
"since": "1.0.0-rc.6",
|
|
693
720
|
"extends": "UI5Element",
|
|
694
|
-
"description": "<h3 class=\"comment-api-title\">Overview</h3> The Carousel allows the user to browse through a set of items. The component is mostly used for showing a gallery of images, but can hold any other HTML element. <br> There are several ways to perform navigation: <ul> <li>on desktop - the user can navigate using the navigation arrows or with keyboard shorcuts.</li> <li>on mobile - the user can use swipe gestures.</li> </ul>\n\n<h3>Usage</h3>\n\n<h4>When to use:</h4>\n\n<ul> <li>The items you want to display are very different from each other.</li> <li>You want to display the items one after the other.</li> </ul>\n\n<h4>When not to use:</h4>\n\n<ul> <li>The items you want to display need to be visible at the same time.</li> <li>The items you want to display are uniform and very similar.</li> </ul>\n\n<h3>Keyboard Handling</h3> When the <code>ui5-carousel</code> is focused the user can navigate between the items with the following keyboard shortcuts: <br>\n\n<ul> <li>[UP/DOWN] - Navigates to previous and next item</li> <li>[LEFT/RIGHT] - Navigates to previous and next item</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Carousel.js\";</code>",
|
|
721
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3> The Carousel allows the user to browse through a set of items. The component is mostly used for showing a gallery of images, but can hold any other HTML element. <br> There are several ways to perform navigation: <ul> <li>on desktop - the user can navigate using the navigation arrows or with keyboard shorcuts.</li> <li>on mobile - the user can use swipe gestures.</li> </ul>\n\n<h3>Usage</h3>\n\n<h4>When to use:</h4>\n\n<ul> <li>The items you want to display are very different from each other.</li> <li>You want to display the items one after the other.</li> </ul>\n\n<h4>When not to use:</h4>\n\n<ul> <li>The items you want to display need to be visible at the same time.</li> <li>The items you want to display are uniform and very similar.</li> </ul>\n\n<h3>Keyboard Handling</h3>\n\n<h4>Basic Navigation</h4> When the <code>ui5-carousel</code> is focused the user can navigate between the items with the following keyboard shortcuts: <br>\n\n* <h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br>\n\n<ul> <li>[UP/DOWN] - Navigates to previous and next item</li> <li>[LEFT/RIGHT] - Navigates to previous and next item</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Carousel.js\";</code>",
|
|
695
722
|
"constructor": { "visibility": "public" },
|
|
696
723
|
"properties": [
|
|
697
724
|
{
|
|
@@ -800,6 +827,22 @@
|
|
|
800
827
|
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nAllows the user to set a binary value, such as true/false or yes/no for an item. <br><br> The <code>ui5-checkbox</code> component consists of a box and a label that describes its purpose. If it's checked, an indicator is displayed inside the box. To check/uncheck the <code>ui5-checkbox</code>, the user has to click or tap the square box or its label. <br><br> The <code>ui5-checkbox</code> component only has 2 states - checked and unchecked. Clicking or tapping toggles the <code>ui5-checkbox</code> between checked and unchecked state.\n\n<h3>Usage</h3>\n\nYou can define the checkbox text with via the <code>text</code> property. If the text exceeds the available width, it is truncated by default. In case you prefer text to wrap, set the <code>wrappingType</code> property to \"Normal\". The touchable area for toggling the <code>ui5-checkbox</code> ends where the text ends. <br><br> You can disable the <code>ui5-checkbox</code> by setting the <code>disabled</code> property to <code>true</code>, or use the <code>ui5-checkbox</code> in read-only mode by setting the <code>readonly</code> property to <code>true</code>.\n\n<br><br> <h3>Keyboard Handling</h3>\n\nThe user can use the following keyboard shortcuts to toggle the checked state of the <code>ui5-checkbox</code>. <ul> <li>[SPACE, ENTER] - Toggles between different states: checked, not checked.</li> </ul> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/CheckBox\";</code>",
|
|
801
828
|
"constructor": { "visibility": "public" },
|
|
802
829
|
"properties": [
|
|
830
|
+
{
|
|
831
|
+
"name": "accessibleName",
|
|
832
|
+
"visibility": "public",
|
|
833
|
+
"since": "1.1.0",
|
|
834
|
+
"type": "string",
|
|
835
|
+
"description": "Defines the accessible aria name of the component.",
|
|
836
|
+
"defaultValue": "\"\""
|
|
837
|
+
},
|
|
838
|
+
{
|
|
839
|
+
"name": "accessibleNameRef",
|
|
840
|
+
"visibility": "public",
|
|
841
|
+
"since": "1.1.0",
|
|
842
|
+
"type": "string",
|
|
843
|
+
"description": "Receives id(or many ids) of the elements that label the component",
|
|
844
|
+
"defaultValue": "\"\""
|
|
845
|
+
},
|
|
803
846
|
{
|
|
804
847
|
"name": "checked",
|
|
805
848
|
"visibility": "public",
|
|
@@ -896,7 +939,7 @@
|
|
|
896
939
|
"name": "item-click",
|
|
897
940
|
"visibility": "public",
|
|
898
941
|
"since": "1.0.0-rc.15",
|
|
899
|
-
"parameters": [ { "name": "color", "type": "
|
|
942
|
+
"parameters": [ { "name": "color", "type": "string", "description": "the selected color" } ],
|
|
900
943
|
"description": "Fired when the user selects a color."
|
|
901
944
|
}
|
|
902
945
|
]
|
|
@@ -943,8 +986,7 @@
|
|
|
943
986
|
"name": "defaultColor",
|
|
944
987
|
"visibility": "public",
|
|
945
988
|
"type": "CSSColor",
|
|
946
|
-
"description": "Defines the default color of the component. <b>Note:</b> The default color should be a part of the ColorPalette colors</code>"
|
|
947
|
-
"defaultValue": "\"\""
|
|
989
|
+
"description": "Defines the default color of the component. <b>Note:</b> The default color should be a part of the ColorPalette colors</code>"
|
|
948
990
|
},
|
|
949
991
|
{
|
|
950
992
|
"name": "showDefaultColor",
|
|
@@ -971,8 +1013,9 @@
|
|
|
971
1013
|
"slots": [
|
|
972
1014
|
{
|
|
973
1015
|
"name": "default",
|
|
1016
|
+
"propertyName": "colors",
|
|
974
1017
|
"visibility": "public",
|
|
975
|
-
"type": "
|
|
1018
|
+
"type": "sap.ui.webcomponents.main.IColorPaletteItem[]",
|
|
976
1019
|
"description": "Defines the content of the component."
|
|
977
1020
|
}
|
|
978
1021
|
],
|
|
@@ -980,7 +1023,7 @@
|
|
|
980
1023
|
{
|
|
981
1024
|
"name": "item-click",
|
|
982
1025
|
"visibility": "public",
|
|
983
|
-
"parameters": [ { "name": "color", "type": "
|
|
1026
|
+
"parameters": [ { "name": "color", "type": "string", "description": "the selected color" } ],
|
|
984
1027
|
"description": "Fired when the user selects a color."
|
|
985
1028
|
}
|
|
986
1029
|
],
|
|
@@ -991,6 +1034,35 @@
|
|
|
991
1034
|
"since": "1.0.0-rc.16",
|
|
992
1035
|
"returnValue": { "type": "boolean" },
|
|
993
1036
|
"description": "Returns if the component is opened."
|
|
1037
|
+
},
|
|
1038
|
+
{
|
|
1039
|
+
"name": "openPopover",
|
|
1040
|
+
"visibility": "public",
|
|
1041
|
+
"since": "1.0.0-rc.16",
|
|
1042
|
+
"parameters": [
|
|
1043
|
+
{
|
|
1044
|
+
"name": "opener",
|
|
1045
|
+
"type": "HTMLElement",
|
|
1046
|
+
"optional": false,
|
|
1047
|
+
"description": "the element that the popover is shown at"
|
|
1048
|
+
}
|
|
1049
|
+
],
|
|
1050
|
+
"description": "Shows the ColorPalettePopover. <b>Note:</b> The method is deprecated and will be removed in future, use <code>showAt</code> instead.",
|
|
1051
|
+
"deprecated": { "text": "The method is deprecated in favour of <code>showAt</code>." }
|
|
1052
|
+
},
|
|
1053
|
+
{
|
|
1054
|
+
"name": "showAt",
|
|
1055
|
+
"visibility": "public",
|
|
1056
|
+
"since": "1.1.1",
|
|
1057
|
+
"parameters": [
|
|
1058
|
+
{
|
|
1059
|
+
"name": "opener",
|
|
1060
|
+
"type": "HTMLElement",
|
|
1061
|
+
"optional": false,
|
|
1062
|
+
"description": "the element that the popover is shown at"
|
|
1063
|
+
}
|
|
1064
|
+
],
|
|
1065
|
+
"description": "Shows the ColorPalettePopover."
|
|
994
1066
|
}
|
|
995
1067
|
]
|
|
996
1068
|
},
|
|
@@ -1011,7 +1083,7 @@
|
|
|
1011
1083
|
{
|
|
1012
1084
|
"name": "color",
|
|
1013
1085
|
"visibility": "public",
|
|
1014
|
-
"type": "
|
|
1086
|
+
"type": "CSSColor",
|
|
1015
1087
|
"description": "Defines the currently selected color of the component. <br><br> <b>Note</b>: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property."
|
|
1016
1088
|
}
|
|
1017
1089
|
],
|
|
@@ -1036,22 +1108,22 @@
|
|
|
1036
1108
|
"visibility": "public",
|
|
1037
1109
|
"since": "1.0.0-rc.6",
|
|
1038
1110
|
"extends": "UI5Element",
|
|
1039
|
-
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-combobox</code> 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
|
|
1111
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-combobox</code> 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<h3>Structure</h3> The <code>ui5-combobox</code> consists of the following elements: <ul> <li> Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value. <li> Drop-down arrow - expands\\collapses the option list.</li> <li> Option list - the list of available options.</li> </ul>\n\n<h3>Keyboard Handling</h3>\n\nThe <code>ui5-combobox</code> provides advanced keyboard handling. <br>\n\n<ul> <li>[F4], [ALT]+[UP], or [ALT]+[DOWN] - Toggles the picker.</li> <li>[ESC] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.</li> <li>[ENTER] or [RETURN] - If picker is open, takes over the currently selected item and closes it.</li> <li>[DOWN] - Selects the next matching item in the picker.</li> <li>[UP] - Selects the previous matching item in the picker.</li> <li>[PAGEDOWN] - Moves selection down by page size (10 items by default).</li> <li>[PAGEUP] - Moves selection up by page size (10 items by default). </li> <li>[HOME] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.</li> <li>[END] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/ComboBox\";</code>",
|
|
1040
1112
|
"constructor": { "visibility": "public" },
|
|
1041
1113
|
"properties": [
|
|
1042
1114
|
{
|
|
1043
1115
|
"name": "accessibleName",
|
|
1044
1116
|
"visibility": "public",
|
|
1045
1117
|
"since": "1.0.0-rc.15",
|
|
1046
|
-
"type": "
|
|
1047
|
-
"description": "
|
|
1118
|
+
"type": "string",
|
|
1119
|
+
"description": "Defines the accessible aria name of the component."
|
|
1048
1120
|
},
|
|
1049
1121
|
{
|
|
1050
1122
|
"name": "accessibleNameRef",
|
|
1051
1123
|
"visibility": "public",
|
|
1052
1124
|
"since": "1.0.0-rc.15",
|
|
1053
|
-
"type": "
|
|
1054
|
-
"description": "Receives id(or many ids) of the elements that label the
|
|
1125
|
+
"type": "string",
|
|
1126
|
+
"description": "Receives id(or many ids) of the elements that label the component",
|
|
1055
1127
|
"defaultValue": "\"\""
|
|
1056
1128
|
},
|
|
1057
1129
|
{
|
|
@@ -1310,7 +1382,7 @@
|
|
|
1310
1382
|
"static": true,
|
|
1311
1383
|
"visibility": "public",
|
|
1312
1384
|
"extends": "DateComponentBase",
|
|
1313
|
-
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-date-picker</code> component provides an input field with assigned calendar which opens on user action. The <code>ui5-date-picker</code> allows users to select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and the date picker.\n\n<h3>Usage</h3>\n\nThe user can enter a date by: <ul> <li>Using the calendar that opens in a popup</li> <li>Typing it in directly in the input field</li> </ul> <br><br> When the user makes an entry and presses the enter key, the calendar shows the corresponding date. When the user directly triggers the calendar display, the actual date is displayed.\n\n<h3>Formatting</h3>\n\nIf a date is entered by typing it into the input field, it must fit to the used date format. <br><br> Supported format options are pattern-based on Unicode LDML Date Format notation. For more information, see <ui5-link target=\"_blank\" href=\"http://unicode.org/reports/tr35/#Date_Field_Symbol_Table\" class=\"api-table-content-cell-link\">UTS #35: Unicode Locale Data Markup Language</ui5-link>. <br><br> For example, if the <code>format-pattern</code> is \"yyyy-MM-dd\", a valid value string is \"2015-07-30\" and the same is displayed in the input.\n\n<h3>Keyboard Handling</h3> The <code>ui5-date-picker</code> provides advanced keyboard handling. If the <code>ui5-date-picker</code> is focused, you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys. Once the drop-down is opened, you can use the <code>UP</code>, <code>DOWN</code>, <code>LEFT</code>, <code>RIGHT</code> arrow keys to navigate through the dates and select one by pressing the <code>Space</code> or <code>Enter</code> keys. Moreover you can use TAB to reach the buttons for changing month and year. <br>\n\nIf the <code>ui5-date-picker</code> is focused and
|
|
1385
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-date-picker</code> component provides an input field with assigned calendar which opens on user action. The <code>ui5-date-picker</code> allows users to select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and the date picker.\n\n<h3>Usage</h3>\n\nThe user can enter a date by: <ul> <li>Using the calendar that opens in a popup</li> <li>Typing it in directly in the input field</li> </ul> <br><br> When the user makes an entry and presses the enter key, the calendar shows the corresponding date. When the user directly triggers the calendar display, the actual date is displayed.\n\n<h3>Formatting</h3>\n\nIf a date is entered by typing it into the input field, it must fit to the used date format. <br><br> Supported format options are pattern-based on Unicode LDML Date Format notation. For more information, see <ui5-link target=\"_blank\" href=\"http://unicode.org/reports/tr35/#Date_Field_Symbol_Table\" class=\"api-table-content-cell-link\">UTS #35: Unicode Locale Data Markup Language</ui5-link>. <br><br> For example, if the <code>format-pattern</code> is \"yyyy-MM-dd\", a valid value string is \"2015-07-30\" and the same is displayed in the input.\n\n<h3>Keyboard Handling</h3> The <code>ui5-date-picker</code> provides advanced keyboard handling. If the <code>ui5-date-picker</code> is focused, you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys. Once the drop-down is opened, you can use the <code>UP</code>, <code>DOWN</code>, <code>LEFT</code>, <code>RIGHT</code> arrow keys to navigate through the dates and select one by pressing the <code>Space</code> or <code>Enter</code> keys. Moreover you can use TAB to reach the buttons for changing month and year. <br>\n\nIf the <code>ui5-date-picker</code> input field is focused and its corresponding picker dialog is not opened, then users can increment or decrement the date referenced by <code>dateValue</code> property by using the following shortcuts: <br> <ul> <li>[PAGEDOWN] - Decrements the corresponding day of the month by one</li> <li>[SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one</li> <li>[SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one</li> <li>[PAGEUP] - Increments the corresponding day of the month by one</li> <li>[SHIFT] + [PAGEUP] - Increments the corresponding month by one</li> <li>[SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one</li> </ul>\n\n<h3>Calendar types</h3> The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian. By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar, you need to set the <code>primaryCalendarType</code> property and import one or more of the following modules: <br><br>\n\n<code>import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";</code> <br><br>\n\nOr, you can use the global configuration and set the <code>calendarType</code> key: <br> <pre><code><script data-id=\"sap-ui-config\" type=\"application/json\">\n{\n\t\"calendarType\": \"Japanese\"\n}\n</script></code></pre>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/DatePicker\";</code>",
|
|
1314
1386
|
"constructor": { "visibility": "public" },
|
|
1315
1387
|
"properties": [
|
|
1316
1388
|
{
|
|
@@ -1336,14 +1408,14 @@
|
|
|
1336
1408
|
"name": "accessibleName",
|
|
1337
1409
|
"visibility": "public",
|
|
1338
1410
|
"since": "1.0.0-rc.15",
|
|
1339
|
-
"type": "
|
|
1411
|
+
"type": "string",
|
|
1340
1412
|
"description": "Defines the aria-label attribute for the component."
|
|
1341
1413
|
},
|
|
1342
1414
|
{
|
|
1343
1415
|
"name": "accessibleNameRef",
|
|
1344
1416
|
"visibility": "public",
|
|
1345
1417
|
"since": "1.0.0-rc.15",
|
|
1346
|
-
"type": "
|
|
1418
|
+
"type": "string",
|
|
1347
1419
|
"description": "Receives id(or many ids) of the elements that label the component.",
|
|
1348
1420
|
"defaultValue": "\"\""
|
|
1349
1421
|
},
|
|
@@ -1428,10 +1500,10 @@
|
|
|
1428
1500
|
"allowPreventDefault": "true",
|
|
1429
1501
|
"visibility": "public",
|
|
1430
1502
|
"parameters": [
|
|
1431
|
-
{ "name": "value", "type": "
|
|
1503
|
+
{ "name": "value", "type": "string", "description": "The submitted value." },
|
|
1432
1504
|
{
|
|
1433
1505
|
"name": "valid",
|
|
1434
|
-
"type": "
|
|
1506
|
+
"type": "boolean",
|
|
1435
1507
|
"description": "Indicator if the value is in correct format pattern and in valid range."
|
|
1436
1508
|
}
|
|
1437
1509
|
],
|
|
@@ -1442,10 +1514,10 @@
|
|
|
1442
1514
|
"allowPreventDefault": "true",
|
|
1443
1515
|
"visibility": "public",
|
|
1444
1516
|
"parameters": [
|
|
1445
|
-
{ "name": "value", "type": "
|
|
1517
|
+
{ "name": "value", "type": "string", "description": "The submitted value." },
|
|
1446
1518
|
{
|
|
1447
1519
|
"name": "valid",
|
|
1448
|
-
"type": "
|
|
1520
|
+
"type": "boolean",
|
|
1449
1521
|
"description": "Indicator if the value is in correct format pattern and in valid range."
|
|
1450
1522
|
}
|
|
1451
1523
|
],
|
|
@@ -1515,6 +1587,7 @@
|
|
|
1515
1587
|
{
|
|
1516
1588
|
"name": "isValid",
|
|
1517
1589
|
"visibility": "public",
|
|
1590
|
+
"returnValue": { "type": "boolean" },
|
|
1518
1591
|
"parameters": [
|
|
1519
1592
|
{
|
|
1520
1593
|
"name": "value",
|
|
@@ -1559,6 +1632,20 @@
|
|
|
1559
1632
|
"description": "<h3 class=\"comment-api-title\">Overview</h3> The 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<h3>Usage</h3> The user can enter a date by: Using the calendar that opens in a popup or typing it in directly in the input field (not available for mobile devices). For the <code>ui5-daterange-picker</code> <h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/DateRangePicker.js\";</code>\n\n<h3>Keyboard Handling</h3> The <code>ui5-daterange-picker</code> provides advanced keyboard handling. <br>\n\nWhen the <code>ui5-daterange-picker</code> input field is focused the user can increment or decrement respectively the range start or end date, depending on where the cursor is. The following shortcuts are available: <br> <ul> <li>[PAGEDOWN] - Decrements the corresponding day of the month by one</li> <li>[SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one</li> <li>[SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one</li> <li>[PAGEUP] - Increments the corresponding day of the month by one</li> <li>[SHIFT] + [PAGEUP] - Increments the corresponding month by one</li> <li>[SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one</li> </ul>",
|
|
1560
1633
|
"constructor": { "visibility": "public" },
|
|
1561
1634
|
"properties": [
|
|
1635
|
+
{
|
|
1636
|
+
"name": "dateValue",
|
|
1637
|
+
"readonly": "true",
|
|
1638
|
+
"visibility": "public",
|
|
1639
|
+
"type": "Date",
|
|
1640
|
+
"description": "<b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value."
|
|
1641
|
+
},
|
|
1642
|
+
{
|
|
1643
|
+
"name": "dateValueUTC",
|
|
1644
|
+
"readonly": "true",
|
|
1645
|
+
"visibility": "public",
|
|
1646
|
+
"type": "Date",
|
|
1647
|
+
"description": "<b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value."
|
|
1648
|
+
},
|
|
1562
1649
|
{
|
|
1563
1650
|
"name": "delimiter",
|
|
1564
1651
|
"visibility": "public",
|
|
@@ -1678,16 +1765,9 @@
|
|
|
1678
1765
|
"static": true,
|
|
1679
1766
|
"visibility": "public",
|
|
1680
1767
|
"extends": "Popup",
|
|
1681
|
-
"description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-dialog</code> component is used to temporarily display some information in a size-limited window in front of the regular app screen. It is used to prompt the user for an action or a confirmation. The <code>ui5-dialog</code> interrupts the current app processing as it is the only focused UI element and the main screen is dimmed/blocked. The dialog combines concepts known from other technologies where the windows have names such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box. <br><br> The <code>ui5-dialog</code> is modal, which means that user action is required before returning to the parent window is possible. The content of the <code>ui5-dialog</code> is fully customizable.\n\n<h3>Structure</h3> A <code>ui5-dialog</code> consists of a header, content, and a footer for action buttons. The <code>ui5-dialog</code> is usually displayed at the center of the screen. Its position can be changed by the user. To enable this, you need to set the property <code>draggable</code> accordingly.\n\n<h3>Responsive Behavior</h3> The <code>stretch</code> property can be used to stretch the <code>ui5-dialog</code> on full screen.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Dialog\";</code>\n\n<b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>) inside <code>ui5-dialog</code>. Ideally you should create all popups on the same level inside your HTML page and just open them from one another, rather than nesting them.\n\n<b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>) inside other components containing z-index. This might break z-index management.",
|
|
1768
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-dialog</code> component is used to temporarily display some information in a size-limited window in front of the regular app screen. It is used to prompt the user for an action or a confirmation. The <code>ui5-dialog</code> interrupts the current app processing as it is the only focused UI element and the main screen is dimmed/blocked. The dialog combines concepts known from other technologies where the windows have names such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box. <br><br> The <code>ui5-dialog</code> is modal, which means that user action is required before returning to the parent window is possible. The content of the <code>ui5-dialog</code> is fully customizable.\n\n<h3>Structure</h3> A <code>ui5-dialog</code> consists of a header, content, and a footer for action buttons. The <code>ui5-dialog</code> is usually displayed at the center of the screen. Its position can be changed by the user. To enable this, you need to set the property <code>draggable</code> accordingly.\n\n<h3>Responsive Behavior</h3> The <code>stretch</code> property can be used to stretch the <code>ui5-dialog</code> on full screen.\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-dialog</code> exposes the following CSS Shadow Parts: <ul> <li>header - Used to style the header of the component</li> <li>content - Used to style the content of the component</li> <li>footer - Used to style the footer of the component</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Dialog\";</code>\n\n<b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>) inside <code>ui5-dialog</code>. Ideally you should create all popups on the same level inside your HTML page and just open them from one another, rather than nesting them.\n\n<b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>) inside other components containing z-index. This might break z-index management.",
|
|
1682
1769
|
"constructor": { "visibility": "public" },
|
|
1683
1770
|
"properties": [
|
|
1684
|
-
{
|
|
1685
|
-
"name": "accessibleName",
|
|
1686
|
-
"visibility": "public",
|
|
1687
|
-
"type": "string",
|
|
1688
|
-
"description": "Sets the accessible aria name of the component.",
|
|
1689
|
-
"defaultValue": "\"\""
|
|
1690
|
-
},
|
|
1691
1771
|
{
|
|
1692
1772
|
"name": "draggable",
|
|
1693
1773
|
"visibility": "public",
|
|
@@ -1934,7 +2014,7 @@
|
|
|
1934
2014
|
"module": "Interfaces",
|
|
1935
2015
|
"static": true,
|
|
1936
2016
|
"visibility": "public",
|
|
1937
|
-
"description": "Interface for components that may be used inside a <code>ui5-color-palette</code>"
|
|
2017
|
+
"description": "Interface for components that may be used inside a <code>ui5-color-palette</code> or <code>ui5-color-palette-popover</code>"
|
|
1938
2018
|
},
|
|
1939
2019
|
{
|
|
1940
2020
|
"kind": "interface",
|
|
@@ -1967,6 +2047,14 @@
|
|
|
1967
2047
|
"description": "Defines the text alternative of the component. If not provided a default text alternative will be set, if present. <br><br> <b>Note:</b> Every icon should have a text alternative in order to calculate its accessible name.",
|
|
1968
2048
|
"defaultValue": "\"\""
|
|
1969
2049
|
},
|
|
2050
|
+
{
|
|
2051
|
+
"name": "accessibleRole",
|
|
2052
|
+
"visibility": "public",
|
|
2053
|
+
"since": "1.1.0",
|
|
2054
|
+
"type": "string",
|
|
2055
|
+
"description": "Defines the accessibility role of the component.",
|
|
2056
|
+
"defaultValue": "\"\""
|
|
2057
|
+
},
|
|
1970
2058
|
{
|
|
1971
2059
|
"name": "interactive",
|
|
1972
2060
|
"visibility": "public",
|
|
@@ -2054,7 +2142,7 @@
|
|
|
2054
2142
|
"visibility": "public",
|
|
2055
2143
|
"extends": "sap.ui.webcomponents.base.UI5Element",
|
|
2056
2144
|
"implements": [ "sap.ui.webcomponents.main.IInput" ],
|
|
2057
|
-
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-input</code> component allows the user to enter and edit text or numeric values in one line. <br> Additionally, you can provide <code>suggestionItems</code>, that are displayed in a popover right under the input. <br><br> The text field can be editable or read-only (<code>readonly</code> property), and it can be enabled or disabled (<code>disabled</code> property). To visualize semantic states, such as \"error\" or \"warning\", the <code>valueState</code> property is provided. When the user makes changes to the text, the change event is fired, which enables you to react on any text change. <br><br> <b>Note:</b> If you are using the <code>ui5-input</code> as a single npm module, don't forget to import the <code>InputSuggestions</code> module from \"@ui5/webcomponents/dist/features/InputSuggestions.js\" to enable the suggestions functionality.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Input.js\";</code> <br> <code>import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";</code> (optional - for input suggestions support)",
|
|
2145
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-input</code> component allows the user to enter and edit text or numeric values in one line. <br> Additionally, you can provide <code>suggestionItems</code>, that are displayed in a popover right under the input. <br><br> The text field can be editable or read-only (<code>readonly</code> property), and it can be enabled or disabled (<code>disabled</code> property). To visualize semantic states, such as \"error\" or \"warning\", the <code>valueState</code> property is provided. When the user makes changes to the text, the change event is fired, which enables you to react on any text change. <br><br> <b>Note:</b> If you are using the <code>ui5-input</code> as a single npm module, don't forget to import the <code>InputSuggestions</code> module from \"@ui5/webcomponents/dist/features/InputSuggestions.js\" to enable the suggestions functionality.\n\n<h3>Keyboard Handling</h3> The <code>ui5-input</code> provides the following keyboard shortcuts: <br>\n\n<ul> <li>[ESC] - 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.</li> <li>[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.</li> <li>[DOWN] - Focuses the next matching item in the suggestion list.</li> <li>[UP] - Focuses the previous matching item in the suggestion list.</li> <li>[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.</li> <li>[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.</li> <li>[PAGEUP] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.</li> <li>[PAGEDOWN] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Input.js\";</code> <br> <code>import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";</code> (optional - for input suggestions support)",
|
|
2058
2146
|
"constructor": { "visibility": "public" },
|
|
2059
2147
|
"properties": [
|
|
2060
2148
|
{
|
|
@@ -2067,14 +2155,14 @@
|
|
|
2067
2155
|
"name": "accessibleName",
|
|
2068
2156
|
"visibility": "public",
|
|
2069
2157
|
"since": "1.0.0-rc.15",
|
|
2070
|
-
"type": "
|
|
2071
|
-
"description": "
|
|
2158
|
+
"type": "string",
|
|
2159
|
+
"description": "Defines the accessible aria name of the component."
|
|
2072
2160
|
},
|
|
2073
2161
|
{
|
|
2074
2162
|
"name": "accessibleNameRef",
|
|
2075
2163
|
"visibility": "public",
|
|
2076
2164
|
"since": "1.0.0-rc.15",
|
|
2077
|
-
"type": "
|
|
2165
|
+
"type": "string",
|
|
2078
2166
|
"description": "Receives id(or many ids) of the elements that label the input.",
|
|
2079
2167
|
"defaultValue": "\"\""
|
|
2080
2168
|
},
|
|
@@ -2116,7 +2204,7 @@
|
|
|
2116
2204
|
"name": "previewItem",
|
|
2117
2205
|
"readonly": "true",
|
|
2118
2206
|
"visibility": "public",
|
|
2119
|
-
"type": "
|
|
2207
|
+
"type": "sap.ui.webcomponents.main.IInputSuggestionItem",
|
|
2120
2208
|
"description": "The suggestion item on preview."
|
|
2121
2209
|
},
|
|
2122
2210
|
{
|
|
@@ -2134,6 +2222,14 @@
|
|
|
2134
2222
|
"description": "Defines whether the component is required.",
|
|
2135
2223
|
"defaultValue": "false"
|
|
2136
2224
|
},
|
|
2225
|
+
{
|
|
2226
|
+
"name": "showClearIcon",
|
|
2227
|
+
"visibility": "public",
|
|
2228
|
+
"since": "1.2.0",
|
|
2229
|
+
"type": "boolean",
|
|
2230
|
+
"description": "Defines whether the clear icon of the input will be shown.",
|
|
2231
|
+
"defaultValue": "false"
|
|
2232
|
+
},
|
|
2137
2233
|
{
|
|
2138
2234
|
"name": "showSuggestions",
|
|
2139
2235
|
"visibility": "public",
|
|
@@ -2222,7 +2318,7 @@
|
|
|
2222
2318
|
},
|
|
2223
2319
|
{
|
|
2224
2320
|
"name": "suggestion-scroll",
|
|
2225
|
-
"visibility": "
|
|
2321
|
+
"visibility": "protected",
|
|
2226
2322
|
"since": "1.0.0-rc.8",
|
|
2227
2323
|
"parameters": [
|
|
2228
2324
|
{
|
|
@@ -2397,11 +2493,27 @@
|
|
|
2397
2493
|
"description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-link</code> is a hyperlink component that is used to navigate to other apps and web pages, or to trigger actions. It is a clickable text element, visualized in such a way that it stands out from the standard text. On hover, it changes its style to an underlined text to provide additional feedback to the user.\n\n<h3>Usage</h3>\n\nYou can set the <code>ui5-link</code> to be enabled or disabled. <br><br> To create a visual hierarchy in large lists of links, you can set the less important links as <code>Subtle</code> or the more important ones as <code>Emphasized</code>, by using the <code>design</code> property. <br><br> If the <code>href</code> property is set, the link behaves as the HTML anchor tag (<code><a><a/></code>) and opens the specified URL in the given target frame (<code>target</code> property). To specify where the linked content is opened, you can use the <code>target</code> property.\n\n<h3>Responsive behavior</h3>\n\nIf there is not enough space, the text of the <code>ui5-link</code> becomes truncated. If the <code>wrappingType</code> property is set to <code>\"Normal\"</code>, the text is displayed on several lines instead of being truncated.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Link\";</code>",
|
|
2398
2494
|
"constructor": { "visibility": "public" },
|
|
2399
2495
|
"properties": [
|
|
2496
|
+
{
|
|
2497
|
+
"name": "accessibilityAttributes",
|
|
2498
|
+
"visibility": "public",
|
|
2499
|
+
"since": "1.1.0",
|
|
2500
|
+
"type": "object",
|
|
2501
|
+
"noattribute": "true",
|
|
2502
|
+
"description": "An object of strings that defines several additional accessibility attribute values for customization depending on the use case.\n\nIt supports the following fields:\n\n<ul> <li><code>expanded</code>: Indicates whether the anchor element, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values: <ul> <li><code>true</code></li> <li><code>false</code></li> </ul> </li> <li><code>hasPopup</code>: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the anchor element. Accepts the following string values: <ul> <li><code>Dialog</code></li> <li><code>Grid</code></li> <li><code>ListBox</code></li> <li><code>Menu</code></li> <li><code>Tree</code></li> </ul> </li> </ul>"
|
|
2503
|
+
},
|
|
2504
|
+
{
|
|
2505
|
+
"name": "accessibleName",
|
|
2506
|
+
"visibility": "public",
|
|
2507
|
+
"since": "1.2.0",
|
|
2508
|
+
"type": "string",
|
|
2509
|
+
"description": "Defines the accessible aria name of the component.",
|
|
2510
|
+
"defaultValue": "\"\""
|
|
2511
|
+
},
|
|
2400
2512
|
{
|
|
2401
2513
|
"name": "accessibleNameRef",
|
|
2402
2514
|
"visibility": "public",
|
|
2403
2515
|
"since": "1.0.0-rc.15",
|
|
2404
|
-
"type": "
|
|
2516
|
+
"type": "string",
|
|
2405
2517
|
"description": "Receives id(or many ids) of the elements that label the input",
|
|
2406
2518
|
"defaultValue": "\"\""
|
|
2407
2519
|
},
|
|
@@ -2469,14 +2581,14 @@
|
|
|
2469
2581
|
"static": true,
|
|
2470
2582
|
"visibility": "public",
|
|
2471
2583
|
"extends": "UI5Element",
|
|
2472
|
-
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-list</code> component allows displaying a list of items, advanced keyboard handling support for navigating between items, and predefined modes to improve the development efficiency. <br><br> The <code>ui5-list</code> is
|
|
2584
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-list</code> component allows displaying a list of items, advanced keyboard handling support for navigating between items, and predefined modes to improve the development efficiency. <br><br> The <code>ui5-list</code> is a container for the available list items: <ul> <li><code>ui5-li</code></li> <li><code>ui5-li-custom</code></li> <li><code>ui5-li-groupheader</code></li> </ul> <br><br> To benefit from the built-in selection mechanism, you can use the available selection modes, such as <code>SingleSelect</code>, <code>MultiSelect</code> and <code>Delete</code>. <br><br> Additionally, the <code>ui5-list</code> provides header, footer, and customization for the list item separators.\n\n<br><br> <h3>Keyboard Handling</h3>\n\n<h4>Basic Navigation</h4> The <code>ui5-list</code> provides advanced keyboard handling. When a list is focused the user can use the following keyboard shortcuts in order to perform a navigation: <br>\n\n<ul> <li>[UP/DOWN] - Navigates up and down the items</li> <li>[HOME] - Navigates to first item</li> <li>[END] - Navigates to the last item</li> </ul>\n\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete), when the <code>mode</code> property is in use: <ul> <li>[SPACE] - Select an item (if <code>type</code> is 'Active') when <code>mode</code> is selection</li> <li>[DELETE] - Delete an item if <code>mode</code> property is <code>Delete</code></li> </ul>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/List.js\";</code> <br> <code>import \"@ui5/webcomponents/dist/StandardListItem.js\";</code> (for <code>ui5-li</code>) <br> <code>import \"@ui5/webcomponents/dist/CustomListItem.js\";</code> (for <code>ui5-li-custom</code>) <br> <code>import \"@ui5/webcomponents/dist/GroupHeaderListItem.js\";</code> (for <code>ui5-li-groupheader</code>)",
|
|
2473
2585
|
"constructor": { "visibility": "public" },
|
|
2474
2586
|
"properties": [
|
|
2475
2587
|
{
|
|
2476
2588
|
"name": "accessibleName",
|
|
2477
2589
|
"visibility": "public",
|
|
2478
2590
|
"since": "1.0.0-rc.15",
|
|
2479
|
-
"type": "
|
|
2591
|
+
"type": "string",
|
|
2480
2592
|
"description": "Defines the accessible name of the component.",
|
|
2481
2593
|
"defaultValue": "\"\""
|
|
2482
2594
|
},
|
|
@@ -2484,7 +2596,7 @@
|
|
|
2484
2596
|
"name": "accessibleNameRef",
|
|
2485
2597
|
"visibility": "public",
|
|
2486
2598
|
"since": "1.0.0-rc.15",
|
|
2487
|
-
"type": "
|
|
2599
|
+
"type": "string",
|
|
2488
2600
|
"description": "Defines the IDs of the elements that label the input.",
|
|
2489
2601
|
"defaultValue": "\"\""
|
|
2490
2602
|
},
|
|
@@ -2492,7 +2604,7 @@
|
|
|
2492
2604
|
"name": "accessibleRole",
|
|
2493
2605
|
"visibility": "public",
|
|
2494
2606
|
"since": "1.0.0-rc.15",
|
|
2495
|
-
"type": "
|
|
2607
|
+
"type": "string",
|
|
2496
2608
|
"description": "Defines the accessible role of the component. <br><br>",
|
|
2497
2609
|
"defaultValue": "\"list\""
|
|
2498
2610
|
},
|
|
@@ -2523,7 +2635,7 @@
|
|
|
2523
2635
|
"visibility": "public",
|
|
2524
2636
|
"since": "1.0.0-rc.13",
|
|
2525
2637
|
"type": "ListGrowingMode",
|
|
2526
|
-
"description": "Defines whether the component will have growing capability either by pressing a <code>More</code> button, or via user scroll. In both cases <code>load-more</code> event is fired. <br><br>\n\nAvailable options: <br><br> <code>Button</code> - Shows a <code>More</code> button at the bottom of the list, pressing of which triggers the <code>load-more</code> event. <br> <code>Scroll</code> - The <code>load-more</code> event is triggered when the user scrolls to the bottom of the list; <br> <code>None</code> (default) - The growing is off. <br><br>\n\n<b>
|
|
2638
|
+
"description": "Defines whether the component will have growing capability either by pressing a <code>More</code> button, or via user scroll. In both cases <code>load-more</code> event is fired. <br><br>\n\nAvailable options: <br><br> <code>Button</code> - Shows a <code>More</code> button at the bottom of the list, pressing of which triggers the <code>load-more</code> event. <br> <code>Scroll</code> - The <code>load-more</code> event is triggered when the user scrolls to the bottom of the list; <br> <code>None</code> (default) - The growing is off. <br><br>\n\n<b>Restrictions:</b> <code>growing=\"Scroll\"</code> is not supported for Internet Explorer, on IE the component will fallback to <code>growing=\"Button\"</code>.",
|
|
2527
2639
|
"defaultValue": "\"None\""
|
|
2528
2640
|
},
|
|
2529
2641
|
{
|
|
@@ -2580,6 +2692,7 @@
|
|
|
2580
2692
|
"events": [
|
|
2581
2693
|
{
|
|
2582
2694
|
"name": "item-click",
|
|
2695
|
+
"allowPreventDefault": "true",
|
|
2583
2696
|
"visibility": "public",
|
|
2584
2697
|
"parameters": [ { "name": "item", "type": "HTMLElement", "description": "The clicked item." } ],
|
|
2585
2698
|
"description": "Fired when an item is activated, unless the item's <code>type</code> property is set to <code>Inactive</code>."
|
|
@@ -2707,14 +2820,14 @@
|
|
|
2707
2820
|
"kind": "class",
|
|
2708
2821
|
"name": "sap.ui.webcomponents.main.MessageStrip",
|
|
2709
2822
|
"basename": "MessageStrip",
|
|
2710
|
-
"tagname": "ui5-
|
|
2823
|
+
"tagname": "ui5-message-strip",
|
|
2711
2824
|
"resource": "MessageStrip.js",
|
|
2712
2825
|
"module": "MessageStrip",
|
|
2713
2826
|
"static": true,
|
|
2714
2827
|
"visibility": "public",
|
|
2715
2828
|
"since": "0.9.0",
|
|
2716
2829
|
"extends": "UI5Element",
|
|
2717
|
-
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-
|
|
2830
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-message-strip</code> component enables the embedding of app-related messages. It displays 4 designs of messages, each with corresponding semantic color and icon: Information, Positive, Warning and Negative. Each message can have a Close button, so that it can be removed from the UI, if needed.\n\n<h3>Usage</h3>\n\nFor the <code>ui5-message-strip</code> component, you can define whether it displays an icon in the beginning and a close button. Moreover, its size and background can be controlled with CSS.\n\n<h3>Keyboard Handling</h3>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/MessageStrip\";</code>",
|
|
2718
2831
|
"constructor": { "visibility": "public" },
|
|
2719
2832
|
"properties": [
|
|
2720
2833
|
{
|
|
@@ -2832,7 +2945,7 @@
|
|
|
2832
2945
|
"visibility": "public",
|
|
2833
2946
|
"since": "0.11.0",
|
|
2834
2947
|
"extends": "UI5Element",
|
|
2835
|
-
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-multi-combobox</code> component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.\n\nThe drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options. The options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens. <h3>Structure</h3> The <code>ui5-multi-combobox</code> consists of the following elements: <ul> <li> Tokenizer - a list of tokens with selected options. <li> Input field - displays the selected option/s as token/s. Users can type to filter the list. <li> Drop-down arrow - expands\\collapses the option list.</li> <li> Option list - the list of available options.</li> </ul> <h3>Keyboard Handling</h3>\n\nThe <code>ui5-multi-combobox</code> provides advanced keyboard handling.\n\n<h4>Picker</h4> If the <code>ui5-multi-combobox</code> is focused, you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys. Once the drop-down is opened, you can use the <code>UP</code> and <code>DOWN</code> arrow keys to navigate through the available options and select one by pressing the <code>Space</code> or <code>Enter</code> keys. <br>\n\n<h4>Tokens</h4> <ul> <li> Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available). </li> <li> Delete - deletes the token and focuses the previous token. </li> <li> Backspace - deletes the token and focus the next token. </li> </ul>\n\
|
|
2948
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-multi-combobox</code> component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.\n\nThe drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options. The options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens. <h3>Structure</h3> The <code>ui5-multi-combobox</code> consists of the following elements: <ul> <li> Tokenizer - a list of tokens with selected options. <li> Input field - displays the selected option/s as token/s. Users can type to filter the list. <li> Drop-down arrow - expands\\collapses the option list.</li> <li> Option list - the list of available options.</li> </ul> <h3>Keyboard Handling</h3>\n\nThe <code>ui5-multi-combobox</code> provides advanced keyboard handling.\n\n<h4>Picker</h4> If the <code>ui5-multi-combobox</code> is focused, you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys. Once the drop-down is opened, you can use the <code>UP</code> and <code>DOWN</code> arrow keys to navigate through the available options and select one by pressing the <code>Space</code> or <code>Enter</code> keys. <br>\n\n<h4>Tokens</h4> <ul> <li> Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available). </li> <li> Delete - deletes the token and focuses the previous token. </li> <li> Backspace - deletes the token and focus the next token. </li> </ul>\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-multi-combobox</code> exposes the following CSS Shadow Parts: <ul> <li>token-{index} - Used to style each token(where <code>token-0</code> corresponds to the first item)</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/MultiComboBox\";</code>",
|
|
2836
2949
|
"constructor": { "visibility": "public" },
|
|
2837
2950
|
"properties": [
|
|
2838
2951
|
{
|
|
@@ -2972,13 +3085,6 @@
|
|
|
2972
3085
|
"type": "boolean",
|
|
2973
3086
|
"description": "Defines the selected state of the component.",
|
|
2974
3087
|
"defaultValue": "false"
|
|
2975
|
-
},
|
|
2976
|
-
{
|
|
2977
|
-
"name": "stableDomRef",
|
|
2978
|
-
"visibility": "public",
|
|
2979
|
-
"since": "1.0.0-rc.11",
|
|
2980
|
-
"type": "string",
|
|
2981
|
-
"description": "Defines the stable selector that you can use via getStableDomRef method."
|
|
2982
3088
|
}
|
|
2983
3089
|
],
|
|
2984
3090
|
"slots": []
|
|
@@ -3069,13 +3175,6 @@
|
|
|
3069
3175
|
"description": "Defines the selected state of the component.",
|
|
3070
3176
|
"defaultValue": "false"
|
|
3071
3177
|
},
|
|
3072
|
-
{
|
|
3073
|
-
"name": "stableDomRef",
|
|
3074
|
-
"visibility": "public",
|
|
3075
|
-
"since": "1.0.0-rc.11",
|
|
3076
|
-
"type": "string",
|
|
3077
|
-
"description": "Defines the stable selector that you can use via getStableDomRef method."
|
|
3078
|
-
},
|
|
3079
3178
|
{
|
|
3080
3179
|
"name": "value",
|
|
3081
3180
|
"visibility": "public",
|
|
@@ -3102,7 +3201,7 @@
|
|
|
3102
3201
|
"static": true,
|
|
3103
3202
|
"visibility": "public",
|
|
3104
3203
|
"extends": "sap.ui.webcomponents.base.UI5Element",
|
|
3105
|
-
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-panel</code> component is a container which has a header and a content area and is used for grouping and displaying information. It can be collapsed to save space on the screen.\n\n<h3>Guidelines:</h3> <ul> <li>Nesting two or more panels is not recommended.</li> <li>Do not stack too many panels on one page.</li> </ul>\n\n<h3>Structure</h3> The panel's header area consists of a title bar with a header text or custom header. <br> The header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state. <br> The custom header can be set through the <code>header</code> slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements. <br> The content area can contain an arbitrary set of controls. <br><b>Note:</b> The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.\n\n<h3>Responsive Behavior</h3> <ul> <li>If the width of the panel is set to 100% (default), the panel and its children are resized responsively, depending on its parent container.</li> <li>If the panel has a fixed height, it will take up the space even if the panel is collapsed.</li> <li>When the panel is expandable (the <code>fixed</code> property is set to <code>false</code>), an arrow icon (pointing to the right) appears in front of the header.</li> <li>When the animation is activated, expand/collapse uses a smooth animation to open or close the content area.</li> <li>When the panel expands/collapses, the arrow icon rotates 90 degrees clockwise/counter-clockwise.</li> </ul>\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-panel</code> exposes the following CSS Shadow Parts: <ul> <li>content - Used to style the wrapper of the content</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Panel\";</code>",
|
|
3204
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-panel</code> component is a container which has a header and a content area and is used for grouping and displaying information. It can be collapsed to save space on the screen.\n\n<h3>Guidelines:</h3> <ul> <li>Nesting two or more panels is not recommended.</li> <li>Do not stack too many panels on one page.</li> </ul>\n\n<h3>Structure</h3> The panel's header area consists of a title bar with a header text or custom header. <br> The header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state. <br> The custom header can be set through the <code>header</code> slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements. <br> The content area can contain an arbitrary set of controls. <br><b>Note:</b> The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.\n\n<h3>Responsive Behavior</h3> <ul> <li>If the width of the panel is set to 100% (default), the panel and its children are resized responsively, depending on its parent container.</li> <li>If the panel has a fixed height, it will take up the space even if the panel is collapsed.</li> <li>When the panel is expandable (the <code>fixed</code> property is set to <code>false</code>), an arrow icon (pointing to the right) appears in front of the header.</li> <li>When the animation is activated, expand/collapse uses a smooth animation to open or close the content area.</li> <li>When the panel expands/collapses, the arrow icon rotates 90 degrees clockwise/counter-clockwise.</li> </ul>\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-panel</code> exposes the following CSS Shadow Parts: <ul> <li>content - Used to style the wrapper of the content</li> </ul>\n\n<h3>Keyboard Handling</h3>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Panel\";</code>",
|
|
3106
3205
|
"constructor": { "visibility": "public" },
|
|
3107
3206
|
"properties": [
|
|
3108
3207
|
{
|
|
@@ -3110,7 +3209,7 @@
|
|
|
3110
3209
|
"visibility": "public",
|
|
3111
3210
|
"since": "1.0.0-rc.15",
|
|
3112
3211
|
"type": "string",
|
|
3113
|
-
"description": "
|
|
3212
|
+
"description": "Defines the accessible aria name of the component.",
|
|
3114
3213
|
"defaultValue": "\"\""
|
|
3115
3214
|
},
|
|
3116
3215
|
{
|
|
@@ -3190,7 +3289,7 @@
|
|
|
3190
3289
|
"visibility": "public",
|
|
3191
3290
|
"since": "1.0.0-rc.6",
|
|
3192
3291
|
"extends": "Popup",
|
|
3193
|
-
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-popover</code> component displays additional information for an object in a compact way and without leaving the page. The Popover can contain various UI elements, such as fields, tables, images, and charts. It can also include actions in the footer.\n\n<h3>Structure</h3>\n\nThe popover has three main areas: <ul> <li>Header (optional)</li> <li>Content</li> <li>Footer (optional)</li> </ul>\n\n<b>Note:</b> The <code>ui5-popover</code> is closed when the user clicks or taps outside the popover or selects an action within the popover. You can prevent this with the <code>modal</code> property.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Popover.js\";</code>",
|
|
3292
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-popover</code> component displays additional information for an object in a compact way and without leaving the page. The Popover can contain various UI elements, such as fields, tables, images, and charts. It can also include actions in the footer.\n\n<h3>Structure</h3>\n\nThe popover has three main areas: <ul> <li>Header (optional)</li> <li>Content</li> <li>Footer (optional)</li> </ul>\n\n<b>Note:</b> The <code>ui5-popover</code> is closed when the user clicks or taps outside the popover or selects an action within the popover. You can prevent this with the <code>modal</code> property.\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-popover</code> exposes the following CSS Shadow Parts: <ul> <li>header - Used to style the header of the component</li> <li>content - Used to style the content of the component</li> <li>footer - Used to style the footer of the component</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Popover.js\";</code>",
|
|
3194
3293
|
"constructor": { "visibility": "public" },
|
|
3195
3294
|
"properties": [
|
|
3196
3295
|
{
|
|
@@ -3237,6 +3336,14 @@
|
|
|
3237
3336
|
"description": "Defines whether the component should close when clicking/tapping outside of the popover. If enabled, it blocks any interaction with the background.",
|
|
3238
3337
|
"defaultValue": "false"
|
|
3239
3338
|
},
|
|
3339
|
+
{
|
|
3340
|
+
"name": "opener",
|
|
3341
|
+
"visibility": "public",
|
|
3342
|
+
"since": "1.2.0",
|
|
3343
|
+
"type": "String",
|
|
3344
|
+
"description": "Defines the opener id of the element that the popover is shown at",
|
|
3345
|
+
"defaultValue": "\"\""
|
|
3346
|
+
},
|
|
3240
3347
|
{
|
|
3241
3348
|
"name": "placementType",
|
|
3242
3349
|
"visibility": "public",
|
|
@@ -3299,7 +3406,7 @@
|
|
|
3299
3406
|
"static": true,
|
|
3300
3407
|
"visibility": "public",
|
|
3301
3408
|
"extends": "sap.ui.webcomponents.base.UI5Element",
|
|
3302
|
-
"description": "<h3 class=\"comment-api-title\">Overview</h3> Base class for all popup Web Components.\n\nIf you need to create your own popup-like custom UI5 Web Components, it is highly recommended that you extend at least Popup in order to have consistency with other popups in terms of modal behavior and z-index management.\n\n1. The Popup class handles modality: - The \"isModal\" getter can be overridden by derivatives to provide their own conditions when they are modal or not - Derivatives may call the \"
|
|
3409
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3> Base class for all popup Web Components.\n\nIf you need to create your own popup-like custom UI5 Web Components, it is highly recommended that you extend at least Popup in order to have consistency with other popups in terms of modal behavior and z-index management.\n\n1. The Popup class handles modality: - The \"isModal\" getter can be overridden by derivatives to provide their own conditions when they are modal or not - Derivatives may call the \"blockPageScrolling\" and \"unblockPageScrolling\" static methods to temporarily remove scrollbars on the html element - Derivatives may call the \"open\" and \"close\" methods which handle focus, manage the popup registry and for modal popups, manage the blocking layer\n\n2. Provides blocking layer (relevant for modal popups only): - It is in the static area - Controlled by the \"open\" and \"close\" methods\n\n3. The Popup class \"traps\" focus: - Derivatives may call the \"applyInitialFocus\" method (usually when opening, to transfer focus inside the popup)\n\n4. The Popup class automatically assigns \"z-index\" - Each time a popup is opened, it gets a higher than the previously opened popup z-index\n\n5. The template of this component exposes two inline partials you can override in derivatives: - beforeContent (upper part of the box, useful for header/title/close button) - afterContent (lower part, useful for footer/action buttons)",
|
|
3303
3410
|
"constructor": { "visibility": "public" },
|
|
3304
3411
|
"properties": [
|
|
3305
3412
|
{
|
|
@@ -3324,8 +3431,16 @@
|
|
|
3324
3431
|
"name": "accessibleName",
|
|
3325
3432
|
"visibility": "public",
|
|
3326
3433
|
"since": "1.0.0-rc.15",
|
|
3327
|
-
"type": "
|
|
3328
|
-
"description": "
|
|
3434
|
+
"type": "string",
|
|
3435
|
+
"description": "Defines the accessible name of the component.",
|
|
3436
|
+
"defaultValue": "\"\""
|
|
3437
|
+
},
|
|
3438
|
+
{
|
|
3439
|
+
"name": "accessibleNameRef",
|
|
3440
|
+
"visibility": "public",
|
|
3441
|
+
"since": "1.1.0",
|
|
3442
|
+
"type": "string",
|
|
3443
|
+
"description": "Defines the IDs of the elements that label the component.",
|
|
3329
3444
|
"defaultValue": "\"\""
|
|
3330
3445
|
},
|
|
3331
3446
|
{
|
|
@@ -3341,6 +3456,14 @@
|
|
|
3341
3456
|
"type": "undefined",
|
|
3342
3457
|
"description": "Implement this getter with relevant logic regarding the modality of the popup (e.g. based on a public property)"
|
|
3343
3458
|
},
|
|
3459
|
+
{
|
|
3460
|
+
"name": "open",
|
|
3461
|
+
"visibility": "public",
|
|
3462
|
+
"since": "1.2.0",
|
|
3463
|
+
"type": "boolean",
|
|
3464
|
+
"description": "Indicates if the element is open",
|
|
3465
|
+
"defaultValue": "false"
|
|
3466
|
+
},
|
|
3344
3467
|
{
|
|
3345
3468
|
"name": "preventFocusRestore",
|
|
3346
3469
|
"visibility": "public",
|
|
@@ -3359,6 +3482,7 @@
|
|
|
3359
3482
|
"slots": [
|
|
3360
3483
|
{
|
|
3361
3484
|
"name": "default",
|
|
3485
|
+
"propertyName": "content",
|
|
3362
3486
|
"visibility": "public",
|
|
3363
3487
|
"type": "HTMLElement[]",
|
|
3364
3488
|
"description": "Defines the content of the Popup."
|
|
@@ -3428,10 +3552,10 @@
|
|
|
3428
3552
|
"description": "Use this method to focus the element denoted by \"initialFocus\", if provided, or the first focusable element otherwise."
|
|
3429
3553
|
},
|
|
3430
3554
|
{
|
|
3431
|
-
"name": "
|
|
3555
|
+
"name": "blockPageScrolling",
|
|
3432
3556
|
"visibility": "protected",
|
|
3433
3557
|
"static": true,
|
|
3434
|
-
"description": "Temporarily removes scrollbars from the
|
|
3558
|
+
"description": "Temporarily removes scrollbars from the html element"
|
|
3435
3559
|
},
|
|
3436
3560
|
{
|
|
3437
3561
|
"name": "close",
|
|
@@ -3455,10 +3579,10 @@
|
|
|
3455
3579
|
"description": "Returns the focus to the previously focused element"
|
|
3456
3580
|
},
|
|
3457
3581
|
{
|
|
3458
|
-
"name": "
|
|
3582
|
+
"name": "unblockPageScrolling",
|
|
3459
3583
|
"visibility": "protected",
|
|
3460
3584
|
"static": true,
|
|
3461
|
-
"description": "Restores scrollbars on the
|
|
3585
|
+
"description": "Restores scrollbars on the html element, if needed"
|
|
3462
3586
|
}
|
|
3463
3587
|
]
|
|
3464
3588
|
},
|
|
@@ -3526,6 +3650,14 @@
|
|
|
3526
3650
|
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-radio-button</code> component enables users to select a single option from a set of options. When a <code>ui5-radio-button</code> is selected by the user, the <code>change</code> event is fired. When a <code>ui5-radio-button</code> that is within a group is selected, the one that was previously selected gets automatically deselected. You can group radio buttons by using the <code>name</code> property. <br> <b>Note:</b> If <code>ui5-radio-button</code> is not part of a group, it can be selected once, but can not be deselected back.\n\n<h3>Keyboard Handling</h3>\n\nOnce the <code>ui5-radio-button</code> is on focus, it might be selected by pressing the Space and Enter keys. <br> The Arrow Down/Arrow Up and Arrow Left/Arrow Right keys can be used to change selection between next/previous radio buttons in one group, while TAB and SHIFT + TAB can be used to enter or leave the radio button group. <br> <b>Note:</b> On entering radio button group, the focus goes to the currently selected radio button.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/RadioButton\";</code>",
|
|
3527
3651
|
"constructor": { "visibility": "public" },
|
|
3528
3652
|
"properties": [
|
|
3653
|
+
{
|
|
3654
|
+
"name": "accessibleNameRef",
|
|
3655
|
+
"visibility": "public",
|
|
3656
|
+
"since": "1.1.0",
|
|
3657
|
+
"type": "string",
|
|
3658
|
+
"description": "Defines the IDs of the elements that label the component.",
|
|
3659
|
+
"defaultValue": "\"\""
|
|
3660
|
+
},
|
|
3529
3661
|
{
|
|
3530
3662
|
"name": "checked",
|
|
3531
3663
|
"visibility": "public",
|
|
@@ -3643,15 +3775,15 @@
|
|
|
3643
3775
|
"visibility": "public",
|
|
3644
3776
|
"since": "1.0.0-rc.8",
|
|
3645
3777
|
"extends": "UI5Element",
|
|
3646
|
-
"description": "<h3 class=\"comment-api-title\">Overview</h3> The Rating Indicator is used to display a specific number of icons that are used to rate an item. Additionally, it is also used to display the average and overall ratings.\n\n<h3>Usage</h3> The recommended number of icons is between 5 and 7.\n\n<h3>Responsive Behavior</h3> You can change the size of the Rating Indicator by changing its <code>font-size</code> CSS property. <br> Example: <code><ui5-rating-indicator style=\"font-size: 3rem;\"></ui5-rating-indicator></code>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/RatingIndicator.js\";</code>",
|
|
3778
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3> The Rating Indicator is used to display a specific number of icons that are used to rate an item. Additionally, it is also used to display the average and overall ratings.\n\n<h3>Usage</h3> The recommended number of icons is between 5 and 7.\n\n<h3>Responsive Behavior</h3> You can change the size of the Rating Indicator by changing its <code>font-size</code> CSS property. <br> Example: <code><ui5-rating-indicator style=\"font-size: 3rem;\"></ui5-rating-indicator></code>\n\n<h3>Keyboard Handling</h3> When the <code>ui5-rating-indicator</code> is focused, the user can change the rating with the following keyboard shortcuts: <br>\n\n<ul> <li>[RIGHT/UP] - Increases the value of the rating by one step. If the highest value is reached, does nothing</li> <li>[LEFT/DOWN] - Decreases the value of the rating by one step. If the lowest value is reached, does nothing.</li> <li>[HOME] - Sets the lowest value.</li> <li>[END] - Sets the highest value.</li> <li>[SPACE/ENTER/RETURN] - Increases the value of the rating by one step. If the highest value is reached, sets the rating to the lowest value.</li> <li>Any number - Changes value to the corresponding number. If typed number is larger than the number of values, sets the highest value.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/RatingIndicator.js\";</code>",
|
|
3647
3779
|
"constructor": { "visibility": "public" },
|
|
3648
3780
|
"properties": [
|
|
3649
3781
|
{
|
|
3650
3782
|
"name": "accessibleName",
|
|
3651
3783
|
"visibility": "public",
|
|
3652
3784
|
"since": "1.0.0-rc.15",
|
|
3653
|
-
"type": "
|
|
3654
|
-
"description": "
|
|
3785
|
+
"type": "string",
|
|
3786
|
+
"description": "Defines the accessible aria name of the component."
|
|
3655
3787
|
},
|
|
3656
3788
|
{
|
|
3657
3789
|
"name": "disabled",
|
|
@@ -3703,7 +3835,7 @@
|
|
|
3703
3835
|
"visibility": "public",
|
|
3704
3836
|
"since": "1.0.0-rc.6",
|
|
3705
3837
|
"extends": "Popover",
|
|
3706
|
-
"description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-responsive-popover</code> acts as a Popover on desktop and tablet, while on phone it acts as a Dialog. The component improves tremendously the user experience on mobile.\n\n<h3>Usage</h3> Use it when you want to make sure that all the content is visible on any device.",
|
|
3838
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-responsive-popover</code> acts as a Popover on desktop and tablet, while on phone it acts as a Dialog. The component improves tremendously the user experience on mobile.\n\n<h3>Usage</h3> Use it when you want to make sure that all the content is visible on any device.\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-responsive-popover</code> exposes the following CSS Shadow Parts: <ul> <li>header - Used to style the header of the component</li> <li>content - Used to style the content of the component</li> <li>footer - Used to style the footer of the component</li> </ul>",
|
|
3707
3839
|
"constructor": { "visibility": "public" },
|
|
3708
3840
|
"methods": [
|
|
3709
3841
|
{ "name": "close", "visibility": "public", "description": "Closes the popover/dialog." },
|
|
@@ -3751,11 +3883,18 @@
|
|
|
3751
3883
|
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-segmented-button</code> shows a group of items. When the user clicks or taps one of the items, it stays in a pressed state. It automatically resizes the items to fit proportionally within the component. When no width is set, the component uses the available width. <br><br> <b>Note:</b> There can be just one selected <code>item</code> at a time.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/SegmentedButton\";</code>",
|
|
3752
3884
|
"constructor": { "visibility": "public" },
|
|
3753
3885
|
"properties": [
|
|
3886
|
+
{
|
|
3887
|
+
"name": "accessibleName",
|
|
3888
|
+
"visibility": "public",
|
|
3889
|
+
"since": "1.0.3",
|
|
3890
|
+
"type": "string",
|
|
3891
|
+
"description": "Defines the accessible aria name of the component."
|
|
3892
|
+
},
|
|
3754
3893
|
{
|
|
3755
3894
|
"name": "selectedItem",
|
|
3756
3895
|
"readonly": "true",
|
|
3757
3896
|
"visibility": "public",
|
|
3758
|
-
"type": "
|
|
3897
|
+
"type": "sap.ui.webcomponents.main.ISegmentedButtonItem",
|
|
3759
3898
|
"description": "Currently selected item."
|
|
3760
3899
|
}
|
|
3761
3900
|
],
|
|
@@ -3829,21 +3968,21 @@
|
|
|
3829
3968
|
"visibility": "public",
|
|
3830
3969
|
"since": "0.8.0",
|
|
3831
3970
|
"extends": "sap.ui.webcomponents.base.UI5Element",
|
|
3832
|
-
"description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-select</code> component is used to create a drop-down list. The items inside the <code>ui5-select</code> define the available options by using the <code>ui5-option</code> component.\n\n<h3>Keyboard Handling</h3> The <code>ui5-select</code> provides advanced keyboard handling. <br> <ul> <li>[F4, ALT+UP, ALT+DOWN, SPACE, ENTER] - Opens/closes the drop-down.</li> <li>[UP, 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.</li> <li>[SPACE, ENTER] - If the drop-down is opened - selects the focused option.</li> <li>[ESC] - Closes the drop-down without changing the selection.</li> <li>[HOME] - Navigates to first option</li> <li>[END] - Navigates to the last option</li> </ul> <br>\n\n<h3>
|
|
3971
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-select</code> component is used to create a drop-down list. The items inside the <code>ui5-select</code> define the available options by using the <code>ui5-option</code> component.\n\n<h3>Keyboard Handling</h3> The <code>ui5-select</code> provides advanced keyboard handling. <br> <ul> <li>[F4, ALT+UP, ALT+DOWN, SPACE, ENTER] - Opens/closes the drop-down.</li> <li>[UP, 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.</li> <li>[SPACE, ENTER] - If the drop-down is opened - selects the focused option.</li> <li>[ESC] - Closes the drop-down without changing the selection.</li> <li>[HOME] - Navigates to first option</li> <li>[END] - Navigates to the last option</li> </ul> <br>\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents/dist/Select\";</code> <br> <code>import \"@ui5/webcomponents/dist/Option\";</code> (comes with <code>ui5-select</code>)",
|
|
3833
3972
|
"constructor": { "visibility": "public" },
|
|
3834
3973
|
"properties": [
|
|
3835
3974
|
{
|
|
3836
3975
|
"name": "accessibleName",
|
|
3837
3976
|
"visibility": "public",
|
|
3838
3977
|
"since": "1.0.0-rc.15",
|
|
3839
|
-
"type": "
|
|
3840
|
-
"description": "
|
|
3978
|
+
"type": "string",
|
|
3979
|
+
"description": "Defines the accessible aria name of the component."
|
|
3841
3980
|
},
|
|
3842
3981
|
{
|
|
3843
3982
|
"name": "accessibleNameRef",
|
|
3844
3983
|
"visibility": "public",
|
|
3845
3984
|
"since": "1.0.0-rc.15",
|
|
3846
|
-
"type": "
|
|
3985
|
+
"type": "string",
|
|
3847
3986
|
"description": "Receives id(or many ids) of the elements that label the select.",
|
|
3848
3987
|
"defaultValue": "\"\""
|
|
3849
3988
|
},
|
|
@@ -3873,7 +4012,7 @@
|
|
|
3873
4012
|
"name": "selectedOption",
|
|
3874
4013
|
"readonly": "true",
|
|
3875
4014
|
"visibility": "public",
|
|
3876
|
-
"type": "
|
|
4015
|
+
"type": "sap.ui.webcomponents.main.ISelectOption",
|
|
3877
4016
|
"description": "Currently selected option."
|
|
3878
4017
|
},
|
|
3879
4018
|
{
|
|
@@ -4093,6 +4232,76 @@
|
|
|
4093
4232
|
}
|
|
4094
4233
|
]
|
|
4095
4234
|
},
|
|
4235
|
+
{
|
|
4236
|
+
"kind": "class",
|
|
4237
|
+
"name": "sap.ui.webcomponents.main.SplitButton",
|
|
4238
|
+
"basename": "SplitButton",
|
|
4239
|
+
"tagname": "ui5-split-button",
|
|
4240
|
+
"resource": "SplitButton.js",
|
|
4241
|
+
"module": "SplitButton",
|
|
4242
|
+
"static": true,
|
|
4243
|
+
"visibility": "public",
|
|
4244
|
+
"since": "1.1.0",
|
|
4245
|
+
"extends": "UI5Element",
|
|
4246
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n<code>ui5-split-button</code> enables users to trigger actions. It is constructed of two separate actions - default action and arrow action that can be activated by clicking or tapping, or by pressing certain keyboard keys - <code>Space</code> or <code>Enter</code> for default action, and <code>Arrow Down</code> or <code>Arrow Up</code> for arrow action.\n\n<h3>Usage</h3>\n\n<code>ui5-split-button</code> consists two separate buttons: <ul> <li>for the first one (default action) you can define some <code>text</code> or an <code>icon</code>, or both. Also, it is possible to define different icon for active state of this button - <code>activeIcon</code>.</li> <li>the second one (arrow action) contains only <code>slim-arrow-down</code> icon.</li> </ul> You can choose a <code>design</code> from a set of predefined types (the same as for ui5-button) that offer different styling to correspond to the triggered action. Both text and arrow actions have the same design. <br><br> You can set the <code>ui5-split-button</code> as enabled or disabled. Both parts of an enabled <code>ui5-split-button</code> can be pressed by clicking or tapping it, or by certain keys, which changes the style to provide visual feedback to the user that it is pressed or hovered over with the mouse cursor. A disabled <code>ui5-split-button</code> appears inactive and any of the two buttons cannot be pressed.\n\n<h3>Keyboard Handling</h3> <ul> <li><code>Space</code> or <code>Enter</code> - triggers the default action</li> <li><code>Shift</code> or <code>Escape</code> - if <code>Space</code> is pressed, releases the default action button without triggering the click event.</li> <li><code>Arrow Down</code>, <code>Arrow Up</code>, <code>Alt</code>+<code>Arrow Down</code>, <code>Alt</code>+<code>Arrow Up</code>, or <code>F4</code> - triggers the arrow action There are separate events that are fired on activating of <code>ui5-split-button</code> parts: <ul> <li><code>click</code> for the first button (default action)</li> <li><code>arrow-click</code> for the second button (arrow action)</li> </ul> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/SplitButton.js\";</code>",
|
|
4247
|
+
"constructor": { "visibility": "public" },
|
|
4248
|
+
"properties": [
|
|
4249
|
+
{
|
|
4250
|
+
"name": "accessibleName",
|
|
4251
|
+
"visibility": "public",
|
|
4252
|
+
"type": "string",
|
|
4253
|
+
"description": "Defines the accessible aria name of the component."
|
|
4254
|
+
},
|
|
4255
|
+
{
|
|
4256
|
+
"name": "activeIcon",
|
|
4257
|
+
"visibility": "public",
|
|
4258
|
+
"type": "string",
|
|
4259
|
+
"description": "Defines the icon to be displayed in active state as graphical element within the component.",
|
|
4260
|
+
"defaultValue": "\"\""
|
|
4261
|
+
},
|
|
4262
|
+
{
|
|
4263
|
+
"name": "design",
|
|
4264
|
+
"visibility": "public",
|
|
4265
|
+
"type": "ButtonDesign",
|
|
4266
|
+
"description": "Defines the component design.\n\n<br><br> <b>The available values are:</b>\n\n<ul> <li><code>Default</code></li> <li><code>Emphasized</code></li> <li><code>Positive</code></li> <li><code>Negative</code></li> <li><code>Transparent</code></li> <li><code>Attention</code></li> </ul>",
|
|
4267
|
+
"defaultValue": "\"Default\""
|
|
4268
|
+
},
|
|
4269
|
+
{
|
|
4270
|
+
"name": "disabled",
|
|
4271
|
+
"visibility": "public",
|
|
4272
|
+
"type": "boolean",
|
|
4273
|
+
"description": "Defines whether the component is disabled. A disabled component can't be pressed or focused, and it is not in the tab chain.",
|
|
4274
|
+
"defaultValue": "false"
|
|
4275
|
+
},
|
|
4276
|
+
{
|
|
4277
|
+
"name": "icon",
|
|
4278
|
+
"visibility": "public",
|
|
4279
|
+
"type": "string",
|
|
4280
|
+
"description": "Defines the icon to be displayed as graphical element within the component. The SAP-icons font provides numerous options. <br><br> Example:\n\nSee all the available icons in the <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>.",
|
|
4281
|
+
"defaultValue": "\"\""
|
|
4282
|
+
}
|
|
4283
|
+
],
|
|
4284
|
+
"slots": [
|
|
4285
|
+
{
|
|
4286
|
+
"name": "default",
|
|
4287
|
+
"visibility": "public",
|
|
4288
|
+
"type": "Node[]",
|
|
4289
|
+
"description": "Defines the text of the component. <br><br> <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."
|
|
4290
|
+
}
|
|
4291
|
+
],
|
|
4292
|
+
"events": [
|
|
4293
|
+
{
|
|
4294
|
+
"name": "arrow-click",
|
|
4295
|
+
"visibility": "public",
|
|
4296
|
+
"description": "Fired when the user clicks on the arrow action."
|
|
4297
|
+
},
|
|
4298
|
+
{
|
|
4299
|
+
"name": "click",
|
|
4300
|
+
"visibility": "public",
|
|
4301
|
+
"description": "Fired when the user clicks on the default action."
|
|
4302
|
+
}
|
|
4303
|
+
]
|
|
4304
|
+
},
|
|
4096
4305
|
{
|
|
4097
4306
|
"kind": "class",
|
|
4098
4307
|
"name": "sap.ui.webcomponents.main.StandardListItem",
|
|
@@ -4184,14 +4393,14 @@
|
|
|
4184
4393
|
"name": "accessibleName",
|
|
4185
4394
|
"visibility": "public",
|
|
4186
4395
|
"since": "1.0.0-rc.15",
|
|
4187
|
-
"type": "
|
|
4188
|
-
"description": "
|
|
4396
|
+
"type": "string",
|
|
4397
|
+
"description": "Defines the accessible aria name of the component."
|
|
4189
4398
|
},
|
|
4190
4399
|
{
|
|
4191
4400
|
"name": "accessibleNameRef",
|
|
4192
4401
|
"visibility": "public",
|
|
4193
4402
|
"since": "1.0.0-rc.15",
|
|
4194
|
-
"type": "
|
|
4403
|
+
"type": "string",
|
|
4195
4404
|
"description": "Receives id(or many ids) of the elements that label the component.",
|
|
4196
4405
|
"defaultValue": "\"\""
|
|
4197
4406
|
},
|
|
@@ -4404,6 +4613,21 @@
|
|
|
4404
4613
|
"description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-switch</code> component is used for changing between binary states. <br> The component can display texts, that will be switched, based on the component state, via the <code>textOn</code> and <code>textOff</code> properties, but texts longer than 3 letters will be cutted off. <br> However, users are able to customize the width of <code>ui5-switch</code> with pure CSS (<code><ui5-switch style=\"width: 200px\"></code>), and set widths, depending on the texts they would use. <br> Note: the component would not automatically stretch to fit the whole text width.\n\n<h3>Keyboard Handling</h3> The state can be changed by pressing the Space and Enter keys.\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-switch</code> exposes the following CSS Shadow Parts: <ul> <li>slider - Used to style the track, where the handle is being slid</li> <li>text-on - Used to style the <code>textOn</code> property text</li> <li>text-off - Used to style the <code>textOff</code> property text</li> <li>handle - Used to style the handle of the switch</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Switch\";</code>",
|
|
4405
4614
|
"constructor": { "visibility": "public" },
|
|
4406
4615
|
"properties": [
|
|
4616
|
+
{
|
|
4617
|
+
"name": "accessibleName",
|
|
4618
|
+
"visibility": "public",
|
|
4619
|
+
"since": "1.2.0",
|
|
4620
|
+
"type": "string",
|
|
4621
|
+
"description": "Sets the accessible aria name of the component."
|
|
4622
|
+
},
|
|
4623
|
+
{
|
|
4624
|
+
"name": "accessibleNameRef",
|
|
4625
|
+
"visibility": "public",
|
|
4626
|
+
"since": "1.1.0",
|
|
4627
|
+
"type": "string",
|
|
4628
|
+
"description": "Receives id(or many ids) of the elements that label the component.",
|
|
4629
|
+
"defaultValue": "\"\""
|
|
4630
|
+
},
|
|
4407
4631
|
{
|
|
4408
4632
|
"name": "checked",
|
|
4409
4633
|
"visibility": "public",
|
|
@@ -4467,7 +4691,7 @@
|
|
|
4467
4691
|
"name": "additionalText",
|
|
4468
4692
|
"visibility": "public",
|
|
4469
4693
|
"type": "string",
|
|
4470
|
-
"description": "Represents the \"additionalText\" text, which is displayed in the tab
|
|
4694
|
+
"description": "Represents the \"additionalText\" text, which is displayed in the tab.",
|
|
4471
4695
|
"defaultValue": "\"\""
|
|
4472
4696
|
},
|
|
4473
4697
|
{
|
|
@@ -4498,13 +4722,6 @@
|
|
|
4498
4722
|
"description": "Specifies if the component is selected.",
|
|
4499
4723
|
"defaultValue": "false"
|
|
4500
4724
|
},
|
|
4501
|
-
{
|
|
4502
|
-
"name": "stableDomRef",
|
|
4503
|
-
"visibility": "public",
|
|
4504
|
-
"since": "1.0.0-rc.8",
|
|
4505
|
-
"type": "string",
|
|
4506
|
-
"description": "Defines the stable selector that you can use via getStableDomRef method."
|
|
4507
|
-
},
|
|
4508
4725
|
{
|
|
4509
4726
|
"name": "text",
|
|
4510
4727
|
"visibility": "public",
|
|
@@ -4520,6 +4737,14 @@
|
|
|
4520
4737
|
"type": "Node[]",
|
|
4521
4738
|
"description": "Defines the tab content."
|
|
4522
4739
|
}
|
|
4740
|
+
],
|
|
4741
|
+
"methods": [
|
|
4742
|
+
{
|
|
4743
|
+
"name": "getTabInStripDomRef",
|
|
4744
|
+
"visibility": "public",
|
|
4745
|
+
"since": "1.0.0-rc.16",
|
|
4746
|
+
"description": "Returns the DOM reference of the tab that is placed in the header. <b>Note:</b> If you need a DOM ref to the tab content please use the <code>getDomRef</code> method."
|
|
4747
|
+
}
|
|
4523
4748
|
]
|
|
4524
4749
|
},
|
|
4525
4750
|
{
|
|
@@ -4533,7 +4758,7 @@
|
|
|
4533
4758
|
"static": true,
|
|
4534
4759
|
"visibility": "public",
|
|
4535
4760
|
"extends": "sap.ui.webcomponents.base.UI5Element",
|
|
4536
|
-
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-tabcontainer</code> represents a collection of tabs with associated content. Navigation through the tabs changes the content display of the currently active content area. A tab can be labeled with text only, or icons with text.\n\n<h3>Structure</h3>\n\nThe <code>ui5-tabcontainer</code> can hold two types of entities: <ul> <li><code>ui5-tab</code> - contains all the information on an item (text and icon)</li> <li><code>ui5-tab-separator</code> - used to separate tabs with a vertical line</li> </ul>\n\n<h3>
|
|
4761
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-tabcontainer</code> represents a collection of tabs with associated content. Navigation through the tabs changes the content display of the currently active content area. A tab can be labeled with text only, or icons with text.\n\n<h3>Structure</h3>\n\nThe <code>ui5-tabcontainer</code> can hold two types of entities: <ul> <li><code>ui5-tab</code> - contains all the information on an item (text and icon)</li> <li><code>ui5-tab-separator</code> - used to separate tabs with a vertical line</li> </ul>\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-tabcontainer</code> exposes the following CSS Shadow Parts: <ul> <li>content - Used to style the content of the component</li> </ul>\n\n<h3>Keyboard Handling</h3>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/TabContainer\";</code> <br> <code>import \"@ui5/webcomponents/dist/Tab\";</code> (for <code>ui5-tab</code>) <br> <code>import \"@ui5/webcomponents/dist/TabSeparator\";</code> (for <code>ui5-tab-separator</code>)",
|
|
4537
4762
|
"constructor": { "visibility": "public" },
|
|
4538
4763
|
"properties": [
|
|
4539
4764
|
{
|
|
@@ -4554,8 +4779,11 @@
|
|
|
4554
4779
|
"name": "showOverflow",
|
|
4555
4780
|
"visibility": "public",
|
|
4556
4781
|
"type": "boolean",
|
|
4557
|
-
"description": "Defines whether the overflow select list is displayed. <br><br> The overflow select list represents a list, where all
|
|
4558
|
-
"defaultValue": "false"
|
|
4782
|
+
"description": "Defines whether the overflow select list is displayed. <br><br> The overflow select list represents a list, where all tabs are displayed so that it's easier for the user to select a specific tab.",
|
|
4783
|
+
"defaultValue": "false",
|
|
4784
|
+
"deprecated": {
|
|
4785
|
+
"text": "Since the introduction of TabsOverflowMode overflows will always be visible if there is not enough space for all tabs, all hidden tabs are moved to a select list in the respective overflows and are accessible via the overflowButton and / or startOverflowButton"
|
|
4786
|
+
}
|
|
4559
4787
|
},
|
|
4560
4788
|
{
|
|
4561
4789
|
"name": "tabLayout",
|
|
@@ -4563,6 +4791,14 @@
|
|
|
4563
4791
|
"type": "TabLayout",
|
|
4564
4792
|
"description": "Defines the alignment of the content and the <code>additionalText</code> of a tab.\n\n<br><br> <b>Note:</b> The content and the <code>additionalText</code> would be displayed vertically by defualt, but when set to <code>Inline</code>, they would be displayed horizontally.\n\n<br><br> Available options are: <ul> <li><code>Standard</code></li> <li><code>Inline</code></li> </ul>",
|
|
4565
4793
|
"defaultValue": "\"Standard\""
|
|
4794
|
+
},
|
|
4795
|
+
{
|
|
4796
|
+
"name": "tabsOverflowMode",
|
|
4797
|
+
"visibility": "public",
|
|
4798
|
+
"since": "1.1.0",
|
|
4799
|
+
"type": "TabsOverflowMode",
|
|
4800
|
+
"description": "Defines the overflow mode of the tab strip. If you have a large number of tabs, only the tabs that can fit on screen will be visible. All other tabs that can 't fit on the screen are available in an overflow tab \"More\".\n\n<br><br> <b>Note:</b> Only one overflow at the end would be displayed by default, but when set to <code>StartAndEnd</code>, there will be two overflows on both ends, and tab order will not change on tab selection.\n\n<br><br> Available options are: <ul> <li><code>End</code></li> <li><code>StartAndEnd</code></li> </ul>",
|
|
4801
|
+
"defaultValue": "\"End\""
|
|
4566
4802
|
}
|
|
4567
4803
|
],
|
|
4568
4804
|
"slots": [
|
|
@@ -4579,6 +4815,13 @@
|
|
|
4579
4815
|
"since": "1.0.0-rc.9",
|
|
4580
4816
|
"type": "sap.ui.webcomponents.main.IButton",
|
|
4581
4817
|
"description": "Defines the button which will open the overflow menu. If nothing is provided to this slot, the default button will be used."
|
|
4818
|
+
},
|
|
4819
|
+
{
|
|
4820
|
+
"name": "startOverflowButton",
|
|
4821
|
+
"visibility": "public",
|
|
4822
|
+
"since": "1.1.0",
|
|
4823
|
+
"type": "sap.ui.webcomponents.main.IButton",
|
|
4824
|
+
"description": "Defines the button which will open the start overflow menu if available. If nothing is provided to this slot, the default button will be used."
|
|
4582
4825
|
}
|
|
4583
4826
|
],
|
|
4584
4827
|
"events": [
|
|
@@ -4612,7 +4855,7 @@
|
|
|
4612
4855
|
"static": true,
|
|
4613
4856
|
"visibility": "public",
|
|
4614
4857
|
"extends": "sap.ui.webcomponents.base.UI5Element",
|
|
4615
|
-
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-table</code> component provides a set of sophisticated and convenient functions for responsive table design. It provides a comprehensive set of features for displaying and dealing with vast amounts of data. <br><br> To render the <code>Table</code> properly, the order of the <code>columns</code> should match with the order of the item <code>cells</code> in the <code>rows</code>. <br><br> Desktop and tablet devices are supported. On tablets, special consideration should be given to the number of visible columns and rows due to the limited performance of some devices.\n\n<h3>Selection</h3> To benefit from the selection mechanism of <code>ui5-table</code> component, you can use the available selection modes: <code>SingleSelect</code> and <code>MultiSelect</code>. <br> In additition to the used mode, you can also specify the <code>ui5-table-row</code> type choosing between <code>Active</code> or <code>Inactive</code>. <br><br> In <code>SingleSelect</code> mode, you can select both an <code>Active</code> and <code>Inactive</code> row via mouse or by pressing the <code>Space</code> or <code>Enter</code> keys. <br> In <code>MultiSelect</code> mode, you can select both an <code>Active</code> and <code>Inactive</code> row by pressing the <code>Space</code> key when a row is on focus or via mouse click over the selection checkbox of the row. In order to select all the available rows at once, you can use the selection checkbox presented in the table's header. <br><br> <b>Note:</b> Currently, when a column is shown as a pop-in, the visual indication for selection is not presented over it.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Table.js\";</code> <br> <code>import \"@ui5/webcomponents/dist/TableColumn.js\";</code> (for <code>ui5-table-column</code>) <br> <code>import \"@ui5/webcomponents/dist/TableRow.js\";</code> (for <code>ui5-table-row</code>) <br> <code>import \"@ui5/webcomponents/dist/TableCell.js\";</code> (for <code>ui5-table-cell</code>)",
|
|
4858
|
+
"description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-table</code> component provides a set of sophisticated and convenient functions for responsive table design. It provides a comprehensive set of features for displaying and dealing with vast amounts of data. <br><br> To render the <code>Table</code> properly, the order of the <code>columns</code> should match with the order of the item <code>cells</code> in the <code>rows</code>. <br><br> Desktop and tablet devices are supported. On tablets, special consideration should be given to the number of visible columns and rows due to the limited performance of some devices.\n\n<h3>Selection</h3> To benefit from the selection mechanism of <code>ui5-table</code> component, you can use the available selection modes: <code>SingleSelect</code> and <code>MultiSelect</code>. <br> In additition to the used mode, you can also specify the <code>ui5-table-row</code> type choosing between <code>Active</code> or <code>Inactive</code>. <br><br> In <code>SingleSelect</code> mode, you can select both an <code>Active</code> and <code>Inactive</code> row via mouse or by pressing the <code>Space</code> or <code>Enter</code> keys. <br> In <code>MultiSelect</code> mode, you can select both an <code>Active</code> and <code>Inactive</code> row by pressing the <code>Space</code> key when a row is on focus or via mouse click over the selection checkbox of the row. In order to select all the available rows at once, you can use the selection checkbox presented in the table's header. <br><br> <b>Note:</b> Currently, when a column is shown as a pop-in, the visual indication for selection is not presented over it.\n\n<h3>Keyboard Handling</h3>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br> Furthermore, you can interact with <code>ui5-table</code> via the following keys. <br>\n\n<ul> <li>[F7] - If focus is on an interactive control inside an item, moves focus to the corresponding item.</li> <li>[CTRL]+[A] - Selects all items, if MultiSelect mode is enabled.</li> <li>[HOME]/[END] - Focuses the first/last item.</li> <li>[PAGEUP]/[PAGEDOWN] - Moves focus up/down by page size (20 items by default).</li> <li>[ALT]+[DOWN]/[UP] - Switches focus between header, last focused item, and More button (if applies) in either direction.</li> <li>[SHIFT]+[DOWN]/[UP] - Selects the next/previous item in a MultiSelect table, if the current item is selected (Range selection). Otherwise, deselects them (Range deselection).</li> <li>[SHIFT]+[HOME]/[END] - Range selection to the first/last item of the List.</li> <li>[CTRL]+[HOME]/[END] - Same behavior as HOME & END.</li> * </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Table.js\";</code> <br> <code>import \"@ui5/webcomponents/dist/TableColumn.js\";</code> (for <code>ui5-table-column</code>) <br> <code>import \"@ui5/webcomponents/dist/TableRow.js\";</code> (for <code>ui5-table-row</code>) <br> <code>import \"@ui5/webcomponents/dist/TableCell.js\";</code> (for <code>ui5-table-cell</code>)",
|
|
4616
4859
|
"constructor": { "visibility": "public" },
|
|
4617
4860
|
"properties": [
|
|
4618
4861
|
{
|
|
@@ -4635,7 +4878,7 @@
|
|
|
4635
4878
|
"visibility": "public",
|
|
4636
4879
|
"since": "1.0.0-rc.12",
|
|
4637
4880
|
"type": "TableGrowingMode",
|
|
4638
|
-
"description": "Defines whether the table will have growing capability either by pressing a <code>More</code> button, or via user scroll. In both cases <code>load-more</code> event is fired. <br><br>\n\nAvailable options: <br><br> <code>Button</code> - Shows a <code>More</code> button at the bottom of the table, pressing of which triggers the <code>load-more</code> event. <br> <code>Scroll</code> - The <code>load-more</code> event is triggered when the user scrolls to the bottom of the table; <br> <code>None</code> (default) - The growing is off. <br><br>\n\n<b>
|
|
4881
|
+
"description": "Defines whether the table will have growing capability either by pressing a <code>More</code> button, or via user scroll. In both cases <code>load-more</code> event is fired. <br><br>\n\nAvailable options: <br><br> <code>Button</code> - Shows a <code>More</code> button at the bottom of the table, pressing of which triggers the <code>load-more</code> event. <br> <code>Scroll</code> - The <code>load-more</code> event is triggered when the user scrolls to the bottom of the table; <br> <code>None</code> (default) - The growing is off. <br><br>\n\n<b>Restrictions:</b> <code>growing=\"Scroll\"</code> is not supported for Internet Explorer, and the component will fallback to <code>growing=\"Button\"</code>.",
|
|
4639
4882
|
"defaultValue": "\"None\""
|
|
4640
4883
|
},
|
|
4641
4884
|
{
|
|
@@ -4681,7 +4924,7 @@
|
|
|
4681
4924
|
"name": "stickyColumnHeader",
|
|
4682
4925
|
"visibility": "public",
|
|
4683
4926
|
"type": "boolean",
|
|
4684
|
-
"description": "Determines whether the column headers remain fixed at the top of the page during vertical scrolling as long as the Web Component is in the viewport. <br><br> <b>
|
|
4927
|
+
"description": "Determines whether the column headers remain fixed at the top of the page during vertical scrolling as long as the Web Component is in the viewport. <br><br> <b>Restrictions:</b> <ul> <li>Browsers that do not support this feature: <ul> <li>Internet Explorer</li> <li>Microsoft Edge lower than version 41 (EdgeHTML 16)</li> <li>Mozilla Firefox lower than version 59</li> </ul> </li> <li>Scrolling behavior: <ul> <li>If the Web Component is placed in layout containers that have the <code>overflow: hidden</code> or <code>overflow: auto</code> style definition, this can prevent the sticky elements of the Web Component from becoming fixed at the top of the viewport.</li> </ul> </li> </ul>",
|
|
4685
4928
|
"defaultValue": "false"
|
|
4686
4929
|
}
|
|
4687
4930
|
],
|
|
@@ -4904,14 +5147,14 @@
|
|
|
4904
5147
|
"name": "accessibleName",
|
|
4905
5148
|
"visibility": "public",
|
|
4906
5149
|
"since": "1.0.0-rc.15",
|
|
4907
|
-
"type": "
|
|
4908
|
-
"description": "
|
|
5150
|
+
"type": "string",
|
|
5151
|
+
"description": "Defines the accessible aria name of the component."
|
|
4909
5152
|
},
|
|
4910
5153
|
{
|
|
4911
5154
|
"name": "accessibleNameRef",
|
|
4912
5155
|
"visibility": "public",
|
|
4913
5156
|
"since": "1.0.0-rc.15",
|
|
4914
|
-
"type": "
|
|
5157
|
+
"type": "string",
|
|
4915
5158
|
"description": "Receives id(or many ids) of the elements that label the textarea.",
|
|
4916
5159
|
"defaultValue": "\"\""
|
|
4917
5160
|
},
|
|
@@ -5403,6 +5646,7 @@
|
|
|
5403
5646
|
"events": [
|
|
5404
5647
|
{
|
|
5405
5648
|
"name": "item-click",
|
|
5649
|
+
"allowPreventDefault": "true",
|
|
5406
5650
|
"visibility": "public",
|
|
5407
5651
|
"parameters": [ { "name": "item", "type": "HTMLElement", "description": "The clicked item." } ],
|
|
5408
5652
|
"description": "Fired when a tree item is activated."
|
|
@@ -5413,6 +5657,20 @@
|
|
|
5413
5657
|
"parameters": [ { "name": "item", "type": "HTMLElement", "description": "the deleted item." } ],
|
|
5414
5658
|
"description": "Fired when the Delete button of any tree item is pressed. <br><br> <b>Note:</b> A Delete button is displayed on each item, when the component <code>mode</code> property is set to <code>Delete</code>."
|
|
5415
5659
|
},
|
|
5660
|
+
{
|
|
5661
|
+
"name": "item-mouseout",
|
|
5662
|
+
"visibility": "public",
|
|
5663
|
+
"since": "1.0.0-rc.16",
|
|
5664
|
+
"parameters": [ { "name": "item", "type": "HTMLElement", "description": "the hovered item." } ],
|
|
5665
|
+
"description": "Fired when the mouse cursor leaves the tree item borders."
|
|
5666
|
+
},
|
|
5667
|
+
{
|
|
5668
|
+
"name": "item-mouseover",
|
|
5669
|
+
"visibility": "public",
|
|
5670
|
+
"since": "1.0.0-rc.16",
|
|
5671
|
+
"parameters": [ { "name": "item", "type": "HTMLElement", "description": "the hovered item." } ],
|
|
5672
|
+
"description": "Fired when the mouse cursor enters the tree item borders."
|
|
5673
|
+
},
|
|
5416
5674
|
{
|
|
5417
5675
|
"name": "item-toggle",
|
|
5418
5676
|
"allowPreventDefault": "true",
|
|
@@ -5514,10 +5772,18 @@
|
|
|
5514
5772
|
{
|
|
5515
5773
|
"name": "icon",
|
|
5516
5774
|
"visibility": "public",
|
|
5517
|
-
"type": "
|
|
5775
|
+
"type": "string",
|
|
5518
5776
|
"description": "If set, an icon will be displayed before the text, representing the tree item.",
|
|
5519
5777
|
"defaultValue": "\"\""
|
|
5520
5778
|
},
|
|
5779
|
+
{
|
|
5780
|
+
"name": "indeterminate",
|
|
5781
|
+
"visibility": "public",
|
|
5782
|
+
"since": "1.1.0",
|
|
5783
|
+
"type": "boolean",
|
|
5784
|
+
"description": "Defines whether the selection of a tree node is displayed as partially selected. <br><br> <b>Note:</b> The indeterminate state can be set only programatically and can’t be achieved by user interaction, meaning that the resulting visual state depends on the values of the <code>indeterminate</code> and <code>selected</code> properties: <ul> <li> If a tree node has both <code>selected</code> and <code>indeterminate</code> set to <code>true</code>, it is displayed as partially selected. <li> If a tree node has <code>selected</code> set to <code>true</code> and <code>indeterminate</code> set to <code>false</code>, it is displayed as selected. <li> If a tree node has <code>selected</code> set to <code>false</code>, it is displayed as not selected regardless of the value of the <code>indeterminate</code> property. </ul> <br> <b>Note:</b> This property takes effect only when the <code>ui5-tree</code> is in <code>MultiSelect</code> mode.",
|
|
5785
|
+
"defaultValue": "false"
|
|
5786
|
+
},
|
|
5521
5787
|
{
|
|
5522
5788
|
"name": "selected",
|
|
5523
5789
|
"visibility": "public",
|
|
@@ -5528,7 +5794,7 @@
|
|
|
5528
5794
|
{
|
|
5529
5795
|
"name": "text",
|
|
5530
5796
|
"visibility": "public",
|
|
5531
|
-
"type": "
|
|
5797
|
+
"type": "string",
|
|
5532
5798
|
"description": "Defines the text of the tree item.",
|
|
5533
5799
|
"defaultValue": "\"\""
|
|
5534
5800
|
}
|
|
@@ -5603,7 +5869,7 @@
|
|
|
5603
5869
|
{
|
|
5604
5870
|
"name": "icon",
|
|
5605
5871
|
"visibility": "public",
|
|
5606
|
-
"type": "
|
|
5872
|
+
"type": "string",
|
|
5607
5873
|
"description": "If set, an icon will be displayed before the text of the tree list item.",
|
|
5608
5874
|
"defaultValue": "\"\""
|
|
5609
5875
|
},
|
|
@@ -6022,6 +6288,50 @@
|
|
|
6022
6288
|
],
|
|
6023
6289
|
"slots": []
|
|
6024
6290
|
},
|
|
6291
|
+
{
|
|
6292
|
+
"kind": "class",
|
|
6293
|
+
"name": "sap.ui.webcomponents.main.types.HasPopup",
|
|
6294
|
+
"basename": "HasPopup",
|
|
6295
|
+
"resource": "types/HasPopup.js",
|
|
6296
|
+
"module": "types/HasPopup",
|
|
6297
|
+
"static": true,
|
|
6298
|
+
"visibility": "public",
|
|
6299
|
+
"description": "Different types of HasPopup.",
|
|
6300
|
+
"constructor": { "visibility": "public" },
|
|
6301
|
+
"properties": [
|
|
6302
|
+
{
|
|
6303
|
+
"name": "Dialog",
|
|
6304
|
+
"visibility": "public",
|
|
6305
|
+
"type": "Dialog",
|
|
6306
|
+
"description": "Dialog popup type."
|
|
6307
|
+
},
|
|
6308
|
+
{
|
|
6309
|
+
"name": "Grid",
|
|
6310
|
+
"visibility": "public",
|
|
6311
|
+
"type": "Grid",
|
|
6312
|
+
"description": "Grid popup type."
|
|
6313
|
+
},
|
|
6314
|
+
{
|
|
6315
|
+
"name": "ListBox",
|
|
6316
|
+
"visibility": "public",
|
|
6317
|
+
"type": "ListBox",
|
|
6318
|
+
"description": "ListBox popup type."
|
|
6319
|
+
},
|
|
6320
|
+
{
|
|
6321
|
+
"name": "Menu",
|
|
6322
|
+
"visibility": "public",
|
|
6323
|
+
"type": "Menu",
|
|
6324
|
+
"description": "Menu popup type."
|
|
6325
|
+
},
|
|
6326
|
+
{
|
|
6327
|
+
"name": "Tree",
|
|
6328
|
+
"visibility": "public",
|
|
6329
|
+
"type": "Tree",
|
|
6330
|
+
"description": "Tree popup type."
|
|
6331
|
+
}
|
|
6332
|
+
],
|
|
6333
|
+
"slots": []
|
|
6334
|
+
},
|
|
6025
6335
|
{
|
|
6026
6336
|
"kind": "class",
|
|
6027
6337
|
"name": "sap.ui.webcomponents.main.types.InputType",
|
|
@@ -6612,6 +6922,32 @@
|
|
|
6612
6922
|
],
|
|
6613
6923
|
"slots": []
|
|
6614
6924
|
},
|
|
6925
|
+
{
|
|
6926
|
+
"kind": "class",
|
|
6927
|
+
"name": "sap.ui.webcomponents.main.types.TabsOverflowMode",
|
|
6928
|
+
"basename": "TabsOverflowMode",
|
|
6929
|
+
"resource": "types/TabsOverflowMode.js",
|
|
6930
|
+
"module": "types/TabsOverflowMode",
|
|
6931
|
+
"static": true,
|
|
6932
|
+
"visibility": "public",
|
|
6933
|
+
"description": "Different types of overflow modes.",
|
|
6934
|
+
"constructor": { "visibility": "public" },
|
|
6935
|
+
"properties": [
|
|
6936
|
+
{
|
|
6937
|
+
"name": "End",
|
|
6938
|
+
"visibility": "public",
|
|
6939
|
+
"type": "End",
|
|
6940
|
+
"description": "End type is used if there should be only one overflow with hidden the tabs at the end of the tab container."
|
|
6941
|
+
},
|
|
6942
|
+
{
|
|
6943
|
+
"name": "StartAndEnd",
|
|
6944
|
+
"visibility": "public",
|
|
6945
|
+
"type": "StartAndEnd",
|
|
6946
|
+
"description": "StartAndEnd type is used if there should be two overflows on both ends of the tab container."
|
|
6947
|
+
}
|
|
6948
|
+
],
|
|
6949
|
+
"slots": []
|
|
6950
|
+
},
|
|
6615
6951
|
{
|
|
6616
6952
|
"kind": "class",
|
|
6617
6953
|
"name": "sap.ui.webcomponents.main.types.TitleLevel",
|