@linzjs/lui 22.0.1 → 22.1.0
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 +7 -0
- package/dist/components/LuiErrorPanel/LuiErrorPanel.d.ts +24 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +76 -48
- package/dist/index.js.map +1 -1
- package/dist/lui.esm.js +76 -49
- package/dist/lui.esm.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
# [22.1.0](https://github.com/linz/lui/compare/v22.0.1...v22.1.0) (2024-12-05)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **LuiErrorPanel:** implement non-blocking error panel component ([#1180](https://github.com/linz/lui/issues/1180)) ([43aea60](https://github.com/linz/lui/commit/43aea60f377e6e1af0cca0bb0e8cf7ebc53782e8))
|
|
7
|
+
|
|
1
8
|
## [22.0.1](https://github.com/linz/lui/compare/v22.0.0...v22.0.1) (2024-12-02)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './LuiErrorPanel.scss';
|
|
3
|
+
interface ErrorHeadingDetails {
|
|
4
|
+
title: string;
|
|
5
|
+
description?: string;
|
|
6
|
+
}
|
|
7
|
+
interface LuiErrorPanelProps {
|
|
8
|
+
panelName?: string;
|
|
9
|
+
headingDetails: ErrorHeadingDetails;
|
|
10
|
+
fixes?: string[];
|
|
11
|
+
actions?: React.ReactNode;
|
|
12
|
+
subtext?: React.ReactNode;
|
|
13
|
+
children?: React.ReactNode;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* @description Non-blocking error panel for use with error boundaries.
|
|
17
|
+
|
|
18
|
+
* @param headingDetails - Title and description of the error
|
|
19
|
+
* @param fixes - Optional bullet point list of potential fixes.
|
|
20
|
+
* @param actions - Optional insert for actionable buttons
|
|
21
|
+
* @param subtext - Optional additional information
|
|
22
|
+
*/
|
|
23
|
+
export declare const LuiErrorPanel: React.ForwardRefExoticComponent<LuiErrorPanelProps & React.RefAttributes<HTMLDivElement>>;
|
|
24
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -79,3 +79,4 @@ export { ColorPalette } from './components/LuiColourPicker/ColorPalette';
|
|
|
79
79
|
export { ColorInput, ColorInputGroup, } from './components/LuiColourPicker/ColorInput';
|
|
80
80
|
export { useToast } from './components/Toast';
|
|
81
81
|
export { LuiMessagingContextProvider, useShowLUIMessage, LuiToastMessage, } from './components/Toast/Upgrade';
|
|
82
|
+
export { LuiErrorPanel } from './components/LuiErrorPanel/LuiErrorPanel';
|
package/dist/index.js
CHANGED
|
@@ -25711,8 +25711,8 @@ function styleInject(css, ref) {
|
|
|
25711
25711
|
}
|
|
25712
25712
|
}
|
|
25713
25713
|
|
|
25714
|
-
var css_248z$
|
|
25715
|
-
styleInject(css_248z$
|
|
25714
|
+
var css_248z$o = ".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}";
|
|
25715
|
+
styleInject(css_248z$o);
|
|
25716
25716
|
|
|
25717
25717
|
/**
|
|
25718
25718
|
* Overwrite the common buttons for floating window to
|
|
@@ -27907,8 +27907,8 @@ ReactSplitGrid.defaultProps = {
|
|
|
27907
27907
|
onDrag: undefined,
|
|
27908
27908
|
};
|
|
27909
27909
|
|
|
27910
|
-
var css_248z$
|
|
27911
|
-
styleInject(css_248z$
|
|
27910
|
+
var css_248z$n = ".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}";
|
|
27911
|
+
styleInject(css_248z$n);
|
|
27912
27912
|
|
|
27913
27913
|
var GutterComponent = function (props) {
|
|
27914
27914
|
var leftIcon = (React__default["default"].createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "", status: "interactive" }));
|
|
@@ -31667,8 +31667,8 @@ var LuiTabsPanelSwitch = function (props) {
|
|
|
31667
31667
|
} }, tabProps), children));
|
|
31668
31668
|
};
|
|
31669
31669
|
|
|
31670
|
-
var css_248z$
|
|
31671
|
-
styleInject(css_248z$
|
|
31670
|
+
var css_248z$m = "/**\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}";
|
|
31671
|
+
styleInject(css_248z$m);
|
|
31672
31672
|
|
|
31673
31673
|
var LuiError = function (_a) {
|
|
31674
31674
|
var error = _a.error, className = _a.className;
|
|
@@ -32030,8 +32030,8 @@ var LuiDateInput = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
32030
32030
|
return React__default["default"].createElement(LuiTextInput, __assign({}, mapped, { ref: ref }));
|
|
32031
32031
|
});
|
|
32032
32032
|
|
|
32033
|
-
var css_248z$
|
|
32034
|
-
styleInject(css_248z$
|
|
32033
|
+
var css_248z$l = ".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}";
|
|
32034
|
+
styleInject(css_248z$l);
|
|
32035
32035
|
|
|
32036
32036
|
var MoneyParser = /** @class */ (function () {
|
|
32037
32037
|
function MoneyParser(init, options) {
|
|
@@ -39693,9 +39693,9 @@ var StateManagedSelect = /*#__PURE__*/React__default["default"].forwardRef(funct
|
|
|
39693
39693
|
|
|
39694
39694
|
var Select = StateManagedSelect;
|
|
39695
39695
|
|
|
39696
|
-
var css_248z$
|
|
39696
|
+
var css_248z$k = "";
|
|
39697
39697
|
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%)"};
|
|
39698
|
-
styleInject(css_248z$
|
|
39698
|
+
styleInject(css_248z$k);
|
|
39699
39699
|
|
|
39700
39700
|
var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
|
|
39701
39701
|
|
|
@@ -42370,8 +42370,8 @@ var LuiAlertModalV2 = function (props) {
|
|
|
42370
42370
|
} }), children));
|
|
42371
42371
|
};
|
|
42372
42372
|
|
|
42373
|
-
var css_248z$
|
|
42374
|
-
styleInject(css_248z$
|
|
42373
|
+
var css_248z$j = "@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";
|
|
42374
|
+
styleInject(css_248z$j);
|
|
42375
42375
|
|
|
42376
42376
|
/**
|
|
42377
42377
|
* @internal
|
|
@@ -47149,8 +47149,8 @@ var LuiSidePanelProvider = function (_a) {
|
|
|
47149
47149
|
React__default["default"].createElement(LuiSidePanelContainer, __assign({}, props))));
|
|
47150
47150
|
};
|
|
47151
47151
|
|
|
47152
|
-
var css_248z$
|
|
47153
|
-
styleInject(css_248z$
|
|
47152
|
+
var css_248z$i = ".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}";
|
|
47153
|
+
styleInject(css_248z$i);
|
|
47154
47154
|
|
|
47155
47155
|
var LuiSwitchButton = function (props) {
|
|
47156
47156
|
var generatedId = useGenerateOrDefaultId();
|
|
@@ -54781,8 +54781,8 @@ var LuiAccordicardStatic = function (props) {
|
|
|
54781
54781
|
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" }))));
|
|
54782
54782
|
};
|
|
54783
54783
|
|
|
54784
|
-
var css_248z$
|
|
54785
|
-
styleInject(css_248z$
|
|
54784
|
+
var css_248z$h = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.lui-accordion {\n padding: 8px;\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}";
|
|
54785
|
+
styleInject(css_248z$h);
|
|
54786
54786
|
|
|
54787
54787
|
var LuiAccordion = function (props) {
|
|
54788
54788
|
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;
|
|
@@ -54893,8 +54893,8 @@ var LuiMultiSwitch = function (_a) {
|
|
|
54893
54893
|
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)); }))));
|
|
54894
54894
|
};
|
|
54895
54895
|
|
|
54896
|
-
var css_248z$
|
|
54897
|
-
styleInject(css_248z$
|
|
54896
|
+
var css_248z$g = "/**\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}";
|
|
54897
|
+
styleInject(css_248z$g);
|
|
54898
54898
|
|
|
54899
54899
|
function $c1d7fb2ec91bae71$var$Item(props) {
|
|
54900
54900
|
return null;
|
|
@@ -58423,16 +58423,16 @@ function DefaultEmptyIndicator() {
|
|
|
58423
58423
|
return React__default["default"].createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
|
|
58424
58424
|
}
|
|
58425
58425
|
|
|
58426
|
-
var css_248z$
|
|
58427
|
-
styleInject(css_248z$
|
|
58426
|
+
var css_248z$f = "/**\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}";
|
|
58427
|
+
styleInject(css_248z$f);
|
|
58428
58428
|
|
|
58429
58429
|
function RadioItemRenderer(_a) {
|
|
58430
58430
|
var item = _a.item, isSelected = _a.isSelected;
|
|
58431
58431
|
return (React__default["default"].createElement("div", { className: "RadioItemRenderer ".concat(isSelected ? 'RadioItemRenderer-isSelected' : '') }, item.label));
|
|
58432
58432
|
}
|
|
58433
58433
|
|
|
58434
|
-
var css_248z$
|
|
58435
|
-
styleInject(css_248z$
|
|
58434
|
+
var css_248z$e = ".CheckboxRenderer {\n display: flex;\n align-items: center;\n}";
|
|
58435
|
+
styleInject(css_248z$e);
|
|
58436
58436
|
|
|
58437
58437
|
function CheckboxItemRenderer(_a) {
|
|
58438
58438
|
var item = _a.item, isSelected = _a.isSelected;
|
|
@@ -58458,8 +58458,8 @@ function LuiSideMenuItem(_a) {
|
|
|
58458
58458
|
React__default["default"].createElement("span", { className: "navText" }, label)))));
|
|
58459
58459
|
}
|
|
58460
58460
|
|
|
58461
|
-
var css_248z$
|
|
58462
|
-
styleInject(css_248z$
|
|
58461
|
+
var css_248z$d = "/**\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}";
|
|
58462
|
+
styleInject(css_248z$d);
|
|
58463
58463
|
|
|
58464
58464
|
var LuiProgressBar = function (_a) {
|
|
58465
58465
|
var value = _a.value, max = _a.max, error = _a.error, _b = _a.barHeight, barHeight = _b === void 0 ? '5px' : _b;
|
|
@@ -58487,8 +58487,8 @@ var LuiProgressBar = function (_a) {
|
|
|
58487
58487
|
React__default["default"].createElement("div", { "data-testid": 'progress-bar-size', className: clsx("ProgressBar-".concat(status), { indeterminate: indeterminate }), style: { width: "".concat(percentage, "%"), height: barHeight } })));
|
|
58488
58488
|
};
|
|
58489
58489
|
|
|
58490
|
-
var css_248z$
|
|
58491
|
-
styleInject(css_248z$
|
|
58490
|
+
var css_248z$c = "/**\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}";
|
|
58491
|
+
styleInject(css_248z$c);
|
|
58492
58492
|
|
|
58493
58493
|
exports.ToolbarDirection = void 0;
|
|
58494
58494
|
(function (ToolbarDirection) {
|
|
@@ -58510,8 +58510,8 @@ var ToolbarIcon = function (_a) {
|
|
|
58510
58510
|
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' }));
|
|
58511
58511
|
};
|
|
58512
58512
|
|
|
58513
|
-
var css_248z$
|
|
58514
|
-
styleInject(css_248z$
|
|
58513
|
+
var css_248z$b = "/**\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}";
|
|
58514
|
+
styleInject(css_248z$b);
|
|
58515
58515
|
|
|
58516
58516
|
/**
|
|
58517
58517
|
* Create button for using either LuiIcon or Image.
|
|
@@ -58574,8 +58574,8 @@ var useMediaQuery = function (query) {
|
|
|
58574
58574
|
return matches;
|
|
58575
58575
|
};
|
|
58576
58576
|
|
|
58577
|
-
var css_248z$
|
|
58578
|
-
styleInject(css_248z$
|
|
58577
|
+
var css_248z$a = "/**\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}";
|
|
58578
|
+
styleInject(css_248z$a);
|
|
58579
58579
|
|
|
58580
58580
|
var LuiCounter = React__default["default"].forwardRef(function (props, ref) {
|
|
58581
58581
|
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"]);
|
|
@@ -58590,8 +58590,8 @@ var LuiCounter = React__default["default"].forwardRef(function (props, ref) {
|
|
|
58590
58590
|
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()))));
|
|
58591
58591
|
});
|
|
58592
58592
|
|
|
58593
|
-
var css_248z$
|
|
58594
|
-
styleInject(css_248z$
|
|
58593
|
+
var css_248z$9 = "/**\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-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}\n\n.pan-left {\n transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;\n transform: perspective(1000px) rotateY(20deg) translateX(-10px);\n opacity: 0.5;\n}\n\n.pan-right {\n transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;\n transform: perspective(1000px) rotateY(-20deg) translateX(10px);\n opacity: 0.5;\n}";
|
|
58594
|
+
styleInject(css_248z$9);
|
|
58595
58595
|
|
|
58596
58596
|
/**
|
|
58597
58597
|
* @description Pagination component for navigating through a list of items with multiple pages.
|
|
@@ -58737,11 +58737,11 @@ var LuiPagination = React.forwardRef(function (_a, ref) {
|
|
|
58737
58737
|
React__default["default"].createElement("div", { className: "pagination" }, renderPaginationNumbers())))));
|
|
58738
58738
|
});
|
|
58739
58739
|
|
|
58740
|
-
var css_248z$
|
|
58741
|
-
styleInject(css_248z$
|
|
58740
|
+
var css_248z$8 = "/**\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}";
|
|
58741
|
+
styleInject(css_248z$8);
|
|
58742
58742
|
|
|
58743
|
-
var css_248z$
|
|
58744
|
-
styleInject(css_248z$
|
|
58743
|
+
var css_248z$7 = ".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}";
|
|
58744
|
+
styleInject(css_248z$7);
|
|
58745
58745
|
|
|
58746
58746
|
var useForkRef = function (forwardedRef) {
|
|
58747
58747
|
var localRef = React.useRef(null);
|
|
@@ -59470,8 +59470,8 @@ var keyDownHandler = function (e) {
|
|
|
59470
59470
|
return valueNow + delta;
|
|
59471
59471
|
};
|
|
59472
59472
|
|
|
59473
|
-
var css_248z$
|
|
59474
|
-
styleInject(css_248z$
|
|
59473
|
+
var css_248z$6 = "/**\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}";
|
|
59474
|
+
styleInject(css_248z$6);
|
|
59475
59475
|
|
|
59476
59476
|
/**
|
|
59477
59477
|
* Container that appends a separator when the children count equals 2.
|
|
@@ -59523,8 +59523,8 @@ var useSplitterRef = function () {
|
|
|
59523
59523
|
return { ref: ref, setRatio: setRatio };
|
|
59524
59524
|
};
|
|
59525
59525
|
|
|
59526
|
-
var css_248z$
|
|
59527
|
-
styleInject(css_248z$
|
|
59526
|
+
var css_248z$5 = "/**\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}";
|
|
59527
|
+
styleInject(css_248z$5);
|
|
59528
59528
|
|
|
59529
59529
|
var LuiBannerV2 = React.forwardRef(function (_a, ref) {
|
|
59530
59530
|
var _b, _c, _d;
|
|
@@ -59543,8 +59543,8 @@ var LuiBannerV2 = React.forwardRef(function (_a, ref) {
|
|
|
59543
59543
|
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" }))))));
|
|
59544
59544
|
});
|
|
59545
59545
|
|
|
59546
|
-
var css_248z$
|
|
59547
|
-
styleInject(css_248z$
|
|
59546
|
+
var css_248z$4 = "/**\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}";
|
|
59547
|
+
styleInject(css_248z$4);
|
|
59548
59548
|
|
|
59549
59549
|
var defaultColours = [
|
|
59550
59550
|
{ color: '#FF0000', description: 'Red' },
|
|
@@ -59594,8 +59594,8 @@ var ColorPalette = React.forwardRef(function (_a, ref) {
|
|
|
59594
59594
|
})));
|
|
59595
59595
|
});
|
|
59596
59596
|
|
|
59597
|
-
var css_248z$
|
|
59598
|
-
styleInject(css_248z$
|
|
59597
|
+
var css_248z$3 = "/**\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 *:not(strong, .b) {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: normal;\n font-weight: 400;\n}";
|
|
59598
|
+
styleInject(css_248z$3);
|
|
59599
59599
|
|
|
59600
59600
|
var topRightToastsHeight = function (portal) {
|
|
59601
59601
|
var _a, _b, _c, _d;
|
|
@@ -59666,8 +59666,8 @@ var getToastProviderEl = function () {
|
|
|
59666
59666
|
return portal;
|
|
59667
59667
|
};
|
|
59668
59668
|
|
|
59669
|
-
var css_248z$
|
|
59670
|
-
styleInject(css_248z$
|
|
59669
|
+
var css_248z$2 = "/**\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}";
|
|
59670
|
+
styleInject(css_248z$2);
|
|
59671
59671
|
|
|
59672
59672
|
var getToastSectionEl = function (position) {
|
|
59673
59673
|
var portal = getToastProviderEl();
|
|
@@ -59848,8 +59848,8 @@ var ToastProvider = function (_a) {
|
|
|
59848
59848
|
React__namespace.createElement(ToastContext.Provider, { value: dispatch }, children)));
|
|
59849
59849
|
};
|
|
59850
59850
|
|
|
59851
|
-
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}";
|
|
59852
|
-
styleInject(css_248z);
|
|
59851
|
+
var css_248z$1 = ".ToastBanner span[data-testid=toastMessageShow] {\n display: contents;\n}\n.ToastBanner span[data-testid=toastMessageShow] > :first-child {\n margin-top: 0;\n}";
|
|
59852
|
+
styleInject(css_248z$1);
|
|
59853
59853
|
|
|
59854
59854
|
var ToastBanner = function (_a) {
|
|
59855
59855
|
var level = _a.level, onDismiss = _a.onDismiss, children = _a.children;
|
|
@@ -60096,6 +60096,33 @@ var LuiToastMessage = function (props) {
|
|
|
60096
60096
|
return version === 'v2' ? (React__default["default"].createElement(LuiToastMessageCompatibleInterface, __assign({}, props))) : (React__default["default"].createElement(LuiToastMessage$1, __assign({}, props)));
|
|
60097
60097
|
};
|
|
60098
60098
|
|
|
60099
|
+
var css_248z = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.lui-error-panel-container {\n padding: 16px;\n user-select: none;\n}\n.lui-error-panel-container-children {\n padding-top: 1.5rem;\n gap: 0.5rem;\n}\n.lui-error-panel-container-controls {\n padding-top: 1.5rem;\n gap: 0.5rem;\n}\n.lui-error-panel-container-controls-buttons {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.lui-error-panel-container-controls .lui-button {\n margin-left: 0;\n width: 100%;\n height: 40px;\n}";
|
|
60100
|
+
styleInject(css_248z);
|
|
60101
|
+
|
|
60102
|
+
/**
|
|
60103
|
+
* @description Non-blocking error panel for use with error boundaries.
|
|
60104
|
+
|
|
60105
|
+
* @param headingDetails - Title and description of the error
|
|
60106
|
+
* @param fixes - Optional bullet point list of potential fixes.
|
|
60107
|
+
* @param actions - Optional insert for actionable buttons
|
|
60108
|
+
* @param subtext - Optional additional information
|
|
60109
|
+
*/
|
|
60110
|
+
var LuiErrorPanel = React.forwardRef(function (props, ref) {
|
|
60111
|
+
return (React__default["default"].createElement("div", { className: "lui-error-panel-container", ref: ref, "data-testid": "lui-error-panel-container" },
|
|
60112
|
+
React__default["default"].createElement(LuiBannerV2, { level: "error" },
|
|
60113
|
+
React__default["default"].createElement("b", null, props.headingDetails.title),
|
|
60114
|
+
props.headingDetails.description && (React__default["default"].createElement(React__default["default"].Fragment, null, props.headingDetails.description))),
|
|
60115
|
+
props.children && (React__default["default"].createElement("div", { className: "lui-error-panel-container-children", "data-testid": "lui-error-panel-container-children" }, props.children)),
|
|
60116
|
+
React__default["default"].createElement("div", { className: "lui-error-panel-container-controls", "data-testid": "lui-error-panel-container-controls" },
|
|
60117
|
+
props.fixes && (React__default["default"].createElement("div", null,
|
|
60118
|
+
React__default["default"].createElement("b", null, "Potential fixes:"),
|
|
60119
|
+
props.fixes.map(function (fix, index) { return (React__default["default"].createElement("div", { key: index },
|
|
60120
|
+
"\u2022 ",
|
|
60121
|
+
fix)); }))),
|
|
60122
|
+
React__default["default"].createElement("div", null, props.actions ? (React__default["default"].createElement("div", { className: "lui-error-panel-container-controls-buttons", "data-testid": "lui-error-panel-container-controls-buttons" }, props.actions)) : (React__default["default"].createElement("br", null))),
|
|
60123
|
+
props.subtext && (React__default["default"].createElement("div", { className: "lui-error-panel-container-subtext", "data-testid": "lui-error-panel-container-subtext" }, props.subtext)))));
|
|
60124
|
+
});
|
|
60125
|
+
|
|
60099
60126
|
exports.CheckboxItemRenderer = CheckboxItemRenderer;
|
|
60100
60127
|
exports.ColorInput = ColorInput;
|
|
60101
60128
|
exports.ColorInputGroup = ColorInputGroup;
|
|
@@ -60139,6 +60166,7 @@ exports.LuiDropdownMenuV2 = LuiDropdownMenuV2;
|
|
|
60139
60166
|
exports.LuiDropdownMenuV2DropContent = LuiDropdownMenuV2DropContent;
|
|
60140
60167
|
exports.LuiErrorIllustration = LuiErrorIllustration;
|
|
60141
60168
|
exports.LuiErrorPage = LuiErrorPage;
|
|
60169
|
+
exports.LuiErrorPanel = LuiErrorPanel;
|
|
60142
60170
|
exports.LuiExpandableBanner = LuiExpandableBanner;
|
|
60143
60171
|
exports.LuiFileInputBox = LuiFileInputBox;
|
|
60144
60172
|
exports.LuiFilterContainer = LuiFilterContainer;
|