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