@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.js
CHANGED
|
@@ -18,6 +18,25 @@ var faInbox = require('@fortawesome/free-solid-svg-icons/faInbox');
|
|
|
18
18
|
|
|
19
19
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
20
20
|
|
|
21
|
+
function _interopNamespace(e) {
|
|
22
|
+
if (e && e.__esModule) return e;
|
|
23
|
+
var n = Object.create(null);
|
|
24
|
+
if (e) {
|
|
25
|
+
Object.keys(e).forEach(function (k) {
|
|
26
|
+
if (k !== 'default') {
|
|
27
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
28
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
29
|
+
enumerable: true,
|
|
30
|
+
get: function () { return e[k]; }
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
n["default"] = e;
|
|
36
|
+
return Object.freeze(n);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
21
40
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
22
41
|
|
|
23
42
|
/*! *****************************************************************************
|
|
@@ -103,34 +122,34 @@ var ActionMenuButton = function (_a) {
|
|
|
103
122
|
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
104
123
|
toggle();
|
|
105
124
|
};
|
|
106
|
-
return (
|
|
107
|
-
|
|
108
|
-
|
|
125
|
+
return (React__namespace.createElement(tooltip.Popover, { disablePadding: true, visible: isOpen, onClickOutside: close, placement: placement, content: isOpen && (React__namespace.createElement(elements.ActionMenu, { variant: "outlined", width: menuWidth, top: menuTop, trapFocus: true },
|
|
126
|
+
React__namespace.createElement(elements.ActionMenuContext.Provider, { value: contextValue }, renderItems(close)))), arrow: false, appendTo: portalTarget, zIndex: zIndex, plugins: [focusManager], lazy: true },
|
|
127
|
+
React__namespace.createElement(Button, __assign({ rightIcon: rightIcon }, buttonProps, { ref: buttonRef, onClick: handleClick }))));
|
|
109
128
|
};
|
|
110
129
|
|
|
111
130
|
var ActionMenuPrimaryButton = function (props) {
|
|
112
|
-
return
|
|
131
|
+
return React__namespace.createElement(ActionMenuButton, __assign({ buttonComponent: elements.PrimaryButton }, props));
|
|
113
132
|
};
|
|
114
133
|
|
|
115
134
|
var ActionMenuSecondaryButton = function (props) {
|
|
116
|
-
return
|
|
135
|
+
return React__namespace.createElement(ActionMenuButton, __assign({ buttonComponent: elements.SecondaryButton }, props));
|
|
117
136
|
};
|
|
118
137
|
|
|
119
138
|
var ActionMenuFlatButton = function (props) {
|
|
120
|
-
return
|
|
139
|
+
return React__namespace.createElement(ActionMenuButton, __assign({ buttonComponent: elements.FlatButton }, props));
|
|
121
140
|
};
|
|
122
141
|
|
|
123
142
|
var border = "1px solid var(--lhds-color-ui-300)";
|
|
124
143
|
var CheckboxMenu = function (_a) {
|
|
125
144
|
var renderMenu = _a.renderMenu, checkboxProps = __rest(_a, ["renderMenu"]);
|
|
126
145
|
var _b = core.useBoolean(false), isOpen = _b[0], open = _b[1], close = _b[2];
|
|
127
|
-
return (
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
146
|
+
return (React__namespace.createElement(tooltip.Popover, { onClickOutside: close, arrow: false, visible: isOpen, disablePadding: true, content: renderMenu ? (React__namespace.createElement(core.Column, null,
|
|
147
|
+
React__namespace.createElement(elements.ActionMenu, null, renderMenu(close)))) : undefined, placement: "bottom-start", variant: "outlined" },
|
|
148
|
+
React__namespace.createElement(core.Box, { display: "inline-block" },
|
|
149
|
+
React__namespace.createElement(core.Row, { spacing: 0.5, indent: true, alignItems: "center", border: border, borderRadius: "4px" },
|
|
150
|
+
React__namespace.createElement(forms.Checkbox, __assign({}, checkboxProps)),
|
|
151
|
+
React__namespace.createElement(core.Indent, { num: 0.5 }),
|
|
152
|
+
React__namespace.createElement(elements.FlatButton, { size: "small", onClick: open, leftIcon: faAngleDown.faAngleDown })))));
|
|
134
153
|
};
|
|
135
154
|
|
|
136
155
|
function styleInject(css, ref) {
|
|
@@ -160,34 +179,34 @@ function styleInject(css, ref) {
|
|
|
160
179
|
}
|
|
161
180
|
}
|
|
162
181
|
|
|
163
|
-
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";
|
|
164
|
-
var styles = {"navBar":"NavBar-module_navBar__HOrS3","dark":"NavBar-module_dark__fYBgM"};
|
|
165
|
-
styleInject(css_248z);
|
|
182
|
+
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";
|
|
183
|
+
var styles$8 = {"navBar":"NavBar-module_navBar__HOrS3","dark":"NavBar-module_dark__fYBgM"};
|
|
184
|
+
styleInject(css_248z$9);
|
|
166
185
|
|
|
167
|
-
var css_248z$
|
|
168
|
-
var styles$
|
|
169
|
-
styleInject(css_248z$
|
|
186
|
+
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";
|
|
187
|
+
var styles$7 = {"sidebarMenuButton":"NavBarSideMenuButton-module_sidebarMenuButton__SlbsU","light":"NavBarSideMenuButton-module_light__2LbsW","dark":"NavBarSideMenuButton-module_dark__QlRe8","icon":"NavBarSideMenuButton-module_icon__Art-L"};
|
|
188
|
+
styleInject(css_248z$8);
|
|
170
189
|
|
|
171
|
-
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); }
|
|
190
|
+
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); }
|
|
172
191
|
|
|
173
|
-
var _ref = /*#__PURE__*/
|
|
192
|
+
var _ref$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
174
193
|
fill: "#FFF",
|
|
175
194
|
fillRule: "evenodd",
|
|
176
195
|
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"
|
|
177
196
|
});
|
|
178
197
|
|
|
179
198
|
function SvgBars(props) {
|
|
180
|
-
return /*#__PURE__*/
|
|
199
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
|
|
181
200
|
xmlns: "http://www.w3.org/2000/svg",
|
|
182
201
|
width: 24,
|
|
183
202
|
height: 24
|
|
184
|
-
}, props), _ref);
|
|
203
|
+
}, props), _ref$1);
|
|
185
204
|
}
|
|
186
205
|
|
|
187
206
|
var NavBarSideMenuButton = function (_a) {
|
|
188
207
|
var _b = _a.variant, variant = _b === void 0 ? "light" : _b, className = _a.className, onClick = _a.onClick;
|
|
189
|
-
return (
|
|
190
|
-
|
|
208
|
+
return (React__namespace.createElement("button", { onClick: onClick, className: cx__default["default"](styles$7.sidebarMenuButton, styles$7[variant], className) },
|
|
209
|
+
React__namespace.createElement(SvgBars, { className: styles$7.icon })));
|
|
191
210
|
};
|
|
192
211
|
|
|
193
212
|
var NavBarVariantContext = React.createContext("light");
|
|
@@ -196,57 +215,57 @@ var useNavBarVariant = function () { return React.useContext(NavBarVariantContex
|
|
|
196
215
|
var NavBar = function (_a) {
|
|
197
216
|
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;
|
|
198
217
|
var currentFlex = center ? 1 : undefined;
|
|
199
|
-
return (
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
showMenuButton ? (
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
left ? (
|
|
218
|
+
return (React__namespace.createElement(NavBarVariantContext.Provider, { value: variant },
|
|
219
|
+
React__namespace.createElement(core.Row, { height: height, minHeight: height, justifyContent: "space-between", className: cx__default["default"](styles$8.navBar, styles$8[variant], className) },
|
|
220
|
+
React__namespace.createElement(core.Row, { flex: currentFlex, justifyContent: "flex-start", alignItems: "center" },
|
|
221
|
+
showMenuButton ? (React__namespace.createElement(React__namespace.Fragment, null,
|
|
222
|
+
React__namespace.createElement(NavBarSideMenuButton, { variant: variant, onClick: onClickMenuButton }),
|
|
223
|
+
React__namespace.createElement(core.Indent, null))) : (React__namespace.createElement(core.Indent, { num: 2 })),
|
|
224
|
+
left ? (React__namespace.createElement(React__namespace.Fragment, null,
|
|
206
225
|
left,
|
|
207
|
-
|
|
208
|
-
children && (
|
|
209
|
-
|
|
210
|
-
index > 0 &&
|
|
226
|
+
React__namespace.createElement(core.Indent, { num: 2 }))) : (React__namespace.createElement(core.Indent, { num: 2 })),
|
|
227
|
+
children && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
228
|
+
React__namespace.createElement(core.Row, { justifyContent: "center", alignItems: "center" }, React__namespace.Children.map(children, function (child, index) { return (React__namespace.createElement(React__namespace.Fragment, null,
|
|
229
|
+
index > 0 && React__namespace.createElement(core.Indent, null),
|
|
211
230
|
child)); }))))),
|
|
212
|
-
center && (
|
|
213
|
-
|
|
231
|
+
center && (React__namespace.createElement(core.Row, { justifyContent: "center", alignItems: "center" }, center)),
|
|
232
|
+
React__namespace.createElement(core.Row, { justifyContent: "flex-end", alignItems: "center", flex: currentFlex },
|
|
214
233
|
right,
|
|
215
|
-
|
|
234
|
+
React__namespace.createElement(core.Indent, { num: 2 })))));
|
|
216
235
|
};
|
|
217
236
|
|
|
218
|
-
var css_248z$
|
|
219
|
-
var styles$
|
|
220
|
-
styleInject(css_248z$
|
|
237
|
+
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";
|
|
238
|
+
var styles$6 = {"navBarButton":"NavBarButton-module_navBarButton__3XKjB","light":"NavBarButton-module_light__3lWuW","dark":"NavBarButton-module_dark__2LCrl","selected":"NavBarButton-module_selected__1ReDE"};
|
|
239
|
+
styleInject(css_248z$7);
|
|
221
240
|
|
|
222
241
|
var NavBarButton = function (_a) {
|
|
223
242
|
var selected = _a.selected, className = _a.className, buttonProps = __rest(_a, ["selected", "className"]);
|
|
224
243
|
var variant = useNavBarVariant();
|
|
225
|
-
return (
|
|
244
|
+
return (React__namespace.createElement(elements.FlatButton, __assign({}, buttonProps, { className: cx__default["default"](styles$6.navBarButton, styles$6[variant], selected && styles$6.selected, className) })));
|
|
226
245
|
};
|
|
227
246
|
|
|
228
247
|
var NavBarHeading = function (headingProps) {
|
|
229
|
-
return
|
|
248
|
+
return React__namespace.createElement(core.Heading, __assign({ whiteSpace: "nowrap", color: "#fff" }, headingProps));
|
|
230
249
|
};
|
|
231
250
|
|
|
232
251
|
var NavBarPopoverButton = function (_a) {
|
|
233
252
|
var content = _a.content, children = _a.children, navBarButtonProps = __rest(_a, ["content", "children"]);
|
|
234
253
|
var _b = core.useBoolean(false), isOpen = _b[0], open = _b[1], close = _b[2];
|
|
235
|
-
return (
|
|
254
|
+
return (React__namespace.createElement(tooltip.Popover, { onClickOutside: close, triggerTarget: document.body, visible: isOpen, content: React__namespace.createElement(React__namespace.Fragment, null,
|
|
236
255
|
content && content({ close: close }),
|
|
237
256
|
children) },
|
|
238
|
-
|
|
257
|
+
React__namespace.createElement(NavBarButton, __assign({}, navBarButtonProps, { onClick: open }))));
|
|
239
258
|
};
|
|
240
259
|
|
|
241
|
-
var css_248z$
|
|
242
|
-
var styles$
|
|
243
|
-
styleInject(css_248z$
|
|
260
|
+
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";
|
|
261
|
+
var styles$5 = {"navBarSearchFieldInput":"NavBarSearchField-module_navBarSearchFieldInput__2kThv","navBarSearchField":"NavBarSearchField-module_navBarSearchField__kIe66","light":"NavBarSearchField-module_light__jSF_w","dark":"NavBarSearchField-module_dark__TNf65"};
|
|
262
|
+
styleInject(css_248z$6);
|
|
244
263
|
|
|
245
264
|
var NavBarSearchField = function (_a) {
|
|
246
265
|
var _b = _a.placeholder, placeholder = _b === void 0 ? "Search..." : _b, className = _a.className, wrapperClassName = _a.wrapperClassName, textInputProps = __rest(_a, ["placeholder", "className", "wrapperClassName"]);
|
|
247
266
|
var variant = useNavBarVariant();
|
|
248
|
-
return (
|
|
249
|
-
|
|
267
|
+
return (React__namespace.createElement(forms.TextInput, __assign({ wrapperClassName: cx__default["default"](styles$5.navBarSearchField, styles$5[variant], wrapperClassName), className: cx__default["default"](styles$5.navBarSearchFieldInput, className), placeholder: placeholder, contentRight: React__namespace.createElement(core.Clickable, null,
|
|
268
|
+
React__namespace.createElement(elements.Icon, { icon: elements.stenaSearch })) }, textInputProps)));
|
|
250
269
|
};
|
|
251
270
|
|
|
252
271
|
var defaultNotificationTheme = {
|
|
@@ -264,42 +283,42 @@ var Notification = function (_a) {
|
|
|
264
283
|
}
|
|
265
284
|
return undefined;
|
|
266
285
|
}, [date]);
|
|
267
|
-
return (
|
|
268
|
-
|
|
286
|
+
return (React__namespace.createElement(core.Clickable, { onClick: onClick, style: { textAlign: "left" } },
|
|
287
|
+
React__namespace.createElement(core.Box, { background: dismissed ? theme$1.notificationDismissedBg : theme$1.notificationBg, hoverBackground: dismissed
|
|
269
288
|
? theme$1.notificationDismissedHoverBg
|
|
270
289
|
: theme$1.notificationHoverBg, spacing: true, indent: true },
|
|
271
|
-
|
|
272
|
-
icon && (
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
title && (
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
text && (
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
content && (
|
|
290
|
+
React__namespace.createElement(core.Row, { width: "250px" },
|
|
291
|
+
icon && (React__namespace.createElement(core.Row, { width: "34px", alignItems: "center" },
|
|
292
|
+
React__namespace.createElement(elements.Icon, { icon: icon, color: iconColor }))),
|
|
293
|
+
React__namespace.createElement(core.Column, { flex: 1 },
|
|
294
|
+
title && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
295
|
+
React__namespace.createElement(core.Text, null, title),
|
|
296
|
+
React__namespace.createElement(core.Space, { half: true }))),
|
|
297
|
+
text && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
298
|
+
React__namespace.createElement(core.Text, { size: "small" }, text),
|
|
299
|
+
React__namespace.createElement(core.Space, { half: true }))),
|
|
300
|
+
content && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
282
301
|
content,
|
|
283
|
-
|
|
284
|
-
|
|
302
|
+
React__namespace.createElement(core.Space, { half: true }))),
|
|
303
|
+
React__namespace.createElement(core.Text, { size: "small", color: theme.cssColor("--swui-text-disabled-color") }, agoLabel))))));
|
|
285
304
|
};
|
|
286
305
|
|
|
287
|
-
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";
|
|
306
|
+
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";
|
|
288
307
|
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"};
|
|
289
|
-
styleInject(css_248z$
|
|
308
|
+
styleInject(css_248z$5);
|
|
290
309
|
|
|
291
310
|
var CollapsibleEmptyContent = function () {
|
|
292
|
-
return (
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
311
|
+
return (React__namespace.createElement(core.Column, { indent: true, spacing: true, flex: 1, alignItems: "center" },
|
|
312
|
+
React__namespace.createElement(elements.Icon, { icon: faInbox.faInbox, color: theme.cssColor("--lhds-color-ui-500") }),
|
|
313
|
+
React__namespace.createElement(core.Space, null),
|
|
314
|
+
React__namespace.createElement(core.Text, { size: "small", color: theme.cssColor("--lhds-color-ui-500") }, "No content")));
|
|
296
315
|
};
|
|
297
316
|
|
|
298
317
|
var CollapsibleContent = function (_a) {
|
|
299
318
|
var contentLeft = _a.contentLeft, contentRight = _a.contentRight, className = _a.className, children = _a.children, props = __rest(_a, ["contentLeft", "contentRight", "className", "children"]);
|
|
300
|
-
return (
|
|
301
|
-
contentLeft &&
|
|
302
|
-
contentRight && (
|
|
319
|
+
return (React__namespace.createElement("div", __assign({ className: cx__default["default"](styles$4.content, className) }, props),
|
|
320
|
+
contentLeft && React__namespace.createElement("div", { className: styles$4.contentLeft }, contentLeft), children !== null && children !== void 0 ? children : React__namespace.createElement(CollapsibleEmptyContent, null),
|
|
321
|
+
contentRight && (React__namespace.createElement("div", { className: styles$4.contentRight }, contentRight))));
|
|
303
322
|
};
|
|
304
323
|
|
|
305
324
|
var mapCSSTime = function (value) {
|
|
@@ -316,18 +335,18 @@ var mapCSSTime = function (value) {
|
|
|
316
335
|
};
|
|
317
336
|
var Collapsible = React.forwardRef(function Collapsible(_a, ref) {
|
|
318
337
|
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.faChevronUp : _f, _g = _a.iconCollapsed, iconCollapsed = _g === void 0 ? freeSolidSvgIcons.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"]);
|
|
319
|
-
var divRef =
|
|
338
|
+
var divRef = React__namespace.useRef(null);
|
|
320
339
|
var timeout = divRef.current
|
|
321
340
|
? mapCSSTime(getComputedStyle(divRef.current).getPropertyValue("--swui-collapsible-animation-time"))
|
|
322
341
|
: undefined;
|
|
323
|
-
return (
|
|
324
|
-
|
|
325
|
-
contentLeft && (
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
contentRight && (
|
|
329
|
-
|
|
330
|
-
|
|
342
|
+
return (React__namespace.createElement("div", __assign({ className: cx__default["default"](styles$4.collapsible, className), "aria-expanded": !collapsed, ref: divRef }, divProps),
|
|
343
|
+
React__namespace.createElement(core.Clickable, { disableFocusHighlight: true, disableOpacityOnClick: true, className: styles$4.header, onClick: onClick, disabled: disabled, autoFocus: autoFocus, ref: ref },
|
|
344
|
+
contentLeft && (React__namespace.createElement("div", { className: styles$4.contentLeft }, contentLeft)),
|
|
345
|
+
React__namespace.createElement("div", { className: styles$4.label },
|
|
346
|
+
React__namespace.createElement(core.Text, { color: "var(--swui-collapsible-header-text-color)" }, label)),
|
|
347
|
+
contentRight && (React__namespace.createElement("div", { className: styles$4.contentRight }, contentRight)),
|
|
348
|
+
React__namespace.createElement(elements.Icon, { icon: collapsed ? iconCollapsed : icon, className: styles$4.indicator, size: iconSize, fixedWidth: true })),
|
|
349
|
+
React__namespace.createElement(reactTransitionGroup.CSSTransition, { in: !collapsed, timeout: {
|
|
331
350
|
enter: timeout,
|
|
332
351
|
}, classNames: {
|
|
333
352
|
enter: styles$4.contentEnter,
|
|
@@ -336,138 +355,138 @@ var Collapsible = React.forwardRef(function Collapsible(_a, ref) {
|
|
|
336
355
|
exitActive: styles$4.contentExitActive,
|
|
337
356
|
exitDone: styles$4.contentExitDone,
|
|
338
357
|
}, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnCollapse },
|
|
339
|
-
|
|
340
|
-
|
|
358
|
+
React__namespace.createElement("div", { role: "region" }, children !== null && children !== void 0 ? children : (React__namespace.createElement(CollapsibleContent, null,
|
|
359
|
+
React__namespace.createElement(CollapsibleEmptyContent, null)))))));
|
|
341
360
|
});
|
|
342
361
|
|
|
343
362
|
var CollapsibleWithCheckbox = function (_a) {
|
|
344
363
|
var value = _a.value, onValueChange = _a.onValueChange, onChange = _a.onChange, indeterminate = _a.indeterminate, collapsibleProps = __rest(_a, ["value", "onValueChange", "onChange", "indeterminate"]);
|
|
345
|
-
return (
|
|
364
|
+
return (React__namespace.createElement(Collapsible, __assign({ contentLeft: React__namespace.createElement(forms.Checkbox, { value: value, indeterminate: indeterminate, onValueChange: onValueChange, onChange: onChange, onClick: function (ev) { return ev.stopPropagation(); } }) }, collapsibleProps)));
|
|
346
365
|
};
|
|
347
366
|
|
|
348
367
|
var CollapsibleClickableContent = function (_a) {
|
|
349
368
|
var contentLeft = _a.contentLeft, contentRight = _a.contentRight, className = _a.className, onClick = _a.onClick, children = _a.children, props = __rest(_a, ["contentLeft", "contentRight", "className", "onClick", "children"]);
|
|
350
|
-
return (
|
|
351
|
-
contentLeft &&
|
|
352
|
-
contentRight && (
|
|
369
|
+
return (React__namespace.createElement(core.Clickable, __assign({ disableFocusHighlight: true, disableOpacityOnClick: true, className: cx__default["default"](styles$4.content, className), onClick: onClick }, props),
|
|
370
|
+
contentLeft && React__namespace.createElement("div", { className: styles$4.contentLeft }, contentLeft), children !== null && children !== void 0 ? children : React__namespace.createElement(CollapsibleEmptyContent, null),
|
|
371
|
+
contentRight && (React__namespace.createElement("div", { className: styles$4.contentRight }, contentRight))));
|
|
353
372
|
};
|
|
354
373
|
|
|
355
374
|
var CollapsibleGroupHeading = function (_a) {
|
|
356
375
|
var className = _a.className, props = __rest(_a, ["className"]);
|
|
357
|
-
return (
|
|
376
|
+
return (React__namespace.createElement(CollapsibleContent, __assign({ className: cx__default["default"](styles$4.groupHeading, className) }, props)));
|
|
358
377
|
};
|
|
359
378
|
|
|
360
379
|
var ErrorPanel = function (_a) {
|
|
361
380
|
var _b = _a.text, text = _b === void 0 ? "Something unexpected happened." : _b;
|
|
362
|
-
return (
|
|
363
|
-
|
|
381
|
+
return (React__namespace.createElement(core.Box, { justifyContent: "center", alignItems: "center" },
|
|
382
|
+
React__namespace.createElement(elements.Banner, { variant: "error", headerText: text })));
|
|
364
383
|
};
|
|
365
384
|
|
|
366
385
|
var ErrorScreen = function (props) {
|
|
367
|
-
return (
|
|
368
|
-
|
|
386
|
+
return (React__namespace.createElement(core.Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "center" },
|
|
387
|
+
React__namespace.createElement(ErrorPanel, __assign({}, props))));
|
|
369
388
|
};
|
|
370
389
|
|
|
371
390
|
var LoadingPanel = function (_a) {
|
|
372
391
|
var _b = _a.text, text = _b === void 0 ? "Loading..." : _b;
|
|
373
|
-
return (
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
392
|
+
return (React__namespace.createElement(core.Box, { alignItems: "center" },
|
|
393
|
+
React__namespace.createElement(elements.Spinner, { size: "small" }),
|
|
394
|
+
React__namespace.createElement(core.Space, { num: 4 }),
|
|
395
|
+
React__namespace.createElement(core.Heading, { variant: "h4" }, text)));
|
|
377
396
|
};
|
|
378
397
|
|
|
379
398
|
var LoadingScreen = function (props) {
|
|
380
|
-
return (
|
|
381
|
-
|
|
399
|
+
return (React__namespace.createElement(core.Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "center" },
|
|
400
|
+
React__namespace.createElement(LoadingPanel, __assign({}, props))));
|
|
382
401
|
};
|
|
383
402
|
|
|
384
|
-
var css_248z$
|
|
385
|
-
var styles$
|
|
386
|
-
styleInject(css_248z$
|
|
403
|
+
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";
|
|
404
|
+
var styles$3 = {"sidebarMenu":"SidebarMenu-module_sidebarMenu__3IOkS"};
|
|
405
|
+
styleInject(css_248z$4);
|
|
387
406
|
|
|
388
|
-
var css_248z$
|
|
389
|
-
var styles$
|
|
390
|
-
styleInject(css_248z$
|
|
407
|
+
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";
|
|
408
|
+
var styles$2 = {"sidebarMenuCloseButton":"SidebarMenuCloseButton-module_sidebarMenuCloseButton__1h_pt","light":"SidebarMenuCloseButton-module_light__2cy3r","dark":"SidebarMenuCloseButton-module_dark__2Illi","icon":"SidebarMenuCloseButton-module_icon__1lPJE"};
|
|
409
|
+
styleInject(css_248z$3);
|
|
391
410
|
|
|
392
|
-
function _extends
|
|
411
|
+
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); }
|
|
393
412
|
|
|
394
|
-
var _ref
|
|
413
|
+
var _ref = /*#__PURE__*/React__namespace.createElement("g", {
|
|
395
414
|
fill: "#FFF",
|
|
396
415
|
fillRule: "evenodd"
|
|
397
|
-
}, /*#__PURE__*/
|
|
416
|
+
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
398
417
|
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"
|
|
399
|
-
}), /*#__PURE__*/
|
|
418
|
+
}), /*#__PURE__*/React__namespace.createElement("path", {
|
|
400
419
|
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"
|
|
401
420
|
}));
|
|
402
421
|
|
|
403
422
|
function SvgClose(props) {
|
|
404
|
-
return /*#__PURE__*/
|
|
423
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
405
424
|
xmlns: "http://www.w3.org/2000/svg",
|
|
406
425
|
width: 24,
|
|
407
426
|
height: 24
|
|
408
|
-
}, props), _ref
|
|
427
|
+
}, props), _ref);
|
|
409
428
|
}
|
|
410
429
|
|
|
411
430
|
var SidebarMenuCloseButton = function (_a) {
|
|
412
431
|
var className = _a.className, onClick = _a.onClick, _b = _a.variant, variant = _b === void 0 ? "light" : _b;
|
|
413
|
-
return (
|
|
414
|
-
|
|
432
|
+
return (React__namespace.createElement("button", { onClick: onClick, className: cx__default["default"](styles$2.sidebarMenuCloseButton, className, styles$2[variant]) },
|
|
433
|
+
React__namespace.createElement(SvgClose, { className: styles$2.icon })));
|
|
415
434
|
};
|
|
416
435
|
|
|
417
436
|
// TODO Add variant
|
|
418
437
|
var SidebarMenu = function (_a) {
|
|
419
438
|
var className = _a.className, children = _a.children, onCloseClick = _a.onCloseClick, boxProps = __rest(_a, ["className", "children", "onCloseClick"]);
|
|
420
|
-
return (
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
439
|
+
return (React__namespace.createElement(core.Box, __assign({ className: cx__default["default"](styles$3.sidebarMenu, className) }, boxProps),
|
|
440
|
+
React__namespace.createElement(core.Box, { alignItems: "flex-start", justifyContent: "center" },
|
|
441
|
+
React__namespace.createElement(SidebarMenuCloseButton, { onClick: onCloseClick, variant: "dark" })),
|
|
442
|
+
React__namespace.createElement(core.SeparatorLine, { color: theme.cssColor("--lhds-color-blue-700") }),
|
|
443
|
+
React__namespace.createElement(core.Space, null),
|
|
444
|
+
React__namespace.createElement(core.Box, { className: styles$3.sidebarMenuContent, background: "var(--swui-sidebar-menu-background-color)" },
|
|
445
|
+
React__namespace.createElement(core.Column, { flexGrow: 1 }, children))));
|
|
427
446
|
};
|
|
428
447
|
|
|
429
|
-
var css_248z$
|
|
430
|
-
var styles$
|
|
431
|
-
styleInject(css_248z$
|
|
448
|
+
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";
|
|
449
|
+
var styles$1 = {"sidebarMenuHeading":"SidebarMenuHeading-module_sidebarMenuHeading__2Z8R_"};
|
|
450
|
+
styleInject(css_248z$2);
|
|
432
451
|
|
|
433
452
|
var SidebarMenuHeading = function (_a) {
|
|
434
|
-
|
|
435
|
-
return (
|
|
436
|
-
|
|
437
|
-
|
|
453
|
+
_a.className; var label = _a.label, contentLeft = _a.contentLeft, contentRight = _a.contentRight, textProps = __rest(_a, ["className", "label", "contentLeft", "contentRight"]);
|
|
454
|
+
return (React__namespace.createElement(core.Box, { spacing: 2, indent: 2 },
|
|
455
|
+
React__namespace.createElement(CollapsibleContent, { className: styles$1.sidebarMenuHeading, contentLeft: contentLeft, contentRight: contentRight },
|
|
456
|
+
React__namespace.createElement(core.Text, __assign({ variant: "overline", color: "var(--swui-sidebar-menu-heading-text-color)" }, textProps), label))));
|
|
438
457
|
};
|
|
439
458
|
|
|
440
|
-
var css_248z$
|
|
459
|
+
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";
|
|
441
460
|
var contentStyles = {"label":"SidebarMenuContent-module_label__3NyDU","icon":"SidebarMenuContent-module_icon__1kQOa","spinner":"SidebarMenuContent-module_spinner__K0lsy","leftWrapper":"SidebarMenuContent-module_leftWrapper__2sA9a"};
|
|
442
|
-
styleInject(css_248z$
|
|
461
|
+
styleInject(css_248z$1);
|
|
443
462
|
|
|
444
463
|
var selectedBorder = "4px solid var(--swui-sidebar-menu-item-selected)";
|
|
445
464
|
var SidebarMenuLink = function (_a) {
|
|
446
|
-
|
|
465
|
+
_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"]);
|
|
447
466
|
var hasContentLeft = left || leftIcon || loading || success;
|
|
448
|
-
return (
|
|
449
|
-
|
|
450
|
-
!hasContentLeft &&
|
|
451
|
-
indent &&
|
|
452
|
-
|
|
467
|
+
return (React__namespace.createElement(core.Clickable, __assign({ background: "var(--swui-sidebar-menu-background-color)", hoverBackground: "var(--swui-sidebar-menu-background-color-hover)", style: { borderRight: selected ? selectedBorder : undefined } }, clickableProps),
|
|
468
|
+
React__namespace.createElement(core.Row, { spacing: 1, flex: 1, alignItems: "center", height: "40px" },
|
|
469
|
+
!hasContentLeft && React__namespace.createElement(core.Indent, null),
|
|
470
|
+
indent && React__namespace.createElement(core.Indent, { num: 3.5 }),
|
|
471
|
+
React__namespace.createElement(elements.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 }))));
|
|
453
472
|
};
|
|
454
473
|
|
|
455
|
-
var css_248z
|
|
456
|
-
var styles
|
|
457
|
-
styleInject(css_248z
|
|
474
|
+
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";
|
|
475
|
+
var styles = {"sidebarMenuCollapsible":"SidebarMenuCollapsible-module_sidebarMenuCollapsible__3g5N3"};
|
|
476
|
+
styleInject(css_248z);
|
|
458
477
|
|
|
459
478
|
var SidebarMenuCollapsible = function (_a) {
|
|
460
479
|
var children = _a.children, label = _a.label, leftIcon = _a.leftIcon;
|
|
461
480
|
var _b = React.useState(false), collapsed = _b[0], setCollapsed = _b[1];
|
|
462
|
-
return (
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
481
|
+
return (React__namespace.createElement(core.Box, { background: "var(--swui-sidebar-menu-background-color)" },
|
|
482
|
+
React__namespace.createElement(Collapsible, { className: styles.sidebarMenuCollapsible, label: label, collapsed: collapsed, onClick: function () { return setCollapsed(!collapsed); }, contentLeft: leftIcon ? (React__namespace.createElement(core.Box, { width: "56px", alignItems: "center", justifyContent: "center" },
|
|
483
|
+
React__namespace.createElement(elements.Icon, { icon: leftIcon, size: 18, color: "var(--swui-sidebar-menu-text-color)", "data-hover": true }))) : (React__namespace.createElement(core.Indent, { num: 1 })) },
|
|
484
|
+
React__namespace.createElement(core.Column, { flex: 1 }, children))));
|
|
466
485
|
};
|
|
467
486
|
|
|
468
487
|
var SidebarMenuSeparator = function (separatorLineProps) {
|
|
469
|
-
return (
|
|
470
|
-
|
|
488
|
+
return (React__namespace.createElement(core.Spacing, null,
|
|
489
|
+
React__namespace.createElement(core.SeparatorLine, __assign({ color: theme.cssColor("--lhds-color-blue-700") }, separatorLineProps))));
|
|
471
490
|
};
|
|
472
491
|
|
|
473
492
|
exports.ActionMenuFlatButton = ActionMenuFlatButton;
|