magneto365.ui 2.68.1-beta → 2.69.0-beta
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/assets/3c9ef5949d25901a.svg +11 -0
- package/dist/cjs/css/magneto.ui.lib.min.css +1 -1
- package/dist/cjs/index.js +160 -147
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/UI/atoms/Popover/Popover.interface.d.ts +2 -0
- package/dist/cjs/types/constants/icons.constants.d.ts +1 -0
- package/dist/esm/css/magneto.ui.lib.min.css +1 -1
- package/dist/esm/index.js +160 -147
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/UI/atoms/Popover/Popover.interface.d.ts +2 -0
- package/dist/esm/types/constants/icons.constants.d.ts +1 -0
- package/dist/index.d.ts +1 -0
- package/package.json +1 -1
package/dist/esm/index.js
CHANGED
|
@@ -260,7 +260,7 @@ var useMediaQuery = function (defaultValue, options) {
|
|
|
260
260
|
return component;
|
|
261
261
|
};
|
|
262
262
|
|
|
263
|
-
var styles$
|
|
263
|
+
var styles$2Z = {"magneto-ui-icon":"mg_icon_magneto-ui-icon_tp25u","magneto-ui-hover":"mg_icon_magneto-ui-hover_tp25u","magneto-ui-rotate":"mg_icon_magneto-ui-rotate_tp25u"};
|
|
264
264
|
|
|
265
265
|
function formatNumber(num) {
|
|
266
266
|
if (typeof num !== 'number')
|
|
@@ -307,7 +307,7 @@ var classNames = {
|
|
|
307
307
|
}
|
|
308
308
|
};
|
|
309
309
|
|
|
310
|
-
var cx$1d = classNames.bind(styles$
|
|
310
|
+
var cx$1d = classNames.bind(styles$2Z);
|
|
311
311
|
var Component$37 = function (_a) {
|
|
312
312
|
var fallbackIcon = _a.fallbackIcon, _b = _a.showDefaultFallback, showDefaultFallback = _b === void 0 ? true : _b, icon = _a.icon, _c = _a.hover, hover = _c === void 0 ? false : _c, size = _a.size, className = _a.className, alt = _a.alt, isRotate = _a.isRotate;
|
|
313
313
|
var _d = useState(false), imageError = _d[0], setImageError = _d[1];
|
|
@@ -326,7 +326,7 @@ var Component$37 = function (_a) {
|
|
|
326
326
|
*/
|
|
327
327
|
var IconItem = Component$37;
|
|
328
328
|
|
|
329
|
-
var styles$
|
|
329
|
+
var styles$2Y = {"avatarComponent":"mg_avatar_avatarComponent_1upgt","magneto-ui-default-avatar":"mg_avatar_magneto-ui-default-avatar_1upgt"};
|
|
330
330
|
|
|
331
331
|
var Add = "https://static.magneto365.com/lib/assets/f738cef7b76c444f.svg";
|
|
332
332
|
|
|
@@ -368,8 +368,6 @@ var ArrowRight2 = "https://static.magneto365.com/lib/assets/ce1843403fbc32ff.svg
|
|
|
368
368
|
|
|
369
369
|
var ArrowRightWhite = "https://static.magneto365.com/lib/assets/cc2f903ba305015e.svg";
|
|
370
370
|
|
|
371
|
-
var ArrowSwapVertical = "https://static.magneto365.com/lib/assets/11314346afd968cf.svg";
|
|
372
|
-
|
|
373
371
|
var Bell = "https://static.magneto365.com/lib/assets/b8b5d3e12f55ef1a.svg";
|
|
374
372
|
|
|
375
373
|
var BookBlueBold = "https://static.magneto365.com/lib/assets/1d63e2974f98ed3e.svg";
|
|
@@ -656,15 +654,17 @@ var YoutubeSolid = "https://static.magneto365.com/lib/assets/cdcc07646d43bd9d.sv
|
|
|
656
654
|
|
|
657
655
|
var FilterIcon = "https://static.magneto365.com/lib/assets/a9f25ebc43dd2922.svg";
|
|
658
656
|
|
|
657
|
+
var SortIcon = "https://static.magneto365.com/lib/assets/3c9ef5949d25901a.svg";
|
|
658
|
+
|
|
659
659
|
var Component$36 = function (_a) {
|
|
660
660
|
var userImage = _a.userImage, fallbackImage = _a.fallbackImage, onClick = _a.onClick;
|
|
661
661
|
var _b = useState(false), imageError = _b[0], setImageError = _b[1];
|
|
662
662
|
var handleError = function () {
|
|
663
663
|
setImageError(true);
|
|
664
664
|
};
|
|
665
|
-
return (React.createElement("div", { className: styles$
|
|
665
|
+
return (React.createElement("div", { className: styles$2Y.avatarComponent, onClick: onClick },
|
|
666
666
|
userImage && !imageError && React.createElement("img", { src: userImage, alt: "User Avatar", loading: "lazy", onError: handleError }),
|
|
667
|
-
(!userImage || imageError) && (React.createElement("div", { className: styles$
|
|
667
|
+
(!userImage || imageError) && (React.createElement("div", { className: styles$2Y['magneto-ui-default-avatar'] },
|
|
668
668
|
React.createElement(IconItem, { icon: fallbackImage || User, hover: false })))));
|
|
669
669
|
};
|
|
670
670
|
/**
|
|
@@ -672,17 +672,17 @@ var Component$36 = function (_a) {
|
|
|
672
672
|
*/
|
|
673
673
|
var Avatar = Component$36;
|
|
674
674
|
|
|
675
|
-
var styles$
|
|
675
|
+
var styles$2X = {"badge-count":"mg_badge_badge-count_15t5z","badge-count__animation":"mg_badge_badge-count_animation_15t5z","pulse":"mg_badge_pulse_15t5z"};
|
|
676
676
|
|
|
677
677
|
var Component$35 = function (_a) {
|
|
678
678
|
var _b = _a.number, number = _b === void 0 ? undefined : _b, className = _a.className;
|
|
679
|
-
return (React.createElement("p", { className: "".concat(styles$
|
|
680
|
-
React.createElement("span", { className: styles$
|
|
679
|
+
return (React.createElement("p", { className: "".concat(styles$2X['badge-count'], " ").concat(className) },
|
|
680
|
+
React.createElement("span", { className: styles$2X['badge-count__animation'] }),
|
|
681
681
|
number && number));
|
|
682
682
|
};
|
|
683
683
|
var Badge = Component$35;
|
|
684
684
|
|
|
685
|
-
var styles$
|
|
685
|
+
var styles$2W = {"magneto-ui-chart-bar":"mg_bar_chart_magneto-ui-chart-bar_1jzzq","magneto-ui-chart-bar__point":"mg_bar_chart_magneto-ui-chart-bar_point_1jzzq","magneto-ui-chart-bar__popover":"mg_bar_chart_magneto-ui-chart-bar_popover_1jzzq","popover-left":"mg_bar_chart_popover-left_1jzzq","popover-right":"mg_bar_chart_popover-right_1jzzq"};
|
|
686
686
|
|
|
687
687
|
var numberToCurrency = function (currency, withSymbol) {
|
|
688
688
|
if (withSymbol === void 0) { withSymbol = true; }
|
|
@@ -720,14 +720,14 @@ var Component$34 = function (_a) {
|
|
|
720
720
|
}
|
|
721
721
|
}, [isHover]);
|
|
722
722
|
var popoverContent = useMemo(function () {
|
|
723
|
-
return isHover && (React.createElement("div", { className: "".concat(styles$
|
|
723
|
+
return isHover && (React.createElement("div", { className: "".concat(styles$2W['magneto-ui-chart-bar__popover'], " ").concat(styles$2W["popover-".concat(popoverPosition)]) },
|
|
724
724
|
React.createElement("div", null, "".concat(numberToCurrency(minRange), " - ").concat(numberToCurrency(maxRange))),
|
|
725
725
|
React.createElement("div", null, "".concat(Math.round(percentage * 100), "% ").concat(jobText))));
|
|
726
726
|
}, [isHover, jobText, maxRange, minRange, percentage, popoverPosition]);
|
|
727
727
|
return (React.createElement("div", { style: {
|
|
728
728
|
height: Math.max((percentage / maxPercentage) * maxHeight, 1)
|
|
729
|
-
}, ref: barRef, className: styles$
|
|
730
|
-
React.createElement("div", { className: styles$
|
|
729
|
+
}, ref: barRef, className: styles$2W['magneto-ui-chart-bar'], onMouseEnter: function () { return setIsHover(true); }, onMouseLeave: function () { return setIsHover(false); } },
|
|
730
|
+
React.createElement("div", { className: styles$2W['magneto-ui-chart-bar__point'], style: { backgroundColor: point } }),
|
|
731
731
|
popoverContent));
|
|
732
732
|
};
|
|
733
733
|
var BarChart = Component$34;
|
|
@@ -1128,7 +1128,7 @@ var menuSortButton = {
|
|
|
1128
1128
|
size: 17
|
|
1129
1129
|
};
|
|
1130
1130
|
var iconFilterOrder = {
|
|
1131
|
-
icon:
|
|
1131
|
+
icon: SortIcon,
|
|
1132
1132
|
hover: false,
|
|
1133
1133
|
size: 20
|
|
1134
1134
|
};
|
|
@@ -1552,7 +1552,7 @@ var CNM = /** @class */ (function () {
|
|
|
1552
1552
|
return CNM;
|
|
1553
1553
|
}());
|
|
1554
1554
|
|
|
1555
|
-
var styles$
|
|
1555
|
+
var styles$2V = {"magneto-ui-bar-loader":"mg_bar_loader_magneto-ui-bar-loader_1f3jh","magneto-ui-bar-loader__bar":"mg_bar_loader_magneto-ui-bar-loader_bar_1f3jh","magneto-ui-bar-loader__bar--animated":"mg_bar_loader_magneto-ui-bar-loader_bar--animated_1f3jh","progress":"mg_bar_loader_progress_1f3jh","magneto-ui-bar-loader__bar--completed":"mg_bar_loader_magneto-ui-bar-loader_bar--completed_1f3jh"};
|
|
1556
1556
|
|
|
1557
1557
|
var Component$33 = function (_a) {
|
|
1558
1558
|
var className = _a.className, color = _a.color, percent = _a.percent;
|
|
@@ -1574,10 +1574,10 @@ var Component$33 = function (_a) {
|
|
|
1574
1574
|
var _a;
|
|
1575
1575
|
return (_a = {}, _a["".concat(BAR_LOADER_PREFIX, "-completed")] = "".concat(validateCompleted(percent), "%"), _a);
|
|
1576
1576
|
}, [percent, validateCompleted]);
|
|
1577
|
-
return (React.createElement("div", { className: CNM.get({ styles: styles$
|
|
1578
|
-
React.createElement("div", { className: CNM.get({ styles: styles$
|
|
1577
|
+
return (React.createElement("div", { className: CNM.get({ styles: styles$2V, cls: [className] }) },
|
|
1578
|
+
React.createElement("div", { className: CNM.get({ styles: styles$2V, cls: ['bar-loader'] }), style: __assign(__assign({}, barColor), barCompleted) },
|
|
1579
1579
|
React.createElement("div", { className: CNM.get({
|
|
1580
|
-
styles: styles$
|
|
1580
|
+
styles: styles$2V,
|
|
1581
1581
|
cls: ['bar-loader__bar', percent !== undefined ? 'bar-loader__bar--completed' : 'bar-loader__bar--animated']
|
|
1582
1582
|
}) }))));
|
|
1583
1583
|
};
|
|
@@ -1586,7 +1586,7 @@ var Component$33 = function (_a) {
|
|
|
1586
1586
|
*/
|
|
1587
1587
|
var BarLoader = Component$33;
|
|
1588
1588
|
|
|
1589
|
-
var styles$
|
|
1589
|
+
var styles$2U = {"breadcrumbComponent":"mg_breadcrumb_breadcrumbComponent_vlbg8","magneto-ui-bc":"mg_breadcrumb_magneto-ui-bc_vlbg8","magneto-ui-bc-active":"mg_breadcrumb_magneto-ui-bc-active_vlbg8","no-transform":"mg_breadcrumb_no-transform_vlbg8"};
|
|
1590
1590
|
|
|
1591
1591
|
var Component$32 = function (_a) {
|
|
1592
1592
|
var breadcrumbText = _a.breadcrumbText, breadcrumbCustomText = _a.breadcrumbCustomText, queryParams = _a.queryParams, _b = _a.haveRedirect, haveRedirect = _b === void 0 ? true : _b, _c = _a.detailTitle, detailTitle = _c === void 0 ? '' : _c, breadCrumbFromServer = _a.breadCrumbFromServer, urlFromServer = _a.urlFromServer;
|
|
@@ -1594,7 +1594,7 @@ var Component$32 = function (_a) {
|
|
|
1594
1594
|
var breadcrumbSplitText = breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.split('/');
|
|
1595
1595
|
var lastIndexBC = (breadcrumbSplitText === null || breadcrumbSplitText === void 0 ? void 0 : breadcrumbSplitText.length) - 1;
|
|
1596
1596
|
var haveDetailTitle = detailTitle !== '';
|
|
1597
|
-
var detailTileStyle = detailTitle ? styles$
|
|
1597
|
+
var detailTileStyle = detailTitle ? styles$2U['no-transform'] : '';
|
|
1598
1598
|
var regexBase4 = /[0-9a-f]{8} [0-9a-f]{4} [0-9a-f]{4} [0-9a-f]{4} [0-9a-f]{12}/g;
|
|
1599
1599
|
// This removes the base64 from the vacancy breadcrumbs
|
|
1600
1600
|
var title = breadcrumbSplitText[lastIndexBC].replace(/-/g, ' ').replace(regexBase4, '');
|
|
@@ -1606,9 +1606,9 @@ var Component$32 = function (_a) {
|
|
|
1606
1606
|
"/ ",
|
|
1607
1607
|
href)));
|
|
1608
1608
|
}),
|
|
1609
|
-
React.createElement("p", { className: "".concat(styles$
|
|
1609
|
+
React.createElement("p", { className: "".concat(styles$2U['magneto-ui-bc-active'], " ").concat(detailTileStyle) },
|
|
1610
1610
|
"/ ",
|
|
1611
|
-
haveDetailTitle ? detailTitle : title))) : (React.createElement(React.Fragment, null, breadcrumbSplitText.map(function (bc, i) { return (React.createElement("p", { className: "".concat(lastIndexBC == i ? styles$
|
|
1611
|
+
haveDetailTitle ? detailTitle : title))) : (React.createElement(React.Fragment, null, breadcrumbSplitText.map(function (bc, i) { return (React.createElement("p", { className: "".concat(lastIndexBC == i ? styles$2U['magneto-ui-bc-active'] : '', " ").concat(styles$2U['magneto-ui-bc']), key: i },
|
|
1612
1612
|
i > 0 && '/',
|
|
1613
1613
|
" ",
|
|
1614
1614
|
bc)); })));
|
|
@@ -1624,28 +1624,28 @@ var Component$32 = function (_a) {
|
|
|
1624
1624
|
queryParams,
|
|
1625
1625
|
lastIndexBC
|
|
1626
1626
|
]);
|
|
1627
|
-
return React.createElement("div", { className: styles$
|
|
1627
|
+
return React.createElement("div", { className: styles$2U.breadcrumbComponent }, breadCrumbsRender);
|
|
1628
1628
|
};
|
|
1629
1629
|
/**
|
|
1630
1630
|
* Atom UI of breadcrumb
|
|
1631
1631
|
*/
|
|
1632
1632
|
var Breadcrumb = Component$32;
|
|
1633
1633
|
|
|
1634
|
-
var styles$
|
|
1634
|
+
var styles$2T = {"magneto-ui-button":"mg_button_magneto-ui-button_2zrcl","magneto-ui-button__mobile-text":"mg_button_magneto-ui-button_mobile-text_2zrcl","magneto-ui-button__icon":"mg_button_magneto-ui-button_icon_2zrcl","hover-effect":"mg_button_hover-effect_2zrcl"};
|
|
1635
1635
|
|
|
1636
1636
|
var Component$31 = function (_a) {
|
|
1637
1637
|
var buttonText = _a.buttonText, buttonTitle = _a.buttonTitle, addHover = _a.addHover, onClick = _a.onClick, suffixIcon = _a.suffixIcon, prefixIcon = _a.prefixIcon, className = _a.className, _b = _a.iconSize, iconSize = _b === void 0 ? 20 : _b;
|
|
1638
|
-
return (React.createElement("button", { className: "".concat(className, " ").concat(styles$
|
|
1639
|
-
typeof suffixIcon === 'string' ? (React.createElement(IconItem, { size: iconSize, icon: suffixIcon, hover: addHover, className: styles$
|
|
1640
|
-
buttonText && React.createElement("p", { className: styles$
|
|
1641
|
-
typeof prefixIcon === 'string' ? (React.createElement(IconItem, { size: iconSize, icon: prefixIcon, hover: addHover, className: styles$
|
|
1638
|
+
return (React.createElement("button", { className: "".concat(className, " ").concat(styles$2T['magneto-ui-button'], " ").concat(addHover ? styles$2T['hover-effect'] : '', " "), type: "button", onClick: onClick, title: buttonTitle },
|
|
1639
|
+
typeof suffixIcon === 'string' ? (React.createElement(IconItem, { size: iconSize, icon: suffixIcon, hover: addHover, className: styles$2T['magneto-ui-button__icon'] })) : (suffixIcon),
|
|
1640
|
+
buttonText && React.createElement("p", { className: styles$2T['magneto-ui-button__mobile-text'] }, buttonText),
|
|
1641
|
+
typeof prefixIcon === 'string' ? (React.createElement(IconItem, { size: iconSize, icon: prefixIcon, hover: addHover, className: styles$2T['magneto-ui-button__icon'] })) : (prefixIcon)));
|
|
1642
1642
|
};
|
|
1643
1643
|
/**
|
|
1644
1644
|
* UI Atom Component of Save Button
|
|
1645
1645
|
*/
|
|
1646
1646
|
var Button = Component$31;
|
|
1647
1647
|
|
|
1648
|
-
var styles$
|
|
1648
|
+
var styles$2S = {"button-link":"mg_button_link_button-link_1iyy1","button-link__text":"mg_button_link_button-link_text_1iyy1"};
|
|
1649
1649
|
|
|
1650
1650
|
var Component$30 = function (_a) {
|
|
1651
1651
|
var buttonText = _a.buttonText, onClick = _a.onClick, suffixIcon = _a.suffixIcon, prefixIcon = _a.prefixIcon, className = _a.className, _b = _a.iconSize, iconSize = _b === void 0 ? 20 : _b, href = _a.href, rel = _a.rel, target = _a.target;
|
|
@@ -1655,19 +1655,19 @@ var Component$30 = function (_a) {
|
|
|
1655
1655
|
onClick();
|
|
1656
1656
|
}
|
|
1657
1657
|
}, [onClick]);
|
|
1658
|
-
return (React.createElement("a", { className: "".concat(className ? className : styles$
|
|
1659
|
-
suffixIcon && (React.createElement(IconItem, { size: iconSize, icon: suffixIcon, hover: true, className: styles$
|
|
1660
|
-
buttonText && React.createElement("p", { className: styles$
|
|
1661
|
-
prefixIcon && (React.createElement(IconItem, { size: iconSize, icon: prefixIcon, hover: true, className: styles$
|
|
1658
|
+
return (React.createElement("a", { className: "".concat(className ? className : styles$2S['button-link']), type: "button", onClick: handleClick, href: href, rel: rel, target: target },
|
|
1659
|
+
suffixIcon && (React.createElement(IconItem, { size: iconSize, icon: suffixIcon, hover: true, className: styles$2S['button-link__icon'] })),
|
|
1660
|
+
buttonText && React.createElement("p", { className: styles$2S['button-link__text'] }, buttonText),
|
|
1661
|
+
prefixIcon && (React.createElement(IconItem, { size: iconSize, icon: prefixIcon, hover: true, className: styles$2S['button-link__icon'] }))));
|
|
1662
1662
|
};
|
|
1663
1663
|
/**
|
|
1664
1664
|
* UI Atom Component of Save Button
|
|
1665
1665
|
*/
|
|
1666
1666
|
var ButtonLink = Component$30;
|
|
1667
1667
|
|
|
1668
|
-
var styles$
|
|
1668
|
+
var styles$2R = {"checkbox":"mg_checkbox_checkbox_1w9e7","checkbox--inline":"mg_checkbox_checkbox--inline_1w9e7","checkbox--block":"mg_checkbox_checkbox--block_1w9e7","checkbox--background":"mg_checkbox_checkbox--background_1w9e7","checkbox--checked":"mg_checkbox_checkbox--checked_1w9e7","custom-checked":"mg_checkbox_custom-checked_1w9e7","checkbox__box":"mg_checkbox_checkbox_box_1w9e7","checkbox__box--checked":"mg_checkbox_checkbox_box--checked_1w9e7"};
|
|
1669
1669
|
|
|
1670
|
-
var cx$1c = classNames.bind(styles$
|
|
1670
|
+
var cx$1c = classNames.bind(styles$2R);
|
|
1671
1671
|
var defaultCheck = function (_a) {
|
|
1672
1672
|
var type = _a.type, checked = _a.checked;
|
|
1673
1673
|
if (type === 'background')
|
|
@@ -1719,9 +1719,9 @@ var context$2 = /*#__PURE__*/Object.freeze({
|
|
|
1719
1719
|
useCollapse: useCollapse
|
|
1720
1720
|
});
|
|
1721
1721
|
|
|
1722
|
-
var styles$
|
|
1722
|
+
var styles$2Q = {"magneto-ui-collapse-body":"mg_collapse_body_magneto-ui-collapse-body_1sj1m","magneto-ui-collapse-body--visible":"mg_collapse_body_magneto-ui-collapse-body--visible_1sj1m","magneto-ui-collapse-body__container":"mg_collapse_body_magneto-ui-collapse-body_container_1sj1m","magneto-ui-collapse-body__container--visible":"mg_collapse_body_magneto-ui-collapse-body_container--visible_1sj1m","magneto-ui-collapse-body__content":"mg_collapse_body_magneto-ui-collapse-body_content_1sj1m","magneto-ui-collapse-body__content--visible":"mg_collapse_body_magneto-ui-collapse-body_content--visible_1sj1m"};
|
|
1723
1723
|
|
|
1724
|
-
var cx$1b = classNames.bind(styles$
|
|
1724
|
+
var cx$1b = classNames.bind(styles$2Q);
|
|
1725
1725
|
var Component$2_ = function (_a) {
|
|
1726
1726
|
var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
|
|
1727
1727
|
var open = useCollapse().open;
|
|
@@ -1740,9 +1740,9 @@ var Component$2_ = function (_a) {
|
|
|
1740
1740
|
*/
|
|
1741
1741
|
var CollapseBody = Component$2_;
|
|
1742
1742
|
|
|
1743
|
-
var styles$
|
|
1743
|
+
var styles$2P = {"magneto-ui-collapse-header":"mg_collapse_header_magneto-ui-collapse-header_1wc3x"};
|
|
1744
1744
|
|
|
1745
|
-
var cx$1a = classNames.bind(styles$
|
|
1745
|
+
var cx$1a = classNames.bind(styles$2P);
|
|
1746
1746
|
var Component$2Z = function (_a) {
|
|
1747
1747
|
var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
|
|
1748
1748
|
return (React.createElement("header", __assign({ className: cx$1a('magneto-ui-collapse-header', className) }, props), children));
|
|
@@ -1752,9 +1752,9 @@ var Component$2Z = function (_a) {
|
|
|
1752
1752
|
*/
|
|
1753
1753
|
var CollapseHeader = Component$2Z;
|
|
1754
1754
|
|
|
1755
|
-
var styles$
|
|
1755
|
+
var styles$2O = {"magneto-ui-collapse-toggler":"mg_collapse_toggler_magneto-ui-collapse-toggler_1ngmx"};
|
|
1756
1756
|
|
|
1757
|
-
var cx$19 = classNames.bind(styles$
|
|
1757
|
+
var cx$19 = classNames.bind(styles$2O);
|
|
1758
1758
|
var Component$2Y = function (_a) {
|
|
1759
1759
|
var children = _a.children, className = _a.className, onClick = _a.onClick, props = __rest(_a, ["children", "className", "onClick"]);
|
|
1760
1760
|
var _b = useCollapse(), open = _b.open, onChangeOpen = _b.onChangeOpen;
|
|
@@ -1780,7 +1780,7 @@ var Component$2X = function (_a) {
|
|
|
1780
1780
|
*/
|
|
1781
1781
|
var Collapse = Object.assign(Component$2X, __assign({ Body: CollapseBody, Header: CollapseHeader, Toggler: CollapseToggler }, context$2));
|
|
1782
1782
|
|
|
1783
|
-
var styles$
|
|
1783
|
+
var styles$2N = {"magneto-ui-comparative-counter":"mg_comparative_counter_magneto-ui-comparative-counter_1ue4r","error-label":"mg_comparative_counter_error-label_1ue4r"};
|
|
1784
1784
|
|
|
1785
1785
|
var nf = new Intl.NumberFormat('de-DE');
|
|
1786
1786
|
var Component$2W = function (_a) {
|
|
@@ -1788,7 +1788,7 @@ var Component$2W = function (_a) {
|
|
|
1788
1788
|
var currentHigherMax = useMemo(function () {
|
|
1789
1789
|
return current > max;
|
|
1790
1790
|
}, [current, max]);
|
|
1791
|
-
return (React.createElement("p", { style: { textAlign: position }, className: "".concat(styles$
|
|
1791
|
+
return (React.createElement("p", { style: { textAlign: position }, className: "".concat(styles$2N["".concat(classMUI, "-comparative-counter")], " ").concat(currentHigherMax ? styles$2N['error-label'] : '') },
|
|
1792
1792
|
nf.format(current),
|
|
1793
1793
|
React.createElement("span", null,
|
|
1794
1794
|
" / ",
|
|
@@ -1796,23 +1796,23 @@ var Component$2W = function (_a) {
|
|
|
1796
1796
|
};
|
|
1797
1797
|
var ComparativeCounter = Component$2W;
|
|
1798
1798
|
|
|
1799
|
-
var styles$
|
|
1799
|
+
var styles$2M = {"magneto-ui--date-dropdown__icon":"mg_date_dropdown_magneto-ui--date-dropdown_icon_1xs1p","magneto-ui--date-dropdown__wrapper":"mg_date_dropdown_magneto-ui--date-dropdown_wrapper_1xs1p","magneto-ui--date-dropdown__select":"mg_date_dropdown_magneto-ui--date-dropdown_select_1xs1p","magneto-ui--date-dropdown__option":"mg_date_dropdown_magneto-ui--date-dropdown_option_1xs1p"};
|
|
1800
1800
|
|
|
1801
1801
|
var Component$2V = function (_a) {
|
|
1802
1802
|
var placeholderLabel = _a.placeholderLabel, dateOptions = _a.dateOptions, _b = _a.selectedOption, selectedOption = _b === void 0 ? '' : _b, onOptionChanged = _a.onOptionChanged, _c = _a.disabled, disabled = _c === void 0 ? false : _c;
|
|
1803
1803
|
var disabledArrow = useMemo(function () {
|
|
1804
1804
|
if (disabled)
|
|
1805
|
-
return (React.createElement(IconItem, { className: styles$
|
|
1805
|
+
return (React.createElement(IconItem, { className: styles$2M['magneto-ui--date-dropdown__icon'], icon: ArrowDown2, alt: "arrow-icon", size: 24 }));
|
|
1806
1806
|
return React.createElement(IconItem, { icon: ArrowDown3, alt: "arrow-icon", size: 24 });
|
|
1807
1807
|
}, [disabled]);
|
|
1808
|
-
return (React.createElement("div", { className: styles$
|
|
1809
|
-
React.createElement("select", { className: styles$
|
|
1810
|
-
React.createElement("option", { className: styles$
|
|
1808
|
+
return (React.createElement("div", { className: styles$2M['magneto-ui--date-dropdown__wrapper'] },
|
|
1809
|
+
React.createElement("select", { className: styles$2M["magneto-ui--date-dropdown__select"], value: selectedOption, onChange: onOptionChanged, disabled: disabled },
|
|
1810
|
+
React.createElement("option", { className: styles$2M['magneto-ui--date-dropdown__option'], value: "", disabled: true, hidden: true }, placeholderLabel), dateOptions === null || dateOptions === void 0 ? void 0 :
|
|
1811
1811
|
dateOptions.map(function (_a) {
|
|
1812
1812
|
var optionValue = _a.optionValue, optionLabel = _a.optionLabel;
|
|
1813
|
-
return (React.createElement("option", { className: styles$
|
|
1813
|
+
return (React.createElement("option", { className: styles$2M['magneto-ui--date-dropdown__option'], key: optionValue, value: optionValue }, optionLabel));
|
|
1814
1814
|
})),
|
|
1815
|
-
React.createElement("span", { className: styles$
|
|
1815
|
+
React.createElement("span", { className: styles$2M['magneto-ui--date-dropdown__icon'] }, disabledArrow)));
|
|
1816
1816
|
};
|
|
1817
1817
|
var DateDropdown = Component$2V;
|
|
1818
1818
|
|
|
@@ -1869,7 +1869,7 @@ var fixArrayDate = function (array) {
|
|
|
1869
1869
|
return dateArray.setArray(array).fixMonth().getArray();
|
|
1870
1870
|
};
|
|
1871
1871
|
|
|
1872
|
-
var styles$
|
|
1872
|
+
var styles$2L = {"date-input":"mg_date_input_date-input_1o5wy","date-input__input":"mg_date_input_date-input_input_1o5wy","date-input__separator":"mg_date_input_date-input_separator_1o5wy","date-input__separator--filled":"mg_date_input_date-input_separator--filled_1o5wy","date-input--fit":"mg_date_input_date-input--fit_1o5wy","date-input--error":"mg_date_input_date-input--error_1o5wy","date-input__left":"mg_date_input_date-input_left_1o5wy","date-input__right":"mg_date_input_date-input_right_1o5wy"};
|
|
1873
1873
|
|
|
1874
1874
|
// placeholder to every input.
|
|
1875
1875
|
var placeholder = ['D', 'D', 'M', 'M', 'A', 'A', 'A', 'A'];
|
|
@@ -1980,50 +1980,50 @@ var Component$2U = function (_a) {
|
|
|
1980
1980
|
}
|
|
1981
1981
|
}, []);
|
|
1982
1982
|
return (React.createElement("div", { className: [
|
|
1983
|
-
styles$
|
|
1983
|
+
styles$2L['date-input'],
|
|
1984
1984
|
className,
|
|
1985
|
-
fit ? styles$
|
|
1986
|
-
hasError ? styles$
|
|
1985
|
+
fit ? styles$2L['date-input--fit'] : '',
|
|
1986
|
+
hasError ? styles$2L['date-input--error'] : ''
|
|
1987
1987
|
].join(' ') },
|
|
1988
|
-
React.createElement("div", { className: styles$
|
|
1988
|
+
React.createElement("div", { className: styles$2L['date-input__left'], onClick: function () {
|
|
1989
1989
|
var _a;
|
|
1990
1990
|
(_a = inputsRef.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
1991
1991
|
} }),
|
|
1992
1992
|
internalValues.map(function (value, index) { return (React.createElement(React.Fragment, { key: index },
|
|
1993
1993
|
[2, 4].includes(index) ? (
|
|
1994
1994
|
// include / separator in date (DD / MM / YYYY)
|
|
1995
|
-
React.createElement("span", { className: [styles$
|
|
1996
|
-
React.createElement("input", { className: styles$
|
|
1997
|
-
React.createElement("div", { className: styles$
|
|
1995
|
+
React.createElement("span", { className: [styles$2L['date-input__separator'], value ? styles$2L['date-input__separator--filled'] : ''].join(' ') }, "/")) : null,
|
|
1996
|
+
React.createElement("input", { className: styles$2L['date-input__input'], style: { width: width }, type: "text", maxLength: 1, value: value, placeholder: placeholder[index], onChange: function (e) { return handleChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e.key); }, onPaste: function (e) { return handlePaste(index, e); }, ref: function (el) { return (inputsRef.current[index] = el); }, inputMode: "numeric" }))); }),
|
|
1997
|
+
React.createElement("div", { className: styles$2L['date-input__right'], onClick: function () {
|
|
1998
1998
|
var _a;
|
|
1999
1999
|
(_a = inputsRef.current[inputsRef.current.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
2000
2000
|
} })));
|
|
2001
2001
|
};
|
|
2002
2002
|
var DateInput = Component$2U;
|
|
2003
2003
|
|
|
2004
|
-
var style$
|
|
2004
|
+
var style$14 = {"divider":"mg_divider_divider_1vn87"};
|
|
2005
2005
|
|
|
2006
2006
|
var Component$2T = function (_a) {
|
|
2007
2007
|
var _b = _a.direction, direction = _b === void 0 ? 'HORIZONTAL' : _b, _c = _a.spacing, spacing = _c === void 0 ? 0 : _c;
|
|
2008
2008
|
var inlineStyle = direction == 'HORIZONTAL'
|
|
2009
2009
|
? { width: 'calc(100% - 10px)', height: 1, margin: "".concat(spacing, "px 0px") }
|
|
2010
2010
|
: { width: 1, margin: "0px ".concat(spacing, "px ") };
|
|
2011
|
-
return React.createElement("div", { style: inlineStyle, className: style$
|
|
2011
|
+
return React.createElement("div", { style: inlineStyle, className: style$14.divider });
|
|
2012
2012
|
};
|
|
2013
2013
|
/**
|
|
2014
2014
|
* Atom UI Divider Component
|
|
2015
2015
|
*/
|
|
2016
2016
|
var Divider = Component$2T;
|
|
2017
2017
|
|
|
2018
|
-
var styles$
|
|
2018
|
+
var styles$2K = {"dots-loader":"mg_dots_loader_dots-loader_zwly0","dots-loader__dot":"mg_dots_loader_dots-loader_dot_zwly0","bounce":"mg_dots_loader_bounce_zwly0"};
|
|
2019
2019
|
|
|
2020
2020
|
var Component$2S = function (_a) {
|
|
2021
2021
|
var _b = _a.count, count = _b === void 0 ? 3 : _b, _c = _a.color, color = _c === void 0 ? '#000' : _c;
|
|
2022
|
-
return (React.createElement("div", { className: styles$
|
|
2022
|
+
return (React.createElement("div", { className: styles$2K['dots-loader'] }, Array.from({ length: count }).map(function (_, index) { return (React.createElement("span", { key: index, className: styles$2K['dots-loader__dot'], style: { animationDelay: "".concat(index * 0.2, "s"), backgroundColor: color } })); })));
|
|
2023
2023
|
};
|
|
2024
2024
|
var DotsLoader = Component$2S;
|
|
2025
2025
|
|
|
2026
|
-
var styles$
|
|
2026
|
+
var styles$2J = {"magneto-ui-flat-loader":"mg_flat_loader_magneto-ui-flat-loader_q96bq","rotation":"mg_flat_loader_rotation_q96bq"};
|
|
2027
2027
|
|
|
2028
2028
|
var Component$2R = function (_a) {
|
|
2029
2029
|
var color = _a.color, size = _a.size, secondColor = _a.secondColor;
|
|
@@ -2039,38 +2039,38 @@ var Component$2R = function (_a) {
|
|
|
2039
2039
|
height: '15px'
|
|
2040
2040
|
};
|
|
2041
2041
|
}, [size]);
|
|
2042
|
-
return (React.createElement("div", { style: __assign(__assign({}, loadingSize), { border: "2px solid ".concat(color || '#090467'), borderBottomColor: secondColor || 'white' }), className: styles$
|
|
2042
|
+
return (React.createElement("div", { style: __assign(__assign({}, loadingSize), { border: "2px solid ".concat(color || '#090467'), borderBottomColor: secondColor || 'white' }), className: styles$2J["".concat(classMUI, "-flat-loader")] }));
|
|
2043
2043
|
};
|
|
2044
2044
|
var FlatLoader = Component$2R;
|
|
2045
2045
|
|
|
2046
|
-
var styles$
|
|
2046
|
+
var styles$2I = {"headerTabComponent":"mg_header_tab_headerTabComponent_1mp3q","headerTabComponent__count":"mg_header_tab_headerTabComponent_count_1mp3q","headerTabComponent__text":"mg_header_tab_headerTabComponent_text_1mp3q"};
|
|
2047
2047
|
|
|
2048
2048
|
var Component$2Q = function (_a) {
|
|
2049
2049
|
var tabType = _a.tabType, tabText = _a.tabText, url = _a.url, isActive = _a.isActive, _b = _a.count, count = _b === void 0 ? 0 : _b;
|
|
2050
2050
|
var TabLink = tabType === 'tabOption' ? url : '';
|
|
2051
|
-
return (React.createElement(React.Fragment, null, tabType === 'tabTitle' ? (React.createElement("div", { className: styles$
|
|
2052
|
-
count > 0 && React.createElement(Badge, { number: count, className: styles$
|
|
2053
|
-
React.createElement("p", { className: styles$
|
|
2054
|
-
count > 0 && React.createElement(Badge, { number: count, className: styles$
|
|
2055
|
-
React.createElement("p", { className: styles$
|
|
2051
|
+
return (React.createElement(React.Fragment, null, tabType === 'tabTitle' ? (React.createElement("div", { className: styles$2I.headerTabComponent, "data-tab-type": "tabTitle" },
|
|
2052
|
+
count > 0 && React.createElement(Badge, { number: count, className: styles$2I['headerTabComponent__count'] }),
|
|
2053
|
+
React.createElement("p", { className: styles$2I['headerTabComponent__text'] }, tabText))) : (React.createElement("a", { className: styles$2I.headerTabComponent, href: TabLink, "data-tab-type": "tabOption", "data-is-active": isActive },
|
|
2054
|
+
count > 0 && React.createElement(Badge, { number: count, className: styles$2I['headerTabComponent__count'] }),
|
|
2055
|
+
React.createElement("p", { className: styles$2I['headerTabComponent__text'] }, tabText)))));
|
|
2056
2056
|
};
|
|
2057
2057
|
/**
|
|
2058
2058
|
* UI Atom component for HeaderTab
|
|
2059
2059
|
*/
|
|
2060
2060
|
var HeaderTab = Component$2Q;
|
|
2061
2061
|
|
|
2062
|
-
var styles$
|
|
2062
|
+
var styles$2H = {"magneto-ui-play-button":"mg_image_magneto-ui-play-button_7q9yc"};
|
|
2063
2063
|
|
|
2064
2064
|
var Image = function (_a) {
|
|
2065
2065
|
var image = _a.image, alt = _a.alt, playIcon = _a.playIcon, className = _a.className;
|
|
2066
2066
|
return (React.createElement(React.Fragment, null,
|
|
2067
2067
|
React.createElement("img", { src: image, alt: alt, loading: "lazy", className: className }),
|
|
2068
|
-
playIcon && React.createElement("div", { className: styles$
|
|
2068
|
+
playIcon && React.createElement("div", { className: styles$2H['magneto-ui-play-button'] }, playIcon)));
|
|
2069
2069
|
};
|
|
2070
2070
|
|
|
2071
|
-
var style$
|
|
2071
|
+
var style$13 = {"magneto-ui-input-file-button":"mg_input_file_button_magneto-ui-input-file-button_18zx0"};
|
|
2072
2072
|
|
|
2073
|
-
var cx$18 = classNames.bind(style$
|
|
2073
|
+
var cx$18 = classNames.bind(style$13);
|
|
2074
2074
|
var Component$2P = function (_a) {
|
|
2075
2075
|
var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
|
|
2076
2076
|
return (React.createElement("button", __assign({ className: cx$18('magneto-ui-input-file-button', className) }, props), children));
|
|
@@ -2080,9 +2080,9 @@ var Component$2P = function (_a) {
|
|
|
2080
2080
|
*/
|
|
2081
2081
|
var InputFileButton = Component$2P;
|
|
2082
2082
|
|
|
2083
|
-
var style$
|
|
2083
|
+
var style$12 = {"magneto-ui-input-file-container":"mg_input_file_container_magneto-ui-input-file-container_1b7ef"};
|
|
2084
2084
|
|
|
2085
|
-
var cx$17 = classNames.bind(style$
|
|
2085
|
+
var cx$17 = classNames.bind(style$12);
|
|
2086
2086
|
var Component$2O = function (_a) {
|
|
2087
2087
|
var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
|
|
2088
2088
|
return (React.createElement("div", __assign({ className: cx$17('magneto-ui-input-file-container', className) }, props), children));
|
|
@@ -2092,9 +2092,9 @@ var Component$2O = function (_a) {
|
|
|
2092
2092
|
*/
|
|
2093
2093
|
var InputFileContainer = Component$2O;
|
|
2094
2094
|
|
|
2095
|
-
var style$
|
|
2095
|
+
var style$11 = {"magneto-ui-input-file":"mg_input_file_magneto-ui-input-file_18kpr"};
|
|
2096
2096
|
|
|
2097
|
-
var cx$16 = classNames.bind(style$
|
|
2097
|
+
var cx$16 = classNames.bind(style$11);
|
|
2098
2098
|
var Component$2N = function (_a) {
|
|
2099
2099
|
var children = _a.children, className = _a.className, onChange = _a.onChange, props = __rest(_a, ["children", "className", "onChange"]);
|
|
2100
2100
|
var inputFileRef = useRef(null);
|
|
@@ -2130,39 +2130,39 @@ var InputFile = Object.assign(Component$2N, {
|
|
|
2130
2130
|
Container: InputFileContainer
|
|
2131
2131
|
});
|
|
2132
2132
|
|
|
2133
|
-
var style$
|
|
2133
|
+
var style$10 = {"magneto-ui-container":"mg_input_search_magneto-ui-container_171v5","magneto-ui-container__input-search":"mg_input_search_magneto-ui-container_input-search_171v5","magneto-ui-container__input-search--btn":"mg_input_search_magneto-ui-container_input-search--btn_171v5","magneto-ui-container__input-search--icon":"mg_input_search_magneto-ui-container_input-search--icon_171v5"};
|
|
2134
2134
|
|
|
2135
2135
|
var InputSearch = function (_a) {
|
|
2136
2136
|
var _b = _a.inputValue, inputValue = _b === void 0 ? '' : _b, onChange = _a.onChange, closeOnClick = _a.closeOnClick, placeholder = _a.placeholder, searchOnClick = _a.searchOnClick;
|
|
2137
2137
|
var hasASearchFunction = useMemo(function () {
|
|
2138
2138
|
if (searchOnClick) {
|
|
2139
|
-
return (React.createElement("button", { className: style$
|
|
2140
|
-
React.createElement(IconItem, { className: style$
|
|
2139
|
+
return (React.createElement("button", { className: style$10["".concat(classMUI, "-container__input-search--btn")], onClick: searchOnClick },
|
|
2140
|
+
React.createElement(IconItem, { className: style$10["".concat(classMUI, "-container__input-search--icon")], icon: SearchIcon, alt: "search-icon" })));
|
|
2141
2141
|
}
|
|
2142
|
-
return (React.createElement(IconItem, { className: style$
|
|
2142
|
+
return (React.createElement(IconItem, { className: style$10["".concat(classMUI, "-container__input-search--icon")], icon: SearchIcon, alt: "search-icon" }));
|
|
2143
2143
|
}, [searchOnClick]);
|
|
2144
|
-
return (React.createElement("div", { className: style$
|
|
2145
|
-
React.createElement("input", { className: style$
|
|
2146
|
-
inputValue.length !== 0 ? (React.createElement("button", { className: style$
|
|
2144
|
+
return (React.createElement("div", { className: style$10["".concat(classMUI, "-container")] },
|
|
2145
|
+
React.createElement("input", { className: style$10["".concat(classMUI, "-container__input-search")], placeholder: placeholder, style: { flex: 1 }, value: inputValue, onChange: onChange, type: "text" }),
|
|
2146
|
+
inputValue.length !== 0 ? (React.createElement("button", { className: style$10["".concat(classMUI, "-container__input-search--btn")], onClick: closeOnClick },
|
|
2147
2147
|
React.createElement(IconItem, { icon: Close, alt: "search-icon" }))) : (hasASearchFunction)));
|
|
2148
2148
|
};
|
|
2149
2149
|
|
|
2150
|
-
var styles$
|
|
2150
|
+
var styles$2G = {"magneto-ui-job-company-logo":"mg_job_company_logo_magneto-ui-job-company-logo_roy42"};
|
|
2151
2151
|
|
|
2152
2152
|
var Component$2M = function (_a) {
|
|
2153
2153
|
var offerCompanyLogo = _a.offerCompanyLogo;
|
|
2154
2154
|
if (typeof offerCompanyLogo === 'string' || !offerCompanyLogo) {
|
|
2155
|
-
return (React.createElement("div", { className: styles$
|
|
2155
|
+
return (React.createElement("div", { className: styles$2G['magneto-ui-job-company-logo'] },
|
|
2156
2156
|
React.createElement("img", { src: offerCompanyLogo ? offerCompanyLogo : NoLogo, loading: "lazy", width: '100px', height: '100px' })));
|
|
2157
2157
|
}
|
|
2158
|
-
return React.createElement("div", { className: styles$
|
|
2158
|
+
return React.createElement("div", { className: styles$2G['magneto-ui-job-company-logo'] }, offerCompanyLogo);
|
|
2159
2159
|
};
|
|
2160
2160
|
/**
|
|
2161
2161
|
* UI Atom component of Company Logo
|
|
2162
2162
|
*/
|
|
2163
2163
|
var JobCompanyLogo = Component$2M;
|
|
2164
2164
|
|
|
2165
|
-
var styles$
|
|
2165
|
+
var styles$2F = {"magneto-ui-job-header":"mg_job_header_magneto-ui-job-header_vn7ok","magneto-ui-job-header__title":"mg_job_header_magneto-ui-job-header_title_vn7ok","magneto-ui-job-header__subtitle":"mg_job_header_magneto-ui-job-header_subtitle_vn7ok","magneto-ui-job-header__link":"mg_job_header_magneto-ui-job-header_link_vn7ok"};
|
|
2166
2166
|
|
|
2167
2167
|
var Component$2L = function (_a) {
|
|
2168
2168
|
var title = _a.title, styles = _a.styles;
|
|
@@ -2188,16 +2188,16 @@ var Component$2J = function (_a) {
|
|
|
2188
2188
|
if (isHidden || !offerCompanyName)
|
|
2189
2189
|
return React.createElement(Fragment, null);
|
|
2190
2190
|
if (offerCompanyLink) {
|
|
2191
|
-
return (React.createElement("a", { className: styles$
|
|
2191
|
+
return (React.createElement("a", { className: styles$2F['magneto-ui-job-header__link'], href: offerCompanyLink, title: offerCompanyName }, offerCompanyName));
|
|
2192
2192
|
}
|
|
2193
|
-
return React.createElement("h2", { className: styles$
|
|
2193
|
+
return React.createElement("h2", { className: styles$2F['magneto-ui-job-header__subtitle'] }, offerCompanyName);
|
|
2194
2194
|
}, [isHidden, offerCompanyLink, offerCompanyName]);
|
|
2195
2195
|
var GenerateTitle = function () {
|
|
2196
2196
|
if (typeTitle === TYPE_TITLE.SUB_TITLE)
|
|
2197
|
-
return React.createElement(SubTitleJobDetails, { styles: styles$
|
|
2198
|
-
return React.createElement(MainTitleJobDetails, { styles: styles$
|
|
2197
|
+
return React.createElement(SubTitleJobDetails, { styles: styles$2F['magneto-ui-job-header__title'], title: String(offerTitle) });
|
|
2198
|
+
return React.createElement(MainTitleJobDetails, { styles: styles$2F['magneto-ui-job-header__title'], title: String(offerTitle) });
|
|
2199
2199
|
};
|
|
2200
|
-
return (React.createElement("div", { className: styles$
|
|
2200
|
+
return (React.createElement("div", { className: styles$2F['magneto-ui-job-header'] },
|
|
2201
2201
|
GenerateTitle(),
|
|
2202
2202
|
showCompanyName));
|
|
2203
2203
|
};
|
|
@@ -2206,7 +2206,7 @@ var Component$2J = function (_a) {
|
|
|
2206
2206
|
*/
|
|
2207
2207
|
var JobHeader = Component$2J;
|
|
2208
2208
|
|
|
2209
|
-
var styles$
|
|
2209
|
+
var styles$2E = {"linkComponent":"mg_link_linkComponent_1sftl"};
|
|
2210
2210
|
|
|
2211
2211
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2212
2212
|
var toCSSVariables = function (input) {
|
|
@@ -2225,7 +2225,7 @@ var toCSSVariables = function (input) {
|
|
|
2225
2225
|
var Component$2I = function (_a) {
|
|
2226
2226
|
var type = _a.type, href = _a.href, text = _a.text, title = _a.title, iconProps = _a.iconProps, linkStyles = _a.linkStyles, isMobile = _a.isMobile, rel = _a.rel, target = _a.target;
|
|
2227
2227
|
var stylesValue = useMemo(function () { return toCSSVariables(linkStyles); }, [linkStyles]);
|
|
2228
|
-
return (React.createElement("a", { className: styles$
|
|
2228
|
+
return (React.createElement("a", { className: styles$2E.linkComponent, style: stylesValue, href: href, title: title ? title : text, "data-link-type": type, "data-is-mobile": isMobile, rel: rel, target: target },
|
|
2229
2229
|
iconProps && React.createElement(IconItem, __assign({}, iconProps)),
|
|
2230
2230
|
!isMobile && React.createElement("p", null, text)));
|
|
2231
2231
|
};
|
|
@@ -2234,11 +2234,11 @@ var Component$2I = function (_a) {
|
|
|
2234
2234
|
*/
|
|
2235
2235
|
var Link = Component$2I;
|
|
2236
2236
|
|
|
2237
|
-
var styles$
|
|
2237
|
+
var styles$2D = {"loadingComponent":"mg_loading_loadingComponent_qi83n","animate":"mg_loading_animate_qi83n"};
|
|
2238
2238
|
|
|
2239
2239
|
var Component$2H = function (_a) {
|
|
2240
2240
|
var loadingIcon = _a.loadingIcon;
|
|
2241
|
-
return (React.createElement("div", { className: styles$
|
|
2241
|
+
return (React.createElement("div", { className: styles$2D.loadingComponent },
|
|
2242
2242
|
React.createElement(IconItem, __assign({}, loadingIcon))));
|
|
2243
2243
|
};
|
|
2244
2244
|
/**
|
|
@@ -2246,7 +2246,7 @@ var Component$2H = function (_a) {
|
|
|
2246
2246
|
*/
|
|
2247
2247
|
var Loading = Component$2H;
|
|
2248
2248
|
|
|
2249
|
-
var style
|
|
2249
|
+
var style$$ = {"magneto-ui-logo":"mg_logo_magneto-ui-logo_e7jog","magneto-ui-isologo":"mg_logo_magneto-ui-isologo_e7jog"};
|
|
2250
2250
|
|
|
2251
2251
|
var Component$2G = function (_a) {
|
|
2252
2252
|
var fallbackImage = _a.fallbackImage, _b = _a.showDefaultFallback, showDefaultFallback = _b === void 0 ? true : _b, _c = _a.isoView, isoView = _c === void 0 ? false : _c, logo = _a.logo, isoType = _a.isoType, alt = _a.alt;
|
|
@@ -2258,11 +2258,11 @@ var Component$2G = function (_a) {
|
|
|
2258
2258
|
var logoWidth = useMemo(function () { return (isoView ? 'magneto-ui-isologo' : 'magneto-ui-logo'); }, [isoView]);
|
|
2259
2259
|
if (!logoSrc && !showDefaultFallback)
|
|
2260
2260
|
return null;
|
|
2261
|
-
return (React.createElement("img", { className: style
|
|
2261
|
+
return (React.createElement("img", { className: style$$[logoWidth], src: logoSrc, alt: alt, width: isoView ? '25px' : '110px', height: "auto", loading: "lazy", onError: handleError }));
|
|
2262
2262
|
};
|
|
2263
2263
|
var LogoComponent = Component$2G;
|
|
2264
2264
|
|
|
2265
|
-
var styles$
|
|
2265
|
+
var styles$2C = {"MainButtonComponent":"mg_main_button_MainButtonComponent_lh5z0","disabled":"mg_main_button_disabled_lh5z0"};
|
|
2266
2266
|
|
|
2267
2267
|
var Component$2F = function (_a) {
|
|
2268
2268
|
var buttonType = _a.buttonType, buttonSize = _a.buttonSize, buttonText = _a.buttonText, buttonStyles = _a.buttonStyles, loadingState = _a.loadingState, iconProps = _a.iconProps, isMobile = _a.isMobile, className = _a.className, _b = _a.title, title = _b === void 0 ? '' : _b, disabled = _a.disabled, onClick = _a.onClick;
|
|
@@ -2277,21 +2277,21 @@ var Component$2F = function (_a) {
|
|
|
2277
2277
|
iconProps && React.createElement(IconItem, __assign({}, iconProps)),
|
|
2278
2278
|
!isMobile && React.createElement("p", null, buttonText)));
|
|
2279
2279
|
};
|
|
2280
|
-
return (React.createElement("button", { className: "".concat(styles$
|
|
2280
|
+
return (React.createElement("button", { className: "".concat(styles$2C.MainButtonComponent, " ").concat(className, " ").concat(disabled ? styles$2C.disabled : ''), type: buttonType, style: stylesValue, onClick: onClick, "data-button-size": buttonSize, "data-is-mobile": isMobile, title: title ? title : buttonText, disabled: disabled }, renderContent()));
|
|
2281
2281
|
};
|
|
2282
2282
|
/**
|
|
2283
2283
|
* Atom UI component of button for general purpose
|
|
2284
2284
|
*/
|
|
2285
2285
|
var MainButton = Component$2F;
|
|
2286
2286
|
|
|
2287
|
-
var styles$
|
|
2287
|
+
var styles$2B = {"magneto-ui-mega-menu-tab":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_f61nm","magneto-ui-mega-menu-tab__icon":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_icon_f61nm","magneto-ui-mega-menu-tab__selected":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_selected_f61nm","magneto-ui-mega-menu-tab__label":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_label_f61nm","magneto-ui-mega-menu-tab__label-selected":"mg_mega_menu_tab_magneto-ui-mega-menu-tab_label-selected_f61nm"};
|
|
2288
2288
|
|
|
2289
|
-
var styles$
|
|
2289
|
+
var styles$2A = {"magneto-ui--search-item":"mg_search_item_magneto-ui--search-item_15w47","magneto-ui--search-item__text":"mg_search_item_magneto-ui--search-item_text_15w47"};
|
|
2290
2290
|
|
|
2291
2291
|
var Component$2E = function (_a) {
|
|
2292
2292
|
var tag = _a.tag, url = _a.url, className = _a.className, _b = _a.icon, icon = _b === void 0 ? ArrowRight2 : _b;
|
|
2293
|
-
return (React.createElement("a", { title: tag, className: "".concat(className ? className : styles$
|
|
2294
|
-
React.createElement("p", { className: styles$
|
|
2293
|
+
return (React.createElement("a", { title: tag, className: "".concat(className ? className : styles$2A['magneto-ui--search-item']), href: url },
|
|
2294
|
+
React.createElement("p", { className: styles$2A['magneto-ui--search-item__text'] }, tag),
|
|
2295
2295
|
React.createElement(IconItem, { alt: "arrow icon", hover: false, icon: icon, size: 14 })));
|
|
2296
2296
|
};
|
|
2297
2297
|
/**
|
|
@@ -2306,21 +2306,21 @@ var MegaMenuTab = function (_a) {
|
|
|
2306
2306
|
return '';
|
|
2307
2307
|
return ArrowDown2;
|
|
2308
2308
|
}, [selected, showArrow]);
|
|
2309
|
-
return (React.createElement("div", { className: "".concat(styles$
|
|
2310
|
-
React.createElement(SearchItem, { tag: label, url: url, icon: icon, className: "".concat(styles$
|
|
2309
|
+
return (React.createElement("div", { className: "".concat(styles$2B["".concat(classMUI, "-mega-menu-tab")], " ").concat(selected ? styles$2B["".concat(classMUI, "-mega-menu-tab__selected")] : '') },
|
|
2310
|
+
React.createElement(SearchItem, { tag: label, url: url, icon: icon, className: "".concat(styles$2B["".concat(classMUI, "-mega-menu-tab__label")], " ").concat(selected ? styles$2B["".concat(classMUI, "-mega-menu-tab__label-selected")] : '') })));
|
|
2311
2311
|
};
|
|
2312
2312
|
|
|
2313
|
-
var styles$
|
|
2313
|
+
var styles$2z = {"magneto-ui-menu-dropdown-list":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_18usg","magneto-ui-menu-dropdown-list--visible":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list--visible_18usg","magneto-ui-menu-dropdown-list__container":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_container_18usg","magneto-ui-menu-dropdown-list__container--visible":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_container--visible_18usg","magneto-ui-menu-dropdown-list__children":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_children_18usg","magneto-ui-menu-dropdown-list__children--visible":"mg_menu_dropdown_list_magneto-ui-menu-dropdown-list_children--visible_18usg"};
|
|
2314
2314
|
|
|
2315
2315
|
var Component$2D = function (_a) {
|
|
2316
2316
|
var children = _a.children, listClassName = _a.listClassName, opened = _a.opened;
|
|
2317
|
-
return (React.createElement("div", { className: CNM.get({ styles: styles$
|
|
2317
|
+
return (React.createElement("div", { className: CNM.get({ styles: styles$2z, cls: ['menu-dropdown-list', opened && 'menu-dropdown-list--visible'] }) },
|
|
2318
2318
|
React.createElement("div", { className: CNM.get({
|
|
2319
|
-
styles: styles$
|
|
2319
|
+
styles: styles$2z,
|
|
2320
2320
|
cls: ['menu-dropdown-list__container', opened && 'menu-dropdown-list__container--visible']
|
|
2321
2321
|
}) },
|
|
2322
2322
|
React.createElement("div", { className: CNM.get({
|
|
2323
|
-
styles: styles$
|
|
2323
|
+
styles: styles$2z,
|
|
2324
2324
|
cls: ['menu-dropdown-list__children', opened && 'menu-dropdown-list__children--visible', listClassName]
|
|
2325
2325
|
}) }, children))));
|
|
2326
2326
|
};
|
|
@@ -2329,7 +2329,7 @@ var Component$2D = function (_a) {
|
|
|
2329
2329
|
*/
|
|
2330
2330
|
var MenuDropdownList = Component$2D;
|
|
2331
2331
|
|
|
2332
|
-
var styles$
|
|
2332
|
+
var styles$2y = {"magneto-ui-menu-dropdown__content":"mg_menu_dropdown_magneto-ui-menu-dropdown_content_v03jf","magneto-ui-menu-dropdown__container":"mg_menu_dropdown_magneto-ui-menu-dropdown_container_v03jf","magneto-ui-menu-dropdown__title":"mg_menu_dropdown_magneto-ui-menu-dropdown_title_v03jf","magneto-ui-menu-dropdown__suffix":"mg_menu_dropdown_magneto-ui-menu-dropdown_suffix_v03jf","magneto-ui-menu-dropdown__suffix--visible":"mg_menu_dropdown_magneto-ui-menu-dropdown_suffix--visible_v03jf"};
|
|
2333
2333
|
|
|
2334
2334
|
var Component$2C = function (_a) {
|
|
2335
2335
|
var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.listClassName, listClassName = _c === void 0 ? '' : _c, onClick = _a.onClick, opened = _a.opened, prefixIcon = _a.prefixIcon, _d = _a.suffixIcon, suffixIcon = _d === void 0 ? { icon: ArrowDownWhite } : _d, title = _a.title;
|
|
@@ -2346,13 +2346,13 @@ var Component$2C = function (_a) {
|
|
|
2346
2346
|
var handleButtonClick = useCallback(function (e) {
|
|
2347
2347
|
e.stopPropagation();
|
|
2348
2348
|
}, []);
|
|
2349
|
-
return (React.createElement("div", { className: CNM.get({ styles: styles$
|
|
2350
|
-
React.createElement("div", { className: CNM.get({ styles: styles$
|
|
2351
|
-
React.createElement("div", { className: CNM.get({ styles: styles$
|
|
2349
|
+
return (React.createElement("div", { className: CNM.get({ styles: styles$2y, cls: ['menu-dropdown', className] }), onClick: toggleOptions },
|
|
2350
|
+
React.createElement("div", { className: CNM.get({ styles: styles$2y, cls: ['menu-dropdown__content'] }) },
|
|
2351
|
+
React.createElement("div", { className: CNM.get({ styles: styles$2y, cls: ['menu-dropdown__container'] }) },
|
|
2352
2352
|
prefixIcon && React.createElement(IconItem, __assign({ size: 18 }, prefixIcon)),
|
|
2353
|
-
React.createElement("span", { className: CNM.get({ styles: styles$
|
|
2353
|
+
React.createElement("span", { className: CNM.get({ styles: styles$2y, cls: ['menu-dropdown__title'] }) }, title),
|
|
2354
2354
|
React.createElement("div", { className: CNM.get({
|
|
2355
|
-
styles: styles$
|
|
2355
|
+
styles: styles$2y,
|
|
2356
2356
|
cls: ['menu-dropdown__suffix', localOpened && 'menu-dropdown__suffix--visible']
|
|
2357
2357
|
}) },
|
|
2358
2358
|
React.createElement(IconItem, __assign({ size: 18 }, suffixIcon)))),
|
|
@@ -2364,18 +2364,18 @@ var Component$2C = function (_a) {
|
|
|
2364
2364
|
*/
|
|
2365
2365
|
var MenuDropdown = Component$2C;
|
|
2366
2366
|
|
|
2367
|
-
var style
|
|
2367
|
+
var style$_ = {"magneto-ui-menu-item":"mg_menu_items_magneto-ui-menu-item_1dxy3","is-active":"mg_menu_items_is-active_1dxy3"};
|
|
2368
2368
|
|
|
2369
2369
|
var MenuItem = function (_a) {
|
|
2370
2370
|
var _b = _a.url, url = _b === void 0 ? '#' : _b, _c = _a.text, text = _c === void 0 ? '' : _c, isActive = _a.isActive;
|
|
2371
|
-
var menuActive = isActive ? style
|
|
2371
|
+
var menuActive = isActive ? style$_['is-active'] : '';
|
|
2372
2372
|
return (React.createElement("div", null,
|
|
2373
|
-
React.createElement("a", { href: url, className: "".concat(style
|
|
2373
|
+
React.createElement("a", { href: url, className: "".concat(style$_['magneto-ui-menu-item'], " ").concat(menuActive) },
|
|
2374
2374
|
React.createElement(IconItem, { icon: ArrowRight2, hover: false }),
|
|
2375
2375
|
React.createElement("p", null, text))));
|
|
2376
2376
|
};
|
|
2377
2377
|
|
|
2378
|
-
var styles$
|
|
2378
|
+
var styles$2x = {"container":"mg_multi_range_slider_container_y44v2","slider":"mg_multi_range_slider_slider_y44v2","track":"mg_multi_range_slider_track_y44v2","range":"mg_multi_range_slider_range_y44v2","values":"mg_multi_range_slider_values_y44v2","left_value":"mg_multi_range_slider_left_value_y44v2","right_value":"mg_multi_range_slider_right_value_y44v2","thumb":"mg_multi_range_slider_thumb_y44v2","zIndex_3":"mg_multi_range_slider_zIndex_3_y44v2","zIndex_4":"mg_multi_range_slider_zIndex_4_y44v2","zIndex_5":"mg_multi_range_slider_zIndex_5_y44v2"};
|
|
2379
2379
|
|
|
2380
2380
|
var MultiRangeSlider = function (_a) {
|
|
2381
2381
|
var min = _a.min, max = _a.max, currentMin = _a.currentMin, currentMax = _a.currentMax, _b = _a.showValues, showValues = _b === void 0 ? true : _b, onChange = _a.onChange, currency = _a.currency, _c = _a.steps, steps = _c === void 0 ? 0 : _c, _d = _a.size, size = _d === void 0 ? 260 : _d, defaultMin = _a.defaultMin, defaultMax = _a.defaultMax;
|
|
@@ -2433,39 +2433,39 @@ var MultiRangeSlider = function (_a) {
|
|
|
2433
2433
|
var handleMouseUpValues = useCallback(function () {
|
|
2434
2434
|
onChange({ min: minVal, max: maxVal });
|
|
2435
2435
|
}, [minVal, maxVal, onChange]);
|
|
2436
|
-
return (React.createElement("div", { className: styles$
|
|
2436
|
+
return (React.createElement("div", { className: styles$2x.container },
|
|
2437
2437
|
React.createElement("input", { style: { width: size }, type: "range", min: min, max: max, step: steps, value: minVal, ref: minValRef, onMouseUp: handleMouseUpValues, onChange: function (event) {
|
|
2438
2438
|
var value = Math.min(+event.target.value, maxVal - 1);
|
|
2439
2439
|
setMinVal(value);
|
|
2440
2440
|
event.target.value = value.toString();
|
|
2441
|
-
}, className: "\n ".concat(styles$
|
|
2441
|
+
}, className: "\n ".concat(styles$2x.thumb, " \n ").concat(styles$2x.zIndex_3, " \n ").concat(minVal > max - 100 ? styles$2x.zIndex_5 : '', "\n ") }),
|
|
2442
2442
|
React.createElement("input", { type: "range", style: { width: size }, min: min, max: max, step: steps, value: maxVal, ref: maxValRef, onMouseUp: handleMouseUpValues, onChange: function (event) {
|
|
2443
2443
|
var value = Math.max(+event.target.value, minVal + 1);
|
|
2444
2444
|
setMaxVal(value);
|
|
2445
2445
|
event.target.value = value.toString();
|
|
2446
|
-
}, className: "".concat(styles$
|
|
2447
|
-
React.createElement("div", { style: { width: size }, className: styles$
|
|
2448
|
-
React.createElement("div", { className: styles$
|
|
2449
|
-
React.createElement("div", { ref: range, className: styles$
|
|
2450
|
-
showValues && (React.createElement("div", { className: styles$
|
|
2451
|
-
React.createElement("div", { className: styles$
|
|
2452
|
-
React.createElement("div", { className: styles$
|
|
2446
|
+
}, className: "".concat(styles$2x.thumb, " ").concat(styles$2x.zIndex_4) }),
|
|
2447
|
+
React.createElement("div", { style: { width: size }, className: styles$2x.slider },
|
|
2448
|
+
React.createElement("div", { className: styles$2x.track }),
|
|
2449
|
+
React.createElement("div", { ref: range, className: styles$2x.range }),
|
|
2450
|
+
showValues && (React.createElement("div", { className: styles$2x.values },
|
|
2451
|
+
React.createElement("div", { className: styles$2x.left_value }, hasCurrency),
|
|
2452
|
+
React.createElement("div", { className: styles$2x.right_value }, maxVal.toLocaleString()))))));
|
|
2453
2453
|
};
|
|
2454
2454
|
|
|
2455
|
-
var styles$
|
|
2455
|
+
var styles$2w = {"content":"mg_paragraph_content_1mtnz"};
|
|
2456
2456
|
|
|
2457
2457
|
var Component$2B = function (_a) {
|
|
2458
2458
|
var paragraph = _a.paragraph;
|
|
2459
|
-
return React.createElement("p", { className: styles$
|
|
2459
|
+
return React.createElement("p", { className: styles$2w.content }, paragraph);
|
|
2460
2460
|
};
|
|
2461
2461
|
var Paragraph = memo(Component$2B);
|
|
2462
2462
|
|
|
2463
|
-
var
|
|
2463
|
+
var styles$2v = {"magneto-ui-popover-container":"mg_popover_magneto-ui-popover-container_h7qn6","magneto-ui-popover":"mg_popover_magneto-ui-popover_h7qn6","magneto-ui-popover-children":"mg_popover_magneto-ui-popover-children_h7qn6","left":"mg_popover_left_h7qn6","right":"mg_popover_right_h7qn6","center":"mg_popover_center_h7qn6","top":"mg_popover_top_h7qn6","bottom":"mg_popover_bottom_h7qn6","show":"mg_popover_show_h7qn6","static-content":"mg_popover_static-content_h7qn6","hidden":"mg_popover_hidden_h7qn6"};
|
|
2464
2464
|
|
|
2465
2465
|
var Component$2A = function (_a) {
|
|
2466
|
-
var children = _a.children, content = _a.content, positionX = _a.positionX, positionY = _a.positionY, show = _a.show, widthBase = _a.widthBase, staticContent = _a.staticContent, _b = _a.className, className = _b === void 0 ? '' : _b;
|
|
2466
|
+
var children = _a.children, content = _a.content, positionX = _a.positionX, positionY = _a.positionY, show = _a.show, widthBase = _a.widthBase, staticContent = _a.staticContent, _b = _a.className, className = _b === void 0 ? '' : _b, style = _a.style;
|
|
2467
2467
|
var showMenu = show ? 'show' : 'hidden';
|
|
2468
|
-
var staticContentClass = staticContent ?
|
|
2468
|
+
var staticContentClass = staticContent ? styles$2v['static-content'] : '';
|
|
2469
2469
|
var _c = useState(false), hideComponent = _c[0], setHideComponent = _c[1];
|
|
2470
2470
|
useEffect(function () {
|
|
2471
2471
|
if (show) {
|
|
@@ -2477,9 +2477,9 @@ var Component$2A = function (_a) {
|
|
|
2477
2477
|
}, 300);
|
|
2478
2478
|
return function () { return clearTimeout(timer); };
|
|
2479
2479
|
}, [show]);
|
|
2480
|
-
return (React.createElement("div", { style: { width: widthBase }, className: [
|
|
2481
|
-
React.createElement("div", { className: "".concat(
|
|
2482
|
-
React.createElement("div", { className:
|
|
2480
|
+
return (React.createElement("div", { style: { width: widthBase }, className: [styles$2v['magneto-ui-popover-container'], staticContentClass, className].join(' ') },
|
|
2481
|
+
React.createElement("div", { className: "".concat(styles$2v['magneto-ui-popover'], " ").concat(styles$2v[positionX], " ").concat(styles$2v[positionY], " ").concat(styles$2v[showMenu]) }, hideComponent && content),
|
|
2482
|
+
React.createElement("div", { style: style, className: styles$2v['magneto-ui-popover-children'] }, children)));
|
|
2483
2483
|
};
|
|
2484
2484
|
/**
|
|
2485
2485
|
* Atom Ui component of popover
|
|
@@ -5686,10 +5686,11 @@ var SimilarJobsCard = function (_a) {
|
|
|
5686
5686
|
React.createElement(IconItem, { className: "".concat(styles$1e["".concat(classMUI, "-similar-jobs__arrow")]), icon: ArrowRight2, alt: "arow-right-icon" })));
|
|
5687
5687
|
};
|
|
5688
5688
|
|
|
5689
|
-
var style$z = {"magneto-ui-btn-menu":"mg_sort_menu_magneto-ui-btn-
|
|
5689
|
+
var style$z = {"magneto-ui-btn-menu":"mg_sort_menu_magneto-ui-btn-menu_1g7nr","magneto-ui-btn-text":"mg_sort_menu_magneto-ui-btn-text_1g7nr","disabled":"mg_sort_menu_disabled_1g7nr"};
|
|
5690
5690
|
|
|
5691
5691
|
var SortMenu = function (_a) {
|
|
5692
5692
|
var orderFields = _a.orderFields, textOrderFilter = _a.textOrderFilter, setFilter = _a.setFilter, _b = _a.clickOut, clickOut = _b === void 0 ? false : _b, loading = _a.loading, _c = _a.setClickOut, setClickOut = _c === void 0 ? function () { return ({}); } : _c;
|
|
5693
|
+
var buttonTextRef = useRef(null);
|
|
5693
5694
|
var listMenuProps = useMemo(function () {
|
|
5694
5695
|
return {
|
|
5695
5696
|
orderFields: orderFields,
|
|
@@ -5698,9 +5699,16 @@ var SortMenu = function (_a) {
|
|
|
5698
5699
|
textOrderFilter: textOrderFilter
|
|
5699
5700
|
};
|
|
5700
5701
|
}, [orderFields, textOrderFilter, setFilter, setClickOut]);
|
|
5701
|
-
|
|
5702
|
+
var getButtonWidth = function () {
|
|
5703
|
+
if (buttonTextRef.current) {
|
|
5704
|
+
var rect = buttonTextRef.current.getBoundingClientRect();
|
|
5705
|
+
return rect.width + 42;
|
|
5706
|
+
}
|
|
5707
|
+
return 180;
|
|
5708
|
+
};
|
|
5709
|
+
return (React.createElement(Popover, { widthBase: getButtonWidth(), show: clickOut, content: React.createElement(ListSortMenu, __assign({}, listMenuProps)), positionX: "left", positionY: "bottom", style: { height: '75%' } },
|
|
5702
5710
|
React.createElement("button", { className: "".concat(style$z['magneto-ui-btn-menu'], " ").concat(loading && style$z.disabled), title: textOrderFilter, onClick: function () { return setClickOut(!clickOut); }, disabled: loading },
|
|
5703
|
-
React.createElement("p", { className: style$z['magneto-ui-btn-text'] }, textOrderFilter),
|
|
5711
|
+
React.createElement("p", { className: style$z['magneto-ui-btn-text'], ref: buttonTextRef }, textOrderFilter),
|
|
5704
5712
|
React.createElement(IconItem, __assign({}, menuSortButton, { isRotate: clickOut })))));
|
|
5705
5713
|
};
|
|
5706
5714
|
var SortMenu$1 = withClickOut(SortMenu);
|
|
@@ -9584,11 +9592,12 @@ var SideFilter = function (_a) {
|
|
|
9584
9592
|
displayBackground));
|
|
9585
9593
|
};
|
|
9586
9594
|
|
|
9587
|
-
var styles = {"magneto-ui-sort-menu":"mg_sort_bar_magneto-ui-sort-
|
|
9595
|
+
var styles = {"magneto-ui-sort-menu":"mg_sort_bar_magneto-ui-sort-menu_1i5rn","magneto-ui-section-filter":"mg_sort_bar_magneto-ui-section-filter_1i5rn","magneto-ui-main-title":"mg_sort_bar_magneto-ui-main-title_1i5rn","magneto-ui-btn-text":"mg_sort_bar_magneto-ui-btn-text_1i5rn","magneto-ui-tooltip-quotas":"mg_sort_bar_magneto-ui-tooltip-quotas_1i5rn","magneto-ui-btn-menu":"mg_sort_bar_magneto-ui-btn-menu_1i5rn","magneto-ui-section-menu":"mg_sort_bar_magneto-ui-section-menu_1i5rn","magneto-ui-btn-order":"mg_sort_bar_magneto-ui-btn-order_1i5rn","hidden":"mg_sort_bar_hidden_1i5rn"};
|
|
9588
9596
|
|
|
9589
9597
|
var SortBar = function (_a) {
|
|
9590
9598
|
var textSortButton = _a.textSortButton, mainTitle = _a.mainTitle, filterSummary = _a.filterSummary, textOrderFilter = _a.textOrderFilter, orderFields = _a.orderFields, orderByText = _a.orderByText, loading = _a.loading, _b = _a.titleBtnOrder, titleBtnOrder = _b === void 0 ? '' : _b, setIsFiltersOpen = _a.setIsFiltersOpen, orderFilter = _a.orderFilter, setFilter = _a.setFilter, emptyVacant = _a.emptyVacant, infoMessageQuotas = _a.infoMessageQuotas, widthInfoMessage = _a.widthInfoMessage;
|
|
9591
9599
|
var _c = useState(false), showMenu = _c[0], setShowMenu = _c[1];
|
|
9600
|
+
var _d = useState(false), rotateOrderIcon = _d[0], setRotateOrderIcon = _d[1];
|
|
9592
9601
|
var tooltip = useMediaQuery(React.createElement(Tooltip, { title: infoMessageQuotas || '', position: "bottom", width: widthInfoMessage },
|
|
9593
9602
|
React.createElement("div", { className: "".concat(styles['magneto-ui-tooltip-quotas']) },
|
|
9594
9603
|
React.createElement("span", null, "?"))), { sm: React.createElement(Fragment, null) });
|
|
@@ -9600,14 +9609,18 @@ var SortBar = function (_a) {
|
|
|
9600
9609
|
var mainTitleByMediaQuery = useMediaQuery(React.createElement("h1", { className: styles['magneto-ui-main-title'] }, mainTitle), {
|
|
9601
9610
|
md: React.createElement(Fragment, null)
|
|
9602
9611
|
});
|
|
9612
|
+
var handleOrder = useCallback(function () {
|
|
9613
|
+
orderFilter();
|
|
9614
|
+
setRotateOrderIcon(!rotateOrderIcon);
|
|
9615
|
+
}, [rotateOrderIcon, orderFilter]);
|
|
9603
9616
|
var sortBarButtonAltRender = useMemo(function () {
|
|
9604
9617
|
if (emptyVacant)
|
|
9605
9618
|
return;
|
|
9606
9619
|
return (React.createElement("div", { className: styles['magneto-ui-section-menu'] },
|
|
9607
9620
|
sortMenu,
|
|
9608
|
-
React.createElement("button", { className: "".concat(styles['magneto-ui-btn-order'], " ").concat(styles.hidden), title: titleBtnOrder, onClick:
|
|
9609
|
-
React.createElement(IconItem, __assign({}, iconFilterOrder)))));
|
|
9610
|
-
}, [emptyVacant,
|
|
9621
|
+
React.createElement("button", { className: "".concat(styles['magneto-ui-btn-order'], " ").concat(styles.hidden), title: titleBtnOrder, onClick: handleOrder },
|
|
9622
|
+
React.createElement(IconItem, __assign({ isRotate: rotateOrderIcon }, iconFilterOrder)))));
|
|
9623
|
+
}, [emptyVacant, sortMenu, titleBtnOrder, handleOrder, rotateOrderIcon]);
|
|
9611
9624
|
return (React.createElement(Fragment, null,
|
|
9612
9625
|
React.createElement("div", { className: styles['magneto-ui-sort-menu'] },
|
|
9613
9626
|
React.createElement("div", { className: styles['magneto-ui-section-filter'] },
|