@hitachivantara/uikit-react-core 5.3.0 → 5.4.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.
Files changed (98) hide show
  1. package/dist/cjs/components/Dialog/Dialog.cjs +1 -1
  2. package/dist/cjs/components/Dialog/Dialog.cjs.map +1 -1
  3. package/dist/cjs/components/Dialog/Dialog.styles.cjs +3 -3
  4. package/dist/cjs/components/Dialog/Dialog.styles.cjs.map +1 -1
  5. package/dist/cjs/components/InlineEditor/InlineEditor.cjs +122 -0
  6. package/dist/cjs/components/InlineEditor/InlineEditor.cjs.map +1 -0
  7. package/dist/cjs/components/InlineEditor/InlineEditor.styles.cjs +74 -0
  8. package/dist/cjs/components/InlineEditor/InlineEditor.styles.cjs.map +1 -0
  9. package/dist/cjs/components/InlineEditor/inlineEditorClasses.cjs +8 -0
  10. package/dist/cjs/components/InlineEditor/inlineEditorClasses.cjs.map +1 -0
  11. package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.cjs +51 -0
  12. package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.cjs.map +1 -0
  13. package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs +54 -0
  14. package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs.map +1 -0
  15. package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.cjs +8 -0
  16. package/dist/cjs/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.cjs.map +1 -0
  17. package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs +126 -0
  18. package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs.map +1 -0
  19. package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.cjs +46 -0
  20. package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.cjs.map +1 -0
  21. package/dist/cjs/components/ScrollTo/Horizontal/scrollToHorizontalClasses.cjs +8 -0
  22. package/dist/cjs/components/ScrollTo/Horizontal/scrollToHorizontalClasses.cjs.map +1 -0
  23. package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs +90 -0
  24. package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs.map +1 -0
  25. package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.styles.cjs +43 -0
  26. package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.styles.cjs.map +1 -0
  27. package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs +71 -0
  28. package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs.map +1 -0
  29. package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs +54 -0
  30. package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs.map +1 -0
  31. package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.cjs +8 -0
  32. package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.cjs.map +1 -0
  33. package/dist/cjs/components/ScrollTo/Vertical/scrollToVerticalClasses.cjs +8 -0
  34. package/dist/cjs/components/ScrollTo/Vertical/scrollToVerticalClasses.cjs.map +1 -0
  35. package/dist/cjs/components/ScrollTo/useScrollTo.cjs +103 -0
  36. package/dist/cjs/components/ScrollTo/useScrollTo.cjs.map +1 -0
  37. package/dist/cjs/components/ScrollTo/utils.cjs +76 -0
  38. package/dist/cjs/components/ScrollTo/utils.cjs.map +1 -0
  39. package/dist/cjs/components/ScrollTo/withTooltip.cjs +20 -0
  40. package/dist/cjs/components/ScrollTo/withTooltip.cjs.map +1 -0
  41. package/dist/cjs/hocs/withTooltip.cjs +4 -4
  42. package/dist/cjs/hocs/withTooltip.cjs.map +1 -1
  43. package/dist/cjs/index.cjs +19 -0
  44. package/dist/cjs/index.cjs.map +1 -1
  45. package/dist/cjs/utils/theme.cjs +9 -0
  46. package/dist/cjs/utils/theme.cjs.map +1 -1
  47. package/dist/cjs/utils/wrapperTooltip.cjs +1 -1
  48. package/dist/cjs/utils/wrapperTooltip.cjs.map +1 -1
  49. package/dist/esm/components/Dialog/Dialog.js +2 -2
  50. package/dist/esm/components/Dialog/Dialog.js.map +1 -1
  51. package/dist/esm/components/Dialog/Dialog.styles.js +3 -3
  52. package/dist/esm/components/Dialog/Dialog.styles.js.map +1 -1
  53. package/dist/esm/components/InlineEditor/InlineEditor.js +122 -0
  54. package/dist/esm/components/InlineEditor/InlineEditor.js.map +1 -0
  55. package/dist/esm/components/InlineEditor/InlineEditor.styles.js +74 -0
  56. package/dist/esm/components/InlineEditor/InlineEditor.styles.js.map +1 -0
  57. package/dist/esm/components/InlineEditor/inlineEditorClasses.js +8 -0
  58. package/dist/esm/components/InlineEditor/inlineEditorClasses.js.map +1 -0
  59. package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js +51 -0
  60. package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js.map +1 -0
  61. package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js +54 -0
  62. package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js.map +1 -0
  63. package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.js +8 -0
  64. package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/horizontalScrollListItemClasses.js.map +1 -0
  65. package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js +126 -0
  66. package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js.map +1 -0
  67. package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.js +46 -0
  68. package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.js.map +1 -0
  69. package/dist/esm/components/ScrollTo/Horizontal/scrollToHorizontalClasses.js +8 -0
  70. package/dist/esm/components/ScrollTo/Horizontal/scrollToHorizontalClasses.js.map +1 -0
  71. package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js +90 -0
  72. package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js.map +1 -0
  73. package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.styles.js +43 -0
  74. package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.styles.js.map +1 -0
  75. package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js +71 -0
  76. package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.js.map +1 -0
  77. package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js +54 -0
  78. package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js.map +1 -0
  79. package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.js +8 -0
  80. package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.js.map +1 -0
  81. package/dist/esm/components/ScrollTo/Vertical/scrollToVerticalClasses.js +8 -0
  82. package/dist/esm/components/ScrollTo/Vertical/scrollToVerticalClasses.js.map +1 -0
  83. package/dist/esm/components/ScrollTo/useScrollTo.js +103 -0
  84. package/dist/esm/components/ScrollTo/useScrollTo.js.map +1 -0
  85. package/dist/esm/components/ScrollTo/utils.js +76 -0
  86. package/dist/esm/components/ScrollTo/utils.js.map +1 -0
  87. package/dist/esm/components/ScrollTo/withTooltip.js +20 -0
  88. package/dist/esm/components/ScrollTo/withTooltip.js.map +1 -0
  89. package/dist/esm/hocs/withTooltip.js +4 -4
  90. package/dist/esm/hocs/withTooltip.js.map +1 -1
  91. package/dist/esm/index.js +38 -19
  92. package/dist/esm/index.js.map +1 -1
  93. package/dist/esm/utils/theme.js +9 -0
  94. package/dist/esm/utils/theme.js.map +1 -1
  95. package/dist/esm/utils/wrapperTooltip.js +2 -2
  96. package/dist/esm/utils/wrapperTooltip.js.map +1 -1
  97. package/dist/types/index.d.ts +193 -1
  98. package/package.json +5 -5
