@stenajs-webui/elements 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/components/ui/action-menu/UseActionMenuLogic.d.ts +2 -1
- package/dist/index.es.js +213 -212
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +231 -212
- package/dist/index.js.map +1 -1
- package/package.json +4 -5
package/dist/index.js
CHANGED
|
@@ -21,6 +21,25 @@ var focus = require('@react-aria/focus');
|
|
|
21
21
|
|
|
22
22
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
23
23
|
|
|
24
|
+
function _interopNamespace(e) {
|
|
25
|
+
if (e && e.__esModule) return e;
|
|
26
|
+
var n = Object.create(null);
|
|
27
|
+
if (e) {
|
|
28
|
+
Object.keys(e).forEach(function (k) {
|
|
29
|
+
if (k !== 'default') {
|
|
30
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
31
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
32
|
+
enumerable: true,
|
|
33
|
+
get: function () { return e[k]; }
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
n["default"] = e;
|
|
39
|
+
return Object.freeze(n);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
24
43
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
25
44
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
26
45
|
|
|
@@ -117,8 +136,8 @@ var Icon = React.forwardRef(function Icon(_a, ref) {
|
|
|
117
136
|
if (!icon) {
|
|
118
137
|
return null;
|
|
119
138
|
}
|
|
120
|
-
return (
|
|
121
|
-
|
|
139
|
+
return (React__namespace.createElement(core.Box, { justifyContent: "center", alignItems: "center", display: display, ref: ref },
|
|
140
|
+
React__namespace.createElement(reactFontawesome.FontAwesomeIcon, __assign({ className: className, color: color, flip: flip, icon: icon, pulse: pulse, rotation: rotation, spin: spin, style: __assign({ fontSize: size }, style), transform: transform }, props))));
|
|
122
141
|
});
|
|
123
142
|
|
|
124
143
|
function styleInject(css, ref) {
|
|
@@ -148,13 +167,13 @@ function styleInject(css, ref) {
|
|
|
148
167
|
}
|
|
149
168
|
}
|
|
150
169
|
|
|
151
|
-
var css_248z = ".Banner-module_banner__3rRWW {\n --current-bg-color: var(--lhds-color-ui-200);\n --current-icon-color: var(--lhds-color-ui-500);\n\n padding: calc(var(--swui-metrics-spacing) * 2) 0;\n padding-right: calc(var(--swui-metrics-indent) * 2);\n\n background: var(--current-bg-color);\n}\n\n .Banner-module_banner__3rRWW .Banner-module_icon__14VBM {\n color: var(--current-icon-color);\n }\n\n .Banner-module_banner__3rRWW.Banner-module_standard__M8al2 {\n --current-bg-color: var(--lhds-color-ui-200);\n --current-icon-color: var(--lhds-color-ui-500);\n }\n\n .Banner-module_banner__3rRWW.Banner-module_info__1nya_ {\n --current-bg-color: var(--lhds-color-blue-50);\n --current-icon-color: var(--lhds-color-blue-500);\n }\n\n .Banner-module_banner__3rRWW.Banner-module_success__2LJp5 {\n --current-bg-color: var(--lhds-color-green-50);\n --current-icon-color: var(--lhds-color-green-600);\n }\n\n .Banner-module_banner__3rRWW.Banner-module_warning__3npqp {\n --current-bg-color: var(--lhds-color-orange-50);\n --current-icon-color: var(--lhds-color-orange-600);\n }\n\n .Banner-module_banner__3rRWW.Banner-module_error__2ULIR {\n --current-bg-color: var(--lhds-color-red-50);\n --current-icon-color: var(--lhds-color-red-500);\n }\n";
|
|
152
|
-
var styles = {"banner":"Banner-module_banner__3rRWW","icon":"Banner-module_icon__14VBM","standard":"Banner-module_standard__M8al2","info":"Banner-module_info__1nya_","success":"Banner-module_success__2LJp5","warning":"Banner-module_warning__3npqp","error":"Banner-module_error__2ULIR"};
|
|
153
|
-
styleInject(css_248z);
|
|
170
|
+
var css_248z$m = ".Banner-module_banner__3rRWW {\n --current-bg-color: var(--lhds-color-ui-200);\n --current-icon-color: var(--lhds-color-ui-500);\n\n padding: calc(var(--swui-metrics-spacing) * 2) 0;\n padding-right: calc(var(--swui-metrics-indent) * 2);\n\n background: var(--current-bg-color);\n}\n\n .Banner-module_banner__3rRWW .Banner-module_icon__14VBM {\n color: var(--current-icon-color);\n }\n\n .Banner-module_banner__3rRWW.Banner-module_standard__M8al2 {\n --current-bg-color: var(--lhds-color-ui-200);\n --current-icon-color: var(--lhds-color-ui-500);\n }\n\n .Banner-module_banner__3rRWW.Banner-module_info__1nya_ {\n --current-bg-color: var(--lhds-color-blue-50);\n --current-icon-color: var(--lhds-color-blue-500);\n }\n\n .Banner-module_banner__3rRWW.Banner-module_success__2LJp5 {\n --current-bg-color: var(--lhds-color-green-50);\n --current-icon-color: var(--lhds-color-green-600);\n }\n\n .Banner-module_banner__3rRWW.Banner-module_warning__3npqp {\n --current-bg-color: var(--lhds-color-orange-50);\n --current-icon-color: var(--lhds-color-orange-600);\n }\n\n .Banner-module_banner__3rRWW.Banner-module_error__2ULIR {\n --current-bg-color: var(--lhds-color-red-50);\n --current-icon-color: var(--lhds-color-red-500);\n }\n";
|
|
171
|
+
var styles$k = {"banner":"Banner-module_banner__3rRWW","icon":"Banner-module_icon__14VBM","standard":"Banner-module_standard__M8al2","info":"Banner-module_info__1nya_","success":"Banner-module_success__2LJp5","warning":"Banner-module_warning__3npqp","error":"Banner-module_error__2ULIR"};
|
|
172
|
+
styleInject(css_248z$m);
|
|
154
173
|
|
|
155
|
-
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); }
|
|
174
|
+
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); }
|
|
156
175
|
|
|
157
|
-
var _ref = /*#__PURE__*/
|
|
176
|
+
var _ref$1 = /*#__PURE__*/React__namespace.createElement("circle", {
|
|
158
177
|
className: "spinner-large_svg__path",
|
|
159
178
|
fill: "none",
|
|
160
179
|
cx: 50,
|
|
@@ -163,20 +182,20 @@ var _ref = /*#__PURE__*/React.createElement("circle", {
|
|
|
163
182
|
});
|
|
164
183
|
|
|
165
184
|
function SvgSpinnerLarge(props) {
|
|
166
|
-
return /*#__PURE__*/
|
|
185
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
|
|
167
186
|
className: "spinner-large_svg__spinner",
|
|
168
187
|
viewBox: "0 0 100 100",
|
|
169
188
|
xmlns: "http://www.w3.org/2000/svg"
|
|
170
|
-
}, props), _ref);
|
|
189
|
+
}, props), _ref$1);
|
|
171
190
|
}
|
|
172
191
|
|
|
173
|
-
var css_248z$
|
|
174
|
-
var styles$
|
|
175
|
-
styleInject(css_248z$
|
|
192
|
+
var css_248z$l = ".Spinner-module_spinner__1DYWu {\n -webkit-animation: Spinner-module_rotator__38hxL 2s linear infinite both;\n animation: Spinner-module_rotator__38hxL 2s linear infinite both;\n}\n\n .Spinner-module_spinner__1DYWu circle {\n stroke-linecap: round;\n -webkit-transform-origin: center;\n transform-origin: center;\n fill: transparent;\n stroke-dasharray: 283;\n stroke-dashoffset: 280;\n stroke-width: 10px;\n }\n\n .Spinner-module_spinner__1DYWu.Spinner-module_standard__3nAPR {\n stroke: var(--lhds-color-blue-500);\n }\n\n .Spinner-module_spinner__1DYWu.Spinner-module_standard__3nAPR circle {\n -webkit-animation: Spinner-module_dash__3Fum3 1.4s ease-in-out infinite both;\n animation: Spinner-module_dash__3Fum3 1.4s ease-in-out infinite both;\n }\n\n .Spinner-module_spinner__1DYWu.Spinner-module_inverted__E_eQY {\n stroke: var(--lhds-color-ui-300);\n }\n\n .Spinner-module_spinner__1DYWu.Spinner-module_inverted__E_eQY circle {\n -webkit-animation: Spinner-module_dash__3Fum3 1.4s ease-in-out infinite both;\n animation: Spinner-module_dash__3Fum3 1.4s ease-in-out infinite both;\n }\n\n .Spinner-module_spinner__1DYWu.Spinner-module_customColor__10-Uu circle {\n -webkit-animation: Spinner-module_dash__3Fum3 1.4s ease-in-out infinite both;\n animation: Spinner-module_dash__3Fum3 1.4s ease-in-out infinite both;\n }\n\n .Spinner-module_spinner__1DYWu.Spinner-module_medium__2A1by {\n width: 54px;\n height: 54px;\n }\n\n .Spinner-module_spinner__1DYWu.Spinner-module_small__3QbUv {\n width: 34px;\n height: 34px;\n }\n\n .Spinner-module_spinner__1DYWu.Spinner-module_tiny__1CCaG {\n width: 20px;\n height: 20px;\n }\n\n@-webkit-keyframes Spinner-module_dash__3Fum3 {\n 0%,\n 25% {\n stroke-dashoffset: 280;\n -webkit-transform: rotate(0);\n transform: rotate(0);\n }\n\n 50%,\n 75% {\n stroke-dashoffset: 75;\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n }\n\n 100% {\n stroke-dashoffset: 280;\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n\n@keyframes Spinner-module_dash__3Fum3 {\n 0%,\n 25% {\n stroke-dashoffset: 280;\n -webkit-transform: rotate(0);\n transform: rotate(0);\n }\n\n 50%,\n 75% {\n stroke-dashoffset: 75;\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n }\n\n 100% {\n stroke-dashoffset: 280;\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n\n@-webkit-keyframes Spinner-module_rotator__38hxL {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n\n@keyframes Spinner-module_rotator__38hxL {\n 0% {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n }\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n";
|
|
193
|
+
var styles$j = {"spinner":"Spinner-module_spinner__1DYWu","rotator":"Spinner-module_rotator__38hxL","standard":"Spinner-module_standard__3nAPR","dash":"Spinner-module_dash__3Fum3","inverted":"Spinner-module_inverted__E_eQY","customColor":"Spinner-module_customColor__10-Uu","medium":"Spinner-module_medium__2A1by","small":"Spinner-module_small__3QbUv","tiny":"Spinner-module_tiny__1CCaG"};
|
|
194
|
+
styleInject(css_248z$l);
|
|
176
195
|
|
|
177
196
|
var Spinner = function (_a) {
|
|
178
197
|
var _b = _a.size, size = _b === void 0 ? "medium" : _b, _c = _a.variant, variant = _c === void 0 ? "standard" : _c, color = _a.color;
|
|
179
|
-
return (
|
|
198
|
+
return (React__namespace.createElement(SvgSpinnerLarge, { className: cx__default["default"](styles$j.spinner, styles$j[size], color ? styles$j.customColor : styles$j[variant]), style: { stroke: color } }));
|
|
180
199
|
};
|
|
181
200
|
|
|
182
201
|
var iconPerVariant = {
|
|
@@ -188,65 +207,65 @@ var iconPerVariant = {
|
|
|
188
207
|
};
|
|
189
208
|
var Banner = function (_a) {
|
|
190
209
|
var headerText = _a.headerText, text = _a.text, children = _a.children, contentRight = _a.contentRight, icon = _a.icon, _b = _a.variant, variant = _b === void 0 ? "standard" : _b, _c = _a.loading, loading = _c === void 0 ? false : _c;
|
|
191
|
-
return (
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
headerText && (
|
|
197
|
-
|
|
198
|
-
text && (
|
|
199
|
-
headerText &&
|
|
200
|
-
|
|
201
|
-
contentRight && (
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
children && (
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
210
|
+
return (React__namespace.createElement("div", { className: cx__default["default"](styles$k.banner, styles$k[variant]) },
|
|
211
|
+
React__namespace.createElement(core.Row, { justifyContent: "space-between" },
|
|
212
|
+
React__namespace.createElement(core.Row, { flex: "none", width: "64px", justifyContent: "center", alignItems: "center" }, (icon || iconPerVariant[variant] || loading) && (React__namespace.createElement(React__namespace.Fragment, null, loading ? (React__namespace.createElement(Spinner, { size: "tiny", color: "var(--current-icon-color)" })) : (React__namespace.createElement(Icon, { icon: icon !== null && icon !== void 0 ? icon : iconPerVariant[variant], size: 24, className: styles$k.icon }))))),
|
|
213
|
+
React__namespace.createElement(core.Row, { justifyContent: "space-between", flexGrow: 1 },
|
|
214
|
+
React__namespace.createElement(core.Column, { justifyContent: "center" },
|
|
215
|
+
headerText && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
216
|
+
React__namespace.createElement(core.Heading, { variant: "h5" }, headerText))),
|
|
217
|
+
text && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
218
|
+
headerText && React__namespace.createElement(core.Space, null),
|
|
219
|
+
React__namespace.createElement(core.Text, null, text)))),
|
|
220
|
+
contentRight && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
221
|
+
React__namespace.createElement(core.Indent, null),
|
|
222
|
+
React__namespace.createElement(core.Column, { justifyContent: "center" }, contentRight))))),
|
|
223
|
+
children && (React__namespace.createElement(core.Row, null,
|
|
224
|
+
React__namespace.createElement(core.Box, { minWidth: "64px" }),
|
|
225
|
+
React__namespace.createElement(core.Box, null,
|
|
226
|
+
React__namespace.createElement(React__namespace.Fragment, null,
|
|
227
|
+
React__namespace.createElement(core.Space, null),
|
|
209
228
|
children))))));
|
|
210
229
|
};
|
|
211
230
|
|
|
212
|
-
var css_248z$
|
|
213
|
-
var styles$
|
|
214
|
-
styleInject(css_248z$
|
|
231
|
+
var css_248z$k = ".Link-module_link__2PdX5 {\n /* Theme vars */\n --swui-link-font-family: var(--swui-font-primary);\n --swui-link-font-weight: var(--swui-font-weight-link);\n --swui-link-text-decoration: underline;\n --swui-link-letter-spacing: var(--swui-text-letter-spacing);\n --swui-link-color: var(--swui-text-action-color);\n --swui-link-color-hover: var(--swui-text-action-color-focus);\n --swui-link-color-active: var(--swui-text-action-color-active);\n --swui-link-color-focus: var(--swui-text-action-color-focus);\n --swui-link-color-disabled: var(--lhds-color-ui-600);\n --swui-link-focus-highlight-color: var(--lhds-color-blue-300);\n --swui-link-focus-highlight-color-disabled: var(--swui-link-color-disabled);\n\n /* Current */\n --current-color: var(--swui-link-color);\n --current-font-size: var(--swui-font-size-medium);\n --current-line-height: var(--swui-line-height-medium);\n --current-letter-spacing: var(--swui-link-letter-spacing);\n --current-font-weight: var(--swui-link-font-weight);\n\n /* Styling */\n font-size: var(--current-font-size);\n line-height: var(--current-line-height);\n color: var(--current-color);\n letter-spacing: var(--current-letter-spacing);\n font-family: var(--swui-link-font-family);\n font-weight: var(--current-font-weight);\n\n box-sizing: border-box;\n outline: 1px dashed var(--current-focus-highlight-color);\n -webkit-text-decoration: var(--swui-link-text-decoration);\n text-decoration: var(--swui-link-text-decoration);\n}\n\n .Link-module_link__2PdX5:not(.Link-module_disabled__1OQi7) {\n cursor: pointer;\n }\n\n .Link-module_link__2PdX5:focus:not(:active) {\n --current-focus-highlight-color: var(--swui-link-focus-highlight-color);\n cursor: pointer;\n }\n\n .Link-module_link__2PdX5:focus.Link-module_disabled__1OQi7 {\n --current-focus-highlight-color: var(\n --swui-link-focus-highlight-color-disabled\n );\n cursor: default;\n }\n\n .Link-module_link__2PdX5:hover {\n --current-color: var(--swui-link-color-hover);\n }\n\n .Link-module_link__2PdX5:active {\n --current-color: var(--swui-link-color-active);\n }\n\n .Link-module_link__2PdX5.Link-module_disabled__1OQi7 {\n --current-color: var(--swui-link-color-disabled);\n }\n\n .Link-module_link__2PdX5.Link-module_standard__14Aap {\n }\n\n .Link-module_link__2PdX5.Link-module_bold__3-ezF {\n --current-font-weight: var(--swui-font-weight-text-bold);\n }\n\n .Link-module_link__2PdX5.Link-module_caption__3pD2O {\n --current-font-size: var(--swui-font-size-small);\n --current-line-height: var(--swui-line-height-small);\n --current-letter-spacing: 0;\n font-style: italic;\n }\n\n .Link-module_link__2PdX5.Link-module_overline__1Dwj2 {\n --current-font-size: var(--swui-font-size-smaller);\n --current-line-height: var(--swui-line-height-smaller);\n --current-letter-spacing: 1px;\n text-transform: uppercase;\n }\n\n .Link-module_link__2PdX5.Link-module_large__2-rhd {\n --current-font-size: var(--swui-font-size-large);\n --current-line-height: var(--swui-line-height-large);\n --current-letter-spacing: 0;\n }\n\n .Link-module_link__2PdX5.Link-module_medium__1zXqA {\n --current-font-size: var(--swui-font-size-medium);\n --current-line-height: var(--swui-line-height-medium);\n }\n\n .Link-module_link__2PdX5.Link-module_small__u0ZvN {\n --current-font-size: var(--swui-font-size-small);\n --current-line-height: var(--swui-line-height-small);\n --current-letter-spacing: 0;\n }\n\n .Link-module_link__2PdX5.Link-module_smaller__1hvj_ {\n --current-font-size: var(--swui-font-size-smaller);\n --current-line-height: var(--swui-line-height-smaller);\n --current-letter-spacing: 0;\n }\n";
|
|
232
|
+
var styles$i = {"link":"Link-module_link__2PdX5","disabled":"Link-module_disabled__1OQi7","standard":"Link-module_standard__14Aap","bold":"Link-module_bold__3-ezF","caption":"Link-module_caption__3pD2O","overline":"Link-module_overline__1Dwj2","large":"Link-module_large__2-rhd","medium":"Link-module_medium__1zXqA","small":"Link-module_small__u0ZvN","smaller":"Link-module_smaller__1hvj_"};
|
|
233
|
+
styleInject(css_248z$k);
|
|
215
234
|
|
|
216
235
|
var Link = React.forwardRef(function (_a, ref) {
|
|
217
236
|
var children = _a.children, className = _a.className, onClick = _a.onClick, _b = _a.tabIndex, tabIndex = _b === void 0 ? 0 : _b, disableTabIndex = _a.disableTabIndex, disabled = _a.disabled, _c = _a.variant, variant = _c === void 0 ? "standard" : _c, _d = _a.size, size = _d === void 0 ? "medium" : _d, iconLeft = _a.iconLeft, iconRight = _a.iconRight, href = _a.href, anchorProps = __rest(_a, ["children", "className", "onClick", "tabIndex", "disableTabIndex", "disabled", "variant", "size", "iconLeft", "iconRight", "href"]);
|
|
218
|
-
return (
|
|
219
|
-
iconLeft && (
|
|
220
|
-
|
|
237
|
+
return (React__namespace.createElement("a", __assign({ tabIndex: !disableTabIndex ? tabIndex : undefined, className: cx__default["default"](styles$i.link, styles$i[variant], styles$i[size], disabled && styles$i.disabled, className), ref: ref, href: disabled ? undefined : href, onClick: !disabled ? onClick : undefined }, anchorProps),
|
|
238
|
+
iconLeft && (React__namespace.createElement("span", { style: { marginLeft: "2px", marginRight: "6px" } },
|
|
239
|
+
React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { icon: iconLeft }))),
|
|
221
240
|
children,
|
|
222
|
-
iconRight && (
|
|
223
|
-
|
|
241
|
+
iconRight && (React__namespace.createElement("span", { style: { marginLeft: "6px", marginRight: "2px" } },
|
|
242
|
+
React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { icon: iconRight })))));
|
|
224
243
|
});
|
|
225
244
|
|
|
226
|
-
var css_248z$
|
|
227
|
-
var styles$
|
|
228
|
-
styleInject(css_248z$
|
|
245
|
+
var css_248z$j = ".ResultListRow-module_resultItemRow__1EvRY {\n display: -webkit-flex;\n display: flex;\n -webkit-flex-direction: column;\n flex-direction: column;\n}\n\n .ResultListRow-module_resultItemRow__1EvRY .ResultListRow-module_link__1uK6U {\n margin-top: 4px;\n }\n";
|
|
246
|
+
var styles$h = {"resultItemRow":"ResultListRow-module_resultItemRow__1EvRY","link":"ResultListRow-module_link__1uK6U"};
|
|
247
|
+
styleInject(css_248z$j);
|
|
229
248
|
|
|
230
249
|
var ResultListRow = function (_a) {
|
|
231
250
|
var text = _a.text, onClickLink = _a.onClickLink, linkText = _a.linkText;
|
|
232
|
-
return (
|
|
233
|
-
|
|
234
|
-
linkText && (
|
|
251
|
+
return (React__namespace.createElement("div", { className: styles$h.resultItemRow },
|
|
252
|
+
React__namespace.createElement(core.Text, null, text),
|
|
253
|
+
linkText && (React__namespace.createElement(Link, { className: styles$h.link, onClick: onClickLink }, linkText))));
|
|
235
254
|
};
|
|
236
255
|
|
|
237
|
-
var css_248z$
|
|
238
|
-
var styles$
|
|
239
|
-
styleInject(css_248z$
|
|
256
|
+
var css_248z$i = ".ResultList-module_resultList__2NZyU {\n margin: 0;\n -webkit-padding-start: 20px;\n padding-inline-start: 20px;\n -webkit-padding-end: 0;\n padding-inline-end: 0;\n}\n\n .ResultList-module_resultList__2NZyU li:not(:last-child) {\n margin-bottom: calc(var(--swui-metrics-spacing));\n }\n";
|
|
257
|
+
var styles$g = {"resultList":"ResultList-module_resultList__2NZyU"};
|
|
258
|
+
styleInject(css_248z$i);
|
|
240
259
|
|
|
241
260
|
var ResultList = function (_a) {
|
|
242
261
|
var children = _a.children;
|
|
243
|
-
return (
|
|
262
|
+
return (React__namespace.createElement("ul", { className: styles$g.resultList }, React.Children.map(children, function (child) { return (React__namespace.createElement("li", null, child)); })));
|
|
244
263
|
};
|
|
245
264
|
|
|
246
265
|
var ResultListBanner = function (_a) {
|
|
247
266
|
var bannerState = _a.bannerState, _b = _a.variant, variant = _b === void 0 ? "standard" : _b, bannerProps = __rest(_a, ["bannerState", "variant"]);
|
|
248
|
-
return (
|
|
249
|
-
|
|
267
|
+
return (React__namespace.createElement(Banner, __assign({}, bannerProps, { headerText: bannerState.headerText, text: bannerState.text, variant: variant }), bannerState.items && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
268
|
+
React__namespace.createElement(ResultList, null, bannerState.items.map(function (item, index) { return (React__namespace.createElement(ResultListRow, { text: item.text, linkText: item.linkText, onClickLink: item.onClickLink, key: index })); }))))));
|
|
250
269
|
};
|
|
251
270
|
|
|
252
271
|
var useResultListBannerState = function (initialState) {
|
|
@@ -269,57 +288,57 @@ var useResultListBannerState = function (initialState) {
|
|
|
269
288
|
};
|
|
270
289
|
};
|
|
271
290
|
|
|
272
|
-
function _extends
|
|
291
|
+
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); }
|
|
273
292
|
|
|
274
|
-
var _ref
|
|
293
|
+
var _ref = /*#__PURE__*/React__namespace.createElement("path", {
|
|
275
294
|
d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
|
276
295
|
});
|
|
277
296
|
|
|
278
297
|
function SvgSpinnerSmall(props) {
|
|
279
|
-
return /*#__PURE__*/
|
|
298
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
280
299
|
viewBox: "0 0 1024 1024",
|
|
281
300
|
"data-icon": "loading",
|
|
282
301
|
width: "1em",
|
|
283
302
|
height: "1em",
|
|
284
303
|
fill: "currentColor",
|
|
285
304
|
"aria-hidden": "true"
|
|
286
|
-
}, props), _ref
|
|
305
|
+
}, props), _ref);
|
|
287
306
|
}
|
|
288
307
|
|
|
289
308
|
var loadingCircle = react.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 100% {\n transform:rotate(360deg)\n }\n"], ["\n 100% {\n transform:rotate(360deg)\n }\n"])));
|
|
290
309
|
var InputSpinner = function (_a) {
|
|
291
310
|
var className = _a.className, color = _a.color, size = _a.size;
|
|
292
|
-
return (
|
|
311
|
+
return (React__namespace.createElement(react.ClassNames, null, function (_a) {
|
|
293
312
|
var css = _a.css, cx = _a.cx;
|
|
294
|
-
return (
|
|
313
|
+
return (React__namespace.createElement(SvgSpinnerSmall, { className: cx(className, css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: ", ";\n width: ", ";\n height: ", ";\n fill: currentColor;\n animation: ", " 1s infinite linear;\n "], ["\n color: ", ";\n width: ", ";\n height: ", ";\n fill: currentColor;\n animation: ", " 1s infinite linear;\n "])), color, size, size, loadingCircle)) }));
|
|
295
314
|
}));
|
|
296
315
|
};
|
|
297
316
|
var templateObject_1, templateObject_2;
|
|
298
317
|
|
|
299
318
|
var BreadCrumbs = function (_a) {
|
|
300
319
|
var children = _a.children;
|
|
301
|
-
return (
|
|
302
|
-
index > 0 && (
|
|
303
|
-
|
|
320
|
+
return (React__namespace.createElement(core.Row, { alignItems: "center", spacing: true, indent: 2 }, React.Children.map(children, function (child, index) { return (React__namespace.createElement(React__namespace.Fragment, null, child && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
321
|
+
index > 0 && (React__namespace.createElement(core.Indent, { num: 2 },
|
|
322
|
+
React__namespace.createElement(Icon, { icon: stenaBreadCrumbArrow, size: 8, color: theme.cssColor("--lhds-color-ui-700") }))),
|
|
304
323
|
child)))); })));
|
|
305
324
|
};
|
|
306
325
|
|
|
307
|
-
var css_248z$
|
|
308
|
-
var styles$
|
|
309
|
-
styleInject(css_248z$
|
|
326
|
+
var css_248z$h = ".Crumb-module_crumb__1qiJN {\n color: var(--swui-text-action-color);\n font-size: 10px;\n font-family: var(--swui-font-primary);\n font-weight: 600;\n letter-spacing: 1px;\n text-decoration: none;\n cursor: pointer;\n}\n\n.Crumb-module_crumb__1qiJN:hover {\n text-decoration: underline;\n color: var(--swui-text-action-color-hover);\n}\n\n.Crumb-module_crumb__1qiJN:focus {\n color: var(--swui-text-action-color-focus);\n}\n\n.Crumb-module_crumb__1qiJN:active {\n text-decoration: underline;\n color: var(--swui-text-action-color-active);\n}\n";
|
|
327
|
+
var styles$f = {"crumb":"Crumb-module_crumb__1qiJN"};
|
|
328
|
+
styleInject(css_248z$h);
|
|
310
329
|
|
|
311
330
|
var Crumb = function (_a) {
|
|
312
331
|
var label = _a.label, render = _a.render;
|
|
313
332
|
if (render) {
|
|
314
333
|
var children = label.toUpperCase();
|
|
315
|
-
return
|
|
334
|
+
return React__namespace.createElement(React__namespace.Fragment, null, render({ children: children, className: styles$f.crumb }));
|
|
316
335
|
}
|
|
317
|
-
return
|
|
336
|
+
return React__namespace.createElement("span", { className: styles$f.crumb }, label.toUpperCase());
|
|
318
337
|
};
|
|
319
338
|
|
|
320
|
-
var css_248z$6 = ".Button-module_button__qBMg_ {\n /* Theme vars */\n --swui-button-line-height: 16px;\n --swui-button-font-weight: 400;\n --swui-button-icon-color: var(--swui-white);\n --swui-button-text-size: var(--swui-font-size-medium);\n --swui-button-text-color: var(--swui-white);\n --swui-button-text-decoration: none;\n --swui-button-letter-spacing: var(--swui-field-letter-spacing);\n --swui-button-padding-vertical: calc(var(--swui-metrics-spacing) - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-spacing) * 2 - 1px);\n\n /* Text */\n --swui-button-text-color-focus: var(--swui-button-text-color);\n --swui-button-text-color-hover: var(--swui-button-text-color);\n --swui-button-text-color-active: var(--swui-button-text-color);\n --swui-button-text-color-disabled: var(--swui-text-disabled-color);\n\n --swui-button-danger-text-color: var(--swui-button-text-color);\n --swui-button-danger-text-color-focus: var(--swui-button-danger-text-color);\n --swui-button-danger-text-color-hover: var(--swui-button-danger-text-color);\n --swui-button-danger-text-color-active: var(--swui-button-danger-text-color);\n\n --swui-button-success-text-color: var(--swui-button-text-color);\n --swui-button-success-text-color-focus: var(--swui-button-success-text-color);\n --swui-button-success-text-color-hover: var(--swui-button-success-text-color);\n --swui-button-success-text-color-active: var(\n --swui-button-success-text-color\n );\n\n /* Icon */\n --swui-button-icon-color-focus: var(--swui-button-icon-color);\n --swui-button-icon-color-hover: var(--swui-button-icon-color);\n --swui-button-icon-color-active: var(--swui-button-icon-color);\n --swui-button-icon-color-disabled: var(--swui-text-disabled-color);\n\n --swui-button-danger-icon-color: var(--swui-button-icon-color);\n --swui-button-danger-icon-color-focus: var(--swui-button-danger-icon-color);\n --swui-button-danger-icon-color-hover: var(--swui-button-danger-icon-color);\n --swui-button-danger-icon-color-active: var(--swui-button-danger-icon-color);\n\n --swui-button-success-icon-color: var(--swui-button-icon-color);\n --swui-button-success-icon-color-focus: var(--swui-button-success-icon-color);\n --swui-button-success-icon-color-hover: var(--swui-button-success-icon-color);\n --swui-button-success-icon-color-active: var(\n --swui-button-success-icon-color\n );\n\n /* Background */\n --swui-button-background-color: var(--swui-primary-action-color);\n --swui-button-background-color-active: var(\n --swui-primary-action-color-active\n );\n --swui-button-background-color-focus: var(--swui-primary-action-color-focus);\n --swui-button-background-color-hover: var(--swui-primary-action-color-hover);\n --swui-button-background-color-disabled: var(\n --swui-primary-action-color-disabled\n );\n\n --swui-button-danger-background-color: var(--lhds-color-red-500);\n --swui-button-danger-background-color-active: var(--lhds-color-red-900);\n --swui-button-danger-background-color-focus: var(--lhds-color-red-700);\n --swui-button-danger-background-color-hover: var(--lhds-color-red-600);\n\n --swui-button-success-background-color: var(--lhds-color-green-600);\n --swui-button-success-background-color-active: var(--lhds-color-green-900);\n --swui-button-success-background-color-focus: var(--lhds-color-green-800);\n --swui-button-success-background-color-hover: var(--lhds-color-green-700);\n\n /* Border */\n --swui-button-border-color: var(--swui-button-background-color);\n --swui-button-border-radius: var(--swui-border-radius);\n --swui-button-border-radius-icon-only: var(--swui-border-radius);\n --swui-button-border-color-focus: var(--swui-button-background-color-focus);\n --swui-button-border-color-hover: var(--swui-button-background-color-hover);\n --swui-button-border-color-active: var(--swui-button-background-color-active);\n --swui-button-border-color-disabled: var(--lhds-color-ui-400);\n\n --swui-button-danger-border-color: var(--swui-button-danger-background-color);\n --swui-button-danger-border-color-focus: var(\n --swui-button-danger-background-color-focus\n );\n --swui-button-danger-border-color-hover: var(\n --swui-button-danger-background-color-hover\n );\n --swui-button-danger-border-color-active: var(\n --swui-button-danger-background-color-active\n );\n\n --swui-button-success-border-color: var(\n --swui-button-success-background-color\n );\n --swui-button-success-border-color-focus: var(\n --swui-button-success-background-color-focus\n );\n --swui-button-success-border-color-hover: var(\n --swui-button-success-background-color-hover\n );\n --swui-button-success-border-color-active: var(\n --swui-button-success-background-color-active\n );\n\n /* Shadow */\n --swui-button-box-shadow-focus: 0 0 4px 0 var(--lhds-color-blue-300);\n --swui-button-box-shadow-hover: 0 1px 1px 1px rgba(29, 100, 171, 0.16),\n 0 0 1px 0 rgba(29, 100, 171, 0.16);\n --swui-button-box-shadow: 0 1px 0 0 rgba(29, 100, 171, 0.08),\n 0 0 1px -1px rgba(29, 100, 171, 0.1);\n --swui-button-box-shadow-active: none;\n --swui-button-box-shadow-disabled: none;\n\n /*\n * Styling\n */\n --current-background-color: var(--swui-button-background-color);\n --current-icon-height: 16px;\n --current-icon-color: var(--swui-button-icon-color);\n --current-text-color: var(--swui-button-text-color);\n --current-border-color: var(--swui-button-border-color);\n\n box-sizing: border-box;\n letter-spacing: var(--swui-button-letter-spacing);\n -webkit-text-decoration: var(--swui-button-text-decoration);\n text-decoration: var(--swui-button-text-decoration);\n padding: var(--swui-button-padding-vertical)\n var(--swui-button-padding-horizontal);\n border: 1px solid var(--current-border-color);\n background-color: var(--current-background-color);\n border-radius: var(--swui-button-border-radius);\n box-shadow: var(--current-box-shadow, var(--swui-button-box-shadow));\n color: var(--current-text-color);\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 cursor: pointer;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n display: -webkit-inline-flex;\n display: inline-flex;\n -webkit-align-items: center;\n align-items: center;\n -webkit-justify-content: center;\n justify-content: center;\n}\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT {\n padding: var(--swui-button-padding-vertical);\n color: var(--current-icon-color);\n -webkit-flex: none;\n flex: none;\n\n border-radius: var(--swui-button-border-radius-icon-only);\n\n width: 32px;\n height: 32px;\n -webkit-justify-content: center;\n justify-content: center;\n -webkit-align-items: center;\n align-items: center;\n display: -webkit-flex;\n display: flex;\n }\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT.Button-module_small__2fGop {\n width: 24px;\n height: 24px;\n }\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT.Button-module_large__22CGX {\n width: 40px;\n height: 40px;\n }\n\n /*\n * State and variants\n */\n\n .Button-module_button__qBMg_.Button-module_small__2fGop {\n --current-line-height: 16px;\n --swui-button-padding-vertical: calc(var(--swui-metrics-space) / 2 - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-space) - 1px);\n --current-text-size: 12px;\n }\n\n .Button-module_button__qBMg_.Button-module_large__22CGX {\n --current-line-height: 24px;\n --swui-button-padding-vertical: calc(var(--swui-metrics-space) - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-space) * 3 - 1px);\n --current-text-size: 16px;\n }\n\n .Button-module_button__qBMg_.Button-module_large__22CGX.Button-module_iconButton__1-wQT {\n --current-icon-height: 24px;\n }\n\n .Button-module_button__qBMg_:hover {\n --current-background-color: var(--swui-button-background-color-hover);\n --current-border-color: var(--swui-button-border-color-hover);\n --current-icon-color: var(--swui-button-icon-color-hover);\n --current-text-color: var(--swui-button-text-color-hover);\n --current-box-shadow: var(--swui-button-box-shadow-hover);\n }\n\n .Button-module_button__qBMg_:focus {\n outline: 0;\n --current-background-color: var(--swui-button-background-color-focus);\n --current-border-color: var(--swui-button-border-color-focus);\n --current-icon-color: var(--swui-button-icon-color-focus);\n --current-text-color: var(--swui-button-text-color-focus);\n --current-box-shadow: var(--swui-button-box-shadow-focus);\n }\n\n .Button-module_button__qBMg_:active {\n --current-background-color: var(--swui-button-background-color-active);\n --current-border-color: var(--swui-button-border-color-active);\n --current-icon-color: var(--swui-button-icon-color-active);\n --current-text-color: var(--swui-button-text-color-active);\n --current-box-shadow: var(--swui-button-box-shadow-active);\n }\n\n .Button-module_button__qBMg_:disabled {\n --current-background-color: var(--swui-button-background-color-disabled);\n --current-border-color: var(--swui-button-border-color-disabled);\n --current-icon-color: var(--swui-button-icon-color-disabled);\n --current-text-color: var(--swui-button-text-color-disabled);\n --current-box-shadow: var(--swui-button-box-shadow-disabled);\n cursor: not-allowed;\n }\n\n .Button-module_button__qBMg_.Button-module_normal__ZIWYY {\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled) {\n --current-background-color: var(--swui-button-danger-background-color);\n --current-border-color: var(--swui-button-danger-border-color);\n --current-text-color: var(--swui-button-danger-text-color);\n --current-icon-color: var(--swui-button-danger-icon-color);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):hover {\n --current-background-color: var(\n --swui-button-danger-background-color-hover\n );\n --current-border-color: var(--swui-button-danger-border-color-hover);\n --current-text-color: var(--swui-button-danger-text-color-hover);\n --current-icon-color: var(--swui-button-danger-icon-color-hover);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):focus {\n outline: 0;\n --current-background-color: var(\n --swui-button-danger-background-color-focus\n );\n --current-border-color: var(--swui-button-danger-border-color-focus);\n --current-text-color: var(--swui-button-danger-text-color-focus);\n --current-icon-color: var(--swui-button-danger-icon-color-focus);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):active {\n --current-background-color: var(\n --swui-button-danger-background-color-active\n );\n --current-border-color: var(--swui-button-danger-border-color-active);\n --current-text-color: var(--swui-button-danger-text-color-active);\n --current-icon-color: var(--swui-button-danger-icon-color-active);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled) {\n --current-background-color: var(--swui-button-success-background-color);\n --current-border-color: var(--swui-button-success-border-color);\n --current-text-color: var(--swui-button-success-text-color);\n --current-icon-color: var(--swui-button-success-icon-color);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):hover {\n --current-background-color: var(\n --swui-button-success-background-color-hover\n );\n --current-border-color: var(--swui-button-success-border-color-hover);\n --current-text-color: var(--swui-button-success-text-color-hover);\n --current-icon-color: var(--swui-button-success-icon-color-hover);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):focus {\n outline: 0;\n --current-background-color: var(\n --swui-button-success-background-color-focus\n );\n --current-border-color: var(--swui-button-success-border-color-focus);\n --current-text-color: var(--swui-button-success-text-color-focus);\n --current-icon-color: var(--swui-button-success-icon-color-focus);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):active {\n --current-background-color: var(\n --swui-button-success-background-color-active\n );\n --current-border-color: var(--swui-button-success-border-color-active);\n --current-text-color: var(--swui-button-success-text-color-active);\n --current-icon-color: var(--swui-button-success-icon-color-active);\n }\n";
|
|
321
|
-
var styles$
|
|
322
|
-
styleInject(css_248z$
|
|
339
|
+
var css_248z$g = ".Button-module_button__qBMg_ {\n /* Theme vars */\n --swui-button-line-height: 16px;\n --swui-button-font-weight: 400;\n --swui-button-icon-color: var(--swui-white);\n --swui-button-text-size: var(--swui-font-size-medium);\n --swui-button-text-color: var(--swui-white);\n --swui-button-text-decoration: none;\n --swui-button-letter-spacing: var(--swui-field-letter-spacing);\n --swui-button-padding-vertical: calc(var(--swui-metrics-spacing) - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-spacing) * 2 - 1px);\n\n /* Text */\n --swui-button-text-color-focus: var(--swui-button-text-color);\n --swui-button-text-color-hover: var(--swui-button-text-color);\n --swui-button-text-color-active: var(--swui-button-text-color);\n --swui-button-text-color-disabled: var(--swui-text-disabled-color);\n\n --swui-button-danger-text-color: var(--swui-button-text-color);\n --swui-button-danger-text-color-focus: var(--swui-button-danger-text-color);\n --swui-button-danger-text-color-hover: var(--swui-button-danger-text-color);\n --swui-button-danger-text-color-active: var(--swui-button-danger-text-color);\n\n --swui-button-success-text-color: var(--swui-button-text-color);\n --swui-button-success-text-color-focus: var(--swui-button-success-text-color);\n --swui-button-success-text-color-hover: var(--swui-button-success-text-color);\n --swui-button-success-text-color-active: var(\n --swui-button-success-text-color\n );\n\n /* Icon */\n --swui-button-icon-color-focus: var(--swui-button-icon-color);\n --swui-button-icon-color-hover: var(--swui-button-icon-color);\n --swui-button-icon-color-active: var(--swui-button-icon-color);\n --swui-button-icon-color-disabled: var(--swui-text-disabled-color);\n\n --swui-button-danger-icon-color: var(--swui-button-icon-color);\n --swui-button-danger-icon-color-focus: var(--swui-button-danger-icon-color);\n --swui-button-danger-icon-color-hover: var(--swui-button-danger-icon-color);\n --swui-button-danger-icon-color-active: var(--swui-button-danger-icon-color);\n\n --swui-button-success-icon-color: var(--swui-button-icon-color);\n --swui-button-success-icon-color-focus: var(--swui-button-success-icon-color);\n --swui-button-success-icon-color-hover: var(--swui-button-success-icon-color);\n --swui-button-success-icon-color-active: var(\n --swui-button-success-icon-color\n );\n\n /* Background */\n --swui-button-background-color: var(--swui-primary-action-color);\n --swui-button-background-color-active: var(\n --swui-primary-action-color-active\n );\n --swui-button-background-color-focus: var(--swui-primary-action-color-focus);\n --swui-button-background-color-hover: var(--swui-primary-action-color-hover);\n --swui-button-background-color-disabled: var(\n --swui-primary-action-color-disabled\n );\n\n --swui-button-danger-background-color: var(--lhds-color-red-500);\n --swui-button-danger-background-color-active: var(--lhds-color-red-900);\n --swui-button-danger-background-color-focus: var(--lhds-color-red-700);\n --swui-button-danger-background-color-hover: var(--lhds-color-red-600);\n\n --swui-button-success-background-color: var(--lhds-color-green-600);\n --swui-button-success-background-color-active: var(--lhds-color-green-900);\n --swui-button-success-background-color-focus: var(--lhds-color-green-800);\n --swui-button-success-background-color-hover: var(--lhds-color-green-700);\n\n /* Border */\n --swui-button-border-color: var(--swui-button-background-color);\n --swui-button-border-radius: var(--swui-border-radius);\n --swui-button-border-radius-icon-only: var(--swui-border-radius);\n --swui-button-border-color-focus: var(--swui-button-background-color-focus);\n --swui-button-border-color-hover: var(--swui-button-background-color-hover);\n --swui-button-border-color-active: var(--swui-button-background-color-active);\n --swui-button-border-color-disabled: var(--lhds-color-ui-400);\n\n --swui-button-danger-border-color: var(--swui-button-danger-background-color);\n --swui-button-danger-border-color-focus: var(\n --swui-button-danger-background-color-focus\n );\n --swui-button-danger-border-color-hover: var(\n --swui-button-danger-background-color-hover\n );\n --swui-button-danger-border-color-active: var(\n --swui-button-danger-background-color-active\n );\n\n --swui-button-success-border-color: var(\n --swui-button-success-background-color\n );\n --swui-button-success-border-color-focus: var(\n --swui-button-success-background-color-focus\n );\n --swui-button-success-border-color-hover: var(\n --swui-button-success-background-color-hover\n );\n --swui-button-success-border-color-active: var(\n --swui-button-success-background-color-active\n );\n\n /* Shadow */\n --swui-button-box-shadow-focus: 0 0 4px 0 var(--lhds-color-blue-300);\n --swui-button-box-shadow-hover: 0 1px 1px 1px rgba(29, 100, 171, 0.16),\n 0 0 1px 0 rgba(29, 100, 171, 0.16);\n --swui-button-box-shadow: 0 1px 0 0 rgba(29, 100, 171, 0.08),\n 0 0 1px -1px rgba(29, 100, 171, 0.1);\n --swui-button-box-shadow-active: none;\n --swui-button-box-shadow-disabled: none;\n\n /*\n * Styling\n */\n --current-background-color: var(--swui-button-background-color);\n --current-icon-height: 16px;\n --current-icon-color: var(--swui-button-icon-color);\n --current-text-color: var(--swui-button-text-color);\n --current-border-color: var(--swui-button-border-color);\n\n box-sizing: border-box;\n letter-spacing: var(--swui-button-letter-spacing);\n -webkit-text-decoration: var(--swui-button-text-decoration);\n text-decoration: var(--swui-button-text-decoration);\n padding: var(--swui-button-padding-vertical)\n var(--swui-button-padding-horizontal);\n border: 1px solid var(--current-border-color);\n background-color: var(--current-background-color);\n border-radius: var(--swui-button-border-radius);\n box-shadow: var(--current-box-shadow, var(--swui-button-box-shadow));\n color: var(--current-text-color);\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 cursor: pointer;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n display: -webkit-inline-flex;\n display: inline-flex;\n -webkit-align-items: center;\n align-items: center;\n -webkit-justify-content: center;\n justify-content: center;\n}\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT {\n padding: var(--swui-button-padding-vertical);\n color: var(--current-icon-color);\n -webkit-flex: none;\n flex: none;\n\n border-radius: var(--swui-button-border-radius-icon-only);\n\n width: 32px;\n height: 32px;\n -webkit-justify-content: center;\n justify-content: center;\n -webkit-align-items: center;\n align-items: center;\n display: -webkit-flex;\n display: flex;\n }\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT.Button-module_small__2fGop {\n width: 24px;\n height: 24px;\n }\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT.Button-module_large__22CGX {\n width: 40px;\n height: 40px;\n }\n\n /*\n * State and variants\n */\n\n .Button-module_button__qBMg_.Button-module_small__2fGop {\n --current-line-height: 16px;\n --swui-button-padding-vertical: calc(var(--swui-metrics-space) / 2 - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-space) - 1px);\n --current-text-size: 12px;\n }\n\n .Button-module_button__qBMg_.Button-module_large__22CGX {\n --current-line-height: 24px;\n --swui-button-padding-vertical: calc(var(--swui-metrics-space) - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-space) * 3 - 1px);\n --current-text-size: 16px;\n }\n\n .Button-module_button__qBMg_.Button-module_large__22CGX.Button-module_iconButton__1-wQT {\n --current-icon-height: 24px;\n }\n\n .Button-module_button__qBMg_:hover {\n --current-background-color: var(--swui-button-background-color-hover);\n --current-border-color: var(--swui-button-border-color-hover);\n --current-icon-color: var(--swui-button-icon-color-hover);\n --current-text-color: var(--swui-button-text-color-hover);\n --current-box-shadow: var(--swui-button-box-shadow-hover);\n }\n\n .Button-module_button__qBMg_:focus {\n outline: 0;\n --current-background-color: var(--swui-button-background-color-focus);\n --current-border-color: var(--swui-button-border-color-focus);\n --current-icon-color: var(--swui-button-icon-color-focus);\n --current-text-color: var(--swui-button-text-color-focus);\n --current-box-shadow: var(--swui-button-box-shadow-focus);\n }\n\n .Button-module_button__qBMg_:active {\n --current-background-color: var(--swui-button-background-color-active);\n --current-border-color: var(--swui-button-border-color-active);\n --current-icon-color: var(--swui-button-icon-color-active);\n --current-text-color: var(--swui-button-text-color-active);\n --current-box-shadow: var(--swui-button-box-shadow-active);\n }\n\n .Button-module_button__qBMg_:disabled {\n --current-background-color: var(--swui-button-background-color-disabled);\n --current-border-color: var(--swui-button-border-color-disabled);\n --current-icon-color: var(--swui-button-icon-color-disabled);\n --current-text-color: var(--swui-button-text-color-disabled);\n --current-box-shadow: var(--swui-button-box-shadow-disabled);\n cursor: not-allowed;\n }\n\n .Button-module_button__qBMg_.Button-module_normal__ZIWYY {\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled) {\n --current-background-color: var(--swui-button-danger-background-color);\n --current-border-color: var(--swui-button-danger-border-color);\n --current-text-color: var(--swui-button-danger-text-color);\n --current-icon-color: var(--swui-button-danger-icon-color);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):hover {\n --current-background-color: var(\n --swui-button-danger-background-color-hover\n );\n --current-border-color: var(--swui-button-danger-border-color-hover);\n --current-text-color: var(--swui-button-danger-text-color-hover);\n --current-icon-color: var(--swui-button-danger-icon-color-hover);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):focus {\n outline: 0;\n --current-background-color: var(\n --swui-button-danger-background-color-focus\n );\n --current-border-color: var(--swui-button-danger-border-color-focus);\n --current-text-color: var(--swui-button-danger-text-color-focus);\n --current-icon-color: var(--swui-button-danger-icon-color-focus);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):active {\n --current-background-color: var(\n --swui-button-danger-background-color-active\n );\n --current-border-color: var(--swui-button-danger-border-color-active);\n --current-text-color: var(--swui-button-danger-text-color-active);\n --current-icon-color: var(--swui-button-danger-icon-color-active);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled) {\n --current-background-color: var(--swui-button-success-background-color);\n --current-border-color: var(--swui-button-success-border-color);\n --current-text-color: var(--swui-button-success-text-color);\n --current-icon-color: var(--swui-button-success-icon-color);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):hover {\n --current-background-color: var(\n --swui-button-success-background-color-hover\n );\n --current-border-color: var(--swui-button-success-border-color-hover);\n --current-text-color: var(--swui-button-success-text-color-hover);\n --current-icon-color: var(--swui-button-success-icon-color-hover);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):focus {\n outline: 0;\n --current-background-color: var(\n --swui-button-success-background-color-focus\n );\n --current-border-color: var(--swui-button-success-border-color-focus);\n --current-text-color: var(--swui-button-success-text-color-focus);\n --current-icon-color: var(--swui-button-success-icon-color-focus);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):active {\n --current-background-color: var(\n --swui-button-success-background-color-active\n );\n --current-border-color: var(--swui-button-success-border-color-active);\n --current-text-color: var(--swui-button-success-text-color-active);\n --current-icon-color: var(--swui-button-success-icon-color-active);\n }\n";
|
|
340
|
+
var styles$e = {"button":"Button-module_button__qBMg_","iconButton":"Button-module_iconButton__1-wQT","small":"Button-module_small__2fGop","large":"Button-module_large__22CGX","normal":"Button-module_normal__ZIWYY","danger":"Button-module_danger__2b61k","success":"Button-module_success__23dYZ"};
|
|
341
|
+
styleInject(css_248z$g);
|
|
323
342
|
|
|
324
343
|
var getButtonLabel = function (label, success, successLabel, loading, loadingLabel) {
|
|
325
344
|
if (success) {
|
|
@@ -333,51 +352,51 @@ var getButtonLabel = function (label, success, successLabel, loading, loadingLab
|
|
|
333
352
|
}
|
|
334
353
|
};
|
|
335
354
|
|
|
336
|
-
var css_248z$
|
|
355
|
+
var css_248z$f = ".ButtonContent-module_iconLeft__21X2y,\n.ButtonContent-module_iconRight__3uF_p {\n color: var(--current-icon-color);\n height: var(--current-line-height);\n}\n\n.ButtonContent-module_iconLeft__21X2y,\n.ButtonContent-module_iconRight__3uF_p {\n height: var(--current-icon-height);\n}\n\n.ButtonContent-module_leftWrapper__PVApU,\n.ButtonContent-module_rightWrapper__3GBms {\n display: -webkit-flex;\n display: flex;\n -webkit-align-items: center;\n align-items: center;\n -webkit-justify-content: center;\n justify-content: center;\n}\n\n.ButtonContent-module_leftWrapper__PVApU:not(:last-child) {\n margin-right: var(--swui-metrics-indent);\n}\n\n.ButtonContent-module_rightWrapper__3GBms:not(:first-child) {\n margin-left: var(--swui-metrics-indent);\n}\n\n.ButtonContent-module_spinnerLeft__14VCD {\n display: -webkit-flex;\n display: flex;\n -webkit-align-items: center;\n align-items: center;\n}\n\n.ButtonContent-module_label__1aoKJ {\n white-space: nowrap;\n}\n";
|
|
337
356
|
var buttonStyles = {"iconLeft":"ButtonContent-module_iconLeft__21X2y","iconRight":"ButtonContent-module_iconRight__3uF_p","leftWrapper":"ButtonContent-module_leftWrapper__PVApU","rightWrapper":"ButtonContent-module_rightWrapper__3GBms","spinnerLeft":"ButtonContent-module_spinnerLeft__14VCD","label":"ButtonContent-module_label__1aoKJ"};
|
|
338
|
-
styleInject(css_248z$
|
|
357
|
+
styleInject(css_248z$f);
|
|
339
358
|
|
|
340
359
|
var ButtonContent = function (_a) {
|
|
341
360
|
var success = _a.success, loading = _a.loading, leftIcon = _a.leftIcon, left = _a.left, right = _a.right, rightIcon = _a.rightIcon, label = _a.label, iconClassName = _a.iconClassName, labelClassName = _a.labelClassName, spinnerClassName = _a.spinnerClassName, leftWrapperClassName = _a.leftWrapperClassName, rightWrapperClassName = _a.rightWrapperClassName;
|
|
342
|
-
return (
|
|
343
|
-
(success || loading || leftIcon || left) && (
|
|
344
|
-
|
|
345
|
-
label && (
|
|
346
|
-
(right || rightIcon) && (
|
|
361
|
+
return (React__namespace.createElement(React__namespace.Fragment, null,
|
|
362
|
+
(success || loading || leftIcon || left) && (React__namespace.createElement("div", { className: cx__default["default"](buttonStyles.leftWrapper, leftWrapperClassName) }, success ? (React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { icon: faCheck.faCheck, className: cx__default["default"](buttonStyles.iconLeft, iconClassName) })) : loading ? (React__namespace.createElement("div", { className: cx__default["default"](buttonStyles.iconLeft, buttonStyles.spinnerLeft, spinnerClassName) },
|
|
363
|
+
React__namespace.createElement(InputSpinner, null))) : left ? (left) : leftIcon ? (React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { icon: leftIcon, className: cx__default["default"](buttonStyles.iconLeft, iconClassName) })) : null)),
|
|
364
|
+
label && (React__namespace.createElement("span", { className: cx__default["default"](buttonStyles.label, labelClassName) }, label)),
|
|
365
|
+
(right || rightIcon) && (React__namespace.createElement("div", { className: cx__default["default"](buttonStyles.rightWrapper, rightWrapperClassName) }, right ? (right) : rightIcon ? (React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { icon: rightIcon, className: cx__default["default"](buttonStyles.iconRight, iconClassName) })) : null))));
|
|
347
366
|
};
|
|
348
367
|
|
|
349
|
-
var Button = styled__default[
|
|
368
|
+
var Button = styled__default["default"].button(styledSystem.width);
|
|
350
369
|
var PrimaryButton = React.forwardRef(function PrimaryButton(_a, ref) {
|
|
351
370
|
var label = _a.label, className = _a.className, _b = _a.size, size = _b === void 0 ? "medium" : _b, loadingLabel = _a.loadingLabel, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.success, success = _d === void 0 ? false : _d, successLabel = _a.successLabel, leftIcon = _a.leftIcon, left = _a.left, rightIcon = _a.rightIcon, right = _a.right, _e = _a.variant, variant = _e === void 0 ? "normal" : _e, disabled = _a.disabled, onClick = _a.onClick, buttonProps = __rest(_a, ["label", "className", "size", "loadingLabel", "loading", "success", "successLabel", "leftIcon", "left", "rightIcon", "right", "variant", "disabled", "onClick"]);
|
|
352
371
|
var buttonLabel = getButtonLabel(label, success, successLabel, loading, loadingLabel);
|
|
353
372
|
var hasLabel = Boolean((label && !success && !loading) ||
|
|
354
373
|
(success && successLabel) ||
|
|
355
374
|
(loading && loadingLabel));
|
|
356
|
-
return (
|
|
357
|
-
|
|
375
|
+
return (React__namespace.createElement(Button, __assign({ ref: ref, onClick: disabled || success || loading ? undefined : onClick, className: cx__default["default"](styles$e.button, styles$e[size], styles$e[variant], !hasLabel && styles$e.iconButton, className), disabled: disabled }, buttonProps),
|
|
376
|
+
React__namespace.createElement(ButtonContent, { success: success, loading: loading, leftIcon: leftIcon, left: left, right: right, rightIcon: rightIcon, label: buttonLabel })));
|
|
358
377
|
});
|
|
359
378
|
|
|
360
|
-
var css_248z$
|
|
361
|
-
var styles$
|
|
362
|
-
styleInject(css_248z$
|
|
379
|
+
var css_248z$e = ".FlatButton-module_flatButton__39zNZ {\n /* Theme vars */\n --swui-flat-button-font-weight: var(--swui-font-weight-text-bold);\n\n /* Text color */\n --swui-flat-button-text-color: var(--swui-primary-action-color);\n --swui-flat-button-text-color-active: var(--swui-primary-action-color);\n --swui-flat-button-text-color-disabled: var(--swui-text-disabled-color);\n\n /* Icon color */\n --swui-flat-button-icon-color: var(--swui-primary-action-color);\n --swui-flat-button-icon-color-active: var(--swui-primary-action-color);\n --swui-flat-button-icon-color-disabled: var(--swui-text-disabled-color);\n\n /* Background color */\n --swui-flat-button-background-color: transparent;\n --swui-flat-button-background-color-hover: var(--lhds-color-blue-50);\n --swui-flat-button-background-color-active: var(--lhds-color-blue-100);\n --swui-flat-button-background-color-focus: transparent;\n --swui-flat-button-background-color-disabled: transparent;\n\n /* Inverted */\n --swui-flat-button-text-color-inverted: var(--lhds-color-blue-50);\n --swui-flat-button-text-color-inverted-active: var(--lhds-color-blue-50);\n --swui-flat-button-text-color-inverted-disabled: var(\n --swui-text-disabled-color-light\n );\n --swui-flat-button-icon-color-inverted: var(--lhds-color-blue-50);\n --swui-flat-button-icon-color-inverted-active: var(--lhds-color-blue-50);\n --swui-flat-button-icon-color-inverted-disabled: var(\n --swui-text-disabled-color-light\n );\n\n --swui-flat-button-background-inverted-color-focus: transparent;\n --swui-flat-button-background-inverted-color-disabled: transparent;\n\n --swui-flat-button-background-inverted-color-hover: var(\n --lhds-color-blue-800\n );\n --swui-flat-button-background-inverted-color-active: var(\n --lhds-color-blue-700\n );\n\n --swui-flat-box-shadow-focus: 0 0 4px 0 var(--lhds-color-blue-300);\n\n /* PrimaryButton overrides */\n\n /* Text */\n --swui-button-font-weight: var(--swui-flat-button-font-weight);\n --swui-button-text-color: var(--swui-flat-button-text-color);\n --swui-button-text-color-focus: var(--swui-flat-button-text-color);\n --swui-button-text-color-hover: var(--swui-flat-button-text-color);\n --swui-button-text-color-active: var(--swui-flat-button-text-color-active);\n --swui-button-text-color-disabled: var(\n --swui-flat-button-text-color-disabled\n );\n\n --swui-button-danger-text-color: var(--lhds-color-red-500);\n --swui-button-success-text-color: var(--lhds-color-green-600);\n\n /* Icon */\n --swui-button-icon-color: var(--swui-flat-button-icon-color);\n --swui-button-icon-color-focus: var(--swui-flat-button-icon-color);\n --swui-button-icon-color-hover: var(--swui-flat-button-icon-color);\n --swui-button-icon-color-active: var(--swui-flat-button-icon-color-active);\n --swui-button-icon-color-disabled: var(\n --swui-flat-button-icon-color-disabled\n );\n\n --swui-button-danger-icon-color: var(--lhds-color-red-500);\n --swui-button-success-icon-color: var(--lhds-color-green-600);\n\n /* Background */\n --swui-button-background-color: var(--swui-flat-button-background-color);\n --swui-button-background-color-hover: var(\n --swui-flat-button-background-color-hover\n );\n --swui-button-background-color-focus: var(\n --swui-flat-button-background-color-focus\n );\n --swui-button-background-color-active: var(\n --swui-flat-button-background-color-active\n );\n --swui-button-background-color-disabled: var(\n --swui-flat-button-background-color-disabled\n );\n\n --swui-button-danger-background-color: var(\n --swui-flat-button-background-color\n );\n --swui-button-danger-background-color-hover: var(--lhds-color-red-50);\n --swui-button-danger-background-color-focus: var(\n --swui-flat-button-background-color-focus\n );\n --swui-button-danger-background-color-active: var(--lhds-color-red-100);\n\n --swui-button-success-background-color: var(\n --swui-flat-button-background-color\n );\n --swui-button-success-background-color-hover: var(--lhds-color-green-50);\n --swui-button-success-background-color-focus: var(\n --swui-flat-button-background-color-focus\n );\n --swui-button-success-background-color-active: var(--lhds-color-green-100);\n\n /* Border */\n --swui-button-border-color: transparent;\n --swui-button-border-color-hover: transparent;\n --swui-button-border-color-focus: transparent;\n --swui-button-border-color-active: transparent;\n --swui-button-border-color-disabled: transparent;\n --swui-button-border-radius-icon-only: 50%;\n\n --swui-button-danger-border-color: var(--swui-button-border-color);\n --swui-button-danger-border-color-hover: var(\n --swui-button-border-color-hover\n );\n --swui-button-danger-border-color-focus: var(\n --swui-button-border-color-active\n );\n --swui-button-danger-border-color-active: var(\n --swui-button-border-color-disabled\n );\n\n --swui-button-success-border-color: var(--swui-button-border-color);\n --swui-button-success-border-color-hover: var(\n --swui-button-border-color-hover\n );\n --swui-button-success-border-color-focus: var(\n --swui-button-border-color-active\n );\n --swui-button-success-border-color-active: var(\n --swui-button-border-color-disabled\n );\n\n /* Shadow */\n --swui-button-box-shadow: none;\n --swui-button-box-shadow-hover: none;\n --swui-button-box-shadow-focus: var(--swui-flat-box-shadow-focus);\n --swui-button-box-shadow-active: none;\n --swui-button-box-shadow-disabled: none;\n}\n\n .FlatButton-module_flatButton__39zNZ.FlatButton-module_inverted__20MxE {\n /* Text */\n --swui-button-text-color: var(--swui-flat-button-text-color-inverted);\n --swui-button-text-color-hover: var(--swui-flat-button-text-color-inverted);\n --swui-button-text-color-focus: var(--swui-flat-button-text-color-inverted);\n --swui-button-text-color-active: var(\n --swui-flat-button-text-color-inverted-active\n );\n --swui-button-text-color-disabled: var(\n --swui-flat-button-text-color-inverted-disabled\n );\n\n /* Icon */\n --swui-button-icon-color: var(--swui-flat-button-icon-color-inverted);\n --swui-button-icon-color-focus: var(--swui-flat-button-icon-color-inverted);\n --swui-button-icon-color-hover: var(--swui-flat-button-icon-color-inverted);\n --swui-button-icon-color-active: var(\n --swui-flat-button-icon-color-inverted-active\n );\n --swui-button-icon-color-disabled: var(\n --swui-flat-button-icon-color-inverted-disabled\n );\n\n /* Background */\n --swui-button-background-color: transparent;\n --swui-button-background-color-hover: var(\n --swui-flat-button-background-inverted-color-hover\n );\n --swui-button-background-color-focus: var(\n --swui-flat-button-background-inverted-color-focus\n );\n --swui-button-background-color-active: var(\n --swui-flat-button-background-inverted-color-active\n );\n --swui-button-background-color-disabled: var(\n --swui-flat-button-background-inverted-color-disabled\n );\n }\n";
|
|
380
|
+
var styles$d = {"flatButton":"FlatButton-module_flatButton__39zNZ","inverted":"FlatButton-module_inverted__20MxE"};
|
|
381
|
+
styleInject(css_248z$e);
|
|
363
382
|
|
|
364
383
|
var FlatButton = React.forwardRef(function FlatButton(_a, ref) {
|
|
365
384
|
var className = _a.className, inverted = _a.inverted, props = __rest(_a, ["className", "inverted"]);
|
|
366
|
-
return (
|
|
385
|
+
return (React__namespace.createElement(PrimaryButton, __assign({ ref: ref, className: cx__default["default"](styles$d.flatButton, inverted && styles$d.inverted, className) }, props)));
|
|
367
386
|
});
|
|
368
387
|
|
|
369
|
-
var css_248z$
|
|
370
|
-
var styles$
|
|
371
|
-
styleInject(css_248z$
|
|
388
|
+
var css_248z$d = ".SecondaryButton-module_secondaryButton__3s-vw {\n /* PrimaryButton overrides */\n\n /* Text */\n --swui-button-text-color: var(--lhds-color-ui-700);\n --swui-button-text-color-hover: var(--lhds-color-ui-700);\n --swui-button-text-color-focus: var(--lhds-color-ui-700);\n --swui-button-text-color-active: var(--lhds-color-blue-500);\n\n --swui-button-danger-text-color-active: var(--lhds-color-red-500);\n --swui-button-success-text-color-active: var(--lhds-color-green-600);\n\n /* Icon */\n --swui-button-icon-color: var(--lhds-color-blue-500);\n --swui-button-icon-color-hover: var(--lhds-color-blue-500);\n --swui-button-icon-color-focus: var(--lhds-color-blue-500);\n --swui-button-icon-color-active: var(--lhds-color-blue-500);\n\n --swui-button-danger-icon-color: var(--lhds-color-red-500);\n --swui-button-success-icon-color: var(--lhds-color-green-600);\n\n /* Background */\n --swui-button-background-color: var(--swui-white);\n --swui-button-background-color-hover: var(--lhds-color-blue-50);\n --swui-button-background-color-focus: var(--swui-white);\n --swui-button-background-color-active: var(--lhds-color-blue-100);\n --swui-button-background-color-disabled: var(--lhds-color-ui-300);\n\n --swui-button-danger-background-color: var(--swui-button-background-color);\n --swui-button-danger-background-color-hover: var(--lhds-color-red-50);\n --swui-button-danger-background-color-focus: var(\n --swui-button-background-color\n );\n --swui-button-danger-background-color-active: var(--lhds-color-red-100);\n\n --swui-button-success-background-color: var(--swui-button-background-color);\n --swui-button-success-background-color-hover: var(--lhds-color-green-50);\n --swui-button-success-background-color-focus: var(\n --swui-button-background-color\n );\n --swui-button-success-background-color-active: var(--lhds-color-green-100);\n\n /* Border */\n --swui-button-border-color: var(--lhds-color-ui-400);\n --swui-button-border-color-hover: var(--lhds-color-blue-400);\n --swui-button-border-color-focus: var(--lhds-color-blue-600);\n --swui-button-border-color-active: var(--lhds-color-blue-500);\n --swui-button-border-color-disabled: var(--lhds-color-ui-400);\n\n --swui-button-danger-border-color: var(--swui-button-border-color);\n --swui-button-danger-border-color-hover: var(--lhds-color-red-400);\n --swui-button-danger-border-color-focus: var(--lhds-color-red-600);\n --swui-button-danger-border-color-active: var(--lhds-color-red-500);\n\n --swui-button-success-border-color: var(--swui-button-border-color);\n --swui-button-success-border-color-hover: var(--lhds-color-green-500);\n --swui-button-success-border-color-focus: var(--lhds-color-green-700);\n --swui-button-success-border-color-active: var(--lhds-color-green-600);\n\n /* Shadow */\n --swui-button-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06),\n 0 0 1px -1px rgba(0, 0, 0, 0.1);\n --swui-button-box-shadow-hover: 0 0 1px 0 rgba(29, 100, 171, 0.16),\n 0 1px 1px 1px rgba(29, 100, 171, 0.16);\n --swui-button-box-shadow-focus: 0 0 4px 0 var(--lhds-color-blue-300);\n --swui-button-box-shadow-active: none;\n --swui-button-box-shadow-disabled: none;\n}\n";
|
|
389
|
+
var styles$c = {"secondaryButton":"SecondaryButton-module_secondaryButton__3s-vw"};
|
|
390
|
+
styleInject(css_248z$d);
|
|
372
391
|
|
|
373
392
|
var SecondaryButton = React.forwardRef(function SecondaryButton(_a, ref) {
|
|
374
393
|
var className = _a.className, props = __rest(_a, ["className"]);
|
|
375
|
-
return (
|
|
394
|
+
return (React__namespace.createElement(PrimaryButton, __assign({ ref: ref, className: cx__default["default"](styles$c.secondaryButton, className) }, props)));
|
|
376
395
|
});
|
|
377
396
|
|
|
378
|
-
var css_248z$
|
|
397
|
+
var css_248z$c = ".ButtonLink-module_buttonLink__3DxGT {\n text-decoration: none;\n}\n";
|
|
379
398
|
var buttonLinkStyles = {"buttonLink":"ButtonLink-module_buttonLink__3DxGT"};
|
|
380
|
-
styleInject(css_248z$
|
|
399
|
+
styleInject(css_248z$c);
|
|
381
400
|
|
|
382
401
|
var PrimaryButtonLink = React.forwardRef(function PrimaryButtonLink(_a, ref) {
|
|
383
402
|
var label = _a.label, className = _a.className, _b = _a.size, size = _b === void 0 ? "medium" : _b, loadingLabel = _a.loadingLabel, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.success, success = _d === void 0 ? false : _d, successLabel = _a.successLabel, leftIcon = _a.leftIcon, left = _a.left, rightIcon = _a.rightIcon, right = _a.right, _e = _a.variant, variant = _e === void 0 ? "normal" : _e, anchorProps = __rest(_a, ["label", "className", "size", "loadingLabel", "loading", "success", "successLabel", "leftIcon", "left", "rightIcon", "right", "variant"]);
|
|
@@ -385,73 +404,73 @@ var PrimaryButtonLink = React.forwardRef(function PrimaryButtonLink(_a, ref) {
|
|
|
385
404
|
var hasLabel = Boolean((label && !success && !loading) ||
|
|
386
405
|
(success && successLabel) ||
|
|
387
406
|
(loading && loadingLabel));
|
|
388
|
-
return (
|
|
389
|
-
|
|
407
|
+
return (React__namespace.createElement("a", __assign({ ref: ref, className: cx__default["default"](buttonLinkStyles.buttonLink, styles$e.button, styles$e[size], styles$e[variant], !hasLabel && styles$e.iconButton, className) }, anchorProps),
|
|
408
|
+
React__namespace.createElement(ButtonContent, { success: success, loading: loading, leftIcon: leftIcon, left: left, right: right, rightIcon: rightIcon, label: buttonLabel })));
|
|
390
409
|
});
|
|
391
410
|
|
|
392
411
|
var FlatButtonLink = React.forwardRef(function FlatButtonLink(_a, ref) {
|
|
393
412
|
var className = _a.className, inverted = _a.inverted, props = __rest(_a, ["className", "inverted"]);
|
|
394
|
-
return (
|
|
413
|
+
return (React__namespace.createElement(PrimaryButtonLink, __assign({ ref: ref, className: cx__default["default"](styles$d.flatButton, inverted && styles$d.inverted, className) }, props)));
|
|
395
414
|
});
|
|
396
415
|
|
|
397
416
|
var SecondaryButtonLink = React.forwardRef(function SecondaryButtonLink(_a, ref) {
|
|
398
417
|
var className = _a.className, props = __rest(_a, ["className"]);
|
|
399
|
-
return (
|
|
418
|
+
return (React__namespace.createElement(PrimaryButtonLink, __assign({ ref: ref, className: cx__default["default"](styles$c.secondaryButton, className) }, props)));
|
|
400
419
|
});
|
|
401
420
|
|
|
402
421
|
var css_248z$b = ".ButtonGroup-module_buttonGroup__nzigh {\n display: -webkit-flex;\n display: flex;\n}\n\n .ButtonGroup-module_buttonGroup__nzigh > button {\n margin: 0;\n position: relative;\n }\n\n .ButtonGroup-module_buttonGroup__nzigh > button:not(:only-child):not(:last-child) {\n margin-right: -1px;\n }\n\n .ButtonGroup-module_buttonGroup__nzigh > button:hover,\n .ButtonGroup-module_buttonGroup__nzigh > button:focus {\n z-index: 1;\n }\n\n .ButtonGroup-module_buttonGroup__nzigh > button:not(:first-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .ButtonGroup-module_buttonGroup__nzigh > button:not(:last-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n";
|
|
403
|
-
var styles$
|
|
422
|
+
var styles$b = {"buttonGroup":"ButtonGroup-module_buttonGroup__nzigh"};
|
|
404
423
|
styleInject(css_248z$b);
|
|
405
424
|
|
|
406
425
|
var ButtonGroup = function (_a) {
|
|
407
426
|
var className = _a.className, children = _a.children;
|
|
408
|
-
return
|
|
427
|
+
return React__namespace.createElement("div", { className: cx__default["default"](styles$b.buttonGroup, className) }, children);
|
|
409
428
|
};
|
|
410
429
|
|
|
411
|
-
var css_248z$
|
|
430
|
+
var css_248z$a = ".UpDownButtons-module_upDownButtons__3an6- {\n --swui-stepper-button-focus-shadow: var(--swui-field-focus-shadow);\n --swui-stepper-button-width: 25px;\n -webkit-align-self: stretch;\n align-self: stretch;\n}\n\n .UpDownButtons-module_upDownButtons__3an6- .UpDownButtons-module_button__1d9KV {\n width: var(--swui-stepper-button-width);\n border: none;\n cursor: pointer;\n -webkit-flex: 1;\n flex: 1;\n }\n\n .UpDownButtons-module_upDownButtons__3an6- .UpDownButtons-module_button__1d9KV:focus {\n outline: none;\n box-shadow: var(--swui-stepper-button-focus-shadow);\n }\n\n .UpDownButtons-module_upDownButtons__3an6- .UpDownButtons-module_button__1d9KV:disabled {\n background-color: var(--swui-textinput-bg-color-disabled);\n }\n";
|
|
412
431
|
var styles$a = {"upDownButtons":"UpDownButtons-module_upDownButtons__3an6-","button":"UpDownButtons-module_button__1d9KV"};
|
|
413
|
-
styleInject(css_248z$
|
|
432
|
+
styleInject(css_248z$a);
|
|
414
433
|
|
|
415
434
|
var UpDownButtons = function (_a) {
|
|
416
435
|
var onClickDown = _a.onClickDown, onClickUp = _a.onClickUp, iconColor = _a.iconColor, disabled = _a.disabled;
|
|
417
|
-
return (
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
436
|
+
return (React__namespace.createElement(core.Column, { className: styles$a.upDownButtons },
|
|
437
|
+
React__namespace.createElement("button", { onClick: onClickUp, className: styles$a.button, disabled: disabled },
|
|
438
|
+
React__namespace.createElement(core.Row, { justifyContent: "center", alignItems: "center" },
|
|
439
|
+
React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { icon: faCaretUp.faCaretUp, size: "sm", color: disabled ? "var(--swui-textinput-text-color-disabled)" : iconColor }))),
|
|
440
|
+
React__namespace.createElement("button", { onClick: onClickDown, className: styles$a.button, disabled: disabled },
|
|
441
|
+
React__namespace.createElement(core.Row, { justifyContent: "center", alignItems: "center" },
|
|
442
|
+
React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { icon: faCaretDown.faCaretDown, size: "sm", color: disabled ? "var(--swui-textinput-text-color-disabled)" : iconColor })))));
|
|
424
443
|
};
|
|
425
444
|
|
|
426
445
|
var Card = function (_a) {
|
|
427
446
|
var _b = _a.background, background = _b === void 0 ? "white" : _b, boxProps = __rest(_a, ["background"]);
|
|
428
|
-
return
|
|
447
|
+
return React__namespace.createElement(core.Column, __assign({ shadow: "box", background: background }, boxProps));
|
|
429
448
|
};
|
|
430
449
|
|
|
431
|
-
var css_248z$
|
|
432
|
-
var styles$
|
|
433
|
-
styleInject(css_248z$
|
|
450
|
+
var css_248z$9 = ".CardHeader-module_cardHeader__3-9N2 {\n display: -webkit-flex;\n display: flex;\n -webkit-flex-direction: row;\n flex-direction: row;\n -webkit-justify-content: space-between;\n justify-content: space-between;\n border-bottom: 1px solid var(--lhds-color-ui-300);\n padding: 0 calc(2 * var(--swui-metrics-indent));\n}\n\n .CardHeader-module_cardHeader__3-9N2.CardHeader-module_standard__2eUI- {\n height: 56px;\n }\n\n .CardHeader-module_cardHeader__3-9N2.CardHeader-module_compact__1f2db {\n height: 48px;\n }\n";
|
|
451
|
+
var styles$9 = {"cardHeader":"CardHeader-module_cardHeader__3-9N2","standard":"CardHeader-module_standard__2eUI-","compact":"CardHeader-module_compact__1f2db"};
|
|
452
|
+
styleInject(css_248z$9);
|
|
434
453
|
|
|
435
454
|
var CardHeader = function (_a) {
|
|
436
455
|
var text = _a.text, _b = _a.variant, variant = _b === void 0 ? "standard" : _b, contentAfterHeading = _a.contentAfterHeading, contentRight = _a.contentRight, contentLeft = _a.contentLeft, contentCenter = _a.contentCenter;
|
|
437
|
-
return (
|
|
438
|
-
|
|
439
|
-
contentLeft && (
|
|
456
|
+
return (React__namespace.createElement("div", { className: cx__default["default"](styles$9.cardHeader, styles$9[variant]) },
|
|
457
|
+
React__namespace.createElement(core.Row, { alignItems: "center" },
|
|
458
|
+
contentLeft && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
440
459
|
contentLeft,
|
|
441
|
-
|
|
442
|
-
text && (
|
|
443
|
-
|
|
444
|
-
|
|
460
|
+
React__namespace.createElement(core.Indent, null))),
|
|
461
|
+
text && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
462
|
+
React__namespace.createElement(core.Heading, { variant: variant === "compact" ? "h4" : "h3" }, text),
|
|
463
|
+
React__namespace.createElement(core.Indent, null))),
|
|
445
464
|
contentAfterHeading),
|
|
446
|
-
contentCenter &&
|
|
447
|
-
|
|
465
|
+
contentCenter && React__namespace.createElement(core.Row, { alignItems: "center" }, contentCenter),
|
|
466
|
+
React__namespace.createElement(core.Row, { alignItems: "center" }, contentRight)));
|
|
448
467
|
};
|
|
449
468
|
|
|
450
|
-
var CardBody = function (props) { return (
|
|
469
|
+
var CardBody = function (props) { return (React__namespace.createElement(core.Column, __assign({ indent: 2, spacing: 2 }, props))); };
|
|
451
470
|
|
|
452
|
-
var css_248z$
|
|
453
|
-
var styles$
|
|
454
|
-
styleInject(css_248z$
|
|
471
|
+
var css_248z$8 = ".Chip-module_chip__3Uf1d {\n /* Theme vars */\n --swui-chip-font-size: var(--swui-font-size-small);\n --swui-chip-line-height: var(--swui-line-height-small);\n --swui-chip-font-weight: var(--swui-font-weight-text);\n --swui-chip-font-family: var(--swui-font-primary);\n --swui-chip-letter-spacing: var(--swui-text-letter-spacing);\n --swui-chip-height: 24px;\n --swui-chip-border-radius: var(--swui-border-radius);\n\n /* State vars */\n --current-text-color: var(--swui-white);\n --current-bg-color: var(--lhds-color-blue-50);\n --current-bg-color-hover: var(--lhds-color-blue-600);\n --current-bg-color-focus: var(--lhds-color-blue-700);\n --current-bg-color-active: var(--lhds-color-blue-800);\n\n /* Styling */\n box-sizing: border-box;\n display: -webkit-inline-flex;\n display: inline-flex;\n -webkit-flex-direction: row;\n flex-direction: row;\n border-radius: var(--swui-chip-border-radius);\n background-color: var(--current-bg-color);\n}\n\n .Chip-module_chip__3Uf1d .Chip-module_chipCell__2bQON {\n font-family: var(--swui-chip-font-family);\n font-size: var(--swui-chip-font-size);\n font-weight: var(--swui-chip-font-weight);\n line-height: var(--swui-chip-line-height);\n color: var(--current-text-color);\n height: var(--swui-chip-height);\n display: -webkit-flex;\n display: flex;\n -webkit-align-items: center;\n align-items: center;\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_label__3gHgv {\n white-space: nowrap;\n padding: 0 var(--swui-metrics-space);\n }\n\n .Chip-module_chip__3Uf1d button {\n background: transparent;\n border: none;\n cursor: pointer;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n .Chip-module_chip__3Uf1d button:hover {\n background-color: var(--current-bg-color-hover);\n }\n\n .Chip-module_chip__3Uf1d button:focus {\n background-color: var(--current-bg-color-focus);\n outline: none;\n }\n\n .Chip-module_chip__3Uf1d button:active {\n background-color: var(--current-bg-color-active);\n }\n\n .Chip-module_chip__3Uf1d button:first-child {\n border-top-left-radius: var(--swui-chip-border-radius);\n border-bottom-left-radius: var(--swui-chip-border-radius);\n }\n\n .Chip-module_chip__3Uf1d button:last-child {\n border-top-right-radius: var(--swui-chip-border-radius);\n border-bottom-right-radius: var(--swui-chip-border-radius);\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_clickable__3zjMU {\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1 {\n padding-left: var(--swui-metrics-space);\n padding-right: var(--swui-metrics-space);\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1 svg {\n color: var(--current-text-color);\n }\n\n .Chip-module_chip__3Uf1d.Chip-module_primary__3kb_i {\n --current-bg-color: var(--swui-primary-action-color);\n --current-text-color: var(--swui-white);\n --current-bg-color-hover: var(--lhds-color-blue-600);\n --current-bg-color-focus: var(--lhds-color-blue-700);\n --current-bg-color-active: var(--lhds-color-blue-800);\n }\n\n .Chip-module_chip__3Uf1d.Chip-module_secondary__2hWgY {\n --current-bg-color: var(--lhds-color-blue-100);\n --current-text-color: var(--lhds-color-blue-800);\n --current-bg-color-hover: var(--lhds-color-blue-200);\n --current-bg-color-focus: var(--lhds-color-blue-200);\n --current-bg-color-active: var(--lhds-color-blue-300);\n }\n";
|
|
472
|
+
var styles$8 = {"chip":"Chip-module_chip__3Uf1d","chipCell":"Chip-module_chipCell__2bQON","label":"Chip-module_label__3gHgv","clickable":"Chip-module_clickable__3zjMU","close":"Chip-module_close__2uEi1","primary":"Chip-module_primary__3kb_i","secondary":"Chip-module_secondary__2hWgY"};
|
|
473
|
+
styleInject(css_248z$8);
|
|
455
474
|
|
|
456
475
|
var Chip = function (_a) {
|
|
457
476
|
var onClickRemove = _a.onClickRemove, onClick = _a.onClick, label = _a.label, _b = _a.variant, variant = _b === void 0 ? "primary" : _b, className = _a.className;
|
|
@@ -462,24 +481,24 @@ var Chip = function (_a) {
|
|
|
462
481
|
onClick();
|
|
463
482
|
}
|
|
464
483
|
};
|
|
465
|
-
return (
|
|
466
|
-
onClick ? (
|
|
467
|
-
onClickRemove && (
|
|
468
|
-
|
|
484
|
+
return (React__namespace.createElement("div", { className: cx__default["default"](styles$8.chip, styles$8[variant], onClickRemove ? styles$8.removable : undefined, className) },
|
|
485
|
+
onClick ? (React__namespace.createElement("button", { onClick: onClickHandler, className: cx__default["default"](styles$8.chipCell, styles$8.label) }, label)) : (React__namespace.createElement("div", { className: cx__default["default"](styles$8.chipCell, styles$8.label) }, label)),
|
|
486
|
+
onClickRemove && (React__namespace.createElement("button", { className: cx__default["default"](styles$8.chipCell, styles$8.close), onClick: onClickRemove },
|
|
487
|
+
React__namespace.createElement(Icon, { icon: faTimes.faTimes, size: 10 })))));
|
|
469
488
|
};
|
|
470
489
|
|
|
471
|
-
var Label =
|
|
490
|
+
var Label = React__namespace.memo(function (_a) {
|
|
472
491
|
var text = _a.text, _b = _a.optional, optional = _b === void 0 ? false : _b, children = _a.children, maxCharacters = _a.maxCharacters, row = _a.row, textWidth = _a.textWidth, htmlFor = _a.htmlFor, boxProps = __rest(_a, ["text", "optional", "children", "maxCharacters", "row", "textWidth", "htmlFor"]);
|
|
473
492
|
var extraInfoLabel = getExtraInfoLabel(optional, maxCharacters);
|
|
474
|
-
var infoLabel = extraInfoLabel && (
|
|
475
|
-
return (
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
!row &&
|
|
480
|
-
|
|
493
|
+
var infoLabel = extraInfoLabel && (React__namespace.createElement(core.Text, { color: theme.cssColor("--lhds-color-ui-600"), variant: "caption", size: "small" }, extraInfoLabel));
|
|
494
|
+
return (React__namespace.createElement("label", { htmlFor: htmlFor },
|
|
495
|
+
React__namespace.createElement(core.Box, __assign({}, boxProps, { row: row }),
|
|
496
|
+
React__namespace.createElement(core.Row, { alignItems: "center", width: textWidth },
|
|
497
|
+
React__namespace.createElement(core.Text, { color: theme.cssColor("--lhds-color-ui-600"), size: "small", whiteSpace: "nowrap" }, text),
|
|
498
|
+
!row && React__namespace.createElement(core.Indent, { num: 1.5 }, infoLabel)),
|
|
499
|
+
React__namespace.createElement(core.Space, null),
|
|
481
500
|
children),
|
|
482
|
-
row && (
|
|
501
|
+
row && (React__namespace.createElement(core.Row, { justifyContent: "flex-end", indent: 0.5, spacing: 0.5 }, infoLabel))));
|
|
483
502
|
});
|
|
484
503
|
var getExtraInfoLabel = function (optional, maxCharacters) {
|
|
485
504
|
var list = [];
|
|
@@ -495,58 +514,58 @@ var getExtraInfoLabel = function (optional, maxCharacters) {
|
|
|
495
514
|
return undefined;
|
|
496
515
|
};
|
|
497
516
|
|
|
498
|
-
var css_248z$
|
|
499
|
-
var styles$
|
|
500
|
-
styleInject(css_248z$
|
|
517
|
+
var css_248z$7 = ".Badge-module_badge__25Moi {\n --swui-badge-notification-bg-color: var(--swui-primary-action-color);\n --swui-badge-warning-bg-color: var(--swui-state-alert-color);\n --swui-badge-error-bg-color: var(--swui-state-error-color);\n --swui-badge-text-color: var(--swui-white);\n --swui-badge-size: 18px;\n\n display: -webkit-flex;\n\n display: flex;\n overflow: hidden;\n border-radius: calc(var(--swui-badge-size) / 2);\n border-width: 0;\n min-width: var(--swui-badge-size);\n height: var(--swui-badge-size);\n -webkit-align-items: center;\n align-items: center;\n -webkit-justify-content: center;\n justify-content: center;\n}\n\n .Badge-module_badge__25Moi.Badge-module_info__298ml {\n background: var(--swui-badge-notification-bg-color);\n }\n\n .Badge-module_badge__25Moi.Badge-module_warning__GXF16 {\n background: var(--swui-badge-warning-bg-color);\n }\n\n .Badge-module_badge__25Moi.Badge-module_error__1AEyC {\n background: var(--swui-badge-error-bg-color);\n }\n\n .Badge-module_badge__25Moi .Badge-module_label__8WT89 {\n line-height: var(--swui-badge-size);\n color: var(--swui-badge-text-color);\n }\n";
|
|
518
|
+
var styles$7 = {"badge":"Badge-module_badge__25Moi","info":"Badge-module_info__298ml","warning":"Badge-module_warning__GXF16","error":"Badge-module_error__1AEyC","label":"Badge-module_label__8WT89"};
|
|
519
|
+
styleInject(css_248z$7);
|
|
501
520
|
|
|
502
521
|
var Badge = function (_a) {
|
|
503
522
|
var label = _a.label, _b = _a.variant, variant = _b === void 0 ? "info" : _b;
|
|
504
|
-
return (
|
|
505
|
-
|
|
523
|
+
return (React__namespace.createElement("div", { className: cx__default["default"](styles$7.badge, styles$7[variant]) },
|
|
524
|
+
React__namespace.createElement(core.SmallerText, { color: "var(--swui-badge-text-color)", className: styles$7.label }, label)));
|
|
506
525
|
};
|
|
507
526
|
|
|
508
527
|
var WithBadge = function (_a) {
|
|
509
528
|
var children = _a.children, _b = _a.top, top = _b === void 0 ? "10px" : _b, _c = _a.left, left = _c === void 0 ? "-5px" : _c, _d = _a.hideBadge, hideBadge = _d === void 0 ? false : _d, badgeProps = __rest(_a, ["children", "top", "left", "hideBadge"]);
|
|
510
|
-
return (
|
|
529
|
+
return (React__namespace.createElement(core.Row, null,
|
|
511
530
|
children,
|
|
512
|
-
|
|
513
|
-
|
|
531
|
+
React__namespace.createElement("div", { style: { position: "relative" } }, !hideBadge ? (React__namespace.createElement(core.Box, { top: top, left: left, position: "absolute" },
|
|
532
|
+
React__namespace.createElement(Badge, __assign({}, badgeProps)))) : null)));
|
|
514
533
|
};
|
|
515
534
|
|
|
516
|
-
var css_248z$
|
|
517
|
-
var styles$
|
|
518
|
-
styleInject(css_248z$
|
|
535
|
+
var css_248z$6 = ".ToggleButton-module_toggleButton__1RElt {\n --swui-toggle-button-width: 28px;\n --swui-toggle-button-height: 28px;\n --swui-toggle-button-bg-pressed: var(--swui-primary-action-color);\n --swui-toggle-button-bg-not-pressed: var(--lhds-color-blue-100);\n --swui-toggle-button-text-color-pressed: var(--lhds-color-blue-50);\n --swui-toggle-button-text-color-not-pressed: var(--swui-text-color);\n\n /*\n * Styling\n */\n\n width: var(--swui-toggle-button-width);\n height: var(--swui-toggle-button-height);\n\n background: var(--swui-toggle-button-bg-not-pressed);\n}\n\n .ToggleButton-module_toggleButton__1RElt .ToggleButton-module_label__33eiu {\n color: var(--swui-toggle-button-text-color-not-pressed);\n }\n\n .ToggleButton-module_toggleButton__1RElt.ToggleButton-module_pressed__2Sv3Z {\n background: var(--swui-toggle-button-bg-pressed);\n }\n\n .ToggleButton-module_toggleButton__1RElt.ToggleButton-module_pressed__2Sv3Z .ToggleButton-module_label__33eiu {\n color: var(--swui-toggle-button-text-color-pressed);\n }\n";
|
|
536
|
+
var styles$6 = {"toggleButton":"ToggleButton-module_toggleButton__1RElt","label":"ToggleButton-module_label__33eiu","pressed":"ToggleButton-module_pressed__2Sv3Z"};
|
|
537
|
+
styleInject(css_248z$6);
|
|
519
538
|
|
|
520
539
|
var ToggleButton = function (_a) {
|
|
521
540
|
var label = _a.label, pressed = _a.pressed, first = _a.first, last = _a.last, width = _a.width, onClick = _a.onClick;
|
|
522
541
|
var borderRadius = React.useMemo(function () {
|
|
523
542
|
return (first ? "3px" : 0) + " " + (last ? "3px 3px" : "0 0") + " " + (first ? "3px" : "0");
|
|
524
543
|
}, [first, last]);
|
|
525
|
-
return (
|
|
526
|
-
|
|
527
|
-
|
|
544
|
+
return (React__namespace.createElement(core.Clickable, { onClick: function () { return onClick && onClick(!pressed); } },
|
|
545
|
+
React__namespace.createElement(core.Box, { className: cx__default["default"](styles$6.toggleButton, pressed && styles$6.pressed), width: width, justifyContent: "center", alignItems: "center", borderRadius: borderRadius },
|
|
546
|
+
React__namespace.createElement(core.Text, { size: "small", className: styles$6.label }, label))));
|
|
528
547
|
};
|
|
529
548
|
|
|
530
|
-
var css_248z$
|
|
531
|
-
var styles$
|
|
532
|
-
styleInject(css_248z$
|
|
549
|
+
var css_248z$5 = ".ActionMenu-module_actionMenu__1jy4N {\n --swui-action-menu-menu-background: var(--swui-white);\n --swui-action-menu-border-radius: 4px;\n\n background: var(--swui-action-menu-menu-background);\n border-radius: var(--swui-action-menu-border-radius);\n}\n\n .ActionMenu-module_actionMenu__1jy4N.ActionMenu-module_standard__3S_rk {\n }\n\n .ActionMenu-module_actionMenu__1jy4N.ActionMenu-module_outlined__7pm5v {\n border: 1px solid var(--lhds-color-blue-500);\n }\n";
|
|
550
|
+
var styles$5 = {"actionMenu":"ActionMenu-module_actionMenu__1jy4N","standard":"ActionMenu-module_standard__3S_rk","outlined":"ActionMenu-module_outlined__7pm5v"};
|
|
551
|
+
styleInject(css_248z$5);
|
|
533
552
|
|
|
534
553
|
var ActionMenu = function (_a) {
|
|
535
554
|
var top = _a.top, children = _a.children, width = _a.width, shadow = _a.shadow, _b = _a.variant, variant = _b === void 0 ? "standard" : _b, trapFocus = _a.trapFocus;
|
|
536
555
|
if (!children) {
|
|
537
556
|
return null;
|
|
538
557
|
}
|
|
539
|
-
return (
|
|
540
|
-
|
|
558
|
+
return (React__namespace.createElement(focus.FocusScope, { contain: trapFocus },
|
|
559
|
+
React__namespace.createElement(core.Column, { className: cx__default["default"](styles$5.actionMenu, styles$5[variant]), width: width, shadow: shadow },
|
|
541
560
|
top,
|
|
542
|
-
|
|
561
|
+
React__namespace.createElement(core.Column, null, children))));
|
|
543
562
|
};
|
|
544
563
|
|
|
545
|
-
var ActionMenuContext =
|
|
564
|
+
var ActionMenuContext = React__namespace.createContext({});
|
|
546
565
|
|
|
547
|
-
var css_248z$
|
|
548
|
-
var styles$
|
|
549
|
-
styleInject(css_248z$
|
|
566
|
+
var css_248z$4 = ".ActionMenuItem-module_actionMenuItem__3daZq {\n --swui-action-menu-item-height: 40px;\n\n --swui-action-menu-icon-color: var(--swui-text-primary-color);\n --swui-action-menu-icon-color-disabled: var(--swui-text-disabled-color);\n --swui-action-menu-icon-color-focus: var(--swui-text-primary-color);\n --swui-action-menu-icon-color-hover: var(--swui-text-primary-color);\n\n --swui-action-menu-item-background: var(--swui-white);\n --swui-action-menu-item-background-focus: var(\n --swui-primary-action-color-focus-light\n );\n --swui-action-menu-item-background-hover: var(\n --swui-primary-action-color-hover-light\n );\n --swui-action-menu-item-background-disabled: var(--swui-white);\n --swui-action-menu-item-background-disabled-focus: var(\n --swui-text-disabled-color-light\n );\n\n --swui-action-menu-item-label-color: var(--swui-text-primary-color);\n --swui-action-menu-item-label-color-disabled: var(--swui-text-disabled-color);\n --swui-action-menu-item-label-color-focus: var(--swui-text-primary-color);\n --swui-action-menu-item-label-color-hover: var(--swui-text-primary-color);\n\n --swui-action-menu-item-text-color: var(--swui-text-primary-color-light);\n --swui-action-menu-item-text-color-disabled: var(\n --swui-text-disabled-color-light\n );\n --swui-action-menu-item-text-color-focus: var(\n --swui-text-primary-color-light\n );\n --swui-action-menu-item-text-color-hover: var(\n --swui-text-primary-color-light\n );\n\n --current-item-background: var(--swui-action-menu-item-background);\n --current-item-label-color: var(--swui-action-menu-item-label-color);\n --current-item-text-color: var(--swui-action-menu-item-text-color);\n --current-item-icon-color: var(--swui-action-menu-icon-color);\n\n display: -webkit-inline-flex;\n\n display: inline-flex;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 0;\n background: var(--current-item-background);\n border: none;\n -webkit-align-items: stretch;\n align-items: stretch;\n outline: 0;\n text-decoration: none;\n font-size: var(--swui-button-text-size);\n line-height: var(--swui-button-line-height);\n font-weight: var(--swui-button-font-weight);\n font-family: var(--swui-font-buttons);\n}\n\n .ActionMenuItem-module_actionMenuItem__3daZq:not(.ActionMenuItem-module_actionMenuItemContent__j_JEf) {\n cursor: pointer;\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq:first-child {\n border-top-left-radius: var(--swui-action-menu-border-radius);\n border-top-right-radius: var(--swui-action-menu-border-radius);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq:last-child {\n border-bottom-left-radius: var(--swui-action-menu-border-radius);\n border-bottom-right-radius: var(--swui-action-menu-border-radius);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq:disabled,\n .ActionMenuItem-module_actionMenuItem__3daZq[aria-disabled=\"true\"] {\n cursor: not-allowed;\n --current-item-background: var(--swui-action-menu-item-background-disabled);\n --current-item-label-color: var(\n --swui-action-menu-item-label-color-disabled\n );\n --current-item-text-color: var(--swui-action-menu-item-text-color-disabled);\n --current-item-icon-color: var(--swui-action-menu-icon-color-disabled);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_standard__2yVXB:hover:not(.ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_standard__2yVXB:disabled,.ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_standard__2yVXB[aria-disabled=\"true\"],.ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_standard__2yVXB.ActionMenuItem-module_actionMenuItemContent__j_JEf) {\n --current-item-background: var(--swui-action-menu-item-background-hover);\n --current-item-label-color: var(\n --swui-action-menu-item-label-color-hover\n );\n --current-item-text-color: var(--swui-action-menu-item-text-color-hover);\n --current-item-icon-color: var(--swui-action-menu-icon-color-hover);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_standard__2yVXB:focus-visible {\n --current-item-background: var(--swui-action-menu-item-background-focus);\n --current-item-label-color: var(\n --swui-action-menu-item-label-color-focus\n );\n --current-item-text-color: var(--swui-action-menu-item-text-color-focus);\n --current-item-icon-color: var(--swui-action-menu-icon-color-focus);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_standard__2yVXB:disabled:focus-visible {\n --current-item-background: var(\n --swui-action-menu-item-background-disabled-focus\n );\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_danger__Sq8qO {\n --current-item-icon-color: var(--lhds-color-red-500);\n --current-item-label-color: var(--lhds-color-red-600);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_danger__Sq8qO:hover:not(.ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_danger__Sq8qO:disabled,.ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_danger__Sq8qO[aria-disabled=\"true\"],.ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_danger__Sq8qO.ActionMenuItem-module_actionMenuItemContent__j_JEf) {\n --current-item-background: var(--lhds-color-red-50);\n --current-item-icon-color: var(--lhds-color-red-500);\n --current-item-label-color: var(--lhds-color-red-600);\n\n --current-item-text-color: var(--swui-action-menu-item-text-color-hover);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_danger__Sq8qO:focus-visible {\n --current-item-background: var(--lhds-color-red-50);\n --current-item-label-color: var(--lhds-color-red-600);\n --current-item-icon-color: var(--lhds-color-red-500);\n\n --current-item-text-color: var(--swui-action-menu-item-text-color-focus);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_danger__Sq8qO:disabled:focus-visible {\n --current-item-background: var(\n --swui-action-menu-item-background-disabled-focus\n );\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_success__2qQKP {\n --current-item-icon-color: var(--lhds-color-green-600);\n --current-item-label-color: var(--lhds-color-green-600);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_success__2qQKP:hover:not(.ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_success__2qQKP:disabled,.ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_success__2qQKP[aria-disabled=\"true\"],.ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_success__2qQKP.ActionMenuItem-module_actionMenuItemContent__j_JEf) {\n --current-item-background: var(--lhds-color-green-50);\n --current-item-icon-color: var(--lhds-color-green-600);\n --current-item-label-color: var(--lhds-color-green-600);\n\n --current-item-text-color: var(--swui-action-menu-item-text-color-hover);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_success__2qQKP:focus-visible {\n --current-item-background: var(--lhds-color-green-50);\n --current-item-label-color: var(--lhds-color-green-600);\n --current-item-icon-color: var(--lhds-color-green-600);\n\n --current-item-text-color: var(--swui-action-menu-item-text-color-focus);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_success__2qQKP:disabled:focus-visible {\n --current-item-background: var(\n --swui-action-menu-item-background-disabled-focus\n );\n }\n\n.ActionMenuItem-module_actionMenuItemLabel__T5-7U {\n color: var(--current-item-label-color);\n margin-right: auto;\n}\n\n.ActionMenuItem-module_actionMenuItemText__1zHot {\n color: var(--current-item-text-color);\n}\n\n.ActionMenuItem-module_actionMenuItemIcon__GyDyD {\n --current-icon-color: var(--current-item-icon-color);\n}\n\n.ActionMenuItem-module_actionMenuItemIconWrapper__2Pkdp {\n width: 20px;\n}\n\n.ActionMenuItem-module_actionMenuItemInnerContent__1cDjm {\n height: var(--swui-action-menu-item-height);\n}\n";
|
|
567
|
+
var styles$4 = {"actionMenuItem":"ActionMenuItem-module_actionMenuItem__3daZq","actionMenuItemContent":"ActionMenuItem-module_actionMenuItemContent__j_JEf","standard":"ActionMenuItem-module_standard__2yVXB","danger":"ActionMenuItem-module_danger__Sq8qO","success":"ActionMenuItem-module_success__2qQKP","actionMenuItemLabel":"ActionMenuItem-module_actionMenuItemLabel__T5-7U","actionMenuItemText":"ActionMenuItem-module_actionMenuItemText__1zHot","actionMenuItemIcon":"ActionMenuItem-module_actionMenuItemIcon__GyDyD","actionMenuItemIconWrapper":"ActionMenuItem-module_actionMenuItemIconWrapper__2Pkdp","actionMenuItemInnerContent":"ActionMenuItem-module_actionMenuItemInnerContent__1cDjm"};
|
|
568
|
+
styleInject(css_248z$4);
|
|
550
569
|
|
|
551
570
|
var useActionMenuLogic = function (_a, ref) {
|
|
552
571
|
var disableCloseOnClick = _a.disableCloseOnClick, onClick = _a.onClick;
|
|
@@ -587,93 +606,93 @@ var useActionMenuLogic = function (_a, ref) {
|
|
|
587
606
|
var ActionMenuCommonContent = function (_a) {
|
|
588
607
|
var _b;
|
|
589
608
|
var label = _a.label, left = _a.left, leftIcon = _a.leftIcon, loading = _a.loading, right = _a.right, rightIcon = _a.rightIcon, success = _a.success;
|
|
590
|
-
return (
|
|
591
|
-
|
|
592
|
-
_b[styles$
|
|
609
|
+
return (React__namespace.createElement(core.Row, { alignItems: "center", width: "100%", indent: 2, className: styles$4.actionMenuItemInnerContent },
|
|
610
|
+
React__namespace.createElement(ButtonContent, { success: success, loading: loading, leftIcon: leftIcon, left: left, right: right, rightIcon: rightIcon, label: label, labelClassName: styles$4.actionMenuItemLabel, iconClassName: styles$4.actionMenuItemIcon, leftWrapperClassName: cx__default["default"]((_b = {},
|
|
611
|
+
_b[styles$4.actionMenuItemIconWrapper] = success || loading || leftIcon,
|
|
593
612
|
_b)) })));
|
|
594
613
|
};
|
|
595
614
|
|
|
596
615
|
var ActionMenuLink = React.forwardRef(function ActionMenuLink(_a, ref) {
|
|
597
|
-
var success = _a.success, loading = _a.loading, leftIcon = _a.leftIcon, left = _a.left, right = _a.right, rightIcon = _a.rightIcon, label = _a.label
|
|
616
|
+
var success = _a.success, loading = _a.loading, leftIcon = _a.leftIcon, left = _a.left, right = _a.right, rightIcon = _a.rightIcon, label = _a.label; _a.iconClassName; _a.labelClassName; _a.spinnerClassName; _a.leftWrapperClassName; var _b = _a.variant, variant = _b === void 0 ? "standard" : _b, className = _a.className, disabled = _a.disabled, href = _a.href, onClick = _a.onClick, disableCloseOnClick = _a.disableCloseOnClick, props = __rest(_a, ["success", "loading", "leftIcon", "left", "right", "rightIcon", "label", "iconClassName", "labelClassName", "spinnerClassName", "leftWrapperClassName", "variant", "className", "disabled", "href", "onClick", "disableCloseOnClick"]);
|
|
598
617
|
var _c = useActionMenuLogic({ disableCloseOnClick: disableCloseOnClick, onClick: onClick }, ref), onClickHandler = _c.onClickHandler, onKeyDown = _c.onKeyDown, innerRef = _c.innerRef;
|
|
599
|
-
return (
|
|
600
|
-
|
|
618
|
+
return (React__namespace.createElement("a", __assign({}, props, { className: cx__default["default"](styles$4.actionMenuItem, styles$4[variant], className), onClick: disabled ? undefined : onClickHandler, onKeyDown: onKeyDown, "aria-disabled": disabled, href: disabled ? undefined : href, ref: innerRef }),
|
|
619
|
+
React__namespace.createElement(ActionMenuCommonContent, { success: success, loading: loading, leftIcon: leftIcon, left: left, right: right, rightIcon: rightIcon, label: label })));
|
|
601
620
|
});
|
|
602
621
|
|
|
603
622
|
var ActionMenuItem = React.forwardRef(function ActionMenuItem(_a, ref) {
|
|
604
|
-
var success = _a.success, loading = _a.loading, leftIcon = _a.leftIcon, left = _a.left, right = _a.right, rightIcon = _a.rightIcon, label = _a.label
|
|
623
|
+
var success = _a.success, loading = _a.loading, leftIcon = _a.leftIcon, left = _a.left, right = _a.right, rightIcon = _a.rightIcon, label = _a.label; _a.iconClassName; _a.labelClassName; _a.spinnerClassName; _a.leftWrapperClassName; var _b = _a.variant, variant = _b === void 0 ? "standard" : _b, className = _a.className, onClick = _a.onClick, disableCloseOnClick = _a.disableCloseOnClick, props = __rest(_a, ["success", "loading", "leftIcon", "left", "right", "rightIcon", "label", "iconClassName", "labelClassName", "spinnerClassName", "leftWrapperClassName", "variant", "className", "onClick", "disableCloseOnClick"]);
|
|
605
624
|
var _c = useActionMenuLogic({ disableCloseOnClick: disableCloseOnClick, onClick: onClick }, ref), onClickHandler = _c.onClickHandler, onKeyDown = _c.onKeyDown, innerRef = _c.innerRef;
|
|
606
|
-
return (
|
|
607
|
-
|
|
625
|
+
return (React__namespace.createElement("button", __assign({}, props, { className: cx__default["default"](styles$4.actionMenuItem, styles$4[variant], className), onKeyDown: onKeyDown, onClick: props.disabled ? undefined : onClickHandler, ref: innerRef }),
|
|
626
|
+
React__namespace.createElement(ActionMenuCommonContent, { success: success, loading: loading, leftIcon: leftIcon, left: left, right: right, rightIcon: rightIcon, label: label })));
|
|
608
627
|
});
|
|
609
628
|
|
|
610
629
|
var ActionMenuItemContent = React.forwardRef(function ActionMenuItemContent(_a, ref) {
|
|
611
|
-
var success = _a.success, loading = _a.loading, leftIcon = _a.leftIcon, left = _a.left, right = _a.right, rightIcon = _a.rightIcon, label = _a.label
|
|
630
|
+
var success = _a.success, loading = _a.loading, leftIcon = _a.leftIcon, left = _a.left, right = _a.right, rightIcon = _a.rightIcon, label = _a.label; _a.iconClassName; _a.labelClassName; _a.spinnerClassName; _a.leftWrapperClassName; var _b = _a.variant, variant = _b === void 0 ? "standard" : _b, className = _a.className, disabled = _a.disabled, bottom = _a.bottom, fullWidthBottomContent = _a.fullWidthBottomContent, props = __rest(_a, ["success", "loading", "leftIcon", "left", "right", "rightIcon", "label", "iconClassName", "labelClassName", "spinnerClassName", "leftWrapperClassName", "variant", "className", "disabled", "bottom", "fullWidthBottomContent"]);
|
|
612
631
|
var _c = useActionMenuLogic(props, ref), onKeyDown = _c.onKeyDown, innerRef = _c.innerRef;
|
|
613
|
-
return (
|
|
614
|
-
|
|
615
|
-
bottom && (
|
|
616
|
-
|
|
617
|
-
!fullWidthBottomContent && (success || loading || leftIcon) && (
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
632
|
+
return (React__namespace.createElement(core.Column, __assign({}, props, { className: cx__default["default"](styles$4.actionMenuItem, styles$4.actionMenuItemContent, styles$4[variant], className), ref: innerRef, onKeyDown: onKeyDown, "aria-disabled": disabled }),
|
|
633
|
+
React__namespace.createElement(ActionMenuCommonContent, { success: success, loading: loading, leftIcon: leftIcon, left: left, right: right, rightIcon: rightIcon, label: label }),
|
|
634
|
+
bottom && (React__namespace.createElement(React__namespace.Fragment, null,
|
|
635
|
+
React__namespace.createElement(core.Row, { indent: 2 },
|
|
636
|
+
!fullWidthBottomContent && (success || loading || leftIcon) && (React__namespace.createElement("div", { className: buttonStyles.leftWrapper },
|
|
637
|
+
React__namespace.createElement("div", { className: styles$4.actionMenuItemIconWrapper }))),
|
|
638
|
+
React__namespace.createElement(core.Row, { alignItems: "center", width: "100%" }, bottom)),
|
|
639
|
+
React__namespace.createElement(core.Space, { num: 1.5 })))));
|
|
621
640
|
});
|
|
622
641
|
|
|
623
642
|
var ActionMenuSeparator = function () {
|
|
624
|
-
return
|
|
643
|
+
return React__namespace.createElement(core.SeparatorLine, null);
|
|
625
644
|
};
|
|
626
645
|
|
|
627
|
-
var css_248z$
|
|
628
|
-
var styles$
|
|
629
|
-
styleInject(css_248z$
|
|
646
|
+
var css_248z$3 = ".Tab-module_tab__3Hb1M {\n --swui-tab-border-color: var(--lhds-color-ui-200);\n --swui-tab-bg-color-focus: var(--lhds-color-blue-100);\n --swui-tab-border-color-hover: var(--lhds-color-ui-400);\n --swui-tab-border-color-focus: var(--lhds-color-blue-200);\n --swui-tab-border-color-selected: var(--swui-primary-action-color);\n --swui-tab-label-color: var(--lhds-color-ui-500);\n --swui-tab-label-color-selected: var(--lhds-color-ui-700);\n\n /*\n State variables\n */\n\n --current-outer-border-bottom-color: transparent;\n --current-inner-border-bottom-color: var(--swui-tab-border-color);\n --current-inset-shadow: none;\n --current-label-color: var(--swui-tab-label-color);\n\n /*\n Styling\n */\n\n outline: none;\n height: var(--swui-tab-menu-height);\n padding: 0;\n display: -webkit-flex;\n display: flex;\n -webkit-align-items: stretch;\n align-items: stretch;\n box-sizing: border-box;\n font-size: var(--swui-font-size-medium);\n font-family: var(--swui-font-buttons);\n border: none;\n border-bottom: 1px solid var(--current-outer-border-bottom-color);\n cursor: pointer;\n background-color: transparent;\n color: var(--current-label-color);\n}\n\n .Tab-module_tab__3Hb1M .Tab-module_inner__jXnLu {\n display: -webkit-flex;\n display: flex;\n padding: 0 calc(var(--swui-metrics-indent) * 2);\n border-bottom: 1px solid var(--current-inner-border-bottom-color);\n box-sizing: border-box;\n -webkit-align-items: center;\n align-items: center;\n -webkit-justify-content: center;\n justify-content: center;\n box-shadow: var(--current-inset-shadow);\n }\n\n .Tab-module_tab__3Hb1M:focus:not(.Tab-module_selected__20X1B) {\n --current-outer-border-bottom-color: var(--swui-tab-border-color-focus);\n --current-inner-border-bottom-color: var(--swui-tab-border-color-focus);\n }\n\n .Tab-module_tab__3Hb1M.Tab-module_selected__20X1B {\n --current-outer-border-bottom-color: var(--swui-tab-border-color-selected);\n --current-inner-border-bottom-color: var(--swui-tab-border-color-selected);\n --current-label-color: var(--swui-tab-label-color-selected);\n }\n\n .Tab-module_tab__3Hb1M:hover:not(.Tab-module_selected__20X1B) {\n --current-outer-border-bottom-color: var(--swui-tab-border-color-hover);\n --current-inner-border-bottom-color: var(--swui-tab-border-color-hover);\n }\n";
|
|
647
|
+
var styles$3 = {"tab":"Tab-module_tab__3Hb1M","inner":"Tab-module_inner__jXnLu","selected":"Tab-module_selected__20X1B"};
|
|
648
|
+
styleInject(css_248z$3);
|
|
630
649
|
|
|
631
650
|
var Tab = React.forwardRef(function Tab(_a, ref) {
|
|
632
651
|
var selected = _a.selected, label = _a.label, _b = _a.loading, loading = _b === void 0 ? false : _b, left = _a.left, leftIcon = _a.leftIcon, right = _a.right, rightIcon = _a.rightIcon, _c = _a.success, success = _c === void 0 ? false : _c, _d = _a.tabIndex, tabIndex = _d === void 0 ? 0 : _d, // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
|
|
633
652
|
buttonProps = __rest(_a, ["selected", "label", "loading", "left", "leftIcon", "right", "rightIcon", "success", "tabIndex"]);
|
|
634
653
|
var buttonLabel = getButtonLabel(label, success, undefined, loading, undefined);
|
|
635
|
-
return (
|
|
636
|
-
|
|
637
|
-
|
|
654
|
+
return (React__namespace.createElement("button", __assign({ className: cx__default["default"](styles$3.tab, selected && styles$3.selected), role: "tab", "aria-selected": selected, tabIndex: tabIndex, ref: ref }, buttonProps),
|
|
655
|
+
React__namespace.createElement("div", { className: styles$3.inner },
|
|
656
|
+
React__namespace.createElement(ButtonContent, { success: success, loading: loading, leftIcon: leftIcon, left: left, right: right, rightIcon: rightIcon, label: buttonLabel }))));
|
|
638
657
|
});
|
|
639
658
|
|
|
640
|
-
var css_248z$
|
|
641
|
-
var styles$
|
|
642
|
-
styleInject(css_248z$
|
|
659
|
+
var css_248z$2 = ".TabMenu-module_tabMenu__2cR43 {\n --swui-tab-menu-height: 45px;\n --swui-tab-menu-border-color: var(--lhds-color-ui-200);\n\n /*\n Styling\n */\n display: -webkit-flex;\n display: flex;\n height: var(--swui-tab-menu-height);\n}\n\n .TabMenu-module_tabMenu__2cR43 .TabMenu-module_separator__2ed3d {\n display: -webkit-flex;\n display: flex;\n box-sizing: border-box;\n height: var(--swui-tab-menu-height);\n border-bottom: 1px solid transparent;\n }\n\n .TabMenu-module_tabMenu__2cR43 .TabMenu-module_separator__2ed3d.TabMenu-module_filler__3vRon {\n -webkit-flex-grow: 1;\n flex-grow: 1;\n }\n\n .TabMenu-module_tabMenu__2cR43 .TabMenu-module_separator__2ed3d.TabMenu-module_filler__3vRon .TabMenu-module_separatorInner__2h9wg {\n -webkit-flex-grow: 1;\n flex-grow: 1;\n }\n\n .TabMenu-module_tabMenu__2cR43 .TabMenu-module_separator__2ed3d:not(.TabMenu-module_filler__3vRon) .TabMenu-module_separatorInner__2h9wg {\n width: calc(var(--swui-metrics-indent) * 3);\n }\n\n .TabMenu-module_tabMenu__2cR43 .TabMenu-module_separator__2ed3d .TabMenu-module_separatorInner__2h9wg {\n border-bottom: 1px solid var(--swui-tab-menu-border-color);\n }\n";
|
|
660
|
+
var styles$2 = {"tabMenu":"TabMenu-module_tabMenu__2cR43","separator":"TabMenu-module_separator__2ed3d","filler":"TabMenu-module_filler__3vRon","separatorInner":"TabMenu-module_separatorInner__2h9wg"};
|
|
661
|
+
styleInject(css_248z$2);
|
|
643
662
|
|
|
644
663
|
var TabMenu = function (_a) {
|
|
645
664
|
var children = _a.children;
|
|
646
|
-
return (
|
|
647
|
-
React.Children.map(children, function (child, index) { return (
|
|
648
|
-
index > 0 && (
|
|
649
|
-
|
|
665
|
+
return (React__namespace.createElement("div", { className: styles$2.tabMenu, role: "tablist" },
|
|
666
|
+
React.Children.map(children, function (child, index) { return (React__namespace.createElement(React__namespace.Fragment, null,
|
|
667
|
+
index > 0 && (React__namespace.createElement("div", { className: styles$2.separator },
|
|
668
|
+
React__namespace.createElement("div", { className: styles$2.separatorInner }))),
|
|
650
669
|
child)); }),
|
|
651
|
-
|
|
652
|
-
|
|
670
|
+
React__namespace.createElement("div", { className: cx__default["default"](styles$2.separator, styles$2.filler) },
|
|
671
|
+
React__namespace.createElement("div", { className: styles$2.separatorInner }))));
|
|
653
672
|
};
|
|
654
673
|
|
|
655
|
-
var css_248z$
|
|
656
|
-
var styles$
|
|
657
|
-
styleInject(css_248z$
|
|
674
|
+
var css_248z$1 = ".Tag-module_tag__1jkHo {\n /* Theme vars */\n --swui-tag-font-size: var(--swui-font-size-small);\n --swui-tag-line-height: var(--swui-line-height-small);\n --swui-tag-font-weight: var(--swui-font-weight-text);\n --swui-tag-font-family: var(--swui-font-primary);\n --swui-tag-letter-spacing: var(--swui-text-letter-spacing);\n --swui-tag-height-normal: 24px;\n --swui-tag-height-small: 16px;\n --swui-tag-border-radius: var(--swui-border-radius);\n\n /* State vars */\n --current-text-color: var(--swui-white);\n --current-bg-color: var(--lhds-color-blue-50);\n --current-border-color: var(--swui-primary-action-color);\n --current-height: var(--swui-tag-height-normal);\n\n /* Styling */\n box-sizing: border-box;\n display: -webkit-inline-flex;\n display: inline-flex;\n -webkit-flex-direction: row;\n flex-direction: row;\n white-space: nowrap;\n border-radius: var(--swui-tag-border-radius);\n background-color: var(--current-bg-color);\n border: 1px solid var(--current-border-color);\n font-family: var(--swui-tag-font-family);\n font-size: var(--swui-tag-font-size);\n font-weight: var(--swui-tag-font-weight);\n line-height: var(--swui-tag-line-height);\n color: var(--current-text-color);\n height: var(--current-height);\n -webkit-align-items: center;\n align-items: center;\n padding: 0 var(--swui-metrics-space);\n}\n\n .Tag-module_tag__1jkHo.Tag-module_small__2WMmo {\n --current-height: var(--swui-tag-height-small);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_info__1Nb3P {\n --current-border-color: var(--lhds-color-blue-300);\n --current-bg-color: var(--lhds-color-blue-100);\n --current-text-color: var(--lhds-color-blue-800);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_error__322oJ {\n --current-border-color: var(--lhds-color-red-300);\n --current-bg-color: var(--lhds-color-red-50);\n --current-text-color: var(--lhds-color-red-800);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_warning__2TcGy {\n --current-border-color: var(--lhds-color-orange-300);\n --current-bg-color: var(--lhds-color-orange-50);\n --current-text-color: var(--lhds-color-orange-900);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_success__2MOAb {\n --current-border-color: var(--lhds-color-green-300);\n --current-bg-color: var(--lhds-color-green-50);\n --current-text-color: var(--lhds-color-green-800);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_passive__1ZzM0 {\n --current-border-color: var(--lhds-color-ui-300);\n --current-bg-color: var(--lhds-color-ui-50);\n --current-text-color: var(--lhds-color-ui-800);\n }\n";
|
|
675
|
+
var styles$1 = {"tag":"Tag-module_tag__1jkHo","small":"Tag-module_small__2WMmo","info":"Tag-module_info__1Nb3P","error":"Tag-module_error__322oJ","warning":"Tag-module_warning__2TcGy","success":"Tag-module_success__2MOAb","passive":"Tag-module_passive__1ZzM0"};
|
|
676
|
+
styleInject(css_248z$1);
|
|
658
677
|
|
|
659
678
|
var Tag = function (_a) {
|
|
660
679
|
var className = _a.className, _b = _a.variant, variant = _b === void 0 ? "info" : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, label = _a.label;
|
|
661
|
-
return (
|
|
680
|
+
return (React__namespace.createElement("div", { className: cx__default["default"](styles$1.tag, styles$1[variant], styles$1[size], className) }, label));
|
|
662
681
|
};
|
|
663
682
|
|
|
664
|
-
var css_248z
|
|
665
|
-
var styles
|
|
666
|
-
styleInject(css_248z
|
|
683
|
+
var css_248z = ".ValueTable-module_valueTable__14rOi {\n /**\n * Theme vars\n */\n --swui-value-table-height: 40px;\n width: 100%;\n}\n\n .ValueTable-module_valueTable__14rOi .ValueTable-module_row__1SZS5:not(:first-child) td {\n border-top: 1px solid var(--lhds-color-ui-300);\n }\n\n.ValueTable-module_relaxed__3e0gL {\n --swui-value-table-height: 48px;\n}\n\n.ValueTable-module_condensed__3Za7i {\n --swui-value-table-height: 32px;\n}\n\n.ValueTable-module_compact__3UL42 {\n --swui-value-table-height: 24px;\n}\n";
|
|
684
|
+
var styles = {"valueTable":"ValueTable-module_valueTable__14rOi","row":"ValueTable-module_row__1SZS5","relaxed":"ValueTable-module_relaxed__3e0gL","condensed":"ValueTable-module_condensed__3Za7i","compact":"ValueTable-module_compact__3UL42"};
|
|
685
|
+
styleInject(css_248z);
|
|
667
686
|
|
|
668
687
|
var ValueTable = function (_a) {
|
|
669
688
|
var children = _a.children, header = _a.header, footer = _a.footer, _b = _a.variant, variant = _b === void 0 ? "standard" : _b;
|
|
670
|
-
return (
|
|
671
|
-
header && (
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
footer && (
|
|
676
|
-
|
|
689
|
+
return (React__namespace.createElement(core.Column, null,
|
|
690
|
+
header && (React__namespace.createElement(core.Row, { spacing: true },
|
|
691
|
+
React__namespace.createElement(core.Heading, { variant: "h5" }, header))),
|
|
692
|
+
React__namespace.createElement("table", { cellPadding: 0, cellSpacing: 0, className: cx__default["default"](styles.valueTable, styles[variant]) },
|
|
693
|
+
React__namespace.createElement("tbody", null, React.Children.map(children, function (child, index) { return (React__namespace.createElement("tr", { key: index, className: styles.row }, child)); }))),
|
|
694
|
+
footer && (React__namespace.createElement(core.Row, { spacing: true },
|
|
695
|
+
React__namespace.createElement(core.Text, { size: "small", color: theme.cssColor("--lhds-color-ui-600") }, footer)))));
|
|
677
696
|
};
|
|
678
697
|
|
|
679
698
|
var ValueTableItem = function (_a) {
|
|
@@ -684,7 +703,7 @@ var ValueTableItem = function (_a) {
|
|
|
684
703
|
}
|
|
685
704
|
if (typeof value === "boolean") {
|
|
686
705
|
if (value) {
|
|
687
|
-
return (
|
|
706
|
+
return (React__namespace.createElement(Icon, { icon: faCheck.faCheck, size: 14, color: theme.cssColor("--lhds-color-ui-700") }));
|
|
688
707
|
}
|
|
689
708
|
else {
|
|
690
709
|
return "-";
|
|
@@ -695,12 +714,12 @@ var ValueTableItem = function (_a) {
|
|
|
695
714
|
}
|
|
696
715
|
return value;
|
|
697
716
|
}, [value]);
|
|
698
|
-
return (
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
717
|
+
return (React__namespace.createElement(React__namespace.Fragment, null,
|
|
718
|
+
React__namespace.createElement("td", null,
|
|
719
|
+
React__namespace.createElement(core.Row, { height: "var(--swui-value-table-height)", alignItems: "center", indent: labelIndent },
|
|
720
|
+
React__namespace.createElement(core.Text, { color: theme.cssColor("--lhds-color-ui-600"), variant: "bold", whiteSpace: "nowrap" }, label))),
|
|
721
|
+
React__namespace.createElement("td", null,
|
|
722
|
+
React__namespace.createElement(core.Row, { height: "var(--swui-value-table-height)", alignItems: "center", justifyContent: alignValue }, typeof formattedValue === "string" ? (React__namespace.createElement(core.Text, null, formattedValue)) : (formattedValue)))));
|
|
704
723
|
};
|
|
705
724
|
|
|
706
725
|
exports.ActionMenu = ActionMenu;
|