@ui5/webcomponents 2.22.0-rc.3 → 2.22.0-rc.5
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 +47 -0
- package/dist/.tsbuildinfo +1 -1
- package/dist/AvatarBadge.d.ts +3 -3
- package/dist/AvatarBadge.js +10 -10
- package/dist/AvatarBadge.js.map +1 -1
- package/dist/AvatarBadgeTemplate.js +1 -1
- package/dist/AvatarBadgeTemplate.js.map +1 -1
- package/dist/Calendar.d.ts +7 -1
- package/dist/Calendar.js +40 -3
- package/dist/Calendar.js.map +1 -1
- package/dist/CalendarHeaderTemplate.js +2 -2
- package/dist/CalendarHeaderTemplate.js.map +1 -1
- package/dist/ColorPaletteItem.d.ts +0 -1
- package/dist/ColorPaletteItem.js +0 -2
- package/dist/ColorPaletteItem.js.map +1 -1
- package/dist/ComboBox.d.ts +4 -0
- package/dist/ComboBox.js +6 -0
- package/dist/ComboBox.js.map +1 -1
- package/dist/DateTimePicker.d.ts +5 -6
- package/dist/DateTimePicker.js +9 -11
- package/dist/DateTimePicker.js.map +1 -1
- package/dist/Input.d.ts +4 -0
- package/dist/Input.js.map +1 -1
- package/dist/List.js +8 -0
- package/dist/List.js.map +1 -1
- package/dist/ListItem.d.ts +9 -5
- package/dist/ListItem.js +10 -9
- package/dist/ListItem.js.map +1 -1
- package/dist/ListItemBase.d.ts +6 -1
- package/dist/ListItemBase.js +16 -0
- package/dist/ListItemBase.js.map +1 -1
- package/dist/ListItemBaseTemplate.d.ts +2 -2
- package/dist/ListItemBaseTemplate.js.map +1 -1
- package/dist/ListItemGroup.d.ts +2 -0
- package/dist/ListItemGroup.js.map +1 -1
- package/dist/Menu.d.ts +4 -0
- package/dist/Menu.js.map +1 -1
- package/dist/MenuItemTemplate.d.ts +5 -1
- package/dist/MenuItemTemplate.js +8 -3
- package/dist/MenuItemTemplate.js.map +1 -1
- package/dist/MultiComboBox.d.ts +5 -1
- package/dist/MultiComboBox.js +33 -24
- package/dist/MultiComboBox.js.map +1 -1
- package/dist/MultiInput.d.ts +6 -0
- package/dist/MultiInput.js +36 -8
- package/dist/MultiInput.js.map +1 -1
- package/dist/Panel.d.ts +22 -0
- package/dist/Panel.js +51 -0
- package/dist/Panel.js.map +1 -1
- package/dist/PanelTemplate.js +5 -2
- package/dist/PanelTemplate.js.map +1 -1
- package/dist/RangeSlider.d.ts +19 -1
- package/dist/RangeSlider.js +112 -29
- package/dist/RangeSlider.js.map +1 -1
- package/dist/RangeSliderTemplate.d.ts +0 -3
- package/dist/RangeSliderTemplate.js +22 -17
- package/dist/RangeSliderTemplate.js.map +1 -1
- package/dist/SegmentedButtonItem.d.ts +0 -1
- package/dist/SegmentedButtonItem.js +0 -2
- package/dist/SegmentedButtonItem.js.map +1 -1
- package/dist/Slider.d.ts +1 -2
- package/dist/Slider.js +12 -7
- package/dist/Slider.js.map +1 -1
- package/dist/SliderBase.d.ts +0 -1
- package/dist/SliderBase.js +18 -15
- package/dist/SliderBase.js.map +1 -1
- package/dist/SliderHandle.d.ts +42 -9
- package/dist/SliderHandle.js +49 -9
- package/dist/SliderHandle.js.map +1 -1
- package/dist/SliderHandleTemplate.js +7 -1
- package/dist/SliderHandleTemplate.js.map +1 -1
- package/dist/SliderScale.d.ts +53 -0
- package/dist/SliderScale.js +67 -0
- package/dist/SliderScale.js.map +1 -1
- package/dist/SliderScaleTemplate.js +5 -1
- package/dist/SliderScaleTemplate.js.map +1 -1
- package/dist/SliderTemplate.js +1 -1
- package/dist/SliderTemplate.js.map +1 -1
- package/dist/Tab.d.ts +8 -1
- package/dist/Tab.js +13 -0
- package/dist/Tab.js.map +1 -1
- package/dist/TabContainer.d.ts +6 -3
- package/dist/TabContainer.js +11 -8
- package/dist/TabContainer.js.map +1 -1
- package/dist/Table.d.ts +1 -0
- package/dist/Table.js +16 -3
- package/dist/Table.js.map +1 -1
- package/dist/TableCell.d.ts +2 -2
- package/dist/TableCell.js +2 -2
- package/dist/TableCell.js.map +1 -1
- package/dist/TableHeaderRowTemplate.js +5 -2
- package/dist/TableHeaderRowTemplate.js.map +1 -1
- package/dist/TableNavigation.js +3 -0
- package/dist/TableNavigation.js.map +1 -1
- package/dist/TableRow.d.ts +0 -2
- package/dist/TableRow.js +0 -9
- package/dist/TableRow.js.map +1 -1
- package/dist/TableRowBase.d.ts +6 -1
- package/dist/TableRowBase.js +37 -2
- package/dist/TableRowBase.js.map +1 -1
- package/dist/TableRowTemplate.js +4 -2
- package/dist/TableRowTemplate.js.map +1 -1
- package/dist/Tokenizer.d.ts +1 -0
- package/dist/Tokenizer.js +12 -0
- package/dist/Tokenizer.js.map +1 -1
- package/dist/Toolbar.d.ts +9 -0
- package/dist/Toolbar.js +4 -1
- package/dist/Toolbar.js.map +1 -1
- package/dist/css/themes/Dialog.css +1 -1
- package/dist/css/themes/ListItemBase.css +1 -1
- package/dist/css/themes/OptionBase.css +1 -1
- package/dist/css/themes/Panel.css +1 -1
- package/dist/css/themes/RangeSlider.css +1 -1
- package/dist/css/themes/Slider.css +1 -1
- package/dist/css/themes/SliderBase.css +1 -1
- package/dist/css/themes/SliderHandle.css +1 -1
- package/dist/css/themes/SliderScale.css +1 -1
- package/dist/css/themes/SliderTooltip.css +1 -1
- package/dist/css/themes/TableRow.css +1 -1
- package/dist/css/themes/TableRowBase.css +1 -1
- package/dist/css/themes/Toolbar.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_auto/parameters-bundle.css +38 -94
- package/dist/css/themes/sap_horizon_dark/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon_hc_auto/parameters-bundle.css +40 -96
- package/dist/css/themes/sap_horizon_hcb/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon_hcw/parameters-bundle.css +1 -1
- package/dist/custom-elements-internal.json +1016 -138
- package/dist/custom-elements.json +471 -108
- package/dist/dynamic-date-range-options/DateTimeRangeTemplate.js +7 -2
- package/dist/dynamic-date-range-options/DateTimeRangeTemplate.js.map +1 -1
- package/dist/dynamic-date-range-options/FromDateTimeTemplate.js +1 -1
- package/dist/dynamic-date-range-options/FromDateTimeTemplate.js.map +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_auto/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_hc_auto/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_hcb/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_hcw/parameters-bundle.css.json +1 -1
- package/dist/generated/themes/Dialog.css.d.ts +1 -1
- package/dist/generated/themes/Dialog.css.js +1 -1
- package/dist/generated/themes/Dialog.css.js.map +1 -1
- package/dist/generated/themes/ListItemBase.css.d.ts +1 -1
- package/dist/generated/themes/ListItemBase.css.js +1 -1
- package/dist/generated/themes/ListItemBase.css.js.map +1 -1
- package/dist/generated/themes/OptionBase.css.d.ts +1 -1
- package/dist/generated/themes/OptionBase.css.js +1 -1
- package/dist/generated/themes/OptionBase.css.js.map +1 -1
- package/dist/generated/themes/Panel.css.d.ts +1 -1
- package/dist/generated/themes/Panel.css.js +1 -1
- package/dist/generated/themes/Panel.css.js.map +1 -1
- package/dist/generated/themes/RangeSlider.css.d.ts +1 -1
- package/dist/generated/themes/RangeSlider.css.js +1 -1
- package/dist/generated/themes/RangeSlider.css.js.map +1 -1
- package/dist/generated/themes/Slider.css.d.ts +1 -1
- package/dist/generated/themes/Slider.css.js +1 -1
- package/dist/generated/themes/Slider.css.js.map +1 -1
- package/dist/generated/themes/SliderBase.css.d.ts +1 -1
- package/dist/generated/themes/SliderBase.css.js +1 -1
- package/dist/generated/themes/SliderBase.css.js.map +1 -1
- package/dist/generated/themes/SliderHandle.css.d.ts +1 -1
- package/dist/generated/themes/SliderHandle.css.js +1 -1
- package/dist/generated/themes/SliderHandle.css.js.map +1 -1
- package/dist/generated/themes/SliderScale.css.d.ts +1 -1
- package/dist/generated/themes/SliderScale.css.js +1 -1
- package/dist/generated/themes/SliderScale.css.js.map +1 -1
- package/dist/generated/themes/SliderTooltip.css.d.ts +1 -1
- package/dist/generated/themes/SliderTooltip.css.js +1 -1
- package/dist/generated/themes/SliderTooltip.css.js.map +1 -1
- package/dist/generated/themes/TableRow.css.d.ts +1 -1
- package/dist/generated/themes/TableRow.css.js +1 -1
- package/dist/generated/themes/TableRow.css.js.map +1 -1
- package/dist/generated/themes/TableRowBase.css.d.ts +1 -1
- package/dist/generated/themes/TableRowBase.css.js +1 -1
- package/dist/generated/themes/TableRowBase.css.js.map +1 -1
- package/dist/generated/themes/Toolbar.css.d.ts +1 -1
- package/dist/generated/themes/Toolbar.css.js +1 -1
- package/dist/generated/themes/Toolbar.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.js +38 -94
- package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_hc_auto/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon_hc_auto/parameters-bundle.css.js +40 -96
- package/dist/generated/themes/sap_horizon_hc_auto/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js.map +1 -1
- package/dist/vscode.html-custom-data.json +118 -46
- package/dist/web-types.json +289 -93
- package/package-scripts.cjs +1 -0
- package/package.json +9 -9
- package/src/AvatarBadgeTemplate.tsx +1 -2
- package/src/CalendarHeaderTemplate.tsx +4 -0
- package/src/ListItemBaseTemplate.tsx +3 -3
- package/src/MenuItemTemplate.tsx +21 -10
- package/src/PanelTemplate.tsx +12 -5
- package/src/RangeSliderTemplate.tsx +146 -113
- package/src/SliderHandleTemplate.tsx +7 -1
- package/src/SliderScaleTemplate.tsx +26 -1
- package/src/SliderTemplate.tsx +0 -1
- package/src/TableHeaderRowTemplate.tsx +23 -1
- package/src/TableRowTemplate.tsx +13 -1
- package/src/dynamic-date-range-options/DateTimeRangeTemplate.tsx +8 -2
- package/src/dynamic-date-range-options/FromDateTimeTemplate.tsx +1 -1
- package/src/i18n/messagebundle.properties +2 -2
- package/src/themes/Dialog.css +2 -2
- package/src/themes/ListItemBase.css +4 -3
- package/src/themes/OptionBase.css +6 -0
- package/src/themes/Panel.css +19 -2
- package/src/themes/RangeSlider.css +20 -68
- package/src/themes/Slider.css +3 -6
- package/src/themes/SliderBase.css +1 -269
- package/src/themes/SliderHandle.css +4 -3
- package/src/themes/SliderScale.css +45 -6
- package/src/themes/SliderTooltip.css +1 -1
- package/src/themes/TableRow.css +28 -39
- package/src/themes/TableRowBase.css +79 -20
- package/src/themes/Toolbar.css +2 -2
- package/src/themes/base/Panel-parameters.css +1 -0
- package/src/themes/base/SliderBase-parameters.css +1 -101
- package/src/themes/base/SliderHandle-parameters.css +22 -1
- package/src/themes/base/SliderScale-parameters.css +23 -3
- package/src/themes/base/sizes-parameters.css +2 -2
- package/src/themes/sap_fiori_3/Slider-parameters.css +4 -4
- package/src/themes/sap_fiori_3/SliderBase-parameters.css +0 -30
- package/src/themes/sap_fiori_3/SliderHandle-parameters.css +18 -1
- package/src/themes/sap_fiori_3/SliderScale-parameters.css +2 -8
- package/src/themes/sap_fiori_3_dark/Slider-parameters.css +4 -4
- package/src/themes/sap_fiori_3_dark/SliderBase-parameters.css +1 -26
- package/src/themes/sap_fiori_3_dark/SliderHandle-parameters.css +1 -5
- package/src/themes/sap_fiori_3_dark/SliderScale-parameters.css +1 -13
- package/src/themes/sap_fiori_3_hcb/Link-parameters.css +1 -1
- package/src/themes/sap_fiori_3_hcb/Slider-parameters.css +4 -4
- package/src/themes/sap_fiori_3_hcb/SliderBase-parameters.css +1 -39
- package/src/themes/sap_fiori_3_hcb/SliderHandle-parameters.css +1 -5
- package/src/themes/sap_fiori_3_hcb/SliderScale-parameters.css +4 -6
- package/src/themes/sap_fiori_3_hcw/Link-parameters.css +1 -1
- package/src/themes/sap_fiori_3_hcw/Slider-parameters.css +4 -4
- package/src/themes/sap_fiori_3_hcw/SliderBase-parameters.css +1 -37
- package/src/themes/sap_fiori_3_hcw/SliderHandle-parameters.css +1 -5
- package/src/themes/sap_fiori_3_hcw/SliderScale-parameters.css +1 -14
- package/src/themes/sap_horizon/Slider-parameters.css +4 -4
- package/src/themes/sap_horizon/SliderBase-parameters.css +0 -49
- package/src/themes/sap_horizon/SliderHandle-parameters.css +2 -1
- package/src/themes/sap_horizon/SliderScale-parameters.css +4 -5
- package/src/themes/sap_horizon_dark/Slider-parameters.css +4 -4
- package/src/themes/sap_horizon_dark/SliderBase-parameters.css +1 -50
- package/src/themes/sap_horizon_dark/SliderHandle-parameters.css +1 -5
- package/src/themes/sap_horizon_dark/SliderScale-parameters.css +1 -10
- package/src/themes/sap_horizon_hcb/Link-parameters.css +1 -1
- package/src/themes/sap_horizon_hcb/Slider-parameters.css +4 -4
- package/src/themes/sap_horizon_hcb/SliderBase-parameters.css +1 -71
- package/src/themes/sap_horizon_hcb/SliderHandle-parameters.css +4 -3
- package/src/themes/sap_horizon_hcb/SliderScale-parameters.css +3 -2
- package/src/themes/sap_horizon_hcw/Link-parameters.css +1 -1
- package/src/themes/sap_horizon_hcw/Slider-parameters.css +4 -4
- package/src/themes/sap_horizon_hcw/SliderBase-parameters.css +1 -72
- package/src/themes/sap_horizon_hcw/SliderHandle-parameters.css +1 -5
- package/src/themes/sap_horizon_hcw/SliderScale-parameters.css +1 -10
- package/dist/SliderBaseTemplate.d.ts +0 -10
- package/dist/SliderBaseTemplate.js +0 -19
- package/dist/SliderBaseTemplate.js.map +0 -1
- package/src/SliderBaseTemplate.tsx +0 -65
|
@@ -1,14 +1 @@
|
|
|
1
|
-
@import "../
|
|
2
|
-
|
|
3
|
-
:host {
|
|
4
|
-
--_ui5_slider_scale_root_box_sizing: content-box;
|
|
5
|
-
--_ui5_slider_scale_progress_border: 1px solid var(--sapSlider_Selected_BorderColor);
|
|
6
|
-
--_ui5_slider_scale_border: 1px solid var(--sapSlider_Selected_BorderColor);
|
|
7
|
-
--_ui5_slider_scale_progress_height: 0.375rem;
|
|
8
|
-
--_ui5_slider_scale_progress_top: -1px;
|
|
9
|
-
--ui5_slider_scale_background: var(--sapField_BorderColor);
|
|
10
|
-
|
|
11
|
-
/* Fiori 3 specific */
|
|
12
|
-
--_ui5_slider_scale_dots_display: none;
|
|
13
|
-
--_ui5_slider_scale_tickmark_height: 1rem;
|
|
14
|
-
}
|
|
1
|
+
@import "../sap_fiori_3_hcb/SliderScale-parameters.css";
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
:host {
|
|
2
|
-
--
|
|
3
|
-
--
|
|
2
|
+
--_ui5_slider_root_side_padding: 0 1rem;
|
|
3
|
+
--_ui5_slider_height: 2.75rem;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
@container style(--ui5_content_density: compact) {
|
|
7
7
|
:host {
|
|
8
|
-
--
|
|
9
|
-
--
|
|
8
|
+
--_ui5_slider_root_side_padding: 0 .75rem;
|
|
9
|
+
--_ui5_slider_height: 2rem;
|
|
10
10
|
}
|
|
11
11
|
}
|
|
@@ -1,50 +1 @@
|
|
|
1
1
|
@import "../base/SliderBase-parameters.css";
|
|
2
|
-
|
|
3
|
-
:host {
|
|
4
|
-
--_ui5_slider_progress_container_background: var(--sapSlider_Background);
|
|
5
|
-
--_ui5_slider_progress_container_dot_display: block;
|
|
6
|
-
--_ui5_slider_progress_background: var(--sapSlider_Selected_Background);
|
|
7
|
-
--_ui5_slider_progress_before_background: var(--sapSlider_Selected_Background);
|
|
8
|
-
--_ui5_slider_progress_after_background: var(--sapContent_MeasureIndicatorColor);
|
|
9
|
-
--_ui5_slider_handle_background: var(--sapSlider_HandleBackground);
|
|
10
|
-
--_ui5_slider_handle_icon_display: inline-block;
|
|
11
|
-
--_ui5_slider_handle_border: 0.0625rem solid var(--sapSlider_HandleBorderColor);
|
|
12
|
-
--_ui5_slider_handle_border_radius: 0.5rem;
|
|
13
|
-
--_ui5_slider_handle_font_family: "SAP-icons";
|
|
14
|
-
--_ui5_slider_handle_hover_border: 0.0625rem solid var(--sapSlider_Hover_HandleBorderColor);
|
|
15
|
-
--_ui5_slider_handle_focus_border: 0.125rem solid var(--sapContent_FocusColor);
|
|
16
|
-
--_ui5_slider_handle_background_focus: var(--sapSlider_Active_RangeHandleBackground);
|
|
17
|
-
--_ui5_slider_handle_outline: none;
|
|
18
|
-
--_ui5_slider_handle_hover_background: var(--sapSlider_Hover_HandleBackground);
|
|
19
|
-
--_ui5_slider_tooltip_background: var(--sapField_Focus_Background);
|
|
20
|
-
--_ui5_slider_tooltip_border: none;
|
|
21
|
-
--_ui5_slider_tooltip_border_radius: 0.5rem;
|
|
22
|
-
--_ui5_slider_tooltip_box_shadow: var(--sapContent_Shadow1);
|
|
23
|
-
--_ui5_range_slider_legacy_progress_focus_display: none;
|
|
24
|
-
--_ui5_range_slider_progress_focus_display: block;
|
|
25
|
-
--_ui5_slider_tickmark_in_range_bg: var(--sapSlider_Selected_BorderColor);
|
|
26
|
-
--_ui5_slider_tooltip_padding: 0.25rem;
|
|
27
|
-
--_ui5_slider_tooltip_height: 1.375rem;
|
|
28
|
-
--_ui5_slider_handle_focus_width: 1px;
|
|
29
|
-
--_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width));
|
|
30
|
-
--_ui5_slider_tooltip_border_box: border-box;
|
|
31
|
-
--_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground);
|
|
32
|
-
--_ui5_range_slider_active_handle_icon_display: none;
|
|
33
|
-
--_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 0.375rem);
|
|
34
|
-
--_ui5_range_slider_progress_focus_top: calc(-1 * ((var(--_ui5_slider_handle_height) / 2) + 0.1875rem) + var(--_ui5_slider_progress_border_width));
|
|
35
|
-
--_ui5_range_slider_progress_focus_left: calc(-1 * ((var(--_ui5_slider_handle_width) / 2) + 0.1875rem + var(--_ui5_slider_progress_border_width)));
|
|
36
|
-
--_ui5_range_slider_progress_focus_right: calc(-1 * ((var(--_ui5_slider_handle_width) / 2) + 0.1875rem + var(--_ui5_slider_progress_border_width)));
|
|
37
|
-
--_ui5_range_slider_progress_focus_padding: 0 1rem 0 1rem;
|
|
38
|
-
--_ui5_range_slider_root_hover_handle_icon_display: inline-block;
|
|
39
|
-
--_ui5_range_slider_root_hover_handle_bg: var(--_ui5_slider_handle_hover_background);
|
|
40
|
-
--_ui5_range_slider_root_active_handle_icon_display: none;
|
|
41
|
-
--_ui5_slider_handle_box_sizing: border-box;
|
|
42
|
-
--_ui5_range_slider_handle_background: var(--sapSlider_RangeHandleBackground);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
@container style(--ui5_content_density: compact) {
|
|
46
|
-
:host {
|
|
47
|
-
--_ui5_slider_tooltip_bottom: 1.75rem;
|
|
48
|
-
--_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width));
|
|
49
|
-
}
|
|
50
|
-
}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
@import "../base/SliderScale-parameters.css";
|
|
2
2
|
|
|
3
3
|
:host {
|
|
4
|
-
--_ui5_slider_scale_root_box_sizing: border-box;
|
|
5
|
-
--_ui5_slider_scale_progress_border: none;
|
|
6
4
|
--_ui5_slider_scale_border: none;
|
|
7
|
-
--_ui5_slider_scale_progress_height: 100%;
|
|
8
|
-
--_ui5_slider_scale_progress_top: 0;
|
|
9
5
|
--_ui5_slider_scale_dots_display: inline-block;
|
|
10
|
-
|
|
6
|
+
--_ui5_range_slider_legacy_progress_focus_display: none;
|
|
7
|
+
--_ui5_range_slider_progress_focus_display: block;
|
|
8
|
+
--_ui5_range_slider_progress_focus_padding: 0 1rem 0 1rem;
|
|
9
|
+
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
:host {
|
|
2
|
-
--
|
|
3
|
-
--
|
|
2
|
+
--_ui5_slider_root_side_padding: 0 1rem;
|
|
3
|
+
--_ui5_slider_height: 2.75rem;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
@container style(--ui5_content_density: compact) {
|
|
7
7
|
:host {
|
|
8
|
-
--
|
|
9
|
-
--
|
|
8
|
+
--_ui5_slider_root_side_padding: 0 .75rem;
|
|
9
|
+
--_ui5_slider_height: 2rem;
|
|
10
10
|
}
|
|
11
11
|
}
|
|
@@ -1,50 +1 @@
|
|
|
1
|
-
@import "../base/SliderBase-parameters.css";
|
|
2
|
-
|
|
3
|
-
:host {
|
|
4
|
-
--_ui5_slider_progress_container_background: var(--sapSlider_Background);
|
|
5
|
-
--_ui5_slider_progress_container_dot_display: block;
|
|
6
|
-
--_ui5_slider_progress_background: var(--sapSlider_Selected_Background);
|
|
7
|
-
--_ui5_slider_progress_before_background: var(--sapSlider_Selected_Background);
|
|
8
|
-
--_ui5_slider_progress_after_background: var(--sapContent_MeasureIndicatorColor);
|
|
9
|
-
--_ui5_slider_handle_background: var(--sapSlider_HandleBackground);
|
|
10
|
-
--_ui5_slider_handle_icon_display: inline-block;
|
|
11
|
-
--_ui5_slider_handle_border: 0.0625rem solid var(--sapSlider_HandleBorderColor);
|
|
12
|
-
--_ui5_slider_handle_border_radius: 0.5rem;
|
|
13
|
-
--_ui5_slider_handle_font_family: "SAP-icons";
|
|
14
|
-
--_ui5_slider_handle_hover_border: 0.0625rem solid var(--sapSlider_Hover_HandleBorderColor);
|
|
15
|
-
--_ui5_slider_handle_focus_border: 0.125rem solid var(--sapContent_FocusColor);
|
|
16
|
-
--_ui5_slider_handle_background_focus: var(--sapSlider_Active_RangeHandleBackground);
|
|
17
|
-
--_ui5_slider_handle_outline: none;
|
|
18
|
-
--_ui5_slider_handle_hover_background: var(--sapSlider_Hover_HandleBackground);
|
|
19
|
-
--_ui5_slider_tooltip_background: var(--sapField_Focus_Background);
|
|
20
|
-
--_ui5_slider_tooltip_border: none;
|
|
21
|
-
--_ui5_slider_tooltip_border_radius: 0.5rem;
|
|
22
|
-
--_ui5_slider_tooltip_box_shadow: var(--sapContent_Shadow1);
|
|
23
|
-
--_ui5_range_slider_legacy_progress_focus_display: none;
|
|
24
|
-
--_ui5_range_slider_progress_focus_display: block;
|
|
25
|
-
--_ui5_slider_tickmark_in_range_bg: var(--sapSlider_Selected_BorderColor);
|
|
26
|
-
--_ui5_slider_tooltip_padding: 0.25rem;
|
|
27
|
-
--_ui5_slider_tooltip_height: 1.375rem;
|
|
28
|
-
--_ui5_slider_handle_focus_width: 1px;
|
|
29
|
-
--_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width));
|
|
30
|
-
--_ui5_slider_tooltip_border_box: border-box;
|
|
31
|
-
--_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground);
|
|
32
|
-
--_ui5_range_slider_active_handle_icon_display: none;
|
|
33
|
-
--_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 0.375rem);
|
|
34
|
-
--_ui5_range_slider_progress_focus_top: calc(-1 * ((var(--_ui5_slider_handle_height) / 2) + 0.1875rem) + var(--_ui5_slider_progress_border_width));
|
|
35
|
-
--_ui5_range_slider_progress_focus_left: calc(-1 * ((var(--_ui5_slider_handle_width) / 2) + 0.1875rem + var(--_ui5_slider_progress_border_width)));
|
|
36
|
-
--_ui5_range_slider_progress_focus_right: calc(-1 * ((var(--_ui5_slider_handle_width) / 2) + 0.1875rem + var(--_ui5_slider_progress_border_width)));
|
|
37
|
-
--_ui5_range_slider_progress_focus_padding: 0 1rem 0 1rem;
|
|
38
|
-
--_ui5_range_slider_root_hover_handle_icon_display: inline-block;
|
|
39
|
-
--_ui5_range_slider_root_hover_handle_bg: var(--_ui5_slider_handle_hover_background);
|
|
40
|
-
--_ui5_range_slider_root_active_handle_icon_display: none;
|
|
41
|
-
--_ui5_slider_handle_box_sizing: border-box;
|
|
42
|
-
--_ui5_range_slider_handle_background: var(--sapSlider_RangeHandleBackground);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
@container style(--ui5_content_density: compact) {
|
|
46
|
-
:host {
|
|
47
|
-
--_ui5_slider_tooltip_bottom: 1.75rem;
|
|
48
|
-
--_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width));
|
|
49
|
-
}
|
|
50
|
-
}
|
|
1
|
+
@import "../base/SliderBase-parameters.css";
|
|
@@ -1,10 +1 @@
|
|
|
1
|
-
@import "../
|
|
2
|
-
|
|
3
|
-
:host {
|
|
4
|
-
--_ui5_slider_scale_root_box_sizing: border-box;
|
|
5
|
-
--_ui5_slider_scale_progress_border: none;
|
|
6
|
-
--_ui5_slider_scale_border: none;
|
|
7
|
-
--_ui5_slider_scale_progress_height: 100%;
|
|
8
|
-
--_ui5_slider_scale_progress_top: 0;
|
|
9
|
-
--_ui5_slider_scale_dots_display: inline-block;
|
|
10
|
-
}
|
|
1
|
+
@import "../sap_horizon/SliderScale-parameters.css";
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
:host {
|
|
4
4
|
--_ui5_link_text_decoration: var(--sapLink_TextDecoration);
|
|
5
|
-
--_ui5_link_hover_text_decoration:
|
|
5
|
+
--_ui5_link_hover_text_decoration: underline;
|
|
6
6
|
--_ui5_link_focused_hover_text_decoration: none;
|
|
7
7
|
--_ui5_link_active_text_decoration: var(--sapLink_Active_TextDecoration);
|
|
8
8
|
--_ui5_link_subtle_text_decoration: underline;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
:host {
|
|
2
|
-
--
|
|
3
|
-
--
|
|
2
|
+
--_ui5_slider_root_side_padding: 0 1rem;
|
|
3
|
+
--_ui5_slider_height: 2.75rem;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
@container style(--ui5_content_density: compact) {
|
|
7
7
|
:host {
|
|
8
|
-
--
|
|
9
|
-
--
|
|
8
|
+
--_ui5_slider_root_side_padding: 0 .75rem;
|
|
9
|
+
--_ui5_slider_height: 2rem;
|
|
10
10
|
}
|
|
11
11
|
}
|
|
@@ -1,71 +1 @@
|
|
|
1
|
-
@import "../
|
|
2
|
-
|
|
3
|
-
:host {
|
|
4
|
-
/* handle */
|
|
5
|
-
--_ui5_slider_handle_icon_display: inline-block;
|
|
6
|
-
--_ui5_range_slider_root_hover_handle_icon_display: inline-block;
|
|
7
|
-
--_ui5_slider_handle_hover_border: var(--_ui5_slider_handle_border);
|
|
8
|
-
--_ui5_slider_handle_background_focus: var(--sapSlider_Active_RangeHandleBackground);
|
|
9
|
-
--_ui5_slider_handle_focus_border: 0.125rem solid var(--sapField_BorderColor);
|
|
10
|
-
--_ui5_slider_handle_outline: none;
|
|
11
|
-
--_ui5_slider_handle_box_sizing: border-box;
|
|
12
|
-
--_ui5_slider_start_end_point_top: -0.125rem;
|
|
13
|
-
--_ui5_range_slider_handle_background: var(--sapSlider_RangeHandleBackground);
|
|
14
|
-
--_ui5_range_slider_root_hover_handle_bg: var(--sapButton_Hover_Background);
|
|
15
|
-
--_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground);
|
|
16
|
-
--_ui5_slider_inner_height: 0.375rem;
|
|
17
|
-
--_ui5_slider_track_total_height: var(--_ui5_slider_inner_height);
|
|
18
|
-
--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2);
|
|
19
|
-
--_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2);
|
|
20
|
-
--_ui5_slider_progress_background: var(--sapSlider_Selected_Background);
|
|
21
|
-
--_ui5_slider_progress_container_background: var(--sapSlider_Background);
|
|
22
|
-
--_ui5_slider_progress_container_dot_display: block;
|
|
23
|
-
--_ui5_slider_progress_before_background: var(--sapSlider_Selected_Background);
|
|
24
|
-
--_ui5_slider_progress_after_background: var(--sapContent_MeasureIndicatorColor);
|
|
25
|
-
--_ui5_slider_progress_after_border: solid 0.0625rem var(--sapContent_Selected_MeasureIndicatorColor);
|
|
26
|
-
--_ui5_slider_progress_before_border: solid 0.0625rem var(--sapContent_MeasureIndicatorColor);
|
|
27
|
-
--_ui5_slider_progress_outline_offset: -14px;
|
|
28
|
-
--_ui5_slider_outer_height: calc(var(--_ui5_slider_handle_height) + 9px);
|
|
29
|
-
--_ui5_slider_progress_outline_offset_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 6px);
|
|
30
|
-
--_ui5_slider_progress_outline: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor);
|
|
31
|
-
--_ui5_range_slider_focus_outline_width: calc(100% + var(--_ui5_slider_handle_width) + 12px);
|
|
32
|
-
--_ui5_range_slider_focus_outline_radius: .5rem;
|
|
33
|
-
|
|
34
|
-
--_ui5_slider_progress_container_top: 0;
|
|
35
|
-
--_ui5_slider_progress_height: .375rem;
|
|
36
|
-
--_ui5_slider_active_progress_border: solid 0.0625rem var(--sapSlider_Selected_BorderColor);
|
|
37
|
-
--_ui5_slider_active_progress_top: -.0625rem;
|
|
38
|
-
|
|
39
|
-
--_ui5_slider_no_tickmarks_progress_container_top: 0;
|
|
40
|
-
--_ui5_slider_no_tickmarks_active_progress_border: none;
|
|
41
|
-
--_ui5_slider_no_tickmarks_active_progress_left: 0;
|
|
42
|
-
--_ui5_slider_no_tickmarks_active_progress_top: 0;
|
|
43
|
-
|
|
44
|
-
--_ui5_slider_tooltip_background: var(--sapField_Background);
|
|
45
|
-
--_ui5_slider_tooltip_border_radius: var(--sapElement_BorderCornerRadius);
|
|
46
|
-
--_ui5_slider_tooltip_border_color: var(--sapField_BorderColor);
|
|
47
|
-
--_ui5_slider_tooltip_border: 0.0625rem solid var(--_ui5_slider_tooltip_border_color);
|
|
48
|
-
--_ui5_slider_tooltip_box_shadow: none;
|
|
49
|
-
--_ui5_slider_tooltip_padding: 0.25rem;
|
|
50
|
-
--_ui5_slider_tooltip_height: 1.375rem;
|
|
51
|
-
--_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - 1px);
|
|
52
|
-
--_ui5_slider_tooltip_border_box: border-box;
|
|
53
|
-
--_ui5_slider_handle_focus_visibility: block;
|
|
54
|
-
|
|
55
|
-
--_ui5_range_slider_legacy_progress_focus_display: none;
|
|
56
|
-
--_ui5_range_slider_progress_focus_display: block;
|
|
57
|
-
--_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 0.375rem);
|
|
58
|
-
--_ui5_range_slider_progress_focus_top: calc(-1 * ((var(--_ui5_slider_handle_height) / 2) + 0.1875rem) + 2 * var(--_ui5_slider_progress_border_width));
|
|
59
|
-
--_ui5_range_slider_progress_focus_left: calc(-1 * ((var(--_ui5_slider_handle_width) / 2) + 0.1875rem + var(--_ui5_slider_progress_border_width)));
|
|
60
|
-
--_ui5_range_slider_progress_focus_right: calc(-1 * ((var(--_ui5_slider_handle_width) / 2) + 0.1875rem + var(--_ui5_slider_progress_border_width)));
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
@container style(--ui5_content_density: compact) {
|
|
64
|
-
:host {
|
|
65
|
-
--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2);
|
|
66
|
-
--_ui5_range_slider_focus_outline_width: calc(100% + var(--_ui5_slider_handle_width) + 12px);
|
|
67
|
-
--_ui5_slider_outer_height: calc(var(--_ui5_slider_handle_height) + 10px);
|
|
68
|
-
--_ui5_slider_progress_outline_offset: calc((-1 * var(--_ui5_slider_outer_height)) + 1rem);
|
|
69
|
-
--_ui5_slider_progress_outline_offset_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 6px);
|
|
70
|
-
}
|
|
71
|
-
}
|
|
1
|
+
@import "../sap_horizon/SliderBase-parameters.css";
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
@import "../
|
|
1
|
+
@import "../sap_horizon/SliderHandle-parameters.css";
|
|
2
2
|
|
|
3
3
|
:host {
|
|
4
|
-
--
|
|
5
|
-
|
|
4
|
+
--ui5_slider_handle_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
|
|
5
|
+
--ui5_slider_handle_outline_offset: 0.0625rem;
|
|
6
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@import "../
|
|
1
|
+
@import "../sap_horizon/SliderScale-parameters.css";
|
|
2
2
|
|
|
3
3
|
:host {
|
|
4
4
|
--_ui5_slider_scale_root_box_sizing: content-box;
|
|
@@ -6,5 +6,6 @@
|
|
|
6
6
|
--_ui5_slider_scale_border: 1px solid var(--sapSlider_Selected_BorderColor);
|
|
7
7
|
--_ui5_slider_scale_progress_height: 0.375rem;
|
|
8
8
|
--_ui5_slider_scale_progress_top: -1px;
|
|
9
|
-
--
|
|
9
|
+
--_ui5_range_slider_progress_focus_top: calc(-1 * ((var(--_ui5_slider_handle_height) / 2) + 0.1875rem) + 2 * var(--_ui5_slider_progress_border_width) - 0.125rem);
|
|
10
|
+
--_ui5_range_slider_progress_focus_border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
|
|
10
11
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
:host {
|
|
4
4
|
--_ui5_link_text_decoration: var(--sapLink_TextDecoration);
|
|
5
|
-
--_ui5_link_hover_text_decoration:
|
|
5
|
+
--_ui5_link_hover_text_decoration: underline;
|
|
6
6
|
--_ui5_link_focused_hover_text_decoration: none;
|
|
7
7
|
--_ui5_link_active_text_decoration: var(--sapLink_Active_TextDecoration);
|
|
8
8
|
--_ui5_link_subtle_text_decoration: underline;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
:host {
|
|
2
|
-
--
|
|
3
|
-
--
|
|
2
|
+
--_ui5_slider_root_side_padding: 0 1rem;
|
|
3
|
+
--_ui5_slider_height: 2.75rem;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
@container style(--ui5_content_density: compact) {
|
|
7
7
|
:host {
|
|
8
|
-
--
|
|
9
|
-
--
|
|
8
|
+
--_ui5_slider_root_side_padding: 0 .75rem;
|
|
9
|
+
--_ui5_slider_height: 2rem;
|
|
10
10
|
}
|
|
11
11
|
}
|
|
@@ -1,72 +1 @@
|
|
|
1
|
-
@import "../
|
|
2
|
-
|
|
3
|
-
:host {
|
|
4
|
-
/* handle */
|
|
5
|
-
--_ui5_slider_handle_icon_display: inline-block;
|
|
6
|
-
--_ui5_range_slider_root_hover_handle_icon_display: inline-block;
|
|
7
|
-
--_ui5_slider_handle_hover_border: var(--_ui5_slider_handle_border);
|
|
8
|
-
--_ui5_slider_handle_background_focus: var(--sapSlider_Active_RangeHandleBackground);
|
|
9
|
-
--_ui5_slider_handle_focus_border: 0.125rem solid var(--sapField_BorderColor);
|
|
10
|
-
--_ui5_slider_handle_outline: none;
|
|
11
|
-
--_ui5_slider_handle_box_sizing: border-box;
|
|
12
|
-
--_ui5_slider_start_end_point_top: -0.125rem;
|
|
13
|
-
--_ui5_range_slider_handle_background: var(--sapSlider_RangeHandleBackground);
|
|
14
|
-
--_ui5_range_slider_root_hover_handle_bg: var(--sapButton_Hover_Background);
|
|
15
|
-
--_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground);
|
|
16
|
-
--_ui5_slider_inner_height: 0.375rem;
|
|
17
|
-
--_ui5_slider_track_total_height: var(--_ui5_slider_inner_height);
|
|
18
|
-
--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2);
|
|
19
|
-
--_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2);
|
|
20
|
-
--_ui5_slider_progress_background: var(--sapSlider_Selected_Background);
|
|
21
|
-
--_ui5_slider_progress_container_background: var(--sapSlider_Background);
|
|
22
|
-
--_ui5_slider_progress_container_dot_display: block;
|
|
23
|
-
--_ui5_slider_progress_before_background: var(--sapSlider_Selected_Background);
|
|
24
|
-
--_ui5_slider_progress_after_background: var(--sapContent_MeasureIndicatorColor);
|
|
25
|
-
--_ui5_slider_progress_after_border: solid 0.0625rem var(--sapContent_Selected_MeasureIndicatorColor);
|
|
26
|
-
--_ui5_slider_progress_before_border: solid 0.0625rem var(--sapContent_MeasureIndicatorColor);
|
|
27
|
-
--_ui5_slider_progress_outline_offset: -14px;
|
|
28
|
-
--_ui5_slider_outer_height: calc(var(--_ui5_slider_handle_height) + 9px);
|
|
29
|
-
--_ui5_slider_progress_outline_offset_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 6px);
|
|
30
|
-
--_ui5_slider_progress_outline: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor);
|
|
31
|
-
--_ui5_range_slider_focus_outline_width: calc(100% + var(--_ui5_slider_handle_width) + 12px);
|
|
32
|
-
--_ui5_range_slider_focus_outline_radius: .5rem;
|
|
33
|
-
|
|
34
|
-
--_ui5_slider_progress_container_top: 0;
|
|
35
|
-
--_ui5_slider_progress_height: .375rem;
|
|
36
|
-
--_ui5_slider_active_progress_border: solid 0.0625rem var(--sapSlider_Selected_BorderColor);
|
|
37
|
-
--_ui5_slider_active_progress_top: -.0625rem;
|
|
38
|
-
|
|
39
|
-
--_ui5_slider_no_tickmarks_progress_container_top: 0;
|
|
40
|
-
--_ui5_slider_no_tickmarks_active_progress_border: none;
|
|
41
|
-
--_ui5_slider_no_tickmarks_active_progress_left: 0;
|
|
42
|
-
--_ui5_slider_no_tickmarks_active_progress_top: 0;
|
|
43
|
-
|
|
44
|
-
--_ui5_slider_tooltip_background: var(--sapField_Background);
|
|
45
|
-
--_ui5_slider_tooltip_border_radius: var(--sapElement_BorderCornerRadius);
|
|
46
|
-
--_ui5_slider_tooltip_border_color: var(--sapField_BorderColor);
|
|
47
|
-
--_ui5_slider_tooltip_border: 0.0625rem solid var(--_ui5_slider_tooltip_border_color);
|
|
48
|
-
--_ui5_slider_tooltip_box_shadow: none;
|
|
49
|
-
--_ui5_slider_tooltip_padding: 0.25rem;
|
|
50
|
-
--_ui5_slider_tooltip_height: 1.375rem;
|
|
51
|
-
--_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - 1px);
|
|
52
|
-
--_ui5_slider_tooltip_border_box: border-box;
|
|
53
|
-
--_ui5_slider_handle_focus_visibility: block;
|
|
54
|
-
|
|
55
|
-
--_ui5_range_slider_legacy_progress_focus_display: none;
|
|
56
|
-
--_ui5_range_slider_progress_focus_display: block;
|
|
57
|
-
--_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 0.375rem);
|
|
58
|
-
--_ui5_range_slider_progress_focus_top: calc(-1 * ((var(--_ui5_slider_handle_height) / 2) + 0.1875rem) + 2 * var(--_ui5_slider_progress_border_width));
|
|
59
|
-
--_ui5_range_slider_progress_focus_left: calc(-1 * ((var(--_ui5_slider_handle_width) / 2) + 0.1875rem + var(--_ui5_slider_progress_border_width)));
|
|
60
|
-
--_ui5_range_slider_progress_focus_right: calc(-1 * ((var(--_ui5_slider_handle_width) / 2) + 0.1875rem + var(--_ui5_slider_progress_border_width)));
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
@container style(--ui5_content_density: compact) {
|
|
64
|
-
:host {
|
|
65
|
-
--_ui5_slider_track_total_height: var(--_ui5_slider_inner_height);
|
|
66
|
-
--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2);
|
|
67
|
-
--_ui5_range_slider_focus_outline_width: calc(100% + var(--_ui5_slider_handle_width) + 12px);
|
|
68
|
-
--_ui5_slider_outer_height: calc(var(--_ui5_slider_handle_height) + 10px);
|
|
69
|
-
--_ui5_slider_progress_outline_offset: calc((-1 * var(--_ui5_slider_outer_height)) + 1rem);
|
|
70
|
-
--_ui5_slider_progress_outline_offset_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 6px);
|
|
71
|
-
}
|
|
72
|
-
}
|
|
1
|
+
@import "../sap_horizon_hcb/SliderBase-parameters.css";
|
|
@@ -1,10 +1 @@
|
|
|
1
|
-
@import "../
|
|
2
|
-
|
|
3
|
-
:host {
|
|
4
|
-
--_ui5_slider_scale_root_box_sizing: content-box;
|
|
5
|
-
--_ui5_slider_scale_progress_border: 1px solid var(--sapSlider_Selected_BorderColor);
|
|
6
|
-
--_ui5_slider_scale_border: 1px solid var(--sapSlider_Selected_BorderColor);
|
|
7
|
-
--_ui5_slider_scale_progress_height: 0.375rem;
|
|
8
|
-
--_ui5_slider_scale_progress_top: -1px;
|
|
9
|
-
--_ui5_slider_scale_dots_display: inline-block;
|
|
10
|
-
}
|
|
1
|
+
@import "../sap_horizon_hcb/SliderScale-parameters.css";
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { JsxTemplate } from "@ui5/webcomponents-base";
|
|
2
|
-
import type SliderBase from "./SliderBase.js";
|
|
3
|
-
export default function SliderBaseTemplate(this: SliderBase, hooks?: {
|
|
4
|
-
handlesAriaText?: JsxTemplate;
|
|
5
|
-
progressBar?: JsxTemplate;
|
|
6
|
-
handles?: JsxTemplate;
|
|
7
|
-
}): import("@ui5/webcomponents-base").JSX.Element;
|
|
8
|
-
export declare function handlesAriaText(this: SliderBase): void;
|
|
9
|
-
export declare function progressBar(this: SliderBase): void;
|
|
10
|
-
export declare function handles(this: SliderBase): void;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
|
|
2
|
-
import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
|
|
3
|
-
export default function SliderBaseTemplate(hooks) {
|
|
4
|
-
return (_jsxs("div", { class: {
|
|
5
|
-
"ui5-slider-root": true,
|
|
6
|
-
"ui5-slider-root-phone": isPhone(),
|
|
7
|
-
}, onMouseDown: this._onmousedown, onTouchStart: this._onmousedown, onMouseOver: this._onmouseover, onMouseOut: this._onmouseout, onKeyDown: this._onkeydown, onKeyUp: this._onKeyupBase, part: "root-container", children: [(hooks?.handlesAriaText || handlesAriaText).call(this), _jsxs("div", { class: "ui5-slider-inner", children: [!!this.step && this.showTickmarks && _jsxs(_Fragment, { children: [_jsx("ul", { class: "ui5-slider-tickmarks", children: this.tickmarksObject.map(tm => _jsx(_Fragment, { children: tm ?
|
|
8
|
-
_jsx("li", { class: "ui5-slider-tickmark ui5-slider-tickmark-in-range" })
|
|
9
|
-
:
|
|
10
|
-
_jsx("li", { class: "ui5-slider-tickmark" }) })) }), !!this.labelInterval &&
|
|
11
|
-
_jsx("ul", { class: {
|
|
12
|
-
"ui5-slider-labels": true,
|
|
13
|
-
"ui5-slider-hidden-labels": this._labelsOverlapping,
|
|
14
|
-
}, children: this._labels.map(l => _jsx("li", { "data-counter": l })) })] }), (hooks?.progressBar || progressBar).call(this), (hooks?.handles || handles).call(this)] }), this.editableTooltip && _jsx(_Fragment, { children: _jsx("span", { id: "ui5-slider-InputDesc", class: "ui5-hidden-text", children: this._ariaDescribedByInputText }) })] }));
|
|
15
|
-
}
|
|
16
|
-
export function handlesAriaText() { }
|
|
17
|
-
export function progressBar() { }
|
|
18
|
-
export function handles() { }
|
|
19
|
-
//# sourceMappingURL=SliderBaseTemplate.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SliderBaseTemplate.js","sourceRoot":"","sources":["../src/SliderBaseTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wCAAwC,CAAC;AAIjE,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAmB,KAI5D;IACA,OAAO,CACN,eACC,KAAK,EAAE;YACN,iBAAiB,EAAE,IAAI;YACvB,uBAAuB,EAAE,OAAO,EAAE;SAClC,EACD,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,IAAI,EAAC,gBAAgB,aAEpB,CAAC,KAAK,EAAE,eAAe,IAAI,eAAe,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAEvD,eAAK,KAAK,EAAC,kBAAkB,aAC3B,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,IAAI,8BACrC,aAAI,KAAK,EAAC,sBAAsB,YAC9B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,4BAC9B,EAAE,CAAC,CAAC;wCACJ,aAAI,KAAK,EAAC,kDAAkD,GAAM;wCAClE,CAAC;4CACD,aAAI,KAAK,EAAC,qBAAqB,GAAM,GAEpC,CAAC,GACA,EACJ,CAAC,CAAC,IAAI,CAAC,aAAa;gCACpB,aAAI,KAAK,EAAE;wCACV,mBAAmB,EAAE,IAAI;wCACzB,0BAA0B,EAAE,IAAI,CAAC,kBAAkB;qCACnD,YAEC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CACrB,6BAAkB,CAAC,GAAO,CAC1B,GACG,IAEJ,EAEF,CAAC,KAAK,EAAE,WAAW,IAAI,WAAW,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAE9C,CAAC,KAAK,EAAE,OAAO,IAAI,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAClC,EACL,IAAI,CAAC,eAAe,IAAI,4BACxB,eAAM,EAAE,EAAC,sBAAsB,EAAC,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,yBAAyB,GAAQ,GAC7F,IAEE,CAEN,CAAC;AACH,CAAC;AAED,MAAM,UAAU,eAAe,KAAqB,CAAC;AACrD,MAAM,UAAU,WAAW,KAAqB,CAAC;AACjD,MAAM,UAAU,OAAO,KAAqB,CAAC","sourcesContent":["import { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type { JsxTemplate } from \"@ui5/webcomponents-base\";\nimport type SliderBase from \"./SliderBase.js\";\n\nexport default function SliderBaseTemplate(this: SliderBase, hooks?: {\n\thandlesAriaText?: JsxTemplate\n\tprogressBar?: JsxTemplate\n\thandles?: JsxTemplate\n}) {\n\treturn (\n\t\t<div\n\t\t\tclass={{\n\t\t\t\t\"ui5-slider-root\": true,\n\t\t\t\t\"ui5-slider-root-phone\": isPhone(),\n\t\t\t}}\n\t\t\tonMouseDown={this._onmousedown}\n\t\t\tonTouchStart={this._onmousedown}\n\t\t\tonMouseOver={this._onmouseover}\n\t\t\tonMouseOut={this._onmouseout}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonKeyUp={this._onKeyupBase}\n\t\t\tpart=\"root-container\"\n\t\t>\n\t\t\t{(hooks?.handlesAriaText || handlesAriaText).call(this)}\n\n\t\t\t<div class=\"ui5-slider-inner\">\n\t\t\t\t{!!this.step && this.showTickmarks && <>\n\t\t\t\t\t<ul class=\"ui5-slider-tickmarks\">\n\t\t\t\t\t\t{this.tickmarksObject.map(tm => <>\n\t\t\t\t\t\t\t{tm ?\n\t\t\t\t\t\t\t\t<li class=\"ui5-slider-tickmark ui5-slider-tickmark-in-range\"></li>\n\t\t\t\t\t\t\t\t:\n\t\t\t\t\t\t\t\t<li class=\"ui5-slider-tickmark\"></li>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</>)}\n\t\t\t\t\t</ul>\n\t\t\t\t\t{!!this.labelInterval &&\n\t\t\t\t\t\t<ul class={{\n\t\t\t\t\t\t\t\"ui5-slider-labels\": true,\n\t\t\t\t\t\t\t\"ui5-slider-hidden-labels\": this._labelsOverlapping,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this._labels.map(l =>\n\t\t\t\t\t\t\t\t<li data-counter={l}></li>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t}\n\t\t\t\t</>}\n\n\t\t\t\t{(hooks?.progressBar || progressBar).call(this)}\n\n\t\t\t\t{(hooks?.handles || handles).call(this)}\n\t\t\t</div>\n\t\t\t{this.editableTooltip && <>\n\t\t\t\t<span id=\"ui5-slider-InputDesc\" class=\"ui5-hidden-text\">{this._ariaDescribedByInputText}</span>\n\t\t\t</>}\n\n\t\t</div>\n\n\t);\n}\n\nexport function handlesAriaText(this: SliderBase) { }\nexport function progressBar(this: SliderBase) { }\nexport function handles(this: SliderBase) { }\n"]}
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
|
|
2
|
-
import type { JsxTemplate } from "@ui5/webcomponents-base";
|
|
3
|
-
import type SliderBase from "./SliderBase.js";
|
|
4
|
-
|
|
5
|
-
export default function SliderBaseTemplate(this: SliderBase, hooks?: {
|
|
6
|
-
handlesAriaText?: JsxTemplate
|
|
7
|
-
progressBar?: JsxTemplate
|
|
8
|
-
handles?: JsxTemplate
|
|
9
|
-
}) {
|
|
10
|
-
return (
|
|
11
|
-
<div
|
|
12
|
-
class={{
|
|
13
|
-
"ui5-slider-root": true,
|
|
14
|
-
"ui5-slider-root-phone": isPhone(),
|
|
15
|
-
}}
|
|
16
|
-
onMouseDown={this._onmousedown}
|
|
17
|
-
onTouchStart={this._onmousedown}
|
|
18
|
-
onMouseOver={this._onmouseover}
|
|
19
|
-
onMouseOut={this._onmouseout}
|
|
20
|
-
onKeyDown={this._onkeydown}
|
|
21
|
-
onKeyUp={this._onKeyupBase}
|
|
22
|
-
part="root-container"
|
|
23
|
-
>
|
|
24
|
-
{(hooks?.handlesAriaText || handlesAriaText).call(this)}
|
|
25
|
-
|
|
26
|
-
<div class="ui5-slider-inner">
|
|
27
|
-
{!!this.step && this.showTickmarks && <>
|
|
28
|
-
<ul class="ui5-slider-tickmarks">
|
|
29
|
-
{this.tickmarksObject.map(tm => <>
|
|
30
|
-
{tm ?
|
|
31
|
-
<li class="ui5-slider-tickmark ui5-slider-tickmark-in-range"></li>
|
|
32
|
-
:
|
|
33
|
-
<li class="ui5-slider-tickmark"></li>
|
|
34
|
-
}
|
|
35
|
-
</>)}
|
|
36
|
-
</ul>
|
|
37
|
-
{!!this.labelInterval &&
|
|
38
|
-
<ul class={{
|
|
39
|
-
"ui5-slider-labels": true,
|
|
40
|
-
"ui5-slider-hidden-labels": this._labelsOverlapping,
|
|
41
|
-
}}
|
|
42
|
-
>
|
|
43
|
-
{this._labels.map(l =>
|
|
44
|
-
<li data-counter={l}></li>
|
|
45
|
-
)}
|
|
46
|
-
</ul>
|
|
47
|
-
}
|
|
48
|
-
</>}
|
|
49
|
-
|
|
50
|
-
{(hooks?.progressBar || progressBar).call(this)}
|
|
51
|
-
|
|
52
|
-
{(hooks?.handles || handles).call(this)}
|
|
53
|
-
</div>
|
|
54
|
-
{this.editableTooltip && <>
|
|
55
|
-
<span id="ui5-slider-InputDesc" class="ui5-hidden-text">{this._ariaDescribedByInputText}</span>
|
|
56
|
-
</>}
|
|
57
|
-
|
|
58
|
-
</div>
|
|
59
|
-
|
|
60
|
-
);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
export function handlesAriaText(this: SliderBase) { }
|
|
64
|
-
export function progressBar(this: SliderBase) { }
|
|
65
|
-
export function handles(this: SliderBase) { }
|