@linzjs/lui 21.15.0 → 21.16.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/LuiCounter/LuiCounter.d.ts +3 -0
- package/dist/components/LuiPagination/LuiPagination.d.ts +10 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +153 -30
- package/dist/index.js.map +1 -1
- package/dist/lui.esm.js +153 -31
- package/dist/lui.esm.js.map +1 -1
- package/package.json +15 -16
package/dist/lui.esm.js
CHANGED
|
@@ -25476,8 +25476,8 @@ function styleInject(css, ref) {
|
|
|
25476
25476
|
}
|
|
25477
25477
|
}
|
|
25478
25478
|
|
|
25479
|
-
var css_248z$
|
|
25480
|
-
styleInject(css_248z$
|
|
25479
|
+
var css_248z$i = ".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}";
|
|
25480
|
+
styleInject(css_248z$i);
|
|
25481
25481
|
|
|
25482
25482
|
/**
|
|
25483
25483
|
* Overwrite the common buttons for floating window to
|
|
@@ -27753,8 +27753,8 @@ ReactSplitGrid.defaultProps = {
|
|
|
27753
27753
|
onDrag: undefined,
|
|
27754
27754
|
};
|
|
27755
27755
|
|
|
27756
|
-
var css_248z$
|
|
27757
|
-
styleInject(css_248z$
|
|
27756
|
+
var css_248z$h = ".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}";
|
|
27757
|
+
styleInject(css_248z$h);
|
|
27758
27758
|
|
|
27759
27759
|
var GutterComponent = function (props) {
|
|
27760
27760
|
var leftIcon = (React__default.createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "", status: "interactive" }));
|
|
@@ -31506,8 +31506,8 @@ var LuiTabsPanelSwitch = function (props) {
|
|
|
31506
31506
|
} }, props.children));
|
|
31507
31507
|
};
|
|
31508
31508
|
|
|
31509
|
-
var css_248z$
|
|
31510
|
-
styleInject(css_248z$
|
|
31509
|
+
var css_248z$g = "/**\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}";
|
|
31510
|
+
styleInject(css_248z$g);
|
|
31511
31511
|
|
|
31512
31512
|
var LuiError = function (_a) {
|
|
31513
31513
|
var error = _a.error, className = _a.className;
|
|
@@ -31869,8 +31869,8 @@ var LuiDateInput = React__default.forwardRef(function (_a, ref) {
|
|
|
31869
31869
|
return React__default.createElement(LuiTextInput, __assign({}, mapped, { ref: ref }));
|
|
31870
31870
|
});
|
|
31871
31871
|
|
|
31872
|
-
var css_248z$
|
|
31873
|
-
styleInject(css_248z$
|
|
31872
|
+
var css_248z$f = ".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}";
|
|
31873
|
+
styleInject(css_248z$f);
|
|
31874
31874
|
|
|
31875
31875
|
var MoneyParser = /** @class */ (function () {
|
|
31876
31876
|
function MoneyParser(init, options) {
|
|
@@ -39491,9 +39491,9 @@ var StateManagedSelect = /*#__PURE__*/React__default.forwardRef(function (props,
|
|
|
39491
39491
|
|
|
39492
39492
|
var Select = StateManagedSelect;
|
|
39493
39493
|
|
|
39494
|
-
var css_248z$
|
|
39494
|
+
var css_248z$e = "";
|
|
39495
39495
|
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%)"};
|
|
39496
|
-
styleInject(css_248z$
|
|
39496
|
+
styleInject(css_248z$e);
|
|
39497
39497
|
|
|
39498
39498
|
var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
|
|
39499
39499
|
|
|
@@ -42024,8 +42024,8 @@ var LuiModalHeader = function (props) {
|
|
|
42024
42024
|
React__default.createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "lg" }))))))));
|
|
42025
42025
|
};
|
|
42026
42026
|
|
|
42027
|
-
var css_248z$
|
|
42028
|
-
styleInject(css_248z$
|
|
42027
|
+
var css_248z$d = "@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";
|
|
42028
|
+
styleInject(css_248z$d);
|
|
42029
42029
|
|
|
42030
42030
|
/**
|
|
42031
42031
|
* @internal
|
|
@@ -46696,8 +46696,8 @@ var LuiSidePanelProvider = function (_a) {
|
|
|
46696
46696
|
React__default.createElement(LuiSidePanelContainer, __assign({}, props))));
|
|
46697
46697
|
};
|
|
46698
46698
|
|
|
46699
|
-
var css_248z$
|
|
46700
|
-
styleInject(css_248z$
|
|
46699
|
+
var css_248z$c = ".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}";
|
|
46700
|
+
styleInject(css_248z$c);
|
|
46701
46701
|
|
|
46702
46702
|
var LuiSwitchButton = function (props) {
|
|
46703
46703
|
var generatedId = useGenerateOrDefaultId();
|
|
@@ -54328,8 +54328,8 @@ var LuiAccordicardStatic = function (props) {
|
|
|
54328
54328
|
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" }))));
|
|
54329
54329
|
};
|
|
54330
54330
|
|
|
54331
|
-
var css_248z$
|
|
54332
|
-
styleInject(css_248z$
|
|
54331
|
+
var css_248z$b = "/**\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}";
|
|
54332
|
+
styleInject(css_248z$b);
|
|
54333
54333
|
|
|
54334
54334
|
var LuiAccordion = function (props) {
|
|
54335
54335
|
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;
|
|
@@ -54440,8 +54440,8 @@ var LuiMultiSwitch = function (_a) {
|
|
|
54440
54440
|
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)); }))));
|
|
54441
54441
|
};
|
|
54442
54442
|
|
|
54443
|
-
var css_248z$
|
|
54444
|
-
styleInject(css_248z$
|
|
54443
|
+
var css_248z$a = "/**\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}";
|
|
54444
|
+
styleInject(css_248z$a);
|
|
54445
54445
|
|
|
54446
54446
|
function $c1d7fb2ec91bae71$var$Item(props) {
|
|
54447
54447
|
return null;
|
|
@@ -57941,16 +57941,16 @@ function DefaultEmptyIndicator() {
|
|
|
57941
57941
|
return React__default.createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
|
|
57942
57942
|
}
|
|
57943
57943
|
|
|
57944
|
-
var css_248z$
|
|
57945
|
-
styleInject(css_248z$
|
|
57944
|
+
var css_248z$9 = "/**\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}";
|
|
57945
|
+
styleInject(css_248z$9);
|
|
57946
57946
|
|
|
57947
57947
|
function RadioItemRenderer(_a) {
|
|
57948
57948
|
var item = _a.item, isSelected = _a.isSelected;
|
|
57949
57949
|
return (React__default.createElement("div", { className: "RadioItemRenderer ".concat(isSelected ? 'RadioItemRenderer-isSelected' : '') }, item.label));
|
|
57950
57950
|
}
|
|
57951
57951
|
|
|
57952
|
-
var css_248z$
|
|
57953
|
-
styleInject(css_248z$
|
|
57952
|
+
var css_248z$8 = ".CheckboxRenderer {\n display: flex;\n align-items: center;\n}";
|
|
57953
|
+
styleInject(css_248z$8);
|
|
57954
57954
|
|
|
57955
57955
|
function CheckboxItemRenderer(_a) {
|
|
57956
57956
|
var item = _a.item, isSelected = _a.isSelected;
|
|
@@ -57974,8 +57974,8 @@ function LuiSideMenuItem(_a) {
|
|
|
57974
57974
|
React__default.createElement("span", { className: "navText" }, label))));
|
|
57975
57975
|
}
|
|
57976
57976
|
|
|
57977
|
-
var css_248z$
|
|
57978
|
-
styleInject(css_248z$
|
|
57977
|
+
var css_248z$7 = "/**\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}";
|
|
57978
|
+
styleInject(css_248z$7);
|
|
57979
57979
|
|
|
57980
57980
|
var LuiProgressBar = function (_a) {
|
|
57981
57981
|
var value = _a.value, max = _a.max, error = _a.error, _b = _a.barHeight, barHeight = _b === void 0 ? '5px' : _b;
|
|
@@ -58003,8 +58003,8 @@ var LuiProgressBar = function (_a) {
|
|
|
58003
58003
|
React__default.createElement("div", { "data-testid": 'progress-bar-size', className: clsx("ProgressBar-".concat(status), { indeterminate: indeterminate }), style: { width: "".concat(percentage, "%"), height: barHeight } })));
|
|
58004
58004
|
};
|
|
58005
58005
|
|
|
58006
|
-
var css_248z$
|
|
58007
|
-
styleInject(css_248z$
|
|
58006
|
+
var css_248z$6 = "/**\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}";
|
|
58007
|
+
styleInject(css_248z$6);
|
|
58008
58008
|
|
|
58009
58009
|
var ToolbarDirection;
|
|
58010
58010
|
(function (ToolbarDirection) {
|
|
@@ -58026,8 +58026,8 @@ var ToolbarIcon = function (_a) {
|
|
|
58026
58026
|
return iconImage ? (React__default.createElement("img", { className: "LuiIcon--lg", alt: iconName, src: iconImage })) : (React__default.createElement(LuiIcon, { name: iconName, alt: iconName, size: 'md' }));
|
|
58027
58027
|
};
|
|
58028
58028
|
|
|
58029
|
-
var css_248z$
|
|
58030
|
-
styleInject(css_248z$
|
|
58029
|
+
var css_248z$5 = "/**\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}";
|
|
58030
|
+
styleInject(css_248z$5);
|
|
58031
58031
|
|
|
58032
58032
|
/**
|
|
58033
58033
|
* Create button for using either LuiIcon or Image.
|
|
@@ -58090,11 +58090,133 @@ var useMediaQuery = function (query) {
|
|
|
58090
58090
|
return matches;
|
|
58091
58091
|
};
|
|
58092
58092
|
|
|
58093
|
+
var css_248z$4 = "/**\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}";
|
|
58094
|
+
styleInject(css_248z$4);
|
|
58095
|
+
|
|
58093
58096
|
var LuiCounter = React__default.forwardRef(function (props, ref) {
|
|
58094
|
-
var selectedNum = props.selectedNum, totalNum = props.totalNum, title = props.title, className = props.className, rest = __rest(props, ["selectedNum", "totalNum", "title", "className"]);
|
|
58095
|
-
|
|
58097
|
+
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"]);
|
|
58098
|
+
var determineCounterClassname = function () {
|
|
58099
|
+
// We default to rect to avoid breaking changes
|
|
58100
|
+
if (shape === 'circle') {
|
|
58101
|
+
return 'LuiCounter-round';
|
|
58102
|
+
}
|
|
58103
|
+
else
|
|
58104
|
+
return clsx(selectedNum === 0 ? 'LuiCounter-zero' : 'LuiCounter-non-zero', className);
|
|
58105
|
+
};
|
|
58106
|
+
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()))));
|
|
58096
58107
|
});
|
|
58097
58108
|
|
|
58109
|
+
var css_248z$3 = "/**\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}";
|
|
58110
|
+
styleInject(css_248z$3);
|
|
58111
|
+
|
|
58112
|
+
var LuiPagination = function (_a) {
|
|
58113
|
+
var totalPages = _a.totalPages, currentPage = _a.currentPage, onPageChange = _a.onPageChange, _b = _a.isMobileLayout, isMobileLayout = _b === void 0 ? null : _b;
|
|
58114
|
+
var visibleCount = 6; // potentially can be refined further, has issues if set to smaller values
|
|
58115
|
+
var mobileLayoutOverride = function () {
|
|
58116
|
+
if (isMobileLayout !== null) {
|
|
58117
|
+
if (isMobileLayout) {
|
|
58118
|
+
return 'lui-pagination-override-mobile';
|
|
58119
|
+
}
|
|
58120
|
+
else {
|
|
58121
|
+
return 'lui-pagination-override-desktop';
|
|
58122
|
+
}
|
|
58123
|
+
}
|
|
58124
|
+
return 'lui-pagination-controller';
|
|
58125
|
+
};
|
|
58126
|
+
var navigateButtonBefore = function () {
|
|
58127
|
+
return (React__default.createElement(LuiButton, { level: "tertiary", key: "lui-pagination-button-navigate-before", className: currentPage > 1
|
|
58128
|
+
? 'lui-pagination-navigate'
|
|
58129
|
+
: 'lui-pagination-navigate-disabled', "data-testid": currentPage > 1
|
|
58130
|
+
? 'lui-pagination-navigate-before'
|
|
58131
|
+
: 'lui-pagination-navigate-before-disabled', onClick: function () { return handlePaginationPageChange(currentPage - 1); } },
|
|
58132
|
+
React__default.createElement(LuiIcon, { name: "ic_keyboard_arrow_left", alt: "Previous page", size: "md", className: "lui-pagination-navigation-icon" })));
|
|
58133
|
+
};
|
|
58134
|
+
var navigateButtonAfter = function () {
|
|
58135
|
+
return (React__default.createElement(LuiButton, { level: "tertiary", key: "lui-pagination-button-navigate-after", className: currentPage < totalPages
|
|
58136
|
+
? 'lui-pagination-navigate'
|
|
58137
|
+
: 'lui-pagination-navigate-disabled', "data-testid": currentPage < totalPages
|
|
58138
|
+
? 'lui-pagination-navigate-after'
|
|
58139
|
+
: 'lui-pagination-navigate-after-disabled', onClick: function () { return handlePaginationPageChange(currentPage + 1); } },
|
|
58140
|
+
React__default.createElement(LuiIcon, { name: "ic_keyboard_arrow_right", alt: "Next page", size: "md", className: "lui-pagination-navigation-icon" })));
|
|
58141
|
+
};
|
|
58142
|
+
var handlePaginationPageChange = function (pageNumber) {
|
|
58143
|
+
if (pageNumber > 0 && pageNumber <= totalPages) {
|
|
58144
|
+
// setCurrentPage(pageNumber);
|
|
58145
|
+
onPageChange(pageNumber);
|
|
58146
|
+
}
|
|
58147
|
+
};
|
|
58148
|
+
var renderPaginationNumbers = function () {
|
|
58149
|
+
var paginationArray = [];
|
|
58150
|
+
// calculate values before and after the currently selected page
|
|
58151
|
+
var startPage = Math.max(1, currentPage - 1);
|
|
58152
|
+
var endPage = Math.min(totalPages, currentPage + 1);
|
|
58153
|
+
// trail pages at the beginning and end if close to the end
|
|
58154
|
+
if (currentPage <= visibleCount - 2) {
|
|
58155
|
+
startPage = 1;
|
|
58156
|
+
endPage = Math.min(totalPages, startPage + visibleCount - 2);
|
|
58157
|
+
}
|
|
58158
|
+
else if (totalPages - currentPage <= visibleCount - 3) {
|
|
58159
|
+
endPage = totalPages;
|
|
58160
|
+
startPage = Math.max(2, endPage - visibleCount + 2);
|
|
58161
|
+
}
|
|
58162
|
+
// starting page if away from the start
|
|
58163
|
+
if (startPage > 1) {
|
|
58164
|
+
paginationArray.push(React__default.createElement(LuiButton, { level: "tertiary", key: "lui-pagination-navigation-start", onClick: function () { return handlePaginationPageChange(1); } },
|
|
58165
|
+
React__default.createElement("b", null, "1")));
|
|
58166
|
+
// add ellipsis if start away from beginning
|
|
58167
|
+
if (startPage > 2) {
|
|
58168
|
+
paginationArray.push(React__default.createElement(LuiButton, { level: "tertiary", className: "lui-pagination-ellipsis", key: "lui-pagination-ellipsis-start", "data-testid": "lui-pagination-ellipsis" }, '...'));
|
|
58169
|
+
}
|
|
58170
|
+
}
|
|
58171
|
+
var _loop_1 = function (i) {
|
|
58172
|
+
paginationArray.push(React__default.createElement(LuiButton, { level: "tertiary", key: "lui-pagination-button-".concat(i), className: i === currentPage ? 'lui-button-selected' : '', onClick: function () { return handlePaginationPageChange(i); } },
|
|
58173
|
+
React__default.createElement("b", null, i)));
|
|
58174
|
+
};
|
|
58175
|
+
// add all the visible page numbers
|
|
58176
|
+
for (var i = startPage; i <= endPage; i++) {
|
|
58177
|
+
_loop_1(i);
|
|
58178
|
+
}
|
|
58179
|
+
// show ellipsis if away from the end
|
|
58180
|
+
if (endPage < totalPages) {
|
|
58181
|
+
if (endPage < totalPages - 1) {
|
|
58182
|
+
paginationArray.push(React__default.createElement(LuiButton, { level: "tertiary", className: "lui-pagination-ellipsis", key: "lui-pagination-ellipsis-end", "data-testid": "lui-pagination-ellipsis" }, '...'));
|
|
58183
|
+
}
|
|
58184
|
+
paginationArray.push(React__default.createElement(LuiButton, { level: "tertiary", key: "lui-pagination-button-last", onClick: function () { return handlePaginationPageChange(totalPages); } },
|
|
58185
|
+
React__default.createElement("b", null, totalPages)));
|
|
58186
|
+
}
|
|
58187
|
+
// add back and forward icons to the beginning and end
|
|
58188
|
+
paginationArray.unshift(navigateButtonBefore());
|
|
58189
|
+
paginationArray.push(navigateButtonAfter());
|
|
58190
|
+
return paginationArray;
|
|
58191
|
+
};
|
|
58192
|
+
return (React__default.createElement("div", { className: mobileLayoutOverride() },
|
|
58193
|
+
(mobileLayoutOverride() === 'lui-pagination-override-mobile' ||
|
|
58194
|
+
mobileLayoutOverride() === 'lui-pagination-controller') && (React__default.createElement("div", { className: "lui-pagination-mobile lui-pagination" },
|
|
58195
|
+
React__default.createElement(React__default.Fragment, null,
|
|
58196
|
+
React__default.createElement(LuiButton, { level: "tertiary", key: "lui-pagination-button-navigate-first", className: currentPage !== 1
|
|
58197
|
+
? 'lui-pagination-navigate'
|
|
58198
|
+
: 'lui-pagination-navigate-disabled', "data-testid": currentPage !== 1
|
|
58199
|
+
? 'lui-pagination-navigate-begin'
|
|
58200
|
+
: 'lui-pagination-navigate-begin-disabled', onClick: function () { return handlePaginationPageChange(1); } },
|
|
58201
|
+
React__default.createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "First page", size: "md", className: "lui-pagination-navigation-icon" })),
|
|
58202
|
+
navigateButtonBefore(),
|
|
58203
|
+
React__default.createElement("div", { className: "lui-pagination-page-counter", "data-testid": "lui-pagination-page-counter" },
|
|
58204
|
+
React__default.createElement("b", null,
|
|
58205
|
+
currentPage,
|
|
58206
|
+
" of ",
|
|
58207
|
+
totalPages)),
|
|
58208
|
+
navigateButtonAfter(),
|
|
58209
|
+
React__default.createElement(LuiButton, { level: "tertiary", key: "lui-pagination-button-navigate-end", className: currentPage !== totalPages
|
|
58210
|
+
? 'lui-pagination-navigate'
|
|
58211
|
+
: 'lui-pagination-navigate-disabled', "data-testid": currentPage !== totalPages
|
|
58212
|
+
? 'lui-pagination-navigate-end'
|
|
58213
|
+
: 'lui-pagination-navigate-end-disabled', onClick: function () { return handlePaginationPageChange(totalPages); } },
|
|
58214
|
+
React__default.createElement(LuiIcon, { name: "ic_double_arrow_right", alt: "Last page", size: "md", className: "lui-pagination-navigation-icon" }))))),
|
|
58215
|
+
(mobileLayoutOverride() === 'lui-pagination-override-desktop' ||
|
|
58216
|
+
mobileLayoutOverride() === 'lui-pagination-controller') && (React__default.createElement("div", { className: "lui-pagination-desktop lui-pagination" },
|
|
58217
|
+
React__default.createElement("div", { className: "pagination" }, renderPaginationNumbers())))));
|
|
58218
|
+
};
|
|
58219
|
+
|
|
58098
58220
|
var css_248z$2 = "/**\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: 300ms;\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: 300ms;\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}";
|
|
58099
58221
|
styleInject(css_248z$2);
|
|
58100
58222
|
|
|
@@ -58610,5 +58732,5 @@ var useSplitterRef = function () {
|
|
|
58610
58732
|
return { ref: ref, setRatio: setRatio };
|
|
58611
58733
|
};
|
|
58612
58734
|
|
|
58613
|
-
export { CheckboxItemRenderer, LUI_WINDOW_NAME, LuiAccordicard, LuiAccordicardStatic, LuiAccordion, LuiAlertModal, LuiAlertModalButtons, LuiBadge, LuiBanner, LuiBannerContent, 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, LuiProgressBar, LuiRadioInput, LuiResizableLayout, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuItem, LuiSelectMenuItemSwitch, LuiSelectSubMenuItem, LuiShadow, LuiSideMenu, LuiSideMenuItem, LuiSidePanel, LuiSidePanelProvider, LuiSideToolbar, LuiSplitButton, LuiSplitButtonMenuItem, LuiStaticMessage, LuiStatusSpinner, LuiSwitchButton, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, RadioItemRenderer, SplitPanelState, Splitter, ToolbarButton, ToolbarItem, ToolbarItemSeparator, breakpointQuery, breakpoints, isChromatic, useClickedOutsideElement, useEscapeFunction, useLuiCloseableHeaderMenuContextV2, lR as useLuiFloatingWindow, useMediaQuery, usePageClickFunction, useShowLUIMessage, useSplitterRef };
|
|
58735
|
+
export { CheckboxItemRenderer, LUI_WINDOW_NAME, LuiAccordicard, LuiAccordicardStatic, LuiAccordion, LuiAlertModal, LuiAlertModalButtons, LuiBadge, LuiBanner, LuiBannerContent, 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, LuiStaticMessage, LuiStatusSpinner, LuiSwitchButton, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, RadioItemRenderer, SplitPanelState, Splitter, ToolbarButton, ToolbarItem, ToolbarItemSeparator, breakpointQuery, breakpoints, isChromatic, useClickedOutsideElement, useEscapeFunction, useLuiCloseableHeaderMenuContextV2, lR as useLuiFloatingWindow, useMediaQuery, usePageClickFunction, useShowLUIMessage, useSplitterRef };
|
|
58614
58736
|
//# sourceMappingURL=lui.esm.js.map
|