@stenajs-webui/elements 14.1.1 → 15.0.0-alpha.10
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/components/ui/icon/Icon.d.ts +4 -6
- package/dist/components/ui/icon/Icon.stories.d.ts +2 -14
- package/dist/index.es.js +219 -224
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +236 -223
- package/dist/index.js.map +1 -1
- package/package.json +5 -7
package/dist/index.es.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { forwardRef, Children, useState, useCallback, useMemo, useContext } from 'react';
|
|
3
|
+
import { Box, Row, Column, Heading, Space, Text, Indent, SmallerText, Clickable, useForwardedRef, SeparatorLine } from '@stenajs-webui/core';
|
|
3
4
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
4
5
|
import cx from 'classnames';
|
|
5
6
|
import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle';
|
|
@@ -103,20 +104,14 @@ function __makeTemplateObject(cooked, raw) {
|
|
|
103
104
|
return cooked;
|
|
104
105
|
}
|
|
105
106
|
|
|
106
|
-
var Icon = function (_a) {
|
|
107
|
-
var className = _a.className, _b = _a.color, color = _b === void 0 ? "var(--lhds-color-ui-500)" : _b, flip = _a.flip, icon = _a.icon,
|
|
108
|
-
var colors = {
|
|
109
|
-
iconColor: color,
|
|
110
|
-
iconColorHover: hoverColor,
|
|
111
|
-
};
|
|
112
|
-
var ref = useRef(null);
|
|
113
|
-
var mouseIsOver = useMouseIsOver(ref);
|
|
107
|
+
var Icon = forwardRef(function Icon(_a, ref) {
|
|
108
|
+
var className = _a.className, _b = _a.color, color = _b === void 0 ? "var(--lhds-color-ui-500)" : _b, flip = _a.flip, icon = _a.icon, pulse = _a.pulse, rotation = _a.rotation, _c = _a.size, size = _c === void 0 ? 20 : _c, spin = _a.spin, style = _a.style, transform = _a.transform, display = _a.display, props = __rest(_a, ["className", "color", "flip", "icon", "pulse", "rotation", "size", "spin", "style", "transform", "display"]);
|
|
114
109
|
if (!icon) {
|
|
115
110
|
return null;
|
|
116
111
|
}
|
|
117
|
-
return (createElement(Box, { justifyContent: "center", alignItems: "center", ref: ref },
|
|
118
|
-
createElement(FontAwesomeIcon, __assign({ className: className, color:
|
|
119
|
-
};
|
|
112
|
+
return (React.createElement(Box, { justifyContent: "center", alignItems: "center", display: display, ref: ref },
|
|
113
|
+
React.createElement(FontAwesomeIcon, __assign({ className: className, color: color, flip: flip, icon: icon, pulse: pulse, rotation: rotation, spin: spin, style: __assign({ fontSize: size }, style), transform: transform }, props))));
|
|
114
|
+
});
|
|
120
115
|
|
|
121
116
|
function styleInject(css, ref) {
|
|
122
117
|
if ( ref === void 0 ) ref = {};
|
|
@@ -145,13 +140,13 @@ function styleInject(css, ref) {
|
|
|
145
140
|
}
|
|
146
141
|
}
|
|
147
142
|
|
|
148
|
-
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";
|
|
149
|
-
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"};
|
|
150
|
-
styleInject(css_248z);
|
|
143
|
+
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";
|
|
144
|
+
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"};
|
|
145
|
+
styleInject(css_248z$m);
|
|
151
146
|
|
|
152
|
-
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); }
|
|
147
|
+
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); }
|
|
153
148
|
|
|
154
|
-
var _ref = /*#__PURE__*/createElement("circle", {
|
|
149
|
+
var _ref$1 = /*#__PURE__*/React.createElement("circle", {
|
|
155
150
|
className: "spinner-large_svg__path",
|
|
156
151
|
fill: "none",
|
|
157
152
|
cx: 50,
|
|
@@ -160,20 +155,20 @@ var _ref = /*#__PURE__*/createElement("circle", {
|
|
|
160
155
|
});
|
|
161
156
|
|
|
162
157
|
function SvgSpinnerLarge(props) {
|
|
163
|
-
return /*#__PURE__*/createElement("svg", _extends({
|
|
158
|
+
return /*#__PURE__*/React.createElement("svg", _extends$1({
|
|
164
159
|
className: "spinner-large_svg__spinner",
|
|
165
160
|
viewBox: "0 0 100 100",
|
|
166
161
|
xmlns: "http://www.w3.org/2000/svg"
|
|
167
|
-
}, props), _ref);
|
|
162
|
+
}, props), _ref$1);
|
|
168
163
|
}
|
|
169
164
|
|
|
170
|
-
var css_248z$
|
|
171
|
-
var styles$
|
|
172
|
-
styleInject(css_248z$
|
|
165
|
+
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";
|
|
166
|
+
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"};
|
|
167
|
+
styleInject(css_248z$l);
|
|
173
168
|
|
|
174
169
|
var Spinner = function (_a) {
|
|
175
170
|
var _b = _a.size, size = _b === void 0 ? "medium" : _b, _c = _a.variant, variant = _c === void 0 ? "standard" : _c, color = _a.color;
|
|
176
|
-
return (createElement(SvgSpinnerLarge, { className: cx(styles$
|
|
171
|
+
return (React.createElement(SvgSpinnerLarge, { className: cx(styles$j.spinner, styles$j[size], color ? styles$j.customColor : styles$j[variant]), style: { stroke: color } }));
|
|
177
172
|
};
|
|
178
173
|
|
|
179
174
|
var iconPerVariant = {
|
|
@@ -185,65 +180,65 @@ var iconPerVariant = {
|
|
|
185
180
|
};
|
|
186
181
|
var Banner = function (_a) {
|
|
187
182
|
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;
|
|
188
|
-
return (createElement("div", { className: cx(styles.banner, styles[variant]) },
|
|
189
|
-
createElement(Row, { justifyContent: "space-between" },
|
|
190
|
-
createElement(Row, { flex: "none", width: "64px", justifyContent: "center", alignItems: "center" }, (icon || iconPerVariant[variant] || loading) && (createElement(Fragment, null, loading ? (createElement(Spinner, { size: "tiny", color: "var(--current-icon-color)" })) : (createElement(Icon, { icon: icon !== null && icon !== void 0 ? icon : iconPerVariant[variant], size: 24, className: styles.icon }))))),
|
|
191
|
-
createElement(Row, { justifyContent: "space-between", flexGrow: 1 },
|
|
192
|
-
createElement(Column, { justifyContent: "center" },
|
|
193
|
-
headerText && (createElement(Fragment, null,
|
|
194
|
-
createElement(Heading, { variant: "h5" }, headerText))),
|
|
195
|
-
text && (createElement(Fragment, null,
|
|
196
|
-
headerText && createElement(Space, null),
|
|
197
|
-
createElement(Text, null, text)))),
|
|
198
|
-
contentRight && (createElement(Fragment, null,
|
|
199
|
-
createElement(Indent, null),
|
|
200
|
-
createElement(Column, { justifyContent: "center" }, contentRight))))),
|
|
201
|
-
children && (createElement(Row, null,
|
|
202
|
-
createElement(Box, { minWidth: "64px" }),
|
|
203
|
-
createElement(Box, null,
|
|
204
|
-
createElement(Fragment, null,
|
|
205
|
-
createElement(Space, null),
|
|
183
|
+
return (React.createElement("div", { className: cx(styles$k.banner, styles$k[variant]) },
|
|
184
|
+
React.createElement(Row, { justifyContent: "space-between" },
|
|
185
|
+
React.createElement(Row, { flex: "none", width: "64px", justifyContent: "center", alignItems: "center" }, (icon || iconPerVariant[variant] || loading) && (React.createElement(React.Fragment, null, loading ? (React.createElement(Spinner, { size: "tiny", color: "var(--current-icon-color)" })) : (React.createElement(Icon, { icon: icon !== null && icon !== void 0 ? icon : iconPerVariant[variant], size: 24, className: styles$k.icon }))))),
|
|
186
|
+
React.createElement(Row, { justifyContent: "space-between", flexGrow: 1 },
|
|
187
|
+
React.createElement(Column, { justifyContent: "center" },
|
|
188
|
+
headerText && (React.createElement(React.Fragment, null,
|
|
189
|
+
React.createElement(Heading, { variant: "h5" }, headerText))),
|
|
190
|
+
text && (React.createElement(React.Fragment, null,
|
|
191
|
+
headerText && React.createElement(Space, null),
|
|
192
|
+
React.createElement(Text, null, text)))),
|
|
193
|
+
contentRight && (React.createElement(React.Fragment, null,
|
|
194
|
+
React.createElement(Indent, null),
|
|
195
|
+
React.createElement(Column, { justifyContent: "center" }, contentRight))))),
|
|
196
|
+
children && (React.createElement(Row, null,
|
|
197
|
+
React.createElement(Box, { minWidth: "64px" }),
|
|
198
|
+
React.createElement(Box, null,
|
|
199
|
+
React.createElement(React.Fragment, null,
|
|
200
|
+
React.createElement(Space, null),
|
|
206
201
|
children))))));
|
|
207
202
|
};
|
|
208
203
|
|
|
209
|
-
var css_248z$
|
|
210
|
-
var styles$
|
|
211
|
-
styleInject(css_248z$
|
|
204
|
+
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";
|
|
205
|
+
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_"};
|
|
206
|
+
styleInject(css_248z$k);
|
|
212
207
|
|
|
213
208
|
var Link = forwardRef(function (_a, ref) {
|
|
214
209
|
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"]);
|
|
215
|
-
return (createElement("a", __assign({ tabIndex: !disableTabIndex ? tabIndex : undefined, className: cx(styles$
|
|
216
|
-
iconLeft && (createElement("span", { style: { marginLeft: "2px", marginRight: "6px" } },
|
|
217
|
-
createElement(FontAwesomeIcon, { icon: iconLeft }))),
|
|
210
|
+
return (React.createElement("a", __assign({ tabIndex: !disableTabIndex ? tabIndex : undefined, className: cx(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),
|
|
211
|
+
iconLeft && (React.createElement("span", { style: { marginLeft: "2px", marginRight: "6px" } },
|
|
212
|
+
React.createElement(FontAwesomeIcon, { icon: iconLeft }))),
|
|
218
213
|
children,
|
|
219
|
-
iconRight && (createElement("span", { style: { marginLeft: "6px", marginRight: "2px" } },
|
|
220
|
-
createElement(FontAwesomeIcon, { icon: iconRight })))));
|
|
214
|
+
iconRight && (React.createElement("span", { style: { marginLeft: "6px", marginRight: "2px" } },
|
|
215
|
+
React.createElement(FontAwesomeIcon, { icon: iconRight })))));
|
|
221
216
|
});
|
|
222
217
|
|
|
223
|
-
var css_248z$
|
|
224
|
-
var styles$
|
|
225
|
-
styleInject(css_248z$
|
|
218
|
+
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";
|
|
219
|
+
var styles$h = {"resultItemRow":"ResultListRow-module_resultItemRow__1EvRY","link":"ResultListRow-module_link__1uK6U"};
|
|
220
|
+
styleInject(css_248z$j);
|
|
226
221
|
|
|
227
222
|
var ResultListRow = function (_a) {
|
|
228
223
|
var text = _a.text, onClickLink = _a.onClickLink, linkText = _a.linkText;
|
|
229
|
-
return (createElement("div", { className: styles$
|
|
230
|
-
createElement(Text, null, text),
|
|
231
|
-
linkText && (createElement(Link, { className: styles$
|
|
224
|
+
return (React.createElement("div", { className: styles$h.resultItemRow },
|
|
225
|
+
React.createElement(Text, null, text),
|
|
226
|
+
linkText && (React.createElement(Link, { className: styles$h.link, onClick: onClickLink }, linkText))));
|
|
232
227
|
};
|
|
233
228
|
|
|
234
|
-
var css_248z$
|
|
235
|
-
var styles$
|
|
236
|
-
styleInject(css_248z$
|
|
229
|
+
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";
|
|
230
|
+
var styles$g = {"resultList":"ResultList-module_resultList__2NZyU"};
|
|
231
|
+
styleInject(css_248z$i);
|
|
237
232
|
|
|
238
233
|
var ResultList = function (_a) {
|
|
239
234
|
var children = _a.children;
|
|
240
|
-
return (createElement("ul", { className: styles$
|
|
235
|
+
return (React.createElement("ul", { className: styles$g.resultList }, Children.map(children, function (child) { return (React.createElement("li", null, child)); })));
|
|
241
236
|
};
|
|
242
237
|
|
|
243
238
|
var ResultListBanner = function (_a) {
|
|
244
239
|
var bannerState = _a.bannerState, _b = _a.variant, variant = _b === void 0 ? "standard" : _b, bannerProps = __rest(_a, ["bannerState", "variant"]);
|
|
245
|
-
return (createElement(Banner, __assign({}, bannerProps, { headerText: bannerState.headerText, text: bannerState.text, variant: variant }), bannerState.items && (createElement(Fragment, null,
|
|
246
|
-
createElement(ResultList, null, bannerState.items.map(function (item, index) { return (createElement(ResultListRow, { text: item.text, linkText: item.linkText, onClickLink: item.onClickLink, key: index })); }))))));
|
|
240
|
+
return (React.createElement(Banner, __assign({}, bannerProps, { headerText: bannerState.headerText, text: bannerState.text, variant: variant }), bannerState.items && (React.createElement(React.Fragment, null,
|
|
241
|
+
React.createElement(ResultList, null, bannerState.items.map(function (item, index) { return (React.createElement(ResultListRow, { text: item.text, linkText: item.linkText, onClickLink: item.onClickLink, key: index })); }))))));
|
|
247
242
|
};
|
|
248
243
|
|
|
249
244
|
var useResultListBannerState = function (initialState) {
|
|
@@ -266,57 +261,57 @@ var useResultListBannerState = function (initialState) {
|
|
|
266
261
|
};
|
|
267
262
|
};
|
|
268
263
|
|
|
269
|
-
function _extends
|
|
264
|
+
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); }
|
|
270
265
|
|
|
271
|
-
var _ref
|
|
266
|
+
var _ref = /*#__PURE__*/React.createElement("path", {
|
|
272
267
|
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"
|
|
273
268
|
});
|
|
274
269
|
|
|
275
270
|
function SvgSpinnerSmall(props) {
|
|
276
|
-
return /*#__PURE__*/createElement("svg", _extends
|
|
271
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
277
272
|
viewBox: "0 0 1024 1024",
|
|
278
273
|
"data-icon": "loading",
|
|
279
274
|
width: "1em",
|
|
280
275
|
height: "1em",
|
|
281
276
|
fill: "currentColor",
|
|
282
277
|
"aria-hidden": "true"
|
|
283
|
-
}, props), _ref
|
|
278
|
+
}, props), _ref);
|
|
284
279
|
}
|
|
285
280
|
|
|
286
281
|
var loadingCircle = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 100% {\n transform:rotate(360deg)\n }\n"], ["\n 100% {\n transform:rotate(360deg)\n }\n"])));
|
|
287
282
|
var InputSpinner = function (_a) {
|
|
288
283
|
var className = _a.className, color = _a.color, size = _a.size;
|
|
289
|
-
return (createElement(ClassNames, null, function (_a) {
|
|
284
|
+
return (React.createElement(ClassNames, null, function (_a) {
|
|
290
285
|
var css = _a.css, cx = _a.cx;
|
|
291
|
-
return (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)) }));
|
|
286
|
+
return (React.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)) }));
|
|
292
287
|
}));
|
|
293
288
|
};
|
|
294
289
|
var templateObject_1, templateObject_2;
|
|
295
290
|
|
|
296
291
|
var BreadCrumbs = function (_a) {
|
|
297
292
|
var children = _a.children;
|
|
298
|
-
return (createElement(Row, { alignItems: "center", spacing: true, indent: 2 }, Children.map(children, function (child, index) { return (createElement(Fragment, null, child && (createElement(Fragment, null,
|
|
299
|
-
index > 0 && (createElement(Indent, { num: 2 },
|
|
300
|
-
createElement(Icon, { icon: stenaBreadCrumbArrow, size: 8, color: cssColor("--lhds-color-ui-700") }))),
|
|
293
|
+
return (React.createElement(Row, { alignItems: "center", spacing: true, indent: 2 }, Children.map(children, function (child, index) { return (React.createElement(React.Fragment, null, child && (React.createElement(React.Fragment, null,
|
|
294
|
+
index > 0 && (React.createElement(Indent, { num: 2 },
|
|
295
|
+
React.createElement(Icon, { icon: stenaBreadCrumbArrow, size: 8, color: cssColor("--lhds-color-ui-700") }))),
|
|
301
296
|
child)))); })));
|
|
302
297
|
};
|
|
303
298
|
|
|
304
|
-
var css_248z$
|
|
305
|
-
var styles$
|
|
306
|
-
styleInject(css_248z$
|
|
299
|
+
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";
|
|
300
|
+
var styles$f = {"crumb":"Crumb-module_crumb__1qiJN"};
|
|
301
|
+
styleInject(css_248z$h);
|
|
307
302
|
|
|
308
303
|
var Crumb = function (_a) {
|
|
309
304
|
var label = _a.label, render = _a.render;
|
|
310
305
|
if (render) {
|
|
311
306
|
var children = label.toUpperCase();
|
|
312
|
-
return createElement(Fragment, null, render({ children: children, className: styles$
|
|
307
|
+
return React.createElement(React.Fragment, null, render({ children: children, className: styles$f.crumb }));
|
|
313
308
|
}
|
|
314
|
-
return createElement("span", { className: styles$
|
|
309
|
+
return React.createElement("span", { className: styles$f.crumb }, label.toUpperCase());
|
|
315
310
|
};
|
|
316
311
|
|
|
317
|
-
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";
|
|
318
|
-
var styles$
|
|
319
|
-
styleInject(css_248z$
|
|
312
|
+
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";
|
|
313
|
+
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"};
|
|
314
|
+
styleInject(css_248z$g);
|
|
320
315
|
|
|
321
316
|
var getButtonLabel = function (label, success, successLabel, loading, loadingLabel) {
|
|
322
317
|
if (success) {
|
|
@@ -330,17 +325,17 @@ var getButtonLabel = function (label, success, successLabel, loading, loadingLab
|
|
|
330
325
|
}
|
|
331
326
|
};
|
|
332
327
|
|
|
333
|
-
var css_248z$
|
|
328
|
+
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";
|
|
334
329
|
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"};
|
|
335
|
-
styleInject(css_248z$
|
|
330
|
+
styleInject(css_248z$f);
|
|
336
331
|
|
|
337
332
|
var ButtonContent = function (_a) {
|
|
338
333
|
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;
|
|
339
|
-
return (createElement(Fragment, null,
|
|
340
|
-
(success || loading || leftIcon || left) && (createElement("div", { className: cx(buttonStyles.leftWrapper, leftWrapperClassName) }, success ? (createElement(FontAwesomeIcon, { icon: faCheck, className: cx(buttonStyles.iconLeft, iconClassName) })) : loading ? (createElement("div", { className: cx(buttonStyles.iconLeft, buttonStyles.spinnerLeft, spinnerClassName) },
|
|
341
|
-
createElement(InputSpinner, null))) : left ? (left) : leftIcon ? (createElement(FontAwesomeIcon, { icon: leftIcon, className: cx(buttonStyles.iconLeft, iconClassName) })) : null)),
|
|
342
|
-
label && (createElement("span", { className: cx(buttonStyles.label, labelClassName) }, label)),
|
|
343
|
-
(right || rightIcon) && (createElement("div", { className: cx(buttonStyles.rightWrapper, rightWrapperClassName) }, right ? (right) : rightIcon ? (createElement(FontAwesomeIcon, { icon: rightIcon, className: cx(buttonStyles.iconRight, iconClassName) })) : null))));
|
|
334
|
+
return (React.createElement(React.Fragment, null,
|
|
335
|
+
(success || loading || leftIcon || left) && (React.createElement("div", { className: cx(buttonStyles.leftWrapper, leftWrapperClassName) }, success ? (React.createElement(FontAwesomeIcon, { icon: faCheck, className: cx(buttonStyles.iconLeft, iconClassName) })) : loading ? (React.createElement("div", { className: cx(buttonStyles.iconLeft, buttonStyles.spinnerLeft, spinnerClassName) },
|
|
336
|
+
React.createElement(InputSpinner, null))) : left ? (left) : leftIcon ? (React.createElement(FontAwesomeIcon, { icon: leftIcon, className: cx(buttonStyles.iconLeft, iconClassName) })) : null)),
|
|
337
|
+
label && (React.createElement("span", { className: cx(buttonStyles.label, labelClassName) }, label)),
|
|
338
|
+
(right || rightIcon) && (React.createElement("div", { className: cx(buttonStyles.rightWrapper, rightWrapperClassName) }, right ? (right) : rightIcon ? (React.createElement(FontAwesomeIcon, { icon: rightIcon, className: cx(buttonStyles.iconRight, iconClassName) })) : null))));
|
|
344
339
|
};
|
|
345
340
|
|
|
346
341
|
var Button = styled.button(width);
|
|
@@ -350,31 +345,31 @@ var PrimaryButton = forwardRef(function PrimaryButton(_a, ref) {
|
|
|
350
345
|
var hasLabel = Boolean((label && !success && !loading) ||
|
|
351
346
|
(success && successLabel) ||
|
|
352
347
|
(loading && loadingLabel));
|
|
353
|
-
return (createElement(Button, __assign({ ref: ref, onClick: disabled || success || loading ? undefined : onClick, className: cx(styles$
|
|
354
|
-
createElement(ButtonContent, { success: success, loading: loading, leftIcon: leftIcon, left: left, right: right, rightIcon: rightIcon, label: buttonLabel })));
|
|
348
|
+
return (React.createElement(Button, __assign({ ref: ref, onClick: disabled || success || loading ? undefined : onClick, className: cx(styles$e.button, styles$e[size], styles$e[variant], !hasLabel && styles$e.iconButton, className), disabled: disabled }, buttonProps),
|
|
349
|
+
React.createElement(ButtonContent, { success: success, loading: loading, leftIcon: leftIcon, left: left, right: right, rightIcon: rightIcon, label: buttonLabel })));
|
|
355
350
|
});
|
|
356
351
|
|
|
357
|
-
var css_248z$
|
|
358
|
-
var styles$
|
|
359
|
-
styleInject(css_248z$
|
|
352
|
+
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";
|
|
353
|
+
var styles$d = {"flatButton":"FlatButton-module_flatButton__39zNZ","inverted":"FlatButton-module_inverted__20MxE"};
|
|
354
|
+
styleInject(css_248z$e);
|
|
360
355
|
|
|
361
356
|
var FlatButton = forwardRef(function FlatButton(_a, ref) {
|
|
362
357
|
var className = _a.className, inverted = _a.inverted, props = __rest(_a, ["className", "inverted"]);
|
|
363
|
-
return (createElement(PrimaryButton, __assign({ ref: ref, className: cx(styles$
|
|
358
|
+
return (React.createElement(PrimaryButton, __assign({ ref: ref, className: cx(styles$d.flatButton, inverted && styles$d.inverted, className) }, props)));
|
|
364
359
|
});
|
|
365
360
|
|
|
366
|
-
var css_248z$
|
|
367
|
-
var styles$
|
|
368
|
-
styleInject(css_248z$
|
|
361
|
+
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";
|
|
362
|
+
var styles$c = {"secondaryButton":"SecondaryButton-module_secondaryButton__3s-vw"};
|
|
363
|
+
styleInject(css_248z$d);
|
|
369
364
|
|
|
370
365
|
var SecondaryButton = forwardRef(function SecondaryButton(_a, ref) {
|
|
371
366
|
var className = _a.className, props = __rest(_a, ["className"]);
|
|
372
|
-
return (createElement(PrimaryButton, __assign({ ref: ref, className: cx(styles$
|
|
367
|
+
return (React.createElement(PrimaryButton, __assign({ ref: ref, className: cx(styles$c.secondaryButton, className) }, props)));
|
|
373
368
|
});
|
|
374
369
|
|
|
375
|
-
var css_248z$
|
|
370
|
+
var css_248z$c = ".ButtonLink-module_buttonLink__3DxGT {\n text-decoration: none;\n}\n";
|
|
376
371
|
var buttonLinkStyles = {"buttonLink":"ButtonLink-module_buttonLink__3DxGT"};
|
|
377
|
-
styleInject(css_248z$
|
|
372
|
+
styleInject(css_248z$c);
|
|
378
373
|
|
|
379
374
|
var PrimaryButtonLink = forwardRef(function PrimaryButtonLink(_a, ref) {
|
|
380
375
|
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"]);
|
|
@@ -382,73 +377,73 @@ var PrimaryButtonLink = forwardRef(function PrimaryButtonLink(_a, ref) {
|
|
|
382
377
|
var hasLabel = Boolean((label && !success && !loading) ||
|
|
383
378
|
(success && successLabel) ||
|
|
384
379
|
(loading && loadingLabel));
|
|
385
|
-
return (createElement("a", __assign({ ref: ref, className: cx(buttonLinkStyles.buttonLink, styles$
|
|
386
|
-
createElement(ButtonContent, { success: success, loading: loading, leftIcon: leftIcon, left: left, right: right, rightIcon: rightIcon, label: buttonLabel })));
|
|
380
|
+
return (React.createElement("a", __assign({ ref: ref, className: cx(buttonLinkStyles.buttonLink, styles$e.button, styles$e[size], styles$e[variant], !hasLabel && styles$e.iconButton, className) }, anchorProps),
|
|
381
|
+
React.createElement(ButtonContent, { success: success, loading: loading, leftIcon: leftIcon, left: left, right: right, rightIcon: rightIcon, label: buttonLabel })));
|
|
387
382
|
});
|
|
388
383
|
|
|
389
384
|
var FlatButtonLink = forwardRef(function FlatButtonLink(_a, ref) {
|
|
390
385
|
var className = _a.className, inverted = _a.inverted, props = __rest(_a, ["className", "inverted"]);
|
|
391
|
-
return (createElement(PrimaryButtonLink, __assign({ ref: ref, className: cx(styles$
|
|
386
|
+
return (React.createElement(PrimaryButtonLink, __assign({ ref: ref, className: cx(styles$d.flatButton, inverted && styles$d.inverted, className) }, props)));
|
|
392
387
|
});
|
|
393
388
|
|
|
394
389
|
var SecondaryButtonLink = forwardRef(function SecondaryButtonLink(_a, ref) {
|
|
395
390
|
var className = _a.className, props = __rest(_a, ["className"]);
|
|
396
|
-
return (createElement(PrimaryButtonLink, __assign({ ref: ref, className: cx(styles$
|
|
391
|
+
return (React.createElement(PrimaryButtonLink, __assign({ ref: ref, className: cx(styles$c.secondaryButton, className) }, props)));
|
|
397
392
|
});
|
|
398
393
|
|
|
399
394
|
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";
|
|
400
|
-
var styles$
|
|
395
|
+
var styles$b = {"buttonGroup":"ButtonGroup-module_buttonGroup__nzigh"};
|
|
401
396
|
styleInject(css_248z$b);
|
|
402
397
|
|
|
403
398
|
var ButtonGroup = function (_a) {
|
|
404
399
|
var className = _a.className, children = _a.children;
|
|
405
|
-
return createElement("div", { className: cx(styles$
|
|
400
|
+
return React.createElement("div", { className: cx(styles$b.buttonGroup, className) }, children);
|
|
406
401
|
};
|
|
407
402
|
|
|
408
|
-
var css_248z$
|
|
403
|
+
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";
|
|
409
404
|
var styles$a = {"upDownButtons":"UpDownButtons-module_upDownButtons__3an6-","button":"UpDownButtons-module_button__1d9KV"};
|
|
410
|
-
styleInject(css_248z$
|
|
405
|
+
styleInject(css_248z$a);
|
|
411
406
|
|
|
412
407
|
var UpDownButtons = function (_a) {
|
|
413
408
|
var onClickDown = _a.onClickDown, onClickUp = _a.onClickUp, iconColor = _a.iconColor, disabled = _a.disabled;
|
|
414
|
-
return (createElement(Column, { className: styles$a.upDownButtons },
|
|
415
|
-
createElement("button", { onClick: onClickUp, className: styles$a.button, disabled: disabled },
|
|
416
|
-
createElement(Row, { justifyContent: "center", alignItems: "center" },
|
|
417
|
-
createElement(FontAwesomeIcon, { icon: faCaretUp, size: "sm", color: disabled ? "var(--swui-textinput-text-color-disabled)" : iconColor }))),
|
|
418
|
-
createElement("button", { onClick: onClickDown, className: styles$a.button, disabled: disabled },
|
|
419
|
-
createElement(Row, { justifyContent: "center", alignItems: "center" },
|
|
420
|
-
createElement(FontAwesomeIcon, { icon: faCaretDown, size: "sm", color: disabled ? "var(--swui-textinput-text-color-disabled)" : iconColor })))));
|
|
409
|
+
return (React.createElement(Column, { className: styles$a.upDownButtons },
|
|
410
|
+
React.createElement("button", { onClick: onClickUp, className: styles$a.button, disabled: disabled },
|
|
411
|
+
React.createElement(Row, { justifyContent: "center", alignItems: "center" },
|
|
412
|
+
React.createElement(FontAwesomeIcon, { icon: faCaretUp, size: "sm", color: disabled ? "var(--swui-textinput-text-color-disabled)" : iconColor }))),
|
|
413
|
+
React.createElement("button", { onClick: onClickDown, className: styles$a.button, disabled: disabled },
|
|
414
|
+
React.createElement(Row, { justifyContent: "center", alignItems: "center" },
|
|
415
|
+
React.createElement(FontAwesomeIcon, { icon: faCaretDown, size: "sm", color: disabled ? "var(--swui-textinput-text-color-disabled)" : iconColor })))));
|
|
421
416
|
};
|
|
422
417
|
|
|
423
418
|
var Card = function (_a) {
|
|
424
419
|
var _b = _a.background, background = _b === void 0 ? "white" : _b, boxProps = __rest(_a, ["background"]);
|
|
425
|
-
return createElement(Column, __assign({ shadow: "box", background: background }, boxProps));
|
|
420
|
+
return React.createElement(Column, __assign({ shadow: "box", background: background }, boxProps));
|
|
426
421
|
};
|
|
427
422
|
|
|
428
|
-
var css_248z$
|
|
429
|
-
var styles$
|
|
430
|
-
styleInject(css_248z$
|
|
423
|
+
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";
|
|
424
|
+
var styles$9 = {"cardHeader":"CardHeader-module_cardHeader__3-9N2","standard":"CardHeader-module_standard__2eUI-","compact":"CardHeader-module_compact__1f2db"};
|
|
425
|
+
styleInject(css_248z$9);
|
|
431
426
|
|
|
432
427
|
var CardHeader = function (_a) {
|
|
433
428
|
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;
|
|
434
|
-
return (createElement("div", { className: cx(styles$
|
|
435
|
-
createElement(Row, { alignItems: "center" },
|
|
436
|
-
contentLeft && (createElement(Fragment, null,
|
|
429
|
+
return (React.createElement("div", { className: cx(styles$9.cardHeader, styles$9[variant]) },
|
|
430
|
+
React.createElement(Row, { alignItems: "center" },
|
|
431
|
+
contentLeft && (React.createElement(React.Fragment, null,
|
|
437
432
|
contentLeft,
|
|
438
|
-
createElement(Indent, null))),
|
|
439
|
-
text && (createElement(Fragment, null,
|
|
440
|
-
createElement(Heading, { variant: variant === "compact" ? "h4" : "h3" }, text),
|
|
441
|
-
createElement(Indent, null))),
|
|
433
|
+
React.createElement(Indent, null))),
|
|
434
|
+
text && (React.createElement(React.Fragment, null,
|
|
435
|
+
React.createElement(Heading, { variant: variant === "compact" ? "h4" : "h3" }, text),
|
|
436
|
+
React.createElement(Indent, null))),
|
|
442
437
|
contentAfterHeading),
|
|
443
|
-
contentCenter && createElement(Row, { alignItems: "center" }, contentCenter),
|
|
444
|
-
createElement(Row, { alignItems: "center" }, contentRight)));
|
|
438
|
+
contentCenter && React.createElement(Row, { alignItems: "center" }, contentCenter),
|
|
439
|
+
React.createElement(Row, { alignItems: "center" }, contentRight)));
|
|
445
440
|
};
|
|
446
441
|
|
|
447
|
-
var CardBody = function (props) { return (createElement(Column, __assign({ indent: 2, spacing: 2 }, props))); };
|
|
442
|
+
var CardBody = function (props) { return (React.createElement(Column, __assign({ indent: 2, spacing: 2 }, props))); };
|
|
448
443
|
|
|
449
|
-
var css_248z$
|
|
450
|
-
var styles$
|
|
451
|
-
styleInject(css_248z$
|
|
444
|
+
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";
|
|
445
|
+
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"};
|
|
446
|
+
styleInject(css_248z$8);
|
|
452
447
|
|
|
453
448
|
var Chip = function (_a) {
|
|
454
449
|
var onClickRemove = _a.onClickRemove, onClick = _a.onClick, label = _a.label, _b = _a.variant, variant = _b === void 0 ? "primary" : _b, className = _a.className;
|
|
@@ -459,24 +454,24 @@ var Chip = function (_a) {
|
|
|
459
454
|
onClick();
|
|
460
455
|
}
|
|
461
456
|
};
|
|
462
|
-
return (createElement("div", { className: cx(styles$
|
|
463
|
-
onClick ? (createElement("button", { onClick: onClickHandler, className: cx(styles$
|
|
464
|
-
onClickRemove && (createElement("button", { className: cx(styles$
|
|
465
|
-
createElement(Icon, { icon: faTimes, size: 10 })))));
|
|
457
|
+
return (React.createElement("div", { className: cx(styles$8.chip, styles$8[variant], onClickRemove ? styles$8.removable : undefined, className) },
|
|
458
|
+
onClick ? (React.createElement("button", { onClick: onClickHandler, className: cx(styles$8.chipCell, styles$8.label) }, label)) : (React.createElement("div", { className: cx(styles$8.chipCell, styles$8.label) }, label)),
|
|
459
|
+
onClickRemove && (React.createElement("button", { className: cx(styles$8.chipCell, styles$8.close), onClick: onClickRemove },
|
|
460
|
+
React.createElement(Icon, { icon: faTimes, size: 10 })))));
|
|
466
461
|
};
|
|
467
462
|
|
|
468
|
-
var Label = memo(function (_a) {
|
|
463
|
+
var Label = React.memo(function (_a) {
|
|
469
464
|
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"]);
|
|
470
465
|
var extraInfoLabel = getExtraInfoLabel(optional, maxCharacters);
|
|
471
|
-
var infoLabel = extraInfoLabel && (createElement(Text, { color: cssColor("--lhds-color-ui-600"), variant: "caption", size: "small" }, extraInfoLabel));
|
|
472
|
-
return (createElement("label", { htmlFor: htmlFor },
|
|
473
|
-
createElement(Box, __assign({}, boxProps, { row: row }),
|
|
474
|
-
createElement(Row, { alignItems: "center", width: textWidth },
|
|
475
|
-
createElement(Text, { color: cssColor("--lhds-color-ui-600"), size: "small", whiteSpace: "nowrap" }, text),
|
|
476
|
-
!row && createElement(Indent, { num: 1.5 }, infoLabel)),
|
|
477
|
-
createElement(Space, null),
|
|
466
|
+
var infoLabel = extraInfoLabel && (React.createElement(Text, { color: cssColor("--lhds-color-ui-600"), variant: "caption", size: "small" }, extraInfoLabel));
|
|
467
|
+
return (React.createElement("label", { htmlFor: htmlFor },
|
|
468
|
+
React.createElement(Box, __assign({}, boxProps, { row: row }),
|
|
469
|
+
React.createElement(Row, { alignItems: "center", width: textWidth },
|
|
470
|
+
React.createElement(Text, { color: cssColor("--lhds-color-ui-600"), size: "small", whiteSpace: "nowrap" }, text),
|
|
471
|
+
!row && React.createElement(Indent, { num: 1.5 }, infoLabel)),
|
|
472
|
+
React.createElement(Space, null),
|
|
478
473
|
children),
|
|
479
|
-
row && (createElement(Row, { justifyContent: "flex-end", indent: 0.5, spacing: 0.5 }, infoLabel))));
|
|
474
|
+
row && (React.createElement(Row, { justifyContent: "flex-end", indent: 0.5, spacing: 0.5 }, infoLabel))));
|
|
480
475
|
});
|
|
481
476
|
var getExtraInfoLabel = function (optional, maxCharacters) {
|
|
482
477
|
var list = [];
|
|
@@ -492,58 +487,58 @@ var getExtraInfoLabel = function (optional, maxCharacters) {
|
|
|
492
487
|
return undefined;
|
|
493
488
|
};
|
|
494
489
|
|
|
495
|
-
var css_248z$
|
|
496
|
-
var styles$
|
|
497
|
-
styleInject(css_248z$
|
|
490
|
+
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";
|
|
491
|
+
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"};
|
|
492
|
+
styleInject(css_248z$7);
|
|
498
493
|
|
|
499
494
|
var Badge = function (_a) {
|
|
500
495
|
var label = _a.label, _b = _a.variant, variant = _b === void 0 ? "info" : _b;
|
|
501
|
-
return (createElement("div", { className: cx(styles$
|
|
502
|
-
createElement(SmallerText, { color: "var(--swui-badge-text-color)", className: styles$
|
|
496
|
+
return (React.createElement("div", { className: cx(styles$7.badge, styles$7[variant]) },
|
|
497
|
+
React.createElement(SmallerText, { color: "var(--swui-badge-text-color)", className: styles$7.label }, label)));
|
|
503
498
|
};
|
|
504
499
|
|
|
505
500
|
var WithBadge = function (_a) {
|
|
506
501
|
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"]);
|
|
507
|
-
return (createElement(Row, null,
|
|
502
|
+
return (React.createElement(Row, null,
|
|
508
503
|
children,
|
|
509
|
-
createElement("div", { style: { position: "relative" } }, !hideBadge ? (createElement(Box, { top: top, left: left, position: "absolute" },
|
|
510
|
-
createElement(Badge, __assign({}, badgeProps)))) : null)));
|
|
504
|
+
React.createElement("div", { style: { position: "relative" } }, !hideBadge ? (React.createElement(Box, { top: top, left: left, position: "absolute" },
|
|
505
|
+
React.createElement(Badge, __assign({}, badgeProps)))) : null)));
|
|
511
506
|
};
|
|
512
507
|
|
|
513
|
-
var css_248z$
|
|
514
|
-
var styles$
|
|
515
|
-
styleInject(css_248z$
|
|
508
|
+
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";
|
|
509
|
+
var styles$6 = {"toggleButton":"ToggleButton-module_toggleButton__1RElt","label":"ToggleButton-module_label__33eiu","pressed":"ToggleButton-module_pressed__2Sv3Z"};
|
|
510
|
+
styleInject(css_248z$6);
|
|
516
511
|
|
|
517
512
|
var ToggleButton = function (_a) {
|
|
518
513
|
var label = _a.label, pressed = _a.pressed, first = _a.first, last = _a.last, width = _a.width, onClick = _a.onClick;
|
|
519
514
|
var borderRadius = useMemo(function () {
|
|
520
515
|
return (first ? "3px" : 0) + " " + (last ? "3px 3px" : "0 0") + " " + (first ? "3px" : "0");
|
|
521
516
|
}, [first, last]);
|
|
522
|
-
return (createElement(Clickable, { onClick: function () { return onClick && onClick(!pressed); } },
|
|
523
|
-
createElement(Box, { className: cx(styles$
|
|
524
|
-
createElement(Text, { size: "small", className: styles$
|
|
517
|
+
return (React.createElement(Clickable, { onClick: function () { return onClick && onClick(!pressed); } },
|
|
518
|
+
React.createElement(Box, { className: cx(styles$6.toggleButton, pressed && styles$6.pressed), width: width, justifyContent: "center", alignItems: "center", borderRadius: borderRadius },
|
|
519
|
+
React.createElement(Text, { size: "small", className: styles$6.label }, label))));
|
|
525
520
|
};
|
|
526
521
|
|
|
527
|
-
var css_248z$
|
|
528
|
-
var styles$
|
|
529
|
-
styleInject(css_248z$
|
|
522
|
+
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";
|
|
523
|
+
var styles$5 = {"actionMenu":"ActionMenu-module_actionMenu__1jy4N","standard":"ActionMenu-module_standard__3S_rk","outlined":"ActionMenu-module_outlined__7pm5v"};
|
|
524
|
+
styleInject(css_248z$5);
|
|
530
525
|
|
|
531
526
|
var ActionMenu = function (_a) {
|
|
532
527
|
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;
|
|
533
528
|
if (!children) {
|
|
534
529
|
return null;
|
|
535
530
|
}
|
|
536
|
-
return (createElement(FocusScope, { contain: trapFocus },
|
|
537
|
-
createElement(Column, { className: cx(styles$
|
|
531
|
+
return (React.createElement(FocusScope, { contain: trapFocus },
|
|
532
|
+
React.createElement(Column, { className: cx(styles$5.actionMenu, styles$5[variant]), width: width, shadow: shadow },
|
|
538
533
|
top,
|
|
539
|
-
createElement(Column, null, children))));
|
|
534
|
+
React.createElement(Column, null, children))));
|
|
540
535
|
};
|
|
541
536
|
|
|
542
|
-
var ActionMenuContext = createContext({});
|
|
537
|
+
var ActionMenuContext = React.createContext({});
|
|
543
538
|
|
|
544
|
-
var css_248z$
|
|
545
|
-
var styles$
|
|
546
|
-
styleInject(css_248z$
|
|
539
|
+
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";
|
|
540
|
+
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"};
|
|
541
|
+
styleInject(css_248z$4);
|
|
547
542
|
|
|
548
543
|
var useActionMenuLogic = function (_a, ref) {
|
|
549
544
|
var disableCloseOnClick = _a.disableCloseOnClick, onClick = _a.onClick;
|
|
@@ -584,93 +579,93 @@ var useActionMenuLogic = function (_a, ref) {
|
|
|
584
579
|
var ActionMenuCommonContent = function (_a) {
|
|
585
580
|
var _b;
|
|
586
581
|
var label = _a.label, left = _a.left, leftIcon = _a.leftIcon, loading = _a.loading, right = _a.right, rightIcon = _a.rightIcon, success = _a.success;
|
|
587
|
-
return (createElement(Row, { alignItems: "center", width: "100%", indent: 2, className: styles$
|
|
588
|
-
createElement(ButtonContent, { success: success, loading: loading, leftIcon: leftIcon, left: left, right: right, rightIcon: rightIcon, label: label, labelClassName: styles$
|
|
589
|
-
_b[styles$
|
|
582
|
+
return (React.createElement(Row, { alignItems: "center", width: "100%", indent: 2, className: styles$4.actionMenuItemInnerContent },
|
|
583
|
+
React.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((_b = {},
|
|
584
|
+
_b[styles$4.actionMenuItemIconWrapper] = success || loading || leftIcon,
|
|
590
585
|
_b)) })));
|
|
591
586
|
};
|
|
592
587
|
|
|
593
588
|
var ActionMenuLink = forwardRef(function ActionMenuLink(_a, ref) {
|
|
594
|
-
var success = _a.success, loading = _a.loading, leftIcon = _a.leftIcon, left = _a.left, right = _a.right, rightIcon = _a.rightIcon, label = _a.label
|
|
595
|
-
var _c = useActionMenuLogic(
|
|
596
|
-
return (createElement("a", __assign({}, props, { className: cx(styles$
|
|
597
|
-
createElement(ActionMenuCommonContent, { success: success, loading: loading, leftIcon: leftIcon, left: left, right: right, rightIcon: rightIcon, label: label })));
|
|
589
|
+
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"]);
|
|
590
|
+
var _c = useActionMenuLogic({ disableCloseOnClick: disableCloseOnClick, onClick: onClick }, ref), onClickHandler = _c.onClickHandler, onKeyDown = _c.onKeyDown, innerRef = _c.innerRef;
|
|
591
|
+
return (React.createElement("a", __assign({}, props, { className: cx(styles$4.actionMenuItem, styles$4[variant], className), onClick: disabled ? undefined : onClickHandler, onKeyDown: onKeyDown, "aria-disabled": disabled, href: disabled ? undefined : href, ref: innerRef }),
|
|
592
|
+
React.createElement(ActionMenuCommonContent, { success: success, loading: loading, leftIcon: leftIcon, left: left, right: right, rightIcon: rightIcon, label: label })));
|
|
598
593
|
});
|
|
599
594
|
|
|
600
595
|
var ActionMenuItem = forwardRef(function ActionMenuItem(_a, ref) {
|
|
601
|
-
var success = _a.success, loading = _a.loading, leftIcon = _a.leftIcon, left = _a.left, right = _a.right, rightIcon = _a.rightIcon, label = _a.label
|
|
602
|
-
var _c = useActionMenuLogic(
|
|
603
|
-
return (createElement("button", __assign({}, props, { className: cx(styles$
|
|
604
|
-
createElement(ActionMenuCommonContent, { success: success, loading: loading, leftIcon: leftIcon, left: left, right: right, rightIcon: rightIcon, label: label })));
|
|
596
|
+
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"]);
|
|
597
|
+
var _c = useActionMenuLogic({ disableCloseOnClick: disableCloseOnClick, onClick: onClick }, ref), onClickHandler = _c.onClickHandler, onKeyDown = _c.onKeyDown, innerRef = _c.innerRef;
|
|
598
|
+
return (React.createElement("button", __assign({}, props, { className: cx(styles$4.actionMenuItem, styles$4[variant], className), onKeyDown: onKeyDown, onClick: props.disabled ? undefined : onClickHandler, ref: innerRef }),
|
|
599
|
+
React.createElement(ActionMenuCommonContent, { success: success, loading: loading, leftIcon: leftIcon, left: left, right: right, rightIcon: rightIcon, label: label })));
|
|
605
600
|
});
|
|
606
601
|
|
|
607
602
|
var ActionMenuItemContent = forwardRef(function ActionMenuItemContent(_a, ref) {
|
|
608
|
-
var success = _a.success, loading = _a.loading, leftIcon = _a.leftIcon, left = _a.left, right = _a.right, rightIcon = _a.rightIcon, label = _a.label
|
|
603
|
+
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"]);
|
|
609
604
|
var _c = useActionMenuLogic(props, ref), onKeyDown = _c.onKeyDown, innerRef = _c.innerRef;
|
|
610
|
-
return (createElement(Column, __assign({}, props, { className: cx(styles$
|
|
611
|
-
createElement(ActionMenuCommonContent, { success: success, loading: loading, leftIcon: leftIcon, left: left, right: right, rightIcon: rightIcon, label: label }),
|
|
612
|
-
bottom && (createElement(Fragment, null,
|
|
613
|
-
createElement(Row, { indent: 2 },
|
|
614
|
-
!fullWidthBottomContent && (success || loading || leftIcon) && (createElement("div", { className: buttonStyles.leftWrapper },
|
|
615
|
-
createElement("div", { className: styles$
|
|
616
|
-
createElement(Row, { alignItems: "center", width: "100%" }, bottom)),
|
|
617
|
-
createElement(Space, { num: 1.5 })))));
|
|
605
|
+
return (React.createElement(Column, __assign({}, props, { className: cx(styles$4.actionMenuItem, styles$4.actionMenuItemContent, styles$4[variant], className), ref: innerRef, onKeyDown: onKeyDown, "aria-disabled": disabled }),
|
|
606
|
+
React.createElement(ActionMenuCommonContent, { success: success, loading: loading, leftIcon: leftIcon, left: left, right: right, rightIcon: rightIcon, label: label }),
|
|
607
|
+
bottom && (React.createElement(React.Fragment, null,
|
|
608
|
+
React.createElement(Row, { indent: 2 },
|
|
609
|
+
!fullWidthBottomContent && (success || loading || leftIcon) && (React.createElement("div", { className: buttonStyles.leftWrapper },
|
|
610
|
+
React.createElement("div", { className: styles$4.actionMenuItemIconWrapper }))),
|
|
611
|
+
React.createElement(Row, { alignItems: "center", width: "100%" }, bottom)),
|
|
612
|
+
React.createElement(Space, { num: 1.5 })))));
|
|
618
613
|
});
|
|
619
614
|
|
|
620
615
|
var ActionMenuSeparator = function () {
|
|
621
|
-
return createElement(SeparatorLine, null);
|
|
616
|
+
return React.createElement(SeparatorLine, null);
|
|
622
617
|
};
|
|
623
618
|
|
|
624
|
-
var css_248z$
|
|
625
|
-
var styles$
|
|
626
|
-
styleInject(css_248z$
|
|
619
|
+
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";
|
|
620
|
+
var styles$3 = {"tab":"Tab-module_tab__3Hb1M","inner":"Tab-module_inner__jXnLu","selected":"Tab-module_selected__20X1B"};
|
|
621
|
+
styleInject(css_248z$3);
|
|
627
622
|
|
|
628
623
|
var Tab = forwardRef(function Tab(_a, ref) {
|
|
629
624
|
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
|
|
630
625
|
buttonProps = __rest(_a, ["selected", "label", "loading", "left", "leftIcon", "right", "rightIcon", "success", "tabIndex"]);
|
|
631
626
|
var buttonLabel = getButtonLabel(label, success, undefined, loading, undefined);
|
|
632
|
-
return (createElement("button", __assign({ className: cx(styles$
|
|
633
|
-
createElement("div", { className: styles$
|
|
634
|
-
createElement(ButtonContent, { success: success, loading: loading, leftIcon: leftIcon, left: left, right: right, rightIcon: rightIcon, label: buttonLabel }))));
|
|
627
|
+
return (React.createElement("button", __assign({ className: cx(styles$3.tab, selected && styles$3.selected), role: "tab", "aria-selected": selected, tabIndex: tabIndex, ref: ref }, buttonProps),
|
|
628
|
+
React.createElement("div", { className: styles$3.inner },
|
|
629
|
+
React.createElement(ButtonContent, { success: success, loading: loading, leftIcon: leftIcon, left: left, right: right, rightIcon: rightIcon, label: buttonLabel }))));
|
|
635
630
|
});
|
|
636
631
|
|
|
637
|
-
var css_248z$
|
|
638
|
-
var styles$
|
|
639
|
-
styleInject(css_248z$
|
|
632
|
+
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";
|
|
633
|
+
var styles$2 = {"tabMenu":"TabMenu-module_tabMenu__2cR43","separator":"TabMenu-module_separator__2ed3d","filler":"TabMenu-module_filler__3vRon","separatorInner":"TabMenu-module_separatorInner__2h9wg"};
|
|
634
|
+
styleInject(css_248z$2);
|
|
640
635
|
|
|
641
636
|
var TabMenu = function (_a) {
|
|
642
637
|
var children = _a.children;
|
|
643
|
-
return (createElement("div", { className: styles$
|
|
644
|
-
Children.map(children, function (child, index) { return (createElement(Fragment, null,
|
|
645
|
-
index > 0 && (createElement("div", { className: styles$
|
|
646
|
-
createElement("div", { className: styles$
|
|
638
|
+
return (React.createElement("div", { className: styles$2.tabMenu, role: "tablist" },
|
|
639
|
+
Children.map(children, function (child, index) { return (React.createElement(React.Fragment, null,
|
|
640
|
+
index > 0 && (React.createElement("div", { className: styles$2.separator },
|
|
641
|
+
React.createElement("div", { className: styles$2.separatorInner }))),
|
|
647
642
|
child)); }),
|
|
648
|
-
createElement("div", { className: cx(styles$
|
|
649
|
-
createElement("div", { className: styles$
|
|
643
|
+
React.createElement("div", { className: cx(styles$2.separator, styles$2.filler) },
|
|
644
|
+
React.createElement("div", { className: styles$2.separatorInner }))));
|
|
650
645
|
};
|
|
651
646
|
|
|
652
|
-
var css_248z$
|
|
653
|
-
var styles$
|
|
654
|
-
styleInject(css_248z$
|
|
647
|
+
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";
|
|
648
|
+
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"};
|
|
649
|
+
styleInject(css_248z$1);
|
|
655
650
|
|
|
656
651
|
var Tag = function (_a) {
|
|
657
652
|
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;
|
|
658
|
-
return (createElement("div", { className: cx(styles$
|
|
653
|
+
return (React.createElement("div", { className: cx(styles$1.tag, styles$1[variant], styles$1[size], className) }, label));
|
|
659
654
|
};
|
|
660
655
|
|
|
661
|
-
var css_248z
|
|
662
|
-
var styles
|
|
663
|
-
styleInject(css_248z
|
|
656
|
+
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";
|
|
657
|
+
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"};
|
|
658
|
+
styleInject(css_248z);
|
|
664
659
|
|
|
665
660
|
var ValueTable = function (_a) {
|
|
666
661
|
var children = _a.children, header = _a.header, footer = _a.footer, _b = _a.variant, variant = _b === void 0 ? "standard" : _b;
|
|
667
|
-
return (createElement(Column, null,
|
|
668
|
-
header && (createElement(Row, { spacing: true },
|
|
669
|
-
createElement(Heading, { variant: "h5" }, header))),
|
|
670
|
-
createElement("table", { cellPadding: 0, cellSpacing: 0, className: cx(styles
|
|
671
|
-
createElement("tbody", null, Children.map(children, function (child, index) { return (createElement("tr", { key: index, className: styles
|
|
672
|
-
footer && (createElement(Row, { spacing: true },
|
|
673
|
-
createElement(Text, { size: "small", color: cssColor("--lhds-color-ui-600") }, footer)))));
|
|
662
|
+
return (React.createElement(Column, null,
|
|
663
|
+
header && (React.createElement(Row, { spacing: true },
|
|
664
|
+
React.createElement(Heading, { variant: "h5" }, header))),
|
|
665
|
+
React.createElement("table", { cellPadding: 0, cellSpacing: 0, className: cx(styles.valueTable, styles[variant]) },
|
|
666
|
+
React.createElement("tbody", null, Children.map(children, function (child, index) { return (React.createElement("tr", { key: index, className: styles.row }, child)); }))),
|
|
667
|
+
footer && (React.createElement(Row, { spacing: true },
|
|
668
|
+
React.createElement(Text, { size: "small", color: cssColor("--lhds-color-ui-600") }, footer)))));
|
|
674
669
|
};
|
|
675
670
|
|
|
676
671
|
var ValueTableItem = function (_a) {
|
|
@@ -681,7 +676,7 @@ var ValueTableItem = function (_a) {
|
|
|
681
676
|
}
|
|
682
677
|
if (typeof value === "boolean") {
|
|
683
678
|
if (value) {
|
|
684
|
-
return (createElement(Icon, { icon: faCheck, size: 14, color: cssColor("--lhds-color-ui-700") }));
|
|
679
|
+
return (React.createElement(Icon, { icon: faCheck, size: 14, color: cssColor("--lhds-color-ui-700") }));
|
|
685
680
|
}
|
|
686
681
|
else {
|
|
687
682
|
return "-";
|
|
@@ -692,12 +687,12 @@ var ValueTableItem = function (_a) {
|
|
|
692
687
|
}
|
|
693
688
|
return value;
|
|
694
689
|
}, [value]);
|
|
695
|
-
return (createElement(Fragment, null,
|
|
696
|
-
createElement("td", null,
|
|
697
|
-
createElement(Row, { height: "var(--swui-value-table-height)", alignItems: "center", indent: labelIndent },
|
|
698
|
-
createElement(Text, { color: cssColor("--lhds-color-ui-600"), variant: "bold", whiteSpace: "nowrap" }, label))),
|
|
699
|
-
createElement("td", null,
|
|
700
|
-
createElement(Row, { height: "var(--swui-value-table-height)", alignItems: "center", justifyContent: alignValue }, typeof formattedValue === "string" ? (createElement(Text, null, formattedValue)) : (formattedValue)))));
|
|
690
|
+
return (React.createElement(React.Fragment, null,
|
|
691
|
+
React.createElement("td", null,
|
|
692
|
+
React.createElement(Row, { height: "var(--swui-value-table-height)", alignItems: "center", indent: labelIndent },
|
|
693
|
+
React.createElement(Text, { color: cssColor("--lhds-color-ui-600"), variant: "bold", whiteSpace: "nowrap" }, label))),
|
|
694
|
+
React.createElement("td", null,
|
|
695
|
+
React.createElement(Row, { height: "var(--swui-value-table-height)", alignItems: "center", justifyContent: alignValue }, typeof formattedValue === "string" ? (React.createElement(Text, null, formattedValue)) : (formattedValue)))));
|
|
701
696
|
};
|
|
702
697
|
|
|
703
698
|
export { ActionMenu, ActionMenuContext, ActionMenuItem, ActionMenuItemContent, ActionMenuLink, ActionMenuSeparator, Badge, Banner, BreadCrumbs, ButtonContent, ButtonGroup, Card, CardBody, CardHeader, Chip, Crumb, FlatButton, FlatButtonLink, Icon, InputSpinner, Label, Link, PrimaryButton, PrimaryButtonLink, ResultList, ResultListBanner, ResultListRow, SecondaryButton, SecondaryButtonLink, Spinner, Tab, TabMenu, Tag, ToggleButton, UpDownButtons, ValueTable, ValueTableItem, WithBadge, stenaArrowRight, stenaBadgeDollar, stenaBreadCrumbArrow, stenaSearch, useResultListBannerState };
|