@linzjs/lui 23.1.0 → 23.2.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/assets/icons/fold_in.svg +9 -0
- package/dist/assets/icons/fold_out.svg +9 -0
- package/dist/assets/svg-content.d.ts +1 -1
- package/dist/assets/svg-content.tsx +24 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +53 -38
- package/dist/index.js.map +1 -1
- package/dist/lui.esm.js +53 -39
- package/dist/lui.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/lui.esm.js
CHANGED
|
@@ -402,6 +402,12 @@ iconMap['ic_filter_list'] = (React__default.createElement("svg", { xmlns: "http:
|
|
|
402
402
|
React__default.createElement("path", { d: "M6 12.984v-1.969h12v1.969H6zM3 6h18v2.016H3V6zm6.984 12v-2.016h4.031V18H9.984z" })));
|
|
403
403
|
iconMap['ic_flag'] = (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
|
|
404
404
|
React__default.createElement("path", { d: "M13.875 5.508H19.5v9.984h-7.031l-.375-1.969H6.469v6.984H4.5V3.491h9z" })));
|
|
405
|
+
iconMap['ic_fold_in'] = (React__default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
|
|
406
|
+
React__default.createElement("g", { id: "unfold_less_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24 1" },
|
|
407
|
+
React__default.createElement("path", { id: "Vector", d: "M8.9 20L7.5 18.6L12 14.1L16.5 18.6L15.1 20L12 16.9L8.9 20ZM12 9.9L7.5 5.4L8.9 4L12 7.1L15.1 4L16.5 5.4L12 9.9Z" }))));
|
|
408
|
+
iconMap['ic_fold_out'] = (React__default.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
|
|
409
|
+
React__default.createElement("g", { id: "unfold_more_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24 1" },
|
|
410
|
+
React__default.createElement("path", { id: "Vector", d: "M12 21.0001L7.5 16.5001L8.95 15.0501L12 18.1001L15.05 15.0501L16.5 16.5001L12 21.0001ZM8.95 9.0501L7.5 7.6001L12 3.1001L16.5 7.6001L15.05 9.0501L12 6.0001L8.95 9.0501Z" }))));
|
|
405
411
|
iconMap['ic_format_colour'] = (React__default.createElement("svg", { viewBox: "0 0 24 24" },
|
|
406
412
|
React__default.createElement("g", null,
|
|
407
413
|
React__default.createElement("path", { d: "M6.175 1.4 7.6 0l8.575 8.575q.575.575.575 1.425t-.575 1.425l-4.75 4.75q-.575.575-1.425.575t-1.425-.575l-4.75-4.75Q3.25 10.85 3.25 10t.575-1.425L8.575 3.8zM10 5.225 5.225 10h9.55zM19 17q-.824 0-1.413-.587A1.93 1.93 0 0 1 17 15q0-.525.313-1.125.312-.6.687-1.125.225-.3.475-.625T19 11.5q.274.3.525.625.25.325.475.625.375.525.688 1.125T21 15q0 .824-.587 1.413A1.93 1.93 0 0 1 19 17M2 24v-4h20v4z" }))));
|
|
@@ -3061,8 +3067,8 @@ function styleInject(css, ref) {
|
|
|
3061
3067
|
}
|
|
3062
3068
|
}
|
|
3063
3069
|
|
|
3064
|
-
var css_248z$
|
|
3065
|
-
styleInject(css_248z$
|
|
3070
|
+
var css_248z$o = ".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}";
|
|
3071
|
+
styleInject(css_248z$o);
|
|
3066
3072
|
|
|
3067
3073
|
var GutterComponent = function (props) {
|
|
3068
3074
|
var leftIcon = (React__default.createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "", status: "interactive" }));
|
|
@@ -6823,8 +6829,8 @@ var LuiTabsPanelSwitch = function (props) {
|
|
|
6823
6829
|
} }, tabProps), children));
|
|
6824
6830
|
};
|
|
6825
6831
|
|
|
6826
|
-
var css_248z$
|
|
6827
|
-
styleInject(css_248z$
|
|
6832
|
+
var css_248z$n = "/**\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}";
|
|
6833
|
+
styleInject(css_248z$n);
|
|
6828
6834
|
|
|
6829
6835
|
var LuiError = function (_a) {
|
|
6830
6836
|
var error = _a.error, className = _a.className;
|
|
@@ -7186,8 +7192,8 @@ var LuiDateInput = React__default.forwardRef(function (_a, ref) {
|
|
|
7186
7192
|
return React__default.createElement(LuiTextInput, __assign({}, mapped, { ref: ref }));
|
|
7187
7193
|
});
|
|
7188
7194
|
|
|
7189
|
-
var css_248z$
|
|
7190
|
-
styleInject(css_248z$
|
|
7195
|
+
var css_248z$m = ".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}";
|
|
7196
|
+
styleInject(css_248z$m);
|
|
7191
7197
|
|
|
7192
7198
|
var MoneyParser = /** @class */ (function () {
|
|
7193
7199
|
function MoneyParser(init, options) {
|
|
@@ -14851,9 +14857,9 @@ var StateManagedSelect = /*#__PURE__*/React__default.forwardRef(function (props,
|
|
|
14851
14857
|
|
|
14852
14858
|
var Select = StateManagedSelect;
|
|
14853
14859
|
|
|
14854
|
-
var css_248z$
|
|
14860
|
+
var css_248z$l = "";
|
|
14855
14861
|
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%)"};
|
|
14856
|
-
styleInject(css_248z$
|
|
14862
|
+
styleInject(css_248z$l);
|
|
14857
14863
|
|
|
14858
14864
|
var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
|
|
14859
14865
|
|
|
@@ -17540,8 +17546,8 @@ var LuiAlertModalV2 = function (props) {
|
|
|
17540
17546
|
} }), children));
|
|
17541
17547
|
};
|
|
17542
17548
|
|
|
17543
|
-
var css_248z$
|
|
17544
|
-
styleInject(css_248z$
|
|
17549
|
+
var css_248z$k = "@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";
|
|
17550
|
+
styleInject(css_248z$k);
|
|
17545
17551
|
|
|
17546
17552
|
/**
|
|
17547
17553
|
* @internal
|
|
@@ -22330,8 +22336,8 @@ var LuiSidePanelProvider = function (_a) {
|
|
|
22330
22336
|
React__default.createElement(LuiSidePanelContainer, __assign({}, props))));
|
|
22331
22337
|
};
|
|
22332
22338
|
|
|
22333
|
-
var css_248z$
|
|
22334
|
-
styleInject(css_248z$
|
|
22339
|
+
var css_248z$j = ".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 cursor: pointer;\n width: 40px;\n padding: 2px;\n background: #ffffff;\n border: 1px solid #007198;\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: relative;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n transition: 0.2s;\n background: #007198;\n box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);\n}\n\n.lui-switch-label-checked {\n background: #007198;\n}\n.lui-switch-label-checked .lui-switch-button {\n transform: translateX(20px);\n background: #ffffff;\n}\n\n.lui-switch-checkbox:disabled + .lui-switch-label {\n background: #eaeaea;\n border: 1px solid #989189;\n}\n.lui-switch-checkbox:disabled + .lui-switch-label .lui-switch-button {\n background: #989189;\n}\n.lui-switch-checkbox:disabled + .lui-switch-label-checked {\n background: #989189;\n}\n.lui-switch-checkbox:disabled + .lui-switch-label-checked .lui-switch-button {\n background: #eaeaea;\n}";
|
|
22340
|
+
styleInject(css_248z$j);
|
|
22335
22341
|
|
|
22336
22342
|
var LuiSwitchButton = function (props) {
|
|
22337
22343
|
var generatedId = useGenerateOrDefaultId();
|
|
@@ -29962,8 +29968,8 @@ var LuiAccordicardStatic = function (props) {
|
|
|
29962
29968
|
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" }))));
|
|
29963
29969
|
};
|
|
29964
29970
|
|
|
29965
|
-
var css_248z$
|
|
29966
|
-
styleInject(css_248z$
|
|
29971
|
+
var css_248z$i = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.lui-accordion {\n padding: 8px;\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}\n.lui-accordion > summary::marker, .lui-accordion > summary::-webkit-details-marker {\n display: none;\n}";
|
|
29972
|
+
styleInject(css_248z$i);
|
|
29967
29973
|
|
|
29968
29974
|
var LuiAccordion = function (props) {
|
|
29969
29975
|
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;
|
|
@@ -30074,8 +30080,8 @@ var LuiMultiSwitch = function (_a) {
|
|
|
30074
30080
|
React__default.createElement("div", { className: clsx('LuiMultiSwitch-labels', disabled && 'LuiMultiSwitch-disabled') }, options === null || options === void 0 ? void 0 : options.map(function (option, i) { return (React__default.createElement("label", { role: 'radio', key: i, htmlFor: id.current, "aria-disabled": option.disabled || disabled, "aria-checked": selectedIndex === i, className: option.className, onClick: function () { return select(i); }, onTouchStart: function () { return select(i); } }, option.text)); }))));
|
|
30075
30081
|
};
|
|
30076
30082
|
|
|
30077
|
-
var css_248z$
|
|
30078
|
-
styleInject(css_248z$
|
|
30083
|
+
var css_248z$h = "/**\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: rgb(214.0081081081, 238.0378378378, 243.6918918919);\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}";
|
|
30084
|
+
styleInject(css_248z$h);
|
|
30079
30085
|
|
|
30080
30086
|
function $c1d7fb2ec91bae71$var$Item(props) {
|
|
30081
30087
|
return null;
|
|
@@ -33604,16 +33610,16 @@ function DefaultEmptyIndicator() {
|
|
|
33604
33610
|
return React__default.createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
|
|
33605
33611
|
}
|
|
33606
33612
|
|
|
33607
|
-
var css_248z$
|
|
33608
|
-
styleInject(css_248z$
|
|
33613
|
+
var css_248z$g = "/**\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}";
|
|
33614
|
+
styleInject(css_248z$g);
|
|
33609
33615
|
|
|
33610
33616
|
function RadioItemRenderer(_a) {
|
|
33611
33617
|
var item = _a.item, isSelected = _a.isSelected;
|
|
33612
33618
|
return (React__default.createElement("div", { className: "RadioItemRenderer ".concat(isSelected ? 'RadioItemRenderer-isSelected' : '') }, item.label));
|
|
33613
33619
|
}
|
|
33614
33620
|
|
|
33615
|
-
var css_248z$
|
|
33616
|
-
styleInject(css_248z$
|
|
33621
|
+
var css_248z$f = ".CheckboxRenderer {\n display: flex;\n align-items: center;\n}";
|
|
33622
|
+
styleInject(css_248z$f);
|
|
33617
33623
|
|
|
33618
33624
|
function CheckboxItemRenderer(_a) {
|
|
33619
33625
|
var item = _a.item, isSelected = _a.isSelected;
|
|
@@ -33639,8 +33645,8 @@ function LuiSideMenuItem(_a) {
|
|
|
33639
33645
|
React__default.createElement("span", { className: "navText" }, label)))));
|
|
33640
33646
|
}
|
|
33641
33647
|
|
|
33642
|
-
var css_248z$
|
|
33643
|
-
styleInject(css_248z$
|
|
33648
|
+
var css_248z$e = "/**\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}";
|
|
33649
|
+
styleInject(css_248z$e);
|
|
33644
33650
|
|
|
33645
33651
|
var LuiProgressBar = function (_a) {
|
|
33646
33652
|
var value = _a.value, max = _a.max, error = _a.error, _b = _a.barHeight, barHeight = _b === void 0 ? '5px' : _b;
|
|
@@ -33668,8 +33674,8 @@ var LuiProgressBar = function (_a) {
|
|
|
33668
33674
|
React__default.createElement("div", { "data-testid": 'progress-bar-size', className: clsx("ProgressBar-".concat(status), { indeterminate: indeterminate }), style: { width: "".concat(percentage, "%"), height: barHeight } })));
|
|
33669
33675
|
};
|
|
33670
33676
|
|
|
33671
|
-
var css_248z$
|
|
33672
|
-
styleInject(css_248z$
|
|
33677
|
+
var css_248z$d = "/**\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}";
|
|
33678
|
+
styleInject(css_248z$d);
|
|
33673
33679
|
|
|
33674
33680
|
var ToolbarDirection;
|
|
33675
33681
|
(function (ToolbarDirection) {
|
|
@@ -33691,8 +33697,8 @@ var ToolbarIcon = function (_a) {
|
|
|
33691
33697
|
return iconImage ? (React__default.createElement("img", { className: "LuiIcon--lg", alt: iconName, src: iconImage })) : (React__default.createElement(LuiIcon, { name: iconName, alt: iconName, size: 'md' }));
|
|
33692
33698
|
};
|
|
33693
33699
|
|
|
33694
|
-
var css_248z$
|
|
33695
|
-
styleInject(css_248z$
|
|
33700
|
+
var css_248z$c = "/**\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}";
|
|
33701
|
+
styleInject(css_248z$c);
|
|
33696
33702
|
|
|
33697
33703
|
/**
|
|
33698
33704
|
* Create button for using either LuiIcon or Image.
|
|
@@ -33755,8 +33761,8 @@ var useMediaQuery = function (query) {
|
|
|
33755
33761
|
return matches;
|
|
33756
33762
|
};
|
|
33757
33763
|
|
|
33758
|
-
var css_248z$
|
|
33759
|
-
styleInject(css_248z$
|
|
33764
|
+
var css_248z$b = "/**\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}";
|
|
33765
|
+
styleInject(css_248z$b);
|
|
33760
33766
|
|
|
33761
33767
|
var LuiCounter = React__default.forwardRef(function (props, ref) {
|
|
33762
33768
|
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"]);
|
|
@@ -33771,8 +33777,8 @@ var LuiCounter = React__default.forwardRef(function (props, ref) {
|
|
|
33771
33777
|
return (React__default.createElement(React__default.Fragment, null, !(selectedNum === 0 && !countZero) && (React__default.createElement("span", __assign({ ref: ref, className: determineCounterClassname(), "data-testid": "lui-counter-number-".concat(shape), title: title !== null && title !== void 0 ? title : "".concat(selectedNum, " of ").concat(totalNum, " rows selected") }, rest), selectedNum.toLocaleString()))));
|
|
33772
33778
|
});
|
|
33773
33779
|
|
|
33774
|
-
var css_248z$
|
|
33775
|
-
styleInject(css_248z$
|
|
33780
|
+
var css_248z$a = "/**\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-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}\n\n.pan-left {\n transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;\n transform: perspective(1000px) rotateY(20deg) translateX(-10px);\n opacity: 0.5;\n}\n\n.pan-right {\n transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;\n transform: perspective(1000px) rotateY(-20deg) translateX(10px);\n opacity: 0.5;\n}";
|
|
33781
|
+
styleInject(css_248z$a);
|
|
33776
33782
|
|
|
33777
33783
|
/**
|
|
33778
33784
|
* @description Pagination component for navigating through a list of items with multiple pages.
|
|
@@ -33918,11 +33924,11 @@ var LuiPagination = forwardRef$1(function (_a, ref) {
|
|
|
33918
33924
|
React__default.createElement("div", { className: "pagination" }, renderPaginationNumbers())))));
|
|
33919
33925
|
});
|
|
33920
33926
|
|
|
33921
|
-
var css_248z$
|
|
33922
|
-
styleInject(css_248z$
|
|
33927
|
+
var css_248z$9 = "/**\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: 0ms;\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: 0ms;\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}";
|
|
33928
|
+
styleInject(css_248z$9);
|
|
33923
33929
|
|
|
33924
|
-
var css_248z$
|
|
33925
|
-
styleInject(css_248z$
|
|
33930
|
+
var css_248z$8 = ".Control {\n transition: opacity 0.2s ease;\n position: absolute;\n margin-left: 0 !important;\n display: flex;\n justify-content: space-around;\n align-items: center;\n}";
|
|
33931
|
+
styleInject(css_248z$8);
|
|
33926
33932
|
|
|
33927
33933
|
var useForkRef = function (forwardedRef) {
|
|
33928
33934
|
var localRef = useRef(null);
|
|
@@ -34651,8 +34657,8 @@ var keyDownHandler = function (e) {
|
|
|
34651
34657
|
return valueNow + delta;
|
|
34652
34658
|
};
|
|
34653
34659
|
|
|
34654
|
-
var css_248z$
|
|
34655
|
-
styleInject(css_248z$
|
|
34660
|
+
var css_248z$7 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.Splitter {\n display: grid;\n position: relative;\n overflow: hidden;\n opacity: 0;\n}\n.Splitter > :first-child, .Splitter > :nth-child(2) {\n position: relative;\n z-index: 0;\n overflow: auto;\n background: #ffffff;\n}\n.Splitter.resizing * {\n pointer-events: none;\n user-select: none;\n}";
|
|
34661
|
+
styleInject(css_248z$7);
|
|
34656
34662
|
|
|
34657
34663
|
/**
|
|
34658
34664
|
* Container that appends a separator when the children count equals 2.
|
|
@@ -34704,8 +34710,8 @@ var useSplitterRef = function () {
|
|
|
34704
34710
|
return { ref: ref, setRatio: setRatio };
|
|
34705
34711
|
};
|
|
34706
34712
|
|
|
34707
|
-
var css_248z$
|
|
34708
|
-
styleInject(css_248z$
|
|
34713
|
+
var css_248z$6 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiBannerV2 {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: normal;\n box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);\n font-size: 16px;\n display: grid;\n align-items: center;\n min-height: 3rem;\n position: relative;\n background-color: #ffffff;\n border-radius: 5px;\n padding-bottom: 0.5rem;\n padding-top: 0.5rem;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.LuiBannerV2 > :first-child {\n margin-top: 0;\n}\n.LuiBannerV2.has-level {\n padding-left: 3.25rem;\n border-left-width: 0.5rem;\n border-left-style: solid;\n}\n.LuiBannerV2.warning {\n border-left-color: #EA6A2E;\n}\n.LuiBannerV2.error {\n border-left-color: #cc0000;\n}\n.LuiBannerV2.info {\n border-left-color: #3A7CDF;\n}\n.LuiBannerV2.success {\n border-left-color: #0AA345;\n}\n.LuiBannerV2.can-dismiss {\n padding-right: 2.5rem;\n}\n.LuiBannerV2-Icon {\n position: absolute;\n left: 0.5rem;\n top: 0.5rem;\n}\n.LuiBannerV2-Icon.warning {\n color: #EA6A2E;\n}\n.LuiBannerV2-Icon.error {\n color: #cc0000;\n}\n.LuiBannerV2-Icon.info {\n color: #3A7CDF;\n}\n.LuiBannerV2-Icon.success {\n color: #0AA345;\n}\n.LuiBannerV2-Icon svg {\n fill: currentColor;\n}\n.LuiBannerV2-Dismiss {\n display: flex;\n position: absolute;\n right: 0.75rem;\n top: 50%;\n transform: translateY(-50%);\n background-color: transparent;\n padding: 0;\n}\n.LuiBannerV2-Dismiss svg {\n fill: #6b6966;\n}";
|
|
34714
|
+
styleInject(css_248z$6);
|
|
34709
34715
|
|
|
34710
34716
|
var LuiBannerV2 = forwardRef$1(function (_a, ref) {
|
|
34711
34717
|
var _b, _c, _d;
|
|
@@ -34724,6 +34730,14 @@ var LuiBannerV2 = forwardRef$1(function (_a, ref) {
|
|
|
34724
34730
|
onDismiss && (React__default.createElement("button", __assign({}, dismissButtonProps, { className: clsx('LuiBannerV2-Dismiss', dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps.className), "aria-label": (_b = dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps['aria-label']) !== null && _b !== void 0 ? _b : 'Dismiss', type: (_c = dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps.type) !== null && _c !== void 0 ? _c : 'button', onClick: onDismiss }), (_d = dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps.children) !== null && _d !== void 0 ? _d : (React__default.createElement(LuiIcon, { size: "md", name: "ic_clear", spanProps: { 'aria-hidden': true }, alt: "Dismiss" }))))));
|
|
34725
34731
|
});
|
|
34726
34732
|
|
|
34733
|
+
var css_248z$5 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.colour-palette-display {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.25rem;\n height: 1.25rem;\n background: #ffffff;\n border-radius: 1.25rem;\n box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);\n}\n.colour-palette-display-bucket {\n width: 2rem;\n height: 1rem;\n border-radius: 1.25rem;\n}";
|
|
34734
|
+
styleInject(css_248z$5);
|
|
34735
|
+
|
|
34736
|
+
var ColorBucket = forwardRef$1(function (props, ref) {
|
|
34737
|
+
return (React__default.createElement("div", { className: "colour-palette-display", ref: ref },
|
|
34738
|
+
React__default.createElement("div", { className: "colour-palette-display-bucket", "data-testid": "colour-palette-display-bucket", style: { backgroundColor: props.color } })));
|
|
34739
|
+
});
|
|
34740
|
+
|
|
34727
34741
|
var css_248z$4 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.lui-color-picker,\n.lui-input-color-group {\n display: inline-grid;\n gap: 0.5rem;\n grid-template-columns: repeat(6, 1fr);\n}\n\ninput.lui-input-color-radio {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n white-space: nowrap;\n word-wrap: normal;\n}\ninput.lui-input-color-radio + label {\n width: 1.5rem;\n height: 1.5rem;\n border-radius: 1rem;\n cursor: pointer;\n border: none;\n}\ninput.lui-input-color-radio:checked + label {\n border: 0.125rem solid #ffffff;\n box-shadow: 0 0 0.125rem 0.0625rem rgba(0, 0, 0, 0.2509803922);\n transition: all 0.05s ease;\n}";
|
|
34728
34742
|
styleInject(css_248z$4);
|
|
34729
34743
|
|
|
@@ -35302,5 +35316,5 @@ var LuiErrorPanel = forwardRef$1(function (props, ref) {
|
|
|
35302
35316
|
props.subtext && (React__default.createElement("div", { className: "lui-error-panel-container-subtext", "data-testid": "lui-error-panel-container-subtext" }, props.subtext)))));
|
|
35303
35317
|
});
|
|
35304
35318
|
|
|
35305
|
-
export { CheckboxItemRenderer, ColorInput, ColorInputGroup, ColorPalette, LuiAccordicard, LuiAccordicardStatic, LuiAccordion, LuiAlertModal, LuiAlertModalButtons, LuiAlertModalV2, LuiAppFooterSml, LuiBadge, LuiBanner, LuiBannerContent, LuiBannerV2, LuiBearingInput, LuiButton, LuiButtonGroup, LuiCheckboxInput, LuiCloseableHeaderMenuContext, LuiCloseableHeaderMenuContextV2, LuiCloseableHeaderMenuItem, LuiCloseableHeaderMenuItemV2, LuiComboSelect, LuiControlledMenu, LuiCounter, LuiDateInput, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuDividerV2, LuiDrawerMenuOption, LuiDrawerMenuOptionV2, LuiDrawerMenuOptions, LuiDrawerMenuOptionsV2, LuiDrawerMenuSection, LuiDrawerMenuSectionV2, LuiDrawerMenuV2, LuiDropdownMenu, LuiDropdownMenuV2, LuiDropdownMenuV2DropContent, LuiErrorIllustration, LuiErrorPage, LuiErrorPanel, LuiExpandableBanner, LuiFileInputBox, LuiFilterContainer, LuiFilterMenu, LuiFooter, LuiFormSectionHeader, LuiHeader, LuiHeaderMenuItem, LuiHeaderMenuItemV2, LuiHeaderV2, LuiIcon, LuiListBox, LuiLoadingSpinner, LuiMenu, LuiMenuCloseButton, LuiMenuCloseButtonV2, LuiMessagingContextProvider, LuiMiniSpinner, LuiModal, LuiModalV2, LuiMoneyInput, LuiMultiSwitch, LuiMultiSwitchYesNo, LuiPagination, LuiPassiveSearchInput, LuiProgressBar, LuiRadioInput, LuiResizableLayout, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuDivider, LuiSelectMenuHeader, LuiSelectMenuItem, LuiSelectMenuItemSwitch, LuiSelectSubMenuItem, LuiShadow, LuiSideMenu, LuiSideMenuItem, LuiSidePanel, LuiSidePanelProvider, LuiSideToolbar, LuiSplitButton, LuiSplitButtonMenuItem, LuiSplitButtonPosition, LuiStaticMessage, LuiStatusSpinner, LuiSwitchButton, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, RadioItemRenderer, SplitPanelState, Splitter, ToolbarButton, ToolbarDirection, ToolbarItem, ToolbarItemSeparator, breakpointQuery, breakpoints, defaultColours, isChromatic, useClickedOutsideElement, useEscapeFunction, useLuiCloseableHeaderMenuContextV2, useMediaQuery, usePageClickFunction, useShowLUIMessage, useSplitterRef, useToast };
|
|
35319
|
+
export { CheckboxItemRenderer, ColorBucket, ColorInput, ColorInputGroup, ColorPalette, LuiAccordicard, LuiAccordicardStatic, LuiAccordion, LuiAlertModal, LuiAlertModalButtons, LuiAlertModalV2, LuiAppFooterSml, LuiBadge, LuiBanner, LuiBannerContent, LuiBannerV2, LuiBearingInput, LuiButton, LuiButtonGroup, LuiCheckboxInput, LuiCloseableHeaderMenuContext, LuiCloseableHeaderMenuContextV2, LuiCloseableHeaderMenuItem, LuiCloseableHeaderMenuItemV2, LuiComboSelect, LuiControlledMenu, LuiCounter, LuiDateInput, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuDividerV2, LuiDrawerMenuOption, LuiDrawerMenuOptionV2, LuiDrawerMenuOptions, LuiDrawerMenuOptionsV2, LuiDrawerMenuSection, LuiDrawerMenuSectionV2, LuiDrawerMenuV2, LuiDropdownMenu, LuiDropdownMenuV2, LuiDropdownMenuV2DropContent, LuiErrorIllustration, LuiErrorPage, LuiErrorPanel, LuiExpandableBanner, LuiFileInputBox, LuiFilterContainer, LuiFilterMenu, LuiFooter, LuiFormSectionHeader, LuiHeader, LuiHeaderMenuItem, LuiHeaderMenuItemV2, LuiHeaderV2, LuiIcon, LuiListBox, LuiLoadingSpinner, LuiMenu, LuiMenuCloseButton, LuiMenuCloseButtonV2, LuiMessagingContextProvider, LuiMiniSpinner, LuiModal, LuiModalV2, LuiMoneyInput, LuiMultiSwitch, LuiMultiSwitchYesNo, LuiPagination, LuiPassiveSearchInput, LuiProgressBar, LuiRadioInput, LuiResizableLayout, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuDivider, LuiSelectMenuHeader, LuiSelectMenuItem, LuiSelectMenuItemSwitch, LuiSelectSubMenuItem, LuiShadow, LuiSideMenu, LuiSideMenuItem, LuiSidePanel, LuiSidePanelProvider, LuiSideToolbar, LuiSplitButton, LuiSplitButtonMenuItem, LuiSplitButtonPosition, LuiStaticMessage, LuiStatusSpinner, LuiSwitchButton, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, RadioItemRenderer, SplitPanelState, Splitter, ToolbarButton, ToolbarDirection, ToolbarItem, ToolbarItemSeparator, breakpointQuery, breakpoints, defaultColours, isChromatic, useClickedOutsideElement, useEscapeFunction, useLuiCloseableHeaderMenuContextV2, useMediaQuery, usePageClickFunction, useShowLUIMessage, useSplitterRef, useToast };
|
|
35306
35320
|
//# sourceMappingURL=lui.esm.js.map
|