labsense-ui-kit 1.1.56 → 1.1.58
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/Badge/IconTooltip.d.ts +2 -7
- package/dist/index.js +27 -39
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +27 -39
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.modern.js
CHANGED
|
@@ -3605,27 +3605,30 @@ var Badge = function Badge(_ref4) {
|
|
|
3605
3605
|
};
|
|
3606
3606
|
|
|
3607
3607
|
var _templateObject$3, _templateObject2$3, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
3608
|
-
var TooltipContainer = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: absolute;\n z-index: 10;\n align-items: center;\n justify-content: center;\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.3s;\n border-radius: 4px;\n padding: 6px 8px;\n min-width: ", ";\n background-color: ", ";\n gap: ", ";\n\n ", "\n\n &::after {\n content: '';\n position: absolute;\n width: 16px;\n height: 8px;\n background-color: ", ";\n clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n\n ", "\n }\n"])), function (_ref) {
|
|
3608
|
+
var TooltipContainer = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: absolute;\n z-index: 10;\n align-items: center;\n justify-content: center;\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.3s;\n border-radius: 4px;\n padding: 6px 8px;\n min-width: ", ";\n min-width: ", ";\n background-color: ", ";\n gap: ", ";\n\n ", "\n\n &::after {\n content: '';\n position: absolute;\n width: 16px;\n height: 8px;\n background-color: ", ";\n clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n\n ", "\n }\n"])), function (_ref) {
|
|
3609
3609
|
var $minWidth = _ref.$minWidth;
|
|
3610
3610
|
return $minWidth != null ? $minWidth : 'auto';
|
|
3611
3611
|
}, function (_ref2) {
|
|
3612
|
-
var $
|
|
3613
|
-
return $
|
|
3612
|
+
var $maxWidth = _ref2.$maxWidth;
|
|
3613
|
+
return $maxWidth != null ? $maxWidth : 'auto';
|
|
3614
3614
|
}, function (_ref3) {
|
|
3615
|
-
var $
|
|
3616
|
-
return $
|
|
3615
|
+
var $background = _ref3.$background;
|
|
3616
|
+
return $background != null ? $background : colorVariables.accent.light_1;
|
|
3617
3617
|
}, function (_ref4) {
|
|
3618
|
-
var $
|
|
3619
|
-
|
|
3620
|
-
|
|
3618
|
+
var $gap = _ref4.$gap;
|
|
3619
|
+
return $gap != null ? $gap : '16px';
|
|
3620
|
+
}, function (_ref5) {
|
|
3621
|
+
var $tooltipPosition = _ref5.$tooltipPosition,
|
|
3622
|
+
$iconSize = _ref5.$iconSize,
|
|
3623
|
+
$tooltipTop = _ref5.$tooltipTop;
|
|
3621
3624
|
var vertical = $tooltipPosition.startsWith('top') ? "bottom: " + ($tooltipTop != null ? $tooltipTop : "calc(50% + " + ($iconSize + 2) + "px)") + ";" : "top: " + ($tooltipTop != null ? $tooltipTop : "calc(50% + " + ($iconSize + 2) + "px)") + ";";
|
|
3622
3625
|
var horizontal = $tooltipPosition.endsWith('Left') ? css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["left: calc(100% + 10px); transform: translateX(-99%);"]))) : $tooltipPosition.endsWith('Center') ? css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["left: 50%; transform: translateX(-50%);"]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["right: calc(100% + 10px); transform: translateX(99%);"])));
|
|
3623
3626
|
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["", " ", ";"])), vertical, horizontal);
|
|
3624
|
-
}, function (_ref5) {
|
|
3625
|
-
var $background = _ref5.$background;
|
|
3626
|
-
return $background != null ? $background : colorVariables.accent.light_1;
|
|
3627
3627
|
}, function (_ref6) {
|
|
3628
|
-
var $
|
|
3628
|
+
var $background = _ref6.$background;
|
|
3629
|
+
return $background != null ? $background : colorVariables.accent.light_1;
|
|
3630
|
+
}, function (_ref7) {
|
|
3631
|
+
var $tooltipPosition = _ref7.$tooltipPosition;
|
|
3629
3632
|
if ($tooltipPosition.startsWith('top')) {
|
|
3630
3633
|
return $tooltipPosition.endsWith('Left') ? css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["top: 100%; right: 10px; transform: rotate(180deg);"]))) : $tooltipPosition.endsWith('Right') ? css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["top: 100%; left: 10px; transform: rotate(180deg);"]))) : css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["top: 100%; left: 50%; transform: translateX(-50%) rotate(180deg);"])));
|
|
3631
3634
|
} else {
|
|
@@ -3633,51 +3636,36 @@ var TooltipContainer = styled.div(_templateObject$3 || (_templateObject$3 = _tag
|
|
|
3633
3636
|
}
|
|
3634
3637
|
});
|
|
3635
3638
|
var TooltipWrapper$1 = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n align-items: center;\n cursor: pointer;\n\n &:hover ", " {\n visibility: visible;\n opacity: 1;\n }\n"])), TooltipContainer);
|
|
3636
|
-
var IconTooltip = function IconTooltip(
|
|
3639
|
+
var IconTooltip = function IconTooltip(_ref8) {
|
|
3637
3640
|
var _tooltipCSS$position;
|
|
3638
|
-
var
|
|
3639
|
-
icon =
|
|
3641
|
+
var _ref8$icon = _ref8.icon,
|
|
3642
|
+
icon = _ref8$icon === void 0 ? {
|
|
3640
3643
|
icon: 'Information',
|
|
3641
3644
|
size: 12,
|
|
3642
3645
|
weight: '0px',
|
|
3643
3646
|
color: colorVariables.text.medium
|
|
3644
|
-
} :
|
|
3645
|
-
infoIcon =
|
|
3646
|
-
infoText =
|
|
3647
|
-
|
|
3648
|
-
|
|
3649
|
-
infoText4 = _ref7.infoText4,
|
|
3650
|
-
_ref7$tooltipCSS = _ref7.tooltipCSS,
|
|
3651
|
-
tooltipCSS = _ref7$tooltipCSS === void 0 ? {
|
|
3647
|
+
} : _ref8$icon,
|
|
3648
|
+
infoIcon = _ref8.infoIcon,
|
|
3649
|
+
infoText = _ref8.infoText,
|
|
3650
|
+
_ref8$tooltipCSS = _ref8.tooltipCSS,
|
|
3651
|
+
tooltipCSS = _ref8$tooltipCSS === void 0 ? {
|
|
3652
3652
|
background: colorVariables.accent.light_1,
|
|
3653
|
-
color: colorVariables.text.dark,
|
|
3654
3653
|
gap: '4px',
|
|
3655
3654
|
minWidth: 'max-content',
|
|
3656
3655
|
position: 'bottomCenter',
|
|
3657
|
-
tooltipTop: undefined
|
|
3658
|
-
|
|
3659
|
-
fontWeight: '400'
|
|
3660
|
-
} : _ref7$tooltipCSS;
|
|
3661
|
-
var texts = [infoText, infoText2, infoText3, infoText4].filter(Boolean);
|
|
3656
|
+
tooltipTop: undefined
|
|
3657
|
+
} : _ref8$tooltipCSS;
|
|
3662
3658
|
return React.createElement(TooltipWrapper$1, null, React.createElement(Icon, Object.assign({}, icon, {
|
|
3663
3659
|
onClick: function onClick() {}
|
|
3664
3660
|
})), React.createElement(TooltipContainer, {
|
|
3665
3661
|
"$tooltipPosition": (_tooltipCSS$position = tooltipCSS.position) != null ? _tooltipCSS$position : 'bottomCenter',
|
|
3666
3662
|
"$minWidth": tooltipCSS.minWidth,
|
|
3663
|
+
"$maxWidth": tooltipCSS.maxWidth,
|
|
3667
3664
|
"$tooltipTop": tooltipCSS.tooltipTop,
|
|
3668
3665
|
"$background": tooltipCSS.background,
|
|
3669
3666
|
"$gap": tooltipCSS.gap,
|
|
3670
3667
|
"$iconSize": icon.size || 17
|
|
3671
|
-
}, infoIcon && React.createElement(Icon, Object.assign({}, infoIcon)),
|
|
3672
|
-
"$flexDirection": 'column'
|
|
3673
|
-
}, texts.map(function (text, i) {
|
|
3674
|
-
return React.createElement(Span, {
|
|
3675
|
-
key: i,
|
|
3676
|
-
"$color": tooltipCSS.color,
|
|
3677
|
-
"$fontSize": tooltipCSS.fontSize,
|
|
3678
|
-
"$fontWeight": tooltipCSS.fontWeight
|
|
3679
|
-
}, text, i < texts.length - 1 && React.createElement("br", null));
|
|
3680
|
-
}))));
|
|
3668
|
+
}, infoIcon && React.createElement(Icon, Object.assign({}, infoIcon)), infoText));
|
|
3681
3669
|
};
|
|
3682
3670
|
|
|
3683
3671
|
var _templateObject$4;
|