@ui5/webcomponents 2.20.0-rc.0 → 2.20.0-rc.2
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 +40 -0
- package/dist/.tsbuildinfo +1 -1
- package/dist/Avatar.d.ts +23 -2
- package/dist/Avatar.js +41 -4
- package/dist/Avatar.js.map +1 -1
- package/dist/AvatarGroup.js +2 -0
- package/dist/AvatarGroup.js.map +1 -1
- package/dist/AvatarGroupTemplate.js +8 -1
- package/dist/AvatarGroupTemplate.js.map +1 -1
- package/dist/AvatarTemplate.js +1 -1
- package/dist/AvatarTemplate.js.map +1 -1
- package/dist/ComboBox.d.ts +19 -0
- package/dist/ComboBox.js +58 -2
- package/dist/ComboBox.js.map +1 -1
- package/dist/ComboBoxItem.d.ts +23 -0
- package/dist/ComboBoxItem.js +4 -0
- package/dist/ComboBoxItem.js.map +1 -1
- package/dist/List.js +6 -0
- package/dist/List.js.map +1 -1
- package/dist/ListItem.js +1 -1
- package/dist/ListItem.js.map +1 -1
- package/dist/ListItemCustom.d.ts +2 -14
- package/dist/ListItemCustom.js +31 -66
- package/dist/ListItemCustom.js.map +1 -1
- package/dist/ListItemGroup.d.ts +1 -0
- package/dist/ListItemGroup.js +1 -0
- package/dist/ListItemGroup.js.map +1 -1
- package/dist/ListItemGroupTemplate.js +1 -1
- package/dist/ListItemGroupTemplate.js.map +1 -1
- package/dist/Menu.d.ts +2 -1
- package/dist/Menu.js +14 -7
- package/dist/Menu.js.map +1 -1
- package/dist/MenuItem.d.ts +1 -0
- package/dist/MenuItem.js +6 -2
- package/dist/MenuItem.js.map +1 -1
- package/dist/Panel.d.ts +3 -0
- package/dist/Panel.js +13 -0
- package/dist/Panel.js.map +1 -1
- package/dist/PanelTemplate.js +1 -1
- package/dist/PanelTemplate.js.map +1 -1
- package/dist/Slider.d.ts +13 -20
- package/dist/Slider.js +48 -74
- package/dist/Slider.js.map +1 -1
- package/dist/SliderHandle.d.ts +61 -0
- package/dist/SliderHandle.js +104 -0
- package/dist/SliderHandle.js.map +1 -0
- package/dist/SliderHandleTemplate.d.ts +2 -0
- package/dist/SliderHandleTemplate.js +7 -0
- package/dist/SliderHandleTemplate.js.map +1 -0
- package/dist/SliderScale.d.ts +138 -0
- package/dist/SliderScale.js +300 -0
- package/dist/SliderScale.js.map +1 -0
- package/dist/SliderScaleTemplate.d.ts +2 -0
- package/dist/SliderScaleTemplate.js +11 -0
- package/dist/SliderScaleTemplate.js.map +1 -0
- package/dist/SliderTemplate.d.ts +0 -2
- package/dist/SliderTemplate.js +16 -14
- package/dist/SliderTemplate.js.map +1 -1
- package/dist/SliderTooltip.js +0 -4
- package/dist/SliderTooltip.js.map +1 -1
- package/dist/SplitButton.d.ts +2 -0
- package/dist/SplitButton.js +5 -0
- package/dist/SplitButton.js.map +1 -1
- package/dist/Tab.js +1 -1
- package/dist/Tab.js.map +1 -1
- package/dist/TabContainer.js +1 -1
- package/dist/TabContainer.js.map +1 -1
- package/dist/TableDragAndDrop.js +1 -1
- package/dist/TableDragAndDrop.js.map +1 -1
- package/dist/Tokenizer.js +16 -4
- package/dist/Tokenizer.js.map +1 -1
- package/dist/Toolbar.d.ts +4 -0
- package/dist/Toolbar.js +11 -0
- package/dist/Toolbar.js.map +1 -1
- package/dist/bundle.esm.js +2 -0
- package/dist/bundle.esm.js.map +1 -1
- package/dist/css/themes/Avatar.css +1 -1
- package/dist/css/themes/AvatarGroup.css +1 -1
- package/dist/css/themes/ColorPicker.css +1 -1
- package/dist/css/themes/Form.css +1 -1
- package/dist/css/themes/FormItemSpan.css +1 -1
- package/dist/css/themes/Panel.css +1 -1
- package/dist/css/themes/ProgressIndicator.css +1 -1
- package/dist/css/themes/Slider.css +1 -0
- package/dist/css/themes/SliderHandle.css +1 -0
- package/dist/css/themes/SliderScale.css +1 -0
- package/dist/css/themes/ToolbarItem.css +1 -1
- package/dist/css/themes/sap_fiori_3/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_fiori_3_dark/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_fiori_3_hcb/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_fiori_3_hcw/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon_dark/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon_hcb/parameters-bundle.css +1 -2
- package/dist/css/themes/sap_horizon_hcw/parameters-bundle.css +1 -2
- package/dist/custom-elements-internal.json +242 -32
- package/dist/custom-elements.json +198 -31
- package/dist/generated/assets/i18n/messagebundle_ar.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_bg.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_ca.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_cnr.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_cs.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_cy.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_da.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_de.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_el.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_en.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_en_GB.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_en_US_sappsd.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_en_US_saprigi.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_en_US_saptrc.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_es.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_es_MX.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_et.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_fi.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_fr.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_fr_CA.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_hi.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_hr.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_hu.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_id.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_it.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_iw.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_ja.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_kk.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_ko.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_lt.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_lv.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_mk.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_ms.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_nl.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_no.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_pl.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_pt.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_pt_PT.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_ro.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_ru.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_sh.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_sk.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_sl.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_sr.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_sv.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_th.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_tr.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_uk.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_vi.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_zh_CN.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_zh_TW.json +1 -1
- package/dist/generated/assets/themes/sap_fiori_3/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_fiori_3_dark/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_fiori_3_hcb/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_fiori_3_hcw/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_dark/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_hcb/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_hcw/parameters-bundle.css.json +1 -1
- package/dist/generated/themes/Avatar.css.d.ts +1 -1
- package/dist/generated/themes/Avatar.css.js +1 -1
- package/dist/generated/themes/Avatar.css.js.map +1 -1
- package/dist/generated/themes/AvatarGroup.css.d.ts +1 -1
- package/dist/generated/themes/AvatarGroup.css.js +1 -1
- package/dist/generated/themes/AvatarGroup.css.js.map +1 -1
- package/dist/generated/themes/ColorPicker.css.d.ts +1 -1
- package/dist/generated/themes/ColorPicker.css.js +1 -1
- package/dist/generated/themes/ColorPicker.css.js.map +1 -1
- package/dist/generated/themes/Form.css.d.ts +1 -1
- package/dist/generated/themes/Form.css.js +1 -1
- package/dist/generated/themes/Form.css.js.map +1 -1
- package/dist/generated/themes/FormItemSpan.css.d.ts +1 -1
- package/dist/generated/themes/FormItemSpan.css.js +1 -1
- package/dist/generated/themes/FormItemSpan.css.js.map +1 -1
- package/dist/generated/themes/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/ProgressIndicator.css.d.ts +1 -1
- package/dist/generated/themes/ProgressIndicator.css.js +1 -1
- package/dist/generated/themes/ProgressIndicator.css.js.map +1 -1
- package/dist/generated/themes/Slider.css.d.ts +2 -0
- package/dist/generated/themes/Slider.css.js +8 -0
- package/dist/generated/themes/Slider.css.js.map +1 -0
- package/dist/generated/themes/SliderHandle.css.d.ts +2 -0
- package/dist/generated/themes/SliderHandle.css.js +8 -0
- package/dist/generated/themes/SliderHandle.css.js.map +1 -0
- package/dist/generated/themes/SliderScale.css.d.ts +2 -0
- package/dist/generated/themes/SliderScale.css.js +8 -0
- package/dist/generated/themes/SliderScale.css.js.map +1 -0
- package/dist/generated/themes/ToolbarItem.css.d.ts +1 -1
- package/dist/generated/themes/ToolbarItem.css.js +1 -1
- package/dist/generated/themes/ToolbarItem.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js +1 -2
- 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 -2
- package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js.map +1 -1
- package/dist/types/AvatarMode.d.ts +30 -0
- package/dist/types/AvatarMode.js +32 -0
- package/dist/types/AvatarMode.js.map +1 -0
- package/dist/vscode.html-custom-data.json +35 -11
- package/dist/web-types.json +80 -19
- package/package.json +9 -9
- package/src/AvatarGroupTemplate.tsx +8 -1
- package/src/AvatarTemplate.tsx +1 -0
- package/src/ListItemGroupTemplate.tsx +9 -3
- package/src/PanelTemplate.tsx +2 -0
- package/src/SliderHandleTemplate.tsx +15 -0
- package/src/SliderScaleTemplate.tsx +32 -0
- package/src/SliderTemplate.tsx +85 -64
- package/src/i18n/messagebundle_ar.properties +14 -8
- package/src/i18n/messagebundle_bg.properties +14 -8
- package/src/i18n/messagebundle_ca.properties +14 -8
- package/src/i18n/messagebundle_cnr.properties +14 -8
- package/src/i18n/messagebundle_cs.properties +14 -8
- package/src/i18n/messagebundle_cy.properties +14 -8
- package/src/i18n/messagebundle_da.properties +14 -8
- package/src/i18n/messagebundle_de.properties +14 -8
- package/src/i18n/messagebundle_el.properties +14 -8
- package/src/i18n/messagebundle_en.properties +14 -8
- package/src/i18n/messagebundle_en_GB.properties +14 -8
- package/src/i18n/messagebundle_en_US_sappsd.properties +3 -3
- package/src/i18n/messagebundle_en_US_saprigi.properties +3 -3
- package/src/i18n/messagebundle_en_US_saptrc.properties +3 -3
- package/src/i18n/messagebundle_es.properties +16 -10
- package/src/i18n/messagebundle_es_MX.properties +15 -9
- package/src/i18n/messagebundle_et.properties +14 -8
- package/src/i18n/messagebundle_fi.properties +14 -8
- package/src/i18n/messagebundle_fr.properties +14 -8
- package/src/i18n/messagebundle_fr_CA.properties +15 -9
- package/src/i18n/messagebundle_hi.properties +14 -8
- package/src/i18n/messagebundle_hr.properties +14 -8
- package/src/i18n/messagebundle_hu.properties +14 -8
- package/src/i18n/messagebundle_id.properties +14 -8
- package/src/i18n/messagebundle_it.properties +14 -8
- package/src/i18n/messagebundle_iw.properties +14 -8
- package/src/i18n/messagebundle_ja.properties +14 -8
- package/src/i18n/messagebundle_kk.properties +14 -8
- package/src/i18n/messagebundle_ko.properties +14 -8
- package/src/i18n/messagebundle_lt.properties +14 -8
- package/src/i18n/messagebundle_lv.properties +14 -8
- package/src/i18n/messagebundle_mk.properties +14 -8
- package/src/i18n/messagebundle_ms.properties +14 -8
- package/src/i18n/messagebundle_nl.properties +14 -8
- package/src/i18n/messagebundle_no.properties +14 -8
- package/src/i18n/messagebundle_pl.properties +14 -8
- package/src/i18n/messagebundle_pt.properties +14 -8
- package/src/i18n/messagebundle_pt_PT.properties +14 -8
- package/src/i18n/messagebundle_ro.properties +14 -8
- package/src/i18n/messagebundle_ru.properties +14 -8
- package/src/i18n/messagebundle_sh.properties +14 -8
- package/src/i18n/messagebundle_sk.properties +14 -8
- package/src/i18n/messagebundle_sl.properties +14 -8
- package/src/i18n/messagebundle_sr.properties +14 -8
- package/src/i18n/messagebundle_sv.properties +14 -8
- package/src/i18n/messagebundle_th.properties +14 -8
- package/src/i18n/messagebundle_tr.properties +14 -8
- package/src/i18n/messagebundle_uk.properties +14 -8
- package/src/i18n/messagebundle_vi.properties +14 -8
- package/src/i18n/messagebundle_zh_CN.properties +14 -8
- package/src/i18n/messagebundle_zh_TW.properties +15 -9
- package/src/themes/Avatar.css +39 -14
- package/src/themes/AvatarGroup.css +24 -0
- package/src/themes/ColorPicker.css +23 -27
- package/src/themes/FormItemSpan.css +1 -1
- package/src/themes/Panel.css +5 -1
- package/src/themes/ProgressIndicator.css +1 -0
- package/src/themes/Slider.css +32 -0
- package/src/themes/SliderHandle.css +61 -0
- package/src/themes/SliderScale.css +149 -0
- package/src/themes/ToolbarItem.css +1 -1
- package/src/themes/base/SliderHandle-parameters.css +3 -0
- package/src/themes/base/SliderScale-parameters.css +13 -0
- package/src/themes/sap_fiori_3/Slider-parameters.css +11 -0
- package/src/themes/sap_fiori_3/SliderHandle-parameters.css +5 -0
- package/src/themes/sap_fiori_3/SliderScale-parameters.css +13 -0
- package/src/themes/sap_fiori_3/parameters-bundle.css +2 -0
- package/src/themes/sap_fiori_3_dark/Slider-parameters.css +11 -0
- package/src/themes/sap_fiori_3_dark/SliderHandle-parameters.css +5 -0
- package/src/themes/sap_fiori_3_dark/SliderScale-parameters.css +13 -0
- package/src/themes/sap_fiori_3_dark/parameters-bundle.css +2 -0
- package/src/themes/sap_fiori_3_hcb/Slider-parameters.css +11 -0
- package/src/themes/sap_fiori_3_hcb/SliderHandle-parameters.css +5 -0
- package/src/themes/sap_fiori_3_hcb/SliderScale-parameters.css +14 -0
- package/src/themes/sap_fiori_3_hcb/parameters-bundle.css +2 -0
- package/src/themes/sap_fiori_3_hcw/Slider-parameters.css +11 -0
- package/src/themes/sap_fiori_3_hcw/SliderHandle-parameters.css +5 -0
- package/src/themes/sap_fiori_3_hcw/SliderScale-parameters.css +14 -0
- package/src/themes/sap_fiori_3_hcw/parameters-bundle.css +2 -0
- package/src/themes/sap_horizon/AvatarGroup-parameters.css +20 -3
- package/src/themes/sap_horizon/Slider-parameters.css +11 -0
- package/src/themes/sap_horizon/SliderHandle-parameters.css +5 -0
- package/src/themes/sap_horizon/SliderScale-parameters.css +10 -0
- package/src/themes/sap_horizon/parameters-bundle.css +3 -0
- package/src/themes/sap_horizon/rtl-parameters.css +4 -0
- package/src/themes/sap_horizon_dark/Slider-parameters.css +11 -0
- package/src/themes/sap_horizon_dark/SliderHandle-parameters.css +5 -0
- package/src/themes/sap_horizon_dark/SliderScale-parameters.css +10 -0
- package/src/themes/sap_horizon_dark/parameters-bundle.css +3 -0
- package/src/themes/sap_horizon_dark/rtl-parameters.css +6 -0
- package/src/themes/sap_horizon_hcb/Slider-parameters.css +11 -0
- package/src/themes/sap_horizon_hcb/SliderHandle-parameters.css +5 -0
- package/src/themes/sap_horizon_hcb/SliderScale-parameters.css +10 -0
- package/src/themes/sap_horizon_hcb/parameters-bundle.css +3 -1
- package/src/themes/sap_horizon_hcb/rtl-parameters.css +1 -0
- package/src/themes/sap_horizon_hcw/Slider-parameters.css +11 -0
- package/src/themes/sap_horizon_hcw/SliderHandle-parameters.css +5 -0
- package/src/themes/sap_horizon_hcw/SliderScale-parameters.css +10 -0
- package/src/themes/sap_horizon_hcw/parameters-bundle.css +3 -1
- package/src/themes/sap_horizon_hcw/rtl-parameters.css +1 -0
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
2
|
+
import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
|
|
3
|
+
import type SliderHandle from "./SliderHandle.js";
|
|
4
|
+
type Tickmark = {
|
|
5
|
+
value: number;
|
|
6
|
+
label?: string;
|
|
7
|
+
};
|
|
8
|
+
declare enum SliderScaleOrientation {
|
|
9
|
+
/**
|
|
10
|
+
* Horizontal orientation
|
|
11
|
+
* @public
|
|
12
|
+
*/
|
|
13
|
+
Horizontal = "Horizontal",
|
|
14
|
+
/**
|
|
15
|
+
* Vertical orientation
|
|
16
|
+
* @private
|
|
17
|
+
*/
|
|
18
|
+
Vertical = "Vertical"
|
|
19
|
+
}
|
|
20
|
+
declare class SliderScale extends UI5Element {
|
|
21
|
+
/**
|
|
22
|
+
* Defines the start value of the progress bar.
|
|
23
|
+
* @default 0
|
|
24
|
+
* @private
|
|
25
|
+
*/
|
|
26
|
+
startValue: number;
|
|
27
|
+
/**
|
|
28
|
+
* Defines the end value of the progress bar.
|
|
29
|
+
* @default 100
|
|
30
|
+
* @private
|
|
31
|
+
*/
|
|
32
|
+
endValue: number;
|
|
33
|
+
/**
|
|
34
|
+
* Defines the minimum value of the scale.
|
|
35
|
+
* @default 0
|
|
36
|
+
* @private
|
|
37
|
+
*/
|
|
38
|
+
min: number;
|
|
39
|
+
/**
|
|
40
|
+
* Defines the maximum value of the scale.
|
|
41
|
+
* @default 100
|
|
42
|
+
* @private
|
|
43
|
+
*/
|
|
44
|
+
max: number;
|
|
45
|
+
/**
|
|
46
|
+
* Defines the step value for tickmarks.
|
|
47
|
+
* @default 1
|
|
48
|
+
* @private
|
|
49
|
+
*/
|
|
50
|
+
step: number;
|
|
51
|
+
/**
|
|
52
|
+
* Determines whether tickmarks should be displayed.
|
|
53
|
+
* @default false
|
|
54
|
+
* @private
|
|
55
|
+
*/
|
|
56
|
+
showTickmarks: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* Defines the orientation of the scale.
|
|
59
|
+
* @default "Horizontal"
|
|
60
|
+
* @private
|
|
61
|
+
*/
|
|
62
|
+
orientation: `${SliderScaleOrientation}`;
|
|
63
|
+
/**
|
|
64
|
+
* Defines custom tickmarks to be displayed on the scale.
|
|
65
|
+
* @default []
|
|
66
|
+
* @private
|
|
67
|
+
*/
|
|
68
|
+
tickmarks: Array<Tickmark>;
|
|
69
|
+
/**
|
|
70
|
+
* Defines the interval for displaying labels on tickmarks.
|
|
71
|
+
* @default 0
|
|
72
|
+
* @private
|
|
73
|
+
*/
|
|
74
|
+
labelInterval: number;
|
|
75
|
+
/**
|
|
76
|
+
* @private
|
|
77
|
+
*/
|
|
78
|
+
_labelInterval: number;
|
|
79
|
+
_labelsOverlapping: boolean;
|
|
80
|
+
_hiddenTickmarks: boolean;
|
|
81
|
+
_resizeHandler: ResizeObserverCallback;
|
|
82
|
+
_notResized: boolean;
|
|
83
|
+
/**
|
|
84
|
+
* Defines the component items.
|
|
85
|
+
* @public
|
|
86
|
+
*/
|
|
87
|
+
handles: Array<SliderHandle>;
|
|
88
|
+
static get MIN_LABEL_DISTANCE(): number;
|
|
89
|
+
static get MIN_SPACE_BETWEEN_TICKMARKS(): number;
|
|
90
|
+
constructor();
|
|
91
|
+
onEnterDOM(): void;
|
|
92
|
+
onExitDOM(): void;
|
|
93
|
+
onAfterRendering(): void;
|
|
94
|
+
/**
|
|
95
|
+
* Handle the responsiveness of the SliderScale's UI elements when resizing
|
|
96
|
+
* @private
|
|
97
|
+
*/
|
|
98
|
+
_handleResize(): void;
|
|
99
|
+
/**
|
|
100
|
+
* Calculates space between tickmarks
|
|
101
|
+
* @private
|
|
102
|
+
*/
|
|
103
|
+
_spaceBetweenTickmarks(): number;
|
|
104
|
+
get _tickmarksCount(): number;
|
|
105
|
+
get _visibleLabels(): {
|
|
106
|
+
value: number;
|
|
107
|
+
label: string;
|
|
108
|
+
isInRange: boolean;
|
|
109
|
+
position: number;
|
|
110
|
+
showLabel: boolean;
|
|
111
|
+
visible: boolean;
|
|
112
|
+
}[];
|
|
113
|
+
get _progressStyle(): {
|
|
114
|
+
top: string;
|
|
115
|
+
bottom: string;
|
|
116
|
+
height: string;
|
|
117
|
+
insetInlineStart?: undefined;
|
|
118
|
+
width?: undefined;
|
|
119
|
+
} | {
|
|
120
|
+
insetInlineStart: string;
|
|
121
|
+
width: string;
|
|
122
|
+
top?: undefined;
|
|
123
|
+
bottom?: undefined;
|
|
124
|
+
height?: undefined;
|
|
125
|
+
};
|
|
126
|
+
get _allTickmarks(): Tickmark[];
|
|
127
|
+
get _tickmarks(): {
|
|
128
|
+
value: number;
|
|
129
|
+
label: string;
|
|
130
|
+
isInRange: boolean;
|
|
131
|
+
position: number;
|
|
132
|
+
showLabel: boolean;
|
|
133
|
+
visible: boolean;
|
|
134
|
+
}[];
|
|
135
|
+
}
|
|
136
|
+
export default SliderScale;
|
|
137
|
+
export { SliderScaleOrientation };
|
|
138
|
+
export type { Tickmark };
|
|
@@ -0,0 +1,300 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
var SliderScale_1;
|
|
8
|
+
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
9
|
+
import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
|
|
10
|
+
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
|
|
11
|
+
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
|
|
12
|
+
import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
|
|
13
|
+
import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
|
|
14
|
+
import SliderBase from "./SliderBase.js";
|
|
15
|
+
import SliderScaleTemplate from "./SliderScaleTemplate.js";
|
|
16
|
+
import SliderScaleCss from "./generated/themes/SliderScale.css.js";
|
|
17
|
+
var SliderScaleOrientation;
|
|
18
|
+
(function (SliderScaleOrientation) {
|
|
19
|
+
/**
|
|
20
|
+
* Horizontal orientation
|
|
21
|
+
* @public
|
|
22
|
+
*/
|
|
23
|
+
SliderScaleOrientation["Horizontal"] = "Horizontal";
|
|
24
|
+
/**
|
|
25
|
+
* Vertical orientation
|
|
26
|
+
* @private
|
|
27
|
+
*/
|
|
28
|
+
SliderScaleOrientation["Vertical"] = "Vertical";
|
|
29
|
+
})(SliderScaleOrientation || (SliderScaleOrientation = {}));
|
|
30
|
+
let SliderScale = SliderScale_1 = class SliderScale extends UI5Element {
|
|
31
|
+
static get MIN_LABEL_DISTANCE() {
|
|
32
|
+
return 16;
|
|
33
|
+
}
|
|
34
|
+
static get MIN_SPACE_BETWEEN_TICKMARKS() {
|
|
35
|
+
return 8;
|
|
36
|
+
}
|
|
37
|
+
constructor() {
|
|
38
|
+
super();
|
|
39
|
+
/**
|
|
40
|
+
* Defines the start value of the progress bar.
|
|
41
|
+
* @default 0
|
|
42
|
+
* @private
|
|
43
|
+
*/
|
|
44
|
+
this.startValue = 0;
|
|
45
|
+
/**
|
|
46
|
+
* Defines the end value of the progress bar.
|
|
47
|
+
* @default 100
|
|
48
|
+
* @private
|
|
49
|
+
*/
|
|
50
|
+
this.endValue = 100;
|
|
51
|
+
/**
|
|
52
|
+
* Defines the minimum value of the scale.
|
|
53
|
+
* @default 0
|
|
54
|
+
* @private
|
|
55
|
+
*/
|
|
56
|
+
this.min = 0;
|
|
57
|
+
/**
|
|
58
|
+
* Defines the maximum value of the scale.
|
|
59
|
+
* @default 100
|
|
60
|
+
* @private
|
|
61
|
+
*/
|
|
62
|
+
this.max = 100;
|
|
63
|
+
/**
|
|
64
|
+
* Defines the step value for tickmarks.
|
|
65
|
+
* @default 1
|
|
66
|
+
* @private
|
|
67
|
+
*/
|
|
68
|
+
this.step = 1;
|
|
69
|
+
/**
|
|
70
|
+
* Determines whether tickmarks should be displayed.
|
|
71
|
+
* @default false
|
|
72
|
+
* @private
|
|
73
|
+
*/
|
|
74
|
+
this.showTickmarks = false;
|
|
75
|
+
/**
|
|
76
|
+
* Defines the orientation of the scale.
|
|
77
|
+
* @default "Horizontal"
|
|
78
|
+
* @private
|
|
79
|
+
*/
|
|
80
|
+
this.orientation = "Horizontal";
|
|
81
|
+
/**
|
|
82
|
+
* Defines custom tickmarks to be displayed on the scale.
|
|
83
|
+
* @default []
|
|
84
|
+
* @private
|
|
85
|
+
*/
|
|
86
|
+
this.tickmarks = [];
|
|
87
|
+
/**
|
|
88
|
+
* Defines the interval for displaying labels on tickmarks.
|
|
89
|
+
* @default 0
|
|
90
|
+
* @private
|
|
91
|
+
*/
|
|
92
|
+
this.labelInterval = 0;
|
|
93
|
+
/**
|
|
94
|
+
* @private
|
|
95
|
+
*/
|
|
96
|
+
this._labelInterval = 1;
|
|
97
|
+
this._labelsOverlapping = false;
|
|
98
|
+
this._hiddenTickmarks = false;
|
|
99
|
+
this._notResized = true;
|
|
100
|
+
this._resizeHandler = this._handleResize.bind(this);
|
|
101
|
+
}
|
|
102
|
+
onEnterDOM() {
|
|
103
|
+
ResizeHandler.register(this, this._resizeHandler);
|
|
104
|
+
}
|
|
105
|
+
onExitDOM() {
|
|
106
|
+
ResizeHandler.deregister(this, this._resizeHandler);
|
|
107
|
+
}
|
|
108
|
+
onAfterRendering() {
|
|
109
|
+
if (this._notResized) {
|
|
110
|
+
this._handleResize();
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
/**
|
|
114
|
+
* Handle the responsiveness of the SliderScale's UI elements when resizing
|
|
115
|
+
* @private
|
|
116
|
+
*/
|
|
117
|
+
_handleResize() {
|
|
118
|
+
if (!this.showTickmarks) {
|
|
119
|
+
this._hiddenTickmarks = false;
|
|
120
|
+
this._labelsOverlapping = false;
|
|
121
|
+
return;
|
|
122
|
+
}
|
|
123
|
+
// Mark resizing to avoid unnecessary calls to that function after rendering
|
|
124
|
+
this._notResized = false;
|
|
125
|
+
const containerSize = this.orientation === SliderScaleOrientation.Horizontal
|
|
126
|
+
? this.getBoundingClientRect().width
|
|
127
|
+
: this.getBoundingClientRect().height;
|
|
128
|
+
const tickmarksCount = this._tickmarksCount;
|
|
129
|
+
// Check if tickmarks should be hidden due to insufficient space
|
|
130
|
+
if (tickmarksCount > 1) {
|
|
131
|
+
const spaceBetweenTickmarks = containerSize / tickmarksCount;
|
|
132
|
+
this._hiddenTickmarks = spaceBetweenTickmarks < SliderScale_1.MIN_SPACE_BETWEEN_TICKMARKS;
|
|
133
|
+
}
|
|
134
|
+
else {
|
|
135
|
+
this._hiddenTickmarks = false;
|
|
136
|
+
}
|
|
137
|
+
// Check if labels should be hidden due to insufficient space or overlapping
|
|
138
|
+
if (this.labelInterval <= 0 || this._hiddenTickmarks) {
|
|
139
|
+
this._labelsOverlapping = true;
|
|
140
|
+
}
|
|
141
|
+
else {
|
|
142
|
+
// Calculate if labels would overlap based on their estimated width
|
|
143
|
+
const visibleLabelCount = Math.ceil((tickmarksCount - 1) / this.labelInterval) + 1;
|
|
144
|
+
const estimatedLabelWidth = 32; // Estimated width in pixels for a label (2rem = ~32px)
|
|
145
|
+
const requiredWidth = visibleLabelCount * estimatedLabelWidth;
|
|
146
|
+
this._labelsOverlapping = containerSize < requiredWidth;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
/**
|
|
150
|
+
* Calculates space between tickmarks
|
|
151
|
+
* @private
|
|
152
|
+
*/
|
|
153
|
+
_spaceBetweenTickmarks() {
|
|
154
|
+
const tickmarksCount = this._tickmarksCount;
|
|
155
|
+
if (tickmarksCount <= 1) {
|
|
156
|
+
return 0;
|
|
157
|
+
}
|
|
158
|
+
const containerSize = this.orientation === SliderScaleOrientation.Horizontal
|
|
159
|
+
? this.getBoundingClientRect().width
|
|
160
|
+
: this.getBoundingClientRect().height;
|
|
161
|
+
return containerSize / tickmarksCount;
|
|
162
|
+
}
|
|
163
|
+
get _tickmarksCount() {
|
|
164
|
+
if (this.step === 0) {
|
|
165
|
+
return 0;
|
|
166
|
+
}
|
|
167
|
+
return (this.max - this.min) / this.step;
|
|
168
|
+
}
|
|
169
|
+
get _visibleLabels() {
|
|
170
|
+
return this._tickmarks.filter(tick => tick.showLabel);
|
|
171
|
+
}
|
|
172
|
+
get _progressStyle() {
|
|
173
|
+
const range = this.max - this.min;
|
|
174
|
+
// Clamp startValue and endValue to be within min/max bounds
|
|
175
|
+
const clampedStartValue = Math.max(this.min, Math.min(this.startValue, this.max));
|
|
176
|
+
const clampedEndValue = Math.max(this.min, Math.min(this.endValue, this.max));
|
|
177
|
+
const start = ((clampedStartValue - this.min) / range) * 100;
|
|
178
|
+
const end = ((clampedEndValue - this.min) / range) * 100;
|
|
179
|
+
if (this.orientation === SliderScaleOrientation.Vertical) {
|
|
180
|
+
return {
|
|
181
|
+
top: "auto",
|
|
182
|
+
bottom: `${start}%`,
|
|
183
|
+
height: `${end - start}%`,
|
|
184
|
+
};
|
|
185
|
+
}
|
|
186
|
+
return {
|
|
187
|
+
insetInlineStart: `${start}%`,
|
|
188
|
+
width: `${end - start}%`,
|
|
189
|
+
};
|
|
190
|
+
}
|
|
191
|
+
get _allTickmarks() {
|
|
192
|
+
// If custom tickmarks are provided, use them
|
|
193
|
+
if (this.tickmarks.length > 0) {
|
|
194
|
+
return this.tickmarks;
|
|
195
|
+
}
|
|
196
|
+
// Otherwise, generate tickmarks based on step
|
|
197
|
+
if (!this.showTickmarks) {
|
|
198
|
+
return [];
|
|
199
|
+
}
|
|
200
|
+
if (this.step === 0) {
|
|
201
|
+
return [];
|
|
202
|
+
}
|
|
203
|
+
const values = [];
|
|
204
|
+
for (let value = this.min; value <= this.max; value += this.step) {
|
|
205
|
+
values.push({ value });
|
|
206
|
+
}
|
|
207
|
+
return values;
|
|
208
|
+
}
|
|
209
|
+
get _tickmarks() {
|
|
210
|
+
const allTickmarks = this._allTickmarks;
|
|
211
|
+
const stepPrecision = SliderBase._getDecimalPrecisionOfNumber(this.step);
|
|
212
|
+
const formatLabelPrecision = stepPrecision > 0 ? stepPrecision : 0;
|
|
213
|
+
if (allTickmarks.length === 0) {
|
|
214
|
+
return [];
|
|
215
|
+
}
|
|
216
|
+
return allTickmarks.map((tm, index) => {
|
|
217
|
+
const value = tm.value;
|
|
218
|
+
const isFirstOrLast = index === 0 || index === allTickmarks.length - 1;
|
|
219
|
+
const position = ((value - this.min) / (this.max - this.min)) * 100;
|
|
220
|
+
// Determine if this tickmark should be visible
|
|
221
|
+
const shouldShowTickmark = this._hiddenTickmarks ? isFirstOrLast : true;
|
|
222
|
+
// Determine if the label should be visible
|
|
223
|
+
let showLabel = false;
|
|
224
|
+
if (shouldShowTickmark && !this._labelsOverlapping) {
|
|
225
|
+
if (this.labelInterval > 0) {
|
|
226
|
+
showLabel = index % this.labelInterval === 0;
|
|
227
|
+
}
|
|
228
|
+
else {
|
|
229
|
+
showLabel = true;
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
else if (shouldShowTickmark && this._labelsOverlapping && this.labelInterval > 0) {
|
|
233
|
+
// When labels overlap, only show first and last
|
|
234
|
+
showLabel = isFirstOrLast;
|
|
235
|
+
}
|
|
236
|
+
return {
|
|
237
|
+
value,
|
|
238
|
+
label: tm.label || value.toFixed(formatLabelPrecision),
|
|
239
|
+
isInRange: value >= this.startValue && value <= this.endValue,
|
|
240
|
+
position,
|
|
241
|
+
showLabel,
|
|
242
|
+
visible: shouldShowTickmark,
|
|
243
|
+
};
|
|
244
|
+
}).filter(tick => tick.visible);
|
|
245
|
+
}
|
|
246
|
+
};
|
|
247
|
+
__decorate([
|
|
248
|
+
property({ type: Number })
|
|
249
|
+
], SliderScale.prototype, "startValue", void 0);
|
|
250
|
+
__decorate([
|
|
251
|
+
property({ type: Number })
|
|
252
|
+
], SliderScale.prototype, "endValue", void 0);
|
|
253
|
+
__decorate([
|
|
254
|
+
property({ type: Number })
|
|
255
|
+
], SliderScale.prototype, "min", void 0);
|
|
256
|
+
__decorate([
|
|
257
|
+
property({ type: Number })
|
|
258
|
+
], SliderScale.prototype, "max", void 0);
|
|
259
|
+
__decorate([
|
|
260
|
+
property({ type: Number })
|
|
261
|
+
], SliderScale.prototype, "step", void 0);
|
|
262
|
+
__decorate([
|
|
263
|
+
property({ type: Boolean })
|
|
264
|
+
], SliderScale.prototype, "showTickmarks", void 0);
|
|
265
|
+
__decorate([
|
|
266
|
+
property()
|
|
267
|
+
], SliderScale.prototype, "orientation", void 0);
|
|
268
|
+
__decorate([
|
|
269
|
+
property({ type: Array })
|
|
270
|
+
], SliderScale.prototype, "tickmarks", void 0);
|
|
271
|
+
__decorate([
|
|
272
|
+
property({ type: Number })
|
|
273
|
+
], SliderScale.prototype, "labelInterval", void 0);
|
|
274
|
+
__decorate([
|
|
275
|
+
property({ type: Number })
|
|
276
|
+
], SliderScale.prototype, "_labelInterval", void 0);
|
|
277
|
+
__decorate([
|
|
278
|
+
property({ type: Boolean })
|
|
279
|
+
], SliderScale.prototype, "_labelsOverlapping", void 0);
|
|
280
|
+
__decorate([
|
|
281
|
+
property({ type: Boolean })
|
|
282
|
+
], SliderScale.prototype, "_hiddenTickmarks", void 0);
|
|
283
|
+
__decorate([
|
|
284
|
+
slot({
|
|
285
|
+
type: HTMLElement,
|
|
286
|
+
"default": true,
|
|
287
|
+
})
|
|
288
|
+
], SliderScale.prototype, "handles", void 0);
|
|
289
|
+
SliderScale = SliderScale_1 = __decorate([
|
|
290
|
+
customElement({
|
|
291
|
+
tag: "ui5-slider-scale",
|
|
292
|
+
renderer: jsxRenderer,
|
|
293
|
+
styles: SliderScaleCss,
|
|
294
|
+
template: SliderScaleTemplate,
|
|
295
|
+
})
|
|
296
|
+
], SliderScale);
|
|
297
|
+
SliderScale.define();
|
|
298
|
+
export default SliderScale;
|
|
299
|
+
export { SliderScaleOrientation };
|
|
300
|
+
//# sourceMappingURL=SliderScale.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SliderScale.js","sourceRoot":"","sources":["../src/SliderScale.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,aAAa,MAAM,wDAAwD,CAAC;AAEnF,OAAO,UAAU,MAAM,iBAAiB,CAAC;AACzC,OAAO,mBAAmB,MAAM,0BAA0B,CAAC;AAE3D,OAAO,cAAc,MAAM,uCAAuC,CAAC;AAQnE,IAAK,sBAYJ;AAZD,WAAK,sBAAsB;IAC1B;;;OAGG;IACH,mDAAyB,CAAA;IAEzB;;;OAGG;IACH,+CAAqB,CAAA;AACtB,CAAC,EAZI,sBAAsB,KAAtB,sBAAsB,QAY1B;AAQD,IAAM,WAAW,mBAAjB,MAAM,WAAY,SAAQ,UAAU;IAkGnC,MAAM,KAAK,kBAAkB;QAC5B,OAAO,EAAE,CAAC;IACX,CAAC;IAED,MAAM,KAAK,2BAA2B;QACrC,OAAO,CAAC,CAAC;IACV,CAAC;IAED;QACC,KAAK,EAAE,CAAC;QA1GT;;;;WAIG;QAEH,eAAU,GAAG,CAAC,CAAC;QAEf;;;;WAIG;QAEH,aAAQ,GAAG,GAAG,CAAC;QAEf;;;;WAIG;QAEH,QAAG,GAAG,CAAC,CAAC;QAER;;;;WAIG;QAEH,QAAG,GAAG,GAAG,CAAC;QAEV;;;;WAIG;QAEH,SAAI,GAAG,CAAC,CAAC;QAET;;;;WAIG;QAEH,kBAAa,GAAG,KAAK,CAAC;QAEtB;;;;WAIG;QAEH,gBAAW,GAAgC,YAAY,CAAC;QAExD;;;;WAIG;QAEH,cAAS,GAAoB,EAAE,CAAC;QAEhC;;;;WAIG;QAEH,kBAAa,GAAG,CAAC,CAAC;QAElB;;WAEG;QAEH,mBAAc,GAAG,CAAC,CAAC;QAGnB,uBAAkB,GAAG,KAAK,CAAC;QAG3B,qBAAgB,GAAG,KAAK,CAAC;QAGzB,gBAAW,GAAG,IAAI,CAAC;QAsBlB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrD,CAAC;IAED,UAAU;QACT,aAAa,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IACnD,CAAC;IAED,SAAS;QACR,aAAa,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IACrD,CAAC;IAED,gBAAgB;QACf,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,IAAI,CAAC,aAAa,EAAE,CAAC;QACtB,CAAC;IACF,CAAC;IAED;;;OAGG;IACH,aAAa;QACZ,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACzB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;YAC9B,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;YAChC,OAAO;QACR,CAAC;QAED,4EAA4E;QAC5E,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QAEzB,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,KAAK,sBAAsB,CAAC,UAAU;YAC3E,CAAC,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK;YACpC,CAAC,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QAEvC,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC;QAE5C,gEAAgE;QAChE,IAAI,cAAc,GAAG,CAAC,EAAE,CAAC;YACxB,MAAM,qBAAqB,GAAG,aAAa,GAAG,cAAc,CAAC;YAC7D,IAAI,CAAC,gBAAgB,GAAG,qBAAqB,GAAG,aAAW,CAAC,2BAA2B,CAAC;QACzF,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC/B,CAAC;QAED,4EAA4E;QAC5E,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACtD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;QAChC,CAAC;aAAM,CAAC;YACP,mEAAmE;YACnE,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,cAAc,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YACnF,MAAM,mBAAmB,GAAG,EAAE,CAAC,CAAC,uDAAuD;YACvF,MAAM,aAAa,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;YAC9D,IAAI,CAAC,kBAAkB,GAAG,aAAa,GAAG,aAAa,CAAC;QACzD,CAAC;IACF,CAAC;IAED;;;OAGG;IACH,sBAAsB;QACrB,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC;QAC5C,IAAI,cAAc,IAAI,CAAC,EAAE,CAAC;YACzB,OAAO,CAAC,CAAC;QACV,CAAC;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,KAAK,sBAAsB,CAAC,UAAU;YAC3E,CAAC,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK;YACpC,CAAC,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QAEvC,OAAO,aAAa,GAAG,cAAc,CAAC;IACvC,CAAC;IAED,IAAI,eAAe;QAClB,IAAI,IAAI,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;YACrB,OAAO,CAAC,CAAC;QACV,CAAC;QAED,OAAO,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAC1C,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACvD,CAAC;IAED,IAAI,cAAc;QACjB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QAClC,4DAA4D;QAC5D,MAAM,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QAClF,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QAE9E,MAAM,KAAK,GAAG,CAAC,CAAC,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC;QAC7D,MAAM,GAAG,GAAG,CAAC,CAAC,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC;QAEzD,IAAI,IAAI,CAAC,WAAW,KAAK,sBAAsB,CAAC,QAAQ,EAAE,CAAC;YAC1D,OAAO;gBACN,GAAG,EAAE,MAAM;gBACX,MAAM,EAAE,GAAG,KAAK,GAAG;gBACnB,MAAM,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG;aACzB,CAAC;QACH,CAAC;QAED,OAAO;YACN,gBAAgB,EAAE,GAAG,KAAK,GAAG;YAC7B,KAAK,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG;SACxB,CAAC;IACH,CAAC;IAED,IAAI,aAAa;QAChB,6CAA6C;QAC7C,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC/B,OAAO,IAAI,CAAC,SAAS,CAAC;QACvB,CAAC;QAED,8CAA8C;QAC9C,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACzB,OAAO,EAAE,CAAC;QACX,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;YACrB,OAAO,EAAE,CAAC;QACX,CAAC;QAED,MAAM,MAAM,GAAG,EAAE,CAAC;QAClB,KAAK,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,KAAK,IAAI,IAAI,CAAC,GAAG,EAAE,KAAK,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAClE,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QACxB,CAAC;QACD,OAAO,MAAM,CAAC;IACf,CAAC;IAED,IAAI,UAAU;QACb,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC;QACxC,MAAM,aAAa,GAAG,UAAU,CAAC,4BAA4B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzE,MAAM,oBAAoB,GAAG,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;QAEnE,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC/B,OAAO,EAAE,CAAC;QACX,CAAC;QAED,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;YACrC,MAAM,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC;YACvB,MAAM,aAAa,GAAG,KAAK,KAAK,CAAC,IAAI,KAAK,KAAK,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;YACvE,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;YAEpE,+CAA+C;YAC/C,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC;YAExE,2CAA2C;YAC3C,IAAI,SAAS,GAAG,KAAK,CAAC;YACtB,IAAI,kBAAkB,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBACpD,IAAI,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE,CAAC;oBAC5B,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC,aAAa,KAAK,CAAC,CAAC;gBAC9C,CAAC;qBAAM,CAAC;oBACP,SAAS,GAAG,IAAI,CAAC;gBAClB,CAAC;YACF,CAAC;iBAAM,IAAI,kBAAkB,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE,CAAC;gBACpF,gDAAgD;gBAChD,SAAS,GAAG,aAAa,CAAC;YAC3B,CAAC;YAED,OAAO;gBACN,KAAK;gBACL,KAAK,EAAE,EAAE,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC;gBACtD,SAAS,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,IAAI,KAAK,IAAI,IAAI,CAAC,QAAQ;gBAC7D,QAAQ;gBACR,SAAS;gBACT,OAAO,EAAE,kBAAkB;aAC3B,CAAC;QACH,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACjC,CAAC;CACD,CAAA;AAhRA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACZ;AAQf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACZ;AAQf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACnB;AAQR;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACjB;AAQV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAClB;AAQT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACN;AAQtB;IADC,QAAQ,EAAE;gDAC6C;AAQxD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;8CACM;AAQhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACT;AAMlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACR;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDACD;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDACH;AAazB;IAJC,IAAI,CAAC;QACL,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,IAAI;KACf,CAAC;4CAC4B;AAhGzB,WAAW;IANhB,aAAa,CAAC;QACd,GAAG,EAAE,kBAAkB;QACvB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,cAAc;QACtB,QAAQ,EAAE,mBAAmB;KAC7B,CAAC;GACI,WAAW,CAuRhB;AAED,WAAW,CAAC,MAAM,EAAE,CAAC;AAErB,eAAe,WAAW,CAAC;AAC3B,OAAO,EAAE,sBAAsB,EAAE,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport SliderBase from \"./SliderBase.js\";\nimport SliderScaleTemplate from \"./SliderScaleTemplate.js\";\n\nimport SliderScaleCss from \"./generated/themes/SliderScale.css.js\";\nimport type SliderHandle from \"./SliderHandle.js\";\n\ntype Tickmark = {\n\tvalue: number;\n\tlabel?: string;\n};\n\nenum SliderScaleOrientation {\n\t/**\n\t * Horizontal orientation\n\t * @public\n\t */\n\tHorizontal = \"Horizontal\",\n\n\t/**\n\t * Vertical orientation\n\t * @private\n\t */\n\tVertical = \"Vertical\",\n}\n\n@customElement({\n\ttag: \"ui5-slider-scale\",\n\trenderer: jsxRenderer,\n\tstyles: SliderScaleCss,\n\ttemplate: SliderScaleTemplate,\n})\nclass SliderScale extends UI5Element {\n\t/**\n\t * Defines the start value of the progress bar.\n\t * @default 0\n\t * @private\n\t */\n\t@property({ type: Number })\n\tstartValue = 0;\n\n\t/**\n\t * Defines the end value of the progress bar.\n\t * @default 100\n\t * @private\n\t */\n\t@property({ type: Number })\n\tendValue = 100;\n\n\t/**\n\t * Defines the minimum value of the scale.\n\t * @default 0\n\t * @private\n\t */\n\t@property({ type: Number })\n\tmin = 0;\n\n\t/**\n\t * Defines the maximum value of the scale.\n\t * @default 100\n\t * @private\n\t */\n\t@property({ type: Number })\n\tmax = 100;\n\n\t/**\n\t * Defines the step value for tickmarks.\n\t * @default 1\n\t * @private\n\t */\n\t@property({ type: Number })\n\tstep = 1;\n\n\t/**\n\t * Determines whether tickmarks should be displayed.\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tshowTickmarks = false;\n\n\t/**\n\t * Defines the orientation of the scale.\n\t * @default \"Horizontal\"\n\t * @private\n\t */\n\t@property()\n\torientation: `${SliderScaleOrientation}` = \"Horizontal\";\n\n\t/**\n\t * Defines custom tickmarks to be displayed on the scale.\n\t * @default []\n\t * @private\n\t */\n\t@property({ type: Array })\n\ttickmarks: Array<Tickmark> = [];\n\n\t/**\n\t * Defines the interval for displaying labels on tickmarks.\n\t * @default 0\n\t * @private\n\t */\n\t@property({ type: Number })\n\tlabelInterval = 0;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Number })\n\t_labelInterval = 1;\n\n\t@property({ type: Boolean })\n\t_labelsOverlapping = false;\n\n\t@property({ type: Boolean })\n\t_hiddenTickmarks = false;\n\n\t_resizeHandler: ResizeObserverCallback;\n\t_notResized = true;\n\n\t/**\n\t * Defines the component items.\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\t\"default\": true,\n\t})\n\thandles!: Array<SliderHandle>;\n\n\tstatic get MIN_LABEL_DISTANCE() {\n\t\treturn 16;\n\t}\n\n\tstatic get MIN_SPACE_BETWEEN_TICKMARKS() {\n\t\treturn 8;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._resizeHandler = this._handleResize.bind(this);\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._resizeHandler);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._resizeHandler);\n\t}\n\n\tonAfterRendering() {\n\t\tif (this._notResized) {\n\t\t\tthis._handleResize();\n\t\t}\n\t}\n\n\t/**\n\t * Handle the responsiveness of the SliderScale's UI elements when resizing\n\t * @private\n\t */\n\t_handleResize() {\n\t\tif (!this.showTickmarks) {\n\t\t\tthis._hiddenTickmarks = false;\n\t\t\tthis._labelsOverlapping = false;\n\t\t\treturn;\n\t\t}\n\n\t\t// Mark resizing to avoid unnecessary calls to that function after rendering\n\t\tthis._notResized = false;\n\n\t\tconst containerSize = this.orientation === SliderScaleOrientation.Horizontal\n\t\t\t? this.getBoundingClientRect().width\n\t\t\t: this.getBoundingClientRect().height;\n\n\t\tconst tickmarksCount = this._tickmarksCount;\n\n\t\t// Check if tickmarks should be hidden due to insufficient space\n\t\tif (tickmarksCount > 1) {\n\t\t\tconst spaceBetweenTickmarks = containerSize / tickmarksCount;\n\t\t\tthis._hiddenTickmarks = spaceBetweenTickmarks < SliderScale.MIN_SPACE_BETWEEN_TICKMARKS;\n\t\t} else {\n\t\t\tthis._hiddenTickmarks = false;\n\t\t}\n\n\t\t// Check if labels should be hidden due to insufficient space or overlapping\n\t\tif (this.labelInterval <= 0 || this._hiddenTickmarks) {\n\t\t\tthis._labelsOverlapping = true;\n\t\t} else {\n\t\t\t// Calculate if labels would overlap based on their estimated width\n\t\t\tconst visibleLabelCount = Math.ceil((tickmarksCount - 1) / this.labelInterval) + 1;\n\t\t\tconst estimatedLabelWidth = 32; // Estimated width in pixels for a label (2rem = ~32px)\n\t\t\tconst requiredWidth = visibleLabelCount * estimatedLabelWidth;\n\t\t\tthis._labelsOverlapping = containerSize < requiredWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Calculates space between tickmarks\n\t * @private\n\t */\n\t_spaceBetweenTickmarks() {\n\t\tconst tickmarksCount = this._tickmarksCount;\n\t\tif (tickmarksCount <= 1) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tconst containerSize = this.orientation === SliderScaleOrientation.Horizontal\n\t\t\t? this.getBoundingClientRect().width\n\t\t\t: this.getBoundingClientRect().height;\n\n\t\treturn containerSize / tickmarksCount;\n\t}\n\n\tget _tickmarksCount() {\n\t\tif (this.step === 0) {\n\t\t\treturn 0;\n\t\t}\n\n\t\treturn (this.max - this.min) / this.step;\n\t}\n\n\tget _visibleLabels() {\n\t\treturn this._tickmarks.filter(tick => tick.showLabel);\n\t}\n\n\tget _progressStyle() {\n\t\tconst range = this.max - this.min;\n\t\t// Clamp startValue and endValue to be within min/max bounds\n\t\tconst clampedStartValue = Math.max(this.min, Math.min(this.startValue, this.max));\n\t\tconst clampedEndValue = Math.max(this.min, Math.min(this.endValue, this.max));\n\n\t\tconst start = ((clampedStartValue - this.min) / range) * 100;\n\t\tconst end = ((clampedEndValue - this.min) / range) * 100;\n\n\t\tif (this.orientation === SliderScaleOrientation.Vertical) {\n\t\t\treturn {\n\t\t\t\ttop: \"auto\",\n\t\t\t\tbottom: `${start}%`,\n\t\t\t\theight: `${end - start}%`,\n\t\t\t};\n\t\t}\n\n\t\treturn {\n\t\t\tinsetInlineStart: `${start}%`,\n\t\t\twidth: `${end - start}%`,\n\t\t};\n\t}\n\n\tget _allTickmarks() {\n\t\t// If custom tickmarks are provided, use them\n\t\tif (this.tickmarks.length > 0) {\n\t\t\treturn this.tickmarks;\n\t\t}\n\n\t\t// Otherwise, generate tickmarks based on step\n\t\tif (!this.showTickmarks) {\n\t\t\treturn [];\n\t\t}\n\n\t\tif (this.step === 0) {\n\t\t\treturn [];\n\t\t}\n\n\t\tconst values = [];\n\t\tfor (let value = this.min; value <= this.max; value += this.step) {\n\t\t\tvalues.push({ value });\n\t\t}\n\t\treturn values;\n\t}\n\n\tget _tickmarks() {\n\t\tconst allTickmarks = this._allTickmarks;\n\t\tconst stepPrecision = SliderBase._getDecimalPrecisionOfNumber(this.step);\n\t\tconst formatLabelPrecision = stepPrecision > 0 ? stepPrecision : 0;\n\n\t\tif (allTickmarks.length === 0) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn allTickmarks.map((tm, index) => {\n\t\t\tconst value = tm.value;\n\t\t\tconst isFirstOrLast = index === 0 || index === allTickmarks.length - 1;\n\t\t\tconst position = ((value - this.min) / (this.max - this.min)) * 100;\n\n\t\t\t// Determine if this tickmark should be visible\n\t\t\tconst shouldShowTickmark = this._hiddenTickmarks ? isFirstOrLast : true;\n\n\t\t\t// Determine if the label should be visible\n\t\t\tlet showLabel = false;\n\t\t\tif (shouldShowTickmark && !this._labelsOverlapping) {\n\t\t\t\tif (this.labelInterval > 0) {\n\t\t\t\t\tshowLabel = index % this.labelInterval === 0;\n\t\t\t\t} else {\n\t\t\t\t\tshowLabel = true;\n\t\t\t\t}\n\t\t\t} else if (shouldShowTickmark && this._labelsOverlapping && this.labelInterval > 0) {\n\t\t\t\t// When labels overlap, only show first and last\n\t\t\t\tshowLabel = isFirstOrLast;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tvalue,\n\t\t\t\tlabel: tm.label || value.toFixed(formatLabelPrecision),\n\t\t\t\tisInRange: value >= this.startValue && value <= this.endValue,\n\t\t\t\tposition,\n\t\t\t\tshowLabel,\n\t\t\t\tvisible: shouldShowTickmark,\n\t\t\t};\n\t\t}).filter(tick => tick.visible);\n\t}\n}\n\nSliderScale.define();\n\nexport default SliderScale;\nexport { SliderScaleOrientation };\nexport type { Tickmark };\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
|
|
2
|
+
export default function SliderScaleTemplate() {
|
|
3
|
+
return (_jsxs("div", { class: "ui5-slider-scale-root", part: "inner", children: [this._tickmarks.length > 0 && (_jsx("div", { class: "ui5-slider-scale-tickmarks-container", children: this._tickmarks.map(tick => (_jsx("div", { class: {
|
|
4
|
+
"ui5-slider-scale-tickmark": true,
|
|
5
|
+
"ui5-slider-scale-tickmark-in-range": tick.isInRange,
|
|
6
|
+
}, style: {
|
|
7
|
+
insetInlineStart: `${this.orientation === "Horizontal" ? tick.position : "50"}%`,
|
|
8
|
+
bottom: `${this.orientation === "Vertical" ? tick.position : "auto"}%`
|
|
9
|
+
}, children: tick.label && tick.showLabel && (_jsx("span", { class: "ui5-slider-scale-tickmark-label", children: tick.label })) }))) })), _jsx("div", { class: "ui5-slider-scale-progress", part: "progress", style: this._progressStyle }), _jsx("slot", {})] }));
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=SliderScaleTemplate.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SliderScaleTemplate.js","sourceRoot":"","sources":["../src/SliderScaleTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,eAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO,aAC7C,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,IAAI,CAC9B,cAAK,KAAK,EAAC,sCAAsC,YAC/C,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC5B,cACC,KAAK,EAAE;wBACN,2BAA2B,EAAE,IAAI;wBACjC,oCAAoC,EAAE,IAAI,CAAC,SAAS;qBACpD,EACD,KAAK,EAAE;wBACN,gBAAgB,EAAE,GAAG,IAAI,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,GAAG;wBAChF,MAAM,EAAE,GAAG,IAAI,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,GAAG;qBACtE,YAEA,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,IAAI,CAChC,eAAM,KAAK,EAAC,iCAAiC,YAC3C,IAAI,CAAC,KAAK,GACL,CACP,GACI,CACN,CAAC,GACG,CACN,EACD,cAAK,KAAK,EAAC,2BAA2B,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,CAAC,cAAc,GAAQ,EACzF,gBAAa,IACR,CACN,CAAC;AACH,CAAC","sourcesContent":["import type SliderScale from \"./SliderScale.js\";\n\nexport default function SliderScaleTemplate(this: SliderScale) {\n\treturn (\n\t\t<div class=\"ui5-slider-scale-root\" part=\"inner\">\n\t\t\t{this._tickmarks.length > 0 && (\n\t\t\t\t<div class=\"ui5-slider-scale-tickmarks-container\">\n\t\t\t\t\t{this._tickmarks.map(tick => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\"ui5-slider-scale-tickmark\": true,\n\t\t\t\t\t\t\t\t\"ui5-slider-scale-tickmark-in-range\": tick.isInRange,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tinsetInlineStart: `${this.orientation === \"Horizontal\" ? tick.position : \"50\"}%`,\n\t\t\t\t\t\t\t\tbottom: `${this.orientation === \"Vertical\" ? tick.position : \"auto\"}%`\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{tick.label && tick.showLabel && (\n\t\t\t\t\t\t\t\t<span class=\"ui5-slider-scale-tickmark-label\">\n\t\t\t\t\t\t\t\t\t{tick.label}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div class=\"ui5-slider-scale-progress\" part=\"progress\" style={this._progressStyle}></div>\n\t\t\t<slot></slot>\n\t\t</div>\n\t);\n}\n"]}
|
package/dist/SliderTemplate.d.ts
CHANGED
|
@@ -1,4 +1,2 @@
|
|
|
1
1
|
import type Slider from "./Slider.js";
|
|
2
2
|
export default function SliderTemplate(this: Slider): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;
|
|
3
|
-
export declare function progressBar(this: Slider): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;
|
|
4
|
-
export declare function handles(this: Slider): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;
|
package/dist/SliderTemplate.js
CHANGED
|
@@ -1,18 +1,20 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
|
|
2
|
-
import directionArrows from "@ui5/webcomponents-icons/dist/direction-arrows.js";
|
|
3
|
-
import Icon from "./Icon.js";
|
|
4
|
-
import SliderBaseTemplate from "./SliderBaseTemplate.js";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
|
|
5
2
|
import SliderTooltip from "./SliderTooltip.js";
|
|
3
|
+
import SliderHandle from "./SliderHandle.js";
|
|
4
|
+
import SliderScale from "./SliderScale.js";
|
|
5
|
+
const _handlePosition = (min, max, value) => {
|
|
6
|
+
const range = max - min;
|
|
7
|
+
const position = ((value - min) / range) * 100;
|
|
8
|
+
return position;
|
|
9
|
+
};
|
|
10
|
+
const handle = (slider) => {
|
|
11
|
+
const position = _handlePosition(slider.min, slider.max, slider.value);
|
|
12
|
+
return (_jsxs(_Fragment, { children: [_jsx(SliderHandle, { "data-sap-focus-ref": true, value: slider.value, min: slider.min, max: slider.max, tabIndex: slider.disabled ? -1 : 0, disabled: slider.disabled, "aria-orientation": "horizontal", part: "handle", exportparts: "icon: handle-icon", role: "slider", "aria-valuemin": slider.min, "aria-valuemax": slider.max, "aria-valuenow": slider.value, "aria-label": slider._ariaLabel, "aria-disabled": slider._ariaDisabled, "aria-keyshortcuts": slider._ariaKeyshortcuts, "aria-describedby": slider._ariaDescribedByHandleText, style: {
|
|
13
|
+
"inset-inline-start": `clamp(0%, ${position}%, 100%)`,
|
|
14
|
+
} }), tooltip(slider)] }));
|
|
15
|
+
};
|
|
16
|
+
const tooltip = (slider) => (_jsx(SliderTooltip, { open: slider._tooltipsOpen, value: slider.tooltipValue, min: slider.min, max: slider.max, editable: slider.editableTooltip, followRef: slider.shadowRoot?.querySelector("[ui5-slider-handle]"), valueState: slider.tooltipValueState, onChange: slider._onTooltipChange, onKeyDown: slider._onTooltipKeydown, onFocusChange: slider._onTooltipFocusChange, onOpen: slider._onTooltipOpen, onInput: slider._onTooltipInput }));
|
|
6
17
|
export default function SliderTemplate() {
|
|
7
|
-
return
|
|
8
|
-
progressBar,
|
|
9
|
-
handles,
|
|
10
|
-
});
|
|
11
|
-
}
|
|
12
|
-
export function progressBar() {
|
|
13
|
-
return (_jsx("div", { class: "ui5-slider-progress-container", "aria-hidden": "true", part: "progress-container", children: _jsx("div", { class: "ui5-slider-progress", style: this.styles.progress, onFocusOut: this._onfocusout, onFocusIn: this._onfocusin, tabIndex: -1, part: "progress-bar" }) }));
|
|
14
|
-
}
|
|
15
|
-
export function handles() {
|
|
16
|
-
return (_jsxs("div", { class: "ui5-slider-handle-container", style: this.styles.handle, part: "handle-container", children: [_jsx("div", { class: "ui5-slider-handle", onFocusOut: this._onfocusout, onFocusIn: this._onfocusin, onKeyUp: this._onkeyup, role: "slider", tabIndex: this._tabIndex, "aria-orientation": "horizontal", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-label": this._ariaLabel, "aria-disabled": this._ariaDisabled, "aria-keyshortcuts": this._ariaKeyshortcuts, "aria-describedby": this._ariaDescribedByHandleText, "data-sap-focus-ref": true, part: "handle", id: "handle1", children: _jsx(Icon, { name: directionArrows, mode: "Decorative", part: "icon-slider", "slider-icon": true }) }), _jsx(SliderTooltip, { open: this._tooltipsOpen, value: this.tooltipValue, min: this.min, max: this.max, editable: this.editableTooltip, followRef: this.shadowRoot?.querySelector("#handle1"), valueState: this.tooltipValueState, onChange: this._onTooltipChange, onKeyDown: this._onTooltipKeydown, onFocusChange: this._onTooltipFocusChange, onOpen: this._onTooltipOpen, onInput: this._onTooltipInput })] }));
|
|
18
|
+
return (_jsx(_Fragment, { children: _jsx("div", { class: "ui5-slider-evo-root", part: "root-container", onMouseDown: this._onmousedown, onTouchStart: this._onmousedown, onMouseOver: this._onmouseover, onMouseOut: this._onmouseout, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, children: _jsxs(SliderScale, { endValue: this.value, min: this.min, max: this.max, step: this.step, startValue: this.min, showTickmarks: this.showTickmarks, labelInterval: this.labelInterval, onFocusOut: this._onfocusout, onFocusIn: this._onfocusin, part: "scale", exportparts: "inner: scale-inner, progress: progress", children: [handle(this), this.editableTooltip && _jsx(_Fragment, { children: _jsx("span", { id: "ui5-slider-InputDesc", class: "ui5-hidden-text", children: this._ariaDescribedByInputText }) })] }) }) }));
|
|
17
19
|
}
|
|
18
20
|
//# sourceMappingURL=SliderTemplate.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderTemplate.js","sourceRoot":"","sources":["../src/SliderTemplate.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"SliderTemplate.js","sourceRoot":"","sources":["../src/SliderTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type Slider from \"./Slider.js\";\nimport SliderTooltip from \"./SliderTooltip.js\";\nimport SliderHandle from \"./SliderHandle.js\";\nimport SliderScale from \"./SliderScale.js\";\n\nconst _handlePosition = (min: number, max: number, value: number) => {\n\tconst range = max - min;\n\tconst position = ((value - min) / range) * 100;\n\treturn position;\n};\n\nconst handle = (slider: Slider) => {\n\tconst position = _handlePosition(slider.min, slider.max, slider.value);\n\n\treturn (\n\t\t<>\n\t\t\t<SliderHandle\n\t\t\t\tdata-sap-focus-ref\n\t\t\t\tvalue={slider.value}\n\t\t\t\tmin={slider.min}\n\t\t\t\tmax={slider.max}\n\t\t\t\ttabIndex={slider.disabled ? -1 : 0}\n\t\t\t\tdisabled={slider.disabled}\n\t\t\t\taria-orientation=\"horizontal\"\n\t\t\t\tpart=\"handle\"\n\t\t\t\texportparts=\"icon: handle-icon\"\n\t\t\t\trole=\"slider\"\n\t\t\t\taria-valuemin={slider.min}\n\t\t\t\taria-valuemax={slider.max}\n\t\t\t\taria-valuenow={slider.value}\n\t\t\t\taria-label={slider._ariaLabel}\n\t\t\t\taria-disabled={slider._ariaDisabled}\n\t\t\t\taria-keyshortcuts={slider._ariaKeyshortcuts}\n\t\t\t\taria-describedby={slider._ariaDescribedByHandleText}\n\t\t\t\tstyle={{\n\t\t\t\t\t\"inset-inline-start\": `clamp(0%, ${position}%, 100%)`,\n\t\t\t\t}}\n\t\t\t></SliderHandle>\n\n\t\t\t{tooltip(slider)}\n\t\t</>\n\t);\n};\n\nconst tooltip = (slider: Slider) => (\n\t<SliderTooltip\n\t\topen={slider._tooltipsOpen}\n\t\tvalue={slider.tooltipValue}\n\t\tmin={slider.min}\n\t\tmax={slider.max}\n\t\teditable={slider.editableTooltip}\n\t\tfollowRef={slider.shadowRoot?.querySelector(\"[ui5-slider-handle]\") as HTMLElement}\n\t\tvalueState={slider.tooltipValueState}\n\t\tonChange={slider._onTooltipChange}\n\t\tonKeyDown={slider._onTooltipKeydown}\n\t\tonFocusChange={slider._onTooltipFocusChange}\n\t\tonOpen={slider._onTooltipOpen}\n\t\tonInput={slider._onTooltipInput}\n\t>\n\t</SliderTooltip>\n);\n\nexport default function SliderTemplate(this: Slider) {\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tclass=\"ui5-slider-evo-root\"\n\t\t\t\tpart=\"root-container\"\n\t\t\t\tonMouseDown={this._onmousedown}\n\t\t\t\tonTouchStart={this._onmousedown}\n\t\t\t\tonMouseOver={this._onmouseover}\n\t\t\t\tonMouseOut={this._onmouseout}\n\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\tonKeyUp={this._onkeyup}\n\t\t\t>\n\t\t\t\t<SliderScale\n\t\t\t\t\tendValue={this.value}\n\t\t\t\t\tmin={this.min}\n\t\t\t\t\tmax={this.max}\n\t\t\t\t\tstep={this.step}\n\t\t\t\t\tstartValue={this.min}\n\t\t\t\t\tshowTickmarks={this.showTickmarks}\n\t\t\t\t\tlabelInterval={this.labelInterval}\n\t\t\t\t\tonFocusOut={this._onfocusout}\n\t\t\t\t\tonFocusIn={this._onfocusin}\n\t\t\t\t\tpart=\"scale\"\n\t\t\t\t\texportparts=\"inner: scale-inner, progress: progress\"\n\t\t\t\t>\n\t\t\t\t\t{handle(this)}\n\n\t\t\t\t\t{this.editableTooltip && <>\n\t\t\t\t\t\t<span id=\"ui5-slider-InputDesc\" class=\"ui5-hidden-text\">{this._ariaDescribedByInputText}</span>\n\t\t\t\t\t</>}\n\t\t\t\t</SliderScale>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"]}
|
package/dist/SliderTooltip.js
CHANGED
|
@@ -43,10 +43,6 @@ let SliderTooltip = SliderTooltip_1 = class SliderTooltip extends UI5Element {
|
|
|
43
43
|
if (!this.hasAttribute("popover")) {
|
|
44
44
|
this.setAttribute("popover", "manual");
|
|
45
45
|
}
|
|
46
|
-
// Workaround to skip DOM state
|
|
47
|
-
if (this.inputRef && this.inputRef.value !== this.value) {
|
|
48
|
-
this.inputRef.value = this.value;
|
|
49
|
-
}
|
|
50
46
|
if (this.isConnected) {
|
|
51
47
|
if (this.open) {
|
|
52
48
|
this.showPopover();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderTooltip.js","sourceRoot":"","sources":["../src/SliderTooltip.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAG3F,OAAO,qBAAqB,MAAM,4BAA4B,CAAC;AAC/D,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,gBAAgB,MAAM,yCAAyC,CAAC;AACvE,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAG5E,OAAO,EACN,0BAA0B,GAC1B,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAM/D;;;;;;;GAOG;AA4BH,IAAM,aAAa,qBAAnB,MAAM,aAAc,SAAQ,UAAU;IAsCrC;QACC,KAAK,EAAE,CAAC;QA5BT,UAAK,GAAG,EAAE,CAAC;QAGX,SAAI,GAAG,KAAK,CAAC;QAGb,QAAG,GAAG,CAAC,CAAC;QAGR,QAAG,GAAG,GAAG,CAAC;QAGV,aAAQ,GAAG,KAAK,CAAC;QAGjB,eAAU,GAAoB,MAAM,CAAC;QAUrC,UAAK,GAAY,KAAK,CAAC;QAKtB,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClE,CAAC;IAED,iBAAiB;QAChB,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;YAC9B,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC;QACjC,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;IACxB,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACxC,CAAC;QAED
|
|
1
|
+
{"version":3,"file":"SliderTooltip.js","sourceRoot":"","sources":["../src/SliderTooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport { customElement, i18n, property } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport type ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\n\nimport SliderTooltipTemplate from \"./SliderTooltipTemplate.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport SliderTooltipCss from \"./generated/themes/SliderTooltip.css.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport type Input from \"./Input.js\";\n\nimport {\n\tSLIDER_TOOLTIP_INPUT_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { Interval } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\n\ntype SliderTooltipChangeEventDetails = {\n\tvalue: string,\n};\n\n/**\n * @class\n *\n * ### Overview\n * @constructor\n * @extends UI5Element\n * @private\n */\n@customElement({\n\ttag: \"ui5-slider-tooltip\",\n\trenderer: jsxRenderer,\n\ttemplate: SliderTooltipTemplate,\n\tstyles: SliderTooltipCss,\n})\n\n/**\n * Fired when the value is confirmed by user interaction (Enter key or focusout)\n */\n@event(\"change\")\n\n/**\n * Fired when the value is changed by user interaction\n */\n@event(\"input\")\n\n/**\n * Fired when the tooltip is opened or closed\n */\n@event(\"open\")\n\n/**\n * Fired when the tooltip focus changes\n */\n@event(\"focus-change\")\n\nclass SliderTooltip extends UI5Element {\n\teventDetails!: {\n\t\t\"change\": SliderTooltipChangeEventDetails,\n\t\t\"focus-change\": void,\n\t\t\"open\": void,\n\t\t\"input\": {\n\t\t\tvalue?: string,\n\t\t},\n\t};\n\n\t@property()\n\tvalue = \"\";\n\n\t@property({ type: Boolean })\n\topen = false;\n\n\t@property({ type: Number })\n\tmin = 0;\n\n\t@property({ type: Number })\n\tmax = 100;\n\n\t@property({ type: Boolean })\n\teditable = false;\n\n\t@property()\n\tvalueState: `${ValueState}` = \"None\";\n\n\t@property({ type: Object })\n\tfollowRef?: HTMLElement;\n\n\t_repoisitionInterval?: Interval;\n\t_repositionTooltipBound: () => void;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\t_open: boolean = false;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._repositionTooltipBound = this.repositionTooltip.bind(this);\n\t}\n\n\tonBeforeRendering(): void {\n\t\tif (this.open !== this._open) {\n\t\t\tthis.fireDecoratorEvent(\"open\");\n\t\t}\n\n\t\tthis._open = this.open;\n\t}\n\n\tonAfterRendering(): void {\n\t\tif (!this.hasAttribute(\"popover\")) {\n\t\t\tthis.setAttribute(\"popover\", \"manual\");\n\t\t}\n\n\t\tif (this.isConnected) {\n\t\t\tif (this.open) {\n\t\t\t\tthis.showPopover();\n\t\t\t\tthis.repositionTooltip();\n\t\t\t\tthis.attachGlobalScrollHandler();\n\t\t\t} else {\n\t\t\t\tthis.hidePopover();\n\t\t\t\tthis.detachGlobalScrollHandler();\n\t\t\t}\n\t\t}\n\t}\n\n\trepositionTooltip(): void {\n\t\tconst followRefRect = this.followRef?.getBoundingClientRect();\n\t\tif (!followRefRect) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.style.top = `${followRefRect.top}px`;\n\n\t\t// center the tooltip's mid and opener's mid\n\t\tconst tooltipWidth = this.offsetWidth;\n\t\tconst followRefWidth = followRefRect.width;\n\n\t\tconst tooltipMidX = tooltipWidth / 2;\n\t\tconst followRefMidX = followRefWidth / 2;\n\n\t\tthis.style.left = `${followRefRect.left + followRefMidX - tooltipMidX}px`;\n\n\t\t// enable RTL support\n\t\tthis.style.right = \"auto\";\n\t}\n\n\tattachGlobalScrollHandler() {\n\t\tdocument.addEventListener(\"scroll\", this._repositionTooltipBound, { capture: true });\n\t}\n\n\tdetachGlobalScrollHandler() {\n\t\tdocument.removeEventListener(\"scroll\", this._repositionTooltipBound, { capture: true });\n\t}\n\n\t_onInputFocusin() {\n\t\trequestAnimationFrame(() => {\n\t\t\tthis.hidePopover();\n\t\t\tthis.showPopover();\n\t\t});\n\t}\n\n\t_onInputKeydown(e: KeyboardEvent) {\n\t\tif (isEnter(e)) {\n\t\t\tthis.fireDecoratorEvent(\"change\", { value: (e.target as Input).value });\n\t\t}\n\t}\n\n\t_onInputInput() {\n\t\tthis.fireDecoratorEvent(\"input\", { value: this.inputRef?.value });\n\t}\n\n\t_onInputFocusOut(e: FocusEvent) {\n\t\tconst relatedTarget = e.relatedTarget as HTMLElement;\n\n\t\tif (!this.parentElement?.contains(relatedTarget)) {\n\t\t\tthis.hidePopover();\n\t\t}\n\n\t\tthis.fireDecoratorEvent(\"change\", { value: (e.target as Input).value });\n\t\tthis.fireDecoratorEvent(\"focus-change\");\n\t}\n\n\tget _ariaLabelledByInputText() {\n\t\treturn SliderTooltip.i18nBundle.getText(SLIDER_TOOLTIP_INPUT_LABEL);\n\t}\n\n\tget inputRef() {\n\t\treturn this.shadowRoot?.querySelector<Input>(\"[ui5-input]\");\n\t}\n}\n\nSliderTooltip.define();\n\nexport type {\n\tSliderTooltipChangeEventDetails,\n};\n\nexport default SliderTooltip;\n"]}
|
package/dist/SplitButton.d.ts
CHANGED
|
@@ -225,7 +225,9 @@ declare class SplitButton extends UI5Element {
|
|
|
225
225
|
description: string;
|
|
226
226
|
};
|
|
227
227
|
get arrowButtonTooltip(): string;
|
|
228
|
+
get isSplitButton(): boolean;
|
|
228
229
|
get ariaLabelText(): string;
|
|
229
230
|
}
|
|
230
231
|
export default SplitButton;
|
|
231
232
|
export type { SplitButtonAccessibilityAttributes, };
|
|
233
|
+
export declare const isInstanceOfSplitButton: (object: any) => object is SplitButton;
|