@hitachivantara/uikit-react-core 5.6.0 → 5.7.0
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/dist/cjs/components/Banner/Banner.cjs +33 -27
- package/dist/cjs/components/Banner/Banner.cjs.map +1 -1
- package/dist/cjs/components/Banner/Banner.styles.cjs +10 -39
- package/dist/cjs/components/Banner/Banner.styles.cjs.map +1 -1
- package/dist/cjs/components/Banner/BannerContent/ActionContainer/ActionContainer.cjs +32 -33
- package/dist/cjs/components/Banner/BannerContent/ActionContainer/ActionContainer.cjs.map +1 -1
- package/dist/cjs/components/Banner/BannerContent/ActionContainer/ActionContainer.styles.cjs +22 -91
- package/dist/cjs/components/Banner/BannerContent/ActionContainer/ActionContainer.styles.cjs.map +1 -1
- package/dist/cjs/components/Banner/BannerContent/BannerContent.cjs +37 -30
- package/dist/cjs/components/Banner/BannerContent/BannerContent.cjs.map +1 -1
- package/dist/cjs/components/Banner/BannerContent/BannerContent.styles.cjs +20 -51
- package/dist/cjs/components/Banner/BannerContent/BannerContent.styles.cjs.map +1 -1
- package/dist/cjs/components/Banner/BannerContent/MessageContainer/MessageContainer.cjs +25 -19
- package/dist/cjs/components/Banner/BannerContent/MessageContainer/MessageContainer.cjs.map +1 -1
- package/dist/cjs/components/Banner/BannerContent/MessageContainer/MessageContainer.styles.cjs +17 -45
- package/dist/cjs/components/Banner/BannerContent/MessageContainer/MessageContainer.styles.cjs.map +1 -1
- package/dist/cjs/components/BaseInput/BaseInput.cjs +44 -47
- package/dist/cjs/components/BaseInput/BaseInput.cjs.map +1 -1
- package/dist/cjs/components/BaseInput/BaseInput.styles.cjs +119 -148
- package/dist/cjs/components/BaseInput/BaseInput.styles.cjs.map +1 -1
- package/dist/cjs/components/Card/Card.styles.cjs.map +1 -1
- package/dist/cjs/components/Card/Content/Content.styles.cjs.map +1 -1
- package/dist/cjs/components/Card/Header/Header.styles.cjs.map +1 -1
- package/dist/cjs/components/Card/Media/Media.styles.cjs.map +1 -1
- package/dist/cjs/components/ColorPicker/ColorPicker.cjs +186 -0
- package/dist/cjs/components/ColorPicker/ColorPicker.cjs.map +1 -0
- package/dist/cjs/components/ColorPicker/ColorPicker.styles.cjs +57 -0
- package/dist/cjs/components/ColorPicker/ColorPicker.styles.cjs.map +1 -0
- package/dist/cjs/components/ColorPicker/Fields/Fields.cjs +137 -0
- package/dist/cjs/components/ColorPicker/Fields/Fields.cjs.map +1 -0
- package/dist/cjs/components/ColorPicker/Fields/Fields.styles.cjs +36 -0
- package/dist/cjs/components/ColorPicker/Fields/Fields.styles.cjs.map +1 -0
- package/dist/cjs/components/ColorPicker/Fields/fieldsClasses.cjs +8 -0
- package/dist/cjs/components/ColorPicker/Fields/fieldsClasses.cjs.map +1 -0
- package/dist/cjs/components/ColorPicker/Picker/Picker.cjs +81 -0
- package/dist/cjs/components/ColorPicker/Picker/Picker.cjs.map +1 -0
- package/dist/cjs/components/ColorPicker/Picker/Picker.styles.cjs +59 -0
- package/dist/cjs/components/ColorPicker/Picker/Picker.styles.cjs.map +1 -0
- package/dist/cjs/components/ColorPicker/Picker/pickerClasses.cjs +8 -0
- package/dist/cjs/components/ColorPicker/Picker/pickerClasses.cjs.map +1 -0
- package/dist/cjs/components/ColorPicker/PresetColors/PresetColors.cjs +51 -0
- package/dist/cjs/components/ColorPicker/PresetColors/PresetColors.cjs.map +1 -0
- package/dist/cjs/components/ColorPicker/PresetColors/PresetColors.styles.cjs +30 -0
- package/dist/cjs/components/ColorPicker/PresetColors/PresetColors.styles.cjs.map +1 -0
- package/dist/cjs/components/ColorPicker/PresetColors/presetColorsClasses.cjs +8 -0
- package/dist/cjs/components/ColorPicker/PresetColors/presetColorsClasses.cjs.map +1 -0
- package/dist/cjs/components/ColorPicker/SavedColors/SavedColors.cjs +67 -0
- package/dist/cjs/components/ColorPicker/SavedColors/SavedColors.cjs.map +1 -0
- package/dist/cjs/components/ColorPicker/SavedColors/SavedColors.styles.cjs +60 -0
- package/dist/cjs/components/ColorPicker/SavedColors/SavedColors.styles.cjs.map +1 -0
- package/dist/cjs/components/ColorPicker/SavedColors/savedColorsClasses.cjs +8 -0
- package/dist/cjs/components/ColorPicker/SavedColors/savedColorsClasses.cjs.map +1 -0
- package/dist/cjs/components/ColorPicker/colorPickerClasses.cjs +8 -0
- package/dist/cjs/components/ColorPicker/colorPickerClasses.cjs.map +1 -0
- package/dist/cjs/components/DatePicker/DatePicker.styles.cjs +0 -24
- package/dist/cjs/components/DatePicker/DatePicker.styles.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Dialog.styles.cjs +2 -2
- package/dist/cjs/components/Dialog/Dialog.styles.cjs.map +1 -1
- package/dist/cjs/components/FilterGroup/Counter/Counter.cjs +5 -3
- package/dist/cjs/components/FilterGroup/Counter/Counter.cjs.map +1 -1
- package/dist/cjs/components/FilterGroup/Counter/Counter.styles.cjs.map +1 -1
- package/dist/cjs/components/FilterGroup/Counter/counterClasses.cjs +8 -0
- package/dist/cjs/components/FilterGroup/Counter/counterClasses.cjs.map +1 -0
- package/dist/cjs/components/FilterGroup/FilterContent/FilterContent.cjs +1 -1
- package/dist/cjs/components/FilterGroup/FilterContent/FilterContent.cjs.map +1 -1
- package/dist/cjs/components/FilterGroup/FilterContent/FilterContent.styles.cjs.map +1 -1
- package/dist/cjs/components/FilterGroup/FilterContent/filterContentClasses.cjs +1 -1
- package/dist/cjs/components/FilterGroup/FilterContent/filterContentClasses.cjs.map +1 -1
- package/dist/cjs/components/FilterGroup/FilterGroup.styles.cjs.map +1 -1
- package/dist/cjs/components/FilterGroup/LeftPanel/LeftPanel.cjs +5 -2
- package/dist/cjs/components/FilterGroup/LeftPanel/LeftPanel.cjs.map +1 -1
- package/dist/cjs/components/FilterGroup/LeftPanel/LeftPanel.styles.cjs.map +1 -1
- package/dist/cjs/components/FilterGroup/LeftPanel/leftPanelClasses.cjs +8 -0
- package/dist/cjs/components/FilterGroup/LeftPanel/leftPanelClasses.cjs.map +1 -0
- package/dist/cjs/components/FilterGroup/RightPanel/RightPanel.cjs +8 -5
- package/dist/cjs/components/FilterGroup/RightPanel/RightPanel.cjs.map +1 -1
- package/dist/cjs/components/FilterGroup/RightPanel/RightPanel.styles.cjs.map +1 -1
- package/dist/cjs/components/FilterGroup/RightPanel/rightPanelClasses.cjs +8 -0
- package/dist/cjs/components/FilterGroup/RightPanel/rightPanelClasses.cjs.map +1 -0
- package/dist/cjs/components/InlineEditor/InlineEditor.styles.cjs.map +1 -1
- package/dist/cjs/components/Input/Input.cjs +168 -127
- package/dist/cjs/components/Input/Input.cjs.map +1 -1
- package/dist/cjs/components/Input/Input.styles.cjs +61 -172
- package/dist/cjs/components/Input/Input.styles.cjs.map +1 -1
- package/dist/cjs/components/QueryBuilder/Rule/Rule.styles.cjs.map +1 -1
- package/dist/cjs/components/QueryBuilder/Rule/Value/NumericValue/Numeric.styles.cjs.map +1 -1
- package/dist/cjs/components/QueryBuilder/Rule/Value/NumericValue/NumericValue.cjs +1 -1
- package/dist/cjs/components/QueryBuilder/Rule/Value/NumericValue/NumericValue.cjs.map +1 -1
- package/dist/cjs/components/QueryBuilder/Rule/Value/TextValue/TextValue.styles.cjs.map +1 -1
- package/dist/cjs/components/QueryBuilder/RuleGroup/RuleGroup.styles.cjs +1 -0
- package/dist/cjs/components/QueryBuilder/RuleGroup/RuleGroup.styles.cjs.map +1 -1
- package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs.map +1 -1
- package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.cjs.map +1 -1
- package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.styles.cjs.map +1 -1
- package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs.map +1 -1
- package/dist/cjs/index.cjs +4 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/esm/components/Banner/Banner.js +33 -28
- package/dist/esm/components/Banner/Banner.js.map +1 -1
- package/dist/esm/components/Banner/Banner.styles.js +10 -36
- package/dist/esm/components/Banner/Banner.styles.js.map +1 -1
- package/dist/esm/components/Banner/BannerContent/ActionContainer/ActionContainer.js +34 -35
- package/dist/esm/components/Banner/BannerContent/ActionContainer/ActionContainer.js.map +1 -1
- package/dist/esm/components/Banner/BannerContent/ActionContainer/ActionContainer.styles.js +22 -89
- package/dist/esm/components/Banner/BannerContent/ActionContainer/ActionContainer.styles.js.map +1 -1
- package/dist/esm/components/Banner/BannerContent/BannerContent.js +36 -31
- package/dist/esm/components/Banner/BannerContent/BannerContent.js.map +1 -1
- package/dist/esm/components/Banner/BannerContent/BannerContent.styles.js +20 -48
- package/dist/esm/components/Banner/BannerContent/BannerContent.styles.js.map +1 -1
- package/dist/esm/components/Banner/BannerContent/MessageContainer/MessageContainer.js +27 -21
- package/dist/esm/components/Banner/BannerContent/MessageContainer/MessageContainer.js.map +1 -1
- package/dist/esm/components/Banner/BannerContent/MessageContainer/MessageContainer.styles.js +17 -43
- package/dist/esm/components/Banner/BannerContent/MessageContainer/MessageContainer.styles.js.map +1 -1
- package/dist/esm/components/BaseInput/BaseInput.js +47 -50
- package/dist/esm/components/BaseInput/BaseInput.js.map +1 -1
- package/dist/esm/components/BaseInput/BaseInput.styles.js +119 -146
- package/dist/esm/components/BaseInput/BaseInput.styles.js.map +1 -1
- package/dist/esm/components/Card/Card.styles.js.map +1 -1
- package/dist/esm/components/Card/Content/Content.styles.js.map +1 -1
- package/dist/esm/components/Card/Header/Header.styles.js.map +1 -1
- package/dist/esm/components/Card/Media/Media.styles.js.map +1 -1
- package/dist/esm/components/ColorPicker/ColorPicker.js +186 -0
- package/dist/esm/components/ColorPicker/ColorPicker.js.map +1 -0
- package/dist/esm/components/ColorPicker/ColorPicker.styles.js +57 -0
- package/dist/esm/components/ColorPicker/ColorPicker.styles.js.map +1 -0
- package/dist/esm/components/ColorPicker/Fields/Fields.js +118 -0
- package/dist/esm/components/ColorPicker/Fields/Fields.js.map +1 -0
- package/dist/esm/components/ColorPicker/Fields/Fields.styles.js +36 -0
- package/dist/esm/components/ColorPicker/Fields/Fields.styles.js.map +1 -0
- package/dist/esm/components/ColorPicker/Fields/fieldsClasses.js +8 -0
- package/dist/esm/components/ColorPicker/Fields/fieldsClasses.js.map +1 -0
- package/dist/esm/components/ColorPicker/Picker/Picker.js +81 -0
- package/dist/esm/components/ColorPicker/Picker/Picker.js.map +1 -0
- package/dist/esm/components/ColorPicker/Picker/Picker.styles.js +59 -0
- package/dist/esm/components/ColorPicker/Picker/Picker.styles.js.map +1 -0
- package/dist/esm/components/ColorPicker/Picker/pickerClasses.js +8 -0
- package/dist/esm/components/ColorPicker/Picker/pickerClasses.js.map +1 -0
- package/dist/esm/components/ColorPicker/PresetColors/PresetColors.js +51 -0
- package/dist/esm/components/ColorPicker/PresetColors/PresetColors.js.map +1 -0
- package/dist/esm/components/ColorPicker/PresetColors/PresetColors.styles.js +30 -0
- package/dist/esm/components/ColorPicker/PresetColors/PresetColors.styles.js.map +1 -0
- package/dist/esm/components/ColorPicker/PresetColors/presetColorsClasses.js +8 -0
- package/dist/esm/components/ColorPicker/PresetColors/presetColorsClasses.js.map +1 -0
- package/dist/esm/components/ColorPicker/SavedColors/SavedColors.js +67 -0
- package/dist/esm/components/ColorPicker/SavedColors/SavedColors.js.map +1 -0
- package/dist/esm/components/ColorPicker/SavedColors/SavedColors.styles.js +60 -0
- package/dist/esm/components/ColorPicker/SavedColors/SavedColors.styles.js.map +1 -0
- package/dist/esm/components/ColorPicker/SavedColors/savedColorsClasses.js +8 -0
- package/dist/esm/components/ColorPicker/SavedColors/savedColorsClasses.js.map +1 -0
- package/dist/esm/components/ColorPicker/colorPickerClasses.js +8 -0
- package/dist/esm/components/ColorPicker/colorPickerClasses.js.map +1 -0
- package/dist/esm/components/DatePicker/DatePicker.styles.js +0 -24
- package/dist/esm/components/DatePicker/DatePicker.styles.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.styles.js +2 -2
- package/dist/esm/components/Dialog/Dialog.styles.js.map +1 -1
- package/dist/esm/components/FilterGroup/Counter/Counter.js +5 -3
- package/dist/esm/components/FilterGroup/Counter/Counter.js.map +1 -1
- package/dist/esm/components/FilterGroup/Counter/Counter.styles.js.map +1 -1
- package/dist/esm/components/FilterGroup/Counter/counterClasses.js +8 -0
- package/dist/esm/components/FilterGroup/Counter/counterClasses.js.map +1 -0
- package/dist/esm/components/FilterGroup/FilterContent/FilterContent.js +1 -1
- package/dist/esm/components/FilterGroup/FilterContent/FilterContent.js.map +1 -1
- package/dist/esm/components/FilterGroup/FilterContent/FilterContent.styles.js.map +1 -1
- package/dist/esm/components/FilterGroup/FilterContent/filterContentClasses.js +1 -1
- package/dist/esm/components/FilterGroup/FilterContent/filterContentClasses.js.map +1 -1
- package/dist/esm/components/FilterGroup/FilterGroup.styles.js.map +1 -1
- package/dist/esm/components/FilterGroup/LeftPanel/LeftPanel.js +5 -2
- package/dist/esm/components/FilterGroup/LeftPanel/LeftPanel.js.map +1 -1
- package/dist/esm/components/FilterGroup/LeftPanel/LeftPanel.styles.js.map +1 -1
- package/dist/esm/components/FilterGroup/LeftPanel/leftPanelClasses.js +8 -0
- package/dist/esm/components/FilterGroup/LeftPanel/leftPanelClasses.js.map +1 -0
- package/dist/esm/components/FilterGroup/RightPanel/RightPanel.js +8 -5
- package/dist/esm/components/FilterGroup/RightPanel/RightPanel.js.map +1 -1
- package/dist/esm/components/FilterGroup/RightPanel/RightPanel.styles.js.map +1 -1
- package/dist/esm/components/FilterGroup/RightPanel/rightPanelClasses.js +8 -0
- package/dist/esm/components/FilterGroup/RightPanel/rightPanelClasses.js.map +1 -0
- package/dist/esm/components/InlineEditor/InlineEditor.styles.js.map +1 -1
- package/dist/esm/components/Input/Input.js +170 -129
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Input/Input.styles.js +61 -170
- package/dist/esm/components/Input/Input.styles.js.map +1 -1
- package/dist/esm/components/QueryBuilder/Rule/Rule.styles.js.map +1 -1
- package/dist/esm/components/QueryBuilder/Rule/Value/NumericValue/Numeric.styles.js.map +1 -1
- package/dist/esm/components/QueryBuilder/Rule/Value/NumericValue/NumericValue.js +1 -1
- package/dist/esm/components/QueryBuilder/Rule/Value/NumericValue/NumericValue.js.map +1 -1
- package/dist/esm/components/QueryBuilder/Rule/Value/TextValue/TextValue.styles.js.map +1 -1
- package/dist/esm/components/QueryBuilder/RuleGroup/RuleGroup.styles.js +1 -0
- package/dist/esm/components/QueryBuilder/RuleGroup/RuleGroup.styles.js.map +1 -1
- package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js.map +1 -1
- package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.js.map +1 -1
- package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.styles.js.map +1 -1
- package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js.map +1 -1
- package/dist/esm/index.js +22 -18
- package/dist/esm/index.js.map +1 -1
- package/dist/types/index.d.ts +112 -5
- package/package.json +6 -5
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { theme } from "@hitachivantara/uikit-styles";
|
|
2
|
+
const styles = {
|
|
3
|
+
pickers: {
|
|
4
|
+
display: "flex",
|
|
5
|
+
flexDirection: theme.colorPicker.pickersFlexDirection
|
|
6
|
+
},
|
|
7
|
+
saturation: {
|
|
8
|
+
width: theme.colorPicker.saturationWidth,
|
|
9
|
+
height: theme.colorPicker.saturationHeight,
|
|
10
|
+
marginRight: theme.colorPicker.saturationMarginRight,
|
|
11
|
+
position: "relative",
|
|
12
|
+
overflow: "visible",
|
|
13
|
+
"& > div": {
|
|
14
|
+
borderRadius: theme.colorPicker.saturationBorderRadius,
|
|
15
|
+
"& .saturation-white": {
|
|
16
|
+
borderRadius: theme.colorPicker.saturationBorderRadius,
|
|
17
|
+
"& .saturation-black": {
|
|
18
|
+
borderRadius: theme.colorPicker.saturationBorderRadius
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
saturationPointer: {
|
|
24
|
+
width: theme.colorPicker.saturationPointerWidth,
|
|
25
|
+
height: theme.colorPicker.saturationPointerHeight,
|
|
26
|
+
boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),
|
|
27
|
+
0 0 1px 2px rgba(0,0,0,.4)`,
|
|
28
|
+
borderRadius: "50%",
|
|
29
|
+
transform: "translate(-3px, -3px)"
|
|
30
|
+
},
|
|
31
|
+
hue: {
|
|
32
|
+
height: theme.colorPicker.hueHeight,
|
|
33
|
+
width: theme.colorPicker.hueWidth,
|
|
34
|
+
position: "relative",
|
|
35
|
+
overflow: "visible",
|
|
36
|
+
marginTop: theme.colorPicker.hueMarginTop,
|
|
37
|
+
"& .hue-horizontal": {
|
|
38
|
+
borderRadius: theme.colorPicker.hueBorderRadius
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
hueSlider: {
|
|
42
|
+
width: theme.colorPicker.hueSliderWidth,
|
|
43
|
+
height: theme.colorPicker.hueSliderHeight,
|
|
44
|
+
background: theme.colorPicker.hueSliderBackground,
|
|
45
|
+
boxShadow: "0 0 2px rgb(0 0 0 / 60%)",
|
|
46
|
+
marginLeft: theme.colorPicker.hueSliderMarginLeft,
|
|
47
|
+
border: theme.colorPicker.hueSliderBorder,
|
|
48
|
+
borderRadius: theme.colorPicker.hueSliderBorderRadius,
|
|
49
|
+
transform: "translate(0, -2px)"
|
|
50
|
+
},
|
|
51
|
+
title: {
|
|
52
|
+
fontWeight: theme.fontWeights.semibold,
|
|
53
|
+
marginBottom: 8
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
export {
|
|
57
|
+
styles
|
|
58
|
+
};
|
|
59
|
+
//# sourceMappingURL=Picker.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Picker.styles.js","sources":["../../../../../src/components/ColorPicker/Picker/Picker.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSProperties } from \"react\";\nimport { HvColorPickerPickerClasses } from \"./pickerClasses\";\n\nexport const styles: Partial<\n Record<keyof HvColorPickerPickerClasses, CSSInterpolation>\n> = {\n pickers: {\n display: \"flex\",\n flexDirection: theme.colorPicker\n .pickersFlexDirection as CSSProperties[\"flexDirection\"],\n },\n saturation: {\n width: theme.colorPicker.saturationWidth,\n height: theme.colorPicker.saturationHeight,\n marginRight: theme.colorPicker.saturationMarginRight,\n position: \"relative\",\n overflow: \"visible\",\n\n \"& > div\": {\n borderRadius: theme.colorPicker.saturationBorderRadius,\n\n \"& .saturation-white\": {\n borderRadius: theme.colorPicker.saturationBorderRadius,\n\n \"& .saturation-black\": {\n borderRadius: theme.colorPicker.saturationBorderRadius,\n },\n },\n },\n },\n saturationPointer: {\n width: theme.colorPicker.saturationPointerWidth,\n height: theme.colorPicker.saturationPointerHeight,\n boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),\n 0 0 1px 2px rgba(0,0,0,.4)`,\n borderRadius: \"50%\",\n transform: \"translate(-3px, -3px)\",\n },\n hue: {\n height: theme.colorPicker.hueHeight,\n width: theme.colorPicker.hueWidth,\n position: \"relative\",\n overflow: \"visible\",\n marginTop: theme.colorPicker.hueMarginTop,\n\n \"& .hue-horizontal\": {\n borderRadius: theme.colorPicker.hueBorderRadius,\n },\n },\n hueSlider: {\n width: theme.colorPicker.hueSliderWidth,\n height: theme.colorPicker.hueSliderHeight,\n background: theme.colorPicker.hueSliderBackground,\n boxShadow: \"0 0 2px rgb(0 0 0 / 60%)\",\n marginLeft: theme.colorPicker.hueSliderMarginLeft,\n border: theme.colorPicker.hueSliderBorder,\n borderRadius: theme.colorPicker.hueSliderBorderRadius,\n transform: \"translate(0, -2px)\",\n },\n title: {\n fontWeight: theme.fontWeights.semibold,\n marginBottom: 8,\n },\n};\n"],"names":["styles","pickers","display","flexDirection","theme","colorPicker","pickersFlexDirection","saturation","width","saturationWidth","height","saturationHeight","marginRight","saturationMarginRight","position","overflow","borderRadius","saturationBorderRadius","saturationPointer","saturationPointerWidth","saturationPointerHeight","boxShadow","transform","hue","hueHeight","hueWidth","marginTop","hueMarginTop","hueBorderRadius","hueSlider","hueSliderWidth","hueSliderHeight","background","hueSliderBackground","marginLeft","hueSliderMarginLeft","border","hueSliderBorder","hueSliderBorderRadius","title","fontWeight","fontWeights","semibold","marginBottom"],"mappings":";AAKO,MAAMA,SAET;AAAA,EACFC,SAAS;AAAA,IACPC,SAAS;AAAA,IACTC,eAAeC,MAAMC,YAClBC;AAAAA,EACL;AAAA,EACAC,YAAY;AAAA,IACVC,OAAOJ,MAAMC,YAAYI;AAAAA,IACzBC,QAAQN,MAAMC,YAAYM;AAAAA,IAC1BC,aAAaR,MAAMC,YAAYQ;AAAAA,IAC/BC,UAAU;AAAA,IACVC,UAAU;AAAA,IAEV,WAAW;AAAA,MACTC,cAAcZ,MAAMC,YAAYY;AAAAA,MAEhC,uBAAuB;AAAA,QACrBD,cAAcZ,MAAMC,YAAYY;AAAAA,QAEhC,uBAAuB;AAAA,UACrBD,cAAcZ,MAAMC,YAAYY;AAAAA,QAClC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjBV,OAAOJ,MAAMC,YAAYc;AAAAA,IACzBT,QAAQN,MAAMC,YAAYe;AAAAA,IAC1BC,WAAY;AAAA;AAAA,IAEZL,cAAc;AAAA,IACdM,WAAW;AAAA,EACb;AAAA,EACAC,KAAK;AAAA,IACHb,QAAQN,MAAMC,YAAYmB;AAAAA,IAC1BhB,OAAOJ,MAAMC,YAAYoB;AAAAA,IACzBX,UAAU;AAAA,IACVC,UAAU;AAAA,IACVW,WAAWtB,MAAMC,YAAYsB;AAAAA,IAE7B,qBAAqB;AAAA,MACnBX,cAAcZ,MAAMC,YAAYuB;AAAAA,IAClC;AAAA,EACF;AAAA,EACAC,WAAW;AAAA,IACTrB,OAAOJ,MAAMC,YAAYyB;AAAAA,IACzBpB,QAAQN,MAAMC,YAAY0B;AAAAA,IAC1BC,YAAY5B,MAAMC,YAAY4B;AAAAA,IAC9BZ,WAAW;AAAA,IACXa,YAAY9B,MAAMC,YAAY8B;AAAAA,IAC9BC,QAAQhC,MAAMC,YAAYgC;AAAAA,IAC1BrB,cAAcZ,MAAMC,YAAYiC;AAAAA,IAChChB,WAAW;AAAA,EACb;AAAA,EACAiB,OAAO;AAAA,IACLC,YAAYpC,MAAMqC,YAAYC;AAAAA,IAC9BC,cAAc;AAAA,EAChB;AACF;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { getClasses } from "../../../utils/classes.js";
|
|
2
|
+
const classKeys = ["hue", "hueSlider", "pickers", "saturation", "saturationPointer", "title", "fields"];
|
|
3
|
+
const colorPickerPickerClasses = getClasses(classKeys, "HvColorPicker-Picker");
|
|
4
|
+
const colorPickerPickerClasses$1 = colorPickerPickerClasses;
|
|
5
|
+
export {
|
|
6
|
+
colorPickerPickerClasses$1 as default
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=pickerClasses.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pickerClasses.js","sources":["../../../../../src/components/ColorPicker/Picker/pickerClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvColorPickerPickerClasses {\n pickers?: string;\n saturation?: string;\n saturationPointer?: string;\n hue?: string;\n hueSlider?: string;\n title?: string;\n fields?: string;\n}\n\nconst classKeys: (keyof HvColorPickerPickerClasses)[] = [\n \"hue\",\n \"hueSlider\",\n \"pickers\",\n \"saturation\",\n \"saturationPointer\",\n \"title\",\n \"fields\",\n];\n\nconst colorPickerPickerClasses = getClasses(classKeys, \"HvColorPicker-Picker\");\n\nexport default colorPickerPickerClasses;\n"],"names":["classKeys","colorPickerPickerClasses","getClasses"],"mappings":";AAYA,MAAMA,YAAkD,CACtD,OACA,aACA,WACA,cACA,qBACA,SACA,QAAQ;AAGV,MAAMC,2BAA2BC,WAAWF,WAAW,sBAAsB;AAE7E,MAAA,6BAAeC;"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { ClassNames } from "@emotion/react";
|
|
2
|
+
import { styles } from "./PresetColors.styles.js";
|
|
3
|
+
import colorPickerPresetColorsClasses from "./presetColorsClasses.js";
|
|
4
|
+
import { Swatch } from "react-color/lib/components/common";
|
|
5
|
+
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
|
|
6
|
+
import { HvTypography } from "../../Typography/Typography.js";
|
|
7
|
+
const PresetColors = ({
|
|
8
|
+
onClick,
|
|
9
|
+
colors,
|
|
10
|
+
title,
|
|
11
|
+
className,
|
|
12
|
+
classes
|
|
13
|
+
}) => {
|
|
14
|
+
const handleClick = (hex) => {
|
|
15
|
+
onClick({
|
|
16
|
+
hex,
|
|
17
|
+
source: "hex"
|
|
18
|
+
});
|
|
19
|
+
};
|
|
20
|
+
return /* @__PURE__ */ jsx(ClassNames, {
|
|
21
|
+
children: ({
|
|
22
|
+
css,
|
|
23
|
+
cx
|
|
24
|
+
}) => /* @__PURE__ */ jsxs("div", {
|
|
25
|
+
className: cx(colorPickerPresetColorsClasses.root, css(styles.root), className, classes == null ? void 0 : classes.root),
|
|
26
|
+
children: [title && /* @__PURE__ */ jsx(HvTypography, {
|
|
27
|
+
className: cx(colorPickerPresetColorsClasses.title, css(styles.title), classes == null ? void 0 : classes.title),
|
|
28
|
+
variant: "caption1",
|
|
29
|
+
children: title
|
|
30
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
31
|
+
className: cx(colorPickerPresetColorsClasses.colors, css(styles.colors), classes == null ? void 0 : classes.colors),
|
|
32
|
+
children: colors.map((color, index) => {
|
|
33
|
+
return /* @__PURE__ */ jsx("div", {
|
|
34
|
+
className: cx(colorPickerPresetColorsClasses.swatchWrap, css(styles.swatchWrap), classes == null ? void 0 : classes.swatchWrap),
|
|
35
|
+
children: /* @__PURE__ */ jsx(Swatch, {
|
|
36
|
+
color,
|
|
37
|
+
onClick: handleClick,
|
|
38
|
+
focusStyle: {
|
|
39
|
+
boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`
|
|
40
|
+
}
|
|
41
|
+
})
|
|
42
|
+
}, `recommended-color-${color}-${index}`);
|
|
43
|
+
})
|
|
44
|
+
})]
|
|
45
|
+
})
|
|
46
|
+
});
|
|
47
|
+
};
|
|
48
|
+
export {
|
|
49
|
+
PresetColors
|
|
50
|
+
};
|
|
51
|
+
//# sourceMappingURL=PresetColors.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PresetColors.js","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./PresetColors.styles\";\nimport { HvTypography } from \"@core/components\";\nimport colorPickerPresetColorsClasses, {\n HvColorPickerPresetColorsClasses,\n} from \"./presetColorsClasses\";\n\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\ninterface PresetColorsProps {\n colors: string[];\n onClick: (color: { hex: string; source: string }) => void;\n title?: string;\n className?: string;\n classes?: HvColorPickerPresetColorsClasses;\n}\n\nexport const PresetColors = ({\n onClick,\n colors,\n title,\n className,\n classes,\n}: PresetColorsProps) => {\n const handleClick = (hex: string) => {\n onClick({\n hex,\n source: \"hex\",\n });\n };\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n colorPickerPresetColorsClasses.root,\n css(styles.root),\n className,\n classes?.root\n )}\n >\n {title && (\n <HvTypography\n className={cx(\n colorPickerPresetColorsClasses.title,\n css(styles.title),\n classes?.title\n )}\n variant=\"caption1\"\n >\n {title}\n </HvTypography>\n )}\n <div\n className={cx(\n colorPickerPresetColorsClasses.colors,\n css(styles.colors),\n classes?.colors\n )}\n >\n {colors.map((color, index) => {\n return (\n <div\n key={`recommended-color-${color}-${index}`}\n className={cx(\n colorPickerPresetColorsClasses.swatchWrap,\n css(styles.swatchWrap),\n classes?.swatchWrap\n )}\n >\n <Swatch\n color={color}\n onClick={handleClick}\n focusStyle={{\n boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n }}\n />\n </div>\n );\n })}\n </div>\n </div>\n )}\n </ClassNames>\n );\n};\n"],"names":["PresetColors","onClick","colors","title","className","classes","handleClick","hex","source","ClassNames","children","css","cx","colorPickerPresetColorsClasses","root","styles","_jsx","HvTypography","variant","map","color","index","swatchWrap","Swatch","focusStyle","boxShadow"],"mappings":";;;;;;AAmBO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACiB,MAAM;AACjBC,QAAAA,cAAcA,CAACC,QAAgB;AAC3B,YAAA;AAAA,MACNA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,6BACGC,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,2BACP,OAAA;AAAA,MACER,WAAWQ,GACTC,+BAA+BC,MAC/BH,IAAII,OAAOD,IAAI,GACfV,WACAC,mCAASS,IAAI;AAAA,MACbJ,UAEDP,CAAAA,SACCa,oBAACC,cAAY;AAAA,QACXb,WAAWQ,GACTC,+BAA+BV,OAC/BQ,IAAII,OAAOZ,KAAK,GAChBE,mCAASF,KAAK;AAAA,QAEhBe,SAAQ;AAAA,QAAUR,UAEjBP;AAAAA,MAAAA,CAAK,GAGVa,oBAAA,OAAA;AAAA,QACEZ,WAAWQ,GACTC,+BAA+BX,QAC/BS,IAAII,OAAOb,MAAM,GACjBG,mCAASH,MAAM;AAAA,QACfQ,UAEDR,OAAOiB,IAAI,CAACC,OAAOC,UAAU;AAC5B,qCACE,OAAA;AAAA,YAEEjB,WAAWQ,GACTC,+BAA+BS,YAC/BX,IAAII,OAAOO,UAAU,GACrBjB,mCAASiB,UAAU;AAAA,YACnBZ,8BAEDa,QAAM;AAAA,cACLH;AAAAA,cACAnB,SAASK;AAAAA,cACTkB,YAAY;AAAA,gBACVC,WAAY,4CAA2CL;AAAAA,cACzD;AAAA,YAAA,CAAE;AAAA,UAAA,GAZE,qBAAoBA,SAASC,OAAO;AAAA,QAAA,CAgB/C;AAAA,MAAA,CACG,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAGC;AAEjB;"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { theme } from "@hitachivantara/uikit-styles";
|
|
2
|
+
const styles = {
|
|
3
|
+
root: {
|
|
4
|
+
width: theme.colorPicker.recommendedColorsRootWidth
|
|
5
|
+
},
|
|
6
|
+
colors: {
|
|
7
|
+
display: "flex",
|
|
8
|
+
flexWrap: "wrap",
|
|
9
|
+
position: "relative",
|
|
10
|
+
width: theme.colorPicker.recommendedColorsWidth,
|
|
11
|
+
margin: theme.colorPicker.recommendedColorsMargin,
|
|
12
|
+
padding: 0
|
|
13
|
+
},
|
|
14
|
+
title: {
|
|
15
|
+
fontWeight: theme.fontWeights.semibold,
|
|
16
|
+
marginBottom: 8
|
|
17
|
+
},
|
|
18
|
+
swatchWrap: {
|
|
19
|
+
width: theme.colorPicker.recommendedColorsSwatchWidth,
|
|
20
|
+
height: theme.colorPicker.recommendedColorsSwatchHeight,
|
|
21
|
+
margin: theme.colorPicker.recommendedColorsSwatchMargin,
|
|
22
|
+
"& > span > div": {
|
|
23
|
+
borderRadius: theme.colorPicker.recommendedColorsSwatchBorderRadius
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
export {
|
|
28
|
+
styles
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=PresetColors.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PresetColors.styles.js","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvColorPickerPresetColorsClasses } from \"./presetColorsClasses\";\n\nexport const styles: Partial<\n Record<keyof HvColorPickerPresetColorsClasses, CSSInterpolation>\n> = {\n root: { width: theme.colorPicker.recommendedColorsRootWidth },\n colors: {\n display: \"flex\",\n flexWrap: \"wrap\",\n position: \"relative\",\n width: theme.colorPicker.recommendedColorsWidth,\n margin: theme.colorPicker.recommendedColorsMargin,\n padding: 0,\n },\n title: {\n fontWeight: theme.fontWeights.semibold,\n marginBottom: 8,\n },\n swatchWrap: {\n width: theme.colorPicker.recommendedColorsSwatchWidth,\n height: theme.colorPicker.recommendedColorsSwatchHeight,\n margin: theme.colorPicker.recommendedColorsSwatchMargin,\n\n \"& > span > div\": {\n borderRadius: theme.colorPicker.recommendedColorsSwatchBorderRadius,\n },\n },\n};\n"],"names":["styles","root","width","theme","colorPicker","recommendedColorsRootWidth","colors","display","flexWrap","position","recommendedColorsWidth","margin","recommendedColorsMargin","padding","title","fontWeight","fontWeights","semibold","marginBottom","swatchWrap","recommendedColorsSwatchWidth","height","recommendedColorsSwatchHeight","recommendedColorsSwatchMargin","borderRadius","recommendedColorsSwatchBorderRadius"],"mappings":";AAIO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IAAEC,OAAOC,MAAMC,YAAYC;AAAAA,EAA2B;AAAA,EAC5DC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVP,OAAOC,MAAMC,YAAYM;AAAAA,IACzBC,QAAQR,MAAMC,YAAYQ;AAAAA,IAC1BC,SAAS;AAAA,EACX;AAAA,EACAC,OAAO;AAAA,IACLC,YAAYZ,MAAMa,YAAYC;AAAAA,IAC9BC,cAAc;AAAA,EAChB;AAAA,EACAC,YAAY;AAAA,IACVjB,OAAOC,MAAMC,YAAYgB;AAAAA,IACzBC,QAAQlB,MAAMC,YAAYkB;AAAAA,IAC1BX,QAAQR,MAAMC,YAAYmB;AAAAA,IAE1B,kBAAkB;AAAA,MAChBC,cAAcrB,MAAMC,YAAYqB;AAAAA,IAClC;AAAA,EACF;AACF;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { getClasses } from "../../../utils/classes.js";
|
|
2
|
+
const classKeys = ["colors", "root", "swatchWrap", "title"];
|
|
3
|
+
const colorPickerPresetColorsClasses = getClasses(classKeys, "HvColorPicker-PresetColors");
|
|
4
|
+
const colorPickerPresetColorsClasses$1 = colorPickerPresetColorsClasses;
|
|
5
|
+
export {
|
|
6
|
+
colorPickerPresetColorsClasses$1 as default
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=presetColorsClasses.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"presetColorsClasses.js","sources":["../../../../../src/components/ColorPicker/PresetColors/presetColorsClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvColorPickerPresetColorsClasses {\n root?: string;\n colors?: string;\n title?: string;\n swatchWrap?: string;\n}\n\nconst classKeys: (keyof HvColorPickerPresetColorsClasses)[] = [\n \"colors\",\n \"root\",\n \"swatchWrap\",\n \"title\",\n];\n\nconst colorPickerPresetColorsClasses = getClasses(\n classKeys,\n \"HvColorPicker-PresetColors\"\n);\n\nexport default colorPickerPresetColorsClasses;\n"],"names":["classKeys","colorPickerPresetColorsClasses","getClasses"],"mappings":";AASA,MAAMA,YAAwD,CAC5D,UACA,QACA,cACA,OAAO;AAGT,MAAMC,iCAAiCC,WACrCF,WACA,4BAA4B;AAG9B,MAAA,mCAAeC;"}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { ClassNames } from "@emotion/react";
|
|
2
|
+
import { Add, CloseXS } from "@hitachivantara/uikit-react-icons";
|
|
3
|
+
import { styles } from "./SavedColors.styles.js";
|
|
4
|
+
import { Swatch } from "react-color/lib/components/common";
|
|
5
|
+
import colorPickerSavedColorsClasses from "./savedColorsClasses.js";
|
|
6
|
+
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
|
|
7
|
+
import { HvButton } from "../../Button/Button.js";
|
|
8
|
+
const SavedColors = ({
|
|
9
|
+
colors,
|
|
10
|
+
onClickColor,
|
|
11
|
+
onAddColor,
|
|
12
|
+
onRemoveColor,
|
|
13
|
+
deleteButtonArialLabel,
|
|
14
|
+
classes
|
|
15
|
+
}) => {
|
|
16
|
+
const handleClick = (hex) => {
|
|
17
|
+
onClickColor({
|
|
18
|
+
hex,
|
|
19
|
+
source: "hex"
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
return /* @__PURE__ */ jsx(ClassNames, {
|
|
23
|
+
children: ({
|
|
24
|
+
css,
|
|
25
|
+
cx
|
|
26
|
+
}) => /* @__PURE__ */ jsxs("div", {
|
|
27
|
+
className: cx(colorPickerSavedColorsClasses.root, css(styles.root), classes == null ? void 0 : classes.root),
|
|
28
|
+
children: [/* @__PURE__ */ jsx(HvButton, {
|
|
29
|
+
className: cx(colorPickerSavedColorsClasses.addButton, css(styles.addButton), classes == null ? void 0 : classes.addButton),
|
|
30
|
+
variant: "secondarySubtle",
|
|
31
|
+
icon: true,
|
|
32
|
+
onClick: onAddColor,
|
|
33
|
+
children: /* @__PURE__ */ jsx(Add, {})
|
|
34
|
+
}), colors.map((color, index) => {
|
|
35
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
36
|
+
className: cx(colorPickerSavedColorsClasses.swatchRoot, css(styles.swatchRoot), classes == null ? void 0 : classes.swatchRoot),
|
|
37
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
38
|
+
className: cx(colorPickerSavedColorsClasses.swatchWrap, css(styles.swatchWrap), classes == null ? void 0 : classes.swatchWrap),
|
|
39
|
+
children: /* @__PURE__ */ jsx(Swatch, {
|
|
40
|
+
color,
|
|
41
|
+
onClick: handleClick,
|
|
42
|
+
focusStyle: {
|
|
43
|
+
boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`
|
|
44
|
+
}
|
|
45
|
+
})
|
|
46
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
47
|
+
className: cx(colorPickerSavedColorsClasses.removeButtonRoot, css(styles.removeButtonRoot), classes == null ? void 0 : classes.removeButtonRoot),
|
|
48
|
+
children: /* @__PURE__ */ jsx(HvButton, {
|
|
49
|
+
className: cx(colorPickerSavedColorsClasses.removeButton, css(styles.removeButton), classes == null ? void 0 : classes.removeButton),
|
|
50
|
+
variant: "secondarySubtle",
|
|
51
|
+
onClick: () => onRemoveColor(color, index),
|
|
52
|
+
tabIndex: 0,
|
|
53
|
+
"aria-label": deleteButtonArialLabel,
|
|
54
|
+
children: /* @__PURE__ */ jsx(CloseXS, {
|
|
55
|
+
iconSize: "XS"
|
|
56
|
+
})
|
|
57
|
+
})
|
|
58
|
+
})]
|
|
59
|
+
}, `saved-color-${color}-${index}`);
|
|
60
|
+
})]
|
|
61
|
+
})
|
|
62
|
+
});
|
|
63
|
+
};
|
|
64
|
+
export {
|
|
65
|
+
SavedColors
|
|
66
|
+
};
|
|
67
|
+
//# sourceMappingURL=SavedColors.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SavedColors.js","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { HvButton } from \"@core/components\";\nimport { CloseXS, Add } from \"@hitachivantara/uikit-react-icons\";\nimport { styles } from \"./SavedColors.styles\";\n\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport colorPickerSavedColorsClasses, {\n HvColorPickerSavedColorsClasses,\n} from \"./savedColorsClasses\";\n\ninterface SavedColorsProps {\n colors: string[];\n onClickColor: (color: { hex: string; source: string }) => void;\n onAddColor: () => void;\n onRemoveColor: (color: string, index: number) => void;\n deleteButtonArialLabel?: string;\n classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = ({\n colors,\n onClickColor,\n onAddColor,\n onRemoveColor,\n deleteButtonArialLabel,\n classes,\n}: SavedColorsProps) => {\n const handleClick = (hex: string) => {\n onClickColor({\n hex,\n source: \"hex\",\n });\n };\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n colorPickerSavedColorsClasses.root,\n css(styles.root),\n classes?.root\n )}\n >\n <HvButton\n className={cx(\n colorPickerSavedColorsClasses.addButton,\n css(styles.addButton),\n classes?.addButton\n )}\n variant=\"secondarySubtle\"\n icon\n onClick={onAddColor}\n >\n <Add />\n </HvButton>\n {colors.map((color, index) => {\n return (\n <div\n key={`saved-color-${color}-${index}`}\n className={cx(\n colorPickerSavedColorsClasses.swatchRoot,\n css(styles.swatchRoot),\n classes?.swatchRoot\n )}\n >\n <div\n className={cx(\n colorPickerSavedColorsClasses.swatchWrap,\n css(styles.swatchWrap),\n classes?.swatchWrap\n )}\n >\n <Swatch\n color={color}\n onClick={handleClick}\n focusStyle={{\n boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n }}\n />\n </div>\n <div\n className={cx(\n colorPickerSavedColorsClasses.removeButtonRoot,\n css(styles.removeButtonRoot),\n classes?.removeButtonRoot\n )}\n >\n <HvButton\n className={cx(\n colorPickerSavedColorsClasses.removeButton,\n css(styles.removeButton),\n classes?.removeButton\n )}\n variant=\"secondarySubtle\"\n onClick={() => onRemoveColor(color, index)}\n tabIndex={0}\n aria-label={deleteButtonArialLabel}\n >\n <CloseXS iconSize=\"XS\" />\n </HvButton>\n </div>\n </div>\n );\n })}\n </div>\n )}\n </ClassNames>\n );\n};\n"],"names":["SavedColors","colors","onClickColor","onAddColor","onRemoveColor","deleteButtonArialLabel","classes","handleClick","hex","source","ClassNames","children","css","cx","className","colorPickerSavedColorsClasses","root","styles","_jsx","HvButton","addButton","variant","icon","onClick","Add","map","color","index","swatchRoot","swatchWrap","Swatch","focusStyle","boxShadow","removeButtonRoot","removeButton","tabIndex","CloseXS","iconSize"],"mappings":";;;;;;;AAqBO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACgB,MAAM;AAChBC,QAAAA,cAAcA,CAACC,QAAgB;AACtB,iBAAA;AAAA,MACXA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,6BACGC,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,2BACP,OAAA;AAAA,MACEC,WAAWD,GACTE,8BAA8BC,MAC9BJ,IAAIK,OAAOD,IAAI,GACfV,mCAASU,IAAI;AAAA,MACbL,UAAA,CAEFO,oBAACC,UAAQ;AAAA,QACPL,WAAWD,GACTE,8BAA8BK,WAC9BR,IAAIK,OAAOG,SAAS,GACpBd,mCAASc,SAAS;AAAA,QAEpBC,SAAQ;AAAA,QACRC,MAAI;AAAA,QACJC,SAASpB;AAAAA,QAAWQ,UAEpBO,oBAACM,KAAG,EAAA;AAAA,MACK,CAAA,GACVvB,OAAOwB,IAAI,CAACC,OAAOC,UAAU;AAC5B,oCACE,OAAA;AAAA,UAEEb,WAAWD,GACTE,8BAA8Ba,YAC9BhB,IAAIK,OAAOW,UAAU,GACrBtB,mCAASsB,UAAU;AAAA,UACnBjB,WAEFO,oBAAA,OAAA;AAAA,YACEJ,WAAWD,GACTE,8BAA8Bc,YAC9BjB,IAAIK,OAAOY,UAAU,GACrBvB,mCAASuB,UAAU;AAAA,YACnBlB,8BAEDmB,QAAM;AAAA,cACLJ;AAAAA,cACAH,SAAShB;AAAAA,cACTwB,YAAY;AAAA,gBACVC,WAAY,4CAA2CN;AAAAA,cACzD;AAAA,YAAA,CAAE;AAAA,UAAA,CACF,GAEJR,oBAAA,OAAA;AAAA,YACEJ,WAAWD,GACTE,8BAA8BkB,kBAC9BrB,IAAIK,OAAOgB,gBAAgB,GAC3B3B,mCAAS2B,gBAAgB;AAAA,YACzBtB,8BAEDQ,UAAQ;AAAA,cACPL,WAAWD,GACTE,8BAA8BmB,cAC9BtB,IAAIK,OAAOiB,YAAY,GACvB5B,mCAAS4B,YAAY;AAAA,cAEvBb,SAAQ;AAAA,cACRE,SAASA,MAAMnB,cAAcsB,OAAOC,KAAK;AAAA,cACzCQ,UAAU;AAAA,cACV,cAAY9B;AAAAA,cAAuBM,8BAElCyB,SAAO;AAAA,gBAACC,UAAS;AAAA,cAAA,CAAI;AAAA,YAAA,CAAG;AAAA,UAAA,CAEvB,CAAA;AAAA,QAAA,GA1CA,eAAcX,SAASC,OAAO;AAAA,MAAA,CA6CzC,CAAC;AAAA,IAAA,CAAA;AAAA,EAAA,CAGK;AAEjB;"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { theme } from "@hitachivantara/uikit-styles";
|
|
2
|
+
const styles = {
|
|
3
|
+
addButton: {
|
|
4
|
+
margin: theme.colorPicker.addSavedColorButtonMargin,
|
|
5
|
+
width: theme.colorPicker.addSavedColorButtonWidth,
|
|
6
|
+
height: theme.colorPicker.addSavedColorButtonHeight
|
|
7
|
+
},
|
|
8
|
+
root: {
|
|
9
|
+
display: "flex",
|
|
10
|
+
flexWrap: "wrap",
|
|
11
|
+
position: "relative",
|
|
12
|
+
alignItems: "center",
|
|
13
|
+
padding: 0,
|
|
14
|
+
width: theme.colorPicker.savedColorsWidth,
|
|
15
|
+
margin: theme.colorPicker.savedColorsMargin
|
|
16
|
+
},
|
|
17
|
+
swatchRoot: {
|
|
18
|
+
position: "relative"
|
|
19
|
+
},
|
|
20
|
+
swatchWrap: {
|
|
21
|
+
width: theme.colorPicker.savedColorsSwatchWidth,
|
|
22
|
+
height: theme.colorPicker.savedColorsSwatchHeight,
|
|
23
|
+
margin: theme.colorPicker.savedColorsSwatchMargin,
|
|
24
|
+
"& > span > div": {
|
|
25
|
+
borderRadius: theme.colorPicker.savedColorsSwatchBorderRadius
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
removeButtonRoot: {
|
|
29
|
+
position: "absolute",
|
|
30
|
+
top: 0,
|
|
31
|
+
right: 0,
|
|
32
|
+
display: "flex",
|
|
33
|
+
justifyContent: "center",
|
|
34
|
+
alignItems: "center",
|
|
35
|
+
height: 16,
|
|
36
|
+
width: 16,
|
|
37
|
+
background: theme.colors.atmo1,
|
|
38
|
+
borderRadius: theme.radii.base
|
|
39
|
+
},
|
|
40
|
+
removeButton: {
|
|
41
|
+
height: 16,
|
|
42
|
+
width: 16,
|
|
43
|
+
minWidth: 16,
|
|
44
|
+
minHeight: 16,
|
|
45
|
+
padding: 0,
|
|
46
|
+
margin: 0,
|
|
47
|
+
"& div > span": {
|
|
48
|
+
height: 16,
|
|
49
|
+
width: 16,
|
|
50
|
+
"& > div": {
|
|
51
|
+
height: 16,
|
|
52
|
+
width: 16
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
export {
|
|
58
|
+
styles
|
|
59
|
+
};
|
|
60
|
+
//# sourceMappingURL=SavedColors.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SavedColors.styles.js","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvColorPickerSavedColorsClasses } from \"./savedColorsClasses\";\n\nexport const styles: Partial<\n Record<keyof HvColorPickerSavedColorsClasses, CSSInterpolation>\n> = {\n addButton: {\n margin: theme.colorPicker.addSavedColorButtonMargin,\n width: theme.colorPicker.addSavedColorButtonWidth,\n height: theme.colorPicker.addSavedColorButtonHeight,\n },\n root: {\n display: \"flex\",\n flexWrap: \"wrap\",\n position: \"relative\",\n alignItems: \"center\",\n padding: 0,\n width: theme.colorPicker.savedColorsWidth,\n margin: theme.colorPicker.savedColorsMargin,\n },\n swatchRoot: { position: \"relative\" },\n swatchWrap: {\n width: theme.colorPicker.savedColorsSwatchWidth,\n height: theme.colorPicker.savedColorsSwatchHeight,\n margin: theme.colorPicker.savedColorsSwatchMargin,\n\n \"& > span > div\": {\n borderRadius: theme.colorPicker.savedColorsSwatchBorderRadius,\n },\n },\n removeButtonRoot: {\n position: \"absolute\",\n top: 0,\n right: 0,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: 16,\n width: 16,\n background: theme.colors.atmo1,\n borderRadius: theme.radii.base,\n },\n removeButton: {\n height: 16,\n width: 16,\n minWidth: 16,\n minHeight: 16,\n padding: 0,\n margin: 0,\n\n \"& div > span\": {\n height: 16,\n width: 16,\n\n \"& > div\": { height: 16, width: 16 },\n },\n },\n};\n"],"names":["styles","addButton","margin","theme","colorPicker","addSavedColorButtonMargin","width","addSavedColorButtonWidth","height","addSavedColorButtonHeight","root","display","flexWrap","position","alignItems","padding","savedColorsWidth","savedColorsMargin","swatchRoot","swatchWrap","savedColorsSwatchWidth","savedColorsSwatchHeight","savedColorsSwatchMargin","borderRadius","savedColorsSwatchBorderRadius","removeButtonRoot","top","right","justifyContent","background","colors","atmo1","radii","base","removeButton","minWidth","minHeight"],"mappings":";AAIO,MAAMA,SAET;AAAA,EACFC,WAAW;AAAA,IACTC,QAAQC,MAAMC,YAAYC;AAAAA,IAC1BC,OAAOH,MAAMC,YAAYG;AAAAA,IACzBC,QAAQL,MAAMC,YAAYK;AAAAA,EAC5B;AAAA,EACAC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,YAAY;AAAA,IACZC,SAAS;AAAA,IACTT,OAAOH,MAAMC,YAAYY;AAAAA,IACzBd,QAAQC,MAAMC,YAAYa;AAAAA,EAC5B;AAAA,EACAC,YAAY;AAAA,IAAEL,UAAU;AAAA,EAAW;AAAA,EACnCM,YAAY;AAAA,IACVb,OAAOH,MAAMC,YAAYgB;AAAAA,IACzBZ,QAAQL,MAAMC,YAAYiB;AAAAA,IAC1BnB,QAAQC,MAAMC,YAAYkB;AAAAA,IAE1B,kBAAkB;AAAA,MAChBC,cAAcpB,MAAMC,YAAYoB;AAAAA,IAClC;AAAA,EACF;AAAA,EACAC,kBAAkB;AAAA,IAChBZ,UAAU;AAAA,IACVa,KAAK;AAAA,IACLC,OAAO;AAAA,IACPhB,SAAS;AAAA,IACTiB,gBAAgB;AAAA,IAChBd,YAAY;AAAA,IACZN,QAAQ;AAAA,IACRF,OAAO;AAAA,IACPuB,YAAY1B,MAAM2B,OAAOC;AAAAA,IACzBR,cAAcpB,MAAM6B,MAAMC;AAAAA,EAC5B;AAAA,EACAC,cAAc;AAAA,IACZ1B,QAAQ;AAAA,IACRF,OAAO;AAAA,IACP6B,UAAU;AAAA,IACVC,WAAW;AAAA,IACXrB,SAAS;AAAA,IACTb,QAAQ;AAAA,IAER,gBAAgB;AAAA,MACdM,QAAQ;AAAA,MACRF,OAAO;AAAA,MAEP,WAAW;AAAA,QAAEE,QAAQ;AAAA,QAAIF,OAAO;AAAA,MAAG;AAAA,IACrC;AAAA,EACF;AACF;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { getClasses } from "../../../utils/classes.js";
|
|
2
|
+
const classKeys = ["addButton", "removeButton", "removeButtonRoot", "root", "swatchRoot", "swatchWrap"];
|
|
3
|
+
const colorPickerSavedColorsClasses = getClasses(classKeys, "HvColorPicker-SavedColors");
|
|
4
|
+
const colorPickerSavedColorsClasses$1 = colorPickerSavedColorsClasses;
|
|
5
|
+
export {
|
|
6
|
+
colorPickerSavedColorsClasses$1 as default
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=savedColorsClasses.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"savedColorsClasses.js","sources":["../../../../../src/components/ColorPicker/SavedColors/savedColorsClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvColorPickerSavedColorsClasses {\n root?: string;\n addButton?: string;\n removeButton?: string;\n swatchRoot?: string;\n removeButtonRoot?: string;\n swatchWrap?: string;\n}\n\nconst classKeys: (keyof HvColorPickerSavedColorsClasses)[] = [\n \"addButton\",\n \"removeButton\",\n \"removeButtonRoot\",\n \"root\",\n \"swatchRoot\",\n \"swatchWrap\",\n];\n\nconst colorPickerSavedColorsClasses = getClasses(\n classKeys,\n \"HvColorPicker-SavedColors\"\n);\n\nexport default colorPickerSavedColorsClasses;\n"],"names":["classKeys","colorPickerSavedColorsClasses","getClasses"],"mappings":";AAWA,MAAMA,YAAuD,CAC3D,aACA,gBACA,oBACA,QACA,cACA,YAAY;AAGd,MAAMC,gCAAgCC,WACpCF,WACA,2BAA2B;AAG7B,MAAA,kCAAeC;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { getClasses } from "../../utils/classes.js";
|
|
2
|
+
const classKeys = ["root", "labelContainer", "label", "description", "headerColorIcon", "headerColorValue", "panel", "colorPicker", "colorPickerIcon", "dropdownRootIconOnly", "headerColorIconOnly", "recommendedColorsRoot", "pickerFields"];
|
|
3
|
+
const colorPickerClasses = getClasses(classKeys, "HvColorPicker");
|
|
4
|
+
const colorPickerClasses$1 = colorPickerClasses;
|
|
5
|
+
export {
|
|
6
|
+
colorPickerClasses$1 as default
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=colorPickerClasses.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"colorPickerClasses.js","sources":["../../../../src/components/ColorPicker/colorPickerClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvColorPickerClasses {\n root?: string;\n labelContainer?: string;\n label?: string;\n description?: string;\n headerColorIcon?: string;\n headerColorValue?: string;\n panel?: string;\n colorPicker?: string;\n colorPickerIcon?: string;\n dropdownRootIconOnly?: string;\n headerColorIconOnly?: string;\n recommendedColorsRoot?: string;\n pickerFields?: string;\n}\n\nconst classKeys: (keyof HvColorPickerClasses)[] = [\n \"root\",\n \"labelContainer\",\n \"label\",\n \"description\",\n \"headerColorIcon\",\n \"headerColorValue\",\n \"panel\",\n \"colorPicker\",\n \"colorPickerIcon\",\n \"dropdownRootIconOnly\",\n \"headerColorIconOnly\",\n \"recommendedColorsRoot\",\n \"pickerFields\",\n];\n\nconst colorPickerClasses = getClasses(classKeys, \"HvColorPicker\");\n\nexport default colorPickerClasses;\n"],"names":["classKeys","colorPickerClasses","getClasses"],"mappings":";AAkBA,MAAMA,YAA4C,CAChD,QACA,kBACA,SACA,eACA,mBACA,oBACA,SACA,eACA,mBACA,wBACA,uBACA,yBACA,cAAc;AAGhB,MAAMC,qBAAqBC,WAAWF,WAAW,eAAe;AAEhE,MAAA,uBAAeC;"}
|
|
@@ -1,19 +1,8 @@
|
|
|
1
1
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
2
|
-
import { outlineStyles } from "../../utils/focusUtils.js";
|
|
3
2
|
const styles = {
|
|
4
3
|
root: {
|
|
5
4
|
position: "relative"
|
|
6
5
|
},
|
|
7
|
-
inputContainer: {
|
|
8
|
-
position: "relative",
|
|
9
|
-
background: theme.colors.atmo1,
|
|
10
|
-
height: 32,
|
|
11
|
-
paddingLeft: theme.space.xs,
|
|
12
|
-
paddingRight: theme.space.md,
|
|
13
|
-
"&:focus": {
|
|
14
|
-
...outlineStyles
|
|
15
|
-
}
|
|
16
|
-
},
|
|
17
6
|
actionContainer: {
|
|
18
7
|
justifyContent: "space-between"
|
|
19
8
|
},
|
|
@@ -57,19 +46,6 @@ const styles = {
|
|
|
57
46
|
"&:first-of-type": {
|
|
58
47
|
marginRight: theme.space.xs
|
|
59
48
|
}
|
|
60
|
-
},
|
|
61
|
-
rangeMainContainer: {
|
|
62
|
-
display: "flex",
|
|
63
|
-
flexDirection: "column",
|
|
64
|
-
backgroundColor: theme.colors.atmo1,
|
|
65
|
-
width: "640px"
|
|
66
|
-
},
|
|
67
|
-
rangeCalendarsContainer: {
|
|
68
|
-
display: "flex",
|
|
69
|
-
flexDirection: "row"
|
|
70
|
-
},
|
|
71
|
-
rangeCalendarContainer: {
|
|
72
|
-
width: "50%"
|
|
73
49
|
}
|
|
74
50
|
};
|
|
75
51
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.styles.js","sources":["../../../../src/components/DatePicker/DatePicker.styles.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"DatePicker.styles.js","sources":["../../../../src/components/DatePicker/DatePicker.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvDatePickerClasses } from \"./datePickerClasses\";\n\nexport const styles: Partial<\n Record<keyof HvDatePickerClasses, CSSInterpolation>\n> = {\n root: {\n position: \"relative\",\n },\n actionContainer: {\n justifyContent: \"space-between\",\n },\n leftContainer: {},\n rightContainer: {},\n\n labelContainer: {\n display: \"flex\",\n alignItems: \"flex-start\",\n },\n label: {\n paddingBottom: \"6px\",\n display: \"block\",\n },\n description: {},\n error: {},\n\n dropdown: {\n display: \"block\",\n },\n panel: {\n border: theme.datePicker.panelBorder,\n backgroundColor: theme.datePicker.panelBackgroundColor,\n },\n\n dropdownHeaderInvalid: {\n border: `1px solid ${theme.colors.negative}`,\n \"&:hover\": {\n border: `1px solid ${theme.colors.negative}`,\n },\n },\n dropdownHeaderOpen: {\n border: theme.datePicker.dropdownHeaderOpenBorder,\n \"&:hover\": {\n border: theme.datePicker.dropdownHeaderOpenBorder,\n },\n },\n icon: {\n position: \"absolute\",\n right: -1,\n bottom: -1,\n },\n action: {\n \"&:first-of-type\": {\n marginRight: theme.space.xs,\n },\n },\n};\n"],"names":["styles","root","position","actionContainer","justifyContent","leftContainer","rightContainer","labelContainer","display","alignItems","label","paddingBottom","description","error","dropdown","panel","border","theme","datePicker","panelBorder","backgroundColor","panelBackgroundColor","dropdownHeaderInvalid","colors","negative","dropdownHeaderOpen","dropdownHeaderOpenBorder","icon","right","bottom","action","marginRight","space","xs"],"mappings":";AAIO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IACJC,UAAU;AAAA,EACZ;AAAA,EACAC,iBAAiB;AAAA,IACfC,gBAAgB;AAAA,EAClB;AAAA,EACAC,eAAe,CAAC;AAAA,EAChBC,gBAAgB,CAAC;AAAA,EAEjBC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,YAAY;AAAA,EACd;AAAA,EACAC,OAAO;AAAA,IACLC,eAAe;AAAA,IACfH,SAAS;AAAA,EACX;AAAA,EACAI,aAAa,CAAC;AAAA,EACdC,OAAO,CAAC;AAAA,EAERC,UAAU;AAAA,IACRN,SAAS;AAAA,EACX;AAAA,EACAO,OAAO;AAAA,IACLC,QAAQC,MAAMC,WAAWC;AAAAA,IACzBC,iBAAiBH,MAAMC,WAAWG;AAAAA,EACpC;AAAA,EAEAC,uBAAuB;AAAA,IACrBN,QAAS,aAAYC,MAAMM,OAAOC;AAAAA,IAClC,WAAW;AAAA,MACTR,QAAS,aAAYC,MAAMM,OAAOC;AAAAA,IACpC;AAAA,EACF;AAAA,EACAC,oBAAoB;AAAA,IAClBT,QAAQC,MAAMC,WAAWQ;AAAAA,IACzB,WAAW;AAAA,MACTV,QAAQC,MAAMC,WAAWQ;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJzB,UAAU;AAAA,IACV0B,OAAO;AAAA,IACPC,QAAQ;AAAA,EACV;AAAA,EACAC,QAAQ;AAAA,IACN,mBAAmB;AAAA,MACjBC,aAAad,MAAMe,MAAMC;AAAAA,IAC3B;AAAA,EACF;AACF;"}
|
|
@@ -59,7 +59,7 @@ const StyledBackdrop = /* @__PURE__ */ _styled(Backdrop, process.env.NODE_ENV ==
|
|
|
59
59
|
$backColor
|
|
60
60
|
}) => ({
|
|
61
61
|
background: fade($backColor, 0.8)
|
|
62
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
62
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRGlhbG9nL0RpYWxvZy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZDOEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9EaWFsb2cvRGlhbG9nLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7XG4gIHBhcGVyQ2xhc3NlcyBhcyBNdWlQYXBlckNsYXNzZXMsXG4gIEJhY2tkcm9wIGFzIE11aUJhY2tkcm9wLFxufSBmcm9tIFwiQG11aS9tYXRlcmlhbFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5pbXBvcnQgZmFkZSBmcm9tIFwiQGNvcmUvdXRpbHMvaGV4VG9SZ2JBXCI7XG5pbXBvcnQgeyBIdkJ1dHRvbiwgSHZCdXR0b25Qcm9wcyB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzXCI7XG5pbXBvcnQgeyBmb3J3YXJkUmVmLCBSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IENTU0ludGVycG9sYXRpb24gfSBmcm9tIFwiQGVtb3Rpb24vc2VyaWFsaXplXCI7XG5pbXBvcnQgeyBIdkRpYWxvZ0NsYXNzZXMgfSBmcm9tIFwiLi9kaWFsb2dDbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBzdHlsZXM6IFBhcnRpYWw8UmVjb3JkPGtleW9mIEh2RGlhbG9nQ2xhc3NlcywgQ1NTSW50ZXJwb2xhdGlvbj4+ID1cbiAge1xuICAgIHBhcGVyOiB7XG4gICAgICBbYCYuTXVpRGlhbG9nLXBhcGVyYF06IHtcbiAgICAgICAgbWF4SGVpZ2h0OiBgY2FsYygxMDAlIC0gKDIgKiAke3RoZW1lLmRpYWxvZy5tYXJnaW59KSlgLFxuICAgICAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICAgICAgZmxleERpcmVjdGlvbjogXCJjb2x1bW5cIixcbiAgICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG4gICAgICAgIGZsZXg6IFwiMCAwIDgzLjMzMzMzMzMlXCIsXG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8xLFxuICAgICAgICBwYWRkaW5nOiBcIjBweFwiLFxuICAgICAgICBvdmVyZmxvdzogXCJhdXRvXCIsXG4gICAgICAgIGJveFNoYWRvdzogW1wibm9uZVwiLCBcIjAgMnB4IDEycHggcmdiYSg2NSw2NSw2NSwwLjEyKVwiXSxcbiAgICAgICAgYm9yZGVyUmFkaXVzOiB0aGVtZS5kaWFsb2cuYm9yZGVyUmFkaXVzLFxuICAgICAgICBbYCYuJHtNdWlQYXBlckNsYXNzZXMucm9vdH1gXToge1xuICAgICAgICAgIC8vIHdpZHRoOiBcImluaGVyaXRcIixcbiAgICAgICAgICBtaW5XaWR0aDogXCIzMy4zMzMzMzMzJVwiLFxuICAgICAgICAgIG1heFdpZHRoOiBcIjgzLjMzMzMzMzMlXCIsXG4gICAgICAgICAgXCImLmZ1bGxzY3JlZW5cIjoge1xuICAgICAgICAgICAgZmxleDogXCIxXCIsXG4gICAgICAgICAgICBib3JkZXJSYWRpdXM6IFwiMFwiLFxuICAgICAgICAgICAgd2lkdGg6IFwiaW5oZXJpdFwiLFxuICAgICAgICAgICAgbWluV2lkdGg6IFwiMTAwJVwiLFxuICAgICAgICAgICAgbWF4V2lkdGg6IFwiMTAwJVwiLFxuICAgICAgICAgICAgbWluSGVpZ2h0OiBcIjEwMCVcIixcbiAgICAgICAgICAgIG1heEhlaWdodDogXCIxMDAlXCIsXG4gICAgICAgICAgfSxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfSxcbiAgfTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEJhY2tkcm9wID0gc3R5bGVkKFxuICBNdWlCYWNrZHJvcCxcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkYmFja0NvbG9yIH06IHsgJGJhY2tDb2xvcjogc3RyaW5nIH0pID0+ICh7XG4gIGJhY2tncm91bmQ6IGZhZGUoJGJhY2tDb2xvciwgMC44KSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENsb3NlID0gc3R5bGVkKFxuICBmb3J3YXJkUmVmKChwcm9wczogSHZCdXR0b25Qcm9wcywgcmVmPzogUmVmPEhUTUxCdXR0b25FbGVtZW50PikgPT4ge1xuICAgIHJldHVybiA8SHZCdXR0b24gey4uLnByb3BzfSByZWY9e3JlZn0gLz47XG4gIH0pXG4pKHtcbiAgcGFkZGluZzogMCxcbiAgbWluV2lkdGg6IFwiYXV0b1wiLFxuICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICB0b3A6IHRoZW1lLnNwYWNlLnNtLFxuICByaWdodDogdGhlbWUuc3BhY2Uuc20sXG4gIHdpZHRoOiAzMixcbiAgaGVpZ2h0OiAzMixcbn0pO1xuIl19 */");
|
|
63
63
|
const StyledClose = /* @__PURE__ */ _styled(forwardRef((props, ref) => {
|
|
64
64
|
return /* @__PURE__ */ jsx(HvButton, {
|
|
65
65
|
...props,
|
|
@@ -78,7 +78,7 @@ const StyledClose = /* @__PURE__ */ _styled(forwardRef((props, ref) => {
|
|
|
78
78
|
right: theme.space.sm,
|
|
79
79
|
width: 32,
|
|
80
80
|
height: 32
|
|
81
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
81
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRGlhbG9nL0RpYWxvZy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9EMkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9EaWFsb2cvRGlhbG9nLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7XG4gIHBhcGVyQ2xhc3NlcyBhcyBNdWlQYXBlckNsYXNzZXMsXG4gIEJhY2tkcm9wIGFzIE11aUJhY2tkcm9wLFxufSBmcm9tIFwiQG11aS9tYXRlcmlhbFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5pbXBvcnQgZmFkZSBmcm9tIFwiQGNvcmUvdXRpbHMvaGV4VG9SZ2JBXCI7XG5pbXBvcnQgeyBIdkJ1dHRvbiwgSHZCdXR0b25Qcm9wcyB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzXCI7XG5pbXBvcnQgeyBmb3J3YXJkUmVmLCBSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IENTU0ludGVycG9sYXRpb24gfSBmcm9tIFwiQGVtb3Rpb24vc2VyaWFsaXplXCI7XG5pbXBvcnQgeyBIdkRpYWxvZ0NsYXNzZXMgfSBmcm9tIFwiLi9kaWFsb2dDbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBzdHlsZXM6IFBhcnRpYWw8UmVjb3JkPGtleW9mIEh2RGlhbG9nQ2xhc3NlcywgQ1NTSW50ZXJwb2xhdGlvbj4+ID1cbiAge1xuICAgIHBhcGVyOiB7XG4gICAgICBbYCYuTXVpRGlhbG9nLXBhcGVyYF06IHtcbiAgICAgICAgbWF4SGVpZ2h0OiBgY2FsYygxMDAlIC0gKDIgKiAke3RoZW1lLmRpYWxvZy5tYXJnaW59KSlgLFxuICAgICAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICAgICAgZmxleERpcmVjdGlvbjogXCJjb2x1bW5cIixcbiAgICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG4gICAgICAgIGZsZXg6IFwiMCAwIDgzLjMzMzMzMzMlXCIsXG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8xLFxuICAgICAgICBwYWRkaW5nOiBcIjBweFwiLFxuICAgICAgICBvdmVyZmxvdzogXCJhdXRvXCIsXG4gICAgICAgIGJveFNoYWRvdzogW1wibm9uZVwiLCBcIjAgMnB4IDEycHggcmdiYSg2NSw2NSw2NSwwLjEyKVwiXSxcbiAgICAgICAgYm9yZGVyUmFkaXVzOiB0aGVtZS5kaWFsb2cuYm9yZGVyUmFkaXVzLFxuICAgICAgICBbYCYuJHtNdWlQYXBlckNsYXNzZXMucm9vdH1gXToge1xuICAgICAgICAgIC8vIHdpZHRoOiBcImluaGVyaXRcIixcbiAgICAgICAgICBtaW5XaWR0aDogXCIzMy4zMzMzMzMzJVwiLFxuICAgICAgICAgIG1heFdpZHRoOiBcIjgzLjMzMzMzMzMlXCIsXG4gICAgICAgICAgXCImLmZ1bGxzY3JlZW5cIjoge1xuICAgICAgICAgICAgZmxleDogXCIxXCIsXG4gICAgICAgICAgICBib3JkZXJSYWRpdXM6IFwiMFwiLFxuICAgICAgICAgICAgd2lkdGg6IFwiaW5oZXJpdFwiLFxuICAgICAgICAgICAgbWluV2lkdGg6IFwiMTAwJVwiLFxuICAgICAgICAgICAgbWF4V2lkdGg6IFwiMTAwJVwiLFxuICAgICAgICAgICAgbWluSGVpZ2h0OiBcIjEwMCVcIixcbiAgICAgICAgICAgIG1heEhlaWdodDogXCIxMDAlXCIsXG4gICAgICAgICAgfSxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfSxcbiAgfTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEJhY2tkcm9wID0gc3R5bGVkKFxuICBNdWlCYWNrZHJvcCxcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkYmFja0NvbG9yIH06IHsgJGJhY2tDb2xvcjogc3RyaW5nIH0pID0+ICh7XG4gIGJhY2tncm91bmQ6IGZhZGUoJGJhY2tDb2xvciwgMC44KSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENsb3NlID0gc3R5bGVkKFxuICBmb3J3YXJkUmVmKChwcm9wczogSHZCdXR0b25Qcm9wcywgcmVmPzogUmVmPEhUTUxCdXR0b25FbGVtZW50PikgPT4ge1xuICAgIHJldHVybiA8SHZCdXR0b24gey4uLnByb3BzfSByZWY9e3JlZn0gLz47XG4gIH0pXG4pKHtcbiAgcGFkZGluZzogMCxcbiAgbWluV2lkdGg6IFwiYXV0b1wiLFxuICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICB0b3A6IHRoZW1lLnNwYWNlLnNtLFxuICByaWdodDogdGhlbWUuc3BhY2Uuc20sXG4gIHdpZHRoOiAzMixcbiAgaGVpZ2h0OiAzMixcbn0pO1xuIl19 */");
|
|
82
82
|
export {
|
|
83
83
|
StyledBackdrop,
|
|
84
84
|
StyledClose,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.styles.js","sources":["../../../../src/components/Dialog/Dialog.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {\n paperClasses as MuiPaperClasses,\n Backdrop as MuiBackdrop,\n} from \"@mui/material\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvButton, HvButtonProps } from \"@core/components\";\nimport { forwardRef, Ref } from \"react\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\n\nexport const styles:
|
|
1
|
+
{"version":3,"file":"Dialog.styles.js","sources":["../../../../src/components/Dialog/Dialog.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {\n paperClasses as MuiPaperClasses,\n Backdrop as MuiBackdrop,\n} from \"@mui/material\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvButton, HvButtonProps } from \"@core/components\";\nimport { forwardRef, Ref } from \"react\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\nimport { HvDialogClasses } from \"./dialogClasses\";\n\nexport const styles: Partial<Record<keyof HvDialogClasses, CSSInterpolation>> =\n {\n paper: {\n [`&.MuiDialog-paper`]: {\n maxHeight: `calc(100% - (2 * ${theme.dialog.margin}))`,\n display: \"flex\",\n flexDirection: \"column\",\n color: theme.colors.secondary,\n flex: \"0 0 83.3333333%\",\n backgroundColor: theme.colors.atmo1,\n padding: \"0px\",\n overflow: \"auto\",\n boxShadow: [\"none\", \"0 2px 12px rgba(65,65,65,0.12)\"],\n borderRadius: theme.dialog.borderRadius,\n [`&.${MuiPaperClasses.root}`]: {\n // width: \"inherit\",\n minWidth: \"33.3333333%\",\n maxWidth: \"83.3333333%\",\n \"&.fullscreen\": {\n flex: \"1\",\n borderRadius: \"0\",\n width: \"inherit\",\n minWidth: \"100%\",\n maxWidth: \"100%\",\n minHeight: \"100%\",\n maxHeight: \"100%\",\n },\n },\n },\n },\n };\n\nexport const StyledBackdrop = styled(\n MuiBackdrop,\n transientOptions\n)(({ $backColor }: { $backColor: string }) => ({\n background: fade($backColor, 0.8),\n}));\n\nexport const StyledClose = styled(\n forwardRef((props: HvButtonProps, ref?: Ref<HTMLButtonElement>) => {\n return <HvButton {...props} ref={ref} />;\n })\n)({\n padding: 0,\n minWidth: \"auto\",\n position: \"absolute\",\n top: theme.space.sm,\n right: theme.space.sm,\n width: 32,\n height: 32,\n});\n"],"names":["styles","paper","maxHeight","theme","dialog","margin","display","flexDirection","color","colors","secondary","flex","backgroundColor","atmo1","padding","overflow","boxShadow","borderRadius","MuiPaperClasses","root","minWidth","maxWidth","width","minHeight","StyledBackdrop","MuiBackdrop","process","env","NODE_ENV","_extends","target","transientOptions","label","$backColor","background","fade","StyledClose","_styled","forwardRef","props","ref","HvButton","position","top","space","sm","right","height"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAaO,MAAMA,SACX;AAAA,EACEC,OAAO;AAAA,IACL,CAAE,mBAAkB,GAAG;AAAA,MACrBC,WAAY,oBAAmBC,MAAMC,OAAOC;AAAAA,MAC5CC,SAAS;AAAA,MACTC,eAAe;AAAA,MACfC,OAAOL,MAAMM,OAAOC;AAAAA,MACpBC,MAAM;AAAA,MACNC,iBAAiBT,MAAMM,OAAOI;AAAAA,MAC9BC,SAAS;AAAA,MACTC,UAAU;AAAA,MACVC,WAAW,CAAC,QAAQ,gCAAgC;AAAA,MACpDC,cAAcd,MAAMC,OAAOa;AAAAA,MAC3B,CAAE,KAAIC,aAAgBC,MAAM,GAAG;AAAA;AAAA,QAE7BC,UAAU;AAAA,QACVC,UAAU;AAAA,QACV,gBAAgB;AAAA,UACdV,MAAM;AAAA,UACNM,cAAc;AAAA,UACdK,OAAO;AAAA,UACPF,UAAU;AAAA,UACVC,UAAU;AAAA,UACVE,WAAW;AAAA,UACXrB,WAAW;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEWsB,MAAAA,yCACXC,UAAWC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACXC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,gBAAgB,CACjB,EAAC,CAAC;AAAA,EAAEE;AAAmC,OAAO;AAAA,EAC7CC,YAAYC,KAAKF,YAAY,GAAG;AAClC,IAAEP,QAAAC,IAAAC,aAAC,eAAA,KAAA,ymGAAA;AAEI,MAAMQ,cAAcC,wBACzBC,WAAW,CAACC,OAAsBC,QAAiC;AACjE,6BAAQC,UAAQ;AAAA,IAAA,GAAKF;AAAAA,IAAOC;AAAAA,EAAAA,CAAY;AAC1C,CAAC,GAACd,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAE,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAE,OAAA;AAAA,CAAA,EACF;AAAA,EACAlB,SAAS;AAAA,EACTM,UAAU;AAAA,EACVsB,UAAU;AAAA,EACVC,KAAKxC,MAAMyC,MAAMC;AAAAA,EACjBC,OAAO3C,MAAMyC,MAAMC;AAAAA,EACnBvB,OAAO;AAAA,EACPyB,QAAQ;AACV,GAACrB,QAAAC,IAAAC,aAAC,eAAA,KAAA,ymGAAA;"}
|
|
@@ -3,6 +3,7 @@ import { HvFilterGroupContext } from "../FilterGroupContext.js";
|
|
|
3
3
|
import { styles } from "./Counter.styles.js";
|
|
4
4
|
import { ClassNames } from "@emotion/react";
|
|
5
5
|
import { clsx } from "clsx";
|
|
6
|
+
import filterGroupCounterClasses from "./counterClasses.js";
|
|
6
7
|
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
|
|
7
8
|
const getExistingFiltersById = (idx, filterValues, filterOptions) => {
|
|
8
9
|
var _a;
|
|
@@ -17,7 +18,8 @@ const getExistingFiltersById = (idx, filterValues, filterOptions) => {
|
|
|
17
18
|
};
|
|
18
19
|
const HvFilterGroupCounter = ({
|
|
19
20
|
className,
|
|
20
|
-
id
|
|
21
|
+
id,
|
|
22
|
+
classes
|
|
21
23
|
}) => {
|
|
22
24
|
var _a;
|
|
23
25
|
const {
|
|
@@ -37,9 +39,9 @@ const HvFilterGroupCounter = ({
|
|
|
37
39
|
children: ({
|
|
38
40
|
css
|
|
39
41
|
}) => /* @__PURE__ */ jsxs("div", {
|
|
40
|
-
className: clsx(
|
|
42
|
+
className: clsx(filterGroupCounterClasses.root, css(styles.root), className, classes == null ? void 0 : classes.root),
|
|
41
43
|
children: [partialCounter > 0 ? /* @__PURE__ */ jsx("p", {
|
|
42
|
-
className: css(styles.partialCounter),
|
|
44
|
+
className: clsx(filterGroupCounterClasses.partialCounter, css(styles.partialCounter), classes == null ? void 0 : classes.partialCounter),
|
|
43
45
|
children: partialCounter
|
|
44
46
|
}) : partialCounter, ` / ${totalCounter}`]
|
|
45
47
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Counter.js","sources":["../../../../../src/components/FilterGroup/Counter/Counter.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { styles } from \"./Counter.styles\";\nimport { HvFilterGroupFilters, HvFilterGroupValue } from \"../FilterGroup\";\nimport { ClassNames } from \"@emotion/react\";\nimport { clsx } from \"clsx\";\n\nexport interface HvFilterGroupCounterProps {\n className?: string;\n id?: string;\n}\n\nconst getExistingFiltersById = (\n idx: number,\n filterValues: HvFilterGroupValue,\n filterOptions: HvFilterGroupFilters\n) => {\n let total = 0;\n filterValues[idx]?.forEach((fv) => {\n if (filterOptions[idx]?.data.find((f) => f.id === fv)) {\n total += 1;\n }\n });\n return total;\n};\n\nexport const HvFilterGroupCounter = ({\n className,\n id,\n}: HvFilterGroupCounterProps) => {\n const {\n filterOptions,\n filterValues = [],\n appliedFilters = [],\n } = useContext(HvFilterGroupContext);\n\n const options =\n id && filterOptions.find((option) => option.id === id)\n ? ([\n filterOptions.find((option) => option.id === id),\n ] as HvFilterGroupFilters)\n : filterOptions;\n const optionIdx = filterOptions.findIndex((option) => option.id === id);\n\n let groupsCounter = 0;\n appliedFilters\n ?.flat()\n ?.filter((elem) => elem !== undefined)\n .forEach((fg, i) => {\n groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);\n });\n\n const partialCounter = id\n ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0\n : groupsCounter;\n\n const totalCounter = options.reduce(\n (acc, option) => acc + option.data.length,\n 0\n );\n\n return (\n <ClassNames>\n {({ css }) => (\n <div
|
|
1
|
+
{"version":3,"file":"Counter.js","sources":["../../../../../src/components/FilterGroup/Counter/Counter.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { styles } from \"./Counter.styles\";\nimport { HvFilterGroupFilters, HvFilterGroupValue } from \"../FilterGroup\";\nimport { ClassNames } from \"@emotion/react\";\nimport { clsx } from \"clsx\";\nimport filterGroupCounterClasses, {\n HvFilterGroupCounterClasses,\n} from \"./counterClasses\";\n\nexport interface HvFilterGroupCounterProps {\n className?: string;\n id?: string;\n classes?: HvFilterGroupCounterClasses;\n}\n\nconst getExistingFiltersById = (\n idx: number,\n filterValues: HvFilterGroupValue,\n filterOptions: HvFilterGroupFilters\n) => {\n let total = 0;\n filterValues[idx]?.forEach((fv) => {\n if (filterOptions[idx]?.data.find((f) => f.id === fv)) {\n total += 1;\n }\n });\n return total;\n};\n\nexport const HvFilterGroupCounter = ({\n className,\n id,\n classes,\n}: HvFilterGroupCounterProps) => {\n const {\n filterOptions,\n filterValues = [],\n appliedFilters = [],\n } = useContext(HvFilterGroupContext);\n\n const options =\n id && filterOptions.find((option) => option.id === id)\n ? ([\n filterOptions.find((option) => option.id === id),\n ] as HvFilterGroupFilters)\n : filterOptions;\n const optionIdx = filterOptions.findIndex((option) => option.id === id);\n\n let groupsCounter = 0;\n appliedFilters\n ?.flat()\n ?.filter((elem) => elem !== undefined)\n .forEach((fg, i) => {\n groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);\n });\n\n const partialCounter = id\n ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0\n : groupsCounter;\n\n const totalCounter = options.reduce(\n (acc, option) => acc + option.data.length,\n 0\n );\n\n return (\n <ClassNames>\n {({ css }) => (\n <div\n className={clsx(\n filterGroupCounterClasses.root,\n css(styles.root),\n className,\n classes?.root\n )}\n >\n {partialCounter > 0 ? (\n <p\n className={clsx(\n filterGroupCounterClasses.partialCounter,\n css(styles.partialCounter),\n classes?.partialCounter\n )}\n >\n {partialCounter}\n </p>\n ) : (\n partialCounter\n )}\n {` / ${totalCounter}`}\n </div>\n )}\n </ClassNames>\n );\n};\n"],"names":["getExistingFiltersById","idx","filterValues","filterOptions","total","forEach","fv","data","find","f","id","HvFilterGroupCounter","className","classes","appliedFilters","useContext","HvFilterGroupContext","options","option","optionIdx","findIndex","groupsCounter","flat","filter","elem","undefined","fg","i","partialCounter","totalCounter","reduce","acc","length","ClassNames","children","css","clsx","filterGroupCounterClasses","root","styles"],"mappings":";;;;;;;AAgBA,MAAMA,yBAAyBA,CAC7BC,KACAC,cACAC,kBACG;;AACH,MAAIC,QAAQ;AACCH,qBAAAA,GAAG,MAAHA,mBAAMI,QAASC,CAAO,OAAA;;AAC7BH,SAAAA,MAAAA,cAAcF,GAAG,MAAjBE,gBAAAA,IAAoBI,KAAKC,KAAMC,CAAMA,MAAAA,EAAEC,OAAOJ,KAAK;AAC5C,eAAA;AAAA,IACX;AAAA,EAAA;AAEKF,SAAAA;AACT;AAEO,MAAMO,uBAAuBA,CAAC;AAAA,EACnCC;AAAAA,EACAF;AAAAA,EACAG;AACyB,MAAM;;AACzB,QAAA;AAAA,IACJV;AAAAA,IACAD,eAAe,CAAE;AAAA,IACjBY,iBAAiB,CAAA;AAAA,EAAA,IACfC,WAAWC,oBAAoB;AAEnC,QAAMC,UACJP,MAAMP,cAAcK,KAAMU,CAAAA,WAAWA,OAAOR,OAAOA,EAAE,IAChD,CACCP,cAAcK,KAAMU,CAAAA,WAAWA,OAAOR,OAAOA,EAAE,CAAC,IAElDP;AACN,QAAMgB,YAAYhB,cAAciB,UAAWF,CAAWA,WAAAA,OAAOR,OAAOA,EAAE;AAEtE,MAAIW,gBAAgB;AAEhBC,yDAAAA,WAAAA,mBACAC,OAAQC,CAASA,SAAAA,SAASC,QAC3BpB,QAAQ,CAACqB,IAAIC,MAAM;AACD3B,qBAAAA,uBAAuB2B,GAAGzB,cAAcC,aAAa;AAAA,EAAA;AAG1E,QAAMyB,iBAAiBlB,KACnBV,uBAAuBmB,WAAWjB,cAAcC,aAAa,KAAK,IAClEkB;AAEEQ,QAAAA,eAAeZ,QAAQa,OAC3B,CAACC,KAAKb,WAAWa,MAAMb,OAAOX,KAAKyB,QACnC,CAAC;AAGH,6BACGC,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,2BACF,OAAA;AAAA,MACEvB,WAAWwB,KACTC,0BAA0BC,MAC1BH,IAAII,OAAOD,IAAI,GACf1B,WACAC,mCAASyB,IAAI;AAAA,MACbJ,UAEDN,CAAAA,iBAAiB,wBAChB,KAAA;AAAA,QACEhB,WAAWwB,KACTC,0BAA0BT,gBAC1BO,IAAII,OAAOX,cAAc,GACzBf,mCAASe,cAAc;AAAA,QACvBM,UAEDN;AAAAA,MAAc,CAAA,IAGjBA,gBAEA,MAAKC,cAAc;AAAA,IAAA,CAAA;AAAA,EAAA,CAGd;AAEjB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Counter.styles.js","sources":["../../../../../src/components/FilterGroup/Counter/Counter.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const styles:
|
|
1
|
+
{"version":3,"file":"Counter.styles.js","sources":["../../../../../src/components/FilterGroup/Counter/Counter.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvFilterGroupCounterClasses } from \"./counterClasses\";\n\nexport const styles: Partial<\n Record<keyof HvFilterGroupCounterClasses, CSSInterpolation>\n> = {\n root: {\n height: \"100%\",\n lineHeight: \"32px\",\n margin: \"0 10px\",\n pointerEvents: \"none\",\n },\n partialCounter: {\n display: \"inline-block\",\n fontWeight: theme.filterGroup.partialCounterFontWeight,\n },\n};\n"],"names":["styles","root","height","lineHeight","margin","pointerEvents","partialCounter","display","fontWeight","theme","filterGroup","partialCounterFontWeight"],"mappings":";AAIO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACRC,YAAY;AAAA,IACZC,QAAQ;AAAA,IACRC,eAAe;AAAA,EACjB;AAAA,EACAC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,YAAYC,MAAMC,YAAYC;AAAAA,EAChC;AACF;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { getClasses } from "../../../utils/classes.js";
|
|
2
|
+
const classKeys = ["partialCounter", "root"];
|
|
3
|
+
const filterGroupCounterClasses = getClasses(classKeys, "HvFilterGroupCounter");
|
|
4
|
+
const filterGroupCounterClasses$1 = filterGroupCounterClasses;
|
|
5
|
+
export {
|
|
6
|
+
filterGroupCounterClasses$1 as default
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=counterClasses.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"counterClasses.js","sources":["../../../../../src/components/FilterGroup/Counter/counterClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvFilterGroupCounterClasses {\n root?: string;\n partialCounter?: string;\n}\n\nconst classKeys: (keyof HvFilterGroupCounterClasses)[] = [\n \"partialCounter\",\n \"root\",\n];\n\nconst filterGroupCounterClasses = getClasses(classKeys, \"HvFilterGroupCounter\");\n\nexport default filterGroupCounterClasses;\n"],"names":["classKeys","filterGroupCounterClasses","getClasses"],"mappings":";AAOA,MAAMA,YAAmD,CACvD,kBACA,MAAM;AAGR,MAAMC,4BAA4BC,WAAWF,WAAW,sBAAsB;AAE9E,MAAA,8BAAeC;"}
|
|
@@ -150,7 +150,7 @@ const HvFilterGroupContent = ({
|
|
|
150
150
|
disabled: applyDisabled,
|
|
151
151
|
variant: activeTheme == null ? void 0 : activeTheme.filterGroup.applyButtonVariant,
|
|
152
152
|
onClick: onApplyHandler,
|
|
153
|
-
className: css(styles.applyButton),
|
|
153
|
+
className: clsx(filterGroupContentClasses.applyButton, css(styles.applyButton), classes == null ? void 0 : classes.applyButton),
|
|
154
154
|
children: labels == null ? void 0 : labels.applyLabel
|
|
155
155
|
}), /* @__PURE__ */ jsx(HvButton, {
|
|
156
156
|
id: setId(id, "cancel-button"),
|