@linzjs/lui 21.27.0 → 21.29.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/LuiBannerV2/LuiBannerV2.d.ts +15 -0
- package/dist/components/LuiModal/LuiModal.d.ts +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +78 -40
- package/dist/index.js.map +1 -1
- package/dist/lui.esm.js +78 -41
- package/dist/lui.esm.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
# [21.29.0](https://github.com/linz/lui/compare/v21.28.0...v21.29.0) (2024-05-09)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **LuiBannerV2:** upgrade banner ([#1117](https://github.com/linz/lui/issues/1117)) ([9965d10](https://github.com/linz/lui/commit/9965d100ab9d4b7d4248f5f04b5beed50de60373))
|
|
7
|
+
|
|
8
|
+
# [21.28.0](https://github.com/linz/lui/compare/v21.27.0...v21.28.0) (2024-05-02)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* Make change to trigger deploy to npm of LuiModal shouldCloseOnEsc key-up ([#1115](https://github.com/linz/lui/issues/1115)) ([f7a1215](https://github.com/linz/lui/commit/f7a1215d7ee8ec6a63180498f1a127f5cebd0fc7))
|
|
14
|
+
|
|
1
15
|
# [21.27.0](https://github.com/linz/lui/compare/v21.26.3...v21.27.0) (2024-04-24)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import './LuiBannerV2.scss';
|
|
2
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
declare type Dismiss = {
|
|
5
|
+
onDismiss: () => void;
|
|
6
|
+
dismissButtonProps?: ComponentPropsWithoutRef<'button'>;
|
|
7
|
+
} | {
|
|
8
|
+
onDismiss?: undefined;
|
|
9
|
+
dismissButtonProps?: never;
|
|
10
|
+
};
|
|
11
|
+
declare type Props = {
|
|
12
|
+
level?: 'warning' | 'error' | 'info' | 'success';
|
|
13
|
+
} & Dismiss & ComponentPropsWithoutRef<'div'>;
|
|
14
|
+
export declare const LuiBannerV2: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
|
|
15
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -71,3 +71,4 @@ export { LuiCounter } from './components/LuiCounter/LuiCounter';
|
|
|
71
71
|
export { LuiPagination } from './components/LuiPagination/LuiPagination';
|
|
72
72
|
export { Splitter } from './components/Splitter/Splitter';
|
|
73
73
|
export { useSplitterRef } from './components/Splitter/useSplitterRef';
|
|
74
|
+
export { LuiBannerV2 } from './components/LuiBannerV2/LuiBannerV2';
|
package/dist/index.js
CHANGED
|
@@ -25661,8 +25661,8 @@ function styleInject(css, ref) {
|
|
|
25661
25661
|
}
|
|
25662
25662
|
}
|
|
25663
25663
|
|
|
25664
|
-
var css_248z$
|
|
25665
|
-
styleInject(css_248z$
|
|
25664
|
+
var css_248z$j = ".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}";
|
|
25665
|
+
styleInject(css_248z$j);
|
|
25666
25666
|
|
|
25667
25667
|
/**
|
|
25668
25668
|
* Overwrite the common buttons for floating window to
|
|
@@ -27938,8 +27938,8 @@ ReactSplitGrid.defaultProps = {
|
|
|
27938
27938
|
onDrag: undefined,
|
|
27939
27939
|
};
|
|
27940
27940
|
|
|
27941
|
-
var css_248z$
|
|
27942
|
-
styleInject(css_248z$
|
|
27941
|
+
var css_248z$i = ".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}";
|
|
27942
|
+
styleInject(css_248z$i);
|
|
27943
27943
|
|
|
27944
27944
|
var GutterComponent = function (props) {
|
|
27945
27945
|
var leftIcon = (React__default["default"].createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "", status: "interactive" }));
|
|
@@ -31698,8 +31698,8 @@ var LuiTabsPanelSwitch = function (props) {
|
|
|
31698
31698
|
} }, tabProps), children));
|
|
31699
31699
|
};
|
|
31700
31700
|
|
|
31701
|
-
var css_248z$
|
|
31702
|
-
styleInject(css_248z$
|
|
31701
|
+
var css_248z$h = "/**\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}";
|
|
31702
|
+
styleInject(css_248z$h);
|
|
31703
31703
|
|
|
31704
31704
|
var LuiError = function (_a) {
|
|
31705
31705
|
var error = _a.error, className = _a.className;
|
|
@@ -32061,8 +32061,8 @@ var LuiDateInput = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
32061
32061
|
return React__default["default"].createElement(LuiTextInput, __assign({}, mapped, { ref: ref }));
|
|
32062
32062
|
});
|
|
32063
32063
|
|
|
32064
|
-
var css_248z$
|
|
32065
|
-
styleInject(css_248z$
|
|
32064
|
+
var css_248z$g = ".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}";
|
|
32065
|
+
styleInject(css_248z$g);
|
|
32066
32066
|
|
|
32067
32067
|
var MoneyParser = /** @class */ (function () {
|
|
32068
32068
|
function MoneyParser(init, options) {
|
|
@@ -39714,9 +39714,9 @@ var StateManagedSelect = /*#__PURE__*/React__default["default"].forwardRef(funct
|
|
|
39714
39714
|
|
|
39715
39715
|
var Select = StateManagedSelect;
|
|
39716
39716
|
|
|
39717
|
-
var css_248z$
|
|
39717
|
+
var css_248z$f = "";
|
|
39718
39718
|
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%)"};
|
|
39719
|
-
styleInject(css_248z$
|
|
39719
|
+
styleInject(css_248z$f);
|
|
39720
39720
|
|
|
39721
39721
|
var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
|
|
39722
39722
|
|
|
@@ -42182,7 +42182,7 @@ var FeatureIFrame = function (_a) {
|
|
|
42182
42182
|
};
|
|
42183
42183
|
|
|
42184
42184
|
var LuiModal = function (props) {
|
|
42185
|
-
var _a
|
|
42185
|
+
var _a;
|
|
42186
42186
|
var node = React.useRef(null);
|
|
42187
42187
|
var handleClickOutside = React.useCallback(function (e) {
|
|
42188
42188
|
// current DOES have a contains!
|
|
@@ -42209,7 +42209,20 @@ var LuiModal = function (props) {
|
|
|
42209
42209
|
Modal.setAppElement('#root');
|
|
42210
42210
|
}
|
|
42211
42211
|
}
|
|
42212
|
-
|
|
42212
|
+
React.useEffect(function () {
|
|
42213
|
+
var handleKeyUp = function (e) {
|
|
42214
|
+
var _a;
|
|
42215
|
+
if (props.shouldCloseOnEsc === 'use-keyup' && e.key === 'Escape') {
|
|
42216
|
+
e.stopPropagation();
|
|
42217
|
+
(_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
|
|
42218
|
+
}
|
|
42219
|
+
};
|
|
42220
|
+
document.addEventListener('keyup', handleKeyUp);
|
|
42221
|
+
return function () {
|
|
42222
|
+
document.removeEventListener('keyup', handleKeyUp);
|
|
42223
|
+
};
|
|
42224
|
+
}, [props.shouldCloseOnEsc, props.onClose]);
|
|
42225
|
+
return (React__default["default"].createElement(Modal, __assign({ key: props.key, isOpen: true, shouldCloseOnOverlayClick: props.shouldCloseOnOverlayClick, shouldCloseOnEsc: props.shouldCloseOnEsc === true || props.shouldCloseOnEsc === undefined, onRequestClose: props.onClose, overlayClassName: "modal", className: props.lowContrast ? 'lui-scrim-low-contrast' : 'lui-scrim', ariaHideApp: !isTest }, (props.appendToElement && {
|
|
42213
42226
|
parentSelector: props.appendToElement
|
|
42214
42227
|
})),
|
|
42215
42228
|
React__default["default"].createElement("div", { ref: node, className: clsx('lui-modal lui-box-shadow', props.maxWidth && 'lui-max-width', props.headingText && 'lui-modal-no-padding', props.className) },
|
|
@@ -42247,8 +42260,8 @@ var LuiModalHeader = function (props) {
|
|
|
42247
42260
|
React__default["default"].createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "lg" }))))))));
|
|
42248
42261
|
};
|
|
42249
42262
|
|
|
42250
|
-
var css_248z$
|
|
42251
|
-
styleInject(css_248z$
|
|
42263
|
+
var css_248z$e = "@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";
|
|
42264
|
+
styleInject(css_248z$e);
|
|
42252
42265
|
|
|
42253
42266
|
/**
|
|
42254
42267
|
* @internal
|
|
@@ -46922,8 +46935,8 @@ var LuiSidePanelProvider = function (_a) {
|
|
|
46922
46935
|
React__default["default"].createElement(LuiSidePanelContainer, __assign({}, props))));
|
|
46923
46936
|
};
|
|
46924
46937
|
|
|
46925
|
-
var css_248z$
|
|
46926
|
-
styleInject(css_248z$
|
|
46938
|
+
var css_248z$d = ".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 justify-content: space-between;\n cursor: pointer;\n width: 40px;\n height: 20px;\n background: grey;\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: absolute;\n top: 2px;\n left: 2px;\n width: 18px;\n height: 16px;\n border-radius: 18px;\n transition: 0.2s;\n background: #fff;\n box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);\n}\n\n.lui-switch-checkbox:checked + .lui-switch-label .lui-switch-button {\n left: calc(100% - 2px);\n transform: translateX(-100%);\n}\n\n.lui-switch-label:active .lui-switch-button {\n width: 20px;\n}";
|
|
46939
|
+
styleInject(css_248z$d);
|
|
46927
46940
|
|
|
46928
46941
|
var LuiSwitchButton = function (props) {
|
|
46929
46942
|
var generatedId = useGenerateOrDefaultId();
|
|
@@ -54554,8 +54567,8 @@ var LuiAccordicardStatic = function (props) {
|
|
|
54554
54567
|
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" }))));
|
|
54555
54568
|
};
|
|
54556
54569
|
|
|
54557
|
-
var css_248z$
|
|
54558
|
-
styleInject(css_248z$
|
|
54570
|
+
var css_248z$c = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.lui-accordion {\n padding: 8px;\n display: flex;\n border-radius: 5px;\n box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);\n}\n.lui-accordion .chevron {\n transition: all 0.3s ease-in-out;\n transform: rotate(0);\n}\n.lui-accordion .chevron--isOpen {\n transform: rotate(180deg);\n}\n.lui-accordion .accordion-heading {\n padding: 4px;\n}\n.lui-accordion h4 {\n padding: 4px;\n}\n.lui-accordion > summary {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.lui-accordion > summary h4 {\n margin-top: 0;\n display: inline-block;\n}\n.lui-accordion > summary::marker, .lui-accordion > summary::-webkit-details-marker {\n display: none;\n}";
|
|
54571
|
+
styleInject(css_248z$c);
|
|
54559
54572
|
|
|
54560
54573
|
var LuiAccordion = function (props) {
|
|
54561
54574
|
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;
|
|
@@ -54666,8 +54679,8 @@ var LuiMultiSwitch = function (_a) {
|
|
|
54666
54679
|
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)); }))));
|
|
54667
54680
|
};
|
|
54668
54681
|
|
|
54669
|
-
var css_248z$
|
|
54670
|
-
styleInject(css_248z$
|
|
54682
|
+
var css_248z$b = "/**\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}";
|
|
54683
|
+
styleInject(css_248z$b);
|
|
54671
54684
|
|
|
54672
54685
|
function $c1d7fb2ec91bae71$var$Item(props) {
|
|
54673
54686
|
return null;
|
|
@@ -58167,16 +58180,16 @@ function DefaultEmptyIndicator() {
|
|
|
58167
58180
|
return React__default["default"].createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
|
|
58168
58181
|
}
|
|
58169
58182
|
|
|
58170
|
-
var css_248z$
|
|
58171
|
-
styleInject(css_248z$
|
|
58183
|
+
var css_248z$a = "/**\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}";
|
|
58184
|
+
styleInject(css_248z$a);
|
|
58172
58185
|
|
|
58173
58186
|
function RadioItemRenderer(_a) {
|
|
58174
58187
|
var item = _a.item, isSelected = _a.isSelected;
|
|
58175
58188
|
return (React__default["default"].createElement("div", { className: "RadioItemRenderer ".concat(isSelected ? 'RadioItemRenderer-isSelected' : '') }, item.label));
|
|
58176
58189
|
}
|
|
58177
58190
|
|
|
58178
|
-
var css_248z$
|
|
58179
|
-
styleInject(css_248z$
|
|
58191
|
+
var css_248z$9 = ".CheckboxRenderer {\n display: flex;\n align-items: center;\n}";
|
|
58192
|
+
styleInject(css_248z$9);
|
|
58180
58193
|
|
|
58181
58194
|
function CheckboxItemRenderer(_a) {
|
|
58182
58195
|
var item = _a.item, isSelected = _a.isSelected;
|
|
@@ -58200,8 +58213,8 @@ function LuiSideMenuItem(_a) {
|
|
|
58200
58213
|
React__default["default"].createElement("span", { className: "navText" }, label))));
|
|
58201
58214
|
}
|
|
58202
58215
|
|
|
58203
|
-
var css_248z$
|
|
58204
|
-
styleInject(css_248z$
|
|
58216
|
+
var css_248z$8 = "/**\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}";
|
|
58217
|
+
styleInject(css_248z$8);
|
|
58205
58218
|
|
|
58206
58219
|
var LuiProgressBar = function (_a) {
|
|
58207
58220
|
var value = _a.value, max = _a.max, error = _a.error, _b = _a.barHeight, barHeight = _b === void 0 ? '5px' : _b;
|
|
@@ -58229,8 +58242,8 @@ var LuiProgressBar = function (_a) {
|
|
|
58229
58242
|
React__default["default"].createElement("div", { "data-testid": 'progress-bar-size', className: clsx("ProgressBar-".concat(status), { indeterminate: indeterminate }), style: { width: "".concat(percentage, "%"), height: barHeight } })));
|
|
58230
58243
|
};
|
|
58231
58244
|
|
|
58232
|
-
var css_248z$
|
|
58233
|
-
styleInject(css_248z$
|
|
58245
|
+
var css_248z$7 = "/**\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}";
|
|
58246
|
+
styleInject(css_248z$7);
|
|
58234
58247
|
|
|
58235
58248
|
exports.ToolbarDirection = void 0;
|
|
58236
58249
|
(function (ToolbarDirection) {
|
|
@@ -58252,8 +58265,8 @@ var ToolbarIcon = function (_a) {
|
|
|
58252
58265
|
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' }));
|
|
58253
58266
|
};
|
|
58254
58267
|
|
|
58255
|
-
var css_248z$
|
|
58256
|
-
styleInject(css_248z$
|
|
58268
|
+
var css_248z$6 = "/**\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}";
|
|
58269
|
+
styleInject(css_248z$6);
|
|
58257
58270
|
|
|
58258
58271
|
/**
|
|
58259
58272
|
* Create button for using either LuiIcon or Image.
|
|
@@ -58316,8 +58329,8 @@ var useMediaQuery = function (query) {
|
|
|
58316
58329
|
return matches;
|
|
58317
58330
|
};
|
|
58318
58331
|
|
|
58319
|
-
var css_248z$
|
|
58320
|
-
styleInject(css_248z$
|
|
58332
|
+
var css_248z$5 = "/**\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}";
|
|
58333
|
+
styleInject(css_248z$5);
|
|
58321
58334
|
|
|
58322
58335
|
var LuiCounter = React__default["default"].forwardRef(function (props, ref) {
|
|
58323
58336
|
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"]);
|
|
@@ -58332,8 +58345,8 @@ var LuiCounter = React__default["default"].forwardRef(function (props, ref) {
|
|
|
58332
58345
|
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()))));
|
|
58333
58346
|
});
|
|
58334
58347
|
|
|
58335
|
-
var css_248z$
|
|
58336
|
-
styleInject(css_248z$
|
|
58348
|
+
var css_248z$4 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.lui-pagination-override-mobile .lui-pagination-desktop {\n display: none;\n visibility: hidden;\n opacity: 0;\n}\n.lui-pagination-override-mobile .lui-pagination-mobile {\n display: flex;\n}\n\n.lui-pagination-override-desktop .lui-pagination-mobile {\n display: none;\n visibility: hidden;\n opacity: 0;\n}\n.lui-pagination-override-desktop .lui-pagination-desktop {\n display: flex;\n}\n\n.lui-pagination-controller {\n container-type: inline-size;\n}\n@container (min-width: 500px) {\n .lui-pagination-controller .lui-pagination-mobile {\n display: none;\n visibility: hidden;\n opacity: 0;\n }\n .lui-pagination-controller .lui-pagination-desktop {\n display: flex;\n }\n}\n@container (max-width: 499px) {\n .lui-pagination-controller .lui-pagination-desktop {\n display: none;\n visibility: hidden;\n opacity: 0;\n }\n .lui-pagination-controller .lui-pagination-mobile {\n display: flex;\n }\n}\n\n.lui-pagination {\n display: flex;\n user-select: none;\n justify-content: center;\n}\n.lui-pagination-page-counter {\n display: flex;\n align-items: center;\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n.lui-pagination .lui-button {\n color: #2a292c;\n height: 40px;\n padding: 0.5rem 0.75rem;\n vertical-align: top;\n}\n.lui-pagination .lui-button .lui-pagination-navigation-icon {\n padding-top: 1px;\n}\n.lui-pagination .lui-button .lui-pagination-navigation-icon path {\n fill: #2a292c;\n}\n.lui-pagination .lui-button:hover {\n color: #2a292c;\n}\n.lui-pagination .lui-button-selected {\n background-color: #007198;\n color: #ffffff;\n}\n.lui-pagination-ellipsis {\n pointer-events: none;\n}\n.lui-pagination-navigate-disabled {\n pointer-events: none;\n}\n.lui-pagination-navigate-disabled .lui-pagination-navigation-icon {\n padding-top: 1px;\n}\n.lui-pagination-navigate-disabled .lui-pagination-navigation-icon path {\n fill: #989189 !important;\n}";
|
|
58349
|
+
styleInject(css_248z$4);
|
|
58337
58350
|
|
|
58338
58351
|
var LuiPagination = function (_a) {
|
|
58339
58352
|
var totalPages = _a.totalPages, currentPage = _a.currentPage, onPageChange = _a.onPageChange, _b = _a.isMobileLayout, isMobileLayout = _b === void 0 ? null : _b;
|
|
@@ -58443,11 +58456,11 @@ var LuiPagination = function (_a) {
|
|
|
58443
58456
|
React__default["default"].createElement("div", { className: "pagination" }, renderPaginationNumbers())))));
|
|
58444
58457
|
};
|
|
58445
58458
|
|
|
58446
|
-
var css_248z$
|
|
58447
|
-
styleInject(css_248z$
|
|
58459
|
+
var css_248z$3 = "/**\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}";
|
|
58460
|
+
styleInject(css_248z$3);
|
|
58448
58461
|
|
|
58449
|
-
var css_248z$
|
|
58450
|
-
styleInject(css_248z$
|
|
58462
|
+
var css_248z$2 = ".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}";
|
|
58463
|
+
styleInject(css_248z$2);
|
|
58451
58464
|
|
|
58452
58465
|
var useForkRef = function (forwardedRef) {
|
|
58453
58466
|
var localRef = React.useRef(null);
|
|
@@ -59205,8 +59218,8 @@ var keyDownHandler = function (e) {
|
|
|
59205
59218
|
return valueNow + delta;
|
|
59206
59219
|
};
|
|
59207
59220
|
|
|
59208
|
-
var css_248z = "/**\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 background: #f9f9f9;\n overflow: auto;\n}\n.Splitter.resizing * {\n pointer-events: none;\n user-select: none;\n}";
|
|
59209
|
-
styleInject(css_248z);
|
|
59221
|
+
var css_248z$1 = "/**\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 background: #f9f9f9;\n overflow: auto;\n}\n.Splitter.resizing * {\n pointer-events: none;\n user-select: none;\n}";
|
|
59222
|
+
styleInject(css_248z$1);
|
|
59210
59223
|
|
|
59211
59224
|
/**
|
|
59212
59225
|
* Container that appends a separator when the children count equals 2.
|
|
@@ -59258,6 +59271,30 @@ var useSplitterRef = function () {
|
|
|
59258
59271
|
return { ref: ref, setRatio: setRatio };
|
|
59259
59272
|
};
|
|
59260
59273
|
|
|
59274
|
+
var css_248z = "/**\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: flex;\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.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}";
|
|
59275
|
+
styleInject(css_248z);
|
|
59276
|
+
|
|
59277
|
+
var LuiBannerV2 = React.forwardRef(function (_a, ref) {
|
|
59278
|
+
var _b, _c, _d;
|
|
59279
|
+
var level = _a.level, onDismiss = _a.onDismiss, className = _a.className, children = _a.children, dismissButtonProps = _a.dismissButtonProps, props = __rest(_a, ["level", "onDismiss", "className", "children", "dismissButtonProps"]);
|
|
59280
|
+
var icon = (function () {
|
|
59281
|
+
switch (level) {
|
|
59282
|
+
case 'success':
|
|
59283
|
+
return "ic_check_circle_outline";
|
|
59284
|
+
default:
|
|
59285
|
+
return level && "ic_".concat(level, "_outline");
|
|
59286
|
+
}
|
|
59287
|
+
})();
|
|
59288
|
+
return (React__default["default"].createElement("div", __assign({ ref: ref, className: clsx('LuiBannerV2', level, icon && 'has-level', onDismiss && 'can-dismiss', className) }, props),
|
|
59289
|
+
icon && (React__default["default"].createElement(LuiIcon, { className: clsx('LuiBannerV2-Icon', level), size: "lg", name: icon, spanProps: { 'aria-hidden': true }, alt: level })),
|
|
59290
|
+
children,
|
|
59291
|
+
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: function (e) {
|
|
59292
|
+
var _a;
|
|
59293
|
+
(_a = dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(dismissButtonProps, e);
|
|
59294
|
+
onDismiss();
|
|
59295
|
+
} }), (_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" }))))));
|
|
59296
|
+
});
|
|
59297
|
+
|
|
59261
59298
|
exports.CheckboxItemRenderer = CheckboxItemRenderer;
|
|
59262
59299
|
exports.LUI_WINDOW_NAME = LUI_WINDOW_NAME;
|
|
59263
59300
|
exports.LuiAccordicard = LuiAccordicard;
|
|
@@ -59269,6 +59306,7 @@ exports.LuiAppFooterSml = LuiAppFooterSml;
|
|
|
59269
59306
|
exports.LuiBadge = LuiBadge;
|
|
59270
59307
|
exports.LuiBanner = LuiBanner;
|
|
59271
59308
|
exports.LuiBannerContent = LuiBannerContent;
|
|
59309
|
+
exports.LuiBannerV2 = LuiBannerV2;
|
|
59272
59310
|
exports.LuiBearingInput = LuiBearingInput;
|
|
59273
59311
|
exports.LuiButton = LuiButton;
|
|
59274
59312
|
exports.LuiButtonGroup = LuiButtonGroup;
|