labsense-ui-kit 1.1.58 → 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 +2 -0
- package/dist/index.js +34 -26
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +34 -26
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.modern.js
CHANGED
|
@@ -3605,30 +3605,36 @@ 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:
|
|
3609
|
-
var $
|
|
3610
|
-
return $
|
|
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: ", ";\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) {
|
|
3609
|
+
var $borderRadius = _ref.$borderRadius;
|
|
3610
|
+
return $borderRadius != null ? $borderRadius : '4px';
|
|
3611
3611
|
}, function (_ref2) {
|
|
3612
|
-
var $
|
|
3613
|
-
return $
|
|
3612
|
+
var $border = _ref2.$border;
|
|
3613
|
+
return $border;
|
|
3614
3614
|
}, function (_ref3) {
|
|
3615
|
-
var $
|
|
3616
|
-
return $
|
|
3615
|
+
var $minWidth = _ref3.$minWidth;
|
|
3616
|
+
return $minWidth != null ? $minWidth : 'auto';
|
|
3617
3617
|
}, function (_ref4) {
|
|
3618
|
-
var $
|
|
3619
|
-
return $
|
|
3618
|
+
var $maxWidth = _ref4.$maxWidth;
|
|
3619
|
+
return $maxWidth != null ? $maxWidth : 'auto';
|
|
3620
3620
|
}, function (_ref5) {
|
|
3621
|
-
var $
|
|
3622
|
-
|
|
3623
|
-
|
|
3621
|
+
var $background = _ref5.$background;
|
|
3622
|
+
return $background != null ? $background : colorVariables.accent.light_1;
|
|
3623
|
+
}, function (_ref6) {
|
|
3624
|
+
var $gap = _ref6.$gap;
|
|
3625
|
+
return $gap != null ? $gap : '16px';
|
|
3626
|
+
}, function (_ref7) {
|
|
3627
|
+
var $tooltipPosition = _ref7.$tooltipPosition,
|
|
3628
|
+
$iconSize = _ref7.$iconSize,
|
|
3629
|
+
$tooltipTop = _ref7.$tooltipTop;
|
|
3624
3630
|
var vertical = $tooltipPosition.startsWith('top') ? "bottom: " + ($tooltipTop != null ? $tooltipTop : "calc(50% + " + ($iconSize + 2) + "px)") + ";" : "top: " + ($tooltipTop != null ? $tooltipTop : "calc(50% + " + ($iconSize + 2) + "px)") + ";";
|
|
3625
3631
|
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%);"])));
|
|
3626
3632
|
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["", " ", ";"])), vertical, horizontal);
|
|
3627
|
-
}, function (
|
|
3628
|
-
var $background =
|
|
3633
|
+
}, function (_ref8) {
|
|
3634
|
+
var $background = _ref8.$background;
|
|
3629
3635
|
return $background != null ? $background : colorVariables.accent.light_1;
|
|
3630
|
-
}, function (
|
|
3631
|
-
var $tooltipPosition =
|
|
3636
|
+
}, function (_ref9) {
|
|
3637
|
+
var $tooltipPosition = _ref9.$tooltipPosition;
|
|
3632
3638
|
if ($tooltipPosition.startsWith('top')) {
|
|
3633
3639
|
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);"])));
|
|
3634
3640
|
} else {
|
|
@@ -3636,25 +3642,25 @@ var TooltipContainer = styled.div(_templateObject$3 || (_templateObject$3 = _tag
|
|
|
3636
3642
|
}
|
|
3637
3643
|
});
|
|
3638
3644
|
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);
|
|
3639
|
-
var IconTooltip = function IconTooltip(
|
|
3645
|
+
var IconTooltip = function IconTooltip(_ref10) {
|
|
3640
3646
|
var _tooltipCSS$position;
|
|
3641
|
-
var
|
|
3642
|
-
icon =
|
|
3647
|
+
var _ref10$icon = _ref10.icon,
|
|
3648
|
+
icon = _ref10$icon === void 0 ? {
|
|
3643
3649
|
icon: 'Information',
|
|
3644
3650
|
size: 12,
|
|
3645
3651
|
weight: '0px',
|
|
3646
3652
|
color: colorVariables.text.medium
|
|
3647
|
-
} :
|
|
3648
|
-
infoIcon =
|
|
3649
|
-
infoText =
|
|
3650
|
-
|
|
3651
|
-
tooltipCSS =
|
|
3653
|
+
} : _ref10$icon,
|
|
3654
|
+
infoIcon = _ref10.infoIcon,
|
|
3655
|
+
infoText = _ref10.infoText,
|
|
3656
|
+
_ref10$tooltipCSS = _ref10.tooltipCSS,
|
|
3657
|
+
tooltipCSS = _ref10$tooltipCSS === void 0 ? {
|
|
3652
3658
|
background: colorVariables.accent.light_1,
|
|
3653
3659
|
gap: '4px',
|
|
3654
3660
|
minWidth: 'max-content',
|
|
3655
3661
|
position: 'bottomCenter',
|
|
3656
3662
|
tooltipTop: undefined
|
|
3657
|
-
} :
|
|
3663
|
+
} : _ref10$tooltipCSS;
|
|
3658
3664
|
return React.createElement(TooltipWrapper$1, null, React.createElement(Icon, Object.assign({}, icon, {
|
|
3659
3665
|
onClick: function onClick() {}
|
|
3660
3666
|
})), React.createElement(TooltipContainer, {
|
|
@@ -3664,7 +3670,9 @@ var IconTooltip = function IconTooltip(_ref8) {
|
|
|
3664
3670
|
"$tooltipTop": tooltipCSS.tooltipTop,
|
|
3665
3671
|
"$background": tooltipCSS.background,
|
|
3666
3672
|
"$gap": tooltipCSS.gap,
|
|
3667
|
-
"$iconSize": icon.size || 17
|
|
3673
|
+
"$iconSize": icon.size || 17,
|
|
3674
|
+
"$border": tooltipCSS.border,
|
|
3675
|
+
"$borderRadius": tooltipCSS.borderRadius
|
|
3668
3676
|
}, infoIcon && React.createElement(Icon, Object.assign({}, infoIcon)), infoText));
|
|
3669
3677
|
};
|
|
3670
3678
|
|