@@ -0,0 +1,126 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const scrollToHorizontalClasses = require("./scrollToHorizontalClasses.cjs");
4
+ const react = require("@emotion/react");
5
+ const clsx = require("clsx");
6
+ const ScrollToHorizontal_styles = require("./ScrollToHorizontal.styles.cjs");
7
+ const useScrollTo = require("../useScrollTo.cjs");
8
+ const React = require("react");
9
+ const withTooltip = require("../withTooltip.cjs");
10
+ const styles = require("@mui/material/styles");
11
+ const uikitStyles = require("@hitachivantara/uikit-styles");
12
+ const hexToRgbA = require("../../../utils/hexToRgbA.cjs");
13
+ const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
14
+ const material = require("@mui/material");
15
+ const jsxRuntime = require("@emotion/react/jsx-runtime");
16
+ const useUniqueId = require("../../../hooks/useUniqueId.cjs");
17
+ const HorizontalScrollListItem = require("./HorizontalScrollListItem/HorizontalScrollListItem.cjs");
18
+ const useTheme = require("../../../hooks/useTheme.cjs");
19
+ const setId = require("../../../utils/setId.cjs");
20
+ const keyCheck = require("../../../utils/keyboardUtils/keyCheck.cjs");
21
+ const keyboardCodes = require("../../../utils/keyboardUtils/keyboardCodes.cjs");
22
+ const {
23
+ Enter
24
+ } = keyboardCodes.keyboardCodes;
25
+ const HvScrollToHorizontal = ({
26
+ id,
27
+ defaultSelectedIndex = 0,
28
+ scrollElementId,
29
+ href = true,
30
+ onChange,
31
+ onClick,
32
+ onEnter,
33
+ className,
34
+ classes,
35
+ options,
36
+ offset = 0,
37
+ position = "relative",
38
+ tooltipPosition = "top",
39
+ ...others
40
+ }) => {
41
+ const muiTheme = styles.useTheme();
42
+ const downSm = material.useMediaQuery(muiTheme.breakpoints.down("sm"));
43
+ const upMd = material.useMediaQuery(muiTheme.breakpoints.up("md"));
44
+ const {
45
+ activeTheme,
46
+ selectedMode
47
+ } = useTheme.useTheme();
48
+ const elementId = useUniqueId.default(id, "hvHorizontalScrollto");
49
+ const [selectedIndex, setScrollTo] = useScrollTo.useScrollTo(defaultSelectedIndex, scrollElementId, href, offset, options, onChange);
50
+ const handleSelection = (event, value, index) => {
51
+ event.preventDefault();
52
+ const wrappedOnChange = () => {
53
+ onChange == null ? void 0 : onChange(event, index);
54
+ };
55
+ setScrollTo(event, value, index, wrappedOnChange);
56
+ };
57
+ const tooltipWrappers = React.useMemo(() => {
58
+ return options.map((option) => {
59
+ return withTooltip.withTooltip(option.label, "div", tooltipPosition);
60
+ });
61
+ }, [options, tooltipPosition]);
62
+ const NotSelected = React.useCallback(() => {
63
+ return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
64
+ children: ({
65
+ css
66
+ }) => /* @__PURE__ */ jsxRuntime.jsx("div", {
67
+ className: clsx.clsx(classes == null ? void 0 : classes.notSelectedRoot, scrollToHorizontalClasses.default.notSelectedRoot, css(ScrollToHorizontal_styles.styles.notSelectedRoot)),
68
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", {
69
+ className: clsx.clsx(classes == null ? void 0 : classes.notSelected, scrollToHorizontalClasses.default.notSelected, css(ScrollToHorizontal_styles.styles.notSelected))
70
+ })
71
+ })
72
+ });
73
+ }, [classes == null ? void 0 : classes.notSelectedRoot, classes == null ? void 0 : classes.notSelected]);
74
+ const Selected = React.useCallback(() => {
75
+ return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
76
+ children: ({
77
+ css
78
+ }) => /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CurrentStep, {
79
+ height: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
80
+ width: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
81
+ className: clsx.clsx(classes == null ? void 0 : classes.selected, scrollToHorizontalClasses.default.selected, css(ScrollToHorizontal_styles.styles.selected))
82
+ })
83
+ });
84
+ }, [classes == null ? void 0 : classes.selected, activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize]);
85
+ const tabs = options.map((option, index) => {
86
+ const selected = selectedIndex === index;
87
+ const tooltipWrapper = tooltipWrappers[index];
88
+ return /* @__PURE__ */ jsxRuntime.jsxs(HorizontalScrollListItem.HvHorizontalScrollListItem, {
89
+ id: setId.setId(elementId, `item-${index}`),
90
+ onClick: (event) => {
91
+ handleSelection(event, option.value, index);
92
+ onClick == null ? void 0 : onClick(event, index);
93
+ },
94
+ onKeyDown: (event) => {
95
+ if (keyCheck.isKeypress(event, Enter) === true) {
96
+ handleSelection(event, option.value, index);
97
+ onEnter == null ? void 0 : onEnter(event, index);
98
+ }
99
+ },
100
+ tooltipWrapper,
101
+ selected,
102
+ children: [/* @__PURE__ */ jsxRuntime.jsx("p", {
103
+ children: option.label
104
+ }), selected ? /* @__PURE__ */ jsxRuntime.jsx(Selected, {}) : /* @__PURE__ */ jsxRuntime.jsx(NotSelected, {})]
105
+ }, option.key || option.label);
106
+ });
107
+ return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
108
+ children: ({
109
+ css
110
+ }) => /* @__PURE__ */ jsxRuntime.jsx("ol", {
111
+ className: clsx.clsx(className, classes == null ? void 0 : classes.root, scrollToHorizontalClasses.default.root, css(ScrollToHorizontal_styles.styles.root), css({
112
+ width: position === "fixed" && (upMd || downSm) ? `calc(100% - 2*${uikitStyles.theme.spacing(upMd ? 4 : 2)})` : "100%",
113
+ marginTop: 0,
114
+ marginBottom: 0,
115
+ marginRight: position === "fixed" && (upMd || downSm) ? uikitStyles.theme.spacing(upMd ? 4 : 2) : 0,
116
+ marginLeft: position === "fixed" && (upMd || downSm) ? uikitStyles.theme.spacing(upMd ? 4 : 2) : 0,
117
+ backgroundColor: hexToRgbA.default(activeTheme == null ? void 0 : activeTheme.colors.modes[selectedMode].atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity)
118
+ }), position === "sticky" && clsx.clsx(classes == null ? void 0 : classes.positionSticky, scrollToHorizontalClasses.default.positionSticky, css(ScrollToHorizontal_styles.styles.positionSticky)), position === "fixed" && clsx.clsx(classes == null ? void 0 : classes.positionFixed, scrollToHorizontalClasses.default.positionFixed, css(ScrollToHorizontal_styles.styles.positionFixed))),
119
+ id: elementId,
120
+ ...others,
121
+ children: tabs
122
+ })
123
+ });
124
+ };
125
+ exports.HvScrollToHorizontal = HvScrollToHorizontal;
126
+ //# sourceMappingURL=ScrollToHorizontal.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ScrollToHorizontal.cjs","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport scrollToHorizontalClasses, {\n HvScrollToHorizontalClasses,\n} from \"./scrollToHorizontalClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { clsx } from \"clsx\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { styles } from \"./ScrollToHorizontal.styles\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useCallback, useMemo } from \"react\";\nimport { withTooltip } from \"../withTooltip\";\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery } from \"@mui/material\";\n\nconst { Enter } = keyboardCodes;\n\nexport interface HvScrollToHorizontalOption {\n key?: string;\n label: string;\n value: string;\n offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToHorizontalProps\n extends HvBaseProps<HTMLOListElement, { onChange; onClick }> {\n /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n options: HvScrollToHorizontalOption[];\n /** True if the href location link should be applied. It will create an a element around every list item */\n href?: boolean;\n /** Default selected index passed from the parent. */\n defaultSelectedIndex?: number;\n /**\n * The Id of the scrollable container containing displayed elements.\n *\n * Defaults to `window` if unspecified.\n */\n scrollElementId?: string;\n /**\n * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n * or to put more breathing room between the targeted element and the edges of the container.\n *\n * Each element can also have a specific offset via the options property.\n */\n offset?: number;\n /** Position of the Horizontal scroll to. */\n position?: HvScrollToHorizontalPositions;\n /** Position of tooltip identifying the current item. */\n tooltipPosition?: HvScrollToTooltipPositions;\n /** A function called each time the selected index changes. */\n onChange?: (\n event:\n | Event\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void;\n /** A function called each time an user clicks on a tab element. */\n onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n /** A function called each time an user press enter on a tab element. */\n onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvScrollToHorizontalClasses;\n}\n\n/**\n * The horizontal scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToHorizontal = ({\n id,\n defaultSelectedIndex = 0,\n scrollElementId,\n href = true,\n onChange,\n onClick,\n onEnter,\n className,\n classes,\n options,\n offset = 0,\n position = \"relative\",\n tooltipPosition = \"top\",\n ...others\n}: HvScrollToHorizontalProps) => {\n const muiTheme = useMuiTheme();\n\n const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n const { activeTheme, selectedMode } = useTheme();\n\n const elementId = useUniqueId(id, \"hvHorizontalScrollto\");\n\n const [selectedIndex, setScrollTo] = useScrollTo(\n defaultSelectedIndex,\n scrollElementId,\n href,\n offset,\n options,\n onChange\n );\n\n const handleSelection = (\n event:\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n value: string,\n index: number\n ) => {\n event.preventDefault();\n\n const wrappedOnChange = () => {\n onChange?.(event, index);\n };\n\n setScrollTo(event, value, index, wrappedOnChange);\n };\n\n const tooltipWrappers = useMemo(() => {\n return options.map((option) => {\n return withTooltip(option.label, \"div\", tooltipPosition);\n });\n }, [options, tooltipPosition]);\n\n const NotSelected = useCallback(() => {\n return (\n <ClassNames>\n {({ css }) => (\n <div\n className={clsx(\n classes?.notSelectedRoot,\n scrollToHorizontalClasses.notSelectedRoot,\n css(styles.notSelectedRoot)\n )}\n >\n <div\n className={clsx(\n classes?.notSelected,\n scrollToHorizontalClasses.notSelected,\n css(styles.notSelected)\n )}\n />\n </div>\n )}\n </ClassNames>\n );\n }, [classes?.notSelectedRoot, classes?.notSelected]);\n\n const Selected = useCallback(() => {\n return (\n <ClassNames>\n {({ css }) => (\n <CurrentStep\n height={activeTheme?.scrollTo.dotSelectedSize}\n width={activeTheme?.scrollTo.dotSelectedSize}\n className={clsx(\n classes?.selected,\n scrollToHorizontalClasses.selected,\n css(styles.selected)\n )}\n />\n )}\n </ClassNames>\n );\n }, [classes?.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n const tabs = options.map((option, index) => {\n const selected = selectedIndex === index;\n const tooltipWrapper = tooltipWrappers[index];\n\n return (\n <HvHorizontalScrollListItem\n id={setId(elementId, `item-${index}`)}\n onClick={(event) => {\n handleSelection(event, option.value, index);\n onClick?.(event, index);\n }}\n onKeyDown={(event) => {\n if (isKeypress(event, Enter) === true) {\n handleSelection(event, option.value, index);\n onEnter?.(event, index);\n }\n }}\n tooltipWrapper={tooltipWrapper}\n selected={selected}\n key={option.key || option.label}\n >\n <p>{option.label}</p>\n {selected ? <Selected /> : <NotSelected />}\n </HvHorizontalScrollListItem>\n );\n });\n\n return (\n <ClassNames>\n {({ css }) => (\n <ol\n className={clsx(\n className,\n classes?.root,\n scrollToHorizontalClasses.root,\n css(styles.root),\n css({\n width:\n position === \"fixed\" && (upMd || downSm)\n ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})`\n : \"100%\",\n marginTop: 0,\n marginBottom: 0,\n marginRight:\n position === \"fixed\" && (upMd || downSm)\n ? theme.spacing(upMd ? 4 : 2)\n : 0,\n marginLeft:\n position === \"fixed\" && (upMd || downSm)\n ? theme.spacing(upMd ? 4 : 2)\n : 0,\n backgroundColor: fade(\n activeTheme?.colors.modes[selectedMode].atmo2,\n activeTheme?.scrollTo.backgroundColorOpacity\n ),\n }),\n position === \"sticky\" &&\n clsx(\n classes?.positionSticky,\n scrollToHorizontalClasses.positionSticky,\n css(styles.positionSticky)\n ),\n position === \"fixed\" &&\n clsx(\n classes?.positionFixed,\n scrollToHorizontalClasses.positionFixed,\n css(styles.positionFixed)\n )\n )}\n id={elementId}\n {...others}\n >\n {tabs}\n </ol>\n )}\n </ClassNames>\n );\n};\n"],"names":["Enter","keyboardCodes","HvScrollToHorizontal","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","options","offset","position","tooltipPosition","others","muiTheme","useMuiTheme","downSm","useMediaQuery","breakpoints","down","upMd","up","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","NotSelected","useCallback","ClassNames","children","css","clsx","notSelectedRoot","scrollToHorizontalClasses","styles","notSelected","Selected","CurrentStep","height","scrollTo","dotSelectedSize","width","selected","tabs","tooltipWrapper","HvHorizontalScrollListItem","setId","onKeyDown","isKeypress","_jsx","key","root","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","fade","colors","modes","atmo2","backgroundColorOpacity","positionSticky","positionFixed"],"mappings":"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"}
@@ -0,0 +1,46 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const uikitStyles = require("@hitachivantara/uikit-styles");
4
+ const styles = {
5
+ root: {
6
+ display: "flex",
7
+ padding: "0 30px",
8
+ listStyleType: "none",
9
+ flexWrap: "wrap",
10
+ backdropFilter: `blur(${uikitStyles.theme.scrollTo.backgroundColorBlur})`
11
+ },
12
+ positionSticky: {
13
+ position: "sticky",
14
+ zIndex: `calc(${uikitStyles.theme.zIndices.banner} - 2)`,
15
+ top: 0,
16
+ left: 0
17
+ },
18
+ positionFixed: {
19
+ position: "fixed",
20
+ zIndex: `calc(${uikitStyles.theme.zIndices.banner} - 2)`,
21
+ top: 0,
22
+ left: 0
23
+ },
24
+ notSelectedRoot: {
25
+ display: uikitStyles.theme.scrollTo.horizontal.dotDisplay,
26
+ justifyContent: "center",
27
+ alignItems: "center",
28
+ height: uikitStyles.theme.scrollTo.dotRootSize,
29
+ width: uikitStyles.theme.scrollTo.dotRootSize,
30
+ borderRadius: uikitStyles.theme.scrollTo.dotRootRadius
31
+ },
32
+ notSelected: {
33
+ height: uikitStyles.theme.scrollTo.dotNotSelectedSize,
34
+ width: uikitStyles.theme.scrollTo.dotNotSelectedSize,
35
+ borderRadius: "50%",
36
+ display: "inline-block",
37
+ backgroundColor: uikitStyles.theme.scrollTo.dotNotSelectedColor
38
+ },
39
+ selected: {
40
+ display: uikitStyles.theme.scrollTo.horizontal.dotDisplay,
41
+ height: uikitStyles.theme.scrollTo.dotRootSize,
42
+ width: uikitStyles.theme.scrollTo.dotRootSize
43
+ }
44
+ };
45
+ exports.styles = styles;
46
+ //# sourceMappingURL=ScrollToHorizontal.styles.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ScrollToHorizontal.styles.cjs","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const styles: {\n root: CSSInterpolation;\n positionSticky: CSSInterpolation;\n positionFixed: CSSInterpolation;\n notSelectedRoot: CSSInterpolation;\n notSelected: CSSInterpolation;\n selected: CSSInterpolation;\n} = {\n root: {\n display: \"flex\",\n padding: \"0 30px\",\n listStyleType: \"none\",\n flexWrap: \"wrap\",\n backdropFilter: `blur(${theme.scrollTo.backgroundColorBlur})`,\n },\n positionSticky: {\n position: \"sticky\",\n zIndex: `calc(${theme.zIndices.banner} - 2)`,\n top: 0,\n left: 0,\n },\n positionFixed: {\n position: \"fixed\",\n zIndex: `calc(${theme.zIndices.banner} - 2)`,\n top: 0,\n left: 0,\n },\n notSelectedRoot: {\n display: theme.scrollTo.horizontal.dotDisplay,\n justifyContent: \"center\",\n alignItems: \"center\",\n height: theme.scrollTo.dotRootSize,\n width: theme.scrollTo.dotRootSize,\n borderRadius: theme.scrollTo.dotRootRadius,\n },\n notSelected: {\n height: theme.scrollTo.dotNotSelectedSize,\n width: theme.scrollTo.dotNotSelectedSize,\n borderRadius: \"50%\",\n display: \"inline-block\",\n backgroundColor: theme.scrollTo.dotNotSelectedColor,\n },\n selected: {\n display: theme.scrollTo.horizontal.dotDisplay,\n height: theme.scrollTo.dotRootSize,\n width: theme.scrollTo.dotRootSize,\n },\n};\n"],"names":["styles","root","display","padding","listStyleType","flexWrap","backdropFilter","theme","scrollTo","backgroundColorBlur","positionSticky","position","zIndex","zIndices","banner","top","left","positionFixed","notSelectedRoot","horizontal","dotDisplay","justifyContent","alignItems","height","dotRootSize","width","borderRadius","dotRootRadius","notSelected","dotNotSelectedSize","backgroundColor","dotNotSelectedColor","selected"],"mappings":";;;AAGO,MAAMA,SAOT;AAAA,EACFC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,gBAAiB,QAAOC,YAAAA,MAAMC,SAASC;AAAAA,EACzC;AAAA,EACAC,gBAAgB;AAAA,IACdC,UAAU;AAAA,IACVC,QAAS,QAAOL,YAAAA,MAAMM,SAASC;AAAAA,IAC/BC,KAAK;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAC,eAAe;AAAA,IACbN,UAAU;AAAA,IACVC,QAAS,QAAOL,YAAAA,MAAMM,SAASC;AAAAA,IAC/BC,KAAK;AAAA,IACLC,MAAM;AAAA,EACR;AAAA,EACAE,iBAAiB;AAAA,IACfhB,SAASK,YAAMC,MAAAA,SAASW,WAAWC;AAAAA,IACnCC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQhB,YAAAA,MAAMC,SAASgB;AAAAA,IACvBC,OAAOlB,YAAAA,MAAMC,SAASgB;AAAAA,IACtBE,cAAcnB,YAAAA,MAAMC,SAASmB;AAAAA,EAC/B;AAAA,EACAC,aAAa;AAAA,IACXL,QAAQhB,YAAAA,MAAMC,SAASqB;AAAAA,IACvBJ,OAAOlB,YAAAA,MAAMC,SAASqB;AAAAA,IACtBH,cAAc;AAAA,IACdxB,SAAS;AAAA,IACT4B,iBAAiBvB,YAAAA,MAAMC,SAASuB;AAAAA,EAClC;AAAA,EACAC,UAAU;AAAA,IACR9B,SAASK,YAAMC,MAAAA,SAASW,WAAWC;AAAAA,IACnCG,QAAQhB,YAAAA,MAAMC,SAASgB;AAAAA,IACvBC,OAAOlB,YAAAA,MAAMC,SAASgB;AAAAA,EACxB;AACF;;"}
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const classes = require("../../../utils/classes.cjs");
4
+ const classKeys = ["root", "positionSticky", "positionFixed", "notSelectedRoot", "notSelected", "selected"];
5
+ const scrollToHorizontalClasses = classes.getClasses(classKeys, "HvScrollToHorizontal");
6
+ const scrollToHorizontalClasses$1 = scrollToHorizontalClasses;
7
+ exports.default = scrollToHorizontalClasses$1;
8
+ //# sourceMappingURL=scrollToHorizontalClasses.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scrollToHorizontalClasses.cjs","sources":["../../../../../src/components/ScrollTo/Horizontal/scrollToHorizontalClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvScrollToHorizontalClasses {\n root?: string;\n positionSticky?: string;\n positionFixed?: string;\n notSelectedRoot?: string;\n notSelected?: string;\n selected?: string;\n}\n\nconst classKeys: string[] = [\n \"root\",\n \"positionSticky\",\n \"positionFixed\",\n \"notSelectedRoot\",\n \"notSelected\",\n \"selected\",\n];\n\nconst scrollToHorizontalClasses = getClasses<HvScrollToHorizontalClasses>(\n classKeys,\n \"HvScrollToHorizontal\"\n);\n\nexport default scrollToHorizontalClasses;\n"],"names":["classKeys","scrollToHorizontalClasses","getClasses"],"mappings":";;;AAWA,MAAMA,YAAsB,CAC1B,QACA,kBACA,iBACA,mBACA,eACA,UAAU;AAGZ,MAAMC,4BAA4BC,QAChCF,WAAAA,WACA,sBAAsB;AAGxB,MAAA,8BAAeC;;"}
@@ -0,0 +1,90 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const scrollToVerticalClasses = require("./scrollToVerticalClasses.cjs");
4
+ const ScrollToVertical_styles = require("./ScrollToVertical.styles.cjs");
5
+ const clsx = require("clsx");
6
+ const useScrollTo = require("../useScrollTo.cjs");
7
+ const React = require("react");
8
+ const withTooltip = require("../withTooltip.cjs");
9
+ const react = require("@emotion/react");
10
+ const hexToRgbA = require("../../../utils/hexToRgbA.cjs");
11
+ const jsxRuntime = require("@emotion/react/jsx-runtime");
12
+ const useUniqueId = require("../../../hooks/useUniqueId.cjs");
13
+ const VerticalScrollListItem = require("./VerticalScrollListItem/VerticalScrollListItem.cjs");
14
+ const useTheme = require("../../../hooks/useTheme.cjs");
15
+ const setId = require("../../../utils/setId.cjs");
16
+ const keyCheck = require("../../../utils/keyboardUtils/keyCheck.cjs");
17
+ const keyboardCodes = require("../../../utils/keyboardUtils/keyboardCodes.cjs");
18
+ const {
19
+ Enter
20
+ } = keyboardCodes.keyboardCodes;
21
+ const HvScrollToVertical = ({
22
+ id,
23
+ defaultSelectedIndex = 0,
24
+ scrollElementId,
25
+ href = true,
26
+ onChange,
27
+ onClick,
28
+ onEnter,
29
+ className,
30
+ classes,
31
+ options,
32
+ offset = 0,
33
+ position = "relative",
34
+ tooltipPosition = "left",
35
+ ...others
36
+ }) => {
37
+ const {
38
+ activeTheme,
39
+ selectedMode
40
+ } = useTheme.useTheme();
41
+ const elementId = useUniqueId.default(id, "hvVerticalScrollto");
42
+ const [selectedIndex, setScrollTo] = useScrollTo.useScrollTo(defaultSelectedIndex, scrollElementId, href, offset, options, onChange);
43
+ const handleSelection = (event, value, index) => {
44
+ event.preventDefault();
45
+ const wrappedOnChange = () => {
46
+ onChange == null ? void 0 : onChange(event, index);
47
+ };
48
+ setScrollTo(event, value, index, wrappedOnChange);
49
+ };
50
+ const tooltipWrappers = React.useMemo(() => {
51
+ return options.map((option) => {
52
+ return withTooltip.withTooltip(option.label, "div", tooltipPosition, false);
53
+ });
54
+ }, [options, tooltipPosition]);
55
+ const tabs = options.map((option, index) => {
56
+ const selected = selectedIndex === index;
57
+ const tooltipWrapper = tooltipWrappers[index];
58
+ return /* @__PURE__ */ jsxRuntime.jsx(VerticalScrollListItem.HvVerticalScrollListItem, {
59
+ id: setId.setId(elementId, `item-${index}`),
60
+ onClick: (event) => {
61
+ handleSelection(event, option.value, index);
62
+ onClick == null ? void 0 : onClick(event, index);
63
+ },
64
+ onKeyDown: (event) => {
65
+ if (keyCheck.isKeypress(event, Enter) === true) {
66
+ handleSelection(event, option.value, index);
67
+ onEnter == null ? void 0 : onEnter(event, index);
68
+ }
69
+ },
70
+ tooltipWrapper,
71
+ selected,
72
+ "aria-label": option.label
73
+ }, option.key || option.label);
74
+ });
75
+ const dynamicClasses = ScrollToVertical_styles.generateDynamicStyles(options.length);
76
+ return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
77
+ children: ({
78
+ css
79
+ }) => /* @__PURE__ */ jsxRuntime.jsx("ol", {
80
+ className: clsx.clsx(className, classes == null ? void 0 : classes.root, scrollToVerticalClasses.default.root, css(ScrollToVertical_styles.styles.root), css({
81
+ backgroundColor: hexToRgbA.default(activeTheme == null ? void 0 : activeTheme.colors.modes[selectedMode].atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity)
82
+ }), position === "fixed" && clsx.clsx(classes == null ? void 0 : classes.positionFixed, scrollToVerticalClasses.default.positionFixed, css(dynamicClasses.positionFixed)), position === "absolute" && clsx.clsx(classes == null ? void 0 : classes.positionAbsolute, scrollToVerticalClasses.default.positionAbsolute, css(dynamicClasses.positionAbsolute))),
83
+ id: elementId,
84
+ ...others,
85
+ children: tabs
86
+ })
87
+ });
88
+ };
89
+ exports.HvScrollToVertical = HvScrollToVertical;
90
+ //# sourceMappingURL=ScrollToVertical.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ScrollToVertical.cjs","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport scrollToVerticalClasses, {\n HvScrollToVerticalClasses,\n} from \"./scrollToVerticalClasses\";\nimport { generateDynamicStyles, styles } from \"./ScrollToVertical.styles\";\nimport { clsx } from \"clsx\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { useMemo } from \"react\";\nimport { withTooltip } from \"../withTooltip\";\nimport { ClassNames } from \"@emotion/react\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvScrollToTooltipPositions } from \"../types\";\n\nconst { Enter } = keyboardCodes;\n\nexport interface HvScrollToVerticalOption {\n key?: string;\n label: string;\n value: string;\n offset?: number;\n}\n\nexport type HvScrollToVerticalPositions = \"absolute\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToVerticalProps\n extends HvBaseProps<HTMLOListElement, { onChange; onClick }> {\n /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n options: HvScrollToVerticalOption[];\n /** True if the href location link should be applied. It will create an a element around every list item */\n href?: boolean;\n /** Default selected index passed from the parent. */\n defaultSelectedIndex?: number;\n /**\n * The Id of the scrollable container containing displayed elements.\n *\n * Defaults to `window` if unspecified.\n */\n scrollElementId?: string;\n /**\n * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n * or to put more breathing room between the targeted element and the edges of the container.\n *\n * Each element can also have a specific offset via the options property.\n */\n offset?: number;\n /** Position of the Vertical scroll to. */\n position?: HvScrollToVerticalPositions;\n /** Position of tooltip identifying the current item. */\n tooltipPosition?: HvScrollToTooltipPositions;\n /** A function called each time the selected index changes. */\n onChange?: (\n event:\n | Event\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => void;\n /** A function called each time an user clicks on a tab element. */\n onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n /** A function called each time an user press enter on a tab element. */\n onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = ({\n id,\n defaultSelectedIndex = 0,\n scrollElementId,\n href = true,\n onChange,\n onClick,\n onEnter,\n className,\n classes,\n options,\n offset = 0,\n position = \"relative\",\n tooltipPosition = \"left\",\n ...others\n}: HvScrollToVerticalProps) => {\n const { activeTheme, selectedMode } = useTheme();\n\n const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n const [selectedIndex, setScrollTo] = useScrollTo(\n defaultSelectedIndex,\n scrollElementId,\n href,\n offset,\n options,\n onChange\n );\n\n const handleSelection = (\n event:\n | React.MouseEvent<HTMLDivElement>\n | React.KeyboardEvent<HTMLDivElement>,\n value: string,\n index: number\n ) => {\n event.preventDefault();\n\n const wrappedOnChange = () => {\n onChange?.(event, index);\n };\n\n setScrollTo(event, value, index, wrappedOnChange);\n };\n\n const tooltipWrappers = useMemo(() => {\n return options.map((option) => {\n return withTooltip(option.label, \"div\", tooltipPosition, false);\n });\n }, [options, tooltipPosition]);\n\n const tabs = options.map((option, index) => {\n const selected = selectedIndex === index;\n const tooltipWrapper = tooltipWrappers[index];\n\n return (\n <HvVerticalScrollListItem\n id={setId(elementId, `item-${index}`)}\n onClick={(event) => {\n handleSelection(event, option.value, index);\n onClick?.(event, index);\n }}\n onKeyDown={(event) => {\n if (isKeypress(event, Enter) === true) {\n handleSelection(event, option.value, index);\n onEnter?.(event, index);\n }\n }}\n tooltipWrapper={tooltipWrapper}\n selected={selected}\n key={option.key || option.label}\n aria-label={option.label}\n />\n );\n });\n\n const dynamicClasses = generateDynamicStyles(options.length);\n\n return (\n <ClassNames>\n {({ css }) => (\n <ol\n className={clsx(\n className,\n classes?.root,\n scrollToVerticalClasses.root,\n css(styles.root),\n css({\n backgroundColor: fade(\n activeTheme?.colors.modes[selectedMode].atmo2,\n activeTheme?.scrollTo.backgroundColorOpacity\n ),\n }),\n position === \"fixed\" &&\n clsx(\n classes?.positionFixed,\n scrollToVerticalClasses.positionFixed,\n css(dynamicClasses.positionFixed)\n ),\n position === \"absolute\" &&\n clsx(\n classes?.positionAbsolute,\n scrollToVerticalClasses.positionAbsolute,\n css(dynamicClasses.positionAbsolute)\n )\n )}\n id={elementId}\n {...others}\n >\n {tabs}\n </ol>\n )}\n </ClassNames>\n );\n};\n"],"names":["Enter","keyboardCodes","HvScrollToVertical","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","options","offset","position","tooltipPosition","others","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","HvVerticalScrollListItem","setId","onKeyDown","isKeypress","key","dynamicClasses","generateDynamicStyles","length","ClassNames","children","css","clsx","root","scrollToVerticalClasses","styles","backgroundColor","fade","colors","modes","atmo2","scrollTo","backgroundColorOpacity","positionFixed","positionAbsolute"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,MAAM;AAAA,EAAEA;AAAM,IAAIC;AAwDX,MAAMC,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,uBAAuB;AAAA,EACvBC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,EACTC,WAAW;AAAA,EACXC,kBAAkB;AAAA,EAClB,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,MAAiBC,SAAU,SAAA;AAE1CC,QAAAA,YAAYC,YAAAA,QAAYlB,IAAI,oBAAoB;AAEhD,QAAA,CAACmB,eAAeC,WAAW,IAAIC,wBACnCpB,sBACAC,iBACAC,MACAO,QACAD,SACAL,QAAQ;AAGV,QAAMkB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAgB;AAEtB,UAAMC,kBAAkBA,MAAM;AAC5BvB,2CAAWmB,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,MAAAA,QAAQ,MAAM;AAC7BpB,WAAAA,QAAQqB,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAAA,YAAYD,OAAOE,OAAO,OAAOrB,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAMsB,OAAOzB,QAAQqB,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAE5C,0CACGY,uBAAAA,0BAAwB;AAAA,MACvBrC,IAAIsC,MAAAA,MAAMrB,WAAY,QAAOQ,OAAO;AAAA,MACpCpB,SAAUkB,CAAU,UAAA;AACFA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CpB,2CAAUkB,OAAOE;AAAAA,MACnB;AAAA,MACAc,WAAYhB,CAAU,UAAA;AACpB,YAAIiB,oBAAWjB,OAAO1B,KAAK,MAAM,MAAM;AACrB0B,0BAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CnB,6CAAUiB,OAAOE;AAAAA,QACnB;AAAA,MACF;AAAA,MACAW;AAAAA,MACAD;AAAAA,MAEA,cAAYJ,OAAOE;AAAAA,IADdF,GAAAA,OAAOU,OAAOV,OAAOE,KAAK;AAAA,EAAA,CAIpC;AAEKS,QAAAA,iBAAiBC,wBAAAA,sBAAsBlC,QAAQmC,MAAM;AAE3D,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,qCACF,MAAA;AAAA,MACExC,WAAWyC,KACTzC,KAAAA,WACAC,mCAASyC,MACTC,wBAAAA,QAAwBD,MACxBF,IAAII,wBAAAA,OAAOF,IAAI,GACfF,IAAI;AAAA,QACFK,iBAAiBC,UACfvC,QAAAA,2CAAawC,OAAOC,MAAMxC,cAAcyC,OACxC1C,2CAAa2C,SAASC,sBAAsB;AAAA,MAE/C,CAAA,GACD/C,aAAa,WACXqC,KAAAA,KACExC,mCAASmD,eACTT,wBAAAA,QAAwBS,eACxBZ,IAAIL,eAAeiB,aAAa,CAAC,GAErChD,aAAa,cACXqC,UACExC,mCAASoD,kBACTV,gCAAwBU,kBACxBb,IAAIL,eAAekB,gBAAgB,CAAC,CACrC;AAAA,MAEL5D,IAAIiB;AAAAA,MAAU,GACVJ;AAAAA,MAAMiC,UAETZ;AAAAA,IAAAA,CAAI;AAAA,EAAA,CAGE;AAEjB;;"}
@@ -0,0 +1,43 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const uikitStyles = require("@hitachivantara/uikit-styles");
4
+ const styles = {
5
+ root: {
6
+ display: "flex",
7
+ width: "32px",
8
+ padding: "0",
9
+ margin: 0,
10
+ listStyleType: "none",
11
+ flexWrap: "wrap",
12
+ flexDirection: "column",
13
+ backdropFilter: `blur(${uikitStyles.theme.scrollTo.backgroundColorBlur})`
14
+ }
15
+ };
16
+ const calculateOffset = (quantityOfOptions) => {
17
+ const itemSize = 32;
18
+ const halfOptions = Math.round(quantityOfOptions * 0.5);
19
+ return halfOptions * itemSize;
20
+ };
21
+ const generateDynamicStyles = (quantityOfOptions) => {
22
+ const positionOffset = calculateOffset(quantityOfOptions);
23
+ const generatedStyles = {
24
+ positionAbsolute: {
25
+ width: "32px",
26
+ position: "absolute",
27
+ zIndex: `calc(${uikitStyles.theme.zIndices.banner} - 2)`,
28
+ right: "0",
29
+ top: `calc(50% - ${positionOffset}px)`
30
+ },
31
+ positionFixed: {
32
+ width: "32px",
33
+ position: "fixed",
34
+ zIndex: `calc(${uikitStyles.theme.zIndices.banner} - 2)`,
35
+ right: "0",
36
+ top: `calc(50% - ${positionOffset}px)`
37
+ }
38
+ };
39
+ return generatedStyles;
40
+ };
41
+ exports.generateDynamicStyles = generateDynamicStyles;
42
+ exports.styles = styles;
43
+ //# sourceMappingURL=ScrollToVertical.styles.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ScrollToVertical.styles.cjs","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\n\nexport const styles: {\n root: CSSInterpolation;\n} = {\n root: {\n display: \"flex\",\n width: \"32px\",\n padding: \"0\",\n margin: 0,\n listStyleType: \"none\",\n flexWrap: \"wrap\",\n flexDirection: \"column\",\n backdropFilter: `blur(${theme.scrollTo.backgroundColorBlur})`,\n },\n};\n\nconst calculateOffset = (quantityOfOptions: number) => {\n const itemSize = 32;\n const halfOptions = Math.round(quantityOfOptions * 0.5);\n\n return halfOptions * itemSize;\n};\n\nexport const generateDynamicStyles = (quantityOfOptions: number) => {\n const positionOffset = calculateOffset(quantityOfOptions);\n\n const generatedStyles: {\n positionAbsolute: CSSInterpolation;\n positionFixed: CSSInterpolation;\n } = {\n positionAbsolute: {\n width: \"32px\",\n position: \"absolute\",\n zIndex: `calc(${theme.zIndices.banner} - 2)`,\n right: \"0\",\n top: `calc(50% - ${positionOffset}px)`,\n },\n positionFixed: {\n width: \"32px\",\n position: \"fixed\",\n zIndex: `calc(${theme.zIndices.banner} - 2)`,\n right: \"0\",\n top: `calc(50% - ${positionOffset}px)`,\n },\n };\n\n return generatedStyles;\n};\n"],"names":["styles","root","display","width","padding","margin","listStyleType","flexWrap","flexDirection","backdropFilter","theme","scrollTo","backgroundColorBlur","calculateOffset","quantityOfOptions","itemSize","halfOptions","Math","round","generateDynamicStyles","positionOffset","generatedStyles","positionAbsolute","position","zIndex","zIndices","banner","right","top","positionFixed"],"mappings":";;;AAGO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,eAAe;AAAA,IACfC,gBAAiB,QAAOC,YAAAA,MAAMC,SAASC;AAAAA,EACzC;AACF;AAEA,MAAMC,kBAAkBA,CAACC,sBAA8B;AACrD,QAAMC,WAAW;AACjB,QAAMC,cAAcC,KAAKC,MAAMJ,oBAAoB,GAAG;AAEtD,SAAOE,cAAcD;AACvB;AAEaI,MAAAA,wBAAwBA,CAACL,sBAA8B;AAC5DM,QAAAA,iBAAiBP,gBAAgBC,iBAAiB;AAExD,QAAMO,kBAGF;AAAA,IACFC,kBAAkB;AAAA,MAChBnB,OAAO;AAAA,MACPoB,UAAU;AAAA,MACVC,QAAS,QAAOd,YAAAA,MAAMe,SAASC;AAAAA,MAC/BC,OAAO;AAAA,MACPC,KAAM,cAAaR;AAAAA,IACrB;AAAA,IACAS,eAAe;AAAA,MACb1B,OAAO;AAAA,MACPoB,UAAU;AAAA,MACVC,QAAS,QAAOd,YAAAA,MAAMe,SAASC;AAAAA,MAC/BC,OAAO;AAAA,MACPC,KAAM,cAAaR;AAAAA,IACrB;AAAA,EAAA;AAGKC,SAAAA;AACT;;;"}
@@ -0,0 +1,71 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const verticalScrollListItemClasses = require("./verticalScrollListItemClasses.cjs");
4
+ const react = require("@emotion/react");
5
+ const clsx = require("clsx");
6
+ const VerticalScrollListItem_styles = require("./VerticalScrollListItem.styles.cjs");
7
+ const React = require("react");
8
+ const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
9
+ const jsxRuntime = require("@emotion/react/jsx-runtime");
10
+ const useTheme = require("../../../../hooks/useTheme.cjs");
11
+ const setId = require("../../../../utils/setId.cjs");
12
+ const HvVerticalScrollListItem = ({
13
+ id,
14
+ className,
15
+ classes,
16
+ selected,
17
+ "aria-label": ariaLabel,
18
+ onClick,
19
+ onKeyDown,
20
+ tooltipWrapper,
21
+ ...others
22
+ }) => {
23
+ const {
24
+ activeTheme
25
+ } = useTheme.useTheme();
26
+ const variant = selected ? "label" : "body";
27
+ const labelId = setId.setId(id, "label");
28
+ const buttonId = setId.setId(id, "button");
29
+ const Tooltip = tooltipWrapper;
30
+ const NotSelected = React.useCallback(() => {
31
+ return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
32
+ children: ({
33
+ css
34
+ }) => /* @__PURE__ */ jsxRuntime.jsx("div", {
35
+ className: clsx.clsx(classes == null ? void 0 : classes.notSelected, verticalScrollListItemClasses.default.notSelected, css(VerticalScrollListItem_styles.styles.notSelected))
36
+ })
37
+ });
38
+ }, [classes == null ? void 0 : classes.notSelected]);
39
+ const icon = selected ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CurrentStep, {
40
+ height: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize,
41
+ width: activeTheme == null ? void 0 : activeTheme.scrollTo.dotSelectedSize
42
+ }) : /* @__PURE__ */ jsxRuntime.jsx(NotSelected, {});
43
+ return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
44
+ children: ({
45
+ css
46
+ }) => /* @__PURE__ */ jsxRuntime.jsx("li", {
47
+ id,
48
+ className: clsx.clsx(className, classes == null ? void 0 : classes.root, verticalScrollListItemClasses.default.root, css(VerticalScrollListItem_styles.styles.root)),
49
+ "aria-current": selected,
50
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", {
51
+ id: buttonId,
52
+ role: "button",
53
+ tabIndex: 0,
54
+ onClick,
55
+ onKeyDown,
56
+ className: clsx.clsx(classes == null ? void 0 : classes.button, verticalScrollListItemClasses.default.button, css(VerticalScrollListItem_styles.styles.button)),
57
+ "aria-label": ariaLabel,
58
+ "aria-labelledby": labelId,
59
+ ...others,
60
+ children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip, {
61
+ id: labelId,
62
+ className: clsx.clsx(classes == null ? void 0 : classes.text, verticalScrollListItemClasses.default.text, css(VerticalScrollListItem_styles.styles.text)),
63
+ variant,
64
+ children: icon
65
+ })
66
+ })
67
+ })
68
+ });
69
+ };
70
+ exports.HvVerticalScrollListItem = HvVerticalScrollListItem;
71
+ //# sourceMappingURL=VerticalScrollListItem.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"VerticalScrollListItem.cjs","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport verticalScrollListItemClasses, {\n HvVerticalScrollListItemClasses,\n} from \"./verticalScrollListItemClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { clsx } from \"clsx\";\nimport { styles } from \"./VerticalScrollListItem.styles\";\nimport { HvTypographyProps } from \"@core/components\";\nimport { setId } from \"@core/utils\";\nimport { useCallback } from \"react\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useTheme } from \"@core/hooks\";\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n /** A function component that renders a typography wrapped with a tooltip. */\n tooltipWrapper: React.FunctionComponent<{\n id?: string;\n className?: string;\n variant?: HvTypographyProps[\"variant\"];\n children?: React.ReactNode;\n }>;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvVerticalScrollListItemClasses;\n /** Whether the element is selected. */\n selected?: boolean;\n /** The function to be executed when the element is clicked. */\n onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n /** The function to be executed when the element is clicked. */\n onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\n/**\n * HvVerticalScrollListItem a focusable item to be used as part of the vertical scroll\n */\nexport const HvVerticalScrollListItem = ({\n id,\n className,\n classes,\n selected,\n \"aria-label\": ariaLabel,\n onClick,\n onKeyDown,\n tooltipWrapper,\n ...others\n}: HvVerticalScrollListItemProps) => {\n const { activeTheme } = useTheme();\n\n const variant: HvTypographyProps[\"variant\"] = selected ? \"label\" : \"body\";\n\n const labelId = setId(id, \"label\");\n\n const buttonId = setId(id, \"button\");\n\n const Tooltip = tooltipWrapper;\n\n const NotSelected = useCallback(() => {\n return (\n <ClassNames>\n {({ css }) => (\n <div\n className={clsx(\n classes?.notSelected,\n verticalScrollListItemClasses.notSelected,\n css(styles.notSelected)\n )}\n />\n )}\n </ClassNames>\n );\n }, [classes?.notSelected]);\n\n const icon = selected ? (\n <CurrentStep\n height={activeTheme?.scrollTo.dotSelectedSize}\n width={activeTheme?.scrollTo.dotSelectedSize}\n />\n ) : (\n <NotSelected />\n );\n\n return (\n <ClassNames>\n {({ css }) => (\n <li\n id={id}\n className={clsx(\n className,\n classes?.root,\n verticalScrollListItemClasses.root,\n css(styles.root)\n )}\n aria-current={selected}\n >\n <div\n id={buttonId}\n role=\"button\"\n tabIndex={0}\n onClick={onClick}\n onKeyDown={onKeyDown}\n className={clsx(\n classes?.button,\n verticalScrollListItemClasses.button,\n css(styles.button)\n )}\n aria-label={ariaLabel}\n aria-labelledby={labelId}\n {...others}\n >\n <Tooltip\n id={labelId}\n className={clsx(\n classes?.text,\n verticalScrollListItemClasses.text,\n css(styles.text)\n )}\n variant={variant}\n >\n {icon}\n </Tooltip>\n </div>\n </li>\n )}\n </ClassNames>\n );\n};\n"],"names":["HvVerticalScrollListItem","id","className","classes","selected","ariaLabel","onClick","onKeyDown","tooltipWrapper","others","activeTheme","useTheme","variant","labelId","setId","buttonId","Tooltip","NotSelected","useCallback","ClassNames","children","css","clsx","notSelected","verticalScrollListItemClasses","styles","icon","_jsx","CurrentStep","height","scrollTo","dotSelectedSize","width","root","role","tabIndex","button","text"],"mappings":";;;;;;;;;;;AAkCO,MAAMA,2BAA2BA,CAAC;AAAA,EACvCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,cAAcC;AAAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7B,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAU,SAAA;AAE5BC,QAAAA,UAAwCR,WAAW,UAAU;AAE7DS,QAAAA,UAAUC,MAAAA,MAAMb,IAAI,OAAO;AAE3Bc,QAAAA,WAAWD,MAAAA,MAAMb,IAAI,QAAQ;AAEnC,QAAMe,UAAUR;AAEVS,QAAAA,cAAcC,MAAAA,YAAY,MAAM;AACpC,0CACGC,MAAAA,YAAU;AAAA,MAAAC,UACRA,CAAC;AAAA,QAAEC;AAAAA,MAAAA,qCACF,OAAA;AAAA,QACEnB,WAAWoB,KAAAA,KACTnB,mCAASoB,aACTC,8BAAAA,QAA8BD,aAC9BF,IAAII,qCAAOF,WAAW,CAAC;AAAA,MAAA,CACvB;AAAA,IAAA,CAGK;AAAA,EAAA,GAEd,CAACpB,mCAASoB,WAAW,CAAC;AAEnBG,QAAAA,OAAOtB,WACXuB,2BAAAA,IAACC,6BAAW;AAAA,IACVC,QAAQnB,2CAAaoB,SAASC;AAAAA,IAC9BC,OAAOtB,2CAAaoB,SAASC;AAAAA,EAAgB,CAAA,IAG9Cd,2BAAAA,IAAAA,aACF,CAAA,CAAA;AAED,wCACGE,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,qCACF,MAAA;AAAA,MACEpB;AAAAA,MACAC,WAAWoB,KACTpB,KAAAA,WACAC,mCAAS8B,MACTT,sCAA8BS,MAC9BZ,IAAII,qCAAOQ,IAAI,CAAC;AAAA,MAElB,gBAAc7B;AAAAA,MAASgB,yCAEvB,OAAA;AAAA,QACEnB,IAAIc;AAAAA,QACJmB,MAAK;AAAA,QACLC,UAAU;AAAA,QACV7B;AAAAA,QACAC;AAAAA,QACAL,WAAWoB,KAAAA,KACTnB,mCAASiC,QACTZ,8BAAAA,QAA8BY,QAC9Bf,IAAII,qCAAOW,MAAM,CAAC;AAAA,QAEpB,cAAY/B;AAAAA,QACZ,mBAAiBQ;AAAAA,QAAQ,GACrBJ;AAAAA,QAAMW,yCAETJ,SAAO;AAAA,UACNf,IAAIY;AAAAA,UACJX,WAAWoB,KAAAA,KACTnB,mCAASkC,MACTb,8BAAAA,QAA8Ba,MAC9BhB,IAAII,qCAAOY,IAAI,CAAC;AAAA,UAElBzB;AAAAA,UAAiBQ,UAEhBM;AAAAA,QAAAA,CAAI;AAAA,MAAA,CACG;AAAA,IAAA,CACN;AAAA,EAAA,CAGC;AAEjB;;"}
@@ -0,0 +1,54 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const uikitStyles = require("@hitachivantara/uikit-styles");
4
+ const verticalScrollListItemClasses = require("./verticalScrollListItemClasses.cjs");
5
+ const focusUtils = require("../../../../utils/focusUtils.cjs");
6
+ const styles = {
7
+ root: {
8
+ padding: "0",
9
+ height: "32px",
10
+ width: "32px",
11
+ display: "flex",
12
+ justifyContent: "center",
13
+ alignItems: "center"
14
+ },
15
+ notSelected: {
16
+ height: uikitStyles.theme.scrollTo.dotNotSelectedSize,
17
+ width: uikitStyles.theme.scrollTo.dotNotSelectedSize,
18
+ borderRadius: "50%",
19
+ display: "inline-block",
20
+ backgroundColor: uikitStyles.theme.scrollTo.dotNotSelectedColor
21
+ },
22
+ text: {
23
+ height: uikitStyles.theme.scrollTo.dotRootSize,
24
+ width: uikitStyles.theme.scrollTo.dotRootSize,
25
+ display: "flex",
26
+ justifyContent: "center",
27
+ alignItems: "center"
28
+ },
29
+ button: {
30
+ display: "flex",
31
+ justifyContent: "center",
32
+ alignItems: "center",
33
+ height: uikitStyles.theme.scrollTo.dotRootSize,
34
+ width: uikitStyles.theme.scrollTo.dotRootSize,
35
+ borderRadius: uikitStyles.theme.scrollTo.dotRootRadius,
36
+ cursor: "pointer",
37
+ "&:hover": {
38
+ backgroundColor: uikitStyles.theme.scrollTo.dotHoverBackgroundColor,
39
+ [`& .${verticalScrollListItemClasses.default.notSelected}`]: {
40
+ height: uikitStyles.theme.scrollTo.dotHoverSize,
41
+ width: uikitStyles.theme.scrollTo.dotHoverSize,
42
+ backgroundColor: uikitStyles.theme.scrollTo.dotHoverColor
43
+ }
44
+ },
45
+ "&:focus": {
46
+ outline: "none"
47
+ },
48
+ "&:focus-visible": {
49
+ ...focusUtils.outlineStyles
50
+ }
51
+ }
52
+ };
53
+ exports.styles = styles;
54
+ //# sourceMappingURL=VerticalScrollListItem.styles.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"VerticalScrollListItem.styles.cjs","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.ts"],"sourcesContent":["import { outlineStyles } from \"@core/utils\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport verticalScrollListItemClasses from \"./verticalScrollListItemClasses\";\n\nexport const styles: {\n root: CSSInterpolation;\n button: CSSInterpolation;\n notSelected: CSSInterpolation;\n text: CSSInterpolation;\n} = {\n root: {\n padding: \"0\",\n height: \"32px\",\n width: \"32px\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n notSelected: {\n height: theme.scrollTo.dotNotSelectedSize,\n width: theme.scrollTo.dotNotSelectedSize,\n borderRadius: \"50%\",\n display: \"inline-block\",\n backgroundColor: theme.scrollTo.dotNotSelectedColor,\n },\n text: {\n height: theme.scrollTo.dotRootSize,\n width: theme.scrollTo.dotRootSize,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n button: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: theme.scrollTo.dotRootSize,\n width: theme.scrollTo.dotRootSize,\n borderRadius: theme.scrollTo.dotRootRadius,\n cursor: \"pointer\",\n \"&:hover\": {\n backgroundColor: theme.scrollTo.dotHoverBackgroundColor,\n\n [`& .${verticalScrollListItemClasses.notSelected}`]: {\n height: theme.scrollTo.dotHoverSize,\n width: theme.scrollTo.dotHoverSize,\n backgroundColor: theme.scrollTo.dotHoverColor,\n },\n },\n \"&:focus\": {\n outline: \"none\",\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n },\n },\n};\n"],"names":["styles","root","padding","height","width","display","justifyContent","alignItems","notSelected","theme","scrollTo","dotNotSelectedSize","borderRadius","backgroundColor","dotNotSelectedColor","text","dotRootSize","button","dotRootRadius","cursor","dotHoverBackgroundColor","verticalScrollListItemClasses","dotHoverSize","dotHoverColor","outline","outlineStyles"],"mappings":";;;;;AAKO,MAAMA,SAKT;AAAA,EACFC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAC,aAAa;AAAA,IACXL,QAAQM,YAAAA,MAAMC,SAASC;AAAAA,IACvBP,OAAOK,YAAAA,MAAMC,SAASC;AAAAA,IACtBC,cAAc;AAAA,IACdP,SAAS;AAAA,IACTQ,iBAAiBJ,YAAAA,MAAMC,SAASI;AAAAA,EAClC;AAAA,EACAC,MAAM;AAAA,IACJZ,QAAQM,YAAAA,MAAMC,SAASM;AAAAA,IACvBZ,OAAOK,YAAAA,MAAMC,SAASM;AAAAA,IACtBX,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAU,QAAQ;AAAA,IACNZ,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZJ,QAAQM,YAAAA,MAAMC,SAASM;AAAAA,IACvBZ,OAAOK,YAAAA,MAAMC,SAASM;AAAAA,IACtBJ,cAAcH,YAAAA,MAAMC,SAASQ;AAAAA,IAC7BC,QAAQ;AAAA,IACR,WAAW;AAAA,MACTN,iBAAiBJ,YAAAA,MAAMC,SAASU;AAAAA,MAEhC,CAAE,MAAKC,sCAA8Bb,aAAa,GAAG;AAAA,QACnDL,QAAQM,YAAAA,MAAMC,SAASY;AAAAA,QACvBlB,OAAOK,YAAAA,MAAMC,SAASY;AAAAA,QACtBT,iBAAiBJ,YAAAA,MAAMC,SAASa;AAAAA,MAClC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,EACF;AACF;;"}
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const classes = require("../../../../utils/classes.cjs");
4
+ const classKeys = ["root", "notSelected", "button", "text"];
5
+ const verticalScrollListItemClasses = classes.getClasses(classKeys, "HvVerticalScrollListItem");
6
+ const verticalScrollListItemClasses$1 = verticalScrollListItemClasses;
7
+ exports.default = verticalScrollListItemClasses$1;
8
+ //# sourceMappingURL=verticalScrollListItemClasses.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"verticalScrollListItemClasses.cjs","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/verticalScrollListItemClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvVerticalScrollListItemClasses {\n root?: string;\n notSelected?: string;\n button?: string;\n text?: string;\n}\n\nconst classKeys: string[] = [\"root\", \"notSelected\", \"button\", \"text\"];\n\nconst verticalScrollListItemClasses =\n getClasses<HvVerticalScrollListItemClasses>(\n classKeys,\n \"HvVerticalScrollListItem\"\n );\n\nexport default verticalScrollListItemClasses;\n"],"names":["classKeys","verticalScrollListItemClasses","getClasses"],"mappings":";;;AASA,MAAMA,YAAsB,CAAC,QAAQ,eAAe,UAAU,MAAM;AAEpE,MAAMC,gCACJC,QACEF,WAAAA,WACA,0BAA0B;AAG9B,MAAA,kCAAeC;;"}
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const classes = require("../../../utils/classes.cjs");
4
+ const classKeys = ["root", "positionAbsolute", "positionFixed"];
5
+ const scrollToVerticalClasses = classes.getClasses(classKeys, "HvScrollToVertical");
6
+ const scrollToVerticalClasses$1 = scrollToVerticalClasses;
7
+ exports.default = scrollToVerticalClasses$1;
8
+ //# sourceMappingURL=scrollToVerticalClasses.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scrollToVerticalClasses.cjs","sources":["../../../../../src/components/ScrollTo/Vertical/scrollToVerticalClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvScrollToVerticalClasses {\n root?: string;\n positionAbsolute?: string;\n positionFixed?: string;\n}\n\nconst classKeys: string[] = [\"root\", \"positionAbsolute\", \"positionFixed\"];\n\nconst scrollToVerticalClasses = getClasses<HvScrollToVerticalClasses>(\n classKeys,\n \"HvScrollToVertical\"\n);\n\nexport default scrollToVerticalClasses;\n"],"names":["classKeys","scrollToVerticalClasses","getClasses"],"mappings":";;;AAQA,MAAMA,YAAsB,CAAC,QAAQ,oBAAoB,eAAe;AAExE,MAAMC,0BAA0BC,QAC9BF,WAAAA,WACA,oBAAoB;AAGtB,MAAA,4BAAeC;;"}