@linzjs/lui 17.58.0 → 17.59.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/index.d.ts +1 -0
- package/dist/index.js +54 -24
- package/dist/index.js.map +1 -1
- package/dist/lui.css.map +1 -1
- package/dist/lui.esm.js +54 -25
- package/dist/lui.esm.js.map +1 -1
- package/dist/scss/Components/LuiSidePanel/LuiSidePanel.scss +3 -4
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
# [17.59.0](https://github.com/linz/lui/compare/v17.58.0...v17.59.0) (2023-05-23)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* trigger a new release ([#947](https://github.com/linz/lui/issues/947)) ([72e757c](https://github.com/linz/lui/commit/72e757c1cbae633879c8ed8863bc86f888e1c6fc))
|
|
7
|
+
|
|
1
8
|
# [17.58.0](https://github.com/linz/lui/compare/v17.57.0...v17.58.0) (2023-05-22)
|
|
2
9
|
|
|
3
10
|
|
package/dist/index.d.ts
CHANGED
|
@@ -71,6 +71,7 @@ export { RadioItemRenderer } from './components/LuiListBox/Renderers/RadioItemRe
|
|
|
71
71
|
export { CheckboxItemRenderer } from './components/LuiListBox/Renderers/CheckboxItemRenderer';
|
|
72
72
|
export { LuiSideMenu, ILuiSideMenuProps, } from './components/LuiSideMenu/LuiSideMenu';
|
|
73
73
|
export { LuiSideMenuItem, ILuiSideMenuItemProps, LuiMenuItemClickHandler, } from './components/LuiSideMenu/LuiSideMenuItem';
|
|
74
|
+
export { ProgressBarProps, LuiProgressBar, } from './components/LuiProgressBar/LuiProgressBar';
|
|
74
75
|
export { LuiSideToolbar, ToolbarDirection, } from './components/LuiSideToolbar/LuiSideToolbar';
|
|
75
76
|
export { ToolbarButton, ToolbarButtonProps, } from './components/LuiSideToolbar/ToolbarButton';
|
|
76
77
|
export { ToolbarItem, ToolbarItemProps, ToolbarItemSeparator, } from './components/LuiSideToolbar/ToolbarItem';
|
package/dist/index.js
CHANGED
|
@@ -25441,8 +25441,8 @@ function styleInject(css, ref) {
|
|
|
25441
25441
|
}
|
|
25442
25442
|
}
|
|
25443
25443
|
|
|
25444
|
-
var css_248z$
|
|
25445
|
-
styleInject(css_248z$
|
|
25444
|
+
var css_248z$c = ".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 #00000026, 0px 6px 10px 0px #00000040;\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}";
|
|
25445
|
+
styleInject(css_248z$c);
|
|
25446
25446
|
|
|
25447
25447
|
/**
|
|
25448
25448
|
* Overwrite the common buttons for floating window to
|
|
@@ -27691,8 +27691,8 @@ ReactSplitGrid.defaultProps = {
|
|
|
27691
27691
|
onDrag: undefined,
|
|
27692
27692
|
};
|
|
27693
27693
|
|
|
27694
|
-
var css_248z$
|
|
27695
|
-
styleInject(css_248z$
|
|
27694
|
+
var css_248z$b = ".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;\n /*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}";
|
|
27695
|
+
styleInject(css_248z$b);
|
|
27696
27696
|
|
|
27697
27697
|
var GutterComponent = function (props) {
|
|
27698
27698
|
var leftIcon = (React__default["default"].createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "", status: "interactive" }));
|
|
@@ -28010,8 +28010,8 @@ function LuiFormikForm(props) {
|
|
|
28010
28010
|
" "))));
|
|
28011
28011
|
}
|
|
28012
28012
|
|
|
28013
|
-
var css_248z$
|
|
28014
|
-
styleInject(css_248z$
|
|
28013
|
+
var css_248z$a = "/**\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}";
|
|
28014
|
+
styleInject(css_248z$a);
|
|
28015
28015
|
|
|
28016
28016
|
var LuiError = function (_a) {
|
|
28017
28017
|
var error = _a.error, className = _a.className;
|
|
@@ -52515,8 +52515,8 @@ function isChromatic() {
|
|
|
52515
52515
|
(window === null || window === void 0 ? void 0 : window.location.href.match(/chromatic=true/)));
|
|
52516
52516
|
}
|
|
52517
52517
|
|
|
52518
|
-
var css_248z$
|
|
52519
|
-
styleInject(css_248z$
|
|
52518
|
+
var css_248z$9 = ":export {\n charcoal: #2a292c;\n fuscous: #6b6966;\n gray: #989189;\n silver: #beb9b4;\n lily: #eaeaea;\n dew: #DAD7D6;\n hint: #f9f9f9;\n snow: #ffffff;\n white: #ffffff;\n teal: #00425d;\n sea: #007198;\n electric: #0096cc;\n spray: #73c8e1;\n polar: #e2f3f7;\n memesia: #1F69C3;\n sherpa: #004b50;\n surfie: #017a76;\n persian: #00a599;\n downy: #73cdc8;\n iceberg: #dcf5f0;\n sacramento: #004e32;\n salem: #08814d;\n pigment: #0aa245;\n granny: #9bd79b;\n panache: #e9fae7;\n brand-primary: #004b50;\n brand-secondary: #017a76;\n engine: #cc0000;\n carrot: #EA6A2E;\n kendall: #F5CCCC;\n elizabeth: #FBDED0;\n andrea: #3A7CDF;\n celestial: #D7E5F9;\n golf: #0AA345;\n error: #cc0000;\n error-bg: #F5CCCC;\n error-focus: #5a0000;\n warning: #EA6A2E;\n warning-bg: #fbdfd2;\n warning-focus: #b33a01;\n success: #0aa245;\n success-bg: #e9fae7;\n info: #3A7CDF;\n info-bg: #d8e5f9;\n visited: #00425d;\n green-hover: #107c3a;\n green-active: #094a22;\n green-btn: #0aa245;\n txt-link: #1F69C3;\n primary-hover-btn: #005678;\n selection: #c7e9f3;\n heading-color: #017a76;\n heading-color--secondary: #2a292c;\n base-type-color: #2a292c;\n input-text: #2a292c;\n input-placeholder: #6b6966;\n input-placeholder-when-disabled: #989189;\n base-icon-color: #007198;\n disabled-color: #989189;\n disabled-color-dark: #6b6966;\n linz-color-primary: #023d48;\n linz-color-primary-hover: #01818a;\n linz-color-tertiary: #e1e44a;\n linz-color-tertiary-hover: #cdcf59;\n color-test-pink: #f09;\n linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}";
|
|
52519
|
+
styleInject(css_248z$9);
|
|
52520
52520
|
|
|
52521
52521
|
var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
|
|
52522
52522
|
|
|
@@ -52637,13 +52637,13 @@ function LuiComboSelectActual(givenProps, ref) {
|
|
|
52637
52637
|
// box-shadow: "-8px 0px 0 0 #cc0000";
|
|
52638
52638
|
// border-radius: "4px";
|
|
52639
52639
|
var id = useGenerateOrDefaultId(props === null || props === void 0 ? void 0 : props.id);
|
|
52640
|
-
var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: css_248z$
|
|
52640
|
+
var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: css_248z$9['sea'], primary75: css_248z$9['electric'], primary50: css_248z$9['spray'], primary25: css_248z$9['polar'], neutral90: css_248z$9['charcoal'], neutral80: css_248z$9['charcoal'], neutral70: css_248z$9['charcoal'], neutral60: css_248z$9['fuscous'], neutral50: css_248z$9['fuscous'], neutral40: css_248z$9['gray'], neutral30: css_248z$9['gray'], neutral20: css_248z$9['silver'], neutral10: css_248z$9['lily'], neutral5: css_248z$9['hint'], danger: css_248z$9['error'], dangerLight: css_248z$9['error-bg'] }) })); }, styles: {
|
|
52641
52641
|
control: function (provided, state) { return (__assign(__assign({}, provided), {
|
|
52642
52642
|
/* matches style of .LuiTextInput-input */
|
|
52643
52643
|
boxShadow: 'none', border: state.isFocused ? '1px solid #053d52' : '1px solid #b2b2b2', '&:hover, &:active': {
|
|
52644
52644
|
borderColor: '#053d52'
|
|
52645
52645
|
} })); },
|
|
52646
|
-
dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$
|
|
52646
|
+
dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$9['fuscous'] })); },
|
|
52647
52647
|
indicatorSeparator: function (provided) { return (__assign(__assign({}, provided), { width: 0 })); },
|
|
52648
52648
|
input: function (provided) { return (__assign(__assign({}, provided), { height: '40px', minHeight: '40px', fontWeight: 400, input: {
|
|
52649
52649
|
height: '38px !important'
|
|
@@ -52651,10 +52651,10 @@ function LuiComboSelectActual(givenProps, ref) {
|
|
|
52651
52651
|
singleValue: function (provided) { return (__assign(__assign({}, provided), { color: '#414042', fontWeight: 400 })); },
|
|
52652
52652
|
placeholder: function (provided) { return (__assign(__assign({}, provided), {
|
|
52653
52653
|
/* please keep this in sync with FormVars.scss/mixin.formPlaceholder */
|
|
52654
|
-
fontWeight: 'normal', fontStyle: 'italic', color: css_248z$
|
|
52654
|
+
fontWeight: 'normal', fontStyle: 'italic', color: css_248z$9['input-placeholder'] })); },
|
|
52655
52655
|
option: function (provided, _a) {
|
|
52656
52656
|
var isSelected = _a.isSelected;
|
|
52657
|
-
return (__assign(__assign({}, provided), { color: css_248z$
|
|
52657
|
+
return (__assign(__assign({}, provided), { color: css_248z$9['input-text'], backgroundColor: isSelected ? css_248z$9['selection'] : css_248z$9['white'] }));
|
|
52658
52658
|
}
|
|
52659
52659
|
} });
|
|
52660
52660
|
return (React__default["default"].createElement("label", { htmlFor: id, className: clsx('LuiComboSelect-label', props.error && 'hasError') },
|
|
@@ -55026,8 +55026,8 @@ var LuiModalHeader = function (props) {
|
|
|
55026
55026
|
React__default["default"].createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "lg" }))))))));
|
|
55027
55027
|
};
|
|
55028
55028
|
|
|
55029
|
-
var css_248z$
|
|
55030
|
-
styleInject(css_248z$
|
|
55029
|
+
var css_248z$8 = "@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";
|
|
55030
|
+
styleInject(css_248z$8);
|
|
55031
55031
|
|
|
55032
55032
|
/**
|
|
55033
55033
|
* @internal
|
|
@@ -60290,8 +60290,8 @@ var LuiSidePanelProvider = function (_a) {
|
|
|
60290
60290
|
React__default["default"].createElement(LuiSidePanelContainer, __assign({}, props))));
|
|
60291
60291
|
};
|
|
60292
60292
|
|
|
60293
|
-
var css_248z$
|
|
60294
|
-
styleInject(css_248z$
|
|
60293
|
+
var css_248z$7 = ".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}";
|
|
60294
|
+
styleInject(css_248z$7);
|
|
60295
60295
|
|
|
60296
60296
|
var LuiSwitchButton = function (props) {
|
|
60297
60297
|
var generatedId = useGenerateOrDefaultId();
|
|
@@ -67922,8 +67922,8 @@ var LuiAccordicardStatic = function (props) {
|
|
|
67922
67922
|
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" }))));
|
|
67923
67923
|
};
|
|
67924
67924
|
|
|
67925
|
-
var css_248z$
|
|
67926
|
-
styleInject(css_248z$
|
|
67925
|
+
var css_248z$6 = "/**\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 #00000040, 0px 0px 3px 0px #00000026;\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}";
|
|
67926
|
+
styleInject(css_248z$6);
|
|
67927
67927
|
|
|
67928
67928
|
var LuiAccordion = function (props) {
|
|
67929
67929
|
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;
|
|
@@ -67943,8 +67943,8 @@ var LuiAccordion = function (props) {
|
|
|
67943
67943
|
children));
|
|
67944
67944
|
};
|
|
67945
67945
|
|
|
67946
|
-
var css_248z$
|
|
67947
|
-
styleInject(css_248z$
|
|
67946
|
+
var css_248z$5 = "/**\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}";
|
|
67947
|
+
styleInject(css_248z$5);
|
|
67948
67948
|
|
|
67949
67949
|
function $c1d7fb2ec91bae71$var$Item(props) {
|
|
67950
67950
|
return null;
|
|
@@ -71444,16 +71444,16 @@ function DefaultEmptyIndicator() {
|
|
|
71444
71444
|
return React__default["default"].createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
|
|
71445
71445
|
}
|
|
71446
71446
|
|
|
71447
|
-
var css_248z$
|
|
71448
|
-
styleInject(css_248z$
|
|
71447
|
+
var css_248z$4 = "/**\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}";
|
|
71448
|
+
styleInject(css_248z$4);
|
|
71449
71449
|
|
|
71450
71450
|
function RadioItemRenderer(_a) {
|
|
71451
71451
|
var item = _a.item, isSelected = _a.isSelected;
|
|
71452
71452
|
return (React__default["default"].createElement("div", { className: "RadioItemRenderer ".concat(isSelected ? 'RadioItemRenderer-isSelected' : '') }, item.label));
|
|
71453
71453
|
}
|
|
71454
71454
|
|
|
71455
|
-
var css_248z$
|
|
71456
|
-
styleInject(css_248z$
|
|
71455
|
+
var css_248z$3 = ".CheckboxRenderer {\n display: flex;\n align-items: center;\n}";
|
|
71456
|
+
styleInject(css_248z$3);
|
|
71457
71457
|
|
|
71458
71458
|
function CheckboxItemRenderer(_a) {
|
|
71459
71459
|
var item = _a.item, isSelected = _a.isSelected;
|
|
@@ -71477,6 +71477,35 @@ function LuiSideMenuItem(_a) {
|
|
|
71477
71477
|
React__default["default"].createElement("span", { className: "navText" }, label))));
|
|
71478
71478
|
}
|
|
71479
71479
|
|
|
71480
|
+
var css_248z$2 = "/**\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}";
|
|
71481
|
+
styleInject(css_248z$2);
|
|
71482
|
+
|
|
71483
|
+
var LuiProgressBar = function (_a) {
|
|
71484
|
+
var value = _a.value, max = _a.max, error = _a.error, _b = _a.barHeight, barHeight = _b === void 0 ? '5px' : _b;
|
|
71485
|
+
var indeterminate = false;
|
|
71486
|
+
var status = 'PROC';
|
|
71487
|
+
if (max === undefined || value === undefined) {
|
|
71488
|
+
value = 100;
|
|
71489
|
+
max = 100;
|
|
71490
|
+
indeterminate = true;
|
|
71491
|
+
}
|
|
71492
|
+
else {
|
|
71493
|
+
if (value >= 0 && value < max) {
|
|
71494
|
+
status = 'PROC';
|
|
71495
|
+
}
|
|
71496
|
+
if (value === max) {
|
|
71497
|
+
status = 'COMP';
|
|
71498
|
+
}
|
|
71499
|
+
if (error) {
|
|
71500
|
+
status = 'FAIL';
|
|
71501
|
+
}
|
|
71502
|
+
}
|
|
71503
|
+
value = Math.min(max, Math.max(0, value));
|
|
71504
|
+
var percentage = (value / max) * 100;
|
|
71505
|
+
return (React__default["default"].createElement("div", { className: 'ProgressBar', style: { height: barHeight }, "data-testid": 'progress-bar-background' },
|
|
71506
|
+
React__default["default"].createElement("div", { "data-testid": 'progress-bar-size', className: clsx("ProgressBar-".concat(status), { indeterminate: indeterminate }), style: { width: "".concat(percentage, "%"), height: barHeight } })));
|
|
71507
|
+
};
|
|
71508
|
+
|
|
71480
71509
|
var css_248z$1 = "/**\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 #00000040, 0px 0px 3px 0px #00000026;\n}\n\n.Left {\n justify-self: start;\n}\n\n.Right {\n justify-self: end;\n}";
|
|
71481
71510
|
styleInject(css_248z$1);
|
|
71482
71511
|
|
|
@@ -71647,6 +71676,7 @@ exports.LuiMenuCloseButtonV2 = LuiMenuCloseButtonV2;
|
|
|
71647
71676
|
exports.LuiMessagingContextProvider = LuiMessagingContextProvider;
|
|
71648
71677
|
exports.LuiMiniSpinner = LuiMiniSpinner;
|
|
71649
71678
|
exports.LuiModal = LuiModal;
|
|
71679
|
+
exports.LuiProgressBar = LuiProgressBar;
|
|
71650
71680
|
exports.LuiRadioInput = LuiRadioInput;
|
|
71651
71681
|
exports.LuiResizableLayout = LuiResizableLayout;
|
|
71652
71682
|
exports.LuiSearchBox = LuiSearchBox;
|