@ui5/webcomponents 2.4.1-rc.0 → 2.5.0-rc.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 +38 -0
- package/cypress/specs/ColorPicker.cy.ts +27 -0
- package/cypress/specs/Form.cy.ts +491 -44
- package/cypress/specs/LitKeyFunction.cy.ts +23 -16
- package/cypress/specs/TableGrowing.cy.ts +358 -0
- package/cypress/specs/Tokenizer.cy.ts +114 -0
- package/cypress/specs/Toolbar.cy.ts +51 -0
- package/cypress/specs/Tree.cy.ts +29 -0
- package/cypress/specs/base/{AriaLabelHelper.cy.ts → AccessibilityTextsHelper.cy.ts} +37 -1
- package/cypress/specs/base/Events.cy.ts +1 -2
- package/cypress/support/commands.ts +1 -0
- package/dist/.tsbuildinfo +1 -1
- package/dist/Button.js +1 -1
- package/dist/Button.js.map +1 -1
- package/dist/Card.js +1 -1
- package/dist/Card.js.map +1 -1
- package/dist/CardHeader.d.ts +1 -1
- package/dist/CardHeader.js +1 -1
- package/dist/CardHeader.js.map +1 -1
- package/dist/Carousel.js +1 -1
- package/dist/Carousel.js.map +1 -1
- package/dist/CheckBox.js +1 -1
- package/dist/CheckBox.js.map +1 -1
- package/dist/ColorPicker.d.ts +9 -0
- package/dist/ColorPicker.js +14 -0
- package/dist/ColorPicker.js.map +1 -1
- package/dist/ComboBox.d.ts +0 -1
- package/dist/ComboBox.js +11 -13
- package/dist/ComboBox.js.map +1 -1
- package/dist/ComboBoxItem.d.ts +11 -5
- package/dist/ComboBoxItem.js +21 -8
- package/dist/ComboBoxItem.js.map +1 -1
- package/dist/ComboBoxItemGroup.d.ts +5 -20
- package/dist/ComboBoxItemGroup.js +9 -26
- package/dist/ComboBoxItemGroup.js.map +1 -1
- package/dist/DatePicker.js +1 -1
- package/dist/DatePicker.js.map +1 -1
- package/dist/Dialog.d.ts +4 -5
- package/dist/Dialog.js +4 -5
- package/dist/Dialog.js.map +1 -1
- package/dist/Form.d.ts +46 -2
- package/dist/Form.js +75 -1
- package/dist/Form.js.map +1 -1
- package/dist/FormGroup.js +4 -1
- package/dist/FormGroup.js.map +1 -1
- package/dist/Input.js +1 -1
- package/dist/Input.js.map +1 -1
- package/dist/Link.js +1 -1
- package/dist/Link.js.map +1 -1
- package/dist/List.d.ts +27 -1
- package/dist/List.js +29 -5
- package/dist/List.js.map +1 -1
- package/dist/MultiComboBox.d.ts +1 -4
- package/dist/MultiComboBox.js +46 -37
- package/dist/MultiComboBox.js.map +1 -1
- package/dist/MultiComboBoxItem.d.ts +5 -1
- package/dist/MultiComboBoxItem.js +34 -4
- package/dist/MultiComboBoxItem.js.map +1 -1
- package/dist/MultiComboBoxItemGroup.d.ts +5 -10
- package/dist/MultiComboBoxItemGroup.js +12 -9
- package/dist/MultiComboBoxItemGroup.js.map +1 -1
- package/dist/Popover.js +4 -3
- package/dist/Popover.js.map +1 -1
- package/dist/Popup.js +1 -1
- package/dist/Popup.js.map +1 -1
- package/dist/RadioButton.js +1 -1
- package/dist/RadioButton.js.map +1 -1
- package/dist/RatingIndicator.js +1 -1
- package/dist/RatingIndicator.js.map +1 -1
- package/dist/SegmentedButtonItem.js +1 -1
- package/dist/SegmentedButtonItem.js.map +1 -1
- package/dist/Select.js +1 -1
- package/dist/Select.js.map +1 -1
- package/dist/SliderBase.js +2 -2
- package/dist/SliderBase.js.map +1 -1
- package/dist/StepInput.js +1 -1
- package/dist/StepInput.js.map +1 -1
- package/dist/Switch.js +1 -1
- package/dist/Switch.js.map +1 -1
- package/dist/Table.js +1 -1
- package/dist/Table.js.map +1 -1
- package/dist/TableGrowing.d.ts +5 -0
- package/dist/TableGrowing.js +21 -12
- package/dist/TableGrowing.js.map +1 -1
- package/dist/TextArea.js +1 -1
- package/dist/TextArea.js.map +1 -1
- package/dist/TimePicker.js +1 -1
- package/dist/TimePicker.js.map +1 -1
- package/dist/Tokenizer.d.ts +23 -2
- package/dist/Tokenizer.js +72 -15
- package/dist/Tokenizer.js.map +1 -1
- package/dist/Toolbar.js +1 -1
- package/dist/Toolbar.js.map +1 -1
- package/dist/ToolbarSpacer.js +2 -2
- package/dist/ToolbarSpacer.js.map +1 -1
- package/dist/Tree.d.ts +14 -1
- package/dist/Tree.js +6 -4
- package/dist/Tree.js.map +1 -1
- package/dist/css/themes/Avatar.css +1 -1
- package/dist/css/themes/AvatarGroup.css +1 -1
- package/dist/css/themes/Bar.css +1 -1
- package/dist/css/themes/Breadcrumbs.css +1 -1
- package/dist/css/themes/BusyIndicator.css +1 -1
- package/dist/css/themes/Button.css +1 -1
- package/dist/css/themes/Calendar.css +1 -1
- package/dist/css/themes/CalendarHeader.css +1 -1
- package/dist/css/themes/CalendarLegend.css +1 -1
- package/dist/css/themes/CalendarLegendItem.css +1 -1
- package/dist/css/themes/Card.css +1 -1
- package/dist/css/themes/CardHeader.css +1 -1
- package/dist/css/themes/Carousel.css +1 -1
- package/dist/css/themes/CheckBox.css +1 -1
- package/dist/css/themes/ColorPalette.css +1 -1
- package/dist/css/themes/ColorPaletteItem.css +1 -1
- package/dist/css/themes/ColorPalettePopover.css +1 -1
- package/dist/css/themes/ColorPicker.css +1 -1
- package/dist/css/themes/ComboBox.css +1 -1
- package/dist/css/themes/ComboBoxItem.css +1 -0
- package/dist/css/themes/DatePicker.css +1 -1
- package/dist/css/themes/DateTimePickerPopover.css +1 -1
- package/dist/css/themes/DayPicker.css +1 -1
- package/dist/css/themes/Dialog.css +1 -1
- package/dist/css/themes/FileUploader.css +1 -1
- package/dist/css/themes/Form.css +1 -1
- package/dist/css/themes/FormItem.css +1 -1
- package/dist/css/themes/FormLabelSpan.css +1 -1
- package/dist/css/themes/GrowingButton.css +1 -1
- package/dist/css/themes/Icon.css +1 -1
- package/dist/css/themes/Input.css +1 -1
- package/dist/css/themes/InputIcon.css +1 -1
- package/dist/css/themes/InputSharedStyles.css +1 -1
- package/dist/css/themes/Link.css +1 -1
- package/dist/css/themes/List.css +1 -1
- package/dist/css/themes/ListItem.css +1 -1
- package/dist/css/themes/ListItemBase.css +1 -1
- package/dist/css/themes/ListItemCustom.css +1 -1
- package/dist/css/themes/ListItemGroup.css +1 -1
- package/dist/css/themes/ListItemGroupHeader.css +1 -1
- package/dist/css/themes/ListItemIcon.css +1 -1
- package/dist/css/themes/Menu.css +1 -1
- package/dist/css/themes/MenuItem.css +1 -1
- package/dist/css/themes/MessageStrip.css +1 -1
- package/dist/css/themes/MonthPicker.css +1 -1
- package/dist/css/themes/MultiComboBox.css +1 -1
- package/dist/css/themes/MultiComboBoxItem.css +1 -0
- package/dist/css/themes/MultiComboBoxPopover.css +1 -1
- package/dist/css/themes/MultiInput.css +1 -1
- package/dist/css/themes/NavigationMenu.css +1 -1
- package/dist/css/themes/NavigationMenuItem.css +1 -1
- package/dist/css/themes/OptionBase.css +1 -1
- package/dist/css/themes/Panel.css +1 -1
- package/dist/css/themes/Popover.css +1 -1
- package/dist/css/themes/PopupsCommon.css +1 -1
- package/dist/css/themes/ProgressIndicator.css +1 -1
- package/dist/css/themes/RadioButton.css +1 -1
- package/dist/css/themes/RangeSlider.css +1 -1
- package/dist/css/themes/RatingIndicator.css +1 -1
- package/dist/css/themes/ResponsivePopover.css +1 -1
- package/dist/css/themes/ResponsivePopoverCommon.css +1 -1
- package/dist/css/themes/SegmentedButton.css +1 -1
- package/dist/css/themes/SegmentedButtonItem.css +1 -1
- package/dist/css/themes/Select.css +1 -1
- package/dist/css/themes/SliderBase.css +1 -1
- package/dist/css/themes/SplitButton.css +1 -1
- package/dist/css/themes/StepInput.css +1 -1
- package/dist/css/themes/SuggestionItem.css +1 -1
- package/dist/css/themes/SuggestionItemCustom.css +1 -1
- package/dist/css/themes/Switch.css +1 -1
- package/dist/css/themes/TabContainer.css +1 -1
- package/dist/css/themes/TabInOverflow.css +1 -1
- package/dist/css/themes/TabInStrip.css +1 -1
- package/dist/css/themes/TabSemanticIcon.css +1 -1
- package/dist/css/themes/TabSeparatorInOverflow.css +1 -1
- package/dist/css/themes/Table.css +1 -1
- package/dist/css/themes/TableCellBase.css +1 -1
- package/dist/css/themes/TableHeaderRow.css +1 -1
- package/dist/css/themes/TableRow.css +1 -1
- package/dist/css/themes/TableRowBase.css +1 -1
- package/dist/css/themes/Tag.css +1 -1
- package/dist/css/themes/Text.css +1 -1
- package/dist/css/themes/TextArea.css +1 -1
- package/dist/css/themes/TimePicker.css +1 -1
- package/dist/css/themes/Toast.css +1 -1
- package/dist/css/themes/ToggleButton.css +1 -1
- package/dist/css/themes/Token.css +1 -1
- package/dist/css/themes/Tokenizer.css +1 -1
- package/dist/css/themes/TokenizerPopover.css +1 -1
- package/dist/css/themes/Toolbar.css +1 -1
- package/dist/css/themes/ToolbarPopover.css +1 -1
- package/dist/css/themes/TreeItem.css +1 -1
- package/dist/css/themes/ValueStateMessage.css +1 -1
- package/dist/css/themes/YearPicker.css +1 -1
- package/dist/css/themes/sap_fiori_3/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_fiori_3_dark/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_fiori_3_hcb/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_fiori_3_hcw/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon_dark/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon_dark_exp/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon_exp/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon_hcb/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon_hcb_exp/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon_hcw/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon_hcw_exp/parameters-bundle.css +1 -1
- package/dist/custom-elements-internal.json +503 -62
- package/dist/custom-elements.json +363 -43
- package/dist/generated/assets/i18n/messagebundle_en.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/themes/sap_fiori_3/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_fiori_3_dark/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_fiori_3_hcb/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_fiori_3_hcw/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_dark/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_dark_exp/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_exp/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_hcb/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_hcb_exp/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_hcw/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_hcw_exp/parameters-bundle.css.json +1 -1
- package/dist/generated/i18n/i18n-defaults.d.ts +2 -1
- package/dist/generated/i18n/i18n-defaults.js +2 -1
- package/dist/generated/i18n/i18n-defaults.js.map +1 -1
- package/dist/generated/templates/ColorPickerTemplate.lit.js +3 -1
- package/dist/generated/templates/ColorPickerTemplate.lit.js.map +1 -1
- package/dist/generated/templates/ComboBoxItemGroupTemplate.lit.d.ts +4 -0
- package/dist/generated/templates/ComboBoxItemGroupTemplate.lit.js +10 -0
- package/dist/generated/templates/ComboBoxItemGroupTemplate.lit.js.map +1 -0
- package/dist/generated/templates/ComboBoxItemTemplate.lit.d.ts +4 -0
- package/dist/generated/templates/ComboBoxItemTemplate.lit.js +6 -0
- package/dist/generated/templates/ComboBoxItemTemplate.lit.js.map +1 -0
- package/dist/generated/templates/ComboBoxPopoverTemplate.lit.js +6 -11
- package/dist/generated/templates/ComboBoxPopoverTemplate.lit.js.map +1 -1
- package/dist/generated/templates/ComboBoxTemplate.lit.js +6 -11
- package/dist/generated/templates/ComboBoxTemplate.lit.js.map +1 -1
- package/dist/generated/templates/FormTemplate.lit.js +3 -3
- package/dist/generated/templates/FormTemplate.lit.js.map +1 -1
- package/dist/generated/templates/ListTemplate.lit.js +1 -1
- package/dist/generated/templates/ListTemplate.lit.js.map +1 -1
- package/dist/generated/templates/MultiComboBoxItemGroupTemplate.lit.d.ts +4 -0
- package/dist/generated/templates/MultiComboBoxItemGroupTemplate.lit.js +10 -0
- package/dist/generated/templates/MultiComboBoxItemGroupTemplate.lit.js.map +1 -0
- package/dist/generated/templates/MultiComboBoxItemTemplate.lit.d.ts +4 -0
- package/dist/generated/templates/MultiComboBoxItemTemplate.lit.js +6 -0
- package/dist/generated/templates/MultiComboBoxItemTemplate.lit.js.map +1 -0
- package/dist/generated/templates/MultiComboBoxPopoverTemplate.lit.js +11 -19
- package/dist/generated/templates/MultiComboBoxPopoverTemplate.lit.js.map +1 -1
- package/dist/generated/templates/MultiComboBoxTemplate.lit.js +11 -19
- package/dist/generated/templates/MultiComboBoxTemplate.lit.js.map +1 -1
- package/dist/generated/templates/TokenizerTemplate.lit.js +7 -6
- package/dist/generated/templates/TokenizerTemplate.lit.js.map +1 -1
- package/dist/generated/templates/TreeTemplate.lit.js +1 -1
- package/dist/generated/templates/TreeTemplate.lit.js.map +1 -1
- package/dist/generated/themes/Avatar.css.js +1 -1
- package/dist/generated/themes/Avatar.css.js.map +1 -1
- package/dist/generated/themes/AvatarGroup.css.js +1 -1
- package/dist/generated/themes/AvatarGroup.css.js.map +1 -1
- package/dist/generated/themes/Bar.css.js +1 -1
- package/dist/generated/themes/Bar.css.js.map +1 -1
- package/dist/generated/themes/Breadcrumbs.css.js +1 -1
- package/dist/generated/themes/Breadcrumbs.css.js.map +1 -1
- package/dist/generated/themes/BusyIndicator.css.js +1 -1
- package/dist/generated/themes/BusyIndicator.css.js.map +1 -1
- package/dist/generated/themes/Button.css.js +1 -1
- package/dist/generated/themes/Button.css.js.map +1 -1
- package/dist/generated/themes/Calendar.css.js +1 -1
- package/dist/generated/themes/Calendar.css.js.map +1 -1
- package/dist/generated/themes/CalendarHeader.css.js +1 -1
- package/dist/generated/themes/CalendarHeader.css.js.map +1 -1
- package/dist/generated/themes/CalendarLegend.css.js +1 -1
- package/dist/generated/themes/CalendarLegend.css.js.map +1 -1
- package/dist/generated/themes/CalendarLegendItem.css.js +1 -1
- package/dist/generated/themes/CalendarLegendItem.css.js.map +1 -1
- package/dist/generated/themes/Card.css.js +1 -1
- package/dist/generated/themes/Card.css.js.map +1 -1
- package/dist/generated/themes/CardHeader.css.js +1 -1
- package/dist/generated/themes/CardHeader.css.js.map +1 -1
- package/dist/generated/themes/Carousel.css.js +1 -1
- package/dist/generated/themes/Carousel.css.js.map +1 -1
- package/dist/generated/themes/CheckBox.css.js +1 -1
- package/dist/generated/themes/CheckBox.css.js.map +1 -1
- package/dist/generated/themes/ColorPalette.css.js +1 -1
- package/dist/generated/themes/ColorPalette.css.js.map +1 -1
- package/dist/generated/themes/ColorPaletteItem.css.js +1 -1
- package/dist/generated/themes/ColorPaletteItem.css.js.map +1 -1
- package/dist/generated/themes/ColorPalettePopover.css.js +1 -1
- package/dist/generated/themes/ColorPalettePopover.css.js.map +1 -1
- package/dist/generated/themes/ColorPicker.css.js +1 -1
- package/dist/generated/themes/ColorPicker.css.js.map +1 -1
- package/dist/generated/themes/ComboBox.css.js +1 -1
- package/dist/generated/themes/ComboBox.css.js.map +1 -1
- package/dist/generated/themes/ComboBoxItem.css.d.ts +3 -0
- package/dist/generated/themes/ComboBoxItem.css.js +9 -0
- package/dist/generated/themes/ComboBoxItem.css.js.map +1 -0
- package/dist/generated/themes/DatePicker.css.js +1 -1
- package/dist/generated/themes/DatePicker.css.js.map +1 -1
- package/dist/generated/themes/DateTimePickerPopover.css.js +1 -1
- package/dist/generated/themes/DateTimePickerPopover.css.js.map +1 -1
- package/dist/generated/themes/DayPicker.css.js +1 -1
- package/dist/generated/themes/DayPicker.css.js.map +1 -1
- package/dist/generated/themes/Dialog.css.js +1 -1
- package/dist/generated/themes/Dialog.css.js.map +1 -1
- package/dist/generated/themes/FileUploader.css.js +1 -1
- package/dist/generated/themes/FileUploader.css.js.map +1 -1
- package/dist/generated/themes/Form.css.js +1 -1
- package/dist/generated/themes/Form.css.js.map +1 -1
- package/dist/generated/themes/FormItem.css.js +1 -1
- package/dist/generated/themes/FormItem.css.js.map +1 -1
- package/dist/generated/themes/FormLabelSpan.css.js +1 -1
- package/dist/generated/themes/FormLabelSpan.css.js.map +1 -1
- package/dist/generated/themes/GrowingButton.css.js +1 -1
- package/dist/generated/themes/GrowingButton.css.js.map +1 -1
- package/dist/generated/themes/Icon.css.js +1 -1
- package/dist/generated/themes/Icon.css.js.map +1 -1
- package/dist/generated/themes/Input.css.js +1 -1
- package/dist/generated/themes/Input.css.js.map +1 -1
- package/dist/generated/themes/InputIcon.css.js +1 -1
- package/dist/generated/themes/InputIcon.css.js.map +1 -1
- package/dist/generated/themes/InputSharedStyles.css.js +1 -1
- package/dist/generated/themes/InputSharedStyles.css.js.map +1 -1
- package/dist/generated/themes/Link.css.js +1 -1
- package/dist/generated/themes/Link.css.js.map +1 -1
- package/dist/generated/themes/List.css.js +1 -1
- package/dist/generated/themes/List.css.js.map +1 -1
- package/dist/generated/themes/ListItem.css.js +1 -1
- package/dist/generated/themes/ListItem.css.js.map +1 -1
- package/dist/generated/themes/ListItemBase.css.js +1 -1
- package/dist/generated/themes/ListItemBase.css.js.map +1 -1
- package/dist/generated/themes/ListItemCustom.css.js +1 -1
- package/dist/generated/themes/ListItemCustom.css.js.map +1 -1
- package/dist/generated/themes/ListItemGroup.css.js +1 -1
- package/dist/generated/themes/ListItemGroup.css.js.map +1 -1
- package/dist/generated/themes/ListItemGroupHeader.css.js +1 -1
- package/dist/generated/themes/ListItemGroupHeader.css.js.map +1 -1
- package/dist/generated/themes/ListItemIcon.css.js +1 -1
- package/dist/generated/themes/ListItemIcon.css.js.map +1 -1
- package/dist/generated/themes/Menu.css.js +1 -1
- package/dist/generated/themes/Menu.css.js.map +1 -1
- package/dist/generated/themes/MenuItem.css.js +1 -1
- package/dist/generated/themes/MenuItem.css.js.map +1 -1
- package/dist/generated/themes/MessageStrip.css.js +1 -1
- package/dist/generated/themes/MessageStrip.css.js.map +1 -1
- package/dist/generated/themes/MonthPicker.css.js +1 -1
- package/dist/generated/themes/MonthPicker.css.js.map +1 -1
- package/dist/generated/themes/MultiComboBox.css.js +1 -1
- package/dist/generated/themes/MultiComboBox.css.js.map +1 -1
- package/dist/generated/themes/MultiComboBoxItem.css.d.ts +3 -0
- package/dist/generated/themes/MultiComboBoxItem.css.js +9 -0
- package/dist/generated/themes/MultiComboBoxItem.css.js.map +1 -0
- package/dist/generated/themes/MultiComboBoxPopover.css.js +1 -1
- package/dist/generated/themes/MultiComboBoxPopover.css.js.map +1 -1
- package/dist/generated/themes/MultiInput.css.js +1 -1
- package/dist/generated/themes/MultiInput.css.js.map +1 -1
- package/dist/generated/themes/NavigationMenu.css.js +1 -1
- package/dist/generated/themes/NavigationMenu.css.js.map +1 -1
- package/dist/generated/themes/NavigationMenuItem.css.js +1 -1
- package/dist/generated/themes/NavigationMenuItem.css.js.map +1 -1
- package/dist/generated/themes/OptionBase.css.js +1 -1
- package/dist/generated/themes/OptionBase.css.js.map +1 -1
- package/dist/generated/themes/Panel.css.js +1 -1
- package/dist/generated/themes/Panel.css.js.map +1 -1
- package/dist/generated/themes/Popover.css.js +1 -1
- package/dist/generated/themes/Popover.css.js.map +1 -1
- package/dist/generated/themes/PopupsCommon.css.js +1 -1
- package/dist/generated/themes/PopupsCommon.css.js.map +1 -1
- package/dist/generated/themes/ProgressIndicator.css.js +1 -1
- package/dist/generated/themes/ProgressIndicator.css.js.map +1 -1
- package/dist/generated/themes/RadioButton.css.js +1 -1
- package/dist/generated/themes/RadioButton.css.js.map +1 -1
- package/dist/generated/themes/RangeSlider.css.js +1 -1
- package/dist/generated/themes/RangeSlider.css.js.map +1 -1
- package/dist/generated/themes/RatingIndicator.css.js +1 -1
- package/dist/generated/themes/RatingIndicator.css.js.map +1 -1
- package/dist/generated/themes/ResponsivePopover.css.js +1 -1
- package/dist/generated/themes/ResponsivePopover.css.js.map +1 -1
- package/dist/generated/themes/ResponsivePopoverCommon.css.js +1 -1
- package/dist/generated/themes/ResponsivePopoverCommon.css.js.map +1 -1
- package/dist/generated/themes/SegmentedButton.css.js +1 -1
- package/dist/generated/themes/SegmentedButton.css.js.map +1 -1
- package/dist/generated/themes/SegmentedButtonItem.css.js +1 -1
- package/dist/generated/themes/SegmentedButtonItem.css.js.map +1 -1
- package/dist/generated/themes/Select.css.js +1 -1
- package/dist/generated/themes/Select.css.js.map +1 -1
- package/dist/generated/themes/SliderBase.css.js +1 -1
- package/dist/generated/themes/SliderBase.css.js.map +1 -1
- package/dist/generated/themes/SplitButton.css.js +1 -1
- package/dist/generated/themes/SplitButton.css.js.map +1 -1
- package/dist/generated/themes/StepInput.css.js +1 -1
- package/dist/generated/themes/StepInput.css.js.map +1 -1
- package/dist/generated/themes/SuggestionItem.css.js +1 -1
- package/dist/generated/themes/SuggestionItem.css.js.map +1 -1
- package/dist/generated/themes/SuggestionItemCustom.css.js +1 -1
- package/dist/generated/themes/SuggestionItemCustom.css.js.map +1 -1
- package/dist/generated/themes/Switch.css.js +1 -1
- package/dist/generated/themes/Switch.css.js.map +1 -1
- package/dist/generated/themes/TabContainer.css.js +1 -1
- package/dist/generated/themes/TabContainer.css.js.map +1 -1
- package/dist/generated/themes/TabInOverflow.css.js +1 -1
- package/dist/generated/themes/TabInOverflow.css.js.map +1 -1
- package/dist/generated/themes/TabInStrip.css.js +1 -1
- package/dist/generated/themes/TabInStrip.css.js.map +1 -1
- package/dist/generated/themes/TabSemanticIcon.css.js +1 -1
- package/dist/generated/themes/TabSemanticIcon.css.js.map +1 -1
- package/dist/generated/themes/TabSeparatorInOverflow.css.js +1 -1
- package/dist/generated/themes/TabSeparatorInOverflow.css.js.map +1 -1
- package/dist/generated/themes/Table.css.js +1 -1
- package/dist/generated/themes/Table.css.js.map +1 -1
- package/dist/generated/themes/TableCellBase.css.js +1 -1
- package/dist/generated/themes/TableCellBase.css.js.map +1 -1
- package/dist/generated/themes/TableHeaderRow.css.js +1 -1
- package/dist/generated/themes/TableHeaderRow.css.js.map +1 -1
- package/dist/generated/themes/TableRow.css.js +1 -1
- package/dist/generated/themes/TableRow.css.js.map +1 -1
- package/dist/generated/themes/TableRowBase.css.js +1 -1
- package/dist/generated/themes/TableRowBase.css.js.map +1 -1
- package/dist/generated/themes/Tag.css.js +1 -1
- package/dist/generated/themes/Tag.css.js.map +1 -1
- package/dist/generated/themes/Text.css.js +1 -1
- package/dist/generated/themes/Text.css.js.map +1 -1
- package/dist/generated/themes/TextArea.css.js +1 -1
- package/dist/generated/themes/TextArea.css.js.map +1 -1
- package/dist/generated/themes/TimePicker.css.js +1 -1
- package/dist/generated/themes/TimePicker.css.js.map +1 -1
- package/dist/generated/themes/Toast.css.js +1 -1
- package/dist/generated/themes/Toast.css.js.map +1 -1
- package/dist/generated/themes/ToggleButton.css.js +1 -1
- package/dist/generated/themes/ToggleButton.css.js.map +1 -1
- package/dist/generated/themes/Token.css.js +1 -1
- package/dist/generated/themes/Token.css.js.map +1 -1
- package/dist/generated/themes/Tokenizer.css.js +1 -1
- package/dist/generated/themes/Tokenizer.css.js.map +1 -1
- package/dist/generated/themes/TokenizerPopover.css.js +1 -1
- package/dist/generated/themes/TokenizerPopover.css.js.map +1 -1
- package/dist/generated/themes/Toolbar.css.js +1 -1
- package/dist/generated/themes/Toolbar.css.js.map +1 -1
- package/dist/generated/themes/ToolbarPopover.css.js +1 -1
- package/dist/generated/themes/ToolbarPopover.css.js.map +1 -1
- package/dist/generated/themes/TreeItem.css.js +1 -1
- package/dist/generated/themes/TreeItem.css.js.map +1 -1
- package/dist/generated/themes/ValueStateMessage.css.js +1 -1
- package/dist/generated/themes/ValueStateMessage.css.js.map +1 -1
- package/dist/generated/themes/YearPicker.css.js +1 -1
- package/dist/generated/themes/YearPicker.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_dark_exp/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon_dark_exp/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_exp/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon_exp/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_hcb_exp/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon_hcb_exp/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_hcw_exp/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon_hcw_exp/parameters-bundle.css.js.map +1 -1
- package/dist/types/ColorPickerDisplayMode.d.ts +17 -0
- package/dist/types/ColorPickerDisplayMode.js +19 -0
- package/dist/types/ColorPickerDisplayMode.js.map +1 -0
- package/dist/vscode.html-custom-data.json +59 -9
- package/dist/web-types.json +158 -19
- package/package.json +10 -10
- package/src/ColorPicker.hbs +60 -56
- package/src/ComboBoxItem.hbs +18 -0
- package/src/ComboBoxItemGroup.hbs +9 -0
- package/src/ComboBoxPopover.hbs +2 -31
- package/src/Form.hbs +3 -3
- package/src/List.hbs +1 -0
- package/src/ListItemGroup.hbs +11 -4
- package/src/MultiComboBox.hbs +10 -12
- package/src/MultiComboBoxItem.hbs +19 -0
- package/src/MultiComboBoxItemGroup.hbs +9 -0
- package/src/MultiComboBoxPopover.hbs +5 -36
- package/src/Tokenizer.hbs +28 -17
- package/src/Tree.hbs +4 -1
- package/src/i18n/messagebundle.properties +3 -0
- package/src/i18n/messagebundle_en.properties +2 -0
- package/src/i18n/messagebundle_en_US_sappsd.properties +2 -0
- package/src/i18n/messagebundle_en_US_saprigi.properties +2 -0
- package/src/themes/ComboBoxItem.css +14 -0
- package/src/themes/Dialog.css +1 -0
- package/src/themes/FormItem.css +31 -1
- package/src/themes/MultiComboBoxItem.css +19 -0
- package/src/themes/MultiComboBoxPopover.css +5 -1
- package/src/themes/Table.css +1 -4
- package/src/themes/Tokenizer.css +45 -0
|
@@ -533,7 +533,7 @@
|
|
|
533
533
|
},
|
|
534
534
|
{
|
|
535
535
|
"name": "interactive",
|
|
536
|
-
"description": "Defines if the component would be interactive,\ne.g gets hover effect
|
|
536
|
+
"description": "Defines if the component would be interactive,\ne.g gets hover effect and `click` event is fired, when pressed.",
|
|
537
537
|
"values": []
|
|
538
538
|
}
|
|
539
539
|
],
|
|
@@ -760,6 +760,11 @@
|
|
|
760
760
|
"name": "name",
|
|
761
761
|
"description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
|
|
762
762
|
"values": []
|
|
763
|
+
},
|
|
764
|
+
{
|
|
765
|
+
"name": "display-mode",
|
|
766
|
+
"description": "Defines the display mode of the component.",
|
|
767
|
+
"values": [{ "name": "Default" }, { "name": "Simplified" }]
|
|
763
768
|
}
|
|
764
769
|
],
|
|
765
770
|
"references": []
|
|
@@ -866,11 +871,16 @@
|
|
|
866
871
|
},
|
|
867
872
|
{
|
|
868
873
|
"name": "ui5-cb-item-group",
|
|
869
|
-
"description": "The `ui5-cb-group-item` is type of suggestion item,\nthat can be used to split the `ui5-combobox` suggestions into groups.\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-cb-item-group</code>.",
|
|
874
|
+
"description": "The `ui5-cb-group-item` is type of suggestion item,\nthat can be used to split the `ui5-combobox` suggestions into groups.\n\n\n---\n\n\n\n\n### **Events:**\n - **move-over** - Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n- **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-cb-item-group</code>.",
|
|
870
875
|
"attributes": [
|
|
871
876
|
{
|
|
872
877
|
"name": "header-text",
|
|
873
|
-
"description": "Defines the text of the
|
|
878
|
+
"description": "Defines the header text of the <code>ui5-li-group</code>.",
|
|
879
|
+
"values": []
|
|
880
|
+
},
|
|
881
|
+
{
|
|
882
|
+
"name": "header-accessible-name",
|
|
883
|
+
"description": "Defines the accessible name of the header.",
|
|
874
884
|
"values": []
|
|
875
885
|
}
|
|
876
886
|
],
|
|
@@ -1312,7 +1322,7 @@
|
|
|
1312
1322
|
},
|
|
1313
1323
|
{
|
|
1314
1324
|
"name": "ui5-dialog",
|
|
1315
|
-
"description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the
|
|
1325
|
+
"description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **header** - Defines the header HTML Element.\n\n**Note:** When a `ui5-bar` is used in the header, you should remove the default dialog's paddings.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n- **footer** - Defines the footer HTML Element.\n\n**Note:** When a `ui5-bar` is used in the footer, you should remove the default dialog's paddings.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
|
|
1316
1326
|
"attributes": [
|
|
1317
1327
|
{
|
|
1318
1328
|
"name": "header-text",
|
|
@@ -1321,7 +1331,7 @@
|
|
|
1321
1331
|
},
|
|
1322
1332
|
{
|
|
1323
1333
|
"name": "stretch",
|
|
1324
|
-
"description": "Determines
|
|
1334
|
+
"description": "Determines if the dialog will be stretched to full screen on mobile. On desktop,\nthe dialog will be stretched to approximately 90% of the viewport.\n\n**Note:** For better usability of the component it is recommended to set this property to \"true\" when the dialog is opened on phone.",
|
|
1325
1335
|
"values": []
|
|
1326
1336
|
},
|
|
1327
1337
|
{
|
|
@@ -1452,7 +1462,7 @@
|
|
|
1452
1462
|
},
|
|
1453
1463
|
{
|
|
1454
1464
|
"name": "ui5-form",
|
|
1455
|
-
"description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (< 600px) – 1 column is recommended (default: 1)\n- **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)\n- **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (> 1439px) – up to 6 columns are recommended (default: 3)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/Form.js\";\n- import @ui5/webcomponents/dist/FormGroup.js\";\n- import @ui5/webcomponents/dist/FormItem.js\";\n\n\n---\n\n\n\n\n### **Slots:**\n - **header** - Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored.\n- **default** - Defines the component content - FormGroups or FormItems.\n\n**Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\nEither use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.\n\n### **CSS Parts:**\n - **header** - Used to style the wrapper of the header.\n- **layout** - Used to style the element defining the form column layout.\n- **column** - Used to style a single column of the form column layout.",
|
|
1465
|
+
"description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (< 600px) – 1 column is recommended (default: 1)\n- **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)\n- **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (> 1439px) – up to 6 columns are recommended (default: 3)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### Navigation flow\n\nThe Form component supports two layout options for keyboard navigation:\n\n#### Simple form\n\nIn this \"simple form\" layout, each `ui5-form-item` acts as a standalone group\nwith one item, so focus moves horizontally across the grid from one `ui5-form-item` to the next.\nThis layout is ideal for simpler forms and supports custom arrangements, e.g.,\n\n```\n| 1 | 2 |\n| 3 |\n| 4 | 5 |\n```\n\n#### Complex form\n\nIn this layout, items are grouped into `ui5-form-group` elements, allowing more complex configurations:\n\n- **Single-Column Group**: Focus moves vertically down from one item to the next.\n ```\n | 1 |\n | 2 |\n | 3 |\n ```\n\n- **Multi-Column Group**: Focus moves horizontally within each row, advancing to the next row after completing the current one.\n ```\n | 1 | 4 |\n | 2 | 5 |\n | 3 | 6 |\n ```\n\n### Keyboard Handling\n\n- [Tab] - Moves the focus to the next interactive element within the Form/FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [Tab] - Moves the focus to the previous interactive element within the Form/FormGroup (if available) or to the previous element in the tab chain outside the Form\n- [F6] - Moves the focus to the first interactive element of the next FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [F6] - Moves the focus to the first interactive element of the previous FormGroup (if available) or to the previous element in the tab chain outside the Form\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/Form.js\";\n- import @ui5/webcomponents/dist/FormGroup.js\";\n- import @ui5/webcomponents/dist/FormItem.js\";\n\n\n---\n\n\n\n\n### **Slots:**\n - **header** - Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored.\n- **default** - Defines the component content - FormGroups or FormItems.\n\n**Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\nEither use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.\n\n### **CSS Parts:**\n - **header** - Used to style the wrapper of the header.\n- **layout** - Used to style the element defining the form column layout.\n- **column** - Used to style a single column of the form column layout.",
|
|
1456
1466
|
"attributes": [
|
|
1457
1467
|
{
|
|
1458
1468
|
"name": "layout",
|
|
@@ -1818,7 +1828,17 @@
|
|
|
1818
1828
|
},
|
|
1819
1829
|
{
|
|
1820
1830
|
"name": "accessible-name-ref",
|
|
1821
|
-
"description": "Defines the IDs of the elements that label the
|
|
1831
|
+
"description": "Defines the IDs of the elements that label the component.",
|
|
1832
|
+
"values": []
|
|
1833
|
+
},
|
|
1834
|
+
{
|
|
1835
|
+
"name": "accessible-description",
|
|
1836
|
+
"description": "Defines the accessible description of the component.",
|
|
1837
|
+
"values": []
|
|
1838
|
+
},
|
|
1839
|
+
{
|
|
1840
|
+
"name": "accessible-description-ref",
|
|
1841
|
+
"description": "Defines the IDs of the elements that describe the component.",
|
|
1822
1842
|
"values": []
|
|
1823
1843
|
},
|
|
1824
1844
|
{
|
|
@@ -2329,11 +2349,16 @@
|
|
|
2329
2349
|
},
|
|
2330
2350
|
{
|
|
2331
2351
|
"name": "ui5-mcb-item-group",
|
|
2332
|
-
"description": "The `ui5-mcb-item-group` is type of suggestion item,\nthat can be used to split the `ui5-multi-combobox` suggestions into groups.\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-mcb-item-group</code>.",
|
|
2352
|
+
"description": "The `ui5-mcb-item-group` is type of suggestion item,\nthat can be used to split the `ui5-multi-combobox` suggestions into groups.\n\n\n---\n\n\n\n\n### **Events:**\n - **move-over** - Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n- **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-mcb-item-group</code>.",
|
|
2333
2353
|
"attributes": [
|
|
2334
2354
|
{
|
|
2335
2355
|
"name": "header-text",
|
|
2336
|
-
"description": "Defines the text of the
|
|
2356
|
+
"description": "Defines the header text of the <code>ui5-li-group</code>.",
|
|
2357
|
+
"values": []
|
|
2358
|
+
},
|
|
2359
|
+
{
|
|
2360
|
+
"name": "header-accessible-name",
|
|
2361
|
+
"description": "Defines the accessible name of the header.",
|
|
2337
2362
|
"values": []
|
|
2338
2363
|
}
|
|
2339
2364
|
],
|
|
@@ -3702,6 +3727,11 @@
|
|
|
3702
3727
|
"name": "growing-sub-text",
|
|
3703
3728
|
"description": "Defines the text that will be displayed below the `growingText` inside the growing button.\nHas no effect when type is set to Scroll.",
|
|
3704
3729
|
"values": []
|
|
3730
|
+
},
|
|
3731
|
+
{
|
|
3732
|
+
"name": "disabled",
|
|
3733
|
+
"description": "Disables the growing feature.",
|
|
3734
|
+
"values": []
|
|
3705
3735
|
}
|
|
3706
3736
|
],
|
|
3707
3737
|
"references": []
|
|
@@ -4195,6 +4225,16 @@
|
|
|
4195
4225
|
"description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
|
|
4196
4226
|
"values": []
|
|
4197
4227
|
},
|
|
4228
|
+
{
|
|
4229
|
+
"name": "multi-line",
|
|
4230
|
+
"description": "Defines whether tokens are displayed on multiple lines.\n\n**Note:** The `multiLine` property is in an experimental state and is a subject to change.",
|
|
4231
|
+
"values": []
|
|
4232
|
+
},
|
|
4233
|
+
{
|
|
4234
|
+
"name": "show-clear-all",
|
|
4235
|
+
"description": "Defines whether \"Clear All\" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.\n\n**Note:** The `showClearAll` property is in an experimental state and is a subject to change.",
|
|
4236
|
+
"values": []
|
|
4237
|
+
},
|
|
4198
4238
|
{
|
|
4199
4239
|
"name": "disabled",
|
|
4200
4240
|
"description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.",
|
|
@@ -4487,6 +4527,16 @@
|
|
|
4487
4527
|
"name": "accessible-name-ref",
|
|
4488
4528
|
"description": "Defines the IDs of the elements that label the component.",
|
|
4489
4529
|
"values": []
|
|
4530
|
+
},
|
|
4531
|
+
{
|
|
4532
|
+
"name": "accessible-description",
|
|
4533
|
+
"description": "Defines the accessible description of the component.",
|
|
4534
|
+
"values": []
|
|
4535
|
+
},
|
|
4536
|
+
{
|
|
4537
|
+
"name": "accessible-description-ref",
|
|
4538
|
+
"description": "Defines the IDs of the elements that describe the component.",
|
|
4539
|
+
"values": []
|
|
4490
4540
|
}
|
|
4491
4541
|
],
|
|
4492
4542
|
"references": []
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@ui5/webcomponents",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.5.0-rc.1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -976,7 +976,7 @@
|
|
|
976
976
|
},
|
|
977
977
|
{
|
|
978
978
|
"name": "interactive",
|
|
979
|
-
"description": "Defines if the component would be interactive,\ne.g gets hover effect
|
|
979
|
+
"description": "Defines if the component would be interactive,\ne.g gets hover effect and `click` event is fired, when pressed.",
|
|
980
980
|
"value": { "type": "boolean", "default": "false" }
|
|
981
981
|
}
|
|
982
982
|
],
|
|
@@ -1015,7 +1015,7 @@
|
|
|
1015
1015
|
},
|
|
1016
1016
|
{
|
|
1017
1017
|
"name": "interactive",
|
|
1018
|
-
"description": "Defines if the component would be interactive,\ne.g gets hover effect
|
|
1018
|
+
"description": "Defines if the component would be interactive,\ne.g gets hover effect and `click` event is fired, when pressed.",
|
|
1019
1019
|
"value": { "type": "boolean" }
|
|
1020
1020
|
}
|
|
1021
1021
|
],
|
|
@@ -1523,6 +1523,14 @@
|
|
|
1523
1523
|
"name": "name",
|
|
1524
1524
|
"description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
|
|
1525
1525
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
1526
|
+
},
|
|
1527
|
+
{
|
|
1528
|
+
"name": "display-mode",
|
|
1529
|
+
"description": "Defines the display mode of the component.",
|
|
1530
|
+
"value": {
|
|
1531
|
+
"type": "\"Default\" | \"Simplified\"",
|
|
1532
|
+
"default": "\"Default\""
|
|
1533
|
+
}
|
|
1526
1534
|
}
|
|
1527
1535
|
],
|
|
1528
1536
|
"events": [
|
|
@@ -1542,6 +1550,11 @@
|
|
|
1542
1550
|
"name": "name",
|
|
1543
1551
|
"description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
|
|
1544
1552
|
"value": { "type": "string | undefined" }
|
|
1553
|
+
},
|
|
1554
|
+
{
|
|
1555
|
+
"name": "display-mode",
|
|
1556
|
+
"description": "Defines the display mode of the component.",
|
|
1557
|
+
"value": { "type": "\"Default\" | \"Simplified\"" }
|
|
1545
1558
|
}
|
|
1546
1559
|
],
|
|
1547
1560
|
"events": [
|
|
@@ -1780,12 +1793,17 @@
|
|
|
1780
1793
|
},
|
|
1781
1794
|
{
|
|
1782
1795
|
"name": "ui5-cb-item-group",
|
|
1783
|
-
"description": "The `ui5-cb-group-item` is type of suggestion item,\nthat can be used to split the `ui5-combobox` suggestions into groups.\n---\n\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-cb-item-group</code>.",
|
|
1796
|
+
"description": "The `ui5-cb-group-item` is type of suggestion item,\nthat can be used to split the `ui5-combobox` suggestions into groups.\n---\n\n\n### **Events:**\n - **move-over** - Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n- **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-cb-item-group</code>.",
|
|
1784
1797
|
"doc-url": "",
|
|
1785
1798
|
"attributes": [
|
|
1786
1799
|
{
|
|
1787
1800
|
"name": "header-text",
|
|
1788
|
-
"description": "Defines the text of the
|
|
1801
|
+
"description": "Defines the header text of the <code>ui5-li-group</code>.",
|
|
1802
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
1803
|
+
},
|
|
1804
|
+
{
|
|
1805
|
+
"name": "header-accessible-name",
|
|
1806
|
+
"description": "Defines the accessible name of the header.",
|
|
1789
1807
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
1790
1808
|
}
|
|
1791
1809
|
],
|
|
@@ -1795,16 +1813,39 @@
|
|
|
1795
1813
|
"description": "Defines the items of the <code>ui5-cb-item-group</code>."
|
|
1796
1814
|
}
|
|
1797
1815
|
],
|
|
1798
|
-
"events": [
|
|
1816
|
+
"events": [
|
|
1817
|
+
{
|
|
1818
|
+
"name": "move-over",
|
|
1819
|
+
"description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`."
|
|
1820
|
+
},
|
|
1821
|
+
{
|
|
1822
|
+
"name": "move",
|
|
1823
|
+
"description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action."
|
|
1824
|
+
}
|
|
1825
|
+
],
|
|
1799
1826
|
"js": {
|
|
1800
1827
|
"properties": [
|
|
1801
1828
|
{
|
|
1802
1829
|
"name": "header-text",
|
|
1803
|
-
"description": "Defines the text of the
|
|
1830
|
+
"description": "Defines the header text of the <code>ui5-li-group</code>.",
|
|
1831
|
+
"value": { "type": "string | undefined" }
|
|
1832
|
+
},
|
|
1833
|
+
{
|
|
1834
|
+
"name": "header-accessible-name",
|
|
1835
|
+
"description": "Defines the accessible name of the header.",
|
|
1804
1836
|
"value": { "type": "string | undefined" }
|
|
1805
1837
|
}
|
|
1806
1838
|
],
|
|
1807
|
-
"events": [
|
|
1839
|
+
"events": [
|
|
1840
|
+
{
|
|
1841
|
+
"name": "move-over",
|
|
1842
|
+
"description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`."
|
|
1843
|
+
},
|
|
1844
|
+
{
|
|
1845
|
+
"name": "move",
|
|
1846
|
+
"description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action."
|
|
1847
|
+
}
|
|
1848
|
+
]
|
|
1808
1849
|
}
|
|
1809
1850
|
},
|
|
1810
1851
|
{
|
|
@@ -2620,7 +2661,7 @@
|
|
|
2620
2661
|
},
|
|
2621
2662
|
{
|
|
2622
2663
|
"name": "ui5-dialog",
|
|
2623
|
-
"description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the
|
|
2664
|
+
"description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **header** - Defines the header HTML Element.\n\n**Note:** When a `ui5-bar` is used in the header, you should remove the default dialog's paddings.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n- **footer** - Defines the footer HTML Element.\n\n**Note:** When a `ui5-bar` is used in the footer, you should remove the default dialog's paddings.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
|
|
2624
2665
|
"doc-url": "",
|
|
2625
2666
|
"attributes": [
|
|
2626
2667
|
{
|
|
@@ -2630,7 +2671,7 @@
|
|
|
2630
2671
|
},
|
|
2631
2672
|
{
|
|
2632
2673
|
"name": "stretch",
|
|
2633
|
-
"description": "Determines
|
|
2674
|
+
"description": "Determines if the dialog will be stretched to full screen on mobile. On desktop,\nthe dialog will be stretched to approximately 90% of the viewport.\n\n**Note:** For better usability of the component it is recommended to set this property to \"true\" when the dialog is opened on phone.",
|
|
2634
2675
|
"value": { "type": "boolean", "default": "false" }
|
|
2635
2676
|
},
|
|
2636
2677
|
{
|
|
@@ -2727,7 +2768,7 @@
|
|
|
2727
2768
|
},
|
|
2728
2769
|
{
|
|
2729
2770
|
"name": "stretch",
|
|
2730
|
-
"description": "Determines
|
|
2771
|
+
"description": "Determines if the dialog will be stretched to full screen on mobile. On desktop,\nthe dialog will be stretched to approximately 90% of the viewport.\n\n**Note:** For better usability of the component it is recommended to set this property to \"true\" when the dialog is opened on phone.",
|
|
2731
2772
|
"value": { "type": "boolean" }
|
|
2732
2773
|
},
|
|
2733
2774
|
{
|
|
@@ -2951,7 +2992,7 @@
|
|
|
2951
2992
|
},
|
|
2952
2993
|
{
|
|
2953
2994
|
"name": "ui5-form",
|
|
2954
|
-
"description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (< 600px) – 1 column is recommended (default: 1)\n- **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)\n- **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (> 1439px) – up to 6 columns are recommended (default: 3)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/Form.js\";\n- import @ui5/webcomponents/dist/FormGroup.js\";\n- import @ui5/webcomponents/dist/FormItem.js\";\n---\n\n\n### **Slots:**\n - **header** - Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored.\n- **default** - Defines the component content - FormGroups or FormItems.\n\n**Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\nEither use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.\n\n### **CSS Parts:**\n - **header** - Used to style the wrapper of the header.\n- **layout** - Used to style the element defining the form column layout.\n- **column** - Used to style a single column of the form column layout.",
|
|
2995
|
+
"description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (< 600px) – 1 column is recommended (default: 1)\n- **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)\n- **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (> 1439px) – up to 6 columns are recommended (default: 3)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### Navigation flow\n\nThe Form component supports two layout options for keyboard navigation:\n\n#### Simple form\n\nIn this \"simple form\" layout, each `ui5-form-item` acts as a standalone group\nwith one item, so focus moves horizontally across the grid from one `ui5-form-item` to the next.\nThis layout is ideal for simpler forms and supports custom arrangements, e.g.,\n\n```\n| 1 | 2 |\n| 3 |\n| 4 | 5 |\n```\n\n#### Complex form\n\nIn this layout, items are grouped into `ui5-form-group` elements, allowing more complex configurations:\n\n- **Single-Column Group**: Focus moves vertically down from one item to the next.\n ```\n | 1 |\n | 2 |\n | 3 |\n ```\n\n- **Multi-Column Group**: Focus moves horizontally within each row, advancing to the next row after completing the current one.\n ```\n | 1 | 4 |\n | 2 | 5 |\n | 3 | 6 |\n ```\n\n### Keyboard Handling\n\n- [Tab] - Moves the focus to the next interactive element within the Form/FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [Tab] - Moves the focus to the previous interactive element within the Form/FormGroup (if available) or to the previous element in the tab chain outside the Form\n- [F6] - Moves the focus to the first interactive element of the next FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [F6] - Moves the focus to the first interactive element of the previous FormGroup (if available) or to the previous element in the tab chain outside the Form\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/Form.js\";\n- import @ui5/webcomponents/dist/FormGroup.js\";\n- import @ui5/webcomponents/dist/FormItem.js\";\n---\n\n\n### **Slots:**\n - **header** - Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored.\n- **default** - Defines the component content - FormGroups or FormItems.\n\n**Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\nEither use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.\n\n### **CSS Parts:**\n - **header** - Used to style the wrapper of the header.\n- **layout** - Used to style the element defining the form column layout.\n- **column** - Used to style a single column of the form column layout.",
|
|
2955
2996
|
"doc-url": "",
|
|
2956
2997
|
"attributes": [
|
|
2957
2998
|
{
|
|
@@ -3691,7 +3732,17 @@
|
|
|
3691
3732
|
},
|
|
3692
3733
|
{
|
|
3693
3734
|
"name": "accessible-name-ref",
|
|
3694
|
-
"description": "Defines the IDs of the elements that label the
|
|
3735
|
+
"description": "Defines the IDs of the elements that label the component.",
|
|
3736
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
3737
|
+
},
|
|
3738
|
+
{
|
|
3739
|
+
"name": "accessible-description",
|
|
3740
|
+
"description": "Defines the accessible description of the component.",
|
|
3741
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
3742
|
+
},
|
|
3743
|
+
{
|
|
3744
|
+
"name": "accessible-description-ref",
|
|
3745
|
+
"description": "Defines the IDs of the elements that describe the component.",
|
|
3695
3746
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
3696
3747
|
},
|
|
3697
3748
|
{
|
|
@@ -3813,7 +3864,17 @@
|
|
|
3813
3864
|
},
|
|
3814
3865
|
{
|
|
3815
3866
|
"name": "accessible-name-ref",
|
|
3816
|
-
"description": "Defines the IDs of the elements that label the
|
|
3867
|
+
"description": "Defines the IDs of the elements that label the component.",
|
|
3868
|
+
"value": { "type": "string | undefined" }
|
|
3869
|
+
},
|
|
3870
|
+
{
|
|
3871
|
+
"name": "accessible-description",
|
|
3872
|
+
"description": "Defines the accessible description of the component.",
|
|
3873
|
+
"value": { "type": "string | undefined" }
|
|
3874
|
+
},
|
|
3875
|
+
{
|
|
3876
|
+
"name": "accessible-description-ref",
|
|
3877
|
+
"description": "Defines the IDs of the elements that describe the component.",
|
|
3817
3878
|
"value": { "type": "string | undefined" }
|
|
3818
3879
|
},
|
|
3819
3880
|
{
|
|
@@ -4879,12 +4940,17 @@
|
|
|
4879
4940
|
},
|
|
4880
4941
|
{
|
|
4881
4942
|
"name": "ui5-mcb-item-group",
|
|
4882
|
-
"description": "The `ui5-mcb-item-group` is type of suggestion item,\nthat can be used to split the `ui5-multi-combobox` suggestions into groups.\n---\n\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-mcb-item-group</code>.",
|
|
4943
|
+
"description": "The `ui5-mcb-item-group` is type of suggestion item,\nthat can be used to split the `ui5-multi-combobox` suggestions into groups.\n---\n\n\n### **Events:**\n - **move-over** - Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n- **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-mcb-item-group</code>.",
|
|
4883
4944
|
"doc-url": "",
|
|
4884
4945
|
"attributes": [
|
|
4885
4946
|
{
|
|
4886
4947
|
"name": "header-text",
|
|
4887
|
-
"description": "Defines the text of the
|
|
4948
|
+
"description": "Defines the header text of the <code>ui5-li-group</code>.",
|
|
4949
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
4950
|
+
},
|
|
4951
|
+
{
|
|
4952
|
+
"name": "header-accessible-name",
|
|
4953
|
+
"description": "Defines the accessible name of the header.",
|
|
4888
4954
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
4889
4955
|
}
|
|
4890
4956
|
],
|
|
@@ -4894,16 +4960,39 @@
|
|
|
4894
4960
|
"description": "Defines the items of the <code>ui5-mcb-item-group</code>."
|
|
4895
4961
|
}
|
|
4896
4962
|
],
|
|
4897
|
-
"events": [
|
|
4963
|
+
"events": [
|
|
4964
|
+
{
|
|
4965
|
+
"name": "move-over",
|
|
4966
|
+
"description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`."
|
|
4967
|
+
},
|
|
4968
|
+
{
|
|
4969
|
+
"name": "move",
|
|
4970
|
+
"description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action."
|
|
4971
|
+
}
|
|
4972
|
+
],
|
|
4898
4973
|
"js": {
|
|
4899
4974
|
"properties": [
|
|
4900
4975
|
{
|
|
4901
4976
|
"name": "header-text",
|
|
4902
|
-
"description": "Defines the text of the
|
|
4977
|
+
"description": "Defines the header text of the <code>ui5-li-group</code>.",
|
|
4978
|
+
"value": { "type": "string | undefined" }
|
|
4979
|
+
},
|
|
4980
|
+
{
|
|
4981
|
+
"name": "header-accessible-name",
|
|
4982
|
+
"description": "Defines the accessible name of the header.",
|
|
4903
4983
|
"value": { "type": "string | undefined" }
|
|
4904
4984
|
}
|
|
4905
4985
|
],
|
|
4906
|
-
"events": [
|
|
4986
|
+
"events": [
|
|
4987
|
+
{
|
|
4988
|
+
"name": "move-over",
|
|
4989
|
+
"description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`."
|
|
4990
|
+
},
|
|
4991
|
+
{
|
|
4992
|
+
"name": "move",
|
|
4993
|
+
"description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action."
|
|
4994
|
+
}
|
|
4995
|
+
]
|
|
4907
4996
|
}
|
|
4908
4997
|
},
|
|
4909
4998
|
{
|
|
@@ -7683,6 +7772,11 @@
|
|
|
7683
7772
|
"name": "growing-sub-text",
|
|
7684
7773
|
"description": "Defines the text that will be displayed below the `growingText` inside the growing button.\nHas no effect when type is set to Scroll.",
|
|
7685
7774
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
7775
|
+
},
|
|
7776
|
+
{
|
|
7777
|
+
"name": "disabled",
|
|
7778
|
+
"description": "Disables the growing feature.",
|
|
7779
|
+
"value": { "type": "boolean", "default": "false" }
|
|
7686
7780
|
}
|
|
7687
7781
|
],
|
|
7688
7782
|
"events": [
|
|
@@ -7707,6 +7801,11 @@
|
|
|
7707
7801
|
"name": "growing-sub-text",
|
|
7708
7802
|
"description": "Defines the text that will be displayed below the `growingText` inside the growing button.\nHas no effect when type is set to Scroll.",
|
|
7709
7803
|
"value": { "type": "string | undefined" }
|
|
7804
|
+
},
|
|
7805
|
+
{
|
|
7806
|
+
"name": "disabled",
|
|
7807
|
+
"description": "Disables the growing feature.",
|
|
7808
|
+
"value": { "type": "boolean" }
|
|
7710
7809
|
}
|
|
7711
7810
|
],
|
|
7712
7811
|
"events": [
|
|
@@ -8757,6 +8856,16 @@
|
|
|
8757
8856
|
"description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
|
|
8758
8857
|
"value": { "type": "boolean", "default": "false" }
|
|
8759
8858
|
},
|
|
8859
|
+
{
|
|
8860
|
+
"name": "multi-line",
|
|
8861
|
+
"description": "Defines whether tokens are displayed on multiple lines.\n\n**Note:** The `multiLine` property is in an experimental state and is a subject to change.",
|
|
8862
|
+
"value": { "type": "boolean", "default": "false" }
|
|
8863
|
+
},
|
|
8864
|
+
{
|
|
8865
|
+
"name": "show-clear-all",
|
|
8866
|
+
"description": "Defines whether \"Clear All\" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.\n\n**Note:** The `showClearAll` property is in an experimental state and is a subject to change.",
|
|
8867
|
+
"value": { "type": "boolean", "default": "false" }
|
|
8868
|
+
},
|
|
8760
8869
|
{
|
|
8761
8870
|
"name": "disabled",
|
|
8762
8871
|
"description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.",
|
|
@@ -8790,6 +8899,16 @@
|
|
|
8790
8899
|
"description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
|
|
8791
8900
|
"value": { "type": "boolean" }
|
|
8792
8901
|
},
|
|
8902
|
+
{
|
|
8903
|
+
"name": "multi-line",
|
|
8904
|
+
"description": "Defines whether tokens are displayed on multiple lines.\n\n**Note:** The `multiLine` property is in an experimental state and is a subject to change.",
|
|
8905
|
+
"value": { "type": "boolean" }
|
|
8906
|
+
},
|
|
8907
|
+
{
|
|
8908
|
+
"name": "show-clear-all",
|
|
8909
|
+
"description": "Defines whether \"Clear All\" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.\n\n**Note:** The `showClearAll` property is in an experimental state and is a subject to change.",
|
|
8910
|
+
"value": { "type": "boolean" }
|
|
8911
|
+
},
|
|
8793
8912
|
{
|
|
8794
8913
|
"name": "disabled",
|
|
8795
8914
|
"description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.",
|
|
@@ -9313,6 +9432,16 @@
|
|
|
9313
9432
|
"name": "accessible-name-ref",
|
|
9314
9433
|
"description": "Defines the IDs of the elements that label the component.",
|
|
9315
9434
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
9435
|
+
},
|
|
9436
|
+
{
|
|
9437
|
+
"name": "accessible-description",
|
|
9438
|
+
"description": "Defines the accessible description of the component.",
|
|
9439
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
9440
|
+
},
|
|
9441
|
+
{
|
|
9442
|
+
"name": "accessible-description-ref",
|
|
9443
|
+
"description": "Defines the IDs of the elements that describe the component.",
|
|
9444
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
9316
9445
|
}
|
|
9317
9446
|
],
|
|
9318
9447
|
"slots": [
|
|
@@ -9384,6 +9513,16 @@
|
|
|
9384
9513
|
"name": "accessible-name-ref",
|
|
9385
9514
|
"description": "Defines the IDs of the elements that label the component.",
|
|
9386
9515
|
"value": { "type": "string | undefined" }
|
|
9516
|
+
},
|
|
9517
|
+
{
|
|
9518
|
+
"name": "accessible-description",
|
|
9519
|
+
"description": "Defines the accessible description of the component.",
|
|
9520
|
+
"value": { "type": "string | undefined" }
|
|
9521
|
+
},
|
|
9522
|
+
{
|
|
9523
|
+
"name": "accessible-description-ref",
|
|
9524
|
+
"description": "Defines the IDs of the elements that describe the component.",
|
|
9525
|
+
"value": { "type": "string | undefined" }
|
|
9387
9526
|
}
|
|
9388
9527
|
],
|
|
9389
9528
|
"events": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ui5/webcomponents",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.5.0-rc.1",
|
|
4
4
|
"description": "UI5 Web Components: webcomponents.main",
|
|
5
5
|
"ui5": {
|
|
6
6
|
"webComponentsPackage": true
|
|
@@ -50,17 +50,17 @@
|
|
|
50
50
|
"directory": "packages/main"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@ui5/webcomponents-base": "2.
|
|
54
|
-
"@ui5/webcomponents-icons": "2.
|
|
55
|
-
"@ui5/webcomponents-icons-business-suite": "2.
|
|
56
|
-
"@ui5/webcomponents-icons-tnt": "2.
|
|
57
|
-
"@ui5/webcomponents-localization": "2.
|
|
58
|
-
"@ui5/webcomponents-theming": "2.
|
|
53
|
+
"@ui5/webcomponents-base": "2.5.0-rc.1",
|
|
54
|
+
"@ui5/webcomponents-icons": "2.5.0-rc.1",
|
|
55
|
+
"@ui5/webcomponents-icons-business-suite": "2.5.0-rc.1",
|
|
56
|
+
"@ui5/webcomponents-icons-tnt": "2.5.0-rc.1",
|
|
57
|
+
"@ui5/webcomponents-localization": "2.5.0-rc.1",
|
|
58
|
+
"@ui5/webcomponents-theming": "2.5.0-rc.1"
|
|
59
59
|
},
|
|
60
60
|
"devDependencies": {
|
|
61
|
-
"@ui5/webcomponents-tools": "2.
|
|
62
|
-
"chromedriver": "^
|
|
61
|
+
"@ui5/webcomponents-tools": "2.5.0-rc.1",
|
|
62
|
+
"chromedriver": "^131.0.0",
|
|
63
63
|
"lit": "^2.0.0"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "6c65a517f883940378462a005bc1d251c6acac09"
|
|
66
66
|
}
|