@abgov/react-components 3.4.0-beta.61 → 3.4.0-beta.65
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/experimental/{experimental/app-version-header → app-version-header}/app-version-header.component.d.ts +0 -0
- package/experimental/{experimental/badge → badge}/badge.component.d.ts +0 -0
- package/experimental/{experimental/button → button}/button.d.ts +0 -0
- package/experimental/{experimental/card → card}/card.component.d.ts +0 -0
- package/{lib/_common/input.d.ts → experimental/common.d.ts} +3 -0
- package/experimental/{experimental/flex → flex}/index.d.ts +0 -0
- package/experimental/{experimental/flex → flex}/row.d.ts +0 -0
- package/experimental/{experimental/form → form}/form.actions.component.d.ts +0 -0
- package/experimental/{experimental/form → form}/form.component.d.ts +0 -0
- package/experimental/{experimental/form → form}/form.item.component.d.ts +0 -0
- package/experimental/{experimental/form → form}/index.d.ts +0 -0
- package/experimental/{experimental/form → form}/validators.d.ts +0 -0
- package/experimental/{experimental/icons → icons}/icon.component.d.ts +14 -1
- package/experimental/{experimental/icons → icons}/iconButton.component.d.ts +2 -1
- package/experimental/{experimental/icons → icons}/index.d.ts +0 -0
- package/experimental/{experimental/index.d.ts → index.d.ts} +0 -0
- package/experimental/{experimental/input → input}/input.component.d.ts +1 -1
- package/experimental/{experimental/modal → modal}/modal.component.d.ts +0 -0
- package/experimental/package.json +1 -1
- package/experimental/react-components.esm.js +557 -616
- package/experimental/react-components.umd.js +879 -907
- package/experimental/{experimental/scrollable → scrollable}/scrollable.component.d.ts +0 -0
- package/experimental/{experimental/textarea → textarea}/textarea.component.d.ts +1 -1
- package/experimental/{experimental/transitions → transitions}/index.d.ts +0 -0
- package/experimental/{experimental/transitions → transitions}/transition.d.ts +0 -0
- package/experimental/{experimental/transitions → transitions}/transitionSequence.d.ts +0 -0
- package/lib/hero-banner/hero-banner.component.d.ts +1 -1
- package/package.json +4 -3
- package/react-components.esm.js +941 -987
- package/react-components.umd.js +955 -933
- package/experimental/experimental/common.d.ts +0 -3
package/react-components.esm.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
|
|
2
|
+
import React, { useState, Fragment, useEffect, Children, createElement } from 'react';
|
|
2
3
|
import classnames from 'classnames';
|
|
3
4
|
|
|
4
5
|
function styleInject(css, ref) {
|
|
@@ -28,172 +29,44 @@ function styleInject(css, ref) {
|
|
|
28
29
|
}
|
|
29
30
|
}
|
|
30
31
|
|
|
31
|
-
var css_248z = ":host, :root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-600: #767676;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-orange-100: hsl(39.7, 99.01%, 98%);\n --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n --color-orange-900: hsl(39.7, 99.01%, 30%);\n --color-red: #ec040b;\n --color-red-100: hsl(358.19, 96.67%, 98%);\n --color-red-500: hsl(358.19, 96.67%, 47.06%);\n --color-red-600: hsl(358.19, 96.67%, 40%);\n --color-red-900: hsl(358.19, 96.67%, 20%);\n --color-green: #00853F;\n --color-green-100: hsl(148, 100%, 95%);\n --color-green-500: hsl(148.42, 100%, 26.08%);\n --color-green-900: hsl(148, 100%, 10%);\n --color-blue-100: #e3f2ff;\n --color-blue-500: #0070c4;\n --color-blue-600: #004f84
|
|
32
|
-
styleInject(css_248z);
|
|
33
|
-
|
|
34
|
-
var css_248z$1 = "/* typekit ***/\n/* This style is from the alberta design system */\n@import url(\"https://p.typekit.net/p.css?s=1&k=nur5yta&ht=tk&f=26036.26037.26044.26046.26047&a=14638192&app=typekit&e=css\");\n@font-face {\n font-family: 'acumin-pro-semi-condensed';\n src: url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/l?subset_id=1&fvd=n4&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/d?subset_id=1&fvd=n4&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/a?subset_id=1&fvd=n4&v=3\") format(\"opentype\");\n font-style: normal;\n font-weight: 400; }\n\n@font-face {\n font-family: 'acumin-pro-semi-condensed';\n src: url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/l?subset_id=1&fvd=i4&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/d?subset_id=1&fvd=i4&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/a?subset_id=1&fvd=i4&v=3\") format(\"opentype\");\n font-style: italic;\n font-weight: 400; }\n\n@font-face {\n font-family: 'acumin-pro-semi-condensed';\n src: url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/l?subset_id=1&fvd=n7&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/d?subset_id=1&fvd=n7&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/a?subset_id=1&fvd=n7&v=3\") format(\"opentype\");\n font-style: normal;\n font-weight: 700; }\n\n@font-face {\n font-family: 'acumin-pro-semi-condensed';\n src: url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/l?subset_id=1&fvd=i7&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/d?subset_id=1&fvd=i7&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/a?subset_id=1&fvd=i7&v=3\") format(\"opentype\");\n font-style: italic;\n font-weight: 700; }\n\n@font-face {\n font-family: 'acumin-pro-semi-condensed';\n src: url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/l?subset_id=1&fvd=n6&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/d?subset_id=1&fvd=n6&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/a?subset_id=1&fvd=n6&v=3\") format(\"opentype\");\n font-style: normal;\n font-weight: 600; }\n";
|
|
35
|
-
styleInject(css_248z$1);
|
|
36
|
-
|
|
37
|
-
function _defineProperty(obj, key, value) {
|
|
38
|
-
if (key in obj) {
|
|
39
|
-
Object.defineProperty(obj, key, {
|
|
40
|
-
value: value,
|
|
41
|
-
enumerable: true,
|
|
42
|
-
configurable: true,
|
|
43
|
-
writable: true
|
|
44
|
-
});
|
|
45
|
-
} else {
|
|
46
|
-
obj[key] = value;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
return obj;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
function ownKeys(object, enumerableOnly) {
|
|
53
|
-
var keys = Object.keys(object);
|
|
54
|
-
|
|
55
|
-
if (Object.getOwnPropertySymbols) {
|
|
56
|
-
var symbols = Object.getOwnPropertySymbols(object);
|
|
57
|
-
if (enumerableOnly) symbols = symbols.filter(function (sym) {
|
|
58
|
-
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
59
|
-
});
|
|
60
|
-
keys.push.apply(keys, symbols);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
return keys;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
function _objectSpread2(target) {
|
|
67
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
68
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
|
69
|
-
|
|
70
|
-
if (i % 2) {
|
|
71
|
-
ownKeys(Object(source), true).forEach(function (key) {
|
|
72
|
-
_defineProperty(target, key, source[key]);
|
|
73
|
-
});
|
|
74
|
-
} else if (Object.getOwnPropertyDescriptors) {
|
|
75
|
-
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
76
|
-
} else {
|
|
77
|
-
ownKeys(Object(source)).forEach(function (key) {
|
|
78
|
-
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
79
|
-
});
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
return target;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
87
|
-
if (source == null) return {};
|
|
88
|
-
var target = {};
|
|
89
|
-
var sourceKeys = Object.keys(source);
|
|
90
|
-
var key, i;
|
|
91
|
-
|
|
92
|
-
for (i = 0; i < sourceKeys.length; i++) {
|
|
93
|
-
key = sourceKeys[i];
|
|
94
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
95
|
-
target[key] = source[key];
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
return target;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
function _objectWithoutProperties(source, excluded) {
|
|
102
|
-
if (source == null) return {};
|
|
103
|
-
|
|
104
|
-
var target = _objectWithoutPropertiesLoose(source, excluded);
|
|
105
|
-
|
|
106
|
-
var key, i;
|
|
107
|
-
|
|
108
|
-
if (Object.getOwnPropertySymbols) {
|
|
109
|
-
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
110
|
-
|
|
111
|
-
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
|
112
|
-
key = sourceSymbolKeys[i];
|
|
113
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
114
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
115
|
-
target[key] = source[key];
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
return target;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
function _slicedToArray(arr, i) {
|
|
123
|
-
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
function _toConsumableArray(arr) {
|
|
127
|
-
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
function _arrayWithoutHoles(arr) {
|
|
131
|
-
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
function _arrayWithHoles(arr) {
|
|
135
|
-
if (Array.isArray(arr)) return arr;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
function _iterableToArray(iter) {
|
|
139
|
-
if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
function _iterableToArrayLimit(arr, i) {
|
|
143
|
-
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
|
|
144
|
-
var _arr = [];
|
|
145
|
-
var _n = true;
|
|
146
|
-
var _d = false;
|
|
147
|
-
var _e = undefined;
|
|
148
|
-
|
|
149
|
-
try {
|
|
150
|
-
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
|
151
|
-
_arr.push(_s.value);
|
|
152
|
-
|
|
153
|
-
if (i && _arr.length === i) break;
|
|
154
|
-
}
|
|
155
|
-
} catch (err) {
|
|
156
|
-
_d = true;
|
|
157
|
-
_e = err;
|
|
158
|
-
} finally {
|
|
159
|
-
try {
|
|
160
|
-
if (!_n && _i["return"] != null) _i["return"]();
|
|
161
|
-
} finally {
|
|
162
|
-
if (_d) throw _e;
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
return _arr;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
function _unsupportedIterableToArray(o, minLen) {
|
|
170
|
-
if (!o) return;
|
|
171
|
-
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
172
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
173
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
174
|
-
if (n === "Map" || n === "Set") return Array.from(o);
|
|
175
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
function _arrayLikeToArray(arr, len) {
|
|
179
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
32
|
+
var css_248z$u = ":host, :root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-600: #767676;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-orange-100: hsl(39.7, 99.01%, 98%);\n --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n --color-orange-900: hsl(39.7, 99.01%, 30%);\n --color-red: #ec040b;\n --color-red-100: hsl(358.19, 96.67%, 98%);\n --color-red-500: hsl(358.19, 96.67%, 47.06%);\n --color-red-600: hsl(358.19, 96.67%, 40%);\n --color-red-900: hsl(358.19, 96.67%, 20%);\n --color-green: #00853F;\n --color-green-100: hsl(148, 100%, 95%);\n --color-green-500: hsl(148.42, 100%, 26.08%);\n --color-green-900: hsl(148, 100%, 10%);\n --color-blue-100: #e3f2ff;\n --color-blue-500: #0070c4;\n --color-blue-600: #004f84;\n}\n\n:root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n /* line-height */\n --lh-xs: 0.875rem;\n --lh-sm: 1rem;\n --lh-base: 1.5rem;\n --lh-lg: 2rem;\n --lh-xl: 2.75rem;\n --lh-2xl: 3.5rem;\n --border-radius-sm: 0.15rem;\n --border-radius: 0.25rem;\n --border-radius-base: 0.25rem;\n --border-radius-lg: 0.5rem;\n --spacing-1: 0.5rem;\n --spacing-2: 0.875rem;\n --spacing-3: 1.75rem;\n --input-height: 2.625rem;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base);\n}\n\nbody,\ninput,\nbutton,\ntextarea {\n background: #fff;\n font-family: acumin-pro-semi-condensed, sans-serif;\n font-weight: 400;\n font-size: var(--fs-base);\n color: #333;\n}\n\nbody {\n margin: 0;\n scroll-behavior: smooth;\n}\n\n*,\n*:before,\n*:after {\n box-sizing: border-box;\n}\n\np {\n margin: 0;\n margin-bottom: 1rem;\n}\n\nhr {\n border-width: 0;\n border-top: 1px solid #ccc;\n padding: 0;\n margin: 0;\n}\n\nul,\nol {\n padding-left: 0;\n padding-left: 1rem;\n}\n\nli > ul,\nli > ol,\nli > ul,\nli > ol {\n padding-left: 0;\n margin-top: 0;\n}\n\ndl {\n margin-top: 0;\n}\n\ndd {\n margin-left: 0.5rem;\n}\n\na {\n color: var(--color-blue-500);\n cursor: pointer;\n}\n\na:hover {\n color: var(--color-blue-600);\n}\n\na:focus {\n outline-width: thin;\n outline-style: solid;\n outline-color: var(--color-blue-600);\n outline-offset: 0px;\n}\n\n::-moz-placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: #999;\n opacity: 1;\n /* Firefox */\n}\n\n:-ms-input-placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: #999;\n opacity: 1;\n /* Firefox */\n}\n\n::placeholder {\n /* Chrome, Firefox, Opera, Safari 10.1+ */\n color: #999;\n opacity: 1;\n /* Firefox */\n}\n\n:-ms-input-placeholder {\n /* Internet Explorer 10-11 */\n color: #999;\n}\n\n::-ms-input-placeholder {\n /* Microsoft Edge */\n color: #999;\n}";
|
|
33
|
+
styleInject(css_248z$u);
|
|
180
34
|
|
|
181
|
-
|
|
35
|
+
var css_248z$t = "/* typekit ***/\n/* This style is from the alberta design system */\n@import url(\"https://p.typekit.net/p.css?s=1&k=nur5yta&ht=tk&f=26036.26037.26044.26046.26047&a=14638192&app=typekit&e=css\");\n@font-face {\n font-family: \"acumin-pro-semi-condensed\";\n src: url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/l?subset_id=1&fvd=n4&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/d?subset_id=1&fvd=n4&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/a?subset_id=1&fvd=n4&v=3\") format(\"opentype\");\n font-style: normal;\n font-weight: 400;\n}\n@font-face {\n font-family: \"acumin-pro-semi-condensed\";\n src: url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/l?subset_id=1&fvd=i4&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/d?subset_id=1&fvd=i4&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/a?subset_id=1&fvd=i4&v=3\") format(\"opentype\");\n font-style: italic;\n font-weight: 400;\n}\n@font-face {\n font-family: \"acumin-pro-semi-condensed\";\n src: url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/l?subset_id=1&fvd=n7&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/d?subset_id=1&fvd=n7&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/a?subset_id=1&fvd=n7&v=3\") format(\"opentype\");\n font-style: normal;\n font-weight: 700;\n}\n@font-face {\n font-family: \"acumin-pro-semi-condensed\";\n src: url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/l?subset_id=1&fvd=i7&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/d?subset_id=1&fvd=i7&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/a?subset_id=1&fvd=i7&v=3\") format(\"opentype\");\n font-style: italic;\n font-weight: 700;\n}\n@font-face {\n font-family: \"acumin-pro-semi-condensed\";\n src: url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/l?subset_id=1&fvd=n6&v=3\") format(\"woff2\"), url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/d?subset_id=1&fvd=n6&v=3\") format(\"woff\"), url(\"https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/a?subset_id=1&fvd=n6&v=3\") format(\"opentype\");\n font-style: normal;\n font-weight: 600;\n}";
|
|
36
|
+
styleInject(css_248z$t);
|
|
182
37
|
|
|
183
|
-
|
|
38
|
+
/*! *****************************************************************************
|
|
39
|
+
Copyright (c) Microsoft Corporation.
|
|
40
|
+
|
|
41
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
42
|
+
purpose with or without fee is hereby granted.
|
|
43
|
+
|
|
44
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
45
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
46
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
47
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
48
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
49
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
50
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
51
|
+
***************************************************************************** */
|
|
52
|
+
|
|
53
|
+
function __rest(s, e) {
|
|
54
|
+
var t = {};
|
|
55
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
56
|
+
t[p] = s[p];
|
|
57
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
58
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
59
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
60
|
+
t[p[i]] = s[p[i]];
|
|
61
|
+
}
|
|
62
|
+
return t;
|
|
184
63
|
}
|
|
185
64
|
|
|
186
|
-
|
|
187
|
-
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
188
|
-
}
|
|
65
|
+
var propTypes = {exports: {}};
|
|
189
66
|
|
|
190
|
-
|
|
191
|
-
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
192
|
-
}
|
|
67
|
+
var reactIs = {exports: {}};
|
|
193
68
|
|
|
194
|
-
|
|
195
|
-
return module = { exports: {} }, fn(module, module.exports), module.exports;
|
|
196
|
-
}
|
|
69
|
+
var reactIs_production_min = {};
|
|
197
70
|
|
|
198
71
|
/** @license React v16.13.1
|
|
199
72
|
* react-is.production.min.js
|
|
@@ -205,43 +78,21 @@ function createCommonjsModule(fn, module) {
|
|
|
205
78
|
*/
|
|
206
79
|
var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
|
|
207
80
|
Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
|
|
208
|
-
function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
var reactIs_production_min = {
|
|
214
|
-
AsyncMode: AsyncMode,
|
|
215
|
-
ConcurrentMode: ConcurrentMode,
|
|
216
|
-
ContextConsumer: ContextConsumer,
|
|
217
|
-
ContextProvider: ContextProvider,
|
|
218
|
-
Element: Element,
|
|
219
|
-
ForwardRef: ForwardRef,
|
|
220
|
-
Fragment: Fragment,
|
|
221
|
-
Lazy: Lazy,
|
|
222
|
-
Memo: Memo,
|
|
223
|
-
Portal: Portal,
|
|
224
|
-
Profiler: Profiler,
|
|
225
|
-
StrictMode: StrictMode,
|
|
226
|
-
Suspense: Suspense,
|
|
227
|
-
isAsyncMode: isAsyncMode,
|
|
228
|
-
isConcurrentMode: isConcurrentMode,
|
|
229
|
-
isContextConsumer: isContextConsumer,
|
|
230
|
-
isContextProvider: isContextProvider,
|
|
231
|
-
isElement: isElement,
|
|
232
|
-
isForwardRef: isForwardRef,
|
|
233
|
-
isFragment: isFragment,
|
|
234
|
-
isLazy: isLazy,
|
|
235
|
-
isMemo: isMemo,
|
|
236
|
-
isPortal: isPortal,
|
|
237
|
-
isProfiler: isProfiler,
|
|
238
|
-
isStrictMode: isStrictMode,
|
|
239
|
-
isSuspense: isSuspense,
|
|
240
|
-
isValidElementType: isValidElementType,
|
|
241
|
-
typeOf: typeOf
|
|
242
|
-
};
|
|
81
|
+
function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}reactIs_production_min.AsyncMode=l;reactIs_production_min.ConcurrentMode=m;reactIs_production_min.ContextConsumer=k;reactIs_production_min.ContextProvider=h;reactIs_production_min.Element=c;reactIs_production_min.ForwardRef=n;reactIs_production_min.Fragment=e;reactIs_production_min.Lazy=t;reactIs_production_min.Memo=r;reactIs_production_min.Portal=d;
|
|
82
|
+
reactIs_production_min.Profiler=g;reactIs_production_min.StrictMode=f;reactIs_production_min.Suspense=p;reactIs_production_min.isAsyncMode=function(a){return A(a)||z(a)===l};reactIs_production_min.isConcurrentMode=A;reactIs_production_min.isContextConsumer=function(a){return z(a)===k};reactIs_production_min.isContextProvider=function(a){return z(a)===h};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};reactIs_production_min.isForwardRef=function(a){return z(a)===n};reactIs_production_min.isFragment=function(a){return z(a)===e};reactIs_production_min.isLazy=function(a){return z(a)===t};
|
|
83
|
+
reactIs_production_min.isMemo=function(a){return z(a)===r};reactIs_production_min.isPortal=function(a){return z(a)===d};reactIs_production_min.isProfiler=function(a){return z(a)===g};reactIs_production_min.isStrictMode=function(a){return z(a)===f};reactIs_production_min.isSuspense=function(a){return z(a)===p};
|
|
84
|
+
reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};reactIs_production_min.typeOf=z;
|
|
243
85
|
|
|
244
|
-
var reactIs_development =
|
|
86
|
+
var reactIs_development = {};
|
|
87
|
+
|
|
88
|
+
/** @license React v16.13.1
|
|
89
|
+
* react-is.development.js
|
|
90
|
+
*
|
|
91
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
92
|
+
*
|
|
93
|
+
* This source code is licensed under the MIT license found in the
|
|
94
|
+
* LICENSE file in the root directory of this source tree.
|
|
95
|
+
*/
|
|
245
96
|
|
|
246
97
|
|
|
247
98
|
|
|
@@ -382,74 +233,42 @@ function isSuspense(object) {
|
|
|
382
233
|
return typeOf(object) === REACT_SUSPENSE_TYPE;
|
|
383
234
|
}
|
|
384
235
|
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
236
|
+
reactIs_development.AsyncMode = AsyncMode;
|
|
237
|
+
reactIs_development.ConcurrentMode = ConcurrentMode;
|
|
238
|
+
reactIs_development.ContextConsumer = ContextConsumer;
|
|
239
|
+
reactIs_development.ContextProvider = ContextProvider;
|
|
240
|
+
reactIs_development.Element = Element;
|
|
241
|
+
reactIs_development.ForwardRef = ForwardRef;
|
|
242
|
+
reactIs_development.Fragment = Fragment;
|
|
243
|
+
reactIs_development.Lazy = Lazy;
|
|
244
|
+
reactIs_development.Memo = Memo;
|
|
245
|
+
reactIs_development.Portal = Portal;
|
|
246
|
+
reactIs_development.Profiler = Profiler;
|
|
247
|
+
reactIs_development.StrictMode = StrictMode;
|
|
248
|
+
reactIs_development.Suspense = Suspense;
|
|
249
|
+
reactIs_development.isAsyncMode = isAsyncMode;
|
|
250
|
+
reactIs_development.isConcurrentMode = isConcurrentMode;
|
|
251
|
+
reactIs_development.isContextConsumer = isContextConsumer;
|
|
252
|
+
reactIs_development.isContextProvider = isContextProvider;
|
|
253
|
+
reactIs_development.isElement = isElement;
|
|
254
|
+
reactIs_development.isForwardRef = isForwardRef;
|
|
255
|
+
reactIs_development.isFragment = isFragment;
|
|
256
|
+
reactIs_development.isLazy = isLazy;
|
|
257
|
+
reactIs_development.isMemo = isMemo;
|
|
258
|
+
reactIs_development.isPortal = isPortal;
|
|
259
|
+
reactIs_development.isProfiler = isProfiler;
|
|
260
|
+
reactIs_development.isStrictMode = isStrictMode;
|
|
261
|
+
reactIs_development.isSuspense = isSuspense;
|
|
262
|
+
reactIs_development.isValidElementType = isValidElementType;
|
|
263
|
+
reactIs_development.typeOf = typeOf;
|
|
413
264
|
})();
|
|
414
265
|
}
|
|
415
|
-
});
|
|
416
|
-
var reactIs_development_1 = reactIs_development.AsyncMode;
|
|
417
|
-
var reactIs_development_2 = reactIs_development.ConcurrentMode;
|
|
418
|
-
var reactIs_development_3 = reactIs_development.ContextConsumer;
|
|
419
|
-
var reactIs_development_4 = reactIs_development.ContextProvider;
|
|
420
|
-
var reactIs_development_5 = reactIs_development.Element;
|
|
421
|
-
var reactIs_development_6 = reactIs_development.ForwardRef;
|
|
422
|
-
var reactIs_development_7 = reactIs_development.Fragment;
|
|
423
|
-
var reactIs_development_8 = reactIs_development.Lazy;
|
|
424
|
-
var reactIs_development_9 = reactIs_development.Memo;
|
|
425
|
-
var reactIs_development_10 = reactIs_development.Portal;
|
|
426
|
-
var reactIs_development_11 = reactIs_development.Profiler;
|
|
427
|
-
var reactIs_development_12 = reactIs_development.StrictMode;
|
|
428
|
-
var reactIs_development_13 = reactIs_development.Suspense;
|
|
429
|
-
var reactIs_development_14 = reactIs_development.isAsyncMode;
|
|
430
|
-
var reactIs_development_15 = reactIs_development.isConcurrentMode;
|
|
431
|
-
var reactIs_development_16 = reactIs_development.isContextConsumer;
|
|
432
|
-
var reactIs_development_17 = reactIs_development.isContextProvider;
|
|
433
|
-
var reactIs_development_18 = reactIs_development.isElement;
|
|
434
|
-
var reactIs_development_19 = reactIs_development.isForwardRef;
|
|
435
|
-
var reactIs_development_20 = reactIs_development.isFragment;
|
|
436
|
-
var reactIs_development_21 = reactIs_development.isLazy;
|
|
437
|
-
var reactIs_development_22 = reactIs_development.isMemo;
|
|
438
|
-
var reactIs_development_23 = reactIs_development.isPortal;
|
|
439
|
-
var reactIs_development_24 = reactIs_development.isProfiler;
|
|
440
|
-
var reactIs_development_25 = reactIs_development.isStrictMode;
|
|
441
|
-
var reactIs_development_26 = reactIs_development.isSuspense;
|
|
442
|
-
var reactIs_development_27 = reactIs_development.isValidElementType;
|
|
443
|
-
var reactIs_development_28 = reactIs_development.typeOf;
|
|
444
|
-
|
|
445
|
-
var reactIs = createCommonjsModule(function (module) {
|
|
446
266
|
|
|
447
267
|
if (process.env.NODE_ENV === 'production') {
|
|
448
|
-
|
|
268
|
+
reactIs.exports = reactIs_production_min;
|
|
449
269
|
} else {
|
|
450
|
-
|
|
270
|
+
reactIs.exports = reactIs_development;
|
|
451
271
|
}
|
|
452
|
-
});
|
|
453
272
|
|
|
454
273
|
/*
|
|
455
274
|
object-assign
|
|
@@ -547,18 +366,25 @@ var objectAssign = shouldUseNative() ? Object.assign : function (target, source)
|
|
|
547
366
|
* LICENSE file in the root directory of this source tree.
|
|
548
367
|
*/
|
|
549
368
|
|
|
550
|
-
var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
|
|
369
|
+
var ReactPropTypesSecret$3 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
|
|
551
370
|
|
|
552
|
-
var ReactPropTypesSecret_1 = ReactPropTypesSecret;
|
|
371
|
+
var ReactPropTypesSecret_1 = ReactPropTypesSecret$3;
|
|
553
372
|
|
|
554
|
-
|
|
373
|
+
/**
|
|
374
|
+
* Copyright (c) 2013-present, Facebook, Inc.
|
|
375
|
+
*
|
|
376
|
+
* This source code is licensed under the MIT license found in the
|
|
377
|
+
* LICENSE file in the root directory of this source tree.
|
|
378
|
+
*/
|
|
379
|
+
|
|
380
|
+
var printWarning$1 = function() {};
|
|
555
381
|
|
|
556
382
|
if (process.env.NODE_ENV !== 'production') {
|
|
557
|
-
var ReactPropTypesSecret$
|
|
383
|
+
var ReactPropTypesSecret$2 = ReactPropTypesSecret_1;
|
|
558
384
|
var loggedTypeFailures = {};
|
|
559
|
-
var has = Function.call.bind(Object.prototype.hasOwnProperty);
|
|
385
|
+
var has$1 = Function.call.bind(Object.prototype.hasOwnProperty);
|
|
560
386
|
|
|
561
|
-
printWarning = function(text) {
|
|
387
|
+
printWarning$1 = function(text) {
|
|
562
388
|
var message = 'Warning: ' + text;
|
|
563
389
|
if (typeof console !== 'undefined') {
|
|
564
390
|
console.error(message);
|
|
@@ -583,10 +409,10 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
583
409
|
* @param {?Function} getStack Returns the component stack.
|
|
584
410
|
* @private
|
|
585
411
|
*/
|
|
586
|
-
function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
|
|
412
|
+
function checkPropTypes$1(typeSpecs, values, location, componentName, getStack) {
|
|
587
413
|
if (process.env.NODE_ENV !== 'production') {
|
|
588
414
|
for (var typeSpecName in typeSpecs) {
|
|
589
|
-
if (has(typeSpecs, typeSpecName)) {
|
|
415
|
+
if (has$1(typeSpecs, typeSpecName)) {
|
|
590
416
|
var error;
|
|
591
417
|
// Prop type validation may throw. In case they do, we don't want to
|
|
592
418
|
// fail the render phase where it didn't fail before. So we log it.
|
|
@@ -602,12 +428,12 @@ function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
|
|
|
602
428
|
err.name = 'Invariant Violation';
|
|
603
429
|
throw err;
|
|
604
430
|
}
|
|
605
|
-
error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret$
|
|
431
|
+
error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret$2);
|
|
606
432
|
} catch (ex) {
|
|
607
433
|
error = ex;
|
|
608
434
|
}
|
|
609
435
|
if (error && !(error instanceof Error)) {
|
|
610
|
-
printWarning(
|
|
436
|
+
printWarning$1(
|
|
611
437
|
(componentName || 'React class') + ': type specification of ' +
|
|
612
438
|
location + ' `' + typeSpecName + '` is invalid; the type checker ' +
|
|
613
439
|
'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +
|
|
@@ -623,7 +449,7 @@ function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
|
|
|
623
449
|
|
|
624
450
|
var stack = getStack ? getStack() : '';
|
|
625
451
|
|
|
626
|
-
printWarning(
|
|
452
|
+
printWarning$1(
|
|
627
453
|
'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')
|
|
628
454
|
);
|
|
629
455
|
}
|
|
@@ -637,19 +463,32 @@ function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
|
|
|
637
463
|
*
|
|
638
464
|
* @private
|
|
639
465
|
*/
|
|
640
|
-
checkPropTypes.resetWarningCache = function() {
|
|
466
|
+
checkPropTypes$1.resetWarningCache = function() {
|
|
641
467
|
if (process.env.NODE_ENV !== 'production') {
|
|
642
468
|
loggedTypeFailures = {};
|
|
643
469
|
}
|
|
644
470
|
};
|
|
645
471
|
|
|
646
|
-
var checkPropTypes_1 = checkPropTypes;
|
|
472
|
+
var checkPropTypes_1 = checkPropTypes$1;
|
|
647
473
|
|
|
648
|
-
|
|
649
|
-
|
|
474
|
+
/**
|
|
475
|
+
* Copyright (c) 2013-present, Facebook, Inc.
|
|
476
|
+
*
|
|
477
|
+
* This source code is licensed under the MIT license found in the
|
|
478
|
+
* LICENSE file in the root directory of this source tree.
|
|
479
|
+
*/
|
|
480
|
+
|
|
481
|
+
var ReactIs$1 = reactIs.exports;
|
|
482
|
+
var assign = objectAssign;
|
|
483
|
+
|
|
484
|
+
var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
|
|
485
|
+
var checkPropTypes = checkPropTypes_1;
|
|
486
|
+
|
|
487
|
+
var has = Function.call.bind(Object.prototype.hasOwnProperty);
|
|
488
|
+
var printWarning = function() {};
|
|
650
489
|
|
|
651
490
|
if (process.env.NODE_ENV !== 'production') {
|
|
652
|
-
printWarning
|
|
491
|
+
printWarning = function(text) {
|
|
653
492
|
var message = 'Warning: ' + text;
|
|
654
493
|
if (typeof console !== 'undefined') {
|
|
655
494
|
console.error(message);
|
|
@@ -807,7 +646,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
|
|
807
646
|
componentName = componentName || ANONYMOUS;
|
|
808
647
|
propFullName = propFullName || propName;
|
|
809
648
|
|
|
810
|
-
if (secret !==
|
|
649
|
+
if (secret !== ReactPropTypesSecret$1) {
|
|
811
650
|
if (throwOnDirectAccess) {
|
|
812
651
|
// New behavior only for users of `prop-types` package
|
|
813
652
|
var err = new Error(
|
|
@@ -825,7 +664,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
|
|
825
664
|
// Avoid spamming the console because they are often not actionable except for lib authors
|
|
826
665
|
manualPropTypeWarningCount < 3
|
|
827
666
|
) {
|
|
828
|
-
printWarning
|
|
667
|
+
printWarning(
|
|
829
668
|
'You are manually calling a React.PropTypes validation ' +
|
|
830
669
|
'function for the `' + propFullName + '` prop on `' + componentName + '`. This is deprecated ' +
|
|
831
670
|
'and will throw in the standalone `prop-types` package. ' +
|
|
@@ -888,7 +727,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
|
|
888
727
|
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
|
|
889
728
|
}
|
|
890
729
|
for (var i = 0; i < propValue.length; i++) {
|
|
891
|
-
var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']',
|
|
730
|
+
var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret$1);
|
|
892
731
|
if (error instanceof Error) {
|
|
893
732
|
return error;
|
|
894
733
|
}
|
|
@@ -913,7 +752,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
|
|
913
752
|
function createElementTypeTypeChecker() {
|
|
914
753
|
function validate(props, propName, componentName, location, propFullName) {
|
|
915
754
|
var propValue = props[propName];
|
|
916
|
-
if (!
|
|
755
|
+
if (!ReactIs$1.isValidElementType(propValue)) {
|
|
917
756
|
var propType = getPropType(propValue);
|
|
918
757
|
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement type.'));
|
|
919
758
|
}
|
|
@@ -938,12 +777,12 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
|
|
938
777
|
if (!Array.isArray(expectedValues)) {
|
|
939
778
|
if (process.env.NODE_ENV !== 'production') {
|
|
940
779
|
if (arguments.length > 1) {
|
|
941
|
-
printWarning
|
|
780
|
+
printWarning(
|
|
942
781
|
'Invalid arguments supplied to oneOf, expected an array, got ' + arguments.length + ' arguments. ' +
|
|
943
782
|
'A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).'
|
|
944
783
|
);
|
|
945
784
|
} else {
|
|
946
|
-
printWarning
|
|
785
|
+
printWarning('Invalid argument supplied to oneOf, expected an array.');
|
|
947
786
|
}
|
|
948
787
|
}
|
|
949
788
|
return emptyFunctionThatReturnsNull;
|
|
@@ -980,8 +819,8 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
|
|
980
819
|
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
|
|
981
820
|
}
|
|
982
821
|
for (var key in propValue) {
|
|
983
|
-
if (has
|
|
984
|
-
var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key,
|
|
822
|
+
if (has(propValue, key)) {
|
|
823
|
+
var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$1);
|
|
985
824
|
if (error instanceof Error) {
|
|
986
825
|
return error;
|
|
987
826
|
}
|
|
@@ -994,14 +833,14 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
|
|
994
833
|
|
|
995
834
|
function createUnionTypeChecker(arrayOfTypeCheckers) {
|
|
996
835
|
if (!Array.isArray(arrayOfTypeCheckers)) {
|
|
997
|
-
process.env.NODE_ENV !== 'production' ? printWarning
|
|
836
|
+
process.env.NODE_ENV !== 'production' ? printWarning('Invalid argument supplied to oneOfType, expected an instance of array.') : void 0;
|
|
998
837
|
return emptyFunctionThatReturnsNull;
|
|
999
838
|
}
|
|
1000
839
|
|
|
1001
840
|
for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
|
|
1002
841
|
var checker = arrayOfTypeCheckers[i];
|
|
1003
842
|
if (typeof checker !== 'function') {
|
|
1004
|
-
printWarning
|
|
843
|
+
printWarning(
|
|
1005
844
|
'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' +
|
|
1006
845
|
'received ' + getPostfixForTypeWarning(checker) + ' at index ' + i + '.'
|
|
1007
846
|
);
|
|
@@ -1012,7 +851,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
|
|
1012
851
|
function validate(props, propName, componentName, location, propFullName) {
|
|
1013
852
|
for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
|
|
1014
853
|
var checker = arrayOfTypeCheckers[i];
|
|
1015
|
-
if (checker(props, propName, componentName, location, propFullName,
|
|
854
|
+
if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret$1) == null) {
|
|
1016
855
|
return null;
|
|
1017
856
|
}
|
|
1018
857
|
}
|
|
@@ -1044,7 +883,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
|
|
1044
883
|
if (!checker) {
|
|
1045
884
|
continue;
|
|
1046
885
|
}
|
|
1047
|
-
var error = checker(propValue, key, componentName, location, propFullName + '.' + key,
|
|
886
|
+
var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$1);
|
|
1048
887
|
if (error) {
|
|
1049
888
|
return error;
|
|
1050
889
|
}
|
|
@@ -1063,7 +902,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
|
|
1063
902
|
}
|
|
1064
903
|
// We need to check all keys in case some are required but missing from
|
|
1065
904
|
// props.
|
|
1066
|
-
var allKeys =
|
|
905
|
+
var allKeys = assign({}, props[propName], shapeTypes);
|
|
1067
906
|
for (var key in allKeys) {
|
|
1068
907
|
var checker = shapeTypes[key];
|
|
1069
908
|
if (!checker) {
|
|
@@ -1073,7 +912,7 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
|
|
1073
912
|
'\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, ' ')
|
|
1074
913
|
);
|
|
1075
914
|
}
|
|
1076
|
-
var error = checker(propValue, key, componentName, location, propFullName + '.' + key,
|
|
915
|
+
var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$1);
|
|
1077
916
|
if (error) {
|
|
1078
917
|
return error;
|
|
1079
918
|
}
|
|
@@ -1215,20 +1054,29 @@ var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
|
|
|
1215
1054
|
return propValue.constructor.name;
|
|
1216
1055
|
}
|
|
1217
1056
|
|
|
1218
|
-
ReactPropTypes.checkPropTypes =
|
|
1219
|
-
ReactPropTypes.resetWarningCache =
|
|
1057
|
+
ReactPropTypes.checkPropTypes = checkPropTypes;
|
|
1058
|
+
ReactPropTypes.resetWarningCache = checkPropTypes.resetWarningCache;
|
|
1220
1059
|
ReactPropTypes.PropTypes = ReactPropTypes;
|
|
1221
1060
|
|
|
1222
1061
|
return ReactPropTypes;
|
|
1223
1062
|
};
|
|
1224
1063
|
|
|
1064
|
+
/**
|
|
1065
|
+
* Copyright (c) 2013-present, Facebook, Inc.
|
|
1066
|
+
*
|
|
1067
|
+
* This source code is licensed under the MIT license found in the
|
|
1068
|
+
* LICENSE file in the root directory of this source tree.
|
|
1069
|
+
*/
|
|
1070
|
+
|
|
1071
|
+
var ReactPropTypesSecret = ReactPropTypesSecret_1;
|
|
1072
|
+
|
|
1225
1073
|
function emptyFunction() {}
|
|
1226
1074
|
function emptyFunctionWithReset() {}
|
|
1227
1075
|
emptyFunctionWithReset.resetWarningCache = emptyFunction;
|
|
1228
1076
|
|
|
1229
1077
|
var factoryWithThrowingShims = function() {
|
|
1230
1078
|
function shim(props, propName, componentName, location, propFullName, secret) {
|
|
1231
|
-
if (secret ===
|
|
1079
|
+
if (secret === ReactPropTypesSecret) {
|
|
1232
1080
|
// It is still safe when called from React.
|
|
1233
1081
|
return;
|
|
1234
1082
|
}
|
|
@@ -1274,7 +1122,6 @@ var factoryWithThrowingShims = function() {
|
|
|
1274
1122
|
return ReactPropTypes;
|
|
1275
1123
|
};
|
|
1276
1124
|
|
|
1277
|
-
var propTypes = createCommonjsModule(function (module) {
|
|
1278
1125
|
/**
|
|
1279
1126
|
* Copyright (c) 2013-present, Facebook, Inc.
|
|
1280
1127
|
*
|
|
@@ -1283,247 +1130,306 @@ var propTypes = createCommonjsModule(function (module) {
|
|
|
1283
1130
|
*/
|
|
1284
1131
|
|
|
1285
1132
|
if (process.env.NODE_ENV !== 'production') {
|
|
1286
|
-
var ReactIs = reactIs;
|
|
1133
|
+
var ReactIs = reactIs.exports;
|
|
1287
1134
|
|
|
1288
1135
|
// By explicitly using `prop-types` you are opting into new development behavior.
|
|
1289
1136
|
// http://fb.me/prop-types-in-prod
|
|
1290
1137
|
var throwOnDirectAccess = true;
|
|
1291
|
-
|
|
1138
|
+
propTypes.exports = factoryWithTypeCheckers(ReactIs.isElement, throwOnDirectAccess);
|
|
1292
1139
|
} else {
|
|
1293
1140
|
// By explicitly using `prop-types` you are opting into new production behavior.
|
|
1294
1141
|
// http://fb.me/prop-types-in-prod
|
|
1295
|
-
|
|
1142
|
+
propTypes.exports = factoryWithThrowingShims();
|
|
1296
1143
|
}
|
|
1297
|
-
});
|
|
1298
1144
|
|
|
1299
|
-
var
|
|
1300
|
-
styleInject(css_248z$2);
|
|
1145
|
+
var PropTypes = propTypes.exports;
|
|
1301
1146
|
|
|
1302
|
-
var
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1147
|
+
var css_248z$s = "/* Palette */\n/* Semantic usages */\n.goa-callout {\n box-sizing: border-box;\n display: inline-block;\n position: relative;\n width: 100%;\n margin: 24px 0 0;\n padding: 23px 24px 23px 24px;\n border-width: 0;\n border-left-width: 48px;\n border-style: solid;\n border-color: #0070c4;\n background: #f1f1f1;\n /* variants ***/\n}\n.goa-callout *:first-child {\n margin-top: 0;\n}\n.goa-callout *:last-child {\n margin-bottom: 0;\n}\n.goa-callout.goa--important {\n border-color: #feba35;\n}\n.goa-callout.goa--emergency {\n border-color: #EC040B;\n}\n.goa-callout.goa--error {\n border-color: #EC040B;\n}\n.goa-callout.goa--success {\n border-color: #00853f;\n}\n.goa-callout:before {\n position: absolute;\n top: 28px;\n left: -36px;\n width: 24px;\n height: 24px;\n content: \"\";\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23fff' d='M15.16,15.5h-2V9a1,1,0,0,0-1-1H9.82a1,1,0,0,0,0,2h1.36V15.5h-2a1,1,0,1,0,0,2h6a1,1,0,0,0,0-2Z'/%3E%3Cpath fill='%23fff' d='M12,7.33A1.29,1.29,0,1,0,10.73,6,1.29,1.29,0,0,0,12,7.33Z'/%3E%3C/svg%3E\");\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center center;\n}\n.goa-callout.goa--emergency:before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11,9.41v4.52a1,1,0,0,0,2,0V9.41a1,1,0,0,0-2,0Z'/%3E%3Cpath fill='%23fff' d='M12,16.15a1.29,1.29,0,1,0,1.29,1.29A1.29,1.29,0,0,0,12,16.15Z'/%3E%3Cpath fill='%23fff' d='M22.87,20.14l-10-17.32a1,1,0,0,0-1.74,0l-10,17.32a1,1,0,0,0,0,1,1,1,0,0,0,.87.5H22a1,1,0,0,0,.87-.5A1,1,0,0,0,22.87,20.14Zm-19.14-.5L12,5.32l8.27,14.32Z'/%3E%3C/svg%3E\");\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center center;\n}\n.goa-callout.goa--error:before {\n background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><defs><style>.a{fill:none;}.b{fill:white;}</style></defs><rect class=\"a\" width=\"24\" height=\"24\"/><path class=\"b\" d=\"M48.1,23a11,11,0,1,0-11-11A10.968,10.968,0,0,0,48.1,23Zm0-20a9,9,0,1,1-9,9A8.963,8.963,0,0,1,48.1,3Z\" transform=\"translate(-36)\"/><path class=\"b\" d=\"M43.6,16.4a.967.967,0,0,0,1.4,0l3-3,3,3a.967.967,0,0,0,1.4,0,.967.967,0,0,0,0-1.4l-3-3,3-3A.99.99,0,0,0,51,7.6l-3,3-3-3A.99.99,0,0,0,43.6,9l3,3-3,3A1.2,1.2,0,0,0,43.6,16.4Z\" transform=\"translate(-36)\"/></svg>');\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center center;\n}\n.goa-callout.goa--important:before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23000' d='M12,14.46a1,1,0,0,0,1-1V6.57a1,1,0,0,0-2,0v6.89A1,1,0,0,0,12,14.46Z'/%3E%3Cpath fill='%23000' d='M12,15.68A1.29,1.29,0,1,0,13.29,17,1.29,1.29,0,0,0,12,15.68Z'/%3E%3C/svg%3E\");\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center center;\n}\n.goa-callout.goa--event:before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.27,22.85H20.73a2.14,2.14,0,0,0,2.14-2.14V5A2.14,2.14,0,0,0,20.73,2.9h-2.1v2h2.1a.14.14,0,0,1,.14.14V8.31H3.13V5a.14.14,0,0,1,.14-.14H5.48V6.28a1,1,0,1,0,2,0V1.85a1,1,0,1,0-2,0v1H3.27A2.14,2.14,0,0,0,1.13,5V20.71A2.14,2.14,0,0,0,3.27,22.85Zm17.6-12.54v10.4a.14.14,0,0,1-.14.14H3.27a.14.14,0,0,1-.14-.14V10.31Z'/%3E%3Cpath fill='%23fff' d='M16.45,7.28a1,1,0,0,0,1-1V1.85a1,1,0,0,0-2,0v1h-1.8v2h1.8V6.28A1,1,0,0,0,16.45,7.28Z'/%3E%3Cpath fill='%23fff' d='M11.47,7.28a1,1,0,0,0,1-1V1.85a1,1,0,1,0-2,0v1H8.66v2h1.81V6.28A1,1,0,0,0,11.47,7.28Z'/%3E%3Crect fill='%23fff' x='6.67' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='11.22' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='15.77' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='3.64' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='8.19' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='12.74' y='15.83' width='2.33' height='2.33'/%3E%3C/svg%3E\");\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center center;\n}\n.goa-callout.goa--event:before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.27,22.85H20.73a2.14,2.14,0,0,0,2.14-2.14V5A2.14,2.14,0,0,0,20.73,2.9h-2.1v2h2.1a.14.14,0,0,1,.14.14V8.31H3.13V5a.14.14,0,0,1,.14-.14H5.48V6.28a1,1,0,1,0,2,0V1.85a1,1,0,1,0-2,0v1H3.27A2.14,2.14,0,0,0,1.13,5V20.71A2.14,2.14,0,0,0,3.27,22.85Zm17.6-12.54v10.4a.14.14,0,0,1-.14.14H3.27a.14.14,0,0,1-.14-.14V10.31Z'/%3E%3Cpath fill='%23fff' d='M16.45,7.28a1,1,0,0,0,1-1V1.85a1,1,0,0,0-2,0v1h-1.8v2h1.8V6.28A1,1,0,0,0,16.45,7.28Z'/%3E%3Cpath fill='%23fff' d='M11.47,7.28a1,1,0,0,0,1-1V1.85a1,1,0,1,0-2,0v1H8.66v2h1.81V6.28A1,1,0,0,0,11.47,7.28Z'/%3E%3Crect fill='%23fff' x='6.67' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='11.22' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='15.77' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='3.64' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='8.19' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='12.74' y='15.83' width='2.33' height='2.33'/%3E%3C/svg%3E\");\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center center;\n}\n.goa-callout.goa--success:before {\n background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><defs><style>.a{fill:none;}.b{fill:white;}</style></defs><g transform=\"translate(-23 -68)\"><rect class=\"a\" width=\"24\" height=\"24\" transform=\"translate(23 68)\"/><path class=\"b\" d=\"M12,23A11,11,0,1,0,1,12,10.968,10.968,0,0,0,12,23ZM12,3a9,9,0,1,1-9,9A8.963,8.963,0,0,1,12,3Z\" transform=\"translate(23 68)\"/><path class=\"b\" d=\"M10.9,16.4a.908.908,0,0,0,.7.3h.1a.842.842,0,0,0,.7-.4L17.6,9a.913.913,0,0,0-.2-1.4,1,1,0,0,0-1.4.3l-4.5,6.3L8,10.5a.99.99,0,0,0-1.4,1.4Z\" transform=\"translate(23 68)\"/></g></svg>');\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center center;\n}\n.goa-callout .messages {\n margin-bottom: 0;\n margin-top: 1em;\n}";
|
|
1148
|
+
styleInject(css_248z$s);
|
|
1149
|
+
|
|
1150
|
+
const GoACallout = _a => {
|
|
1151
|
+
var {
|
|
1152
|
+
title,
|
|
1153
|
+
type = "information",
|
|
1154
|
+
content,
|
|
1155
|
+
children = null
|
|
1156
|
+
} = _a;
|
|
1157
|
+
__rest(_a, ["title", "type", "content", "children"]);
|
|
1158
|
+
|
|
1159
|
+
return jsx("div", {
|
|
1160
|
+
children: jsx("div", Object.assign({
|
|
1161
|
+
className: `goa-callout goa--${type}`
|
|
1162
|
+
}, {
|
|
1163
|
+
children: jsxs("div", {
|
|
1164
|
+
children: [jsx("h3", Object.assign({
|
|
1165
|
+
"data-testid": 'callout-title'
|
|
1166
|
+
}, {
|
|
1167
|
+
children: title
|
|
1168
|
+
}), void 0), jsx("div", Object.assign({
|
|
1169
|
+
className: "messages",
|
|
1170
|
+
"data-testid": 'callout-content'
|
|
1171
|
+
}, {
|
|
1172
|
+
children: content || children
|
|
1173
|
+
}), void 0)]
|
|
1174
|
+
}, void 0)
|
|
1175
|
+
}), void 0)
|
|
1176
|
+
}, void 0);
|
|
1319
1177
|
};
|
|
1320
1178
|
GoACallout.propTypes = {
|
|
1321
|
-
title:
|
|
1322
|
-
type:
|
|
1323
|
-
content:
|
|
1179
|
+
title: PropTypes.string,
|
|
1180
|
+
type: PropTypes.string.isRequired,
|
|
1181
|
+
content: PropTypes.string
|
|
1324
1182
|
};
|
|
1325
1183
|
|
|
1326
|
-
var css_248z$
|
|
1327
|
-
styleInject(css_248z$
|
|
1184
|
+
var css_248z$r = "/* Palette */\n/* Semantic usages */\n.goa-notification {\n box-sizing: border-box;\n display: inline-block;\n position: relative;\n width: 100%;\n padding-left: 72px;\n padding-right: 72px;\n color: #fff;\n background: #0070c4;\n /* variants ***/\n}\n.goa-notification.dismissed {\n display: none;\n}\n@media screen and (min-width: 768px) and (max-width: 1199px) {\n .goa-notification {\n padding-left: 24px;\n padding-right: 24px;\n }\n}\n@media screen and (max-width: 767px) {\n .goa-notification {\n padding-left: 24px;\n padding-right: 24px;\n }\n}\n.goa-notification .content {\n box-sizing: border-box;\n display: flex;\n width: 100%;\n margin: 0;\n position: relative;\n padding: 0 36px;\n}\n.goa-notification .content .message {\n flex: 1 0 0;\n box-sizing: border-box;\n min-height: 56px;\n padding: 28px 0;\n}\n.goa-notification .content .close {\n flex: 0 1 auto;\n color: #fff;\n}\n.goa-notification a {\n color: #fff;\n}\n.goa-notification a:hover, .goa-notification a:focus {\n color: #fff;\n text-decoration: none;\n}\n.goa-notification.goa--event {\n background-color: #00853f;\n}\n.goa-notification.goa--important {\n background-color: #feba35;\n}\n.goa-notification.goa--important .message {\n color: #333;\n}\n.goa-notification.goa--important a {\n color: #333;\n}\n.goa-notification.goa--important a:hover, .goa-notification.goa--important a:focus {\n color: #333;\n}\n.goa-notification.goa--emergency {\n background-color: #EC040B;\n}\n.goa-notification .close {\n align-self: center;\n position: absolute;\n right: 12px;\n cursor: pointer;\n}\n.goa-notification .close svg {\n fill: #fff;\n color: #fff;\n}\n.goa-notification .content:before {\n position: absolute;\n top: 50%;\n left: 6px;\n width: 24px;\n height: 24px;\n margin-top: -12px;\n content: \"\";\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23fff' d='M15.16,15.5h-2V9a1,1,0,0,0-1-1H9.82a1,1,0,0,0,0,2h1.36V15.5h-2a1,1,0,1,0,0,2h6a1,1,0,0,0,0-2Z'/%3E%3Cpath fill='%23fff' d='M12,7.33A1.29,1.29,0,1,0,10.73,6,1.29,1.29,0,0,0,12,7.33Z'/%3E%3C/svg%3E\");\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center center;\n}\n.goa-notification.goa--emergency .content:before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11,9.41v4.52a1,1,0,0,0,2,0V9.41a1,1,0,0,0-2,0Z'/%3E%3Cpath fill='%23fff' d='M12,16.15a1.29,1.29,0,1,0,1.29,1.29A1.29,1.29,0,0,0,12,16.15Z'/%3E%3Cpath fill='%23fff' d='M22.87,20.14l-10-17.32a1,1,0,0,0-1.74,0l-10,17.32a1,1,0,0,0,0,1,1,1,0,0,0,.87.5H22a1,1,0,0,0,.87-.5A1,1,0,0,0,22.87,20.14Zm-19.14-.5L12,5.32l8.27,14.32Z'/%3E%3C/svg%3E\");\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center center;\n}\n.goa-notification.goa--important .content:before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23000' d='M12,14.46a1,1,0,0,0,1-1V6.57a1,1,0,0,0-2,0v6.89A1,1,0,0,0,12,14.46Z'/%3E%3Cpath fill='%23000' d='M12,15.68A1.29,1.29,0,1,0,13.29,17,1.29,1.29,0,0,0,12,15.68Z'/%3E%3C/svg%3E\");\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center center;\n}\n.goa-notification.goa--event .content:before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.27,22.85H20.73a2.14,2.14,0,0,0,2.14-2.14V5A2.14,2.14,0,0,0,20.73,2.9h-2.1v2h2.1a.14.14,0,0,1,.14.14V8.31H3.13V5a.14.14,0,0,1,.14-.14H5.48V6.28a1,1,0,1,0,2,0V1.85a1,1,0,1,0-2,0v1H3.27A2.14,2.14,0,0,0,1.13,5V20.71A2.14,2.14,0,0,0,3.27,22.85Zm17.6-12.54v10.4a.14.14,0,0,1-.14.14H3.27a.14.14,0,0,1-.14-.14V10.31Z'/%3E%3Cpath fill='%23fff' d='M16.45,7.28a1,1,0,0,0,1-1V1.85a1,1,0,0,0-2,0v1h-1.8v2h1.8V6.28A1,1,0,0,0,16.45,7.28Z'/%3E%3Cpath fill='%23fff' d='M11.47,7.28a1,1,0,0,0,1-1V1.85a1,1,0,1,0-2,0v1H8.66v2h1.81V6.28A1,1,0,0,0,11.47,7.28Z'/%3E%3Crect fill='%23fff' x='6.67' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='11.22' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='15.77' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='3.64' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='8.19' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='12.74' y='15.83' width='2.33' height='2.33'/%3E%3C/svg%3E\");\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center center;\n}";
|
|
1185
|
+
styleInject(css_248z$r);
|
|
1328
1186
|
|
|
1329
|
-
var css_248z$
|
|
1330
|
-
styleInject(css_248z$
|
|
1187
|
+
var css_248z$q = ".goa-notifications .title {\n position: absolute;\n overflow: hidden;\n clip: rect(1px, 1px, 1px, 1px);\n left: -10px;\n width: 1px;\n height: 1px;\n white-space: nowrap;\n}\n.goa-notifications ul {\n box-sizing: border-box;\n display: inline-block;\n width: 100%;\n margin: 0;\n padding: 0;\n list-style-type: none;\n}\n.goa-notifications ul li {\n box-sizing: border-box;\n display: block;\n width: 100%;\n margin: 0;\n padding: 0;\n}";
|
|
1188
|
+
styleInject(css_248z$q);
|
|
1331
1189
|
|
|
1332
|
-
|
|
1333
|
-
var
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
dismissed = _useState2[0],
|
|
1348
|
-
setDismissed = _useState2[1];
|
|
1349
|
-
|
|
1350
|
-
var dismissTrigger = function dismissTrigger(dismissAction) {
|
|
1190
|
+
const GoANotification = _a => {
|
|
1191
|
+
var {
|
|
1192
|
+
title,
|
|
1193
|
+
type = "information",
|
|
1194
|
+
message,
|
|
1195
|
+
notificationUrl,
|
|
1196
|
+
isDismissable = true,
|
|
1197
|
+
children = null,
|
|
1198
|
+
onDismiss
|
|
1199
|
+
} = _a;
|
|
1200
|
+
__rest(_a, ["title", "type", "message", "notificationUrl", "isDismissable", "children", "onDismiss"]);
|
|
1201
|
+
|
|
1202
|
+
const [dismissed, setDismissed] = useState(false);
|
|
1203
|
+
|
|
1204
|
+
const dismissTrigger = dismissAction => {
|
|
1351
1205
|
setDismissed(dismissAction);
|
|
1352
1206
|
onDismiss();
|
|
1353
1207
|
};
|
|
1354
1208
|
|
|
1355
1209
|
if (!dismissed) {
|
|
1356
|
-
return
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1210
|
+
return jsxs("div", {
|
|
1211
|
+
children: [jsx("div", Object.assign({
|
|
1212
|
+
className: "goa-notifications"
|
|
1213
|
+
}, {
|
|
1214
|
+
children: jsx("h2", Object.assign({
|
|
1215
|
+
className: "title"
|
|
1216
|
+
}, {
|
|
1217
|
+
children: title
|
|
1218
|
+
}), void 0)
|
|
1219
|
+
}), void 0), jsx("div", Object.assign({
|
|
1220
|
+
role: "notification",
|
|
1221
|
+
className: `goa-notification goa--${type}`
|
|
1222
|
+
}, {
|
|
1223
|
+
children: jsxs("div", Object.assign({
|
|
1224
|
+
className: 'content'
|
|
1225
|
+
}, {
|
|
1226
|
+
children: [notificationUrl ? jsx("a", Object.assign({
|
|
1227
|
+
className: "message",
|
|
1228
|
+
role: "url",
|
|
1229
|
+
href: notificationUrl
|
|
1230
|
+
}, {
|
|
1231
|
+
children: message || children
|
|
1232
|
+
}), void 0) : jsx("span", Object.assign({
|
|
1233
|
+
className: "message"
|
|
1234
|
+
}, {
|
|
1235
|
+
children: message || children
|
|
1236
|
+
}), void 0), isDismissable && jsx("a", Object.assign({
|
|
1237
|
+
role: "closeBox",
|
|
1238
|
+
className: "close",
|
|
1239
|
+
title: "Dismiss",
|
|
1240
|
+
onClick: () => dismissTrigger(!dismissed)
|
|
1241
|
+
}, {
|
|
1242
|
+
children: jsx("svg", Object.assign({
|
|
1243
|
+
width: "16px",
|
|
1244
|
+
height: "16px",
|
|
1245
|
+
viewBox: "0 0 16 16"
|
|
1246
|
+
}, {
|
|
1247
|
+
children: jsx("path", {
|
|
1248
|
+
d: "M 15.99 14.54C 15.99 14.54 14.54 15.99 14.54 15.99 14.54 15.99 8 9.45 8 9.45 8 9.45 1.46 15.99 1.46 15.99 1.46 15.99 0.01 14.54 0.01 14.54 0.01 14.54 6.55 8 6.55 8 6.55 8 0.01 1.46 0.01 1.46 0.01 1.46 1.46 0.01 1.46 0.01 1.46 0.01 8 6.55 8 6.55 8 6.55 14.54 0.01 14.54 0.01 14.54 0.01 15.99 1.46 15.99 1.46 15.99 1.46 9.45 8 9.45 8 9.45 8 15.99 14.54 15.99 14.54Z"
|
|
1249
|
+
}, void 0)
|
|
1250
|
+
}), void 0)
|
|
1251
|
+
}), void 0)]
|
|
1252
|
+
}), void 0)
|
|
1253
|
+
}), void 0)]
|
|
1254
|
+
}, void 0);
|
|
1385
1255
|
} else {
|
|
1386
1256
|
return null;
|
|
1387
1257
|
}
|
|
1388
1258
|
};
|
|
1389
1259
|
GoANotification.propTypes = {
|
|
1390
|
-
title:
|
|
1391
|
-
type:
|
|
1392
|
-
content:
|
|
1260
|
+
title: PropTypes.string,
|
|
1261
|
+
type: PropTypes.string.isRequired,
|
|
1262
|
+
content: PropTypes.string
|
|
1393
1263
|
};
|
|
1394
1264
|
|
|
1395
|
-
var css_248z$
|
|
1396
|
-
styleInject(css_248z$
|
|
1265
|
+
var css_248z$p = "/* Palette */\n/* Semantic usages */\n/* Common button colors */\n/* Primary colors */\n/* Secondary colors */\n/* Tertiary colors */\n/* This style is from the alberta design system */\nbutton.goa-button,\ninput[type=button].goa-button,\ninput[type=submit].goa-button {\n box-sizing: border-box;\n min-width: 70px;\n padding: 12px;\n border: 2px solid #0070c4;\n border-radius: 4px;\n background: #0070c4;\n cursor: pointer;\n color: #fff;\n font-size: 18px;\n font-weight: 700;\n line-height: 1em;\n}\nbutton.goa-button.btn-small,\ninput[type=button].goa-button.btn-small,\ninput[type=submit].goa-button.btn-small {\n font-size: 16px;\n padding: 8px;\n margin: 12px 12px 0 0;\n}\nbutton.goa-button:last-of-type,\ninput[type=button].goa-button:last-of-type,\ninput[type=submit].goa-button:last-of-type {\n margin-right: 0;\n}\nbutton.goa-button:disabled, button.goa-button:disabled.goa--secondary, button.goa-button:disabled.goa--tertiary,\ninput[type=button].goa-button:disabled,\ninput[type=button].goa-button:disabled.goa--secondary,\ninput[type=button].goa-button:disabled.goa--tertiary,\ninput[type=submit].goa-button:disabled,\ninput[type=submit].goa-button:disabled.goa--secondary,\ninput[type=submit].goa-button:disabled.goa--tertiary {\n pointer-events: none;\n color: #666;\n background-color: #f1f1f1;\n border-color: #f1f1f1;\n}\nbutton.goa-button:hover,\ninput[type=button].goa-button:hover,\ninput[type=submit].goa-button:hover {\n border-color: #004f84;\n background: #004f84;\n}\nbutton.goa-button:focus, button.goa-button:active,\ninput[type=button].goa-button:focus,\ninput[type=button].goa-button:active,\ninput[type=submit].goa-button:focus,\ninput[type=submit].goa-button:active {\n border-color: #004f84;\n box-shadow: 0 0 0 3px #feba35;\n background: #004f84;\n outline: none;\n}\nbutton.goa-button.goa--secondary,\ninput[type=button].goa-button.goa--secondary,\ninput[type=submit].goa-button.goa--secondary {\n border: 2px solid #0070c4;\n background: #fff;\n color: #0070c4;\n}\nbutton.goa-button.goa--secondary:hover,\ninput[type=button].goa-button.goa--secondary:hover,\ninput[type=submit].goa-button.goa--secondary:hover {\n border-color: #004f84;\n background: #fff;\n color: #004f84;\n}\nbutton.goa-button.goa--secondary:focus, button.goa-button.goa--secondary:active,\ninput[type=button].goa-button.goa--secondary:focus,\ninput[type=button].goa-button.goa--secondary:active,\ninput[type=submit].goa-button.goa--secondary:focus,\ninput[type=submit].goa-button.goa--secondary:active {\n color: #004f84;\n background-color: #fff;\n border: 2px solid #004f84;\n box-shadow: 0 0 0 3px #feba35;\n outline: none;\n}\nbutton.goa-button.goa--tertiary,\ninput[type=button].goa-button.goa--tertiary,\ninput[type=submit].goa-button.goa--tertiary {\n border-color: #dcdcdc;\n background: #fff;\n color: #0070c4;\n}\nbutton.goa-button.goa--tertiary:hover,\ninput[type=button].goa-button.goa--tertiary:hover,\ninput[type=submit].goa-button.goa--tertiary:hover {\n background: #fff;\n color: #004f84;\n}\nbutton.goa-button.goa--tertiary:focus, button.goa-button.goa--tertiary:active,\ninput[type=button].goa-button.goa--tertiary:focus,\ninput[type=button].goa-button.goa--tertiary:active,\ninput[type=submit].goa-button.goa--tertiary:focus,\ninput[type=submit].goa-button.goa--tertiary:active {\n border: 2px solid #004f84;\n color: #004f84;\n background-color: #fff;\n box-shadow: 0 0 0 3px #feba35;\n outline: none;\n}\nbutton.goa-button.goa--borderless,\ninput[type=button].goa-button.goa--borderless,\ninput[type=submit].goa-button.goa--borderless {\n background: none;\n color: var(--color-blue-500);\n border: none;\n transition: transform 0.1s ease-in-out;\n transform: scale(1);\n}\nbutton.goa-button.goa--borderless:hover,\ninput[type=button].goa-button.goa--borderless:hover,\ninput[type=submit].goa-button.goa--borderless:hover {\n background: var(--color-blue-100);\n color: var(--color-blue-500);\n}\nbutton.goa-button.goa--borderless:focus, button.goa-button.goa--borderless:active,\ninput[type=button].goa-button.goa--borderless:focus,\ninput[type=button].goa-button.goa--borderless:active,\ninput[type=submit].goa-button.goa--borderless:focus,\ninput[type=submit].goa-button.goa--borderless:active {\n background-color: var(--color-blue-100);\n outline: none;\n box-shadow: none;\n}\nbutton.goa-button.goa--borderless:active,\ninput[type=button].goa-button.goa--borderless:active,\ninput[type=submit].goa-button.goa--borderless:active {\n transform: scale(0.95);\n}\nbutton.goa-button.goa--red,\ninput[type=button].goa-button.goa--red,\ninput[type=submit].goa-button.goa--red {\n color: var(--color-red-500);\n background: none;\n border: none;\n transition: transform 0.1s ease-in-out;\n transform: scale(1);\n}\nbutton.goa-button.goa--red:hover,\ninput[type=button].goa-button.goa--red:hover,\ninput[type=submit].goa-button.goa--red:hover {\n background: var(--color-red-100);\n color: var(--color-red-500);\n}\nbutton.goa-button.goa--red:focus, button.goa-button.goa--red:active,\ninput[type=button].goa-button.goa--red:focus,\ninput[type=button].goa-button.goa--red:active,\ninput[type=submit].goa-button.goa--red:focus,\ninput[type=submit].goa-button.goa--red:active {\n background: var(--color-red-100);\n color: var(--color-red-500);\n outline: none;\n box-shadow: none;\n}\nbutton.goa-button.goa--red:active,\ninput[type=button].goa-button.goa--red:active,\ninput[type=submit].goa-button.goa--red:active {\n transform: scale(0.95);\n}";
|
|
1266
|
+
styleInject(css_248z$p);
|
|
1397
1267
|
|
|
1398
|
-
|
|
1399
|
-
var
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
var btnSize = buttonSize === 'small' ? 'btn-small' : '';
|
|
1413
|
-
return /*#__PURE__*/React.createElement("button", Object.assign({
|
|
1414
|
-
className: "goa-button ".concat(btnSize, " ").concat(btnTypeClass),
|
|
1268
|
+
const GoAButton = _a => {
|
|
1269
|
+
var {
|
|
1270
|
+
buttonType = 'primary',
|
|
1271
|
+
buttonSize = 'normal',
|
|
1272
|
+
title = null,
|
|
1273
|
+
children = null,
|
|
1274
|
+
onClick = null
|
|
1275
|
+
} = _a,
|
|
1276
|
+
props = __rest(_a, ["buttonType", "buttonSize", "title", "children", "onClick"]);
|
|
1277
|
+
|
|
1278
|
+
const btnTypeClass = buttonType === 'primary' ? '' : `goa--${buttonType}`;
|
|
1279
|
+
const btnSize = buttonSize === 'small' ? 'btn-small' : '';
|
|
1280
|
+
return jsx("button", Object.assign({
|
|
1281
|
+
className: `goa-button ${btnSize} ${btnTypeClass}`,
|
|
1415
1282
|
title: title,
|
|
1416
1283
|
onClick: onClick
|
|
1417
|
-
}, props
|
|
1284
|
+
}, props, {
|
|
1285
|
+
children: children
|
|
1286
|
+
}), void 0);
|
|
1418
1287
|
};
|
|
1419
1288
|
GoAButton.propTypes = {
|
|
1420
|
-
buttonSize:
|
|
1421
|
-
buttonType:
|
|
1422
|
-
title:
|
|
1423
|
-
children:
|
|
1424
|
-
onClick:
|
|
1289
|
+
buttonSize: PropTypes.string,
|
|
1290
|
+
buttonType: PropTypes.string,
|
|
1291
|
+
title: PropTypes.string,
|
|
1292
|
+
children: PropTypes.node,
|
|
1293
|
+
onClick: PropTypes.func
|
|
1425
1294
|
};
|
|
1426
1295
|
|
|
1427
|
-
var css_248z$
|
|
1428
|
-
styleInject(css_248z$
|
|
1429
|
-
|
|
1430
|
-
var css_248z$7 = "a.microsite-link {\n color: inherit;\n text-decoration: none;\n white-space: nowrap;\n display: flex;\n align-items: center;\n height: 66px; }\n a.microsite-link:focus, a.microsite-link:hover, a.microsite-link:active {\n outline: none; }\n a.microsite-link .image-desktop-tablet {\n width: 150px;\n height: 42px;\n display: inline-block;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='149.351' height='42' viewBox='0 0 149.351 42'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bclip-path:url(%23a);%7D.c%7Bfill:%2300aad2;%7D.d%7Bfill:%235f6a72;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='149.351' height='42'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='b'%3E%3Crect class='c' width='13.555' height='13.555' transform='translate(135.796 21.524)'/%3E%3Cpath class='d' d='M63.082,33.088c-1.383.138-2.835.277-4.357.346.553-4.357,2.835-10.373,5.671-9.405,1.66.553.761,5.671-1.314,9.059m-3.527,2.974a3.761,3.761,0,0,1-1.245,0,.851.851,0,0,0,.346-.692v-.553c.761,0,1.936-.138,3.389-.277a4.327,4.327,0,0,1-2.49,1.521M76.844,25.688c1.8-1.66,2.7-1.521,2.9-1.106.484.968-1.591,4.357-5.671,6.224a10.328,10.328,0,0,1,2.766-5.118m66.736,1.66c-.207-3.389-3.181-3.942-3.6-2.974-.138.346,1.106.207,1.106,2.628,0,3.942-4.011,9.129-9.129,9.129-5.532,0-6.985-4.357-7.261-6.432-.207-1.452.138-3.458-2.351-3.181-1.729.207-3.25,3.527-5.463,6.362-1.867,2.42-2.7,2.213-2.282.138.553-2.628,2.7-8.714,5.187-9.129,1.176-.207,1.591,1.8,2.075.553s.069-4.011-2.559-4.011c-1.8,0-3.942,1.936-5.74,4.08-1.521,1.936-9.336,13.416-12.656,10.927-1.521-1.176-1.383-5.878-.415-11.411,3.873-1.521,7.123-1.037,8.921-.138.9.415,1.037.346.622-.622-.553-1.452-3.665-3.734-8.575-2.7-.138,0-.207.069-.346.069.415-1.8.83-3.665,1.383-5.463.484-1.66,1.8-4.5-1.729-4.979-1.106-.207-.622.346-1.037,1.867-.692,2.766-1.521,6.362-2.144,10.028a19.745,19.745,0,0,0-7.538,8.091,38.59,38.59,0,0,0,.9-4.772,1.589,1.589,0,0,0-1.245-1.729c-.761-.207-1.729.138-2.628,1.452-2.144,3.043-4.841,7.815-8.99,9.82-2.974,1.452-4.288,0-4.357-2.282a9.869,9.869,0,0,0,1.521-.553c5.394-2.351,7.192-5.947,5.878-8.16-1.314-2.075-4.979-1.452-7.953,1.66a11.175,11.175,0,0,0-2.7,6.5c-1.245.277-2.628.484-4.219.692,2.49-4.08,2.282-9.613-1.383-10.581-4.288-1.106-6.432,3.043-7.331,6.5.346-3.873.9-7.745,1.591-11.549.346-1.66,1.452-4.5-2.075-4.979-1.106-.207-.968.346-.9,1.867.138,2.075-2.144,14.454-.968,19.848-1.521.484-2.144,1.66-.207,2.835,1.383.83,4.357,1.106,7.331-.346a9.3,9.3,0,0,0,2.766-2.144c1.8-.207,3.665-.553,5.394-.83.277,2.42,1.867,4.219,5.463,3.873,5.118-.484,9.682-6.777,11.411-9.82-.346,3.25-2.42,10.373,1.176,10.028,1.383-.138.83-.346.9-1.591.346-4.288,3.873-7.953,7.4-10.166-.622,5.256-.415,9.958,2.006,11.411,4.426,2.766,10.581-4.5,14.039-8.921-1.729,3.942-2.7,8.921-.138,9.682,3.043.9,5.463-4.219,8.3-8.091.346,2.766,2.213,7.607,9.682,7.607,8.022-.069,13.071-4.91,12.863-10.1m-108.3,8.645A66.439,66.439,0,0,1,27.4,32.534a59.168,59.168,0,0,0,6.777-2.974,54.453,54.453,0,0,0,1.106,6.432m20.4,3.873c-.069-.207-.622.069-1.106,0-1.452-.207-3.389-2.213-3.942-5.463-1.037-5.878-.415-11.687,1.314-20.332.346-1.66,1.452-4.5-2.075-5.048-1.106-.138-.553.415-.83,1.867C47.66,17.32,42.4,21.954,37.149,25.066,36.6,17.735,36.8,9.505,38.186,4.526c1.176-4.219,2.559-3.458.83-4.357s-3.734.277-5.325,3.458S24.839,23.89,13.221,35.439C7.273,41.317,1.879,38.274.842,37.375c-.9-.761-1.176.415-.138,1.591,4.772,5.256,11.826,2.282,14.384-.277,7.054-7.054,15.283-22.268,18.6-28.7a98.251,98.251,0,0,0,.277,16.874,50.129,50.129,0,0,1-8.3,3.181c-1.66.415-2.7,1.106-2.7,1.867s1.106,1.521,2.7,2.282c2.835,1.383,11.2,5.256,13.209,6.5,1.729,1.037,2.628.207,3.112-.9.692-1.452-1.176-2.282-2.974-2.766a60.545,60.545,0,0,1-1.66-9.267c4.219-2.628,8.437-6.086,10.788-10.443C47.522,20.916,46,33.3,49.873,38.482a5.451,5.451,0,0,0,4.564,2.213c.968-.069,1.383-.692,1.245-.83' transform='translate(-0.038 0.124)'/%3E%3C/g%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center center; }\n @media screen and (max-width: 767px) {\n a.microsite-link .image-desktop-tablet {\n display: none; } }\n @media screen and (min-width: 768px) and (max-width: 1199px) {\n a.microsite-link .image-mobile {\n display: none; } }\n @media screen and (min-width: 1200px) {\n a.microsite-link .image-mobile {\n display: none; } }\n @media screen and (max-width: 767px) {\n a.microsite-link .image-mobile {\n width: 34px;\n height: 34px;\n display: inline-block;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bfill:%2300aad2;%7D.c%7Bclip-path:url(%23a);%7D.d%7Bfill:%23fff;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='14' height='14' transform='translate(-0.345 -0.21)'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(0 -0.135)'%3E%3Ccircle class='b' cx='8' cy='8' r='8' transform='translate(0 0.135)'/%3E%3Cg transform='translate(1.345 1.344)'%3E%3Cg class='c' transform='translate(0 0)'%3E%3Cpath class='d' d='M12.612,13.636a16.24,16.24,0,0,1-1.86-.822,13.436,13.436,0,0,0,1.6-.708,11.312,11.312,0,0,0,.264,1.53M16.032,7.3c-.266-.034-.128.091-.2.442a5.465,5.465,0,0,1-2.8,3.338,16.141,16.141,0,0,1,.249-4.84c.275-1,.6-.813.2-1.022-.427-.22-.887.071-1.258.813A27.247,27.247,0,0,1,7.4,13.522a2.141,2.141,0,0,1-2.918.461c-.206-.174-.282.095-.026.37a2.412,2.412,0,0,0,3.387-.082A32.715,32.715,0,0,0,12.219,7.51a23.541,23.541,0,0,0,.063,3.971,11.464,11.464,0,0,1-1.964.749c-.388.1-.628.26-.635.439-.007.2.253.363.63.541.67.318,2.633,1.246,3.117,1.527.414.24.616.053.739-.207.16-.338-.279-.533-.7-.661a13.175,13.175,0,0,1-.382-2.179,7.143,7.143,0,0,0,2.547-2.454,4.7,4.7,0,0,0,.4-1.133,2.125,2.125,0,0,0,.048-.742s-.007-.054-.048-.059' transform='translate(-3.51 -3.943)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center center; } }\n a.microsite-link .name {\n margin-left: 8px;\n font-size: 16px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis; }\n @media screen and (min-width: 1200px) {\n a.microsite-link .name {\n margin-left: 28px; } }\n @media screen and (min-width: 768px) and (max-width: 1199px) {\n a.microsite-link .name {\n margin-left: 28px; } }\n";
|
|
1431
|
-
styleInject(css_248z$7);
|
|
1296
|
+
var css_248z$o = "/* Palette */\n/* Semantic usages */\n.goa-header {\n display: flex;\n align-items: center;\n padding-left: 28px;\n padding-right: 28px;\n}\n@media screen and (min-width: 768px) and (max-width: 1199px) {\n .goa-header {\n padding-left: 28px;\n padding-right: 28px;\n }\n}\n@media screen and (max-width: 767px) {\n .goa-header {\n padding-left: 28px;\n padding-right: 28px;\n }\n}\n.goa-header.goa-microsite-header, .goa-header > .goa-microsite-header {\n background-color: #fff;\n top: 0;\n display: flex;\n justify-content: space-between;\n}\n.goa-header.goa-official-site-header, .goa-header > .goa-official-site-header {\n font-size: 12px;\n background-color: #f1f1f1;\n line-height: 22px;\n}\n.goa-header.goa-official-site-header .site-text, .goa-header > .goa-official-site-header .site-text {\n white-space: nowrap;\n padding: 0 4px;\n}\n.goa-header.goa-official-site-header .service-level, .goa-header > .goa-official-site-header .service-level {\n padding: 0 3px;\n font-weight: bold;\n vertical-align: baseline;\n text-transform: capitalize;\n}\n.goa-header.goa-official-site-header .service-level--alpha, .goa-header > .goa-official-site-header .service-level--alpha {\n background-color: #feba35;\n color: #333;\n}\n.goa-header.goa-official-site-header .service-level--beta, .goa-header > .goa-official-site-header .service-level--beta {\n background-color: #0081a2;\n color: #fff;\n}\n.goa-header.goa-official-site-header .service-level--live, .goa-header > .goa-official-site-header .service-level--live {\n height: 16px;\n width: 16px;\n padding: 0;\n color: transparent;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bfill:%2300aad2;%7D.c%7Bclip-path:url(%23a);%7D.d%7Bfill:%23fff;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='14' height='14' transform='translate(-0.345 -0.21)'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(0 -0.135)'%3E%3Ccircle class='b' cx='8' cy='8' r='8' transform='translate(0 0.135)'/%3E%3Cg transform='translate(1.345 1.344)'%3E%3Cg class='c' transform='translate(0 0)'%3E%3Cpath class='d' d='M12.612,13.636a16.24,16.24,0,0,1-1.86-.822,13.436,13.436,0,0,0,1.6-.708,11.312,11.312,0,0,0,.264,1.53M16.032,7.3c-.266-.034-.128.091-.2.442a5.465,5.465,0,0,1-2.8,3.338,16.141,16.141,0,0,1,.249-4.84c.275-1,.6-.813.2-1.022-.427-.22-.887.071-1.258.813A27.247,27.247,0,0,1,7.4,13.522a2.141,2.141,0,0,1-2.918.461c-.206-.174-.282.095-.026.37a2.412,2.412,0,0,0,3.387-.082A32.715,32.715,0,0,0,12.219,7.51a23.541,23.541,0,0,0,.063,3.971,11.464,11.464,0,0,1-1.964.749c-.388.1-.628.26-.635.439-.007.2.253.363.63.541.67.318,2.633,1.246,3.117,1.527.414.24.616.053.739-.207.16-.338-.279-.533-.7-.661a13.175,13.175,0,0,1-.382-2.179,7.143,7.143,0,0,0,2.547-2.454,4.7,4.7,0,0,0,.4-1.133,2.125,2.125,0,0,0,.048-.742s-.007-.054-.048-.059' transform='translate(-3.51 -3.943)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center center;\n}\n.goa-header .web-link {\n color: #0070c4;\n text-align: left;\n}";
|
|
1297
|
+
styleInject(css_248z$o);
|
|
1432
1298
|
|
|
1433
|
-
|
|
1299
|
+
var css_248z$n = "a.microsite-link {\n color: inherit;\n text-decoration: none;\n white-space: nowrap;\n display: flex;\n align-items: center;\n height: 66px;\n}\na.microsite-link:focus, a.microsite-link:hover, a.microsite-link:active {\n outline: none;\n}\na.microsite-link .image-desktop-tablet {\n width: 150px;\n height: 42px;\n display: inline-block;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='149.351' height='42' viewBox='0 0 149.351 42'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bclip-path:url(%23a);%7D.c%7Bfill:%2300aad2;%7D.d%7Bfill:%235f6a72;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='149.351' height='42'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='b'%3E%3Crect class='c' width='13.555' height='13.555' transform='translate(135.796 21.524)'/%3E%3Cpath class='d' d='M63.082,33.088c-1.383.138-2.835.277-4.357.346.553-4.357,2.835-10.373,5.671-9.405,1.66.553.761,5.671-1.314,9.059m-3.527,2.974a3.761,3.761,0,0,1-1.245,0,.851.851,0,0,0,.346-.692v-.553c.761,0,1.936-.138,3.389-.277a4.327,4.327,0,0,1-2.49,1.521M76.844,25.688c1.8-1.66,2.7-1.521,2.9-1.106.484.968-1.591,4.357-5.671,6.224a10.328,10.328,0,0,1,2.766-5.118m66.736,1.66c-.207-3.389-3.181-3.942-3.6-2.974-.138.346,1.106.207,1.106,2.628,0,3.942-4.011,9.129-9.129,9.129-5.532,0-6.985-4.357-7.261-6.432-.207-1.452.138-3.458-2.351-3.181-1.729.207-3.25,3.527-5.463,6.362-1.867,2.42-2.7,2.213-2.282.138.553-2.628,2.7-8.714,5.187-9.129,1.176-.207,1.591,1.8,2.075.553s.069-4.011-2.559-4.011c-1.8,0-3.942,1.936-5.74,4.08-1.521,1.936-9.336,13.416-12.656,10.927-1.521-1.176-1.383-5.878-.415-11.411,3.873-1.521,7.123-1.037,8.921-.138.9.415,1.037.346.622-.622-.553-1.452-3.665-3.734-8.575-2.7-.138,0-.207.069-.346.069.415-1.8.83-3.665,1.383-5.463.484-1.66,1.8-4.5-1.729-4.979-1.106-.207-.622.346-1.037,1.867-.692,2.766-1.521,6.362-2.144,10.028a19.745,19.745,0,0,0-7.538,8.091,38.59,38.59,0,0,0,.9-4.772,1.589,1.589,0,0,0-1.245-1.729c-.761-.207-1.729.138-2.628,1.452-2.144,3.043-4.841,7.815-8.99,9.82-2.974,1.452-4.288,0-4.357-2.282a9.869,9.869,0,0,0,1.521-.553c5.394-2.351,7.192-5.947,5.878-8.16-1.314-2.075-4.979-1.452-7.953,1.66a11.175,11.175,0,0,0-2.7,6.5c-1.245.277-2.628.484-4.219.692,2.49-4.08,2.282-9.613-1.383-10.581-4.288-1.106-6.432,3.043-7.331,6.5.346-3.873.9-7.745,1.591-11.549.346-1.66,1.452-4.5-2.075-4.979-1.106-.207-.968.346-.9,1.867.138,2.075-2.144,14.454-.968,19.848-1.521.484-2.144,1.66-.207,2.835,1.383.83,4.357,1.106,7.331-.346a9.3,9.3,0,0,0,2.766-2.144c1.8-.207,3.665-.553,5.394-.83.277,2.42,1.867,4.219,5.463,3.873,5.118-.484,9.682-6.777,11.411-9.82-.346,3.25-2.42,10.373,1.176,10.028,1.383-.138.83-.346.9-1.591.346-4.288,3.873-7.953,7.4-10.166-.622,5.256-.415,9.958,2.006,11.411,4.426,2.766,10.581-4.5,14.039-8.921-1.729,3.942-2.7,8.921-.138,9.682,3.043.9,5.463-4.219,8.3-8.091.346,2.766,2.213,7.607,9.682,7.607,8.022-.069,13.071-4.91,12.863-10.1m-108.3,8.645A66.439,66.439,0,0,1,27.4,32.534a59.168,59.168,0,0,0,6.777-2.974,54.453,54.453,0,0,0,1.106,6.432m20.4,3.873c-.069-.207-.622.069-1.106,0-1.452-.207-3.389-2.213-3.942-5.463-1.037-5.878-.415-11.687,1.314-20.332.346-1.66,1.452-4.5-2.075-5.048-1.106-.138-.553.415-.83,1.867C47.66,17.32,42.4,21.954,37.149,25.066,36.6,17.735,36.8,9.505,38.186,4.526c1.176-4.219,2.559-3.458.83-4.357s-3.734.277-5.325,3.458S24.839,23.89,13.221,35.439C7.273,41.317,1.879,38.274.842,37.375c-.9-.761-1.176.415-.138,1.591,4.772,5.256,11.826,2.282,14.384-.277,7.054-7.054,15.283-22.268,18.6-28.7a98.251,98.251,0,0,0,.277,16.874,50.129,50.129,0,0,1-8.3,3.181c-1.66.415-2.7,1.106-2.7,1.867s1.106,1.521,2.7,2.282c2.835,1.383,11.2,5.256,13.209,6.5,1.729,1.037,2.628.207,3.112-.9.692-1.452-1.176-2.282-2.974-2.766a60.545,60.545,0,0,1-1.66-9.267c4.219-2.628,8.437-6.086,10.788-10.443C47.522,20.916,46,33.3,49.873,38.482a5.451,5.451,0,0,0,4.564,2.213c.968-.069,1.383-.692,1.245-.83' transform='translate(-0.038 0.124)'/%3E%3C/g%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center center;\n}\n@media screen and (max-width: 767px) {\n a.microsite-link .image-desktop-tablet {\n display: none;\n }\n}\n@media screen and (min-width: 768px) and (max-width: 1199px) {\n a.microsite-link .image-mobile {\n display: none;\n }\n}\n@media screen and (min-width: 1200px) {\n a.microsite-link .image-mobile {\n display: none;\n }\n}\n@media screen and (max-width: 767px) {\n a.microsite-link .image-mobile {\n width: 34px;\n height: 34px;\n display: inline-block;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D.b%7Bfill:%2300aad2;%7D.c%7Bclip-path:url(%23a);%7D.d%7Bfill:%23fff;%7D%3C/style%3E%3CclipPath id='a'%3E%3Crect class='a' width='14' height='14' transform='translate(-0.345 -0.21)'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(0 -0.135)'%3E%3Ccircle class='b' cx='8' cy='8' r='8' transform='translate(0 0.135)'/%3E%3Cg transform='translate(1.345 1.344)'%3E%3Cg class='c' transform='translate(0 0)'%3E%3Cpath class='d' d='M12.612,13.636a16.24,16.24,0,0,1-1.86-.822,13.436,13.436,0,0,0,1.6-.708,11.312,11.312,0,0,0,.264,1.53M16.032,7.3c-.266-.034-.128.091-.2.442a5.465,5.465,0,0,1-2.8,3.338,16.141,16.141,0,0,1,.249-4.84c.275-1,.6-.813.2-1.022-.427-.22-.887.071-1.258.813A27.247,27.247,0,0,1,7.4,13.522a2.141,2.141,0,0,1-2.918.461c-.206-.174-.282.095-.026.37a2.412,2.412,0,0,0,3.387-.082A32.715,32.715,0,0,0,12.219,7.51a23.541,23.541,0,0,0,.063,3.971,11.464,11.464,0,0,1-1.964.749c-.388.1-.628.26-.635.439-.007.2.253.363.63.541.67.318,2.633,1.246,3.117,1.527.414.24.616.053.739-.207.16-.338-.279-.533-.7-.661a13.175,13.175,0,0,1-.382-2.179,7.143,7.143,0,0,0,2.547-2.454,4.7,4.7,0,0,0,.4-1.133,2.125,2.125,0,0,0,.048-.742s-.007-.054-.048-.059' transform='translate(-3.51 -3.943)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center center;\n }\n}\na.microsite-link .name {\n margin-left: 8px;\n font-size: 16px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n@media screen and (min-width: 1200px) {\n a.microsite-link .name {\n margin-left: 28px;\n }\n}\n@media screen and (min-width: 768px) and (max-width: 1199px) {\n a.microsite-link .name {\n margin-left: 28px;\n }\n}";
|
|
1300
|
+
styleInject(css_248z$n);
|
|
1434
1301
|
|
|
1435
|
-
|
|
1436
|
-
return
|
|
1302
|
+
const GoaMicrositeLogo = props => {
|
|
1303
|
+
return jsxs("a", Object.assign({
|
|
1437
1304
|
href: props.serviceHome,
|
|
1438
1305
|
"aria-label": props.serviceHome,
|
|
1439
1306
|
className: "microsite-link"
|
|
1440
|
-
},
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1307
|
+
}, {
|
|
1308
|
+
children: [jsx("span", {
|
|
1309
|
+
className: "image-desktop-tablet"
|
|
1310
|
+
}, void 0), jsx("span", {
|
|
1311
|
+
className: "image-mobile"
|
|
1312
|
+
}, void 0), jsx("span", Object.assign({
|
|
1313
|
+
className: "name"
|
|
1314
|
+
}, {
|
|
1315
|
+
children: props.serviceName
|
|
1316
|
+
}), void 0)]
|
|
1317
|
+
}), void 0);
|
|
1447
1318
|
};
|
|
1448
1319
|
|
|
1449
|
-
|
|
1450
|
-
|
|
1320
|
+
const GoAHeader = props => {
|
|
1321
|
+
const serviceLevelCss = classnames('service-level', `service-level--${props.serviceLevel.toString().toLowerCase()}`);
|
|
1451
1322
|
|
|
1452
1323
|
function serviceLevelFormatted() {
|
|
1453
1324
|
return props.serviceLevel.toLowerCase();
|
|
1454
1325
|
}
|
|
1455
1326
|
|
|
1456
|
-
return
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1327
|
+
return jsxs("header", {
|
|
1328
|
+
children: [jsxs("div", Object.assign({
|
|
1329
|
+
className: "goa-header goa-official-site-header"
|
|
1330
|
+
}, {
|
|
1331
|
+
children: [jsx("div", {
|
|
1332
|
+
children: jsx("span", Object.assign({
|
|
1333
|
+
className: serviceLevelCss
|
|
1334
|
+
}, {
|
|
1335
|
+
children: serviceLevelFormatted()
|
|
1336
|
+
}), void 0)
|
|
1337
|
+
}, void 0), props.serviceLevel === 'live' && jsxs("div", Object.assign({
|
|
1338
|
+
className: "site-text"
|
|
1339
|
+
}, {
|
|
1340
|
+
children: ["An official site of the ", jsx("a", Object.assign({
|
|
1341
|
+
href: "https://www.alberta.ca/index.aspx",
|
|
1342
|
+
className: "web-link"
|
|
1343
|
+
}, {
|
|
1344
|
+
children: "Alberta Government"
|
|
1345
|
+
}), void 0)]
|
|
1346
|
+
}), void 0), props.serviceLevel !== 'live' && jsxs("div", Object.assign({
|
|
1347
|
+
className: "site-text"
|
|
1348
|
+
}, {
|
|
1349
|
+
children: ["This is a new ", jsx("a", Object.assign({
|
|
1350
|
+
href: "https://www.alberta.ca/index.aspx",
|
|
1351
|
+
className: "web-link"
|
|
1352
|
+
}, {
|
|
1353
|
+
children: "Alberta Government"
|
|
1354
|
+
}), void 0), " service"]
|
|
1355
|
+
}), void 0)]
|
|
1356
|
+
}), void 0), jsxs("div", Object.assign({
|
|
1357
|
+
className: "goa-header goa-microsite-header"
|
|
1358
|
+
}, {
|
|
1359
|
+
children: [jsx(GoaMicrositeLogo, {
|
|
1360
|
+
serviceName: props.serviceName,
|
|
1361
|
+
serviceHome: props.serviceHome
|
|
1362
|
+
}, void 0), jsx("div", {
|
|
1363
|
+
children: props.children
|
|
1364
|
+
}, void 0)]
|
|
1365
|
+
}), void 0)]
|
|
1366
|
+
}, void 0);
|
|
1476
1367
|
};
|
|
1477
1368
|
|
|
1478
|
-
var css_248z$
|
|
1479
|
-
styleInject(css_248z$
|
|
1369
|
+
var css_248z$m = ".goa-hero-banner-content {\n font-size: 24px;\n line-height: 32px;\n margin: 0;\n color: #fff;\n}\n@media screen and (min-width: 768px) and (max-width: 1199px) {\n .goa-hero-banner-content {\n width: 80%;\n }\n}\n@media screen and (min-width: 1200px) {\n .goa-hero-banner-content {\n width: 40%;\n }\n}\n.goa-hero-banner-content:last-of-type {\n margin-bottom: 28px;\n}";
|
|
1370
|
+
styleInject(css_248z$m);
|
|
1480
1371
|
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1372
|
+
const GoAHeroBannerContent = ({
|
|
1373
|
+
content,
|
|
1374
|
+
children
|
|
1375
|
+
}) => {
|
|
1376
|
+
return jsx("p", Object.assign({
|
|
1485
1377
|
className: "goa-hero-banner-content",
|
|
1486
1378
|
role: "note"
|
|
1487
|
-
},
|
|
1379
|
+
}, {
|
|
1380
|
+
children: children || content
|
|
1381
|
+
}), void 0);
|
|
1488
1382
|
};
|
|
1489
1383
|
|
|
1490
|
-
var css_248z$
|
|
1491
|
-
styleInject(css_248z$
|
|
1384
|
+
var css_248z$l = "@charset \"UTF-8\";\n/* Palette */\n/* Semantic usages */\n/* Palette */\n/* Semantic usages */\n/* Common button colors */\n/* Primary colors */\n/* Secondary colors */\n/* Tertiary colors */\n/* This style is from the alberta design system */\n/* This style is from the alberta design system */\n.goa-link-button.goa-link-button {\n display: inline-block;\n text-decoration: none;\n}\n.goa-link-button.goa-link-button {\n box-sizing: border-box;\n min-width: 70px;\n padding: 12px;\n border: 2px solid #0070c4;\n border-radius: 4px;\n background: #0070c4;\n cursor: pointer;\n color: #fff;\n font-size: 18px;\n font-weight: 700;\n line-height: 1em;\n}\n.goa-link-button.goa-link-button.btn-small {\n font-size: 16px;\n padding: 8px;\n margin: 12px 12px 0 0;\n}\n.goa-link-button.goa-link-button:last-of-type {\n margin-right: 0;\n}\n.goa-link-button.goa-link-button:disabled, .goa-link-button.goa-link-button:disabled.goa--secondary, .goa-link-button.goa-link-button:disabled.goa--tertiary {\n pointer-events: none;\n color: #666;\n background-color: #f1f1f1;\n border-color: #f1f1f1;\n}\n.goa-link-button.goa-link-button:hover {\n border-color: #004f84;\n background: #004f84;\n}\n.goa-link-button.goa-link-button:focus, .goa-link-button.goa-link-button:active {\n border-color: #004f84;\n box-shadow: 0 0 0 3px #feba35;\n background: #004f84;\n outline: none;\n}\n.goa-link-button.goa-link-button.goa--secondary {\n border: 2px solid #0070c4;\n background: #fff;\n color: #0070c4;\n}\n.goa-link-button.goa-link-button.goa--secondary:hover {\n border-color: #004f84;\n background: #fff;\n color: #004f84;\n}\n.goa-link-button.goa-link-button.goa--secondary:focus, .goa-link-button.goa-link-button.goa--secondary:active {\n color: #004f84;\n background-color: #fff;\n border: 2px solid #004f84;\n box-shadow: 0 0 0 3px #feba35;\n outline: none;\n}\n.goa-link-button.goa-link-button.goa--tertiary {\n border-color: #dcdcdc;\n background: #fff;\n color: #0070c4;\n}\n.goa-link-button.goa-link-button.goa--tertiary:hover {\n background: #fff;\n color: #004f84;\n}\n.goa-link-button.goa-link-button.goa--tertiary:focus, .goa-link-button.goa-link-button.goa--tertiary:active {\n border: 2px solid #004f84;\n color: #004f84;\n background-color: #fff;\n box-shadow: 0 0 0 3px #feba35;\n outline: none;\n}\n.goa-link-button.goa-link-button.goa--borderless {\n background: none;\n color: var(--color-blue-500);\n border: none;\n transition: transform 0.1s ease-in-out;\n transform: scale(1);\n}\n.goa-link-button.goa-link-button.goa--borderless:hover {\n background: var(--color-blue-100);\n color: var(--color-blue-500);\n}\n.goa-link-button.goa-link-button.goa--borderless:focus, .goa-link-button.goa-link-button.goa--borderless:active {\n background-color: var(--color-blue-100);\n outline: none;\n box-shadow: none;\n}\n.goa-link-button.goa-link-button.goa--borderless:active {\n transform: scale(0.95);\n}\n.goa-link-button.goa-link-button.goa--red {\n color: var(--color-red-500);\n background: none;\n border: none;\n transition: transform 0.1s ease-in-out;\n transform: scale(1);\n}\n.goa-link-button.goa-link-button.goa--red:hover {\n background: var(--color-red-100);\n color: var(--color-red-500);\n}\n.goa-link-button.goa-link-button.goa--red:focus, .goa-link-button.goa-link-button.goa--red:active {\n background: var(--color-red-100);\n color: var(--color-red-500);\n outline: none;\n box-shadow: none;\n}\n.goa-link-button.goa-link-button.goa--red:active {\n transform: scale(0.95);\n}\n.goa-link-button.goa-link-button.right-arrow::after {\n color: #fff;\n margin-left: 8px;\n content: \"→\";\n}\n.goa-link-button.goa-link-button.up-arrow::after {\n color: #fff;\n margin-left: 8px;\n content: \"↑\";\n}\n.goa-link-button.goa-link-button:visited, .goa-link-button.goa-link-button:link {\n color: #fff;\n}";
|
|
1385
|
+
styleInject(css_248z$l);
|
|
1492
1386
|
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1387
|
+
const GoAHeroBannerLink = ({
|
|
1388
|
+
linkText,
|
|
1389
|
+
linkUrl
|
|
1390
|
+
}) => {
|
|
1391
|
+
return linkText && linkUrl ? jsx("div", {
|
|
1392
|
+
children: jsx("a", Object.assign({
|
|
1393
|
+
className: "goa-link-button right-arrow",
|
|
1394
|
+
href: linkUrl,
|
|
1395
|
+
role: "link"
|
|
1396
|
+
}, {
|
|
1397
|
+
children: linkText
|
|
1398
|
+
}), void 0)
|
|
1399
|
+
}, void 0) : jsx(Fragment, {}, void 0);
|
|
1501
1400
|
};
|
|
1502
1401
|
|
|
1503
|
-
var css_248z$
|
|
1504
|
-
styleInject(css_248z$
|
|
1402
|
+
var css_248z$k = "/* Palette */\n/* Semantic usages */\n.goa-hero {\n box-sizing: border-box;\n display: flex;\n justify-content: flex-end;\n align-items: stretch;\n flex-direction: column;\n height: 600px;\n border-bottom: 8px solid #0081a2;\n color: #fff;\n background-position: center center;\n width: 100%;\n padding: 56px 28px;\n}\n.goa-hero h1 {\n margin: 0 0 28px;\n padding: 0;\n font-size: 48px;\n line-height: 56px;\n font-weight: 700;\n color: #fff;\n}";
|
|
1403
|
+
styleInject(css_248z$k);
|
|
1505
1404
|
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1405
|
+
const GoAHeroBanner = ({
|
|
1406
|
+
title,
|
|
1407
|
+
backgroundUrl,
|
|
1408
|
+
content,
|
|
1409
|
+
linkText,
|
|
1410
|
+
linkUrl,
|
|
1411
|
+
children
|
|
1412
|
+
}) => {
|
|
1413
|
+
return jsxs("div", Object.assign({
|
|
1514
1414
|
className: "goa-hero",
|
|
1515
1415
|
style: {
|
|
1516
|
-
backgroundImage:
|
|
1416
|
+
backgroundImage: `linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 40%, rgba(0, 0, 0, 0.6) 100%), url('${backgroundUrl}')`
|
|
1517
1417
|
}
|
|
1518
|
-
},
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1418
|
+
}, {
|
|
1419
|
+
children: [title && jsx("h1", Object.assign({
|
|
1420
|
+
role: "heading",
|
|
1421
|
+
"aria-level": 1
|
|
1422
|
+
}, {
|
|
1423
|
+
children: title
|
|
1424
|
+
}), void 0), children || jsxs(Fragment, {
|
|
1425
|
+
children: [content && jsx(GoAHeroBannerContent, {
|
|
1426
|
+
content: content
|
|
1427
|
+
}, void 0), linkText && linkUrl && jsx(GoAHeroBannerLink, {
|
|
1428
|
+
linkText: linkText,
|
|
1429
|
+
linkUrl: linkUrl
|
|
1430
|
+
}, void 0)]
|
|
1431
|
+
}, void 0)]
|
|
1432
|
+
}), void 0);
|
|
1527
1433
|
};
|
|
1528
1434
|
GoAHeroBanner.defaultProps = {
|
|
1529
1435
|
content: '',
|
|
@@ -1531,33 +1437,33 @@ GoAHeroBanner.defaultProps = {
|
|
|
1531
1437
|
linkUrl: ''
|
|
1532
1438
|
};
|
|
1533
1439
|
|
|
1534
|
-
var css_248z$
|
|
1535
|
-
styleInject(css_248z$
|
|
1536
|
-
|
|
1537
|
-
var css_248z$c = ".goa-icon {\n display: flex; }\n\n.goa-icon-button {\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center; }\n\n/* Primary */\n.goa-icon-button-primary {\n padding: 0.5rem;\n border-radius: 0.5rem;\n color: var(--color-blue-500);\n fill: var(--color-blue-500);\n cursor: pointer;\n transition: background-color 100ms ease-in, transform 100ms ease-in; }\n\n.goa-icon-button-primary:active {\n transform: scale(0.9); }\n\n.goa-icon-button-primary:hover {\n background-color: var(--color-blue-100); }\n\n/* Secondary */\n.goa-icon-button-secondary {\n padding: 0.5rem;\n border-radius: 0.5rem;\n transition: background-color 100ms ease-in, transform 100ms ease-in;\n cursor: pointer; }\n\n.goa-icon-button-secondary:active {\n transform: scale(0.9); }\n\n.goa-icon-button-secondary:hover {\n background: rgba(0, 0, 0, 0.1);\n color: #000;\n fill: #000; }\n\n/* tertiary */\n.goa-icon-button-tertiary {\n padding: 0.5rem;\n transition: background-color 100ms ease-in, transform 100ms ease-in;\n cursor: pointer; }\n\n.goa-icon-button-tertiary:active {\n transform: scale(0.9); }\n\n.goa-icon-button-tertiary:hover {\n color: #000;\n fill: #000; }\n";
|
|
1538
|
-
styleInject(css_248z$c);
|
|
1440
|
+
var css_248z$j = ":host, :root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-600: #767676;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-orange-100: hsl(39.7, 99.01%, 98%);\n --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n --color-orange-900: hsl(39.7, 99.01%, 30%);\n --color-red: #ec040b;\n --color-red-100: hsl(358.19, 96.67%, 98%);\n --color-red-500: hsl(358.19, 96.67%, 47.06%);\n --color-red-600: hsl(358.19, 96.67%, 40%);\n --color-red-900: hsl(358.19, 96.67%, 20%);\n --color-green: #00853F;\n --color-green-100: hsl(148, 100%, 95%);\n --color-green-500: hsl(148.42, 100%, 26.08%);\n --color-green-900: hsl(148, 100%, 10%);\n --color-blue-100: #e3f2ff;\n --color-blue-500: #0070c4;\n --color-blue-600: #004f84;\n}\n\n:root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n /* line-height */\n --lh-xs: 0.875rem;\n --lh-sm: 1rem;\n --lh-base: 1.5rem;\n --lh-lg: 2rem;\n --lh-xl: 2.75rem;\n --lh-2xl: 3.5rem;\n --border-radius-sm: 0.15rem;\n --border-radius: 0.25rem;\n --border-radius-base: 0.25rem;\n --border-radius-lg: 0.5rem;\n --spacing-1: 0.5rem;\n --spacing-2: 0.875rem;\n --spacing-3: 1.75rem;\n --input-height: 2.625rem;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base);\n}\n\n.goa-badge-icon {\n font-size: var(--fs-sm);\n}\n\n.badge-module_goa-badge__3F6Ve {\n display: inline-flex;\n align-items: center;\n border-radius: 0.25rem;\n padding: 0 0.5rem;\n gap: 0.25rem;\n}\n\n.badge-module_goa-badge__3F6Ve + .badge-module_goa-badge__3F6Ve {\n margin-left: 0.25rem;\n}\n\n.badge-module_goa-badge-content__3UN-3 {\n text-transform: capitalize;\n font-size: var(--fs-sm);\n font-weight: var(--fw-regular);\n line-height: var(--lh-base);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-information__2r_Eq {\n background-color: var(--color-gray-100);\n color: var(--color-tealblue-900);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-success__18wcm {\n background-color: var(--color-green-500);\n color: var(--color-white);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-warning__20BNM {\n background-color: var(--color-orange-500);\n color: var(--color-black);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-emergency__E4mHn {\n background-color: var(--color-red-500);\n color: var(--color-white);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-dark__1thw- {\n background-color: var(--color-black);\n color: var(--color-white);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-midtone__1Gt4T {\n background-color: var(--color-gray-600);\n color: var(--color-white);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-light__B8ZMt {\n background-color: var(--color-white);\n color: var(--color-black);\n}\n\n.badge-module_goa-badge__3F6Ve.badge-module_badge-inactive__35PEw {\n background-color: var(--color-white);\n color: var(--color-black);\n}";
|
|
1441
|
+
styleInject(css_248z$j);
|
|
1539
1442
|
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
_ref$style = _ref.style,
|
|
1543
|
-
style = _ref$style === void 0 ? 'outline' : _ref$style,
|
|
1544
|
-
_ref$size = _ref.size,
|
|
1545
|
-
size = _ref$size === void 0 ? 'medium' : _ref$size;
|
|
1443
|
+
var css_248z$i = ".goa-icon {\n display: flex;\n}\n\n.goa-icon-button {\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n}\n\n/* Primary */\n.goa-icon-button-primary {\n padding: 0.5rem;\n border-radius: 0.5rem;\n color: var(--color-blue-500);\n fill: var(--color-blue-500);\n cursor: pointer;\n transition: background-color 100ms ease-in, transform 100ms ease-in;\n}\n\n.goa-icon-button-primary:active {\n transform: scale(0.9);\n}\n\n.goa-icon-button-primary:hover {\n background-color: var(--color-blue-100);\n}\n\n/* Secondary */\n.goa-icon-button-secondary {\n padding: 0.5rem;\n border-radius: 0.5rem;\n transition: background-color 100ms ease-in, transform 100ms ease-in;\n cursor: pointer;\n}\n\n.goa-icon-button-secondary:active {\n transform: scale(0.9);\n}\n\n.goa-icon-button-secondary:hover {\n background: rgba(0, 0, 0, 0.1);\n color: #000;\n fill: #000;\n}\n\n/* tertiary */\n.goa-icon-button-tertiary {\n padding: 0.5rem;\n transition: background-color 100ms ease-in, transform 100ms ease-in;\n cursor: pointer;\n}\n\n.goa-icon-button-tertiary:active {\n transform: scale(0.9);\n}\n\n.goa-icon-button-tertiary:hover {\n color: #000;\n fill: #000;\n}";
|
|
1444
|
+
styleInject(css_248z$i);
|
|
1546
1445
|
|
|
1547
|
-
|
|
1446
|
+
function GoAIcon({
|
|
1447
|
+
type,
|
|
1448
|
+
style = 'outline',
|
|
1449
|
+
size = 'medium'
|
|
1450
|
+
}) {
|
|
1451
|
+
const _size = getSize(size);
|
|
1548
1452
|
|
|
1549
|
-
return
|
|
1453
|
+
return jsx("div", Object.assign({
|
|
1550
1454
|
style: {
|
|
1551
1455
|
width: _size
|
|
1552
1456
|
},
|
|
1553
1457
|
className: "goa-icon",
|
|
1554
|
-
"data-testid":
|
|
1555
|
-
},
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1458
|
+
"data-testid": `icon-${type}`
|
|
1459
|
+
}, {
|
|
1460
|
+
children: jsx("ion-icon", {
|
|
1461
|
+
style: {
|
|
1462
|
+
fontSize: _size
|
|
1463
|
+
},
|
|
1464
|
+
name: style === 'filled' ? type : `${type}-${style}`
|
|
1465
|
+
}, void 0)
|
|
1466
|
+
}), void 0);
|
|
1561
1467
|
}
|
|
1562
1468
|
|
|
1563
1469
|
function getSize(size) {
|
|
@@ -1576,192 +1482,212 @@ function getSize(size) {
|
|
|
1576
1482
|
}
|
|
1577
1483
|
}
|
|
1578
1484
|
|
|
1579
|
-
function GoAIconButton(
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
return
|
|
1485
|
+
function GoAIconButton({
|
|
1486
|
+
type,
|
|
1487
|
+
disabled,
|
|
1488
|
+
variant = 'primary',
|
|
1489
|
+
onClick,
|
|
1490
|
+
size = 'medium',
|
|
1491
|
+
title,
|
|
1492
|
+
testId
|
|
1493
|
+
}) {
|
|
1494
|
+
return jsx("button", Object.assign({
|
|
1589
1495
|
title: title,
|
|
1590
|
-
|
|
1496
|
+
disabled: disabled,
|
|
1497
|
+
className: `goa-icon-button goa-icon-button-${variant}`,
|
|
1591
1498
|
"data-testid": testId,
|
|
1592
1499
|
onClick: onClick
|
|
1593
|
-
},
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1500
|
+
}, {
|
|
1501
|
+
children: jsx(GoAIcon, {
|
|
1502
|
+
type: type,
|
|
1503
|
+
size: size
|
|
1504
|
+
}, void 0)
|
|
1505
|
+
}), void 0);
|
|
1597
1506
|
}
|
|
1598
1507
|
|
|
1599
|
-
var css_248z$
|
|
1600
|
-
styleInject(css_248z$
|
|
1508
|
+
var css_248z$h = ".button-module_goa-button__fikCc {\n border-radius: 0.25rem;\n border: 2px solid var(--color-blue-500);\n box-sizing: border-box;\n cursor: pointer;\n font-size: 18px;\n font-weight: 700;\n line-height: 1em;\n padding: 0 0.75rem;\n transition: transform 0.1s ease-in-out, background-color 0.2s ease-in-out;\n transform: scale(1);\n}\n.button-module_goa-button__fikCc:disabled {\n pointer-events: none;\n color: var(--color-gray-700);\n background-color: var(--color-gray-100);\n border-color: var(--color-gray-100);\n}\n.button-module_goa-button__fikCc:active {\n transform: scale(0.98);\n}\n\n.button-module_goa-button--primary__2V_nV {\n border: 2px solid var(--color-blue-500);\n background: var(--color-blue-500);\n color: var(--color-white);\n}\n.button-module_goa-button--primary__2V_nV:hover {\n border-color: var(--color-blue-600);\n background: var(--color-blue-600);\n}\n.button-module_goa-button--primary__2V_nV:focus, .button-module_goa-button--primary__2V_nV:active {\n border-color: var(--color-blue-600);\n box-shadow: 0 0 0 3px var(--color-orange-500);\n background: var(--color-blue-600);\n outline: none;\n}\n\n.button-module_goa-button--secondary__3_OjG {\n border: 2px solid var(--color-blue-500);\n background: var(--color-white);\n color: var(--color-blue-500);\n}\n.button-module_goa-button--secondary__3_OjG:hover {\n border-color: var(--color-blue-600);\n color: var(--color-blue-600);\n}\n.button-module_goa-button--secondary__3_OjG:focus, .button-module_goa-button--secondary__3_OjG:active {\n border-color: var(--color-blue-600);\n color: var(--color-blue-600);\n box-shadow: 0 0 0 3px var(--color-orange-500);\n outline: none;\n}\n\n.button-module_goa-button--tertiary__3mvRP {\n border-color: var(--color-gray-200);\n background: var(--color-white);\n color: var(--color-blue-500);\n}\n.button-module_goa-button--tertiary__3mvRP:hover {\n color: var(--color-blue-600);\n}\n.button-module_goa-button--tertiary__3mvRP:focus, .button-module_goa-button--tertiary__3mvRP:active {\n border-color: var(--color-blue-600);\n color: var(--color-blue-600);\n box-shadow: 0 0 0 3px var(--color-orange-500);\n outline: none;\n}\n\n.button-module_goa-button--borderless__2PWz1 {\n background: none;\n color: var(--color-blue-500);\n border: none;\n}\n.button-module_goa-button--borderless__2PWz1:hover {\n background-color: var(--color-blue-100);\n color: var(--color-blue-500);\n}\n.button-module_goa-button--borderless__2PWz1:focus, .button-module_goa-button--borderless__2PWz1:active {\n outline: none;\n box-shadow: none;\n background-color: var(--color-blue-100);\n}\n\n.button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa {\n color: var(--color-white);\n background: var(--color-red-500);\n border-color: var(--color-red-500);\n}\n.button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa:hover {\n background: var(--color-red-600);\n border-color: var(--color-red-600);\n}\n.button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--primary__2V_nV.button-module_goa-button--danger__2jXqa:active {\n background: var(--color-red-600);\n border-color: var(--color-red-600);\n}\n\n.button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa {\n color: var(--color-red-500);\n border-color: var(--color-red-500);\n}\n.button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa:hover {\n border-color: var(--color-red-600);\n color: var(--color-red-600);\n}\n.button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--secondary__3_OjG.button-module_goa-button--danger__2jXqa:active {\n color: var(--color-red-600);\n border-color: var(--color-red-600);\n}\n\n.button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa {\n color: var(--color-red-500);\n border-color: var(--color-gray-200);\n}\n.button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa:hover {\n border-color: var(--color-red-600);\n color: var(--color-red-600);\n}\n.button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--tertiary__3mvRP.button-module_goa-button--danger__2jXqa:active {\n color: var(--color-red-600);\n border-color: var(--color-red-600);\n}\n\n.button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa {\n color: var(--color-red-500);\n}\n.button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa:hover {\n background: var(--color-red-100);\n color: var(--color-red-500);\n}\n.button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa:focus, .button-module_goa-button--borderless__2PWz1.button-module_goa-button--danger__2jXqa:active {\n background: var(--color-red-100);\n color: var(--color-red-500);\n}\n\n.button-module_goa-button--large__1iRt7 {\n font-size: var(--fs-lg);\n line-height: 3rem;\n}\n\n.button-module_goa-button--large__1iRt7.button-module_goa-button--borderless__2PWz1 {\n line-height: calc(3rem + 4px);\n}\n\n.button-module_goa-button--medium__1xeCJ {\n font-size: var(--fs-base);\n line-height: 2.375rem;\n}\n\n.button-module_goa-button--medium__1xeCJ.button-module_goa-button--borderless__2PWz1 {\n line-height: calc(2.375rem + 4px);\n}\n\n.button-module_goa-button--small__1sl63 {\n font-size: var(--fs-sm);\n line-height: 1.75rem;\n}\n\n.button-module_goa-button--small__1sl63.button-module_goa-button--borderless__2PWz1 {\n line-height: calc(1.75rem + 4px);\n}\n\n.button-module_goa-button__fikCc {\n min-width: 100%;\n}\n\n.button-module_goa-button__fikCc + .button-module_goa-button__fikCc {\n margin: 0;\n margin-top: 0.5rem;\n}\n\n@media (min-width: 480px) {\n .button-module_goa-button__fikCc {\n min-width: 4rem;\n }\n\n .button-module_goa-button__fikCc + .button-module_goa-button__fikCc {\n margin: 0;\n margin-left: 0.5rem;\n }\n}";
|
|
1509
|
+
styleInject(css_248z$h);
|
|
1601
1510
|
|
|
1602
|
-
var css_248z$
|
|
1603
|
-
styleInject(css_248z$
|
|
1511
|
+
var css_248z$g = "/* Palette */\n/* Semantic usages */\n.app-version-header-module_goa-app-version-header__3ngyf {\n display: flex;\n justify-content: center;\n background-color: #dcdcdc;\n}\n.app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd {\n display: flex;\n flex: 1 1 auto;\n margin: 0 24px;\n max-width: 1200px;\n}\n@media (min-width: 768px) {\n .app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd {\n margin: 0 72px;\n }\n}\n.app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_environment-and-version__1-GPd {\n display: flex;\n flex: 1 1 auto;\n justify-content: center;\n padding-left: 20px;\n}\n.app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_close__1beXI {\n margin-left: auto;\n width: 20px;\n text-align: right;\n font-weight: bold;\n font-size: small;\n align-self: center;\n cursor: pointer;\n display: flex;\n}\n.app-version-header-module_goa-app-version-header__3ngyf .app-version-header-module_content-wrapper__15exd .app-version-header-module_close__1beXI svg {\n color: #0070c4;\n}";
|
|
1512
|
+
styleInject(css_248z$g);
|
|
1604
1513
|
|
|
1605
|
-
var css_248z$f = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n /* line-height */\n --lh-xs: 0.875rem;\n --lh-sm: 1rem;\n --lh-base: 1.5rem;\n --lh-lg: 2rem;\n --lh-xl: 2.75rem;\n --lh-2xl: 3.5rem;\n --border-radius-sm: 0.15rem;\n --border-radius: 0.25rem;\n --border-radius-base: 0.25rem;\n --border-radius-lg: 0.5rem;\n --spacing-1: 0.5rem;\n --spacing-2: 0.875rem;\n --spacing-3: 1.75rem;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base)
|
|
1514
|
+
var css_248z$f = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n /* line-height */\n --lh-xs: 0.875rem;\n --lh-sm: 1rem;\n --lh-base: 1.5rem;\n --lh-lg: 2rem;\n --lh-xl: 2.75rem;\n --lh-2xl: 3.5rem;\n --border-radius-sm: 0.15rem;\n --border-radius: 0.25rem;\n --border-radius-base: 0.25rem;\n --border-radius-lg: 0.5rem;\n --spacing-1: 0.5rem;\n --spacing-2: 0.875rem;\n --spacing-3: 1.75rem;\n --input-height: 2.625rem;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base);\n}\n\n:host, :root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-600: #767676;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-orange-100: hsl(39.7, 99.01%, 98%);\n --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n --color-orange-900: hsl(39.7, 99.01%, 30%);\n --color-red: #ec040b;\n --color-red-100: hsl(358.19, 96.67%, 98%);\n --color-red-500: hsl(358.19, 96.67%, 47.06%);\n --color-red-600: hsl(358.19, 96.67%, 40%);\n --color-red-900: hsl(358.19, 96.67%, 20%);\n --color-green: #00853F;\n --color-green-100: hsl(148, 100%, 95%);\n --color-green-500: hsl(148.42, 100%, 26.08%);\n --color-green-900: hsl(148, 100%, 10%);\n --color-blue-100: #e3f2ff;\n --color-blue-500: #0070c4;\n --color-blue-600: #004f84;\n}\n\nh1:first-child,\nh2:first-child,\nh3:first-child {\n margin-top: 0;\n}\n\n/* Base header margins */\nh1,\nh2,\nh3,\nh4 {\n margin-bottom: 1rem;\n}\n\n/* Font sizes */\nh1 {\n font-size: var(--fs-3xl);\n line-height: var(--lh-2xl);\n font-weight: var(--fw-bold);\n}\n\nh2 {\n font-size: var(--fs-2xl);\n line-height: var(--lh-xl);\n font-weight: var(--fw-regular);\n}\n\nh3 {\n font-size: var(--fs-xl);\n line-height: var(--lh-lg);\n font-weight: var(--fw-regular);\n}\n\nh4,\nh5,\nh6 {\n font-size: var(--fs-base);\n line-height: var(--lh-base);\n font-weight: var(--fw-bold);\n}\n\n/* Set top margin to subsequent headers */\nh1 + h2,\nh1 + h3,\nh1 + h4,\nh2 + h3,\nh2 + h4,\nh3 + h4 {\n margin-top: 2rem;\n}\n\np {\n margin-bottom: 1rem;\n font-size: var(--fs-base);\n}\n\nhr + h1,\nhr + h2,\nhr + h3 {\n margin-top: 0;\n}\n\nem {\n font-size: var(--fs-xs);\n line-height: var(--lh-sm);\n color: var(--color-gray);\n}\n\nsmall {\n font-size: var(--fs-xs);\n font-style: normal;\n color: var(--color-gray);\n}\n\n.card-module_goa-card__OjjJX {\n --card-spacing: 1rem;\n --card-child-spacing: 0.5rem;\n box-sizing: border-box;\n background: var(--color-white);\n transition: opacity 300ms ease-in-out;\n border-radius: var(--border-radius);\n}\n.card-module_goa-card__OjjJX a:hover {\n color: var(--color-blue-600);\n text-decoration: none;\n}\n.card-module_goa-card__OjjJX a:focus {\n outline: 3px solid var(--color-orange);\n outline-offset: 0;\n}\n.card-module_goa-card__OjjJX h6 {\n font-size: var(--fs-xs);\n line-height: var(--lh-sm);\n font-weight: var(--fw-base);\n color: var(--color-gray);\n margin: 0;\n padding: 0;\n}\n\n.card-module_goa-card--tertiary__1BV7k {\n border-radius: var(--border-radius-sm);\n}\n\n.card-module_goa-card-top__RM4IA {\n border-top-left-radius: var(--border-radius);\n border-top-right-radius: var(--border-radius);\n min-height: 0.5rem;\n}\n\n.card-module_goa-card-top--primary__g2XEU {\n background-color: var(--color-tealblue-500);\n}\n\n.card-module_goa-card-top--secondary__mSrLl {\n background-color: var(--color-gray-200);\n}\n\n.card-module_goa-card-top--tertiary__2fG-A {\n display: none;\n}\n\n.card-module_goa-card__OjjJX .card-module_goa-card__OjjJX .card-module_goa-card-top--primary__g2XEU,\n.card-module_goa-card__OjjJX .card-module_goa-card__OjjJX .card-module_goa-card-top--secondary__mSrLl {\n min-height: 0.2rem;\n}\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX:first-child {\n margin-top: 0;\n}\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX h3 {\n font-size: var(--fs-lg);\n}\n\n.card-module_goa-card-details__4KtfS > .card-module_goa-card__OjjJX {\n margin-top: 1rem;\n}\n\n.card-module_goa-card-content__3gE5R {\n padding: var(--card-spacing);\n border-top-width: 0;\n border: 1px solid var(--color-gray-200);\n border-bottom-left-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n}\n\n.card-module_goa-card-content--tertiary__1dbYr {\n border-radius: var(--border-radius-sm);\n padding: calc(var(--card-spacing) / 2);\n}\n\n.card-module_goa-card-details__4KtfS ul {\n margin-left: var(--card-spacing);\n}";
|
|
1606
1515
|
styleInject(css_248z$f);
|
|
1607
1516
|
|
|
1608
|
-
var css_248z$
|
|
1609
|
-
styleInject(css_248z$
|
|
1517
|
+
var css_248z$e = ".goa-flex-row {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: top;\n margin-bottom: 1.5rem;\n}\n.goa-flex-row *:last-child {\n margin-bottom: 0;\n}\n\n.goa-flex-row > * {\n flex: 1 1 30ch;\n}";
|
|
1518
|
+
styleInject(css_248z$e);
|
|
1610
1519
|
|
|
1611
|
-
var css_248z$
|
|
1612
|
-
styleInject(css_248z$
|
|
1520
|
+
var css_248z$d = ":host, :root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-600: #767676;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-orange-100: hsl(39.7, 99.01%, 98%);\n --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n --color-orange-900: hsl(39.7, 99.01%, 30%);\n --color-red: #ec040b;\n --color-red-100: hsl(358.19, 96.67%, 98%);\n --color-red-500: hsl(358.19, 96.67%, 47.06%);\n --color-red-600: hsl(358.19, 96.67%, 40%);\n --color-red-900: hsl(358.19, 96.67%, 20%);\n --color-green: #00853F;\n --color-green-100: hsl(148, 100%, 95%);\n --color-green-500: hsl(148.42, 100%, 26.08%);\n --color-green-900: hsl(148, 100%, 10%);\n --color-blue-100: #e3f2ff;\n --color-blue-500: #0070c4;\n --color-blue-600: #004f84;\n}\n\n:root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n /* line-height */\n --lh-xs: 0.875rem;\n --lh-sm: 1rem;\n --lh-base: 1.5rem;\n --lh-lg: 2rem;\n --lh-xl: 2.75rem;\n --lh-2xl: 3.5rem;\n --border-radius-sm: 0.15rem;\n --border-radius: 0.25rem;\n --border-radius-base: 0.25rem;\n --border-radius-lg: 0.5rem;\n --spacing-1: 0.5rem;\n --spacing-2: 0.875rem;\n --spacing-3: 1.75rem;\n --input-height: 2.625rem;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base);\n}\n\n.goa-form {\n box-sizing: border-box;\n}\n\n.goa-form *,\n.goa-form *:before,\n.goa-form *:after {\n box-sizing: inherit;\n}\n\n.goa-form-row {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n@media screen and (min-width: 640px) {\n .goa-form-row {\n gap: 1.75rem;\n flex-direction: row;\n }\n}\n.goa-form-item {\n flex: 1 1 auto;\n margin-bottom: 1rem;\n}\n.goa-form-item label {\n display: block;\n font-weight: bold;\n color: #333;\n font-size: var(--fs-base);\n line-height: calc(var(--fs-base) + 1rem);\n}\n.goa-form-item label em {\n color: var(--color-gray-700);\n font-weight: var(--fw-regular);\n font-size: var(--fs-sm);\n}\n.goa-form-item input,\n.goa-form-item textarea {\n display: block;\n width: 100%;\n font-size: var(--fs-base);\n}\n.goa-form-item.goa-state--error .error-msg {\n font-size: var(--fs-sm);\n line-height: calc(var(--fs-sm) + 0.5rem);\n color: var(--color-red);\n}\n\n.help-msg {\n font-size: var(--fs-sm);\n color: var(--color-gray-900);\n line-height: calc(var(--fs-sm) + 0.5rem);\n}\n\n.goa-form-actions {\n display: flex;\n flex-wrap: wrap;\n margin-top: 2rem;\n}\n.goa-form-actions button,\n.goa-form-actions .goa-link-button {\n margin: 0;\n}\n@media (max-width: 639px) {\n .goa-form-actions button,\n.goa-form-actions .goa-link-button {\n width: 100%;\n }\n .goa-form-actions button + button,\n.goa-form-actions button + .goa-link-button,\n.goa-form-actions .goa-link-button + button,\n.goa-form-actions .goa-link-button + .goa-link-button {\n margin-top: 0.5rem;\n }\n}\n@media (min-width: 640px) {\n .goa-form-actions button,\n.goa-form-actions .goa-link-button {\n min-width: 6rem;\n }\n .goa-form-actions button + button,\n.goa-form-actions button + .goa-link-button,\n.goa-form-actions .goa-link-button + button,\n.goa-form-actions .goa-link-button + .goa-link-button {\n margin-left: 0.5rem;\n }\n}\n\n.goa-form-actions--left {\n justify-content: flex-start;\n}\n\n.goa-form-actions--right {\n justify-content: flex-end;\n}";
|
|
1521
|
+
styleInject(css_248z$d);
|
|
1613
1522
|
|
|
1614
|
-
var css_248z$
|
|
1615
|
-
styleInject(css_248z$
|
|
1523
|
+
var css_248z$c = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n /* line-height */\n --lh-xs: 0.875rem;\n --lh-sm: 1rem;\n --lh-base: 1.5rem;\n --lh-lg: 2rem;\n --lh-xl: 2.75rem;\n --lh-2xl: 3.5rem;\n --border-radius-sm: 0.15rem;\n --border-radius: 0.25rem;\n --border-radius-base: 0.25rem;\n --border-radius-lg: 0.5rem;\n --spacing-1: 0.5rem;\n --spacing-2: 0.875rem;\n --spacing-3: 1.75rem;\n --input-height: 2.625rem;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base);\n}\n\n:host, :root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-600: #767676;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-orange-100: hsl(39.7, 99.01%, 98%);\n --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n --color-orange-900: hsl(39.7, 99.01%, 30%);\n --color-red: #ec040b;\n --color-red-100: hsl(358.19, 96.67%, 98%);\n --color-red-500: hsl(358.19, 96.67%, 47.06%);\n --color-red-600: hsl(358.19, 96.67%, 40%);\n --color-red-900: hsl(358.19, 96.67%, 20%);\n --color-green: #00853F;\n --color-green-100: hsl(148, 100%, 95%);\n --color-green-500: hsl(148.42, 100%, 26.08%);\n --color-green-900: hsl(148, 100%, 10%);\n --color-blue-100: #e3f2ff;\n --color-blue-500: #0070c4;\n --color-blue-600: #004f84;\n}\n\n/* Forms */\n.goa-input {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-gray-700);\n border-radius: 3px;\n background: white;\n color: var(--color-gray-900);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: flex;\n align-content: center;\n line-height: var(--input-height);\n height: var(--input-height);\n}\n.goa-input:hover {\n border-color: var(--color-blue-600);\n}\n.goa-input:active, .goa-input:focus, .goa-input:focus-within {\n box-shadow: 0 0 0 3px var(--color-orange);\n}\n.goa-input:disabled {\n border-color: var(--color-gray-500);\n}\n.goa-input:disabled:hover {\n border-color: var(--color-gray-500);\n}\n.goa-input:disabled:focus {\n box-shadow: none;\n}\n\n.goa-input-leading-icon {\n display: flex;\n align-items: center;\n}\n\n.goa-input-leading-icon ~ input {\n padding-left: 0.25rem;\n}\n\n.goa-input-trailing-icon {\n display: flex;\n align-items: center;\n}\n\n.goa-input-trailing-icon > .goa-icon-button {\n margin-right: -0.5rem;\n}\n\ninput.input--goa {\n display: block;\n border: none;\n flex: 1 1 auto;\n}\n\ninput.input--goa::-webkit-calendar-picker-indicator {\n display: none;\n}\n\n.goa-input input,\n.goa-input input:focus,\n.goa-input input:hover,\n.goa-input input:active,\n.goa-input input {\n display: block;\n width: 100%;\n outline: none;\n border: none;\n}\n\n.goa-input--disabled {\n opacity: 0.5;\n cursor: default;\n border-color: var(--color-black);\n}\n.goa-input--disabled:hover, .goa-input--disabled:active, .goa-input--disabled:focus {\n border-color: var(--color-black);\n cursor: default;\n box-shadow: none;\n}\n.goa-input--disabled input:hover {\n cursor: default !important;\n}\n\n.goa-input .input--bare {\n border: none;\n}\n\n.goa-state--error .goa-input {\n border: 2px solid var(--color-red);\n}";
|
|
1524
|
+
styleInject(css_248z$c);
|
|
1616
1525
|
|
|
1617
|
-
|
|
1618
|
-
var
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
|
|
1628
|
-
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
|
|
1526
|
+
const GoAInput = _a => {
|
|
1527
|
+
var {
|
|
1528
|
+
name,
|
|
1529
|
+
onTrailingIconClick,
|
|
1530
|
+
onChange,
|
|
1531
|
+
leadingIcon,
|
|
1532
|
+
trailingIcon,
|
|
1533
|
+
variant = 'goa',
|
|
1534
|
+
focused,
|
|
1535
|
+
disabled,
|
|
1536
|
+
readonly
|
|
1537
|
+
} = _a,
|
|
1538
|
+
other = __rest(_a, ["name", "onTrailingIconClick", "onChange", "leadingIcon", "trailingIcon", "variant", "focused", "disabled", "readonly"]);
|
|
1539
|
+
|
|
1540
|
+
const inputRef = React.useRef(null);
|
|
1541
|
+
useEffect(() => {
|
|
1542
|
+
var _a, _b;
|
|
1634
1543
|
|
|
1635
|
-
|
|
1544
|
+
if (focused) {
|
|
1545
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
1636
1546
|
} else {
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
|
|
1547
|
+
(_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
|
|
1640
1548
|
}
|
|
1641
1549
|
}, [focused, inputRef]);
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
|
|
1645
|
-
|
|
1646
|
-
|
|
1647
|
-
|
|
1648
|
-
}
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
},
|
|
1667
|
-
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
|
|
1550
|
+
const rootCss = classnames({
|
|
1551
|
+
'goa-input': true,
|
|
1552
|
+
'goa-input--disabled': disabled
|
|
1553
|
+
});
|
|
1554
|
+
return jsxs("div", Object.assign({
|
|
1555
|
+
className: rootCss
|
|
1556
|
+
}, {
|
|
1557
|
+
children: [leadingIcon && jsx("div", Object.assign({
|
|
1558
|
+
className: "goa-input-leading-icon"
|
|
1559
|
+
}, {
|
|
1560
|
+
children: jsx(GoAIcon, {
|
|
1561
|
+
type: leadingIcon
|
|
1562
|
+
}, void 0)
|
|
1563
|
+
}), void 0), jsx("input", Object.assign({
|
|
1564
|
+
ref: inputRef,
|
|
1565
|
+
className: classnames({
|
|
1566
|
+
[`input--${variant}`]: true,
|
|
1567
|
+
'input--leading-icon': leadingIcon
|
|
1568
|
+
}),
|
|
1569
|
+
readOnly: readonly,
|
|
1570
|
+
disabled: disabled,
|
|
1571
|
+
onChange: e => onChange(name, e.target.value)
|
|
1572
|
+
}, other), void 0), trailingIcon && !onTrailingIconClick && jsx("div", Object.assign({
|
|
1573
|
+
className: "goa-input-trailing-icon"
|
|
1574
|
+
}, {
|
|
1575
|
+
children: jsx(GoAIcon, {
|
|
1576
|
+
size: "medium",
|
|
1577
|
+
type: trailingIcon
|
|
1578
|
+
}, void 0)
|
|
1579
|
+
}), void 0), trailingIcon && onTrailingIconClick && jsx("div", Object.assign({
|
|
1580
|
+
onClick: onTrailingIconClick,
|
|
1581
|
+
className: "goa-input-trailing-icon"
|
|
1582
|
+
}, {
|
|
1583
|
+
children: jsx(GoAIconButton, {
|
|
1584
|
+
variant: "tertiary",
|
|
1585
|
+
onClick: onTrailingIconClick,
|
|
1586
|
+
disabled: disabled,
|
|
1587
|
+
size: "medium",
|
|
1588
|
+
type: trailingIcon,
|
|
1589
|
+
testId: `${name}-input-trailing-button`
|
|
1590
|
+
}, void 0)
|
|
1591
|
+
}), void 0)]
|
|
1592
|
+
}), void 0);
|
|
1671
1593
|
};
|
|
1672
1594
|
|
|
1673
|
-
var css_248z$
|
|
1674
|
-
styleInject(css_248z$
|
|
1595
|
+
var css_248z$b = ".goa-scrollable {\n scroll-behavior: smooth;\n}\n\n.goa-scrollable::-webkit-scrollbar {\n width: 6px;\n}\n\n.goa-scrollable::-webkit-scrollbar-track {\n background: #f1f1f1;\n}\n\n.goa-scrollable::-webkit-scrollbar-thumb {\n background: #888;\n}\n\n.goa-scrollable::-webkit-scrollbar-thumb:hover {\n background: #555;\n}";
|
|
1596
|
+
styleInject(css_248z$b);
|
|
1675
1597
|
|
|
1676
|
-
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1598
|
+
const GoAScrollable = ({
|
|
1599
|
+
vertical,
|
|
1600
|
+
horizontal,
|
|
1601
|
+
hPadding,
|
|
1602
|
+
vPadding,
|
|
1603
|
+
height,
|
|
1604
|
+
children,
|
|
1605
|
+
testId
|
|
1606
|
+
}) => {
|
|
1607
|
+
const style = {
|
|
1685
1608
|
overflowY: vertical ? 'auto' : 'hidden',
|
|
1686
1609
|
overflowX: horizontal ? 'auto' : 'hidden',
|
|
1687
1610
|
maxHeight: height !== null && height !== void 0 ? height : '100%',
|
|
1688
|
-
padding:
|
|
1611
|
+
padding: `${vPadding !== null && vPadding !== void 0 ? vPadding : 0}rem ${hPadding !== null && hPadding !== void 0 ? hPadding : 0}rem`
|
|
1689
1612
|
};
|
|
1690
|
-
return
|
|
1691
|
-
className:
|
|
1613
|
+
return jsx("div", Object.assign({
|
|
1614
|
+
className: 'goa-scrollable',
|
|
1692
1615
|
style: style,
|
|
1693
1616
|
"data-testid": testId
|
|
1694
|
-
},
|
|
1617
|
+
}, {
|
|
1618
|
+
children: children
|
|
1619
|
+
}), void 0);
|
|
1695
1620
|
};
|
|
1696
1621
|
|
|
1697
|
-
var css_248z$
|
|
1698
|
-
styleInject(css_248z$
|
|
1622
|
+
var css_248z$a = "/* Fade in */\n.fade-in-init {\n display: none;\n}\n\n.fade-in-start {\n display: block;\n opacity: 0;\n transition: opacity 200ms ease-in;\n}\n\n.fade-in-active {\n opacity: 1;\n}\n\n/* Fade out */\n.fade-out-init {\n display: block;\n}\n\n.fade-out-start {\n display: block;\n opacity: 1;\n transition: opacity 200ms ease-in;\n}\n\n.fade-out-active {\n opacity: 0;\n}\n\n/* ======= Slide in/out Up */\n/* Slide in up */\n.slide-in-up-init {\n transition: translateY(0);\n display: none;\n}\n\n.slide-in-up-start {\n display: block;\n transform: translateY(100vh);\n transition: transform 300ms ease-out;\n}\n\n.slide-in-up-active {\n transform: translateY(0);\n}\n\n/* Slide out up */\n.slide-out-up-init {\n transform: translateY(0);\n display: block;\n}\n\n.slide-out-up-start {\n transition: transform 300ms ease-in;\n}\n\n.slide-out-up-active {\n transform: translateY(-100vh);\n}\n\n/* ======= Slide in/out Down */\n/* Slide in down */\n.slide-in-down-init {\n transition: translateY(0);\n display: none;\n}\n\n.slide-in-down-start {\n display: block;\n transform: translateY(-100vh);\n transition: transform 300ms ease-out;\n}\n\n.slide-in-down-active {\n transform: translateY(0);\n}\n\n/* Slide out down */\n.slide-out-down-init {\n transform: translateY(0);\n display: block;\n}\n\n.slide-out-down-start {\n transform: translateY(0);\n transition: transform 300ms ease-in;\n}\n\n.slide-out-down-active {\n transform: translateY(100vh);\n}\n\n/* ======= Slide in/out Left */\n/* Slide in left */\n.slide-in-left-init {\n transition: translateX(0);\n display: none;\n}\n\n.slide-in-left-start {\n display: block;\n transform: translateX(-100vw);\n transition: transform 300ms ease-out;\n}\n\n.slide-in-left-active {\n transform: translateX(0);\n}\n\n/* Slide out left */\n.slide-out-left-init {\n transform: translateX(0);\n display: block;\n}\n\n.slide-out-left-start {\n transform: translateX(0);\n transition: transform 300ms ease-in;\n}\n\n.slide-out-left-active {\n transform: translateX(-100vw);\n}\n\n/* ======= Slide in/out Right */\n/* Slide in left */\n.slide-in-right-init {\n transition: translateX(0);\n display: none;\n}\n\n.slide-in-right-start {\n display: block;\n transform: translateX(100vw);\n transition: transform 300ms ease-out;\n}\n\n.slide-in-right-active {\n transform: translateX(0);\n}\n\n/* Slide out right */\n.slide-out-right-init {\n transform: translateX(0);\n display: block;\n}\n\n.slide-out-right-start {\n transform: translateX(0);\n transition: transform 300ms ease-in;\n}\n\n.slide-out-right-active {\n transform: translateX(100vw);\n}";
|
|
1623
|
+
styleInject(css_248z$a);
|
|
1699
1624
|
|
|
1700
|
-
var css_248z$
|
|
1701
|
-
styleInject(css_248z$
|
|
1625
|
+
var css_248z$9 = "/* Root ============================================================================== */\n.modal-root {\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n --modal-spacing: 1.75rem;\n --button-min-width: 5rem;\n}\n\n/* Modal ============================================================================== */\n.modal {\n position: relative;\n background: #fff;\n z-index: 1002;\n box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n}\n\n@media (max-width: 639px) {\n .modal {\n width: 90%;\n max-height: 90%;\n }\n}\n@media (min-width: 640px) {\n .modal {\n margin: 1rem;\n max-height: 80%;\n min-width: 60ch;\n }\n}\n/* Modal Container =========================================================================== */\n.modal-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n/* Modal Actions ============================================================================== */\n.modal-actions {\n text-align: right;\n margin: var(--modal-spacing);\n flex: 0 0 auto;\n}\n\n.modal-actions button {\n min-width: var(--button-min-width);\n}\n\n@media (max-width: 639px) {\n .modal-actions button + button {\n margin-top: 0.5rem;\n }\n\n .modal-actions button {\n display: block;\n width: 100%;\n }\n}\n@media (min-width: 640px) {\n .modal-actions > button {\n margin-right: 0;\n }\n\n .modal-actions > button + button {\n margin-left: 0.5rem;\n }\n}\n/* Modal Title ============================================================================ */\n.modal-title {\n font-size: var(--fs-xl);\n padding: 1rem var(--modal-spacing);\n margin-right: 40px;\n /* close icon spacing */\n flex: 0 0 auto;\n}\n\n/* Modal Background ======================================================================= */\n.modal-background {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1001;\n}\n\n/* Modal Close Icon ======================================================================= */\n.modal-close {\n position: absolute;\n top: 1rem;\n right: 1rem;\n}";
|
|
1626
|
+
styleInject(css_248z$9);
|
|
1702
1627
|
|
|
1703
|
-
var css_248z$
|
|
1704
|
-
styleInject(css_248z$
|
|
1628
|
+
var css_248z$8 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n /* line-height */\n --lh-xs: 0.875rem;\n --lh-sm: 1rem;\n --lh-base: 1.5rem;\n --lh-lg: 2rem;\n --lh-xl: 2.75rem;\n --lh-2xl: 3.5rem;\n --border-radius-sm: 0.15rem;\n --border-radius: 0.25rem;\n --border-radius-base: 0.25rem;\n --border-radius-lg: 0.5rem;\n --spacing-1: 0.5rem;\n --spacing-2: 0.875rem;\n --spacing-3: 1.75rem;\n --input-height: 2.625rem;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base);\n}\n\n:host, :root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-600: #767676;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-orange-100: hsl(39.7, 99.01%, 98%);\n --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n --color-orange-900: hsl(39.7, 99.01%, 30%);\n --color-red: #ec040b;\n --color-red-100: hsl(358.19, 96.67%, 98%);\n --color-red-500: hsl(358.19, 96.67%, 47.06%);\n --color-red-600: hsl(358.19, 96.67%, 40%);\n --color-red-900: hsl(358.19, 96.67%, 20%);\n --color-green: #00853F;\n --color-green-100: hsl(148, 100%, 95%);\n --color-green-500: hsl(148.42, 100%, 26.08%);\n --color-green-900: hsl(148, 100%, 10%);\n --color-blue-100: #e3f2ff;\n --color-blue-500: #0070c4;\n --color-blue-600: #004f84;\n}\n\n/* Forms */\n.goa-textarea {\n outline: none;\n transition: box-shadow 0.1s ease-in;\n border: 1px solid var(--color-gray-700);\n border-radius: 3px;\n background: white;\n color: var(--color-gray-900);\n padding: var(--input-padding);\n font-size: var(--input-font-size);\n display: block;\n width: 100%;\n}\n.goa-textarea:hover {\n border-color: var(--color-blue-600);\n}\n.goa-textarea:active, .goa-textarea:focus, .goa-textarea:focus-within {\n box-shadow: 0 0 0 3px var(--color-orange);\n}\n.goa-textarea:disabled {\n border-color: var(--color-gray-500);\n}\n.goa-textarea:disabled:hover {\n border-color: var(--color-gray-500);\n}\n.goa-textarea:disabled:focus {\n box-shadow: none;\n}\n\n.goa-state--error textarea,\n.goa-state--error textarea:hover {\n border: 2px solid var(--color-red);\n}";
|
|
1629
|
+
styleInject(css_248z$8);
|
|
1705
1630
|
|
|
1706
|
-
var css_248z$
|
|
1707
|
-
styleInject(css_248z$
|
|
1631
|
+
var css_248z$7 = ":host, :root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-600: #767676;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-orange-100: hsl(39.7, 99.01%, 98%);\n --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n --color-orange-900: hsl(39.7, 99.01%, 30%);\n --color-red: #ec040b;\n --color-red-100: hsl(358.19, 96.67%, 98%);\n --color-red-500: hsl(358.19, 96.67%, 47.06%);\n --color-red-600: hsl(358.19, 96.67%, 40%);\n --color-red-900: hsl(358.19, 96.67%, 20%);\n --color-green: #00853F;\n --color-green-100: hsl(148, 100%, 95%);\n --color-green-500: hsl(148.42, 100%, 26.08%);\n --color-green-900: hsl(148, 100%, 10%);\n --color-blue-100: #e3f2ff;\n --color-blue-500: #0070c4;\n --color-blue-600: #004f84;\n}\n\n:root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n /* line-height */\n --lh-xs: 0.875rem;\n --lh-sm: 1rem;\n --lh-base: 1.5rem;\n --lh-lg: 2rem;\n --lh-xl: 2.75rem;\n --lh-2xl: 3.5rem;\n --border-radius-sm: 0.15rem;\n --border-radius: 0.25rem;\n --border-radius-base: 0.25rem;\n --border-radius-lg: 0.5rem;\n --spacing-1: 0.5rem;\n --spacing-2: 0.875rem;\n --spacing-3: 1.75rem;\n --input-height: 2.625rem;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base);\n}\n\n/* Forms */\n.goa-dropdown-box {\n position: relative;\n}\n\n.goa-dropdown-box input[readonly] {\n cursor: pointer;\n}\n\n.goa-dropdown-background {\n position: fixed;\n inset: 0;\n opacity: 1;\n}\n\n.goa-icon ~ input {\n padding-left: 0.5rem;\n}\n\n.goa-dropdown-list {\n position: absolute;\n left: 0;\n right: 0;\n padding: 0;\n margin: 0;\n margin-top: 3px;\n list-style-type: none;\n background: var(--color-white);\n border-radius: var(--input-border-radius);\n box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.1);\n z-index: 99;\n}\n\n.goa-dropdown-list hr {\n border: none;\n border-top: 1px solid var(--color-gray-100);\n margin: 0;\n}\n\n.goa-dropdown-list label {\n font-size: var(--fs-sm);\n font-weight: var(--fw-bold);\n padding-left: 0.5rem;\n}\n\n.goa-dropdown-option {\n margin: 0;\n padding: 0.5rem;\n cursor: pointer;\n color: var(--color-gray-900);\n}\n.goa-dropdown-option:hover {\n background: var(--color-gray-100);\n color: var(--color-blue-600);\n}\n.goa-dropdown-option:last-child:hover {\n border-bottom-left-radius: var(--input-border-radius);\n border-bottom-right-radius: var(--input-border-radius);\n}\n\n.goa-dropdown-option--disabled {\n opacity: 0.5;\n cursor: default;\n}\n.goa-dropdown-option--disabled:hover {\n cursor: default;\n color: var(--color-gray-700);\n}\n\n.goa-dropdown-option--selected {\n background: var(--color-blue-500);\n color: var(--color-white);\n}\n.goa-dropdown-option--selected:hover {\n background: var(--color-blue-600);\n color: var(--color-white);\n}\n\n.dropdown-group-content .goa-dropdown-option {\n padding-left: 1.5rem;\n}\n\n.goa-state--error .goa-dropdown-input {\n border: 2px solid var(--color-red);\n}";
|
|
1632
|
+
styleInject(css_248z$7);
|
|
1708
1633
|
|
|
1709
|
-
|
|
1710
|
-
|
|
1634
|
+
const GoADropdownOption = props => {
|
|
1635
|
+
const onClick = () => {
|
|
1711
1636
|
if (!props.disabled) {
|
|
1712
1637
|
props.onClick(props.value);
|
|
1713
1638
|
}
|
|
1714
1639
|
};
|
|
1715
1640
|
|
|
1716
|
-
return
|
|
1717
|
-
key: props.value,
|
|
1641
|
+
return jsx("li", Object.assign({
|
|
1718
1642
|
style: {
|
|
1719
1643
|
display: props.visible ? 'block' : 'none'
|
|
1720
1644
|
},
|
|
1721
|
-
className:
|
|
1645
|
+
className: `
|
|
1646
|
+
goa-dropdown-option
|
|
1647
|
+
${props.disabled ? 'goa-dropdown-option--disabled' : ''}
|
|
1648
|
+
${props.selected ? 'goa-dropdown-option--selected' : ''}
|
|
1649
|
+
`,
|
|
1722
1650
|
"data-testid": props._testId,
|
|
1723
1651
|
onClick: onClick
|
|
1724
|
-
},
|
|
1652
|
+
}, {
|
|
1653
|
+
children: props.children || props.label
|
|
1654
|
+
}), props.value);
|
|
1725
1655
|
};
|
|
1726
1656
|
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
var
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
var _useState3 = useState(''),
|
|
1739
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
1740
|
-
filter = _useState4[0],
|
|
1741
|
-
setFilter = _useState4[1];
|
|
1742
|
-
/**
|
|
1743
|
-
* Override the useState method to set the menu visibility to allow for conditional rendering
|
|
1657
|
+
const MAX_HEIGHT = 300;
|
|
1658
|
+
const GoADropdown = _a => {
|
|
1659
|
+
var {
|
|
1660
|
+
selectedValues = []
|
|
1661
|
+
} = _a,
|
|
1662
|
+
props = __rest(_a, ["selectedValues"]);
|
|
1663
|
+
|
|
1664
|
+
const [isMenuVisible, _setMenuVisibility] = useState(false);
|
|
1665
|
+
const [filter, setFilter] = useState('');
|
|
1666
|
+
/**
|
|
1667
|
+
* Override the useState method to set the menu visibility to allow for conditional rendering
|
|
1744
1668
|
*/
|
|
1745
1669
|
|
|
1746
|
-
|
|
1747
1670
|
function setMenuVisibility(isVisible) {
|
|
1748
1671
|
if (!props.disabled) {
|
|
1749
1672
|
_setMenuVisibility(isVisible);
|
|
1750
1673
|
}
|
|
1751
1674
|
}
|
|
1752
|
-
/**
|
|
1753
|
-
* Binds the children with additional properties and events
|
|
1675
|
+
/**
|
|
1676
|
+
* Binds the children with additional properties and events
|
|
1754
1677
|
*/
|
|
1755
1678
|
|
|
1756
1679
|
|
|
1757
1680
|
function getChildren() {
|
|
1758
|
-
|
|
1681
|
+
const _filter = filter.toLowerCase();
|
|
1682
|
+
|
|
1683
|
+
return React.Children.map(props.children, child => {
|
|
1759
1684
|
if (child.props.value) {
|
|
1760
|
-
|
|
1761
|
-
|
|
1685
|
+
const visible = !_filter || child.props.value.toLowerCase().includes(_filter) || child.props.label.toLowerCase().includes(_filter);
|
|
1686
|
+
return /*#__PURE__*/React.cloneElement(child, Object.assign(Object.assign({}, child.props), {
|
|
1687
|
+
visible: visible,
|
|
1762
1688
|
onClick: handleSelection,
|
|
1763
1689
|
selected: selectedValues.includes(child.props.value),
|
|
1764
|
-
_testId:
|
|
1690
|
+
_testId: `${props.name}-dropdown-option--${child.props.value}`
|
|
1765
1691
|
}));
|
|
1766
1692
|
}
|
|
1767
1693
|
|
|
@@ -1772,21 +1698,19 @@ var GoADropdown = function GoADropdown(_ref) {
|
|
|
1772
1698
|
return child;
|
|
1773
1699
|
});
|
|
1774
1700
|
}
|
|
1775
|
-
/**
|
|
1776
|
-
* Allows for conditional value relaying to the parent component and updates the selected labels
|
|
1701
|
+
/**
|
|
1702
|
+
* Allows for conditional value relaying to the parent component and updates the selected labels
|
|
1777
1703
|
*/
|
|
1778
1704
|
|
|
1779
1705
|
|
|
1780
1706
|
function handleSelection(value) {
|
|
1781
|
-
|
|
1707
|
+
let values;
|
|
1782
1708
|
|
|
1783
1709
|
if (props.multiSelect) {
|
|
1784
1710
|
if (selectedValues.includes(value)) {
|
|
1785
|
-
values = selectedValues.filter(
|
|
1786
|
-
return v !== value;
|
|
1787
|
-
});
|
|
1711
|
+
values = selectedValues.filter(v => v !== value);
|
|
1788
1712
|
} else {
|
|
1789
|
-
values = [
|
|
1713
|
+
values = [...selectedValues, value];
|
|
1790
1714
|
}
|
|
1791
1715
|
} else {
|
|
1792
1716
|
values = selectedValues.includes(value) ? [] : [value];
|
|
@@ -1795,8 +1719,8 @@ var GoADropdown = function GoADropdown(_ref) {
|
|
|
1795
1719
|
props.onChange(props.name, values);
|
|
1796
1720
|
toggleMenuVisibility();
|
|
1797
1721
|
}
|
|
1798
|
-
/**
|
|
1799
|
-
* Controls whether the menu is hidden or not when clicked
|
|
1722
|
+
/**
|
|
1723
|
+
* Controls whether the menu is hidden or not when clicked
|
|
1800
1724
|
*/
|
|
1801
1725
|
|
|
1802
1726
|
|
|
@@ -1812,22 +1736,16 @@ var GoADropdown = function GoADropdown(_ref) {
|
|
|
1812
1736
|
setFilter('');
|
|
1813
1737
|
}
|
|
1814
1738
|
}
|
|
1815
|
-
/**
|
|
1816
|
-
* Generates a description of the selected options
|
|
1739
|
+
/**
|
|
1740
|
+
* Generates a description of the selected options
|
|
1817
1741
|
*/
|
|
1818
1742
|
|
|
1819
1743
|
|
|
1820
1744
|
function getSelectedLabel() {
|
|
1821
|
-
|
|
1822
|
-
return child;
|
|
1823
|
-
}).filter(function (child) {
|
|
1824
|
-
return selectedValues.includes(child.props.value);
|
|
1825
|
-
}).map(function (child) {
|
|
1826
|
-
return child.props.label;
|
|
1827
|
-
});
|
|
1745
|
+
const selectedLabels = React.Children.map(props.children, child => child).filter(child => selectedValues.includes(child.props.value)).map(child => child.props.label);
|
|
1828
1746
|
|
|
1829
1747
|
if (props.multiSelect && selectedLabels.length > 1) {
|
|
1830
|
-
return
|
|
1748
|
+
return `${selectedLabels.length} items selected`;
|
|
1831
1749
|
}
|
|
1832
1750
|
|
|
1833
1751
|
if (selectedLabels.length === 1) {
|
|
@@ -1837,53 +1755,59 @@ var GoADropdown = function GoADropdown(_ref) {
|
|
|
1837
1755
|
return '';
|
|
1838
1756
|
}
|
|
1839
1757
|
|
|
1840
|
-
return
|
|
1758
|
+
return jsxs("div", Object.assign({
|
|
1841
1759
|
className: "goa-dropdown-box"
|
|
1842
|
-
},
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
}
|
|
1848
|
-
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
|
|
1861
|
-
|
|
1862
|
-
|
|
1863
|
-
|
|
1864
|
-
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1869
|
-
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1760
|
+
}, {
|
|
1761
|
+
children: [isMenuVisible && jsx("div", {
|
|
1762
|
+
"data-testid": `${props.name}-dropdown-background`,
|
|
1763
|
+
className: "goa-dropdown-background",
|
|
1764
|
+
onClick: () => setMenuVisibility(false)
|
|
1765
|
+
}, void 0), jsxs("div", {
|
|
1766
|
+
children: [(!isMenuVisible || !props.autoComplete) && jsx("div", Object.assign({
|
|
1767
|
+
onClick: toggleMenuVisibility,
|
|
1768
|
+
"data-testid": `${props.name}-dropdown`
|
|
1769
|
+
}, {
|
|
1770
|
+
children: jsx(GoAInput, {
|
|
1771
|
+
type: "text",
|
|
1772
|
+
disabled: props.disabled,
|
|
1773
|
+
trailingIcon: "chevron-down",
|
|
1774
|
+
leadingIcon: props.leadingIcon,
|
|
1775
|
+
name: "search",
|
|
1776
|
+
readonly: true,
|
|
1777
|
+
onChange: null,
|
|
1778
|
+
placeholder: props.placeholder,
|
|
1779
|
+
value: getSelectedLabel()
|
|
1780
|
+
}, void 0)
|
|
1781
|
+
}), void 0), isMenuVisible && jsxs(Fragment$1, {
|
|
1782
|
+
children: [props.autoComplete && jsx(GoAInput, {
|
|
1783
|
+
type: "text",
|
|
1784
|
+
placeholder: "Filter",
|
|
1785
|
+
focused: isMenuVisible,
|
|
1786
|
+
variant: "goa",
|
|
1787
|
+
name: "filter",
|
|
1788
|
+
value: filter,
|
|
1789
|
+
trailingIcon: filter.length > 0 ? 'close-circle' : 'search',
|
|
1790
|
+
onTrailingIconClick: () => filter.length > 0 && setFilter(''),
|
|
1791
|
+
onChange: (_name, value) => setFilter(value)
|
|
1792
|
+
}, void 0), jsx("ul", Object.assign({
|
|
1793
|
+
className: "goa-dropdown-list"
|
|
1794
|
+
}, {
|
|
1795
|
+
children: jsx(GoAScrollable, Object.assign({
|
|
1796
|
+
vertical: true,
|
|
1797
|
+
height: props.maxHeight || MAX_HEIGHT
|
|
1798
|
+
}, {
|
|
1799
|
+
children: getChildren()
|
|
1800
|
+
}), void 0)
|
|
1801
|
+
}), void 0)]
|
|
1802
|
+
}, void 0)]
|
|
1803
|
+
}, void 0)]
|
|
1804
|
+
}), void 0);
|
|
1881
1805
|
};
|
|
1882
1806
|
|
|
1883
|
-
var css_248z$
|
|
1884
|
-
styleInject(css_248z$
|
|
1807
|
+
var css_248z$6 = ":host, :root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-600: #767676;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-orange-100: hsl(39.7, 99.01%, 98%);\n --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n --color-orange-900: hsl(39.7, 99.01%, 30%);\n --color-red: #ec040b;\n --color-red-100: hsl(358.19, 96.67%, 98%);\n --color-red-500: hsl(358.19, 96.67%, 47.06%);\n --color-red-600: hsl(358.19, 96.67%, 40%);\n --color-red-900: hsl(358.19, 96.67%, 20%);\n --color-green: #00853F;\n --color-green-100: hsl(148, 100%, 95%);\n --color-green-500: hsl(148.42, 100%, 26.08%);\n --color-green-900: hsl(148, 100%, 10%);\n --color-blue-100: #e3f2ff;\n --color-blue-500: #0070c4;\n --color-blue-600: #004f84;\n}\n\n/* Radio Group */\n.goa-radio-group--horizontal {\n display: flex;\n flex-direction: row;\n}\n\n.goa-radio-group--vertical {\n display: inline-flex;\n flex-direction: column;\n}\n\n/* Radio */\nlabel.goa-radio {\n --goa-border-color: var(--color-gray-700);\n --goa-border-color--checked: var(--color-blue-500);\n --goa-radio-color--error: var(--color-red);\n --goa-radio-outline-color: var(--color-orange);\n --goa-radio-outline-width: 3px;\n --goa-radio-diameter: 1.5rem;\n --goa-radio-border-width: 1px;\n --goa-radio-border-width--checked: 7px;\n box-sizing: border-box;\n display: flex !important;\n align-items: center;\n min-height: 3rem;\n}\n\n.goa-radio:hover {\n cursor: pointer;\n}\n\n.goa-radio *,\n.goa-radio *:before,\n.goa-radio *:after {\n box-sizing: border-box;\n}\n\n.goa-radio input[type=radio] {\n display: none;\n}\n\n.goa-radio-label {\n padding: 0.5rem 1.5rem 0.5rem 0.5rem;\n font-weight: var(--fw-regular);\n}\n\n.goa-radio-icon {\n display: inline-block;\n height: var(--goa-radio-diameter);\n width: var(--goa-radio-diameter);\n border-radius: 50%;\n background-color: #fff;\n transition: box-shadow 100ms ease-in-out;\n}\n\n.goa-radio:focus > input:not(:disabled) ~ .goa-radio-icon {\n box-shadow: 0 0 0 var(--goa-radio-outline-width) var(--goa-radio-outline-color);\n}\n\n.goa-radio--disabled:hover {\n cursor: default;\n}\n\n/* States */\n/* Checked */\ninput[type=radio]:checked ~ .goa-radio-icon {\n border: var(--goa-radio-border-width--checked) solid var(--goa-border-color--checked);\n}\n\n/* Not checked */\ninput[type=radio]:not(:checked) ~ .goa-radio-icon {\n border: var(--goa-radio-border-width) solid var(--goa-border-color);\n}\n\n/* Disabled */\ninput[type=radio]:disabled ~ .goa-radio-icon {\n border: var(--goa-radio-border-width) solid var(--goa-border-color);\n opacity: 0.3;\n}\n\n/* Disabled and checked */\ninput[type=radio]:disabled:checked ~ .goa-radio-icon {\n border: var(--goa-radio-border-width--checked) solid var(--goa-border-color--checked);\n opacity: 0.3;\n}\n\n/* Error */\n.goa-state--error input[type=radio]:checked ~ .goa-radio-icon {\n border: 7px solid var(--goa-radio-color--error);\n}\n\n.goa-state--error input[type=radio]:not(:checked) ~ .goa-radio-icon {\n border: 2px solid var(--goa-radio-color--error);\n}";
|
|
1808
|
+
styleInject(css_248z$6);
|
|
1885
1809
|
|
|
1886
|
-
|
|
1810
|
+
const GoARadio = props => {
|
|
1887
1811
|
function getCss() {
|
|
1888
1812
|
return classnames({
|
|
1889
1813
|
'goa-radio': true,
|
|
@@ -1895,304 +1819,330 @@ var GoARadio = function GoARadio(props) {
|
|
|
1895
1819
|
props.onChange(e.target.value);
|
|
1896
1820
|
}
|
|
1897
1821
|
|
|
1898
|
-
return
|
|
1822
|
+
return jsxs("label", Object.assign({
|
|
1899
1823
|
className: getCss()
|
|
1900
|
-
},
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1824
|
+
}, {
|
|
1825
|
+
children: [jsx("input", {
|
|
1826
|
+
type: "radio",
|
|
1827
|
+
name: props.name,
|
|
1828
|
+
value: props.value,
|
|
1829
|
+
checked: props.checked,
|
|
1830
|
+
disabled: props.disabled,
|
|
1831
|
+
onChange: onRadioChange
|
|
1832
|
+
}, void 0), jsx("div", {
|
|
1833
|
+
className: 'goa-radio-icon'
|
|
1834
|
+
}, void 0), jsx("span", Object.assign({
|
|
1835
|
+
className: "goa-radio-label"
|
|
1836
|
+
}, {
|
|
1837
|
+
children: props.children || props.label
|
|
1838
|
+
}), void 0)]
|
|
1839
|
+
}), void 0);
|
|
1912
1840
|
};
|
|
1913
1841
|
|
|
1914
|
-
|
|
1915
|
-
var
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1842
|
+
const GoARadioGroup = _a => {
|
|
1843
|
+
var {
|
|
1844
|
+
name,
|
|
1845
|
+
value,
|
|
1846
|
+
children,
|
|
1847
|
+
orientation = 'vertical',
|
|
1848
|
+
onChange
|
|
1849
|
+
} = _a,
|
|
1850
|
+
childAttrs = __rest(_a, ["name", "value", "children", "orientation", "onChange"]);
|
|
1922
1851
|
|
|
1923
1852
|
function onChangeHandler(value) {
|
|
1924
1853
|
onChange(name, value);
|
|
1925
1854
|
}
|
|
1926
1855
|
|
|
1927
1856
|
function getChildren() {
|
|
1928
|
-
return Children.map(children,
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
return React.cloneElement(child, _objectSpread2(_objectSpread2({}, childAttrs), {}, {
|
|
1857
|
+
return Children.map(children, child => {
|
|
1858
|
+
const key = `${name}-${child.props.value}`;
|
|
1859
|
+
const _name = `${name}-${Date.now()}`;
|
|
1860
|
+
return /*#__PURE__*/React.cloneElement(child, Object.assign(Object.assign({}, childAttrs), {
|
|
1934
1861
|
name: _name,
|
|
1935
1862
|
checked: child.props.value === value,
|
|
1936
1863
|
onChange: onChangeHandler,
|
|
1937
|
-
key
|
|
1864
|
+
key
|
|
1938
1865
|
}));
|
|
1939
1866
|
});
|
|
1940
1867
|
}
|
|
1941
1868
|
|
|
1942
|
-
return
|
|
1943
|
-
className:
|
|
1944
|
-
},
|
|
1869
|
+
return jsx("div", Object.assign({
|
|
1870
|
+
className: `goa-radio-group--${orientation}`
|
|
1871
|
+
}, {
|
|
1872
|
+
children: getChildren()
|
|
1873
|
+
}), void 0);
|
|
1945
1874
|
};
|
|
1946
1875
|
|
|
1947
|
-
var css_248z$
|
|
1948
|
-
styleInject(css_248z$
|
|
1876
|
+
var css_248z$5 = ":root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n /* base */\n --fs-lg: 1.25rem;\n /* h4 */\n --fs-xl: 1.5rem;\n /* h3 */\n --fs-2xl: 2.25rem;\n /* h2 */\n --fs-3xl: 3rem;\n /* h1 */\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n}\n\n/* Palette */\n/* Semantic usages */\n@-webkit-keyframes pulse {\n 0% {\n opacity: 0.5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0.5;\n }\n}\n@keyframes pulse {\n 0% {\n opacity: 0.5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0.5;\n }\n}\n[data-skeleton] {\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n[data-skeleton] * {\n border-color: #ddd !important;\n color: transparent !important;\n}\n[data-skeleton] p,\n[data-skeleton] a {\n background-color: #ddd !important;\n -webkit-animation: pulse 2s infinite ease-in-out;\n animation: pulse 2s infinite ease-in-out;\n display: inline;\n line-height: 0 !important;\n font-size: 50% !important;\n}\n[data-skeleton] p::after,\n[data-skeleton] a::after {\n content: \"\" !important;\n display: block !important;\n margin-bottom: 1rem !important;\n background-size: contain;\n}\n[data-skeleton] h1,\n[data-skeleton] h2,\n[data-skeleton] h3,\n[data-skeleton] h4,\n[data-skeleton] h5,\n[data-skeleton] h6 {\n background-color: #ddd !important;\n -webkit-animation: pulse 2s infinite ease-in-out;\n animation: pulse 2s infinite ease-in-out;\n margin-bottom: 1rem;\n}\n[data-skeleton] h1 {\n height: calc(0.6 * var(--fs-3xl)) !important;\n}\n[data-skeleton] h2 {\n height: calc(0.6 * var(--fs-2xl)) !important;\n}\n[data-skeleton] h3 {\n height: calc(0.6 * var(--fs-xl)) !important;\n}\n[data-skeleton] h4 {\n height: calc(0.6 * var(--fs-lg)) !important;\n}\n[data-skeleton] img {\n background-color: #ddd !important;\n -webkit-animation: pulse 2s infinite ease-in-out;\n animation: pulse 2s infinite ease-in-out;\n}\n\n/* basic styles */\n.skeleton {\n background-color: #ddd !important;\n -webkit-animation: pulse 2s infinite ease-in-out;\n animation: pulse 2s infinite ease-in-out;\n background: #dcdcdc;\n overflow: hidden;\n margin: 10px 0;\n}\n\n.skeleton.text {\n width: 100%;\n height: 12px;\n border-radius: 4px;\n}\n\n.skeleton.paragraph {\n width: 100%;\n height: 70px;\n border-radius: 4px;\n}\n\n.skeleton.title {\n width: 50%;\n height: 20px;\n margin-bottom: 15px;\n border-radius: 4px;\n}\n\n.skeleton.avatar {\n width: 100px;\n height: 100px;\n border-radius: 50%;\n}\n\n.skeleton.thumbnail {\n width: 100px;\n height: 100px;\n border-radius: 4px;\n}\n\n/* skeleton image text */\n.skeleton-image-content {\n display: flex;\n flex-direction: row;\n gap: 30px;\n}\n\n.skeleton-image-content__text {\n flex: 1 1 auto;\n}\n\n/* skeleton content */\n.skeleton-content {\n display: grid;\n grid-template-columns: 1fr;\n gap: 30px;\n align-items: left;\n}";
|
|
1877
|
+
styleInject(css_248z$5);
|
|
1949
1878
|
|
|
1950
|
-
|
|
1951
|
-
|
|
1952
|
-
|
|
1953
|
-
|
|
1954
|
-
return
|
|
1879
|
+
const GoASkeletonElement = ({
|
|
1880
|
+
type: _type = 'text'
|
|
1881
|
+
}) => {
|
|
1882
|
+
const classes = `skeleton ${_type}`;
|
|
1883
|
+
return jsx("div", {
|
|
1955
1884
|
className: classes
|
|
1956
|
-
});
|
|
1885
|
+
}, void 0);
|
|
1957
1886
|
};
|
|
1958
1887
|
|
|
1959
|
-
|
|
1960
|
-
|
|
1961
|
-
|
|
1962
|
-
|
|
1888
|
+
const GoASkeletonContent = ({
|
|
1889
|
+
rows: _rows = 1
|
|
1890
|
+
}) => {
|
|
1891
|
+
const elements = [];
|
|
1963
1892
|
|
|
1964
|
-
for (
|
|
1965
|
-
elements.push(
|
|
1893
|
+
for (let i = 0; i < _rows; i++) {
|
|
1894
|
+
elements.push(jsx(GoASkeletonElement, {
|
|
1966
1895
|
type: "text"
|
|
1967
|
-
}));
|
|
1896
|
+
}, void 0));
|
|
1968
1897
|
}
|
|
1969
1898
|
|
|
1970
|
-
return
|
|
1899
|
+
return jsx("div", Object.assign({
|
|
1971
1900
|
className: "skeleton-content"
|
|
1972
|
-
},
|
|
1973
|
-
|
|
1974
|
-
|
|
1901
|
+
}, {
|
|
1902
|
+
children: jsxs("div", {
|
|
1903
|
+
children: [jsx(GoASkeletonElement, {
|
|
1904
|
+
type: "title"
|
|
1905
|
+
}, void 0), elements]
|
|
1906
|
+
}, void 0)
|
|
1907
|
+
}), void 0);
|
|
1975
1908
|
};
|
|
1976
1909
|
|
|
1977
|
-
|
|
1978
|
-
|
|
1979
|
-
|
|
1980
|
-
|
|
1910
|
+
const GoASkeletonGridColumnContent = ({
|
|
1911
|
+
rows: _rows = 1
|
|
1912
|
+
}) => {
|
|
1913
|
+
const elements = [];
|
|
1981
1914
|
|
|
1982
|
-
for (
|
|
1983
|
-
elements.push(
|
|
1915
|
+
for (let i = 0; i < _rows; i++) {
|
|
1916
|
+
elements.push(jsx(GoASkeletonElement, {
|
|
1984
1917
|
type: "text"
|
|
1985
|
-
}));
|
|
1918
|
+
}, void 0));
|
|
1986
1919
|
}
|
|
1987
1920
|
|
|
1988
|
-
return
|
|
1921
|
+
return jsx("div", Object.assign({
|
|
1989
1922
|
className: "skeleton-content"
|
|
1990
|
-
},
|
|
1923
|
+
}, {
|
|
1924
|
+
children: jsx("div", {
|
|
1925
|
+
children: elements
|
|
1926
|
+
}, void 0)
|
|
1927
|
+
}), void 0);
|
|
1991
1928
|
};
|
|
1992
1929
|
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1930
|
+
const GoASkeletonImageContent = ({
|
|
1931
|
+
rows: _rows = 1
|
|
1932
|
+
}) => {
|
|
1933
|
+
const elements = [];
|
|
1997
1934
|
|
|
1998
|
-
for (
|
|
1999
|
-
elements.push(
|
|
1935
|
+
for (let i = 0; i < _rows; i++) {
|
|
1936
|
+
elements.push(jsx(GoASkeletonElement, {
|
|
2000
1937
|
type: "text"
|
|
2001
|
-
}));
|
|
1938
|
+
}, void 0));
|
|
2002
1939
|
}
|
|
2003
1940
|
|
|
2004
|
-
return
|
|
1941
|
+
return jsxs("div", Object.assign({
|
|
2005
1942
|
className: "skeleton-image-content"
|
|
2006
|
-
},
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
|
|
2012
|
-
|
|
1943
|
+
}, {
|
|
1944
|
+
children: [jsx(GoASkeletonElement, {
|
|
1945
|
+
type: "thumbnail"
|
|
1946
|
+
}, void 0), jsxs("div", Object.assign({
|
|
1947
|
+
className: "skeleton-image-content__text"
|
|
1948
|
+
}, {
|
|
1949
|
+
children: [jsx(GoASkeletonElement, {
|
|
1950
|
+
type: "title"
|
|
1951
|
+
}, void 0), elements]
|
|
1952
|
+
}), void 0)]
|
|
1953
|
+
}), void 0);
|
|
2013
1954
|
};
|
|
2014
1955
|
|
|
2015
|
-
var css_248z$
|
|
2016
|
-
styleInject(css_248z$
|
|
1956
|
+
var css_248z$4 = "/* Palette */\n/* Semantic usages */\n:root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n /* base */\n --fs-lg: 1.25rem;\n /* h4 */\n --fs-xl: 1.5rem;\n /* h3 */\n --fs-2xl: 2.25rem;\n /* h2 */\n --fs-3xl: 3rem;\n /* h1 */\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n}\n\n/* Palette */\n/* Semantic usages */\n@-webkit-keyframes pulse {\n 0% {\n opacity: 0.5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0.5;\n }\n}\n@keyframes pulse {\n 0% {\n opacity: 0.5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0.5;\n }\n}\n[data-skeleton] {\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n[data-skeleton] * {\n border-color: #ddd !important;\n color: transparent !important;\n}\n[data-skeleton] p,\n[data-skeleton] a {\n background-color: #ddd !important;\n -webkit-animation: pulse 2s infinite ease-in-out;\n animation: pulse 2s infinite ease-in-out;\n display: inline;\n line-height: 0 !important;\n font-size: 50% !important;\n}\n[data-skeleton] p::after,\n[data-skeleton] a::after {\n content: \"\" !important;\n display: block !important;\n margin-bottom: 1rem !important;\n background-size: contain;\n}\n[data-skeleton] h1,\n[data-skeleton] h2,\n[data-skeleton] h3,\n[data-skeleton] h4,\n[data-skeleton] h5,\n[data-skeleton] h6 {\n background-color: #ddd !important;\n -webkit-animation: pulse 2s infinite ease-in-out;\n animation: pulse 2s infinite ease-in-out;\n margin-bottom: 1rem;\n}\n[data-skeleton] h1 {\n height: calc(0.6 * var(--fs-3xl)) !important;\n}\n[data-skeleton] h2 {\n height: calc(0.6 * var(--fs-2xl)) !important;\n}\n[data-skeleton] h3 {\n height: calc(0.6 * var(--fs-xl)) !important;\n}\n[data-skeleton] h4 {\n height: calc(0.6 * var(--fs-lg)) !important;\n}\n[data-skeleton] img {\n background-color: #ddd !important;\n -webkit-animation: pulse 2s infinite ease-in-out;\n animation: pulse 2s infinite ease-in-out;\n}\n\n/* basic styles */\n.skeleton {\n background-color: #ddd !important;\n -webkit-animation: pulse 2s infinite ease-in-out;\n animation: pulse 2s infinite ease-in-out;\n background: #dcdcdc;\n overflow: hidden;\n margin: 10px 0;\n}\n\n.skeleton.text {\n width: 100%;\n height: 12px;\n border-radius: 4px;\n}\n\n.skeleton.paragraph {\n width: 100%;\n height: 70px;\n border-radius: 4px;\n}\n\n.skeleton.title {\n width: 50%;\n height: 20px;\n margin-bottom: 15px;\n border-radius: 4px;\n}\n\n.skeleton.avatar {\n width: 100px;\n height: 100px;\n border-radius: 50%;\n}\n\n.skeleton.thumbnail {\n width: 100px;\n height: 100px;\n border-radius: 4px;\n}\n\n/* skeleton image text */\n.skeleton-image-content {\n display: flex;\n flex-direction: row;\n gap: 30px;\n}\n\n.skeleton-image-content__text {\n flex: 1 1 auto;\n}\n\n/* skeleton content */\n.skeleton-content {\n display: grid;\n grid-template-columns: 1fr;\n gap: 30px;\n align-items: left;\n}\n\n.goa-card {\n box-sizing: border-box;\n background: #fff;\n border: 1px solid #dcdcdc;\n transition: opacity 300ms ease-in-out;\n /* size variants ***/\n}\n.goa-card .card-content {\n padding: 28px;\n border-top: 8px solid #0081a2;\n}\n.goa-card .card-content .goa-title,\n.goa-card .card-content .goa-text,\n.goa-card .card-content .goa-content {\n margin-bottom: 28px;\n}\n.goa-card .card-content .goa-text {\n color: #333;\n font-size: var(--fs-base);\n line-height: 28px;\n}\n.goa-card .card-content .goa-footer {\n font-size: var(--fs-base);\n}\n.goa-card .card-content .goa-title {\n font-size: var(--fs-xl);\n font-weight: 400;\n line-height: 32px;\n}\n.goa-card .goa-poster {\n position: relative;\n display: block;\n padding: 56.25% 0 0;\n overflow: hidden;\n background: #e5e5e5;\n}\n.goa-card .goa-poster:empty {\n display: none;\n}\n.goa-card .goa-poster img,\n.goa-card .goa-poster iframe {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: none;\n}\n.goa-card .goa-poster-image img {\n display: block;\n width: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n}\n.goa-card.card-auto {\n width: auto;\n}\n.goa-card.card-auto .card {\n flex-basis: auto;\n width: auto;\n}\n.goa-card a:hover {\n color: #004f84;\n text-decoration: none;\n}\n.goa-card a:focus {\n outline: 3px solid #feba35;\n outline-offset: 0;\n}\n\n.goa-card[data-skeleton] .goa-poster-image {\n background-color: #ddd !important;\n -webkit-animation: pulse 2s infinite ease-in-out;\n animation: pulse 2s infinite ease-in-out;\n padding-bottom: 56.25%;\n}\n.goa-card[data-skeleton] .goa-poster-image img {\n display: none;\n}\n.goa-card[data-skeleton] .goa-title {\n margin-bottom: 1rem;\n}\n.goa-card[data-skeleton] .goa-footer {\n background-color: #ddd !important;\n -webkit-animation: pulse 2s infinite ease-in-out;\n animation: pulse 2s infinite ease-in-out;\n max-height: 1rem;\n}";
|
|
1957
|
+
styleInject(css_248z$4);
|
|
2017
1958
|
|
|
2018
|
-
|
|
2019
|
-
var
|
|
2020
|
-
|
|
2021
|
-
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
other = _objectWithoutProperties(_ref, ["title", "content", "description", "cardImageUrl", "titleUrl", "children", "minWidth", "maxWidth"]);
|
|
2034
|
-
|
|
2035
|
-
var _useState = useState(null),
|
|
2036
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
2037
|
-
imgHeight = _useState2[0],
|
|
2038
|
-
setImgHeight = _useState2[1];
|
|
2039
|
-
|
|
2040
|
-
return /*#__PURE__*/React.createElement("div", Object.assign({
|
|
1959
|
+
const GoACard = _a => {
|
|
1960
|
+
var {
|
|
1961
|
+
title,
|
|
1962
|
+
content,
|
|
1963
|
+
description = null,
|
|
1964
|
+
cardImageUrl = null,
|
|
1965
|
+
titleUrl = null,
|
|
1966
|
+
children = null,
|
|
1967
|
+
minWidth = 'auto',
|
|
1968
|
+
maxWidth = 'auto'
|
|
1969
|
+
} = _a,
|
|
1970
|
+
other = __rest(_a, ["title", "content", "description", "cardImageUrl", "titleUrl", "children", "minWidth", "maxWidth"]);
|
|
1971
|
+
|
|
1972
|
+
const [imgHeight, setImgHeight] = useState(null);
|
|
1973
|
+
return jsxs("div", Object.assign({
|
|
2041
1974
|
className: "goa-card",
|
|
2042
|
-
"data-testid":
|
|
1975
|
+
"data-testid": 'card-container',
|
|
2043
1976
|
style: {
|
|
2044
|
-
minWidth
|
|
2045
|
-
maxWidth
|
|
1977
|
+
minWidth,
|
|
1978
|
+
maxWidth
|
|
2046
1979
|
}
|
|
2047
|
-
}, other
|
|
2048
|
-
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
1980
|
+
}, other, {
|
|
1981
|
+
children: [cardImageUrl && jsx("div", Object.assign({
|
|
1982
|
+
className: "goa-poster-image",
|
|
1983
|
+
"data-testid": 'card-img'
|
|
1984
|
+
}, {
|
|
1985
|
+
children: jsx("img", {
|
|
1986
|
+
height: imgHeight,
|
|
1987
|
+
src: cardImageUrl,
|
|
1988
|
+
alt: "Card cardImageUrl"
|
|
1989
|
+
}, void 0)
|
|
1990
|
+
}), void 0), jsxs("div", Object.assign({
|
|
1991
|
+
className: "card-content"
|
|
1992
|
+
}, {
|
|
1993
|
+
children: [jsx("div", Object.assign({
|
|
1994
|
+
className: "goa-title",
|
|
1995
|
+
"data-testid": 'card-title'
|
|
1996
|
+
}, {
|
|
1997
|
+
children: titleUrl ? jsx("a", Object.assign({
|
|
1998
|
+
href: titleUrl,
|
|
1999
|
+
"data-testid": 'card-title-link'
|
|
2000
|
+
}, {
|
|
2001
|
+
children: title
|
|
2002
|
+
}), void 0) : jsx("div", {
|
|
2003
|
+
children: title
|
|
2004
|
+
}, void 0)
|
|
2005
|
+
}), void 0), jsx("p", Object.assign({
|
|
2006
|
+
className: "goa-text",
|
|
2007
|
+
"data-testid": 'card-content'
|
|
2008
|
+
}, {
|
|
2009
|
+
children: content !== null && content !== void 0 ? content : description
|
|
2010
|
+
}), void 0), children && jsx("div", Object.assign({
|
|
2011
|
+
className: "goa-footer",
|
|
2012
|
+
"data-testid": 'card-footer'
|
|
2013
|
+
}, {
|
|
2014
|
+
children: children
|
|
2015
|
+
}), void 0)]
|
|
2016
|
+
}), void 0)]
|
|
2017
|
+
}), void 0);
|
|
2069
2018
|
};
|
|
2070
2019
|
|
|
2071
|
-
var css_248z$
|
|
2072
|
-
styleInject(css_248z$
|
|
2073
|
-
|
|
2074
|
-
var GoACardGroup = function GoACardGroup(_ref) {
|
|
2075
|
-
var _ref$title = _ref.title,
|
|
2076
|
-
title = _ref$title === void 0 ? null : _ref$title,
|
|
2077
|
-
_ref$children = _ref.children,
|
|
2078
|
-
children = _ref$children === void 0 ? null : _ref$children,
|
|
2079
|
-
_ref$layout = _ref.layout,
|
|
2080
|
-
layout = _ref$layout === void 0 ? 'basic' : _ref$layout,
|
|
2081
|
-
_ref$cardItems = _ref.cardItems,
|
|
2082
|
-
cardItems = _ref$cardItems === void 0 ? null : _ref$cardItems;
|
|
2020
|
+
var css_248z$3 = "/* Palette */\n/* Semantic usages */\n.goa-card-group {\n margin-top: 14px;\n vertical-align: top;\n}\n.goa-card-group .card-group-title {\n font-size: 24px;\n font-weight: bold;\n color: #333;\n}\n.goa-card-group .card-group-basic {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: stretch;\n}\n.goa-card-group .card-group-basic > div {\n margin: 14px 10px;\n}\n.goa-card-group .card-group-basic-vue > div {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: stretch;\n}\n.goa-card-group .card-group-basic-vue > div > div {\n margin: 14px 10px;\n}\n.goa-card-group .card-group-column {\n display: inline-block;\n flex-direction: column;\n -moz-column-count: 3;\n column-count: 3;\n flex-wrap: wrap;\n align-items: stretch;\n}\n.goa-card-group .card-group-column > div {\n margin: 14px;\n}\n.goa-card-group .card-group-column-vue > div {\n display: inline-block;\n flex-direction: column;\n -moz-column-count: 3;\n column-count: 3;\n flex-wrap: wrap;\n align-items: stretch;\n}\n.goa-card-group .card-group-column > div > div {\n margin: 14px;\n}";
|
|
2021
|
+
styleInject(css_248z$3);
|
|
2083
2022
|
|
|
2023
|
+
const GoACardGroup = ({
|
|
2024
|
+
title: _title = null,
|
|
2025
|
+
children: _children = null,
|
|
2026
|
+
layout: _layout = 'basic',
|
|
2027
|
+
cardItems: _cardItems = null
|
|
2028
|
+
}) => {
|
|
2084
2029
|
function getCards() {
|
|
2085
|
-
if (
|
|
2086
|
-
return
|
|
2030
|
+
if (_children) {
|
|
2031
|
+
return _children;
|
|
2087
2032
|
}
|
|
2088
2033
|
|
|
2089
|
-
return
|
|
2090
|
-
return /*#__PURE__*/
|
|
2034
|
+
return _cardItems.map((item, index) => {
|
|
2035
|
+
return /*#__PURE__*/createElement(GoACard, Object.assign({}, item, {
|
|
2091
2036
|
key: index
|
|
2092
2037
|
}), item.children);
|
|
2093
2038
|
});
|
|
2094
2039
|
}
|
|
2095
2040
|
|
|
2096
|
-
return
|
|
2041
|
+
return jsxs("div", Object.assign({
|
|
2097
2042
|
className: "goa-card-group"
|
|
2098
|
-
},
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2043
|
+
}, {
|
|
2044
|
+
children: [jsx("div", Object.assign({
|
|
2045
|
+
className: "card-group-title"
|
|
2046
|
+
}, {
|
|
2047
|
+
children: _title
|
|
2048
|
+
}), void 0), jsx("div", Object.assign({
|
|
2049
|
+
className: `card-group-${_layout}`
|
|
2050
|
+
}, {
|
|
2051
|
+
children: getCards()
|
|
2052
|
+
}), void 0)]
|
|
2053
|
+
}), void 0);
|
|
2103
2054
|
};
|
|
2104
2055
|
|
|
2105
|
-
var css_248z$
|
|
2106
|
-
styleInject(css_248z$
|
|
2107
|
-
|
|
2108
|
-
/* eslint-disable-next-line */
|
|
2109
|
-
|
|
2110
|
-
var GoACheckbox = function GoACheckbox(_ref) {
|
|
2111
|
-
var name = _ref.name,
|
|
2112
|
-
checked = _ref.checked,
|
|
2113
|
-
disabled = _ref.disabled,
|
|
2114
|
-
indeterminate = _ref.indeterminate,
|
|
2115
|
-
_ref$value = _ref.value,
|
|
2116
|
-
value = _ref$value === void 0 ? true : _ref$value,
|
|
2117
|
-
content = _ref.content,
|
|
2118
|
-
children = _ref.children,
|
|
2119
|
-
_onChange = _ref.onChange;
|
|
2056
|
+
var css_248z$2 = ":host, :root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-100: #f1f1f1;\n --color-gray-200: #dcdcdc;\n --color-gray-500: #adadad;\n --color-gray-600: #767676;\n --color-gray-700: #666;\n --color-gray-900: #333;\n --color-tealblue-100: #c8eefa;\n --color-tealblue-500: #0081a2;\n --color-tealblue-900: #005072;\n --color-orange: #feba35;\n --color-orange-100: hsl(39.7, 99.01%, 98%);\n --color-orange-500: hsl(39.7, 99.01%, 60.2%);\n --color-orange-900: hsl(39.7, 99.01%, 30%);\n --color-red: #ec040b;\n --color-red-100: hsl(358.19, 96.67%, 98%);\n --color-red-500: hsl(358.19, 96.67%, 47.06%);\n --color-red-600: hsl(358.19, 96.67%, 40%);\n --color-red-900: hsl(358.19, 96.67%, 20%);\n --color-green: #00853F;\n --color-green-100: hsl(148, 100%, 95%);\n --color-green-500: hsl(148.42, 100%, 26.08%);\n --color-green-900: hsl(148, 100%, 10%);\n --color-blue-100: #e3f2ff;\n --color-blue-500: #0070c4;\n --color-blue-600: #004f84;\n}\n\n.goa-checkbox {\n box-sizing: border-box;\n display: flex !important;\n align-items: center;\n min-height: calc(3rem - 4px);\n}\n.goa-checkbox input[type=checkbox] {\n height: 0px;\n width: 0px;\n position: absolute;\n}\n\n.goa-checkbox--disabled {\n opacity: 30%;\n}\n.goa-checkbox--disabled .goa-checkbox-label {\n cursor: default;\n}\n\n.goa-checkbox-container {\n cursor: pointer;\n border: 1px solid var(--color-gray-700);\n border-radius: 2px;\n background-color: var(--color-white);\n height: 1.5rem;\n line-height: 1.5rem;\n width: 1.5rem;\n display: flex;\n justify-content: center;\n padding: 3px;\n}\n.goa-checkbox-container svg {\n fill: var(--color-white);\n}\n.goa-checkbox-container.goa-checkbox--selected {\n background-color: var(--color-blue-500);\n}\n.goa-checkbox-container:hover:not(.goa-checkbox--selected) {\n background-color: var(--color-gray-100);\n}\n.goa-checkbox-container:focus-within {\n box-shadow: 0 0 0 3px var(--color-orange-500);\n outline: none;\n}\n\n.goa-checkbox-text {\n padding-left: 0.5rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\n font-weight: var(--fw-regular);\n}\n\n.goa-state--error .goa-checkbox-container {\n border: 2px solid var(--color-red-500);\n}";
|
|
2057
|
+
styleInject(css_248z$2);
|
|
2120
2058
|
|
|
2121
|
-
|
|
2059
|
+
const GoACheckbox = ({
|
|
2060
|
+
name,
|
|
2061
|
+
checked,
|
|
2062
|
+
disabled,
|
|
2063
|
+
indeterminate,
|
|
2064
|
+
value: _value = true,
|
|
2065
|
+
content,
|
|
2066
|
+
children,
|
|
2067
|
+
onChange
|
|
2068
|
+
}) => {
|
|
2069
|
+
const rootCss = () => {
|
|
2122
2070
|
return classnames({
|
|
2123
2071
|
'goa-checkbox': true,
|
|
2124
2072
|
'goa-checkbox--disabled': disabled
|
|
2125
2073
|
});
|
|
2126
2074
|
};
|
|
2127
2075
|
|
|
2128
|
-
|
|
2076
|
+
const checkboxCss = () => {
|
|
2129
2077
|
return classnames({
|
|
2130
2078
|
'goa-checkbox-container': true,
|
|
2131
2079
|
'goa-checkbox--selected': checked
|
|
2132
2080
|
});
|
|
2133
2081
|
};
|
|
2134
2082
|
|
|
2135
|
-
return
|
|
2083
|
+
return jsxs("label", Object.assign({
|
|
2136
2084
|
className: rootCss()
|
|
2137
|
-
},
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
|
|
2085
|
+
}, {
|
|
2086
|
+
children: [jsxs("div", Object.assign({
|
|
2087
|
+
className: checkboxCss()
|
|
2088
|
+
}, {
|
|
2089
|
+
children: [jsx("input", {
|
|
2090
|
+
name: name,
|
|
2091
|
+
type: "checkbox",
|
|
2092
|
+
checked: checked,
|
|
2093
|
+
disabled: disabled,
|
|
2094
|
+
value: `${_value}`,
|
|
2095
|
+
onChange: e => onChange(name, e.target.checked ? `${_value}` : null)
|
|
2096
|
+
}, void 0), indeterminate && checked && jsx("svg", Object.assign({
|
|
2097
|
+
id: 'dashmark',
|
|
2098
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2099
|
+
viewBox: "0 0 15 2"
|
|
2100
|
+
}, {
|
|
2101
|
+
children: jsx("rect", {
|
|
2102
|
+
width: "15",
|
|
2103
|
+
height: "2"
|
|
2104
|
+
}, void 0)
|
|
2105
|
+
}), void 0), !indeterminate && checked && jsx("svg", Object.assign({
|
|
2106
|
+
id: 'checkmark',
|
|
2107
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2108
|
+
viewBox: "0 0 16 12.18"
|
|
2109
|
+
}, {
|
|
2110
|
+
children: jsx("path", {
|
|
2111
|
+
d: "M5.09,9.64,1.27,5.82,0,7.09l5.09,5.09L16,1.27,14.73,0Z"
|
|
2112
|
+
}, void 0)
|
|
2113
|
+
}), void 0)]
|
|
2114
|
+
}), void 0), jsx("div", Object.assign({
|
|
2115
|
+
className: "goa-checkbox-text"
|
|
2116
|
+
}, {
|
|
2117
|
+
children: content || children
|
|
2118
|
+
}), void 0)]
|
|
2119
|
+
}), void 0);
|
|
2164
2120
|
};
|
|
2165
2121
|
|
|
2166
|
-
var css_248z$
|
|
2167
|
-
styleInject(css_248z$
|
|
2168
|
-
|
|
2169
|
-
var GoAPageLoader = function GoAPageLoader(_ref) {
|
|
2170
|
-
var _ref$type = _ref.type,
|
|
2171
|
-
type = _ref$type === void 0 ? 'infinite' : _ref$type,
|
|
2172
|
-
_ref$visible = _ref.visible,
|
|
2173
|
-
visible = _ref$visible === void 0 ? false : _ref$visible,
|
|
2174
|
-
_ref$message = _ref.message,
|
|
2175
|
-
message = _ref$message === void 0 ? 'Loading...' : _ref$message,
|
|
2176
|
-
_ref$value = _ref.value,
|
|
2177
|
-
value = _ref$value === void 0 ? 0 : _ref$value,
|
|
2178
|
-
_ref$pagelock = _ref.pagelock,
|
|
2179
|
-
pagelock = _ref$pagelock === void 0 ? true : _ref$pagelock,
|
|
2180
|
-
_ref$displayType = _ref.displayType,
|
|
2181
|
-
displayType = _ref$displayType === void 0 ? 'large' : _ref$displayType;
|
|
2122
|
+
var css_248z$1 = "/* Palette */\n/* Semantic usages */\n.svg {\n max-width: 100px;\n}\n\n.svg--small {\n max-width: 65px;\n}\n\n@-webkit-keyframes circle-animation {\n 0% {\n stroke-dashoffset: 75;\n transform: rotate(0);\n }\n 100% {\n stroke-dashoffset: 75;\n transform: rotate(360deg);\n }\n}\n\n@keyframes circle-animation {\n 0% {\n stroke-dashoffset: 75;\n transform: rotate(0);\n }\n 100% {\n stroke-dashoffset: 75;\n transform: rotate(360deg);\n }\n}\n.base-circle {\n display: block;\n fill: transparent;\n stroke: #c8eef9;\n stroke-width: 7px;\n}\n\n.progress-circle, .progress-circle--infinite {\n display: block;\n fill: transparent;\n stroke: #0070c4;\n stroke-linecap: round;\n stroke-dasharray: 283;\n stroke-dashoffset: 280;\n stroke-width: 7px;\n transform-origin: 50% 50%;\n}\n.progress-circle--infinite {\n -webkit-animation: circle-animation 1.2s linear infinite;\n animation: circle-animation 1.2s linear infinite;\n}\n\n.progress-message, .progress-message--small, .progress-message--large {\n font-style: normal;\n font-weight: normal;\n}\n.progress-message--large {\n margin-top: 32px;\n font-size: 24px;\n color: #000;\n}\n.progress-message--small {\n margin-top: 18px;\n font-size: 18px;\n color: #000;\n}\n\n.progress-container, .progress-container--large, .progress-container--small {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background: white;\n}\n.progress-container--large {\n width: 100%;\n height: 100%;\n}";
|
|
2123
|
+
styleInject(css_248z$1);
|
|
2182
2124
|
|
|
2183
|
-
|
|
2184
|
-
|
|
2125
|
+
const GoAPageLoader = ({
|
|
2126
|
+
type: _type = 'infinite',
|
|
2127
|
+
visible: _visible = false,
|
|
2128
|
+
message: _message = 'Loading...',
|
|
2129
|
+
value: _value = 0,
|
|
2130
|
+
pagelock: _pagelock = true,
|
|
2131
|
+
displayType: _displayType = 'large'
|
|
2132
|
+
}) => {
|
|
2133
|
+
/**
|
|
2134
|
+
* Set defaults
|
|
2185
2135
|
*/
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
/**
|
|
2189
|
-
* Sets the progress if in progress mode.
|
|
2190
|
-
* @param progress
|
|
2191
|
-
* @returns
|
|
2136
|
+
const progressMaxValue = 283;
|
|
2137
|
+
let strokeDashoffset = 0;
|
|
2138
|
+
/**
|
|
2139
|
+
* Sets the progress if in progress mode.
|
|
2140
|
+
* @param progress
|
|
2141
|
+
* @returns
|
|
2192
2142
|
*/
|
|
2193
2143
|
|
|
2194
2144
|
function setProgress(progress) {
|
|
2195
|
-
if (
|
|
2145
|
+
if (_type !== 'progress') {
|
|
2196
2146
|
return;
|
|
2197
2147
|
}
|
|
2198
2148
|
|
|
@@ -2205,12 +2155,12 @@ var GoAPageLoader = function GoAPageLoader(_ref) {
|
|
|
2205
2155
|
return;
|
|
2206
2156
|
}
|
|
2207
2157
|
|
|
2208
|
-
|
|
2158
|
+
const value = progressMaxValue - Math.round(progressMaxValue * progress / 100);
|
|
2209
2159
|
strokeDashoffset = value;
|
|
2210
2160
|
}
|
|
2211
2161
|
|
|
2212
|
-
if (
|
|
2213
|
-
if (
|
|
2162
|
+
if (_visible) {
|
|
2163
|
+
if (_pagelock && _displayType !== 'small') {
|
|
2214
2164
|
document.body.style.height = '100%';
|
|
2215
2165
|
document.body.style.overflow = 'hidden';
|
|
2216
2166
|
} else {
|
|
@@ -2218,36 +2168,42 @@ var GoAPageLoader = function GoAPageLoader(_ref) {
|
|
|
2218
2168
|
document.body.style.removeProperty('overflow');
|
|
2219
2169
|
}
|
|
2220
2170
|
|
|
2221
|
-
if (
|
|
2222
|
-
setProgress(
|
|
2171
|
+
if (_type === 'progress') {
|
|
2172
|
+
setProgress(_value);
|
|
2223
2173
|
}
|
|
2224
2174
|
|
|
2225
|
-
return
|
|
2226
|
-
className:
|
|
2227
|
-
onKeyDown:
|
|
2175
|
+
return jsxs("div", Object.assign({
|
|
2176
|
+
className: `progress-container--${_displayType}`,
|
|
2177
|
+
onKeyDown: event => {
|
|
2228
2178
|
event.preventDefault();
|
|
2229
2179
|
}
|
|
2230
|
-
},
|
|
2231
|
-
|
|
2232
|
-
|
|
2233
|
-
|
|
2234
|
-
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
|
|
2238
|
-
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
|
|
2250
|
-
|
|
2180
|
+
}, {
|
|
2181
|
+
children: [jsxs("svg", Object.assign({
|
|
2182
|
+
className: `${_displayType === 'large' ? 'svg' : "svg--small"}`,
|
|
2183
|
+
fill: "none",
|
|
2184
|
+
viewBox: "0 0 100 100",
|
|
2185
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
2186
|
+
}, {
|
|
2187
|
+
children: [jsx("circle", {
|
|
2188
|
+
className: "base-circle",
|
|
2189
|
+
cx: "50",
|
|
2190
|
+
cy: "50",
|
|
2191
|
+
r: "45"
|
|
2192
|
+
}, void 0), jsx("circle", {
|
|
2193
|
+
className: `${_type === 'infinite' ? 'progress-circle--infinite' : 'progress-circle'}`,
|
|
2194
|
+
cx: "50",
|
|
2195
|
+
cy: "50",
|
|
2196
|
+
r: "45",
|
|
2197
|
+
style: {
|
|
2198
|
+
strokeDashoffset: strokeDashoffset
|
|
2199
|
+
}
|
|
2200
|
+
}, void 0)]
|
|
2201
|
+
}), void 0), jsx("span", Object.assign({
|
|
2202
|
+
className: `progress-message--${_displayType}`
|
|
2203
|
+
}, {
|
|
2204
|
+
children: _message
|
|
2205
|
+
}), void 0)]
|
|
2206
|
+
}), void 0);
|
|
2251
2207
|
} else {
|
|
2252
2208
|
document.body.style.removeProperty('height');
|
|
2253
2209
|
document.body.style.removeProperty('overflow');
|
|
@@ -2255,86 +2211,84 @@ var GoAPageLoader = function GoAPageLoader(_ref) {
|
|
|
2255
2211
|
}
|
|
2256
2212
|
};
|
|
2257
2213
|
GoAPageLoader.propTypes = {
|
|
2258
|
-
visible:
|
|
2259
|
-
message:
|
|
2260
|
-
value:
|
|
2261
|
-
type:
|
|
2262
|
-
pagelock:
|
|
2263
|
-
displayType:
|
|
2214
|
+
visible: PropTypes.bool,
|
|
2215
|
+
message: PropTypes.string,
|
|
2216
|
+
value: PropTypes.number,
|
|
2217
|
+
type: PropTypes.string,
|
|
2218
|
+
pagelock: PropTypes.bool,
|
|
2219
|
+
displayType: PropTypes.string
|
|
2264
2220
|
};
|
|
2265
2221
|
|
|
2266
|
-
var css_248z
|
|
2267
|
-
styleInject(css_248z
|
|
2222
|
+
var css_248z = "@-webkit-keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n}\n.circular-loader {\n -webkit-animation: rotate 1s linear infinite;\n animation: rotate 1s linear infinite;\n}\n\n.base-circle {\n display: block;\n fill: transparent;\n stroke-width: 7px;\n}\n\n.rotating-circle {\n -webkit-animation: rotate 1s linear infinite;\n animation: rotate 1s linear infinite;\n display: block;\n fill: transparent;\n stroke-linecap: round;\n stroke-width: 7px;\n transform-origin: 50% 50%;\n}";
|
|
2223
|
+
styleInject(css_248z);
|
|
2268
2224
|
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
|
|
2274
|
-
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
*
|
|
2283
|
-
* @param
|
|
2284
|
-
* @param
|
|
2285
|
-
* @param pathRadius Radius of the SVG path.
|
|
2286
|
-
* @param elementRadius Radius of the SVG container.
|
|
2287
|
-
* @param isSemicircle Whether the element should be a semicircle.
|
|
2225
|
+
const GoAElementLoader = ({
|
|
2226
|
+
visible: _visible = false,
|
|
2227
|
+
baseColour: _baseColour = '#c8eef9',
|
|
2228
|
+
spinnerColour: _spinnerColour = '#0070c4',
|
|
2229
|
+
size: _size = 'default'
|
|
2230
|
+
}) => {
|
|
2231
|
+
const radius = _size === 'small' ? 16 : 18;
|
|
2232
|
+
const diameter = radius * 2;
|
|
2233
|
+
const boxView = `0 0 ${diameter} ${diameter}`;
|
|
2234
|
+
/**
|
|
2235
|
+
* Generates the value for an SVG arc.
|
|
2236
|
+
* @param current Current value.
|
|
2237
|
+
* @param total Maximum value.
|
|
2238
|
+
* @param pathRadius Radius of the SVG path.
|
|
2239
|
+
* @param elementRadius Radius of the SVG container.
|
|
2240
|
+
* @param isSemicircle Whether the element should be a semicircle.
|
|
2288
2241
|
*/
|
|
2289
2242
|
|
|
2290
|
-
function getArc(current, total, pathRadius, elementRadius) {
|
|
2291
|
-
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
var percentage = total === 0 ? maxAngle : value / total * maxAngle;
|
|
2243
|
+
function getArc(current, total, pathRadius, elementRadius, isSemicircle = false) {
|
|
2244
|
+
const value = Math.max(0, Math.min(current || 0, total));
|
|
2245
|
+
const maxAngle = isSemicircle ? 180 : 359.9999;
|
|
2246
|
+
const percentage = total === 0 ? maxAngle : value / total * maxAngle;
|
|
2295
2247
|
|
|
2296
|
-
|
|
2248
|
+
const start = _polarToCartesian(elementRadius, pathRadius, percentage);
|
|
2297
2249
|
|
|
2298
|
-
|
|
2250
|
+
const end = _polarToCartesian(elementRadius, pathRadius, 0);
|
|
2299
2251
|
|
|
2300
|
-
|
|
2301
|
-
return
|
|
2252
|
+
const arcSweep = percentage <= 180 ? 0 : 1;
|
|
2253
|
+
return `M ${start} A ${pathRadius} ${pathRadius} 0 ${arcSweep} 0 ${end}`;
|
|
2302
2254
|
}
|
|
2303
2255
|
|
|
2304
|
-
|
|
2305
|
-
/**
|
|
2306
|
-
* Converts polar cooradinates to Cartesian.
|
|
2307
|
-
* @param elementRadius Radius of the wrapper element.
|
|
2308
|
-
* @param pathRadius Radius of the path being described.
|
|
2309
|
-
* @param angleInDegrees Degree to be converted.
|
|
2256
|
+
const DEGREE_IN_RADIANS = Math.PI / 180;
|
|
2257
|
+
/**
|
|
2258
|
+
* Converts polar cooradinates to Cartesian.
|
|
2259
|
+
* @param elementRadius Radius of the wrapper element.
|
|
2260
|
+
* @param pathRadius Radius of the path being described.
|
|
2261
|
+
* @param angleInDegrees Degree to be converted.
|
|
2310
2262
|
*/
|
|
2311
2263
|
|
|
2312
2264
|
function _polarToCartesian(elementRadius, pathRadius, angleInDegrees) {
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
|
|
2265
|
+
const angleInRadians = (angleInDegrees - 90) * DEGREE_IN_RADIANS;
|
|
2266
|
+
const x = elementRadius + pathRadius * Math.cos(angleInRadians);
|
|
2267
|
+
const y = elementRadius + pathRadius * Math.sin(angleInRadians);
|
|
2316
2268
|
return x + ' ' + y;
|
|
2317
2269
|
}
|
|
2318
2270
|
|
|
2319
|
-
return
|
|
2271
|
+
return _visible && jsxs("svg", Object.assign({
|
|
2320
2272
|
className: "circular-loader",
|
|
2321
2273
|
fill: "none",
|
|
2322
2274
|
viewBox: boxView,
|
|
2323
2275
|
width: radius,
|
|
2324
2276
|
height: radius,
|
|
2325
2277
|
xmlns: "http://www.w3.org/2000/svg"
|
|
2326
|
-
},
|
|
2327
|
-
|
|
2328
|
-
|
|
2329
|
-
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
|
|
2278
|
+
}, {
|
|
2279
|
+
children: [jsx("circle", {
|
|
2280
|
+
cx: radius,
|
|
2281
|
+
cy: radius,
|
|
2282
|
+
stroke: _baseColour,
|
|
2283
|
+
strokeWidth: "7",
|
|
2284
|
+
r: radius - 4
|
|
2285
|
+
}, void 0), jsx("path", {
|
|
2286
|
+
d: getArc(75, 100, radius - 4, radius, false),
|
|
2287
|
+
strokeWidth: "7",
|
|
2288
|
+
stroke: _spinnerColour,
|
|
2289
|
+
strokeLinecap: "round"
|
|
2290
|
+
}, void 0)]
|
|
2291
|
+
}), void 0);
|
|
2338
2292
|
};
|
|
2339
2293
|
|
|
2340
2294
|
export { GoAButton, GoACallout, GoACard, GoACardGroup, GoACheckbox, GoADropdown, GoADropdownOption, GoAElementLoader, GoAHeader, GoAHeroBanner, GoAHeroBannerContent, GoAHeroBannerLink, GoaMicrositeLogo as GoAMicrositeLogo, GoANotification, GoAPageLoader, GoARadio, GoARadioGroup, GoASkeletonContent, GoASkeletonGridColumnContent, GoASkeletonImageContent };
|