@linzjs/lui 17.57.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 +14 -0
- package/dist/components/LuiProgressBar/LuiProgressBar.d.ts +9 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +57 -37
- package/dist/index.js.map +1 -1
- package/dist/lui.css +13 -1
- package/dist/lui.css.map +1 -1
- package/dist/lui.esm.js +57 -38
- package/dist/lui.esm.js.map +1 -1
- package/dist/scss/Components/LuiSidePanel/LuiSidePanel.scss +20 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
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
|
+
|
|
8
|
+
# [17.58.0](https://github.com/linz/lui/compare/v17.57.0...v17.58.0) (2023-05-22)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* Add LUI Progress Bar ([#945](https://github.com/linz/lui/issues/945)) ([96c577f](https://github.com/linz/lui/commit/96c577feec47e6d31e33ea87310e4966621a6006))
|
|
14
|
+
|
|
1
15
|
# [17.57.0](https://github.com/linz/lui/compare/v17.56.0...v17.57.0) (2023-05-17)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import './LuiProgressBar.scss';
|
|
3
|
+
export declare type ProgressBarProps = {
|
|
4
|
+
value?: number;
|
|
5
|
+
max?: number;
|
|
6
|
+
error?: boolean;
|
|
7
|
+
barHeight?: string;
|
|
8
|
+
};
|
|
9
|
+
export declare const LuiProgressBar: ({ value, max, error, barHeight, }: ProgressBarProps) => JSX.Element;
|
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
|
|
@@ -60278,18 +60278,8 @@ var LuiSidePanelContainer = function (props) {
|
|
|
60278
60278
|
top: top,
|
|
60279
60279
|
width: children ? width !== null && width !== void 0 ? width : '50%' : '0%'
|
|
60280
60280
|
}, className: clsx('luiSidePanel', classNames) },
|
|
60281
|
-
children && (React__default["default"].createElement("button", { type: "button", "data-testid": "close", title: closeBtnTitleAttr, onClick: onClose,
|
|
60282
|
-
|
|
60283
|
-
position: 'absolute',
|
|
60284
|
-
right: 15,
|
|
60285
|
-
top: 14,
|
|
60286
|
-
background: '#e2f3f7',
|
|
60287
|
-
border: 'none',
|
|
60288
|
-
display: 'flex',
|
|
60289
|
-
cursor: 'pointer',
|
|
60290
|
-
borderBottomLeftRadius: '5px'
|
|
60291
|
-
} },
|
|
60292
|
-
React__default["default"].createElement(LuiIcon, { alt: "Close", name: "ic_clear", size: "lg", status: "interactive" }))),
|
|
60281
|
+
children && (React__default["default"].createElement("button", { type: "button", className: "luiSidePanel-CloseBtn", "data-testid": "close", title: closeBtnTitleAttr, onClick: onClose },
|
|
60282
|
+
React__default["default"].createElement(LuiIcon, { alt: "Close", name: "ic_clear", className: "luiSidePanel-CloseIcon", size: "lg", status: "interactive" }))),
|
|
60293
60283
|
children));
|
|
60294
60284
|
};
|
|
60295
60285
|
var LuiSidePanelProvider = function (_a) {
|
|
@@ -60300,8 +60290,8 @@ var LuiSidePanelProvider = function (_a) {
|
|
|
60300
60290
|
React__default["default"].createElement(LuiSidePanelContainer, __assign({}, props))));
|
|
60301
60291
|
};
|
|
60302
60292
|
|
|
60303
|
-
var css_248z$
|
|
60304
|
-
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);
|
|
60305
60295
|
|
|
60306
60296
|
var LuiSwitchButton = function (props) {
|
|
60307
60297
|
var generatedId = useGenerateOrDefaultId();
|
|
@@ -67932,8 +67922,8 @@ var LuiAccordicardStatic = function (props) {
|
|
|
67932
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" }))));
|
|
67933
67923
|
};
|
|
67934
67924
|
|
|
67935
|
-
var css_248z$
|
|
67936
|
-
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);
|
|
67937
67927
|
|
|
67938
67928
|
var LuiAccordion = function (props) {
|
|
67939
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;
|
|
@@ -67948,13 +67938,13 @@ var LuiAccordion = function (props) {
|
|
|
67948
67938
|
};
|
|
67949
67939
|
return (React__default["default"].createElement("details", { style: style, className: clsx('lui-accordion', className), open: open },
|
|
67950
67940
|
React__default["default"].createElement("summary", { onClick: toggle, "data-testid": "lui-accordion-summary-".concat(open) },
|
|
67951
|
-
React__default["default"].createElement(LuiIcon, { color: iconColor, size: "md", name:
|
|
67941
|
+
React__default["default"].createElement(LuiIcon, { color: iconColor, size: "md", name: "ic_expand_more", alt: open ? 'Close' : 'Expand', "aria-label": open ? 'Expanded' : 'Closed', className: clsx('chevron', open ? 'chevron--isOpen' : null) }),
|
|
67952
67942
|
React__default["default"].isValidElement(heading) ? (heading) : (React__default["default"].createElement("h4", { className: "accordion-heading", "data-testid": "lui-accordion-heading-".concat(open) }, heading))),
|
|
67953
67943
|
children));
|
|
67954
67944
|
};
|
|
67955
67945
|
|
|
67956
|
-
var css_248z$
|
|
67957
|
-
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);
|
|
67958
67948
|
|
|
67959
67949
|
function $c1d7fb2ec91bae71$var$Item(props) {
|
|
67960
67950
|
return null;
|
|
@@ -71454,16 +71444,16 @@ function DefaultEmptyIndicator() {
|
|
|
71454
71444
|
return React__default["default"].createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
|
|
71455
71445
|
}
|
|
71456
71446
|
|
|
71457
|
-
var css_248z$
|
|
71458
|
-
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);
|
|
71459
71449
|
|
|
71460
71450
|
function RadioItemRenderer(_a) {
|
|
71461
71451
|
var item = _a.item, isSelected = _a.isSelected;
|
|
71462
71452
|
return (React__default["default"].createElement("div", { className: "RadioItemRenderer ".concat(isSelected ? 'RadioItemRenderer-isSelected' : '') }, item.label));
|
|
71463
71453
|
}
|
|
71464
71454
|
|
|
71465
|
-
var css_248z$
|
|
71466
|
-
styleInject(css_248z$
|
|
71455
|
+
var css_248z$3 = ".CheckboxRenderer {\n display: flex;\n align-items: center;\n}";
|
|
71456
|
+
styleInject(css_248z$3);
|
|
71467
71457
|
|
|
71468
71458
|
function CheckboxItemRenderer(_a) {
|
|
71469
71459
|
var item = _a.item, isSelected = _a.isSelected;
|
|
@@ -71487,6 +71477,35 @@ function LuiSideMenuItem(_a) {
|
|
|
71487
71477
|
React__default["default"].createElement("span", { className: "navText" }, label))));
|
|
71488
71478
|
}
|
|
71489
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
|
+
|
|
71490
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}";
|
|
71491
71510
|
styleInject(css_248z$1);
|
|
71492
71511
|
|
|
@@ -71657,6 +71676,7 @@ exports.LuiMenuCloseButtonV2 = LuiMenuCloseButtonV2;
|
|
|
71657
71676
|
exports.LuiMessagingContextProvider = LuiMessagingContextProvider;
|
|
71658
71677
|
exports.LuiMiniSpinner = LuiMiniSpinner;
|
|
71659
71678
|
exports.LuiModal = LuiModal;
|
|
71679
|
+
exports.LuiProgressBar = LuiProgressBar;
|
|
71660
71680
|
exports.LuiRadioInput = LuiRadioInput;
|
|
71661
71681
|
exports.LuiResizableLayout = LuiResizableLayout;
|
|
71662
71682
|
exports.LuiSearchBox = LuiSearchBox;
|