@linzjs/lui 21.28.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 +7 -0
- package/dist/components/LuiBannerV2/LuiBannerV2.d.ts +15 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +63 -38
- package/dist/index.js.map +1 -1
- package/dist/lui.esm.js +63 -39
- package/dist/lui.esm.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
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
|
+
|
|
1
8
|
# [21.28.0](https://github.com/linz/lui/compare/v21.27.0...v21.28.0) (2024-05-02)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -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
|
|
|
@@ -42260,8 +42260,8 @@ var LuiModalHeader = function (props) {
|
|
|
42260
42260
|
React__default["default"].createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "lg" }))))))));
|
|
42261
42261
|
};
|
|
42262
42262
|
|
|
42263
|
-
var css_248z$
|
|
42264
|
-
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);
|
|
42265
42265
|
|
|
42266
42266
|
/**
|
|
42267
42267
|
* @internal
|
|
@@ -46935,8 +46935,8 @@ var LuiSidePanelProvider = function (_a) {
|
|
|
46935
46935
|
React__default["default"].createElement(LuiSidePanelContainer, __assign({}, props))));
|
|
46936
46936
|
};
|
|
46937
46937
|
|
|
46938
|
-
var css_248z$
|
|
46939
|
-
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);
|
|
46940
46940
|
|
|
46941
46941
|
var LuiSwitchButton = function (props) {
|
|
46942
46942
|
var generatedId = useGenerateOrDefaultId();
|
|
@@ -54567,8 +54567,8 @@ var LuiAccordicardStatic = function (props) {
|
|
|
54567
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" }))));
|
|
54568
54568
|
};
|
|
54569
54569
|
|
|
54570
|
-
var css_248z$
|
|
54571
|
-
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);
|
|
54572
54572
|
|
|
54573
54573
|
var LuiAccordion = function (props) {
|
|
54574
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;
|
|
@@ -54679,8 +54679,8 @@ var LuiMultiSwitch = function (_a) {
|
|
|
54679
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)); }))));
|
|
54680
54680
|
};
|
|
54681
54681
|
|
|
54682
|
-
var css_248z$
|
|
54683
|
-
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);
|
|
54684
54684
|
|
|
54685
54685
|
function $c1d7fb2ec91bae71$var$Item(props) {
|
|
54686
54686
|
return null;
|
|
@@ -58180,16 +58180,16 @@ function DefaultEmptyIndicator() {
|
|
|
58180
58180
|
return React__default["default"].createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
|
|
58181
58181
|
}
|
|
58182
58182
|
|
|
58183
|
-
var css_248z$
|
|
58184
|
-
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);
|
|
58185
58185
|
|
|
58186
58186
|
function RadioItemRenderer(_a) {
|
|
58187
58187
|
var item = _a.item, isSelected = _a.isSelected;
|
|
58188
58188
|
return (React__default["default"].createElement("div", { className: "RadioItemRenderer ".concat(isSelected ? 'RadioItemRenderer-isSelected' : '') }, item.label));
|
|
58189
58189
|
}
|
|
58190
58190
|
|
|
58191
|
-
var css_248z$
|
|
58192
|
-
styleInject(css_248z$
|
|
58191
|
+
var css_248z$9 = ".CheckboxRenderer {\n display: flex;\n align-items: center;\n}";
|
|
58192
|
+
styleInject(css_248z$9);
|
|
58193
58193
|
|
|
58194
58194
|
function CheckboxItemRenderer(_a) {
|
|
58195
58195
|
var item = _a.item, isSelected = _a.isSelected;
|
|
@@ -58213,8 +58213,8 @@ function LuiSideMenuItem(_a) {
|
|
|
58213
58213
|
React__default["default"].createElement("span", { className: "navText" }, label))));
|
|
58214
58214
|
}
|
|
58215
58215
|
|
|
58216
|
-
var css_248z$
|
|
58217
|
-
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);
|
|
58218
58218
|
|
|
58219
58219
|
var LuiProgressBar = function (_a) {
|
|
58220
58220
|
var value = _a.value, max = _a.max, error = _a.error, _b = _a.barHeight, barHeight = _b === void 0 ? '5px' : _b;
|
|
@@ -58242,8 +58242,8 @@ var LuiProgressBar = function (_a) {
|
|
|
58242
58242
|
React__default["default"].createElement("div", { "data-testid": 'progress-bar-size', className: clsx("ProgressBar-".concat(status), { indeterminate: indeterminate }), style: { width: "".concat(percentage, "%"), height: barHeight } })));
|
|
58243
58243
|
};
|
|
58244
58244
|
|
|
58245
|
-
var css_248z$
|
|
58246
|
-
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);
|
|
58247
58247
|
|
|
58248
58248
|
exports.ToolbarDirection = void 0;
|
|
58249
58249
|
(function (ToolbarDirection) {
|
|
@@ -58265,8 +58265,8 @@ var ToolbarIcon = function (_a) {
|
|
|
58265
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' }));
|
|
58266
58266
|
};
|
|
58267
58267
|
|
|
58268
|
-
var css_248z$
|
|
58269
|
-
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);
|
|
58270
58270
|
|
|
58271
58271
|
/**
|
|
58272
58272
|
* Create button for using either LuiIcon or Image.
|
|
@@ -58329,8 +58329,8 @@ var useMediaQuery = function (query) {
|
|
|
58329
58329
|
return matches;
|
|
58330
58330
|
};
|
|
58331
58331
|
|
|
58332
|
-
var css_248z$
|
|
58333
|
-
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);
|
|
58334
58334
|
|
|
58335
58335
|
var LuiCounter = React__default["default"].forwardRef(function (props, ref) {
|
|
58336
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"]);
|
|
@@ -58345,8 +58345,8 @@ var LuiCounter = React__default["default"].forwardRef(function (props, ref) {
|
|
|
58345
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()))));
|
|
58346
58346
|
});
|
|
58347
58347
|
|
|
58348
|
-
var css_248z$
|
|
58349
|
-
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);
|
|
58350
58350
|
|
|
58351
58351
|
var LuiPagination = function (_a) {
|
|
58352
58352
|
var totalPages = _a.totalPages, currentPage = _a.currentPage, onPageChange = _a.onPageChange, _b = _a.isMobileLayout, isMobileLayout = _b === void 0 ? null : _b;
|
|
@@ -58456,11 +58456,11 @@ var LuiPagination = function (_a) {
|
|
|
58456
58456
|
React__default["default"].createElement("div", { className: "pagination" }, renderPaginationNumbers())))));
|
|
58457
58457
|
};
|
|
58458
58458
|
|
|
58459
|
-
var css_248z$
|
|
58460
|
-
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);
|
|
58461
58461
|
|
|
58462
|
-
var css_248z$
|
|
58463
|
-
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);
|
|
58464
58464
|
|
|
58465
58465
|
var useForkRef = function (forwardedRef) {
|
|
58466
58466
|
var localRef = React.useRef(null);
|
|
@@ -59218,8 +59218,8 @@ var keyDownHandler = function (e) {
|
|
|
59218
59218
|
return valueNow + delta;
|
|
59219
59219
|
};
|
|
59220
59220
|
|
|
59221
|
-
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}";
|
|
59222
|
-
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);
|
|
59223
59223
|
|
|
59224
59224
|
/**
|
|
59225
59225
|
* Container that appends a separator when the children count equals 2.
|
|
@@ -59271,6 +59271,30 @@ var useSplitterRef = function () {
|
|
|
59271
59271
|
return { ref: ref, setRatio: setRatio };
|
|
59272
59272
|
};
|
|
59273
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
|
+
|
|
59274
59298
|
exports.CheckboxItemRenderer = CheckboxItemRenderer;
|
|
59275
59299
|
exports.LUI_WINDOW_NAME = LUI_WINDOW_NAME;
|
|
59276
59300
|
exports.LuiAccordicard = LuiAccordicard;
|
|
@@ -59282,6 +59306,7 @@ exports.LuiAppFooterSml = LuiAppFooterSml;
|
|
|
59282
59306
|
exports.LuiBadge = LuiBadge;
|
|
59283
59307
|
exports.LuiBanner = LuiBanner;
|
|
59284
59308
|
exports.LuiBannerContent = LuiBannerContent;
|
|
59309
|
+
exports.LuiBannerV2 = LuiBannerV2;
|
|
59285
59310
|
exports.LuiBearingInput = LuiBearingInput;
|
|
59286
59311
|
exports.LuiButton = LuiButton;
|
|
59287
59312
|
exports.LuiButtonGroup = LuiButtonGroup;
|