@abgov/react-components 3.4.0-beta.60 → 3.4.0-beta.64
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 +2 -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 -617
- package/experimental/react-components.umd.js +879 -908
- 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/dropdown/dropdown.d.ts +1 -1
- package/package.json +4 -3
- package/react-components.esm.js +941 -991
- package/react-components.umd.js +955 -937
- 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 } from 'react/jsx-runtime';
|
|
2
|
+
import React, { useState, Fragment as Fragment$1, 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
|
-
|
|
1145
|
+
var PropTypes = propTypes.exports;
|
|
1146
|
+
|
|
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);
|
|
1301
1149
|
|
|
1302
|
-
|
|
1303
|
-
var
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
return
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
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(Fragment, {
|
|
1328
|
+
children: [jsxs("header", 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$1, {}, 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: [jsx("h1", Object.assign({
|
|
1420
|
+
role: "heading",
|
|
1421
|
+
"aria-level": 1
|
|
1422
|
+
}, {
|
|
1423
|
+
children: title
|
|
1424
|
+
}), void 0), children || jsxs(Fragment$1, {
|
|
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.4rem;\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.4rem;\n border-radius: 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,193 +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
|
-
|
|
1671
|
-
|
|
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);
|
|
1672
1593
|
};
|
|
1673
1594
|
|
|
1674
|
-
var css_248z$
|
|
1675
|
-
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);
|
|
1676
1597
|
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1598
|
+
const GoAScrollable = ({
|
|
1599
|
+
vertical,
|
|
1600
|
+
horizontal,
|
|
1601
|
+
hPadding,
|
|
1602
|
+
vPadding,
|
|
1603
|
+
height,
|
|
1604
|
+
children,
|
|
1605
|
+
testId
|
|
1606
|
+
}) => {
|
|
1607
|
+
const style = {
|
|
1686
1608
|
overflowY: vertical ? 'auto' : 'hidden',
|
|
1687
1609
|
overflowX: horizontal ? 'auto' : 'hidden',
|
|
1688
1610
|
maxHeight: height !== null && height !== void 0 ? height : '100%',
|
|
1689
|
-
padding:
|
|
1611
|
+
padding: `${vPadding !== null && vPadding !== void 0 ? vPadding : 0}rem ${hPadding !== null && hPadding !== void 0 ? hPadding : 0}rem`
|
|
1690
1612
|
};
|
|
1691
|
-
return
|
|
1692
|
-
className:
|
|
1613
|
+
return jsx("div", Object.assign({
|
|
1614
|
+
className: 'goa-scrollable',
|
|
1693
1615
|
style: style,
|
|
1694
1616
|
"data-testid": testId
|
|
1695
|
-
},
|
|
1617
|
+
}, {
|
|
1618
|
+
children: children
|
|
1619
|
+
}), void 0);
|
|
1696
1620
|
};
|
|
1697
1621
|
|
|
1698
|
-
var css_248z$
|
|
1699
|
-
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);
|
|
1700
1624
|
|
|
1701
|
-
var css_248z$
|
|
1702
|
-
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);
|
|
1703
1627
|
|
|
1704
|
-
var css_248z$
|
|
1705
|
-
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);
|
|
1706
1630
|
|
|
1707
|
-
var css_248z$
|
|
1708
|
-
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);
|
|
1709
1633
|
|
|
1710
|
-
|
|
1711
|
-
|
|
1634
|
+
const GoADropdownOption = props => {
|
|
1635
|
+
const onClick = () => {
|
|
1712
1636
|
if (!props.disabled) {
|
|
1713
1637
|
props.onClick(props.value);
|
|
1714
1638
|
}
|
|
1715
1639
|
};
|
|
1716
1640
|
|
|
1717
|
-
return
|
|
1718
|
-
key: props.value,
|
|
1641
|
+
return jsx("li", Object.assign({
|
|
1719
1642
|
style: {
|
|
1720
1643
|
display: props.visible ? 'block' : 'none'
|
|
1721
1644
|
},
|
|
1722
|
-
className:
|
|
1645
|
+
className: `
|
|
1646
|
+
goa-dropdown-option
|
|
1647
|
+
${props.disabled ? 'goa-dropdown-option--disabled' : ''}
|
|
1648
|
+
${props.selected ? 'goa-dropdown-option--selected' : ''}
|
|
1649
|
+
`,
|
|
1723
1650
|
"data-testid": props._testId,
|
|
1724
1651
|
onClick: onClick
|
|
1725
|
-
},
|
|
1652
|
+
}, {
|
|
1653
|
+
children: props.children || props.label
|
|
1654
|
+
}), props.value);
|
|
1726
1655
|
};
|
|
1727
1656
|
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
var
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
var _useState3 = useState(''),
|
|
1740
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
1741
|
-
filter = _useState4[0],
|
|
1742
|
-
setFilter = _useState4[1];
|
|
1743
|
-
/**
|
|
1744
|
-
* 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
|
|
1745
1668
|
*/
|
|
1746
1669
|
|
|
1747
|
-
|
|
1748
1670
|
function setMenuVisibility(isVisible) {
|
|
1749
1671
|
if (!props.disabled) {
|
|
1750
1672
|
_setMenuVisibility(isVisible);
|
|
1751
1673
|
}
|
|
1752
1674
|
}
|
|
1753
|
-
/**
|
|
1754
|
-
* Binds the children with additional properties and events
|
|
1675
|
+
/**
|
|
1676
|
+
* Binds the children with additional properties and events
|
|
1755
1677
|
*/
|
|
1756
1678
|
|
|
1757
1679
|
|
|
1758
1680
|
function getChildren() {
|
|
1759
|
-
|
|
1681
|
+
const _filter = filter.toLowerCase();
|
|
1682
|
+
|
|
1683
|
+
return React.Children.map(props.children, child => {
|
|
1760
1684
|
if (child.props.value) {
|
|
1761
|
-
|
|
1762
|
-
|
|
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,
|
|
1763
1688
|
onClick: handleSelection,
|
|
1764
1689
|
selected: selectedValues.includes(child.props.value),
|
|
1765
|
-
_testId:
|
|
1690
|
+
_testId: `${props.name}-dropdown-option--${child.props.value}`
|
|
1766
1691
|
}));
|
|
1767
1692
|
}
|
|
1768
1693
|
|
|
@@ -1773,21 +1698,19 @@ var GoADropdown = function GoADropdown(_ref) {
|
|
|
1773
1698
|
return child;
|
|
1774
1699
|
});
|
|
1775
1700
|
}
|
|
1776
|
-
/**
|
|
1777
|
-
* 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
|
|
1778
1703
|
*/
|
|
1779
1704
|
|
|
1780
1705
|
|
|
1781
1706
|
function handleSelection(value) {
|
|
1782
|
-
|
|
1707
|
+
let values;
|
|
1783
1708
|
|
|
1784
1709
|
if (props.multiSelect) {
|
|
1785
1710
|
if (selectedValues.includes(value)) {
|
|
1786
|
-
values = selectedValues.filter(
|
|
1787
|
-
return v !== value;
|
|
1788
|
-
});
|
|
1711
|
+
values = selectedValues.filter(v => v !== value);
|
|
1789
1712
|
} else {
|
|
1790
|
-
values = [
|
|
1713
|
+
values = [...selectedValues, value];
|
|
1791
1714
|
}
|
|
1792
1715
|
} else {
|
|
1793
1716
|
values = selectedValues.includes(value) ? [] : [value];
|
|
@@ -1796,8 +1719,8 @@ var GoADropdown = function GoADropdown(_ref) {
|
|
|
1796
1719
|
props.onChange(props.name, values);
|
|
1797
1720
|
toggleMenuVisibility();
|
|
1798
1721
|
}
|
|
1799
|
-
/**
|
|
1800
|
-
* Controls whether the menu is hidden or not when clicked
|
|
1722
|
+
/**
|
|
1723
|
+
* Controls whether the menu is hidden or not when clicked
|
|
1801
1724
|
*/
|
|
1802
1725
|
|
|
1803
1726
|
|
|
@@ -1813,22 +1736,16 @@ var GoADropdown = function GoADropdown(_ref) {
|
|
|
1813
1736
|
setFilter('');
|
|
1814
1737
|
}
|
|
1815
1738
|
}
|
|
1816
|
-
/**
|
|
1817
|
-
* Generates a description of the selected options
|
|
1739
|
+
/**
|
|
1740
|
+
* Generates a description of the selected options
|
|
1818
1741
|
*/
|
|
1819
1742
|
|
|
1820
1743
|
|
|
1821
1744
|
function getSelectedLabel() {
|
|
1822
|
-
|
|
1823
|
-
return child;
|
|
1824
|
-
}).filter(function (child) {
|
|
1825
|
-
return selectedValues.includes(child.props.value);
|
|
1826
|
-
}).map(function (child) {
|
|
1827
|
-
return child.props.label;
|
|
1828
|
-
});
|
|
1745
|
+
const selectedLabels = React.Children.map(props.children, child => child).filter(child => selectedValues.includes(child.props.value)).map(child => child.props.label);
|
|
1829
1746
|
|
|
1830
1747
|
if (props.multiSelect && selectedLabels.length > 1) {
|
|
1831
|
-
return
|
|
1748
|
+
return `${selectedLabels.length} items selected`;
|
|
1832
1749
|
}
|
|
1833
1750
|
|
|
1834
1751
|
if (selectedLabels.length === 1) {
|
|
@@ -1838,56 +1755,59 @@ var GoADropdown = function GoADropdown(_ref) {
|
|
|
1838
1755
|
return '';
|
|
1839
1756
|
}
|
|
1840
1757
|
|
|
1841
|
-
return
|
|
1758
|
+
return jsxs("div", Object.assign({
|
|
1842
1759
|
className: "goa-dropdown-box"
|
|
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
|
-
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
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, {
|
|
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);
|
|
1885
1805
|
};
|
|
1886
1806
|
|
|
1887
|
-
var css_248z$
|
|
1888
|
-
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);
|
|
1889
1809
|
|
|
1890
|
-
|
|
1810
|
+
const GoARadio = props => {
|
|
1891
1811
|
function getCss() {
|
|
1892
1812
|
return classnames({
|
|
1893
1813
|
'goa-radio': true,
|
|
@@ -1899,304 +1819,330 @@ var GoARadio = function GoARadio(props) {
|
|
|
1899
1819
|
props.onChange(e.target.value);
|
|
1900
1820
|
}
|
|
1901
1821
|
|
|
1902
|
-
return
|
|
1822
|
+
return jsxs("label", Object.assign({
|
|
1903
1823
|
className: getCss()
|
|
1904
|
-
},
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
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);
|
|
1916
1840
|
};
|
|
1917
1841
|
|
|
1918
|
-
|
|
1919
|
-
var
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
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"]);
|
|
1926
1851
|
|
|
1927
1852
|
function onChangeHandler(value) {
|
|
1928
1853
|
onChange(name, value);
|
|
1929
1854
|
}
|
|
1930
1855
|
|
|
1931
1856
|
function getChildren() {
|
|
1932
|
-
return Children.map(children,
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
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), {
|
|
1938
1861
|
name: _name,
|
|
1939
1862
|
checked: child.props.value === value,
|
|
1940
1863
|
onChange: onChangeHandler,
|
|
1941
|
-
key
|
|
1864
|
+
key
|
|
1942
1865
|
}));
|
|
1943
1866
|
});
|
|
1944
1867
|
}
|
|
1945
1868
|
|
|
1946
|
-
return
|
|
1947
|
-
className:
|
|
1948
|
-
},
|
|
1869
|
+
return jsx("div", Object.assign({
|
|
1870
|
+
className: `goa-radio-group--${orientation}`
|
|
1871
|
+
}, {
|
|
1872
|
+
children: getChildren()
|
|
1873
|
+
}), void 0);
|
|
1949
1874
|
};
|
|
1950
1875
|
|
|
1951
|
-
var css_248z$
|
|
1952
|
-
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);
|
|
1953
1878
|
|
|
1954
|
-
|
|
1955
|
-
|
|
1956
|
-
|
|
1957
|
-
|
|
1958
|
-
return
|
|
1879
|
+
const GoASkeletonElement = ({
|
|
1880
|
+
type: _type = 'text'
|
|
1881
|
+
}) => {
|
|
1882
|
+
const classes = `skeleton ${_type}`;
|
|
1883
|
+
return jsx("div", {
|
|
1959
1884
|
className: classes
|
|
1960
|
-
});
|
|
1885
|
+
}, void 0);
|
|
1961
1886
|
};
|
|
1962
1887
|
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1888
|
+
const GoASkeletonContent = ({
|
|
1889
|
+
rows: _rows = 1
|
|
1890
|
+
}) => {
|
|
1891
|
+
const elements = [];
|
|
1967
1892
|
|
|
1968
|
-
for (
|
|
1969
|
-
elements.push(
|
|
1893
|
+
for (let i = 0; i < _rows; i++) {
|
|
1894
|
+
elements.push(jsx(GoASkeletonElement, {
|
|
1970
1895
|
type: "text"
|
|
1971
|
-
}));
|
|
1896
|
+
}, void 0));
|
|
1972
1897
|
}
|
|
1973
1898
|
|
|
1974
|
-
return
|
|
1899
|
+
return jsx("div", Object.assign({
|
|
1975
1900
|
className: "skeleton-content"
|
|
1976
|
-
},
|
|
1977
|
-
|
|
1978
|
-
|
|
1901
|
+
}, {
|
|
1902
|
+
children: jsxs("div", {
|
|
1903
|
+
children: [jsx(GoASkeletonElement, {
|
|
1904
|
+
type: "title"
|
|
1905
|
+
}, void 0), elements]
|
|
1906
|
+
}, void 0)
|
|
1907
|
+
}), void 0);
|
|
1979
1908
|
};
|
|
1980
1909
|
|
|
1981
|
-
|
|
1982
|
-
|
|
1983
|
-
|
|
1984
|
-
|
|
1910
|
+
const GoASkeletonGridColumnContent = ({
|
|
1911
|
+
rows: _rows = 1
|
|
1912
|
+
}) => {
|
|
1913
|
+
const elements = [];
|
|
1985
1914
|
|
|
1986
|
-
for (
|
|
1987
|
-
elements.push(
|
|
1915
|
+
for (let i = 0; i < _rows; i++) {
|
|
1916
|
+
elements.push(jsx(GoASkeletonElement, {
|
|
1988
1917
|
type: "text"
|
|
1989
|
-
}));
|
|
1918
|
+
}, void 0));
|
|
1990
1919
|
}
|
|
1991
1920
|
|
|
1992
|
-
return
|
|
1921
|
+
return jsx("div", Object.assign({
|
|
1993
1922
|
className: "skeleton-content"
|
|
1994
|
-
},
|
|
1923
|
+
}, {
|
|
1924
|
+
children: jsx("div", {
|
|
1925
|
+
children: elements
|
|
1926
|
+
}, void 0)
|
|
1927
|
+
}), void 0);
|
|
1995
1928
|
};
|
|
1996
1929
|
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
1930
|
+
const GoASkeletonImageContent = ({
|
|
1931
|
+
rows: _rows = 1
|
|
1932
|
+
}) => {
|
|
1933
|
+
const elements = [];
|
|
2001
1934
|
|
|
2002
|
-
for (
|
|
2003
|
-
elements.push(
|
|
1935
|
+
for (let i = 0; i < _rows; i++) {
|
|
1936
|
+
elements.push(jsx(GoASkeletonElement, {
|
|
2004
1937
|
type: "text"
|
|
2005
|
-
}));
|
|
1938
|
+
}, void 0));
|
|
2006
1939
|
}
|
|
2007
1940
|
|
|
2008
|
-
return
|
|
1941
|
+
return jsxs("div", Object.assign({
|
|
2009
1942
|
className: "skeleton-image-content"
|
|
2010
|
-
},
|
|
2011
|
-
|
|
2012
|
-
|
|
2013
|
-
|
|
2014
|
-
|
|
2015
|
-
|
|
2016
|
-
|
|
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);
|
|
2017
1954
|
};
|
|
2018
1955
|
|
|
2019
|
-
var css_248z$
|
|
2020
|
-
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);
|
|
2021
1958
|
|
|
2022
|
-
|
|
2023
|
-
var
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
|
|
2037
|
-
other = _objectWithoutProperties(_ref, ["title", "content", "description", "cardImageUrl", "titleUrl", "children", "minWidth", "maxWidth"]);
|
|
2038
|
-
|
|
2039
|
-
var _useState = useState(null),
|
|
2040
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
2041
|
-
imgHeight = _useState2[0],
|
|
2042
|
-
setImgHeight = _useState2[1];
|
|
2043
|
-
|
|
2044
|
-
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({
|
|
2045
1974
|
className: "goa-card",
|
|
2046
|
-
"data-testid":
|
|
1975
|
+
"data-testid": 'card-container',
|
|
2047
1976
|
style: {
|
|
2048
|
-
minWidth
|
|
2049
|
-
maxWidth
|
|
1977
|
+
minWidth,
|
|
1978
|
+
maxWidth
|
|
2050
1979
|
}
|
|
2051
|
-
}, other
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
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);
|
|
2073
2018
|
};
|
|
2074
2019
|
|
|
2075
|
-
var css_248z$
|
|
2076
|
-
styleInject(css_248z$
|
|
2077
|
-
|
|
2078
|
-
var GoACardGroup = function GoACardGroup(_ref) {
|
|
2079
|
-
var _ref$title = _ref.title,
|
|
2080
|
-
title = _ref$title === void 0 ? null : _ref$title,
|
|
2081
|
-
_ref$children = _ref.children,
|
|
2082
|
-
children = _ref$children === void 0 ? null : _ref$children,
|
|
2083
|
-
_ref$layout = _ref.layout,
|
|
2084
|
-
layout = _ref$layout === void 0 ? 'basic' : _ref$layout,
|
|
2085
|
-
_ref$cardItems = _ref.cardItems,
|
|
2086
|
-
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);
|
|
2087
2022
|
|
|
2023
|
+
const GoACardGroup = ({
|
|
2024
|
+
title: _title = null,
|
|
2025
|
+
children: _children = null,
|
|
2026
|
+
layout: _layout = 'basic',
|
|
2027
|
+
cardItems: _cardItems = null
|
|
2028
|
+
}) => {
|
|
2088
2029
|
function getCards() {
|
|
2089
|
-
if (
|
|
2090
|
-
return
|
|
2030
|
+
if (_children) {
|
|
2031
|
+
return _children;
|
|
2091
2032
|
}
|
|
2092
2033
|
|
|
2093
|
-
return
|
|
2094
|
-
return /*#__PURE__*/
|
|
2034
|
+
return _cardItems.map((item, index) => {
|
|
2035
|
+
return /*#__PURE__*/createElement(GoACard, Object.assign({}, item, {
|
|
2095
2036
|
key: index
|
|
2096
2037
|
}), item.children);
|
|
2097
2038
|
});
|
|
2098
2039
|
}
|
|
2099
2040
|
|
|
2100
|
-
return
|
|
2041
|
+
return jsxs("div", Object.assign({
|
|
2101
2042
|
className: "goa-card-group"
|
|
2102
|
-
},
|
|
2103
|
-
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
|
|
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);
|
|
2107
2054
|
};
|
|
2108
2055
|
|
|
2109
|
-
var css_248z$
|
|
2110
|
-
styleInject(css_248z$
|
|
2111
|
-
|
|
2112
|
-
/* eslint-disable-next-line */
|
|
2113
|
-
|
|
2114
|
-
var GoACheckbox = function GoACheckbox(_ref) {
|
|
2115
|
-
var name = _ref.name,
|
|
2116
|
-
checked = _ref.checked,
|
|
2117
|
-
disabled = _ref.disabled,
|
|
2118
|
-
indeterminate = _ref.indeterminate,
|
|
2119
|
-
_ref$value = _ref.value,
|
|
2120
|
-
value = _ref$value === void 0 ? true : _ref$value,
|
|
2121
|
-
content = _ref.content,
|
|
2122
|
-
children = _ref.children,
|
|
2123
|
-
_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);
|
|
2124
2058
|
|
|
2125
|
-
|
|
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 = () => {
|
|
2126
2070
|
return classnames({
|
|
2127
2071
|
'goa-checkbox': true,
|
|
2128
2072
|
'goa-checkbox--disabled': disabled
|
|
2129
2073
|
});
|
|
2130
2074
|
};
|
|
2131
2075
|
|
|
2132
|
-
|
|
2076
|
+
const checkboxCss = () => {
|
|
2133
2077
|
return classnames({
|
|
2134
2078
|
'goa-checkbox-container': true,
|
|
2135
2079
|
'goa-checkbox--selected': checked
|
|
2136
2080
|
});
|
|
2137
2081
|
};
|
|
2138
2082
|
|
|
2139
|
-
return
|
|
2083
|
+
return jsxs("label", Object.assign({
|
|
2140
2084
|
className: rootCss()
|
|
2141
|
-
},
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
|
|
2164
|
-
|
|
2165
|
-
|
|
2166
|
-
|
|
2167
|
-
|
|
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);
|
|
2168
2120
|
};
|
|
2169
2121
|
|
|
2170
|
-
var css_248z$
|
|
2171
|
-
styleInject(css_248z$
|
|
2172
|
-
|
|
2173
|
-
var GoAPageLoader = function GoAPageLoader(_ref) {
|
|
2174
|
-
var _ref$type = _ref.type,
|
|
2175
|
-
type = _ref$type === void 0 ? 'infinite' : _ref$type,
|
|
2176
|
-
_ref$visible = _ref.visible,
|
|
2177
|
-
visible = _ref$visible === void 0 ? false : _ref$visible,
|
|
2178
|
-
_ref$message = _ref.message,
|
|
2179
|
-
message = _ref$message === void 0 ? 'Loading...' : _ref$message,
|
|
2180
|
-
_ref$value = _ref.value,
|
|
2181
|
-
value = _ref$value === void 0 ? 0 : _ref$value,
|
|
2182
|
-
_ref$pagelock = _ref.pagelock,
|
|
2183
|
-
pagelock = _ref$pagelock === void 0 ? true : _ref$pagelock,
|
|
2184
|
-
_ref$displayType = _ref.displayType,
|
|
2185
|
-
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);
|
|
2186
2124
|
|
|
2187
|
-
|
|
2188
|
-
|
|
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
|
|
2189
2135
|
*/
|
|
2190
|
-
|
|
2191
|
-
|
|
2192
|
-
/**
|
|
2193
|
-
* Sets the progress if in progress mode.
|
|
2194
|
-
* @param progress
|
|
2195
|
-
* @returns
|
|
2136
|
+
const progressMaxValue = 283;
|
|
2137
|
+
let strokeDashoffset = 0;
|
|
2138
|
+
/**
|
|
2139
|
+
* Sets the progress if in progress mode.
|
|
2140
|
+
* @param progress
|
|
2141
|
+
* @returns
|
|
2196
2142
|
*/
|
|
2197
2143
|
|
|
2198
2144
|
function setProgress(progress) {
|
|
2199
|
-
if (
|
|
2145
|
+
if (_type !== 'progress') {
|
|
2200
2146
|
return;
|
|
2201
2147
|
}
|
|
2202
2148
|
|
|
@@ -2209,12 +2155,12 @@ var GoAPageLoader = function GoAPageLoader(_ref) {
|
|
|
2209
2155
|
return;
|
|
2210
2156
|
}
|
|
2211
2157
|
|
|
2212
|
-
|
|
2158
|
+
const value = progressMaxValue - Math.round(progressMaxValue * progress / 100);
|
|
2213
2159
|
strokeDashoffset = value;
|
|
2214
2160
|
}
|
|
2215
2161
|
|
|
2216
|
-
if (
|
|
2217
|
-
if (
|
|
2162
|
+
if (_visible) {
|
|
2163
|
+
if (_pagelock && _displayType !== 'small') {
|
|
2218
2164
|
document.body.style.height = '100%';
|
|
2219
2165
|
document.body.style.overflow = 'hidden';
|
|
2220
2166
|
} else {
|
|
@@ -2222,36 +2168,42 @@ var GoAPageLoader = function GoAPageLoader(_ref) {
|
|
|
2222
2168
|
document.body.style.removeProperty('overflow');
|
|
2223
2169
|
}
|
|
2224
2170
|
|
|
2225
|
-
if (
|
|
2226
|
-
setProgress(
|
|
2171
|
+
if (_type === 'progress') {
|
|
2172
|
+
setProgress(_value);
|
|
2227
2173
|
}
|
|
2228
2174
|
|
|
2229
|
-
return
|
|
2230
|
-
className:
|
|
2231
|
-
onKeyDown:
|
|
2175
|
+
return jsxs("div", Object.assign({
|
|
2176
|
+
className: `progress-container--${_displayType}`,
|
|
2177
|
+
onKeyDown: event => {
|
|
2232
2178
|
event.preventDefault();
|
|
2233
2179
|
}
|
|
2234
|
-
},
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
|
|
2238
|
-
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
|
|
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);
|
|
2255
2207
|
} else {
|
|
2256
2208
|
document.body.style.removeProperty('height');
|
|
2257
2209
|
document.body.style.removeProperty('overflow');
|
|
@@ -2259,86 +2211,84 @@ var GoAPageLoader = function GoAPageLoader(_ref) {
|
|
|
2259
2211
|
}
|
|
2260
2212
|
};
|
|
2261
2213
|
GoAPageLoader.propTypes = {
|
|
2262
|
-
visible:
|
|
2263
|
-
message:
|
|
2264
|
-
value:
|
|
2265
|
-
type:
|
|
2266
|
-
pagelock:
|
|
2267
|
-
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
|
|
2268
2220
|
};
|
|
2269
2221
|
|
|
2270
|
-
var css_248z
|
|
2271
|
-
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);
|
|
2272
2224
|
|
|
2273
|
-
|
|
2274
|
-
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
*
|
|
2287
|
-
* @param
|
|
2288
|
-
* @param
|
|
2289
|
-
* @param pathRadius Radius of the SVG path.
|
|
2290
|
-
* @param elementRadius Radius of the SVG container.
|
|
2291
|
-
* @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.
|
|
2292
2241
|
*/
|
|
2293
2242
|
|
|
2294
|
-
function getArc(current, total, pathRadius, elementRadius) {
|
|
2295
|
-
|
|
2296
|
-
|
|
2297
|
-
|
|
2298
|
-
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;
|
|
2299
2247
|
|
|
2300
|
-
|
|
2248
|
+
const start = _polarToCartesian(elementRadius, pathRadius, percentage);
|
|
2301
2249
|
|
|
2302
|
-
|
|
2250
|
+
const end = _polarToCartesian(elementRadius, pathRadius, 0);
|
|
2303
2251
|
|
|
2304
|
-
|
|
2305
|
-
return
|
|
2252
|
+
const arcSweep = percentage <= 180 ? 0 : 1;
|
|
2253
|
+
return `M ${start} A ${pathRadius} ${pathRadius} 0 ${arcSweep} 0 ${end}`;
|
|
2306
2254
|
}
|
|
2307
2255
|
|
|
2308
|
-
|
|
2309
|
-
/**
|
|
2310
|
-
* Converts polar cooradinates to Cartesian.
|
|
2311
|
-
* @param elementRadius Radius of the wrapper element.
|
|
2312
|
-
* @param pathRadius Radius of the path being described.
|
|
2313
|
-
* @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.
|
|
2314
2262
|
*/
|
|
2315
2263
|
|
|
2316
2264
|
function _polarToCartesian(elementRadius, pathRadius, angleInDegrees) {
|
|
2317
|
-
|
|
2318
|
-
|
|
2319
|
-
|
|
2265
|
+
const angleInRadians = (angleInDegrees - 90) * DEGREE_IN_RADIANS;
|
|
2266
|
+
const x = elementRadius + pathRadius * Math.cos(angleInRadians);
|
|
2267
|
+
const y = elementRadius + pathRadius * Math.sin(angleInRadians);
|
|
2320
2268
|
return x + ' ' + y;
|
|
2321
2269
|
}
|
|
2322
2270
|
|
|
2323
|
-
return
|
|
2271
|
+
return _visible && jsxs("svg", Object.assign({
|
|
2324
2272
|
className: "circular-loader",
|
|
2325
2273
|
fill: "none",
|
|
2326
2274
|
viewBox: boxView,
|
|
2327
2275
|
width: radius,
|
|
2328
2276
|
height: radius,
|
|
2329
2277
|
xmlns: "http://www.w3.org/2000/svg"
|
|
2330
|
-
},
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
|
|
2340
|
-
|
|
2341
|
-
|
|
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);
|
|
2342
2292
|
};
|
|
2343
2293
|
|
|
2344
2294
|
export { GoAButton, GoACallout, GoACard, GoACardGroup, GoACheckbox, GoADropdown, GoADropdownOption, GoAElementLoader, GoAHeader, GoAHeroBanner, GoAHeroBannerContent, GoAHeroBannerLink, GoaMicrositeLogo as GoAMicrositeLogo, GoANotification, GoAPageLoader, GoARadio, GoARadioGroup, GoASkeletonContent, GoASkeletonGridColumnContent, GoASkeletonImageContent };
|