@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/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
# [21.16.0](https://github.com/linz/lui/compare/v21.15.1...v21.16.0) (2024-01-16)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* trigger release for pagination component ([#1077](https://github.com/linz/lui/issues/1077)) ([815a47b](https://github.com/linz/lui/commit/815a47b1efef42d2d77b15a9655e15bf9be940a5))
|
|
7
|
+
|
|
8
|
+
## [21.15.1](https://github.com/linz/lui/compare/v21.15.0...v21.15.1) (2023-12-11)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* remove-svgstore ([#1066](https://github.com/linz/lui/issues/1066)) ([262d548](https://github.com/linz/lui/commit/262d54895b164bfdfb5ced0e853e701ddc515016))
|
|
14
|
+
|
|
1
15
|
# [21.15.0](https://github.com/linz/lui/compare/v21.14.1...v21.15.0) (2023-12-04)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import './LuiCounter.scss';
|
|
2
3
|
export declare const LuiCounter: React.ForwardRefExoticComponent<{
|
|
3
4
|
selectedNum: number;
|
|
4
5
|
totalNum: number;
|
|
6
|
+
shape?: "rect" | "circle" | undefined;
|
|
7
|
+
countZero?: boolean | undefined;
|
|
5
8
|
} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import './LuiPagination.scss';
|
|
3
|
+
declare type PaginationProps = {
|
|
4
|
+
totalPages: number;
|
|
5
|
+
currentPage: number;
|
|
6
|
+
onPageChange: (page: number) => void;
|
|
7
|
+
isMobileLayout?: boolean | null;
|
|
8
|
+
};
|
|
9
|
+
export declare const LuiPagination: ({ totalPages, currentPage, onPageChange, isMobileLayout, }: PaginationProps) => JSX.Element;
|
|
10
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -66,5 +66,6 @@ export { ToolbarItem, type ToolbarItemProps, ToolbarItemSeparator, } from './com
|
|
|
66
66
|
export { type Breakpoint, breakpoints, breakpointQuery, useMediaQuery, } from './components/common/UseMediaQuery';
|
|
67
67
|
export { useEscapeFunction, usePageClickFunction, } from './components/common/Hooks';
|
|
68
68
|
export { LuiCounter } from './components/LuiCounter/LuiCounter';
|
|
69
|
+
export { LuiPagination } from './components/LuiPagination/LuiPagination';
|
|
69
70
|
export { Splitter } from './components/Splitter/Splitter';
|
|
70
71
|
export { useSplitterRef } from './components/Splitter/useSplitterRef';
|
package/dist/index.js
CHANGED
|
@@ -25505,8 +25505,8 @@ function styleInject(css, ref) {
|
|
|
25505
25505
|
}
|
|
25506
25506
|
}
|
|
25507
25507
|
|
|
25508
|
-
var css_248z$
|
|
25509
|
-
styleInject(css_248z$
|
|
25508
|
+
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}";
|
|
25509
|
+
styleInject(css_248z$i);
|
|
25510
25510
|
|
|
25511
25511
|
/**
|
|
25512
25512
|
* Overwrite the common buttons for floating window to
|
|
@@ -27782,8 +27782,8 @@ ReactSplitGrid.defaultProps = {
|
|
|
27782
27782
|
onDrag: undefined,
|
|
27783
27783
|
};
|
|
27784
27784
|
|
|
27785
|
-
var css_248z$
|
|
27786
|
-
styleInject(css_248z$
|
|
27785
|
+
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}";
|
|
27786
|
+
styleInject(css_248z$h);
|
|
27787
27787
|
|
|
27788
27788
|
var GutterComponent = function (props) {
|
|
27789
27789
|
var leftIcon = (React__default["default"].createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "", status: "interactive" }));
|
|
@@ -31535,8 +31535,8 @@ var LuiTabsPanelSwitch = function (props) {
|
|
|
31535
31535
|
} }, props.children));
|
|
31536
31536
|
};
|
|
31537
31537
|
|
|
31538
|
-
var css_248z$
|
|
31539
|
-
styleInject(css_248z$
|
|
31538
|
+
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}";
|
|
31539
|
+
styleInject(css_248z$g);
|
|
31540
31540
|
|
|
31541
31541
|
var LuiError = function (_a) {
|
|
31542
31542
|
var error = _a.error, className = _a.className;
|
|
@@ -31898,8 +31898,8 @@ var LuiDateInput = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
31898
31898
|
return React__default["default"].createElement(LuiTextInput, __assign({}, mapped, { ref: ref }));
|
|
31899
31899
|
});
|
|
31900
31900
|
|
|
31901
|
-
var css_248z$
|
|
31902
|
-
styleInject(css_248z$
|
|
31901
|
+
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}";
|
|
31902
|
+
styleInject(css_248z$f);
|
|
31903
31903
|
|
|
31904
31904
|
var MoneyParser = /** @class */ (function () {
|
|
31905
31905
|
function MoneyParser(init, options) {
|
|
@@ -39520,9 +39520,9 @@ var StateManagedSelect = /*#__PURE__*/React__default["default"].forwardRef(funct
|
|
|
39520
39520
|
|
|
39521
39521
|
var Select = StateManagedSelect;
|
|
39522
39522
|
|
|
39523
|
-
var css_248z$
|
|
39523
|
+
var css_248z$e = "";
|
|
39524
39524
|
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%)"};
|
|
39525
|
-
styleInject(css_248z$
|
|
39525
|
+
styleInject(css_248z$e);
|
|
39526
39526
|
|
|
39527
39527
|
var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
|
|
39528
39528
|
|
|
@@ -42053,8 +42053,8 @@ var LuiModalHeader = function (props) {
|
|
|
42053
42053
|
React__default["default"].createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "lg" }))))))));
|
|
42054
42054
|
};
|
|
42055
42055
|
|
|
42056
|
-
var css_248z$
|
|
42057
|
-
styleInject(css_248z$
|
|
42056
|
+
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";
|
|
42057
|
+
styleInject(css_248z$d);
|
|
42058
42058
|
|
|
42059
42059
|
/**
|
|
42060
42060
|
* @internal
|
|
@@ -46725,8 +46725,8 @@ var LuiSidePanelProvider = function (_a) {
|
|
|
46725
46725
|
React__default["default"].createElement(LuiSidePanelContainer, __assign({}, props))));
|
|
46726
46726
|
};
|
|
46727
46727
|
|
|
46728
|
-
var css_248z$
|
|
46729
|
-
styleInject(css_248z$
|
|
46728
|
+
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}";
|
|
46729
|
+
styleInject(css_248z$c);
|
|
46730
46730
|
|
|
46731
46731
|
var LuiSwitchButton = function (props) {
|
|
46732
46732
|
var generatedId = useGenerateOrDefaultId();
|
|
@@ -54357,8 +54357,8 @@ var LuiAccordicardStatic = function (props) {
|
|
|
54357
54357
|
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" }))));
|
|
54358
54358
|
};
|
|
54359
54359
|
|
|
54360
|
-
var css_248z$
|
|
54361
|
-
styleInject(css_248z$
|
|
54360
|
+
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}";
|
|
54361
|
+
styleInject(css_248z$b);
|
|
54362
54362
|
|
|
54363
54363
|
var LuiAccordion = function (props) {
|
|
54364
54364
|
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;
|
|
@@ -54469,8 +54469,8 @@ var LuiMultiSwitch = function (_a) {
|
|
|
54469
54469
|
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)); }))));
|
|
54470
54470
|
};
|
|
54471
54471
|
|
|
54472
|
-
var css_248z$
|
|
54473
|
-
styleInject(css_248z$
|
|
54472
|
+
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}";
|
|
54473
|
+
styleInject(css_248z$a);
|
|
54474
54474
|
|
|
54475
54475
|
function $c1d7fb2ec91bae71$var$Item(props) {
|
|
54476
54476
|
return null;
|
|
@@ -57970,16 +57970,16 @@ function DefaultEmptyIndicator() {
|
|
|
57970
57970
|
return React__default["default"].createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
|
|
57971
57971
|
}
|
|
57972
57972
|
|
|
57973
|
-
var css_248z$
|
|
57974
|
-
styleInject(css_248z$
|
|
57973
|
+
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}";
|
|
57974
|
+
styleInject(css_248z$9);
|
|
57975
57975
|
|
|
57976
57976
|
function RadioItemRenderer(_a) {
|
|
57977
57977
|
var item = _a.item, isSelected = _a.isSelected;
|
|
57978
57978
|
return (React__default["default"].createElement("div", { className: "RadioItemRenderer ".concat(isSelected ? 'RadioItemRenderer-isSelected' : '') }, item.label));
|
|
57979
57979
|
}
|
|
57980
57980
|
|
|
57981
|
-
var css_248z$
|
|
57982
|
-
styleInject(css_248z$
|
|
57981
|
+
var css_248z$8 = ".CheckboxRenderer {\n display: flex;\n align-items: center;\n}";
|
|
57982
|
+
styleInject(css_248z$8);
|
|
57983
57983
|
|
|
57984
57984
|
function CheckboxItemRenderer(_a) {
|
|
57985
57985
|
var item = _a.item, isSelected = _a.isSelected;
|
|
@@ -58003,8 +58003,8 @@ function LuiSideMenuItem(_a) {
|
|
|
58003
58003
|
React__default["default"].createElement("span", { className: "navText" }, label))));
|
|
58004
58004
|
}
|
|
58005
58005
|
|
|
58006
|
-
var css_248z$
|
|
58007
|
-
styleInject(css_248z$
|
|
58006
|
+
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}";
|
|
58007
|
+
styleInject(css_248z$7);
|
|
58008
58008
|
|
|
58009
58009
|
var LuiProgressBar = function (_a) {
|
|
58010
58010
|
var value = _a.value, max = _a.max, error = _a.error, _b = _a.barHeight, barHeight = _b === void 0 ? '5px' : _b;
|
|
@@ -58032,8 +58032,8 @@ var LuiProgressBar = function (_a) {
|
|
|
58032
58032
|
React__default["default"].createElement("div", { "data-testid": 'progress-bar-size', className: clsx("ProgressBar-".concat(status), { indeterminate: indeterminate }), style: { width: "".concat(percentage, "%"), height: barHeight } })));
|
|
58033
58033
|
};
|
|
58034
58034
|
|
|
58035
|
-
var css_248z$
|
|
58036
|
-
styleInject(css_248z$
|
|
58035
|
+
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}";
|
|
58036
|
+
styleInject(css_248z$6);
|
|
58037
58037
|
|
|
58038
58038
|
var ToolbarDirection;
|
|
58039
58039
|
(function (ToolbarDirection) {
|
|
@@ -58055,8 +58055,8 @@ var ToolbarIcon = function (_a) {
|
|
|
58055
58055
|
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' }));
|
|
58056
58056
|
};
|
|
58057
58057
|
|
|
58058
|
-
var css_248z$
|
|
58059
|
-
styleInject(css_248z$
|
|
58058
|
+
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}";
|
|
58059
|
+
styleInject(css_248z$5);
|
|
58060
58060
|
|
|
58061
58061
|
/**
|
|
58062
58062
|
* Create button for using either LuiIcon or Image.
|
|
@@ -58119,11 +58119,133 @@ var useMediaQuery = function (query) {
|
|
|
58119
58119
|
return matches;
|
|
58120
58120
|
};
|
|
58121
58121
|
|
|
58122
|
+
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}";
|
|
58123
|
+
styleInject(css_248z$4);
|
|
58124
|
+
|
|
58122
58125
|
var LuiCounter = React__default["default"].forwardRef(function (props, ref) {
|
|
58123
|
-
var selectedNum = props.selectedNum, totalNum = props.totalNum, title = props.title, className = props.className, rest = __rest(props, ["selectedNum", "totalNum", "title", "className"]);
|
|
58124
|
-
|
|
58126
|
+
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"]);
|
|
58127
|
+
var determineCounterClassname = function () {
|
|
58128
|
+
// We default to rect to avoid breaking changes
|
|
58129
|
+
if (shape === 'circle') {
|
|
58130
|
+
return 'LuiCounter-round';
|
|
58131
|
+
}
|
|
58132
|
+
else
|
|
58133
|
+
return clsx(selectedNum === 0 ? 'LuiCounter-zero' : 'LuiCounter-non-zero', className);
|
|
58134
|
+
};
|
|
58135
|
+
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()))));
|
|
58125
58136
|
});
|
|
58126
58137
|
|
|
58138
|
+
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}";
|
|
58139
|
+
styleInject(css_248z$3);
|
|
58140
|
+
|
|
58141
|
+
var LuiPagination = function (_a) {
|
|
58142
|
+
var totalPages = _a.totalPages, currentPage = _a.currentPage, onPageChange = _a.onPageChange, _b = _a.isMobileLayout, isMobileLayout = _b === void 0 ? null : _b;
|
|
58143
|
+
var visibleCount = 6; // potentially can be refined further, has issues if set to smaller values
|
|
58144
|
+
var mobileLayoutOverride = function () {
|
|
58145
|
+
if (isMobileLayout !== null) {
|
|
58146
|
+
if (isMobileLayout) {
|
|
58147
|
+
return 'lui-pagination-override-mobile';
|
|
58148
|
+
}
|
|
58149
|
+
else {
|
|
58150
|
+
return 'lui-pagination-override-desktop';
|
|
58151
|
+
}
|
|
58152
|
+
}
|
|
58153
|
+
return 'lui-pagination-controller';
|
|
58154
|
+
};
|
|
58155
|
+
var navigateButtonBefore = function () {
|
|
58156
|
+
return (React__default["default"].createElement(LuiButton, { level: "tertiary", key: "lui-pagination-button-navigate-before", className: currentPage > 1
|
|
58157
|
+
? 'lui-pagination-navigate'
|
|
58158
|
+
: 'lui-pagination-navigate-disabled', "data-testid": currentPage > 1
|
|
58159
|
+
? 'lui-pagination-navigate-before'
|
|
58160
|
+
: 'lui-pagination-navigate-before-disabled', onClick: function () { return handlePaginationPageChange(currentPage - 1); } },
|
|
58161
|
+
React__default["default"].createElement(LuiIcon, { name: "ic_keyboard_arrow_left", alt: "Previous page", size: "md", className: "lui-pagination-navigation-icon" })));
|
|
58162
|
+
};
|
|
58163
|
+
var navigateButtonAfter = function () {
|
|
58164
|
+
return (React__default["default"].createElement(LuiButton, { level: "tertiary", key: "lui-pagination-button-navigate-after", className: currentPage < totalPages
|
|
58165
|
+
? 'lui-pagination-navigate'
|
|
58166
|
+
: 'lui-pagination-navigate-disabled', "data-testid": currentPage < totalPages
|
|
58167
|
+
? 'lui-pagination-navigate-after'
|
|
58168
|
+
: 'lui-pagination-navigate-after-disabled', onClick: function () { return handlePaginationPageChange(currentPage + 1); } },
|
|
58169
|
+
React__default["default"].createElement(LuiIcon, { name: "ic_keyboard_arrow_right", alt: "Next page", size: "md", className: "lui-pagination-navigation-icon" })));
|
|
58170
|
+
};
|
|
58171
|
+
var handlePaginationPageChange = function (pageNumber) {
|
|
58172
|
+
if (pageNumber > 0 && pageNumber <= totalPages) {
|
|
58173
|
+
// setCurrentPage(pageNumber);
|
|
58174
|
+
onPageChange(pageNumber);
|
|
58175
|
+
}
|
|
58176
|
+
};
|
|
58177
|
+
var renderPaginationNumbers = function () {
|
|
58178
|
+
var paginationArray = [];
|
|
58179
|
+
// calculate values before and after the currently selected page
|
|
58180
|
+
var startPage = Math.max(1, currentPage - 1);
|
|
58181
|
+
var endPage = Math.min(totalPages, currentPage + 1);
|
|
58182
|
+
// trail pages at the beginning and end if close to the end
|
|
58183
|
+
if (currentPage <= visibleCount - 2) {
|
|
58184
|
+
startPage = 1;
|
|
58185
|
+
endPage = Math.min(totalPages, startPage + visibleCount - 2);
|
|
58186
|
+
}
|
|
58187
|
+
else if (totalPages - currentPage <= visibleCount - 3) {
|
|
58188
|
+
endPage = totalPages;
|
|
58189
|
+
startPage = Math.max(2, endPage - visibleCount + 2);
|
|
58190
|
+
}
|
|
58191
|
+
// starting page if away from the start
|
|
58192
|
+
if (startPage > 1) {
|
|
58193
|
+
paginationArray.push(React__default["default"].createElement(LuiButton, { level: "tertiary", key: "lui-pagination-navigation-start", onClick: function () { return handlePaginationPageChange(1); } },
|
|
58194
|
+
React__default["default"].createElement("b", null, "1")));
|
|
58195
|
+
// add ellipsis if start away from beginning
|
|
58196
|
+
if (startPage > 2) {
|
|
58197
|
+
paginationArray.push(React__default["default"].createElement(LuiButton, { level: "tertiary", className: "lui-pagination-ellipsis", key: "lui-pagination-ellipsis-start", "data-testid": "lui-pagination-ellipsis" }, '...'));
|
|
58198
|
+
}
|
|
58199
|
+
}
|
|
58200
|
+
var _loop_1 = function (i) {
|
|
58201
|
+
paginationArray.push(React__default["default"].createElement(LuiButton, { level: "tertiary", key: "lui-pagination-button-".concat(i), className: i === currentPage ? 'lui-button-selected' : '', onClick: function () { return handlePaginationPageChange(i); } },
|
|
58202
|
+
React__default["default"].createElement("b", null, i)));
|
|
58203
|
+
};
|
|
58204
|
+
// add all the visible page numbers
|
|
58205
|
+
for (var i = startPage; i <= endPage; i++) {
|
|
58206
|
+
_loop_1(i);
|
|
58207
|
+
}
|
|
58208
|
+
// show ellipsis if away from the end
|
|
58209
|
+
if (endPage < totalPages) {
|
|
58210
|
+
if (endPage < totalPages - 1) {
|
|
58211
|
+
paginationArray.push(React__default["default"].createElement(LuiButton, { level: "tertiary", className: "lui-pagination-ellipsis", key: "lui-pagination-ellipsis-end", "data-testid": "lui-pagination-ellipsis" }, '...'));
|
|
58212
|
+
}
|
|
58213
|
+
paginationArray.push(React__default["default"].createElement(LuiButton, { level: "tertiary", key: "lui-pagination-button-last", onClick: function () { return handlePaginationPageChange(totalPages); } },
|
|
58214
|
+
React__default["default"].createElement("b", null, totalPages)));
|
|
58215
|
+
}
|
|
58216
|
+
// add back and forward icons to the beginning and end
|
|
58217
|
+
paginationArray.unshift(navigateButtonBefore());
|
|
58218
|
+
paginationArray.push(navigateButtonAfter());
|
|
58219
|
+
return paginationArray;
|
|
58220
|
+
};
|
|
58221
|
+
return (React__default["default"].createElement("div", { className: mobileLayoutOverride() },
|
|
58222
|
+
(mobileLayoutOverride() === 'lui-pagination-override-mobile' ||
|
|
58223
|
+
mobileLayoutOverride() === 'lui-pagination-controller') && (React__default["default"].createElement("div", { className: "lui-pagination-mobile lui-pagination" },
|
|
58224
|
+
React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
58225
|
+
React__default["default"].createElement(LuiButton, { level: "tertiary", key: "lui-pagination-button-navigate-first", className: currentPage !== 1
|
|
58226
|
+
? 'lui-pagination-navigate'
|
|
58227
|
+
: 'lui-pagination-navigate-disabled', "data-testid": currentPage !== 1
|
|
58228
|
+
? 'lui-pagination-navigate-begin'
|
|
58229
|
+
: 'lui-pagination-navigate-begin-disabled', onClick: function () { return handlePaginationPageChange(1); } },
|
|
58230
|
+
React__default["default"].createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "First page", size: "md", className: "lui-pagination-navigation-icon" })),
|
|
58231
|
+
navigateButtonBefore(),
|
|
58232
|
+
React__default["default"].createElement("div", { className: "lui-pagination-page-counter", "data-testid": "lui-pagination-page-counter" },
|
|
58233
|
+
React__default["default"].createElement("b", null,
|
|
58234
|
+
currentPage,
|
|
58235
|
+
" of ",
|
|
58236
|
+
totalPages)),
|
|
58237
|
+
navigateButtonAfter(),
|
|
58238
|
+
React__default["default"].createElement(LuiButton, { level: "tertiary", key: "lui-pagination-button-navigate-end", className: currentPage !== totalPages
|
|
58239
|
+
? 'lui-pagination-navigate'
|
|
58240
|
+
: 'lui-pagination-navigate-disabled', "data-testid": currentPage !== totalPages
|
|
58241
|
+
? 'lui-pagination-navigate-end'
|
|
58242
|
+
: 'lui-pagination-navigate-end-disabled', onClick: function () { return handlePaginationPageChange(totalPages); } },
|
|
58243
|
+
React__default["default"].createElement(LuiIcon, { name: "ic_double_arrow_right", alt: "Last page", size: "md", className: "lui-pagination-navigation-icon" }))))),
|
|
58244
|
+
(mobileLayoutOverride() === 'lui-pagination-override-desktop' ||
|
|
58245
|
+
mobileLayoutOverride() === 'lui-pagination-controller') && (React__default["default"].createElement("div", { className: "lui-pagination-desktop lui-pagination" },
|
|
58246
|
+
React__default["default"].createElement("div", { className: "pagination" }, renderPaginationNumbers())))));
|
|
58247
|
+
};
|
|
58248
|
+
|
|
58127
58249
|
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}";
|
|
58128
58250
|
styleInject(css_248z$2);
|
|
58129
58251
|
|
|
@@ -58700,6 +58822,7 @@ exports.LuiModal = LuiModal;
|
|
|
58700
58822
|
exports.LuiMoneyInput = LuiMoneyInput;
|
|
58701
58823
|
exports.LuiMultiSwitch = LuiMultiSwitch;
|
|
58702
58824
|
exports.LuiMultiSwitchYesNo = LuiMultiSwitchYesNo;
|
|
58825
|
+
exports.LuiPagination = LuiPagination;
|
|
58703
58826
|
exports.LuiProgressBar = LuiProgressBar;
|
|
58704
58827
|
exports.LuiRadioInput = LuiRadioInput;
|
|
58705
58828
|
exports.LuiResizableLayout = LuiResizableLayout;
|