@linzjs/lui 17.52.0 → 17.52.2
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/LuiSideToolbar/LuiSideToolbar.d.ts +1 -11
- package/dist/index.d.ts +3 -0
- package/dist/index.js +85 -22
- package/dist/index.js.map +1 -1
- package/dist/lui.esm.js +82 -23
- package/dist/lui.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/lui.esm.js
CHANGED
|
@@ -25397,8 +25397,8 @@ function styleInject(css, ref) {
|
|
|
25397
25397
|
}
|
|
25398
25398
|
}
|
|
25399
25399
|
|
|
25400
|
-
var css_248z$
|
|
25401
|
-
styleInject(css_248z$
|
|
25400
|
+
var css_248z$a = ".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}";
|
|
25401
|
+
styleInject(css_248z$a);
|
|
25402
25402
|
|
|
25403
25403
|
/**
|
|
25404
25404
|
* Overwrite the common buttons for floating window to
|
|
@@ -27647,8 +27647,8 @@ ReactSplitGrid.defaultProps = {
|
|
|
27647
27647
|
onDrag: undefined,
|
|
27648
27648
|
};
|
|
27649
27649
|
|
|
27650
|
-
var css_248z$
|
|
27651
|
-
styleInject(css_248z$
|
|
27650
|
+
var css_248z$9 = ".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}";
|
|
27651
|
+
styleInject(css_248z$9);
|
|
27652
27652
|
|
|
27653
27653
|
var GutterComponent = function (props) {
|
|
27654
27654
|
var leftIcon = (React__default.createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "", status: "interactive" }));
|
|
@@ -27966,8 +27966,8 @@ function LuiFormikForm(props) {
|
|
|
27966
27966
|
" "))));
|
|
27967
27967
|
}
|
|
27968
27968
|
|
|
27969
|
-
var css_248z$
|
|
27970
|
-
styleInject(css_248z$
|
|
27969
|
+
var css_248z$8 = "/**\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}";
|
|
27970
|
+
styleInject(css_248z$8);
|
|
27971
27971
|
|
|
27972
27972
|
var LuiError = function (_a) {
|
|
27973
27973
|
var error = _a.error, className = _a.className;
|
|
@@ -52468,8 +52468,8 @@ function isChromatic() {
|
|
|
52468
52468
|
(window === null || window === void 0 ? void 0 : window.location.href.match(/chromatic=true/)));
|
|
52469
52469
|
}
|
|
52470
52470
|
|
|
52471
|
-
var css_248z$
|
|
52472
|
-
styleInject(css_248z$
|
|
52471
|
+
var css_248z$7 = ":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}";
|
|
52472
|
+
styleInject(css_248z$7);
|
|
52473
52473
|
|
|
52474
52474
|
var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
|
|
52475
52475
|
|
|
@@ -52590,13 +52590,13 @@ function LuiComboSelectActual(givenProps, ref) {
|
|
|
52590
52590
|
// box-shadow: "-8px 0px 0 0 #cc0000";
|
|
52591
52591
|
// border-radius: "4px";
|
|
52592
52592
|
var id = useGenerateOrDefaultId(props === null || props === void 0 ? void 0 : props.id);
|
|
52593
|
-
var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: css_248z$
|
|
52593
|
+
var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: css_248z$7['sea'], primary75: css_248z$7['electric'], primary50: css_248z$7['spray'], primary25: css_248z$7['polar'], neutral90: css_248z$7['charcoal'], neutral80: css_248z$7['charcoal'], neutral70: css_248z$7['charcoal'], neutral60: css_248z$7['fuscous'], neutral50: css_248z$7['fuscous'], neutral40: css_248z$7['gray'], neutral30: css_248z$7['gray'], neutral20: css_248z$7['silver'], neutral10: css_248z$7['lily'], neutral5: css_248z$7['hint'], danger: css_248z$7['error'], dangerLight: css_248z$7['error-bg'] }) })); }, styles: {
|
|
52594
52594
|
control: function (provided, state) { return (__assign(__assign({}, provided), {
|
|
52595
52595
|
/* matches style of .LuiTextInput-input */
|
|
52596
52596
|
boxShadow: 'none', border: state.isFocused ? '1px solid #053d52' : '1px solid #b2b2b2', '&:hover, &:active': {
|
|
52597
52597
|
borderColor: '#053d52'
|
|
52598
52598
|
} })); },
|
|
52599
|
-
dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$
|
|
52599
|
+
dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$7['fuscous'] })); },
|
|
52600
52600
|
indicatorSeparator: function (provided) { return (__assign(__assign({}, provided), { width: 0 })); },
|
|
52601
52601
|
input: function (provided) { return (__assign(__assign({}, provided), { height: '40px', minHeight: '40px', fontWeight: 400, input: {
|
|
52602
52602
|
height: '38px !important'
|
|
@@ -52604,10 +52604,10 @@ function LuiComboSelectActual(givenProps, ref) {
|
|
|
52604
52604
|
singleValue: function (provided) { return (__assign(__assign({}, provided), { color: '#414042', fontWeight: 400 })); },
|
|
52605
52605
|
placeholder: function (provided) { return (__assign(__assign({}, provided), {
|
|
52606
52606
|
/* please keep this in sync with FormVars.scss/mixin.formPlaceholder */
|
|
52607
|
-
fontWeight: 'normal', fontStyle: 'italic', color: css_248z$
|
|
52607
|
+
fontWeight: 'normal', fontStyle: 'italic', color: css_248z$7['input-placeholder'] })); },
|
|
52608
52608
|
option: function (provided, _a) {
|
|
52609
52609
|
var isSelected = _a.isSelected;
|
|
52610
|
-
return (__assign(__assign({}, provided), { color: css_248z$
|
|
52610
|
+
return (__assign(__assign({}, provided), { color: css_248z$7['input-text'], backgroundColor: isSelected ? css_248z$7['selection'] : css_248z$7['white'] }));
|
|
52611
52611
|
}
|
|
52612
52612
|
} });
|
|
52613
52613
|
return (React__default.createElement("label", { htmlFor: id, className: clsx('LuiComboSelect-label', props.error && 'hasError') },
|
|
@@ -54979,8 +54979,8 @@ var LuiModalHeader = function (props) {
|
|
|
54979
54979
|
React__default.createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "lg" }))))))));
|
|
54980
54980
|
};
|
|
54981
54981
|
|
|
54982
|
-
var css_248z$
|
|
54983
|
-
styleInject(css_248z$
|
|
54982
|
+
var css_248z$6 = "@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 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";
|
|
54983
|
+
styleInject(css_248z$6);
|
|
54984
54984
|
|
|
54985
54985
|
/**
|
|
54986
54986
|
* @internal
|
|
@@ -60241,8 +60241,8 @@ var LuiSidePanelProvider = function (_a) {
|
|
|
60241
60241
|
React__default.createElement(LuiSidePanelContainer, __assign({}, props))));
|
|
60242
60242
|
};
|
|
60243
60243
|
|
|
60244
|
-
var css_248z$
|
|
60245
|
-
styleInject(css_248z$
|
|
60244
|
+
var css_248z$5 = ".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}";
|
|
60245
|
+
styleInject(css_248z$5);
|
|
60246
60246
|
|
|
60247
60247
|
var LuiSwitchButton = function (props) {
|
|
60248
60248
|
var generatedId = useGenerateOrDefaultId();
|
|
@@ -67873,8 +67873,8 @@ var LuiAccordicardStatic = function (props) {
|
|
|
67873
67873
|
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" }))));
|
|
67874
67874
|
};
|
|
67875
67875
|
|
|
67876
|
-
var css_248z$
|
|
67877
|
-
styleInject(css_248z$
|
|
67876
|
+
var css_248z$4 = "/**\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}";
|
|
67877
|
+
styleInject(css_248z$4);
|
|
67878
67878
|
|
|
67879
67879
|
function $c1d7fb2ec91bae71$var$Item(props) {
|
|
67880
67880
|
return null;
|
|
@@ -71374,16 +71374,16 @@ function DefaultEmptyIndicator() {
|
|
|
71374
71374
|
return React__default.createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
|
|
71375
71375
|
}
|
|
71376
71376
|
|
|
71377
|
-
var css_248z$
|
|
71378
|
-
styleInject(css_248z$
|
|
71377
|
+
var css_248z$3 = "/**\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}";
|
|
71378
|
+
styleInject(css_248z$3);
|
|
71379
71379
|
|
|
71380
71380
|
function RadioItemRenderer(_a) {
|
|
71381
71381
|
var item = _a.item, isSelected = _a.isSelected;
|
|
71382
71382
|
return (React__default.createElement("div", { className: "RadioItemRenderer ".concat(isSelected ? 'RadioItemRenderer-isSelected' : '') }, item.label));
|
|
71383
71383
|
}
|
|
71384
71384
|
|
|
71385
|
-
var css_248z = ".CheckboxRenderer {\n display: flex;\n align-items: center;\n}";
|
|
71386
|
-
styleInject(css_248z);
|
|
71385
|
+
var css_248z$2 = ".CheckboxRenderer {\n display: flex;\n align-items: center;\n}";
|
|
71386
|
+
styleInject(css_248z$2);
|
|
71387
71387
|
|
|
71388
71388
|
function CheckboxItemRenderer(_a) {
|
|
71389
71389
|
var item = _a.item, isSelected = _a.isSelected;
|
|
@@ -71407,6 +71407,65 @@ function LuiSideMenuItem(_a) {
|
|
|
71407
71407
|
React__default.createElement("span", { className: "navText" }, label))));
|
|
71408
71408
|
}
|
|
71409
71409
|
|
|
71410
|
+
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}";
|
|
71411
|
+
styleInject(css_248z$1);
|
|
71412
|
+
|
|
71413
|
+
var ToolbarDirection;
|
|
71414
|
+
(function (ToolbarDirection) {
|
|
71415
|
+
ToolbarDirection["LEFT"] = "Left";
|
|
71416
|
+
ToolbarDirection["RIGHT"] = "Right";
|
|
71417
|
+
})(ToolbarDirection || (ToolbarDirection = {}));
|
|
71418
|
+
function LuiSideToolbar(props) {
|
|
71419
|
+
return (React__default.createElement("div", { className: clsx(['Toolbar', 'app--shadow-sm', props.direction]), "data-testid": "toolbar" }, props.children));
|
|
71420
|
+
}
|
|
71421
|
+
|
|
71422
|
+
/**
|
|
71423
|
+
* Show LuiIcon or Image.
|
|
71424
|
+
*
|
|
71425
|
+
* @param param
|
|
71426
|
+
* @returns
|
|
71427
|
+
*/
|
|
71428
|
+
var ToolbarIcon = function (_a) {
|
|
71429
|
+
var iconImage = _a.iconImage, iconName = _a.iconName;
|
|
71430
|
+
return iconImage ? (React__default.createElement("img", { className: "LuiIcon--lg", alt: iconName, src: iconImage })) : (React__default.createElement(LuiIcon, { name: iconName, alt: iconName, size: 'md' }));
|
|
71431
|
+
};
|
|
71432
|
+
|
|
71433
|
+
var css_248z = "/**\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}";
|
|
71434
|
+
styleInject(css_248z);
|
|
71435
|
+
|
|
71436
|
+
/**
|
|
71437
|
+
* Create button for using either LuiIcon or Image.
|
|
71438
|
+
*
|
|
71439
|
+
* @param props
|
|
71440
|
+
* @returns
|
|
71441
|
+
*/
|
|
71442
|
+
var ToolbarButton = function (_a) {
|
|
71443
|
+
var disabled = _a.disabled, highlighted = _a.highlighted, iconImage = _a.iconImage, iconName = _a.iconName, loading = _a.loading, onClick = _a.onClick, panelTitle = _a.panelTitle, panelKey = _a.panelKey, tooltip = _a.tooltip;
|
|
71444
|
+
if (loading) {
|
|
71445
|
+
return React__default.createElement(Skeleton, { className: "ToolbarButton", height: 40, width: 40 });
|
|
71446
|
+
}
|
|
71447
|
+
var button = (React__default.createElement("button", { className: "".concat(highlighted ? 'lui-button-primary' : 'lui-button-secondary', " ToolbarButton ToolbarButton-placement"), "data-testid": "ToolbarButton-".concat(panelKey), disabled: disabled, onClick: onClick, title: panelTitle, type: "button" },
|
|
71448
|
+
React__default.createElement(ToolbarIcon, { iconImage: iconImage, iconName: iconName })));
|
|
71449
|
+
return tooltip ? (React__default.createElement(LuiTooltip, { placement: "auto", message: tooltip }, button)) : (React__default.createElement(React__default.Fragment, null, button));
|
|
71450
|
+
};
|
|
71451
|
+
|
|
71452
|
+
/**
|
|
71453
|
+
* Allows any item to be added into the toolbar (with appropriate styles and size)
|
|
71454
|
+
*
|
|
71455
|
+
* @param props
|
|
71456
|
+
* @returns
|
|
71457
|
+
*/
|
|
71458
|
+
var ToolbarItem = function (props) {
|
|
71459
|
+
if (props.loading) {
|
|
71460
|
+
return React__default.createElement(Skeleton, { className: "ToolbarButton", height: 40, width: 40 });
|
|
71461
|
+
}
|
|
71462
|
+
var item = (React__default.createElement("div", { className: "ToolbarButton", onClick: props.onClick, "data-testid": props.dataTestId }, props.children));
|
|
71463
|
+
return props.tooltip ? (React__default.createElement(LuiTooltip, { placement: "auto", message: props.tooltip }, item)) : (React__default.createElement(React__default.Fragment, null, item));
|
|
71464
|
+
};
|
|
71465
|
+
var ToolbarItemSeparator = function () {
|
|
71466
|
+
return React__default.createElement("div", { className: 'ToolbarItem-separator' });
|
|
71467
|
+
};
|
|
71468
|
+
|
|
71410
71469
|
var breakpoints = {
|
|
71411
71470
|
sm: 480,
|
|
71412
71471
|
md: 768,
|
|
@@ -71435,5 +71494,5 @@ var useMediaQuery = function (query) {
|
|
|
71435
71494
|
return matches;
|
|
71436
71495
|
};
|
|
71437
71496
|
|
|
71438
|
-
export { CheckboxItemRenderer, FIRM_KEY, FIRM_NAME_KEY, GLOBAL_CLIENT_REFERENCE_KEY, LOLActiveFirmMessage, LOLAuthorisedLink, LOLCommonDrawerMenu, LOLCommonDrawerMenuAfterLinks, LOLDrawerMenu, LOLFirmSwitcherMenu, LOLGlobalClientRefContext, LOLGlobalClientRefContextProvider, LOLLogoutLink, LOLSearchBox, LOLUserContext, LOLUserContextProvider, LOLUserLastLogin, LUI_WINDOW_NAME, LuiAccordicard, LuiAccordicardStatic, LuiAlertModal, LuiAlertModalButtons, LuiBadge, LuiBanner, LuiBannerContent, LuiBearingFormikInput, LuiBearingInput, LuiButton, LuiButtonGroup, LuiCheckboxInput, LuiCloseableHeaderMenuContext, LuiCloseableHeaderMenuContextV2, LuiCloseableHeaderMenuItem, LuiCloseableHeaderMenuItemV2, LuiComboSelect, LuiControlledMenu, LuiDateInput, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuDividerV2, LuiDrawerMenuOption, LuiDrawerMenuOptionV2, LuiDrawerMenuOptions, LuiDrawerMenuOptionsV2, LuiDrawerMenuSection, LuiDrawerMenuSectionV2, LuiDrawerMenuV2, LuiDropdownMenu, LuiDropdownMenuV2, LuiDropdownMenuV2DropContent, LuiErrorPage, LuiExpandableBanner, LuiFileInputBox, LuiFilterContainer, LuiFilterMenu, LuiFloatingWindow, HF as LuiFloatingWindowContextProvider, LuiFooter, LuiFormSectionHeader, LuiFormikCheckbox, LuiFormikForm, LuiFormikFormLabel, LuiFormikFormSubmitButton, LuiFormikRadioButton, LuiFormikRadioGroup, LuiFormikSelect, LuiFormikTextInput, LuiHeader, LuiHeaderMenuItem, LuiHeaderMenuItemV2, LuiHeaderV2, LuiIcon, LuiListBox, LuiLoadingSpinner, LuiLoadingSpinnerChristmas, LuiLoadingSpinnerEaster, LuiMenu, LuiMenuCloseButton, LuiMenuCloseButtonV2, LuiMessagingContextProvider, LuiMiniSpinner, LuiModal, LuiRadioInput, LuiResizableLayout, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuItem, LuiSelectSubMenuItem, LuiShadow, LuiSideMenu, LuiSideMenuItem, LuiSidePanel, LuiSidePanelProvider, LuiStaticMessage, LuiStatusSpinner, LuiSwitchButton, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, RadioItemRenderer, SplitPanelState, breakpointQuery, breakpoints, getDefaultSearchMenuOptions, isChromatic, useClickedOutsideElement, useEscapeFunction, useLOLGlobalClientRefContext, useLOLUserContext, useLuiCloseableHeaderMenuContextV2, iR as useLuiFloatingWindow, useMediaQuery, usePageClickFunction, useShowLUIMessage };
|
|
71497
|
+
export { CheckboxItemRenderer, FIRM_KEY, FIRM_NAME_KEY, GLOBAL_CLIENT_REFERENCE_KEY, LOLActiveFirmMessage, LOLAuthorisedLink, LOLCommonDrawerMenu, LOLCommonDrawerMenuAfterLinks, LOLDrawerMenu, LOLFirmSwitcherMenu, LOLGlobalClientRefContext, LOLGlobalClientRefContextProvider, LOLLogoutLink, LOLSearchBox, LOLUserContext, LOLUserContextProvider, LOLUserLastLogin, LUI_WINDOW_NAME, LuiAccordicard, LuiAccordicardStatic, LuiAlertModal, LuiAlertModalButtons, LuiBadge, LuiBanner, LuiBannerContent, LuiBearingFormikInput, LuiBearingInput, LuiButton, LuiButtonGroup, LuiCheckboxInput, LuiCloseableHeaderMenuContext, LuiCloseableHeaderMenuContextV2, LuiCloseableHeaderMenuItem, LuiCloseableHeaderMenuItemV2, LuiComboSelect, LuiControlledMenu, LuiDateInput, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuDividerV2, LuiDrawerMenuOption, LuiDrawerMenuOptionV2, LuiDrawerMenuOptions, LuiDrawerMenuOptionsV2, LuiDrawerMenuSection, LuiDrawerMenuSectionV2, LuiDrawerMenuV2, LuiDropdownMenu, LuiDropdownMenuV2, LuiDropdownMenuV2DropContent, LuiErrorPage, LuiExpandableBanner, LuiFileInputBox, LuiFilterContainer, LuiFilterMenu, LuiFloatingWindow, HF as LuiFloatingWindowContextProvider, LuiFooter, LuiFormSectionHeader, LuiFormikCheckbox, LuiFormikForm, LuiFormikFormLabel, LuiFormikFormSubmitButton, LuiFormikRadioButton, LuiFormikRadioGroup, LuiFormikSelect, LuiFormikTextInput, LuiHeader, LuiHeaderMenuItem, LuiHeaderMenuItemV2, LuiHeaderV2, LuiIcon, LuiListBox, LuiLoadingSpinner, LuiLoadingSpinnerChristmas, LuiLoadingSpinnerEaster, LuiMenu, LuiMenuCloseButton, LuiMenuCloseButtonV2, LuiMessagingContextProvider, LuiMiniSpinner, LuiModal, LuiRadioInput, LuiResizableLayout, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuItem, LuiSelectSubMenuItem, LuiShadow, LuiSideMenu, LuiSideMenuItem, LuiSidePanel, LuiSidePanelProvider, LuiSideToolbar, LuiStaticMessage, LuiStatusSpinner, LuiSwitchButton, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, RadioItemRenderer, SplitPanelState, ToolbarButton, ToolbarDirection, ToolbarItem, ToolbarItemSeparator, breakpointQuery, breakpoints, getDefaultSearchMenuOptions, isChromatic, useClickedOutsideElement, useEscapeFunction, useLOLGlobalClientRefContext, useLOLUserContext, useLuiCloseableHeaderMenuContextV2, iR as useLuiFloatingWindow, useMediaQuery, usePageClickFunction, useShowLUIMessage };
|
|
71439
71498
|
//# sourceMappingURL=lui.esm.js.map
|