@linzjs/lui 21.28.0 → 21.29.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/components/LuiBannerV2/LuiBannerV2.d.ts +16 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +59 -38
- package/dist/index.js.map +1 -1
- package/dist/lui.esm.js +59 -39
- package/dist/lui.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/lui.esm.js
CHANGED
|
@@ -25632,8 +25632,8 @@ function styleInject(css, ref) {
|
|
|
25632
25632
|
}
|
|
25633
25633
|
}
|
|
25634
25634
|
|
|
25635
|
-
var css_248z$
|
|
25636
|
-
styleInject(css_248z$
|
|
25635
|
+
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}";
|
|
25636
|
+
styleInject(css_248z$j);
|
|
25637
25637
|
|
|
25638
25638
|
/**
|
|
25639
25639
|
* Overwrite the common buttons for floating window to
|
|
@@ -27909,8 +27909,8 @@ ReactSplitGrid.defaultProps = {
|
|
|
27909
27909
|
onDrag: undefined,
|
|
27910
27910
|
};
|
|
27911
27911
|
|
|
27912
|
-
var css_248z$
|
|
27913
|
-
styleInject(css_248z$
|
|
27912
|
+
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}";
|
|
27913
|
+
styleInject(css_248z$i);
|
|
27914
27914
|
|
|
27915
27915
|
var GutterComponent = function (props) {
|
|
27916
27916
|
var leftIcon = (React__default.createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "", status: "interactive" }));
|
|
@@ -31669,8 +31669,8 @@ var LuiTabsPanelSwitch = function (props) {
|
|
|
31669
31669
|
} }, tabProps), children));
|
|
31670
31670
|
};
|
|
31671
31671
|
|
|
31672
|
-
var css_248z$
|
|
31673
|
-
styleInject(css_248z$
|
|
31672
|
+
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}";
|
|
31673
|
+
styleInject(css_248z$h);
|
|
31674
31674
|
|
|
31675
31675
|
var LuiError = function (_a) {
|
|
31676
31676
|
var error = _a.error, className = _a.className;
|
|
@@ -32032,8 +32032,8 @@ var LuiDateInput = React__default.forwardRef(function (_a, ref) {
|
|
|
32032
32032
|
return React__default.createElement(LuiTextInput, __assign({}, mapped, { ref: ref }));
|
|
32033
32033
|
});
|
|
32034
32034
|
|
|
32035
|
-
var css_248z$
|
|
32036
|
-
styleInject(css_248z$
|
|
32035
|
+
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}";
|
|
32036
|
+
styleInject(css_248z$g);
|
|
32037
32037
|
|
|
32038
32038
|
var MoneyParser = /** @class */ (function () {
|
|
32039
32039
|
function MoneyParser(init, options) {
|
|
@@ -39685,9 +39685,9 @@ var StateManagedSelect = /*#__PURE__*/React__default.forwardRef(function (props,
|
|
|
39685
39685
|
|
|
39686
39686
|
var Select = StateManagedSelect;
|
|
39687
39687
|
|
|
39688
|
-
var css_248z$
|
|
39688
|
+
var css_248z$f = "";
|
|
39689
39689
|
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%)"};
|
|
39690
|
-
styleInject(css_248z$
|
|
39690
|
+
styleInject(css_248z$f);
|
|
39691
39691
|
|
|
39692
39692
|
var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
|
|
39693
39693
|
|
|
@@ -42231,8 +42231,8 @@ var LuiModalHeader = function (props) {
|
|
|
42231
42231
|
React__default.createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "lg" }))))))));
|
|
42232
42232
|
};
|
|
42233
42233
|
|
|
42234
|
-
var css_248z$
|
|
42235
|
-
styleInject(css_248z$
|
|
42234
|
+
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";
|
|
42235
|
+
styleInject(css_248z$e);
|
|
42236
42236
|
|
|
42237
42237
|
/**
|
|
42238
42238
|
* @internal
|
|
@@ -46906,8 +46906,8 @@ var LuiSidePanelProvider = function (_a) {
|
|
|
46906
46906
|
React__default.createElement(LuiSidePanelContainer, __assign({}, props))));
|
|
46907
46907
|
};
|
|
46908
46908
|
|
|
46909
|
-
var css_248z$
|
|
46910
|
-
styleInject(css_248z$
|
|
46909
|
+
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}";
|
|
46910
|
+
styleInject(css_248z$d);
|
|
46911
46911
|
|
|
46912
46912
|
var LuiSwitchButton = function (props) {
|
|
46913
46913
|
var generatedId = useGenerateOrDefaultId();
|
|
@@ -54538,8 +54538,8 @@ var LuiAccordicardStatic = function (props) {
|
|
|
54538
54538
|
React__default.createElement(LuiIcon, { className: clsx('LuiAccordicardStatic-chevron', isOpen ? 'LuiAccordicardStatic-chevron--isOpen' : null), name: 'ic_expand_more', alt: "expand", title: "Expand and collapse panel", size: "md" }))));
|
|
54539
54539
|
};
|
|
54540
54540
|
|
|
54541
|
-
var css_248z$
|
|
54542
|
-
styleInject(css_248z$
|
|
54541
|
+
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}";
|
|
54542
|
+
styleInject(css_248z$c);
|
|
54543
54543
|
|
|
54544
54544
|
var LuiAccordion = function (props) {
|
|
54545
54545
|
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;
|
|
@@ -54650,8 +54650,8 @@ var LuiMultiSwitch = function (_a) {
|
|
|
54650
54650
|
React__default.createElement("div", { className: clsx('LuiMultiSwitch-labels', disabled && 'LuiMultiSwitch-disabled') }, options === null || options === void 0 ? void 0 : options.map(function (option, i) { return (React__default.createElement("label", { role: 'radio', key: i, htmlFor: id.current, "aria-disabled": option.disabled || disabled, "aria-checked": selectedIndex === i, className: option.className, onClick: function () { return select(i); }, onTouchStart: function () { return select(i); } }, option.text)); }))));
|
|
54651
54651
|
};
|
|
54652
54652
|
|
|
54653
|
-
var css_248z$
|
|
54654
|
-
styleInject(css_248z$
|
|
54653
|
+
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}";
|
|
54654
|
+
styleInject(css_248z$b);
|
|
54655
54655
|
|
|
54656
54656
|
function $c1d7fb2ec91bae71$var$Item(props) {
|
|
54657
54657
|
return null;
|
|
@@ -58151,16 +58151,16 @@ function DefaultEmptyIndicator() {
|
|
|
58151
58151
|
return React__default.createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
|
|
58152
58152
|
}
|
|
58153
58153
|
|
|
58154
|
-
var css_248z$
|
|
58155
|
-
styleInject(css_248z$
|
|
58154
|
+
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}";
|
|
58155
|
+
styleInject(css_248z$a);
|
|
58156
58156
|
|
|
58157
58157
|
function RadioItemRenderer(_a) {
|
|
58158
58158
|
var item = _a.item, isSelected = _a.isSelected;
|
|
58159
58159
|
return (React__default.createElement("div", { className: "RadioItemRenderer ".concat(isSelected ? 'RadioItemRenderer-isSelected' : '') }, item.label));
|
|
58160
58160
|
}
|
|
58161
58161
|
|
|
58162
|
-
var css_248z$
|
|
58163
|
-
styleInject(css_248z$
|
|
58162
|
+
var css_248z$9 = ".CheckboxRenderer {\n display: flex;\n align-items: center;\n}";
|
|
58163
|
+
styleInject(css_248z$9);
|
|
58164
58164
|
|
|
58165
58165
|
function CheckboxItemRenderer(_a) {
|
|
58166
58166
|
var item = _a.item, isSelected = _a.isSelected;
|
|
@@ -58184,8 +58184,8 @@ function LuiSideMenuItem(_a) {
|
|
|
58184
58184
|
React__default.createElement("span", { className: "navText" }, label))));
|
|
58185
58185
|
}
|
|
58186
58186
|
|
|
58187
|
-
var css_248z$
|
|
58188
|
-
styleInject(css_248z$
|
|
58187
|
+
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}";
|
|
58188
|
+
styleInject(css_248z$8);
|
|
58189
58189
|
|
|
58190
58190
|
var LuiProgressBar = function (_a) {
|
|
58191
58191
|
var value = _a.value, max = _a.max, error = _a.error, _b = _a.barHeight, barHeight = _b === void 0 ? '5px' : _b;
|
|
@@ -58213,8 +58213,8 @@ var LuiProgressBar = function (_a) {
|
|
|
58213
58213
|
React__default.createElement("div", { "data-testid": 'progress-bar-size', className: clsx("ProgressBar-".concat(status), { indeterminate: indeterminate }), style: { width: "".concat(percentage, "%"), height: barHeight } })));
|
|
58214
58214
|
};
|
|
58215
58215
|
|
|
58216
|
-
var css_248z$
|
|
58217
|
-
styleInject(css_248z$
|
|
58216
|
+
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}";
|
|
58217
|
+
styleInject(css_248z$7);
|
|
58218
58218
|
|
|
58219
58219
|
var ToolbarDirection;
|
|
58220
58220
|
(function (ToolbarDirection) {
|
|
@@ -58236,8 +58236,8 @@ var ToolbarIcon = function (_a) {
|
|
|
58236
58236
|
return iconImage ? (React__default.createElement("img", { className: "LuiIcon--lg", alt: iconName, src: iconImage })) : (React__default.createElement(LuiIcon, { name: iconName, alt: iconName, size: 'md' }));
|
|
58237
58237
|
};
|
|
58238
58238
|
|
|
58239
|
-
var css_248z$
|
|
58240
|
-
styleInject(css_248z$
|
|
58239
|
+
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}";
|
|
58240
|
+
styleInject(css_248z$6);
|
|
58241
58241
|
|
|
58242
58242
|
/**
|
|
58243
58243
|
* Create button for using either LuiIcon or Image.
|
|
@@ -58300,8 +58300,8 @@ var useMediaQuery = function (query) {
|
|
|
58300
58300
|
return matches;
|
|
58301
58301
|
};
|
|
58302
58302
|
|
|
58303
|
-
var css_248z$
|
|
58304
|
-
styleInject(css_248z$
|
|
58303
|
+
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}";
|
|
58304
|
+
styleInject(css_248z$5);
|
|
58305
58305
|
|
|
58306
58306
|
var LuiCounter = React__default.forwardRef(function (props, ref) {
|
|
58307
58307
|
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"]);
|
|
@@ -58316,8 +58316,8 @@ var LuiCounter = React__default.forwardRef(function (props, ref) {
|
|
|
58316
58316
|
return (React__default.createElement(React__default.Fragment, null, !(selectedNum === 0 && !countZero) && (React__default.createElement("span", __assign({ ref: ref, className: determineCounterClassname(), "data-testid": "lui-counter-number-".concat(shape), title: title !== null && title !== void 0 ? title : "".concat(selectedNum, " of ").concat(totalNum, " rows selected") }, rest), selectedNum.toLocaleString()))));
|
|
58317
58317
|
});
|
|
58318
58318
|
|
|
58319
|
-
var css_248z$
|
|
58320
|
-
styleInject(css_248z$
|
|
58319
|
+
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}";
|
|
58320
|
+
styleInject(css_248z$4);
|
|
58321
58321
|
|
|
58322
58322
|
var LuiPagination = function (_a) {
|
|
58323
58323
|
var totalPages = _a.totalPages, currentPage = _a.currentPage, onPageChange = _a.onPageChange, _b = _a.isMobileLayout, isMobileLayout = _b === void 0 ? null : _b;
|
|
@@ -58427,11 +58427,11 @@ var LuiPagination = function (_a) {
|
|
|
58427
58427
|
React__default.createElement("div", { className: "pagination" }, renderPaginationNumbers())))));
|
|
58428
58428
|
};
|
|
58429
58429
|
|
|
58430
|
-
var css_248z$
|
|
58431
|
-
styleInject(css_248z$
|
|
58430
|
+
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}";
|
|
58431
|
+
styleInject(css_248z$3);
|
|
58432
58432
|
|
|
58433
|
-
var css_248z$
|
|
58434
|
-
styleInject(css_248z$
|
|
58433
|
+
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}";
|
|
58434
|
+
styleInject(css_248z$2);
|
|
58435
58435
|
|
|
58436
58436
|
var useForkRef = function (forwardedRef) {
|
|
58437
58437
|
var localRef = useRef(null);
|
|
@@ -59189,8 +59189,8 @@ var keyDownHandler = function (e) {
|
|
|
59189
59189
|
return valueNow + delta;
|
|
59190
59190
|
};
|
|
59191
59191
|
|
|
59192
|
-
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}";
|
|
59193
|
-
styleInject(css_248z);
|
|
59192
|
+
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}";
|
|
59193
|
+
styleInject(css_248z$1);
|
|
59194
59194
|
|
|
59195
59195
|
/**
|
|
59196
59196
|
* Container that appends a separator when the children count equals 2.
|
|
@@ -59242,5 +59242,25 @@ var useSplitterRef = function () {
|
|
|
59242
59242
|
return { ref: ref, setRatio: setRatio };
|
|
59243
59243
|
};
|
|
59244
59244
|
|
|
59245
|
-
|
|
59245
|
+
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: 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}";
|
|
59246
|
+
styleInject(css_248z);
|
|
59247
|
+
|
|
59248
|
+
var LuiBannerV2 = forwardRef$1(function (_a, ref) {
|
|
59249
|
+
var _b, _c, _d;
|
|
59250
|
+
var level = _a.level, onDismiss = _a.onDismiss, className = _a.className, children = _a.children, dismissButtonProps = _a.dismissButtonProps, props = __rest(_a, ["level", "onDismiss", "className", "children", "dismissButtonProps"]);
|
|
59251
|
+
var icon = (function () {
|
|
59252
|
+
switch (level) {
|
|
59253
|
+
case 'success':
|
|
59254
|
+
return "ic_check_circle_outline";
|
|
59255
|
+
default:
|
|
59256
|
+
return level && "ic_".concat(level, "_outline");
|
|
59257
|
+
}
|
|
59258
|
+
})();
|
|
59259
|
+
return (React__default.createElement("div", __assign({ ref: ref, className: clsx('LuiBannerV2', level, icon && 'has-level', onDismiss && 'can-dismiss', className) }, props),
|
|
59260
|
+
children,
|
|
59261
|
+
icon && (React__default.createElement(LuiIcon, { className: clsx('LuiBannerV2-Icon', level), size: "lg", name: icon, spanProps: { 'aria-hidden': true }, alt: level })),
|
|
59262
|
+
onDismiss && (React__default.createElement("button", __assign({}, dismissButtonProps, { className: clsx('LuiBannerV2-Dismiss', dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps.className), "aria-label": (_b = dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps['aria-label']) !== null && _b !== void 0 ? _b : 'Dismiss', type: (_c = dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps.type) !== null && _c !== void 0 ? _c : 'button', onClick: onDismiss }), (_d = dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps.children) !== null && _d !== void 0 ? _d : (React__default.createElement(LuiIcon, { size: "md", name: "ic_clear", spanProps: { 'aria-hidden': true }, alt: "Dismiss" }))))));
|
|
59263
|
+
});
|
|
59264
|
+
|
|
59265
|
+
export { CheckboxItemRenderer, LUI_WINDOW_NAME, LuiAccordicard, LuiAccordicardStatic, LuiAccordion, LuiAlertModal, LuiAlertModalButtons, LuiAppFooterSml, LuiBadge, LuiBanner, LuiBannerContent, LuiBannerV2, LuiBearingInput, LuiButton, LuiButtonGroup, LuiCheckboxInput, LuiCloseableHeaderMenuContext, LuiCloseableHeaderMenuContextV2, LuiCloseableHeaderMenuItem, LuiCloseableHeaderMenuItemV2, LuiComboSelect, LuiControlledMenu, LuiCounter, LuiDateInput, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuDividerV2, LuiDrawerMenuOption, LuiDrawerMenuOptionV2, LuiDrawerMenuOptions, LuiDrawerMenuOptionsV2, LuiDrawerMenuSection, LuiDrawerMenuSectionV2, LuiDrawerMenuV2, LuiDropdownMenu, LuiDropdownMenuV2, LuiDropdownMenuV2DropContent, LuiErrorIllustration, LuiErrorPage, LuiExpandableBanner, LuiFileInputBox, LuiFilterContainer, LuiFilterMenu, LuiFloatingWindow, $F as LuiFloatingWindowContextProvider, LuiFooter, LuiFormSectionHeader, LuiHeader, LuiHeaderMenuItem, LuiHeaderMenuItemV2, LuiHeaderV2, LuiIcon, LuiListBox, LuiLoadingSpinner, LuiMenu, LuiMenuCloseButton, LuiMenuCloseButtonV2, LuiMessagingContextProvider, LuiMiniSpinner, LuiModal, LuiMoneyInput, LuiMultiSwitch, LuiMultiSwitchYesNo, LuiPagination, LuiProgressBar, LuiRadioInput, LuiResizableLayout, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuItem, LuiSelectMenuItemSwitch, LuiSelectSubMenuItem, LuiShadow, LuiSideMenu, LuiSideMenuItem, LuiSidePanel, LuiSidePanelProvider, LuiSideToolbar, LuiSplitButton, LuiSplitButtonMenuItem, LuiSplitButtonPosition, LuiStaticMessage, LuiStatusSpinner, LuiSwitchButton, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, RadioItemRenderer, SplitPanelState, Splitter, ToolbarButton, ToolbarDirection, ToolbarItem, ToolbarItemSeparator, breakpointQuery, breakpoints, isChromatic, useClickedOutsideElement, useEscapeFunction, useLuiCloseableHeaderMenuContextV2, lR as useLuiFloatingWindow, useMediaQuery, usePageClickFunction, useShowLUIMessage, useSplitterRef };
|
|
59246
59266
|
//# sourceMappingURL=lui.esm.js.map
|