@stenajs-webui/panels 14.2.0 → 15.0.0-alpha.3
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/dist/index.es.js +148 -147
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +165 -146
- package/dist/index.js.map +1 -1
- package/package.json +7 -8
package/dist/index.es.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useRef, useMemo, createContext, useContext, forwardRef, useState } from 'react';
|
|
2
3
|
import { ActionMenu, ActionMenuContext, PrimaryButton, SecondaryButton, FlatButton, Icon, stenaSearch, Banner, Spinner, ButtonContent } from '@stenajs-webui/elements';
|
|
3
4
|
import { useBoolean, Column, Box, Row, Indent, Heading, Clickable, Text, Space, SeparatorLine, Spacing } from '@stenajs-webui/core';
|
|
4
5
|
import { Popover } from '@stenajs-webui/tooltip';
|
|
@@ -95,34 +96,34 @@ var ActionMenuButton = function (_a) {
|
|
|
95
96
|
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
96
97
|
toggle();
|
|
97
98
|
};
|
|
98
|
-
return (createElement(Popover, { disablePadding: true, visible: isOpen, onClickOutside: close, placement: placement, content: isOpen && (createElement(ActionMenu, { variant: "outlined", width: menuWidth, top: menuTop, trapFocus: true },
|
|
99
|
-
createElement(ActionMenuContext.Provider, { value: contextValue }, renderItems(close)))), arrow: false, appendTo: portalTarget, zIndex: zIndex, plugins: [focusManager], lazy: true },
|
|
100
|
-
createElement(Button, __assign({ rightIcon: rightIcon }, buttonProps, { ref: buttonRef, onClick: handleClick }))));
|
|
99
|
+
return (React.createElement(Popover, { disablePadding: true, visible: isOpen, onClickOutside: close, placement: placement, content: isOpen && (React.createElement(ActionMenu, { variant: "outlined", width: menuWidth, top: menuTop, trapFocus: true },
|
|
100
|
+
React.createElement(ActionMenuContext.Provider, { value: contextValue }, renderItems(close)))), arrow: false, appendTo: portalTarget, zIndex: zIndex, plugins: [focusManager], lazy: true },
|
|
101
|
+
React.createElement(Button, __assign({ rightIcon: rightIcon }, buttonProps, { ref: buttonRef, onClick: handleClick }))));
|
|
101
102
|
};
|
|
102
103
|
|
|
103
104
|
var ActionMenuPrimaryButton = function (props) {
|
|
104
|
-
return createElement(ActionMenuButton, __assign({ buttonComponent: PrimaryButton }, props));
|
|
105
|
+
return React.createElement(ActionMenuButton, __assign({ buttonComponent: PrimaryButton }, props));
|
|
105
106
|
};
|
|
106
107
|
|
|
107
108
|
var ActionMenuSecondaryButton = function (props) {
|
|
108
|
-
return createElement(ActionMenuButton, __assign({ buttonComponent: SecondaryButton }, props));
|
|
109
|
+
return React.createElement(ActionMenuButton, __assign({ buttonComponent: SecondaryButton }, props));
|
|
109
110
|
};
|
|
110
111
|
|
|
111
112
|
var ActionMenuFlatButton = function (props) {
|
|
112
|
-
return createElement(ActionMenuButton, __assign({ buttonComponent: FlatButton }, props));
|
|
113
|
+
return React.createElement(ActionMenuButton, __assign({ buttonComponent: FlatButton }, props));
|
|
113
114
|
};
|
|
114
115
|
|
|
115
116
|
var border = "1px solid var(--lhds-color-ui-300)";
|
|
116
117
|
var CheckboxMenu = function (_a) {
|
|
117
118
|
var renderMenu = _a.renderMenu, checkboxProps = __rest(_a, ["renderMenu"]);
|
|
118
119
|
var _b = useBoolean(false), isOpen = _b[0], open = _b[1], close = _b[2];
|
|
119
|
-
return (createElement(Popover, { onClickOutside: close, arrow: false, visible: isOpen, disablePadding: true, content: renderMenu ? (createElement(Column, null,
|
|
120
|
-
createElement(ActionMenu, null, renderMenu(close)))) : undefined, placement: "bottom-start", variant: "outlined" },
|
|
121
|
-
createElement(Box, { display: "inline-block" },
|
|
122
|
-
createElement(Row, { spacing: 0.5, indent: true, alignItems: "center", border: border, borderRadius: "4px" },
|
|
123
|
-
createElement(Checkbox, __assign({}, checkboxProps)),
|
|
124
|
-
createElement(Indent, { num: 0.5 }),
|
|
125
|
-
createElement(FlatButton, { size: "small", onClick: open, leftIcon: faAngleDown$1 })))));
|
|
120
|
+
return (React.createElement(Popover, { onClickOutside: close, arrow: false, visible: isOpen, disablePadding: true, content: renderMenu ? (React.createElement(Column, null,
|
|
121
|
+
React.createElement(ActionMenu, null, renderMenu(close)))) : undefined, placement: "bottom-start", variant: "outlined" },
|
|
122
|
+
React.createElement(Box, { display: "inline-block" },
|
|
123
|
+
React.createElement(Row, { spacing: 0.5, indent: true, alignItems: "center", border: border, borderRadius: "4px" },
|
|
124
|
+
React.createElement(Checkbox, __assign({}, checkboxProps)),
|
|
125
|
+
React.createElement(Indent, { num: 0.5 }),
|
|
126
|
+
React.createElement(FlatButton, { size: "small", onClick: open, leftIcon: faAngleDown$1 })))));
|
|
126
127
|
};
|
|
127
128
|
|
|
128
129
|
function styleInject(css, ref) {
|
|
@@ -152,34 +153,34 @@ function styleInject(css, ref) {
|
|
|
152
153
|
}
|
|
153
154
|
}
|
|
154
155
|
|
|
155
|
-
var css_248z = ".NavBar-module_navBar__HOrS3 {\n /* Theme vars */\n --swui-navbar-background-color: var(--lhds-color-blue-500);\n --swui-navbar-item-background-color-hover: var(--lhds-color-blue-700);\n --swui-navbar-item-background-color-selected: var(--lhds-color-blue-600);\n --swui-navbar-item-background-color-selected-hover: var(\n --lhds-color-blue-700\n );\n\n --swui-navbar-background-dark-color: var(--lhds-color-blue-800);\n --swui-navbar-dark-item-background-color-hover: var(--lhds-color-blue-600);\n --swui-navbar-dark-item-background-color-focus: var(--lhds-color-blue-600);\n --swui-navbar-dark-item-background-color-active: var(--lhds-color-blue-500);\n --swui-navbar-dark-item-background-color-selected: var(--lhds-color-blue-700);\n --swui-navbar-dark-item-background-color-selected-hover: var(\n --lhds-color-blue-600\n );\n --swui-navbar-dark-item-background-color-selected-focus: var(\n --lhds-color-blue-600\n );\n --swui-navbar-dark-item-background-color-selected-active: var(\n --lhds-color-blue-500\n );\n\n /* Styling */\n background-color: var(--swui-navbar-background-color);\n}\n\n .NavBar-module_navBar__HOrS3.NavBar-module_dark__fYBgM {\n background-color: var(--swui-navbar-background-dark-color);\n /* NavBarButton overrides */\n --swui-nav-bar-button-background-color-hover: var(\n --swui-navbar-dark-item-background-color-hover\n );\n --swui-nav-bar-button-background-color-focus: var(\n --swui-navbar-dark-item-background-color-focus\n );\n --swui-nav-bar-button-background-color-active: var(\n --swui-navbar-dark-item-background-color-active\n );\n --swui-nav-bar-button-background-color-selected: var(\n --swui-navbar-dark-item-background-color-selected\n );\n --swui-nav-bar-button-background-color-selected-hover: var(\n --swui-navbar-dark-item-background-color-selected-hover\n );\n --swui-nav-bar-button-background-color-selected-focus: var(\n --swui-navbar-dark-item-background-color-selected-focus\n );\n --swui-nav-bar-button-background-color-selected-active: var(\n --swui-navbar-dark-item-background-color-selected-active\n );\n }\n";
|
|
156
|
-
var styles = {"navBar":"NavBar-module_navBar__HOrS3","dark":"NavBar-module_dark__fYBgM"};
|
|
157
|
-
styleInject(css_248z);
|
|
156
|
+
var css_248z$9 = ".NavBar-module_navBar__HOrS3 {\n /* Theme vars */\n --swui-navbar-background-color: var(--lhds-color-blue-500);\n --swui-navbar-item-background-color-hover: var(--lhds-color-blue-700);\n --swui-navbar-item-background-color-selected: var(--lhds-color-blue-600);\n --swui-navbar-item-background-color-selected-hover: var(\n --lhds-color-blue-700\n );\n\n --swui-navbar-background-dark-color: var(--lhds-color-blue-800);\n --swui-navbar-dark-item-background-color-hover: var(--lhds-color-blue-600);\n --swui-navbar-dark-item-background-color-focus: var(--lhds-color-blue-600);\n --swui-navbar-dark-item-background-color-active: var(--lhds-color-blue-500);\n --swui-navbar-dark-item-background-color-selected: var(--lhds-color-blue-700);\n --swui-navbar-dark-item-background-color-selected-hover: var(\n --lhds-color-blue-600\n );\n --swui-navbar-dark-item-background-color-selected-focus: var(\n --lhds-color-blue-600\n );\n --swui-navbar-dark-item-background-color-selected-active: var(\n --lhds-color-blue-500\n );\n\n /* Styling */\n background-color: var(--swui-navbar-background-color);\n}\n\n .NavBar-module_navBar__HOrS3.NavBar-module_dark__fYBgM {\n background-color: var(--swui-navbar-background-dark-color);\n /* NavBarButton overrides */\n --swui-nav-bar-button-background-color-hover: var(\n --swui-navbar-dark-item-background-color-hover\n );\n --swui-nav-bar-button-background-color-focus: var(\n --swui-navbar-dark-item-background-color-focus\n );\n --swui-nav-bar-button-background-color-active: var(\n --swui-navbar-dark-item-background-color-active\n );\n --swui-nav-bar-button-background-color-selected: var(\n --swui-navbar-dark-item-background-color-selected\n );\n --swui-nav-bar-button-background-color-selected-hover: var(\n --swui-navbar-dark-item-background-color-selected-hover\n );\n --swui-nav-bar-button-background-color-selected-focus: var(\n --swui-navbar-dark-item-background-color-selected-focus\n );\n --swui-nav-bar-button-background-color-selected-active: var(\n --swui-navbar-dark-item-background-color-selected-active\n );\n }\n";
|
|
157
|
+
var styles$8 = {"navBar":"NavBar-module_navBar__HOrS3","dark":"NavBar-module_dark__fYBgM"};
|
|
158
|
+
styleInject(css_248z$9);
|
|
158
159
|
|
|
159
|
-
var css_248z$
|
|
160
|
-
var styles$
|
|
161
|
-
styleInject(css_248z$
|
|
160
|
+
var css_248z$8 = ".NavBarSideMenuButton-module_sidebarMenuButton__SlbsU {\n /* Theme vars */\n --swui-nav-bar-side-menu-button-text-color: var(--lhds-color-ui-50);\n --swui-nav-bar-side-menu-button-background-color: var(--lhds-color-blue-500);\n --swui-nav-bar-side-menu-button-background-color-hover: var(\n --lhds-color-blue-600\n );\n --swui-nav-bar-side-menu-button-background-color-focus: var(\n --lhds-color-blue-600\n );\n --swui-nav-bar-side-menu-button-background-color-active: var(\n --lhds-color-blue-700\n );\n --swui-nav-bar-side-menu-button-background-dark-color: var(\n --lhds-color-blue-800\n );\n --swui-nav-bar-side-menu-button-background-dark-color-hover: var(\n --lhds-color-blue-900\n );\n --swui-nav-bar-side-menu-button-background-dark-color-focus: var(\n --lhds-color-blue-700\n );\n --swui-nav-bar-side-menu-button-background-dark-color-active: var(\n --lhds-color-blue-900\n );\n\n /* Current */\n --current-background-color: var(\n --swui-nav-bar-side-menu-button-background-color\n );\n\n /* Styling */\n\n display: -webkit-flex;\n\n display: flex;\n -webkit-align-items: center;\n align-items: center;\n -webkit-justify-content: center;\n justify-content: center;\n line-height: 10px;\n background-color: var(--current-background-color);\n color: var(--swui-nav-bar-side-menu-button-text-color);\n cursor: pointer;\n height: 64px;\n width: 64px;\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n border-radius: 0;\n outline: none;\n border: none;\n}\n\n .NavBarSideMenuButton-module_sidebarMenuButton__SlbsU.NavBarSideMenuButton-module_light__2LbsW {\n --current-background-color: var(\n --swui-nav-bar-side-menu-button-background-color\n );\n }\n\n .NavBarSideMenuButton-module_sidebarMenuButton__SlbsU.NavBarSideMenuButton-module_light__2LbsW:hover {\n --current-background-color: var(\n --swui-nav-bar-side-menu-button-background-color-hover\n );\n }\n\n .NavBarSideMenuButton-module_sidebarMenuButton__SlbsU.NavBarSideMenuButton-module_light__2LbsW:focus {\n --current-background-color: var(\n --swui-nav-bar-side-menu-button-background-color-focus\n );\n }\n\n .NavBarSideMenuButton-module_sidebarMenuButton__SlbsU.NavBarSideMenuButton-module_light__2LbsW:active {\n --current-background-color: var(\n --swui-nav-bar-side-menu-button-background-color-active\n );\n }\n\n .NavBarSideMenuButton-module_sidebarMenuButton__SlbsU.NavBarSideMenuButton-module_dark__QlRe8 {\n --current-background-color: var(\n --swui-nav-bar-side-menu-button-background-dark-color\n );\n }\n\n .NavBarSideMenuButton-module_sidebarMenuButton__SlbsU.NavBarSideMenuButton-module_dark__QlRe8:hover {\n --current-background-color: var(\n --swui-nav-bar-side-menu-button-background-dark-color-hover\n );\n }\n\n .NavBarSideMenuButton-module_sidebarMenuButton__SlbsU.NavBarSideMenuButton-module_dark__QlRe8:focus {\n --current-background-color: var(\n --swui-nav-bar-side-menu-button-background-dark-color-focus\n );\n }\n\n .NavBarSideMenuButton-module_sidebarMenuButton__SlbsU.NavBarSideMenuButton-module_dark__QlRe8:active {\n --current-background-color: var(\n --swui-nav-bar-side-menu-button-background-dark-color-active\n );\n }\n\n .NavBarSideMenuButton-module_sidebarMenuButton__SlbsU .NavBarSideMenuButton-module_icon__Art-L {\n color: var(--swui-nav-bar-side-menu-button-text-color);\n }\n";
|
|
161
|
+
var styles$7 = {"sidebarMenuButton":"NavBarSideMenuButton-module_sidebarMenuButton__SlbsU","light":"NavBarSideMenuButton-module_light__2LbsW","dark":"NavBarSideMenuButton-module_dark__QlRe8","icon":"NavBarSideMenuButton-module_icon__Art-L"};
|
|
162
|
+
styleInject(css_248z$8);
|
|
162
163
|
|
|
163
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
164
|
+
function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
|
|
164
165
|
|
|
165
|
-
var _ref = /*#__PURE__*/createElement("path", {
|
|
166
|
+
var _ref$1 = /*#__PURE__*/React.createElement("path", {
|
|
166
167
|
fill: "#FFF",
|
|
167
168
|
fillRule: "evenodd",
|
|
168
169
|
d: "M22 5H2c.12 0 0-.15 0 0V3c0 .15.12 0 0 0h20c-.12 0 0 .15 0 0v2c0-.15-.12 0 0 0zm0 8H2c.12 0 0-.15 0 0v-2c0 .15.12 0 0 0h20c-.12 0 0 .15 0 0v2c0-.15-.12 0 0 0zm0 8H2c.12 0 0-.15 0 0v-2c0 .15.12 0 0 0h20c-.12 0 0 .15 0 0v2c0-.15-.12 0 0 0z"
|
|
169
170
|
});
|
|
170
171
|
|
|
171
172
|
function SvgBars(props) {
|
|
172
|
-
return /*#__PURE__*/createElement("svg", _extends({
|
|
173
|
+
return /*#__PURE__*/React.createElement("svg", _extends$1({
|
|
173
174
|
xmlns: "http://www.w3.org/2000/svg",
|
|
174
175
|
width: 24,
|
|
175
176
|
height: 24
|
|
176
|
-
}, props), _ref);
|
|
177
|
+
}, props), _ref$1);
|
|
177
178
|
}
|
|
178
179
|
|
|
179
180
|
var NavBarSideMenuButton = function (_a) {
|
|
180
181
|
var _b = _a.variant, variant = _b === void 0 ? "light" : _b, className = _a.className, onClick = _a.onClick;
|
|
181
|
-
return (createElement("button", { onClick: onClick, className: cx(styles$
|
|
182
|
-
createElement(SvgBars, { className: styles$
|
|
182
|
+
return (React.createElement("button", { onClick: onClick, className: cx(styles$7.sidebarMenuButton, styles$7[variant], className) },
|
|
183
|
+
React.createElement(SvgBars, { className: styles$7.icon })));
|
|
183
184
|
};
|
|
184
185
|
|
|
185
186
|
var NavBarVariantContext = createContext("light");
|
|
@@ -188,57 +189,57 @@ var useNavBarVariant = function () { return useContext(NavBarVariantContext); };
|
|
|
188
189
|
var NavBar = function (_a) {
|
|
189
190
|
var _b = _a.variant, variant = _b === void 0 ? "light" : _b, left = _a.left, className = _a.className, _c = _a.showMenuButton, showMenuButton = _c === void 0 ? false : _c, children = _a.children, right = _a.right, center = _a.center, _d = _a.height, height = _d === void 0 ? "64px" : _d, onClickMenuButton = _a.onClickMenuButton;
|
|
190
191
|
var currentFlex = center ? 1 : undefined;
|
|
191
|
-
return (createElement(NavBarVariantContext.Provider, { value: variant },
|
|
192
|
-
createElement(Row, { height: height, minHeight: height, justifyContent: "space-between", className: cx(styles.navBar, styles[variant], className) },
|
|
193
|
-
createElement(Row, { flex: currentFlex, justifyContent: "flex-start", alignItems: "center" },
|
|
194
|
-
showMenuButton ? (createElement(Fragment, null,
|
|
195
|
-
createElement(NavBarSideMenuButton, { variant: variant, onClick: onClickMenuButton }),
|
|
196
|
-
createElement(Indent, null))) : (createElement(Indent, { num: 2 })),
|
|
197
|
-
left ? (createElement(Fragment, null,
|
|
192
|
+
return (React.createElement(NavBarVariantContext.Provider, { value: variant },
|
|
193
|
+
React.createElement(Row, { height: height, minHeight: height, justifyContent: "space-between", className: cx(styles$8.navBar, styles$8[variant], className) },
|
|
194
|
+
React.createElement(Row, { flex: currentFlex, justifyContent: "flex-start", alignItems: "center" },
|
|
195
|
+
showMenuButton ? (React.createElement(React.Fragment, null,
|
|
196
|
+
React.createElement(NavBarSideMenuButton, { variant: variant, onClick: onClickMenuButton }),
|
|
197
|
+
React.createElement(Indent, null))) : (React.createElement(Indent, { num: 2 })),
|
|
198
|
+
left ? (React.createElement(React.Fragment, null,
|
|
198
199
|
left,
|
|
199
|
-
createElement(Indent, { num: 2 }))) : (createElement(Indent, { num: 2 })),
|
|
200
|
-
children && (createElement(Fragment, null,
|
|
201
|
-
createElement(Row, { justifyContent: "center", alignItems: "center" }, Children.map(children, function (child, index) { return (createElement(Fragment, null,
|
|
202
|
-
index > 0 && createElement(Indent, null),
|
|
200
|
+
React.createElement(Indent, { num: 2 }))) : (React.createElement(Indent, { num: 2 })),
|
|
201
|
+
children && (React.createElement(React.Fragment, null,
|
|
202
|
+
React.createElement(Row, { justifyContent: "center", alignItems: "center" }, React.Children.map(children, function (child, index) { return (React.createElement(React.Fragment, null,
|
|
203
|
+
index > 0 && React.createElement(Indent, null),
|
|
203
204
|
child)); }))))),
|
|
204
|
-
center && (createElement(Row, { justifyContent: "center", alignItems: "center" }, center)),
|
|
205
|
-
createElement(Row, { justifyContent: "flex-end", alignItems: "center", flex: currentFlex },
|
|
205
|
+
center && (React.createElement(Row, { justifyContent: "center", alignItems: "center" }, center)),
|
|
206
|
+
React.createElement(Row, { justifyContent: "flex-end", alignItems: "center", flex: currentFlex },
|
|
206
207
|
right,
|
|
207
|
-
createElement(Indent, { num: 2 })))));
|
|
208
|
+
React.createElement(Indent, { num: 2 })))));
|
|
208
209
|
};
|
|
209
210
|
|
|
210
|
-
var css_248z$
|
|
211
|
-
var styles$
|
|
212
|
-
styleInject(css_248z$
|
|
211
|
+
var css_248z$7 = ".NavBarButton-module_navBarButton__3XKjB {\n /* Theme vars */\n --swui-nav-bar-button-text-color: var(--lhds-color-ui-50);\n --swui-nav-bar-button-background-color: transparent;\n}\n\n .NavBarButton-module_navBarButton__3XKjB.NavBarButton-module_light__3lWuW {\n --swui-nav-bar-button-background-color-hover: var(--lhds-color-blue-900);\n --swui-nav-bar-button-background-color-focus: var(--lhds-color-blue-700);\n --swui-nav-bar-button-background-color-active: var(--lhds-color-blue-800);\n --swui-nav-bar-button-background-color-selected: var(--lhds-color-blue-600);\n --swui-nav-bar-button-background-color-selected-hover: var(\n --lhds-color-blue-700\n );\n --swui-nav-bar-button-background-color-selected-focus: var(\n --lhds-color-blue-700\n );\n --swui-nav-bar-button-background-color-selected-active: var(\n --lhds-color-blue-800\n );\n }\n\n .NavBarButton-module_navBarButton__3XKjB.NavBarButton-module_dark__2LCrl {\n --swui-nav-bar-button-background-color-hover: var(--lhds-color-blue-900);\n --swui-nav-bar-button-background-color-focus: var(--lhds-color-blue-700);\n --swui-nav-bar-button-background-color-active: var(--lhds-color-blue-900);\n --swui-nav-bar-button-background-color-selected: var(--lhds-color-blue-700);\n --swui-nav-bar-button-background-color-selected-hover: var(\n --lhds-color-blue-900\n );\n --swui-nav-bar-button-background-color-selected-focus: var(\n --lhds-color-blue-600\n );\n --swui-nav-bar-button-background-color-selected-active: var(\n --lhds-color-blue-900\n );\n }\n\n .NavBarButton-module_navBarButton__3XKjB {\n --swui-flat-button-text-color: var(--swui-nav-bar-button-text-color);\n --swui-flat-button-icon-color: var(--swui-nav-bar-button-text-color);\n --swui-flat-button-text-color-active: var(--swui-nav-bar-button-text-color);\n --swui-flat-button-background-color: var(\n --swui-nav-bar-button-background-color\n );\n --swui-flat-button-background-color-hover: var(\n --swui-nav-bar-button-background-color-hover\n );\n --swui-flat-button-background-color-focus: var(\n --swui-nav-bar-button-background-color-focus\n );\n --swui-flat-button-background-color-active: var(\n --swui-nav-bar-button-background-color-active\n );\n}\n\n /* Flatbutton overrrides */\n\n .NavBarButton-module_navBarButton__3XKjB.NavBarButton-module_selected__1ReDE {\n --swui-flat-button-background-color: var(\n --swui-nav-bar-button-background-color-selected\n );\n --swui-flat-button-background-color-hover: var(\n --swui-nav-bar-button-background-color-selected-hover\n );\n --swui-flat-button-background-color-focus: var(\n --swui-nav-bar-button-background-color-selected-focus\n );\n --swui-flat-button-background-color-active: var(\n --swui-nav-bar-button-background-color-selected-active\n );\n }\n";
|
|
212
|
+
var styles$6 = {"navBarButton":"NavBarButton-module_navBarButton__3XKjB","light":"NavBarButton-module_light__3lWuW","dark":"NavBarButton-module_dark__2LCrl","selected":"NavBarButton-module_selected__1ReDE"};
|
|
213
|
+
styleInject(css_248z$7);
|
|
213
214
|
|
|
214
215
|
var NavBarButton = function (_a) {
|
|
215
216
|
var selected = _a.selected, className = _a.className, buttonProps = __rest(_a, ["selected", "className"]);
|
|
216
217
|
var variant = useNavBarVariant();
|
|
217
|
-
return (createElement(FlatButton, __assign({}, buttonProps, { className: cx(styles$
|
|
218
|
+
return (React.createElement(FlatButton, __assign({}, buttonProps, { className: cx(styles$6.navBarButton, styles$6[variant], selected && styles$6.selected, className) })));
|
|
218
219
|
};
|
|
219
220
|
|
|
220
221
|
var NavBarHeading = function (headingProps) {
|
|
221
|
-
return createElement(Heading, __assign({ whiteSpace: "nowrap", color: "#fff" }, headingProps));
|
|
222
|
+
return React.createElement(Heading, __assign({ whiteSpace: "nowrap", color: "#fff" }, headingProps));
|
|
222
223
|
};
|
|
223
224
|
|
|
224
225
|
var NavBarPopoverButton = function (_a) {
|
|
225
226
|
var content = _a.content, children = _a.children, navBarButtonProps = __rest(_a, ["content", "children"]);
|
|
226
227
|
var _b = useBoolean(false), isOpen = _b[0], open = _b[1], close = _b[2];
|
|
227
|
-
return (createElement(Popover, { onClickOutside: close, triggerTarget: document.body, visible: isOpen, content: createElement(Fragment, null,
|
|
228
|
+
return (React.createElement(Popover, { onClickOutside: close, triggerTarget: document.body, visible: isOpen, content: React.createElement(React.Fragment, null,
|
|
228
229
|
content && content({ close: close }),
|
|
229
230
|
children) },
|
|
230
|
-
createElement(NavBarButton, __assign({}, navBarButtonProps, { onClick: open }))));
|
|
231
|
+
React.createElement(NavBarButton, __assign({}, navBarButtonProps, { onClick: open }))));
|
|
231
232
|
};
|
|
232
233
|
|
|
233
|
-
var css_248z$
|
|
234
|
-
var styles$
|
|
235
|
-
styleInject(css_248z$
|
|
234
|
+
var css_248z$6 = ".NavBarSearchField-module_navBarSearchFieldInput__2kThv {\n --swui-textinput-line-height: 27px;\n --swui-textinput-text-color: var(--lhds-color-ui-50);\n}\n\n .NavBarSearchField-module_navBarSearchFieldInput__2kThv:focus {\n --swui-textinput-text-color: var(--lhds-color-ui-800);\n }\n\n.NavBarSearchField-module_navBarSearchField__kIe66 {\n --swui-textinput-animation-time: var(--swui-animation-time-fast);\n}\n\n.NavBarSearchField-module_navBarSearchField__kIe66.NavBarSearchField-module_light__jSF_w {\n --swui-textinput-placeholder-color: var(--lhds-color-ui-500);\n --swui-textinput-bg-color: var(--lhds-color-blue-600);\n --swui-textinput-border-color: transparent;\n --swui-textinput-border-color-hover: transparent;\n }\n\n.NavBarSearchField-module_navBarSearchField__kIe66.NavBarSearchField-module_light__jSF_w:focus-within {\n --swui-textinput-text-color: var(--lhds-color-ui-800);\n --swui-field-text-color: var(--swui-field-text-color);\n --swui-textinput-icon-color: var(--lhds-color-ui-500);\n --swui-textinput-bg-color: var(--lhds-color-ui-50);\n }\n\n.NavBarSearchField-module_navBarSearchField__kIe66.NavBarSearchField-module_dark__TNf65 {\n --swui-textinput-placeholder-color: var(--lhds-color-ui-500);\n --swui-textinput-bg-color: var(--lhds-color-blue-900);\n --swui-textinput-border-color: transparent;\n --swui-textinput-border-color-hover: transparent;\n }\n\n.NavBarSearchField-module_navBarSearchField__kIe66.NavBarSearchField-module_dark__TNf65:focus-within {\n --swui-field-text-color: var(--swui-field-text-color);\n --swui-textinput-icon-color: var(--lhds-color-ui-500);\n --swui-textinput-bg-color: var(--lhds-color-ui-50);\n }\n";
|
|
235
|
+
var styles$5 = {"navBarSearchFieldInput":"NavBarSearchField-module_navBarSearchFieldInput__2kThv","navBarSearchField":"NavBarSearchField-module_navBarSearchField__kIe66","light":"NavBarSearchField-module_light__jSF_w","dark":"NavBarSearchField-module_dark__TNf65"};
|
|
236
|
+
styleInject(css_248z$6);
|
|
236
237
|
|
|
237
238
|
var NavBarSearchField = function (_a) {
|
|
238
239
|
var _b = _a.placeholder, placeholder = _b === void 0 ? "Search..." : _b, className = _a.className, wrapperClassName = _a.wrapperClassName, textInputProps = __rest(_a, ["placeholder", "className", "wrapperClassName"]);
|
|
239
240
|
var variant = useNavBarVariant();
|
|
240
|
-
return (createElement(TextInput, __assign({ wrapperClassName: cx(styles$
|
|
241
|
-
createElement(Icon, { icon: stenaSearch })) }, textInputProps)));
|
|
241
|
+
return (React.createElement(TextInput, __assign({ wrapperClassName: cx(styles$5.navBarSearchField, styles$5[variant], wrapperClassName), className: cx(styles$5.navBarSearchFieldInput, className), placeholder: placeholder, contentRight: React.createElement(Clickable, null,
|
|
242
|
+
React.createElement(Icon, { icon: stenaSearch })) }, textInputProps)));
|
|
242
243
|
};
|
|
243
244
|
|
|
244
245
|
var defaultNotificationTheme = {
|
|
@@ -256,42 +257,42 @@ var Notification = function (_a) {
|
|
|
256
257
|
}
|
|
257
258
|
return undefined;
|
|
258
259
|
}, [date]);
|
|
259
|
-
return (createElement(Clickable, { onClick: onClick, style: { textAlign: "left" } },
|
|
260
|
-
createElement(Box, { background: dismissed ? theme.notificationDismissedBg : theme.notificationBg, hoverBackground: dismissed
|
|
260
|
+
return (React.createElement(Clickable, { onClick: onClick, style: { textAlign: "left" } },
|
|
261
|
+
React.createElement(Box, { background: dismissed ? theme.notificationDismissedBg : theme.notificationBg, hoverBackground: dismissed
|
|
261
262
|
? theme.notificationDismissedHoverBg
|
|
262
263
|
: theme.notificationHoverBg, spacing: true, indent: true },
|
|
263
|
-
createElement(Row, { width: "250px" },
|
|
264
|
-
icon && (createElement(Row, { width: "34px", alignItems: "center" },
|
|
265
|
-
createElement(Icon, { icon: icon, color: iconColor }))),
|
|
266
|
-
createElement(Column, { flex: 1 },
|
|
267
|
-
title && (createElement(Fragment, null,
|
|
268
|
-
createElement(Text, null, title),
|
|
269
|
-
createElement(Space, { half: true }))),
|
|
270
|
-
text && (createElement(Fragment, null,
|
|
271
|
-
createElement(Text, { size: "small" }, text),
|
|
272
|
-
createElement(Space, { half: true }))),
|
|
273
|
-
content && (createElement(Fragment, null,
|
|
264
|
+
React.createElement(Row, { width: "250px" },
|
|
265
|
+
icon && (React.createElement(Row, { width: "34px", alignItems: "center" },
|
|
266
|
+
React.createElement(Icon, { icon: icon, color: iconColor }))),
|
|
267
|
+
React.createElement(Column, { flex: 1 },
|
|
268
|
+
title && (React.createElement(React.Fragment, null,
|
|
269
|
+
React.createElement(Text, null, title),
|
|
270
|
+
React.createElement(Space, { half: true }))),
|
|
271
|
+
text && (React.createElement(React.Fragment, null,
|
|
272
|
+
React.createElement(Text, { size: "small" }, text),
|
|
273
|
+
React.createElement(Space, { half: true }))),
|
|
274
|
+
content && (React.createElement(React.Fragment, null,
|
|
274
275
|
content,
|
|
275
|
-
createElement(Space, { half: true }))),
|
|
276
|
-
createElement(Text, { size: "small", color: cssColor("--swui-text-disabled-color") }, agoLabel))))));
|
|
276
|
+
React.createElement(Space, { half: true }))),
|
|
277
|
+
React.createElement(Text, { size: "small", color: cssColor("--swui-text-disabled-color") }, agoLabel))))));
|
|
277
278
|
};
|
|
278
279
|
|
|
279
|
-
var css_248z$4 = ".Collapsible-module_collapsible__2Nn8K {\n --swui-collapsible-animation-time: var(--swui-animation-time-fast);\n\n --swui-collapsible-expanded-line-background-color: var(\n --swui-primary-action-color\n );\n\n /*\n * Header\n */\n --swui-collapsible-header-text-color: var(--lhds-color-ui-900);\n --swui-collapsible-header-background-color: var(--swui-white);\n --swui-collapsible-header-background-color-hover: var(--lhds-color-blue-100);\n --swui-collapsible-header-background-color-active: var(--lhds-color-blue-100);\n --swui-collapsible-header-border-color: var(--lhds-color-ui-300);\n --swui-collapsible-header-border-color-focus: var(\n --swui-primary-action-color\n );\n --swui-collapsible-header-focus-shadow: var(--swui-field-focus-shadow);\n --swui-collapsible-header-content-margin: calc(\n var(--swui-metrics-indent) * 2\n );\n --swui-collapsible-header-font-weight: var(--swui-font-weight-text-bold);\n --swui-collapsible-header-indicator-color: var(--swui-primary-action-color);\n --swui-collapsible-header-indicator-color-collapsed: var(--lhds-color-ui-500);\n --swui-collapsible-header-indicator-color-hover: var(\n --swui-primary-action-color\n );\n --swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0;\n\n /*\n * Content\n */\n --swui-collapsible-content-background-color: var(--lhds-color-ui-100);\n --swui-collapsible-content-border-color: var(--lhds-color-ui-300);\n --swui-collapsible-content-padding: var(--swui-metrics-indent)\n calc(var(--swui-metrics-indent) * 2);\n\n --swui-collapsible-groupheading-font-size: var(--swui-font-size-smaller);\n --swui-collapsible-groupheading-text-color: var(--lhds-color-ui-600);\n\n --swui-collapsible-min-height: 40px;\n}\n\n /* Header */\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_header__IZx0y {\n background-color: var(--swui-collapsible-header-background-color);\n width: 100%;\n font-size: inherit;\n font-family: var(--swui-font-primary);\n font-weight: var(--swui-collapsible-header-font-weight);\n text-align: left;\n\n min-height: var(--swui-collapsible-min-height);\n box-sizing: border-box;\n display: -webkit-flex;\n display: flex;\n -webkit-justify-content: space-between;\n justify-content: space-between;\n -webkit-align-items: center;\n align-items: center;\n border-bottom: 1px solid var(--swui-collapsible-header-border-color);\n padding: var(--swui-collapsible-header-padding);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_header__IZx0y .Collapsible-module_indicator__3YBhK {\n transition: all var(--swui-collapsible-animation-time) ease-in-out;\n margin-left: var(--swui-collapsible-header-content-margin);\n color: var(--swui-collapsible-header-indicator-color);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_header__IZx0y:not(:disabled):hover:not(:active) {\n background-color: var(--swui-collapsible-header-background-color-hover);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_header__IZx0y:not(:disabled):hover:not(:active) .Collapsible-module_indicator__3YBhK {\n color: var(--swui-collapsible-header-indicator-color-hover);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_header__IZx0y:focus-visible {\n outline: 1px solid var(--swui-collapsible-header-border-color-focus);\n outline-offset: -1px;\n box-shadow: var(--swui-collapsible-header-focus-shadow);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_header__IZx0y:active {\n background: var(--swui-collapsible-header-background-color-active);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_header__IZx0y:disabled {\n cursor: not-allowed;\n }\n\n .Collapsible-module_collapsible__2Nn8K {\n\n position: relative;\n}\n\n .Collapsible-module_collapsible__2Nn8K::before {\n content: \"\";\n position: absolute;\n width: 2px;\n background: var(--swui-collapsible-expanded-line-background-color);\n top: 0;\n bottom: 0;\n left: 0;\n z-index: 1;\n }\n\n .Collapsible-module_collapsible__2Nn8K[aria-expanded=\"false\"] {\n --swui-collapsible-expanded-line-background-color: transparent;\n }\n\n .Collapsible-module_collapsible__2Nn8K[aria-expanded=\"false\"] .Collapsible-module_indicator__3YBhK {\n color: var(--swui-collapsible-header-indicator-color-collapsed);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_label__Hpp-R {\n margin-right: auto;\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_label__Hpp-R span {\n --current-line-height: 1;\n font-weight: var(--swui-collapsible-header-font-weight);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentLeft__2gPpu,\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentRight__bTr59 {\n display: -webkit-flex;\n display: flex;\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentLeft__2gPpu button, .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentRight__bTr59 button {\n cursor: pointer;\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentLeft__2gPpu {\n margin-right: var(--swui-collapsible-header-content-margin);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentRight__bTr59 {\n margin-left: auto;\n }\n\n /* Content */\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_content__1e1C8 {\n display: -webkit-flex;\n display: flex;\n -webkit-align-items: center;\n align-items: center;\n -webkit-justify-content: stretch;\n justify-content: stretch;\n background: var(--swui-collapsible-content-background-color);\n padding: var(--swui-collapsible-content-padding);\n min-height: var(--swui-collapsible-min-height);\n box-sizing: border-box;\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_content__1e1C8:last-child {\n border-bottom: 1px solid var(--swui-collapsible-content-border-color);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_content__1e1C8.Collapsible-module_groupHeading__3BK-5 {\n border: none;\n font-size: var(--swui-collapsible-groupheading-font-size);\n font-family: var(--swui-font-primary);\n color: var(--swui-collapsible-groupheading-text-color);\n text-transform: uppercase;\n font-weight: 600;\n letter-spacing: 1px;\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_content__1e1C8 [data-hidden=\"true\"] {\n display: none;\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_content__1e1C8:hover [data-hidden=\"true\"] {\n display: inherit;\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_content__1e1C8:hover [data-hover=\"true\"] {\n color: var(--swui-collapsible-header-indicator-color-hover);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentEnter__GWHoW {\n opacity: 0;\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentEnterActive__1YdNi {\n opacity: 1;\n transition: opacity var(--swui-collapsible-animation-time) ease-in-out;\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentExitDone__35Iht {\n display: none;\n }\n\n /** Clickable content */\n\n .Collapsible-module_collapsible__2Nn8K button.Collapsible-module_content__1e1C8 {\n font-family: var(--swui-font-primary);\n font-size: inherit;\n width: 100%;\n text-align: left;\n }\n\n .Collapsible-module_collapsible__2Nn8K button.Collapsible-module_content__1e1C8:focus-visible {\n outline: 1px solid var(--swui-collapsible-header-border-color-focus);\n outline-offset: -1px;\n box-shadow: var(--swui-collapsible-header-focus-shadow);\n }\n\n .Collapsible-module_collapsible__2Nn8K button.Collapsible-module_content__1e1C8:not(:disabled):hover {\n background-color: var(--swui-collapsible-header-background-color-hover);\n }\n\n .Collapsible-module_collapsible__2Nn8K button.Collapsible-module_content__1e1C8:disabled {\n cursor: not-allowed;\n }\n\n .Collapsible-module_collapsible__2Nn8K button.Collapsible-module_content__1e1C8:focus-within [data-hidden=\"true\"] {\n display: inherit;\n }\n\n /* Remove header background color if not at the highest level */\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K {\n --swui-collapsible-header-background-color: var(\n --swui-collapsible-content-background-color\n );\n --swui-collapsible-header-font-weight: normal;\n }\n\n /* Increase padding with depth */\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K {\n --swui-collapsible-content-padding: var(--swui-metrics-indent)\n calc(var(--swui-metrics-indent) * 2) var(--swui-metrics-indent)\n calc(var(--swui-metrics-indent) * 4);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K {\n --swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0\n calc(var(--swui-metrics-indent) * 4);\n --swui-collapsible-content-padding: var(--swui-metrics-indent)\n calc(var(--swui-metrics-indent) * 2) var(--swui-metrics-indent)\n calc(var(--swui-metrics-indent) * 6);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K {\n --swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0\n calc(var(--swui-metrics-indent) * 6);\n --swui-collapsible-content-padding: var(--swui-metrics-indent)\n calc(var(--swui-metrics-indent) * 2) var(--swui-metrics-indent)\n calc(var(--swui-metrics-indent) * 8);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K {\n --swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0\n calc(var(--swui-metrics-indent) * 8);\n --swui-collapsible-content-padding: var(--swui-metrics-indent)\n calc(var(--swui-metrics-indent) * 2) var(--swui-metrics-indent)\n calc(var(--swui-metrics-indent) * 10);\n }\n";
|
|
280
|
+
var css_248z$5 = ".Collapsible-module_collapsible__2Nn8K {\n --swui-collapsible-animation-time: var(--swui-animation-time-fast);\n\n --swui-collapsible-expanded-line-background-color: var(\n --swui-primary-action-color\n );\n\n /*\n * Header\n */\n --swui-collapsible-header-text-color: var(--lhds-color-ui-900);\n --swui-collapsible-header-background-color: var(--swui-white);\n --swui-collapsible-header-background-color-hover: var(--lhds-color-blue-100);\n --swui-collapsible-header-background-color-active: var(--lhds-color-blue-100);\n --swui-collapsible-header-border-color: var(--lhds-color-ui-300);\n --swui-collapsible-header-border-color-focus: var(\n --swui-primary-action-color\n );\n --swui-collapsible-header-focus-shadow: var(--swui-field-focus-shadow);\n --swui-collapsible-header-content-margin: calc(\n var(--swui-metrics-indent) * 2\n );\n --swui-collapsible-header-font-weight: var(--swui-font-weight-text-bold);\n --swui-collapsible-header-indicator-color: var(--swui-primary-action-color);\n --swui-collapsible-header-indicator-color-collapsed: var(--lhds-color-ui-500);\n --swui-collapsible-header-indicator-color-hover: var(\n --swui-primary-action-color\n );\n --swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0;\n\n /*\n * Content\n */\n --swui-collapsible-content-background-color: var(--lhds-color-ui-100);\n --swui-collapsible-content-border-color: var(--lhds-color-ui-300);\n --swui-collapsible-content-padding: var(--swui-metrics-indent)\n calc(var(--swui-metrics-indent) * 2);\n\n --swui-collapsible-groupheading-font-size: var(--swui-font-size-smaller);\n --swui-collapsible-groupheading-text-color: var(--lhds-color-ui-600);\n\n --swui-collapsible-min-height: 40px;\n}\n\n /* Header */\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_header__IZx0y {\n background-color: var(--swui-collapsible-header-background-color);\n width: 100%;\n font-size: inherit;\n font-family: var(--swui-font-primary);\n font-weight: var(--swui-collapsible-header-font-weight);\n text-align: left;\n\n min-height: var(--swui-collapsible-min-height);\n box-sizing: border-box;\n display: -webkit-flex;\n display: flex;\n -webkit-justify-content: space-between;\n justify-content: space-between;\n -webkit-align-items: center;\n align-items: center;\n border-bottom: 1px solid var(--swui-collapsible-header-border-color);\n padding: var(--swui-collapsible-header-padding);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_header__IZx0y .Collapsible-module_indicator__3YBhK {\n transition: all var(--swui-collapsible-animation-time) ease-in-out;\n margin-left: var(--swui-collapsible-header-content-margin);\n color: var(--swui-collapsible-header-indicator-color);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_header__IZx0y:not(:disabled):hover:not(:active) {\n background-color: var(--swui-collapsible-header-background-color-hover);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_header__IZx0y:not(:disabled):hover:not(:active) .Collapsible-module_indicator__3YBhK {\n color: var(--swui-collapsible-header-indicator-color-hover);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_header__IZx0y:focus-visible {\n outline: 1px solid var(--swui-collapsible-header-border-color-focus);\n outline-offset: -1px;\n box-shadow: var(--swui-collapsible-header-focus-shadow);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_header__IZx0y:active {\n background: var(--swui-collapsible-header-background-color-active);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_header__IZx0y:disabled {\n cursor: not-allowed;\n }\n\n .Collapsible-module_collapsible__2Nn8K {\n\n position: relative;\n}\n\n .Collapsible-module_collapsible__2Nn8K::before {\n content: \"\";\n position: absolute;\n width: 2px;\n background: var(--swui-collapsible-expanded-line-background-color);\n top: 0;\n bottom: 0;\n left: 0;\n z-index: 1;\n }\n\n .Collapsible-module_collapsible__2Nn8K[aria-expanded=\"false\"] {\n --swui-collapsible-expanded-line-background-color: transparent;\n }\n\n .Collapsible-module_collapsible__2Nn8K[aria-expanded=\"false\"] .Collapsible-module_indicator__3YBhK {\n color: var(--swui-collapsible-header-indicator-color-collapsed);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_label__Hpp-R {\n margin-right: auto;\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_label__Hpp-R span {\n --current-line-height: 1;\n font-weight: var(--swui-collapsible-header-font-weight);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentLeft__2gPpu,\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentRight__bTr59 {\n display: -webkit-flex;\n display: flex;\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentLeft__2gPpu button, .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentRight__bTr59 button {\n cursor: pointer;\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentLeft__2gPpu {\n margin-right: var(--swui-collapsible-header-content-margin);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentRight__bTr59 {\n margin-left: auto;\n }\n\n /* Content */\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_content__1e1C8 {\n display: -webkit-flex;\n display: flex;\n -webkit-align-items: center;\n align-items: center;\n -webkit-justify-content: stretch;\n justify-content: stretch;\n background: var(--swui-collapsible-content-background-color);\n padding: var(--swui-collapsible-content-padding);\n min-height: var(--swui-collapsible-min-height);\n box-sizing: border-box;\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_content__1e1C8:last-child {\n border-bottom: 1px solid var(--swui-collapsible-content-border-color);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_content__1e1C8.Collapsible-module_groupHeading__3BK-5 {\n border: none;\n font-size: var(--swui-collapsible-groupheading-font-size);\n font-family: var(--swui-font-primary);\n color: var(--swui-collapsible-groupheading-text-color);\n text-transform: uppercase;\n font-weight: 600;\n letter-spacing: 1px;\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_content__1e1C8 [data-hidden=\"true\"] {\n display: none;\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_content__1e1C8:hover [data-hidden=\"true\"] {\n display: inherit;\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_content__1e1C8:hover [data-hover=\"true\"] {\n color: var(--swui-collapsible-header-indicator-color-hover);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentEnter__GWHoW {\n opacity: 0;\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentEnterActive__1YdNi {\n opacity: 1;\n transition: opacity var(--swui-collapsible-animation-time) ease-in-out;\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_contentExitDone__35Iht {\n display: none;\n }\n\n /** Clickable content */\n\n .Collapsible-module_collapsible__2Nn8K button.Collapsible-module_content__1e1C8 {\n font-family: var(--swui-font-primary);\n font-size: inherit;\n width: 100%;\n text-align: left;\n }\n\n .Collapsible-module_collapsible__2Nn8K button.Collapsible-module_content__1e1C8:focus-visible {\n outline: 1px solid var(--swui-collapsible-header-border-color-focus);\n outline-offset: -1px;\n box-shadow: var(--swui-collapsible-header-focus-shadow);\n }\n\n .Collapsible-module_collapsible__2Nn8K button.Collapsible-module_content__1e1C8:not(:disabled):hover {\n background-color: var(--swui-collapsible-header-background-color-hover);\n }\n\n .Collapsible-module_collapsible__2Nn8K button.Collapsible-module_content__1e1C8:disabled {\n cursor: not-allowed;\n }\n\n .Collapsible-module_collapsible__2Nn8K button.Collapsible-module_content__1e1C8:focus-within [data-hidden=\"true\"] {\n display: inherit;\n }\n\n /* Remove header background color if not at the highest level */\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K {\n --swui-collapsible-header-background-color: var(\n --swui-collapsible-content-background-color\n );\n --swui-collapsible-header-font-weight: normal;\n }\n\n /* Increase padding with depth */\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K {\n --swui-collapsible-content-padding: var(--swui-metrics-indent)\n calc(var(--swui-metrics-indent) * 2) var(--swui-metrics-indent)\n calc(var(--swui-metrics-indent) * 4);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K {\n --swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0\n calc(var(--swui-metrics-indent) * 4);\n --swui-collapsible-content-padding: var(--swui-metrics-indent)\n calc(var(--swui-metrics-indent) * 2) var(--swui-metrics-indent)\n calc(var(--swui-metrics-indent) * 6);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K {\n --swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0\n calc(var(--swui-metrics-indent) * 6);\n --swui-collapsible-content-padding: var(--swui-metrics-indent)\n calc(var(--swui-metrics-indent) * 2) var(--swui-metrics-indent)\n calc(var(--swui-metrics-indent) * 8);\n }\n\n .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K .Collapsible-module_collapsible__2Nn8K {\n --swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0\n calc(var(--swui-metrics-indent) * 8);\n --swui-collapsible-content-padding: var(--swui-metrics-indent)\n calc(var(--swui-metrics-indent) * 2) var(--swui-metrics-indent)\n calc(var(--swui-metrics-indent) * 10);\n }\n";
|
|
280
281
|
var styles$4 = {"collapsible":"Collapsible-module_collapsible__2Nn8K","header":"Collapsible-module_header__IZx0y","indicator":"Collapsible-module_indicator__3YBhK","label":"Collapsible-module_label__Hpp-R","contentLeft":"Collapsible-module_contentLeft__2gPpu","contentRight":"Collapsible-module_contentRight__bTr59","content":"Collapsible-module_content__1e1C8","groupHeading":"Collapsible-module_groupHeading__3BK-5","contentEnter":"Collapsible-module_contentEnter__GWHoW","contentEnterActive":"Collapsible-module_contentEnterActive__1YdNi","contentExitDone":"Collapsible-module_contentExitDone__35Iht"};
|
|
281
|
-
styleInject(css_248z$
|
|
282
|
+
styleInject(css_248z$5);
|
|
282
283
|
|
|
283
284
|
var CollapsibleEmptyContent = function () {
|
|
284
|
-
return (createElement(Column, { indent: true, spacing: true, flex: 1, alignItems: "center" },
|
|
285
|
-
createElement(Icon, { icon: faInbox, color: cssColor("--lhds-color-ui-500") }),
|
|
286
|
-
createElement(Space, null),
|
|
287
|
-
createElement(Text, { size: "small", color: cssColor("--lhds-color-ui-500") }, "No content")));
|
|
285
|
+
return (React.createElement(Column, { indent: true, spacing: true, flex: 1, alignItems: "center" },
|
|
286
|
+
React.createElement(Icon, { icon: faInbox, color: cssColor("--lhds-color-ui-500") }),
|
|
287
|
+
React.createElement(Space, null),
|
|
288
|
+
React.createElement(Text, { size: "small", color: cssColor("--lhds-color-ui-500") }, "No content")));
|
|
288
289
|
};
|
|
289
290
|
|
|
290
291
|
var CollapsibleContent = function (_a) {
|
|
291
292
|
var contentLeft = _a.contentLeft, contentRight = _a.contentRight, className = _a.className, children = _a.children, props = __rest(_a, ["contentLeft", "contentRight", "className", "children"]);
|
|
292
|
-
return (createElement("div", __assign({ className: cx(styles$4.content, className) }, props),
|
|
293
|
-
contentLeft && createElement("div", { className: styles$4.contentLeft }, contentLeft), children !== null && children !== void 0 ? children : createElement(CollapsibleEmptyContent, null),
|
|
294
|
-
contentRight && (createElement("div", { className: styles$4.contentRight }, contentRight))));
|
|
293
|
+
return (React.createElement("div", __assign({ className: cx(styles$4.content, className) }, props),
|
|
294
|
+
contentLeft && React.createElement("div", { className: styles$4.contentLeft }, contentLeft), children !== null && children !== void 0 ? children : React.createElement(CollapsibleEmptyContent, null),
|
|
295
|
+
contentRight && (React.createElement("div", { className: styles$4.contentRight }, contentRight))));
|
|
295
296
|
};
|
|
296
297
|
|
|
297
298
|
var mapCSSTime = function (value) {
|
|
@@ -308,18 +309,18 @@ var mapCSSTime = function (value) {
|
|
|
308
309
|
};
|
|
309
310
|
var Collapsible = forwardRef(function Collapsible(_a, ref) {
|
|
310
311
|
var label = _a.label, contentLeft = _a.contentLeft, contentRight = _a.contentRight, _b = _a.collapsed, collapsed = _b === void 0 ? false : _b, onClick = _a.onClick, className = _a.className, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.unmountOnCollapse, unmountOnCollapse = _d === void 0 ? false : _d, _e = _a.mountOnEnter, mountOnEnter = _e === void 0 ? true : _e, _f = _a.icon, icon = _f === void 0 ? faChevronUp : _f, _g = _a.iconCollapsed, iconCollapsed = _g === void 0 ? faChevronDown : _g, _h = _a.iconSize, iconSize = _h === void 0 ? 8 : _h, children = _a.children, _j = _a.autoFocus, autoFocus = _j === void 0 ? false : _j, divProps = __rest(_a, ["label", "contentLeft", "contentRight", "collapsed", "onClick", "className", "disabled", "unmountOnCollapse", "mountOnEnter", "icon", "iconCollapsed", "iconSize", "children", "autoFocus"]);
|
|
311
|
-
var divRef = useRef(null);
|
|
312
|
+
var divRef = React.useRef(null);
|
|
312
313
|
var timeout = divRef.current
|
|
313
314
|
? mapCSSTime(getComputedStyle(divRef.current).getPropertyValue("--swui-collapsible-animation-time"))
|
|
314
315
|
: undefined;
|
|
315
|
-
return (createElement("div", __assign({ className: cx(styles$4.collapsible, className), "aria-expanded": !collapsed, ref: divRef }, divProps),
|
|
316
|
-
createElement(Clickable, { disableFocusHighlight: true, disableOpacityOnClick: true, className: styles$4.header, onClick: onClick, disabled: disabled, autoFocus: autoFocus, ref: ref },
|
|
317
|
-
contentLeft && (createElement("div", { className: styles$4.contentLeft }, contentLeft)),
|
|
318
|
-
createElement("div", { className: styles$4.label },
|
|
319
|
-
createElement(Text, { color: "var(--swui-collapsible-header-text-color)" }, label)),
|
|
320
|
-
contentRight && (createElement("div", { className: styles$4.contentRight }, contentRight)),
|
|
321
|
-
createElement(Icon, { icon: collapsed ? iconCollapsed : icon, className: styles$4.indicator, size: iconSize, fixedWidth: true })),
|
|
322
|
-
createElement(CSSTransition, { in: !collapsed, timeout: {
|
|
316
|
+
return (React.createElement("div", __assign({ className: cx(styles$4.collapsible, className), "aria-expanded": !collapsed, ref: divRef }, divProps),
|
|
317
|
+
React.createElement(Clickable, { disableFocusHighlight: true, disableOpacityOnClick: true, className: styles$4.header, onClick: onClick, disabled: disabled, autoFocus: autoFocus, ref: ref },
|
|
318
|
+
contentLeft && (React.createElement("div", { className: styles$4.contentLeft }, contentLeft)),
|
|
319
|
+
React.createElement("div", { className: styles$4.label },
|
|
320
|
+
React.createElement(Text, { color: "var(--swui-collapsible-header-text-color)" }, label)),
|
|
321
|
+
contentRight && (React.createElement("div", { className: styles$4.contentRight }, contentRight)),
|
|
322
|
+
React.createElement(Icon, { icon: collapsed ? iconCollapsed : icon, className: styles$4.indicator, size: iconSize, fixedWidth: true })),
|
|
323
|
+
React.createElement(CSSTransition, { in: !collapsed, timeout: {
|
|
323
324
|
enter: timeout,
|
|
324
325
|
}, classNames: {
|
|
325
326
|
enter: styles$4.contentEnter,
|
|
@@ -328,138 +329,138 @@ var Collapsible = forwardRef(function Collapsible(_a, ref) {
|
|
|
328
329
|
exitActive: styles$4.contentExitActive,
|
|
329
330
|
exitDone: styles$4.contentExitDone,
|
|
330
331
|
}, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnCollapse },
|
|
331
|
-
createElement("div", { role: "region" }, children !== null && children !== void 0 ? children : (createElement(CollapsibleContent, null,
|
|
332
|
-
createElement(CollapsibleEmptyContent, null)))))));
|
|
332
|
+
React.createElement("div", { role: "region" }, children !== null && children !== void 0 ? children : (React.createElement(CollapsibleContent, null,
|
|
333
|
+
React.createElement(CollapsibleEmptyContent, null)))))));
|
|
333
334
|
});
|
|
334
335
|
|
|
335
336
|
var CollapsibleWithCheckbox = function (_a) {
|
|
336
337
|
var value = _a.value, onValueChange = _a.onValueChange, onChange = _a.onChange, indeterminate = _a.indeterminate, collapsibleProps = __rest(_a, ["value", "onValueChange", "onChange", "indeterminate"]);
|
|
337
|
-
return (createElement(Collapsible, __assign({ contentLeft: createElement(Checkbox, { value: value, indeterminate: indeterminate, onValueChange: onValueChange, onChange: onChange, onClick: function (ev) { return ev.stopPropagation(); } }) }, collapsibleProps)));
|
|
338
|
+
return (React.createElement(Collapsible, __assign({ contentLeft: React.createElement(Checkbox, { value: value, indeterminate: indeterminate, onValueChange: onValueChange, onChange: onChange, onClick: function (ev) { return ev.stopPropagation(); } }) }, collapsibleProps)));
|
|
338
339
|
};
|
|
339
340
|
|
|
340
341
|
var CollapsibleClickableContent = function (_a) {
|
|
341
342
|
var contentLeft = _a.contentLeft, contentRight = _a.contentRight, className = _a.className, onClick = _a.onClick, children = _a.children, props = __rest(_a, ["contentLeft", "contentRight", "className", "onClick", "children"]);
|
|
342
|
-
return (createElement(Clickable, __assign({ disableFocusHighlight: true, disableOpacityOnClick: true, className: cx(styles$4.content, className), onClick: onClick }, props),
|
|
343
|
-
contentLeft && createElement("div", { className: styles$4.contentLeft }, contentLeft), children !== null && children !== void 0 ? children : createElement(CollapsibleEmptyContent, null),
|
|
344
|
-
contentRight && (createElement("div", { className: styles$4.contentRight }, contentRight))));
|
|
343
|
+
return (React.createElement(Clickable, __assign({ disableFocusHighlight: true, disableOpacityOnClick: true, className: cx(styles$4.content, className), onClick: onClick }, props),
|
|
344
|
+
contentLeft && React.createElement("div", { className: styles$4.contentLeft }, contentLeft), children !== null && children !== void 0 ? children : React.createElement(CollapsibleEmptyContent, null),
|
|
345
|
+
contentRight && (React.createElement("div", { className: styles$4.contentRight }, contentRight))));
|
|
345
346
|
};
|
|
346
347
|
|
|
347
348
|
var CollapsibleGroupHeading = function (_a) {
|
|
348
349
|
var className = _a.className, props = __rest(_a, ["className"]);
|
|
349
|
-
return (createElement(CollapsibleContent, __assign({ className: cx(styles$4.groupHeading, className) }, props)));
|
|
350
|
+
return (React.createElement(CollapsibleContent, __assign({ className: cx(styles$4.groupHeading, className) }, props)));
|
|
350
351
|
};
|
|
351
352
|
|
|
352
353
|
var ErrorPanel = function (_a) {
|
|
353
354
|
var _b = _a.text, text = _b === void 0 ? "Something unexpected happened." : _b;
|
|
354
|
-
return (createElement(Box, { justifyContent: "center", alignItems: "center" },
|
|
355
|
-
createElement(Banner, { variant: "error", headerText: text })));
|
|
355
|
+
return (React.createElement(Box, { justifyContent: "center", alignItems: "center" },
|
|
356
|
+
React.createElement(Banner, { variant: "error", headerText: text })));
|
|
356
357
|
};
|
|
357
358
|
|
|
358
359
|
var ErrorScreen = function (props) {
|
|
359
|
-
return (createElement(Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "center" },
|
|
360
|
-
createElement(ErrorPanel, __assign({}, props))));
|
|
360
|
+
return (React.createElement(Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "center" },
|
|
361
|
+
React.createElement(ErrorPanel, __assign({}, props))));
|
|
361
362
|
};
|
|
362
363
|
|
|
363
364
|
var LoadingPanel = function (_a) {
|
|
364
365
|
var _b = _a.text, text = _b === void 0 ? "Loading..." : _b;
|
|
365
|
-
return (createElement(Box, { alignItems: "center" },
|
|
366
|
-
createElement(Spinner, { size: "small" }),
|
|
367
|
-
createElement(Space, { num: 4 }),
|
|
368
|
-
createElement(Heading, { variant: "h4" }, text)));
|
|
366
|
+
return (React.createElement(Box, { alignItems: "center" },
|
|
367
|
+
React.createElement(Spinner, { size: "small" }),
|
|
368
|
+
React.createElement(Space, { num: 4 }),
|
|
369
|
+
React.createElement(Heading, { variant: "h4" }, text)));
|
|
369
370
|
};
|
|
370
371
|
|
|
371
372
|
var LoadingScreen = function (props) {
|
|
372
|
-
return (createElement(Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "center" },
|
|
373
|
-
createElement(LoadingPanel, __assign({}, props))));
|
|
373
|
+
return (React.createElement(Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "center" },
|
|
374
|
+
React.createElement(LoadingPanel, __assign({}, props))));
|
|
374
375
|
};
|
|
375
376
|
|
|
376
|
-
var css_248z$
|
|
377
|
-
var styles$
|
|
378
|
-
styleInject(css_248z$
|
|
377
|
+
var css_248z$4 = ".SidebarMenu-module_sidebarMenu__3IOkS {\n /* Theme vars */\n --swui-sidebar-menu-separator-color: var(--lhds-color-blue-700);\n --swui-sidebar-menu-text-color: var(--swui-white);\n --swui-sidebar-menu-icon-color: var(--swui-white);\n --swui-sidebar-menu-background-color: var(--lhds-color-blue-900);\n --swui-sidebar-menu-background-color-hover: var(--lhds-color-blue-800);\n --swui-sidebar-menu-background-color-active: var(--lhds-color-blue-800);\n --swui-sidebar-menu-item-selected: var(--lhds-color-blue-500);\n --swui-sidebar-menu-content-padding: var(--swui-metrics-indent)\n var(--swui-metrics-indent) var(--swui-metrics-indent) 0;\n\n /* Current */\n --current-separator-color: var(--swui-sidebar-menu-separator-color);\n --current-text-color: var(--swui-sidebar-menu-text-color);\n --current-icon-color: var(--swui-sidebar-menu-icon-color);\n --current-background-color: var(--swui-sidebar-menu-background-color);\n --current-background-color-hover: var(\n --swui-sidebar-menu-background-color-hover\n );\n --current-background-color-active: var(\n --swui-sidebar-menu-background-color-active\n );\n --current-item-selected: var(--swui-sidebar-menu-item-selected);\n --current-content-padding: var(--swui-sidebar-menu-content-padding);\n\n background-color: var(--current-background-color);\n\n height: 100vh;\n}\n\n .SidebarMenu-module_sidebarMenu__3IOkS button {\n --swui-button-text-color: var(--swui-white);\n --swui-button-background-color-hover: var(--lhds-color-blue-800);\n }\n";
|
|
378
|
+
var styles$3 = {"sidebarMenu":"SidebarMenu-module_sidebarMenu__3IOkS"};
|
|
379
|
+
styleInject(css_248z$4);
|
|
379
380
|
|
|
380
|
-
var css_248z$
|
|
381
|
-
var styles$
|
|
382
|
-
styleInject(css_248z$
|
|
381
|
+
var css_248z$3 = ".SidebarMenuCloseButton-module_sidebarMenuCloseButton__1h_pt {\n /* Theme vars */\n --swui-sidebar-menu-close-button-text-color: var(--lhds-color-ui-50);\n --swui-sidebar-menu-close-button-background-color: var(--lhds-color-blue-500);\n --swui-sidebar-menu-close-button-background-color-hover: var(\n --lhds-color-blue-600\n );\n --swui-sidebar-menu-close-button-background-color-focus: var(\n --lhds-color-blue-600\n );\n --swui-sidebar-menu-close-button-background-color-active: var(\n --lhds-color-blue-500\n );\n --swui-sidebar-menu-close-button-background-dark-color: var(\n --lhds-color-blue-900\n );\n --swui-sidebar-menu-close-button-background-dark-color-hover: var(\n --lhds-color-blue-700\n );\n --swui-sidebar-menu-close-button-background-dark-color-focus: var(\n --lhds-color-blue-700\n );\n --swui-sidebar-menu-close-button-background-dark-color-active: var(\n --lhds-color-blue-600\n );\n\n /* Current */\n --current-background-color: var(\n --swui-sidebar-menu-close-button-background-color\n );\n\n /* Styling */\n\n display: -webkit-flex;\n\n display: flex;\n -webkit-align-items: center;\n align-items: center;\n -webkit-justify-content: center;\n justify-content: center;\n line-height: 10px;\n background-color: var(--current-background-color);\n color: var(--swui-sidebar-menu-close-button-text-color);\n cursor: pointer;\n height: 64px;\n width: 64px;\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n border-radius: 0;\n outline: none;\n border: none;\n}\n\n .SidebarMenuCloseButton-module_sidebarMenuCloseButton__1h_pt.SidebarMenuCloseButton-module_light__2cy3r {\n --current-background-color: var(\n --swui-sidebar-menu-close-button-background-color\n );\n }\n\n .SidebarMenuCloseButton-module_sidebarMenuCloseButton__1h_pt.SidebarMenuCloseButton-module_light__2cy3r:hover {\n --current-background-color: var(\n --swui-sidebar-menu-close-button-background-color-hover\n );\n }\n\n .SidebarMenuCloseButton-module_sidebarMenuCloseButton__1h_pt.SidebarMenuCloseButton-module_light__2cy3r:focus {\n --current-background-color: var(\n --swui-sidebar-menu-close-button-background-color-focus\n );\n }\n\n .SidebarMenuCloseButton-module_sidebarMenuCloseButton__1h_pt.SidebarMenuCloseButton-module_light__2cy3r:active {\n --current-background-color: var(\n --swui-sidebar-menu-close-button-background-color-active\n );\n }\n\n .SidebarMenuCloseButton-module_sidebarMenuCloseButton__1h_pt.SidebarMenuCloseButton-module_dark__2Illi {\n --current-background-color: var(\n --swui-sidebar-menu-close-button-background-dark-color\n );\n }\n\n .SidebarMenuCloseButton-module_sidebarMenuCloseButton__1h_pt.SidebarMenuCloseButton-module_dark__2Illi:hover {\n --current-background-color: var(\n --swui-sidebar-menu-close-button-background-dark-color-hover\n );\n }\n\n .SidebarMenuCloseButton-module_sidebarMenuCloseButton__1h_pt.SidebarMenuCloseButton-module_dark__2Illi:focus {\n --current-background-color: var(\n --swui-sidebar-menu-close-button-background-dark-color-focus\n );\n }\n\n .SidebarMenuCloseButton-module_sidebarMenuCloseButton__1h_pt.SidebarMenuCloseButton-module_dark__2Illi:active {\n --current-background-color: var(\n --swui-sidebar-menu-close-button-background-dark-color-active\n );\n }\n\n .SidebarMenuCloseButton-module_sidebarMenuCloseButton__1h_pt .SidebarMenuCloseButton-module_icon__1lPJE {\n color: var(--swui-sidebar-menu-close-button-text-color);\n }\n";
|
|
382
|
+
var styles$2 = {"sidebarMenuCloseButton":"SidebarMenuCloseButton-module_sidebarMenuCloseButton__1h_pt","light":"SidebarMenuCloseButton-module_light__2cy3r","dark":"SidebarMenuCloseButton-module_dark__2Illi","icon":"SidebarMenuCloseButton-module_icon__1lPJE"};
|
|
383
|
+
styleInject(css_248z$3);
|
|
383
384
|
|
|
384
|
-
function _extends
|
|
385
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
385
386
|
|
|
386
|
-
var _ref
|
|
387
|
+
var _ref = /*#__PURE__*/React.createElement("g", {
|
|
387
388
|
fill: "#FFF",
|
|
388
389
|
fillRule: "evenodd"
|
|
389
|
-
}, /*#__PURE__*/createElement("path", {
|
|
390
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
390
391
|
d: "M18.364 19.778L4.222 5.636c.085.085.105-.105 0 0l1.414-1.414c-.105.105.085.085 0 0l14.142 14.142c-.085-.085-.105.105 0 0l-1.414 1.414c.105-.105-.085-.085 0 0z"
|
|
391
|
-
}), /*#__PURE__*/createElement("path", {
|
|
392
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
392
393
|
d: "M19.778 5.636L5.636 19.778c.085-.085-.105-.105 0 0l-1.414-1.414c.105.105.085-.085 0 0L18.364 4.222c-.085.085.105.105 0 0l1.414 1.414c-.105-.105-.085.085 0 0z"
|
|
393
394
|
}));
|
|
394
395
|
|
|
395
396
|
function SvgClose(props) {
|
|
396
|
-
return /*#__PURE__*/createElement("svg", _extends
|
|
397
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
397
398
|
xmlns: "http://www.w3.org/2000/svg",
|
|
398
399
|
width: 24,
|
|
399
400
|
height: 24
|
|
400
|
-
}, props), _ref
|
|
401
|
+
}, props), _ref);
|
|
401
402
|
}
|
|
402
403
|
|
|
403
404
|
var SidebarMenuCloseButton = function (_a) {
|
|
404
405
|
var className = _a.className, onClick = _a.onClick, _b = _a.variant, variant = _b === void 0 ? "light" : _b;
|
|
405
|
-
return (createElement("button", { onClick: onClick, className: cx(styles$
|
|
406
|
-
createElement(SvgClose, { className: styles$
|
|
406
|
+
return (React.createElement("button", { onClick: onClick, className: cx(styles$2.sidebarMenuCloseButton, className, styles$2[variant]) },
|
|
407
|
+
React.createElement(SvgClose, { className: styles$2.icon })));
|
|
407
408
|
};
|
|
408
409
|
|
|
409
410
|
// TODO Add variant
|
|
410
411
|
var SidebarMenu = function (_a) {
|
|
411
412
|
var className = _a.className, children = _a.children, onCloseClick = _a.onCloseClick, boxProps = __rest(_a, ["className", "children", "onCloseClick"]);
|
|
412
|
-
return (createElement(Box, __assign({ className: cx(styles$
|
|
413
|
-
createElement(Box, { alignItems: "flex-start", justifyContent: "center" },
|
|
414
|
-
createElement(SidebarMenuCloseButton, { onClick: onCloseClick, variant: "dark" })),
|
|
415
|
-
createElement(SeparatorLine, { color: cssColor("--lhds-color-blue-700") }),
|
|
416
|
-
createElement(Space, null),
|
|
417
|
-
createElement(Box, { className: styles$
|
|
418
|
-
createElement(Column, { flexGrow: 1 }, children))));
|
|
413
|
+
return (React.createElement(Box, __assign({ className: cx(styles$3.sidebarMenu, className) }, boxProps),
|
|
414
|
+
React.createElement(Box, { alignItems: "flex-start", justifyContent: "center" },
|
|
415
|
+
React.createElement(SidebarMenuCloseButton, { onClick: onCloseClick, variant: "dark" })),
|
|
416
|
+
React.createElement(SeparatorLine, { color: cssColor("--lhds-color-blue-700") }),
|
|
417
|
+
React.createElement(Space, null),
|
|
418
|
+
React.createElement(Box, { className: styles$3.sidebarMenuContent, background: "var(--swui-sidebar-menu-background-color)" },
|
|
419
|
+
React.createElement(Column, { flexGrow: 1 }, children))));
|
|
419
420
|
};
|
|
420
421
|
|
|
421
|
-
var css_248z$
|
|
422
|
-
var styles$
|
|
423
|
-
styleInject(css_248z$
|
|
422
|
+
var css_248z$2 = ".SidebarMenuHeading-module_sidebarMenuHeading__2Z8R_ {\n --swui-sidebar-menu-heading-text-color: var(--lhds-color-ui-300);\n\n /* Styling */\n\n text-transform: uppercase;\n}\n";
|
|
423
|
+
var styles$1 = {"sidebarMenuHeading":"SidebarMenuHeading-module_sidebarMenuHeading__2Z8R_"};
|
|
424
|
+
styleInject(css_248z$2);
|
|
424
425
|
|
|
425
426
|
var SidebarMenuHeading = function (_a) {
|
|
426
|
-
|
|
427
|
-
return (createElement(Box, { spacing: 2, indent: 2 },
|
|
428
|
-
createElement(CollapsibleContent, { className: styles$
|
|
429
|
-
createElement(Text, __assign({ variant: "overline", color: "var(--swui-sidebar-menu-heading-text-color)" }, textProps), label))));
|
|
427
|
+
_a.className; var label = _a.label, contentLeft = _a.contentLeft, contentRight = _a.contentRight, textProps = __rest(_a, ["className", "label", "contentLeft", "contentRight"]);
|
|
428
|
+
return (React.createElement(Box, { spacing: 2, indent: 2 },
|
|
429
|
+
React.createElement(CollapsibleContent, { className: styles$1.sidebarMenuHeading, contentLeft: contentLeft, contentRight: contentRight },
|
|
430
|
+
React.createElement(Text, __assign({ variant: "overline", color: "var(--swui-sidebar-menu-heading-text-color)" }, textProps), label))));
|
|
430
431
|
};
|
|
431
432
|
|
|
432
|
-
var css_248z$
|
|
433
|
+
var css_248z$1 = ".SidebarMenuContent-module_label__3NyDU {\n font-size: var(--current-text-size, var(--swui-button-text-size));\n line-height: var(--current-line-height, var(--swui-button-line-height));\n font-weight: var(--swui-button-font-weight);\n font-family: var(--swui-font-buttons);\n color: var(--swui-sidebar-menu-text-color);\n}\n\n.SidebarMenuContent-module_icon__1kQOa {\n color: var(--swui-sidebar-menu-text-color);\n}\n\n.SidebarMenuContent-module_spinner__K0lsy {\n color: var(--swui-sidebar-menu-text-color);\n}\n\n.SidebarMenuContent-module_leftWrapper__2sA9a.SidebarMenuContent-module_leftWrapper__2sA9a.SidebarMenuContent-module_leftWrapper__2sA9a.SidebarMenuContent-module_leftWrapper__2sA9a {\n width: 56px;\n margin-right: 0;\n}\n";
|
|
433
434
|
var contentStyles = {"label":"SidebarMenuContent-module_label__3NyDU","icon":"SidebarMenuContent-module_icon__1kQOa","spinner":"SidebarMenuContent-module_spinner__K0lsy","leftWrapper":"SidebarMenuContent-module_leftWrapper__2sA9a"};
|
|
434
|
-
styleInject(css_248z$
|
|
435
|
+
styleInject(css_248z$1);
|
|
435
436
|
|
|
436
437
|
var selectedBorder = "4px solid var(--swui-sidebar-menu-item-selected)";
|
|
437
438
|
var SidebarMenuLink = function (_a) {
|
|
438
|
-
|
|
439
|
+
_a.className; _a.children; var selected = _a.selected, indent = _a.indent, label = _a.label, loading = _a.loading, left = _a.left, leftIcon = _a.leftIcon, right = _a.right, rightIcon = _a.rightIcon, success = _a.success, clickableProps = __rest(_a, ["className", "children", "selected", "indent", "label", "loading", "left", "leftIcon", "right", "rightIcon", "success"]);
|
|
439
440
|
var hasContentLeft = left || leftIcon || loading || success;
|
|
440
|
-
return (createElement(Clickable, __assign({ background: "var(--swui-sidebar-menu-background-color)", hoverBackground: "var(--swui-sidebar-menu-background-color-hover)", style: { borderRight: selected ? selectedBorder : undefined } }, clickableProps),
|
|
441
|
-
createElement(Row, { spacing: 1, flex: 1, alignItems: "center", height: "40px" },
|
|
442
|
-
!hasContentLeft && createElement(Indent, null),
|
|
443
|
-
indent && createElement(Indent, { num: 3.5 }),
|
|
444
|
-
createElement(ButtonContent, { label: label, loading: loading, left: left, leftIcon: leftIcon, right: right, rightIcon: rightIcon, success: success, labelClassName: contentStyles.label, spinnerClassName: contentStyles.spinner, iconClassName: contentStyles.icon, leftWrapperClassName: contentStyles.leftWrapper }))));
|
|
441
|
+
return (React.createElement(Clickable, __assign({ background: "var(--swui-sidebar-menu-background-color)", hoverBackground: "var(--swui-sidebar-menu-background-color-hover)", style: { borderRight: selected ? selectedBorder : undefined } }, clickableProps),
|
|
442
|
+
React.createElement(Row, { spacing: 1, flex: 1, alignItems: "center", height: "40px" },
|
|
443
|
+
!hasContentLeft && React.createElement(Indent, null),
|
|
444
|
+
indent && React.createElement(Indent, { num: 3.5 }),
|
|
445
|
+
React.createElement(ButtonContent, { label: label, loading: loading, left: left, leftIcon: leftIcon, right: right, rightIcon: rightIcon, success: success, labelClassName: contentStyles.label, spinnerClassName: contentStyles.spinner, iconClassName: contentStyles.icon, leftWrapperClassName: contentStyles.leftWrapper }))));
|
|
445
446
|
};
|
|
446
447
|
|
|
447
|
-
var css_248z
|
|
448
|
-
var styles
|
|
449
|
-
styleInject(css_248z
|
|
448
|
+
var css_248z = ".SidebarMenuCollapsible-module_sidebarMenuCollapsible__3g5N3 {\n --swui-collapsible-header-text-color: var(--swui-sidebar-menu-text-color);\n --swui-collapsible-header-background-color: var(\n --swui-sidebar-menu-background-color\n );\n --swui-collapsible-header-background-color-hover: var(\n --swui-sidebar-menu-background-color-hover\n );\n --swui-collapsible-header-background-color-active: var(\n --swui-sidebar-menu-background-color-active\n );\n --swui-collapsible-header-indicator-color: var(\n --swui-sidebar-menu-text-color\n );\n --swui-collapsible-header-indicator-color-collapsed: var(\n --swui-sidebar-menu-text-color\n );\n --swui-collapsible-header-indicator-color-hover: var(\n --swui-sidebar-menu-text-color\n );\n --swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0 0;\n --swui-collapsible-header-content-margin: 0;\n --swui-collapsible-collapsible-link-padding: var(--swui-metrics-indent)\n var(--swui-metrics-indent) var(--swui-metrics-indent)\n calc(var(--swui-metrics-indent) * 4);\n --swui-collapsible-header-border-color: transparent;\n}\n";
|
|
449
|
+
var styles = {"sidebarMenuCollapsible":"SidebarMenuCollapsible-module_sidebarMenuCollapsible__3g5N3"};
|
|
450
|
+
styleInject(css_248z);
|
|
450
451
|
|
|
451
452
|
var SidebarMenuCollapsible = function (_a) {
|
|
452
453
|
var children = _a.children, label = _a.label, leftIcon = _a.leftIcon;
|
|
453
454
|
var _b = useState(false), collapsed = _b[0], setCollapsed = _b[1];
|
|
454
|
-
return (createElement(Box, { background: "var(--swui-sidebar-menu-background-color)" },
|
|
455
|
-
createElement(Collapsible, { className: styles
|
|
456
|
-
createElement(Icon, { icon: leftIcon, size: 18, color: "var(--swui-sidebar-menu-text-color)", "data-hover": true }))) : (createElement(Indent, { num: 1 })) },
|
|
457
|
-
createElement(Column, { flex: 1 }, children))));
|
|
455
|
+
return (React.createElement(Box, { background: "var(--swui-sidebar-menu-background-color)" },
|
|
456
|
+
React.createElement(Collapsible, { className: styles.sidebarMenuCollapsible, label: label, collapsed: collapsed, onClick: function () { return setCollapsed(!collapsed); }, contentLeft: leftIcon ? (React.createElement(Box, { width: "56px", alignItems: "center", justifyContent: "center" },
|
|
457
|
+
React.createElement(Icon, { icon: leftIcon, size: 18, color: "var(--swui-sidebar-menu-text-color)", "data-hover": true }))) : (React.createElement(Indent, { num: 1 })) },
|
|
458
|
+
React.createElement(Column, { flex: 1 }, children))));
|
|
458
459
|
};
|
|
459
460
|
|
|
460
461
|
var SidebarMenuSeparator = function (separatorLineProps) {
|
|
461
|
-
return (createElement(Spacing, null,
|
|
462
|
-
createElement(SeparatorLine, __assign({ color: cssColor("--lhds-color-blue-700") }, separatorLineProps))));
|
|
462
|
+
return (React.createElement(Spacing, null,
|
|
463
|
+
React.createElement(SeparatorLine, __assign({ color: cssColor("--lhds-color-blue-700") }, separatorLineProps))));
|
|
463
464
|
};
|
|
464
465
|
|
|
465
466
|
export { ActionMenuFlatButton, ActionMenuPrimaryButton, ActionMenuSecondaryButton, CheckboxMenu, Collapsible, CollapsibleClickableContent, CollapsibleContent, CollapsibleEmptyContent, CollapsibleGroupHeading, CollapsibleWithCheckbox, ErrorPanel, ErrorScreen, LoadingPanel, LoadingScreen, NavBar, NavBarButton, NavBarHeading, NavBarPopoverButton, NavBarSearchField, Notification, SidebarMenu, SidebarMenuCollapsible, SidebarMenuHeading, SidebarMenuLink, SidebarMenuSeparator, defaultNotificationTheme, mapCSSTime };
|