@linzjs/lui 23.1.0 → 23.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +47 -38
- package/dist/index.js.map +1 -1
- package/dist/lui.esm.js +47 -39
- package/dist/lui.esm.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## [23.1.1](https://github.com/linz/lui/compare/v23.1.0...v23.1.1) (2025-06-23)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* **ColorBucket:** export the colour bucket component ([#1230](https://github.com/linz/lui/issues/1230)) ([e0af1ad](https://github.com/linz/lui/commit/e0af1ad98542c913946773857dfe5350643eac03))
|
|
7
|
+
|
|
1
8
|
# [23.1.0](https://github.com/linz/lui/compare/v23.0.0...v23.1.0) (2025-06-23)
|
|
2
9
|
|
|
3
10
|
|
package/dist/index.d.ts
CHANGED
|
@@ -74,6 +74,7 @@ export { LuiPagination } from './components/LuiPagination/LuiPagination';
|
|
|
74
74
|
export { Splitter } from './components/Splitter/Splitter';
|
|
75
75
|
export { useSplitterRef } from './components/Splitter/useSplitterRef';
|
|
76
76
|
export { LuiBannerV2 } from './components/LuiBannerV2/LuiBannerV2';
|
|
77
|
+
export { ColorBucket } from './components/LuiColourPicker/ColorBucket';
|
|
77
78
|
export { ColorPalette } from './components/LuiColourPicker/ColorPalette';
|
|
78
79
|
export { defaultColours } from './components/LuiColourPicker/ColourPaletteConstants';
|
|
79
80
|
export { ColorInput, ColorInputGroup, } from './components/LuiColourPicker/ColorInput';
|
package/dist/index.js
CHANGED
|
@@ -3090,8 +3090,8 @@ function styleInject(css, ref) {
|
|
|
3090
3090
|
}
|
|
3091
3091
|
}
|
|
3092
3092
|
|
|
3093
|
-
var css_248z$
|
|
3094
|
-
styleInject(css_248z$
|
|
3093
|
+
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}";
|
|
3094
|
+
styleInject(css_248z$o);
|
|
3095
3095
|
|
|
3096
3096
|
var GutterComponent = function (props) {
|
|
3097
3097
|
var leftIcon = (React__default["default"].createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "", status: "interactive" }));
|
|
@@ -6852,8 +6852,8 @@ var LuiTabsPanelSwitch = function (props) {
|
|
|
6852
6852
|
} }, tabProps), children));
|
|
6853
6853
|
};
|
|
6854
6854
|
|
|
6855
|
-
var css_248z$
|
|
6856
|
-
styleInject(css_248z$
|
|
6855
|
+
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}";
|
|
6856
|
+
styleInject(css_248z$n);
|
|
6857
6857
|
|
|
6858
6858
|
var LuiError = function (_a) {
|
|
6859
6859
|
var error = _a.error, className = _a.className;
|
|
@@ -7215,8 +7215,8 @@ var LuiDateInput = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
7215
7215
|
return React__default["default"].createElement(LuiTextInput, __assign({}, mapped, { ref: ref }));
|
|
7216
7216
|
});
|
|
7217
7217
|
|
|
7218
|
-
var css_248z$
|
|
7219
|
-
styleInject(css_248z$
|
|
7218
|
+
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}";
|
|
7219
|
+
styleInject(css_248z$m);
|
|
7220
7220
|
|
|
7221
7221
|
var MoneyParser = /** @class */ (function () {
|
|
7222
7222
|
function MoneyParser(init, options) {
|
|
@@ -14880,9 +14880,9 @@ var StateManagedSelect = /*#__PURE__*/React__default["default"].forwardRef(funct
|
|
|
14880
14880
|
|
|
14881
14881
|
var Select = StateManagedSelect;
|
|
14882
14882
|
|
|
14883
|
-
var css_248z$
|
|
14883
|
+
var css_248z$l = "";
|
|
14884
14884
|
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%)"};
|
|
14885
|
-
styleInject(css_248z$
|
|
14885
|
+
styleInject(css_248z$l);
|
|
14886
14886
|
|
|
14887
14887
|
var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
|
|
14888
14888
|
|
|
@@ -17569,8 +17569,8 @@ var LuiAlertModalV2 = function (props) {
|
|
|
17569
17569
|
} }), children));
|
|
17570
17570
|
};
|
|
17571
17571
|
|
|
17572
|
-
var css_248z$
|
|
17573
|
-
styleInject(css_248z$
|
|
17572
|
+
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";
|
|
17573
|
+
styleInject(css_248z$k);
|
|
17574
17574
|
|
|
17575
17575
|
/**
|
|
17576
17576
|
* @internal
|
|
@@ -22359,8 +22359,8 @@ var LuiSidePanelProvider = function (_a) {
|
|
|
22359
22359
|
React__default["default"].createElement(LuiSidePanelContainer, __assign({}, props))));
|
|
22360
22360
|
};
|
|
22361
22361
|
|
|
22362
|
-
var css_248z$
|
|
22363
|
-
styleInject(css_248z$
|
|
22362
|
+
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}";
|
|
22363
|
+
styleInject(css_248z$j);
|
|
22364
22364
|
|
|
22365
22365
|
var LuiSwitchButton = function (props) {
|
|
22366
22366
|
var generatedId = useGenerateOrDefaultId();
|
|
@@ -29991,8 +29991,8 @@ var LuiAccordicardStatic = function (props) {
|
|
|
29991
29991
|
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" }))));
|
|
29992
29992
|
};
|
|
29993
29993
|
|
|
29994
|
-
var css_248z$
|
|
29995
|
-
styleInject(css_248z$
|
|
29994
|
+
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}";
|
|
29995
|
+
styleInject(css_248z$i);
|
|
29996
29996
|
|
|
29997
29997
|
var LuiAccordion = function (props) {
|
|
29998
29998
|
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;
|
|
@@ -30103,8 +30103,8 @@ var LuiMultiSwitch = function (_a) {
|
|
|
30103
30103
|
React__default["default"].createElement("div", { className: clsx('LuiMultiSwitch-labels', disabled && 'LuiMultiSwitch-disabled') }, options === null || options === void 0 ? void 0 : options.map(function (option, i) { return (React__default["default"].createElement("label", { role: 'radio', key: i, htmlFor: id.current, "aria-disabled": option.disabled || disabled, "aria-checked": selectedIndex === i, className: option.className, onClick: function () { return select(i); }, onTouchStart: function () { return select(i); } }, option.text)); }))));
|
|
30104
30104
|
};
|
|
30105
30105
|
|
|
30106
|
-
var css_248z$
|
|
30107
|
-
styleInject(css_248z$
|
|
30106
|
+
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}";
|
|
30107
|
+
styleInject(css_248z$h);
|
|
30108
30108
|
|
|
30109
30109
|
function $c1d7fb2ec91bae71$var$Item(props) {
|
|
30110
30110
|
return null;
|
|
@@ -33633,16 +33633,16 @@ function DefaultEmptyIndicator() {
|
|
|
33633
33633
|
return React__default["default"].createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
|
|
33634
33634
|
}
|
|
33635
33635
|
|
|
33636
|
-
var css_248z$
|
|
33637
|
-
styleInject(css_248z$
|
|
33636
|
+
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}";
|
|
33637
|
+
styleInject(css_248z$g);
|
|
33638
33638
|
|
|
33639
33639
|
function RadioItemRenderer(_a) {
|
|
33640
33640
|
var item = _a.item, isSelected = _a.isSelected;
|
|
33641
33641
|
return (React__default["default"].createElement("div", { className: "RadioItemRenderer ".concat(isSelected ? 'RadioItemRenderer-isSelected' : '') }, item.label));
|
|
33642
33642
|
}
|
|
33643
33643
|
|
|
33644
|
-
var css_248z$
|
|
33645
|
-
styleInject(css_248z$
|
|
33644
|
+
var css_248z$f = ".CheckboxRenderer {\n display: flex;\n align-items: center;\n}";
|
|
33645
|
+
styleInject(css_248z$f);
|
|
33646
33646
|
|
|
33647
33647
|
function CheckboxItemRenderer(_a) {
|
|
33648
33648
|
var item = _a.item, isSelected = _a.isSelected;
|
|
@@ -33668,8 +33668,8 @@ function LuiSideMenuItem(_a) {
|
|
|
33668
33668
|
React__default["default"].createElement("span", { className: "navText" }, label)))));
|
|
33669
33669
|
}
|
|
33670
33670
|
|
|
33671
|
-
var css_248z$
|
|
33672
|
-
styleInject(css_248z$
|
|
33671
|
+
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}";
|
|
33672
|
+
styleInject(css_248z$e);
|
|
33673
33673
|
|
|
33674
33674
|
var LuiProgressBar = function (_a) {
|
|
33675
33675
|
var value = _a.value, max = _a.max, error = _a.error, _b = _a.barHeight, barHeight = _b === void 0 ? '5px' : _b;
|
|
@@ -33697,8 +33697,8 @@ var LuiProgressBar = function (_a) {
|
|
|
33697
33697
|
React__default["default"].createElement("div", { "data-testid": 'progress-bar-size', className: clsx("ProgressBar-".concat(status), { indeterminate: indeterminate }), style: { width: "".concat(percentage, "%"), height: barHeight } })));
|
|
33698
33698
|
};
|
|
33699
33699
|
|
|
33700
|
-
var css_248z$
|
|
33701
|
-
styleInject(css_248z$
|
|
33700
|
+
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}";
|
|
33701
|
+
styleInject(css_248z$d);
|
|
33702
33702
|
|
|
33703
33703
|
exports.ToolbarDirection = void 0;
|
|
33704
33704
|
(function (ToolbarDirection) {
|
|
@@ -33720,8 +33720,8 @@ var ToolbarIcon = function (_a) {
|
|
|
33720
33720
|
return iconImage ? (React__default["default"].createElement("img", { className: "LuiIcon--lg", alt: iconName, src: iconImage })) : (React__default["default"].createElement(LuiIcon, { name: iconName, alt: iconName, size: 'md' }));
|
|
33721
33721
|
};
|
|
33722
33722
|
|
|
33723
|
-
var css_248z$
|
|
33724
|
-
styleInject(css_248z$
|
|
33723
|
+
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}";
|
|
33724
|
+
styleInject(css_248z$c);
|
|
33725
33725
|
|
|
33726
33726
|
/**
|
|
33727
33727
|
* Create button for using either LuiIcon or Image.
|
|
@@ -33784,8 +33784,8 @@ var useMediaQuery = function (query) {
|
|
|
33784
33784
|
return matches;
|
|
33785
33785
|
};
|
|
33786
33786
|
|
|
33787
|
-
var css_248z$
|
|
33788
|
-
styleInject(css_248z$
|
|
33787
|
+
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}";
|
|
33788
|
+
styleInject(css_248z$b);
|
|
33789
33789
|
|
|
33790
33790
|
var LuiCounter = React__default["default"].forwardRef(function (props, ref) {
|
|
33791
33791
|
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"]);
|
|
@@ -33800,8 +33800,8 @@ var LuiCounter = React__default["default"].forwardRef(function (props, ref) {
|
|
|
33800
33800
|
return (React__default["default"].createElement(React__default["default"].Fragment, null, !(selectedNum === 0 && !countZero) && (React__default["default"].createElement("span", __assign({ ref: ref, className: determineCounterClassname(), "data-testid": "lui-counter-number-".concat(shape), title: title !== null && title !== void 0 ? title : "".concat(selectedNum, " of ").concat(totalNum, " rows selected") }, rest), selectedNum.toLocaleString()))));
|
|
33801
33801
|
});
|
|
33802
33802
|
|
|
33803
|
-
var css_248z$
|
|
33804
|
-
styleInject(css_248z$
|
|
33803
|
+
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}";
|
|
33804
|
+
styleInject(css_248z$a);
|
|
33805
33805
|
|
|
33806
33806
|
/**
|
|
33807
33807
|
* @description Pagination component for navigating through a list of items with multiple pages.
|
|
@@ -33947,11 +33947,11 @@ var LuiPagination = React.forwardRef(function (_a, ref) {
|
|
|
33947
33947
|
React__default["default"].createElement("div", { className: "pagination" }, renderPaginationNumbers())))));
|
|
33948
33948
|
});
|
|
33949
33949
|
|
|
33950
|
-
var css_248z$
|
|
33951
|
-
styleInject(css_248z$
|
|
33950
|
+
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}";
|
|
33951
|
+
styleInject(css_248z$9);
|
|
33952
33952
|
|
|
33953
|
-
var css_248z$
|
|
33954
|
-
styleInject(css_248z$
|
|
33953
|
+
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}";
|
|
33954
|
+
styleInject(css_248z$8);
|
|
33955
33955
|
|
|
33956
33956
|
var useForkRef = function (forwardedRef) {
|
|
33957
33957
|
var localRef = React.useRef(null);
|
|
@@ -34680,8 +34680,8 @@ var keyDownHandler = function (e) {
|
|
|
34680
34680
|
return valueNow + delta;
|
|
34681
34681
|
};
|
|
34682
34682
|
|
|
34683
|
-
var css_248z$
|
|
34684
|
-
styleInject(css_248z$
|
|
34683
|
+
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}";
|
|
34684
|
+
styleInject(css_248z$7);
|
|
34685
34685
|
|
|
34686
34686
|
/**
|
|
34687
34687
|
* Container that appends a separator when the children count equals 2.
|
|
@@ -34733,8 +34733,8 @@ var useSplitterRef = function () {
|
|
|
34733
34733
|
return { ref: ref, setRatio: setRatio };
|
|
34734
34734
|
};
|
|
34735
34735
|
|
|
34736
|
-
var css_248z$
|
|
34737
|
-
styleInject(css_248z$
|
|
34736
|
+
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}";
|
|
34737
|
+
styleInject(css_248z$6);
|
|
34738
34738
|
|
|
34739
34739
|
var LuiBannerV2 = React.forwardRef(function (_a, ref) {
|
|
34740
34740
|
var _b, _c, _d;
|
|
@@ -34753,6 +34753,14 @@ var LuiBannerV2 = React.forwardRef(function (_a, ref) {
|
|
|
34753
34753
|
onDismiss && (React__default["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["default"].createElement(LuiIcon, { size: "md", name: "ic_clear", spanProps: { 'aria-hidden': true }, alt: "Dismiss" }))))));
|
|
34754
34754
|
});
|
|
34755
34755
|
|
|
34756
|
+
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}";
|
|
34757
|
+
styleInject(css_248z$5);
|
|
34758
|
+
|
|
34759
|
+
var ColorBucket = React.forwardRef(function (props, ref) {
|
|
34760
|
+
return (React__default["default"].createElement("div", { className: "colour-palette-display", ref: ref },
|
|
34761
|
+
React__default["default"].createElement("div", { className: "colour-palette-display-bucket", "data-testid": "colour-palette-display-bucket", style: { backgroundColor: props.color } })));
|
|
34762
|
+
});
|
|
34763
|
+
|
|
34756
34764
|
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}";
|
|
34757
34765
|
styleInject(css_248z$4);
|
|
34758
34766
|
|
|
@@ -35332,6 +35340,7 @@ var LuiErrorPanel = React.forwardRef(function (props, ref) {
|
|
|
35332
35340
|
});
|
|
35333
35341
|
|
|
35334
35342
|
exports.CheckboxItemRenderer = CheckboxItemRenderer;
|
|
35343
|
+
exports.ColorBucket = ColorBucket;
|
|
35335
35344
|
exports.ColorInput = ColorInput;
|
|
35336
35345
|
exports.ColorInputGroup = ColorInputGroup;
|
|
35337
35346
|
exports.ColorPalette = ColorPalette;
|