@eccenca/gui-elements 23.0.0 → 23.1.0-rc.1
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/CHANGELOG.md +35 -1
- package/README.md +7 -0
- package/dist/cjs/cmem/ActivityControl/ActivityControlWidget.js.map +1 -1
- package/dist/cjs/cmem/react-flow/ReactFlow/ReactFlow.js +7 -2
- package/dist/cjs/cmem/react-flow/ReactFlow/ReactFlow.js.map +1 -1
- package/dist/cjs/cmem/react-flow/StickyNoteModal/StickyNoteModal.js +3 -7
- package/dist/cjs/cmem/react-flow/StickyNoteModal/StickyNoteModal.js.map +1 -1
- package/dist/cjs/cmem/react-flow/extensions/scrollOnDragHook.js +200 -0
- package/dist/cjs/cmem/react-flow/extensions/scrollOnDragHook.js.map +1 -0
- package/dist/cjs/common/Intent/index.js +7 -3
- package/dist/cjs/common/Intent/index.js.map +1 -1
- package/dist/cjs/common/utils/characters.js +82 -0
- package/dist/cjs/common/utils/characters.js.map +1 -0
- package/dist/cjs/components/Application/ApplicationTitle.js +2 -2
- package/dist/cjs/components/Application/ApplicationTitle.js.map +1 -1
- package/dist/cjs/components/Badge/Badge.js +44 -0
- package/dist/cjs/components/Badge/Badge.js.map +1 -0
- package/dist/cjs/components/Depiction/Depiction.js +111 -0
- package/dist/cjs/components/Depiction/Depiction.js.map +1 -0
- package/dist/cjs/components/Grid/Grid.js +7 -2
- package/dist/cjs/components/Grid/Grid.js.map +1 -1
- package/dist/cjs/components/Grid/GridColumn.js +6 -2
- package/dist/cjs/components/Grid/GridColumn.js.map +1 -1
- package/dist/cjs/components/Grid/GridRow.js +3 -0
- package/dist/cjs/components/Grid/GridRow.js.map +1 -1
- package/dist/cjs/components/Icon/BaseIcon.js +38 -0
- package/dist/cjs/components/Icon/BaseIcon.js.map +1 -0
- package/dist/cjs/components/Icon/Icon.js +9 -24
- package/dist/cjs/components/Icon/Icon.js.map +1 -1
- package/dist/cjs/components/Icon/IconButton.js +8 -1
- package/dist/cjs/components/Icon/IconButton.js.map +1 -1
- package/dist/cjs/components/Icon/TestIcon.js +35 -0
- package/dist/cjs/components/Icon/TestIcon.js.map +1 -0
- package/dist/cjs/components/Icon/canonicalIconNames.js +123 -621
- package/dist/cjs/components/Icon/canonicalIconNames.js.map +1 -1
- package/dist/cjs/components/Icon/index.js +11 -0
- package/dist/cjs/components/Icon/index.js.map +1 -0
- package/dist/cjs/components/Menu/MenuItem.js +1 -1
- package/dist/cjs/components/Menu/MenuItem.js.map +1 -1
- package/dist/cjs/components/MultiSelect/MultiSelect.js +56 -23
- package/dist/cjs/components/MultiSelect/MultiSelect.js.map +1 -1
- package/dist/cjs/components/Notification/Notification.js +10 -2
- package/dist/cjs/components/Notification/Notification.js.map +1 -1
- package/dist/cjs/components/OverviewItem/OverviewItemDepiction.js +24 -0
- package/dist/cjs/components/OverviewItem/OverviewItemDepiction.js.map +1 -1
- package/dist/cjs/components/Tag/Tag.js +6 -2
- package/dist/cjs/components/Tag/Tag.js.map +1 -1
- package/dist/cjs/components/TextField/TextArea.js +4 -2
- package/dist/cjs/components/TextField/TextArea.js.map +1 -1
- package/dist/cjs/components/TextField/TextField.js +4 -2
- package/dist/cjs/components/TextField/TextField.js.map +1 -1
- package/dist/cjs/components/TextField/useTextValidation.js +84 -0
- package/dist/cjs/components/TextField/useTextValidation.js.map +1 -0
- package/dist/cjs/components/Tree/Tree.js.map +1 -1
- package/dist/cjs/components/Typography/Highlighter.js.map +1 -1
- package/dist/cjs/components/Typography/OverflowText.js.map +1 -1
- package/dist/cjs/components/Typography/WhiteSpaceContainer.js +35 -12
- package/dist/cjs/components/Typography/WhiteSpaceContainer.js.map +1 -1
- package/dist/cjs/components/Typography/index.js +21 -0
- package/dist/cjs/components/Typography/index.js.map +1 -0
- package/dist/cjs/components/Workspace/WorkspaceContent.js +1 -1
- package/dist/cjs/components/Workspace/WorkspaceContent.js.map +1 -1
- package/dist/cjs/components/index.js +18 -0
- package/dist/cjs/components/index.js.map +1 -0
- package/dist/cjs/index.js +7 -17
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/cmem/ActivityControl/ActivityControlWidget.js.map +1 -1
- package/dist/esm/cmem/react-flow/ReactFlow/ReactFlow.js +7 -2
- package/dist/esm/cmem/react-flow/ReactFlow/ReactFlow.js.map +1 -1
- package/dist/esm/cmem/react-flow/StickyNoteModal/StickyNoteModal.js +3 -6
- package/dist/esm/cmem/react-flow/StickyNoteModal/StickyNoteModal.js.map +1 -1
- package/dist/esm/cmem/react-flow/extensions/scrollOnDragHook.js +194 -0
- package/dist/esm/cmem/react-flow/extensions/scrollOnDragHook.js.map +1 -0
- package/dist/esm/common/Intent/index.js +5 -13
- package/dist/esm/common/Intent/index.js.map +1 -1
- package/dist/esm/common/utils/characters.js +96 -0
- package/dist/esm/common/utils/characters.js.map +1 -0
- package/dist/esm/components/Application/ApplicationTitle.js +2 -2
- package/dist/esm/components/Application/ApplicationTitle.js.map +1 -1
- package/dist/esm/components/Badge/Badge.js +48 -0
- package/dist/esm/components/Badge/Badge.js.map +1 -0
- package/dist/esm/components/Depiction/Depiction.js +96 -0
- package/dist/esm/components/Depiction/Depiction.js.map +1 -0
- package/dist/esm/components/Grid/Grid.js +7 -2
- package/dist/esm/components/Grid/Grid.js.map +1 -1
- package/dist/esm/components/Grid/GridColumn.js +6 -2
- package/dist/esm/components/Grid/GridColumn.js.map +1 -1
- package/dist/esm/components/Grid/GridRow.js +3 -0
- package/dist/esm/components/Grid/GridRow.js.map +1 -1
- package/dist/esm/components/Icon/BaseIcon.js +44 -0
- package/dist/esm/components/Icon/BaseIcon.js.map +1 -0
- package/dist/esm/components/Icon/Icon.js +9 -24
- package/dist/esm/components/Icon/Icon.js.map +1 -1
- package/dist/esm/components/Icon/IconButton.js +8 -1
- package/dist/esm/components/Icon/IconButton.js.map +1 -1
- package/dist/esm/components/Icon/TestIcon.js +41 -0
- package/dist/esm/components/Icon/TestIcon.js.map +1 -0
- package/dist/esm/components/Icon/canonicalIconNames.js +123 -621
- package/dist/esm/components/Icon/canonicalIconNames.js.map +1 -1
- package/dist/esm/components/Icon/index.js +4 -0
- package/dist/esm/components/Icon/index.js.map +1 -0
- package/dist/esm/components/Menu/MenuItem.js +1 -1
- package/dist/esm/components/Menu/MenuItem.js.map +1 -1
- package/dist/esm/components/MultiSelect/MultiSelect.js +61 -44
- package/dist/esm/components/MultiSelect/MultiSelect.js.map +1 -1
- package/dist/esm/components/Notification/Notification.js +12 -4
- package/dist/esm/components/Notification/Notification.js.map +1 -1
- package/dist/esm/components/OverviewItem/OverviewItemDepiction.js +24 -0
- package/dist/esm/components/OverviewItem/OverviewItemDepiction.js.map +1 -1
- package/dist/esm/components/Tag/Tag.js +6 -2
- package/dist/esm/components/Tag/Tag.js.map +1 -1
- package/dist/esm/components/TextField/TextArea.js +4 -2
- package/dist/esm/components/TextField/TextArea.js.map +1 -1
- package/dist/esm/components/TextField/TextField.js +4 -2
- package/dist/esm/components/TextField/TextField.js.map +1 -1
- package/dist/esm/components/TextField/useTextValidation.js +78 -0
- package/dist/esm/components/TextField/useTextValidation.js.map +1 -0
- package/dist/esm/components/Tree/Tree.js.map +1 -1
- package/dist/esm/components/Typography/Highlighter.js.map +1 -1
- package/dist/esm/components/Typography/OverflowText.js.map +1 -1
- package/dist/esm/components/Typography/WhiteSpaceContainer.js +16 -14
- package/dist/esm/components/Typography/WhiteSpaceContainer.js.map +1 -1
- package/dist/esm/components/Typography/index.js +12 -0
- package/dist/esm/components/Typography/index.js.map +1 -0
- package/dist/esm/components/Workspace/WorkspaceContent.js +1 -1
- package/dist/esm/components/Workspace/WorkspaceContent.js.map +1 -1
- package/dist/esm/components/index.js +6 -0
- package/dist/esm/components/index.js.map +1 -0
- package/dist/esm/index.js +5 -10
- package/dist/esm/index.js.map +1 -1
- package/dist/types/cmem/ActivityControl/ActivityControlWidget.d.ts +2 -1
- package/dist/types/cmem/react-flow/ReactFlow/ReactFlow.d.ts +14 -0
- package/dist/types/cmem/react-flow/extensions/scrollOnDragHook.d.ts +22 -0
- package/dist/types/common/Intent/index.d.ts +4 -3
- package/dist/types/common/utils/characters.d.ts +19 -0
- package/dist/types/components/Badge/Badge.d.ts +42 -0
- package/dist/types/components/Depiction/Depiction.d.ts +71 -0
- package/dist/types/components/Grid/Grid.d.ts +21 -2
- package/dist/types/components/Grid/GridColumn.d.ts +20 -2
- package/dist/types/components/Grid/GridRow.d.ts +17 -1
- package/dist/types/components/Icon/BaseIcon.d.ts +45 -0
- package/dist/types/components/Icon/Icon.d.ts +7 -34
- package/dist/types/components/Icon/IconButton.d.ts +3 -2
- package/dist/types/components/Icon/TestIcon.d.ts +20 -0
- package/dist/types/components/Icon/canonicalIconNames.d.ts +9 -7
- package/dist/types/components/Icon/index.d.ts +4 -0
- package/dist/types/components/Menu/MenuItem.d.ts +2 -1
- package/dist/types/components/MultiSelect/MultiSelect.d.ts +3 -1
- package/dist/types/components/Notification/Notification.d.ts +13 -4
- package/dist/types/components/Tabs/Tab.d.ts +2 -0
- package/dist/types/components/Tag/Tag.d.ts +16 -3
- package/dist/types/components/TextField/TextArea.d.ts +7 -2
- package/dist/types/components/TextField/TextField.d.ts +6 -1
- package/dist/types/components/TextField/useTextValidation.d.ts +28 -0
- package/dist/types/components/Tree/Tree.d.ts +2 -1
- package/dist/types/components/Typography/Highlighter.d.ts +2 -2
- package/dist/types/components/Typography/OverflowText.d.ts +2 -2
- package/dist/types/components/Typography/WhiteSpaceContainer.d.ts +45 -4
- package/dist/types/components/Typography/index.d.ts +12 -0
- package/dist/types/components/index.d.ts +5 -0
- package/dist/types/index.d.ts +6 -11
- package/package.json +13 -16
- package/scripts/compile-sass.ts +9 -1
- package/src/_shame.scss +1 -1
- package/src/cmem/ActivityControl/ActivityControlWidget.stories.tsx +6 -4
- package/src/cmem/ActivityControl/ActivityControlWidget.tsx +3 -2
- package/src/cmem/react-flow/ReactFlow/ReactFlow.tsx +26 -1
- package/src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx +10 -6
- package/src/cmem/react-flow/extensions/scrollOnDragHook.ts +247 -0
- package/src/common/Intent/index.ts +16 -12
- package/src/common/utils/characters.ts +111 -0
- package/src/components/Accordion/accordion.scss +4 -3
- package/src/components/Application/ApplicationTitle.tsx +2 -2
- package/src/components/Application/_config.scss +1 -1
- package/src/components/Application/_content.scss +1 -1
- package/src/components/Application/_header.scss +2 -2
- package/src/components/Application/_sidebar.scss +2 -9
- package/src/components/Application/_toolbar.scss +1 -1
- package/src/components/Application/application.scss +4 -4
- package/src/components/AutocompleteField/autoCompleteFieldUtils.tsx +13 -8
- package/src/components/Badge/Badge.stories.tsx +47 -0
- package/src/components/Badge/Badge.tsx +93 -0
- package/src/components/Badge/badge.scss +44 -0
- package/src/components/Depiction/Depiction.tsx +198 -0
- package/src/components/Depiction/depiction.scss +176 -0
- package/src/components/Depiction/stories/Depiction.stories.tsx +69 -0
- package/src/components/Depiction/stories/test-16to9.png +0 -0
- package/src/components/Depiction/stories/test-16to9.svg +41 -0
- package/src/components/Depiction/stories/test-16to9.tobase64.svg +41 -0
- package/src/components/Depiction/stories/test-16to9.tsx +44 -0
- package/src/components/Depiction/stories/test-9to16.png +0 -0
- package/src/components/Depiction/stories/test-9to16.svg +44 -0
- package/src/components/Depiction/stories/test-9to16.tobase64.svg +44 -0
- package/src/components/Depiction/stories/test-9to16.tsx +48 -0
- package/src/components/Grid/Grid.tsx +22 -4
- package/src/components/Grid/GridColumn.tsx +23 -6
- package/src/components/Grid/GridRow.tsx +17 -2
- package/src/components/Grid/grid.scss +8 -11
- package/src/components/Grid/stories/Grid.stories.tsx +27 -0
- package/src/components/Grid/stories/GridColumn.stories.tsx +66 -0
- package/src/components/Grid/stories/GridRow.stories.tsx +47 -0
- package/src/components/Icon/BaseIcon.tsx +84 -0
- package/src/components/Icon/Icon.tsx +23 -82
- package/src/components/Icon/IconButton.tsx +18 -14
- package/src/components/Icon/TestIcon.tsx +39 -0
- package/src/components/Icon/canonicalIconNames.tsx +132 -633
- package/src/components/Icon/index.ts +5 -0
- package/src/components/Icon/stories/Icon.stories.tsx +13 -0
- package/src/components/Icon/stories/IconButton.stories.tsx +14 -7
- package/src/components/Icon/stories/TestIcon.stories.tsx +28 -0
- package/src/components/Link/link.scss +2 -1
- package/src/components/Menu/MenuItem.tsx +14 -4
- package/src/components/Menu/Stories/MenuItem.stories.tsx +16 -2
- package/src/components/MultiSelect/MultiSelect.tsx +58 -27
- package/src/components/Notification/Notification.stories.tsx +4 -0
- package/src/components/Notification/Notification.tsx +26 -6
- package/src/components/OverviewItem/OverviewItemDepiction.tsx +31 -0
- package/src/components/OverviewItem/overviewitem.scss +2 -1
- package/src/components/OverviewItem/stories/OverviewItem.stories.tsx +22 -1
- package/src/components/OverviewItem/stories/OverviewItemDepiction.stories.tsx +8 -3
- package/src/components/Pagination/pagination.scss +3 -2
- package/src/components/SimpleTable/simpletable.scss +11 -12
- package/src/components/Tag/Tag.stories.tsx +7 -2
- package/src/components/Tag/Tag.tsx +24 -4
- package/src/components/Tag/tag.scss +84 -3
- package/src/components/TagInput/taginput.scss +6 -0
- package/src/components/TextField/TextArea.tsx +10 -1
- package/src/components/TextField/TextField.tsx +9 -0
- package/src/components/TextField/stories/SearchField.stories.tsx +1 -1
- package/src/components/TextField/textfield.scss +12 -0
- package/src/components/TextField/useTextValidation.ts +103 -0
- package/src/components/Tooltip/tooltip.scss +1 -1
- package/src/components/Tree/Tree.stories.tsx +7 -1
- package/src/components/Tree/Tree.tsx +2 -1
- package/src/components/Typography/Highlighter.tsx +2 -2
- package/src/components/Typography/OverflowText.tsx +2 -2
- package/src/components/Typography/WhiteSpaceContainer.tsx +69 -21
- package/src/components/Typography/index.ts +25 -0
- package/src/components/Typography/stories/WhiteSpaceContainer.stories.tsx +55 -0
- package/src/components/Typography/typography.scss +3 -2
- package/src/components/Workspace/WorkspaceContent.tsx +1 -1
- package/src/components/index.scss +5 -0
- package/src/components/index.ts +5 -0
- package/src/includes/carbon-components/_components.scss +11 -0
- package/src/includes/carbon-components/_requisits.scss +18 -0
- package/src/includes/carbon-components/_variables.scss +50 -53
- package/src/index.scss +4 -105
- package/src/index.ts +6 -16
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
+
}) : function(o, v) {
|
|
12
|
+
o["default"] = v;
|
|
13
|
+
});
|
|
14
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
+
if (mod && mod.__esModule) return mod;
|
|
16
|
+
var result = {};
|
|
17
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
+
__setModuleDefault(result, mod);
|
|
19
|
+
return result;
|
|
20
|
+
};
|
|
21
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
22
|
+
var t = {};
|
|
23
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
24
|
+
t[p] = s[p];
|
|
25
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
26
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
27
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
28
|
+
t[p[i]] = s[p[i]];
|
|
29
|
+
}
|
|
30
|
+
return t;
|
|
31
|
+
};
|
|
32
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
33
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
34
|
+
};
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.Depiction = void 0;
|
|
37
|
+
const react_1 = __importStar(require("react"));
|
|
38
|
+
const color_1 = __importDefault(require("color"));
|
|
39
|
+
const react_inlinesvg_1 = __importDefault(require("react-inlinesvg"));
|
|
40
|
+
const Tooltip_1 = __importDefault(require("../Tooltip/Tooltip"));
|
|
41
|
+
const colorDecideContrastvalue_1 = __importDefault(require("./../../common/utils/colorDecideContrastvalue"));
|
|
42
|
+
const constants_1 = require("../../configuration/constants");
|
|
43
|
+
/**
|
|
44
|
+
* Display a graphical representation and attache a caption or a badge to it.
|
|
45
|
+
*/
|
|
46
|
+
function Depiction(_a) {
|
|
47
|
+
var { className = "", image, forceInlineSvg = false, size = "medium", resizing = "cover", ratio = "source", caption, captionPosition = "none", backgroundColor, border, rounded, padding = "none", badge, tooltipProps } = _a, otherFigureProps = __rest(_a, ["className", "image", "forceInlineSvg", "size", "resizing", "ratio", "caption", "captionPosition", "backgroundColor", "border", "rounded", "padding", "badge", "tooltipProps"]);
|
|
48
|
+
const containerRef = (0, react_1.useRef)(null);
|
|
49
|
+
(0, react_1.useEffect)(() => {
|
|
50
|
+
if (!!backgroundColor && backgroundColor !== "light" && backgroundColor !== "dark") {
|
|
51
|
+
let color = (0, color_1.default)("#ffffff");
|
|
52
|
+
try {
|
|
53
|
+
color = (0, color_1.default)(backgroundColor);
|
|
54
|
+
}
|
|
55
|
+
catch (ex) {
|
|
56
|
+
console.warn("Received invalid background color for depiction: " + backgroundColor);
|
|
57
|
+
}
|
|
58
|
+
containerRef.current.style.setProperty(`--${constants_1.CLASSPREFIX}-depiction-background`, color.rgb().toString());
|
|
59
|
+
containerRef.current.style.setProperty(`--${constants_1.CLASSPREFIX}-depiction-color`, (0, colorDecideContrastvalue_1.default)({ testColor: color }));
|
|
60
|
+
}
|
|
61
|
+
}, [backgroundColor]);
|
|
62
|
+
const updateSvgResizing = react_1.default.useCallback((el) => {
|
|
63
|
+
let preserveAspectRatio = "";
|
|
64
|
+
switch (resizing) {
|
|
65
|
+
case "cover":
|
|
66
|
+
preserveAspectRatio = "xMidYMid slice";
|
|
67
|
+
break;
|
|
68
|
+
case "stretch":
|
|
69
|
+
preserveAspectRatio = "none";
|
|
70
|
+
break;
|
|
71
|
+
}
|
|
72
|
+
el.setAttribute("preserveAspectRatio", preserveAspectRatio);
|
|
73
|
+
}, [resizing]);
|
|
74
|
+
const inlineSvgCall = (0, react_1.useCallback)((svgElement) => {
|
|
75
|
+
if (svgElement) {
|
|
76
|
+
updateSvgResizing(svgElement);
|
|
77
|
+
}
|
|
78
|
+
}, [updateSvgResizing]);
|
|
79
|
+
(0, react_1.useEffect)(() => {
|
|
80
|
+
// Resize element after every render
|
|
81
|
+
const svgElement = containerRef.current.getElementsByTagName("svg");
|
|
82
|
+
if (svgElement.length > 0) {
|
|
83
|
+
updateSvgResizing(svgElement[0]);
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
let depiction = image;
|
|
87
|
+
if (forceInlineSvg &&
|
|
88
|
+
image.type === "img" &&
|
|
89
|
+
"src" in image.props &&
|
|
90
|
+
!!image.props.src &&
|
|
91
|
+
image.props.src.startsWith("data:image/svg+xml")) {
|
|
92
|
+
depiction = (react_1.default.createElement(react_inlinesvg_1.default, { src: image.props.src, innerRef: inlineSvgCall }, image));
|
|
93
|
+
}
|
|
94
|
+
const depictionContainer = (react_1.default.createElement("div", { ref: containerRef, className: `${constants_1.CLASSPREFIX}-depiction__image` +
|
|
95
|
+
` ${constants_1.CLASSPREFIX}-depiction__image--${size}` +
|
|
96
|
+
` ${constants_1.CLASSPREFIX}-depiction__image--${resizing}-sizing` +
|
|
97
|
+
` ${constants_1.CLASSPREFIX}-depiction__image--ratio-${ratio.replace(":", "to")}` +
|
|
98
|
+
(backgroundColor === "light" || backgroundColor === "dark" ? ` ${constants_1.CLASSPREFIX}-depiction__image--color-${backgroundColor}` : '') +
|
|
99
|
+
(!!backgroundColor ? ` ${constants_1.CLASSPREFIX}-depiction__image--color-config` : '') +
|
|
100
|
+
(border ? ` ${constants_1.CLASSPREFIX}-depiction__image--hasborder` : '') +
|
|
101
|
+
(rounded ? ` ${constants_1.CLASSPREFIX}-depiction__image--roundedborder` : '') +
|
|
102
|
+
(padding && padding !== "none" ? ` ${constants_1.CLASSPREFIX}-depiction__image--padding-${padding}` : '') }, depiction));
|
|
103
|
+
return (react_1.default.createElement("figure", Object.assign({ className: `${constants_1.CLASSPREFIX}-depiction` +
|
|
104
|
+
(className ? ` ${className}` : '') }, otherFigureProps),
|
|
105
|
+
captionPosition === "tooltip" && !!caption ? (react_1.default.createElement(Tooltip_1.default, Object.assign({ content: caption, size: "medium" }, tooltipProps), depictionContainer)) : (depictionContainer),
|
|
106
|
+
!!caption && (react_1.default.createElement("figcaption", { className: `${constants_1.CLASSPREFIX}-depiction__caption` +
|
|
107
|
+
` ${constants_1.CLASSPREFIX}-depiction__caption--${captionPosition}` }, caption)),
|
|
108
|
+
badge));
|
|
109
|
+
}
|
|
110
|
+
exports.Depiction = Depiction;
|
|
111
|
+
//# sourceMappingURL=Depiction.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Depiction.js","sourceRoot":"","sources":["../../../../src/components/Depiction/Depiction.tsx"],"names":[],"mappings":"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"}
|
|
@@ -15,12 +15,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
const react_1 = __importDefault(require("react"));
|
|
18
|
-
//
|
|
18
|
+
// @ts-ignore // FlexGrid is not part of @types/carbon-components-react
|
|
19
19
|
const carbon_components_react_1 = require("carbon-components-react");
|
|
20
20
|
const constants_1 = require("../../configuration/constants");
|
|
21
|
+
/**
|
|
22
|
+
* Layouts a grid that can contain rows and columns.
|
|
23
|
+
* Grids can also be stacked into other grids for more complex layouts.
|
|
24
|
+
* A very complex level of stacked grids is a sign that something should be designed differently.
|
|
25
|
+
*/
|
|
21
26
|
function Grid(_a) {
|
|
22
27
|
var { children, verticalStretchable = false, useAbsoluteSpace = false, className = '' } = _a, restProps = __rest(_a, ["children", "verticalStretchable", "useAbsoluteSpace", "className"]);
|
|
23
|
-
return (react_1.default.createElement(carbon_components_react_1.
|
|
28
|
+
return (react_1.default.createElement(carbon_components_react_1.FlexGrid, Object.assign({}, restProps, { className: `${constants_1.CLASSPREFIX}-grid` +
|
|
24
29
|
(!!verticalStretchable ? ` ${constants_1.CLASSPREFIX}-grid--stretchable` : "") +
|
|
25
30
|
(!!useAbsoluteSpace ? ` ${constants_1.CLASSPREFIX}-grid--absolutespace` : "") +
|
|
26
31
|
(className ? " " + className : ""), fullWidth: true }), children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,
|
|
1
|
+
{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,uEAAuE;AACvE,qEAAmF;AACnF,6DAAsE;AAqBtE;;;;GAIG;AACH,SAAS,IAAI,CAAC,EAMF;QANE,EACV,QAAQ,EACR,mBAAmB,GAAG,KAAK,EAC3B,gBAAgB,GAAG,KAAK,EACxB,SAAS,GAAG,EAAE,OAEN,EADL,SAAS,cALF,oEAMb,CADe;IAEZ,OAAO,CACH,8BAAC,kCAAU,oBACH,SAAS,IACb,SAAS,EACL,GAAG,uBAAM,OAAO;YAChB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAAI,uBAAM,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;YAC7D,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,uBAAM,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;YAC5D,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,EAEtC,SAAS,EAAE,IAAI,KAEb,QAAQ,CACD,CAChB,CAAA;AACL,CAAC;AAED,kBAAe,IAAI,CAAC"}
|
|
@@ -18,14 +18,18 @@ const react_1 = __importDefault(require("react"));
|
|
|
18
18
|
// import PropTypes from 'prop-types';
|
|
19
19
|
const carbon_components_react_1 = require("carbon-components-react");
|
|
20
20
|
const constants_1 = require("../../configuration/constants");
|
|
21
|
+
/**
|
|
22
|
+
* Grid columns can be used in grid rows.
|
|
23
|
+
* They can contain other grids if this is necessary for more complex layouts.
|
|
24
|
+
*/
|
|
21
25
|
function GridColumn(_a) {
|
|
22
|
-
var { children, className = '', small = false, medium = false, full =
|
|
26
|
+
var { children, className = '', small = false, medium = false, full, verticalAlign = "top" } = _a, otherProps = __rest(_a, ["children", "className", "small", "medium", "full", "verticalAlign"]);
|
|
23
27
|
let sizeConfig = {};
|
|
24
28
|
if (small)
|
|
25
29
|
sizeConfig = { md: 2, lg: 3 };
|
|
26
30
|
if (medium)
|
|
27
31
|
sizeConfig = { md: 3, lg: 5 };
|
|
28
|
-
return (react_1.default.createElement(carbon_components_react_1.Column, Object.assign({},
|
|
32
|
+
return (react_1.default.createElement(carbon_components_react_1.Column, Object.assign({}, sizeConfig, otherProps, { className: `${constants_1.CLASSPREFIX}-grid__column` +
|
|
29
33
|
(verticalAlign ? ` ${constants_1.CLASSPREFIX}-grid__column--vertical-` + verticalAlign : '') +
|
|
30
34
|
(className ? ' ' + className : '') }), children));
|
|
31
35
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridColumn.js","sourceRoot":"","sources":["../../../../src/components/Grid/GridColumn.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,sCAAsC;AACtC,
|
|
1
|
+
{"version":3,"file":"GridColumn.js","sourceRoot":"","sources":["../../../../src/components/Grid/GridColumn.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,sCAAsC;AACtC,qEAAqF;AACrF,6DAAsE;AAuBtE;;;GAGG;AACH,SAAS,UAAU,CAAC,EAQF;QARE,EAChB,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,IAAI,EACJ,aAAa,GAAG,KAAK,OAEP,EADX,UAAU,cAPG,qEAQnB,CADgB;IAEb,IAAI,UAAU,GAAG,EAAE,CAAC;IACpB,IAAI,KAAK;QAAE,UAAU,GAAG,EAAE,EAAE,EAAC,CAAC,EAAE,EAAE,EAAC,CAAC,EAAE,CAAC;IACvC,IAAI,MAAM;QAAE,UAAU,GAAG,EAAE,EAAE,EAAC,CAAC,EAAE,EAAE,EAAC,CAAC,EAAE,CAAC;IACxC,OAAO,CACH,8BAAC,gCAAY,oBACL,UAAU,EACV,UAAU,IACd,SAAS,EACL,GAAG,uBAAM,eAAe;YACxB,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,uBAAM,0BAA0B,GAAG,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;YAC3E,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,GAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,KAGlC,QAAQ,CACC,CAClB,CAAA;AACL,CAAC;AAED,kBAAe,UAAU,CAAC"}
|
|
@@ -18,6 +18,9 @@ const react_1 = __importDefault(require("react"));
|
|
|
18
18
|
// import PropTypes from 'prop-types';
|
|
19
19
|
const carbon_components_react_1 = require("carbon-components-react");
|
|
20
20
|
const constants_1 = require("../../configuration/constants");
|
|
21
|
+
/**
|
|
22
|
+
* Grid rows exists as children in a grid and can contain columns.
|
|
23
|
+
*/
|
|
21
24
|
function GridRow(_a) {
|
|
22
25
|
var { children, className = "", dontWrapColumns = true, fullHeight = false, verticalStretched } = _a, otherProps = __rest(_a, ["children", "className", "dontWrapColumns", "fullHeight", "verticalStretched"]);
|
|
23
26
|
return (react_1.default.createElement(carbon_components_react_1.Row, Object.assign({}, otherProps, { className: `${constants_1.CLASSPREFIX}-grid__row` +
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridRow.js","sourceRoot":"","sources":["../../../../src/components/Grid/GridRow.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,sCAAsC;AACtC,
|
|
1
|
+
{"version":3,"file":"GridRow.js","sourceRoot":"","sources":["../../../../src/components/Grid/GridRow.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,sCAAsC;AACtC,qEAA4E;AAC5E,6DAAsE;AAqBtE;;GAEG;AACH,SAAS,OAAO,CAAC,EAOF;QAPE,EACb,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,eAAe,GAAG,IAAI,EACtB,UAAU,GAAG,KAAK,EAClB,iBAAiB,OAEN,EADR,UAAU,cANA,+EAOhB,CADgB;IAEb,OAAO,CACH,8BAAC,6BAAS,oBACF,UAAU,IACd,SAAS,EACL,GAAG,uBAAM,YAAY;YACrB,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,uBAAM,6BAA6B,CAAC,CAAC,CAAC,EAAE,CAAC;YAChE,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,uBAAM,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAC;YAC5D,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,uBAAM,wBAAwB,CAAC,CAAC,CAAC,EAAE,CAAC;YACtD,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,KAGrC,QAAQ,CACD,CACf,CAAC;AACN,CAAC;AAED,kBAAe,OAAO,CAAC"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
+
var t = {};
|
|
4
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
+
t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
+
t[p[i]] = s[p[i]];
|
|
10
|
+
}
|
|
11
|
+
return t;
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
const react_1 = __importDefault(require("react"));
|
|
18
|
+
const constants_1 = require("../../configuration/constants");
|
|
19
|
+
const Tooltip_1 = __importDefault(require("./../Tooltip/Tooltip"));
|
|
20
|
+
/**
|
|
21
|
+
* The base icon provides the basic functionality that is necessary to wrap the Carbon icon component.
|
|
22
|
+
*/
|
|
23
|
+
function BaseIcon(_a) {
|
|
24
|
+
var { iconComponent, className = "", large = false, small = false, tooltipText, tooltipProps, intent, description } = _a, restProps = __rest(_a, ["iconComponent", "className", "large", "small", "tooltipText", "tooltipProps", "intent", "description"]);
|
|
25
|
+
let sizeConfig = { height: 20, width: 20, size: 20 };
|
|
26
|
+
if (small)
|
|
27
|
+
sizeConfig = { height: 16, width: 16, size: 16 };
|
|
28
|
+
if (large)
|
|
29
|
+
sizeConfig = { height: 32, width: 32, size: 32 };
|
|
30
|
+
const CarbonIconNamed = iconComponent;
|
|
31
|
+
const icon = (react_1.default.createElement(CarbonIconNamed, Object.assign({}, restProps, sizeConfig, { description: description !== null && description !== void 0 ? description : (tooltipText !== null && tooltipText !== void 0 ? tooltipText : ""), className: `${constants_1.CLASSPREFIX}-icon` +
|
|
32
|
+
(intent ? ` ${constants_1.CLASSPREFIX}-intent--${intent}` : "") +
|
|
33
|
+
(!!className ? ` ${className}` : "") })));
|
|
34
|
+
return tooltipText ? (react_1.default.createElement(Tooltip_1.default, Object.assign({ content: tooltipText }, tooltipProps),
|
|
35
|
+
react_1.default.createElement("span", null, icon))) : (icon);
|
|
36
|
+
}
|
|
37
|
+
exports.default = BaseIcon;
|
|
38
|
+
//# sourceMappingURL=BaseIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BaseIcon.js","sourceRoot":"","sources":["../../../../src/components/Icon/BaseIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA0B;AAE1B,6DAAsE;AAEtE,mEAA6D;AAuC7D;;GAEG;AACH,SAAS,QAAQ,CAAC,EAUF;QAVE,EACd,aAAa,EACb,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,WAAW,EACX,YAAY,EACZ,MAAM,EACN,WAAW,OAEC,EADT,SAAS,cATE,wGAUjB,CADe;IAEZ,IAAI,UAAU,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;IACrD,IAAI,KAAK;QAAE,UAAU,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;IAC5D,IAAI,KAAK;QAAE,UAAU,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;IAC5D,MAAM,eAAe,GAAG,aAAa,CAAC;IAEtC,MAAM,IAAI,GAAG,CACT,8BAAC,eAAe,oBACR,SAAS,EACT,UAAU,IACd,WAAW,EAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,CAAC,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,EAAE,CAAC,EAChD,SAAS,EACL,GAAG,uBAAM,OAAO;YAChB,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,uBAAM,YAAY,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAC9C,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAE1C,CACL,CAAC;IACF,OAAO,WAAW,CAAC,CAAC,CAAC,CACjB,8BAAC,iBAAO,kBAAC,OAAO,EAAE,WAAW,IAAM,YAAY;QAC3C,4CAAO,IAAI,CAAQ,CACb,CACb,CAAC,CAAC,CAAC,CACA,IAAI,CACP,CAAC;AACN,CAAC;AAED,kBAAe,QAAQ,CAAC"}
|
|
@@ -16,11 +16,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
exports.findExistingIconName = void 0;
|
|
18
18
|
const react_1 = __importDefault(require("react"));
|
|
19
|
-
const
|
|
20
|
-
const Tooltip_1 = __importDefault(require("./../Tooltip/Tooltip"));
|
|
19
|
+
const BaseIcon_1 = __importDefault(require("./BaseIcon"));
|
|
21
20
|
const canonicalIconNames_1 = __importDefault(require("./canonicalIconNames"));
|
|
22
21
|
/** Returns the first icon that exists or the fallback icon. */
|
|
23
|
-
const findExistingIcon = (iconName, fallbackItem = canonicalIconNames_1.default["
|
|
22
|
+
const findExistingIcon = (iconName, fallbackItem = canonicalIconNames_1.default["undefined"]) => {
|
|
24
23
|
var _a;
|
|
25
24
|
if (typeof iconName === "string") {
|
|
26
25
|
return (_a = canonicalIconNames_1.default[iconName]) !== null && _a !== void 0 ? _a : fallbackItem;
|
|
@@ -30,7 +29,7 @@ const findExistingIcon = (iconName, fallbackItem = canonicalIconNames_1.default[
|
|
|
30
29
|
}
|
|
31
30
|
};
|
|
32
31
|
/** Returns the first icon name that exists or the fallback icon name. */
|
|
33
|
-
const findExistingIconName = (iconNames, fallbackIconName = "
|
|
32
|
+
const findExistingIconName = (iconNames, fallbackIconName = "undefined") => {
|
|
34
33
|
let foundIconName = fallbackIconName;
|
|
35
34
|
const iconNameStack = [...iconNames];
|
|
36
35
|
while (foundIconName === fallbackIconName && iconNameStack.length > 0) {
|
|
@@ -42,27 +41,13 @@ const findExistingIconName = (iconNames, fallbackIconName = "Undefined") => {
|
|
|
42
41
|
return foundIconName;
|
|
43
42
|
};
|
|
44
43
|
exports.findExistingIconName = findExistingIconName;
|
|
44
|
+
/**
|
|
45
|
+
* The icon provides a graphical symbol that is specified by a canonical name.
|
|
46
|
+
* This name is hard-coded to force a homegenous usage of the [Carbon icon library](https://carbondesignsystem.com/guidelines/icons/library).
|
|
47
|
+
*/
|
|
45
48
|
function Icon(_a) {
|
|
46
|
-
var {
|
|
47
|
-
|
|
48
|
-
if (small)
|
|
49
|
-
sizeConfig = { height: 16, width: 16 };
|
|
50
|
-
if (large)
|
|
51
|
-
sizeConfig = { height: 32, width: 32 };
|
|
52
|
-
const carbonIcon = findExistingIcon(name);
|
|
53
|
-
let CarbonIconSized = carbonIcon.normal;
|
|
54
|
-
if (small)
|
|
55
|
-
CarbonIconSized = carbonIcon.small;
|
|
56
|
-
if (large)
|
|
57
|
-
CarbonIconSized = carbonIcon.large;
|
|
58
|
-
if (!!tooltipText && !restProps.description) {
|
|
59
|
-
restProps['description'] = tooltipText;
|
|
60
|
-
}
|
|
61
|
-
const icon = (react_1.default.createElement(CarbonIconSized, Object.assign({}, restProps, sizeConfig, { className: `${constants_1.CLASSPREFIX}-icon ` +
|
|
62
|
-
(intent ? `${constants_1.CLASSPREFIX}-intent--${intent} ` : "") +
|
|
63
|
-
className })));
|
|
64
|
-
return tooltipText ? (react_1.default.createElement(Tooltip_1.default, Object.assign({ content: tooltipText }, tooltipProps),
|
|
65
|
-
react_1.default.createElement("span", null, icon))) : (icon);
|
|
49
|
+
var { name } = _a, otherBaseIconProps = __rest(_a, ["name"]);
|
|
50
|
+
return react_1.default.createElement(BaseIcon_1.default, Object.assign({ iconComponent: findExistingIcon(name) }, otherBaseIconProps));
|
|
66
51
|
}
|
|
67
52
|
exports.default = Icon;
|
|
68
53
|
//# sourceMappingURL=Icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;
|
|
1
|
+
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,0DAAqD;AACrD,8EAAoF;AAUpF,+DAA+D;AAC/D,MAAM,gBAAgB,GAAG,CACrB,QAAkC,EAClC,eAA+B,4BAAc,CAAC,WAAW,CAAC,EAC5C,EAAE;;IAChB,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;QAC9B,OAAO,MAAA,4BAAc,CAAC,QAAQ,CAAC,mCAAI,YAAY,CAAC;KACnD;SAAM;QACH,OAAO,4BAAc,CAAC,IAAA,4BAAoB,EAAC,QAAQ,CAAC,CAAC,CAAC;KACzD;AACL,CAAC,CAAA;AAED,yEAAyE;AAClE,MAAM,oBAAoB,GAAG,CAChC,SAAmB,EACnB,mBAAkC,WAAW,EAChC,EAAE;IACf,IAAI,aAAa,GAAW,gBAAgB,CAAC;IAC7C,MAAM,aAAa,GAAG,CAAC,GAAG,SAAS,CAAC,CAAC;IACrC,OAAO,aAAa,KAAK,gBAAgB,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;QACnE,IAAI,cAAc,GAAG,aAAa,CAAC,KAAK,EAAE,CAAC;QAC3C,IAAI,cAAc,IAAK,4BAAsB,CAAC,cAAc,CAAC,IAAI,IAAI,EAAE;YACnE,aAAa,GAAG,cAAc,CAAC;SAClC;KACJ;IACD,OAAO,aAA8B,CAAC;AAC1C,CAAC,CAAA;AAbY,QAAA,oBAAoB,wBAahC;AAED;;;GAGG;AACH,SAAS,IAAI,CAAC,EAGF;QAHE,EACV,IAAI,OAEI,EADL,kBAAkB,cAFX,QAGb,CADwB;IAErB,OAAO,8BAAC,kBAAQ,kBAAC,aAAa,EAAE,gBAAgB,CAAC,IAAI,CAAC,IAAM,kBAAkB,EAAI,CAAA;AACtF,CAAC;AAED,kBAAe,IAAI,CAAC"}
|
|
@@ -21,7 +21,14 @@ const Icon_1 = __importDefault(require("./Icon"));
|
|
|
21
21
|
/** A button with an icon instead of text. */
|
|
22
22
|
function IconButton(_a) {
|
|
23
23
|
var { className = "", name = "undefined", text, tooltipProps, description, tooltipAsTitle = false, minimal = true } = _a, restProps = __rest(_a, ["className", "name", "text", "tooltipProps", "description", "tooltipAsTitle", "minimal"]);
|
|
24
|
-
|
|
24
|
+
const iconProps = {
|
|
25
|
+
small: restProps.small,
|
|
26
|
+
large: restProps.large,
|
|
27
|
+
tooltipText: tooltipAsTitle ? undefined : text,
|
|
28
|
+
tooltipProps: !!tooltipProps ? Object.assign({ hoverOpenDelay: 1000 }, tooltipProps) : { hoverOpenDelay: 1000 },
|
|
29
|
+
description: description ? description : text,
|
|
30
|
+
};
|
|
31
|
+
return (react_1.default.createElement(Button_1.default, Object.assign({ title: tooltipAsTitle && text ? text : undefined }, restProps, { icon: (typeof name === "string" || Array.isArray(name)) ? (react_1.default.createElement(Icon_1.default, Object.assign({ name: name }, iconProps))) : (react_1.default.cloneElement(name, iconProps)), className: `${constants_1.CLASSPREFIX}-button--icon ` + className, minimal: minimal })));
|
|
25
32
|
}
|
|
26
33
|
exports.default = IconButton;
|
|
27
34
|
//# sourceMappingURL=IconButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../../src/components/Icon/IconButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,8DAA4E;AAC5E,6DAAoE;AACpE,kDAA0B;
|
|
1
|
+
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../../src/components/Icon/IconButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,8DAA4E;AAC5E,6DAAoE;AACpE,kDAA0B;AA8B1B,6CAA6C;AAC7C,SAAS,UAAU,CAAC,EASoB;QATpB,EAChB,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,WAAW,EAClB,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,cAAc,GAAG,KAAK,EACtB,OAAO,GAAC,IAAI,OAEwB,EADjC,SAAS,cARI,yFASnB,CADe;IAEZ,MAAM,SAAS,GAAG;QACd,KAAK,EAAE,SAAS,CAAC,KAAK;QACtB,KAAK,EAAE,SAAS,CAAC,KAAK;QACtB,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;QAC9C,YAAY,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,iBAAE,cAAc,EAAE,IAAI,IAAK,YAAY,EAAE,CAAC,CAAC,EAAC,cAAc,EAAE,IAAI,EAAC;QAC/F,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI;KAChD,CAAC;IAEF,OAAO,CACH,8BAAC,gBAAM,kBACH,KAAK,EAAE,cAAc,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAC5C,SAAS,IACb,IAAI,EAAE,CAAC,OAAO,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CACtD,8BAAC,cAAI,kBAAC,IAAI,EAAE,IAAI,IAAM,SAAS,EAAI,CACtC,CAAC,CAAC,CAAC,CACA,eAAK,CAAC,YAAY,CAAC,IAAI,EAAE,SAAS,CAAC,CACtC,EACD,SAAS,EAAE,GAAG,uBAAM,gBAAgB,GAAG,SAAS,EAChD,OAAO,EAAE,OAAO,IAClB,CACL,CAAC;AACN,CAAC;AAED,kBAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
+
var t = {};
|
|
4
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
+
t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
+
t[p[i]] = s[p[i]];
|
|
10
|
+
}
|
|
11
|
+
return t;
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
const react_1 = __importDefault(require("react"));
|
|
18
|
+
const BaseIcon_1 = __importDefault(require("./BaseIcon"));
|
|
19
|
+
const constants_1 = require("../../configuration/constants");
|
|
20
|
+
/**
|
|
21
|
+
* This component is primarily provided to test icons in a third application without defining them via a canonical name before.
|
|
22
|
+
*
|
|
23
|
+
* Example usage:
|
|
24
|
+
* ```
|
|
25
|
+
* import { LogoReact } from "@carbon/icons-react";
|
|
26
|
+
* const testIcon = <TestIcon tryout={LogoReact} />
|
|
27
|
+
* ```
|
|
28
|
+
*/
|
|
29
|
+
function TestIcon(_a) {
|
|
30
|
+
var { className = "", tryout } = _a, otherBaseIconProps = __rest(_a, ["className", "tryout"]);
|
|
31
|
+
return (react_1.default.createElement(BaseIcon_1.default, Object.assign({ iconComponent: tryout, className: `${constants_1.CLASSPREFIX}-icon--test` +
|
|
32
|
+
(className ? ` ${className}` : "") }, otherBaseIconProps)));
|
|
33
|
+
}
|
|
34
|
+
exports.default = TestIcon;
|
|
35
|
+
//# sourceMappingURL=TestIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TestIcon.js","sourceRoot":"","sources":["../../../../src/components/Icon/TestIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,0DAAqD;AAErD,6DAAsE;AAStE;;;;;;;;GAQG;AACH,SAAS,QAAQ,CAAC,EAIF;QAJE,EACd,SAAS,GAAG,EAAE,EACd,MAAM,OAEM,EADT,kBAAkB,cAHP,uBAIjB,CADwB;IAErB,OAAO,CACH,8BAAC,kBAAQ,kBACL,aAAa,EAAE,MAAM,EACrB,SAAS,EACL,GAAG,uBAAM,aAAa;YACtB,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAElC,kBAAkB,EACxB,CACL,CAAC;AACN,CAAC;AAED,kBAAe,QAAQ,CAAC"}
|