labsense-ui-kit 1.1.59 → 1.1.60
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 +1 -0
- package/dist/index.js +32 -28
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +32 -28
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -3609,33 +3609,36 @@ var Badge = function Badge(_ref4) {
|
|
|
3609
3609
|
};
|
|
3610
3610
|
|
|
3611
3611
|
var _templateObject$3, _templateObject2$3, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
3612
|
-
var TooltipContainer = styled__default.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:
|
|
3613
|
-
var $
|
|
3614
|
-
return $
|
|
3612
|
+
var TooltipContainer = styled__default.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: ", ";\n padding: 6px 8px;\n border: ", ";\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) {
|
|
3613
|
+
var $borderRadius = _ref.$borderRadius;
|
|
3614
|
+
return $borderRadius != null ? $borderRadius : '4px';
|
|
3615
3615
|
}, function (_ref2) {
|
|
3616
|
-
var $
|
|
3617
|
-
return $
|
|
3616
|
+
var $border = _ref2.$border;
|
|
3617
|
+
return $border;
|
|
3618
3618
|
}, function (_ref3) {
|
|
3619
|
-
var $
|
|
3620
|
-
return $
|
|
3619
|
+
var $minWidth = _ref3.$minWidth;
|
|
3620
|
+
return $minWidth != null ? $minWidth : 'auto';
|
|
3621
3621
|
}, function (_ref4) {
|
|
3622
|
-
var $
|
|
3623
|
-
return $
|
|
3622
|
+
var $maxWidth = _ref4.$maxWidth;
|
|
3623
|
+
return $maxWidth != null ? $maxWidth : 'auto';
|
|
3624
3624
|
}, function (_ref5) {
|
|
3625
|
-
var $
|
|
3626
|
-
return $
|
|
3625
|
+
var $background = _ref5.$background;
|
|
3626
|
+
return $background != null ? $background : colorVariables.accent.light_1;
|
|
3627
3627
|
}, function (_ref6) {
|
|
3628
|
-
var $
|
|
3629
|
-
|
|
3630
|
-
|
|
3628
|
+
var $gap = _ref6.$gap;
|
|
3629
|
+
return $gap != null ? $gap : '16px';
|
|
3630
|
+
}, function (_ref7) {
|
|
3631
|
+
var $tooltipPosition = _ref7.$tooltipPosition,
|
|
3632
|
+
$iconSize = _ref7.$iconSize,
|
|
3633
|
+
$tooltipTop = _ref7.$tooltipTop;
|
|
3631
3634
|
var vertical = $tooltipPosition.startsWith('top') ? "bottom: " + ($tooltipTop != null ? $tooltipTop : "calc(50% + " + ($iconSize + 2) + "px)") + ";" : "top: " + ($tooltipTop != null ? $tooltipTop : "calc(50% + " + ($iconSize + 2) + "px)") + ";";
|
|
3632
3635
|
var horizontal = $tooltipPosition.endsWith('Left') ? styled.css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["left: calc(100% + 10px); transform: translateX(-99%);"]))) : $tooltipPosition.endsWith('Center') ? styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["left: 50%; transform: translateX(-50%);"]))) : styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["right: calc(100% + 10px); transform: translateX(99%);"])));
|
|
3633
3636
|
return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["", " ", ";"])), vertical, horizontal);
|
|
3634
|
-
}, function (_ref7) {
|
|
3635
|
-
var $background = _ref7.$background;
|
|
3636
|
-
return $background != null ? $background : colorVariables.accent.light_1;
|
|
3637
3637
|
}, function (_ref8) {
|
|
3638
|
-
var $
|
|
3638
|
+
var $background = _ref8.$background;
|
|
3639
|
+
return $background != null ? $background : colorVariables.accent.light_1;
|
|
3640
|
+
}, function (_ref9) {
|
|
3641
|
+
var $tooltipPosition = _ref9.$tooltipPosition;
|
|
3639
3642
|
if ($tooltipPosition.startsWith('top')) {
|
|
3640
3643
|
return $tooltipPosition.endsWith('Left') ? styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["top: 100%; right: 10px; transform: rotate(180deg);"]))) : $tooltipPosition.endsWith('Right') ? styled.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["top: 100%; left: 10px; transform: rotate(180deg);"]))) : styled.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["top: 100%; left: 50%; transform: translateX(-50%) rotate(180deg);"])));
|
|
3641
3644
|
} else {
|
|
@@ -3643,25 +3646,25 @@ var TooltipContainer = styled__default.div(_templateObject$3 || (_templateObject
|
|
|
3643
3646
|
}
|
|
3644
3647
|
});
|
|
3645
3648
|
var TooltipWrapper$1 = styled__default.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);
|
|
3646
|
-
var IconTooltip = function IconTooltip(
|
|
3649
|
+
var IconTooltip = function IconTooltip(_ref10) {
|
|
3647
3650
|
var _tooltipCSS$position;
|
|
3648
|
-
var
|
|
3649
|
-
icon =
|
|
3651
|
+
var _ref10$icon = _ref10.icon,
|
|
3652
|
+
icon = _ref10$icon === void 0 ? {
|
|
3650
3653
|
icon: 'Information',
|
|
3651
3654
|
size: 12,
|
|
3652
3655
|
weight: '0px',
|
|
3653
3656
|
color: colorVariables.text.medium
|
|
3654
|
-
} :
|
|
3655
|
-
infoIcon =
|
|
3656
|
-
infoText =
|
|
3657
|
-
|
|
3658
|
-
tooltipCSS =
|
|
3657
|
+
} : _ref10$icon,
|
|
3658
|
+
infoIcon = _ref10.infoIcon,
|
|
3659
|
+
infoText = _ref10.infoText,
|
|
3660
|
+
_ref10$tooltipCSS = _ref10.tooltipCSS,
|
|
3661
|
+
tooltipCSS = _ref10$tooltipCSS === void 0 ? {
|
|
3659
3662
|
background: colorVariables.accent.light_1,
|
|
3660
3663
|
gap: '4px',
|
|
3661
3664
|
minWidth: 'max-content',
|
|
3662
3665
|
position: 'bottomCenter',
|
|
3663
3666
|
tooltipTop: undefined
|
|
3664
|
-
} :
|
|
3667
|
+
} : _ref10$tooltipCSS;
|
|
3665
3668
|
return React__default.createElement(TooltipWrapper$1, null, React__default.createElement(Icon, Object.assign({}, icon, {
|
|
3666
3669
|
onClick: function onClick() {}
|
|
3667
3670
|
})), React__default.createElement(TooltipContainer, {
|
|
@@ -3672,7 +3675,8 @@ var IconTooltip = function IconTooltip(_ref9) {
|
|
|
3672
3675
|
"$background": tooltipCSS.background,
|
|
3673
3676
|
"$gap": tooltipCSS.gap,
|
|
3674
3677
|
"$iconSize": icon.size || 17,
|
|
3675
|
-
"$border": tooltipCSS.border
|
|
3678
|
+
"$border": tooltipCSS.border,
|
|
3679
|
+
"$borderRadius": tooltipCSS.borderRadius
|
|
3676
3680
|
}, infoIcon && React__default.createElement(Icon, Object.assign({}, infoIcon)), infoText));
|
|
3677
3681
|
};
|
|
3678
3682
|
|