@ui5/webcomponents 1.0.0 → 1.1.1
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 +115 -0
- package/dist/Breadcrumbs.js +8 -6
- package/dist/BreadcrumbsItem.js +1 -1
- package/dist/BusyIndicator.js +2 -3
- package/dist/Button.js +28 -1
- package/dist/Calendar.js +7 -0
- package/dist/Carousel.js +9 -0
- package/dist/CheckBox.js +34 -1
- package/dist/ColorPalette.js +5 -4
- package/dist/ColorPalettePopover.js +27 -2
- package/dist/ComboBox.js +91 -23
- package/dist/DateComponentBase.js +6 -8
- package/dist/DatePicker.js +10 -2
- package/dist/DateRangePicker.js +22 -0
- package/dist/Dialog.js +5 -22
- package/dist/Icon.js +11 -8
- package/dist/Input.js +107 -15
- package/dist/Link.js +32 -14
- package/dist/List.js +14 -4
- package/dist/MessageStrip.js +39 -2
- package/dist/MultiComboBox.js +7 -3
- package/dist/MultiComboBoxItem.js +1 -1
- package/dist/Option.js +12 -1
- package/dist/Panel.js +9 -0
- package/dist/Popover.js +106 -57
- package/dist/Popup.js +16 -2
- package/dist/RadioButton.js +15 -3
- package/dist/RatingIndicator.js +37 -7
- package/dist/ResponsivePopover.js +1 -0
- package/dist/SegmentedButton.js +14 -1
- package/dist/Select.js +2 -1
- package/dist/SliderBase.js +4 -0
- package/dist/SplitButton.js +425 -0
- package/dist/Switch.js +18 -0
- package/dist/Tab.js +10 -6
- package/dist/TabContainer.js +480 -108
- package/dist/TabSeparator.js +42 -3
- package/dist/Table.js +15 -5
- package/dist/TextArea.js +9 -3
- package/dist/ToggleButton.js +5 -0
- package/dist/Tokenizer.js +10 -3
- package/dist/TreeItem.js +21 -0
- package/dist/TreeListItem.js +8 -0
- package/dist/api.json +299 -26
- 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/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_exp/parameters-bundle.css +1 -0
- package/dist/features/InputSuggestions.js +88 -15
- 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_exp/parameters-bundle.css.json +1 -1
- package/dist/generated/i18n/i18n-defaults.js +2 -2
- 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/CardHeaderTemplate.lit.js +1 -1
- package/dist/generated/templates/CarouselTemplate.lit.js +1 -1
- package/dist/generated/templates/CheckBoxTemplate.lit.js +1 -1
- package/dist/generated/templates/ColorPalettePopoverTemplate.lit.js +1 -1
- package/dist/generated/templates/ComboBoxPopoverTemplate.lit.js +1 -1
- package/dist/generated/templates/ComboBoxTemplate.lit.js +1 -1
- package/dist/generated/templates/CustomListItemTemplate.lit.js +2 -2
- package/dist/generated/templates/DialogTemplate.lit.js +1 -1
- package/dist/generated/templates/InputPopoverTemplate.lit.js +3 -3
- package/dist/generated/templates/InputTemplate.lit.js +1 -1
- package/dist/generated/templates/LinkTemplate.lit.js +1 -1
- package/dist/generated/templates/ListItemTemplate.lit.js +2 -2
- package/dist/generated/templates/MessageStripTemplate.lit.js +1 -1
- package/dist/generated/templates/MultiComboBoxPopoverTemplate.lit.js +1 -1
- package/dist/generated/templates/MultiInputTemplate.lit.js +1 -1
- package/dist/generated/templates/PanelTemplate.lit.js +1 -1
- package/dist/generated/templates/PopupBlockLayerTemplate.lit.js +1 -1
- package/dist/generated/templates/RangeSliderTemplate.lit.js +1 -1
- package/dist/generated/templates/ResponsivePopoverTemplate.lit.js +1 -1
- package/dist/generated/templates/SegmentedButtonTemplate.lit.js +1 -1
- package/dist/generated/templates/SelectPopoverTemplate.lit.js +2 -2
- 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 +2 -2
- package/dist/generated/templates/SuggestionListItemTemplate.lit.js +2 -2
- package/dist/generated/templates/SwitchTemplate.lit.js +1 -1
- package/dist/generated/templates/TabContainerPopoverTemplate.lit.js +4 -2
- package/dist/generated/templates/TabContainerTemplate.lit.js +9 -10
- package/dist/generated/templates/TabInOverflowTemplate.lit.js +1 -1
- package/dist/generated/templates/TabInStripTemplate.lit.js +1 -1
- package/dist/generated/templates/TabSeparatorInOverflowTemplate.lit.js +7 -0
- package/dist/generated/templates/TabSeparatorInStripTemplate.lit.js +7 -0
- package/dist/generated/templates/TableTemplate.lit.js +1 -1
- package/dist/generated/templates/TextAreaPopoverTemplate.lit.js +1 -1
- package/dist/generated/templates/ToggleButtonTemplate.lit.js +1 -1
- package/dist/generated/templates/TreeListItemTemplate.lit.js +2 -2
- package/dist/generated/templates/TreeTemplate.lit.js +1 -1
- package/dist/generated/themes/Badge.css.js +1 -1
- package/dist/generated/themes/Breadcrumbs.css.js +1 -1
- package/dist/generated/themes/BrowserScrollbar.css.js +1 -1
- package/dist/generated/themes/BusyIndicator.css.js +1 -1
- package/dist/generated/themes/CardHeader.css.js +1 -1
- package/dist/generated/themes/CheckBox.css.js +1 -1
- package/dist/generated/themes/ComboBox.css.js +1 -1
- package/dist/generated/themes/CustomListItem.css.js +1 -1
- package/dist/generated/themes/Dialog.css.js +1 -1
- package/dist/generated/themes/Input.css.js +1 -1
- package/dist/generated/themes/List.css.js +1 -1
- package/dist/generated/themes/MultiComboBox.css.js +1 -1
- package/dist/generated/themes/Panel.css.js +1 -1
- package/dist/generated/themes/Popover.css.js +1 -1
- package/dist/generated/themes/PopupsCommon.css.js +1 -1
- package/dist/generated/themes/RadioButton.css.js +1 -1
- package/dist/generated/themes/RatingIndicator.css.js +1 -1
- package/dist/generated/themes/Select.css.js +1 -1
- package/dist/generated/themes/SliderBase.css.js +1 -1
- package/dist/generated/themes/SplitButton.css.js +8 -0
- package/dist/generated/themes/TabContainer.css.js +1 -1
- package/dist/generated/themes/TabInOverflow.css.js +1 -1
- package/dist/generated/themes/TabInStrip.css.js +1 -1
- 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 +1 -1
- package/dist/generated/themes/TableColumn.css.js +1 -1
- package/dist/generated/themes/TextArea.css.js +1 -1
- package/dist/generated/themes/TimeSelection.css.js +1 -1
- package/dist/generated/themes/Token.css.js +1 -1
- package/dist/generated/themes/ValueStateMessage.css.js +1 -1
- 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_exp/parameters-bundle.css.js +1 -1
- package/dist/i18n/messagebundle.properties +26 -1
- package/dist/i18n/messagebundle_ar.properties +13 -1
- package/dist/i18n/messagebundle_bg.properties +13 -1
- package/dist/i18n/messagebundle_ca.properties +13 -1
- package/dist/i18n/messagebundle_cs.properties +13 -1
- package/dist/i18n/messagebundle_cy.properties +13 -1
- package/dist/i18n/messagebundle_da.properties +13 -1
- package/dist/i18n/messagebundle_de.properties +13 -1
- package/dist/i18n/messagebundle_el.properties +13 -1
- package/dist/i18n/messagebundle_en.properties +13 -1
- package/dist/i18n/messagebundle_en_GB.properties +13 -1
- package/dist/i18n/messagebundle_en_US_sappsd.properties +13 -1
- package/dist/i18n/messagebundle_en_US_saprigi.properties +18 -1
- package/dist/i18n/messagebundle_en_US_saptrc.properties +13 -1
- package/dist/i18n/messagebundle_es.properties +13 -1
- package/dist/i18n/messagebundle_es_MX.properties +13 -1
- package/dist/i18n/messagebundle_et.properties +13 -1
- package/dist/i18n/messagebundle_fi.properties +14 -2
- package/dist/i18n/messagebundle_fr.properties +13 -1
- package/dist/i18n/messagebundle_fr_CA.properties +13 -1
- package/dist/i18n/messagebundle_hi.properties +13 -1
- package/dist/i18n/messagebundle_hr.properties +13 -1
- package/dist/i18n/messagebundle_hu.properties +13 -1
- package/dist/i18n/messagebundle_id.properties +13 -1
- package/dist/i18n/messagebundle_it.properties +13 -1
- package/dist/i18n/messagebundle_iw.properties +13 -1
- package/dist/i18n/messagebundle_ja.properties +13 -1
- package/dist/i18n/messagebundle_kk.properties +13 -1
- package/dist/i18n/messagebundle_ko.properties +13 -1
- package/dist/i18n/messagebundle_lt.properties +13 -1
- package/dist/i18n/messagebundle_lv.properties +13 -1
- package/dist/i18n/messagebundle_ms.properties +13 -1
- package/dist/i18n/messagebundle_nl.properties +13 -1
- package/dist/i18n/messagebundle_no.properties +13 -1
- package/dist/i18n/messagebundle_pl.properties +13 -1
- package/dist/i18n/messagebundle_pt.properties +13 -1
- package/dist/i18n/messagebundle_pt_PT.properties +13 -1
- package/dist/i18n/messagebundle_ro.properties +13 -1
- package/dist/i18n/messagebundle_ru.properties +13 -1
- package/dist/i18n/messagebundle_sh.properties +13 -1
- package/dist/i18n/messagebundle_sk.properties +13 -1
- package/dist/i18n/messagebundle_sl.properties +13 -1
- package/dist/i18n/messagebundle_sv.properties +13 -1
- package/dist/i18n/messagebundle_th.properties +12 -0
- package/dist/i18n/messagebundle_tr.properties +13 -1
- package/dist/i18n/messagebundle_uk.properties +13 -1
- package/dist/i18n/messagebundle_vi.properties +13 -1
- package/dist/i18n/messagebundle_zh_CN.properties +13 -1
- package/dist/i18n/messagebundle_zh_TW.properties +12 -0
- package/dist/types/HasPopup.js +62 -0
- package/dist/types/TabsOverflowMode.js +40 -0
- package/package.json +9 -9
- package/src/Breadcrumbs.hbs +3 -2
- package/src/Breadcrumbs.js +8 -6
- package/src/BreadcrumbsItem.js +1 -1
- package/src/BreadcrumbsPopover.hbs +2 -2
- package/src/BusyIndicator.hbs +1 -1
- package/src/BusyIndicator.js +2 -3
- package/src/Button.hbs +1 -1
- package/src/Button.js +28 -1
- package/src/Calendar.js +7 -0
- package/src/CardHeader.hbs +12 -5
- package/src/Carousel.hbs +1 -0
- package/src/Carousel.js +9 -0
- package/src/CheckBox.hbs +1 -0
- package/src/CheckBox.js +34 -1
- package/src/ColorPalette.js +5 -4
- package/src/ColorPalettePopover.hbs +7 -5
- package/src/ColorPalettePopover.js +27 -2
- package/src/ComboBox.hbs +1 -0
- package/src/ComboBox.js +91 -23
- package/src/ComboBoxPopover.hbs +1 -0
- package/src/DateComponentBase.js +6 -8
- package/src/DatePicker.js +10 -2
- package/src/DateRangePicker.js +22 -0
- package/src/Dialog.hbs +1 -1
- package/src/Dialog.js +5 -22
- package/src/Icon.js +11 -8
- package/src/Input.hbs +1 -1
- package/src/Input.js +107 -15
- package/src/InputPopover.hbs +2 -3
- package/src/Link.hbs +2 -1
- package/src/Link.js +32 -14
- package/src/List.js +14 -4
- package/src/ListItem.hbs +1 -0
- package/src/MessageStrip.hbs +1 -1
- package/src/MessageStrip.js +39 -2
- package/src/MultiComboBox.js +7 -3
- package/src/MultiComboBoxItem.js +1 -1
- package/src/MultiComboBoxPopover.hbs +1 -1
- package/src/Option.js +12 -1
- package/src/Panel.hbs +1 -1
- package/src/Panel.js +9 -0
- package/src/Popover.js +106 -57
- package/src/Popup.js +16 -2
- package/src/PopupBlockLayer.hbs +1 -1
- package/src/RadioButton.js +15 -3
- package/src/RatingIndicator.js +37 -7
- package/src/ResponsivePopover.hbs +2 -0
- package/src/ResponsivePopover.js +1 -0
- package/src/SegmentedButton.hbs +1 -0
- package/src/SegmentedButton.js +14 -1
- package/src/Select.js +2 -1
- package/src/SelectPopover.hbs +2 -1
- package/src/SliderBase.hbs +1 -1
- package/src/SliderBase.js +4 -0
- package/src/SplitButton.hbs +53 -0
- package/src/SplitButton.js +425 -0
- package/src/Switch.hbs +1 -0
- package/src/Switch.js +18 -0
- package/src/Tab.js +10 -6
- package/src/TabContainer.hbs +48 -58
- package/src/TabContainer.js +480 -108
- package/src/TabContainerPopover.hbs +9 -6
- package/src/TabInOverflow.hbs +0 -1
- package/src/TabInStrip.hbs +3 -8
- package/src/TabSeparator.js +42 -3
- package/src/TabSeparatorInOverflow.hbs +8 -0
- package/src/TabSeparatorInStrip.hbs +6 -0
- package/src/Table.hbs +1 -1
- package/src/Table.js +15 -5
- package/src/TextArea.js +9 -3
- package/src/TextAreaPopover.hbs +1 -1
- package/src/ToggleButton.js +5 -0
- package/src/Tokenizer.js +10 -3
- package/src/Tree.hbs +1 -0
- package/src/TreeItem.js +21 -0
- package/src/TreeListItem.js +8 -0
- package/src/features/InputSuggestions.js +88 -15
- package/src/i18n/messagebundle.properties +26 -1
- package/src/i18n/messagebundle_ar.properties +13 -1
- package/src/i18n/messagebundle_bg.properties +13 -1
- package/src/i18n/messagebundle_ca.properties +13 -1
- package/src/i18n/messagebundle_cs.properties +13 -1
- package/src/i18n/messagebundle_cy.properties +13 -1
- package/src/i18n/messagebundle_da.properties +13 -1
- package/src/i18n/messagebundle_de.properties +13 -1
- package/src/i18n/messagebundle_el.properties +13 -1
- package/src/i18n/messagebundle_en.properties +13 -1
- package/src/i18n/messagebundle_en_GB.properties +13 -1
- package/src/i18n/messagebundle_en_US_sappsd.properties +13 -1
- package/src/i18n/messagebundle_en_US_saprigi.properties +18 -1
- package/src/i18n/messagebundle_en_US_saptrc.properties +13 -1
- package/src/i18n/messagebundle_es.properties +13 -1
- package/src/i18n/messagebundle_es_MX.properties +13 -1
- package/src/i18n/messagebundle_et.properties +13 -1
- package/src/i18n/messagebundle_fi.properties +14 -2
- package/src/i18n/messagebundle_fr.properties +13 -1
- package/src/i18n/messagebundle_fr_CA.properties +13 -1
- package/src/i18n/messagebundle_hi.properties +13 -1
- package/src/i18n/messagebundle_hr.properties +13 -1
- package/src/i18n/messagebundle_hu.properties +13 -1
- package/src/i18n/messagebundle_id.properties +13 -1
- package/src/i18n/messagebundle_it.properties +13 -1
- package/src/i18n/messagebundle_iw.properties +13 -1
- package/src/i18n/messagebundle_ja.properties +13 -1
- package/src/i18n/messagebundle_kk.properties +13 -1
- package/src/i18n/messagebundle_ko.properties +13 -1
- package/src/i18n/messagebundle_lt.properties +13 -1
- package/src/i18n/messagebundle_lv.properties +13 -1
- package/src/i18n/messagebundle_ms.properties +13 -1
- package/src/i18n/messagebundle_nl.properties +13 -1
- package/src/i18n/messagebundle_no.properties +13 -1
- package/src/i18n/messagebundle_pl.properties +13 -1
- package/src/i18n/messagebundle_pt.properties +13 -1
- package/src/i18n/messagebundle_pt_PT.properties +13 -1
- package/src/i18n/messagebundle_ro.properties +13 -1
- package/src/i18n/messagebundle_ru.properties +13 -1
- package/src/i18n/messagebundle_sh.properties +13 -1
- package/src/i18n/messagebundle_sk.properties +13 -1
- package/src/i18n/messagebundle_sl.properties +13 -1
- package/src/i18n/messagebundle_sv.properties +13 -1
- package/src/i18n/messagebundle_th.properties +12 -0
- package/src/i18n/messagebundle_tr.properties +13 -1
- package/src/i18n/messagebundle_uk.properties +13 -1
- package/src/i18n/messagebundle_vi.properties +13 -1
- package/src/i18n/messagebundle_zh_CN.properties +13 -1
- package/src/i18n/messagebundle_zh_TW.properties +12 -0
- package/src/themes/Avatar.css +227 -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 +18 -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 +16 -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 +5 -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 +70 -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 +406 -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 +79 -0
- package/src/themes/MessageStrip.css +123 -0
- package/src/themes/MonthPicker.css +86 -0
- package/src/themes/MultiComboBox.css +37 -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 +6 -0
- package/src/themes/PopupStaticAreaStyles.css +17 -0
- package/src/themes/PopupsCommon.css +87 -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 +34 -0
- package/src/themes/ResponsivePopoverCommon.css +207 -0
- package/src/themes/SegmentedButton.css +88 -0
- package/src/themes/Select.css +53 -0
- package/src/themes/SelectPopover.css +10 -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 +14 -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 +61 -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 +84 -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 +11 -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 +84 -0
- package/src/themes/Tree.css +11 -0
- package/src/themes/TreeListItem.css +107 -0
- package/src/themes/ValueStateMessage.css +76 -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 +9 -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 +8 -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 +57 -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 +107 -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 +46 -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 +45 -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 +19 -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 +45 -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 +19 -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 +45 -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 +7 -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 +10 -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_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/types/HasPopup.js +62 -0
- package/src/types/TabsOverflowMode.js +40 -0
- package/csp.js +0 -7
- package/dist/generated/templates/TabSeparatorTemplate.lit.js +0 -7
- package/src/TabSeparator.hbs +0 -1
package/dist/api.json
CHANGED
|
@@ -379,6 +379,14 @@
|
|
|
379
379
|
"type": "String",
|
|
380
380
|
"description": "Sets the accessible aria name of the component."
|
|
381
381
|
},
|
|
382
|
+
{
|
|
383
|
+
"name": "accessibleNameRef",
|
|
384
|
+
"visibility": "public",
|
|
385
|
+
"since": "1.1.0",
|
|
386
|
+
"type": "String",
|
|
387
|
+
"description": "Receives id(or many ids) of the elements that label the component.",
|
|
388
|
+
"defaultValue": "\"\""
|
|
389
|
+
},
|
|
382
390
|
{
|
|
383
391
|
"name": "design",
|
|
384
392
|
"visibility": "public",
|
|
@@ -444,7 +452,7 @@
|
|
|
444
452
|
"visibility": "public",
|
|
445
453
|
"since": "1.0.0-rc.11",
|
|
446
454
|
"extends": "CalendarPart",
|
|
447
|
-
"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>",
|
|
455
|
+
"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>",
|
|
448
456
|
"constructor": { "visibility": "public" },
|
|
449
457
|
"properties": [
|
|
450
458
|
{
|
|
@@ -693,7 +701,7 @@
|
|
|
693
701
|
"visibility": "public",
|
|
694
702
|
"since": "1.0.0-rc.6",
|
|
695
703
|
"extends": "UI5Element",
|
|
696
|
-
"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>",
|
|
704
|
+
"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>",
|
|
697
705
|
"constructor": { "visibility": "public" },
|
|
698
706
|
"properties": [
|
|
699
707
|
{
|
|
@@ -802,6 +810,22 @@
|
|
|
802
810
|
"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>",
|
|
803
811
|
"constructor": { "visibility": "public" },
|
|
804
812
|
"properties": [
|
|
813
|
+
{
|
|
814
|
+
"name": "accessibleName",
|
|
815
|
+
"visibility": "public",
|
|
816
|
+
"since": "1.1.0",
|
|
817
|
+
"type": "String",
|
|
818
|
+
"description": "Sets the accessible aria name of the component.",
|
|
819
|
+
"defaultValue": "\"\""
|
|
820
|
+
},
|
|
821
|
+
{
|
|
822
|
+
"name": "accessibleNameRef",
|
|
823
|
+
"visibility": "public",
|
|
824
|
+
"since": "1.1.0",
|
|
825
|
+
"type": "String",
|
|
826
|
+
"description": "Receives id(or many ids) of the elements that label the component",
|
|
827
|
+
"defaultValue": "\"\""
|
|
828
|
+
},
|
|
805
829
|
{
|
|
806
830
|
"name": "checked",
|
|
807
831
|
"visibility": "public",
|
|
@@ -992,6 +1016,35 @@
|
|
|
992
1016
|
"since": "1.0.0-rc.16",
|
|
993
1017
|
"returnValue": { "type": "boolean" },
|
|
994
1018
|
"description": "Returns if the component is opened."
|
|
1019
|
+
},
|
|
1020
|
+
{
|
|
1021
|
+
"name": "openPopover",
|
|
1022
|
+
"visibility": "public",
|
|
1023
|
+
"since": "1.0.0-rc.16",
|
|
1024
|
+
"parameters": [
|
|
1025
|
+
{
|
|
1026
|
+
"name": "opener",
|
|
1027
|
+
"type": "HTMLElement",
|
|
1028
|
+
"optional": false,
|
|
1029
|
+
"description": "the element that the popover is shown at"
|
|
1030
|
+
}
|
|
1031
|
+
],
|
|
1032
|
+
"description": "Shows the ColorPalettePopover. <b>Note:</b> The method is deprecated and will be removed in future, use <code>showAt</code> instead.",
|
|
1033
|
+
"deprecated": { "text": "The method is deprecated in favour of <code>showAt</code>." }
|
|
1034
|
+
},
|
|
1035
|
+
{
|
|
1036
|
+
"name": "showAt",
|
|
1037
|
+
"visibility": "public",
|
|
1038
|
+
"since": "1.1.1",
|
|
1039
|
+
"parameters": [
|
|
1040
|
+
{
|
|
1041
|
+
"name": "opener",
|
|
1042
|
+
"type": "HTMLElement",
|
|
1043
|
+
"optional": false,
|
|
1044
|
+
"description": "the element that the popover is shown at"
|
|
1045
|
+
}
|
|
1046
|
+
],
|
|
1047
|
+
"description": "Shows the ColorPalettePopover."
|
|
995
1048
|
}
|
|
996
1049
|
]
|
|
997
1050
|
},
|
|
@@ -1037,7 +1090,7 @@
|
|
|
1037
1090
|
"visibility": "public",
|
|
1038
1091
|
"since": "1.0.0-rc.6",
|
|
1039
1092
|
"extends": "UI5Element",
|
|
1040
|
-
"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
|
|
1093
|
+
"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>",
|
|
1041
1094
|
"constructor": { "visibility": "public" },
|
|
1042
1095
|
"properties": [
|
|
1043
1096
|
{
|
|
@@ -1052,7 +1105,7 @@
|
|
|
1052
1105
|
"visibility": "public",
|
|
1053
1106
|
"since": "1.0.0-rc.15",
|
|
1054
1107
|
"type": "String",
|
|
1055
|
-
"description": "Receives id(or many ids) of the elements that label the
|
|
1108
|
+
"description": "Receives id(or many ids) of the elements that label the component",
|
|
1056
1109
|
"defaultValue": "\"\""
|
|
1057
1110
|
},
|
|
1058
1111
|
{
|
|
@@ -1311,7 +1364,7 @@
|
|
|
1311
1364
|
"static": true,
|
|
1312
1365
|
"visibility": "public",
|
|
1313
1366
|
"extends": "DateComponentBase",
|
|
1314
|
-
"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
|
|
1367
|
+
"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>",
|
|
1315
1368
|
"constructor": { "visibility": "public" },
|
|
1316
1369
|
"properties": [
|
|
1317
1370
|
{
|
|
@@ -1560,6 +1613,20 @@
|
|
|
1560
1613
|
"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>",
|
|
1561
1614
|
"constructor": { "visibility": "public" },
|
|
1562
1615
|
"properties": [
|
|
1616
|
+
{
|
|
1617
|
+
"name": "dateValue",
|
|
1618
|
+
"readonly": "true",
|
|
1619
|
+
"visibility": "public",
|
|
1620
|
+
"type": "Date",
|
|
1621
|
+
"description": "<b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value."
|
|
1622
|
+
},
|
|
1623
|
+
{
|
|
1624
|
+
"name": "dateValueUTC",
|
|
1625
|
+
"readonly": "true",
|
|
1626
|
+
"visibility": "public",
|
|
1627
|
+
"type": "Date",
|
|
1628
|
+
"description": "<b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value."
|
|
1629
|
+
},
|
|
1563
1630
|
{
|
|
1564
1631
|
"name": "delimiter",
|
|
1565
1632
|
"visibility": "public",
|
|
@@ -1682,13 +1749,6 @@
|
|
|
1682
1749
|
"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.",
|
|
1683
1750
|
"constructor": { "visibility": "public" },
|
|
1684
1751
|
"properties": [
|
|
1685
|
-
{
|
|
1686
|
-
"name": "accessibleName",
|
|
1687
|
-
"visibility": "public",
|
|
1688
|
-
"type": "string",
|
|
1689
|
-
"description": "Sets the accessible aria name of the component.",
|
|
1690
|
-
"defaultValue": "\"\""
|
|
1691
|
-
},
|
|
1692
1752
|
{
|
|
1693
1753
|
"name": "draggable",
|
|
1694
1754
|
"visibility": "public",
|
|
@@ -1968,6 +2028,14 @@
|
|
|
1968
2028
|
"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.",
|
|
1969
2029
|
"defaultValue": "\"\""
|
|
1970
2030
|
},
|
|
2031
|
+
{
|
|
2032
|
+
"name": "accessibleRole",
|
|
2033
|
+
"visibility": "public",
|
|
2034
|
+
"since": "1.1.0",
|
|
2035
|
+
"type": "string",
|
|
2036
|
+
"description": "Defines the accessibility role of the component.",
|
|
2037
|
+
"defaultValue": "\"\""
|
|
2038
|
+
},
|
|
1971
2039
|
{
|
|
1972
2040
|
"name": "interactive",
|
|
1973
2041
|
"visibility": "public",
|
|
@@ -2055,7 +2123,7 @@
|
|
|
2055
2123
|
"visibility": "public",
|
|
2056
2124
|
"extends": "sap.ui.webcomponents.base.UI5Element",
|
|
2057
2125
|
"implements": [ "sap.ui.webcomponents.main.IInput" ],
|
|
2058
|
-
"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)",
|
|
2126
|
+
"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>[F4], [ALT]+[UP], or [ALT]+[DOWN] - Opens value help if available, same as clicking the value help icon. (Does not open suggestion list.)</li> <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)",
|
|
2059
2127
|
"constructor": { "visibility": "public" },
|
|
2060
2128
|
"properties": [
|
|
2061
2129
|
{
|
|
@@ -2398,6 +2466,13 @@
|
|
|
2398
2466
|
"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>",
|
|
2399
2467
|
"constructor": { "visibility": "public" },
|
|
2400
2468
|
"properties": [
|
|
2469
|
+
{
|
|
2470
|
+
"name": "accessibilityAttributes",
|
|
2471
|
+
"visibility": "public",
|
|
2472
|
+
"since": "1.1.0",
|
|
2473
|
+
"type": "object",
|
|
2474
|
+
"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>"
|
|
2475
|
+
},
|
|
2401
2476
|
{
|
|
2402
2477
|
"name": "accessibleNameRef",
|
|
2403
2478
|
"visibility": "public",
|
|
@@ -2470,7 +2545,7 @@
|
|
|
2470
2545
|
"static": true,
|
|
2471
2546
|
"visibility": "public",
|
|
2472
2547
|
"extends": "UI5Element",
|
|
2473
|
-
"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> 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> <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>)",
|
|
2548
|
+
"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>)",
|
|
2474
2549
|
"constructor": { "visibility": "public" },
|
|
2475
2550
|
"properties": [
|
|
2476
2551
|
{
|
|
@@ -2524,7 +2599,7 @@
|
|
|
2524
2599
|
"visibility": "public",
|
|
2525
2600
|
"since": "1.0.0-rc.13",
|
|
2526
2601
|
"type": "ListGrowingMode",
|
|
2527
|
-
"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>
|
|
2602
|
+
"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>.",
|
|
2528
2603
|
"defaultValue": "\"None\""
|
|
2529
2604
|
},
|
|
2530
2605
|
{
|
|
@@ -2581,6 +2656,7 @@
|
|
|
2581
2656
|
"events": [
|
|
2582
2657
|
{
|
|
2583
2658
|
"name": "item-click",
|
|
2659
|
+
"allowPreventDefault": "true",
|
|
2584
2660
|
"visibility": "public",
|
|
2585
2661
|
"parameters": [ { "name": "item", "type": "HTMLElement", "description": "The clicked item." } ],
|
|
2586
2662
|
"description": "Fired when an item is activated, unless the item's <code>type</code> property is set to <code>Inactive</code>."
|
|
@@ -2715,7 +2791,7 @@
|
|
|
2715
2791
|
"visibility": "public",
|
|
2716
2792
|
"since": "0.9.0",
|
|
2717
2793
|
"extends": "UI5Element",
|
|
2718
|
-
"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>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/MessageStrip\";</code>",
|
|
2794
|
+
"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>",
|
|
2719
2795
|
"constructor": { "visibility": "public" },
|
|
2720
2796
|
"properties": [
|
|
2721
2797
|
{
|
|
@@ -3089,7 +3165,7 @@
|
|
|
3089
3165
|
"static": true,
|
|
3090
3166
|
"visibility": "public",
|
|
3091
3167
|
"extends": "sap.ui.webcomponents.base.UI5Element",
|
|
3092
|
-
"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>",
|
|
3168
|
+
"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>",
|
|
3093
3169
|
"constructor": { "visibility": "public" },
|
|
3094
3170
|
"properties": [
|
|
3095
3171
|
{
|
|
@@ -3312,7 +3388,15 @@
|
|
|
3312
3388
|
"visibility": "public",
|
|
3313
3389
|
"since": "1.0.0-rc.15",
|
|
3314
3390
|
"type": "String",
|
|
3315
|
-
"description": "
|
|
3391
|
+
"description": "Defines the accessible name of the component.",
|
|
3392
|
+
"defaultValue": "\"\""
|
|
3393
|
+
},
|
|
3394
|
+
{
|
|
3395
|
+
"name": "accessibleNameRef",
|
|
3396
|
+
"visibility": "public",
|
|
3397
|
+
"since": "1.1.0",
|
|
3398
|
+
"type": "String",
|
|
3399
|
+
"description": "Defines the IDs of the elements that label the component.",
|
|
3316
3400
|
"defaultValue": "\"\""
|
|
3317
3401
|
},
|
|
3318
3402
|
{
|
|
@@ -3513,6 +3597,14 @@
|
|
|
3513
3597
|
"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>",
|
|
3514
3598
|
"constructor": { "visibility": "public" },
|
|
3515
3599
|
"properties": [
|
|
3600
|
+
{
|
|
3601
|
+
"name": "accessibleNameRef",
|
|
3602
|
+
"visibility": "public",
|
|
3603
|
+
"since": "1.1.0",
|
|
3604
|
+
"type": "String",
|
|
3605
|
+
"description": "Defines the IDs of the elements that label the component.",
|
|
3606
|
+
"defaultValue": "\"\""
|
|
3607
|
+
},
|
|
3516
3608
|
{
|
|
3517
3609
|
"name": "checked",
|
|
3518
3610
|
"visibility": "public",
|
|
@@ -3630,7 +3722,7 @@
|
|
|
3630
3722
|
"visibility": "public",
|
|
3631
3723
|
"since": "1.0.0-rc.8",
|
|
3632
3724
|
"extends": "UI5Element",
|
|
3633
|
-
"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>",
|
|
3725
|
+
"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>",
|
|
3634
3726
|
"constructor": { "visibility": "public" },
|
|
3635
3727
|
"properties": [
|
|
3636
3728
|
{
|
|
@@ -3738,6 +3830,13 @@
|
|
|
3738
3830
|
"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>",
|
|
3739
3831
|
"constructor": { "visibility": "public" },
|
|
3740
3832
|
"properties": [
|
|
3833
|
+
{
|
|
3834
|
+
"name": "accessibleName",
|
|
3835
|
+
"visibility": "public",
|
|
3836
|
+
"since": "1.0.3",
|
|
3837
|
+
"type": "String",
|
|
3838
|
+
"description": "Sets the accessible aria name of the component."
|
|
3839
|
+
},
|
|
3741
3840
|
{
|
|
3742
3841
|
"name": "selectedItem",
|
|
3743
3842
|
"readonly": "true",
|
|
@@ -4080,6 +4179,76 @@
|
|
|
4080
4179
|
}
|
|
4081
4180
|
]
|
|
4082
4181
|
},
|
|
4182
|
+
{
|
|
4183
|
+
"kind": "class",
|
|
4184
|
+
"name": "sap.ui.webcomponents.main.SplitButton",
|
|
4185
|
+
"basename": "SplitButton",
|
|
4186
|
+
"tagname": "ui5-split-button",
|
|
4187
|
+
"resource": "SplitButton.js",
|
|
4188
|
+
"module": "SplitButton",
|
|
4189
|
+
"static": true,
|
|
4190
|
+
"visibility": "public",
|
|
4191
|
+
"since": "1.1.0",
|
|
4192
|
+
"extends": "UI5Element",
|
|
4193
|
+
"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. <br><br> <b>Keyboard handing</b> <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>\n\n<h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/SplitButton.js\";</code>",
|
|
4194
|
+
"constructor": { "visibility": "public" },
|
|
4195
|
+
"properties": [
|
|
4196
|
+
{
|
|
4197
|
+
"name": "accessibleName",
|
|
4198
|
+
"visibility": "public",
|
|
4199
|
+
"type": "String",
|
|
4200
|
+
"description": "Sets the accessible aria name of the component."
|
|
4201
|
+
},
|
|
4202
|
+
{
|
|
4203
|
+
"name": "activeIcon",
|
|
4204
|
+
"visibility": "public",
|
|
4205
|
+
"type": "string",
|
|
4206
|
+
"description": "Defines the icon to be displayed in active state as graphical element within the component.",
|
|
4207
|
+
"defaultValue": "\"\""
|
|
4208
|
+
},
|
|
4209
|
+
{
|
|
4210
|
+
"name": "design",
|
|
4211
|
+
"visibility": "public",
|
|
4212
|
+
"type": "ButtonDesign",
|
|
4213
|
+
"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>",
|
|
4214
|
+
"defaultValue": "\"Default\""
|
|
4215
|
+
},
|
|
4216
|
+
{
|
|
4217
|
+
"name": "disabled",
|
|
4218
|
+
"visibility": "public",
|
|
4219
|
+
"type": "boolean",
|
|
4220
|
+
"description": "Defines whether the component is disabled. A disabled component can't be pressed or focused, and it is not in the tab chain.",
|
|
4221
|
+
"defaultValue": "false"
|
|
4222
|
+
},
|
|
4223
|
+
{
|
|
4224
|
+
"name": "icon",
|
|
4225
|
+
"visibility": "public",
|
|
4226
|
+
"type": "string",
|
|
4227
|
+
"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>.",
|
|
4228
|
+
"defaultValue": "\"\""
|
|
4229
|
+
}
|
|
4230
|
+
],
|
|
4231
|
+
"slots": [
|
|
4232
|
+
{
|
|
4233
|
+
"name": "default",
|
|
4234
|
+
"visibility": "public",
|
|
4235
|
+
"type": "Node[]",
|
|
4236
|
+
"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."
|
|
4237
|
+
}
|
|
4238
|
+
],
|
|
4239
|
+
"events": [
|
|
4240
|
+
{
|
|
4241
|
+
"name": "arrow-click",
|
|
4242
|
+
"visibility": "public",
|
|
4243
|
+
"description": "Fired when the user clicks on the arrow action."
|
|
4244
|
+
},
|
|
4245
|
+
{
|
|
4246
|
+
"name": "click",
|
|
4247
|
+
"visibility": "public",
|
|
4248
|
+
"description": "Fired when the user clicks on the default action."
|
|
4249
|
+
}
|
|
4250
|
+
]
|
|
4251
|
+
},
|
|
4083
4252
|
{
|
|
4084
4253
|
"kind": "class",
|
|
4085
4254
|
"name": "sap.ui.webcomponents.main.StandardListItem",
|
|
@@ -4391,6 +4560,14 @@
|
|
|
4391
4560
|
"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>",
|
|
4392
4561
|
"constructor": { "visibility": "public" },
|
|
4393
4562
|
"properties": [
|
|
4563
|
+
{
|
|
4564
|
+
"name": "accessibleNameRef",
|
|
4565
|
+
"visibility": "public",
|
|
4566
|
+
"since": "1.1.0",
|
|
4567
|
+
"type": "String",
|
|
4568
|
+
"description": "Receives id(or many ids) of the elements that label the component.",
|
|
4569
|
+
"defaultValue": "\"\""
|
|
4570
|
+
},
|
|
4394
4571
|
{
|
|
4395
4572
|
"name": "checked",
|
|
4396
4573
|
"visibility": "public",
|
|
@@ -4454,7 +4631,7 @@
|
|
|
4454
4631
|
"name": "additionalText",
|
|
4455
4632
|
"visibility": "public",
|
|
4456
4633
|
"type": "string",
|
|
4457
|
-
"description": "Represents the \"additionalText\" text, which is displayed in the tab
|
|
4634
|
+
"description": "Represents the \"additionalText\" text, which is displayed in the tab.",
|
|
4458
4635
|
"defaultValue": "\"\""
|
|
4459
4636
|
},
|
|
4460
4637
|
{
|
|
@@ -4521,7 +4698,7 @@
|
|
|
4521
4698
|
"static": true,
|
|
4522
4699
|
"visibility": "public",
|
|
4523
4700
|
"extends": "sap.ui.webcomponents.base.UI5Element",
|
|
4524
|
-
"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>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>)",
|
|
4701
|
+
"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>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>)",
|
|
4525
4702
|
"constructor": { "visibility": "public" },
|
|
4526
4703
|
"properties": [
|
|
4527
4704
|
{
|
|
@@ -4542,8 +4719,11 @@
|
|
|
4542
4719
|
"name": "showOverflow",
|
|
4543
4720
|
"visibility": "public",
|
|
4544
4721
|
"type": "boolean",
|
|
4545
|
-
"description": "Defines whether the overflow select list is displayed. <br><br> The overflow select list represents a list, where all
|
|
4546
|
-
"defaultValue": "false"
|
|
4722
|
+
"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.",
|
|
4723
|
+
"defaultValue": "false",
|
|
4724
|
+
"deprecated": {
|
|
4725
|
+
"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"
|
|
4726
|
+
}
|
|
4547
4727
|
},
|
|
4548
4728
|
{
|
|
4549
4729
|
"name": "tabLayout",
|
|
@@ -4551,6 +4731,14 @@
|
|
|
4551
4731
|
"type": "TabLayout",
|
|
4552
4732
|
"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>",
|
|
4553
4733
|
"defaultValue": "\"Standard\""
|
|
4734
|
+
},
|
|
4735
|
+
{
|
|
4736
|
+
"name": "tabsOverflowMode",
|
|
4737
|
+
"visibility": "public",
|
|
4738
|
+
"since": "1.1.0",
|
|
4739
|
+
"type": "TabsOverflowMode",
|
|
4740
|
+
"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>",
|
|
4741
|
+
"defaultValue": "\"End\""
|
|
4554
4742
|
}
|
|
4555
4743
|
],
|
|
4556
4744
|
"slots": [
|
|
@@ -4567,6 +4755,13 @@
|
|
|
4567
4755
|
"since": "1.0.0-rc.9",
|
|
4568
4756
|
"type": "sap.ui.webcomponents.main.IButton",
|
|
4569
4757
|
"description": "Defines the button which will open the overflow menu. If nothing is provided to this slot, the default button will be used."
|
|
4758
|
+
},
|
|
4759
|
+
{
|
|
4760
|
+
"name": "startOverflowButton",
|
|
4761
|
+
"visibility": "public",
|
|
4762
|
+
"since": "1.1.0",
|
|
4763
|
+
"type": "sap.ui.webcomponents.main.IButton",
|
|
4764
|
+
"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."
|
|
4570
4765
|
}
|
|
4571
4766
|
],
|
|
4572
4767
|
"events": [
|
|
@@ -4600,7 +4795,7 @@
|
|
|
4600
4795
|
"static": true,
|
|
4601
4796
|
"visibility": "public",
|
|
4602
4797
|
"extends": "sap.ui.webcomponents.base.UI5Element",
|
|
4603
|
-
"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>)",
|
|
4798
|
+
"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>\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>)",
|
|
4604
4799
|
"constructor": { "visibility": "public" },
|
|
4605
4800
|
"properties": [
|
|
4606
4801
|
{
|
|
@@ -4623,7 +4818,7 @@
|
|
|
4623
4818
|
"visibility": "public",
|
|
4624
4819
|
"since": "1.0.0-rc.12",
|
|
4625
4820
|
"type": "TableGrowingMode",
|
|
4626
|
-
"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>
|
|
4821
|
+
"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>.",
|
|
4627
4822
|
"defaultValue": "\"None\""
|
|
4628
4823
|
},
|
|
4629
4824
|
{
|
|
@@ -4669,7 +4864,7 @@
|
|
|
4669
4864
|
"name": "stickyColumnHeader",
|
|
4670
4865
|
"visibility": "public",
|
|
4671
4866
|
"type": "boolean",
|
|
4672
|
-
"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>
|
|
4867
|
+
"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>",
|
|
4673
4868
|
"defaultValue": "false"
|
|
4674
4869
|
}
|
|
4675
4870
|
],
|
|
@@ -5520,6 +5715,14 @@
|
|
|
5520
5715
|
"description": "If set, an icon will be displayed before the text, representing the tree item.",
|
|
5521
5716
|
"defaultValue": "\"\""
|
|
5522
5717
|
},
|
|
5718
|
+
{
|
|
5719
|
+
"name": "indeterminate",
|
|
5720
|
+
"visibility": "public",
|
|
5721
|
+
"since": "1.1.0",
|
|
5722
|
+
"type": "boolean",
|
|
5723
|
+
"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.",
|
|
5724
|
+
"defaultValue": "false"
|
|
5725
|
+
},
|
|
5523
5726
|
{
|
|
5524
5727
|
"name": "selected",
|
|
5525
5728
|
"visibility": "public",
|
|
@@ -6024,6 +6227,50 @@
|
|
|
6024
6227
|
],
|
|
6025
6228
|
"slots": []
|
|
6026
6229
|
},
|
|
6230
|
+
{
|
|
6231
|
+
"kind": "class",
|
|
6232
|
+
"name": "sap.ui.webcomponents.main.types.HasPopup",
|
|
6233
|
+
"basename": "HasPopup",
|
|
6234
|
+
"resource": "types/HasPopup.js",
|
|
6235
|
+
"module": "types/HasPopup",
|
|
6236
|
+
"static": true,
|
|
6237
|
+
"visibility": "public",
|
|
6238
|
+
"description": "Different types of HasPopup.",
|
|
6239
|
+
"constructor": { "visibility": "public" },
|
|
6240
|
+
"properties": [
|
|
6241
|
+
{
|
|
6242
|
+
"name": "Dialog",
|
|
6243
|
+
"visibility": "public",
|
|
6244
|
+
"type": "Dialog",
|
|
6245
|
+
"description": "Dialog popup type."
|
|
6246
|
+
},
|
|
6247
|
+
{
|
|
6248
|
+
"name": "Grid",
|
|
6249
|
+
"visibility": "public",
|
|
6250
|
+
"type": "Grid",
|
|
6251
|
+
"description": "Grid popup type."
|
|
6252
|
+
},
|
|
6253
|
+
{
|
|
6254
|
+
"name": "ListBox",
|
|
6255
|
+
"visibility": "public",
|
|
6256
|
+
"type": "ListBox",
|
|
6257
|
+
"description": "ListBox popup type."
|
|
6258
|
+
},
|
|
6259
|
+
{
|
|
6260
|
+
"name": "Menu",
|
|
6261
|
+
"visibility": "public",
|
|
6262
|
+
"type": "Menu",
|
|
6263
|
+
"description": "Menu popup type."
|
|
6264
|
+
},
|
|
6265
|
+
{
|
|
6266
|
+
"name": "Tree",
|
|
6267
|
+
"visibility": "public",
|
|
6268
|
+
"type": "Tree",
|
|
6269
|
+
"description": "Tree popup type."
|
|
6270
|
+
}
|
|
6271
|
+
],
|
|
6272
|
+
"slots": []
|
|
6273
|
+
},
|
|
6027
6274
|
{
|
|
6028
6275
|
"kind": "class",
|
|
6029
6276
|
"name": "sap.ui.webcomponents.main.types.InputType",
|
|
@@ -6614,6 +6861,32 @@
|
|
|
6614
6861
|
],
|
|
6615
6862
|
"slots": []
|
|
6616
6863
|
},
|
|
6864
|
+
{
|
|
6865
|
+
"kind": "class",
|
|
6866
|
+
"name": "sap.ui.webcomponents.main.types.TabsOverflowMode",
|
|
6867
|
+
"basename": "TabsOverflowMode",
|
|
6868
|
+
"resource": "types/TabsOverflowMode.js",
|
|
6869
|
+
"module": "types/TabsOverflowMode",
|
|
6870
|
+
"static": true,
|
|
6871
|
+
"visibility": "public",
|
|
6872
|
+
"description": "Different types of overflow modes.",
|
|
6873
|
+
"constructor": { "visibility": "public" },
|
|
6874
|
+
"properties": [
|
|
6875
|
+
{
|
|
6876
|
+
"name": "End",
|
|
6877
|
+
"visibility": "public",
|
|
6878
|
+
"type": "End",
|
|
6879
|
+
"description": "End type is used if there should be only one overflow with hidden the tabs at the end of the tab container."
|
|
6880
|
+
},
|
|
6881
|
+
{
|
|
6882
|
+
"name": "StartAndEnd",
|
|
6883
|
+
"visibility": "public",
|
|
6884
|
+
"type": "StartAndEnd",
|
|
6885
|
+
"description": "StartAndEnd type is used if there should be two overflows on both ends of the tab container."
|
|
6886
|
+
}
|
|
6887
|
+
],
|
|
6888
|
+
"slots": []
|
|
6889
|
+
},
|
|
6617
6890
|
{
|
|
6618
6891
|
"kind": "class",
|
|
6619
6892
|
"name": "sap.ui.webcomponents.main.types.TitleLevel",
|