@laerdal/life-react-components 1.9.8-dev.9.full → 1.9.9

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 (93) hide show
  1. package/dist/Card/{VerticalCard/Card.cjs → Card.cjs} +9 -32
  2. package/dist/Card/Card.cjs.map +1 -0
  3. package/dist/Card/{VerticalCard/Card.d.ts → Card.d.ts} +1 -2
  4. package/dist/Card/{VerticalCard/Card.js → Card.js} +8 -29
  5. package/dist/Card/Card.js.map +1 -0
  6. package/dist/Card/{VerticalCard/CardBottomSection.cjs → CardBottomSection.cjs} +25 -40
  7. package/dist/Card/CardBottomSection.cjs.map +1 -0
  8. package/dist/Card/{VerticalCard/CardBottomSection.d.ts → CardBottomSection.d.ts} +4 -4
  9. package/dist/Card/{VerticalCard/CardBottomSection.js → CardBottomSection.js} +11 -25
  10. package/dist/Card/CardBottomSection.js.map +1 -0
  11. package/dist/Card/{VerticalCard/CardMiddleSection.cjs → CardMiddleSection.cjs} +13 -13
  12. package/dist/Card/CardMiddleSection.cjs.map +1 -0
  13. package/dist/Card/{VerticalCard/CardMiddleSection.d.ts → CardMiddleSection.d.ts} +2 -2
  14. package/dist/Card/{VerticalCard/CardMiddleSection.js → CardMiddleSection.js} +2 -2
  15. package/dist/Card/CardMiddleSection.js.map +1 -0
  16. package/dist/Card/{VerticalCard/CardTopSection.cjs → CardTopSection.cjs} +12 -11
  17. package/dist/Card/CardTopSection.cjs.map +1 -0
  18. package/dist/Card/{VerticalCard/CardTopSection.d.ts → CardTopSection.d.ts} +5 -5
  19. package/dist/Card/{VerticalCard/CardTopSection.js → CardTopSection.js} +10 -9
  20. package/dist/Card/CardTopSection.js.map +1 -0
  21. package/dist/Card/index.cjs +64 -8
  22. package/dist/Card/index.cjs.map +1 -1
  23. package/dist/Card/index.d.ts +7 -2
  24. package/dist/Card/index.js +7 -2
  25. package/dist/Card/index.js.map +1 -1
  26. package/dist/Dropdown/DropdownButton.cjs +3 -3
  27. package/dist/Dropdown/DropdownButton.cjs.map +1 -1
  28. package/dist/Dropdown/DropdownButton.d.ts +1 -5
  29. package/dist/Dropdown/DropdownButton.js +4 -3
  30. package/dist/Dropdown/DropdownButton.js.map +1 -1
  31. package/dist/InputFields/NumberField.cjs +63 -139
  32. package/dist/InputFields/NumberField.cjs.map +1 -1
  33. package/dist/InputFields/NumberField.d.ts +1 -4
  34. package/dist/InputFields/NumberField.js +63 -138
  35. package/dist/InputFields/NumberField.js.map +1 -1
  36. package/dist/List/ListRow.cjs +3 -24
  37. package/dist/List/ListRow.cjs.map +1 -1
  38. package/dist/List/ListRow.d.ts +0 -3
  39. package/dist/List/ListRow.js +3 -22
  40. package/dist/List/ListRow.js.map +1 -1
  41. package/dist/Toggles/ToggleButton.cjs +2 -3
  42. package/dist/Toggles/ToggleButton.cjs.map +1 -1
  43. package/dist/Toggles/ToggleButton.d.ts +1 -1
  44. package/dist/Toggles/ToggleButton.js +2 -3
  45. package/dist/Toggles/ToggleButton.js.map +1 -1
  46. package/dist/common/ActionWithin.cjs.map +1 -1
  47. package/dist/common/ActionWithin.js.map +1 -1
  48. package/dist/index.cjs.map +1 -1
  49. package/dist/index.js.map +1 -1
  50. package/package.json +1 -1
  51. package/dist/Card/HorizontalCard/HorizontalCard.cjs +0 -97
  52. package/dist/Card/HorizontalCard/HorizontalCard.cjs.map +0 -1
  53. package/dist/Card/HorizontalCard/HorizontalCard.d.ts +0 -4
  54. package/dist/Card/HorizontalCard/HorizontalCard.js +0 -74
  55. package/dist/Card/HorizontalCard/HorizontalCard.js.map +0 -1
  56. package/dist/Card/HorizontalCard/HorizontalCardActions.cjs +0 -124
  57. package/dist/Card/HorizontalCard/HorizontalCardActions.cjs.map +0 -1
  58. package/dist/Card/HorizontalCard/HorizontalCardActions.d.ts +0 -5
  59. package/dist/Card/HorizontalCard/HorizontalCardActions.js +0 -98
  60. package/dist/Card/HorizontalCard/HorizontalCardActions.js.map +0 -1
  61. package/dist/Card/HorizontalCard/HorizontalCardBody.cjs +0 -60
  62. package/dist/Card/HorizontalCard/HorizontalCardBody.cjs.map +0 -1
  63. package/dist/Card/HorizontalCard/HorizontalCardBody.d.ts +0 -5
  64. package/dist/Card/HorizontalCard/HorizontalCardBody.js +0 -40
  65. package/dist/Card/HorizontalCard/HorizontalCardBody.js.map +0 -1
  66. package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs +0 -49
  67. package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs.map +0 -1
  68. package/dist/Card/HorizontalCard/HorizontalCardThumbnail.d.ts +0 -5
  69. package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js +0 -33
  70. package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js.map +0 -1
  71. package/dist/Card/HorizontalCard/index.cjs +0 -33
  72. package/dist/Card/HorizontalCard/index.cjs.map +0 -1
  73. package/dist/Card/HorizontalCard/index.d.ts +0 -2
  74. package/dist/Card/HorizontalCard/index.js +0 -3
  75. package/dist/Card/HorizontalCard/index.js.map +0 -1
  76. package/dist/Card/HorizontalCard/types.cjs +0 -6
  77. package/dist/Card/HorizontalCard/types.cjs.map +0 -1
  78. package/dist/Card/HorizontalCard/types.d.ts +0 -40
  79. package/dist/Card/HorizontalCard/types.js +0 -2
  80. package/dist/Card/HorizontalCard/types.js.map +0 -1
  81. package/dist/Card/VerticalCard/Card.cjs.map +0 -1
  82. package/dist/Card/VerticalCard/Card.js.map +0 -1
  83. package/dist/Card/VerticalCard/CardBottomSection.cjs.map +0 -1
  84. package/dist/Card/VerticalCard/CardBottomSection.js.map +0 -1
  85. package/dist/Card/VerticalCard/CardMiddleSection.cjs.map +0 -1
  86. package/dist/Card/VerticalCard/CardMiddleSection.js.map +0 -1
  87. package/dist/Card/VerticalCard/CardTopSection.cjs.map +0 -1
  88. package/dist/Card/VerticalCard/CardTopSection.js.map +0 -1
  89. package/dist/Card/VerticalCard/index.cjs +0 -88
  90. package/dist/Card/VerticalCard/index.cjs.map +0 -1
  91. package/dist/Card/VerticalCard/index.d.ts +0 -7
  92. package/dist/Card/VerticalCard/index.js +0 -8
  93. package/dist/Card/VerticalCard/index.js.map +0 -1
