@linzjs/lui 22.0.0 → 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 +14 -0
- package/dist/components/LuiErrorPanel/LuiErrorPanel.d.ts +24 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +94 -54
- package/dist/index.js.map +1 -1
- package/dist/lui.css +8 -3
- package/dist/lui.css.map +1 -1
- package/dist/lui.esm.js +94 -55
- package/dist/lui.esm.js.map +1 -1
- package/dist/scss/Components/Modal/modal-v2.scss +10 -3
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
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
|
+
|
|
8
|
+
## [22.0.1](https://github.com/linz/lui/compare/v22.0.0...v22.0.1) (2024-12-02)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* SRVPUW-1153 dialog styles incorrect ([#1179](https://github.com/linz/lui/issues/1179)) ([122e838](https://github.com/linz/lui/commit/122e83849070b43d80e5cc86626918c8a9f0d371))
|
|
14
|
+
|
|
1
15
|
# [22.0.0](https://github.com/linz/lui/compare/v21.54.1...v22.0.0) (2024-12-01)
|
|
2
16
|
|
|
3
17
|
## [21.54.1](https://github.com/linz/lui/compare/v21.54.0...v21.54.1) (2024-12-01)
|
|
@@ -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
|
@@ -858,7 +858,7 @@ var LuiIcon = React.forwardRef(function (props, ref) {
|
|
|
858
858
|
return (React__default["default"].createElement("span", __assign({ ref: ref, className: clsx('LuiIcon', className, size && ICON_SIZES[size], status && ICON_STATUS[status]), "data-icon": name, title: title, "aria-label": alt }, spanProps, { style: customStyle }), iconSVG));
|
|
859
859
|
});
|
|
860
860
|
|
|
861
|
-
function getMaterialIconForLevel(level) {
|
|
861
|
+
function getMaterialIconForLevel$1(level) {
|
|
862
862
|
switch (level) {
|
|
863
863
|
case 'success':
|
|
864
864
|
return 'check_circle';
|
|
@@ -875,7 +875,7 @@ var LuiBanner = function (props) {
|
|
|
875
875
|
React__default["default"].createElement(LuiBannerContent, { level: props.level, className: props.className }, props.children)));
|
|
876
876
|
};
|
|
877
877
|
var LuiBannerContent = function (props) {
|
|
878
|
-
var materialIcon = getMaterialIconForLevel(props.level);
|
|
878
|
+
var materialIcon = getMaterialIconForLevel$1(props.level);
|
|
879
879
|
return (React__default["default"].createElement("div", { className: clsx("lui-msg-".concat(props.level, " lui-msg-dynamic-banner"), props.className) },
|
|
880
880
|
React__default["default"].createElement(LuiIcon, { name: "ic_".concat(materialIcon), alt: "".concat(props.level, " banner icon"), size: "lg", className: "lui-msg-status-icon" }),
|
|
881
881
|
React__default["default"].createElement("div", null, props.children)));
|
|
@@ -885,7 +885,7 @@ var LuiStaticMessage = function (props) {
|
|
|
885
885
|
var _a = React.useState(true), display = _a[0], setDisplay = _a[1];
|
|
886
886
|
var iconName = props.icon
|
|
887
887
|
? props.icon
|
|
888
|
-
: "ic_".concat(getMaterialIconForLevel(props.level));
|
|
888
|
+
: "ic_".concat(getMaterialIconForLevel$1(props.level));
|
|
889
889
|
return display ? (React__default["default"].createElement("div", { className: clsx("lui-msg-".concat(props.level), props.className), "data-testid": 'static-message-container' },
|
|
890
890
|
React__default["default"].createElement(LuiIcon, { name: iconName, alt: "".concat(props.level, " static icon"), size: "lg", className: "lui-msg-status-icon" }),
|
|
891
891
|
props.children,
|
|
@@ -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
|
|
|
@@ -42217,7 +42217,7 @@ var LuiModal = function (props) {
|
|
|
42217
42217
|
* @deprecated this is replaced by `LuiAlertModalV2`. [Migration notes](https://github.com/linz/Lui/pull/1127).
|
|
42218
42218
|
*/
|
|
42219
42219
|
var LuiAlertModal = function (props) {
|
|
42220
|
-
var materialIcon = getMaterialIconForLevel(props.level);
|
|
42220
|
+
var materialIcon = getMaterialIconForLevel$1(props.level);
|
|
42221
42221
|
var level = props.level, className = props.className, children = props.children, rest = __rest(props, ["level", "className", "children"]);
|
|
42222
42222
|
return (React__default["default"].createElement(LuiModal, __assign({}, rest, { className: clsx("lui-modal-".concat(level), className) }),
|
|
42223
42223
|
React__default["default"].createElement(LuiIcon, { name: "ic_".concat(materialIcon), alt: "".concat(level, " status icon"), size: "lg", className: "lui-msg-status-icon" }),
|
|
@@ -42344,6 +42344,18 @@ LuiModalV2.HeaderTitle = HeaderTitle;
|
|
|
42344
42344
|
var isProcess = typeof process !== 'undefined';
|
|
42345
42345
|
var isTest = isProcess && ((_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'test';
|
|
42346
42346
|
|
|
42347
|
+
var getMaterialIconForLevel = function (level) {
|
|
42348
|
+
switch (level) {
|
|
42349
|
+
case 'success':
|
|
42350
|
+
return 'ic_check_circle_outline';
|
|
42351
|
+
case 'info':
|
|
42352
|
+
return 'ic_info_outline';
|
|
42353
|
+
case 'warning':
|
|
42354
|
+
return 'ic_warning_outline';
|
|
42355
|
+
case 'error':
|
|
42356
|
+
return 'ic_error_outline';
|
|
42357
|
+
}
|
|
42358
|
+
};
|
|
42347
42359
|
var LuiAlertModalV2 = function (props) {
|
|
42348
42360
|
var level = props.level, className = props.className, children = props.children, rest = __rest(props, ["level", "className", "children"]);
|
|
42349
42361
|
var materialIcon = getMaterialIconForLevel(level);
|
|
@@ -42351,15 +42363,15 @@ var LuiAlertModalV2 = function (props) {
|
|
|
42351
42363
|
? level
|
|
42352
42364
|
: 'interactive';
|
|
42353
42365
|
return (React__default["default"].createElement(LuiModalV2, __assign({}, rest, { className: clsx("lui-modal-v2-alert lui-modal-v2-".concat(level), className), headingIcon: {
|
|
42354
|
-
name:
|
|
42366
|
+
name: materialIcon,
|
|
42355
42367
|
alt: "".concat(level, " status icon"),
|
|
42356
42368
|
size: 'md',
|
|
42357
42369
|
status: status
|
|
42358
42370
|
} }), children));
|
|
42359
42371
|
};
|
|
42360
42372
|
|
|
42361
|
-
var css_248z$
|
|
42362
|
-
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);
|
|
42363
42375
|
|
|
42364
42376
|
/**
|
|
42365
42377
|
* @internal
|
|
@@ -47137,8 +47149,8 @@ var LuiSidePanelProvider = function (_a) {
|
|
|
47137
47149
|
React__default["default"].createElement(LuiSidePanelContainer, __assign({}, props))));
|
|
47138
47150
|
};
|
|
47139
47151
|
|
|
47140
|
-
var css_248z$
|
|
47141
|
-
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);
|
|
47142
47154
|
|
|
47143
47155
|
var LuiSwitchButton = function (props) {
|
|
47144
47156
|
var generatedId = useGenerateOrDefaultId();
|
|
@@ -54769,8 +54781,8 @@ var LuiAccordicardStatic = function (props) {
|
|
|
54769
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" }))));
|
|
54770
54782
|
};
|
|
54771
54783
|
|
|
54772
|
-
var css_248z$
|
|
54773
|
-
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);
|
|
54774
54786
|
|
|
54775
54787
|
var LuiAccordion = function (props) {
|
|
54776
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;
|
|
@@ -54881,8 +54893,8 @@ var LuiMultiSwitch = function (_a) {
|
|
|
54881
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)); }))));
|
|
54882
54894
|
};
|
|
54883
54895
|
|
|
54884
|
-
var css_248z$
|
|
54885
|
-
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);
|
|
54886
54898
|
|
|
54887
54899
|
function $c1d7fb2ec91bae71$var$Item(props) {
|
|
54888
54900
|
return null;
|
|
@@ -58411,16 +58423,16 @@ function DefaultEmptyIndicator() {
|
|
|
58411
58423
|
return React__default["default"].createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
|
|
58412
58424
|
}
|
|
58413
58425
|
|
|
58414
|
-
var css_248z$
|
|
58415
|
-
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);
|
|
58416
58428
|
|
|
58417
58429
|
function RadioItemRenderer(_a) {
|
|
58418
58430
|
var item = _a.item, isSelected = _a.isSelected;
|
|
58419
58431
|
return (React__default["default"].createElement("div", { className: "RadioItemRenderer ".concat(isSelected ? 'RadioItemRenderer-isSelected' : '') }, item.label));
|
|
58420
58432
|
}
|
|
58421
58433
|
|
|
58422
|
-
var css_248z$
|
|
58423
|
-
styleInject(css_248z$
|
|
58434
|
+
var css_248z$e = ".CheckboxRenderer {\n display: flex;\n align-items: center;\n}";
|
|
58435
|
+
styleInject(css_248z$e);
|
|
58424
58436
|
|
|
58425
58437
|
function CheckboxItemRenderer(_a) {
|
|
58426
58438
|
var item = _a.item, isSelected = _a.isSelected;
|
|
@@ -58446,8 +58458,8 @@ function LuiSideMenuItem(_a) {
|
|
|
58446
58458
|
React__default["default"].createElement("span", { className: "navText" }, label)))));
|
|
58447
58459
|
}
|
|
58448
58460
|
|
|
58449
|
-
var css_248z$
|
|
58450
|
-
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);
|
|
58451
58463
|
|
|
58452
58464
|
var LuiProgressBar = function (_a) {
|
|
58453
58465
|
var value = _a.value, max = _a.max, error = _a.error, _b = _a.barHeight, barHeight = _b === void 0 ? '5px' : _b;
|
|
@@ -58475,8 +58487,8 @@ var LuiProgressBar = function (_a) {
|
|
|
58475
58487
|
React__default["default"].createElement("div", { "data-testid": 'progress-bar-size', className: clsx("ProgressBar-".concat(status), { indeterminate: indeterminate }), style: { width: "".concat(percentage, "%"), height: barHeight } })));
|
|
58476
58488
|
};
|
|
58477
58489
|
|
|
58478
|
-
var css_248z$
|
|
58479
|
-
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);
|
|
58480
58492
|
|
|
58481
58493
|
exports.ToolbarDirection = void 0;
|
|
58482
58494
|
(function (ToolbarDirection) {
|
|
@@ -58498,8 +58510,8 @@ var ToolbarIcon = function (_a) {
|
|
|
58498
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' }));
|
|
58499
58511
|
};
|
|
58500
58512
|
|
|
58501
|
-
var css_248z$
|
|
58502
|
-
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);
|
|
58503
58515
|
|
|
58504
58516
|
/**
|
|
58505
58517
|
* Create button for using either LuiIcon or Image.
|
|
@@ -58562,8 +58574,8 @@ var useMediaQuery = function (query) {
|
|
|
58562
58574
|
return matches;
|
|
58563
58575
|
};
|
|
58564
58576
|
|
|
58565
|
-
var css_248z$
|
|
58566
|
-
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);
|
|
58567
58579
|
|
|
58568
58580
|
var LuiCounter = React__default["default"].forwardRef(function (props, ref) {
|
|
58569
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"]);
|
|
@@ -58578,8 +58590,8 @@ var LuiCounter = React__default["default"].forwardRef(function (props, ref) {
|
|
|
58578
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()))));
|
|
58579
58591
|
});
|
|
58580
58592
|
|
|
58581
|
-
var css_248z$
|
|
58582
|
-
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);
|
|
58583
58595
|
|
|
58584
58596
|
/**
|
|
58585
58597
|
* @description Pagination component for navigating through a list of items with multiple pages.
|
|
@@ -58725,11 +58737,11 @@ var LuiPagination = React.forwardRef(function (_a, ref) {
|
|
|
58725
58737
|
React__default["default"].createElement("div", { className: "pagination" }, renderPaginationNumbers())))));
|
|
58726
58738
|
});
|
|
58727
58739
|
|
|
58728
|
-
var css_248z$
|
|
58729
|
-
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);
|
|
58730
58742
|
|
|
58731
|
-
var css_248z$
|
|
58732
|
-
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);
|
|
58733
58745
|
|
|
58734
58746
|
var useForkRef = function (forwardedRef) {
|
|
58735
58747
|
var localRef = React.useRef(null);
|
|
@@ -59458,8 +59470,8 @@ var keyDownHandler = function (e) {
|
|
|
59458
59470
|
return valueNow + delta;
|
|
59459
59471
|
};
|
|
59460
59472
|
|
|
59461
|
-
var css_248z$
|
|
59462
|
-
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);
|
|
59463
59475
|
|
|
59464
59476
|
/**
|
|
59465
59477
|
* Container that appends a separator when the children count equals 2.
|
|
@@ -59511,8 +59523,8 @@ var useSplitterRef = function () {
|
|
|
59511
59523
|
return { ref: ref, setRatio: setRatio };
|
|
59512
59524
|
};
|
|
59513
59525
|
|
|
59514
|
-
var css_248z$
|
|
59515
|
-
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);
|
|
59516
59528
|
|
|
59517
59529
|
var LuiBannerV2 = React.forwardRef(function (_a, ref) {
|
|
59518
59530
|
var _b, _c, _d;
|
|
@@ -59531,8 +59543,8 @@ var LuiBannerV2 = React.forwardRef(function (_a, ref) {
|
|
|
59531
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" }))))));
|
|
59532
59544
|
});
|
|
59533
59545
|
|
|
59534
|
-
var css_248z$
|
|
59535
|
-
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);
|
|
59536
59548
|
|
|
59537
59549
|
var defaultColours = [
|
|
59538
59550
|
{ color: '#FF0000', description: 'Red' },
|
|
@@ -59582,8 +59594,8 @@ var ColorPalette = React.forwardRef(function (_a, ref) {
|
|
|
59582
59594
|
})));
|
|
59583
59595
|
});
|
|
59584
59596
|
|
|
59585
|
-
var css_248z$
|
|
59586
|
-
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);
|
|
59587
59599
|
|
|
59588
59600
|
var topRightToastsHeight = function (portal) {
|
|
59589
59601
|
var _a, _b, _c, _d;
|
|
@@ -59654,8 +59666,8 @@ var getToastProviderEl = function () {
|
|
|
59654
59666
|
return portal;
|
|
59655
59667
|
};
|
|
59656
59668
|
|
|
59657
|
-
var css_248z$
|
|
59658
|
-
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);
|
|
59659
59671
|
|
|
59660
59672
|
var getToastSectionEl = function (position) {
|
|
59661
59673
|
var portal = getToastProviderEl();
|
|
@@ -59836,8 +59848,8 @@ var ToastProvider = function (_a) {
|
|
|
59836
59848
|
React__namespace.createElement(ToastContext.Provider, { value: dispatch }, children)));
|
|
59837
59849
|
};
|
|
59838
59850
|
|
|
59839
|
-
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}";
|
|
59840
|
-
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);
|
|
59841
59853
|
|
|
59842
59854
|
var ToastBanner = function (_a) {
|
|
59843
59855
|
var level = _a.level, onDismiss = _a.onDismiss, children = _a.children;
|
|
@@ -59919,7 +59931,7 @@ var LuiToastMessage$1 = function (_a) {
|
|
|
59919
59931
|
var _e = React.useState('lui-msg-toast-show'), className = _e[0], setClassname = _e[1];
|
|
59920
59932
|
var _f = React.useState(undefined), fadeOutTimer = _f[0], setFadeOutTimer = _f[1];
|
|
59921
59933
|
var _g = React.useState(undefined), removeTimer = _g[0], setRemoveTimer = _g[1];
|
|
59922
|
-
var materialIcon = getMaterialIconForLevel(level);
|
|
59934
|
+
var materialIcon = getMaterialIconForLevel$1(level);
|
|
59923
59935
|
var callOnCloseAfterDissolved = function () {
|
|
59924
59936
|
// This is so the caller can remove it from the dom
|
|
59925
59937
|
if (onClose) {
|
|
@@ -60084,6 +60096,33 @@ var LuiToastMessage = function (props) {
|
|
|
60084
60096
|
return version === 'v2' ? (React__default["default"].createElement(LuiToastMessageCompatibleInterface, __assign({}, props))) : (React__default["default"].createElement(LuiToastMessage$1, __assign({}, props)));
|
|
60085
60097
|
};
|
|
60086
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
|
+
|
|
60087
60126
|
exports.CheckboxItemRenderer = CheckboxItemRenderer;
|
|
60088
60127
|
exports.ColorInput = ColorInput;
|
|
60089
60128
|
exports.ColorInputGroup = ColorInputGroup;
|
|
@@ -60127,6 +60166,7 @@ exports.LuiDropdownMenuV2 = LuiDropdownMenuV2;
|
|
|
60127
60166
|
exports.LuiDropdownMenuV2DropContent = LuiDropdownMenuV2DropContent;
|
|
60128
60167
|
exports.LuiErrorIllustration = LuiErrorIllustration;
|
|
60129
60168
|
exports.LuiErrorPage = LuiErrorPage;
|
|
60169
|
+
exports.LuiErrorPanel = LuiErrorPanel;
|
|
60130
60170
|
exports.LuiExpandableBanner = LuiExpandableBanner;
|
|
60131
60171
|
exports.LuiFileInputBox = LuiFileInputBox;
|
|
60132
60172
|
exports.LuiFilterContainer = LuiFilterContainer;
|