@laerdal/life-react-components 5.1.0 → 5.3.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 (10) hide show
  1. package/dist/Card/VerticalCard/CardBottomSection.cjs +54 -16
  2. package/dist/Card/VerticalCard/CardBottomSection.cjs.map +1 -1
  3. package/dist/Card/VerticalCard/CardBottomSection.d.ts +12 -1
  4. package/dist/Card/VerticalCard/CardBottomSection.js +55 -17
  5. package/dist/Card/VerticalCard/CardBottomSection.js.map +1 -1
  6. package/dist/Paginator/Paginator.cjs +1 -1
  7. package/dist/Paginator/Paginator.cjs.map +1 -1
  8. package/dist/Paginator/Paginator.js +1 -1
  9. package/dist/Paginator/Paginator.js.map +1 -1
  10. package/package.json +3 -2
package/dist/Card/VerticalCard/CardBottomSection.cjs CHANGED
@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.CardBottomSectionProgressStyles = exports.CardBottomSectionNotesStyles = exports.CardBottomSectionNoteRightStyles = exports.CardBottomSectionNoteLeftStyles = exports.CardBottomSectionDivider = exports.CardBottomSectionContainer = exports.CardBottomSectionButtonRowContainerStyles = exports.CardBottomSectionAuthorStyles = void 0;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
8
10
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
11
  var _propTypes = _interopRequireDefault(require("prop-types"));
10
12
  var React = _interopRequireWildcard(require("react"));
@@ -12,17 +14,22 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
12
14
  var _index = require("../../index");
13
15
  var _Button = require("../../Button");
14
16
  var _jsxRuntime = require("react/jsx-runtime");
15
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
17
+ const _excluded = ["buttonText", "onClick"];
18
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
16
19
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
17
20
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
21
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
22
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
18
23
  const CardBottomSectionProgressStyles = exports.CardBottomSectionProgressStyles = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n padding: 8px 0;\n"])));
19
24
  const CardBottomSectionNotesStyles = exports.CardBottomSectionNotesStyles = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 48px;\n position: relative;\n color: ", ";\n display: flex;\n flex-direction: row;\n align-items: center;\n"])), props => _index.COLORS.getColor('neutral_500', props.theme));
20
25
  const CardBottomSectionAuthorStyles = exports.CardBottomSectionAuthorStyles = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 48px;\n\n div:first-child {\n flex-grow: 2;\n }\n\n svg, img {\n width: 80px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n\n ", "\n"])), props => props.$disabled ? "\n color: ".concat(_index.COLORS.getColor('neutral_300', props.theme), ";\n svg, img {\n filter: grayscale(100%);\n }\n \n ") : '');
21
26
  const CardBottomSectionDivider = exports.CardBottomSectionDivider = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n border-top: 1px;\n border-top-color: ", ";\n border-top-style: solid;\n width: 100%;\n"])), props => _index.COLORS.getColor('neutral_100', props.theme));
22
27
  const CardBottomSectionNoteLeftStyles = exports.CardBottomSectionNoteLeftStyles = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n left: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 4px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n"])));
23
28
  const CardBottomSectionNoteRightStyles = exports.CardBottomSectionNoteRightStyles = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n right: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 4px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n"])));
24
- const CardBottomSectionButtonRowContainerStyles = exports.CardBottomSectionButtonRowContainerStyles = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n border-top: 1px;\n border-top-color: ", ";\n border-top-style: solid;\n\n button:last-child {\n margin: 8px 0px 0px 0px;\n }\n\n button:not(:last-child) {\n margin: 8px 0px 0px 0px;\n }\n\n svg {\n color: ", ";\n }\n"])), props => _index.COLORS.getColor('neutral_100', props.theme), props => _index.COLORS.getColor('neutral_600', props.theme));
29
+ const CardBottomSectionButtonRowContainerStyles = exports.CardBottomSectionButtonRowContainerStyles = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n border-top: 1px;\n border-top-color: ", ";\n border-top-style: solid;\n\n button:last-child {\n margin: 8px 0px 0px 0px;\n }\n\n .card-bottom-section-action-button {\n z-index: 2000;\n }\n\n button:not(:last-child) {\n margin: 8px 0px 0px 0px;\n }\n\n svg {\n color: ", ";\n }\n"])), props => _index.COLORS.getColor('neutral_100', props.theme), props => _index.COLORS.getColor('neutral_600', props.theme));
25
30
  const CardBottomSectionContainer = exports.CardBottomSectionContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0px 16px 8px 16px;\n width: calc(100% - 32px);\n"])));
31
+ const LeftItemContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1\n"])));
32
+ const RightItemContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n color: ", ";\n"])), props => _index.COLORS.getColor('neutral_600', props.theme));
26
33
  const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
27
34
  let {
28
35
  progressLevel,
@@ -32,6 +39,7 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
32
39
  noteLeftIcon,
33
40
  noteRight,
34
41
  noteRightIcon,
42
+ leftButton,
35
43
  authorName,
36
44
  logo,
37
45
  actions,
@@ -41,10 +49,30 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
41
49
  const theme = (0, _styledComponents.useTheme)();
42
50
  const length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
43
51
  React.useEffect(() => {
44
- setElRefs(Array(length || 0).fill(null).map(() => /*#__PURE__*/React.createRef()));
45
- }, [length]);
52
+ setElRefs(Array((length || 0) + (leftButton ? 1 : 0)).fill(null).map(() => /*#__PURE__*/React.createRef()));
53
+ }, [length, leftButton]);
46
54
  React.useImperativeHandle(ref, () => elRefs, [elRefs]);
47
- const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
55
+ const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName || leftButton;
56
+ const renderLeftButton = () => {
57
+ if (leftButton) {
58
+ const {
59
+ buttonText,
60
+ onClick
61
+ } = leftButton,
62
+ rest = (0, _objectWithoutProperties2.default)(leftButton, _excluded);
63
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, _objectSpread(_objectSpread({
64
+ className: "card-bottom-section-action-button",
65
+ ref: elRefs[0],
66
+ size: leftButton.size && [_index.Size.XSmall, _index.Size.XSmall, _index.Size.XXSmall].includes(leftButton.size) ? _index.Size.Small : leftButton.size == _index.Size.Large ? _index.Size.Large : _index.Size.Medium
67
+ }, rest), {}, {
68
+ onClick: e => {
69
+ e.stopPropagation();
70
+ onClick && onClick(e);
71
+ },
72
+ children: buttonText
73
+ }));
74
+ }
75
+ };
48
76
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionContainer, {
49
77
  "data-testid": 'card-bottomSection',
50
78
  children: [haveAtLeastSomething && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardBottomSectionDivider, {}), progressLevel != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardBottomSectionProgressStyles, {
@@ -75,17 +103,26 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
75
103
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXXS, {
76
104
  children: authorName
77
105
  }), logo]
78
- }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardBottomSectionButtonRowContainerStyles, {
79
- children: actions.map((x, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
80
- ref: elRefs[index],
81
- disabled: disabled,
82
- variant: "secondary",
83
- shape: "circular",
84
- action: e => {
85
- x.onClick();
86
- },
87
- children: x.icon
88
- }, index))
106
+ }), (actions || leftButton) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionButtonRowContainerStyles, {
107
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LeftItemContainer, {
108
+ children: leftButton && renderLeftButton()
109
+ }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(RightItemContainer, {
110
+ children: actions.map((x, index) => {
111
+ var _x$variant;
112
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
113
+ ref: elRefs[index + (leftButton ? 1 : 0)],
114
+ className: "card-bottom-section-action-button",
115
+ "z-index": 2000,
116
+ disabled: disabled,
117
+ variant: (_x$variant = x.variant) !== null && _x$variant !== void 0 ? _x$variant : "secondary",
118
+ shape: "circular",
119
+ action: e => {
120
+ x.onClick();
121
+ },
122
+ children: x.icon
123
+ }, index);
124
+ })
125
+ })]
89
126
  })]
90
127
  });
91
128
  });