@@ -1,124 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports.HorizontalCardActions = void 0;
11
-
12
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
-
14
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
- var _react = _interopRequireWildcard(require("react"));
17
-
18
- var _Button = require("../../Button");
19
-
20
- var _Toggles = require("../../Toggles");
21
-
22
- var _Dropdown = require("../../Dropdown");
23
-
24
- var _styledComponents = _interopRequireDefault(require("styled-components"));
25
-
26
- var _jsxRuntime = require("react/jsx-runtime");
27
-
28
- var _templateObject;
29
-
30
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
31
-
32
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
33
-
34
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n"])));
35
-
36
- var HorizontalCardActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
37
- var actions = _ref.actions,
38
- disabled = _ref.disabled;
39
-
40
- var _React$useState = _react.default.useState([]),
41
- _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
42
- elRefs = _React$useState2[0],
43
- setElRefs = _React$useState2[1];
44
-
45
- var length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
46
-
47
- _react.default.useEffect(function () {
48
- setElRefs(Array(length || 0).fill(null).map(function () {
49
- return /*#__PURE__*/_react.default.createRef();
50
- }));
51
- }, [length]);
52
-
53
- (0, _react.useImperativeHandle)(ref, function () {
54
- return elRefs;
55
- }, [elRefs]);
56
-
57
- var renderAction = function renderAction(item, index) {
58
- switch (item.componentType) {
59
- case 'icon':
60
- {
61
- var _item$disabled;
62
-
63
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
64
- ref: elRefs[index],
65
- variant: 'secondary',
66
- useTransparentBackground: true,
67
- shape: 'circular',
68
- action: item.action,
69
- disabled: (_item$disabled = item.disabled) !== null && _item$disabled !== void 0 ? _item$disabled : disabled,
70
- children: item.icon
71
- }, index);
72
- }
73
-
74
- case 'toggle':
75
- {
76
- var _item$disabled2;
77
-
78
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggles.ToggleButton, {
79
- ref: elRefs[index],
80
- active: item.active,
81
- onChange: item.onChange,
82
- defaultState: item.defaultState,
83
- activeState: item.activeState,
84
- disabled: (_item$disabled2 = item.disabled) !== null && _item$disabled2 !== void 0 ? _item$disabled2 : disabled
85
- }, index);
86
- }
87
-
88
- case 'dropdown':
89
- {
90
- var _item$disabled3;
91
-
92
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownButton, {
93
- ref: elRefs[index],
94
- type: 'icon',
95
- items: item.items,
96
- itemsType: item.itemsType,
97
- onClick: item.onClick,
98
- icon: item.icon,
99
- action: item.action,
100
- actionIcon: item.actionIcon,
101
- actionLabel: item.actionLabel,
102
- actionVariant: item.actionVariant,
103
- actionLoading: item.actionLoading,
104
- multiSelect: item.multiSelect,
105
- scrollable: item.scrollable,
106
- pinTopItem: item.pinTopItem,
107
- maxHeight: item.maxHeight,
108
- disabled: (_item$disabled3 = item.disabled) !== null && _item$disabled3 !== void 0 ? _item$disabled3 : disabled
109
- }, index);
110
- }
111
- }
112
- };
113
-
114
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
115
- children: (actions === null || actions === void 0 ? void 0 : actions.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
116
- children: actions === null || actions === void 0 ? void 0 : actions.map(function (item, index) {
117
- return renderAction(item, index);
118
- })
119
- })
120
- });
121
- });
122
-
123
- exports.HorizontalCardActions = HorizontalCardActions;
124
- //# sourceMappingURL=HorizontalCardActions.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"names":["Container","styled","div","HorizontalCardActions","React","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","renderAction","item","index","componentType","action","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"mappings":"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","sourcesContent":["import React, {useImperativeHandle} from 'react';\nimport {\n HorizontalCardDropdownButton,\n HorizontalCardIconButton,\n HorizontalCardProps,\n HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n const length = actions?.length || 0;\n\n React.useEffect(() => {\n setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n }, [length]);\n\n useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton,\n index: number) => {\n switch (item.componentType) {\n case 'icon': {\n return <IconButton ref={elRefs[index]}\n key={index}\n variant={'secondary'}\n useTransparentBackground={true}\n shape={'circular'}\n action={item.action}\n disabled={item.disabled ?? disabled}>\n {item.icon}\n </IconButton>\n }\n case 'toggle': {\n return <ToggleButton ref={elRefs[index]}\n key={index}\n active={item.active}\n onChange={item.onChange}\n defaultState={item.defaultState}\n activeState={item.activeState}\n disabled={item.disabled ?? disabled}/>\n }\n case 'dropdown': {\n return <DropdownButton ref={elRefs[index]}\n key={index}\n type={'icon'}\n items={item.items}\n itemsType={item.itemsType}\n onClick={item.onClick}\n icon={item.icon}\n action={item.action}\n actionIcon={item.actionIcon}\n actionLabel={item.actionLabel}\n actionVariant={item.actionVariant}\n actionLoading={item.actionLoading}\n multiSelect={item.multiSelect}\n scrollable={item.scrollable}\n pinTopItem={item.pinTopItem}\n maxHeight={item.maxHeight}\n disabled={item.disabled ?? disabled}/>\n }\n }\n }\n\n\n return (\n <>\n {\n actions?.length &&\n <Container>\n {actions?.map((item, index) => renderAction(item, index))}\n </Container>\n }\n </>\n )\n});\n"],"file":"HorizontalCardActions.cjs"}
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
- import { HorizontalCardProps } from './types';
3
- declare type Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;
4
- export declare const HorizontalCardActions: React.ForwardRefExoticComponent<Props & React.RefAttributes<React.RefObject<HTMLButtonElement>[]>>;
5
- export {};
@@ -1,98 +0,0 @@
1
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
- import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
3
-
4
- var _templateObject;
5
-
6
- import React, { useImperativeHandle } from 'react';
7
- import { IconButton } from '../../Button';
8
- import { ToggleButton } from '../../Toggles';
9
- import { DropdownButton } from '../../Dropdown';
10
- import styled from 'styled-components';
11
- import { jsx as _jsx } from "react/jsx-runtime";
12
- import { Fragment as _Fragment } from "react/jsx-runtime";
13
- var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n"])));
14
- export var HorizontalCardActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
15
- var actions = _ref.actions,
16
- disabled = _ref.disabled;
17
-
18
- var _React$useState = React.useState([]),
19
- _React$useState2 = _slicedToArray(_React$useState, 2),
20
- elRefs = _React$useState2[0],
21
- setElRefs = _React$useState2[1];
22
-
23
- var length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
24
- React.useEffect(function () {
25
- setElRefs(Array(length || 0).fill(null).map(function () {
26
- return /*#__PURE__*/React.createRef();
27
- }));
28
- }, [length]);
29
- useImperativeHandle(ref, function () {
30
- return elRefs;
31
- }, [elRefs]);
32
-
33
- var renderAction = function renderAction(item, index) {
34
- switch (item.componentType) {
35
- case 'icon':
36
- {
37
- var _item$disabled;
38
-
39
- return /*#__PURE__*/_jsx(IconButton, {
40
- ref: elRefs[index],
41
- variant: 'secondary',
42
- useTransparentBackground: true,
43
- shape: 'circular',
44
- action: item.action,
45
- disabled: (_item$disabled = item.disabled) !== null && _item$disabled !== void 0 ? _item$disabled : disabled,
46
- children: item.icon
47
- }, index);
48
- }
49
-
50
- case 'toggle':
51
- {
52
- var _item$disabled2;
53
-
54
- return /*#__PURE__*/_jsx(ToggleButton, {
55
- ref: elRefs[index],
56
- active: item.active,
57
- onChange: item.onChange,
58
- defaultState: item.defaultState,
59
- activeState: item.activeState,
60
- disabled: (_item$disabled2 = item.disabled) !== null && _item$disabled2 !== void 0 ? _item$disabled2 : disabled
61
- }, index);
62
- }
63
-
64
- case 'dropdown':
65
- {
66
- var _item$disabled3;
67
-
68
- return /*#__PURE__*/_jsx(DropdownButton, {
69
- ref: elRefs[index],
70
- type: 'icon',
71
- items: item.items,
72
- itemsType: item.itemsType,
73
- onClick: item.onClick,
74
- icon: item.icon,
75
- action: item.action,
76
- actionIcon: item.actionIcon,
77
- actionLabel: item.actionLabel,
78
- actionVariant: item.actionVariant,
79
- actionLoading: item.actionLoading,
80
- multiSelect: item.multiSelect,
81
- scrollable: item.scrollable,
82
- pinTopItem: item.pinTopItem,
83
- maxHeight: item.maxHeight,
84
- disabled: (_item$disabled3 = item.disabled) !== null && _item$disabled3 !== void 0 ? _item$disabled3 : disabled
85
- }, index);
86
- }
87
- }
88
- };
89
-
90
- return /*#__PURE__*/_jsx(_Fragment, {
91
- children: (actions === null || actions === void 0 ? void 0 : actions.length) && /*#__PURE__*/_jsx(Container, {
92
- children: actions === null || actions === void 0 ? void 0 : actions.map(function (item, index) {
93
- return renderAction(item, index);
94
- })
95
- })
96
- });
97
- });
98
- //# sourceMappingURL=HorizontalCardActions.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"names":["React","useImperativeHandle","IconButton","ToggleButton","DropdownButton","styled","Container","div","HorizontalCardActions","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","renderAction","item","index","componentType","action","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"mappings":"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","sourcesContent":["import React, {useImperativeHandle} from 'react';\nimport {\n HorizontalCardDropdownButton,\n HorizontalCardIconButton,\n HorizontalCardProps,\n HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n const length = actions?.length || 0;\n\n React.useEffect(() => {\n setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n }, [length]);\n\n useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton,\n index: number) => {\n switch (item.componentType) {\n case 'icon': {\n return <IconButton ref={elRefs[index]}\n key={index}\n variant={'secondary'}\n useTransparentBackground={true}\n shape={'circular'}\n action={item.action}\n disabled={item.disabled ?? disabled}>\n {item.icon}\n </IconButton>\n }\n case 'toggle': {\n return <ToggleButton ref={elRefs[index]}\n key={index}\n active={item.active}\n onChange={item.onChange}\n defaultState={item.defaultState}\n activeState={item.activeState}\n disabled={item.disabled ?? disabled}/>\n }\n case 'dropdown': {\n return <DropdownButton ref={elRefs[index]}\n key={index}\n type={'icon'}\n items={item.items}\n itemsType={item.itemsType}\n onClick={item.onClick}\n icon={item.icon}\n action={item.action}\n actionIcon={item.actionIcon}\n actionLabel={item.actionLabel}\n actionVariant={item.actionVariant}\n actionLoading={item.actionLoading}\n multiSelect={item.multiSelect}\n scrollable={item.scrollable}\n pinTopItem={item.pinTopItem}\n maxHeight={item.maxHeight}\n disabled={item.disabled ?? disabled}/>\n }\n }\n }\n\n\n return (\n <>\n {\n actions?.length &&\n <Container>\n {actions?.map((item, index) => renderAction(item, index))}\n </Container>\n }\n </>\n )\n});\n"],"file":"HorizontalCardActions.js"}
@@ -1,60 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.HorizontalCardBody = void 0;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
-
12
- var _react = _interopRequireDefault(require("react"));
13
-
14
- var _styledComponents = _interopRequireDefault(require("styled-components"));
15
-
16
- var _styles = require("../../styles");
17
-
18
- var _LinearProgress = require("../../LinearProgress");
19
-
20
- var _Tag = require("../../Tag");
21
-
22
- var _jsxRuntime = require("react/jsx-runtime");
23
-
24
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
25
-
26
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 8px;\n padding: 16px;\n"])));
27
-
28
- var Title = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n .disabled & {\n color: ", ";\n }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.black), _styles.COLORS.neutral_500);
29
-
30
- var Description = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
31
-
32
- var TagsContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 4px 0;\n gap: 4px;\n"])));
33
-
34
- var HorizontalCardBody = function HorizontalCardBody(_ref) {
35
- var title = _ref.title,
36
- description = _ref.description,
37
- progress = _ref.progress,
38
- tags = _ref.tags;
39
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
40
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Title, {
41
- children: title
42
- }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(Description, {
43
- children: description
44
- }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(TagsContainer, {
45
- children: tags.map(function (tag, index) {
46
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.Tag, {
47
- label: tag.label,
48
- variant: tag.variant,
49
- icon: tag.icon
50
- }, index);
51
- })
52
- }), progress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinearProgress.LinearProgress, {
53
- value: progress.value,
54
- max: progress.max
55
- })]
56
- });
57
- };
58
-
59
- exports.HorizontalCardBody = HorizontalCardBody;
60
- //# sourceMappingURL=HorizontalCardBody.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"names":["Container","styled","div","Title","ComponentTextStyle","Bold","COLORS","black","neutral_500","Description","Regular","neutral_600","TagsContainer","HorizontalCardBody","title","description","progress","tags","map","tag","index","label","variant","icon","value","max"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,6KAAf;;AAQA,IAAMC,KAAK,GAAGF,0BAAOC,GAAV,wIACP,+BAAkBE,2BAAmBC,IAArC,EAA2CC,eAAOC,KAAlD,CADO,EAGED,eAAOE,WAHT,CAAX;;AAOA,IAAMC,WAAW,GAAGR,0BAAOC,GAAV,gGACb,gCAAmBE,2BAAmBM,OAAtC,EAA+CJ,eAAOK,WAAtD,CADa,CAAjB;;AAIA,IAAMC,aAAa,GAAGX,0BAAOC,GAAV,qLAAnB;;AAUO,IAAMW,kBAAkD,GAAG,SAArDA,kBAAqD,OAKO;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,WAGI,QAHJA,WAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,IACI,QADJA,IACI;AAEvE,sBACE,sBAAC,SAAD;AAAA,4BACE,qBAAC,KAAD;AAAA,gBAAQH;AAAR,MADF,EAEGC,WAAW,iBAAI,qBAAC,WAAD;AAAA,gBAAcA;AAAd,MAFlB,EAIIE,IAAI,iBACJ,qBAAC,aAAD;AAAA,gBAAgBA,IAAI,CAACC,GAAL,CAAS,UAACC,GAAD,EAAMC,KAAN;AAAA,4BACvB,qBAAC,QAAD;AAAiB,UAAA,KAAK,EAAED,GAAG,CAACE,KAA5B;AAAmC,UAAA,OAAO,EAAEF,GAAG,CAACG,OAAhD;AAAyD,UAAA,IAAI,EAAEH,GAAG,CAACI;AAAnE,WAAUH,KAAV,CADuB;AAAA,OAAT;AAAhB,MALJ,EASGJ,QAAQ,iBAAI,qBAAC,8BAAD;AAAgB,MAAA,KAAK,EAAEA,QAAQ,CAACQ,KAAhC;AAAuC,MAAA,GAAG,EAAER,QAAQ,CAACS;AAArD,MATf;AAAA,IADF;AAaD,CApBM","sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {LinearProgress} from '../../LinearProgress';\nimport {Tag} from '../../Tag';\n\nconst Container = styled.div`\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 8px;\n padding: 16px;\n`;\n\nconst Title = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n .disabled & {\n color: ${COLORS.neutral_500};\n }\n`;\n\nconst Description = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst TagsContainer = styled.div`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 4px 0;\n gap: 4px;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\n\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\n title,\n description,\n progress,\n tags,\n }) => {\n\n return (\n <Container>\n <Title>{title}</Title>\n {description && <Description>{description}</Description>}\n {\n tags &&\n <TagsContainer>{tags.map((tag, index) => (\n <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\n </TagsContainer>\n }\n {progress && <LinearProgress value={progress.value} max={progress.max}/>}\n </Container>\n )\n};\n"],"file":"HorizontalCardBody.cjs"}
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
- import { HorizontalCardProps } from './types';
3
- declare type Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;
4
- export declare const HorizontalCardBody: React.FunctionComponent<Props>;
5
- export {};
@@ -1,40 +0,0 @@
1
- import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
2
-
3
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
4
-
5
- import React from 'react';
6
- import styled from 'styled-components';
7
- import { COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling } from '../../styles';
8
- import { LinearProgress } from '../../LinearProgress';
9
- import { Tag } from '../../Tag';
10
- import { jsx as _jsx } from "react/jsx-runtime";
11
- import { jsxs as _jsxs } from "react/jsx-runtime";
12
- var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 8px;\n padding: 16px;\n"])));
13
- var Title = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n .disabled & {\n color: ", ";\n }\n"])), ComponentMStyling(ComponentTextStyle.Bold, COLORS.black), COLORS.neutral_500);
14
- var Description = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
15
- var TagsContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 4px 0;\n gap: 4px;\n"])));
16
- export var HorizontalCardBody = function HorizontalCardBody(_ref) {
17
- var title = _ref.title,
18
- description = _ref.description,
19
- progress = _ref.progress,
20
- tags = _ref.tags;
21
- return /*#__PURE__*/_jsxs(Container, {
22
- children: [/*#__PURE__*/_jsx(Title, {
23
- children: title
24
- }), description && /*#__PURE__*/_jsx(Description, {
25
- children: description
26
- }), tags && /*#__PURE__*/_jsx(TagsContainer, {
27
- children: tags.map(function (tag, index) {
28
- return /*#__PURE__*/_jsx(Tag, {
29
- label: tag.label,
30
- variant: tag.variant,
31
- icon: tag.icon
32
- }, index);
33
- })
34
- }), progress && /*#__PURE__*/_jsx(LinearProgress, {
35
- value: progress.value,
36
- max: progress.max
37
- })]
38
- });
39
- };
40
- //# sourceMappingURL=HorizontalCardBody.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"names":["React","styled","COLORS","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","LinearProgress","Tag","Container","div","Title","Bold","black","neutral_500","Description","Regular","neutral_600","TagsContainer","HorizontalCardBody","title","description","progress","tags","map","tag","index","label","variant","icon","value","max"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,iBAAhB,EAAmCC,kBAAnC,EAAuDC,kBAAvD,QAAgF,cAAhF;AACA,SAAQC,cAAR,QAA6B,sBAA7B;AACA,SAAQC,GAAR,QAAkB,WAAlB;;;AAEA,IAAMC,SAAS,GAAGP,MAAM,CAACQ,GAAV,+JAAf;AAQA,IAAMC,KAAK,GAAGT,MAAM,CAACQ,GAAV,0HACPN,iBAAiB,CAACC,kBAAkB,CAACO,IAApB,EAA0BT,MAAM,CAACU,KAAjC,CADV,EAGEV,MAAM,CAACW,WAHT,CAAX;AAOA,IAAMC,WAAW,GAAGb,MAAM,CAACQ,GAAV,kFACbJ,kBAAkB,CAACD,kBAAkB,CAACW,OAApB,EAA6Bb,MAAM,CAACc,WAApC,CADL,CAAjB;AAIA,IAAMC,aAAa,GAAGhB,MAAM,CAACQ,GAAV,uKAAnB;AAUA,OAAO,IAAMS,kBAAkD,GAAG,SAArDA,kBAAqD,OAKO;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,WAGI,QAHJA,WAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,IACI,QADJA,IACI;AAEvE,sBACE,MAAC,SAAD;AAAA,4BACE,KAAC,KAAD;AAAA,gBAAQH;AAAR,MADF,EAEGC,WAAW,iBAAI,KAAC,WAAD;AAAA,gBAAcA;AAAd,MAFlB,EAIIE,IAAI,iBACJ,KAAC,aAAD;AAAA,gBAAgBA,IAAI,CAACC,GAAL,CAAS,UAACC,GAAD,EAAMC,KAAN;AAAA,4BACvB,KAAC,GAAD;AAAiB,UAAA,KAAK,EAAED,GAAG,CAACE,KAA5B;AAAmC,UAAA,OAAO,EAAEF,GAAG,CAACG,OAAhD;AAAyD,UAAA,IAAI,EAAEH,GAAG,CAACI;AAAnE,WAAUH,KAAV,CADuB;AAAA,OAAT;AAAhB,MALJ,EASGJ,QAAQ,iBAAI,KAAC,cAAD;AAAgB,MAAA,KAAK,EAAEA,QAAQ,CAACQ,KAAhC;AAAuC,MAAA,GAAG,EAAER,QAAQ,CAACS;AAArD,MATf;AAAA,IADF;AAaD,CApBM","sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {LinearProgress} from '../../LinearProgress';\nimport {Tag} from '../../Tag';\n\nconst Container = styled.div`\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 8px;\n padding: 16px;\n`;\n\nconst Title = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n .disabled & {\n color: ${COLORS.neutral_500};\n }\n`;\n\nconst Description = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst TagsContainer = styled.div`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 4px 0;\n gap: 4px;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\n\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\n title,\n description,\n progress,\n tags,\n }) => {\n\n return (\n <Container>\n <Title>{title}</Title>\n {description && <Description>{description}</Description>}\n {\n tags &&\n <TagsContainer>{tags.map((tag, index) => (\n <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\n </TagsContainer>\n }\n {progress && <LinearProgress value={progress.value} max={progress.max}/>}\n </Container>\n )\n};\n"],"file":"HorizontalCardBody.js"}
@@ -1,49 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.HorizontalCardThumbnail = void 0;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
-
12
- var _react = _interopRequireDefault(require("react"));
13
-
14
- var _styledComponents = _interopRequireDefault(require("styled-components"));
15
-
16
- var _styles = require("../../styles");
17
-
18
- var _jsxRuntime = require("react/jsx-runtime");
19
-
20
- var _templateObject, _templateObject2, _templateObject3;
21
-
22
- var IconContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 80px;\n height: 80px;\n\n color: ", ";\n\n .disabled & {\n color: ", ";\n }\n"])), _styles.COLORS.black, _styles.COLORS.neutral_500);
23
-
24
- var ImageContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n overflow: hidden;\n border-bottom-left-radius: 8px;\n border-top-left-radius: 8px;\n"])));
25
-
26
- var Image = _styledComponents.default.img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n mix-blend-mode: multiply;\n object-fit: cover;\n width: 80px;\n height: 100%;\n\n .disabled & {\n filter: grayscale(100%);\n }\n"])));
27
-
28
- var HorizontalCardThumbnail = function HorizontalCardThumbnail(_ref) {
29
- var image = _ref.image,
30
- icon = _ref.icon;
31
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
32
- children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, {
33
- children: /*#__PURE__*/_react.default.cloneElement(icon, {
34
- width: 48,
35
- height: 48
36
- })
37
- }), image && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageContainer, {
38
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Image, {
39
- src: image.src,
40
- alt: image.alt,
41
- width: image.width,
42
- height: image.height
43
- })
44
- })]
45
- });
46
- };
47
-
48
- exports.HorizontalCardThumbnail = HorizontalCardThumbnail;
49
- //# sourceMappingURL=HorizontalCardThumbnail.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"names":["IconContainer","styled","div","COLORS","black","neutral_500","ImageContainer","Image","img","HorizontalCardThumbnail","image","icon","React","cloneElement","width","height","src","alt"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;;;;;AAEA,IAAMA,aAAa,GAAGC,0BAAOC,GAAV,yPAORC,eAAOC,KAPC,EAUND,eAAOE,WAVD,CAAnB;;AAeA,IAAMC,cAAc,GAAGL,0BAAOC,GAAV,gMAApB;;AAOA,IAAMK,KAAK,GAAGN,0BAAOO,GAAV,iOAAX;;AAaO,IAAMC,uBAAuD,GAAG,SAA1DA,uBAA0D,OAGO;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADJC,IACI,QADJA,IACI;AAE5E,sBACE;AAAA,eAEIA,IAAI,iBACJ,qBAAC,aAAD;AAAA,6BACGC,eAAMC,YAAN,CAAmBF,IAAnB,EAAyB;AAACG,QAAAA,KAAK,EAAE,EAAR;AAAYC,QAAAA,MAAM,EAAE;AAApB,OAAzB;AADH,MAHJ,EAQIL,KAAK,iBACL,qBAAC,cAAD;AAAA,6BACE,qBAAC,KAAD;AAAO,QAAA,GAAG,EAAEA,KAAK,CAACM,GAAlB;AAAuB,QAAA,GAAG,EAAEN,KAAK,CAACO,GAAlC;AAAuC,QAAA,KAAK,EAAEP,KAAK,CAACI,KAApD;AAA2D,QAAA,MAAM,EAAEJ,KAAK,CAACK;AAAzE;AADF,MATJ;AAAA,IADF;AAgBD,CArBM","sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS} from '../../styles';\n\nconst IconContainer = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n width: 80px;\n height: 80px;\n\n color: ${COLORS.black};\n\n .disabled & {\n color: ${COLORS.neutral_500};\n }\n`;\n\n\nconst ImageContainer = styled.div`\n height: 100%;\n overflow: hidden;\n border-bottom-left-radius: 8px;\n border-top-left-radius: 8px;\n`;\n\nconst Image = styled.img`\n mix-blend-mode: multiply;\n object-fit: cover;\n width: 80px;\n height: 100%;\n\n .disabled & {\n filter: grayscale(100%);\n }\n`;\n\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\n\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\n image,\n icon\n }) => {\n\n return (\n <>\n {\n icon &&\n <IconContainer>\n {React.cloneElement(icon, {width: 48, height: 48})}\n </IconContainer>\n }\n {\n image &&\n <ImageContainer>\n <Image src={image.src} alt={image.alt} width={image.width} height={image.height}/>\n </ImageContainer>\n }\n </>\n )\n};\n"],"file":"HorizontalCardThumbnail.cjs"}
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
- import { HorizontalCardProps } from './types';
3
- declare type Props = Pick<HorizontalCardProps, 'image' | 'icon'>;
4
- export declare const HorizontalCardThumbnail: React.FunctionComponent<Props>;
5
- export {};
@@ -1,33 +0,0 @@
1
- import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
2
-
3
- var _templateObject, _templateObject2, _templateObject3;
4
-
5
- import React from 'react';
6
- import styled from 'styled-components';
7
- import { COLORS } from '../../styles';
8
- import { jsx as _jsx } from "react/jsx-runtime";
9
- import { Fragment as _Fragment } from "react/jsx-runtime";
10
- import { jsxs as _jsxs } from "react/jsx-runtime";
11
- var IconContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 80px;\n height: 80px;\n\n color: ", ";\n\n .disabled & {\n color: ", ";\n }\n"])), COLORS.black, COLORS.neutral_500);
12
- var ImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: 100%;\n overflow: hidden;\n border-bottom-left-radius: 8px;\n border-top-left-radius: 8px;\n"])));
13
- var Image = styled.img(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n mix-blend-mode: multiply;\n object-fit: cover;\n width: 80px;\n height: 100%;\n\n .disabled & {\n filter: grayscale(100%);\n }\n"])));
14
- export var HorizontalCardThumbnail = function HorizontalCardThumbnail(_ref) {
15
- var image = _ref.image,
16
- icon = _ref.icon;
17
- return /*#__PURE__*/_jsxs(_Fragment, {
18
- children: [icon && /*#__PURE__*/_jsx(IconContainer, {
19
- children: /*#__PURE__*/React.cloneElement(icon, {
20
- width: 48,
21
- height: 48
22
- })
23
- }), image && /*#__PURE__*/_jsx(ImageContainer, {
24
- children: /*#__PURE__*/_jsx(Image, {
25
- src: image.src,
26
- alt: image.alt,
27
- width: image.width,
28
- height: image.height
29
- })
30
- })]
31
- });
32
- };
33
- //# sourceMappingURL=HorizontalCardThumbnail.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"names":["React","styled","COLORS","IconContainer","div","black","neutral_500","ImageContainer","Image","img","HorizontalCardThumbnail","image","icon","cloneElement","width","height","src","alt"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,QAAqB,cAArB;;;;AAEA,IAAMC,aAAa,GAAGF,MAAM,CAACG,GAAV,2OAORF,MAAM,CAACG,KAPC,EAUNH,MAAM,CAACI,WAVD,CAAnB;AAeA,IAAMC,cAAc,GAAGN,MAAM,CAACG,GAAV,kLAApB;AAOA,IAAMI,KAAK,GAAGP,MAAM,CAACQ,GAAV,mNAAX;AAaA,OAAO,IAAMC,uBAAuD,GAAG,SAA1DA,uBAA0D,OAGO;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADJC,IACI,QADJA,IACI;AAE5E,sBACE;AAAA,eAEIA,IAAI,iBACJ,KAAC,aAAD;AAAA,6BACGZ,KAAK,CAACa,YAAN,CAAmBD,IAAnB,EAAyB;AAACE,QAAAA,KAAK,EAAE,EAAR;AAAYC,QAAAA,MAAM,EAAE;AAApB,OAAzB;AADH,MAHJ,EAQIJ,KAAK,iBACL,KAAC,cAAD;AAAA,6BACE,KAAC,KAAD;AAAO,QAAA,GAAG,EAAEA,KAAK,CAACK,GAAlB;AAAuB,QAAA,GAAG,EAAEL,KAAK,CAACM,GAAlC;AAAuC,QAAA,KAAK,EAAEN,KAAK,CAACG,KAApD;AAA2D,QAAA,MAAM,EAAEH,KAAK,CAACI;AAAzE;AADF,MATJ;AAAA,IADF;AAgBD,CArBM","sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS} from '../../styles';\n\nconst IconContainer = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n width: 80px;\n height: 80px;\n\n color: ${COLORS.black};\n\n .disabled & {\n color: ${COLORS.neutral_500};\n }\n`;\n\n\nconst ImageContainer = styled.div`\n height: 100%;\n overflow: hidden;\n border-bottom-left-radius: 8px;\n border-top-left-radius: 8px;\n`;\n\nconst Image = styled.img`\n mix-blend-mode: multiply;\n object-fit: cover;\n width: 80px;\n height: 100%;\n\n .disabled & {\n filter: grayscale(100%);\n }\n`;\n\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\n\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\n image,\n icon\n }) => {\n\n return (\n <>\n {\n icon &&\n <IconContainer>\n {React.cloneElement(icon, {width: 48, height: 48})}\n </IconContainer>\n }\n {\n image &&\n <ImageContainer>\n <Image src={image.src} alt={image.alt} width={image.width} height={image.height}/>\n </ImageContainer>\n }\n </>\n )\n};\n"],"file":"HorizontalCardThumbnail.js"}
@@ -1,33 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- var _exportNames = {
9
- HorizontalCard: true
10
- };
11
- Object.defineProperty(exports, "HorizontalCard", {
12
- enumerable: true,
13
- get: function get() {
14
- return _HorizontalCard.default;
15
- }
16
- });
17
-
18
- var _types = require("./types");
19
-
20
- Object.keys(_types).forEach(function (key) {
21
- if (key === "default" || key === "__esModule") return;
22
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
23
- if (key in exports && exports[key] === _types[key]) return;
24
- Object.defineProperty(exports, key, {
25
- enumerable: true,
26
- get: function get() {
27
- return _types[key];
28
- }
29
- });
30
- });
31
-
32
- var _HorizontalCard = _interopRequireDefault(require("./HorizontalCard"));
33
- //# sourceMappingURL=index.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/Card/HorizontalCard/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA","sourcesContent":["export * from './types';\n\nexport { default as HorizontalCard } from './HorizontalCard';\n"],"file":"index.cjs"}
@@ -1,2 +0,0 @@
1
- export * from './types';
2
- export { default as HorizontalCard } from './HorizontalCard';
@@ -1,3 +0,0 @@
1
- export * from './types';
2
- export { default as HorizontalCard } from './HorizontalCard';
3
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/Card/HorizontalCard/index.ts"],"names":["default","HorizontalCard"],"mappings":"AAAA,cAAc,SAAd;AAEA,SAASA,OAAO,IAAIC,cAApB,QAA0C,kBAA1C","sourcesContent":["export * from './types';\n\nexport { default as HorizontalCard } from './HorizontalCard';\n"],"file":"index.js"}
@@ -1,6 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- //# sourceMappingURL=types.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.cjs"}
@@ -1,40 +0,0 @@
1
- import { IconButtonProps } from '../../Button/Iconbutton';
2
- import React from 'react';
3
- import { ToggleButtonProps } from '../../Toggles/ToggleButton';
4
- import { DropdownButtonProps } from '../../Dropdown/DropdownButtonTypes';
5
- import { TagVariants } from '../../Tag';
6
- import { LinearProgressProps } from '../../LinearProgress/LinearProgress';
7
- export declare type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {
8
- componentType: 'icon';
9
- icon: React.ReactNode;
10
- };
11
- export declare type HorizontalCardToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
12
- componentType: 'toggle';
13
- };
14
- export declare type HorizontalCardDropdownButton = Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'> & {
15
- componentType: 'dropdown';
16
- icon: React.ReactNode;
17
- };
18
- export interface HorizontalCardTag {
19
- label: string;
20
- icon?: React.ReactNode;
21
- variant?: TagVariants;
22
- }
23
- export declare type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>;
24
- export interface HorizontalCardProps {
25
- variant?: 'outline' | 'elevated';
26
- action?: () => void;
27
- disabled?: boolean;
28
- title: string;
29
- description?: string;
30
- icon?: React.ReactElement;
31
- image?: {
32
- src: string;
33
- alt?: string;
34
- height?: string;
35
- width?: string;
36
- };
37
- tags?: HorizontalCardTag[];
38
- progress?: HorizontalCardLinearProgression;
39
- actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton)[];
40
- }
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.js"}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["CardTopLevelContainer","styled","div","COLORS","white","BOXSHADOWS","BOXSHADOW_L1","neutral_200","Wrapper","focusStyles","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","React","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","defaultOnMouseDownHandler","a","key","e","instance"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,0BAAOC,GAAV,wVACZC,cAAOC,KADK,EAWhBC,kBAAWC,YAXK,EAeVH,cAAOI,WAfG,CAA3B;;;;AAoBA,IAAMC,OAAO,GAAGP,0BAAOC,GAAV,0sBAKdO,kBALc,EAYZT,qBAZY,EAcUG,cAAOO,UAdjB,EAkBUP,cAAOQ,WAlBjB,EAwBZX,qBAxBY,EA0BIK,kBAAWO,YA1Bf,EA8BIP,kBAAWQ,YA9Bf,CAAb;;;;AAmDP,IAAMC,IAAwC,GAAG,SAA3CA,IAA2C,OAOkB;AAAA,MANfC,aAMe,QANfA,aAMe;AAAA,MALfC,eAKe,QALfA,eAKe;AAAA,MAJfC,kBAIe,QAJfA,kBAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,QAEe,QAFfA,QAEe;AAAA,0BADfC,OACe;AAAA,MADfA,OACe,6BADL,SACK;;AAGjE,wBAAsCC,KAAK,CAACC,QAAN,CAA+C,EAA/C,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AACA,MAAMC,WAAW,GAAIJ,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;AACA,MAAMC,YAAY,GAAGN,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAArB;AAEA,8BAAgBC,YAAhB,6CAAkCJ,WAAlC,IAA+CE,WAA/C;AAEA,MAAMG,GAAG,aAAM,CAAC,CAACb,aAAF,GAAkB,aAAlB,GAAkC,EAAxC,cAA8CI,QAAQ,GAAG,UAAH,GAAgB,EAAtE,cAA4EC,OAA5E,CAAT;AAEA,sBAEE,qBAAC,OAAD;AAAS,IAAA,GAAG,EAAEO,YAAd;AACS,IAAA,SAAS,EAAEC,GADpB;AAES,IAAA,QAAQ,EAAE,CAAC,CAACb,aAAF,IAAmB,CAACI,QAApB,GAA+B,CAA/B,GAAmC,CAAC,CAFvD;AAGS,IAAA,WAAW,EAAEU,gCAHtB;AAIS,IAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,aAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACZ,QAAtB,IAAkCJ,aAAlC,IAAmDA,aAAa,EAApE;AAAA,KAJrB;AAKS,IAAA,OAAO,EAAE,iBAAAiB,CAAC;AAAA,aAAI,CAACb,QAAD,IAAaJ,aAAb,IAA8BA,aAAa,EAA/C;AAAA,KALnB;AAAA,2BAME,sBAAC,qBAAD;AAAA,iBAEIC,eAAe,iBACf,qBAAC,uBAAD;AAAgB,QAAA,GAAG,EAAES;AAArB,SACMT,eADN;AACuB,QAAA,QAAQ,EAAEG;AADjC,SAHJ,EAOIF,kBAAkB,iBAClB,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,QAAA,QAAQ,EAAEE;AAArD,SARJ,EAWID,kBAAkB,iBAClB,qBAAC,0BAAD;AAAmB,QAAA,GAAG,EAAE,aAAAe,QAAQ;AAAA,iBAAIT,cAAc,CAACS,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,EAAb,CAAlB;AAAA;AAAhC,SACuBf,kBADvB;AAC2C,QAAA,QAAQ,EAAEC;AADrD,SAZJ;AAAA;AANF,IAFF;AA2BD,CA7CD;;;AAREJ,EAAAA,a;AACAI,EAAAA,Q;AAIAC,EAAAA,O,4BAAU,S,EAAY,U;;eAkDTN,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n background-color: ${COLORS.white};\n\n border-radius: 8px;\n\n background-clip: padding-box;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n .elevated & {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n }\n\n .outline & {\n border: 1px solid ${COLORS.neutral_200};\n }\n`;\n\n\nexport const Wrapper = styled.div`\n height: max-content;\n width: max-content;\n\n &.interactive:focus {\n ${focusStyles}\n }\n\n &.interactive:not(.disabled) {\n cursor: pointer;\n\n &.outline:not(.action-within) {\n ${CardTopLevelContainer} {\n &:hover {\n background-color: ${COLORS.primary_20};\n }\n\n &:active, &.active-state {\n background-color: ${COLORS.primary_100};\n }\n }\n }\n\n &.elevated:not(.action-within) {\n ${CardTopLevelContainer} {\n &:hover {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n }\n\n &:active, &.active-state {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n }\n }\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n }\n`;\n\n\nexport interface CardProps {\n onCardClicked?: () => {};\n disabled?: boolean;\n topSectionProps?: CardTopSectionProps;\n middleSectionProps?: CardMiddleSectionProps;\n bottomSectionProps?: CardBottomSectionProps;\n variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n onCardClicked,\n topSectionProps,\n middleSectionProps,\n bottomSectionProps,\n disabled,\n variant = 'outline'\n }: CardProps) => {\n\n\n const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n const checkBoxRef = React.useRef<HTMLDivElement>(null);\n const containerRef = React.useRef<HTMLDivElement>(null);\n\n useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant}`;\n\n return (\n\n <Wrapper ref={containerRef}\n className={cls}\n tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n onClick={e => !disabled && onCardClicked && onCardClicked()}>\n <CardTopLevelContainer>\n {\n topSectionProps &&\n <CardTopSection ref={checkBoxRef}\n {...topSectionProps} disabled={disabled}/>\n }\n {\n middleSectionProps &&\n <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n }\n {\n bottomSectionProps &&\n <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n {...bottomSectionProps} disabled={disabled}/>\n }\n </CardTopLevelContainer>\n </Wrapper>\n\n );\n};\n\nexport default Card;\n"],"file":"Card.cjs"}