@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.
- package/dist/Card/{VerticalCard/Card.cjs → Card.cjs} +9 -32
- package/dist/Card/Card.cjs.map +1 -0
- package/dist/Card/{VerticalCard/Card.d.ts → Card.d.ts} +1 -2
- package/dist/Card/{VerticalCard/Card.js → Card.js} +8 -29
- package/dist/Card/Card.js.map +1 -0
- package/dist/Card/{VerticalCard/CardBottomSection.cjs → CardBottomSection.cjs} +25 -40
- package/dist/Card/CardBottomSection.cjs.map +1 -0
- package/dist/Card/{VerticalCard/CardBottomSection.d.ts → CardBottomSection.d.ts} +4 -4
- package/dist/Card/{VerticalCard/CardBottomSection.js → CardBottomSection.js} +11 -25
- package/dist/Card/CardBottomSection.js.map +1 -0
- package/dist/Card/{VerticalCard/CardMiddleSection.cjs → CardMiddleSection.cjs} +13 -13
- package/dist/Card/CardMiddleSection.cjs.map +1 -0
- package/dist/Card/{VerticalCard/CardMiddleSection.d.ts → CardMiddleSection.d.ts} +2 -2
- package/dist/Card/{VerticalCard/CardMiddleSection.js → CardMiddleSection.js} +2 -2
- package/dist/Card/CardMiddleSection.js.map +1 -0
- package/dist/Card/{VerticalCard/CardTopSection.cjs → CardTopSection.cjs} +12 -11
- package/dist/Card/CardTopSection.cjs.map +1 -0
- package/dist/Card/{VerticalCard/CardTopSection.d.ts → CardTopSection.d.ts} +5 -5
- package/dist/Card/{VerticalCard/CardTopSection.js → CardTopSection.js} +10 -9
- package/dist/Card/CardTopSection.js.map +1 -0
- package/dist/Card/index.cjs +64 -8
- package/dist/Card/index.cjs.map +1 -1
- package/dist/Card/index.d.ts +7 -2
- package/dist/Card/index.js +7 -2
- package/dist/Card/index.js.map +1 -1
- package/dist/Dropdown/DropdownButton.cjs +3 -3
- package/dist/Dropdown/DropdownButton.cjs.map +1 -1
- package/dist/Dropdown/DropdownButton.d.ts +1 -5
- package/dist/Dropdown/DropdownButton.js +4 -3
- package/dist/Dropdown/DropdownButton.js.map +1 -1
- package/dist/InputFields/NumberField.cjs +63 -139
- package/dist/InputFields/NumberField.cjs.map +1 -1
- package/dist/InputFields/NumberField.d.ts +1 -4
- package/dist/InputFields/NumberField.js +63 -138
- package/dist/InputFields/NumberField.js.map +1 -1
- package/dist/List/ListRow.cjs +3 -24
- package/dist/List/ListRow.cjs.map +1 -1
- package/dist/List/ListRow.d.ts +0 -3
- package/dist/List/ListRow.js +3 -22
- package/dist/List/ListRow.js.map +1 -1
- package/dist/Toggles/ToggleButton.cjs +2 -3
- package/dist/Toggles/ToggleButton.cjs.map +1 -1
- package/dist/Toggles/ToggleButton.d.ts +1 -1
- package/dist/Toggles/ToggleButton.js +2 -3
- package/dist/Toggles/ToggleButton.js.map +1 -1
- package/dist/common/ActionWithin.cjs.map +1 -1
- package/dist/common/ActionWithin.js.map +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/Card/HorizontalCard/HorizontalCard.cjs +0 -97
- package/dist/Card/HorizontalCard/HorizontalCard.cjs.map +0 -1
- package/dist/Card/HorizontalCard/HorizontalCard.d.ts +0 -4
- package/dist/Card/HorizontalCard/HorizontalCard.js +0 -74
- package/dist/Card/HorizontalCard/HorizontalCard.js.map +0 -1
- package/dist/Card/HorizontalCard/HorizontalCardActions.cjs +0 -124
- package/dist/Card/HorizontalCard/HorizontalCardActions.cjs.map +0 -1
- package/dist/Card/HorizontalCard/HorizontalCardActions.d.ts +0 -5
- package/dist/Card/HorizontalCard/HorizontalCardActions.js +0 -98
- package/dist/Card/HorizontalCard/HorizontalCardActions.js.map +0 -1
- package/dist/Card/HorizontalCard/HorizontalCardBody.cjs +0 -60
- package/dist/Card/HorizontalCard/HorizontalCardBody.cjs.map +0 -1
- package/dist/Card/HorizontalCard/HorizontalCardBody.d.ts +0 -5
- package/dist/Card/HorizontalCard/HorizontalCardBody.js +0 -40
- package/dist/Card/HorizontalCard/HorizontalCardBody.js.map +0 -1
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs +0 -49
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs.map +0 -1
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.d.ts +0 -5
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js +0 -33
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js.map +0 -1
- package/dist/Card/HorizontalCard/index.cjs +0 -33
- package/dist/Card/HorizontalCard/index.cjs.map +0 -1
- package/dist/Card/HorizontalCard/index.d.ts +0 -2
- package/dist/Card/HorizontalCard/index.js +0 -3
- package/dist/Card/HorizontalCard/index.js.map +0 -1
- package/dist/Card/HorizontalCard/types.cjs +0 -6
- package/dist/Card/HorizontalCard/types.cjs.map +0 -1
- package/dist/Card/HorizontalCard/types.d.ts +0 -40
- package/dist/Card/HorizontalCard/types.js +0 -2
- package/dist/Card/HorizontalCard/types.js.map +0 -1
- package/dist/Card/VerticalCard/Card.cjs.map +0 -1
- package/dist/Card/VerticalCard/Card.js.map +0 -1
- package/dist/Card/VerticalCard/CardBottomSection.cjs.map +0 -1
- package/dist/Card/VerticalCard/CardBottomSection.js.map +0 -1
- package/dist/Card/VerticalCard/CardMiddleSection.cjs.map +0 -1
- package/dist/Card/VerticalCard/CardMiddleSection.js.map +0 -1
- package/dist/Card/VerticalCard/CardTopSection.cjs.map +0 -1
- package/dist/Card/VerticalCard/CardTopSection.js.map +0 -1
- package/dist/Card/VerticalCard/index.cjs +0 -88
- package/dist/Card/VerticalCard/index.cjs.map +0 -1
- package/dist/Card/VerticalCard/index.d.ts +0 -7
- package/dist/Card/VerticalCard/index.js +0 -8
- 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,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,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 +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 +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 +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"}
|