@@ -98,6 +135,7 @@ CardBottomSection.propTypes = {
98
135
  noteRightIcon: _propTypes.default.node,
99
136
  authorName: _propTypes.default.string,
100
137
  actions: _propTypes.default.arrayOf(_propTypes.default.shape({
138
+ variant: _propTypes.default.oneOf(['primary', 'secondary']),
101
139
  icon: _propTypes.default.node.isRequired,
102
140
  onClick: _propTypes.default.func.isRequired
103
141
  })),
package/dist/Card/VerticalCard/CardBottomSection.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CardBottomSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_Button","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardBottomSectionProgressStyles","exports","styled","div","_taggedTemplateLiteral2","CardBottomSectionNotesStyles","props","COLORS","getColor","theme","CardBottomSectionAuthorStyles","$disabled","concat","CardBottomSectionDivider","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","CardBottomSectionContainer","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","disabled","elRefs","setElRefs","useState","useTheme","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","jsxs","children","jsx","LinearProgress","size","Size","Small","type","variant","LinearProgressVariant","Normal","value","max","ComponentXXS","color","textStyle","ComponentTextStyle","Bold","x","index","IconButton","shape","action","onClick","icon","propTypes","_propTypes","number","string","node","arrayOf","isRequired","func","bool","_default"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n COLORS,\r\n ComponentTextStyle,\r\n ComponentXXS,\r\n LinearProgress,\r\n LinearProgressType,\r\n LinearProgressVariant,\r\n Size\r\n} from '../../index';\r\nimport {IconButton} from '../../Button';\r\n\r\nexport interface ActionItem {\r\n icon: React.ReactNode;\r\n onClick: () => void;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n /** Optional. Current progress level shown in the progress bar. */\r\n progressLevel?: number;\r\n /** Optional. Maximum level of progress in the progress bar. */\r\n progressMax?: number;\r\n /** Optional. Type of the progress bar. */\r\n progressType?: LinearProgressType;\r\n\r\n /** Optional. Note text shown on the left side of the section. */\r\n noteLeft?: string;\r\n /** Optional. Note icon shown on the left side of the section. */\r\n noteLeftIcon?: React.ReactNode;\r\n /** Optional. Note text shown on the right side of the section. */\r\n noteRight?: string;\r\n /** Optional. Note icon shown on the right side of the section. */\r\n noteRightIcon?: React.ReactNode;\r\n\r\n /** Author name shown at the bottom-left part of the section. */\r\n authorName?: string;\r\n /** Array of actions shown on the bottom-right corner of the section. */\r\n actions?: ActionItem[];\r\n /** Logo shown on the right side of the section, in front of AuthorName. */\r\n logo?: React.ReactNode;\r\n /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n disabled?: boolean;\r\n}\r\n\r\nexport const CardBottomSectionProgressStyles = styled.div`\r\n padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = styled.div`\r\n height: 48px;\r\n position: relative;\r\n color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n`;\r\n\r\nexport const CardBottomSectionAuthorStyles = styled.div<{ $disabled?: boolean }>`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n height: 48px;\r\n\r\n div:first-child {\r\n flex-grow: 2;\r\n }\r\n\r\n svg, img {\r\n width: 80px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n\r\n ${props => props.$disabled ? `\r\n color: ${COLORS.getColor('neutral_300', props.theme)};\r\n svg, img {\r\n filter: grayscale(100%);\r\n }\r\n \r\n ` : ''}\r\n`;\r\n\r\nexport const CardBottomSectionDivider = styled.div`\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n border-top-style: solid;\r\n width: 100%;\r\n`;\r\n\r\nexport const CardBottomSectionNoteLeftStyles = styled.div`\r\n position: absolute;\r\n left: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionNoteRightStyles = styled.div`\r\n position: absolute;\r\n right: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionButtonRowContainerStyles = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n align-items: center;\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n border-top-style: solid;\r\n\r\n button:last-child {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n button:not(:last-child) {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n padding: 0px 16px 8px 16px;\r\n width: calc(100% - 32px);\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n progressLevel,\r\n progressMax,\r\n progressType = LinearProgressType.Line,\r\n noteLeft,\r\n noteLeftIcon,\r\n noteRight,\r\n noteRightIcon,\r\n authorName,\r\n logo,\r\n actions,\r\n disabled\r\n }: CardBottomSectionProps,\r\n ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n const theme = useTheme();\r\n const length = actions?.length || 0;\r\n\r\n React.useEffect(() => {\r\n setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n }, [length]);\r\n\r\n React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\r\n\r\n return (\r\n <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n {haveAtLeastSomething && <CardBottomSectionDivider/>}\r\n {progressLevel != undefined && <CardBottomSectionProgressStyles>\r\n <LinearProgress size={Size.Small}\r\n type={progressType}\r\n variant={LinearProgressVariant.Normal}\r\n value={progressLevel}\r\n max={progressMax ?? progressLevel}/>\r\n </CardBottomSectionProgressStyles>}\r\n\r\n {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardBottomSectionNotesStyles>\r\n {(noteLeft || noteLeftIcon) && (\r\n <CardBottomSectionNoteLeftStyles>\r\n {noteLeftIcon}\r\n <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n </CardBottomSectionNoteLeftStyles>\r\n )}\r\n {(noteRight || noteRightIcon) && (\r\n <CardBottomSectionNoteRightStyles>\r\n {noteRightIcon}\r\n <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n </CardBottomSectionNoteRightStyles>\r\n )}\r\n </CardBottomSectionNotesStyles>}\r\n\r\n {(authorName || logo) && <CardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n <ComponentXXS>{authorName}</ComponentXXS>\r\n {logo}\r\n </CardBottomSectionAuthorStyles>}\r\n\r\n {actions && <CardBottomSectionButtonRowContainerStyles>\r\n {actions.map((x, index) => (\r\n <IconButton ref={elRefs[index]}\r\n key={index}\r\n disabled={disabled}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n action={(e) => {\r\n x.onClick();\r\n }}>\r\n {x.icon}\r\n </IconButton>\r\n ))}\r\n </CardBottomSectionButtonRowContainerStyles>}\r\n </CardBottomSectionContainer>\r\n );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":";;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAF,uBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AASA,IAAAG,OAAA,GAAAH,OAAA;AAAwC,IAAAI,WAAA,GAAAJ,OAAA;AAAA,IAAAK,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAf,wBAAAe,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAkCjC,MAAMW,+BAA+B,GAAAC,OAAA,CAAAD,+BAAA,GAAGE,yBAAM,CAACC,GAAG,CAAA/B,eAAA,KAAAA,eAAA,OAAAgC,uBAAA,CAAAlB,OAAA,8BAExD;AAEM,MAAMmB,4BAA4B,GAAAJ,OAAA,CAAAI,4BAAA,GAAGH,yBAAM,CAACC,GAAG,CAAA9B,gBAAA,KAAAA,gBAAA,OAAA+B,uBAAA,CAAAlB,OAAA,sIAG3CoB,KAAK,IAAIC,aAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAI9D;AAEM,MAAMC,6BAA6B,GAAAT,OAAA,CAAAS,6BAAA,GAAGR,yBAAM,CAACC,GAAG,CAAA7B,gBAAA,KAAAA,gBAAA,OAAA8B,uBAAA,CAAAlB,OAAA,uOAgBnDoB,KAAK,IAAIA,KAAK,CAACK,SAAS,mBAAAC,MAAA,CACfL,aAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,0EAKlD,EAAE,CACP;AAEM,MAAMI,wBAAwB,GAAAZ,OAAA,CAAAY,wBAAA,GAAGX,yBAAM,CAACC,GAAG,CAAA5B,gBAAA,KAAAA,gBAAA,OAAA6B,uBAAA,CAAAlB,OAAA,uGAE5BoB,KAAK,IAAIC,aAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAGzE;AAEM,MAAMK,+BAA+B,GAAAb,OAAA,CAAAa,+BAAA,GAAGZ,yBAAM,CAACC,GAAG,CAAA3B,gBAAA,KAAAA,gBAAA,OAAA4B,uBAAA,CAAAlB,OAAA,kMAYxD;AAEM,MAAM6B,gCAAgC,GAAAd,OAAA,CAAAc,gCAAA,GAAGb,yBAAM,CAACC,GAAG,CAAA1B,gBAAA,KAAAA,gBAAA,OAAA2B,uBAAA,CAAAlB,OAAA,mMAYzD;AAEM,MAAM8B,yCAAyC,GAAAf,OAAA,CAAAe,yCAAA,GAAGd,yBAAM,CAACC,GAAG,CAAAzB,gBAAA,KAAAA,gBAAA,OAAA0B,uBAAA,CAAAlB,OAAA,uVAM7CoB,KAAK,IAAIC,aAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,EAY7DH,KAAK,IAAIC,aAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAEhE;AAEM,MAAMQ,0BAA0B,GAAAhB,OAAA,CAAAgB,0BAAA,GAAGf,yBAAM,CAACC,GAAG,CAAAxB,gBAAA,KAAAA,gBAAA,OAAAyB,uBAAA,CAAAlB,OAAA,uEAGnD;AAED,MAAMgC,iBAAiB,gBAAGrD,KAAK,CAACsD,UAAU,CAAC,CAAAC,IAAA,EAaCC,GAAoD,KAAK;EAAA,IAbzD;IACEC,aAAa;IACbC,WAAW;IACXC,YAAY,GAAGC,yBAAkB,CAACC,IAAI;IACtCC,QAAQ;IACRC,YAAY;IACZC,SAAS;IACTC,aAAa;IACbC,UAAU;IACVC,IAAI;IACJC,OAAO;IACPC;EACsB,CAAC,GAAAd,IAAA;EAGnE,MAAM,CAACe,MAAM,EAAEC,SAAS,CAAC,GAAGvE,KAAK,CAACwE,QAAQ,CAAuC,EAAE,CAAC;EACpF,MAAM5B,KAAK,GAAG,IAAA6B,0BAAQ,EAAC,CAAC;EACxB,MAAMC,MAAM,GAAG,CAAAN,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,MAAM,KAAI,CAAC;EAEnC1E,KAAK,CAAC2E,SAAS,CAAC,MAAM;IACpBJ,SAAS,CAACK,KAAK,CAACF,MAAM,IAAI,CAAC,CAAC,CAACG,IAAI,CAAC,IAAI,CAAC,CAACC,GAAG,CAAC,mBAAM9E,KAAK,CAAC+E,SAAS,CAAoB,CAAC,CAAC,CAAC;EAC1F,CAAC,EAAE,CAACL,MAAM,CAAC,CAAC;EAEZ1E,KAAK,CAACgF,mBAAmB,CAACxB,GAAG,EAAE,MAAMc,MAAM,EAAE,CAACA,MAAM,CAAC,CAAC;EAEtD,MAAMW,oBAAoB,GAAGxB,aAAa,IAAIyB,SAAS,IAAIpB,QAAQ,IAAIC,YAAY,IAAIC,SAAS,IAAIC,aAAa,IAAIC,UAAU;EAE/H,oBACE,IAAA5D,WAAA,CAAA6E,IAAA,EAAC/B,0BAA0B;IAAC,eAAa,oBAAqB;IAAAgC,QAAA,GAC3DH,oBAAoB,iBAAI,IAAA3E,WAAA,CAAA+E,GAAA,EAACrC,wBAAwB,IAAC,CAAC,EACnDS,aAAa,IAAIyB,SAAS,iBAAI,IAAA5E,WAAA,CAAA+E,GAAA,EAAClD,+BAA+B;MAAAiD,QAAA,eAC7D,IAAA9E,WAAA,CAAA+E,GAAA,EAACjF,MAAA,CAAAkF,cAAc;QAACC,IAAI,EAAEC,WAAI,CAACC,KAAM;QACjBC,IAAI,EAAE/B,YAAa;QACnBgC,OAAO,EAAEC,4BAAqB,CAACC,MAAO;QACtCC,KAAK,EAAErC,aAAc;QACrBsC,GAAG,EAAErC,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAID;MAAc,CAAC;IAAC,CACrB,CAAC,EAEjC,CAACK,QAAQ,IAAIC,YAAY,IAAIC,SAAS,IAAIC,aAAa,kBAAK,IAAA3D,WAAA,CAAA6E,IAAA,EAAC3C,4BAA4B;MAAA4C,QAAA,GACvF,CAACtB,QAAQ,IAAIC,YAAY,kBACxB,IAAAzD,WAAA,CAAA6E,IAAA,EAAClC,+BAA+B;QAAAmC,QAAA,GAC7BrB,YAAY,eACb,IAAAzD,WAAA,CAAA+E,GAAA,EAACjF,MAAA,CAAA4F,YAAY;UAACC,KAAK,EAAEvD,aAAM,CAACC,QAAQ,CAAC,aAAa,EAAEC,KAAK,CAAE;UAACsD,SAAS,EAAEC,yBAAkB,CAACC,IAAK;UAAAhB,QAAA,EAAEtB;QAAQ,CAAe,CAAC;MAAA,CAC1F,CAClC,EACA,CAACE,SAAS,IAAIC,aAAa,kBAC1B,IAAA3D,WAAA,CAAA6E,IAAA,EAACjC,gCAAgC;QAAAkC,QAAA,GAC9BnB,aAAa,eACd,IAAA3D,WAAA,CAAA+E,GAAA,EAACjF,MAAA,CAAA4F,YAAY;UAACC,KAAK,EAAEvD,aAAM,CAACC,QAAQ,CAAC,aAAa,EAAEC,KAAK,CAAE;UAACsD,SAAS,EAAEC,yBAAkB,CAACC,IAAK;UAAAhB,QAAA,EAAEpB;QAAS,CAAe,CAAC;MAAA,CAC1F,CACnC;IAAA,CAC2B,CAAC,EAE9B,CAACE,UAAU,IAAIC,IAAI,kBAAK,IAAA7D,WAAA,CAAA6E,IAAA,EAACtC,6BAA6B;MAACC,SAAS,EAAEuB,QAAS;MAAC,eAAa,2BAA4B;MAAAe,QAAA,gBACpH,IAAA9E,WAAA,CAAA+E,GAAA,EAACjF,MAAA,CAAA4F,YAAY;QAAAZ,QAAA,EAAElB;MAAU,CAAe,CAAC,EACxCC,IAAI;IAAA,CACwB,CAAC,EAE/BC,OAAO,iBAAI,IAAA9D,WAAA,CAAA+E,GAAA,EAAClC,yCAAyC;MAAAiC,QAAA,EACnDhB,OAAO,CAACU,GAAG,CAAC,CAACuB,CAAC,EAAEC,KAAK,kBACpB,IAAAhG,WAAA,CAAA+E,GAAA,EAAChF,OAAA,CAAAkG,UAAU;QAAC/C,GAAG,EAAEc,MAAM,CAACgC,KAAK,CAAE;QAEnBjC,QAAQ,EAAEA,QAAS;QACnBsB,OAAO,EAAC,WAAW;QACnBa,KAAK,EAAC,UAAU;QAChBC,MAAM,EAAGzF,CAAC,IAAK;UACbqF,CAAC,CAACK,OAAO,CAAC,CAAC;QACb,CAAE;QAAAtB,QAAA,EACXiB,CAAC,CAACM;MAAI,GAPQL,KAQL,CACb;IAAC,CACuC,CAAC;EAAA,CAClB,CAAC;AAEjC,CAAC,CAAC;AAACjD,iBAAA,CAAAuD,SAAA;EAvMDnD,aAAa,EAAAoD,UAAA,CAAAxF,OAAA,CAAAyF,MAAA;EAEbpD,WAAW,EAAAmD,UAAA,CAAAxF,OAAA,CAAAyF,MAAA;EAKXhD,QAAQ,EAAA+C,UAAA,CAAAxF,OAAA,CAAA0F,MAAA;EAERhD,YAAY,EAAA8C,UAAA,CAAAxF,OAAA,CAAA2F,IAAA;EAEZhD,SAAS,EAAA6C,UAAA,CAAAxF,OAAA,CAAA0F,MAAA;EAET9C,aAAa,EAAA4C,UAAA,CAAAxF,OAAA,CAAA2F,IAAA;EAGb9C,UAAU,EAAA2C,UAAA,CAAAxF,OAAA,CAAA0F,MAAA;EAEV3C,OAAO,EAAAyC,UAAA,CAAAxF,OAAA,CAAA4F,OAAA,CAAAJ,UAAA,CAAAxF,OAAA,CAAAmF,KAAA;IAxBPG,IAAI,EAAAE,UAAA,CAAAxF,OAAA,CAAA2F,IAAA,CAAAE,UAAA;IACJR,OAAO,EAAAG,UAAA,CAAAxF,OAAA,CAAA8F,IAAA,CAAAD;EAAA;EAyBP/C,IAAI,EAAA0C,UAAA,CAAAxF,OAAA,CAAA2F,IAAA;EAEJ3C,QAAQ,EAAAwC,UAAA,CAAAxF,OAAA,CAAA+F;AAAA;AAAA,IAAAC,QAAA,GAAAjF,OAAA,CAAAf,OAAA,GAmLKgC,iBAAiB","ignoreList":[]}
1
+ {"version":3,"file":"CardBottomSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_Button","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","CardBottomSectionProgressStyles","exports","styled","div","_taggedTemplateLiteral2","CardBottomSectionNotesStyles","props","COLORS","getColor","theme","CardBottomSectionAuthorStyles","$disabled","concat","CardBottomSectionDivider","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","CardBottomSectionContainer","LeftItemContainer","RightItemContainer","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","leftButton","authorName","logo","actions","disabled","elRefs","setElRefs","useState","useTheme","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","renderLeftButton","buttonText","onClick","rest","_objectWithoutProperties2","jsx","Button","className","size","Size","XSmall","XXSmall","includes","Small","Large","Medium","stopPropagation","children","jsxs","LinearProgress","type","variant","LinearProgressVariant","Normal","value","max","ComponentXXS","color","textStyle","ComponentTextStyle","Bold","x","index","_x$variant","IconButton","shape","action","icon","propTypes","_propTypes","number","string","node","arrayOf","oneOf","isRequired","func","bool","_default"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n COLORS,\r\n ComponentTextStyle,\r\n ComponentXXS,\r\n LinearProgress,\r\n LinearProgressType,\r\n LinearProgressVariant,\r\n Size,\r\n} from '../../index';\r\nimport { Button, ButtonProps, IconButton } from '../../Button';\r\n\r\nexport interface ActionItem {\r\n /** Optional. Variant of the action button, defaults to 'secondary'. */\r\n variant?: 'primary' | 'secondary';\r\n /** Icon to be used in the icon button. */\r\n icon: React.ReactNode;\r\n /** Click handler for the action button. */\r\n onClick: () => void;\r\n}\r\n\r\nexport type CardStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\r\n buttonText: string;\r\n size?: Size.Small | Size.Medium | Size.Large;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n /** Optional. Current progress level shown in the progress bar. */\r\n progressLevel?: number;\r\n /** Optional. Maximum level of progress in the progress bar. */\r\n progressMax?: number;\r\n /** Optional. Type of the progress bar. */\r\n progressType?: LinearProgressType;\r\n\r\n /** Optional. Note text shown on the left side of the section. */\r\n noteLeft?: string;\r\n /** Optional. Note icon shown on the left side of the section. */\r\n noteLeftIcon?: React.ReactNode;\r\n /** Optional. Note text shown on the right side of the section. */\r\n noteRight?: string;\r\n /** Optional. Note icon shown on the right side of the section. */\r\n noteRightIcon?: React.ReactNode;\r\n\r\n /** Optional. Note icon/Hyperlink/button shown on the left side of the section. */\r\n leftButton?: CardStandardButton;\r\n\r\n /** Author name shown at the bottom-left part of the section. */\r\n authorName?: string;\r\n /** Array of actions shown on the bottom-right corner of the section. */\r\n actions?: ActionItem[];\r\n /** Logo shown on the right side of the section, in front of AuthorName. */\r\n logo?: React.ReactNode;\r\n /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n disabled?: boolean;\r\n}\r\n\r\nexport const CardBottomSectionProgressStyles = styled.div`\r\n padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = styled.div`\r\n height: 48px;\r\n position: relative;\r\n color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n`;\r\n\r\nexport const CardBottomSectionAuthorStyles = styled.div<{ $disabled?: boolean }>`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n height: 48px;\r\n\r\n div:first-child {\r\n flex-grow: 2;\r\n }\r\n\r\n svg, img {\r\n width: 80px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n\r\n ${props => props.$disabled ? `\r\n color: ${COLORS.getColor('neutral_300', props.theme)};\r\n svg, img {\r\n filter: grayscale(100%);\r\n }\r\n \r\n ` : ''}\r\n`;\r\n\r\nexport const CardBottomSectionDivider = styled.div`\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n border-top-style: solid;\r\n width: 100%;\r\n`;\r\n\r\nexport const CardBottomSectionNoteLeftStyles = styled.div`\r\n position: absolute;\r\n left: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionNoteRightStyles = styled.div`\r\n position: absolute;\r\n right: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionButtonRowContainerStyles = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n align-items: center;\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n border-top-style: solid;\r\n\r\n button:last-child {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n .card-bottom-section-action-button {\r\n z-index: 2000;\r\n }\r\n\r\n button:not(:last-child) {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n padding: 0px 16px 8px 16px;\r\n width: calc(100% - 32px);\r\n`;\r\n\r\nconst LeftItemContainer = styled.div`\r\n flex: 1\r\n`;\r\n\r\nconst RightItemContainer = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n progressLevel,\r\n progressMax,\r\n progressType = LinearProgressType.Line,\r\n noteLeft,\r\n noteLeftIcon,\r\n noteRight,\r\n noteRightIcon,\r\n leftButton,\r\n authorName,\r\n logo,\r\n actions,\r\n disabled\r\n}: CardBottomSectionProps,\r\n ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n const theme = useTheme();\r\n const length = actions?.length || 0;\r\n\r\n React.useEffect(() => {\r\n setElRefs(Array((length || 0) + (leftButton ? 1 : 0)).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n }, [length, leftButton]);\r\n\r\n React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName || leftButton;\r\n\r\n const renderLeftButton = () => {\r\n if (leftButton){\r\n const {buttonText, onClick, ...rest} = leftButton;\r\n return (<Button className=\"card-bottom-section-action-button\"\r\n ref={elRefs[0]}\r\n size={ leftButton.size && [Size.XSmall, Size.XSmall, Size.XXSmall].includes(leftButton.size) ? Size.Small: \r\n leftButton.size == Size.Large ? Size.Large : Size.Medium}\r\n {...rest}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n onClick && onClick(e);\r\n }}>\r\n {buttonText}\r\n </Button>)\r\n }\r\n}\r\n\r\n return (\r\n <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n {haveAtLeastSomething && <CardBottomSectionDivider/>}\r\n {progressLevel != undefined && <CardBottomSectionProgressStyles>\r\n <LinearProgress size={Size.Small}\r\n type={progressType}\r\n variant={LinearProgressVariant.Normal}\r\n value={progressLevel}\r\n max={progressMax ?? progressLevel}/>\r\n </CardBottomSectionProgressStyles>}\r\n\r\n {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardBottomSectionNotesStyles>\r\n {(noteLeft || noteLeftIcon) && (\r\n <CardBottomSectionNoteLeftStyles>\r\n {noteLeftIcon}\r\n <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n </CardBottomSectionNoteLeftStyles>\r\n )}\r\n {(noteRight || noteRightIcon) && (\r\n <CardBottomSectionNoteRightStyles>\r\n {noteRightIcon}\r\n <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n </CardBottomSectionNoteRightStyles>\r\n )}\r\n </CardBottomSectionNotesStyles>}\r\n\r\n {(authorName || logo) && <CardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n <ComponentXXS>{authorName}</ComponentXXS>\r\n {logo}\r\n </CardBottomSectionAuthorStyles>}\r\n\r\n {(actions || leftButton) && <CardBottomSectionButtonRowContainerStyles>\r\n <LeftItemContainer>\r\n {leftButton && renderLeftButton()}\r\n </LeftItemContainer>\r\n\r\n { actions && <RightItemContainer>{actions.map((x, index) => (\r\n <IconButton ref={elRefs[index + (leftButton ? 1 : 0)]}\r\n className=\"card-bottom-section-action-button\"\r\n key={index}\r\n z-index={2000}\r\n disabled={disabled}\r\n variant={x.variant ?? \"secondary\"}\r\n shape=\"circular\"\r\n action={(e) => {\r\n x.onClick();\r\n }}>\r\n {x.icon}\r\n </IconButton>\r\n ))}\r\n </RightItemContainer>\r\n }\r\n </CardBottomSectionButtonRowContainerStyles>}\r\n </CardBottomSectionContainer>\r\n );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":"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","ignoreList":[]}
package/dist/Card/VerticalCard/CardBottomSection.d.ts CHANGED
@@ -1,9 +1,18 @@
1
1
  import * as React from 'react';
2
- import { LinearProgressType } from '../../index';
2
+ import { LinearProgressType, Size } from '../../index';
3
+ import { ButtonProps } from '../../Button';
3
4
  export interface ActionItem {
5
+ /** Optional. Variant of the action button, defaults to 'secondary'. */
6
+ variant?: 'primary' | 'secondary';
7
+ /** Icon to be used in the icon button. */
4
8
  icon: React.ReactNode;
9
+ /** Click handler for the action button. */
5
10
  onClick: () => void;
6
11
  }
12
+ export type CardStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {
13
+ buttonText: string;
14
+ size?: Size.Small | Size.Medium | Size.Large;
15
+ };
7
16
  export interface CardBottomSectionProps {
8
17
  /** Optional. Current progress level shown in the progress bar. */
9
18
  progressLevel?: number;
@@ -19,6 +28,8 @@ export interface CardBottomSectionProps {
19
28
  noteRight?: string;
20
29
  /** Optional. Note icon shown on the right side of the section. */
21
30
  noteRightIcon?: React.ReactNode;
31
+ /** Optional. Note icon/Hyperlink/button shown on the left side of the section. */
32
+ leftButton?: CardStandardButton;
22
33
  /** Author name shown at the bottom-left part of the section. */
23
34
  authorName?: string;
24
35
  /** Array of actions shown on the bottom-right corner of the section. */
package/dist/Card/VerticalCard/CardBottomSection.js CHANGED
@@ -1,10 +1,15 @@
1
+ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
+ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
1
3
  import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
2
4
  import _pt from "prop-types";
3
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
5
+ const _excluded = ["buttonText", "onClick"];
6
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
7
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
8
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
9
  import * as React from 'react';
5
10
  import styled, { useTheme } from 'styled-components';
6
11
  import { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '../../index';
7
- import { IconButton } from '../../Button';
12
+ import { Button, IconButton } from '../../Button';
8
13
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
9
14
  export const CardBottomSectionProgressStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 8px 0;\n"])));
10
15
  export const CardBottomSectionNotesStyles = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: 48px;\n position: relative;\n color: ", ";\n display: flex;\n flex-direction: row;\n align-items: center;\n"])), props => COLORS.getColor('neutral_500', props.theme));
@@ -12,8 +17,10 @@ export const CardBottomSectionAuthorStyles = styled.div(_templateObject3 || (_te
12
17
  export const CardBottomSectionDivider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n border-top: 1px;\n border-top-color: ", ";\n border-top-style: solid;\n width: 100%;\n"])), props => COLORS.getColor('neutral_100', props.theme));
13
18
  export const CardBottomSectionNoteLeftStyles = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: absolute;\n left: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 4px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n"])));
14
19
  export const CardBottomSectionNoteRightStyles = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n position: absolute;\n right: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 4px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n"])));
15
- export const CardBottomSectionButtonRowContainerStyles = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n border-top: 1px;\n border-top-color: ", ";\n border-top-style: solid;\n\n button:last-child {\n margin: 8px 0px 0px 0px;\n }\n\n button:not(:last-child) {\n margin: 8px 0px 0px 0px;\n }\n\n svg {\n color: ", ";\n }\n"])), props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_600', props.theme));
20
+ export const CardBottomSectionButtonRowContainerStyles = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n border-top: 1px;\n border-top-color: ", ";\n border-top-style: solid;\n\n button:last-child {\n margin: 8px 0px 0px 0px;\n }\n\n .card-bottom-section-action-button {\n z-index: 2000;\n }\n\n button:not(:last-child) {\n margin: 8px 0px 0px 0px;\n }\n\n svg {\n color: ", ";\n }\n"])), props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_600', props.theme));
16
21
  export const CardBottomSectionContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n padding: 0px 16px 8px 16px;\n width: calc(100% - 32px);\n"])));
22
+ const LeftItemContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n flex: 1\n"])));
23
+ const RightItemContainer = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n color: ", ";\n"])), props => COLORS.getColor('neutral_600', props.theme));
17
24
  const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
18
25
  let {
19
26
  progressLevel,
@@ -23,6 +30,7 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
23
30
  noteLeftIcon,
24
31
  noteRight,
25
32
  noteRightIcon,
33
+ leftButton,
26
34
  authorName,
27
35
  logo,
28
36
  actions,
@@ -32,10 +40,30 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
32
40
  const theme = useTheme();
33
41
  const length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
34
42
  React.useEffect(() => {
35
- setElRefs(Array(length || 0).fill(null).map(() => /*#__PURE__*/React.createRef()));
36
- }, [length]);
43
+ setElRefs(Array((length || 0) + (leftButton ? 1 : 0)).fill(null).map(() => /*#__PURE__*/React.createRef()));
44
+ }, [length, leftButton]);
37
45
  React.useImperativeHandle(ref, () => elRefs, [elRefs]);
38
- const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
46
+ const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName || leftButton;
47
+ const renderLeftButton = () => {
48
+ if (leftButton) {
49
+ const {
50
+ buttonText,
51
+ onClick
52
+ } = leftButton,
53
+ rest = _objectWithoutProperties(leftButton, _excluded);
54
+ return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
55
+ className: "card-bottom-section-action-button",
56
+ ref: elRefs[0],
57
+ size: leftButton.size && [Size.XSmall, Size.XSmall, Size.XXSmall].includes(leftButton.size) ? Size.Small : leftButton.size == Size.Large ? Size.Large : Size.Medium
58
+ }, rest), {}, {
59
+ onClick: e => {
60
+ e.stopPropagation();
61
+ onClick && onClick(e);
62
+ },
63
+ children: buttonText
64
+ }));
65
+ }
66
+ };
39
67
  return /*#__PURE__*/_jsxs(CardBottomSectionContainer, {
40
68
  "data-testid": 'card-bottomSection',
41
69
  children: [haveAtLeastSomething && /*#__PURE__*/_jsx(CardBottomSectionDivider, {}), progressLevel != undefined && /*#__PURE__*/_jsx(CardBottomSectionProgressStyles, {
@@ -66,17 +94,26 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
66
94
  children: [/*#__PURE__*/_jsx(ComponentXXS, {
67
95
  children: authorName
68
96
  }), logo]
69
- }), actions && /*#__PURE__*/_jsx(CardBottomSectionButtonRowContainerStyles, {
70
- children: actions.map((x, index) => /*#__PURE__*/_jsx(IconButton, {
71
- ref: elRefs[index],
72
- disabled: disabled,
73
- variant: "secondary",
74
- shape: "circular",
75
- action: e => {
76
- x.onClick();
77
- },
78
- children: x.icon
79
- }, index))
97
+ }), (actions || leftButton) && /*#__PURE__*/_jsxs(CardBottomSectionButtonRowContainerStyles, {
98
+ children: [/*#__PURE__*/_jsx(LeftItemContainer, {
99
+ children: leftButton && renderLeftButton()
100
+ }), actions && /*#__PURE__*/_jsx(RightItemContainer, {
101
+ children: actions.map((x, index) => {
102
+ var _x$variant;
103
+ return /*#__PURE__*/_jsx(IconButton, {
104
+ ref: elRefs[index + (leftButton ? 1 : 0)],
105
+ className: "card-bottom-section-action-button",
106
+ "z-index": 2000,
107
+ disabled: disabled,
108
+ variant: (_x$variant = x.variant) !== null && _x$variant !== void 0 ? _x$variant : "secondary",
109
+ shape: "circular",
110
+ action: e => {
111
+ x.onClick();
112
+ },
113
+ children: x.icon
114
+ }, index);
115
+ })
116
+ })]
80
117
  })]
81
118
  });
82
119
  });
@@ -89,6 +126,7 @@ CardBottomSection.propTypes = {
89
126
  noteRightIcon: _pt.node,
90
127
  authorName: _pt.string,
91
128
  actions: _pt.arrayOf(_pt.shape({
129
+ variant: _pt.oneOf(['primary', 'secondary']),
92
130
  icon: _pt.node.isRequired,
93
131
  onClick: _pt.func.isRequired
94
132
  })),
package/dist/Card/VerticalCard/CardBottomSection.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CardBottomSection.js","names":["React","styled","useTheme","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","jsx","_jsx","jsxs","_jsxs","CardBottomSectionProgressStyles","div","_templateObject","_taggedTemplateLiteral","CardBottomSectionNotesStyles","_templateObject2","props","getColor","theme","CardBottomSectionAuthorStyles","_templateObject3","$disabled","concat","CardBottomSectionDivider","_templateObject4","CardBottomSectionNoteLeftStyles","_templateObject5","CardBottomSectionNoteRightStyles","_templateObject6","CardBottomSectionButtonRowContainerStyles","_templateObject7","CardBottomSectionContainer","_templateObject8","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","disabled","elRefs","setElRefs","useState","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","children","size","Small","type","variant","Normal","value","max","color","textStyle","Bold","x","index","shape","action","e","onClick","icon","propTypes","_pt","number","string","node","arrayOf","isRequired","func","bool"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n COLORS,\r\n ComponentTextStyle,\r\n ComponentXXS,\r\n LinearProgress,\r\n LinearProgressType,\r\n LinearProgressVariant,\r\n Size\r\n} from '../../index';\r\nimport {IconButton} from '../../Button';\r\n\r\nexport interface ActionItem {\r\n icon: React.ReactNode;\r\n onClick: () => void;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n /** Optional. Current progress level shown in the progress bar. */\r\n progressLevel?: number;\r\n /** Optional. Maximum level of progress in the progress bar. */\r\n progressMax?: number;\r\n /** Optional. Type of the progress bar. */\r\n progressType?: LinearProgressType;\r\n\r\n /** Optional. Note text shown on the left side of the section. */\r\n noteLeft?: string;\r\n /** Optional. Note icon shown on the left side of the section. */\r\n noteLeftIcon?: React.ReactNode;\r\n /** Optional. Note text shown on the right side of the section. */\r\n noteRight?: string;\r\n /** Optional. Note icon shown on the right side of the section. */\r\n noteRightIcon?: React.ReactNode;\r\n\r\n /** Author name shown at the bottom-left part of the section. */\r\n authorName?: string;\r\n /** Array of actions shown on the bottom-right corner of the section. */\r\n actions?: ActionItem[];\r\n /** Logo shown on the right side of the section, in front of AuthorName. */\r\n logo?: React.ReactNode;\r\n /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n disabled?: boolean;\r\n}\r\n\r\nexport const CardBottomSectionProgressStyles = styled.div`\r\n padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = styled.div`\r\n height: 48px;\r\n position: relative;\r\n color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n`;\r\n\r\nexport const CardBottomSectionAuthorStyles = styled.div<{ $disabled?: boolean }>`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n height: 48px;\r\n\r\n div:first-child {\r\n flex-grow: 2;\r\n }\r\n\r\n svg, img {\r\n width: 80px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n\r\n ${props => props.$disabled ? `\r\n color: ${COLORS.getColor('neutral_300', props.theme)};\r\n svg, img {\r\n filter: grayscale(100%);\r\n }\r\n \r\n ` : ''}\r\n`;\r\n\r\nexport const CardBottomSectionDivider = styled.div`\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n border-top-style: solid;\r\n width: 100%;\r\n`;\r\n\r\nexport const CardBottomSectionNoteLeftStyles = styled.div`\r\n position: absolute;\r\n left: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionNoteRightStyles = styled.div`\r\n position: absolute;\r\n right: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionButtonRowContainerStyles = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n align-items: center;\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n border-top-style: solid;\r\n\r\n button:last-child {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n button:not(:last-child) {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n padding: 0px 16px 8px 16px;\r\n width: calc(100% - 32px);\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n progressLevel,\r\n progressMax,\r\n progressType = LinearProgressType.Line,\r\n noteLeft,\r\n noteLeftIcon,\r\n noteRight,\r\n noteRightIcon,\r\n authorName,\r\n logo,\r\n actions,\r\n disabled\r\n }: CardBottomSectionProps,\r\n ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n const theme = useTheme();\r\n const length = actions?.length || 0;\r\n\r\n React.useEffect(() => {\r\n setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n }, [length]);\r\n\r\n React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\r\n\r\n return (\r\n <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n {haveAtLeastSomething && <CardBottomSectionDivider/>}\r\n {progressLevel != undefined && <CardBottomSectionProgressStyles>\r\n <LinearProgress size={Size.Small}\r\n type={progressType}\r\n variant={LinearProgressVariant.Normal}\r\n value={progressLevel}\r\n max={progressMax ?? progressLevel}/>\r\n </CardBottomSectionProgressStyles>}\r\n\r\n {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardBottomSectionNotesStyles>\r\n {(noteLeft || noteLeftIcon) && (\r\n <CardBottomSectionNoteLeftStyles>\r\n {noteLeftIcon}\r\n <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n </CardBottomSectionNoteLeftStyles>\r\n )}\r\n {(noteRight || noteRightIcon) && (\r\n <CardBottomSectionNoteRightStyles>\r\n {noteRightIcon}\r\n <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n </CardBottomSectionNoteRightStyles>\r\n )}\r\n </CardBottomSectionNotesStyles>}\r\n\r\n {(authorName || logo) && <CardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n <ComponentXXS>{authorName}</ComponentXXS>\r\n {logo}\r\n </CardBottomSectionAuthorStyles>}\r\n\r\n {actions && <CardBottomSectionButtonRowContainerStyles>\r\n {actions.map((x, index) => (\r\n <IconButton ref={elRefs[index]}\r\n key={index}\r\n disabled={disabled}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n action={(e) => {\r\n x.onClick();\r\n }}>\r\n {x.icon}\r\n </IconButton>\r\n ))}\r\n </CardBottomSectionButtonRowContainerStyles>}\r\n </CardBottomSectionContainer>\r\n );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"CardBottomSection.js","names":["React","styled","useTheme","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","Button","IconButton","jsx","_jsx","jsxs","_jsxs","CardBottomSectionProgressStyles","div","_templateObject","_taggedTemplateLiteral","CardBottomSectionNotesStyles","_templateObject2","props","getColor","theme","CardBottomSectionAuthorStyles","_templateObject3","$disabled","concat","CardBottomSectionDivider","_templateObject4","CardBottomSectionNoteLeftStyles","_templateObject5","CardBottomSectionNoteRightStyles","_templateObject6","CardBottomSectionButtonRowContainerStyles","_templateObject7","CardBottomSectionContainer","_templateObject8","LeftItemContainer","_templateObject9","RightItemContainer","_templateObject10","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","leftButton","authorName","logo","actions","disabled","elRefs","setElRefs","useState","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","renderLeftButton","buttonText","onClick","rest","_objectWithoutProperties","_excluded","_objectSpread","className","size","XSmall","XXSmall","includes","Small","Large","Medium","e","stopPropagation","children","type","variant","Normal","value","max","color","textStyle","Bold","x","index","_x$variant","shape","action","icon","propTypes","_pt","number","string","node","arrayOf","oneOf","isRequired","func","bool"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n COLORS,\r\n ComponentTextStyle,\r\n ComponentXXS,\r\n LinearProgress,\r\n LinearProgressType,\r\n LinearProgressVariant,\r\n Size,\r\n} from '../../index';\r\nimport { Button, ButtonProps, IconButton } from '../../Button';\r\n\r\nexport interface ActionItem {\r\n /** Optional. Variant of the action button, defaults to 'secondary'. */\r\n variant?: 'primary' | 'secondary';\r\n /** Icon to be used in the icon button. */\r\n icon: React.ReactNode;\r\n /** Click handler for the action button. */\r\n onClick: () => void;\r\n}\r\n\r\nexport type CardStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\r\n buttonText: string;\r\n size?: Size.Small | Size.Medium | Size.Large;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n /** Optional. Current progress level shown in the progress bar. */\r\n progressLevel?: number;\r\n /** Optional. Maximum level of progress in the progress bar. */\r\n progressMax?: number;\r\n /** Optional. Type of the progress bar. */\r\n progressType?: LinearProgressType;\r\n\r\n /** Optional. Note text shown on the left side of the section. */\r\n noteLeft?: string;\r\n /** Optional. Note icon shown on the left side of the section. */\r\n noteLeftIcon?: React.ReactNode;\r\n /** Optional. Note text shown on the right side of the section. */\r\n noteRight?: string;\r\n /** Optional. Note icon shown on the right side of the section. */\r\n noteRightIcon?: React.ReactNode;\r\n\r\n /** Optional. Note icon/Hyperlink/button shown on the left side of the section. */\r\n leftButton?: CardStandardButton;\r\n\r\n /** Author name shown at the bottom-left part of the section. */\r\n authorName?: string;\r\n /** Array of actions shown on the bottom-right corner of the section. */\r\n actions?: ActionItem[];\r\n /** Logo shown on the right side of the section, in front of AuthorName. */\r\n logo?: React.ReactNode;\r\n /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n disabled?: boolean;\r\n}\r\n\r\nexport const CardBottomSectionProgressStyles = styled.div`\r\n padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = styled.div`\r\n height: 48px;\r\n position: relative;\r\n color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n`;\r\n\r\nexport const CardBottomSectionAuthorStyles = styled.div<{ $disabled?: boolean }>`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n height: 48px;\r\n\r\n div:first-child {\r\n flex-grow: 2;\r\n }\r\n\r\n svg, img {\r\n width: 80px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n\r\n ${props => props.$disabled ? `\r\n color: ${COLORS.getColor('neutral_300', props.theme)};\r\n svg, img {\r\n filter: grayscale(100%);\r\n }\r\n \r\n ` : ''}\r\n`;\r\n\r\nexport const CardBottomSectionDivider = styled.div`\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n border-top-style: solid;\r\n width: 100%;\r\n`;\r\n\r\nexport const CardBottomSectionNoteLeftStyles = styled.div`\r\n position: absolute;\r\n left: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionNoteRightStyles = styled.div`\r\n position: absolute;\r\n right: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionButtonRowContainerStyles = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n align-items: center;\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n border-top-style: solid;\r\n\r\n button:last-child {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n .card-bottom-section-action-button {\r\n z-index: 2000;\r\n }\r\n\r\n button:not(:last-child) {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n padding: 0px 16px 8px 16px;\r\n width: calc(100% - 32px);\r\n`;\r\n\r\nconst LeftItemContainer = styled.div`\r\n flex: 1\r\n`;\r\n\r\nconst RightItemContainer = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n progressLevel,\r\n progressMax,\r\n progressType = LinearProgressType.Line,\r\n noteLeft,\r\n noteLeftIcon,\r\n noteRight,\r\n noteRightIcon,\r\n leftButton,\r\n authorName,\r\n logo,\r\n actions,\r\n disabled\r\n}: CardBottomSectionProps,\r\n ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n const theme = useTheme();\r\n const length = actions?.length || 0;\r\n\r\n React.useEffect(() => {\r\n setElRefs(Array((length || 0) + (leftButton ? 1 : 0)).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n }, [length, leftButton]);\r\n\r\n React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName || leftButton;\r\n\r\n const renderLeftButton = () => {\r\n if (leftButton){\r\n const {buttonText, onClick, ...rest} = leftButton;\r\n return (<Button className=\"card-bottom-section-action-button\"\r\n ref={elRefs[0]}\r\n size={ leftButton.size && [Size.XSmall, Size.XSmall, Size.XXSmall].includes(leftButton.size) ? Size.Small: \r\n leftButton.size == Size.Large ? Size.Large : Size.Medium}\r\n {...rest}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n onClick && onClick(e);\r\n }}>\r\n {buttonText}\r\n </Button>)\r\n }\r\n}\r\n\r\n return (\r\n <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n {haveAtLeastSomething && <CardBottomSectionDivider/>}\r\n {progressLevel != undefined && <CardBottomSectionProgressStyles>\r\n <LinearProgress size={Size.Small}\r\n type={progressType}\r\n variant={LinearProgressVariant.Normal}\r\n value={progressLevel}\r\n max={progressMax ?? progressLevel}/>\r\n </CardBottomSectionProgressStyles>}\r\n\r\n {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardBottomSectionNotesStyles>\r\n {(noteLeft || noteLeftIcon) && (\r\n <CardBottomSectionNoteLeftStyles>\r\n {noteLeftIcon}\r\n <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n </CardBottomSectionNoteLeftStyles>\r\n )}\r\n {(noteRight || noteRightIcon) && (\r\n <CardBottomSectionNoteRightStyles>\r\n {noteRightIcon}\r\n <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n </CardBottomSectionNoteRightStyles>\r\n )}\r\n </CardBottomSectionNotesStyles>}\r\n\r\n {(authorName || logo) && <CardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n <ComponentXXS>{authorName}</ComponentXXS>\r\n {logo}\r\n </CardBottomSectionAuthorStyles>}\r\n\r\n {(actions || leftButton) && <CardBottomSectionButtonRowContainerStyles>\r\n <LeftItemContainer>\r\n {leftButton && renderLeftButton()}\r\n </LeftItemContainer>\r\n\r\n { actions && <RightItemContainer>{actions.map((x, index) => (\r\n <IconButton ref={elRefs[index + (leftButton ? 1 : 0)]}\r\n className=\"card-bottom-section-action-button\"\r\n key={index}\r\n z-index={2000}\r\n disabled={disabled}\r\n variant={x.variant ?? \"secondary\"}\r\n shape=\"circular\"\r\n action={(e) => {\r\n x.onClick();\r\n }}>\r\n {x.icon}\r\n </IconButton>\r\n ))}\r\n </RightItemContainer>\r\n }\r\n </CardBottomSectionButtonRowContainerStyles>}\r\n </CardBottomSectionContainer>\r\n );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,IAAIC,QAAQ,QAAQ,mBAAmB;AACpD,SACEC,MAAM,EACNC,kBAAkB,EAClBC,YAAY,EACZC,cAAc,EACdC,kBAAkB,EAClBC,qBAAqB,EACrBC,IAAI,QACC,aAAa;AACpB,SAASC,MAAM,EAAeC,UAAU,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AA8C/D,OAAO,MAAMC,+BAA+B,GAAGf,MAAM,CAACgB,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,6BAExD;AAED,OAAO,MAAMC,4BAA4B,GAAGnB,MAAM,CAACgB,GAAG,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA,qIAG3CG,KAAK,IAAInB,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,CAI9D;AAED,OAAO,MAAMC,6BAA6B,GAAGxB,MAAM,CAACgB,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAP,sBAAA,sOAgBnDG,KAAK,IAAIA,KAAK,CAACK,SAAS,mBAAAC,MAAA,CACfzB,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,0EAKlD,EAAE,CACP;AAED,OAAO,MAAMK,wBAAwB,GAAG5B,MAAM,CAACgB,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAX,sBAAA,sGAE5BG,KAAK,IAAInB,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,CAGzE;AAED,OAAO,MAAMO,+BAA+B,GAAG9B,MAAM,CAACgB,GAAG,CAAAe,gBAAA,KAAAA,gBAAA,GAAAb,sBAAA,iMAYxD;AAED,OAAO,MAAMc,gCAAgC,GAAGhC,MAAM,CAACgB,GAAG,CAAAiB,gBAAA,KAAAA,gBAAA,GAAAf,sBAAA,kMAYzD;AAED,OAAO,MAAMgB,yCAAyC,GAAGlC,MAAM,CAACgB,GAAG,CAAAmB,gBAAA,KAAAA,gBAAA,GAAAjB,sBAAA,yZAM7CG,KAAK,IAAInB,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,EAgB7DF,KAAK,IAAInB,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,CAEhE;AAED,OAAO,MAAMa,0BAA0B,GAAGpC,MAAM,CAACgB,GAAG,CAAAqB,gBAAA,KAAAA,gBAAA,GAAAnB,sBAAA,sEAGnD;AAED,MAAMoB,iBAAiB,GAAGtC,MAAM,CAACgB,GAAG,CAAAuB,gBAAA,KAAAA,gBAAA,GAAArB,sBAAA,qBAEnC;AAED,MAAMsB,kBAAkB,GAAGxC,MAAM,CAACgB,GAAG,CAAAyB,iBAAA,KAAAA,iBAAA,GAAAvB,sBAAA,mGAI1BG,KAAK,IAAInB,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,CAC9D;AAED,MAAMmB,iBAAiB,gBAAG3C,KAAK,CAAC4C,UAAU,CAAC,CAAAC,IAAA,EAczCC,GAAoD,KAAK;EAAA,IAdf;IAC1CC,aAAa;IACbC,WAAW;IACXC,YAAY,GAAG1C,kBAAkB,CAAC2C,IAAI;IACtCC,QAAQ;IACRC,YAAY;IACZC,SAAS;IACTC,aAAa;IACbC,UAAU;IACVC,UAAU;IACVC,IAAI;IACJC,OAAO;IACPC;EACsB,CAAC,GAAAd,IAAA;EAGvB,MAAM,CAACe,MAAM,EAAEC,SAAS,CAAC,GAAG7D,KAAK,CAAC8D,QAAQ,CAAuC,EAAE,CAAC;EACpF,MAAMtC,KAAK,GAAGtB,QAAQ,CAAC,CAAC;EACxB,MAAM6D,MAAM,GAAG,CAAAL,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEK,MAAM,KAAI,CAAC;EAEnC/D,KAAK,CAACgE,SAAS,CAAC,MAAM;IACpBH,SAAS,CAACI,KAAK,CAAC,CAACF,MAAM,IAAI,CAAC,KAAKR,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAACW,IAAI,CAAC,IAAI,CAAC,CAACC,GAAG,CAAC,mBAAMnE,KAAK,CAACoE,SAAS,CAAoB,CAAC,CAAC,CAAC;EACnH,CAAC,EAAE,CAACL,MAAM,EAAER,UAAU,CAAC,CAAC;EAExBvD,KAAK,CAACqE,mBAAmB,CAACvB,GAAG,EAAE,MAAMc,MAAM,EAAE,CAACA,MAAM,CAAC,CAAC;EAEtD,MAAMU,oBAAoB,GAAGvB,aAAa,IAAIwB,SAAS,IAAIpB,QAAQ,IAAIC,YAAY,IAAIC,SAAS,IAAIC,aAAa,IAAIE,UAAU,IAAID,UAAU;EAE7I,MAAMiB,gBAAgB,GAAGA,CAAA,KAAM;IAC7B,IAAIjB,UAAU,EAAC;MACb,MAAM;UAACkB,UAAU;UAAEC;QAAgB,CAAC,GAAGnB,UAAU;QAAlBoB,IAAI,GAAAC,wBAAA,CAAIrB,UAAU,EAAAsB,SAAA;MACjD,oBAAQhE,IAAA,CAACH,MAAM,EAAAoE,aAAA,CAAAA,aAAA;QAACC,SAAS,EAAC,mCAAmC;QAC3DjC,GAAG,EAAEc,MAAM,CAAC,CAAC,CAAE;QACfoB,IAAI,EAAGzB,UAAU,CAACyB,IAAI,IAAI,CAACvE,IAAI,CAACwE,MAAM,EAAExE,IAAI,CAACwE,MAAM,EAAExE,IAAI,CAACyE,OAAO,CAAC,CAACC,QAAQ,CAAC5B,UAAU,CAACyB,IAAI,CAAC,GAAGvE,IAAI,CAAC2E,KAAK,GACvG7B,UAAU,CAACyB,IAAI,IAAIvE,IAAI,CAAC4E,KAAK,GAAG5E,IAAI,CAAC4E,KAAK,GAAG5E,IAAI,CAAC6E;MAAO,GACvDX,IAAI;QACRD,OAAO,EAAGa,CAAC,IAAK;UACdA,CAAC,CAACC,eAAe,CAAC,CAAC;UACnBd,OAAO,IAAIA,OAAO,CAACa,CAAC,CAAC;QACvB,CAAE;QAAAE,QAAA,EACDhB;MAAU,EACL,CAAC;IACX;EACJ,CAAC;EAEC,oBACE1D,KAAA,CAACsB,0BAA0B;IAAC,eAAa,oBAAqB;IAAAoD,QAAA,GAC3DnB,oBAAoB,iBAAIzD,IAAA,CAACgB,wBAAwB,IAAC,CAAC,EACnDkB,aAAa,IAAIwB,SAAS,iBAAI1D,IAAA,CAACG,+BAA+B;MAAAyE,QAAA,eAC7D5E,IAAA,CAACP,cAAc;QAAC0E,IAAI,EAAEvE,IAAI,CAAC2E,KAAM;QAC/BM,IAAI,EAAEzC,YAAa;QACnB0C,OAAO,EAAEnF,qBAAqB,CAACoF,MAAO;QACtCC,KAAK,EAAE9C,aAAc;QACrB+C,GAAG,EAAE9C,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAID;MAAc,CAAC;IAAC,CACP,CAAC,EAEjC,CAACI,QAAQ,IAAIC,YAAY,IAAIC,SAAS,IAAIC,aAAa,kBAAKvC,KAAA,CAACK,4BAA4B;MAAAqE,QAAA,GACvF,CAACtC,QAAQ,IAAIC,YAAY,kBACxBrC,KAAA,CAACgB,+BAA+B;QAAA0D,QAAA,GAC7BrC,YAAY,eACbvC,IAAA,CAACR,YAAY;UAAC0F,KAAK,EAAE5F,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAEC,KAAK,CAAE;UAACwE,SAAS,EAAE5F,kBAAkB,CAAC6F,IAAK;UAAAR,QAAA,EAAEtC;QAAQ,CAAe,CAAC;MAAA,CAC1F,CAClC,EACA,CAACE,SAAS,IAAIC,aAAa,kBAC1BvC,KAAA,CAACkB,gCAAgC;QAAAwD,QAAA,GAC9BnC,aAAa,eACdzC,IAAA,CAACR,YAAY;UAAC0F,KAAK,EAAE5F,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAEC,KAAK,CAAE;UAACwE,SAAS,EAAE5F,kBAAkB,CAAC6F,IAAK;UAAAR,QAAA,EAAEpC;QAAS,CAAe,CAAC;MAAA,CAC1F,CACnC;IAAA,CAC2B,CAAC,EAE9B,CAACG,UAAU,IAAIC,IAAI,kBAAK1C,KAAA,CAACU,6BAA6B;MAACE,SAAS,EAAEgC,QAAS;MAAC,eAAa,2BAA4B;MAAA8B,QAAA,gBACpH5E,IAAA,CAACR,YAAY;QAAAoF,QAAA,EAAEjC;MAAU,CAAe,CAAC,EACxCC,IAAI;IAAA,CACwB,CAAC,EAE/B,CAACC,OAAO,IAAIH,UAAU,kBAAKxC,KAAA,CAACoB,yCAAyC;MAAAsD,QAAA,gBACpE5E,IAAA,CAAC0B,iBAAiB;QAAAkD,QAAA,EACflC,UAAU,IAAIiB,gBAAgB,CAAC;MAAC,CAClB,CAAC,EAEhBd,OAAO,iBAAI7C,IAAA,CAAC4B,kBAAkB;QAAAgD,QAAA,EAAE/B,OAAO,CAACS,GAAG,CAAC,CAAC+B,CAAC,EAAEC,KAAK;UAAA,IAAAC,UAAA;UAAA,oBACnDvF,IAAA,CAACF,UAAU;YAACmC,GAAG,EAAEc,MAAM,CAACuC,KAAK,IAAI5C,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC,CAAE;YACpDwB,SAAS,EAAC,mCAAmC;YAE7C,WAAS,IAAK;YACdpB,QAAQ,EAAEA,QAAS;YACnBgC,OAAO,GAAAS,UAAA,GAAEF,CAAC,CAACP,OAAO,cAAAS,UAAA,cAAAA,UAAA,GAAI,WAAY;YAClCC,KAAK,EAAC,UAAU;YAChBC,MAAM,EAAGf,CAAC,IAAK;cACbW,CAAC,CAACxB,OAAO,CAAC,CAAC;YACb,CAAE;YAAAe,QAAA,EACDS,CAAC,CAACK;UAAI,GARFJ,KASK,CAAC;QAAA,CACd;MAAC,CACkB,CAAC;IAAA,CAEkB,CAAC;EAAA,CAClB,CAAC;AAEjC,CAAC,CAAC;AAACxD,iBAAA,CAAA6D,SAAA;EAnPDzD,aAAa,EAAA0D,GAAA,CAAAC,MAAA;EAEb1D,WAAW,EAAAyD,GAAA,CAAAC,MAAA;EAKXvD,QAAQ,EAAAsD,GAAA,CAAAE,MAAA;EAERvD,YAAY,EAAAqD,GAAA,CAAAG,IAAA;EAEZvD,SAAS,EAAAoD,GAAA,CAAAE,MAAA;EAETrD,aAAa,EAAAmD,GAAA,CAAAG,IAAA;EAMbpD,UAAU,EAAAiD,GAAA,CAAAE,MAAA;EAEVjD,OAAO,EAAA+C,GAAA,CAAAI,OAAA,CAAAJ,GAAA,CAAAJ,KAAA;IAnCPV,OAAO,EAAAc,GAAA,CAAAK,KAAA,EAAG,SAAS,EAAG,WAAW;IAEjCP,IAAI,EAAAE,GAAA,CAAAG,IAAA,CAAAG,UAAA;IAEJrC,OAAO,EAAA+B,GAAA,CAAAO,IAAA,CAAAD;EAAA;EAiCPtD,IAAI,EAAAgD,GAAA,CAAAG,IAAA;EAEJjD,QAAQ,EAAA8C,GAAA,CAAAQ;AAAA;AA4NV,eAAetE,iBAAiB","ignoreList":[]}
package/dist/Paginator/Paginator.cjs CHANGED
@@ -35,7 +35,7 @@ const Step = _ref => {
35
35
  } = _ref;
36
36
  const navigateHook = (0, _reactRouter.useNavigate)();
37
37
  const handleButtonClick = () => {
38
- onPageChange && !onPageChange(page) && navigateHook(target);
38
+ if (!onPageChange || onPageChange && !onPageChange(page)) navigateHook(target);
39
39
  };
40
40
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
41
41
  id: id,
package/dist/Paginator/Paginator.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Paginator.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_reactRouterDom","_styles","_icons","_reactRouter","_Button","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Container","styled","nav","_taggedTemplateLiteral2","BREAKPOINTS","MEDIUM","Items","ul","Item","li","props","ComponentMStyling","ComponentTextStyle","Regular","COLORS","getColor","theme","focusStyles","Z_INDEXES","hover","active","Dots","ItemContent","Step","_ref","up","target","disabled","page","onPageChange","id","navigateHook","useNavigate","handleButtonClick","jsx","IconButton","action","event","variant","shape","children","SystemIcons","ChevronRight","ChevronLeft","Paginator","_ref2","pageCount","currentPage","baseUrl","pages","from","to","push","jsxs","concat","findIndex","item","NavLink","onClick","preventDefault","className","map","propTypes","_propTypes","number","isRequired","string","func","_default","exports"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {NavLink} from 'react-router-dom';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {SystemIcons} from '../icons';\r\nimport {ComponentMStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport { useNavigate } from 'react-router';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Container = styled.nav`\r\n margin: 20px 0;\r\n display: flex;\r\n justify-content: center;\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n width: 75%;\r\n }\r\n`;\r\n\r\nconst Items = styled.ul`\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n display: flex;\r\n`;\r\n\r\nconst Item = styled.li`\r\n width: 48px;\r\n height: 48px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n & > * {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 100%;\r\n text-decoration: none;\r\n\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n &:focus,\r\n &:focus-within {\r\n ${focusStyles}\r\n }\r\n }\r\n & > a:hover {\r\n z-index: ${Z_INDEXES.hover};\r\n color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n }\r\n & > a:active {\r\n z-index: ${Z_INDEXES.active};\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n }\r\n & > a.active {\r\n z-index: ${Z_INDEXES.active};\r\n color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n cursor: default;\r\n &:hover {\r\n color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n }\r\n &:active {\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n }\r\n }\r\n`;\r\n\r\nconst Dots = styled(Item)`\r\n cursor: not-allowed;\r\n &:after{\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n content: '...';\r\n }\r\n`;\r\n\r\nconst ItemContent = styled('div')`\r\n text-align:center;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n \r\n &.active:after{\r\n content: '';\r\n position: absolute;\r\n bottom: 4px;\r\n width: 32px;\r\n border-radius: 4px;\r\n height: 4px;\r\n background-color: ${props => COLORS.getColor('primary_500', props.theme)}\r\n }\r\n &.active:hover:after{\r\n background-color: ${props => COLORS.getColor('primary_700', props.theme)}\r\n }\r\n &.active:active:after{\r\n background-color: ${props => COLORS.getColor('primary_800', props.theme)}\r\n }\r\n`\r\n\r\nexport interface PaginatorProps {\r\n /**\r\n * Required. The total number of pages.\r\n */\r\n pageCount: number;\r\n\r\n /**\r\n * Required. The current active page.\r\n */\r\n currentPage: number;\r\n\r\n /**\r\n * Required. The base URL to which the page number will be appended.\r\n */\r\n baseUrl: string;\r\n\r\n /**\r\n * Optional. A callback function that will be called when the page changes.\r\n * It receives the new page number as its argument.\r\n * If the function returns false, the page change will be prevented.\r\n */\r\n onPageChange?: (page: number) => boolean | void;\r\n};\r\n\r\nconst Step = ({\r\n up = true,\r\n target = '',\r\n disabled = false,\r\n page,\r\n onPageChange,\r\n id,\r\n}: {\r\n up: boolean;\r\n target: string;\r\n disabled: boolean;\r\n page: number;\r\n onPageChange?: (page: number) => void | boolean;\r\n id?: string;\r\n}) => {\r\n const navigateHook = useNavigate();\r\n\r\n const handleButtonClick = () => {\r\n onPageChange && !onPageChange(page) && navigateHook(target);\r\n }\r\n\r\n return (\r\n <IconButton id={id}\r\n action={event => handleButtonClick()}\r\n variant={'secondary'}\r\n shape={'circular'}\r\n disabled={disabled}>\r\n {up ? <SystemIcons.ChevronRight/> : <SystemIcons.ChevronLeft/>}\r\n </IconButton>\r\n )\r\n};\r\n\r\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\r\n const pages = [];\r\n let from = 2;\r\n let to = 4;\r\n if (pageCount === 0) return null;\r\n\r\n if (pageCount > 1) {\r\n if (currentPage >= 4 && currentPage <= pageCount - 2) {\r\n from = currentPage - 1;\r\n to = currentPage + 1;\r\n } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\r\n from = pageCount - 3;\r\n to = pageCount - 1;\r\n }\r\n if (to > pageCount) {\r\n to = pageCount;\r\n }\r\n for (let i = from; i <= to; i += 1) {\r\n pages.push(i);\r\n }\r\n }\r\n\r\n return (\r\n <Container>\r\n <Items>\r\n <Step up={false}\r\n target={`${baseUrl}/${currentPage - 1}`}\r\n page={currentPage - 1}\r\n disabled={currentPage === 1}\r\n onPageChange={onPageChange}\r\n id=\"paginator-left\"/>\r\n {pages.findIndex(item => item === 1) === -1 && (\r\n <Item>\r\n <NavLink\r\n to={`${baseUrl}/1`}\r\n onClick={(e) => {\r\n onPageChange && onPageChange(1) && e.preventDefault();\r\n }}>\r\n <ItemContent className={currentPage === 1 ? 'active' : ''}>\r\n <span>1</span>\r\n </ItemContent>\r\n </NavLink>\r\n </Item>\r\n )}\r\n {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\r\n <Dots/>\r\n )}\r\n {pages.map(page => (\r\n <Item key={page}>\r\n <NavLink\r\n to={`${baseUrl}/${page}`}\r\n onClick={(e) => {\r\n onPageChange && onPageChange(page) && e.preventDefault();\r\n }}>\r\n <ItemContent className={currentPage === page ? 'active' : ''}>\r\n <span>{page}</span>\r\n </ItemContent>\r\n </NavLink>\r\n </Item>\r\n ))}\r\n {pageCount > 5 && currentPage <= pageCount - 3 && (\r\n <Dots/>\r\n )}\r\n {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\r\n <Item>\r\n <NavLink\r\n to={`${baseUrl}/${pageCount}`}\r\n onClick={(e) => {\r\n onPageChange && onPageChange(pageCount) && e.preventDefault();\r\n }}>\r\n <ItemContent className={currentPage === pageCount ? 'active' : ''}>\r\n <span>{pageCount}</span>\r\n </ItemContent>\r\n </NavLink>\r\n </Item>\r\n )}\r\n <Step up\r\n target={`${baseUrl}/${currentPage + 1}`}\r\n page={currentPage + 1}\r\n disabled={currentPage === pageCount}\r\n onPageChange={onPageChange}\r\n id=\"paginator-right\"/>\r\n </Items>\r\n </Container>\r\n );\r\n};\r\n\r\nexport default Paginator;\r\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Paginator.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_reactRouterDom","_styles","_icons","_reactRouter","_Button","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Container","styled","nav","_taggedTemplateLiteral2","BREAKPOINTS","MEDIUM","Items","ul","Item","li","props","ComponentMStyling","ComponentTextStyle","Regular","COLORS","getColor","theme","focusStyles","Z_INDEXES","hover","active","Dots","ItemContent","Step","_ref","up","target","disabled","page","onPageChange","id","navigateHook","useNavigate","handleButtonClick","jsx","IconButton","action","event","variant","shape","children","SystemIcons","ChevronRight","ChevronLeft","Paginator","_ref2","pageCount","currentPage","baseUrl","pages","from","to","push","jsxs","concat","findIndex","item","NavLink","onClick","preventDefault","className","map","propTypes","_propTypes","number","isRequired","string","func","_default","exports"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {NavLink} from 'react-router-dom';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {SystemIcons} from '../icons';\r\nimport {ComponentMStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport { useNavigate } from 'react-router';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Container = styled.nav`\r\n margin: 20px 0;\r\n display: flex;\r\n justify-content: center;\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n width: 75%;\r\n }\r\n`;\r\n\r\nconst Items = styled.ul`\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n display: flex;\r\n`;\r\n\r\nconst Item = styled.li`\r\n width: 48px;\r\n height: 48px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n & > * {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 100%;\r\n text-decoration: none;\r\n\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n &:focus,\r\n &:focus-within {\r\n ${focusStyles}\r\n }\r\n }\r\n & > a:hover {\r\n z-index: ${Z_INDEXES.hover};\r\n color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n }\r\n & > a:active {\r\n z-index: ${Z_INDEXES.active};\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n }\r\n & > a.active {\r\n z-index: ${Z_INDEXES.active};\r\n color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n cursor: default;\r\n &:hover {\r\n color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n }\r\n &:active {\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n }\r\n }\r\n`;\r\n\r\nconst Dots = styled(Item)`\r\n cursor: not-allowed;\r\n &:after{\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n content: '...';\r\n }\r\n`;\r\n\r\nconst ItemContent = styled('div')`\r\n text-align:center;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n \r\n &.active:after{\r\n content: '';\r\n position: absolute;\r\n bottom: 4px;\r\n width: 32px;\r\n border-radius: 4px;\r\n height: 4px;\r\n background-color: ${props => COLORS.getColor('primary_500', props.theme)}\r\n }\r\n &.active:hover:after{\r\n background-color: ${props => COLORS.getColor('primary_700', props.theme)}\r\n }\r\n &.active:active:after{\r\n background-color: ${props => COLORS.getColor('primary_800', props.theme)}\r\n }\r\n`\r\n\r\nexport interface PaginatorProps {\r\n /**\r\n * Required. The total number of pages.\r\n */\r\n pageCount: number;\r\n\r\n /**\r\n * Required. The current active page.\r\n */\r\n currentPage: number;\r\n\r\n /**\r\n * Required. The base URL to which the page number will be appended.\r\n */\r\n baseUrl: string;\r\n\r\n /**\r\n * Optional. A callback function that will be called when the page changes.\r\n * It receives the new page number as its argument.\r\n * If the function returns false, the page change will be prevented.\r\n */\r\n onPageChange?: (page: number) => boolean | void;\r\n};\r\n\r\nconst Step = ({\r\n up = true,\r\n target = '',\r\n disabled = false,\r\n page,\r\n onPageChange,\r\n id,\r\n}: {\r\n up: boolean;\r\n target: string;\r\n disabled: boolean;\r\n page: number;\r\n onPageChange?: (page: number) => void | boolean;\r\n id?: string;\r\n}) => {\r\n const navigateHook = useNavigate();\r\n\r\n const handleButtonClick = () => {\r\n if(!onPageChange || (onPageChange && !onPageChange(page)))\r\n navigateHook(target);\r\n }\r\n\r\n return (\r\n <IconButton id={id}\r\n action={event => handleButtonClick()}\r\n variant={'secondary'}\r\n shape={'circular'}\r\n disabled={disabled}>\r\n {up ? <SystemIcons.ChevronRight/> : <SystemIcons.ChevronLeft/>}\r\n </IconButton>\r\n )\r\n};\r\n\r\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\r\n const pages = [];\r\n let from = 2;\r\n let to = 4;\r\n if (pageCount === 0) return null;\r\n\r\n if (pageCount > 1) {\r\n if (currentPage >= 4 && currentPage <= pageCount - 2) {\r\n from = currentPage - 1;\r\n to = currentPage + 1;\r\n } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\r\n from = pageCount - 3;\r\n to = pageCount - 1;\r\n }\r\n if (to > pageCount) {\r\n to = pageCount;\r\n }\r\n for (let i = from; i <= to; i += 1) {\r\n pages.push(i);\r\n }\r\n }\r\n\r\n return (\r\n <Container>\r\n <Items>\r\n <Step up={false}\r\n target={`${baseUrl}/${currentPage - 1}`}\r\n page={currentPage - 1}\r\n disabled={currentPage === 1}\r\n onPageChange={onPageChange}\r\n id=\"paginator-left\"/>\r\n {pages.findIndex(item => item === 1) === -1 && (\r\n <Item>\r\n <NavLink\r\n to={`${baseUrl}/1`}\r\n onClick={(e) => {\r\n onPageChange && onPageChange(1) && e.preventDefault();\r\n }}>\r\n <ItemContent className={currentPage === 1 ? 'active' : ''}>\r\n <span>1</span>\r\n </ItemContent>\r\n </NavLink>\r\n </Item>\r\n )}\r\n {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\r\n <Dots/>\r\n )}\r\n {pages.map(page => (\r\n <Item key={page}>\r\n <NavLink\r\n to={`${baseUrl}/${page}`}\r\n onClick={(e) => {\r\n onPageChange && onPageChange(page) && e.preventDefault();\r\n }}>\r\n <ItemContent className={currentPage === page ? 'active' : ''}>\r\n <span>{page}</span>\r\n </ItemContent>\r\n </NavLink>\r\n </Item>\r\n ))}\r\n {pageCount > 5 && currentPage <= pageCount - 3 && (\r\n <Dots/>\r\n )}\r\n {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\r\n <Item>\r\n <NavLink\r\n to={`${baseUrl}/${pageCount}`}\r\n onClick={(e) => {\r\n onPageChange && onPageChange(pageCount) && e.preventDefault();\r\n }}>\r\n <ItemContent className={currentPage === pageCount ? 'active' : ''}>\r\n <span>{pageCount}</span>\r\n </ItemContent>\r\n </NavLink>\r\n </Item>\r\n )}\r\n <Step up\r\n target={`${baseUrl}/${currentPage + 1}`}\r\n page={currentPage + 1}\r\n disabled={currentPage === pageCount}\r\n onPageChange={onPageChange}\r\n id=\"paginator-right\"/>\r\n </Items>\r\n </Container>\r\n );\r\n};\r\n\r\nexport default Paginator;\r\n"],"mappings":"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","ignoreList":[]}
package/dist/Paginator/Paginator.js CHANGED
@@ -28,7 +28,7 @@ const Step = _ref => {
28
28
  } = _ref;
