@linzjs/lui 21.43.0 → 21.44.1
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/CHANGELOG.md +14 -0
- package/dist/components/Toast/ToastBanner.d.ts +6 -0
- package/dist/index.js +78 -55
- package/dist/index.js.map +1 -1
- package/dist/lui.esm.js +78 -55
- package/dist/lui.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/lui.esm.js
CHANGED
|
@@ -25665,8 +25665,8 @@ function styleInject(css, ref) {
|
|
|
25665
25665
|
}
|
|
25666
25666
|
}
|
|
25667
25667
|
|
|
25668
|
-
var css_248z$
|
|
25669
|
-
styleInject(css_248z$
|
|
25668
|
+
var css_248z$n = ".LuiFloatingWindow-buttons {\n display: flex;\n align-items: center;\n}\n\n.LuiFloatingWindow-extra-buttons-divider {\n margin-right: 4px;\n margin-left: 8px;\n margin-top: -6px;\n font-size: x-large;\n opacity: 0.7;\n}\n\n.FloatingWindow-window {\n box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1490196078), 0px 6px 10px 0px rgba(0, 0, 0, 0.2509803922);\n position: absolute;\n background-color: #ffffff;\n top: 10%;\n left: 5%;\n display: flex;\n flex-direction: column;\n border-radius: 9px;\n}\n\n.FloatingWindow-container {\n display: flex;\n height: calc(100% - 50px);\n width: 100%;\n overflow: auto;\n}\n\n.FloatingWindow-header-element {\n flex: 0;\n}\n\n.FloatingWindow-header {\n height: 48px;\n line-height: 48px;\n color: #2a292c;\n padding: 0 8px;\n display: flex;\n overflow: hidden;\n justify-content: space-between;\n border-bottom: 2px #eaeaea solid;\n font-size: 1em;\n font-weight: 600;\n}\n\n.FloatingWindow-header-title-text {\n font-size: 1em;\n font-weight: 600;\n overflow: hidden;\n}\n\n.FloatingWindow-buttons {\n display: flex;\n align-items: center;\n}\n\n.FloatingWindow-extra-buttons-divider {\n margin-right: 4px;\n margin-left: 8px;\n margin-top: -6px;\n font-size: x-large;\n opacity: 0.7;\n}\n\n.FloatingWindowHeaderButton-button {\n padding: 0 0 0 8px;\n border: none;\n outline: none;\n border-radius: 50%;\n background-color: transparent;\n color: #6b6966;\n display: flex;\n}\n\n.FloatingWindowHeaderButton-icon {\n fill: #6b6966;\n}\n\n.floating-window-icon {\n display: inline-block;\n height: 24px;\n max-height: 24px;\n max-width: 24px;\n width: 24px;\n fill: #6b6966;\n}";
|
|
25669
|
+
styleInject(css_248z$n);
|
|
25670
25670
|
|
|
25671
25671
|
/**
|
|
25672
25672
|
* Overwrite the common buttons for floating window to
|
|
@@ -27861,8 +27861,8 @@ ReactSplitGrid.defaultProps = {
|
|
|
27861
27861
|
onDrag: undefined,
|
|
27862
27862
|
};
|
|
27863
27863
|
|
|
27864
|
-
var css_248z$
|
|
27865
|
-
styleInject(css_248z$
|
|
27864
|
+
var css_248z$m = ".LuiResizableLayout-leftPanel {\n display: flex;\n flex-direction: column;\n /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n the search result div scroll (instead of the whole page) */\n overflow: auto;\n}\n\n.LuiResizableLayout-rightPanel {\n display: flex;\n flex-direction: column;\n /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n the search result div scroll (instead of the whole page) */\n overflow: auto;\n}\n\n.LuiResizableLayout-leftPanelBody {\n overflow-y: auto;\n}\n\n.LuiResizableLayout-gutterParentControl {\n display: flex;\n /* use visibility and opacity instead of display: none as we want to be able to fade in on hover */\n visibility: hidden;\n opacity: 0;\n position: fixed;\n top: 50%;\n z-index: 500;\n margin-left: -30px; /*half total control width, minus half the gutter width*/\n transition: 0.3s all 2s ease-in;\n}\n\n.LuiResizableLayout-gutterControlLeft, .LuiResizableLayout-gutterControlRight {\n background-color: #eaeaea;\n width: 32px;\n height: 80px;\n text-align: center;\n display: flex;\n align-items: center;\n}\n\n.LuiResizableLayout-gutterControlLeft {\n border-radius: 3px 0 0 3px;\n}\n\n.LuiResizableLayout-gutterControlRight {\n border-radius: 0 3px 3px 0;\n}\n\n.LuiResizableLayout-gutterControlLeft > .LuiIcon, .LuiResizableLayout-gutterControlRight > .LuiIcon {\n height: auto;\n}\n\n.LuiResizableLayout-gutterControlLeft:hover, .LuiResizableLayout-gutterControlRight:hover {\n background-color: #73c8e1;\n cursor: pointer;\n}\n\n.LuiResizableLayout-gutterControl-collapsed {\n visibility: hidden;\n}\n\n/* TODO: move the expand gutter button so it doesn't show over the scroll bar */\n.LuiResizableLayout-gutterParentControlVisible {\n visibility: visible;\n opacity: 1;\n}\n\n.LuiResizableLayout-grid {\n display: grid;\n height: 100%;\n}\n\n.LuiResizableLayout-gutterCol {\n grid-row: 1/-1;\n cursor: col-resize;\n width: 16px;\n z-index: 1;\n}\n\n.LuiResizableLayout-gutterCol-collapsed {\n width: 4px;\n}\n\n.LuiResizableLayout-gutterCol1 {\n grid-column: 2;\n}\n\n.LuiResizableLayout-gutterCol:hover > .LuiResizableLayout-gutterParentControl {\n visibility: visible;\n opacity: 1;\n transition: 0s all 0s ease-in;\n}\n\n.LuiResizableLayout-gutterSlider {\n width: 4px;\n height: 100%;\n background-color: #eaeaea;\n pointer-events: none;\n}\n\n.LuiResizableLayout-gutterCol:hover .LuiResizableLayout-gutterSlider, .LuiResizableLayout-gutterCol:active .LuiResizableLayout-gutterSlider {\n background-color: #73c8e1;\n}";
|
|
27865
|
+
styleInject(css_248z$m);
|
|
27866
27866
|
|
|
27867
27867
|
var GutterComponent = function (props) {
|
|
27868
27868
|
var leftIcon = (React__default.createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "", status: "interactive" }));
|
|
@@ -31621,8 +31621,8 @@ var LuiTabsPanelSwitch = function (props) {
|
|
|
31621
31621
|
} }, tabProps), children));
|
|
31622
31622
|
};
|
|
31623
31623
|
|
|
31624
|
-
var css_248z$
|
|
31625
|
-
styleInject(css_248z$
|
|
31624
|
+
var css_248z$l = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiError {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: 600;\n margin-bottom: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.5rem;\n color: #2a292c;\n}\n.LuiError-errorIcon {\n vertical-align: middle;\n display: inline-block;\n}\n.LuiError-errorText {\n margin-left: 0.5rem;\n}";
|
|
31625
|
+
styleInject(css_248z$l);
|
|
31626
31626
|
|
|
31627
31627
|
var LuiError = function (_a) {
|
|
31628
31628
|
var error = _a.error, className = _a.className;
|
|
@@ -31984,8 +31984,8 @@ var LuiDateInput = React__default.forwardRef(function (_a, ref) {
|
|
|
31984
31984
|
return React__default.createElement(LuiTextInput, __assign({}, mapped, { ref: ref }));
|
|
31985
31985
|
});
|
|
31986
31986
|
|
|
31987
|
-
var css_248z$
|
|
31988
|
-
styleInject(css_248z$
|
|
31987
|
+
var css_248z$k = ".LuiTextInput.money input {\n background-image: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'> <text x='4' y='31' font-size='15' font-family='Open Sans, system-ui, sans-seri' text-anchor='middle'>$</text> </svg>\");\n background-position: 10px center;\n background-repeat: no-repeat;\n padding-left: 22px;\n line-height: unset;\n}";
|
|
31988
|
+
styleInject(css_248z$k);
|
|
31989
31989
|
|
|
31990
31990
|
var MoneyParser = /** @class */ (function () {
|
|
31991
31991
|
function MoneyParser(init, options) {
|
|
@@ -39637,9 +39637,9 @@ var StateManagedSelect = /*#__PURE__*/React__default.forwardRef(function (props,
|
|
|
39637
39637
|
|
|
39638
39638
|
var Select = StateManagedSelect;
|
|
39639
39639
|
|
|
39640
|
-
var css_248z$
|
|
39640
|
+
var css_248z$j = "";
|
|
39641
39641
|
var colors = {"charcoal":"#2a292c","fuscous":"#6b6966","gray":"#989189","silver":"#beb9b4","lily":"#eaeaea","dew":"#DAD7D6","hint":"#f9f9f9","snow":"#ffffff","white":"#ffffff","teal":"#00425d","sea":"#007198","electric":"#0096cc","spray":"#73c8e1","polar":"#e2f3f7","memesia":"#1F69C3","sherpa":"#004b50","surfie":"#017a76","persian":"#00a599","downy":"#73cdc8","iceberg":"#dcf5f0","sacramento":"#004e32","salem":"#08814d","pigment":"#0aa245","granny":"#9bd79b","panache":"#e9fae7","brand-primary":"#004b50","brand-secondary":"#017a76","engine":"#cc0000","carrot":"#EA6A2E","kendall":"#F5CCCC","elizabeth":"#FBDED0","andrea":"#3A7CDF","celestial":"#D7E5F9","golf":"#0AA345","error":"#cc0000","error-bg":"#F5CCCC","error-focus":"#5a0000","warning":"#EA6A2E","warning-bg":"#fbdfd2","warning-focus":"#b33a01","success":"#0aa245","success-bg":"#e9fae7","info":"#3A7CDF","info-bg":"#d8e5f9","visited":"#00425d","green-hover":"#107c3a","green-active":"#094a22","green-btn":"#0aa245","txt-link":"#1F69C3","primary-hover-btn":"#005678","selection":"#c7e9f3","heading-color":"#017a76","heading-color--secondary":"#2a292c","base-type-color":"#2a292c","input-text":"#2a292c","input-placeholder":"#6b6966","input-placeholder-when-disabled":"#989189","base-icon-color":"#007198","disabled-color":"#989189","disabled-color-dark":"#6b6966","linz-color-primary":"#023d48","linz-color-primary-hover":"#01818a","linz-color-tertiary":"#e1e44a","linz-color-tertiary-hover":"#cdcf59","color-test-pink":"#f09","linz-linear-gradient-blue":"linear-gradient(70deg, #00425d 12%, #007198 100%)","linz-linear-gradient-teal":"linear-gradient(270deg, #00a599 1%, #73cdc8 100%)"};
|
|
39642
|
-
styleInject(css_248z$
|
|
39642
|
+
styleInject(css_248z$j);
|
|
39643
39643
|
|
|
39644
39644
|
var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
|
|
39645
39645
|
|
|
@@ -42302,8 +42302,8 @@ var LuiAlertModalV2 = function (props) {
|
|
|
42302
42302
|
} }), children));
|
|
42303
42303
|
};
|
|
42304
42304
|
|
|
42305
|
-
var css_248z$
|
|
42306
|
-
styleInject(css_248z$
|
|
42305
|
+
var css_248z$i = "@keyframes react-loading-skeleton {\n 100% {\n transform: translateX(100%);\n }\n}\n\n.react-loading-skeleton {\n --base-color: #ebebeb;\n --highlight-color: #f5f5f5;\n --animation-duration: 1.5s;\n --animation-direction: normal;\n --pseudo-element-display: block; /* Enable animation */\n\n background-color: var(--base-color);\n\n width: 100%;\n border-radius: 0.25rem;\n display: inline-flex;\n line-height: 1;\n\n position: relative;\n user-select: none;\n overflow: hidden;\n z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */\n}\n\n.react-loading-skeleton::after {\n content: ' ';\n display: var(--pseudo-element-display);\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n background-repeat: no-repeat;\n background-image: linear-gradient(\n 90deg,\n var(--base-color),\n var(--highlight-color),\n var(--base-color)\n );\n transform: translateX(-100%);\n\n animation-name: react-loading-skeleton;\n animation-direction: var(--animation-direction);\n animation-duration: var(--animation-duration);\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n}\n\n@media (prefers-reduced-motion) {\n .react-loading-skeleton {\n --pseudo-element-display: none; /* Disable animation */\n }\n}\n";
|
|
42306
|
+
styleInject(css_248z$i);
|
|
42307
42307
|
|
|
42308
42308
|
/**
|
|
42309
42309
|
* @internal
|
|
@@ -42506,19 +42506,20 @@ var LuiSearchInput = function (props) {
|
|
|
42506
42506
|
}
|
|
42507
42507
|
}
|
|
42508
42508
|
function retrieveResults(input) {
|
|
42509
|
+
var _a;
|
|
42509
42510
|
return __awaiter(this, void 0, void 0, function () {
|
|
42510
42511
|
var results_1, items, selectedIdInResults;
|
|
42511
|
-
return __generator(this, function (
|
|
42512
|
-
switch (
|
|
42512
|
+
return __generator(this, function (_b) {
|
|
42513
|
+
switch (_b.label) {
|
|
42513
42514
|
case 0:
|
|
42514
|
-
if (!(input !== '' && input.length >= props.minCharactersForSearch)) return [3 /*break*/,
|
|
42515
|
+
if (!(input !== '' && input.length >= props.minCharactersForSearch)) return [3 /*break*/, 5];
|
|
42515
42516
|
setIsLoading(true);
|
|
42516
|
-
|
|
42517
|
+
_b.label = 1;
|
|
42517
42518
|
case 1:
|
|
42518
|
-
|
|
42519
|
+
_b.trys.push([1, , 3, 4]);
|
|
42519
42520
|
return [4 /*yield*/, props.getOptions(input)];
|
|
42520
42521
|
case 2:
|
|
42521
|
-
results_1 =
|
|
42522
|
+
results_1 = _b.sent();
|
|
42522
42523
|
items = flatten(results_1);
|
|
42523
42524
|
setResults(results_1);
|
|
42524
42525
|
selectedIdInResults = items.some(function (item) { return item.id === selectedId; });
|
|
@@ -42529,7 +42530,20 @@ var LuiSearchInput = function (props) {
|
|
|
42529
42530
|
case 3:
|
|
42530
42531
|
setIsLoading(false);
|
|
42531
42532
|
return [7 /*endfinally*/];
|
|
42532
|
-
case 4: return [
|
|
42533
|
+
case 4: return [3 /*break*/, 6];
|
|
42534
|
+
case 5:
|
|
42535
|
+
if (input !== '' &&
|
|
42536
|
+
input.length < props.minCharactersForSearch &&
|
|
42537
|
+
results.length > 0) {
|
|
42538
|
+
setResults([]);
|
|
42539
|
+
}
|
|
42540
|
+
else if (input === '' && results.length > 0) {
|
|
42541
|
+
setInputValue('');
|
|
42542
|
+
(_a = props.onClearCallback) === null || _a === void 0 ? void 0 : _a.call(props);
|
|
42543
|
+
setResults([]);
|
|
42544
|
+
}
|
|
42545
|
+
_b.label = 6;
|
|
42546
|
+
case 6: return [2 /*return*/];
|
|
42533
42547
|
}
|
|
42534
42548
|
});
|
|
42535
42549
|
});
|
|
@@ -47003,8 +47017,8 @@ var LuiSidePanelProvider = function (_a) {
|
|
|
47003
47017
|
React__default.createElement(LuiSidePanelContainer, __assign({}, props))));
|
|
47004
47018
|
};
|
|
47005
47019
|
|
|
47006
|
-
var css_248z$
|
|
47007
|
-
styleInject(css_248z$
|
|
47020
|
+
var css_248z$h = ".lui-switch-checkbox {\n height: 0;\n width: 0;\n visibility: hidden;\n}\n\n.lui-switch-label {\n display: flex;\n align-items: center;\n cursor: pointer;\n width: 40px;\n padding: 2px;\n background: #ffffff;\n border: 1px solid #007198;\n border-radius: 40px;\n position: relative;\n transition: background-color 0.2s;\n}\n\n.lui-switch-label .lui-switch-button {\n content: \"\";\n position: relative;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n transition: 0.2s;\n background: #007198;\n box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);\n}\n\n.lui-switch-label-checked {\n background: #007198;\n}\n.lui-switch-label-checked .lui-switch-button {\n transform: translateX(20px);\n background: #ffffff;\n}\n\n.lui-switch-checkbox:disabled + .lui-switch-label {\n background: #eaeaea;\n border: 1px solid #989189;\n}\n.lui-switch-checkbox:disabled + .lui-switch-label .lui-switch-button {\n background: #989189;\n}\n.lui-switch-checkbox:disabled + .lui-switch-label-checked {\n background: #989189;\n}\n.lui-switch-checkbox:disabled + .lui-switch-label-checked .lui-switch-button {\n background: #eaeaea;\n}";
|
|
47021
|
+
styleInject(css_248z$h);
|
|
47008
47022
|
|
|
47009
47023
|
var LuiSwitchButton = function (props) {
|
|
47010
47024
|
var generatedId = useGenerateOrDefaultId();
|
|
@@ -54635,8 +54649,8 @@ var LuiAccordicardStatic = function (props) {
|
|
|
54635
54649
|
React__default.createElement(LuiIcon, { className: clsx('LuiAccordicardStatic-chevron', isOpen ? 'LuiAccordicardStatic-chevron--isOpen' : null), name: 'ic_expand_more', alt: "expand", title: "Expand and collapse panel", size: "md" }))));
|
|
54636
54650
|
};
|
|
54637
54651
|
|
|
54638
|
-
var css_248z$
|
|
54639
|
-
styleInject(css_248z$
|
|
54652
|
+
var css_248z$g = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.lui-accordion {\n padding: 8px;\n display: flex;\n border-radius: 5px;\n box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);\n}\n.lui-accordion .chevron {\n transition: all 0.3s ease-in-out;\n transform: rotate(0);\n}\n.lui-accordion .chevron--isOpen {\n transform: rotate(180deg);\n}\n.lui-accordion .accordion-heading {\n padding: 4px;\n}\n.lui-accordion h4 {\n padding: 4px;\n}\n.lui-accordion > summary {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.lui-accordion > summary h4 {\n margin-top: 0;\n display: inline-block;\n}\n.lui-accordion > summary::marker, .lui-accordion > summary::-webkit-details-marker {\n display: none;\n}";
|
|
54653
|
+
styleInject(css_248z$g);
|
|
54640
54654
|
|
|
54641
54655
|
var LuiAccordion = function (props) {
|
|
54642
54656
|
var _a = props.expanded, expanded = _a === void 0 ? false : _a, heading = props.heading, children = props.children, _b = props.iconColor, iconColor = _b === void 0 ? '#017A76' : _b, className = props.className, _c = props.style, style = _c === void 0 ? {} : _c;
|
|
@@ -54747,8 +54761,8 @@ var LuiMultiSwitch = function (_a) {
|
|
|
54747
54761
|
React__default.createElement("div", { className: clsx('LuiMultiSwitch-labels', disabled && 'LuiMultiSwitch-disabled') }, options === null || options === void 0 ? void 0 : options.map(function (option, i) { return (React__default.createElement("label", { role: 'radio', key: i, htmlFor: id.current, "aria-disabled": option.disabled || disabled, "aria-checked": selectedIndex === i, className: option.className, onClick: function () { return select(i); }, onTouchStart: function () { return select(i); } }, option.text)); }))));
|
|
54748
54762
|
};
|
|
54749
54763
|
|
|
54750
|
-
var css_248z$
|
|
54751
|
-
styleInject(css_248z$
|
|
54764
|
+
var css_248z$f = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiListBox {\n padding: 0;\n list-style: none;\n}\n.LuiListBox .LuiListBoxItem {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: normal;\n user-select: none;\n color: #2a292c;\n line-height: 24px;\n outline: none;\n padding: 0.5rem 0.75rem;\n border: 2px solid transparent;\n}\n.LuiListBox .LuiListBoxItem:focus-visible {\n border-color: #007198;\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-selected {\n background: #e2f3f7;\n}\n.LuiListBox .LuiListBoxItem:hover, .LuiListBox .LuiListBoxItem.LuiListBoxItem-selected:hover {\n background: #d6eef4;\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-disabled {\n background: #eaeaea;\n}\n.LuiListBox .LuiListBox-emptyIndicator, .LuiListBox .LuiListBox-loadingIndicator {\n padding: 0.5rem 0.75rem;\n}\n.LuiListBox .LuiListBoxGroup .LuiListBoxGroup-heading {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n user-select: none;\n color: #6b6966;\n line-height: 16px;\n padding: 0.5rem 0.5rem;\n}";
|
|
54765
|
+
styleInject(css_248z$f);
|
|
54752
54766
|
|
|
54753
54767
|
function $c1d7fb2ec91bae71$var$Item(props) {
|
|
54754
54768
|
return null;
|
|
@@ -58248,16 +58262,16 @@ function DefaultEmptyIndicator() {
|
|
|
58248
58262
|
return React__default.createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
|
|
58249
58263
|
}
|
|
58250
58264
|
|
|
58251
|
-
var css_248z$
|
|
58252
|
-
styleInject(css_248z$
|
|
58265
|
+
var css_248z$e = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.RadioItemRenderer {\n display: flex;\n align-items: center;\n position: relative;\n padding: 0 0 0 2rem;\n}\n.RadioItemRenderer::before {\n content: \"\";\n height: 1.5rem;\n min-width: 1.5rem;\n width: 1.5rem;\n border: 2px solid #007198;\n border-radius: 50%;\n background-color: transparent;\n position: absolute;\n left: 0;\n top: 0;\n margin-right: 0.75rem;\n}\n.RadioItemRenderer:after {\n content: \"\";\n position: absolute;\n left: 5px;\n top: 5px;\n background-color: #007198;\n height: 14px;\n min-width: 14px;\n width: 14px;\n border-radius: 50%;\n opacity: 0;\n transition: opacity 0.3s ease-in-out;\n}\n.RadioItemRenderer-isSelected:after {\n opacity: 1;\n}";
|
|
58266
|
+
styleInject(css_248z$e);
|
|
58253
58267
|
|
|
58254
58268
|
function RadioItemRenderer(_a) {
|
|
58255
58269
|
var item = _a.item, isSelected = _a.isSelected;
|
|
58256
58270
|
return (React__default.createElement("div", { className: "RadioItemRenderer ".concat(isSelected ? 'RadioItemRenderer-isSelected' : '') }, item.label));
|
|
58257
58271
|
}
|
|
58258
58272
|
|
|
58259
|
-
var css_248z$
|
|
58260
|
-
styleInject(css_248z$
|
|
58273
|
+
var css_248z$d = ".CheckboxRenderer {\n display: flex;\n align-items: center;\n}";
|
|
58274
|
+
styleInject(css_248z$d);
|
|
58261
58275
|
|
|
58262
58276
|
function CheckboxItemRenderer(_a) {
|
|
58263
58277
|
var item = _a.item, isSelected = _a.isSelected;
|
|
@@ -58283,8 +58297,8 @@ function LuiSideMenuItem(_a) {
|
|
|
58283
58297
|
React__default.createElement("span", { className: "navText" }, label)))));
|
|
58284
58298
|
}
|
|
58285
58299
|
|
|
58286
|
-
var css_248z$
|
|
58287
|
-
styleInject(css_248z$
|
|
58300
|
+
var css_248z$c = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n@keyframes animate-stripes {\n 100% {\n background-position: 100px 0;\n }\n}\n.ProgressBar, .ProgressBar-PROC, .ProgressBar-COMP, .ProgressBar-FAIL {\n height: 5px;\n width: 100%;\n background-color: #eaeaea;\n border-radius: 3px;\n}\n.ProgressBar-FAIL {\n background-color: #cc0000;\n}\n.ProgressBar-COMP {\n background-color: #0aa245;\n}\n.ProgressBar-PROC {\n background-color: #0096cc;\n transition: width 0.3s ease-in-out;\n}\n.ProgressBar-PROC.indeterminate {\n background-image: linear-gradient(-45deg, transparent 25%, rgba(255, 255, 255, 0.75) 25%, rgba(255, 255, 255, 0.75) 75%, transparent 75%);\n background-size: 50px 100%;\n animation: animate-stripes 5s linear infinite;\n}";
|
|
58301
|
+
styleInject(css_248z$c);
|
|
58288
58302
|
|
|
58289
58303
|
var LuiProgressBar = function (_a) {
|
|
58290
58304
|
var value = _a.value, max = _a.max, error = _a.error, _b = _a.barHeight, barHeight = _b === void 0 ? '5px' : _b;
|
|
@@ -58312,8 +58326,8 @@ var LuiProgressBar = function (_a) {
|
|
|
58312
58326
|
React__default.createElement("div", { "data-testid": 'progress-bar-size', className: clsx("ProgressBar-".concat(status), { indeterminate: indeterminate }), style: { width: "".concat(percentage, "%"), height: barHeight } })));
|
|
58313
58327
|
};
|
|
58314
58328
|
|
|
58315
|
-
var css_248z$
|
|
58316
|
-
styleInject(css_248z$
|
|
58329
|
+
var css_248z$b = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.Toolbar {\n position: absolute;\n align-items: center;\n align-self: center;\n background: #ffffff;\n border-radius: 5px;\n display: flex;\n flex-direction: column;\n height: fit-content;\n margin: 0 0.75rem;\n padding: 0;\n width: fit-content;\n z-index: 1000;\n box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);\n}\n\n.Left {\n justify-self: start;\n}\n\n.Right {\n justify-self: end;\n}";
|
|
58330
|
+
styleInject(css_248z$b);
|
|
58317
58331
|
|
|
58318
58332
|
var ToolbarDirection;
|
|
58319
58333
|
(function (ToolbarDirection) {
|
|
@@ -58335,8 +58349,8 @@ var ToolbarIcon = function (_a) {
|
|
|
58335
58349
|
return iconImage ? (React__default.createElement("img", { className: "LuiIcon--lg", alt: iconName, src: iconImage })) : (React__default.createElement(LuiIcon, { name: iconName, alt: iconName, size: 'md' }));
|
|
58336
58350
|
};
|
|
58337
58351
|
|
|
58338
|
-
var css_248z$
|
|
58339
|
-
styleInject(css_248z$
|
|
58352
|
+
var css_248z$a = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.ToolbarButton {\n height: 40px;\n width: 40px;\n line-height: 12px;\n margin: 2px;\n padding: 0.25rem;\n}\n\n.ToolbarButton-placement {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.ToolbarButton img {\n border-radius: 3px;\n margin: -0.25rem;\n}\n\n.ToolbarButton,\n.ToolbarButton:hover,\n.ToolbarButton:disabled,\n.ToolbarButton:active:enabled {\n border-radius: 5px;\n border: 2px #ffffff solid !important;\n}\n\n.ToolbarItem-separator {\n height: 2px;\n background-color: #eaeaea;\n width: 100%;\n}";
|
|
58353
|
+
styleInject(css_248z$a);
|
|
58340
58354
|
|
|
58341
58355
|
/**
|
|
58342
58356
|
* Create button for using either LuiIcon or Image.
|
|
@@ -58399,8 +58413,8 @@ var useMediaQuery = function (query) {
|
|
|
58399
58413
|
return matches;
|
|
58400
58414
|
};
|
|
58401
58415
|
|
|
58402
|
-
var css_248z$
|
|
58403
|
-
styleInject(css_248z$
|
|
58416
|
+
var css_248z$9 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiCounter-round {\n background: #007198;\n color: #ffffff;\n text-align: center;\n width: 1.5em;\n height: 1.5em;\n border-radius: 50%;\n display: inline-block;\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n pointer-events: none;\n}";
|
|
58417
|
+
styleInject(css_248z$9);
|
|
58404
58418
|
|
|
58405
58419
|
var LuiCounter = React__default.forwardRef(function (props, ref) {
|
|
58406
58420
|
var selectedNum = props.selectedNum, totalNum = props.totalNum, _a = props.shape, shape = _a === void 0 ? 'rect' : _a, _b = props.countZero, countZero = _b === void 0 ? true : _b, title = props.title, className = props.className, rest = __rest(props, ["selectedNum", "totalNum", "shape", "countZero", "title", "className"]);
|
|
@@ -58415,8 +58429,8 @@ var LuiCounter = React__default.forwardRef(function (props, ref) {
|
|
|
58415
58429
|
return (React__default.createElement(React__default.Fragment, null, !(selectedNum === 0 && !countZero) && (React__default.createElement("span", __assign({ ref: ref, className: determineCounterClassname(), "data-testid": "lui-counter-number-".concat(shape), title: title !== null && title !== void 0 ? title : "".concat(selectedNum, " of ").concat(totalNum, " rows selected") }, rest), selectedNum.toLocaleString()))));
|
|
58416
58430
|
});
|
|
58417
58431
|
|
|
58418
|
-
var css_248z$
|
|
58419
|
-
styleInject(css_248z$
|
|
58432
|
+
var css_248z$8 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.lui-pagination-override-mobile .lui-pagination-desktop {\n display: none;\n visibility: hidden;\n opacity: 0;\n}\n.lui-pagination-override-mobile .lui-pagination-mobile {\n display: flex;\n}\n\n.lui-pagination-override-desktop .lui-pagination-mobile {\n display: none;\n visibility: hidden;\n opacity: 0;\n}\n.lui-pagination-override-desktop .lui-pagination-desktop {\n display: flex;\n}\n\n.lui-pagination-controller {\n container-type: inline-size;\n}\n@container (min-width: 500px) {\n .lui-pagination-controller .lui-pagination-mobile {\n display: none;\n visibility: hidden;\n opacity: 0;\n }\n .lui-pagination-controller .lui-pagination-desktop {\n display: flex;\n }\n}\n@container (max-width: 499px) {\n .lui-pagination-controller .lui-pagination-desktop {\n display: none;\n visibility: hidden;\n opacity: 0;\n }\n .lui-pagination-controller .lui-pagination-mobile {\n display: flex;\n }\n}\n\n.lui-pagination {\n display: flex;\n user-select: none;\n justify-content: center;\n}\n.lui-pagination-page-counter {\n display: flex;\n align-items: center;\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n.lui-pagination .lui-button {\n color: #2a292c;\n height: 40px;\n padding: 0.5rem 0.75rem;\n vertical-align: top;\n}\n.lui-pagination .lui-button .lui-pagination-navigation-icon {\n padding-top: 1px;\n}\n.lui-pagination .lui-button .lui-pagination-navigation-icon path {\n fill: #2a292c;\n}\n.lui-pagination .lui-button:hover {\n color: #2a292c;\n}\n.lui-pagination .lui-button-selected {\n background-color: #007198;\n color: #ffffff;\n}\n.lui-pagination-ellipsis {\n pointer-events: none;\n}\n.lui-pagination-navigate-disabled {\n pointer-events: none;\n}\n.lui-pagination-navigate-disabled .lui-pagination-navigation-icon {\n padding-top: 1px;\n}\n.lui-pagination-navigate-disabled .lui-pagination-navigation-icon path {\n fill: #989189 !important;\n}";
|
|
58433
|
+
styleInject(css_248z$8);
|
|
58420
58434
|
|
|
58421
58435
|
var LuiPagination = function (_a) {
|
|
58422
58436
|
var totalPages = _a.totalPages, currentPage = _a.currentPage, onPageChange = _a.onPageChange, _b = _a.isMobileLayout, isMobileLayout = _b === void 0 ? null : _b;
|
|
@@ -58526,11 +58540,11 @@ var LuiPagination = function (_a) {
|
|
|
58526
58540
|
React__default.createElement("div", { className: "pagination" }, renderPaginationNumbers())))));
|
|
58527
58541
|
};
|
|
58528
58542
|
|
|
58529
|
-
var css_248z$
|
|
58530
|
-
styleInject(css_248z$
|
|
58543
|
+
var css_248z$7 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.Separator {\n background-color: #eaeaea;\n position: absolute;\n display: flex;\n justify-content: space-around;\n transition-property: background-color;\n transition-delay: 750ms;\n transition-duration: 0ms;\n}\n.Separator-arrows {\n align-self: center;\n position: relative;\n opacity: 0;\n transition-property: opacity;\n transition-delay: 750ms;\n transition-duration: 0ms;\n}\n.Separator:focus-within, .Separator:hover, .Separator:focus, .Separator:active {\n background-color: #73c8e1;\n transition-delay: 0ms;\n transition-duration: 0ms;\n}\n.Separator:focus-within .Separator-arrows, .Separator:hover .Separator-arrows, .Separator:focus .Separator-arrows, .Separator:active .Separator-arrows {\n opacity: 1;\n transition-delay: 0ms;\n transition-duration: 0ms;\n display: inline-block;\n}";
|
|
58544
|
+
styleInject(css_248z$7);
|
|
58531
58545
|
|
|
58532
|
-
var css_248z$
|
|
58533
|
-
styleInject(css_248z$
|
|
58546
|
+
var css_248z$6 = ".Control {\n transition: opacity 0.2s ease;\n position: absolute;\n margin-left: 0 !important;\n display: flex;\n justify-content: space-around;\n align-items: center;\n}";
|
|
58547
|
+
styleInject(css_248z$6);
|
|
58534
58548
|
|
|
58535
58549
|
var useForkRef = function (forwardedRef) {
|
|
58536
58550
|
var localRef = useRef(null);
|
|
@@ -59259,8 +59273,8 @@ var keyDownHandler = function (e) {
|
|
|
59259
59273
|
return valueNow + delta;
|
|
59260
59274
|
};
|
|
59261
59275
|
|
|
59262
|
-
var css_248z$
|
|
59263
|
-
styleInject(css_248z$
|
|
59276
|
+
var css_248z$5 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.Splitter {\n display: grid;\n position: relative;\n overflow: hidden;\n opacity: 0;\n}\n.Splitter > :first-child, .Splitter > :nth-child(2) {\n position: relative;\n z-index: 0;\n overflow: auto;\n background: #ffffff;\n}\n.Splitter.resizing * {\n pointer-events: none;\n user-select: none;\n}";
|
|
59277
|
+
styleInject(css_248z$5);
|
|
59264
59278
|
|
|
59265
59279
|
/**
|
|
59266
59280
|
* Container that appends a separator when the children count equals 2.
|
|
@@ -59312,8 +59326,8 @@ var useSplitterRef = function () {
|
|
|
59312
59326
|
return { ref: ref, setRatio: setRatio };
|
|
59313
59327
|
};
|
|
59314
59328
|
|
|
59315
|
-
var css_248z$
|
|
59316
|
-
styleInject(css_248z$
|
|
59329
|
+
var css_248z$4 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiBannerV2 {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: normal;\n box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);\n font-size: 16px;\n display: grid;\n align-items: center;\n min-height: 3rem;\n position: relative;\n background-color: #ffffff;\n border-radius: 5px;\n padding-bottom: 0.5rem;\n padding-top: 0.5rem;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.LuiBannerV2 > :first-child {\n margin-top: 0;\n}\n.LuiBannerV2.has-level {\n padding-left: 3.25rem;\n border-left-width: 0.5rem;\n border-left-style: solid;\n}\n.LuiBannerV2.warning {\n border-left-color: #EA6A2E;\n}\n.LuiBannerV2.error {\n border-left-color: #cc0000;\n}\n.LuiBannerV2.info {\n border-left-color: #3A7CDF;\n}\n.LuiBannerV2.success {\n border-left-color: #0AA345;\n}\n.LuiBannerV2.can-dismiss {\n padding-right: 2.5rem;\n}\n.LuiBannerV2-Icon {\n position: absolute;\n left: 0.5rem;\n top: 0.5rem;\n}\n.LuiBannerV2-Icon.warning {\n color: #EA6A2E;\n}\n.LuiBannerV2-Icon.error {\n color: #cc0000;\n}\n.LuiBannerV2-Icon.info {\n color: #3A7CDF;\n}\n.LuiBannerV2-Icon.success {\n color: #0AA345;\n}\n.LuiBannerV2-Icon svg {\n fill: currentColor;\n}\n.LuiBannerV2-Dismiss {\n display: flex;\n position: absolute;\n right: 0.75rem;\n top: 50%;\n transform: translateY(-50%);\n background-color: transparent;\n padding: 0;\n}\n.LuiBannerV2-Dismiss svg {\n fill: #6b6966;\n}";
|
|
59330
|
+
styleInject(css_248z$4);
|
|
59317
59331
|
|
|
59318
59332
|
var LuiBannerV2 = forwardRef$1(function (_a, ref) {
|
|
59319
59333
|
var _b, _c, _d;
|
|
@@ -59332,8 +59346,8 @@ var LuiBannerV2 = forwardRef$1(function (_a, ref) {
|
|
|
59332
59346
|
onDismiss && (React__default.createElement("button", __assign({}, dismissButtonProps, { className: clsx('LuiBannerV2-Dismiss', dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps.className), "aria-label": (_b = dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps['aria-label']) !== null && _b !== void 0 ? _b : 'Dismiss', type: (_c = dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps.type) !== null && _c !== void 0 ? _c : 'button', onClick: onDismiss }), (_d = dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps.children) !== null && _d !== void 0 ? _d : (React__default.createElement(LuiIcon, { size: "md", name: "ic_clear", spanProps: { 'aria-hidden': true }, alt: "Dismiss" }))))));
|
|
59333
59347
|
});
|
|
59334
59348
|
|
|
59335
|
-
var css_248z$
|
|
59336
|
-
styleInject(css_248z$
|
|
59349
|
+
var css_248z$3 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.lui-color-picker,\n.lui-input-color-group {\n display: inline-grid;\n gap: 0.5rem;\n grid-template-columns: repeat(7, 1fr);\n}\n\ninput.lui-input-color-radio {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n white-space: nowrap;\n word-wrap: normal;\n}\ninput.lui-input-color-radio + label {\n width: 1.5rem;\n height: 1.5rem;\n border-radius: 1rem;\n cursor: pointer;\n border: none;\n}\ninput.lui-input-color-radio:checked + label {\n border: 0.125rem solid #ffffff;\n box-shadow: 0 0 0.125rem 0.0625rem rgba(0, 0, 0, 0.2509803922);\n transition: all 0.05s ease;\n}";
|
|
59350
|
+
styleInject(css_248z$3);
|
|
59337
59351
|
|
|
59338
59352
|
var defaultColours = [
|
|
59339
59353
|
{ color: '#FF0000', description: 'Red' },
|
|
@@ -59383,8 +59397,8 @@ var ColorPalette = forwardRef$1(function (_a, ref) {
|
|
|
59383
59397
|
})));
|
|
59384
59398
|
});
|
|
59385
59399
|
|
|
59386
|
-
var css_248z$
|
|
59387
|
-
styleInject(css_248z$
|
|
59400
|
+
var css_248z$2 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.ToastProvider {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n display: grid;\n grid-template-columns: repeat(3, auto);\n grid-template-areas: \"left center right\";\n padding: 1.5rem;\n z-index: 1200;\n}\n.ToastProvider .LuiBannerV2 {\n justify-content: flex-start;\n min-height: 4rem;\n min-width: 320px;\n max-width: min(50vw - 2rem, 400px);\n background-color: #f9f9f9;\n}\n.ToastProvider .LuiBannerV2-Icon {\n top: 50%;\n transform: translateY(-50%);\n}\n.ToastProvider .LuiBannerV2-Icon.warning {\n transform: translateY(calc(-50% - 1px));\n}\n.ToastProvider .LuiBannerV2 * {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: normal;\n font-weight: 400;\n}";
|
|
59401
|
+
styleInject(css_248z$2);
|
|
59388
59402
|
|
|
59389
59403
|
var topRightToastsHeight = function (portal) {
|
|
59390
59404
|
var _a, _b, _c, _d;
|
|
@@ -59455,8 +59469,8 @@ var getToastProviderEl = function () {
|
|
|
59455
59469
|
return portal;
|
|
59456
59470
|
};
|
|
59457
59471
|
|
|
59458
|
-
var css_248z = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.ToastSection {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n padding: 0.5rem;\n max-height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n /* IE and Edge */\n -ms-overflow-style: none;\n /* Firefox */\n scrollbar-width: none;\n /* Opera Safari Chrome */\n}\n.ToastSection::-webkit-scrollbar {\n display: none;\n}\n.ToastSection > :not(:last-child) {\n margin-bottom: 0.5rem;\n}\n.ToastSection [data-toastId] {\n pointer-events: all;\n}\n.ToastSection.topLeft {\n grid-area: left;\n}\n.ToastSection.topLeft [data-toastId] {\n margin-right: auto;\n max-height: 100vh;\n animation: 0.4s topLeftin forwards;\n}\n@keyframes topLeftin {\n 0% {\n opacity: 0;\n transform: translateX(-40%);\n }\n 100% {\n opacity: 1;\n transform: translate(0%);\n }\n}\n.ToastSection.topLeft [data-toastId].ItemDeleted {\n animation: 0.4s topLeftout forwards;\n}\n@keyframes topLeftout {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n transform: translateX(-40%);\n }\n 100% {\n opacity: 0;\n max-height: 0;\n margin-bottom: 0;\n }\n}\n.ToastSection.topCenter {\n grid-area: center;\n}\n.ToastSection.topCenter [data-toastId] {\n margin-left: auto;\n margin-right: auto;\n max-height: 100vh;\n animation: 0.4s topCenterin forwards;\n}\n@keyframes topCenterin {\n 0% {\n opacity: 0;\n transform: translateY(-40%);\n }\n 100% {\n opacity: 1;\n transform: translate(0%);\n }\n}\n.ToastSection.topCenter [data-toastId].ItemDeleted {\n animation: 0.4s topCenterout forwards;\n}\n@keyframes topCenterout {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n transform: translateY(-40%);\n }\n 100% {\n opacity: 0;\n max-height: 0;\n margin-bottom: 0;\n }\n}\n.ToastSection.topRight {\n grid-area: right;\n}\n.ToastSection.topRight [data-toastId] {\n margin-left: auto;\n max-height: 100vh;\n animation: 0.4s topRightin forwards;\n}\n@keyframes topRightin {\n 0% {\n opacity: 0;\n transform: translateX(40%);\n }\n 100% {\n opacity: 1;\n transform: translate(0%);\n }\n}\n.ToastSection.topRight [data-toastId].ItemDeleted {\n animation: 0.4s topRightout forwards;\n}\n@keyframes topRightout {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n transform: translateX(40%);\n }\n 100% {\n opacity: 0;\n max-height: 0;\n margin-bottom: 0;\n }\n}\n.ToastSection.bottomLeft {\n margin-right: auto;\n grid-area: left;\n margin-top: auto;\n}\n.ToastSection.bottomLeft [data-toastId] {\n animation: 0.4s bottomLeftin forwards;\n}\n@keyframes bottomLeftin {\n 0% {\n opacity: 0;\n max-height: 0;\n }\n 50% {\n max-height: 100vh;\n opacity: 0;\n transform: translateX(-40%);\n }\n 100% {\n opacity: 1;\n transform: translate(0%);\n }\n}\n.ToastSection.bottomLeft [data-toastId].ItemDeleted {\n animation: 0.4s bottomLeftout forwards;\n}\n@keyframes bottomLeftout {\n 0% {\n opacity: 1;\n max-height: 100vh;\n }\n 100% {\n opacity: 0;\n transform: translateX(-40%);\n }\n}\n.ToastSection.bottomCenter {\n grid-area: center;\n margin-top: auto;\n margin-left: auto;\n margin-right: auto;\n}\n.ToastSection.bottomCenter [data-toastId] {\n animation: 0.4s bottomCenterin forwards;\n}\n@keyframes bottomCenterin {\n 0% {\n opacity: 0;\n max-height: 0;\n }\n 50% {\n max-height: 100vh;\n opacity: 0;\n transform: translateY(40%);\n }\n 100% {\n opacity: 1;\n transform: translate(0%);\n }\n}\n.ToastSection.bottomCenter [data-toastId].ItemDeleted {\n animation: 0.4s bottomCenterout forwards;\n}\n@keyframes bottomCenterout {\n 0% {\n opacity: 1;\n max-height: 100vh;\n }\n 100% {\n opacity: 0;\n transform: translateY(-40%);\n }\n}\n.ToastSection.bottomRight {\n grid-area: right;\n margin-top: auto;\n}\n.ToastSection.bottomRight [data-toastId] {\n margin-left: auto;\n animation: 0.4s bottomRightin forwards;\n}\n@keyframes bottomRightin {\n 0% {\n opacity: 0;\n max-height: 0;\n }\n 50% {\n max-height: 100vh;\n opacity: 0;\n transform: translateX(40%);\n }\n 100% {\n opacity: 1;\n transform: translate(0%);\n }\n}\n.ToastSection.bottomRight [data-toastId].ItemDeleted {\n animation: 0.4s bottomRightout forwards;\n}\n@keyframes bottomRightout {\n 0% {\n opacity: 1;\n max-height: 100vh;\n }\n 100% {\n opacity: 0;\n transform: translateX(40%);\n }\n}";
|
|
59459
|
-
styleInject(css_248z);
|
|
59472
|
+
var css_248z$1 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.ToastSection {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n padding: 0.5rem;\n max-height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n /* IE and Edge */\n -ms-overflow-style: none;\n /* Firefox */\n scrollbar-width: none;\n /* Opera Safari Chrome */\n}\n.ToastSection::-webkit-scrollbar {\n display: none;\n}\n.ToastSection > :not(:last-child) {\n margin-bottom: 0.5rem;\n}\n.ToastSection [data-toastId] {\n pointer-events: all;\n}\n.ToastSection.topLeft {\n grid-area: left;\n}\n.ToastSection.topLeft [data-toastId] {\n margin-right: auto;\n max-height: 100vh;\n animation: 0.4s topLeftin forwards;\n}\n@keyframes topLeftin {\n 0% {\n opacity: 0;\n transform: translateX(-40%);\n }\n 100% {\n opacity: 1;\n transform: translate(0%);\n }\n}\n.ToastSection.topLeft [data-toastId].ItemDeleted {\n animation: 0.4s topLeftout forwards;\n}\n@keyframes topLeftout {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n transform: translateX(-40%);\n }\n 100% {\n opacity: 0;\n max-height: 0;\n margin-bottom: 0;\n }\n}\n.ToastSection.topCenter {\n grid-area: center;\n}\n.ToastSection.topCenter [data-toastId] {\n margin-left: auto;\n margin-right: auto;\n max-height: 100vh;\n animation: 0.4s topCenterin forwards;\n}\n@keyframes topCenterin {\n 0% {\n opacity: 0;\n transform: translateY(-40%);\n }\n 100% {\n opacity: 1;\n transform: translate(0%);\n }\n}\n.ToastSection.topCenter [data-toastId].ItemDeleted {\n animation: 0.4s topCenterout forwards;\n}\n@keyframes topCenterout {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n transform: translateY(-40%);\n }\n 100% {\n opacity: 0;\n max-height: 0;\n margin-bottom: 0;\n }\n}\n.ToastSection.topRight {\n grid-area: right;\n}\n.ToastSection.topRight [data-toastId] {\n margin-left: auto;\n max-height: 100vh;\n animation: 0.4s topRightin forwards;\n}\n@keyframes topRightin {\n 0% {\n opacity: 0;\n transform: translateX(40%);\n }\n 100% {\n opacity: 1;\n transform: translate(0%);\n }\n}\n.ToastSection.topRight [data-toastId].ItemDeleted {\n animation: 0.4s topRightout forwards;\n}\n@keyframes topRightout {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n transform: translateX(40%);\n }\n 100% {\n opacity: 0;\n max-height: 0;\n margin-bottom: 0;\n }\n}\n.ToastSection.bottomLeft {\n margin-right: auto;\n grid-area: left;\n margin-top: auto;\n}\n.ToastSection.bottomLeft [data-toastId] {\n animation: 0.4s bottomLeftin forwards;\n}\n@keyframes bottomLeftin {\n 0% {\n opacity: 0;\n max-height: 0;\n }\n 50% {\n max-height: 100vh;\n opacity: 0;\n transform: translateX(-40%);\n }\n 100% {\n opacity: 1;\n transform: translate(0%);\n }\n}\n.ToastSection.bottomLeft [data-toastId].ItemDeleted {\n animation: 0.4s bottomLeftout forwards;\n}\n@keyframes bottomLeftout {\n 0% {\n opacity: 1;\n max-height: 100vh;\n }\n 100% {\n opacity: 0;\n transform: translateX(-40%);\n }\n}\n.ToastSection.bottomCenter {\n grid-area: center;\n margin-top: auto;\n margin-left: auto;\n margin-right: auto;\n}\n.ToastSection.bottomCenter [data-toastId] {\n animation: 0.4s bottomCenterin forwards;\n}\n@keyframes bottomCenterin {\n 0% {\n opacity: 0;\n max-height: 0;\n }\n 50% {\n max-height: 100vh;\n opacity: 0;\n transform: translateY(40%);\n }\n 100% {\n opacity: 1;\n transform: translate(0%);\n }\n}\n.ToastSection.bottomCenter [data-toastId].ItemDeleted {\n animation: 0.4s bottomCenterout forwards;\n}\n@keyframes bottomCenterout {\n 0% {\n opacity: 1;\n max-height: 100vh;\n }\n 100% {\n opacity: 0;\n transform: translateY(-40%);\n }\n}\n.ToastSection.bottomRight {\n grid-area: right;\n margin-top: auto;\n}\n.ToastSection.bottomRight [data-toastId] {\n margin-left: auto;\n animation: 0.4s bottomRightin forwards;\n}\n@keyframes bottomRightin {\n 0% {\n opacity: 0;\n max-height: 0;\n }\n 50% {\n max-height: 100vh;\n opacity: 0;\n transform: translateX(40%);\n }\n 100% {\n opacity: 1;\n transform: translate(0%);\n }\n}\n.ToastSection.bottomRight [data-toastId].ItemDeleted {\n animation: 0.4s bottomRightout forwards;\n}\n@keyframes bottomRightout {\n 0% {\n opacity: 1;\n max-height: 100vh;\n }\n 100% {\n opacity: 0;\n transform: translateX(40%);\n }\n}";
|
|
59473
|
+
styleInject(css_248z$1);
|
|
59460
59474
|
|
|
59461
59475
|
var getToastSectionEl = function (position) {
|
|
59462
59476
|
var portal = getToastProviderEl();
|
|
@@ -59637,6 +59651,15 @@ var ToastProvider = function (_a) {
|
|
|
59637
59651
|
React.createElement(ToastContext.Provider, { value: dispatch }, children)));
|
|
59638
59652
|
};
|
|
59639
59653
|
|
|
59654
|
+
var css_248z = ".ToastBanner span[data-testid=toastMessageShow] {\n display: contents;\n}\n.ToastBanner span[data-testid=toastMessageShow] > :first-child {\n margin-top: 0;\n}";
|
|
59655
|
+
styleInject(css_248z);
|
|
59656
|
+
|
|
59657
|
+
var ToastBanner = function (_a) {
|
|
59658
|
+
var level = _a.level, onDismiss = _a.onDismiss, children = _a.children;
|
|
59659
|
+
return (React__default.createElement(LuiBannerV2, __assign({}, { level: level, onDismiss: onDismiss }, { "data-testid": "lui-msg-toast-show", dismissButtonProps: { 'aria-label': 'Close dialog' }, className: "ToastBanner" }),
|
|
59660
|
+
React__default.createElement("span", { "data-testid": "toastMessageShow" }, children)));
|
|
59661
|
+
};
|
|
59662
|
+
|
|
59640
59663
|
var getUniqueToastId = function () {
|
|
59641
59664
|
var _a;
|
|
59642
59665
|
var id = Number("".concat(Math.floor(Math.random() * 10000000)).slice(0, 4));
|
|
@@ -59661,7 +59684,7 @@ var toastFunctions = function (dispatch) {
|
|
|
59661
59684
|
var options = __assign(__assign({}, defaults), config);
|
|
59662
59685
|
return toast(function (_a) {
|
|
59663
59686
|
var onDismiss = _a.close;
|
|
59664
|
-
return (React.createElement(
|
|
59687
|
+
return (React.createElement(ToastBanner, __assign({}, { level: level, children: children, onDismiss: onDismiss })));
|
|
59665
59688
|
}, options);
|
|
59666
59689
|
};
|
|
59667
59690
|
};
|
|
@@ -59808,7 +59831,7 @@ var LuiToastMessageCompatibleInterface = function (props) {
|
|
|
59808
59831
|
if (display && !onceDismissed) {
|
|
59809
59832
|
var notification = function (_a) {
|
|
59810
59833
|
var close = _a.close;
|
|
59811
|
-
return React__default.createElement(
|
|
59834
|
+
return React__default.createElement(ToastBanner, __assign({}, { level: level, onDismiss: close, children: children }));
|
|
59812
59835
|
};
|
|
59813
59836
|
var options = {
|
|
59814
59837
|
timeout: requireDismiss || !displayTimeout ? Infinity : displayTimeout,
|