@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/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
## [21.44.1](https://github.com/linz/lui/compare/v21.44.0...v21.44.1) (2024-08-20)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* clean the last search result when empty the search input ([#1150](https://github.com/linz/lui/issues/1150)) ([fb5d306](https://github.com/linz/lui/commit/fb5d306d3e13e7e88a3f0c9b327beb3f43ab9768))
|
|
7
|
+
|
|
8
|
+
# [21.44.0](https://github.com/linz/lui/compare/v21.43.0...v21.44.0) (2024-08-11)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* TI-2553 add selector that are backwards compatible ([#1149](https://github.com/linz/lui/issues/1149)) ([62b7cb1](https://github.com/linz/lui/commit/62b7cb16109d2f680320aaa7f9370684387f9522))
|
|
14
|
+
|
|
1
15
|
# [21.43.0](https://github.com/linz/lui/compare/v21.42.0...v21.43.0) (2024-07-31)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import './ToastBanner.scss';
|
|
2
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
3
|
+
import { LuiBannerV2 } from '../LuiBannerV2/LuiBannerV2';
|
|
4
|
+
declare type Props = Pick<ComponentPropsWithoutRef<typeof LuiBannerV2>, 'level' | 'onDismiss' | 'children'>;
|
|
5
|
+
export declare const ToastBanner: ({ level, onDismiss, children }: Props) => JSX.Element;
|
|
6
|
+
export {};
|
package/dist/index.js
CHANGED
|
@@ -25694,8 +25694,8 @@ function styleInject(css, ref) {
|
|
|
25694
25694
|
}
|
|
25695
25695
|
}
|
|
25696
25696
|
|
|
25697
|
-
var css_248z$
|
|
25698
|
-
styleInject(css_248z$
|
|
25697
|
+
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}";
|
|
25698
|
+
styleInject(css_248z$n);
|
|
25699
25699
|
|
|
25700
25700
|
/**
|
|
25701
25701
|
* Overwrite the common buttons for floating window to
|
|
@@ -27890,8 +27890,8 @@ ReactSplitGrid.defaultProps = {
|
|
|
27890
27890
|
onDrag: undefined,
|
|
27891
27891
|
};
|
|
27892
27892
|
|
|
27893
|
-
var css_248z$
|
|
27894
|
-
styleInject(css_248z$
|
|
27893
|
+
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}";
|
|
27894
|
+
styleInject(css_248z$m);
|
|
27895
27895
|
|
|
27896
27896
|
var GutterComponent = function (props) {
|
|
27897
27897
|
var leftIcon = (React__default["default"].createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "", status: "interactive" }));
|
|
@@ -31650,8 +31650,8 @@ var LuiTabsPanelSwitch = function (props) {
|
|
|
31650
31650
|
} }, tabProps), children));
|
|
31651
31651
|
};
|
|
31652
31652
|
|
|
31653
|
-
var css_248z$
|
|
31654
|
-
styleInject(css_248z$
|
|
31653
|
+
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}";
|
|
31654
|
+
styleInject(css_248z$l);
|
|
31655
31655
|
|
|
31656
31656
|
var LuiError = function (_a) {
|
|
31657
31657
|
var error = _a.error, className = _a.className;
|
|
@@ -32013,8 +32013,8 @@ var LuiDateInput = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
32013
32013
|
return React__default["default"].createElement(LuiTextInput, __assign({}, mapped, { ref: ref }));
|
|
32014
32014
|
});
|
|
32015
32015
|
|
|
32016
|
-
var css_248z$
|
|
32017
|
-
styleInject(css_248z$
|
|
32016
|
+
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}";
|
|
32017
|
+
styleInject(css_248z$k);
|
|
32018
32018
|
|
|
32019
32019
|
var MoneyParser = /** @class */ (function () {
|
|
32020
32020
|
function MoneyParser(init, options) {
|
|
@@ -39666,9 +39666,9 @@ var StateManagedSelect = /*#__PURE__*/React__default["default"].forwardRef(funct
|
|
|
39666
39666
|
|
|
39667
39667
|
var Select = StateManagedSelect;
|
|
39668
39668
|
|
|
39669
|
-
var css_248z$
|
|
39669
|
+
var css_248z$j = "";
|
|
39670
39670
|
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%)"};
|
|
39671
|
-
styleInject(css_248z$
|
|
39671
|
+
styleInject(css_248z$j);
|
|
39672
39672
|
|
|
39673
39673
|
var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
|
|
39674
39674
|
|
|
@@ -42331,8 +42331,8 @@ var LuiAlertModalV2 = function (props) {
|
|
|
42331
42331
|
} }), children));
|
|
42332
42332
|
};
|
|
42333
42333
|
|
|
42334
|
-
var css_248z$
|
|
42335
|
-
styleInject(css_248z$
|
|
42334
|
+
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";
|
|
42335
|
+
styleInject(css_248z$i);
|
|
42336
42336
|
|
|
42337
42337
|
/**
|
|
42338
42338
|
* @internal
|
|
@@ -42535,19 +42535,20 @@ var LuiSearchInput = function (props) {
|
|
|
42535
42535
|
}
|
|
42536
42536
|
}
|
|
42537
42537
|
function retrieveResults(input) {
|
|
42538
|
+
var _a;
|
|
42538
42539
|
return __awaiter(this, void 0, void 0, function () {
|
|
42539
42540
|
var results_1, items, selectedIdInResults;
|
|
42540
|
-
return __generator(this, function (
|
|
42541
|
-
switch (
|
|
42541
|
+
return __generator(this, function (_b) {
|
|
42542
|
+
switch (_b.label) {
|
|
42542
42543
|
case 0:
|
|
42543
|
-
if (!(input !== '' && input.length >= props.minCharactersForSearch)) return [3 /*break*/,
|
|
42544
|
+
if (!(input !== '' && input.length >= props.minCharactersForSearch)) return [3 /*break*/, 5];
|
|
42544
42545
|
setIsLoading(true);
|
|
42545
|
-
|
|
42546
|
+
_b.label = 1;
|
|
42546
42547
|
case 1:
|
|
42547
|
-
|
|
42548
|
+
_b.trys.push([1, , 3, 4]);
|
|
42548
42549
|
return [4 /*yield*/, props.getOptions(input)];
|
|
42549
42550
|
case 2:
|
|
42550
|
-
results_1 =
|
|
42551
|
+
results_1 = _b.sent();
|
|
42551
42552
|
items = flatten(results_1);
|
|
42552
42553
|
setResults(results_1);
|
|
42553
42554
|
selectedIdInResults = items.some(function (item) { return item.id === selectedId; });
|
|
@@ -42558,7 +42559,20 @@ var LuiSearchInput = function (props) {
|
|
|
42558
42559
|
case 3:
|
|
42559
42560
|
setIsLoading(false);
|
|
42560
42561
|
return [7 /*endfinally*/];
|
|
42561
|
-
case 4: return [
|
|
42562
|
+
case 4: return [3 /*break*/, 6];
|
|
42563
|
+
case 5:
|
|
42564
|
+
if (input !== '' &&
|
|
42565
|
+
input.length < props.minCharactersForSearch &&
|
|
42566
|
+
results.length > 0) {
|
|
42567
|
+
setResults([]);
|
|
42568
|
+
}
|
|
42569
|
+
else if (input === '' && results.length > 0) {
|
|
42570
|
+
setInputValue('');
|
|
42571
|
+
(_a = props.onClearCallback) === null || _a === void 0 ? void 0 : _a.call(props);
|
|
42572
|
+
setResults([]);
|
|
42573
|
+
}
|
|
42574
|
+
_b.label = 6;
|
|
42575
|
+
case 6: return [2 /*return*/];
|
|
42562
42576
|
}
|
|
42563
42577
|
});
|
|
42564
42578
|
});
|
|
@@ -47032,8 +47046,8 @@ var LuiSidePanelProvider = function (_a) {
|
|
|
47032
47046
|
React__default["default"].createElement(LuiSidePanelContainer, __assign({}, props))));
|
|
47033
47047
|
};
|
|
47034
47048
|
|
|
47035
|
-
var css_248z$
|
|
47036
|
-
styleInject(css_248z$
|
|
47049
|
+
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}";
|
|
47050
|
+
styleInject(css_248z$h);
|
|
47037
47051
|
|
|
47038
47052
|
var LuiSwitchButton = function (props) {
|
|
47039
47053
|
var generatedId = useGenerateOrDefaultId();
|
|
@@ -54664,8 +54678,8 @@ var LuiAccordicardStatic = function (props) {
|
|
|
54664
54678
|
React__default["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" }))));
|
|
54665
54679
|
};
|
|
54666
54680
|
|
|
54667
|
-
var css_248z$
|
|
54668
|
-
styleInject(css_248z$
|
|
54681
|
+
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}";
|
|
54682
|
+
styleInject(css_248z$g);
|
|
54669
54683
|
|
|
54670
54684
|
var LuiAccordion = function (props) {
|
|
54671
54685
|
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;
|
|
@@ -54776,8 +54790,8 @@ var LuiMultiSwitch = function (_a) {
|
|
|
54776
54790
|
React__default["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["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)); }))));
|
|
54777
54791
|
};
|
|
54778
54792
|
|
|
54779
|
-
var css_248z$
|
|
54780
|
-
styleInject(css_248z$
|
|
54793
|
+
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}";
|
|
54794
|
+
styleInject(css_248z$f);
|
|
54781
54795
|
|
|
54782
54796
|
function $c1d7fb2ec91bae71$var$Item(props) {
|
|
54783
54797
|
return null;
|
|
@@ -58277,16 +58291,16 @@ function DefaultEmptyIndicator() {
|
|
|
58277
58291
|
return React__default["default"].createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
|
|
58278
58292
|
}
|
|
58279
58293
|
|
|
58280
|
-
var css_248z$
|
|
58281
|
-
styleInject(css_248z$
|
|
58294
|
+
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}";
|
|
58295
|
+
styleInject(css_248z$e);
|
|
58282
58296
|
|
|
58283
58297
|
function RadioItemRenderer(_a) {
|
|
58284
58298
|
var item = _a.item, isSelected = _a.isSelected;
|
|
58285
58299
|
return (React__default["default"].createElement("div", { className: "RadioItemRenderer ".concat(isSelected ? 'RadioItemRenderer-isSelected' : '') }, item.label));
|
|
58286
58300
|
}
|
|
58287
58301
|
|
|
58288
|
-
var css_248z$
|
|
58289
|
-
styleInject(css_248z$
|
|
58302
|
+
var css_248z$d = ".CheckboxRenderer {\n display: flex;\n align-items: center;\n}";
|
|
58303
|
+
styleInject(css_248z$d);
|
|
58290
58304
|
|
|
58291
58305
|
function CheckboxItemRenderer(_a) {
|
|
58292
58306
|
var item = _a.item, isSelected = _a.isSelected;
|
|
@@ -58312,8 +58326,8 @@ function LuiSideMenuItem(_a) {
|
|
|
58312
58326
|
React__default["default"].createElement("span", { className: "navText" }, label)))));
|
|
58313
58327
|
}
|
|
58314
58328
|
|
|
58315
|
-
var css_248z$
|
|
58316
|
-
styleInject(css_248z$
|
|
58329
|
+
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}";
|
|
58330
|
+
styleInject(css_248z$c);
|
|
58317
58331
|
|
|
58318
58332
|
var LuiProgressBar = function (_a) {
|
|
58319
58333
|
var value = _a.value, max = _a.max, error = _a.error, _b = _a.barHeight, barHeight = _b === void 0 ? '5px' : _b;
|
|
@@ -58341,8 +58355,8 @@ var LuiProgressBar = function (_a) {
|
|
|
58341
58355
|
React__default["default"].createElement("div", { "data-testid": 'progress-bar-size', className: clsx("ProgressBar-".concat(status), { indeterminate: indeterminate }), style: { width: "".concat(percentage, "%"), height: barHeight } })));
|
|
58342
58356
|
};
|
|
58343
58357
|
|
|
58344
|
-
var css_248z$
|
|
58345
|
-
styleInject(css_248z$
|
|
58358
|
+
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}";
|
|
58359
|
+
styleInject(css_248z$b);
|
|
58346
58360
|
|
|
58347
58361
|
exports.ToolbarDirection = void 0;
|
|
58348
58362
|
(function (ToolbarDirection) {
|
|
@@ -58364,8 +58378,8 @@ var ToolbarIcon = function (_a) {
|
|
|
58364
58378
|
return iconImage ? (React__default["default"].createElement("img", { className: "LuiIcon--lg", alt: iconName, src: iconImage })) : (React__default["default"].createElement(LuiIcon, { name: iconName, alt: iconName, size: 'md' }));
|
|
58365
58379
|
};
|
|
58366
58380
|
|
|
58367
|
-
var css_248z$
|
|
58368
|
-
styleInject(css_248z$
|
|
58381
|
+
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}";
|
|
58382
|
+
styleInject(css_248z$a);
|
|
58369
58383
|
|
|
58370
58384
|
/**
|
|
58371
58385
|
* Create button for using either LuiIcon or Image.
|
|
@@ -58428,8 +58442,8 @@ var useMediaQuery = function (query) {
|
|
|
58428
58442
|
return matches;
|
|
58429
58443
|
};
|
|
58430
58444
|
|
|
58431
|
-
var css_248z$
|
|
58432
|
-
styleInject(css_248z$
|
|
58445
|
+
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}";
|
|
58446
|
+
styleInject(css_248z$9);
|
|
58433
58447
|
|
|
58434
58448
|
var LuiCounter = React__default["default"].forwardRef(function (props, ref) {
|
|
58435
58449
|
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"]);
|
|
@@ -58444,8 +58458,8 @@ var LuiCounter = React__default["default"].forwardRef(function (props, ref) {
|
|
|
58444
58458
|
return (React__default["default"].createElement(React__default["default"].Fragment, null, !(selectedNum === 0 && !countZero) && (React__default["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()))));
|
|
58445
58459
|
});
|
|
58446
58460
|
|
|
58447
|
-
var css_248z$
|
|
58448
|
-
styleInject(css_248z$
|
|
58461
|
+
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}";
|
|
58462
|
+
styleInject(css_248z$8);
|
|
58449
58463
|
|
|
58450
58464
|
var LuiPagination = function (_a) {
|
|
58451
58465
|
var totalPages = _a.totalPages, currentPage = _a.currentPage, onPageChange = _a.onPageChange, _b = _a.isMobileLayout, isMobileLayout = _b === void 0 ? null : _b;
|
|
@@ -58555,11 +58569,11 @@ var LuiPagination = function (_a) {
|
|
|
58555
58569
|
React__default["default"].createElement("div", { className: "pagination" }, renderPaginationNumbers())))));
|
|
58556
58570
|
};
|
|
58557
58571
|
|
|
58558
|
-
var css_248z$
|
|
58559
|
-
styleInject(css_248z$
|
|
58572
|
+
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}";
|
|
58573
|
+
styleInject(css_248z$7);
|
|
58560
58574
|
|
|
58561
|
-
var css_248z$
|
|
58562
|
-
styleInject(css_248z$
|
|
58575
|
+
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}";
|
|
58576
|
+
styleInject(css_248z$6);
|
|
58563
58577
|
|
|
58564
58578
|
var useForkRef = function (forwardedRef) {
|
|
58565
58579
|
var localRef = React.useRef(null);
|
|
@@ -59288,8 +59302,8 @@ var keyDownHandler = function (e) {
|
|
|
59288
59302
|
return valueNow + delta;
|
|
59289
59303
|
};
|
|
59290
59304
|
|
|
59291
|
-
var css_248z$
|
|
59292
|
-
styleInject(css_248z$
|
|
59305
|
+
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}";
|
|
59306
|
+
styleInject(css_248z$5);
|
|
59293
59307
|
|
|
59294
59308
|
/**
|
|
59295
59309
|
* Container that appends a separator when the children count equals 2.
|
|
@@ -59341,8 +59355,8 @@ var useSplitterRef = function () {
|
|
|
59341
59355
|
return { ref: ref, setRatio: setRatio };
|
|
59342
59356
|
};
|
|
59343
59357
|
|
|
59344
|
-
var css_248z$
|
|
59345
|
-
styleInject(css_248z$
|
|
59358
|
+
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}";
|
|
59359
|
+
styleInject(css_248z$4);
|
|
59346
59360
|
|
|
59347
59361
|
var LuiBannerV2 = React.forwardRef(function (_a, ref) {
|
|
59348
59362
|
var _b, _c, _d;
|
|
@@ -59361,8 +59375,8 @@ var LuiBannerV2 = React.forwardRef(function (_a, ref) {
|
|
|
59361
59375
|
onDismiss && (React__default["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["default"].createElement(LuiIcon, { size: "md", name: "ic_clear", spanProps: { 'aria-hidden': true }, alt: "Dismiss" }))))));
|
|
59362
59376
|
});
|
|
59363
59377
|
|
|
59364
|
-
var css_248z$
|
|
59365
|
-
styleInject(css_248z$
|
|
59378
|
+
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}";
|
|
59379
|
+
styleInject(css_248z$3);
|
|
59366
59380
|
|
|
59367
59381
|
var defaultColours = [
|
|
59368
59382
|
{ color: '#FF0000', description: 'Red' },
|
|
@@ -59412,8 +59426,8 @@ var ColorPalette = React.forwardRef(function (_a, ref) {
|
|
|
59412
59426
|
})));
|
|
59413
59427
|
});
|
|
59414
59428
|
|
|
59415
|
-
var css_248z$
|
|
59416
|
-
styleInject(css_248z$
|
|
59429
|
+
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}";
|
|
59430
|
+
styleInject(css_248z$2);
|
|
59417
59431
|
|
|
59418
59432
|
var topRightToastsHeight = function (portal) {
|
|
59419
59433
|
var _a, _b, _c, _d;
|
|
@@ -59484,8 +59498,8 @@ var getToastProviderEl = function () {
|
|
|
59484
59498
|
return portal;
|
|
59485
59499
|
};
|
|
59486
59500
|
|
|
59487
|
-
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}";
|
|
59488
|
-
styleInject(css_248z);
|
|
59501
|
+
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}";
|
|
59502
|
+
styleInject(css_248z$1);
|
|
59489
59503
|
|
|
59490
59504
|
var getToastSectionEl = function (position) {
|
|
59491
59505
|
var portal = getToastProviderEl();
|
|
@@ -59666,6 +59680,15 @@ var ToastProvider = function (_a) {
|
|
|
59666
59680
|
React__namespace.createElement(ToastContext.Provider, { value: dispatch }, children)));
|
|
59667
59681
|
};
|
|
59668
59682
|
|
|
59683
|
+
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}";
|
|
59684
|
+
styleInject(css_248z);
|
|
59685
|
+
|
|
59686
|
+
var ToastBanner = function (_a) {
|
|
59687
|
+
var level = _a.level, onDismiss = _a.onDismiss, children = _a.children;
|
|
59688
|
+
return (React__default["default"].createElement(LuiBannerV2, __assign({}, { level: level, onDismiss: onDismiss }, { "data-testid": "lui-msg-toast-show", dismissButtonProps: { 'aria-label': 'Close dialog' }, className: "ToastBanner" }),
|
|
59689
|
+
React__default["default"].createElement("span", { "data-testid": "toastMessageShow" }, children)));
|
|
59690
|
+
};
|
|
59691
|
+
|
|
59669
59692
|
var getUniqueToastId = function () {
|
|
59670
59693
|
var _a;
|
|
59671
59694
|
var id = Number("".concat(Math.floor(Math.random() * 10000000)).slice(0, 4));
|
|
@@ -59690,7 +59713,7 @@ var toastFunctions = function (dispatch) {
|
|
|
59690
59713
|
var options = __assign(__assign({}, defaults), config);
|
|
59691
59714
|
return toast(function (_a) {
|
|
59692
59715
|
var onDismiss = _a.close;
|
|
59693
|
-
return (React__namespace.createElement(
|
|
59716
|
+
return (React__namespace.createElement(ToastBanner, __assign({}, { level: level, children: children, onDismiss: onDismiss })));
|
|
59694
59717
|
}, options);
|
|
59695
59718
|
};
|
|
59696
59719
|
};
|
|
@@ -59837,7 +59860,7 @@ var LuiToastMessageCompatibleInterface = function (props) {
|
|
|
59837
59860
|
if (display && !onceDismissed) {
|
|
59838
59861
|
var notification = function (_a) {
|
|
59839
59862
|
var close = _a.close;
|
|
59840
|
-
return React__default["default"].createElement(
|
|
59863
|
+
return React__default["default"].createElement(ToastBanner, __assign({}, { level: level, onDismiss: close, children: children }));
|
|
59841
59864
|
};
|
|
59842
59865
|
var options = {
|
|
59843
59866
|
timeout: requireDismiss || !displayTimeout ? Infinity : displayTimeout,
|