29
29
  const navigateHook = useNavigate();
30
30
  const handleButtonClick = () => {
31
- onPageChange && !onPageChange(page) && navigateHook(target);
31
+ if (!onPageChange || onPageChange && !onPageChange(page)) navigateHook(target);
32
32
  };
33
33
  return /*#__PURE__*/_jsx(IconButton, {
34
34
  id: id,
package/dist/Paginator/Paginator.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Paginator.js","names":["React","styled","NavLink","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","SystemIcons","ComponentMStyling","Z_INDEXES","useNavigate","IconButton","jsx","_jsx","jsxs","_jsxs","Container","nav","_templateObject","_taggedTemplateLiteral","MEDIUM","Items","ul","_templateObject2","Item","li","_templateObject3","props","Regular","getColor","theme","hover","active","Dots","_templateObject4","ItemContent","_templateObject5","Step","_ref","up","target","disabled","page","onPageChange","id","navigateHook","handleButtonClick","action","event","variant","shape","children","ChevronRight","ChevronLeft","Paginator","_ref2","pageCount","currentPage","baseUrl","pages","from","to","i","push","concat","findIndex","item","onClick","e","preventDefault","className","map","propTypes","_pt","number","isRequired","string","func"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {NavLink} from 'react-router-dom';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {SystemIcons} from '../icons';\r\nimport {ComponentMStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport { useNavigate } from 'react-router';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Container = styled.nav`\r\n margin: 20px 0;\r\n display: flex;\r\n justify-content: center;\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n width: 75%;\r\n }\r\n`;\r\n\r\nconst Items = styled.ul`\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n display: flex;\r\n`;\r\n\r\nconst Item = styled.li`\r\n width: 48px;\r\n height: 48px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n & > * {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 100%;\r\n text-decoration: none;\r\n\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n &:focus,\r\n &:focus-within {\r\n ${focusStyles}\r\n }\r\n }\r\n & > a:hover {\r\n z-index: ${Z_INDEXES.hover};\r\n color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n }\r\n & > a:active {\r\n z-index: ${Z_INDEXES.active};\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n }\r\n & > a.active {\r\n z-index: ${Z_INDEXES.active};\r\n color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n cursor: default;\r\n &:hover {\r\n color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n }\r\n &:active {\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n }\r\n }\r\n`;\r\n\r\nconst Dots = styled(Item)`\r\n cursor: not-allowed;\r\n &:after{\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n content: '...';\r\n }\r\n`;\r\n\r\nconst ItemContent = styled('div')`\r\n text-align:center;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n \r\n &.active:after{\r\n content: '';\r\n position: absolute;\r\n bottom: 4px;\r\n width: 32px;\r\n border-radius: 4px;\r\n height: 4px;\r\n background-color: ${props => COLORS.getColor('primary_500', props.theme)}\r\n }\r\n &.active:hover:after{\r\n background-color: ${props => COLORS.getColor('primary_700', props.theme)}\r\n }\r\n &.active:active:after{\r\n background-color: ${props => COLORS.getColor('primary_800', props.theme)}\r\n }\r\n`\r\n\r\nexport interface PaginatorProps {\r\n /**\r\n * Required. The total number of pages.\r\n */\r\n pageCount: number;\r\n\r\n /**\r\n * Required. The current active page.\r\n */\r\n currentPage: number;\r\n\r\n /**\r\n * Required. The base URL to which the page number will be appended.\r\n */\r\n baseUrl: string;\r\n\r\n /**\r\n * Optional. A callback function that will be called when the page changes.\r\n * It receives the new page number as its argument.\r\n * If the function returns false, the page change will be prevented.\r\n */\r\n onPageChange?: (page: number) => boolean | void;\r\n};\r\n\r\nconst Step = ({\r\n up = true,\r\n target = '',\r\n disabled = false,\r\n page,\r\n onPageChange,\r\n id,\r\n}: {\r\n up: boolean;\r\n target: string;\r\n disabled: boolean;\r\n page: number;\r\n onPageChange?: (page: number) => void | boolean;\r\n id?: string;\r\n}) => {\r\n const navigateHook = useNavigate();\r\n\r\n const handleButtonClick = () => {\r\n onPageChange && !onPageChange(page) && navigateHook(target);\r\n }\r\n\r\n return (\r\n <IconButton id={id}\r\n action={event => handleButtonClick()}\r\n variant={'secondary'}\r\n shape={'circular'}\r\n disabled={disabled}>\r\n {up ? <SystemIcons.ChevronRight/> : <SystemIcons.ChevronLeft/>}\r\n </IconButton>\r\n )\r\n};\r\n\r\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\r\n const pages = [];\r\n let from = 2;\r\n let to = 4;\r\n if (pageCount === 0) return null;\r\n\r\n if (pageCount > 1) {\r\n if (currentPage >= 4 && currentPage <= pageCount - 2) {\r\n from = currentPage - 1;\r\n to = currentPage + 1;\r\n } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\r\n from = pageCount - 3;\r\n to = pageCount - 1;\r\n }\r\n if (to > pageCount) {\r\n to = pageCount;\r\n }\r\n for (let i = from; i <= to; i += 1) {\r\n pages.push(i);\r\n }\r\n }\r\n\r\n return (\r\n <Container>\r\n <Items>\r\n <Step up={false}\r\n target={`${baseUrl}/${currentPage - 1}`}\r\n page={currentPage - 1}\r\n disabled={currentPage === 1}\r\n onPageChange={onPageChange}\r\n id=\"paginator-left\"/>\r\n {pages.findIndex(item => item === 1) === -1 && (\r\n <Item>\r\n <NavLink\r\n to={`${baseUrl}/1`}\r\n onClick={(e) => {\r\n onPageChange && onPageChange(1) && e.preventDefault();\r\n }}>\r\n <ItemContent className={currentPage === 1 ? 'active' : ''}>\r\n <span>1</span>\r\n </ItemContent>\r\n </NavLink>\r\n </Item>\r\n )}\r\n {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\r\n <Dots/>\r\n )}\r\n {pages.map(page => (\r\n <Item key={page}>\r\n <NavLink\r\n to={`${baseUrl}/${page}`}\r\n onClick={(e) => {\r\n onPageChange && onPageChange(page) && e.preventDefault();\r\n }}>\r\n <ItemContent className={currentPage === page ? 'active' : ''}>\r\n <span>{page}</span>\r\n </ItemContent>\r\n </NavLink>\r\n </Item>\r\n ))}\r\n {pageCount > 5 && currentPage <= pageCount - 3 && (\r\n <Dots/>\r\n )}\r\n {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\r\n <Item>\r\n <NavLink\r\n to={`${baseUrl}/${pageCount}`}\r\n onClick={(e) => {\r\n onPageChange && onPageChange(pageCount) && e.preventDefault();\r\n }}>\r\n <ItemContent className={currentPage === pageCount ? 'active' : ''}>\r\n <span>{pageCount}</span>\r\n </ItemContent>\r\n </NavLink>\r\n </Item>\r\n )}\r\n <Step up\r\n target={`${baseUrl}/${currentPage + 1}`}\r\n page={currentPage + 1}\r\n disabled={currentPage === pageCount}\r\n onPageChange={onPageChange}\r\n id=\"paginator-right\"/>\r\n </Items>\r\n </Container>\r\n );\r\n};\r\n\r\nexport default Paginator;\r\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Paginator.js","names":["React","styled","NavLink","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","SystemIcons","ComponentMStyling","Z_INDEXES","useNavigate","IconButton","jsx","_jsx","jsxs","_jsxs","Container","nav","_templateObject","_taggedTemplateLiteral","MEDIUM","Items","ul","_templateObject2","Item","li","_templateObject3","props","Regular","getColor","theme","hover","active","Dots","_templateObject4","ItemContent","_templateObject5","Step","_ref","up","target","disabled","page","onPageChange","id","navigateHook","handleButtonClick","action","event","variant","shape","children","ChevronRight","ChevronLeft","Paginator","_ref2","pageCount","currentPage","baseUrl","pages","from","to","i","push","concat","findIndex","item","onClick","e","preventDefault","className","map","propTypes","_pt","number","isRequired","string","func"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {NavLink} from 'react-router-dom';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {SystemIcons} from '../icons';\r\nimport {ComponentMStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport { useNavigate } from 'react-router';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Container = styled.nav`\r\n margin: 20px 0;\r\n display: flex;\r\n justify-content: center;\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n width: 75%;\r\n }\r\n`;\r\n\r\nconst Items = styled.ul`\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n display: flex;\r\n`;\r\n\r\nconst Item = styled.li`\r\n width: 48px;\r\n height: 48px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n & > * {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 100%;\r\n text-decoration: none;\r\n\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n &:focus,\r\n &:focus-within {\r\n ${focusStyles}\r\n }\r\n }\r\n & > a:hover {\r\n z-index: ${Z_INDEXES.hover};\r\n color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n }\r\n & > a:active {\r\n z-index: ${Z_INDEXES.active};\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n }\r\n & > a.active {\r\n z-index: ${Z_INDEXES.active};\r\n color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n cursor: default;\r\n &:hover {\r\n color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n }\r\n &:active {\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n }\r\n }\r\n`;\r\n\r\nconst Dots = styled(Item)`\r\n cursor: not-allowed;\r\n &:after{\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n content: '...';\r\n }\r\n`;\r\n\r\nconst ItemContent = styled('div')`\r\n text-align:center;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n \r\n &.active:after{\r\n content: '';\r\n position: absolute;\r\n bottom: 4px;\r\n width: 32px;\r\n border-radius: 4px;\r\n height: 4px;\r\n background-color: ${props => COLORS.getColor('primary_500', props.theme)}\r\n }\r\n &.active:hover:after{\r\n background-color: ${props => COLORS.getColor('primary_700', props.theme)}\r\n }\r\n &.active:active:after{\r\n background-color: ${props => COLORS.getColor('primary_800', props.theme)}\r\n }\r\n`\r\n\r\nexport interface PaginatorProps {\r\n /**\r\n * Required. The total number of pages.\r\n */\r\n pageCount: number;\r\n\r\n /**\r\n * Required. The current active page.\r\n */\r\n currentPage: number;\r\n\r\n /**\r\n * Required. The base URL to which the page number will be appended.\r\n */\r\n baseUrl: string;\r\n\r\n /**\r\n * Optional. A callback function that will be called when the page changes.\r\n * It receives the new page number as its argument.\r\n * If the function returns false, the page change will be prevented.\r\n */\r\n onPageChange?: (page: number) => boolean | void;\r\n};\r\n\r\nconst Step = ({\r\n up = true,\r\n target = '',\r\n disabled = false,\r\n page,\r\n onPageChange,\r\n id,\r\n}: {\r\n up: boolean;\r\n target: string;\r\n disabled: boolean;\r\n page: number;\r\n onPageChange?: (page: number) => void | boolean;\r\n id?: string;\r\n}) => {\r\n const navigateHook = useNavigate();\r\n\r\n const handleButtonClick = () => {\r\n if(!onPageChange || (onPageChange && !onPageChange(page)))\r\n navigateHook(target);\r\n }\r\n\r\n return (\r\n <IconButton id={id}\r\n action={event => handleButtonClick()}\r\n variant={'secondary'}\r\n shape={'circular'}\r\n disabled={disabled}>\r\n {up ? <SystemIcons.ChevronRight/> : <SystemIcons.ChevronLeft/>}\r\n </IconButton>\r\n )\r\n};\r\n\r\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\r\n const pages = [];\r\n let from = 2;\r\n let to = 4;\r\n if (pageCount === 0) return null;\r\n\r\n if (pageCount > 1) {\r\n if (currentPage >= 4 && currentPage <= pageCount - 2) {\r\n from = currentPage - 1;\r\n to = currentPage + 1;\r\n } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\r\n from = pageCount - 3;\r\n to = pageCount - 1;\r\n }\r\n if (to > pageCount) {\r\n to = pageCount;\r\n }\r\n for (let i = from; i <= to; i += 1) {\r\n pages.push(i);\r\n }\r\n }\r\n\r\n return (\r\n <Container>\r\n <Items>\r\n <Step up={false}\r\n target={`${baseUrl}/${currentPage - 1}`}\r\n page={currentPage - 1}\r\n disabled={currentPage === 1}\r\n onPageChange={onPageChange}\r\n id=\"paginator-left\"/>\r\n {pages.findIndex(item => item === 1) === -1 && (\r\n <Item>\r\n <NavLink\r\n to={`${baseUrl}/1`}\r\n onClick={(e) => {\r\n onPageChange && onPageChange(1) && e.preventDefault();\r\n }}>\r\n <ItemContent className={currentPage === 1 ? 'active' : ''}>\r\n <span>1</span>\r\n </ItemContent>\r\n </NavLink>\r\n </Item>\r\n )}\r\n {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\r\n <Dots/>\r\n )}\r\n {pages.map(page => (\r\n <Item key={page}>\r\n <NavLink\r\n to={`${baseUrl}/${page}`}\r\n onClick={(e) => {\r\n onPageChange && onPageChange(page) && e.preventDefault();\r\n }}>\r\n <ItemContent className={currentPage === page ? 'active' : ''}>\r\n <span>{page}</span>\r\n </ItemContent>\r\n </NavLink>\r\n </Item>\r\n ))}\r\n {pageCount > 5 && currentPage <= pageCount - 3 && (\r\n <Dots/>\r\n )}\r\n {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\r\n <Item>\r\n <NavLink\r\n to={`${baseUrl}/${pageCount}`}\r\n onClick={(e) => {\r\n onPageChange && onPageChange(pageCount) && e.preventDefault();\r\n }}>\r\n <ItemContent className={currentPage === pageCount ? 'active' : ''}>\r\n <span>{pageCount}</span>\r\n </ItemContent>\r\n </NavLink>\r\n </Item>\r\n )}\r\n <Step up\r\n target={`${baseUrl}/${currentPage + 1}`}\r\n page={currentPage + 1}\r\n disabled={currentPage === pageCount}\r\n onPageChange={onPageChange}\r\n id=\"paginator-right\"/>\r\n </Items>\r\n </Container>\r\n );\r\n};\r\n\r\nexport default Paginator;\r\n"],"mappings":"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","ignoreList":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "5.1.0",
3
+ "version": "5.3.0",
4
4
  "private": false,
5
5
  "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
6
6
  "contributors": [],
@@ -128,7 +128,8 @@
128
128
  "react-share": "^5.1.0",
129
129
  "regenerator-runtime": "^0.13.9",
130
130
  "storybook": "^8.1.3",
131
- "ts-jest": "^29.2.5"
131
+ "ts-jest": "^29.2.5",
132
+ "@laerdal/life-react-components": "5.1.0"
132
133
  },
133
134
  "peerDependencies": {
134
135
  "@babel/core": "^7.0.0",