1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, '__esModule', { value: true });
|
4 |
|
5 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
6 |
|
7 | var PropTypes = require('prop-types');
|
8 | var React = require('react');
|
9 | var reactUtilities = require('@shopify/react-utilities');
|
10 | var styles = require('@shopify/react-utilities/styles');
|
11 | var tslib_1 = require('tslib');
|
12 | var decorators = require('@shopify/javascript-utilities/decorators');
|
13 | var geometry = require('@shopify/javascript-utilities/geometry');
|
14 | var throttle = _interopDefault(require('lodash-decorators/throttle'));
|
15 | var events = require('@shopify/javascript-utilities/events');
|
16 | var other = require('@shopify/javascript-utilities/other');
|
17 | var get = _interopDefault(require('lodash/get'));
|
18 | var merge = _interopDefault(require('lodash/merge'));
|
19 | var replace = _interopDefault(require('lodash/replace'));
|
20 | var hoistStatics = _interopDefault(require('hoist-non-react-statics'));
|
21 | var compose = _interopDefault(require('@shopify/react-compose'));
|
22 | var fastdom = require('@shopify/javascript-utilities/fastdom');
|
23 | var math = require('@shopify/javascript-utilities/math');
|
24 | var isEqual = _interopDefault(require('lodash/isEqual'));
|
25 | var dates = require('@shopify/javascript-utilities/dates');
|
26 | var capitalize = _interopDefault(require('lodash/capitalize'));
|
27 | require('core-js/fn/array/some');
|
28 | require('core-js/fn/string/ends-with');
|
29 | var reactTransitionGroup = require('react-transition-group');
|
30 | var ReactDOM = require('react-dom');
|
31 | var focus = require('@shopify/javascript-utilities/focus');
|
32 | var target = require('@shopify/react-utilities/target');
|
33 | var dom = require('@shopify/javascript-utilities/dom');
|
34 | var memoize$1 = _interopDefault(require('lodash/memoize'));
|
35 | var pick = _interopDefault(require('lodash/pick'));
|
36 |
|
37 | if (typeof window !== 'undefined') {
|
38 | window.Polaris = window.Polaris || {};
|
39 | window.Polaris.VERSION = '0.1.6';
|
40 | }
|
41 |
|
42 |
|
43 |
|
44 |
|
45 | (function (Keys) {
|
46 | Keys[Keys["BACKSPACE"] = 8] = "BACKSPACE";
|
47 | Keys[Keys["TAB"] = 9] = "TAB";
|
48 | Keys[Keys["ENTER"] = 13] = "ENTER";
|
49 | Keys[Keys["SHIFT"] = 16] = "SHIFT";
|
50 | Keys[Keys["CTRL"] = 17] = "CTRL";
|
51 | Keys[Keys["ALT"] = 18] = "ALT";
|
52 | Keys[Keys["PAUSE"] = 19] = "PAUSE";
|
53 | Keys[Keys["CAPS_LOCK"] = 20] = "CAPS_LOCK";
|
54 | Keys[Keys["ESCAPE"] = 27] = "ESCAPE";
|
55 | Keys[Keys["SPACE"] = 32] = "SPACE";
|
56 | Keys[Keys["PAGE_UP"] = 33] = "PAGE_UP";
|
57 | Keys[Keys["PAGE_DOWN"] = 34] = "PAGE_DOWN";
|
58 | Keys[Keys["END"] = 35] = "END";
|
59 | Keys[Keys["HOME"] = 36] = "HOME";
|
60 | Keys[Keys["LEFT_ARROW"] = 37] = "LEFT_ARROW";
|
61 | Keys[Keys["UP_ARROW"] = 38] = "UP_ARROW";
|
62 | Keys[Keys["RIGHT_ARROW"] = 39] = "RIGHT_ARROW";
|
63 | Keys[Keys["DOWN_ARROW"] = 40] = "DOWN_ARROW";
|
64 | Keys[Keys["INSERT"] = 45] = "INSERT";
|
65 | Keys[Keys["DELETE"] = 46] = "DELETE";
|
66 | Keys[Keys["KEY_0"] = 48] = "KEY_0";
|
67 | Keys[Keys["KEY_1"] = 49] = "KEY_1";
|
68 | Keys[Keys["KEY_2"] = 50] = "KEY_2";
|
69 | Keys[Keys["KEY_3"] = 51] = "KEY_3";
|
70 | Keys[Keys["KEY_4"] = 52] = "KEY_4";
|
71 | Keys[Keys["KEY_5"] = 53] = "KEY_5";
|
72 | Keys[Keys["KEY_6"] = 54] = "KEY_6";
|
73 | Keys[Keys["KEY_7"] = 55] = "KEY_7";
|
74 | Keys[Keys["KEY_8"] = 56] = "KEY_8";
|
75 | Keys[Keys["KEY_9"] = 57] = "KEY_9";
|
76 | Keys[Keys["KEY_A"] = 65] = "KEY_A";
|
77 | Keys[Keys["KEY_B"] = 66] = "KEY_B";
|
78 | Keys[Keys["KEY_C"] = 67] = "KEY_C";
|
79 | Keys[Keys["KEY_D"] = 68] = "KEY_D";
|
80 | Keys[Keys["KEY_E"] = 69] = "KEY_E";
|
81 | Keys[Keys["KEY_F"] = 70] = "KEY_F";
|
82 | Keys[Keys["KEY_G"] = 71] = "KEY_G";
|
83 | Keys[Keys["KEY_H"] = 72] = "KEY_H";
|
84 | Keys[Keys["KEY_I"] = 73] = "KEY_I";
|
85 | Keys[Keys["KEY_J"] = 74] = "KEY_J";
|
86 | Keys[Keys["KEY_K"] = 75] = "KEY_K";
|
87 | Keys[Keys["KEY_L"] = 76] = "KEY_L";
|
88 | Keys[Keys["KEY_M"] = 77] = "KEY_M";
|
89 | Keys[Keys["KEY_N"] = 78] = "KEY_N";
|
90 | Keys[Keys["KEY_O"] = 79] = "KEY_O";
|
91 | Keys[Keys["KEY_P"] = 80] = "KEY_P";
|
92 | Keys[Keys["KEY_Q"] = 81] = "KEY_Q";
|
93 | Keys[Keys["KEY_R"] = 82] = "KEY_R";
|
94 | Keys[Keys["KEY_S"] = 83] = "KEY_S";
|
95 | Keys[Keys["KEY_T"] = 84] = "KEY_T";
|
96 | Keys[Keys["KEY_U"] = 85] = "KEY_U";
|
97 | Keys[Keys["KEY_V"] = 86] = "KEY_V";
|
98 | Keys[Keys["KEY_W"] = 87] = "KEY_W";
|
99 | Keys[Keys["KEY_X"] = 88] = "KEY_X";
|
100 | Keys[Keys["KEY_Y"] = 89] = "KEY_Y";
|
101 | Keys[Keys["KEY_Z"] = 90] = "KEY_Z";
|
102 | Keys[Keys["LEFT_META"] = 91] = "LEFT_META";
|
103 | Keys[Keys["RIGHT_META"] = 92] = "RIGHT_META";
|
104 | Keys[Keys["SELECT"] = 93] = "SELECT";
|
105 | Keys[Keys["NUMPAD_0"] = 96] = "NUMPAD_0";
|
106 | Keys[Keys["NUMPAD_1"] = 97] = "NUMPAD_1";
|
107 | Keys[Keys["NUMPAD_2"] = 98] = "NUMPAD_2";
|
108 | Keys[Keys["NUMPAD_3"] = 99] = "NUMPAD_3";
|
109 | Keys[Keys["NUMPAD_4"] = 100] = "NUMPAD_4";
|
110 | Keys[Keys["NUMPAD_5"] = 101] = "NUMPAD_5";
|
111 | Keys[Keys["NUMPAD_6"] = 102] = "NUMPAD_6";
|
112 | Keys[Keys["NUMPAD_7"] = 103] = "NUMPAD_7";
|
113 | Keys[Keys["NUMPAD_8"] = 104] = "NUMPAD_8";
|
114 | Keys[Keys["NUMPAD_9"] = 105] = "NUMPAD_9";
|
115 | Keys[Keys["MULTIPLY"] = 106] = "MULTIPLY";
|
116 | Keys[Keys["ADD"] = 107] = "ADD";
|
117 | Keys[Keys["SUBTRACT"] = 109] = "SUBTRACT";
|
118 | Keys[Keys["DECIMAL"] = 110] = "DECIMAL";
|
119 | Keys[Keys["DIVIDE"] = 111] = "DIVIDE";
|
120 | Keys[Keys["F1"] = 112] = "F1";
|
121 | Keys[Keys["F2"] = 113] = "F2";
|
122 | Keys[Keys["F3"] = 114] = "F3";
|
123 | Keys[Keys["F4"] = 115] = "F4";
|
124 | Keys[Keys["F5"] = 116] = "F5";
|
125 | Keys[Keys["F6"] = 117] = "F6";
|
126 | Keys[Keys["F7"] = 118] = "F7";
|
127 | Keys[Keys["F8"] = 119] = "F8";
|
128 | Keys[Keys["F9"] = 120] = "F9";
|
129 | Keys[Keys["F10"] = 121] = "F10";
|
130 | Keys[Keys["F11"] = 122] = "F11";
|
131 | Keys[Keys["F12"] = 123] = "F12";
|
132 | Keys[Keys["NUM_LOCK"] = 144] = "NUM_LOCK";
|
133 | Keys[Keys["SCROLL_LOCK"] = 145] = "SCROLL_LOCK";
|
134 | Keys[Keys["SEMICOLON"] = 186] = "SEMICOLON";
|
135 | Keys[Keys["EQUALS"] = 187] = "EQUALS";
|
136 | Keys[Keys["COMMA"] = 188] = "COMMA";
|
137 | Keys[Keys["DASH"] = 189] = "DASH";
|
138 | Keys[Keys["PERIOD"] = 190] = "PERIOD";
|
139 | Keys[Keys["FORWARD_SLASH"] = 191] = "FORWARD_SLASH";
|
140 | Keys[Keys["GRAVE_ACCENT"] = 192] = "GRAVE_ACCENT";
|
141 | Keys[Keys["OPEN_BRACKET"] = 219] = "OPEN_BRACKET";
|
142 | Keys[Keys["BACK_SLASH"] = 220] = "BACK_SLASH";
|
143 | Keys[Keys["CLOSE_BRACKET"] = 221] = "CLOSE_BRACKET";
|
144 | Keys[Keys["SINGLE_QUOTE"] = 222] = "SINGLE_QUOTE";
|
145 | })(exports.Keys || (exports.Keys = {}));
|
146 |
|
147 | const contentContextTypes = {
|
148 | withinContentContainer: PropTypes.bool
|
149 | };
|
150 |
|
151 | var styles$1 = {
|
152 | "SettingAction": "p_bu",
|
153 | "Setting": "p_u4",
|
154 | "Action": "p_i6",
|
155 | };
|
156 |
|
157 | function SettingAction$1({ action, children }) {
|
158 | return React.createElement(
|
159 | 'div',
|
160 | { className: styles$1.SettingAction },
|
161 | React.createElement(
|
162 | 'div',
|
163 | { className: styles$1.Setting },
|
164 | children
|
165 | ),
|
166 | React.createElement(
|
167 | 'div',
|
168 | { className: styles$1.Action },
|
169 | action
|
170 | )
|
171 | );
|
172 | }
|
173 |
|
174 | var styles$2 = {
|
175 | "TermsOfService": "p_xv",
|
176 | "Content": "p_gt",
|
177 | };
|
178 |
|
179 |
|
180 | function AccountConnection$1({ connected = false, action, avatarUrl, accountName = '', title, details, termsOfService }) {
|
181 | const initials = accountName ? accountName.split(/\s+/).map(name => name[0]).join('') : undefined;
|
182 | const avatarMarkup = connected ? React.createElement(Avatar$2, { accessibilityLabel: '', name: accountName, initials: initials, source: avatarUrl }) : null;
|
183 | let titleMarkup = null;
|
184 | if (title) {
|
185 | titleMarkup = React.createElement(
|
186 | 'div',
|
187 | null,
|
188 | title
|
189 | );
|
190 | } else if (accountName) {
|
191 | titleMarkup = React.createElement(
|
192 | 'div',
|
193 | null,
|
194 | accountName
|
195 | );
|
196 | }
|
197 | const detailsMarkup = details ? React.createElement(
|
198 | 'div',
|
199 | null,
|
200 | React.createElement(
|
201 | TextStyle$1,
|
202 | { variation: 'subdued' },
|
203 | details
|
204 | )
|
205 | ) : null;
|
206 | const termsOfServiceMarkup = termsOfService ? React.createElement(
|
207 | 'div',
|
208 | { className: styles$2.TermsOfService },
|
209 | termsOfService
|
210 | ) : null;
|
211 | const actionElement = action ? buttonFrom(action, { primary: !connected }) : null;
|
212 | return React.createElement(
|
213 | Card$1,
|
214 | { sectioned: true },
|
215 | React.createElement(
|
216 | SettingAction$1,
|
217 | { action: actionElement },
|
218 | React.createElement(
|
219 | Stack$1,
|
220 | null,
|
221 | avatarMarkup,
|
222 | React.createElement(
|
223 | Stack$1.Item,
|
224 | { fill: true },
|
225 | React.createElement(
|
226 | 'div',
|
227 | { className: styles$2.Content },
|
228 | titleMarkup,
|
229 | detailsMarkup
|
230 | )
|
231 | )
|
232 | )
|
233 | ),
|
234 | termsOfServiceMarkup
|
235 | );
|
236 | }
|
237 |
|
238 | var index_common = {
|
239 | colorPurpleLighter: 'rgb(246, 240, 253)',
|
240 | colorPurpleLight: 'rgb(227, 208, 255)',
|
241 | colorPurpleBase: 'rgb(156, 106, 222)',
|
242 | colorPurpleDark: 'rgb(80, 36, 143)',
|
243 | colorPurpleDarker: 'rgb(35, 0, 81)',
|
244 | colorPurpleText: 'rgb(80, 73, 90)',
|
245 | colorIndigoLighter: 'rgb(244, 245, 250)',
|
246 | colorIndigoLight: 'rgb(179, 188, 245)',
|
247 | colorIndigoBase: 'rgb(92, 106, 196)',
|
248 | colorIndigoDark: 'rgb(32, 46, 120)',
|
249 | colorIndigoDarker: 'rgb(0, 6, 57)',
|
250 | colorIndigoText: 'rgb(62, 65, 85)',
|
251 | colorBlueLighter: 'rgb(235, 245, 250)',
|
252 | colorBlueLight: 'rgb(180, 225, 250)',
|
253 | colorBlueBase: 'rgb(0, 122, 206)',
|
254 | colorBlueDark: 'rgb(8, 78, 138)',
|
255 | colorBlueDarker: 'rgb(0, 20, 41)',
|
256 | colorBlueText: 'rgb(62, 78, 87)',
|
257 | colorTealLighter: 'rgb(224, 245, 245)',
|
258 | colorTealLight: 'rgb(183, 236, 236)',
|
259 | colorTealBase: 'rgb(71, 193, 191)',
|
260 | colorTealDark: 'rgb(0, 132, 142)',
|
261 | colorTealDarker: 'rgb(0, 49, 53)',
|
262 | colorTealText: 'rgb(64, 83, 82)',
|
263 | colorGreenLighter: 'rgb(227, 241, 223)',
|
264 | colorGreenLight: 'rgb(187, 229, 179)',
|
265 | colorGreenBase: 'rgb(80, 184, 60)',
|
266 | colorGreenDark: 'rgb(16, 128, 67)',
|
267 | colorGreenDarker: 'rgb(23, 54, 48)',
|
268 | colorGreenText: 'rgb(65, 79, 62)',
|
269 | colorYellowLighter: 'rgb(252, 241, 205)',
|
270 | colorYellowLight: 'rgb(255, 234, 138)',
|
271 | colorYellowBase: 'rgb(238, 194, 0)',
|
272 | colorYellowDark: 'rgb(156, 111, 25)',
|
273 | colorYellowDarker: 'rgb(87, 59, 0)',
|
274 | colorYellowText: 'rgb(89, 81, 48)',
|
275 | colorOrangeLighter: 'rgb(252, 235, 219)',
|
276 | colorOrangeLight: 'rgb(255, 197, 139)',
|
277 | colorOrangeBase: 'rgb(244, 147, 66)',
|
278 | colorOrangeDark: 'rgb(192, 87, 23)',
|
279 | colorOrangeDarker: 'rgb(74, 21, 4)',
|
280 | colorOrangeText: 'rgb(89, 68, 48)',
|
281 | colorRedLighter: 'rgb(251, 234, 229)',
|
282 | colorRedLight: 'rgb(254, 173, 154)',
|
283 | colorRedBase: 'rgb(222, 54, 24)',
|
284 | colorRedDark: 'rgb(191, 7, 17)',
|
285 | colorRedDarker: 'rgb(51, 1, 1)',
|
286 | colorRedText: 'rgb(88, 60, 53)',
|
287 | colorWhiteBase: 'rgb(255, 255, 255)',
|
288 | colorSkyLighter: 'rgb(249, 250, 251)',
|
289 | colorSkyLight: 'rgb(244, 246, 248)',
|
290 | colorSkyBase: 'rgb(223, 227, 232)',
|
291 | colorSkyDark: 'rgb(196, 205, 213)',
|
292 | colorInkLightest: 'rgb(145, 158, 171)',
|
293 | colorInkLighter: 'rgb(99, 115, 129)',
|
294 | colorInkLight: 'rgb(69, 79, 91)',
|
295 | colorInkBase: 'rgb(33, 43, 54)',
|
296 | colorBlackBase: 'rgb(0, 0, 0)',
|
297 | spacingNone: 0,
|
298 | spacingExtraTight: '4px',
|
299 | spacingTight: '8px',
|
300 | spacingBase: '16px',
|
301 | spacingLoose: '20px',
|
302 | spacingExtraLoose: '32px',
|
303 | fontStackBase:
|
304 | "-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif",
|
305 | fontStackMonospace: "Monaco, Consolas, 'Lucida Console', monospace",
|
306 | };
|
307 |
|
308 | var polarisTokens = index_common;
|
309 |
|
310 | const Breakpoints = {
|
311 | navBarCollapsed: '769px',
|
312 | stackedContent: '1043px'
|
313 | };
|
314 | const noWindowMatches = {
|
315 | media: '',
|
316 | addListener: other.noop,
|
317 | removeListener: other.noop,
|
318 | matches: false
|
319 | };
|
320 |
|
321 | function stackedContent() {
|
322 | return typeof window === 'undefined' ? noWindowMatches : window.matchMedia(`(max-width: ${Breakpoints.stackedContent})`);
|
323 | }
|
324 |
|
325 | class StickyManager {
|
326 | constructor(container) {
|
327 | this.stickyItems = [];
|
328 | this.stuckItems = [];
|
329 | if (container) {
|
330 | this.setContainer(container);
|
331 | }
|
332 | }
|
333 | registerStickyItem(stickyItem) {
|
334 | this.stickyItems.push(stickyItem);
|
335 | }
|
336 | unregisterStickyItem(nodeToRemove) {
|
337 | const nodeIndex = this.stickyItems.findIndex(({ stickyNode }) => nodeToRemove === stickyNode);
|
338 | this.stickyItems.splice(nodeIndex, 1);
|
339 | }
|
340 | setContainer(el) {
|
341 | this.container = el;
|
342 | events.addEventListener(this.container, 'scroll', this.handleScroll);
|
343 | events.addEventListener(window, 'resize', this.handleResize);
|
344 | this.manageStickyItems();
|
345 | }
|
346 | removeScrollListener() {
|
347 | if (this.container) {
|
348 | events.removeEventListener(this.container, 'scroll', this.handleScroll);
|
349 | events.removeEventListener(window, 'resize', this.handleResize);
|
350 | }
|
351 | }
|
352 | handleResize() {
|
353 | this.manageStickyItems();
|
354 | }
|
355 | handleScroll() {
|
356 | this.manageStickyItems();
|
357 | }
|
358 | manageStickyItems() {
|
359 | if (this.stickyItems.length <= 0) {
|
360 | return;
|
361 | }
|
362 | const scrollTop = scrollTopFor(this.container);
|
363 | const containerTop = geometry.getRectForNode(this.container).top;
|
364 | this.stickyItems.forEach(stickyItem => {
|
365 | const handlePositioning = stickyItem.handlePositioning;
|
366 |
|
367 | var _evaluateStickyItem = this.evaluateStickyItem(stickyItem, scrollTop, containerTop);
|
368 |
|
369 | const sticky = _evaluateStickyItem.sticky,
|
370 | top = _evaluateStickyItem.top,
|
371 | left = _evaluateStickyItem.left,
|
372 | width = _evaluateStickyItem.width;
|
373 |
|
374 | this.updateStuckItems(stickyItem, sticky);
|
375 | handlePositioning(sticky, top, left, width);
|
376 | });
|
377 | }
|
378 | evaluateStickyItem(stickyItem, scrollTop, containerTop) {
|
379 | const stickyNode = stickyItem.stickyNode,
|
380 | placeHolderNode = stickyItem.placeHolderNode,
|
381 | boundingElement = stickyItem.boundingElement,
|
382 | offset = stickyItem.offset,
|
383 | disableWhenStacked = stickyItem.disableWhenStacked;
|
384 |
|
385 | if (disableWhenStacked && stackedContent().matches) {
|
386 | return {
|
387 | sticky: false,
|
388 | top: 0,
|
389 | left: 0,
|
390 | width: 'auto'
|
391 | };
|
392 | }
|
393 | const stickyOffset = offset ? this.getOffset(stickyNode) + parseInt(polarisTokens.spacingLoose, 10) : this.getOffset(stickyNode);
|
394 | const scrollPosition = scrollTop + stickyOffset;
|
395 | const placeHolderNodeCurrentTop = placeHolderNode.getBoundingClientRect().top - containerTop + scrollTop;
|
396 | const top = containerTop + stickyOffset;
|
397 | const width = placeHolderNode.getBoundingClientRect().width;
|
398 | const left = placeHolderNode.getBoundingClientRect().left;
|
399 | let sticky;
|
400 | if (boundingElement == null) {
|
401 | sticky = scrollPosition >= placeHolderNodeCurrentTop;
|
402 | } else {
|
403 | const stickyItemHeight = stickyNode.getBoundingClientRect().height;
|
404 | const stickyItemBottomPosition = boundingElement.getBoundingClientRect().bottom - stickyItemHeight + scrollTop - containerTop;
|
405 | sticky = scrollPosition >= placeHolderNodeCurrentTop && scrollPosition < stickyItemBottomPosition;
|
406 | }
|
407 | return {
|
408 | sticky,
|
409 | top,
|
410 | left,
|
411 | width
|
412 | };
|
413 | }
|
414 | updateStuckItems(item, sticky) {
|
415 | const stickyNode = item.stickyNode;
|
416 |
|
417 | if (sticky && !this.isNodeStuck(stickyNode)) {
|
418 | this.addStuckItem(item);
|
419 | } else if (!sticky && this.isNodeStuck(stickyNode)) {
|
420 | this.removeStuckItem(item);
|
421 | }
|
422 | }
|
423 | addStuckItem(stickyItem) {
|
424 | this.stuckItems.push(stickyItem);
|
425 | }
|
426 | removeStuckItem(stickyItem) {
|
427 | const nodeToRemove = stickyItem.stickyNode;
|
428 |
|
429 | const nodeIndex = this.stuckItems.findIndex(({ stickyNode }) => nodeToRemove === stickyNode);
|
430 | this.stuckItems.splice(nodeIndex, 1);
|
431 | }
|
432 | getOffset(node) {
|
433 | if (this.stuckItems.length === 0) {
|
434 | return 0;
|
435 | }
|
436 | let offset = 0;
|
437 | let count = 0;
|
438 | const stuckNodesLength = this.stuckItems.length;
|
439 | const nodeRect = geometry.getRectForNode(node);
|
440 | while (count < stuckNodesLength) {
|
441 | const stuckNode = this.stuckItems[count].stickyNode;
|
442 | if (stuckNode !== node) {
|
443 | const stuckNodeRect = geometry.getRectForNode(stuckNode);
|
444 | if (!horizontallyOverlaps(nodeRect, stuckNodeRect)) {
|
445 | offset += geometry.getRectForNode(stuckNode).height;
|
446 | }
|
447 | } else {
|
448 | break;
|
449 | }
|
450 | count++;
|
451 | }
|
452 | return offset;
|
453 | }
|
454 | isNodeStuck(node) {
|
455 | const nodeFound = this.stuckItems.findIndex(({ stickyNode }) => node === stickyNode);
|
456 | return nodeFound >= 0;
|
457 | }
|
458 | }
|
459 | tslib_1.__decorate([throttle(50), decorators.autobind], StickyManager.prototype, "handleResize", null);
|
460 | tslib_1.__decorate([throttle(50), decorators.autobind], StickyManager.prototype, "handleScroll", null);
|
461 | function isDocument(node) {
|
462 | return node === document;
|
463 | }
|
464 | function scrollTopFor(container) {
|
465 | return isDocument(container) ? document.body.scrollTop || document.documentElement.scrollTop : container.scrollTop;
|
466 | }
|
467 | function horizontallyOverlaps(rect1, rect2) {
|
468 | const rect1Left = rect1.left;
|
469 | const rect1Right = rect1.left + rect1.width;
|
470 | const rect2Left = rect2.left;
|
471 | const rect2Right = rect2.left + rect2.width;
|
472 | return rect2Right < rect1Left || rect1Right < rect2Left;
|
473 | }
|
474 |
|
475 | const polarisAppProviderContextTypes = {
|
476 | polaris: PropTypes.any,
|
477 | easdk: PropTypes.any
|
478 | };
|
479 |
|
480 | var Polaris = {"Avatar":{"label":"Avatar","labelWithInitials":"Avatar with initials {initials}"},"Badge":{"PROGRESS_LABELS":{"incomplete":"Incomplete","partiallyComplete":"Partially complete","complete":"Complete"},"STATUS_LABELS":{"info":"Info","success":"Success","warning":"Warning","attention":"Attention","new":"New"}},"Button":{"spinnerAccessibilityLabel":"Loading"},"Common":{"checkbox":"checkbox","undo":"Undo"},"DataTable":{"sortAccessibilityLabel":"sort {direction} by","navAccessibilityLabel":"Scroll table {direction} one column","totalsRowHeading":"Totals"},"DatePicker":{"previousMonth":"Show previous month, {previousMonthName} {showPreviousYear}","nextMonth":"Show next month, {nextMonth} {nextYear}","today":"Today "},"DropZone":{"overlayTextFile":"Drop file to upload","overlayTextImage":"Drop image to upload","errorOverlayTextFile":"File type is not valid","errorOverlayTextImage":"Image type is not valid","FileUpload":{"actionTitleFile":"Add file","actionTitleImage":"Add image","actionHintFile":"or drop files to upload","actionHintImage":"or drop images to upload"}},"EmptySearchResult":{"altText":"Empty search results"},"Icon":{"backdropWarning":"The {color} icon doesn’t accept backdrops. The icon colors that have backdrops are: {colorsWithBackDrops}"},"Modal":{"iFrameTitle":"body markup","modalWarning":"These required properties are missing from Modal: {missingProps}","actionWarning":"Modals inside of an embedded app will ignore: {actionWarnings}"},"Pagination":{"previous":"Previous","next":"Next","pagination":"Pagination"},"ProgressBar":{"negativeWarningMessage":"Values passed to the progress prop shouldn’t be negative. Resetting {progress} to 0.","exceedWarningMessage":"Values passed to the progress prop shouldn’t exceed 100. Setting {progress} to 100."},"ResourceList":{"sortingLabel":"Sort by","defaultItemSingular":"item","defaultItemPlural":"items","showing":"Showing {itemsCount} {resource}","selected":"{selectedItemsCount} selected","allItemsSelected":"All {itemsLength}+ {resourceNamePlural} in your store are selected.","selectAllItems":"Select all {itemsLength}+ {resourceNamePlural} in your store","emptySearchResultTitle":"No {resourceNamePlural} found","emptySearchResultDescription":"Try changing the filters or search term","selectButtonText":"Select","a11yCheckboxDeselectAllSingle":"Deselect {resourceNameSingular}","a11yCheckboxSelectAllSingle":"Select {resourceNameSingular}","a11yCheckboxDeselectAllMultiple":"Deselect all {itemsLength} {resourceNamePlural}","a11yCheckboxSelectAllMultiple":"Select all {itemsLength} {resourceNamePlural}","ariaLiveSingular":"{itemsLength} item","ariaLivePlural":"{itemsLength} items","Item":{"selectItem":"Select: {accessibilityLabel}","deselectItem":"Deselect: {accessibilityLabel}","actionsDropdown":"Actions dropdown"},"BulkActions":{"actionsActivatorLabel":"Actions","moreActionsActivatorLabel":"More actions","warningMessage":"To provide a better user experience. There should only be a maximum of {maxPromotedActions} promoted actions."},"FilterCreator":{"filterButtonLabel":"Filter","selectFilterKeyPlaceholder":"Select a filter…","addFilterButtonLabel":"Add filter","showAllWhere":"Show all {resourceNamePlural} where:"},"FilterControl":{"textFieldLabel":"Search {resourceNamePlural}"},"FilterValueSelector":{"selectFilterValuePlaceholder":"Select a filter…"},"DateSelector":{"dateFilterLabel":"Select a value","dateValueLabel":"Date","dateValueError":"Match YYYY-MM-DD format","dateValuePlaceholder":"YYYY-MM-DD","SelectOptions":{"PastWeek":"in the last week","PastMonth":"in the last month","PastQuarter":"in the last 3 months","PastYear":"in the last year","ComingWeek":"next week","ComingMonth":"next month","ComingQuarter":"in the next 3 months","ComingYear":"in the next year","OnOrBefore":"on or before","OnOrAfter":"on or after"},"FilterLabelForValue":{"past_week":"in the last week","past_month":"in the last month","past_quarter":"in the last 3 months","past_year":"in the last year","coming_week":"next week","coming_month":"next month","coming_quarter":"in the next 3 months","coming_year":"in the next year","on_or_before":"before {date}","on_or_after":"after {date}"}}},"Spinner":{"warningMessage":"The color {color} is not meant to be used on {size} spinners. The colors available on large spinners are: {colors}"},"Tag":{"ariaLabel":"Remove {children}"}};
|
481 | var en = {
|
482 | Polaris: Polaris
|
483 | };
|
484 |
|
485 | class Intl {
|
486 | constructor(translation) {
|
487 | this.translation = translation;
|
488 | this.setTranslation(translation);
|
489 | }
|
490 | setTranslation(translation) {
|
491 | const i18n = Array.isArray(translation) ? merge({}, ...translation) : translation;
|
492 | this.translation = i18n ? merge({}, en, i18n) : en;
|
493 | }
|
494 | translate(id, replacements) {
|
495 | return translate(id, this.translation, replacements);
|
496 | }
|
497 | translationKeyExists(path) {
|
498 | return Boolean(get(this.translation, path));
|
499 | }
|
500 | }
|
501 | tslib_1.__decorate([decorators.autobind], Intl.prototype, "translate", null);
|
502 |
|
503 | class Link {
|
504 | constructor(linkComponent) {
|
505 | this.linkComponent = linkComponent;
|
506 | }
|
507 | setLinkComponent(link) {
|
508 | this.linkComponent = link;
|
509 | }
|
510 | getLinkComponent() {
|
511 | return this.linkComponent;
|
512 | }
|
513 | }
|
514 |
|
515 | function transformBreadcrumb(breadcrumb, shopOrigin) {
|
516 | if (breadcrumb.content == null) {
|
517 | throw new Error(`No content provided for breadcrumb (${JSON.stringify(breadcrumb)})`);
|
518 | }
|
519 | let target$$1;
|
520 | if (breadcrumb.target) {
|
521 | target$$1 = breadcrumb.target;
|
522 | } else if (breadcrumb.url) {
|
523 | target$$1 = getTargetFromURL(breadcrumb.url, shopOrigin);
|
524 | } else {
|
525 | target$$1 = undefined;
|
526 | }
|
527 | return {
|
528 | label: breadcrumb.content,
|
529 | href: breadcrumb.url,
|
530 | target: target$$1,
|
531 | message: target$$1 === 'app' ? generateCallback(breadcrumb.url) : breadcrumb.onAction
|
532 | };
|
533 | }
|
534 | function transformAction(shopOrigin) {
|
535 | return action => {
|
536 | let style;
|
537 | if (action.disabled) {
|
538 | style = 'disabled';
|
539 | } else if (action.destructive) {
|
540 | style = 'danger';
|
541 | }
|
542 | let target$$1;
|
543 | if (action.target) {
|
544 | target$$1 = action.target;
|
545 | } else if (action.url) {
|
546 | target$$1 = action.external ? 'new' : getTargetFromURL(action.url, shopOrigin);
|
547 | } else {
|
548 | target$$1 = undefined;
|
549 | }
|
550 | return {
|
551 | label: action.content,
|
552 | href: action.url,
|
553 | target: target$$1,
|
554 | message: target$$1 === 'app' ? generateCallback(action.url) : action.onAction,
|
555 | style
|
556 | };
|
557 | };
|
558 | }
|
559 | function transformActionGroup(shopOrigin) {
|
560 | return actionGroup => {
|
561 | return {
|
562 | type: 'dropdown',
|
563 | label: actionGroup.title,
|
564 | links: actionGroup.actions.map(transformAction(shopOrigin))
|
565 | };
|
566 | };
|
567 | }
|
568 |
|
569 | function getTargetFromURL(url, shopOrigin) {
|
570 | if (isRootRelative(url) || isOriginHost(url, shopOrigin)) {
|
571 | return 'shopify';
|
572 | } else if (isSameHost(url) || isFragment(url) || isRelative(url) || isSchemeRelative(url)) {
|
573 | return 'app';
|
574 | } else {
|
575 | return 'new';
|
576 | }
|
577 | }
|
578 | function isRootRelative(url) {
|
579 | return url.charAt(0) === '/' && url.charAt(1) !== '/';
|
580 | }
|
581 | function isOriginHost(url, shopOrigin) {
|
582 | return shopOrigin && url.indexOf(shopOrigin) !== -1;
|
583 | }
|
584 | function isSameHost(url) {
|
585 | const hostIndex = url.indexOf(window.location.hostname);
|
586 | const firstDotIndex = url.indexOf('.');
|
587 | return hostIndex >= 0 && hostIndex < firstDotIndex;
|
588 | }
|
589 | function isFragment(url) {
|
590 | return url.charAt(0) === '#';
|
591 | }
|
592 | function isRelative(url) {
|
593 | return url.charAt(0) !== '/' && url.toLowerCase().indexOf('http') !== 0;
|
594 | }
|
595 | function isSchemeRelative(url) {
|
596 | return url.indexOf('//') === 0;
|
597 | }
|
598 | function generateCallback(url) {
|
599 | if (url == null) {
|
600 | return;
|
601 | }
|
602 | return () => {
|
603 | window.location.assign(url);
|
604 | };
|
605 | }
|
606 | function transformPagination(pagination) {
|
607 | if (pagination == null) {
|
608 | return undefined;
|
609 | }
|
610 | const hasNext = pagination.hasNext,
|
611 | hasPrevious = pagination.hasPrevious,
|
612 | nextURL = pagination.nextURL,
|
613 | previousURL = pagination.previousURL,
|
614 | onNext = pagination.onNext,
|
615 | onPrevious = pagination.onPrevious;
|
616 |
|
617 | const finalPagination = {};
|
618 | if (hasNext) {
|
619 | if (onNext) {
|
620 | finalPagination.next = { message: onNext };
|
621 | } else if (nextURL) {
|
622 | finalPagination.next = { href: nextURL };
|
623 | }
|
624 | }
|
625 | if (hasPrevious) {
|
626 | if (onPrevious) {
|
627 | finalPagination.previous = { message: onPrevious };
|
628 | } else if (previousURL) {
|
629 | finalPagination.previous = { href: previousURL };
|
630 | }
|
631 | }
|
632 | return finalPagination;
|
633 | }
|
634 |
|
635 | class Bar {
|
636 | constructor(messenger) {
|
637 | this.messenger = messenger;
|
638 | }
|
639 | update(config) {
|
640 | const title = config.title,
|
641 | icon = config.icon,
|
642 | breadcrumbs = config.breadcrumbs,
|
643 | secondaryActions = config.secondaryActions,
|
644 | actionGroups = config.actionGroups,
|
645 | primaryAction = config.primaryAction,
|
646 | pagination = config.pagination;
|
647 |
|
648 | this.messenger.send('Shopify.API.Bar.initialize', {
|
649 | buttons: {
|
650 | primary: primaryAction ? transformAction(this.messenger.targetOrigin)(primaryAction) : undefined,
|
651 | secondary: [...(secondaryActions || []).map(transformAction(this.messenger.targetOrigin)), ...(actionGroups || []).map(transformActionGroup(this.messenger.targetOrigin))]
|
652 | },
|
653 | title,
|
654 | icon,
|
655 | breadcrumb: getLastLevelBreadcrumb(breadcrumbs, this.messenger.targetOrigin),
|
656 | pagination: transformPagination(pagination)
|
657 | });
|
658 | if (actionGroups) {
|
659 | document.addEventListener('click', this.closeDropdown);
|
660 | } else {
|
661 | document.removeEventListener('click', this.closeDropdown);
|
662 | }
|
663 | }
|
664 | closeDropdown() {
|
665 | this.messenger.send('Shopify.API.Bar.closeDropdown');
|
666 | }
|
667 | }
|
668 | tslib_1.__decorate([decorators.autobind], Bar.prototype, "closeDropdown", null);
|
669 | function getLastLevelBreadcrumb(breadcrumbs, shopOrigin) {
|
670 | return breadcrumbs && breadcrumbs.length > 0 ? transformBreadcrumb(breadcrumbs[breadcrumbs.length - 1], shopOrigin) : undefined;
|
671 | }
|
672 |
|
673 | class Modal {
|
674 | constructor(messenger) {
|
675 | this.messenger = messenger;
|
676 | }
|
677 | open(config) {
|
678 | const title = config.title,
|
679 | primaryAction = config.primaryAction,
|
680 | secondaryActions = config.secondaryActions,
|
681 | src = config.src,
|
682 | width = config.width,
|
683 | height = config.height,
|
684 | onClose = config.onClose;
|
685 |
|
686 | if (onClose != null) {
|
687 | this.storeCloseCallback(onClose);
|
688 | }
|
689 | this.messenger.send('Shopify.API.Modal.open', {
|
690 | src,
|
691 | title,
|
692 | width,
|
693 | height,
|
694 | buttons: {
|
695 | primary: primaryAction ? transformAction(this.messenger.targetOrigin)(primaryAction) : undefined,
|
696 | secondary: secondaryActions ? secondaryActions.map(transformAction(this.messenger.targetOrigin)) : undefined
|
697 | }
|
698 | });
|
699 | }
|
700 | alert(config) {
|
701 | const children = config.children,
|
702 | title = config.title,
|
703 | destructive = config.destructive,
|
704 | confirmContent = config.confirmContent,
|
705 | cancelContent = config.cancelContent,
|
706 | onClose = config.onClose,
|
707 | onConfirm = config.onConfirm;
|
708 |
|
709 | this.storeCloseCallback(result => {
|
710 | if (result) {
|
711 | if (onConfirm) {
|
712 | onConfirm();
|
713 | }
|
714 | } else if (onClose) {
|
715 | onClose();
|
716 | }
|
717 | });
|
718 | if (onClose && cancelContent) {
|
719 | this.messenger.send('Shopify.API.Modal.confirm', {
|
720 | message: {
|
721 | title,
|
722 | message: children,
|
723 | okButton: confirmContent,
|
724 | cancelButton: cancelContent,
|
725 | style: destructive ? 'danger' : undefined
|
726 | }
|
727 | });
|
728 | } else {
|
729 | this.messenger.send('Shopify.API.Modal.alert', {
|
730 | message: {
|
731 | title,
|
732 | message: children,
|
733 | okButton: confirmContent,
|
734 | style: destructive ? 'danger' : undefined
|
735 | }
|
736 | });
|
737 | }
|
738 | }
|
739 | close(result, data) {
|
740 | if (this.closeCallback == null) {
|
741 | return;
|
742 | }
|
743 | this.messenger.send('Shopify.API.Modal.close', {
|
744 | result,
|
745 | data
|
746 | });
|
747 | }
|
748 | storeCloseCallback(callback) {
|
749 | this.closeCallback = callback;
|
750 | }
|
751 | callCloseCallback(result, data) {
|
752 | const closeCallback = this.closeCallback;
|
753 |
|
754 | if (typeof closeCallback === 'function') {
|
755 | delete this.closeCallback;
|
756 | closeCallback(result, data);
|
757 | }
|
758 | }
|
759 | }
|
760 |
|
761 | class ResourcePicker {
|
762 | constructor(messenger, modal) {
|
763 | this.messenger = messenger;
|
764 | this.modal = modal;
|
765 | }
|
766 | close() {
|
767 | this.modal.close();
|
768 | }
|
769 | open({ title, products, collections, allowMultiple = false, showHidden = true, onCancel, onSelection }) {
|
770 | this.modal.storeCloseCallback((success, data) => {
|
771 | if (!success) {
|
772 | if (onCancel != null) {
|
773 | onCancel();
|
774 | }
|
775 | return;
|
776 | }
|
777 | if (onSelection == null) {
|
778 | return;
|
779 | }
|
780 | onSelection(data);
|
781 | });
|
782 | const resources = [];
|
783 | if (products) {
|
784 | resources.push('products');
|
785 | }
|
786 | if (collections) {
|
787 | resources.push('collections');
|
788 | }
|
789 | if (collections) {
|
790 | this.messenger.send('Shopify.API.Modal.collectionPicker', {
|
791 | title,
|
792 | selectMultiple: allowMultiple,
|
793 |
|
794 | show_hidden: showHidden,
|
795 |
|
796 | selectable_resources: resources
|
797 | });
|
798 | } else {
|
799 | this.messenger.send('Shopify.API.Modal.productPicker', {
|
800 | title,
|
801 | selectMultiple: allowMultiple,
|
802 |
|
803 | show_hidden: showHidden,
|
804 |
|
805 | selectable_resources: resources
|
806 | });
|
807 | }
|
808 | }
|
809 | }
|
810 |
|
811 |
|
812 | const CoreWeakMap = require('core-js/library/es6/weak-map');
|
813 | class Messenger {
|
814 | constructor(target$$1, handlers, options) {
|
815 | this.target = target$$1;
|
816 | this.handlers = handlers;
|
817 | this.targetOrigin = '*';
|
818 | this.queue = [];
|
819 | this.callbacks = {};
|
820 | this.callbacksToID = new CoreWeakMap();
|
821 | this.callbackIndex = 0;
|
822 | if (typeof window === 'undefined') {
|
823 | return;
|
824 | }
|
825 | this.name = options.name;
|
826 | this.targetOrigin = options.targetOrigin;
|
827 | this.debug = options.debug || false;
|
828 | if (!this.targetOrigin.match(/^http(s)?:\/\//)) {
|
829 | this.warn('warning: targetOrigin should include the protocol');
|
830 | }
|
831 | window.addEventListener('message', this.handleMessage.bind(this), false);
|
832 | }
|
833 | setTarget(target$$1) {
|
834 | this.target = target$$1;
|
835 | this.tryToDequeue();
|
836 | }
|
837 | send(message, data) {
|
838 | const normalizedPayload = this.normalizePayload(data);
|
839 | const newMessage = {
|
840 | message,
|
841 | data: normalizedPayload
|
842 | };
|
843 | const messageString = JSON.stringify(newMessage);
|
844 | if (this.target != null) {
|
845 | this.log(`Posting message: ${messageString} to ${this.targetOrigin} }`);
|
846 | this.target.postMessage(messageString, this.targetOrigin);
|
847 | } else {
|
848 | this.log(`Queueing message: ${messageString}`);
|
849 | this.queue.push(newMessage);
|
850 | }
|
851 | return normalizedPayload;
|
852 | }
|
853 | tryToDequeue() {
|
854 | const queue = this.queue,
|
855 | target$$1 = this.target;
|
856 |
|
857 | if (target$$1 == null || queue.length === 0) {
|
858 | return;
|
859 | }
|
860 | this.queue.forEach(message => {
|
861 | target$$1.postMessage(message, '*');
|
862 | });
|
863 | this.queue.length = 0;
|
864 | }
|
865 | log(message) {
|
866 | if (!this.debug) {
|
867 | return;
|
868 | }
|
869 |
|
870 | console.log(`[${this.name} Messenger]: ${message}`);
|
871 | }
|
872 | warn(message) {
|
873 | if (!this.debug) {
|
874 | return;
|
875 | }
|
876 |
|
877 | console.warn(`[${this.name} Messenger]: ${message}`);
|
878 | }
|
879 | storeCallback(callback) {
|
880 |
|
881 |
|
882 | if (this.callbacksToID.has(callback)) {
|
883 | return this.callbacksToID.get(callback);
|
884 | }
|
885 | const id = `EASDKCallback${this.callbackIndex++}`;
|
886 | this.callbacks[id] = callback;
|
887 | this.callbacksToID.set(callback, id);
|
888 | return id;
|
889 | }
|
890 | normalizePayload(payload) {
|
891 | if (payload == null) {
|
892 | return payload;
|
893 | }
|
894 | if (typeof payload === 'function') {
|
895 | return this.storeCallback(payload);
|
896 | } else if (payload instanceof Array) {
|
897 | return payload.map(newPayload => {
|
898 | return this.normalizePayload(newPayload);
|
899 | });
|
900 | } else if (typeof payload === 'object') {
|
901 | return Object.keys(payload).reduce((newPayload, key) => {
|
902 | newPayload[key] = this.normalizePayload(payload[key]);
|
903 | return newPayload;
|
904 | }, {});
|
905 | } else {
|
906 | return payload;
|
907 | }
|
908 | }
|
909 | handleMessage(event) {
|
910 | if (!this.isFromTargetOrigin(event)) {
|
911 | this.log(`client received ${event.data} from unknown origin ${event.origin}. Expected ${this.targetOrigin}`);
|
912 | return;
|
913 | }
|
914 | this.log(`Received message: ${event.data} from ${event.origin}`);
|
915 | let receivedMessage;
|
916 | try {
|
917 | receivedMessage = JSON.parse(event.data);
|
918 | } catch (error) {
|
919 |
|
920 | console.error(`Received received invalid JSON and cannot process the message. ${error} : ${event.data} : ${JSON.stringify(event.data)}`);
|
921 | return;
|
922 | }
|
923 | if (receivedMessage.message === Messenger.Messages.SET_WINDOW_LOCATION) {
|
924 | this.windowLocation = receivedMessage.data;
|
925 | } else {
|
926 | this.invokeCallback(receivedMessage);
|
927 | this.invokeHandler(receivedMessage);
|
928 | }
|
929 | }
|
930 | isFromTargetOrigin({ origin }) {
|
931 | return origin != null && origin === this.targetOrigin;
|
932 | }
|
933 | invokeCallback(receivedMessage) {
|
934 | const callback = this.callbacks[receivedMessage.message];
|
935 | if (typeof callback === 'function') {
|
936 |
|
937 | callback();
|
938 | }
|
939 | }
|
940 | invokeHandler(receivedMessage) {
|
941 | const handler = this.handlers[receivedMessage.message];
|
942 | if (typeof handler === 'function') {
|
943 | handler(receivedMessage.data);
|
944 | }
|
945 | }
|
946 | set windowLocation(location) {
|
947 | window.location = location;
|
948 | }
|
949 | }
|
950 | Messenger.Messages = Object.freeze({
|
951 | SET_WINDOW_LOCATION: 'Shopify.API.setWindowLocation'
|
952 | });
|
953 |
|
954 | class EASDK {
|
955 | constructor({ apiKey, shopOrigin, debug, forceRedirect }, metadata) {
|
956 | checkFrameRedirect(apiKey, shopOrigin, forceRedirect);
|
957 | this.messenger = new Messenger(window.parent, {
|
958 | 'Shopify.API.initialize': data => {
|
959 | if (data && data.User && data.User.current) {
|
960 | this.currentUser = data.User.current;
|
961 | }
|
962 | },
|
963 | 'Shopify.API.Modal.close': ({ result, data }) => {
|
964 | this.Modal.callCloseCallback(result, data);
|
965 | }
|
966 | }, {
|
967 | name: 'iframe',
|
968 | targetOrigin: shopOrigin,
|
969 | debug
|
970 | });
|
971 | this.Bar = new Bar(this.messenger);
|
972 | this.Modal = new Modal(this.messenger);
|
973 | this.ResourcePicker = new ResourcePicker(this.messenger, this.Modal);
|
974 | this.messenger.send('Shopify.API.initialize', {
|
975 | apiKey,
|
976 | shopOrigin,
|
977 | metadata,
|
978 | debug,
|
979 | forceRedirect
|
980 | });
|
981 | }
|
982 | startLoading() {
|
983 | this.messenger.send('Shopify.API.Bar.loading.on');
|
984 | }
|
985 | stopLoading() {
|
986 | this.messenger.send('Shopify.API.Bar.loading.off');
|
987 | }
|
988 | showFlashNotice(message, options = {}) {
|
989 | var _options$error = options.error;
|
990 | const error = _options$error === undefined ? false : _options$error;
|
991 |
|
992 | const type = error ? 'Shopify.API.flash.error' : 'Shopify.API.flash.notice';
|
993 | this.messenger.send(type, { message });
|
994 | }
|
995 | pushState(location) {
|
996 | this.messenger.send('Shopify.API.pushState', { location });
|
997 | }
|
998 | redirect(location) {
|
999 | this.messenger.send('Shopify.API.redirect', { location });
|
1000 | }
|
1001 | }
|
1002 | tslib_1.__decorate([decorators.autobind], EASDK.prototype, "startLoading", null);
|
1003 | tslib_1.__decorate([decorators.autobind], EASDK.prototype, "stopLoading", null);
|
1004 | tslib_1.__decorate([decorators.autobind], EASDK.prototype, "showFlashNotice", null);
|
1005 | tslib_1.__decorate([decorators.autobind], EASDK.prototype, "pushState", null);
|
1006 | tslib_1.__decorate([decorators.autobind], EASDK.prototype, "redirect", null);
|
1007 | function checkFrameRedirect(apiKey, shopOrigin = 'https://myshopify.com', forceRedirect) {
|
1008 | if (window !== window.parent) {
|
1009 | return;
|
1010 | }
|
1011 | let redirectUrl = `${shopOrigin}/admin/apps/`;
|
1012 | if (apiKey) {
|
1013 | redirectUrl = `${redirectUrl}${apiKey}${window.location.pathname}${window.location.search}`;
|
1014 | }
|
1015 | if (forceRedirect) {
|
1016 | window.location.assign(redirectUrl);
|
1017 | } else {
|
1018 |
|
1019 | console.warn(`Embedded app was not loaded in an iframe and redirecting is disabled. Set forceRedirect to true and this page will redirect to: ${redirectUrl}`);
|
1020 | }
|
1021 | }
|
1022 |
|
1023 | var name = "@combine-labs/combine-polaris";
|
1024 | var description = "Combine Lab's product component library. Forked from Shopify's Polaris.";
|
1025 | var version = "0.1.6";
|
1026 | var license = "MIT";
|
1027 | var author = "Steve Kaschinske <steve.kaschinske@gmail.com>";
|
1028 | var homepage = "https://github.com/Combine-Labs/combine-polaris";
|
1029 | var repository = "https://github.com/Combine-Labs/combine-polaris";
|
1030 | var publishConfig = {"access":"public"};
|
1031 | var keywords = ["combine labs","react","components","component library"];
|
1032 | var main = "index.js";
|
1033 | var module$1 = "index.es.js";
|
1034 | var types = "types/index.d.ts";
|
1035 | var scripts = {"lint":"npm-run-all lint:js lint:css","lint:css":"stylelint './**/*.scss' --max-warnings 0","lint:js":"eslint './**/*.{js,jsx,ts,tsx}' --max-warnings 0 --format codeframe","format":"npm-run-all format:js format:css format:prettier","format:css":"yarn run lint:css --fix","format:js":"yarn run lint:js --fix","format:prettier":"prettier '**/*.{json,md,yml}' --write","ts":"tsc --noEmit","test":"jest --config ./config/jest/config.json","test:coverage":"yarn test --coverage --no-cache","test:ci":"yarn test --runInBand --coverage","test:watch":"yarn test --watch","check":"npm-run-all lint ts test","check:ci":"npm-run-all lint ts test:ci","clean":"rimraf build build-esnext esnext styles types docs 'build-intermediate' 'index.*' 'embedded.js' './src/styles/polaris-tokens' './tophat/.cache' './tophat/assets' 'styles.{css,scss}'","optimize":"node ./scripts/optimize.js","prebuild":"npm-run-all clean optimize copy-polaris-tokens","build":"babel-node ./scripts/build.js","build-shrink-ray":"yarn run copy-polaris-tokens && node ./scripts/build-shrink-ray.js","copy-polaris-tokens":"rimraf ./src/styles/polaris-tokens && shx cp -r ./node_modules/@shopify/polaris-tokens/dist ./src/styles/polaris-tokens","dev":"yarn run copy-polaris-tokens && webpack-dev-server --config ./playground/webpack.config.js --content-base ./playground/ --hot --inline","tophat":"yarn run copy-polaris-tokens && node ./tophat/index.js --watch","test:percy":"node ./tophat/snapshots.js","test:a11y":"node ./scripts/pa11y.js","start":"node ./tophat/index.js","heroku-postbuild":"yarn run copy-polaris-tokens && webpack --config ./tophat/webpack.config.js --output-path ./tophat/assets"};
|
1036 | var stylelint = {"extends":["stylelint-config-shopify/prettier"],"rules":{"selector-class-pattern":"^[a-zA-Z][a-zA-Z0-9-]+$","selector-pseudo-class-no-unknown":[true,{"ignorePseudoClasses":["global"]}]}};
|
1037 | var devDependencies = {"@babel/generator":"^7.0.0-beta.51","@babel/parser":"^7.0.0-beta.51","@babel/standalone":"^7.0.0-beta.51","@percy/puppeteer":"^0.3.2","@shopify/js-uploader":"github:shopify/js-uploader","@shopify/polaris-tokens":"^1.2.0","@shopify/react-serialize":"^1.0.6","@types/enzyme":"^3.1.13","@types/jest":"^21.1.2","@types/lodash":"^4.14.108","@types/lodash-decorators":"^4.0.0","@types/node":"^8.10.17","@types/react-helmet":"^5.0.6","@types/react-hot-loader":"^3.0.6","@types/react-router-dom":"^4.2.7","archiver":"^2.1.0","awesome-typescript-loader":"^3.1.3","aws-sdk":"^2.58.0","babel":"^6.23.0","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-jest":"^21.2.0","babel-loader":"^7.1.2","babel-plugin-transform-jsx-html":"^1.0.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-plugin-transform-react-jsx":"^6.24.1","babel-polyfill":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babel-preset-shopify":"^16.2.0","babel-preset-stage-0":"^6.24.1","babel-register":"^6.26.0","chalk":"^2.4.1","change-case":"^3.0.1","codecov":"^3.0.4","copyfiles":"^1.2.0","crypto":"^1.0.1","css-loader":"^0.28.3","cssnano":"^3.10.0","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","eslint":"^5.5.0","eslint-plugin-shopify":"^25.0.1","express":"^4.16.3","file-loader":"^1.1.11","fs-extra":"^4.0.2","generic-names":"^1.0.2","glob":"^7.1.2","gray-matter":"^4.0.1","identity-obj-proxy":"^3.0.0","image-webpack-loader":"^3.3.1","in-publish":"^2.0.0","isomorphic-fetch":"^2.2.1","jest":"^21.2.1","node-sass":"^4.5.3","npm-run-all":"^4.0.2","object-hash":"^1.3.0","pa11y":"^5.0.4","postcss":"^6.0.1","postcss-loader":"^2.0.5","postcss-modules-extract-imports":"^1.1.0","postcss-modules-local-by-default":"^1.2.0","postcss-modules-parser":"^1.1.1","postcss-modules-scope":"^1.1.0","postcss-modules-values":"^1.3.0","postcss-shopify":"^1.0.0","prettier":"^1.14.2","puppeteer":"^1.5.0","react":"^16.4.0","react-dom":"^16.4.0","react-helmet":"^5.2.0","react-router-dom":"^4.3.1","react-test-renderer":"^16.3.1","rimraf":"^2.6.1","rollup":"^0.50.0","rollup-plugin-babel":"^3.0.2","rollup-plugin-commonjs":"^8.0.2","rollup-plugin-json":"^2.1.1","rollup-plugin-node-resolve":"^3.0.0","rollup-pluginutils":"^2.0.1","sass-loader":"^7.0.3","sass-resources-loader":"^1.3.3","semver":"^5.4.1","shelljs":"^0.7.7","shx":"^0.2.2","style-loader":"^0.19.0","stylelint":"^9.5.0","stylelint-config-shopify":"^7.0.2","svgo":"^0.7.2","tslint":"^5.8.0","typescript":"^2.9.1","url-loader":"^1.0.1","webpack":"^3.7.1","webpack-bundle-analyzer":"^2.11.1","webpack-dev-server":"^2.9.3","yargs":"^12.0.1"};
|
1038 | var peerDependencies = {"react":"^16.3.1","react-dom":"^16.3.1"};
|
1039 | var files = ["esnext","styles","types","docs","index.js","index.es.js","styles.css","styles.scss","embedded.js","embedded.d.ts"];
|
1040 | var dependencies = {"@shopify/images":"^1.1.0","@shopify/javascript-utilities":"^2.2.0","@shopify/react-compose":"^0.1.6","@shopify/react-html":"^3.0.3","@shopify/react-utilities":"^2.0.3","@types/prop-types":"^15.5.2","@types/react":"16.4.1","@types/react-dom":"^16.0.6","@types/react-transition-group":"^2.0.7","babel-runtime":"^6.23.0","core-js":"^2.5.1","hoist-non-react-statics":"^2.5.0","lodash":"^4.17.4","lodash-decorators":"^4.3.5","prop-types":"^15.6.1","react-transition-group":"^2.3.0","tslib":"^1.8.0"};
|
1041 | var packageJSON = {
|
1042 | name: name,
|
1043 | description: description,
|
1044 | version: version,
|
1045 | license: license,
|
1046 | author: author,
|
1047 | homepage: homepage,
|
1048 | repository: repository,
|
1049 | publishConfig: publishConfig,
|
1050 | keywords: keywords,
|
1051 | main: main,
|
1052 | module: module$1,
|
1053 | types: types,
|
1054 | scripts: scripts,
|
1055 | stylelint: stylelint,
|
1056 | devDependencies: devDependencies,
|
1057 | peerDependencies: peerDependencies,
|
1058 | files: files,
|
1059 | dependencies: dependencies,
|
1060 | "private": false,
|
1061 | "jsnext:main": "index.es.js"
|
1062 | };
|
1063 |
|
1064 | const METADATA = {
|
1065 | interface: {
|
1066 | name: packageJSON.name,
|
1067 | version: packageJSON.version
|
1068 | }
|
1069 | };
|
1070 | const REPLACE_REGEX = /{([^}]*)}/g;
|
1071 | function translate(id, translations, replacements) {
|
1072 | const text = get(translations, id);
|
1073 | if (!text) {
|
1074 | return '';
|
1075 | }
|
1076 | if (replacements) {
|
1077 | return replace(text, REPLACE_REGEX, match => {
|
1078 | const replacement = match.substring(1, match.length - 1);
|
1079 | if (!replacements.hasOwnProperty(replacement)) {
|
1080 | throw new Error(`No replacement found for key '${replacement}'. The following replacements were passed: ${Object.keys(replacements).map(key => `'${key}'`).join(', ')}`);
|
1081 | }
|
1082 | return replacements[replacement];
|
1083 | });
|
1084 | }
|
1085 | return text;
|
1086 | }
|
1087 | function withAppProvider() {
|
1088 | return function addProvider(WrappedComponent) {
|
1089 |
|
1090 | class WithProvider extends React.Component {
|
1091 | render() {
|
1092 | var _context = this.context;
|
1093 | const polaris = _context.polaris,
|
1094 | easdk = _context.easdk;
|
1095 |
|
1096 | const polarisContext = Object.assign({}, polaris, { easdk });
|
1097 | if (!polaris) {
|
1098 | throw new Error(`The <AppProvider> component is required as of v2.0 of Polaris React. See
|
1099 | https://polaris.shopify.com/components/structure/app-provider for implementation
|
1100 | instructions.`);
|
1101 | }
|
1102 | return React.createElement(WrappedComponent, Object.assign({}, this.props, { polaris: polarisContext }));
|
1103 | }
|
1104 | }
|
1105 | WithProvider.contextTypes = WrappedComponent.contextTypes ? merge(WrappedComponent.contextTypes, polarisAppProviderContextTypes) : polarisAppProviderContextTypes;
|
1106 | const FinalComponent = hoistStatics(WithProvider, WrappedComponent);
|
1107 | return FinalComponent;
|
1108 | };
|
1109 | }
|
1110 | function withSticky() {
|
1111 | return function addStickyManager(WrappedComponent) {
|
1112 | class WithStickyManager extends React.Component {
|
1113 | constructor(props, context) {
|
1114 | super(props);
|
1115 | this.stickyManager = new StickyManager();
|
1116 | const polaris = context.polaris,
|
1117 | easdk = context.easdk;
|
1118 |
|
1119 | this.polarisContext = Object.assign({}, polaris, { stickyManager: this.stickyManager, easdk });
|
1120 | }
|
1121 | getChildContext() {
|
1122 | const _a = this.polarisContext,
|
1123 | easdk = _a.easdk,
|
1124 | rest = tslib_1.__rest(_a, ["easdk"]);
|
1125 | return {
|
1126 | polaris: rest,
|
1127 | easdk
|
1128 | };
|
1129 | }
|
1130 | render() {
|
1131 | return React.createElement(WrappedComponent, Object.assign({}, this.props, { polaris: this.polarisContext }));
|
1132 | }
|
1133 | }
|
1134 | WithStickyManager.childContextTypes = polarisAppProviderContextTypes;
|
1135 | WithStickyManager.contextTypes = WrappedComponent.contextTypes ? merge(WrappedComponent.contextTypes, polarisAppProviderContextTypes) : polarisAppProviderContextTypes;
|
1136 | const FinalComponent = hoistStatics(WithStickyManager, WrappedComponent);
|
1137 | return FinalComponent;
|
1138 | };
|
1139 | }
|
1140 | function createPolarisContext({ i18n, linkComponent, apiKey, shopOrigin, forceRedirect, debug, stickyManager } = {}) {
|
1141 | const intl = new Intl(i18n);
|
1142 | const link = new Link(linkComponent);
|
1143 | const easdk = apiKey && shopOrigin ? new EASDK({
|
1144 | apiKey,
|
1145 | shopOrigin,
|
1146 | forceRedirect,
|
1147 | debug
|
1148 | }, METADATA) : undefined;
|
1149 | return {
|
1150 | polaris: {
|
1151 | intl,
|
1152 | link,
|
1153 | stickyManager: stickyManager || new StickyManager()
|
1154 | },
|
1155 | easdk
|
1156 | };
|
1157 | }
|
1158 |
|
1159 | class AppProvider$1 extends React.Component {
|
1160 | constructor(props) {
|
1161 | super(props);
|
1162 | this.stickyManager = new StickyManager();
|
1163 | this.polarisContext = createPolarisContext(Object.assign({}, props, { stickyManager: this.stickyManager }));
|
1164 | }
|
1165 | componentDidMount() {
|
1166 | if (document != null) {
|
1167 | this.stickyManager.setContainer(document);
|
1168 | }
|
1169 | }
|
1170 |
|
1171 | componentWillReceiveProps({ i18n, linkComponent, apiKey, shopOrigin, forceRedirect, debug }) {
|
1172 | if (i18n !== this.props.i18n || linkComponent !== this.props.linkComponent || apiKey !== this.props.apiKey || shopOrigin !== this.props.shopOrigin || forceRedirect !== this.props.forceRedirect || debug !== this.props.debug) {
|
1173 | const stickyManager = this.stickyManager;
|
1174 | this.polarisContext = createPolarisContext({
|
1175 | i18n,
|
1176 | linkComponent,
|
1177 | apiKey,
|
1178 | shopOrigin,
|
1179 | forceRedirect,
|
1180 | debug,
|
1181 | stickyManager
|
1182 | });
|
1183 | }
|
1184 | }
|
1185 | getChildContext() {
|
1186 | return this.polarisContext;
|
1187 | }
|
1188 | render() {
|
1189 | return React.Children.only(this.props.children);
|
1190 | }
|
1191 | }
|
1192 | AppProvider$1.childContextTypes = polarisAppProviderContextTypes;
|
1193 |
|
1194 | var add = {"viewBox":"0 0 20 20","body":"<path d=\"M17 9h-6V3a1 1 0 1 0-2 0v6H3a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2\" fill-rule=\"evenodd\"/>"};
|
1195 |
|
1196 | var alert = {"viewBox":"0 0 20 20","body":"<path d=\"M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z\" fill-rule=\"evenodd\"/>"};
|
1197 |
|
1198 | var arrowDown = {"viewBox":"0 0 20 20","body":"<path d=\"M10.707 17.707l5-5a.999.999 0 1 0-1.414-1.414L11 14.586V3a1 1 0 1 0-2 0v11.586l-3.293-3.293a.999.999 0 1 0-1.414 1.414l5 5a.999.999 0 0 0 1.414 0\" fill-rule=\"evenodd\"/>"};
|
1199 |
|
1200 | var arrowLeft = {"viewBox":"0 0 20 20","body":"<path d=\"M17 9H5.414l3.293-3.293a.999.999 0 1 0-1.414-1.414l-5 5a.999.999 0 0 0 0 1.414l5 5a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L5.414 11H17a1 1 0 1 0 0-2\" fill-rule=\"evenodd\"/>"};
|
1201 |
|
1202 | var arrowRight = {"viewBox":"0 0 20 20","body":"<path d=\"M17.707 9.293l-5-5a.999.999 0 1 0-1.414 1.414L14.586 9H3a1 1 0 1 0 0 2h11.586l-3.293 3.293a.999.999 0 1 0 1.414 1.414l5-5a.999.999 0 0 0 0-1.414\" fill-rule=\"evenodd\"/>"};
|
1203 |
|
1204 | var arrowUp = {"viewBox":"0 0 20 20","body":"<path d=\"M11 17V5.414l3.293 3.293a.999.999 0 1 0 1.414-1.414l-5-5a.999.999 0 0 0-1.414 0l-5 5a.997.997 0 0 0 0 1.414.999.999 0 0 0 1.414 0L9 5.414V17a1 1 0 1 0 2 0\" fill-rule=\"evenodd\"/>"};
|
1205 |
|
1206 | var arrowUpDown = {"viewBox":"0 0 20 20","body":"<path d=\"M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z\" fill-rule=\"evenodd\"/>"};
|
1207 |
|
1208 | var calendar = {"viewBox":"0 0 20 20","body":"<path d=\"M4 8h12V6H4v2zm9 4h2v-2h-2v2zm-4 0h2v-2H9v2zm0 4h2v-2H9v2zm-4-4h2v-2H5v2zm0 4h2v-2H5v2zM17 4h-2V3a1 1 0 1 0-2 0v1H7V3a1 1 0 1 0-2 0v1H3a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z\" fill-rule=\"evenodd\"/>"};
|
1209 |
|
1210 | var cancel = {"viewBox":"0 0 20 20","body":"<path d=\"M11.414 10l6.293-6.293a.999.999 0 1 0-1.414-1.414L10 8.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L8.586 10l-6.293 6.293a.999.999 0 1 0 1.414 1.414L10 11.414l6.293 6.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z\" fill-rule=\"evenodd\"/>"};
|
1211 |
|
1212 | var cancelSmall = {"viewBox":"0 0 20 20","body":"<path d=\"M11.414 10l4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z\" fill-rule=\"evenodd\"/>"};
|
1213 |
|
1214 | var caretDown = {"viewBox":"0 0 20 20","body":"<path d=\"M5 8l5 5 5-5z\" fill-rule=\"evenodd\"/>"};
|
1215 |
|
1216 | var caretUp = {"viewBox":"0 0 20 20","body":"<path d=\"M15 12l-5-5-5 5z\" />"};
|
1217 |
|
1218 | var checkmark = {"viewBox":"0 0 20 20","body":"<path d=\"M8.315 13.859l-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.437.437 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0\"/>"};
|
1219 |
|
1220 | var chevronDown = {"viewBox":"0 0 20 20","body":"<path d=\"M10 14a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 1 1 1.414-1.414L10 11.586l4.293-4.293a.999.999 0 1 1 1.414 1.414l-5 5A.997.997 0 0 1 10 14\" fill-rule=\"evenodd\"/>"};
|
1221 |
|
1222 | var chevronLeft = {"viewBox":"0 0 20 20","body":"<path d=\"M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16\" fill-rule=\"evenodd\"/>"};
|
1223 |
|
1224 | var chevronRight = {"viewBox":"0 0 20 20","body":"<path d=\"M8 16a.999.999 0 0 1-.707-1.707L11.586 10 7.293 5.707a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5A.997.997 0 0 1 8 16\" fill-rule=\"evenodd\"/>"};
|
1225 |
|
1226 | var chevronUp = {"viewBox":"0 0 20 20","body":"<path d=\"M15 13a.997.997 0 0 1-.707-.293L10 8.414l-4.293 4.293a.999.999 0 1 1-1.414-1.414l5-5a.999.999 0 0 1 1.414 0l5 5A.999.999 0 0 1 15 13\" fill-rule=\"evenodd\"/>"};
|
1227 |
|
1228 | var circleCancel = {"viewBox":"0 0 20 20","body":"<path d=\"M14.242 12.829l-1.414 1.414L10 11.413l-2.828 2.83-1.414-1.414 2.828-2.83-2.828-2.827 1.414-1.414L10 8.586l2.828-2.828 1.414 1.414L11.414 10l2.828 2.829zM10 1.999A8 8 0 1 0 10 18a8 8 0 0 0 0-16z\" fill-rule=\"evenodd\"/>"};
|
1229 |
|
1230 | var circleChevronDown = {"viewBox":"0 0 20 20","body":"<path d=\"M10 13.414L5.293 8.707l1.414-1.414L10 10.586l3.293-3.293 1.414 1.414L10 13.414zM10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16z\" fill-rule=\"evenodd\"/>"};
|
1231 |
|
1232 | var circleChevronLeft = {"viewBox":"0 0 20 20","body":"<path d=\"M11.293 5.293l1.414 1.414L9.414 10l3.293 3.293-1.414 1.414L6.586 10l4.707-4.707zM10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16z\" fill-rule=\"evenodd\"/>"};
|
1233 |
|
1234 | var circleChevronRight = {"viewBox":"0 0 20 20","body":"<path d=\"M8.707 14.707l-1.414-1.414L10.586 10 7.293 6.707l1.414-1.414L13.414 10l-4.707 4.707zM10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16z\" fill-rule=\"evenodd\"/>"};
|
1235 |
|
1236 | var circleChevronUp = {"viewBox":"0 0 20 20","body":"<path d=\"M14.707 11.293l-1.414 1.414L10 9.414l-3.293 3.293-1.414-1.414L10 6.586l4.707 4.707zM18 10a8 8 0 1 0-16 0 8 8 0 0 0 16 0z\" fill-rule=\"evenodd\"/>"};
|
1237 |
|
1238 | var circleInformation = {"viewBox":"0 0 20 20","body":"<path d=\"M19 10c0 4.971-4.029 9-9 9s-9-4.029-9-9 4.029-9 9-9 9 4.029 9 9z\" fill=\"currentColor\"/><path d=\"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-5v-3a1 1 0 0 0-1-1H9a1 1 0 1 0 0 2v3a1 1 0 0 0 1 1h1a1 1 0 1 0 0-2zm-1-5.9a1.1 1.1 0 1 0 0-2.2 1.1 1.1 0 0 0 0 2.2z\" />"};
|
1239 |
|
1240 | var circlePlus = {"viewBox":"0 0 20 20","body":"<path d=\"M15 11h-4v4H9v-4H5V9h4V5h2v4h4v2zm-5-9a8 8 0 1 0 0 16 8 8 0 0 0 0-16z\" fill-rule=\"evenodd\"/>"};
|
1241 |
|
1242 | var conversation = {"viewBox":"0 0 20 20","body":"<path d=\"M13 11h2V9h-2v2zm-4 0h2V9H9v2zm-4 0h2V9H5v2zm5-9c-4.411 0-8 3.589-8 8 0 1.504.425 2.908 1.15 4.111l-1.069 2.495a1 1 0 0 0 1.314 1.313l2.494-1.069A7.939 7.939 0 0 0 10 18c4.411 0 8-3.589 8-8s-3.589-8-8-8z\" fill-rule=\"evenodd\"/>"};
|
1243 |
|
1244 | var deleteIcon = {"viewBox":"0 0 20 20","body":"<path d=\"M16 6H4a1 1 0 1 0 0 2h1v9a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8h1a1 1 0 1 0 0-2zM9 4a1 1 0 1 1 0-2h2a1 1 0 1 1 0 2H9zm2 12h2V8h-2v8zm-4 0h2V8H7v8z\" fill-rule=\"evenodd\"/>"};
|
1245 |
|
1246 | var disable = {"viewBox":"0 0 20 20","body":"<path d=\"M10 16a5.961 5.961 0 0 1-3.471-1.115l8.356-8.356A5.961 5.961 0 0 1 16 10c0 3.309-2.691 6-6 6m0-12c1.294 0 2.49.416 3.471 1.115l-8.356 8.356A5.961 5.961 0 0 1 4 10c0-3.309 2.691-6 6-6m0-2c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8\" fill-rule=\"evenodd\"/>"};
|
1247 |
|
1248 | var dispute = {"viewBox":"0 0 20 20","body":"<path d=\"M9 10h2V6H9v4zm0 4h2v-2H9v2zm-7-4c0 4.411 3.589 8 8 8a7.939 7.939 0 0 0 4.111-1.15l2.494 1.069a1 1 0 0 0 1.314-1.313l-1.069-2.495A7.939 7.939 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8z\" fill-rule=\"evenodd\"/>"};
|
1249 |
|
1250 | var duplicate = {"viewBox":"0 0 20 20","body":"<path d=\"M8 12h8V4H8v8zm4 4H4V8h2v5a1 1 0 0 0 1 1h5v2zm5-14H7a1 1 0 0 0-1 1v3H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-3h3a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z\" fill-rule=\"evenodd\"/>"};
|
1251 |
|
1252 | var embed = {"viewBox":"0 0 20 20","body":"<path d=\"M17 13a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-3a1 1 0 1 1 2 0v2h12v-2a1 1 0 0 1 1-1zm0-11a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0V4H4v2a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1h14zm.555 7.168a1.001 1.001 0 0 1 0 1.664l-3 2a1 1 0 0 1-1.109-1.664L15.198 10l-1.752-1.168a1 1 0 1 1 1.109-1.664l3 2zM6.832 7.445a1 1 0 0 1-.277 1.387L4.803 10l1.752 1.168a1 1 0 1 1-1.11 1.664l-3-2a1.001 1.001 0 0 1 0-1.664l3-2a1 1 0 0 1 1.387.277zM9 14.001a1 1 0 0 1-.948-1.317l2-6a1 1 0 0 1 1.896.633l-2 6A.999.999 0 0 1 9 14z\" fill-rule=\"evenodd\"/>"};
|
1253 |
|
1254 | var exportIcon = {"viewBox":"0 0 20 20","body":"<path d=\"M13.707 6.707a.997.997 0 0 1-1.414 0L11 5.414V13a1 1 0 1 1-2 0V5.414L7.707 6.707a.999.999 0 1 1-1.414-1.414l3-3a.999.999 0 0 1 1.414 0l3 3a.999.999 0 0 1 0 1.414zM17 18H3a1 1 0 1 1 0-2h14a1 1 0 1 1 0 2z\"/>"};
|
1255 |
|
1256 | var external = {"viewBox":"0 0 20 20","body":"<path d=\"M17 2a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V5.414l-7.293 7.293a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 4H13a1 1 0 1 1 0-2h4zm-4 9a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H4v8h8v-4a1 1 0 0 1 1-1z\" fill-rule=\"evenodd\"/>"};
|
1257 |
|
1258 | var help = {"viewBox":"0 0 20 20","body":"<circle cx=\"10\" cy=\"10\" r=\"9\" fill=\"currentColor\"/><path d=\"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0m0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8m0-4a1 1 0 1 0 0 2 1 1 0 1 0 0-2m0-10C8.346 4 7 5.346 7 7a1 1 0 1 0 2 0 1.001 1.001 0 1 1 1.591.808C9.58 8.548 9 9.616 9 10.737V11a1 1 0 1 0 2 0v-.263c0-.653.484-1.105.773-1.317A3.013 3.013 0 0 0 13 7c0-1.654-1.346-3-3-3\" />"};
|
1259 |
|
1260 | var horizontalDots = {"viewBox":"0 0 20 20","body":"<path d=\"M6 10a2 2 0 1 1-4.001-.001A2 2 0 0 1 6 10zm6 0a2 2 0 1 1-4.001-.001A2 2 0 0 1 12 10zm6 0a2 2 0 1 1-4.001-.001A2 2 0 0 1 18 10z\" fill-rule=\"evenodd\"/>"};
|
1261 |
|
1262 | var importIcon = {"viewBox":"0 0 20 20","body":"<path d=\"M9.293 13.707l-3-3a.999.999 0 1 1 1.414-1.414L9 10.586V3a1 1 0 1 1 2 0v7.586l1.293-1.293a.999.999 0 1 1 1.414 1.414l-3 3a.999.999 0 0 1-1.414 0zM17 16a1 1 0 1 1 0 2H3a1 1 0 1 1 0-2h14z\"/>"};
|
1263 |
|
1264 | var menu = {"viewBox":"0 0 32 32","body":"<path d=\"M30.4 17.6H1.6a1.6 1.6 0 1 1 0-3.2h28.8a1.6 1.6 0 1 1 0 3.2zm0-11.2H1.6a1.6 1.6 0 1 1 0-3.2h28.8a1.6 1.6 0 1 1 0 3.2zm0 22.4H1.6a1.6 1.6 0 1 1 0-3.2h28.8a1.6 1.6 0 1 1 0 3.2z\"/>"};
|
1265 |
|
1266 | var notes = {"viewBox":"0 0 20 20","body":"<path d=\"M6 11h8V9H6v2zm0 4h8v-2H6v2zm0-8h4V5H6v2zm9.707-1.707l-3-3A.996.996 0 0 0 12 2H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V6a.997.997 0 0 0-.293-.707z\" fill-rule=\"evenodd\"/>"};
|
1267 |
|
1268 | var notification = {"viewBox":"0 0 20 20","body":"<path d=\"M16 8c0-2.967-2.167-5.432-5-5.91V1a1 1 0 1 0-2 0v1.09C6.167 2.568 4 5.033 4 8c0 2.957 0 4.586-1.707 6.293A1 1 0 0 0 3 16h4.183A2.909 2.909 0 0 0 7 17c0 1.654 1.345 3 3 3s3-1.346 3-3c0-.353-.07-.687-.184-1H17a1 1 0 0 0 .707-1.707C16 12.586 16 10.957 16 8zM5.011 14C6 12.208 6 10.285 6 8c0-2.206 1.794-4 4-4s4 1.794 4 4c0 2.285 0 4.208.989 6H5.011zM11 17a1.001 1.001 0 0 1-2 0 1 1 0 0 1 2 0z\"/>"};
|
1269 |
|
1270 | var print = {"viewBox":"0 0 20 20","body":"<path d=\"M14 11h2V9h-2v2zM7 7h6V4H7v3zm0 9h6v-2H7v2zm10-9h-2V3a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v4H3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h2v1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h2a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1z\" fill-rule=\"evenodd\"/>"};
|
1271 |
|
1272 | var subtract = {"viewBox":"0 0 20 20","body":"<path d=\"M15 9H5a1 1 0 1 0 0 2h10a1 1 0 1 0 0-2\" fill-rule=\"evenodd\"/>"};
|
1273 |
|
1274 | var refresh = {"viewBox":"0 0 20 20","body":"<path d=\"M17 11a1 1 0 0 1 1 1c0 1.654-1.346 3-3 3H5.414l1.293 1.293a.999.999 0 1 1-1.414 1.414l-3-3a.999.999 0 0 1 0-1.414l3-3a.999.999 0 1 1 1.414 1.414L5.414 13H15c.552 0 1-.449 1-1a1 1 0 0 1 1-1zM3 9a1 1 0 0 1-1-1c0-1.654 1.346-3 3-3h9.586l-1.293-1.293a.999.999 0 1 1 1.414-1.414l3 3a.999.999 0 0 1 0 1.414l-3 3a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 7H5c-.552 0-1 .449-1 1a1 1 0 0 1-1 1z\" fill-rule=\"evenodd\"/>"};
|
1275 |
|
1276 | var risk = {"viewBox":"0 0 20 20","body":"<path d=\"M9 12h2V8H9v4zm0 4h2v-2H9v2zm8.895.509l-7-14c-.339-.678-1.451-.678-1.79 0l-7 14A.999.999 0 0 0 3 17.956h14a1.001 1.001 0 0 0 .895-1.447z\" fill-rule=\"evenodd\"/>"};
|
1277 |
|
1278 | var save = {"viewBox":"0 0 20 20","body":"<path d=\"M17 4h-3a1 1 0 1 0 0 2h2v10H4V4h3.586L9 5.414v5.172L7.707 9.293a1 1 0 0 0-1.414 1.414l3 3a.996.996 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 10.586V5a.997.997 0 0 0-.293-.707l-2-2A.994.994 0 0 0 8 2H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z\"/>"};
|
1279 |
|
1280 | var search = {"viewBox":"0 0 20 20","body":"<path d=\"M8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8m9.707 4.293l-4.82-4.82A5.968 5.968 0 0 0 14 8 6 6 0 0 0 2 8a6 6 0 0 0 6 6 5.968 5.968 0 0 0 3.473-1.113l4.82 4.82a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414\" fill-rule=\"evenodd\"/>"};
|
1281 |
|
1282 | var view = {"viewBox":"0 0 20 20","body":"<path d=\"M17.928 9.628C17.836 9.399 15.611 4 9.999 4S2.162 9.399 2.07 9.628a1.017 1.017 0 0 0 0 .744C2.162 10.601 4.387 16 9.999 16s7.837-5.399 7.929-5.628a1.017 1.017 0 0 0 0-.744zM9.999 14a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6A2 2 0 1 0 10 12.001 2 2 0 0 0 10 8z\"/>"};
|
1283 |
|
1284 | var edit = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxkZWZzPjxwYXRoIGlkPSJhIiBkPSJNMTUgMTcuNTg2TDEzLjkxNCAxNi41bC43OTMtLjc5M2EuOTk5Ljk5OSAwIDEgMC0xLjQxNC0xLjQxNGwtLjc5My43OTNMMTEuNDE0IDE0IDE0IDExLjQxNCAxNy41ODYgMTUgMTUgMTcuNTg2ek0zLjQzNyAxNC44NTJsMS43MTEgMS43MTEtMi41NjcuODU2Ljg1Ni0yLjU2N3pNNC45MTQgNy41bC43OTMtLjc5M2EuOTk5Ljk5OSAwIDEgMC0xLjQxNC0xLjQxNGwtLjc5My43OTNMMi40MTQgNSA1IDIuNDE0IDguNTg2IDYgNiA4LjU4NiA0LjkxNCA3LjV6bTEyLjU1MS00Ljk2NWExLjgzIDEuODMgMCAwIDEgMCAyLjU4NkwxNyA1LjU4NiAxNC40MTQgM2wuNDY1LS40NjVhMS44MyAxLjgzIDAgMCAxIDIuNTg2IDB6TTQuNDE1IDEzTDEzIDQuNDE0IDE1LjU4NiA3IDcgMTUuNTg2IDQuNDE0IDEzem0xNS4yOTIgMS4yOTNMMTUuNDE0IDEwbDMuNDY1LTMuNDY1YTMuODMyIDMuODMyIDAgMCAwIDAtNS40MTQgMy44MzQgMy44MzQgMCAwIDAtNS40MTQgMEwxMCA0LjU4NiA1LjcwNy4yOTNhLjk5OS45OTkgMCAwIDAtMS40MTQgMGwtNCA0YS45OTkuOTk5IDAgMCAwIDAgMS40MTRMNC41ODYgMTBsLTIuMjkzIDIuMjkzYS45OTYuOTk2IDAgMCAwLS4yNC4zOTFsLTIgNmEuOTk4Ljk5OCAwIDAgMCAxLjI2MyAxLjI2NGw2LTJhLjk5Ni45OTYgMCAwIDAgLjM5MS0uMjRMMTAgMTUuNDEzbDQuMjkzIDQuMjkzYS45OTcuOTk3IDAgMCAwIDEuNDE0IDBsNC00YS45OTkuOTk5IDAgMCAwIDAtMS40MTR6Ii8+PC9kZWZzPjx1c2UgZmlsbD0iIzMxMzczRCIgeGxpbms6aHJlZj0iI2EiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPgo=';
|
1285 |
|
1286 | var checkmarkLarge = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTE0Ljc5MyA1LjI5M2ExIDEgMCAwIDEgMS40MTQgMS40MTRsLTggOGExIDEgMCAwIDEtMS40MTQgMGwtMy0zYTEgMSAwIDAgMSAxLjQxNC0xLjQxNEw3LjUgMTIuNTg2bDcuMjkzLTcuMjkzeiIvPjwvc3ZnPgo=';
|
1287 |
|
1288 | var clock = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGcgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iOSIgZmlsbD0iI0ZGRiIvPjxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik0xMCAwQzQuNDg2IDAgMCA0LjQ4NiAwIDEwczQuNDg2IDEwIDEwIDEwIDEwLTQuNDg2IDEwLTEwUzE1LjUxNCAwIDEwIDBtMCAxOGMtNC40MTEgMC04LTMuNTg5LTgtOHMzLjU4OS04IDgtOCA4IDMuNTg5IDggOC0zLjU4OSA4LTggOCIvPjxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik0xMy43MDcgMTIuMjkzYTEgMSAwIDAgMS0xLjQxNCAxLjQxNEw5IDEwLjQxNFY1YTEgMSAwIDEgMSAyIDB2NC41ODZsMi43MDcgMi43MDd6Ii8+PC9nPjwvc3ZnPgo=';
|
1289 |
|
1290 | var notificationCircle = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iNSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+Cg==';
|
1291 |
|
1292 | var activity = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iIzYzNzM4MSIgZD0iTTIuOTY3IDEwLjQwMmwtMS4zNDMgMi4wMTRhLjc1Ljc1IDAgMCAxLTEuMjQ4LS44MzJsMi0zYS43NS43NSAwIDAgMSAxLjI2Ny4wM2wyLjIgMy42NjcgMi40NTUtNi41NDRjLjI0NC0uNjUzIDEuMTY5LS42NDggMS40MDcuMDA3bDMuMjEgOC44MjYgMy4zNjQtMTEuNzc2Yy4yMDItLjcxIDEuMi0uNzMgMS40MzMtLjAzMWwyIDZhLjc1Ljc1IDAgMCAxLTEuNDI0LjQ3NGwtMS4yMzMtMy43LTMuMzM0IDExLjY2OWMtLjIuNy0xLjE3Ny43MzQtMS40MjYuMDVMOC45OSA4LjE2NWwtMi4yODcgNi4wOThhLjc1Ljc1IDAgMCAxLTEuMzQ1LjEyM2wtMi4zOS0zLjk4NHoiLz48L3N2Zz4K';
|
1293 |
|
1294 | var location = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iIzYzNzM4MSIgZmlsbC1vcGFjaXR5PSIuMjUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjNjM3MzgxIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTIuNzUgOGMwIDMuMDggMS4yOCA1LjgxMSAzLjQ0IDguMTczIDEuMzM4IDEuNDYyIDIuNzI1IDIuNDk2IDMuNjg4IDMuMDQ1YS4yNDYuMjQ2IDAgMCAwIC4yNDctLjAwMWMuOTYtLjU0OCAyLjM0Ny0xLjU4MiAzLjY4NS0zLjA0NEMxNS45NyAxMy44MSAxNy4yNSAxMS4wOCAxNy4yNSA4YzAtMy45OTgtMy4yNTMtNy4yNS03LjI1LTcuMjVTMi43NSA0LjAwMiAyLjc1IDh6bTQgMEEzLjI1MyAzLjI1MyAwIDAgMSAxMCA0Ljc1IDMuMjUzIDMuMjUzIDAgMCAxIDEzLjI1IDggMy4yNTMgMy4yNTMgMCAwIDEgMTAgMTEuMjUgMy4yNTMgMy4yNTMgMCAwIDEgNi43NSA4eiIvPjwvc3ZnPgo=';
|
1295 |
|
1296 | var misc = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiM2MzczODEiIHN0cm9rZS13aWR0aD0iMS41Ij48cmVjdCB3aWR0aD0iNy41IiBoZWlnaHQ9IjcuNSIgeD0iLjc1IiB5PSIuNzUiIGZpbGw9IiNGRkYiIHJ4PSIyIi8+PHJlY3Qgd2lkdGg9IjcuNSIgaGVpZ2h0PSI3LjUiIHg9Ii43NSIgeT0iMTEuNzUiIGZpbGw9IiM2MzczODEiIGZpbGwtb3BhY2l0eT0iLjI1IiByeD0iMiIvPjxyZWN0IHdpZHRoPSI3LjUiIGhlaWdodD0iNy41IiB4PSIxMS43NSIgeT0iMTEuNzUiIGZpbGw9IiNGRkYiIHJ4PSIyIi8+PHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNMTUuNSA4VjFNMTIgNC41aDciLz48L2c+PC9zdmc+Cg==';
|
1297 |
|
1298 | var person = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTAgMTNjLTQgMC03IDMtNyAzbDEgM2gxMmwxLTNzLTMtMy03LTMiLz48ZyBzdHJva2U9IiM2MzczODEiIHN0cm9rZS13aWR0aD0iMS41Ij48cGF0aCBmaWxsPSIjNjM3MzgxIiBmaWxsLW9wYWNpdHk9Ii4yNSIgZD0iTTEwIDEyLjc1Yy0xLjc2NyAwLTMuNDc0LjU1NS01LjA1OCAxLjQ5Mi0uOTc4LjU3Ny0xLjcyMSAxLjE4MS0yLjExOCAxLjU4MWEuMjUuMjUgMCAwIDAtLjA2MS4yNTZsMSAzQS4yNS4yNSAwIDAgMCA0IDE5LjI1aDEyYS4yNDkuMjQ5IDAgMCAwIC4yMzctLjE3MWwxLTNhLjI0OS4yNDkgMCAwIDAtLjA2LS4yNTZjLS40MS0uNDEtMS4xNDEtMS4wMDQtMi4xMTktMS41ODEtMS41ODQtLjkzNy0zLjI5MS0xLjQ5Mi01LjA1OC0xLjQ5MnoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTQuMjUgNUE0LjI1NiA0LjI1NiAwIDAgMCAxMCAuNzUgNC4yNTYgNC4yNTYgMCAwIDAgNS43NSA1IDQuMjU2IDQuMjU2IDAgMCAwIDEwIDkuMjUgNC4yNTYgNC4yNTYgMCAwIDAgMTQuMjUgNXoiLz48L2c+PC9nPjwvc3ZnPgo=';
|
1299 |
|
1300 | var tag = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNNCA3bC0zIDMgOSA5IDMtM3oiLz48cGF0aCBmaWxsPSIjRkZGIiBzdHJva2U9IiM2MzczODEiIHN0cm9rZS13aWR0aD0iMS41IiBkPSJNMTkgLjc1aC05YS4yNTIuMjUyIDAgMCAwLS4xNzYuMDczbC05IDlhLjI0OS4yNDkgMCAwIDAgMCAuMzU0bDkgOWEuMjQ3LjI0NyAwIDAgMCAuMzUzIDBsOS4wMDEtOS4wMDJBLjI0Ny4yNDcgMCAwIDAgMTkuMjUgMTBWMUEuMjUuMjUgMCAwIDAgMTkgLjc1eiIvPjxwYXRoIGZpbGw9IiM2MzczODEiIGZpbGwtb3BhY2l0eT0iLjI1IiBkPSJNNCA3bDkgOS0zIDMtOS05eiIvPjxwYXRoIGZpbGw9IiM2MzczODEiIGQ9Ik0xNSA2LjVhMS41IDEuNSAwIDEgMC0uMDAxLTMuMDAxQTEuNSAxLjUgMCAwIDAgMTUgNi41Ii8+PHBhdGggc3Ryb2tlPSIjNjM3MzgxIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTQgN2w5IDkiLz48L2c+PC9zdmc+Cg==';
|
1301 |
|
1302 | var warning = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxkZWZzPjxwYXRoIGlkPSJhIiBkPSJNMTAgMEM0LjQ4NiAwIDAgNC40ODYgMCAxMHM0LjQ4NiAxMCAxMCAxMCAxMC00LjQ4NiAxMC0xMFMxNS41MTQgMCAxMCAwbTAgMThjLTQuNDExIDAtOC0zLjU4OS04LThzMy41ODktOCA4LTggOCAzLjU4OSA4IDgtMy41ODkgOC04IDhtMC03YTEgMSAwIDAgMCAxLTFWNmExIDEgMCAxIDAtMiAwdjRhMSAxIDAgMCAwIDEgMW0wIDEuOWExLjEgMS4xIDAgMSAwIDAgMi4yIDEuMSAxLjEgMCAwIDAgMC0yLjIiLz48L2RlZnM+PHVzZSBmaWxsPSIjOUM2RjE5IiB4bGluazpocmVmPSIjYSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+Cg==';
|
1303 |
|
1304 | var mail = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cmVjdCB3aWR0aD0iMTguNSIgaGVpZ2h0PSIxNC41IiB4PSIuNzUiIHk9IjIuNzUiIGZpbGw9IiM2MzczODEiIGZpbGwtb3BhY2l0eT0iLjI1IiBzdHJva2U9IiM2MzczODEiIHN0cm9rZS13aWR0aD0iMS41IiByeD0iMyIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xIDVsOSA2IDktNi0xLTJIMnoiLz48cGF0aCBmaWxsPSIjNjM3MzgxIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0zIDMuNUExLjUgMS41IDAgMCAwIDEuNSA1djEwQTEuNSAxLjUgMCAwIDAgMyAxNi41aDE0YTEuNSAxLjUgMCAwIDAgMS41LTEuNVY1QTEuNSAxLjUgMCAwIDAgMTcgMy41SDN6TTMgMmgxNGEzIDMgMCAwIDEgMyAzdjEwYTMgMyAwIDAgMS0zIDNIM2EzIDMgMCAwIDEtMy0zVjVhMyAzIDAgMCAxIDMtM3oiLz48cGF0aCBmaWxsPSIjNjM3MzgxIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xOC41ODQgNC4zNzZsLjgzMiAxLjI0OC03Ljg5IDUuMjZhMi43NSAyLjc1IDAgMCAxLTMuMDUxIDBMLjU4NCA1LjYyNGwuODMyLTEuMjQ4IDcuODkgNS4yNmMuNDIuMjguOTY4LjI4IDEuMzg3IDBsNy44OTEtNS4yNnoiLz48L2c+PC9zdmc+Cg==';
|
1305 |
|
1306 | var phone = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNNSAwaDEwYTIgMiAwIDAgMSAyIDJ2MTZhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJWMmEyIDIgMCAwIDEgMi0yeiIvPjxwYXRoIGZpbGw9IiM2MzczODEiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTUgMS41YS41LjUgMCAwIDAtLjUuNXYxNmEuNS41IDAgMCAwIC41LjVoMTBhLjUuNSAwIDAgMCAuNS0uNVYyYS41LjUgMCAwIDAtLjUtLjVINXpNNSAwaDEwYTIgMiAwIDAgMSAyIDJ2MTZhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJWMmEyIDIgMCAwIDEgMi0yeiIvPjxyZWN0IHdpZHRoPSI4IiBoZWlnaHQ9IjMiIHg9IjYiIGZpbGw9IiM2MzczODEiIHJ4PSIxLjUiLz48cmVjdCB3aWR0aD0iOCIgaGVpZ2h0PSIxLjUiIHg9IjYiIHk9IjE1LjUiIGZpbGw9IiM2MzczODEiIHJ4PSIuNzUiLz48L2c+PC9zdmc+Cg==';
|
1307 |
|
1308 | var attentionFilled = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iIzMxMzczRCIgZD0iTTguMDU4IDIuNjQ3QzguNDcyIDEuOTM0IDkuMjA4IDEuNSAxMCAxLjVjLjc5MyAwIDEuNTI4LjQzNCAxLjk0MiAxLjE0N2w2Ljc1NCAxMS44MTNjLjQwMy43MzIuNDA1IDEuNjMyLjAwNiAyLjM2NkEyLjIzMSAyLjIzMSAwIDAgMSAxNi43NSAxOEgzLjI0NGEyLjIyOCAyLjIyOCAwIDAgMS0xLjk0Ni0xLjE3NCAyLjQ4IDIuNDggMCAwIDEgLjAxMi0yLjM3NUw4LjA1OCAyLjY0N3pNOSAxMWgyVjdIOXY0em0wIDRoMnYtMkg5djJ6Ii8+PC9zdmc+Cg==';
|
1309 |
|
1310 | var circleCheckmark = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iIzMxMzczRCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMThhOCA4IDAgMSAxIDAtMTYgOCA4IDAgMCAxIDAgMTZ6bS0xLjY4NS00LjE0MWwtLjAwMS0uMDAxYS40MzcuNDM3IDAgMCAwIC42NDIgMGw1LjkxLTYuMzVhLjUwNC41MDQgMCAwIDAgMC0uNjgzbC0uNjQzLS42ODRhLjQzNy40MzcgMCAwIDAtLjY0MyAwbC00Ljk0MiA1LjMyNy0yLjIyLTIuMzkzYS40MzcuNDM3IDAgMCAwLS42NDIgMGwtLjY0My42ODNhLjUwNi41MDYgMCAwIDAgMCAuNjg0bDMuMTgyIDMuNDE3eiIvPjwvc3ZnPgo=';
|
1311 |
|
1312 | var circleInformationFilled = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iIzMxMzczRCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMThhOCA4IDAgMSAxIDAtMTYgOCA4IDAgMCAxIDAgMTZ6bTEtNXYtM2ExIDEgMCAwIDAtMS0xSDlhMSAxIDAgMSAwIDAgMnYzYTEgMSAwIDAgMCAxIDFoMWExIDEgMCAwIDAgMC0yem0tMS01LjlhMS4xIDEuMSAwIDEgMCAwLTIuMiAxLjEgMS4xIDAgMCAwIDAgMi4yeiIvPjwvc3ZnPgo=';
|
1313 |
|
1314 | var property = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGcgZmlsbD0iIzVFNjg4MCIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0zLjUgOXY5YS41LjUgMCAwIDAgLjUuNWgxMmEuNS41IDAgMCAwIC41LS41VjlIMTh2OWEyIDIgMCAwIDEtMiAySDRhMiAyIDAgMCAxLTItMlY5aDEuNXoiLz48cGF0aCBkPSJNOCAxMmg0YTIgMiAwIDAgMSAyIDJ2Nkg2di02YTIgMiAwIDAgMSAyLTJ6IiBvcGFjaXR5PSIuMjUiLz48cGF0aCBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik03LjUgMTguNWg1VjE0YS41LjUgMCAwIDAtLjUtLjVIOGEuNS41IDAgMCAwLS41LjV2NC41ek04IDEyaDRhMiAyIDAgMCAxIDIgMnY2SDZ2LTZhMiAyIDAgMCAxIDItMnoiLz48cGF0aCBzdHJva2U9IiM1RTY4ODAiIHN0cm9rZS13aWR0aD0iMS41IiBkPSJNMTkuMjUgNC42OTRMMTcuMDU5Ljc1SDIuOTRMLjc1IDQuNjk0VjZhMy4yNSAzLjI1IDAgMCAwIDUuNjg4IDIuMTVMNyA3LjUxMmwuNTYyLjYzOEEzLjI0IDMuMjQgMCAwIDAgMTAgOS4yNWEzLjI0IDMuMjQgMCAwIDAgMi40MzgtMS4xTDEzIDcuNTEybC41NjIuNjM4QTMuMjUgMy4yNSAwIDAgMCAxOS4yNSA2VjQuNjk0eiIgb3BhY2l0eT0iLjI1Ii8+PHBhdGggZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNMTYuNjE3IDEuNUgzLjM4M0wxLjUgNC44ODlWNmEyLjUgMi41IDAgMCAwIDQuMzc1IDEuNjUzTDcgNi4zOGwxLjEyNSAxLjI3NEEyLjQ5IDIuNDkgMCAwIDAgMTAgOC41YTIuNDkgMi40OSAwIDAgMCAxLjg3NS0uODQ3TDEzIDYuMzhsMS4xMjUgMS4yNzRBMi41IDIuNSAwIDAgMCAxOC41IDZWNC44ODlMMTYuNjE3IDEuNXpNMTMuNzUgOS4zMDdMMTMgOC42NDZsLS43NS42NjFBMy45ODEgMy45ODEgMCAwIDEgMTAgMTBjLS44MzUgMC0xLjYxLS4yNTYtMi4yNS0uNjkzTDcgOC42NDZsLS43NS42NjFBNCA0IDAgMCAxIDAgNlY0LjVMMi41IDBoMTVMMjAgNC41VjZhNCA0IDAgMCAxLTYuMjUgMy4zMDd6Ii8+PHBhdGggZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNMTcuNzI5IDMuNWwtMS4xMTItMkgzLjM4M2wtMS4xMTIgMkgxNy43M3pNMS40MzkgNUgxLjV2LS4xMTFMMS40MzggNXpNMCA1di0uNUwyLjUgMGgxNUwyMCA0LjVWNUgweiIvPjwvZz48L3N2Zz4K';
|
1315 |
|
1316 | var date = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0wIDdoMjB2MTFhMiAyIDAgMCAxLTIgMkgyYTIgMiAwIDAgMS0yLTJWN3oiLz48cGF0aCBmaWxsPSIjNUU2ODgwIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0yIDEuNWgxNmEyIDIgMCAwIDEgMiAydjVIMHYtNWEyIDIgMCAwIDEgMi0yeiIgb3BhY2l0eT0iLjI1Ii8+PHBhdGggZmlsbD0iIzVFNjg4MCIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNMS41IDguNVYxOGEuNS41IDAgMCAwIC41LjVoMTZhLjUuNSAwIDAgMCAuNS0uNVY4LjVoLTE3ek0wIDdoMjB2MTFhMiAyIDAgMCAxLTIgMkgyYTIgMiAwIDAgMS0yLTJWN3oiLz48cGF0aCBmaWxsPSIjNUU2ODgwIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xLjUgN2gxN1YzLjVBLjUuNSAwIDAgMCAxOCAzSDJhLjUuNSAwIDAgMC0uNS41Vjd6TTIgMS41aDE2YTIgMiAwIDAgMSAyIDJ2NUgwdi01YTIgMiAwIDAgMSAyLTJ6Ii8+PHBhdGggZmlsbD0iIzVFNjg4MCIgZD0iTTE1LjI1IDBhLjc1Ljc1IDAgMCAxIC43NS43NXYzYS43NS43NSAwIDEgMS0xLjUgMHYtM2EuNzUuNzUgMCAwIDEgLjc1LS43NXpNNC43NSAwYS43NS43NSAwIDAgMSAuNzUuNzV2M2EuNzUuNzUgMCAwIDEtMS41IDB2LTNBLjc1Ljc1IDAgMCAxIDQuNzUgMHoiLz48L2c+PC9zdmc+Cg==';
|
1317 |
|
1318 | var dateStart = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0wIDYuNWgyMHYxMS40MjNDMjAgMTkuMDcgMTkuMTA1IDIwIDE4IDIwSDJjLTEuMTA1IDAtMi0uOTMtMi0yLjA3N1Y2LjV6Ii8+PHBhdGggZmlsbD0iIzVFNjg4MCIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNMiAxLjVoMTZjMS4xMDUgMCAyIC44MzEgMiAxLjg1N1Y4SDBWMy4zNTdDMCAyLjMzMS44OTUgMS41IDIgMS41eiIgb3BhY2l0eT0iLjI1Ii8+PHBhdGggZmlsbD0iIzVFNjg4MCIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNMS41IDguMDU4djkuODY1YzAgLjI4Ny4yMjQuNTIuNS41MmgxNmEuNTEuNTEgMCAwIDAgLjUtLjUyVjguMDU4aC0xN3pNMCA2LjVoMjB2MTEuNDIzQzIwIDE5LjA3IDE5LjEwNSAyMCAxOCAyMEgyYy0xLjEwNSAwLTItLjkzLTItMi4wNzdWNi41eiIvPjxwYXRoIGZpbGw9IiM1RTY4ODAiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTEuNSA2LjYwN2gxN3YtMy4yNWMwLS4yNTYtLjIyNC0uNDY0LS41LS40NjRIMmMtLjI3NiAwLS41LjIwOC0uNS40NjR2My4yNXpNMiAxLjVoMTZjMS4xMDUgMCAyIC44MzEgMiAxLjg1N1Y4SDBWMy4zNTdDMCAyLjMzMS44OTUgMS41IDIgMS41eiIvPjxnIGZpbGw9IiM1RTY4ODAiIGZpbGwtcnVsZT0ibm9uemVybyI+PHBhdGggZD0iTTUuNzUgMTRhLjc1Ljc1IDAgMCAxIDAtMS41aDcuNWEuNzUuNzUgMCAwIDEgMCAxLjVoLTcuNXoiLz48cGF0aCBkPSJNOS43MiAxMC43OGEuNzUuNzUgMCAwIDEgMS4wNi0xLjA2bDMgM2EuNzUuNzUgMCAwIDEgMCAxLjA2bC0zIDNhLjc1Ljc1IDAgMCAxLTEuMDYtMS4wNmwyLjQ3LTIuNDctMi40Ny0yLjQ3eiIvPjwvZz48cGF0aCBmaWxsPSIjNUU2ODgwIiBkPSJNMTUuMjUgMGEuNzUuNzUgMCAwIDEgLjc1Ljc1djNhLjc1Ljc1IDAgMSAxLTEuNSAwdi0zYS43NS43NSAwIDAgMSAuNzUtLjc1ek00Ljc1IDBhLjc1Ljc1IDAgMCAxIC43NS43NXYzYS43NS43NSAwIDAgMS0xLjUgMHYtM0EuNzUuNzUgMCAwIDEgNC43NSAweiIvPjwvZz48L3N2Zz4K';
|
1319 |
|
1320 | var dateEnd = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0wIDdoMjB2MTFhMiAyIDAgMCAxLTIgMkgyYTIgMiAwIDAgMS0yLTJWN3oiLz48cGF0aCBmaWxsPSIjNUU2ODgwIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0yIDEuNWgxNmEyIDIgMCAwIDEgMiAydjVIMHYtNWEyIDIgMCAwIDEgMi0yeiIgb3BhY2l0eT0iLjI1Ii8+PHBhdGggZmlsbD0iIzVFNjg4MCIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNMS41IDguNVYxOGEuNS41IDAgMCAwIC41LjVoMTZhLjUuNSAwIDAgMCAuNS0uNVY4LjVoLTE3ek0wIDdoMjB2MTFhMiAyIDAgMCAxLTIgMkgyYTIgMiAwIDAgMS0yLTJWN3oiLz48cGF0aCBmaWxsPSIjNUU2ODgwIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xLjUgN2gxN1YzLjVBLjUuNSAwIDAgMCAxOCAzSDJhLjUuNSAwIDAgMC0uNS41Vjd6TTIgMS41aDE2YTIgMiAwIDAgMSAyIDJ2NUgwdi01YTIgMiAwIDAgMSAyLTJ6Ii8+PHBhdGggZmlsbD0iIzVFNjg4MCIgZD0iTTE1LjI1IDBhLjc1Ljc1IDAgMCAxIC43NS43NXYzYS43NS43NSAwIDEgMS0xLjUgMHYtM2EuNzUuNzUgMCAwIDEgLjc1LS43NXpNNC43NSAwYS43NS43NSAwIDAgMSAuNzUuNzV2M2EuNzUuNzUgMCAwIDEtMS41IDB2LTNBLjc1Ljc1IDAgMCAxIDQuNzUgMHoiLz48ZyBmaWxsPSIjNUU2ODgwIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjxwYXRoIGQ9Ik02LjQ3IDExLjAzbDEuMDYtMS4wNiA2IDYtMS4wNiAxLjA2eiIvPjxwYXRoIGQ9Ik03LjUzIDE3LjAzbC0xLjA2LTEuMDYgNi02IDEuMDYgMS4wNnoiLz48L2c+PC9nPjwvc3ZnPgo=';
|
1321 |
|
1322 | var areaSales = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGcgZmlsbD0iIzVFNjg4MCIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMCA2aDEwLjE1NGMxLjMzNyAwIDEuODIyLjE0IDIuMzExLjQuNDkuMjYyLjg3My42NDYgMS4xMzQgMS4xMzUuMjYyLjQ4OS40MDEuOTc0LjQwMSAyLjMxVjIwSDUuMTI4Yy0xLjc4MyAwLTIuNDMtLjE4Ni0zLjA4Mi0uNTM0YTMuNjM1IDMuNjM1IDAgMCAxLTEuNTEyLTEuNTEyQy4xODYgMTcuMzAyIDAgMTYuNjU1IDAgMTQuODcyVjZ6IiBvcGFjaXR5PSIuMjUiLz48cGF0aCBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xNCAxMS41djNoLTEuNXYtM0gxNHptMC0yaC0xLjVWOUExLjUgMS41IDAgMCAwIDExIDcuNWgtLjVWNmguNWEzIDMgMCAwIDEgMyAzdi41em0wIDdWMjBsLTEuNS0xLjV2LTJIMTR6TTguNSA2djEuNWgtM1Y2aDN6bS01IDB2MS41aC0yTDAgNmgzLjV6Ii8+PHBhdGggZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNNS4xMjggMS41Yy0xLjQgMC0xLjg4LjA5My0yLjM3NC4zNTctLjM5LjIwOS0uNjg4LjUwNi0uODk3Ljg5Ny0uMjY0LjQ5NC0uMzU3Ljk3NS0uMzU3IDIuMzc0djkuNzQ0YzAgMS40LjA5MyAxLjg4LjM1NyAyLjM3NC4yMDkuMzkuNTA2LjY4OC44OTcuODk3LjQ5NC4yNjQuOTc1LjM1NyAyLjM3NC4zNTdoOS43NDRjMS40IDAgMS44OC0uMDkzIDIuMzc0LS4zNTcuMzktLjIwOS42ODgtLjUwNi44OTctLjg5Ny4yNjQtLjQ5NC4zNTctLjk3NS4zNTctMi4zNzRWNS4xMjhjMC0xLjQtLjA5My0xLjg4LS4zNTctMi4zNzRhMi4xMzUgMi4xMzUgMCAwIDAtLjg5Ny0uODk3Yy0uNDk0LS4yNjQtLjk3NS0uMzU3LTIuMzc0LS4zNTdINS4xMjh6bTAtMS41aDkuNzQ0YzEuNzgzIDAgMi40My4xODYgMy4wODIuNTM0LjY1Mi4zNDkgMS4xNjMuODYgMS41MTIgMS41MTIuMzQ4LjY1Mi41MzQgMS4yOTkuNTM0IDMuMDgydjkuNzQ0YzAgMS43ODMtLjE4NiAyLjQzLS41MzQgMy4wODJhMy42MzUgMy42MzUgMCAwIDEtMS41MTIgMS41MTJjLS42NTIuMzQ4LTEuMjk5LjUzNC0zLjA4Mi41MzRINS4xMjhjLTEuNzgzIDAtMi40My0uMTg2LTMuMDgyLS41MzRhMy42MzUgMy42MzUgMCAwIDEtMS41MTItMS41MTJDLjE4NiAxNy4zMDIgMCAxNi42NTUgMCAxNC44NzJWNS4xMjhjMC0xLjc4My4xODYtMi40My41MzQtMy4wODJBMy42MzUgMy42MzUgMCAwIDEgMi4wNDYuNTM0QzIuNjk4LjE4NiAzLjM0NSAwIDUuMTI4IDB6Ii8+PC9nPjwvc3ZnPgo=';
|
1323 |
|
1324 | var areaGross = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGcgZmlsbD0iIzVFNjg4MCI+PHBhdGggZD0iTTUuMTI4IDBoOS43NDRjMS43ODMgMCAyLjQzLjE4NiAzLjA4Mi41MzQuNjUyLjM0OSAxLjE2My44NiAxLjUxMiAxLjUxMi4zNDguNjUyLjUzNCAxLjI5OS41MzQgMy4wODJ2OS43NDRjMCAxLjc4My0uMTg2IDIuNDMtLjUzNCAzLjA4MmEzLjYzNSAzLjYzNSAwIDAgMS0xLjUxMiAxLjUxMmMtLjY1Mi4zNDgtMS4yOTkuNTM0LTMuMDgyLjUzNEg1LjEyOGMtMS43ODMgMC0yLjQzLS4xODYtMy4wODItLjUzNGEzLjYzNSAzLjYzNSAwIDAgMS0xLjUxMi0xLjUxMkMuMTg2IDE3LjMwMiAwIDE2LjY1NSAwIDE0Ljg3MlY1LjEyOGMwLTEuNzgzLjE4Ni0yLjQzLjUzNC0zLjA4MkEzLjYzNSAzLjYzNSAwIDAgMSAyLjA0Ni41MzRDMi42OTguMTg2IDMuMzQ1IDAgNS4xMjggMHoiIG9wYWNpdHk9Ii4yNSIvPjxwYXRoIGQ9Ik0yMCA1LjV2M2gtMS41di0zSDIwem0tLjAzLTJoLTEuNTJhMi41MDQgMi41MDQgMCAwIDAtMS45NS0xLjk1Vi4wM2E0IDQgMCAwIDEgMy40NyAzLjQ3em0uMDMgN1YxNGwtMS41LTEuNXYtMkgyMHpNMTQuNSAwdjEuNWgtM1YwaDN6bS01IDB2MS41aC0yTDYgMGgzLjV6Ii8+PHBhdGggZD0iTTkuNSAwdjEuNUg1LjEyOGMtMS40IDAtMS44OC4wOTMtMi4zNzQuMzU3LS4zOS4yMDktLjY4OC41MDYtLjg5Ny44OTctLjI2NC40OTQtLjM1Ny45NzUtLjM1NyAyLjM3NHY5Ljc0NGMwIDEuNC4wOTMgMS44OC4zNTcgMi4zNzQuMjA5LjM5LjUwNi42ODguODk3Ljg5Ny40OTQuMjY0Ljk3NS4zNTcgMi4zNzQuMzU3aDkuNzQ0YzEuNCAwIDEuODgtLjA5MyAyLjM3NC0uMzU3LjM5LS4yMDkuNjg4LS41MDYuODk3LS44OTcuMjY0LS40OTQuMzU3LS45NzUuMzU3LTIuMzc0VjEwLjVIMjB2NC4zNzJjMCAxLjc4My0uMTg2IDIuNDMtLjUzNCAzLjA4MmEzLjYzNSAzLjYzNSAwIDAgMS0xLjUxMiAxLjUxMmMtLjY1Mi4zNDgtMS4yOTkuNTM0LTMuMDgyLjUzNEg1LjEyOGMtMS43ODMgMC0yLjQzLS4xODYtMy4wODItLjUzNGEzLjYzNSAzLjYzNSAwIDAgMS0xLjUxMi0xLjUxMkMuMTg2IDE3LjMwMiAwIDE2LjY1NSAwIDE0Ljg3MlY1LjEyOGMwLTEuNzgzLjE4Ni0yLjQzLjUzNC0zLjA4MkEzLjYzNSAzLjYzNSAwIDAgMSAyLjA0Ni41MzRDMi42OTguMTg2IDMuMzQ1IDAgNS4xMjggMEg5LjV6Ii8+PC9nPjwvc3ZnPgo=';
|
1325 |
|
1326 | var breakOption = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0yIDBoMTZhMiAyIDAgMCAxIDIgMnYxNmEyIDIgMCAwIDEtMiAySDJhMiAyIDAgMCAxLTItMlYyYTIgMiAwIDAgMSAyLTJ6Ii8+PHBhdGggZmlsbD0iIzVFNjg4MCIgb3BhY2l0eT0iLjI1IiBkPSJNMSAxaDd2MThIMXoiLz48cGF0aCBmaWxsPSIjNUU2ODgwIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik05IDB2MS41SDJhLjUuNSAwIDAgMC0uNS41djE2YS41LjUgMCAwIDAgLjUuNWg3VjIwSDJhMiAyIDAgMCAxLTItMlYyYTIgMiAwIDAgMSAyLTJoN3ptMiAwaDN2MS41aC0zVjB6bTAgMjB2LTEuNWgzVjIwaC0zem01LTIwaDJhMiAyIDAgMCAxIDIgMnYyaC0xLjVWMmEuNS41IDAgMCAwLS41LS41aC0yVjB6bTAgMjB2LTEuNWgyYS41LjUgMCAwIDAgLjUtLjV2LTJIMjB2MmEyIDIgMCAwIDEtMiAyaC0yem00LTZoLTEuNXYtM0gyMHYzem0wLTh2M2gtMS41VjZIMjB6Ii8+PHBhdGggZmlsbD0iIzVFNjg4MCIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNNy41IDE4LjV2LTE3SDJhLjUuNSAwIDAgMC0uNS41djE2YS41LjUgMCAwIDAgLjUuNWg1LjV6TTIgMGg3djIwSDJhMiAyIDAgMCAxLTItMlYyYTIgMiAwIDAgMSAyLTJ6Ii8+PC9nPjwvc3ZnPgo=';
|
1327 |
|
1328 | var warningCircle = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSIxMCIgZmlsbD0iI0ZGRiIvPjxwYXRoIGZpbGw9IiM1RTY4ODAiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTEwIDE4YTggOCAwIDEgMCAwLTE2IDggOCAwIDAgMCAwIDE2em0wIDJDNC40NzcgMjAgMCAxNS41MjMgMCAxMFM0LjQ3NyAwIDEwIDBzMTAgNC40NzcgMTAgMTAtNC40NzcgMTAtMTAgMTB6Ii8+PHBhdGggZmlsbD0iIzVFNjg4MCIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSA2YTEgMSAwIDEgMSAyIDB2NGExIDEgMCAwIDEtMiAwVjZ6bTEgN2ExIDEgMCAxIDAgMCAyIDEgMSAwIDAgMCAwLTJ6Ii8+PC9nPjwvc3ZnPgo=';
|
1329 |
|
1330 | var warningTriangle = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGcgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTcuODQzIDEuNzE3YTIuNTIyIDIuNTIyIDAgMCAxIDQuMzE0IDBsNy41MDUgMTIuNTI5Yy40NDguNzc2LjQ1IDEuNzMuMDA3IDIuNTA5LS40NDEuNzc0LTEuMjYgMS4yMzUtMi4xNyAxLjI0NUgyLjQ5M2MtLjkwMS0uMDEtMS43MjEtLjQ3MS0yLjE2Mi0xLjI0NWEyLjUyNSAyLjUyNSAwIDAgMSAuMDEzLTIuNTJMNy44NDMgMS43MTh6Ii8+PHBhdGggZmlsbD0iIzVFNjg4MCIgZD0iTTcuODQzIDEuNzE3YTIuNTIyIDIuNTIyIDAgMCAxIDQuMzE0IDBsNy41MDUgMTIuNTI5Yy40NDguNzc2LjQ1IDEuNzMuMDA3IDIuNTA5LS40NDEuNzc0LTEuMjYgMS4yMzUtMi4xNyAxLjI0NUgyLjQ5M2MtLjkwMS0uMDEtMS43MjEtLjQ3MS0yLjE2Mi0xLjI0NWEyLjUyNSAyLjUyNSAwIDAgMSAuMDEzLTIuNTJMNy44NDMgMS43MTh6TTEuNjM3IDE0Ljk5NmExLjAyIDEuMDIgMCAwIDAtLjAwMyAxLjAxNi45OTMuOTkzIDAgMCAwIC44NjcuNDg4aDE0Ljk5Yy4zNzgtLjAwNC43MDMtLjE4Ny44NzUtLjQ4OC4xOC0uMzE1LjE3OS0uNzAyLjAwMy0xLjAwNkwxMC44NzMgMi40OTFhMS4wMiAxLjAyIDAgMCAwLTEuNzQ1LS4wMDFMMS42MzcgMTQuOTk2eiIvPjxwYXRoIGZpbGw9IiM1RTY4ODAiIGQ9Ik0xMCAxMi4yNWExLjUgMS41IDAgMSAxIDAgMyAxLjUgMS41IDAgMCAxIDAtM3pNOSA2YTEgMSAwIDEgMSAyIDB2NGExIDEgMCAwIDEtMiAwVjZ6Ii8+PC9nPjwvc3ZnPgo=';
|
1331 |
|
1332 | var comment = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iIzYzNzM4MSIgZmlsbC1vcGFjaXR5PSIuMjUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjNUU2ODgwIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTMuNzUgMTguNDU3bDQuMDgyLTMuMjA3SDE2QTMuMjUgMy4yNSAwIDAgMCAxOS4yNSAxMlY0QTMuMjUgMy4yNSAwIDAgMCAxNiAuNzVINEEzLjI1IDMuMjUgMCAwIDAgLjc1IDR2OGEzLjI1MiAzLjI1MiAwIDAgMCAyLjQzNyAzLjE0OGwuNTYzLjE0NXYzLjE2NHoiLz48L3N2Zz4K';
|
1333 |
|
1334 | var landlord = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjNjM3MzgxIiBmaWxsLW9wYWNpdHk9Ii4yNSIgZD0iTTQuNDYyIDYuNDM3Yy4wNDYuNTI1LjI1NS45NDQuNjI4IDEuMjU3LjM3My4zMTMuODIyLjQ0NiAxLjM0Ny40LjUyNC0uMDQ2Ljk0My0uMjU1IDEuMjU2LS42MjguMzEzLS4zNzMuNDQ3LS44MjIuNC0xLjM0Ny0uMDQ1LS41MjQtLjI1NC0uOTQzLS42MjgtMS4yNTYtLjM3My0uMzEzLS44MTYtLjQ0Mi0xLjMzLS4zODdhMS44NDQgMS44NDQgMCAwIDAtMS42NzQgMS45NjF6bTYuOTg2IDEuNzY4bDcuMjc1IDYuMTA0LTIuMzc2IDIuODMtMS40MTUtMS4xODctMi4zNDggMi43OTgtMi43OTctMi4zNDggMi4zNDctMi43OTgtMy4wNjEtMi41NjhhNS4yNjMgNS4yNjMgMCAwIDEtMy4yMTMuNzUzYy0xLjE1Ny0uMDkyLTIuMTk2LS41MjQtMy4xMTgtMS4yOThDMS41OCA5LjUxNi45MzIgOC4yNzEuOCA2Ljc1N2MtLjEzMi0xLjUxMy4yOS0yLjg1MSAxLjI2Ni00LjAxNEMzLjA0IDEuNTggNC4yODUuOTMzIDUuNzk5LjhjMS41MTMtLjEzMyAyLjg1MS4yODkgNC4wMTQgMS4yNjUuOTIyLjc3MyAxLjUyOCAxLjcyMiAxLjgyIDIuODQ1YTUuMjYzIDUuMjYzIDAgMCAxLS4xODUgMy4yOTV6Ii8+PHBhdGggZmlsbD0iIzVFNjg4MCIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNMy42ODUgNi40NzNsLS4wMDItLjAzYTIuNTkzIDIuNTkzIDAgMCAxIC42MDktMS44MzZjLjQ0LS41MjQgMS4wMy0uODMgMS43MzQtLjkwNi43MTMtLjA3NyAxLjM2LjExMiAxLjg5Mi41NTguNTMuNDQ0LjgzIDEuMDQ3Ljg5NCAxLjc2Ni4wNjMuNzE4LS4xMyAxLjM2NS0uNTc0IDEuODk0LS40NDMuNTI5LTEuMDQ3LjgzLTEuNzY1Ljg5My0uNzE5LjA2My0xLjM2NS0uMTMtMS44OTQtLjU3My0uNTMtLjQ0NC0uODMtMS4wNDctLjg5NC0xLjc2NnptMS44NTguNjE3Yy4yMTcuMTgyLjQ2OC4yNTcuNzk5LjIyOC4zMy0uMDI5LjU2NS0uMTQ2Ljc0Ny0uMzYzLjE4My0uMjE4LjI1Ny0uNDY5LjIyOC0uOC0uMDI4LS4zMy0uMTQ2LS41NjUtLjM2My0uNzQ3LS4yMTQtLjE4LS40NTQtLjI1LS43NjgtLjIxNi0uMzI0LjAzNS0uNTYuMTU3LS43NDUuMzc5YTEuMDkyIDEuMDkyIDAgMCAwLS4yNi43ODdjLjAzMS4zMjIuMTQ4LjU1Mi4zNjIuNzMyem00Ljk4MyAxLjMxNmwuMTkzLS41Yy4zNTgtLjkyNy40MS0xLjg2NS4xNTktMi44MzctLjI1Mi0uOTctLjc3My0xLjc4NS0xLjU3Ni0yLjQ1OS0xLjAxLS44NDgtMi4xNTItMS4yMDctMy40NjctMS4wOTItMS4zMTYuMTE1LTIuMzc3LjY2Ny0zLjIyNSAxLjY3OC0uODQ4IDEuMDEtMS4yMDggMi4xNTItMS4wOTMgMy40NjcuMTE1IDEuMzE1LjY2OCAyLjM3NyAxLjY3OCAzLjIyNS44MDQuNjc0IDEuNjk1IDEuMDQ1IDIuNjk1IDEuMTI1YTQuNTA2IDQuNTA2IDAgMCAwIDIuNzY2LS42NDlsLjQ2LS4yNzcgNC4wNDUgMy4zOTYtMi4zNDcgMi43OTcgMS42NDkgMS4zODQgMi4zNDctMi43OTggMS40MTYgMS4xODggMS40MS0xLjY4Mi03LjExLTUuOTY2em05LjIyNCA1Ljc4MWwtMy4zNCAzLjk4LTEuNDE1LTEuMTg4LTIuMzQ4IDIuNzk4LTMuOTQ2LTMuMzEyIDIuMzQ3LTIuNzk4LTIuMDk0LTEuNzU3YTYuMDAzIDYuMDAzIDAgMCAxLTMuMTgyLjU5OGMtMS4zMTQtLjEwNS0yLjUtLjU5OS0zLjU0LTEuNDcxQy45MTUgOS45MzMuMTcxIDguNTA1LjAyMSA2Ljc5NC0uMTI4IDUuMDgyLjM1NiAzLjU0NyAxLjQ2IDIuMjMyIDIuNTY1LjkxNiAzLjk5Mi4xNzMgNS43MDQuMDIzYzEuNzExLS4xNSAzLjI0Ni4zMzQgNC41NjIgMS40MzggMS4wNC44NzMgMS43MzIgMS45NTYgMi4wNjMgMy4yMzFhNi4wMDMgNi4wMDMgMCAwIDEtLjAzNiAzLjIzOGw3LjQ1NyA2LjI1N3oiLz48L2c+PC9zdmc+Cg==';
|
1335 |
|
1336 | var draft = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGcgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iOSIgZmlsbD0iI0ZGRiIvPjxwYXRoIGZpbGw9IiMwMDdBQ0UiIGQ9Ik0xMS45ODggMTkuNzhhMSAxIDAgMCAxLS4yMi0xLjk3NiA3LjkzNSA3LjkzNSAwIDAgMCAyLjQ3LTEuMDIgMSAxIDAgMCAxIDEuMDU1IDEuNyA5Ljk3MyA5Ljk3MyAwIDAgMS0zLjA4MyAxLjI3MiAxLjAzNCAxLjAzNCAwIDAgMS0uMjIyLjAyNHptLTQuMDAyLS4wMDhjLS4wNzYgMC0uMTUtLjAwOC0uMjI1LS4wMjVhOS45OTcgOS45OTcgMCAwIDEtMy4wOS0xLjI4NSAxIDEgMCAxIDEgMS4wNjUtMS42OTNjLjc2LjQ4IDEuNTk4LjgyOCAyLjQ3NSAxLjAzYS45OTkuOTk5IDAgMCAxLS4yMjMgMS45NzR2LS4wMDJsLS4wMDIuMDAxem05LjYyNi0zLjk2N2ExLjAwMiAxLjAwMiAwIDAgMS0uODQ1LTEuNTMzYy40OC0uNzYuODMtMS41OTYgMS4wMzMtMi40NzJhMSAxIDAgMSAxIDEuOTUuNDUgMTAuMDU4IDEwLjA1OCAwIDAgMS0xLjI4NiAzLjA5Ljk5OS45OTkgMCAwIDEtLjg1Mi40NjV6bS0xNS4yNDQtLjAyOGEuOTg3Ljk4NyAwIDAgMS0uODQtLjQ2NWwtLjAxOC0uMDI4YTkuOTQ4IDkuOTQ4IDAgMCAxLTEuMjYzLTMuMDY3IDEgMSAwIDAgMSAxLjk1LS40NDNjLjIuODczLjU0MyAxLjcwNiAxLjAyIDIuNDY1YTEgMSAwIDAgMS0uODQ4IDEuNTM3bC0uMDAxLjAwMXpNMTguNzggOS4wMThhLjk5OS45OTkgMCAwIDEtLjk3My0uNzggOC4wNTQgOC4wNTQgMCAwIDAtMS4wMjMtMi40NzggMS4wMTQgMS4wMTQgMCAwIDEgLjMxLTEuMzkuOTkzLjk5MyAwIDAgMSAxLjM3LjI5OHYuMDAzbC4wMjIuMDM1Yy41OTQuOTUzIDEuMDI0IDIgMS4yNyAzLjA5NWExIDEgMCAwIDEtLjc1IDEuMmgtLjAwM2MtLjA3My4wMTQtLjE0OC4wMi0uMjIyLjAxOGwtLjAwMS0uMDAxek0xLjIyOCA4Ljk5MmExLjAwMiAxLjAwMiAwIDAgMS0uOTgxLTEuMjIzdi0uMDA0Yy4yNTItMS4wOTUuNjg0LTIuMTQgMS4yOC0zLjA5M2ExLjAwMyAxLjAwMyAwIDAgMSAxLjcwMSAxLjA2M2MtLjQ4Ljc2My0uODI3IDEuNi0xLjAyOCAyLjQ4YTEgMSAwIDAgMS0uOTcyLjc3NnYuMDAxem0xMy41NTgtNS42MTVhLjk4My45ODMgMCAwIDEtLjUzLS4xNTRBOCA4IDAgMCAwIDExLjc3OSAyLjJhMSAxIDAgMSAxIC4zNzktMS45NjRsLjA2My4wMTRhOS45MyA5LjkzIDAgMCAxIDMuMSAxLjI4Yy40NjguMjkzLjYxLjkxLjMxNSAxLjM3OGEuOTk0Ljk5NCAwIDAgMS0uODQ3LjQ2OGgtLjAwNGwuMDAxLjAwMXpNNS4yMjQgMy4zN2MtLjM0LjAwMi0uNjU3LS4xNy0uODQzLS40NTRhLjk5NS45OTUgMCAwIDEgLjQwMy0xLjQ0M0E5LjcxNyA5LjcxNyAwIDAgMSA3Ljc3Ni4yNDlhMSAxIDAgMSAxIC40NDUgMS45NWMtLjg3LjItMS43MDMuNTQ0LTIuNDYgMS4wMTgtLjE2LjEtLjM0Ny4xNTMtLjUzNi4xNTJsLS4wMDEuMDAxeiIvPjwvZz48L3N2Zz4K';
|
1337 |
|
1338 | var inApprovals = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGcgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iOSIgZmlsbD0iI0ZGRiIvPjxwYXRoIGZpbGw9IiM5QzZGMTkiIGQ9Ik0xMS45ODggMTkuNzhhMSAxIDAgMCAxLS4yMi0xLjk3NiA3LjkzNSA3LjkzNSAwIDAgMCAyLjQ3LTEuMDIgMSAxIDAgMCAxIDEuMDU1IDEuNyA5Ljk3MyA5Ljk3MyAwIDAgMS0zLjA4MyAxLjI3MiAxLjAzNCAxLjAzNCAwIDAgMS0uMjIyLjAyNHptLTQuMDAyLS4wMDhjLS4wNzYgMC0uMTUtLjAwOC0uMjI1LS4wMjVhOS45OTcgOS45OTcgMCAwIDEtMy4wOS0xLjI4NSAxIDEgMCAxIDEgMS4wNjUtMS42OTNjLjc2LjQ4IDEuNTk4LjgyOCAyLjQ3NSAxLjAzYS45OTkuOTk5IDAgMCAxLS4yMjMgMS45NzR2LS4wMDJsLS4wMDIuMDAxem05LjYyNi0zLjk2N2ExLjAwMiAxLjAwMiAwIDAgMS0uODQ1LTEuNTMzYy40OC0uNzYuODMtMS41OTYgMS4wMzMtMi40NzJhMSAxIDAgMSAxIDEuOTUuNDUgMTAuMDU4IDEwLjA1OCAwIDAgMS0xLjI4NiAzLjA5Ljk5OS45OTkgMCAwIDEtLjg1Mi40NjV6bS0xNS4yNDQtLjAyOGEuOTg3Ljk4NyAwIDAgMS0uODQtLjQ2NWwtLjAxOC0uMDI4YTkuOTQ4IDkuOTQ4IDAgMCAxLTEuMjYzLTMuMDY3IDEgMSAwIDAgMSAxLjk1LS40NDNjLjIuODczLjU0MyAxLjcwNiAxLjAyIDIuNDY1YTEgMSAwIDAgMS0uODQ4IDEuNTM3bC0uMDAxLjAwMXpNMTguNzggOS4wMThhLjk5OS45OTkgMCAwIDEtLjk3My0uNzggOC4wNTQgOC4wNTQgMCAwIDAtMS4wMjMtMi40NzggMS4wMTQgMS4wMTQgMCAwIDEgLjMxLTEuMzkuOTkzLjk5MyAwIDAgMSAxLjM3LjI5OHYuMDAzbC4wMjIuMDM1Yy41OTQuOTUzIDEuMDI0IDIgMS4yNyAzLjA5NWExIDEgMCAwIDEtLjc1IDEuMmgtLjAwM2MtLjA3My4wMTQtLjE0OC4wMi0uMjIyLjAxOGwtLjAwMS0uMDAxek0xLjIyOCA4Ljk5MmExLjAwMiAxLjAwMiAwIDAgMS0uOTgxLTEuMjIzdi0uMDA0Yy4yNTItMS4wOTUuNjg0LTIuMTQgMS4yOC0zLjA5M2ExLjAwMyAxLjAwMyAwIDAgMSAxLjcwMSAxLjA2M2MtLjQ4Ljc2My0uODI3IDEuNi0xLjAyOCAyLjQ4YTEgMSAwIDAgMS0uOTcyLjc3NnYuMDAxem0xMy41NTgtNS42MTVhLjk4My45ODMgMCAwIDEtLjUzLS4xNTRBOCA4IDAgMCAwIDExLjc3OSAyLjJhMSAxIDAgMSAxIC4zNzktMS45NjRsLjA2My4wMTRhOS45MyA5LjkzIDAgMCAxIDMuMSAxLjI4Yy40NjguMjkzLjYxLjkxLjMxNSAxLjM3OGEuOTk0Ljk5NCAwIDAgMS0uODQ3LjQ2OGgtLjAwNGwuMDAxLjAwMXpNNS4yMjQgMy4zN2MtLjM0LjAwMi0uNjU3LS4xNy0uODQzLS40NTRhLjk5NS45OTUgMCAwIDEgLjQwMy0xLjQ0M0E5LjcxNyA5LjcxNyAwIDAgMSA3Ljc3Ni4yNDlhMSAxIDAgMSAxIC40NDUgMS45NWMtLjg3LjItMS43MDMuNTQ0LTIuNDYgMS4wMTgtLjE2LjEtLjM0Ny4xNTMtLjUzNi4xNTJsLS4wMDEuMDAxeiIvPjxwYXRoIGZpbGw9IiM5Nzk3OTciIGQ9Ik0xMy44MiAxOS4yNDRsLS43NjQtMS44NDhhOC4wMDIgOC4wMDIgMCAwIDAtLjA1LTE0LjgxMkwxMy43NTguNzNhMTAuMDAyIDEwLjAwMiAwIDAgMSAuMDYzIDE4LjUxNHoiLz48L2c+PC9zdmc+Cg==';
|
1339 |
|
1340 | var executed = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGcgZmlsbD0ibm9uZSI+PGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iOSIgZmlsbD0iI0ZGRiIvPjxwYXRoIGZpbGw9IiMxMDgwNDMiIGQ9Ik0yLjkyNiAyLjkyNGMzLjkxLTMuOTAzIDEwLjI0Ni0zLjg5NyAxNC4xNS4wMTJzMy44OTggMTAuMjQtLjAxMiAxNC4xNDJjLTMuOTA1IDMuODk3LTEwLjIzIDMuODk3LTE0LjEzNSAwLTMuOTA0LTMuOTEtMy45MDQtMTAuMjQ0IDAtMTQuMTU0aC0uMDAzem0xLjQxMyAxMi43NDNhOC4wMTQgOC4wMTQgMCAwIDAgMTEuMzMtLjAwNiA4LjAwNSA4LjAwNSAwIDAgMC0uMDA3LTExLjMyNSA4LjAxMyA4LjAxMyAwIDAgMC0xMS4zMjMgMCA3Ljg4NiA3Ljg4NiAwIDAgMC0yLjI3MyA0LjY2M2g3LjUzbC0xLjMwMi0xLjI5YTEuMDA1IDEuMDA1IDAgMSAxIDEuNDIyLTEuNDIyTDEyLjcyIDkuMjljLjM5LjM5Mi4zOSAxLjAyNyAwIDEuNDJsLTMuMDA0IDMuMDAzYTEuMDE2IDEuMDE2IDAgMCAxLTEuNDIyIDAgMS4wMDggMS4wMDggMCAwIDEgMC0xLjQyTDkuNTk2IDExaC03LjUzYTcuODk0IDcuODk0IDAgMCAwIDIuMjczIDQuNjY2eiIvPjwvZz48L3N2Zz4K';
|
1341 |
|
1342 | var completed = 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGZpbGw9IiNGRkYiIGN4PSIxMCIgY3k9IjEwIiByPSI5Ii8+PHBhdGggZD0iTTEwIDBDNC40ODYgMCAwIDQuNDg2IDAgMTBzNC40ODYgMTAgMTAgMTAgMTAtNC40ODYgMTAtMTBTMTUuNTE0IDAgMTAgMG0wIDE4Yy00LjQxIDAtOC0zLjU5LTgtOHMzLjU5LTggOC04IDggMy41OSA4IDgtMy41OSA4LTggOG0yLjI5My0xMC43MDdMOSAxMC41ODYgNy43MDcgOS4yOTNhMSAxIDAgMSAwLTEuNDE0IDEuNDE0bDIgMmEuOTk3Ljk5NyAwIDAgMCAxLjQxNCAwbDQtNGExIDEgMCAxIDAtMS40MTQtMS40MTQiIGZpbGw9IiM5MTlFQUIiLz48L2c+PC9zdmc+Cg==';
|
1343 |
|
1344 | var failed = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSI5IiBmaWxsPSIjRkZGIi8+PHBhdGggZD0iTTEwIDBDNC40ODYgMCAwIDQuNDg2IDAgMTBzNC40ODYgMTAgMTAgMTAgMTAtNC40ODYgMTAtMTBTMTUuNTE0IDAgMTAgMG0wIDE4Yy00LjQxMSAwLTgtMy41ODktOC04czMuNTg5LTggOC04IDggMy41ODkgOCA4LTMuNTg5IDgtOCA4bTMuNzA3LTExLjcwN2EuOTk5Ljk5OSAwIDAgMC0xLjQxNCAwTDEwIDguNTg2IDcuNzA3IDYuMjkzYS45OTkuOTk5IDAgMSAwLTEuNDE0IDEuNDE0TDguNTg2IDEwbC0yLjI5MyAyLjI5M2EuOTk5Ljk5OSAwIDEgMCAxLjQxNCAxLjQxNEwxMCAxMS40MTRsMi4yOTMgMi4yOTNhLjk5Ny45OTcgMCAwIDAgMS40MTQgMCAuOTk5Ljk5OSAwIDAgMCAwLTEuNDE0TDExLjQxNCAxMGwyLjI5My0yLjI5M2EuOTk5Ljk5OSAwIDAgMCAwLTEuNDE0Ii8+PC9nPjwvc3ZnPgo=';
|
1345 |
|
1346 | var requestChanges = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTcuNCA4LjAxNWMzLjEuMDQ3IDQuMzU1LjIzMiA1LjY0NC44MjdDMTUuMTE2IDkuNzk4IDE2IDExLjcwOSAxNiAxNWExIDEgMCAwIDEtMiAwYzAtNC4wMzUtLjc3OS00Ljg0Ny02LjU2NC00Ljk3OGwyLjI3MSAyLjI3YTEgMSAwIDEgMS0xLjQxNCAxLjQxNWwtNC00YTEgMSAwIDAgMSAwLTEuNDE0bDQtNGExIDEgMCAwIDEgMS40MTQgMS40MTRMNy40IDguMDE1eiIvPjwvc3ZnPgo=';
|
1347 |
|
1348 | var styles$3 = {
|
1349 | "Icon": "p_uo",
|
1350 | "hasBackdrop": "p_g1",
|
1351 | "isColored": "p_zk",
|
1352 | "colorWhite": "p_f6",
|
1353 | "colorBlack": "p_i7",
|
1354 | "colorSkyLighter": "p_gx",
|
1355 | "colorSkyLight": "p_n7",
|
1356 | "colorSky": "p_q9",
|
1357 | "colorSkyDark": "p_jb",
|
1358 | "colorInkLightest": "p_hr",
|
1359 | "colorInkLighter": "p_r6",
|
1360 | "colorInkLight": "p_wa",
|
1361 | "colorInk": "p_v0",
|
1362 | "colorBlueLighter": "p_nu",
|
1363 | "colorBlueLight": "p_ax",
|
1364 | "colorBlue": "p_le",
|
1365 | "colorBlueDark": "p_d2",
|
1366 | "colorBlueDarker": "p_rv",
|
1367 | "colorIndigoLighter": "p_c9",
|
1368 | "colorIndigoLight": "p_od",
|
1369 | "colorIndigo": "p_l8",
|
1370 | "colorIndigoDark": "p_o4",
|
1371 | "colorIndigoDarker": "p_g4",
|
1372 | "colorTealLighter": "p_wn",
|
1373 | "colorTealLight": "p_g0",
|
1374 | "colorTeal": "p_j2",
|
1375 | "colorTealDark": "p_rb",
|
1376 | "colorTealDarker": "p_vy",
|
1377 | "colorGreenLighter": "p_xn",
|
1378 | "colorGreen": "p_zv",
|
1379 | "colorGreenDark": "p_l1",
|
1380 | "colorYellowLighter": "p_zm",
|
1381 | "colorYellow": "p_d6",
|
1382 | "colorYellowDark": "p_hu",
|
1383 | "colorOrange": "p_qq",
|
1384 | "colorOrangeDark": "p_m2",
|
1385 | "colorRedLighter": "p_u2",
|
1386 | "colorRed": "p_op",
|
1387 | "colorRedDark": "p_mu",
|
1388 | "colorPurple": "p_nz",
|
1389 | "Svg": "p_f7",
|
1390 | "Placeholder": "p_sh",
|
1391 | };
|
1392 |
|
1393 | const BUNDLED_ICONS = {
|
1394 | add,
|
1395 | alert,
|
1396 | arrowDown,
|
1397 | arrowLeft,
|
1398 | arrowRight,
|
1399 | arrowUp,
|
1400 | arrowUpDown,
|
1401 | calendar,
|
1402 | cancel,
|
1403 | cancelSmall,
|
1404 | caretDown,
|
1405 | caretUp,
|
1406 | checkmark,
|
1407 | chevronDown,
|
1408 | chevronLeft,
|
1409 | chevronRight,
|
1410 | chevronUp,
|
1411 | circleCancel,
|
1412 | circleChevronDown,
|
1413 | circleChevronLeft,
|
1414 | circleChevronRight,
|
1415 | circleChevronUp,
|
1416 | circleInformation,
|
1417 | circlePlus,
|
1418 | conversation,
|
1419 | delete: deleteIcon,
|
1420 | disable,
|
1421 | dispute,
|
1422 | duplicate,
|
1423 | embed,
|
1424 | export: exportIcon,
|
1425 | external,
|
1426 | help,
|
1427 | horizontalDots,
|
1428 | import: importIcon,
|
1429 | menu,
|
1430 | notes,
|
1431 | notification,
|
1432 | print,
|
1433 | refresh,
|
1434 | risk,
|
1435 | save,
|
1436 | search,
|
1437 | subtract,
|
1438 | view,
|
1439 | edit,
|
1440 | checkmarkLarge,
|
1441 | clock,
|
1442 | notificationCircle,
|
1443 | activity,
|
1444 | location,
|
1445 | misc,
|
1446 | person,
|
1447 | tag,
|
1448 | warning,
|
1449 | mail,
|
1450 | phone,
|
1451 | attentionFilled,
|
1452 | circleCheckmark,
|
1453 | circleInformationFilled,
|
1454 | property,
|
1455 | date,
|
1456 | dateStart,
|
1457 | dateEnd,
|
1458 | breakOption,
|
1459 | areaSales,
|
1460 | areaGross,
|
1461 | warningCircle,
|
1462 | warningTriangle,
|
1463 | comment,
|
1464 | landlord,
|
1465 | draft,
|
1466 | inApprovals,
|
1467 | executed,
|
1468 | completed,
|
1469 | failed,
|
1470 | requestChanges
|
1471 | };
|
1472 | const COLORS_WITH_BACKDROPS = ['teal', 'tealDark', 'greenDark', 'redDark', 'yellowDark', 'ink', 'inkLighter', 'inkLightest'];
|
1473 | function Icon$1({ source, color, backdrop, accessibilityLabel, polaris: { intl } }) {
|
1474 | if (color && backdrop && COLORS_WITH_BACKDROPS.indexOf(color) < 0) {
|
1475 |
|
1476 | console.warn(intl.translate('Polaris.Icon.backdropWarning', {
|
1477 | color,
|
1478 | colorsWithBackDrops: COLORS_WITH_BACKDROPS.join(', ')
|
1479 | }));
|
1480 | }
|
1481 | const className = styles.classNames(styles$3.Icon, color && styles$3[styles.variationName('color', color)], color && color !== 'white' && styles$3.isColored, backdrop && styles$3.hasBackdrop);
|
1482 | let contentMarkup;
|
1483 | if (source === 'placeholder') {
|
1484 | contentMarkup = React.createElement('div', { className: styles$3.Placeholder });
|
1485 | } else {
|
1486 | const iconSource = typeof source === 'string' ? BUNDLED_ICONS[source] : source;
|
1487 | contentMarkup = iconSource && iconSource.viewBox && iconSource.body && React.createElement('svg', { className: styles$3.Svg, viewBox: iconSource.viewBox, dangerouslySetInnerHTML: { __html: iconSource.body }, focusable: 'false', 'aria-hidden': 'true' });
|
1488 | }
|
1489 | return React.createElement(
|
1490 | 'span',
|
1491 | { className: className, 'aria-label': accessibilityLabel },
|
1492 | contentMarkup
|
1493 | );
|
1494 | }
|
1495 | var Icon$2 = withAppProvider()(Icon$1);
|
1496 |
|
1497 | const scrollable = {
|
1498 | props: { 'data-polaris-scrollable': true },
|
1499 | selector: '[data-polaris-scrollable]'
|
1500 | };
|
1501 | const overlay = {
|
1502 | props: { 'data-polaris-overlay': true },
|
1503 | selector: '[data-polaris-overlay]'
|
1504 | };
|
1505 | const layer = {
|
1506 | props: { 'data-polaris-layer': true },
|
1507 | selector: '[data-polaris-layer]'
|
1508 | };
|
1509 | const unstyled = {
|
1510 | props: { 'data-polaris-unstyled': true },
|
1511 | selector: '[data-polaris-unstyled]'
|
1512 | };
|
1513 |
|
1514 | var Duration;
|
1515 | (function (Duration) {
|
1516 | Duration[Duration["Instant"] = 0] = "Instant";
|
1517 | Duration[Duration["Fast"] = 100] = "Fast";
|
1518 | Duration[Duration["Base"] = 200] = "Base";
|
1519 | Duration[Duration["Slow"] = 300] = "Slow";
|
1520 | Duration[Duration["Slower"] = 400] = "Slower";
|
1521 | Duration[Duration["Slowest"] = 500] = "Slowest";
|
1522 | })(Duration || (Duration = {}));
|
1523 |
|
1524 | var _React$createContext = React.createContext({
|
1525 | forwardedRef: null
|
1526 | });
|
1527 |
|
1528 | const Provider = _React$createContext.Provider;
|
1529 | const Consumer = _React$createContext.Consumer;
|
1530 |
|
1531 | function withRef$1() {
|
1532 | return function addForwardRef(WrappedComponent) {
|
1533 |
|
1534 | class WithRef extends React.Component {
|
1535 | render() {
|
1536 | return React.createElement(
|
1537 | Consumer,
|
1538 | null,
|
1539 | ctx => React.createElement(WrappedComponent, Object.assign({}, this.props, { ref: ctx.forwardedRef }))
|
1540 | );
|
1541 | }
|
1542 | }
|
1543 | const FinalComponent = hoistStatics(WithRef, WrappedComponent);
|
1544 | return FinalComponent;
|
1545 | };
|
1546 | }
|
1547 |
|
1548 |
|
1549 | function compose$1(...wrappingFunctions) {
|
1550 | return function wrapComponent(OriginalComponent) {
|
1551 | const Result = compose(...wrappingFunctions)(OriginalComponent);
|
1552 | return React.forwardRef((props, ref) => {
|
1553 | return React.createElement(
|
1554 | Provider,
|
1555 | { value: { forwardedRef: ref } },
|
1556 | React.createElement(Result, props)
|
1557 | );
|
1558 | });
|
1559 | };
|
1560 | }
|
1561 |
|
1562 | class UnstyledLink$1 extends React.PureComponent {
|
1563 | render() {
|
1564 | const _a = this.props,
|
1565 | polaris = _a.polaris,
|
1566 | external = _a.external,
|
1567 | url = _a.url,
|
1568 | rest = tslib_1.__rest(_a, ["polaris", "external", "url"]);
|
1569 | if (polaris && polaris.link) {
|
1570 | const LinkComponent = polaris.link.getLinkComponent();
|
1571 | if (LinkComponent) {
|
1572 | const _b = this.props,
|
1573 | polaris = _b.polaris,
|
1574 | rest = tslib_1.__rest(_b, ["polaris"]);
|
1575 | return React.createElement(LinkComponent, Object.assign({}, unstyled.props, rest));
|
1576 | }
|
1577 | }
|
1578 | const target$$1 = external ? '_blank' : undefined;
|
1579 | const rel = external ? 'noopener noreferrer' : undefined;
|
1580 | return React.createElement('a', Object.assign({ target: target$$1 }, rest, { href: url, rel: rel }, unstyled.props));
|
1581 | }
|
1582 | }
|
1583 | var UnstyledLink$2 = compose$1(withAppProvider(), withRef$1())(UnstyledLink$1);
|
1584 |
|
1585 | var styles$4 = {
|
1586 | "VisuallyHidden": "p_bb",
|
1587 | };
|
1588 |
|
1589 | function VisuallyHidden$1({ children }) {
|
1590 | return React.createElement(
|
1591 | 'span',
|
1592 | { className: styles$4.VisuallyHidden },
|
1593 | children
|
1594 | );
|
1595 | }
|
1596 |
|
1597 | var styles$5 = {
|
1598 | "Badge": "p_cf",
|
1599 | "Pip": "p_f3",
|
1600 | "statusSuccess": "p_mn",
|
1601 | "statusInfo": "p_sf",
|
1602 | "statusAttention": "p_ee",
|
1603 | "statusWarning": "p_ny",
|
1604 | "statusDanger": "p_cy",
|
1605 | "statusNew": "p_lx",
|
1606 | "progressIncomplete": "p_ci",
|
1607 | "progressPartiallyComplete": "p_rt",
|
1608 | "progressComplete": "p_lw",
|
1609 | "Icon": "p_qn",
|
1610 | "hasIcon": "p_pk",
|
1611 | };
|
1612 |
|
1613 | const PROGRESS_LABELS = {
|
1614 | incomplete: 'incomplete',
|
1615 | partiallyComplete: 'partiallyComplete',
|
1616 | complete: 'complete'
|
1617 | };
|
1618 | const STATUS_LABELS = {
|
1619 | info: 'info',
|
1620 | success: 'success',
|
1621 | warning: 'warning',
|
1622 | attention: 'attention',
|
1623 | new: 'new',
|
1624 | danger: 'danger'
|
1625 | };
|
1626 | function Badge$1({ children, status, progress, icon, polaris: { intl } }) {
|
1627 | const className = styles.classNames(styles$5.Badge, status && styles$5[styles.variationName('status', status)], progress && styles$5[styles.variationName('progress', progress)], icon && styles$5.hasIcon);
|
1628 | let progressMarkup;
|
1629 | switch (progress) {
|
1630 | case PROGRESS_LABELS.incomplete:
|
1631 | progressMarkup = intl.translate('Polaris.Badge.PROGRESS_LABELS.incomplete');
|
1632 | break;
|
1633 | case PROGRESS_LABELS.partiallyComplete:
|
1634 | progressMarkup = intl.translate('Polaris.Badge.PROGRESS_LABELS.partiallyComplete');
|
1635 | break;
|
1636 | case PROGRESS_LABELS.complete:
|
1637 | progressMarkup = intl.translate('Polaris.Badge.PROGRESS_LABELS.complete');
|
1638 | break;
|
1639 | }
|
1640 | const pipMarkup = progress ? React.createElement(
|
1641 | 'span',
|
1642 | { className: styles$5.Pip },
|
1643 | React.createElement(
|
1644 | VisuallyHidden$1,
|
1645 | null,
|
1646 | progressMarkup
|
1647 | )
|
1648 | ) : null;
|
1649 | const iconMarkup = icon ? React.createElement(
|
1650 | 'span',
|
1651 | { className: styles$5.Icon },
|
1652 | React.createElement(Icon$2, { source: icon })
|
1653 | ) : null;
|
1654 | let statusMarkup;
|
1655 | switch (status) {
|
1656 | case STATUS_LABELS.info:
|
1657 | statusMarkup = intl.translate('Polaris.Badge.STATUS_LABELS.info');
|
1658 | break;
|
1659 | case STATUS_LABELS.success:
|
1660 | statusMarkup = intl.translate('Polaris.Badge.STATUS_LABELS.success');
|
1661 | break;
|
1662 | case STATUS_LABELS.warning:
|
1663 | statusMarkup = intl.translate('Polaris.Badge.STATUS_LABELS.warning');
|
1664 | break;
|
1665 | case STATUS_LABELS.attention:
|
1666 | statusMarkup = intl.translate('Polaris.Badge.STATUS_LABELS.attention');
|
1667 | break;
|
1668 | case STATUS_LABELS.danger:
|
1669 | statusMarkup = intl.translate('Polaris.Badge.STATUS_LABELS.danger');
|
1670 | break;
|
1671 | case STATUS_LABELS.new:
|
1672 | statusMarkup = intl.translate('Polaris.Badge.STATUS_LABELS.new');
|
1673 | break;
|
1674 | }
|
1675 | const statusLabelMarkup = status ? React.createElement(
|
1676 | VisuallyHidden$1,
|
1677 | null,
|
1678 | statusMarkup
|
1679 | ) : null;
|
1680 | return React.createElement(
|
1681 | 'span',
|
1682 | { className: className },
|
1683 | statusLabelMarkup,
|
1684 | pipMarkup,
|
1685 | iconMarkup,
|
1686 | children
|
1687 | );
|
1688 | }
|
1689 | var Badge$2 = withAppProvider()(Badge$1);
|
1690 |
|
1691 | var styles$6 = {
|
1692 | "ActionList": "p_ah",
|
1693 | "Section-withoutTitle": "p_hh",
|
1694 | "Actions": "p_ca",
|
1695 | "Section": "p_w3",
|
1696 | "Title": "p_n9",
|
1697 | "Item": "p_wo",
|
1698 | "destructive": "p_jy",
|
1699 | "disabled": "p_er",
|
1700 | "Image": "p_bj",
|
1701 | "Content": "p_qx",
|
1702 | "Text": "p_nr",
|
1703 | "BadgeWrapper": "p_do",
|
1704 | };
|
1705 |
|
1706 | function Item$1({ badge, content, url, onAction, icon, iconColor, image, disabled, external, destructive, ellipsis }) {
|
1707 | const className = reactUtilities.classNames(styles$6.Item, disabled && styles$6.disabled, destructive && styles$6.destructive);
|
1708 | let imageElement = null;
|
1709 | if (icon) {
|
1710 | imageElement = React.createElement(
|
1711 | 'div',
|
1712 | { className: styles$6.Image },
|
1713 | React.createElement(Icon$2, { source: icon, color: iconColor })
|
1714 | );
|
1715 | } else if (image) {
|
1716 | imageElement = React.createElement('div', { role: 'presentation', className: styles$6.Image, style: { backgroundImage: `url(${image}` } });
|
1717 | }
|
1718 | const contentMarkup = ellipsis && content ? `${content}…` : content;
|
1719 | const badgeMarkup = badge && React.createElement(
|
1720 | 'span',
|
1721 | { className: styles$6.BadgeWrapper },
|
1722 | React.createElement(
|
1723 | Badge$2,
|
1724 | { status: badge.status },
|
1725 | badge.content
|
1726 | )
|
1727 | );
|
1728 | const textMarkup = imageElement ? React.createElement(
|
1729 | 'div',
|
1730 | { className: styles$6.Text },
|
1731 | contentMarkup
|
1732 | ) : contentMarkup;
|
1733 | const contentElement = React.createElement(
|
1734 | 'div',
|
1735 | { className: styles$6.Content },
|
1736 | imageElement,
|
1737 | textMarkup,
|
1738 | badgeMarkup
|
1739 | );
|
1740 | const control = url ? React.createElement(
|
1741 | UnstyledLink$2,
|
1742 | { url: url, onClick: onAction, className: styles$6.Item, external: external },
|
1743 | contentElement
|
1744 | ) : React.createElement(
|
1745 | 'button',
|
1746 | { onClick: onAction, className: className, disabled: disabled, type: 'button' },
|
1747 | contentElement
|
1748 | );
|
1749 | return React.createElement(
|
1750 | 'li',
|
1751 | null,
|
1752 | control
|
1753 | );
|
1754 | }
|
1755 |
|
1756 | function Section$1({ section, hasMultipleSections, onActionAnyItem }) {
|
1757 | const handleAction = itemOnAction => {
|
1758 | return () => {
|
1759 | if (itemOnAction) {
|
1760 | itemOnAction();
|
1761 | }
|
1762 | if (onActionAnyItem) {
|
1763 | onActionAnyItem();
|
1764 | }
|
1765 | };
|
1766 | };
|
1767 | const actionMarkup = section.items.map((_a, index) => {
|
1768 | var content = _a.content,
|
1769 | onAction = _a.onAction,
|
1770 | item = tslib_1.__rest(_a, ["content", "onAction"]);
|
1771 |
|
1772 | return React.createElement(Item$1, Object.assign({ key: `${content}-${index}`, content: content, onAction: handleAction(onAction) }, item));
|
1773 | });
|
1774 | const className = section.title ? null : styles$6['Section-withoutTitle'];
|
1775 | const titleMarkup = section.title ? React.createElement(
|
1776 | 'p',
|
1777 | { className: styles$6.Title },
|
1778 | section.title
|
1779 | ) : null;
|
1780 | const sectionMarkup = React.createElement(
|
1781 | 'div',
|
1782 | { className: className },
|
1783 | titleMarkup,
|
1784 | React.createElement(
|
1785 | 'ul',
|
1786 | { className: styles$6.Actions },
|
1787 | actionMarkup
|
1788 | )
|
1789 | );
|
1790 | return hasMultipleSections ? React.createElement(
|
1791 | 'li',
|
1792 | { className: styles$6.Section },
|
1793 | sectionMarkup
|
1794 | ) : sectionMarkup;
|
1795 | }
|
1796 |
|
1797 | function ActionList$1({ items, sections = [], onActionAnyItem }) {
|
1798 | let finalSections = [];
|
1799 | if (items) {
|
1800 | finalSections = [{ items }, ...sections];
|
1801 | } else if (sections) {
|
1802 | finalSections = sections;
|
1803 | }
|
1804 | const hasMultipleSections = finalSections.length > 1;
|
1805 | const Element = hasMultipleSections ? 'ul' : 'div';
|
1806 | const sectionMarkup = finalSections.map((section, index) => {
|
1807 | return React.createElement(Section$1, { key: section.title || index, section: section, onActionAnyItem: onActionAnyItem, hasMultipleSections: hasMultipleSections });
|
1808 | });
|
1809 | return React.createElement(
|
1810 | Element,
|
1811 | { className: styles$6.ActionList },
|
1812 | sectionMarkup
|
1813 | );
|
1814 | }
|
1815 |
|
1816 | function Image$1(_a) {
|
1817 | var sourceSet = _a.sourceSet,
|
1818 | source = _a.source,
|
1819 | crossOrigin = _a.crossOrigin,
|
1820 | rest = tslib_1.__rest(_a, ["sourceSet", "source", "crossOrigin"]);
|
1821 |
|
1822 | const finalSourceSet = sourceSet ? sourceSet.map(({ source: subSource, descriptor }) => `${subSource} ${descriptor}`).join(',') : null;
|
1823 | return finalSourceSet ?
|
1824 |
|
1825 | React.createElement("img", Object.assign({ src: source, srcSet: finalSourceSet, crossOrigin: crossOrigin }, rest)) :
|
1826 |
|
1827 | React.createElement("img", Object.assign({ src: source }, rest, { crossOrigin: crossOrigin }));
|
1828 | }
|
1829 |
|
1830 | var styles$7 = {
|
1831 | "Avatar": "p_lb",
|
1832 | "sizeExtraSmall": "p_yr",
|
1833 | "sizeSmall": "p_rx",
|
1834 | "sizeMedium": "p_xt",
|
1835 | "sizeLarge": "p_fz",
|
1836 | "styleOne": "p_n3",
|
1837 | "styleTwo": "p_ry",
|
1838 | "styleThree": "p_ld",
|
1839 | "styleFour": "p_wm",
|
1840 | "styleFive": "p_a6",
|
1841 | "styleSix": "p_dr",
|
1842 | "hasImage": "p_qp",
|
1843 | "Image": "p_ed",
|
1844 | "Initials": "p_qj",
|
1845 | "Svg": "p_p0",
|
1846 | };
|
1847 |
|
1848 | var avatar1 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjMjQ1YjQ4IiBkPSJNMCAwaDEwMHYxMDBIMHoiLz48cGF0aCBmaWxsPSIjMmRiMTY3IiBkPSJNNjkgMHY2NS42NWwtMi0uMDF2MTkuODVsMiAuMDJWMTAwSDBWMGg2OXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNjcgNjUuNjR2MTkuODVsLTI1LjU3LS4xOUMzMiA4NS4yMiAyNS42IDgxLjQ2IDI1LjY4IDcyLjA2cy4yNS02Ljc0LjI1LTYuNzR6Ii8+PHBhdGggZmlsbD0iIzhkYzk1OCIgZD0iTTg2Ljk5IDU4SDY5VjBoMTAuOTNsNy4wNiA1OHoiLz48cGF0aCBmaWxsPSIjZWJlZGYxIiBkPSJNMjQuNTMgNDAuMjlhMTIuMjMgMTIuMjMgMCAwIDEgMjQuNDYgMCIgb3BhY2l0eT0iLjIiLz48cGF0aCBmaWxsPSIjOGRjOTU4IiBkPSJNNTkuNjIgNThBMTAuNjkgMTAuNjkgMCAwIDEgODEgNTh6Ii8+PC9zdmc+Cg==';
|
1849 |
|
1850 | var avatar2 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjMWUyNjVjIiBkPSJNLS4wMSAwaDEwMHYxMDBoLTEwMHoiLz48cGF0aCBmaWxsPSIjNWQ2Y2MxIiBkPSJNLS4wMSAwaDY5LjAydjEwMEgtLjAxeiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik02OC45MyA2NS44OGwtMjQuNDQtLjE5LS4wNSA2LjA5YzAgNS4yMiAzLjQ4IDkuNDcgOC42OSA5LjUybDE1LjguMTJ6Ii8+PHBhdGggZmlsbD0iI2ZmYzA0ZCIgZD0iTTY4LjkxIDExLjNsMTkuMTcgNDYuMjktMTkuMTctLjE2VjExLjN6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0yMy4yNSAzNi40M2EzLjIyIDMuMjIgMCAxIDAgMCA2LjQ0bTIxLjAxLTYuNDRhMy4yMiAzLjIyIDAgMCAwIDAgNi40NG0tMTMuNTUgMy43NGEzLjIyIDMuMjIgMCAxIDAgMCA2LjQ0bTMuMjItMjUuNTFhMy4yMiAzLjIyIDAgMCAwIDAgNi40NCIvPjwvc3ZnPgo=';
|
1851 |
|
1852 | var avatar3 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjNWQ2Y2MxIiBkPSJNLS4wMiAwaDEwMHYxMDBoLTEwMHoiLz48cGF0aCBmaWxsPSIjNmRjYWNlIiBkPSJNLjM5IDBoNjkuMDJ2MTAwSC4zOXoiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjUiIGQ9Ik0yNC4xOCAzMS4yMXYzLjQ3QTEwLjQzIDEwLjQzIDAgMCAwIDM0LjQgNDUuMjFhMTAuNDMgMTAuNDMgMCAwIDAgMTAuMjItMTAuNTN2LTMuNDciLz48cGF0aCBmaWxsPSIjZWJlZGYxIiBkPSJNMjAuMTEgNDkuMDdhMTYuMjIgMTYuMjIgMCAxIDEgMCAzMi40NCIgb3BhY2l0eT0iLjIiLz48cGF0aCBkPSJNNjkuNDQgMTguODNMOTAgNzFINjkuNDRWMTguODN6IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTU3LjU5IDcxYTYgNiAwIDAgMSAxMiAweiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPgo=';
|
1853 |
|
1854 | var avatar4 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjZmZlMGMzIiBkPSJNMC0uMDFoMTAwdjEwMEgweiIvPjxwYXRoIGZpbGw9IiM1ZDZjYzEiIGQ9Ik0wIDBoNjkuMDJ2MTAwSDB6Ii8+PHBhdGggZD0iTTY5LjAyIDBsMjQuMDMgNjEuNjlINjkuMDJWMHoiIGZpbGw9IiNmZjk2N2QiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjUiIGQ9Ik0zMC42OSAzMS45MXYtM2MwLTQuNzggMy40Ni04LjY1IDgtOC42NXM4IDMuODcgOCA4LjY1djMiLz48cGF0aCBmaWxsPSIjZWJlZGYxIiBkPSJNMTIuNzYgNTYuMDZhMTMuMzYgMTMuMzYgMCAxIDEgMjYuNzIgMCIgb3BhY2l0eT0iLjIiLz48cGF0aCBkPSJNODAgNjEuNDZsLTI5LjM0LjIzdi03LjMzYzAtNi4yOCA0LjA3LTExLjM2IDEwLjM0LTExLjQ0bDE5LS4xNHoiIGZpbGw9IiNmZjk2N2QiLz48L3N2Zz4K';
|
1855 |
|
1856 | var avatar5 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjOGRjOTU4IiBkPSJNMCAwaDcwLjAydjEwMEgweiIvPjxwYXRoIGQ9Ik02OS45MiAwdjU2LjMyTDQ5IDY3bC0uMyAyNS4wN1YxMDBIMTAwVjB6IiBmaWxsPSIjMmRiMTY3Ii8+PHBhdGggZmlsbD0iIzI0NWI0OCIgZD0iTTU5LjI3IDU4LjI5YTUuMjIgNS4yMiAwIDAgMC05LjQzIDQuNDgiLz48cGF0aCBkPSJNMjcuMTIgOS4zM2g0NC41M3YyLjE5SDI3LjEyem0tMTIuNDEgOS40OWg1Ni45NHYyLjE5SDE0LjcxeiIgZmlsbD0iIzJkYjE2NyIvPjxjaXJjbGUgY3g9IjE5LjY2IiBjeT0iNDQuOCIgcj0iMTEuMjIiIGZpbGw9IiNlYmVkZjEiIG9wYWNpdHk9Ii4yIi8+PC9zdmc+Cg==';
|
1857 |
|
1858 | var avatar6 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNLS4wMi0uMDFoMTAwdjEwMGgtMTAweiIgZmlsbD0iI2ZmZTBjMyIvPjxwYXRoIGZpbGw9IiNmZjk2N2QiIGQ9Ik0wIDBoNjkuNDF2MTAwSDB6Ii8+PHBhdGggZD0iTTY5LjkyIDB2NDQuMzJMNTEuMzQgNTV2NDVIMTAwVjB6IiBmaWxsPSIjZmZlMGMzIi8+PHBhdGggZmlsbD0iIzMyY2FjNiIgZD0iTTM5LjMyIDc2YTExLjg1IDExLjg1IDAgMCAwIDEyIDExLjYyVjc2Ii8+PHBhdGggZmlsbD0iIzAwOTc5NiIgZD0iTTM5LjMyIDc2YTEyIDEyIDAgMCAxIDEyLTExLjgyVjc2Ii8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNNDMuNzQgMTkuODNhMTIuODIgMTIuODIgMCAxIDEtMjUuNjQgMCIvPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iNCIgZD0iTTI3LjM5IDMxLjZsLTEuNTggNS45Nm05LjM3LTUuNzJsMi41NSA1LjQ3bTQuMjYtOS44NWwzLjUzIDQuNW0tMjUuNDMtNC41bC0zLjUzIDQuNSIvPjwvc3ZnPgo=';
|
1859 |
|
1860 | var avatar7 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMCAwaDEwMHYxMDAuNDhIMHoiIGZpbGw9IiM4ZGM5NTgiLz48cGF0aCBmaWxsPSIjMmRiMTY3IiBkPSJNODMgNjh2MzJsLTE0LS4xNnYuMTZIMFYwaDY5djY4aDE0eiIvPjxwYXRoIGQ9Ik02OS4yOSA0MS42OUgyMC42NnMtLjA5LTMtLjE3IDcuMTUgNyAxOC41MSAxNy4zNSAxOC41OWwzMS40NS41N3oiIGZpbGw9IiM4ZGM5NTgiLz48cGF0aCBkPSJNNjguNyAxMi40bDExLjU0IDI5LjI5SDY4LjdWMTIuNHoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNNjIuMjIgNDEuNjlhMy4zNCAzLjM0IDAgMSAxIDYuNjkgMHoiIGZpbGw9IiNmZmYiLz48cGF0aCBmaWxsPSIjMjQ1YjQ4IiBkPSJNNDEuNDUgMTguMDZhMi41NyAyLjU3IDAgMCAwLTUuMTQgME0zMy4zMyAyNGEyLjU3IDIuNTcgMCAxIDAtNS4xNCAwbTIwLjM2IDIuNThhMi41NyAyLjU3IDAgMSAwLTUuMTQgMCIvPjwvc3ZnPgo=';
|
1861 |
|
1862 | var avatar8 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjZmZlZGI5IiBkPSJNMCAwaDEwMHYxMDBIMHoiLz48cGF0aCBkPSJNNjQuNjMgMTcuMzNhMTcgMTcgMCAwIDEgNSAyOS43MiAxNi43NSAxNi43NSAwIDAgMS01IDIuNjIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjUiLz48cGF0aCBmaWxsPSIjZmZjMDRkIiBkPSJNMCAwaDY5LjAydjEwMEgweiIvPjxjaXJjbGUgY3g9IjQ1LjExIiBjeT0iMzMuNDkiIHI9IjE2Ljk4IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtMzcuMDIgNDUuMTI0IDMzLjQ5MykiLz48cGF0aCBmaWxsPSIjNWQ2Y2MxIiBkPSJNNjkuMDIgMzQuNDhsMTkuNDcgMzguNzQtMTkuNDcgMS41M1YzNC40OHoiLz48cGF0aCBkPSJNNjEuNiAzMy42N2ExMC4xNyAxMC4xNyAwIDAgMSAxNS40LjA4IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSI1Ii8+PC9zdmc+Cg==';
|
1863 |
|
1864 | var avatar9 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMCAwaDEwMHYxMDBIMHoiIGZpbGw9IiNmZmMwNGQiLz48cGF0aCBkPSJNMCAwaDY5LjQxdjEwMEgweiIgZmlsbD0iIzVkNmNjMSIvPjxwYXRoIGQ9Ik03MC4yMSA4MC44OGgtMTUuMWMtNC44MSAwLTUuNjgtNS44NC01LjY4LTUuODRoMjAuNzgiIGZpbGw9IiNmZmMwNGQiLz48cGF0aCBkPSJNODIgNjAuNDhsLTE0IC4yNVYwaDEwLjE3QzgwLjU5IDIwLjE0IDgyIDYwLjQ4IDgyIDYwLjQ4eiIgZmlsbD0iIzVkNmNjMSIvPjxwYXRoIGZpbGw9IiM0MTIzNmUiIGQ9Ik01Ny43MSA2MC40OGE1LjQ0IDUuNDQgMCAxIDEgMTAuODcgMCIvPjxjaXJjbGUgY3g9IjI0Ljc3IiBjeT0iNDAuMTkiIHI9IjExLjIyIiBmaWxsPSIjZWJlZGYxIiBvcGFjaXR5PSIuMiIvPjwvc3ZnPgo=';
|
1865 |
|
1866 |
|
1867 |
|
1868 | var avatars = Object.freeze({
|
1869 | avatarOne: avatar1,
|
1870 | avatarTwo: avatar2,
|
1871 | avatarThree: avatar3,
|
1872 | avatarFour: avatar4,
|
1873 | avatarFive: avatar5,
|
1874 | avatarSix: avatar6,
|
1875 | avatarSeven: avatar7,
|
1876 | avatarEight: avatar8,
|
1877 | avatarNine: avatar9
|
1878 | });
|
1879 |
|
1880 | const STYLE_CLASSES = ['one', 'two', 'three', 'four', 'five', 'six'];
|
1881 | const AVATAR_IMAGES = Object.keys(avatars).map(key => avatars[key]);
|
1882 | function Avatar$1({ name, source, initials, customer, size = 'medium', accessibilityLabel, polaris: { intl } }) {
|
1883 | const nameString = name || initials;
|
1884 | let finalSource;
|
1885 | let label;
|
1886 | if (accessibilityLabel) {
|
1887 | label = accessibilityLabel;
|
1888 | } else if (name) {
|
1889 | label = name;
|
1890 | } else if (initials) {
|
1891 | const splitInitials = initials.split('').join(' ');
|
1892 | label = intl.translate('Polaris.Avatar.labelWithInitials', {
|
1893 | initials: splitInitials
|
1894 | });
|
1895 | } else {
|
1896 | label = intl.translate('Polaris.Avatar.label');
|
1897 | }
|
1898 | if (source) {
|
1899 | finalSource = source;
|
1900 | } else if (customer) {
|
1901 | finalSource = customerPlaceholder(nameString);
|
1902 | }
|
1903 | const className = styles.classNames(styles$7.Avatar, styles$7[styles.variationName('style', styleClass(nameString))], size && styles$7[styles.variationName('size', size)], finalSource && styles$7.hasImage);
|
1904 | const imageMarkUp = finalSource ? React.createElement(Image$1, { className: styles$7.Image, source: finalSource, alt: '', role: 'presentation' }) : null;
|
1905 |
|
1906 | const verticalOffset = '0.35em';
|
1907 | const initialsMarkup = initials ? React.createElement(
|
1908 | 'span',
|
1909 | { className: styles$7.Initials },
|
1910 | React.createElement(
|
1911 | 'svg',
|
1912 | { className: styles$7.Svg, viewBox: '0 0 48 48' },
|
1913 | React.createElement(
|
1914 | 'text',
|
1915 | { x: '50%', y: '50%', dy: verticalOffset, fill: 'currentColor', fontSize: '26', textAnchor: 'middle' },
|
1916 | initials
|
1917 | )
|
1918 | )
|
1919 | ) : null;
|
1920 | return React.createElement(
|
1921 | 'span',
|
1922 | { 'aria-label': label, role: 'img', className: className },
|
1923 | initialsMarkup,
|
1924 | imageMarkUp
|
1925 | );
|
1926 | }
|
1927 | function styleClass(name) {
|
1928 | return name ? STYLE_CLASSES[name.charCodeAt(0) % STYLE_CLASSES.length] : STYLE_CLASSES[0];
|
1929 | }
|
1930 | function customerPlaceholder(name) {
|
1931 | return name ? AVATAR_IMAGES[name.charCodeAt(0) % AVATAR_IMAGES.length] : AVATAR_IMAGES[0];
|
1932 | }
|
1933 | var Avatar$2 = withAppProvider()(Avatar$1);
|
1934 |
|
1935 | function handleMouseUpByBlurring({ currentTarget }) {
|
1936 | currentTarget.blur();
|
1937 | }
|
1938 |
|
1939 | var styles$8 = {
|
1940 | "Spinner": "p_i0",
|
1941 | "loading": "p_e6",
|
1942 | "sizeSmall": "p_iw",
|
1943 | "sizeLarge": "p_u8",
|
1944 | "colorWhite": "p_yg",
|
1945 | "colorTeal": "p_cu",
|
1946 | "colorInkLightest": "p_i5",
|
1947 | };
|
1948 |
|
1949 | var spinnerSVGLarge = {"viewBox":"0 0 44 44","body":"<path d=\"M15.542 1.487A21.507 21.507 0 0 0 .5 22c0 11.874 9.626 21.5 21.5 21.5 9.847 0 18.364-6.675 20.809-16.072a1.5 1.5 0 0 0-2.904-.756C37.803 34.755 30.473 40.5 22 40.5 11.783 40.5 3.5 32.217 3.5 22c0-8.137 5.3-15.247 12.942-17.65a1.5 1.5 0 1 0-.9-2.863z\" />"};
|
1950 |
|
1951 | var spinnerSVGSmall = {"viewBox":"0 0 20 20","body":"<path d=\"M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z\" />"};
|
1952 |
|
1953 | const COLORS_FOR_LARGE_SPINNER = ['teal', 'inkLightest'];
|
1954 | function Spinner$1({ size = 'large', color = 'teal', accessibilityLabel, polaris: { intl } }) {
|
1955 | if (size === 'large' && COLORS_FOR_LARGE_SPINNER.indexOf(color) < 0) {
|
1956 | if (process.env.NODE_ENV === 'development') {
|
1957 |
|
1958 | console.warn(intl.translate('Polaris.Spinner.warningMessage', {
|
1959 | color,
|
1960 | size,
|
1961 | colors: COLORS_FOR_LARGE_SPINNER.join(', ')
|
1962 | }));
|
1963 | }
|
1964 |
|
1965 | size = 'small';
|
1966 | }
|
1967 | const className = styles.classNames(styles$8.Spinner, color && styles$8[styles.variationName('color', color)], size && styles$8[styles.variationName('size', size)]);
|
1968 | const spinnerSVG = size === 'large' ? spinnerSVGLarge : spinnerSVGSmall;
|
1969 | return React.createElement('svg', { viewBox: spinnerSVG.viewBox, dangerouslySetInnerHTML: { __html: spinnerSVG.body }, className: className, 'aria-label': accessibilityLabel, role: 'status' });
|
1970 | }
|
1971 | var Spinner$2 = withAppProvider()(Spinner$1);
|
1972 |
|
1973 | var styles$9 = {
|
1974 | "Indicator": "p_lr",
|
1975 | "pulseIndicator": "p_dm",
|
1976 | "bounce": "p_y3",
|
1977 | "pulse": "p_ak",
|
1978 | };
|
1979 |
|
1980 | function Indicator$1({ pulse = true }) {
|
1981 | const className = styles.classNames(styles$9.Indicator, pulse && styles$9.pulseIndicator);
|
1982 | return React.createElement('span', { className: className });
|
1983 | }
|
1984 |
|
1985 | var styles$10 = {
|
1986 | "Button": "p_vk",
|
1987 | "disabled": "p_tk",
|
1988 | "Content": "p_ei",
|
1989 | "Icon": "p_m8",
|
1990 | "Spinner": "p_t3",
|
1991 | "sizeSlim": "p_tj",
|
1992 | "primary": "p_pt",
|
1993 | "destructive": "p_m1",
|
1994 | "outline": "p_ay",
|
1995 | "loading": "p_ew",
|
1996 | "plain": "p_i4",
|
1997 | "fullWidth": "p_ri",
|
1998 | "sizeLarge": "p_eh",
|
1999 | "iconOnly": "p_a2",
|
2000 | "minimal": "p_yq",
|
2001 | };
|
2002 |
|
2003 | function Button$1({ id, url, disabled, loading, children, accessibilityLabel, ariaControls, ariaExpanded, onClick, onFocus, onBlur, external, icon, primary, outline, minimal, destructive, disclosure, plain, submit, size = 'medium', fullWidth, polaris: { intl } }) {
|
2004 | const indicator = false;
|
2005 | const isDisabled = disabled || loading;
|
2006 | const className = reactUtilities.classNames(styles$10.Button, primary && styles$10.primary, outline && styles$10.outline, minimal && styles$10.minimal, destructive && styles$10.destructive, isDisabled && styles$10.disabled, loading && styles$10.loading, plain && styles$10.plain, size && size !== 'medium' && styles$10[reactUtilities.variationName('size', size)], fullWidth && styles$10.fullWidth, icon && children == null && styles$10.iconOnly);
|
2007 | const disclosureIconMarkup = disclosure ? React.createElement(
|
2008 | IconWrapper,
|
2009 | null,
|
2010 | React.createElement(Icon$2, { source: loading ? 'placeholder' : 'caretDown' })
|
2011 | ) : null;
|
2012 | let iconMarkup;
|
2013 | if (icon) {
|
2014 | const iconInner = isIconSource(icon) ? React.createElement(Icon$2, { source: loading ? 'placeholder' : icon }) : icon;
|
2015 | iconMarkup = React.createElement(
|
2016 | IconWrapper,
|
2017 | null,
|
2018 | iconInner
|
2019 | );
|
2020 | }
|
2021 | const childMarkup = children ? React.createElement(
|
2022 | 'span',
|
2023 | null,
|
2024 | children
|
2025 | ) : null;
|
2026 | const spinnerColor = primary || destructive ? 'white' : 'inkLightest';
|
2027 | const spinnerSVGMarkup = loading ? React.createElement(
|
2028 | 'span',
|
2029 | { className: styles$10.Spinner },
|
2030 | React.createElement(Spinner$2, { size: 'small', color: spinnerColor, accessibilityLabel: intl.translate('Polaris.Button.spinnerAccessibilityLabel') })
|
2031 | ) : null;
|
2032 | const indicatorMarkup = indicator && React.createElement(Indicator$1, null);
|
2033 | const content = iconMarkup || disclosureIconMarkup ? React.createElement(
|
2034 | 'span',
|
2035 | { className: styles$10.Content },
|
2036 | spinnerSVGMarkup,
|
2037 | iconMarkup,
|
2038 | childMarkup,
|
2039 | disclosureIconMarkup
|
2040 | ) : React.createElement(
|
2041 | 'span',
|
2042 | { className: styles$10.Content },
|
2043 | spinnerSVGMarkup,
|
2044 | childMarkup
|
2045 | );
|
2046 | const type = submit ? 'submit' : 'button';
|
2047 | return url ? React.createElement(
|
2048 | UnstyledLink$2,
|
2049 | { id: id, url: url, external: external, onClick: onClick, onFocus: onFocus, onBlur: onBlur, onMouseUp: handleMouseUpByBlurring, className: className, disabled: isDisabled, 'aria-label': accessibilityLabel },
|
2050 | indicatorMarkup,
|
2051 | content
|
2052 | ) : React.createElement(
|
2053 | 'button',
|
2054 | { id: id, type: type, onClick: onClick, onFocus: onFocus, onBlur: onBlur, onMouseUp: handleMouseUpByBlurring, className: className, disabled: isDisabled, 'aria-label': accessibilityLabel, 'aria-controls': ariaControls, 'aria-expanded': ariaExpanded, role: loading ? 'alert' : undefined, 'aria-busy': loading ? true : undefined },
|
2055 | indicatorMarkup,
|
2056 | content
|
2057 | );
|
2058 | }
|
2059 | function IconWrapper({ children }) {
|
2060 | return React.createElement(
|
2061 | 'span',
|
2062 | { className: styles$10.Icon },
|
2063 | children
|
2064 | );
|
2065 | }
|
2066 | function isIconSource(x) {
|
2067 | return typeof x === 'string' || typeof x === 'object' && x.body;
|
2068 | }
|
2069 | var Button$2 = withAppProvider()(Button$1);
|
2070 |
|
2071 | function buttonsFrom(actions, overrides = {}) {
|
2072 | if (Array.isArray(actions)) {
|
2073 | return actions.map((action, index) => buttonFrom(action, overrides, index));
|
2074 | } else {
|
2075 | const action = actions;
|
2076 | return buttonFrom(action, overrides);
|
2077 | }
|
2078 | }
|
2079 | function buttonFrom(_a, overrides, key) {
|
2080 | var content = _a.content,
|
2081 | onAction = _a.onAction,
|
2082 | action = tslib_1.__rest(_a, ["content", "onAction"]);
|
2083 |
|
2084 | return React.createElement(
|
2085 | Button$2,
|
2086 | Object.assign({ key: key, onClick: onAction }, action, overrides),
|
2087 | content
|
2088 | );
|
2089 | }
|
2090 |
|
2091 | var styles$11 = {
|
2092 | "Heading": "p_l2",
|
2093 | };
|
2094 |
|
2095 | function Heading$1({ element: Element = 'h2', children }) {
|
2096 | return React.createElement(
|
2097 | Element,
|
2098 | { className: styles$11.Heading },
|
2099 | children
|
2100 | );
|
2101 | }
|
2102 |
|
2103 | var styles$12 = {
|
2104 | "ButtonGroup": "p_ug",
|
2105 | "Item": "p_l9",
|
2106 | "Item-plain": "p_d4",
|
2107 | "segmented": "p_n2",
|
2108 | "Item-focused": "p_o9",
|
2109 | "fullWidth": "p_s0",
|
2110 | "connectedTop": "p_vn",
|
2111 | };
|
2112 |
|
2113 | class Item$3 extends React.PureComponent {
|
2114 | constructor() {
|
2115 | super(...arguments);
|
2116 | this.state = { focused: false };
|
2117 | }
|
2118 | render() {
|
2119 | const button = this.props.button;
|
2120 | const focused = this.state.focused;
|
2121 |
|
2122 | const className = styles.classNames(styles$12.Item, focused && styles$12['Item-focused'], button.props.plain && styles$12['Item-plain']);
|
2123 | return React.createElement(
|
2124 | 'div',
|
2125 | { className: className, onFocus: this.handleFocus, onBlur: this.handleBlur },
|
2126 | button
|
2127 | );
|
2128 | }
|
2129 | handleFocus() {
|
2130 | this.setState({ focused: true });
|
2131 | }
|
2132 | handleBlur() {
|
2133 | this.setState({ focused: false });
|
2134 | }
|
2135 | }
|
2136 | tslib_1.__decorate([decorators.autobind], Item$3.prototype, "handleFocus", null);
|
2137 | tslib_1.__decorate([decorators.autobind], Item$3.prototype, "handleBlur", null);
|
2138 |
|
2139 | function ButtonGroup$1({ children, segmented, fullWidth, connectedTop }) {
|
2140 | const className = styles.classNames(styles$12.ButtonGroup, segmented && styles$12.segmented, fullWidth && styles$12.fullWidth, connectedTop && styles$12.connectedTop);
|
2141 | const contents = reactUtilities.elementChildren(children).map((child, index) => React.createElement(Item$3, { button: child, key: index }));
|
2142 | return React.createElement(
|
2143 | 'div',
|
2144 | { className: className },
|
2145 | contents
|
2146 | );
|
2147 | }
|
2148 |
|
2149 | var styles$13 = {
|
2150 | "Banner": "p_zt",
|
2151 | "withinContentContainer": "p_o7",
|
2152 | "statusSuccess": "p_np",
|
2153 | "statusInfo": "p_r5",
|
2154 | "statusWarning": "p_d1",
|
2155 | "statusCritical": "p_dh",
|
2156 | "Ribbon": "p_h6",
|
2157 | "Actions": "p_xz",
|
2158 | "Dismiss": "p_i9",
|
2159 | "withinPage": "p_hp",
|
2160 | "hasDismiss": "p_fm",
|
2161 | "Heading": "p_gi",
|
2162 | "Content": "p_im",
|
2163 | "SecondaryAction": "p_bt",
|
2164 | "Text": "p_lm",
|
2165 | };
|
2166 |
|
2167 | var successIcon = {"viewBox":"0 0 20 20","body":"<g fill-rule=\"evenodd\"><circle fill=\"currentColor\" cx=\"10\" cy=\"10\" r=\"9\"/><path d=\"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m2.293-10.707L9 10.586 7.707 9.293a1 1 0 1 0-1.414 1.414l2 2a.997.997 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414\" /></g>"};
|
2168 |
|
2169 | var fallbackIcon = {"viewBox":"0 0 20 20","body":"<g fill-rule=\"evenodd\"><path fill=\"currentColor\" d=\"M2 3h11v4h6l-2 4 2 4H8v-4H3\"/><path d=\"M16.105 11.447L17.381 14H9v-2h4a1 1 0 0 0 1-1V8h3.38l-1.274 2.552a.993.993 0 0 0 0 .895zM2.69 4H12v6H4.027L2.692 4zm15.43 7l1.774-3.553A1 1 0 0 0 19 6h-5V3c0-.554-.447-1-1-1H2.248L1.976.782a1 1 0 1 0-1.953.434l4 18a1.006 1.006 0 0 0 1.193.76 1 1 0 0 0 .76-1.194L4.47 12H7v3a1 1 0 0 0 1 1h11c.346 0 .67-.18.85-.476a.993.993 0 0 0 .044-.972l-1.775-3.553z\" /></g>"};
|
2170 |
|
2171 | var warningIcon = {"viewBox":"0 0 20 20","body":"<g fill-rule=\"evenodd\"><circle fill=\"currentColor\" cx=\"10\" cy=\"10\" r=\"9\"/><path d=\"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-13a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1m0 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2\" /></g>"};
|
2172 |
|
2173 | var criticalIcon = {"viewBox":"0 0 20 20","body":"<g fill-rule=\"evenodd\"><circle fill=\"currentColor\" cx=\"10\" cy=\"10\" r=\"9\"/><path d=\"M2 10c0-1.846.635-3.543 1.688-4.897l11.209 11.209A7.954 7.954 0 0 1 10 18c-4.411 0-8-3.589-8-8m14.312 4.897L5.103 3.688A7.954 7.954 0 0 1 10 2c4.411 0 8 3.589 8 8a7.952 7.952 0 0 1-1.688 4.897M0 10c0 5.514 4.486 10 10 10s10-4.486 10-10S15.514 0 10 0 0 4.486 0 10\" /></g>"};
|
2174 |
|
2175 | var infoIcon = {"viewBox":"0 0 20 20","body":"<g fill-rule=\"evenodd\"><circle cx=\"10\" cy=\"10\" r=\"9\" fill=\"currentColor\"/><path d=\"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0m0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8m1-5v-3a1 1 0 0 0-1-1H9a1 1 0 1 0 0 2v3a1 1 0 0 0 1 1h1a1 1 0 1 0 0-2m-1-5.9a1.1 1.1 0 1 0 0-2.2 1.1 1.1 0 0 0 0 2.2\"/></g>"};
|
2176 |
|
2177 | class Banner$1 extends React.PureComponent {
|
2178 | render() {
|
2179 | var _props = this.props;
|
2180 | const icon = _props.icon,
|
2181 | action = _props.action,
|
2182 | secondaryAction = _props.secondaryAction,
|
2183 | title = _props.title,
|
2184 | children = _props.children,
|
2185 | status = _props.status,
|
2186 | onDismiss = _props.onDismiss;
|
2187 | const withinContentContainer = this.context.withinContentContainer;
|
2188 |
|
2189 | let color;
|
2190 | let defaultIcon;
|
2191 | let ariaRoleType = 'status';
|
2192 | switch (status) {
|
2193 | case 'success':
|
2194 | color = 'greenDark';
|
2195 | defaultIcon = successIcon;
|
2196 | break;
|
2197 | case 'info':
|
2198 | color = 'blueDark';
|
2199 | defaultIcon = infoIcon;
|
2200 | break;
|
2201 | case 'warning':
|
2202 | color = 'yellowDark';
|
2203 | defaultIcon = warningIcon;
|
2204 | ariaRoleType = 'alert';
|
2205 | break;
|
2206 | case 'critical':
|
2207 | color = 'redDark';
|
2208 | defaultIcon = criticalIcon;
|
2209 | ariaRoleType = 'alert';
|
2210 | break;
|
2211 | default:
|
2212 | color = 'inkLighter';
|
2213 | defaultIcon = fallbackIcon;
|
2214 | }
|
2215 | const className = styles.classNames(styles$13.Banner, status && styles$13[styles.variationName('status', status)], onDismiss && styles$13.hasDismiss, withinContentContainer ? styles$13.withinContentContainer : styles$13.withinPage);
|
2216 | const id = uniqueID();
|
2217 | const iconName = icon || defaultIcon;
|
2218 | let headingMarkup = null;
|
2219 | let headingID;
|
2220 | if (title) {
|
2221 | headingID = `${id}Heading`;
|
2222 | headingMarkup = React.createElement(
|
2223 | 'div',
|
2224 | { className: styles$13.Heading, id: headingID },
|
2225 | React.createElement(
|
2226 | Heading$1,
|
2227 | { element: 'p' },
|
2228 | title
|
2229 | )
|
2230 | );
|
2231 | }
|
2232 | const buttonSizeValue = withinContentContainer ? 'slim' : undefined;
|
2233 | const secondaryActionMarkup = secondaryAction ? secondaryActionFrom(secondaryAction) : null;
|
2234 | const actionMarkup = action ? React.createElement(
|
2235 | 'div',
|
2236 | { className: styles$13.Actions },
|
2237 | React.createElement(
|
2238 | ButtonGroup$1,
|
2239 | null,
|
2240 | buttonFrom(action, { outline: true, size: buttonSizeValue }),
|
2241 | secondaryActionMarkup
|
2242 | )
|
2243 | ) : null;
|
2244 | let contentMarkup = null;
|
2245 | let contentID;
|
2246 | if (children || actionMarkup) {
|
2247 | contentID = `${id}Content`;
|
2248 | contentMarkup = React.createElement(
|
2249 | 'div',
|
2250 | { className: styles$13.Content, id: contentID },
|
2251 | children,
|
2252 | actionMarkup
|
2253 | );
|
2254 | }
|
2255 | const dismissButton = onDismiss ? React.createElement(
|
2256 | 'div',
|
2257 | { className: styles$13.Dismiss },
|
2258 | React.createElement(Button$2, { plain: true, icon: 'cancelSmall', onClick: onDismiss, accessibilityLabel: 'Dismiss notification' })
|
2259 | ) : null;
|
2260 | return React.createElement(
|
2261 | 'div',
|
2262 | { className: className
|
2263 |
|
2264 | , tabIndex: 0, role: ariaRoleType, 'aria-live': 'polite', onMouseUp: handleMouseUp, 'aria-labelledby': headingID, 'aria-describedby': contentID },
|
2265 | dismissButton,
|
2266 | React.createElement(
|
2267 | 'div',
|
2268 | { className: styles$13.Ribbon },
|
2269 | React.createElement(Icon$2, { source: iconName, color: color, backdrop: true })
|
2270 | ),
|
2271 | React.createElement(
|
2272 | 'div',
|
2273 | null,
|
2274 | headingMarkup,
|
2275 | contentMarkup
|
2276 | )
|
2277 | );
|
2278 | }
|
2279 | }
|
2280 | Banner$1.contextTypes = contentContextTypes;
|
2281 | let index = 1;
|
2282 | function uniqueID() {
|
2283 | return `Banner${index++}`;
|
2284 | }
|
2285 | function handleMouseUp({ currentTarget }) {
|
2286 | currentTarget.blur();
|
2287 | }
|
2288 | function secondaryActionFrom(action) {
|
2289 | if (action.url) {
|
2290 | return React.createElement(
|
2291 | UnstyledLink$2,
|
2292 | { className: styles$13.SecondaryAction, url: action.url, external: action.external },
|
2293 | React.createElement(
|
2294 | 'span',
|
2295 | { className: styles$13.Text },
|
2296 | action.content
|
2297 | )
|
2298 | );
|
2299 | }
|
2300 | return React.createElement(
|
2301 | 'button',
|
2302 | { className: styles$13.SecondaryAction, onClick: action.onAction },
|
2303 | React.createElement(
|
2304 | 'span',
|
2305 | { className: styles$13.Text },
|
2306 | action.content
|
2307 | )
|
2308 | );
|
2309 | }
|
2310 |
|
2311 | var styles$14 = {
|
2312 | "Breadcrumb": "p_w7",
|
2313 | "Icon": "p_kb",
|
2314 | "Content": "p_o6",
|
2315 | };
|
2316 |
|
2317 | class Breadcrumbs$1 extends React.PureComponent {
|
2318 | render() {
|
2319 | const breadcrumbs = this.props.breadcrumbs;
|
2320 |
|
2321 | const breadcrumb = breadcrumbs[breadcrumbs.length - 1];
|
2322 | if (breadcrumb == null) {
|
2323 | return null;
|
2324 | }
|
2325 | const content = breadcrumb.content;
|
2326 |
|
2327 | const contentMarkup = React.createElement(
|
2328 | React.Fragment,
|
2329 | null,
|
2330 | React.createElement(
|
2331 | 'span',
|
2332 | { className: styles$14.Icon },
|
2333 | React.createElement(Icon$2, { source: 'chevronLeft' })
|
2334 | ),
|
2335 | React.createElement(
|
2336 | 'span',
|
2337 | { className: styles$14.Content },
|
2338 | content
|
2339 | )
|
2340 | );
|
2341 | const breadcrumbMarkup = 'url' in breadcrumb ? React.createElement(
|
2342 | UnstyledLink$2,
|
2343 | { key: content, url: breadcrumb.url, className: styles$14.Breadcrumb, onMouseUp: handleMouseUpByBlurring },
|
2344 | contentMarkup
|
2345 | ) : React.createElement(
|
2346 | 'button',
|
2347 | { key: content, className: styles$14.Breadcrumb, onClick: breadcrumb.onAction, onMouseUp: handleMouseUpByBlurring, type: 'button' },
|
2348 | contentMarkup
|
2349 | );
|
2350 | return (
|
2351 |
|
2352 | React.createElement(
|
2353 | 'nav',
|
2354 | { role: 'navigation' },
|
2355 | breadcrumbMarkup
|
2356 | )
|
2357 | );
|
2358 | }
|
2359 | }
|
2360 |
|
2361 | var styles$15 = {
|
2362 | "Stack": "p_qc",
|
2363 | "Item": "p_yo",
|
2364 | "noWrap": "p_jj",
|
2365 | "vertical": "p_kn",
|
2366 | "spacingNone": "p_w6",
|
2367 | "spacingExtraTight": "p_sj",
|
2368 | "spacingTight": "p_la",
|
2369 | "spacingLoose": "p_s2",
|
2370 | "spacingExtraLoose": "p_ud",
|
2371 | "distributionLeading": "p_ft",
|
2372 | "distributionTrailing": "p_gj",
|
2373 | "distributionCenter": "p_mc",
|
2374 | "distributionEqualSpacing": "p_cl",
|
2375 | "distributionFill": "p_bv",
|
2376 | "distributionFillEvenly": "p_au",
|
2377 | "alignmentLeading": "p_bc",
|
2378 | "alignmentTrailing": "p_d0",
|
2379 | "alignmentCenter": "p_t1",
|
2380 | "alignmentFill": "p_xr",
|
2381 | "alignmentBaseline": "p_dd",
|
2382 | "Item-fill": "p_ye",
|
2383 | };
|
2384 |
|
2385 | function Item$5({ children, fill }) {
|
2386 | const className = styles.classNames(styles$15.Item, fill && styles$15['Item-fill']);
|
2387 | return React.createElement(
|
2388 | 'div',
|
2389 | { className: className },
|
2390 | children
|
2391 | );
|
2392 | }
|
2393 |
|
2394 | class Stack$1 extends React.PureComponent {
|
2395 | render() {
|
2396 | var _props = this.props;
|
2397 | const children = _props.children,
|
2398 | vertical = _props.vertical,
|
2399 | spacing = _props.spacing,
|
2400 | distribution = _props.distribution,
|
2401 | alignment = _props.alignment,
|
2402 | wrap = _props.wrap;
|
2403 |
|
2404 | const className = styles.classNames(styles$15.Stack, vertical && styles$15.vertical, spacing && styles$15[styles.variationName('spacing', spacing)], distribution && styles$15[styles.variationName('distribution', distribution)], alignment && styles$15[styles.variationName('alignment', alignment)], wrap === false && styles$15.noWrap);
|
2405 | const itemMarkup = reactUtilities.elementChildren(children).map((child, index) => {
|
2406 | const props = { key: index };
|
2407 | return reactUtilities.wrapWithComponent(child, Item$5, props);
|
2408 | });
|
2409 | return React.createElement(
|
2410 | 'div',
|
2411 | { className: className },
|
2412 | itemMarkup
|
2413 | );
|
2414 | }
|
2415 | }
|
2416 | Stack$1.Item = Item$5;
|
2417 |
|
2418 | var styles$16 = {
|
2419 | "Card": "p_z4",
|
2420 | "subdued": "p_b5",
|
2421 | "emphasis": "p_ai",
|
2422 | "Header": "p_k2",
|
2423 | "Section": "p_an",
|
2424 | "Section-fullWidth": "p_sc",
|
2425 | "Section-subdued": "p_t7",
|
2426 | "SectionHeader": "p_kp",
|
2427 | "Footer": "p_yl",
|
2428 | };
|
2429 |
|
2430 | function Header$1({ children, title, actions }) {
|
2431 | const actionMarkup = actions ? React.createElement(
|
2432 | ButtonGroup$1,
|
2433 | null,
|
2434 | buttonsFrom(actions, { plain: true })
|
2435 | ) : null;
|
2436 | const titleMarkup = React.isValidElement(title) ? title : React.createElement(
|
2437 | Heading$1,
|
2438 | null,
|
2439 | title
|
2440 | );
|
2441 | const headingMarkup = actionMarkup || children ? React.createElement(
|
2442 | Stack$1,
|
2443 | { alignment: 'baseline' },
|
2444 | React.createElement(
|
2445 | Stack$1.Item,
|
2446 | { fill: true },
|
2447 | titleMarkup
|
2448 | ),
|
2449 | actionMarkup,
|
2450 | children
|
2451 | ) : titleMarkup;
|
2452 | return React.createElement(
|
2453 | 'div',
|
2454 | { className: styles$16.Header },
|
2455 | headingMarkup
|
2456 | );
|
2457 | }
|
2458 |
|
2459 | var styles$17 = {
|
2460 | "Subheading": "p_u6",
|
2461 | };
|
2462 |
|
2463 | function Subheading$1({ element: Element = 'h3', children }) {
|
2464 | const ariaLabel = typeof children === 'string' ? children : undefined;
|
2465 | return React.createElement(
|
2466 | Element,
|
2467 | { 'aria-label': ariaLabel, className: styles$17.Subheading },
|
2468 | children
|
2469 | );
|
2470 | }
|
2471 |
|
2472 | function Section$3({ children, title, subdued, fullWidth, actions }) {
|
2473 | const actionMarkup = actions ? React.createElement(
|
2474 | ButtonGroup$1,
|
2475 | null,
|
2476 | buttonsFrom(actions, { plain: true })
|
2477 | ) : null;
|
2478 | const headerContent = title ? React.createElement(
|
2479 | 'div',
|
2480 | { className: styles$16.SectionHeader },
|
2481 | React.createElement(
|
2482 | Stack$1,
|
2483 | { alignment: 'baseline' },
|
2484 | React.createElement(
|
2485 | Stack$1.Item,
|
2486 | { fill: true },
|
2487 | React.createElement(
|
2488 | Subheading$1,
|
2489 | null,
|
2490 | title
|
2491 | )
|
2492 | ),
|
2493 | actionMarkup
|
2494 | )
|
2495 | ) : null;
|
2496 | const className = styles.classNames(styles$16.Section, subdued && styles$16['Section-subdued'], fullWidth && styles$16['Section-fullWidth']);
|
2497 | return React.createElement(
|
2498 | 'div',
|
2499 | { className: className },
|
2500 | headerContent,
|
2501 | children
|
2502 | );
|
2503 | }
|
2504 |
|
2505 | var propflowStyles = {
|
2506 | "Card": "p_sw",
|
2507 | "subdued": "p_pj",
|
2508 | "Header": "p_p2",
|
2509 | "Section": "p_r2",
|
2510 | "Section-fullWidth": "p_il",
|
2511 | "Section-subdued": "p_y9",
|
2512 | "SectionHeader": "p_vp",
|
2513 | "Footer": "p_xy",
|
2514 | };
|
2515 |
|
2516 | class Card$1 extends React.PureComponent {
|
2517 | constructor() {
|
2518 | super(...arguments);
|
2519 | this.styles = this.props.project === 'propflow' ? propflowStyles : styles$16;
|
2520 | }
|
2521 | getChildContext() {
|
2522 | return {
|
2523 | withinContentContainer: true
|
2524 | };
|
2525 | }
|
2526 | render() {
|
2527 | var _props = this.props;
|
2528 | const children = _props.children,
|
2529 | title = _props.title,
|
2530 | subdued = _props.subdued,
|
2531 | emphasis = _props.emphasis,
|
2532 | sectioned = _props.sectioned,
|
2533 | actions = _props.actions,
|
2534 | primaryFooterAction = _props.primaryFooterAction,
|
2535 | secondaryFooterAction = _props.secondaryFooterAction;
|
2536 |
|
2537 | const className = styles.classNames(this.styles.Card, emphasis && this.styles.emphasis, subdued && this.styles.subdued);
|
2538 | const headerMarkup = title ? React.createElement(Header$1, { actions: actions, title: title }) : null;
|
2539 | const content = sectioned ? React.createElement(
|
2540 | Section$3,
|
2541 | null,
|
2542 | children
|
2543 | ) : children;
|
2544 | const primaryFooterActionMarkup = primaryFooterAction ? buttonFrom(primaryFooterAction, { primary: true }) : null;
|
2545 | const secondaryFooterActionMarkup = secondaryFooterAction ? buttonFrom(secondaryFooterAction) : null;
|
2546 | const footerMarkup = primaryFooterActionMarkup || secondaryFooterActionMarkup ? React.createElement(
|
2547 | 'div',
|
2548 | { className: this.styles.Footer },
|
2549 | React.createElement(
|
2550 | ButtonGroup$1,
|
2551 | null,
|
2552 | primaryFooterActionMarkup,
|
2553 | secondaryFooterActionMarkup
|
2554 | )
|
2555 | ) : null;
|
2556 | return React.createElement(
|
2557 | 'div',
|
2558 | { className: className },
|
2559 | headerMarkup,
|
2560 | content,
|
2561 | footerMarkup
|
2562 | );
|
2563 | }
|
2564 | }
|
2565 | Card$1.Section = Section$3;
|
2566 | Card$1.Header = Header$1;
|
2567 | Card$1.childContextTypes = contentContextTypes;
|
2568 |
|
2569 | var styles$18 = {
|
2570 | "TextContainer": "p_zd",
|
2571 | "spacingTight": "p_tm",
|
2572 | "spacingLoose": "p_h9",
|
2573 | "alignmentLeft": "p_hq",
|
2574 | "alignmentCenter": "p_y7",
|
2575 | "alignmentRight": "p_qa",
|
2576 | };
|
2577 |
|
2578 | function TextContainer$1({ spacing, alignment, children }) {
|
2579 | const className = styles.classNames(styles$18.TextContainer, spacing && styles$18[styles.variationName('spacing', spacing)], alignment && styles$18[styles.variationName('alignment', alignment)]);
|
2580 | return React.createElement(
|
2581 | 'div',
|
2582 | { className: className },
|
2583 | children
|
2584 | );
|
2585 | }
|
2586 |
|
2587 | var styles$19 = {
|
2588 | "CalloutCard": "p_bk",
|
2589 | "Image": "p_vu",
|
2590 | "Content": "p_ae",
|
2591 | "Title": "p_mm",
|
2592 | "Buttons": "p_mv",
|
2593 | };
|
2594 |
|
2595 | function CalloutCard$1({ title, children, illustration, primaryAction, secondaryAction }) {
|
2596 | const primaryActionMarkup = buttonFrom(primaryAction);
|
2597 | const secondaryActionMarkup = secondaryAction ? buttonFrom(secondaryAction, { plain: true }) : null;
|
2598 | const buttonMarkup = secondaryActionMarkup ? React.createElement(
|
2599 | ButtonGroup$1,
|
2600 | null,
|
2601 | primaryActionMarkup,
|
2602 | secondaryActionMarkup
|
2603 | ) : primaryActionMarkup;
|
2604 | return React.createElement(
|
2605 | Card$1,
|
2606 | { sectioned: true },
|
2607 | React.createElement(
|
2608 | 'div',
|
2609 | { className: styles$19.CalloutCard },
|
2610 | React.createElement(
|
2611 | 'div',
|
2612 | { className: styles$19.Content },
|
2613 | React.createElement(
|
2614 | 'div',
|
2615 | { className: styles$19.Title },
|
2616 | React.createElement(
|
2617 | Heading$1,
|
2618 | null,
|
2619 | title
|
2620 | )
|
2621 | ),
|
2622 | React.createElement(
|
2623 | TextContainer$1,
|
2624 | null,
|
2625 | children
|
2626 | ),
|
2627 | React.createElement(
|
2628 | 'div',
|
2629 | { className: styles$19.Buttons },
|
2630 | buttonMarkup
|
2631 | )
|
2632 | ),
|
2633 | React.createElement(Image$1, { alt: '', className: styles$19.Image, source: illustration })
|
2634 | )
|
2635 | );
|
2636 | }
|
2637 |
|
2638 | var styles$20 = {
|
2639 | "Caption": "p_dw",
|
2640 | };
|
2641 |
|
2642 | function Caption$1({ children }) {
|
2643 | return React.createElement(
|
2644 | 'p',
|
2645 | { className: styles$20.Caption },
|
2646 | children
|
2647 | );
|
2648 | }
|
2649 |
|
2650 | var styles$21 = {
|
2651 | "InlineError": "p_dg",
|
2652 | "Icon": "p_xs",
|
2653 | };
|
2654 |
|
2655 | function InlineError$1({ message, fieldID }) {
|
2656 | if (!message) {
|
2657 | return null;
|
2658 | }
|
2659 | return React.createElement(
|
2660 | 'div',
|
2661 | { id: `${fieldID}Error`, className: styles$21.InlineError },
|
2662 | React.createElement(
|
2663 | 'div',
|
2664 | { className: styles$21.Icon },
|
2665 | React.createElement(Icon$2, { source: 'alert' })
|
2666 | ),
|
2667 | message
|
2668 | );
|
2669 | }
|
2670 |
|
2671 | var styles$22 = {
|
2672 | "Choice": "p_a4",
|
2673 | "labelHidden": "p_mi",
|
2674 | "Label": "p_qu",
|
2675 | "Control": "p_y2",
|
2676 | "disabled": "p_cn",
|
2677 | "Descriptions": "p_kx",
|
2678 | "HelpText": "p_v5",
|
2679 | };
|
2680 |
|
2681 | function Choice$1({ id, label, disabled, error, children, labelHidden, helpText }) {
|
2682 | const className = styles.classNames(styles$22.Choice, labelHidden && styles$22.labelHidden, disabled && styles$22.disabled);
|
2683 | const labelMarkup = React.createElement(
|
2684 | 'label',
|
2685 | { className: className, htmlFor: id },
|
2686 | React.createElement(
|
2687 | 'span',
|
2688 | { className: styles$22.Control },
|
2689 | children
|
2690 | ),
|
2691 | React.createElement(
|
2692 | 'span',
|
2693 | { className: styles$22.Label },
|
2694 | label
|
2695 | )
|
2696 | );
|
2697 | const helpTextMarkup = helpText ? React.createElement(
|
2698 | 'div',
|
2699 | { className: styles$22.HelpText, id: helpTextID(id) },
|
2700 | helpText
|
2701 | ) : null;
|
2702 | const errorMarkup = error && typeof error !== 'boolean' && React.createElement(
|
2703 | 'div',
|
2704 | { className: styles$22.Error },
|
2705 | React.createElement(InlineError$1, { message: error, fieldID: id })
|
2706 | );
|
2707 | const descriptionMarkup = helpTextMarkup || errorMarkup ? React.createElement(
|
2708 | 'div',
|
2709 | { className: styles$22.Descriptions },
|
2710 | errorMarkup,
|
2711 | helpTextMarkup
|
2712 | ) : null;
|
2713 | return descriptionMarkup ? React.createElement(
|
2714 | 'div',
|
2715 | null,
|
2716 | labelMarkup,
|
2717 | descriptionMarkup
|
2718 | ) : labelMarkup;
|
2719 | }
|
2720 | function helpTextID(id) {
|
2721 | return `${id}HelpText`;
|
2722 | }
|
2723 |
|
2724 | var styles$23 = {
|
2725 | "Checkbox": "p_zy",
|
2726 | "error": "p_ix",
|
2727 | "Backdrop": "p_tp",
|
2728 | "Icon": "p_pr",
|
2729 | "Input": "p_d7",
|
2730 | "Input-indeterminate": "p_ol",
|
2731 | "disabled": "p_wk",
|
2732 | };
|
2733 |
|
2734 | const getUniqueID = other.createUniqueIDFactory('Checkbox');
|
2735 | function Checkbox$1({ id = getUniqueID(), label, labelHidden, helpText, checked = false, error, disabled, onChange, onFocus, onBlur, name, value }) {
|
2736 | function handleChange(event) {
|
2737 | if (onChange == null) {
|
2738 | return;
|
2739 | }
|
2740 | const currentTarget = event.currentTarget;
|
2741 |
|
2742 | onChange(currentTarget.checked, id);
|
2743 | }
|
2744 | const describedBy = [];
|
2745 | if (error) {
|
2746 | describedBy.push(`${id}Error`);
|
2747 | }
|
2748 | if (helpText) {
|
2749 | describedBy.push(helpTextID(id));
|
2750 | }
|
2751 | const ariaDescribedBy = describedBy.length ? describedBy.join(' ') : undefined;
|
2752 | const wrapperClassName = styles.classNames(styles$23.Checkbox, error && styles$23.error);
|
2753 | const isIndeterminate = checked === 'indeterminate';
|
2754 | const isChecked = !isIndeterminate && Boolean(checked);
|
2755 | const indeterminateAttributes = isIndeterminate ? { indeterminate: 'true', 'aria-checked': 'mixed' } : { 'aria-checked': isChecked };
|
2756 | const iconSource = isIndeterminate ? 'subtract' : 'checkmark';
|
2757 | const inputClassName = styles.classNames(styles$23.Input, isIndeterminate && styles$23['Input-indeterminate']);
|
2758 | return (
|
2759 |
|
2760 | React.createElement(
|
2761 | Choice$1,
|
2762 | { id: id, label: label, labelHidden: labelHidden, helpText: helpText, error: error, disabled: disabled },
|
2763 | React.createElement(
|
2764 | 'span',
|
2765 | { className: wrapperClassName },
|
2766 | React.createElement('input', Object.assign({ id: id, name: name, value: value, type: 'checkbox', checked: isChecked, disabled: disabled, className: inputClassName, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, 'aria-invalid': error != null, 'aria-describedby': ariaDescribedBy, role: 'checkbox' }, indeterminateAttributes)),
|
2767 | React.createElement('span', { className: styles$23.Backdrop }),
|
2768 | React.createElement(
|
2769 | 'span',
|
2770 | { className: styles$23.Icon },
|
2771 | React.createElement(Icon$2, { source: iconSource })
|
2772 | )
|
2773 | )
|
2774 | )
|
2775 |
|
2776 |
|
2777 | );
|
2778 | }
|
2779 | var Checkbox$2 = withAppProvider()(Checkbox$1);
|
2780 |
|
2781 | var styles$24 = {
|
2782 | "RadioButton": "p_wi",
|
2783 | "Input": "p_pl",
|
2784 | "Backdrop": "p_yj",
|
2785 | "Icon": "p_ly",
|
2786 | };
|
2787 |
|
2788 | const getUniqueID$2 = other.createUniqueIDFactory('RadioButton');
|
2789 | function RadioButton$1({ label, labelHidden, helpText, checked, disabled, onChange, onFocus, onBlur, id = getUniqueID$2(), name = id, value }) {
|
2790 | function handleChange({ currentTarget }) {
|
2791 | if (onChange == null) {
|
2792 | return;
|
2793 | }
|
2794 | onChange(currentTarget.checked, id);
|
2795 | }
|
2796 | const describedBy = helpText ? helpTextID(id) : undefined;
|
2797 | return React.createElement(
|
2798 | Choice$1,
|
2799 | { label: label, labelHidden: labelHidden, disabled: disabled, id: id, helpText: helpText },
|
2800 | React.createElement(
|
2801 | 'span',
|
2802 | { className: styles$24.RadioButton },
|
2803 | React.createElement('input', { id: id, name: name, value: value, type: 'radio', checked: checked, disabled: disabled, className: styles$24.Input, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, 'aria-describedby': describedBy }),
|
2804 | React.createElement('span', { className: styles$24.Backdrop }),
|
2805 | React.createElement('span', { className: styles$24.Icon })
|
2806 | )
|
2807 | );
|
2808 | }
|
2809 |
|
2810 | var styles$25 = {
|
2811 | "ChoiceList": "p_mr",
|
2812 | "titleHidden": "p_zs",
|
2813 | "Title": "p_b4",
|
2814 | "Choices": "p_ib",
|
2815 | "ChoiceChildren": "p_rr",
|
2816 | "ChoiceError": "p_ch",
|
2817 | };
|
2818 |
|
2819 | const getUniqueID$1 = other.createUniqueIDFactory('ChoiceList');
|
2820 | function ChoiceList$1({ title, titleHidden, allowMultiple, choices, selected, onChange = other.noop, error, name = getUniqueID$1() }) {
|
2821 | const ControlComponent = allowMultiple ? Checkbox$2 : RadioButton$1;
|
2822 | const finalName = allowMultiple ? `${name}[]` : name;
|
2823 | const className = styles.classNames(styles$25.ChoiceList, titleHidden && styles$25.titleHidden);
|
2824 | const titleMarkup = title ? React.createElement(
|
2825 | 'legend',
|
2826 | { className: styles$25.Title },
|
2827 | title
|
2828 | ) : null;
|
2829 | const choicesMarkup = choices.map(choice => {
|
2830 | const value = choice.value,
|
2831 | label = choice.label,
|
2832 | helpText = choice.helpText,
|
2833 | disabled = choice.disabled;
|
2834 |
|
2835 | function handleChange(checked) {
|
2836 | onChange(updateSelectedChoices(choice, checked, selected, allowMultiple), name);
|
2837 | }
|
2838 | const isSelected = choiceIsSelected(choice, selected);
|
2839 | const children = choice.renderChildren ? React.createElement(
|
2840 | 'div',
|
2841 | { className: styles$25.ChoiceChildren },
|
2842 | choice.renderChildren(isSelected)
|
2843 | ) : null;
|
2844 | return React.createElement(
|
2845 | 'li',
|
2846 | { key: value },
|
2847 | React.createElement(ControlComponent, { name: finalName, value: value, label: label, disabled: disabled, checked: choiceIsSelected(choice, selected), helpText: helpText, onChange: handleChange }),
|
2848 | children
|
2849 | );
|
2850 | });
|
2851 | const errorMarkup = error && React.createElement(
|
2852 | 'div',
|
2853 | { className: styles$25.ChoiceError },
|
2854 | React.createElement(InlineError$1, { message: error, fieldID: finalName })
|
2855 | );
|
2856 | return React.createElement(
|
2857 | 'fieldset',
|
2858 | { className: className, id: finalName, 'aria-invalid': error != null, 'aria-describedby': `${finalName}Error` },
|
2859 | titleMarkup,
|
2860 | React.createElement(
|
2861 | 'ul',
|
2862 | { className: styles$25.Choices },
|
2863 | choicesMarkup
|
2864 | ),
|
2865 | errorMarkup
|
2866 | );
|
2867 | }
|
2868 | function choiceIsSelected({ value }, selected) {
|
2869 | return selected.indexOf(value) >= 0;
|
2870 | }
|
2871 | function updateSelectedChoices({ value }, checked, selected, allowMultiple = false) {
|
2872 | if (checked) {
|
2873 | return allowMultiple ? [...selected, value] : [value];
|
2874 | }
|
2875 | return selected.filter(selectedChoice => selectedChoice !== value);
|
2876 | }
|
2877 | var ChoiceList$2 = withAppProvider()(ChoiceList$1);
|
2878 |
|
2879 | var styles$26 = {
|
2880 | "Collapsible": "p_by",
|
2881 | "animating": "p_cz",
|
2882 | "open": "p_h4",
|
2883 | };
|
2884 |
|
2885 | const CONTEXT_TYPES = {
|
2886 | parentCollapsibleExpanding: PropTypes.bool
|
2887 | };
|
2888 | class Collapsible$1 extends React.Component {
|
2889 | constructor() {
|
2890 | super(...arguments);
|
2891 | this.state = {
|
2892 | height: null,
|
2893 | animationState: 'idle'
|
2894 | };
|
2895 | this.node = null;
|
2896 | this.heightNode = null;
|
2897 | }
|
2898 | getChildContext() {
|
2899 | const open = this.props.open;
|
2900 | const animationState = this.state.animationState;
|
2901 | const parentCollapsibleExpanding = this.context.parentCollapsibleExpanding;
|
2902 |
|
2903 | return {
|
2904 | parentCollapsibleExpanding: parentCollapsibleExpanding || open && animationState !== 'idle'
|
2905 | };
|
2906 | }
|
2907 |
|
2908 | componentWillReceiveProps({ open: willOpen }) {
|
2909 | const open = this.props.open;
|
2910 |
|
2911 | if (open !== willOpen) {
|
2912 | this.setState({ animationState: 'measuring' });
|
2913 | }
|
2914 | }
|
2915 | componentDidUpdate({ open: wasOpen }) {
|
2916 | const animationState = this.state.animationState;
|
2917 | const parentCollapsibleExpanding = this.context.parentCollapsibleExpanding;
|
2918 |
|
2919 | if (parentCollapsibleExpanding && animationState !== 'idle') {
|
2920 |
|
2921 | this.setState({
|
2922 | animationState: 'idle'
|
2923 | });
|
2924 | return;
|
2925 | }
|
2926 | fastdom.read(() => {
|
2927 | switch (animationState) {
|
2928 | case 'idle':
|
2929 | break;
|
2930 | case 'measuring':
|
2931 | this.setState({
|
2932 | animationState: wasOpen ? 'closingStart' : 'openingStart',
|
2933 | height: wasOpen && this.heightNode ? this.heightNode.scrollHeight : 0
|
2934 | });
|
2935 | break;
|
2936 | case 'closingStart':
|
2937 | this.setState({
|
2938 | animationState: 'closing',
|
2939 | height: 0
|
2940 | });
|
2941 | break;
|
2942 | case 'openingStart':
|
2943 | this.setState({
|
2944 | animationState: 'opening',
|
2945 | height: this.heightNode ? this.heightNode.scrollHeight : 0
|
2946 | });
|
2947 | }
|
2948 | });
|
2949 | }
|
2950 | componentDidMount() {
|
2951 | if (this.node == null) {
|
2952 | return;
|
2953 | }
|
2954 | events.addEventListener(this.node, 'transitionend', this.handleTransitionEnd);
|
2955 | }
|
2956 | componentWillUnmount() {
|
2957 | if (this.node == null) {
|
2958 | return;
|
2959 | }
|
2960 | events.removeEventListener(this.node, 'transitionend', this.handleTransitionEnd);
|
2961 | }
|
2962 | render() {
|
2963 | var _props = this.props;
|
2964 | const id = _props.id,
|
2965 | open = _props.open,
|
2966 | children = _props.children;
|
2967 | var _state = this.state;
|
2968 | const animationState = _state.animationState,
|
2969 | height = _state.height;
|
2970 |
|
2971 | const animating = animationState !== 'idle';
|
2972 | const wrapperClassName = styles.classNames(styles$26.Collapsible, open && styles$26.open, animating && styles$26.animating);
|
2973 | const displayHeight = collapsibleHeight(open, animationState, height);
|
2974 | const content = animating || open ? children : null;
|
2975 | return React.createElement(
|
2976 | 'div',
|
2977 | { id: id, 'aria-hidden': !open, style: { height: displayHeight }, className: wrapperClassName, ref: this.bindNode },
|
2978 | React.createElement(
|
2979 | 'div',
|
2980 | { ref: this.bindHeightNode },
|
2981 | content
|
2982 | )
|
2983 | );
|
2984 | }
|
2985 | bindNode(node) {
|
2986 | this.node = node;
|
2987 | }
|
2988 | bindHeightNode(node) {
|
2989 | this.heightNode = node;
|
2990 | }
|
2991 | handleTransitionEnd(event) {
|
2992 | const target$$1 = event.target;
|
2993 |
|
2994 | if (target$$1 === this.node) {
|
2995 | this.setState({ animationState: 'idle', height: null });
|
2996 | }
|
2997 | }
|
2998 | }
|
2999 | Collapsible$1.contextTypes = CONTEXT_TYPES;
|
3000 | Collapsible$1.childContextTypes = CONTEXT_TYPES;
|
3001 | tslib_1.__decorate([decorators.autobind], Collapsible$1.prototype, "bindNode", null);
|
3002 | tslib_1.__decorate([decorators.autobind], Collapsible$1.prototype, "bindHeightNode", null);
|
3003 | tslib_1.__decorate([decorators.autobind], Collapsible$1.prototype, "handleTransitionEnd", null);
|
3004 | function collapsibleHeight(open, animationState, height) {
|
3005 | if (animationState === 'idle' && open) {
|
3006 | return open ? 'auto' : undefined;
|
3007 | }
|
3008 | if (animationState === 'measuring') {
|
3009 | return open ? undefined : 'auto';
|
3010 | }
|
3011 | return `${height || 0}px`;
|
3012 | }
|
3013 | var Collapsible$2 = withAppProvider()(Collapsible$1);
|
3014 |
|
3015 | function rgbString(color) {
|
3016 | const red = color.red,
|
3017 | green = color.green,
|
3018 | blue = color.blue;
|
3019 |
|
3020 | if (color.hasOwnProperty('alpha')) {
|
3021 | return `rgba(${red}, ${green}, ${blue}, ${color.alpha})`;
|
3022 | } else {
|
3023 | return `rgb(${red}, ${green}, ${blue})`;
|
3024 | }
|
3025 | }
|
3026 | const rgbaString = rgbString;
|
3027 | function rgbToHex({ red, green, blue }) {
|
3028 | return `#${componentToHex(red)}${componentToHex(green)}${componentToHex(blue)}`;
|
3029 | }
|
3030 | function componentToHex(component) {
|
3031 | const hex = component.toString(16);
|
3032 | return hex.length === 1 ? `0${hex}` : hex;
|
3033 | }
|
3034 | function hsbToHex(color) {
|
3035 | return rgbToHex(hsbToRgb(color));
|
3036 | }
|
3037 | function hsbToRgb(color) {
|
3038 | const hue = color.hue,
|
3039 | saturation = color.saturation,
|
3040 | brightness = color.brightness;
|
3041 | var _color$alpha = color.alpha;
|
3042 | const alpha = _color$alpha === undefined ? 1 : _color$alpha;
|
3043 |
|
3044 | const chroma = brightness * saturation;
|
3045 | const huePrime = hue / 60;
|
3046 | const hueDelta = 1 - Math.abs(huePrime % 2 - 1);
|
3047 | const intermediateValue = chroma * hueDelta;
|
3048 | let red = 0;
|
3049 | let green = 0;
|
3050 | let blue = 0;
|
3051 | if (huePrime >= 0 && huePrime <= 1) {
|
3052 | red = chroma;
|
3053 | green = intermediateValue;
|
3054 | blue = 0;
|
3055 | }
|
3056 | if (huePrime >= 1 && huePrime <= 2) {
|
3057 | red = intermediateValue;
|
3058 | green = chroma;
|
3059 | blue = 0;
|
3060 | }
|
3061 | if (huePrime >= 2 && huePrime <= 3) {
|
3062 | red = 0;
|
3063 | green = chroma;
|
3064 | blue = intermediateValue;
|
3065 | }
|
3066 | if (huePrime >= 3 && huePrime <= 4) {
|
3067 | red = 0;
|
3068 | green = intermediateValue;
|
3069 | blue = chroma;
|
3070 | }
|
3071 | if (huePrime >= 4 && huePrime <= 5) {
|
3072 | red = intermediateValue;
|
3073 | green = 0;
|
3074 | blue = chroma;
|
3075 | }
|
3076 | if (huePrime >= 5 && huePrime <= 6) {
|
3077 | red = chroma;
|
3078 | green = 0;
|
3079 | blue = intermediateValue;
|
3080 | }
|
3081 | const chromaBrightnessDelta = brightness - chroma;
|
3082 | red += chromaBrightnessDelta;
|
3083 | green += chromaBrightnessDelta;
|
3084 | blue += chromaBrightnessDelta;
|
3085 | return {
|
3086 | red: Math.round(red * 255),
|
3087 | green: Math.round(green * 255),
|
3088 | blue: Math.round(blue * 255),
|
3089 | alpha
|
3090 | };
|
3091 | }
|
3092 | function rgbToHsb(color) {
|
3093 | var _color$alpha2 = color.alpha;
|
3094 | const alpha = _color$alpha2 === undefined ? 1 : _color$alpha2;
|
3095 |
|
3096 | const red = color.red / 255;
|
3097 | const green = color.green / 255;
|
3098 | const blue = color.blue / 255;
|
3099 | const largestComponent = Math.max(red, green, blue);
|
3100 | const smallestComponent = Math.min(red, green, blue);
|
3101 | const delta = largestComponent - smallestComponent;
|
3102 | const saturation = largestComponent === 0 ? 0 : delta / largestComponent;
|
3103 | let huePercentage = 0;
|
3104 | switch (largestComponent) {
|
3105 | case red:
|
3106 | huePercentage = (green - blue) / delta + (green < blue ? 6 : 0);
|
3107 | break;
|
3108 | case green:
|
3109 | huePercentage = (blue - red) / delta + 2;
|
3110 | break;
|
3111 | case blue:
|
3112 | huePercentage = (red - green) / delta + 4;
|
3113 | }
|
3114 | const hue = Math.round(huePercentage / 6 * 360);
|
3115 | return {
|
3116 | hue: math.clamp(hue, 0, 360) || 0,
|
3117 | saturation: math.clamp(saturation, 0, 1),
|
3118 | brightness: math.clamp(largestComponent, 0, 1),
|
3119 | alpha
|
3120 | };
|
3121 | }
|
3122 |
|
3123 |
|
3124 | class EventListener$1 extends React.PureComponent {
|
3125 | componentDidMount() {
|
3126 | this.attachListener();
|
3127 | }
|
3128 |
|
3129 | componentWillUpdate() {
|
3130 | this.detachListener();
|
3131 | }
|
3132 | componentDidUpdate() {
|
3133 | this.attachListener();
|
3134 | }
|
3135 | componentWillUnmount() {
|
3136 | this.detachListener();
|
3137 | }
|
3138 | render() {
|
3139 | return null;
|
3140 | }
|
3141 | attachListener() {
|
3142 | var _props = this.props;
|
3143 | const event = _props.event,
|
3144 | handler = _props.handler,
|
3145 | capture = _props.capture,
|
3146 | passive = _props.passive;
|
3147 |
|
3148 | events.addEventListener(window, event, handler, { capture, passive });
|
3149 | }
|
3150 | detachListener() {
|
3151 | var _props2 = this.props;
|
3152 | const event = _props2.event,
|
3153 | handler = _props2.handler,
|
3154 | capture = _props2.capture;
|
3155 |
|
3156 | events.removeEventListener(window, event, handler, capture);
|
3157 | }
|
3158 | }
|
3159 |
|
3160 | var styles$27 = {
|
3161 | "ColorPicker": "p_m4",
|
3162 | "MainColor": "p_ma",
|
3163 | "Dragger": "p_rp",
|
3164 | "ColorLayer": "p_x5",
|
3165 | "HuePicker": "p_zw",
|
3166 | "AlphaPicker": "p_bz",
|
3167 | "Slidable": "p_f2",
|
3168 | };
|
3169 |
|
3170 | class Slidable$1 extends React.PureComponent {
|
3171 | constructor() {
|
3172 | super(...arguments);
|
3173 | this.state = {
|
3174 | dragging: false
|
3175 | };
|
3176 | this.node = null;
|
3177 | this.draggerNode = null;
|
3178 | }
|
3179 | componentDidMount() {
|
3180 | const onDraggerHeight = this.props.onDraggerHeight;
|
3181 |
|
3182 | if (onDraggerHeight == null) {
|
3183 | return;
|
3184 | }
|
3185 | const draggerNode = this.draggerNode;
|
3186 |
|
3187 | if (draggerNode == null) {
|
3188 | return;
|
3189 | }
|
3190 | onDraggerHeight(draggerNode.clientWidth);
|
3191 | if (process.env.NODE_ENV === 'development') {
|
3192 | setTimeout(() => {
|
3193 | onDraggerHeight(draggerNode.clientWidth);
|
3194 | }, 0);
|
3195 | }
|
3196 | }
|
3197 | render() {
|
3198 | const dragging = this.state.dragging;
|
3199 | var _props = this.props,
|
3200 | _props$draggerX = _props.draggerX;
|
3201 | const draggerX = _props$draggerX === undefined ? 0 : _props$draggerX;
|
3202 | var _props$draggerY = _props.draggerY;
|
3203 | const draggerY = _props$draggerY === undefined ? 0 : _props$draggerY;
|
3204 |
|
3205 | const draggerPositioning = {
|
3206 | transform: `translate3d(${draggerX}px, ${draggerY}px, 0)`
|
3207 | };
|
3208 | const moveListener = dragging ? React.createElement(EventListener$1, { event: 'mousemove', handler: this.handleMove }) : null;
|
3209 | const touchMoveListener = dragging ? React.createElement(EventListener$1, { event: 'touchmove', handler: this.handleMove }) : null;
|
3210 | const endDragListener = dragging ? React.createElement(EventListener$1, { event: 'mouseup', handler: this.handleDragEnd }) : null;
|
3211 | const touchEndListener = dragging ? React.createElement(EventListener$1, { event: 'touchend', handler: this.handleDragEnd }) : null;
|
3212 | const touchCancelListener = dragging ? React.createElement(EventListener$1, { event: 'touchcancel', handler: this.handleDragEnd }) : null;
|
3213 | return React.createElement(
|
3214 | 'div',
|
3215 | { ref: this.setNode, className: styles$27.Slidable, onMouseDown: this.startDrag, onTouchStart: this.startDrag },
|
3216 | endDragListener,
|
3217 | moveListener,
|
3218 | touchMoveListener,
|
3219 | touchEndListener,
|
3220 | touchCancelListener,
|
3221 | React.createElement('div', { style: draggerPositioning, className: styles$27.Dragger, ref: this.setDraggerNode })
|
3222 | );
|
3223 | }
|
3224 | setDraggerNode(node) {
|
3225 | this.draggerNode = node;
|
3226 | }
|
3227 | setNode(node) {
|
3228 | this.node = node;
|
3229 | }
|
3230 | startDrag(event) {
|
3231 | if (event.type === 'mousedown') {
|
3232 | const mouseEvent = event;
|
3233 | this.handleDraggerMove(mouseEvent.clientX, mouseEvent.clientY);
|
3234 | }
|
3235 | this.setState({ dragging: true });
|
3236 | }
|
3237 | handleDragEnd() {
|
3238 | this.setState({ dragging: false });
|
3239 | }
|
3240 | handleMove(event) {
|
3241 | event.stopImmediatePropagation();
|
3242 | event.stopPropagation();
|
3243 | event.preventDefault();
|
3244 | if (event.type === 'mousemove') {
|
3245 | const mouseEvent = event;
|
3246 | this.handleDraggerMove(mouseEvent.clientX, mouseEvent.clientY);
|
3247 | return;
|
3248 | }
|
3249 | const touchEvent = event;
|
3250 | this.handleDraggerMove(touchEvent.touches[0].clientX, touchEvent.touches[0].clientY);
|
3251 | }
|
3252 | handleDraggerMove(x, y) {
|
3253 | if (this.node == null) {
|
3254 | return;
|
3255 | }
|
3256 | const onChange = this.props.onChange;
|
3257 |
|
3258 | const rect = this.node.getBoundingClientRect();
|
3259 | const offsetX = x - rect.left;
|
3260 | const offsetY = y - rect.top;
|
3261 | onChange({ x: offsetX, y: offsetY });
|
3262 | }
|
3263 | }
|
3264 | tslib_1.__decorate([decorators.autobind], Slidable$1.prototype, "setDraggerNode", null);
|
3265 | tslib_1.__decorate([decorators.autobind], Slidable$1.prototype, "setNode", null);
|
3266 | tslib_1.__decorate([decorators.autobind], Slidable$1.prototype, "startDrag", null);
|
3267 | tslib_1.__decorate([decorators.autobind], Slidable$1.prototype, "handleDragEnd", null);
|
3268 | tslib_1.__decorate([decorators.autobind], Slidable$1.prototype, "handleMove", null);
|
3269 | tslib_1.__decorate([decorators.autobind], Slidable$1.prototype, "handleDraggerMove", null);
|
3270 |
|
3271 | const VERTICAL_PADDING = 13;
|
3272 | class AlphaPicker$1 extends React.PureComponent {
|
3273 | constructor() {
|
3274 | super(...arguments);
|
3275 | this.state = {
|
3276 | sliderHeight: 0,
|
3277 | draggerHeight: 0
|
3278 | };
|
3279 | }
|
3280 | render() {
|
3281 | var _props = this.props;
|
3282 | const color = _props.color,
|
3283 | alpha = _props.alpha;
|
3284 | var _state = this.state;
|
3285 | const sliderHeight = _state.sliderHeight,
|
3286 | draggerHeight = _state.draggerHeight;
|
3287 |
|
3288 | const offset = offsetForAlpha(alpha, sliderHeight, draggerHeight);
|
3289 | const draggerY = math.clamp(offset, 0, sliderHeight);
|
3290 | const background = alphaGradientForColor(color);
|
3291 | return React.createElement(
|
3292 | 'div',
|
3293 | { className: styles$27.AlphaPicker, ref: this.setSliderHeight },
|
3294 | React.createElement('div', { className: styles$27.ColorLayer, style: { background } }),
|
3295 | React.createElement(Slidable$1, { draggerY: draggerY, draggerX: 0, onChange: this.handleChange, onDraggerHeight: this.setDraggerHeight })
|
3296 | );
|
3297 | }
|
3298 | setSliderHeight(node) {
|
3299 | if (node == null) {
|
3300 | return;
|
3301 | }
|
3302 | this.setState({ sliderHeight: node.clientHeight });
|
3303 | if (process.env.NODE_ENV === 'development') {
|
3304 | setTimeout(() => {
|
3305 | this.setState({ sliderHeight: node.clientHeight });
|
3306 | }, 0);
|
3307 | }
|
3308 | }
|
3309 | setDraggerHeight(height) {
|
3310 | this.setState({
|
3311 | draggerHeight: height
|
3312 | });
|
3313 | }
|
3314 | handleChange({ y }) {
|
3315 | const onChange = this.props.onChange;
|
3316 | const sliderHeight = this.state.sliderHeight;
|
3317 |
|
3318 | const offsetY = math.clamp(y, 0, sliderHeight);
|
3319 | const alpha = alphaForOffset(offsetY, sliderHeight);
|
3320 | onChange(alpha);
|
3321 | }
|
3322 | }
|
3323 | tslib_1.__decorate([decorators.autobind], AlphaPicker$1.prototype, "setSliderHeight", null);
|
3324 | tslib_1.__decorate([decorators.autobind], AlphaPicker$1.prototype, "setDraggerHeight", null);
|
3325 | tslib_1.__decorate([decorators.autobind], AlphaPicker$1.prototype, "handleChange", null);
|
3326 | function alphaForOffset(offset, sliderHeight) {
|
3327 | const selectionHeight = offset - VERTICAL_PADDING;
|
3328 | const slidableArea = sliderHeight - VERTICAL_PADDING * 2;
|
3329 | return math.clamp(1 - selectionHeight / slidableArea, 0, 1);
|
3330 | }
|
3331 | function offsetForAlpha(alpha, sliderHeight, draggerHeight) {
|
3332 | const slidableArea = sliderHeight - (draggerHeight + VERTICAL_PADDING);
|
3333 | return math.clamp((1 - alpha) * slidableArea + VERTICAL_PADDING, 0, sliderHeight - draggerHeight);
|
3334 | }
|
3335 | function alphaGradientForColor(color) {
|
3336 | var _hsbToRgb = hsbToRgb(color);
|
3337 |
|
3338 | const red = _hsbToRgb.red,
|
3339 | green = _hsbToRgb.green,
|
3340 | blue = _hsbToRgb.blue;
|
3341 |
|
3342 | const rgb = `${red}, ${green}, ${blue}`;
|
3343 | return `linear-gradient(to top, rgba(${rgb}, 0) 18px, rgba(${rgb}, 1) calc(100% - 18px))`;
|
3344 | }
|
3345 |
|
3346 | const VERTICAL_PADDING$1 = 13;
|
3347 | class HuePicker$1 extends React.PureComponent {
|
3348 | constructor() {
|
3349 | super(...arguments);
|
3350 | this.state = {
|
3351 | sliderHeight: 0,
|
3352 | draggerHeight: 0
|
3353 | };
|
3354 | }
|
3355 | render() {
|
3356 | const hue = this.props.hue;
|
3357 | var _state = this.state;
|
3358 | const sliderHeight = _state.sliderHeight,
|
3359 | draggerHeight = _state.draggerHeight;
|
3360 |
|
3361 | const offset = offsetForHue(hue, sliderHeight, draggerHeight);
|
3362 | const draggerY = math.clamp(offset, 0, sliderHeight);
|
3363 | return React.createElement(
|
3364 | 'div',
|
3365 | { className: styles$27.HuePicker, ref: this.setSliderHeight },
|
3366 | React.createElement(Slidable$1, { draggerY: draggerY, draggerX: 0, onChange: this.handleChange, onDraggerHeight: this.setDraggerHeight })
|
3367 | );
|
3368 | }
|
3369 | setSliderHeight(node) {
|
3370 | if (node == null) {
|
3371 | return;
|
3372 | }
|
3373 | this.setState({ sliderHeight: node.clientHeight });
|
3374 | if (process.env.NODE_ENV === 'development') {
|
3375 | setTimeout(() => {
|
3376 | this.setState({ sliderHeight: node.clientHeight });
|
3377 | }, 0);
|
3378 | }
|
3379 | }
|
3380 | setDraggerHeight(height) {
|
3381 | this.setState({
|
3382 | draggerHeight: height
|
3383 | });
|
3384 | }
|
3385 | handleChange({ y }) {
|
3386 | const onChange = this.props.onChange;
|
3387 | const sliderHeight = this.state.sliderHeight;
|
3388 |
|
3389 | const offsetY = math.clamp(y, 0, sliderHeight);
|
3390 | const hue = hueForOffset(offsetY, sliderHeight);
|
3391 | onChange(hue);
|
3392 | }
|
3393 | }
|
3394 | tslib_1.__decorate([decorators.autobind], HuePicker$1.prototype, "setSliderHeight", null);
|
3395 | tslib_1.__decorate([decorators.autobind], HuePicker$1.prototype, "setDraggerHeight", null);
|
3396 | tslib_1.__decorate([decorators.autobind], HuePicker$1.prototype, "handleChange", null);
|
3397 | function offsetForHue(hue, sliderHeight, draggerHeight) {
|
3398 | const slidableArea = sliderHeight - (draggerHeight + VERTICAL_PADDING$1);
|
3399 | return math.clamp(hue / 360 * slidableArea + VERTICAL_PADDING$1, 0, sliderHeight - draggerHeight);
|
3400 | }
|
3401 | function hueForOffset(offset, sliderHeight) {
|
3402 | const selectionHeight = offset - VERTICAL_PADDING$1;
|
3403 | const slidableArea = sliderHeight - VERTICAL_PADDING$1 * 2;
|
3404 | return math.clamp(selectionHeight / slidableArea * 360, 0, 360);
|
3405 | }
|
3406 |
|
3407 | class ColorPicker$1 extends React.PureComponent {
|
3408 | constructor() {
|
3409 | super(...arguments);
|
3410 | this.state = {
|
3411 | pickerSize: 0
|
3412 | };
|
3413 | this.colorNode = null;
|
3414 | }
|
3415 | componentDidMount() {
|
3416 | const colorNode = this.colorNode;
|
3417 |
|
3418 | if (colorNode == null) {
|
3419 | return;
|
3420 | }
|
3421 |
|
3422 | this.setState({ pickerSize: colorNode.clientWidth });
|
3423 | if (process.env.NODE_ENV === 'development') {
|
3424 | setTimeout(() => {
|
3425 | this.setState({ pickerSize: colorNode.clientWidth });
|
3426 | }, 0);
|
3427 | }
|
3428 | }
|
3429 | render() {
|
3430 | var _props = this.props;
|
3431 | const id = _props.id,
|
3432 | color = _props.color,
|
3433 | allowAlpha = _props.allowAlpha;
|
3434 | const hue = color.hue,
|
3435 | saturation = color.saturation,
|
3436 | brightness = color.brightness,
|
3437 | providedAlpha = color.alpha;
|
3438 | const pickerSize = this.state.pickerSize;
|
3439 |
|
3440 | const alpha = providedAlpha != null && allowAlpha ? providedAlpha : 1;
|
3441 |
|
3442 | var _hsbToRgb = hsbToRgb({ hue, saturation: 1, brightness: 1 });
|
3443 |
|
3444 | const red = _hsbToRgb.red,
|
3445 | green = _hsbToRgb.green,
|
3446 | blue = _hsbToRgb.blue;
|
3447 |
|
3448 | const colorString = `rgba(${red}, ${green}, ${blue}, ${alpha})`;
|
3449 | const draggerX = math.clamp(saturation * pickerSize, 0, pickerSize);
|
3450 | const draggerY = math.clamp(pickerSize - brightness * pickerSize, 0, pickerSize);
|
3451 | const alphaSliderMarkup = allowAlpha ? React.createElement(AlphaPicker$1, { alpha: alpha, color: color, onChange: this.handleAlphaChange }) : null;
|
3452 | return React.createElement(
|
3453 | 'div',
|
3454 | { className: styles$27.ColorPicker, id: id },
|
3455 | React.createElement(
|
3456 | 'div',
|
3457 | { ref: this.setColorNode, className: styles$27.MainColor },
|
3458 | React.createElement('div', { className: styles$27.ColorLayer, style: { backgroundColor: colorString } }),
|
3459 | React.createElement(Slidable$1, { onChange: this.handleDraggerMove, draggerX: draggerX, draggerY: draggerY })
|
3460 | ),
|
3461 | React.createElement(HuePicker$1, { hue: hue, onChange: this.handleHueChange }),
|
3462 | alphaSliderMarkup
|
3463 | );
|
3464 | }
|
3465 | setColorNode(node) {
|
3466 | this.colorNode = node;
|
3467 | }
|
3468 | handleHueChange(hue) {
|
3469 | var _props2 = this.props,
|
3470 | _props2$color = _props2.color;
|
3471 | const brightness = _props2$color.brightness,
|
3472 | saturation = _props2$color.saturation;
|
3473 | var _props2$color$alpha = _props2$color.alpha;
|
3474 | const alpha = _props2$color$alpha === undefined ? 1 : _props2$color$alpha,
|
3475 | onChange = _props2.onChange;
|
3476 |
|
3477 | onChange({ hue, brightness, saturation, alpha });
|
3478 | }
|
3479 | handleAlphaChange(alpha) {
|
3480 | var _props3 = this.props,
|
3481 | _props3$color = _props3.color;
|
3482 | const hue = _props3$color.hue,
|
3483 | brightness = _props3$color.brightness,
|
3484 | saturation = _props3$color.saturation,
|
3485 | onChange = _props3.onChange;
|
3486 |
|
3487 | onChange({ hue, brightness, saturation, alpha });
|
3488 | }
|
3489 | handleDraggerMove({ x, y }) {
|
3490 | const pickerSize = this.state.pickerSize;
|
3491 | var _props4 = this.props,
|
3492 | _props4$color = _props4.color;
|
3493 | const hue = _props4$color.hue;
|
3494 | var _props4$color$alpha = _props4$color.alpha;
|
3495 | const alpha = _props4$color$alpha === undefined ? 1 : _props4$color$alpha,
|
3496 | onChange = _props4.onChange;
|
3497 |
|
3498 | const saturation = math.clamp(x / pickerSize, 0, 1);
|
3499 | const brightness = math.clamp(1 - y / pickerSize, 0, 1);
|
3500 | onChange({ hue, saturation, brightness, alpha });
|
3501 | }
|
3502 | }
|
3503 | tslib_1.__decorate([decorators.autobind], ColorPicker$1.prototype, "setColorNode", null);
|
3504 | tslib_1.__decorate([decorators.autobind], ColorPicker$1.prototype, "handleHueChange", null);
|
3505 | tslib_1.__decorate([decorators.autobind], ColorPicker$1.prototype, "handleAlphaChange", null);
|
3506 | tslib_1.__decorate([decorators.autobind], ColorPicker$1.prototype, "handleDraggerMove", null);
|
3507 |
|
3508 | var styles$28 = {
|
3509 | "Connected": "p_g3",
|
3510 | "Item": "p_li",
|
3511 | "Item-primary": "p_zc",
|
3512 | "Item-connection": "p_yn",
|
3513 | "Item-focused": "p_e7",
|
3514 | };
|
3515 |
|
3516 | var ItemPosition;
|
3517 | (function (ItemPosition) {
|
3518 | ItemPosition[ItemPosition["Left"] = 0] = "Left";
|
3519 | ItemPosition[ItemPosition["Primary"] = 1] = "Primary";
|
3520 | ItemPosition[ItemPosition["Right"] = 2] = "Right";
|
3521 | })(ItemPosition || (ItemPosition = {}));
|
3522 | class Item$7 extends React.PureComponent {
|
3523 | constructor() {
|
3524 | super(...arguments);
|
3525 | this.state = { focused: false };
|
3526 | }
|
3527 | render() {
|
3528 | const focused = this.state.focused;
|
3529 | var _props = this.props;
|
3530 | const children = _props.children,
|
3531 | position = _props.position;
|
3532 |
|
3533 | const className = styles.classNames(styles$28.Item, focused && styles$28['Item-focused'], position === ItemPosition.Primary ? styles$28['Item-primary'] : styles$28['Item-connection']);
|
3534 | return React.createElement(
|
3535 | 'div',
|
3536 | { onBlur: this.handleBlur, onFocus: this.handleFocus, className: className },
|
3537 | children
|
3538 | );
|
3539 | }
|
3540 | handleBlur() {
|
3541 | this.setState({ focused: false });
|
3542 | }
|
3543 | handleFocus() {
|
3544 | this.setState({ focused: true });
|
3545 | }
|
3546 | }
|
3547 | tslib_1.__decorate([decorators.autobind], Item$7.prototype, "handleBlur", null);
|
3548 | tslib_1.__decorate([decorators.autobind], Item$7.prototype, "handleFocus", null);
|
3549 |
|
3550 | function Connected$1({ children, left, right }) {
|
3551 | if (left == null && right == null) {
|
3552 | return React.Children.only(children);
|
3553 | }
|
3554 | const leftConnectionMarkup = left ? React.createElement(
|
3555 | Item$7,
|
3556 | { position: ItemPosition.Left },
|
3557 | left
|
3558 | ) : null;
|
3559 | const rightConnectionMarkup = right ? React.createElement(
|
3560 | Item$7,
|
3561 | { position: ItemPosition.Right },
|
3562 | right
|
3563 | ) : null;
|
3564 | return React.createElement(
|
3565 | 'div',
|
3566 | { className: styles$28.Connected },
|
3567 | leftConnectionMarkup,
|
3568 | React.createElement(
|
3569 | Item$7,
|
3570 | { position: ItemPosition.Primary },
|
3571 | children
|
3572 | ),
|
3573 | rightConnectionMarkup
|
3574 | );
|
3575 | }
|
3576 |
|
3577 | var styles$29 = {
|
3578 | "DataField": "p_fd",
|
3579 | "Icon": "p_fc",
|
3580 | "SecondaryData": "p_qv",
|
3581 | "Content": "p_fy",
|
3582 | };
|
3583 |
|
3584 | var styles$30 = {
|
3585 | "Label": "p_jk",
|
3586 | "hidden": "p_co",
|
3587 | "Text": "p_vd",
|
3588 | "Optional": "p_yv",
|
3589 | };
|
3590 |
|
3591 | function labelID(id) {
|
3592 | return `${id}Label`;
|
3593 | }
|
3594 | function Label$1({ children, id, hidden, optional }) {
|
3595 | const className = styles.classNames(styles$30.Label, hidden && styles$30.hidden);
|
3596 | const optionalMarkup = optional ? React.createElement(
|
3597 | 'span',
|
3598 | { className: styles$30.Optional },
|
3599 | '(Optional)'
|
3600 | ) : null;
|
3601 | return React.createElement(
|
3602 | 'div',
|
3603 | { className: className },
|
3604 | React.createElement(
|
3605 | 'label',
|
3606 | { id: labelID(id), htmlFor: id, className: styles$30.Text },
|
3607 | children,
|
3608 | ' ',
|
3609 | optionalMarkup
|
3610 | )
|
3611 | );
|
3612 | }
|
3613 |
|
3614 | function DataField$1({ children, data, secondaryData, label, icon, iconColor }) {
|
3615 | const labelMarkup = label ? React.createElement(
|
3616 | Label$1,
|
3617 | { id: 'Data Field Label' },
|
3618 | label
|
3619 | ) : null;
|
3620 | const iconMarkup = icon ? React.createElement(
|
3621 | 'div',
|
3622 | { className: styles$29.Icon },
|
3623 | React.createElement(Icon$2, { source: icon, color: iconColor ? iconColor : "inkLighter" })
|
3624 | ) : null;
|
3625 | const secondaryDataMarkup = secondaryData ? React.createElement(
|
3626 | 'span',
|
3627 | { className: styles$29.SecondaryData },
|
3628 | ' \xB7 ',
|
3629 | secondaryData
|
3630 | ) : null;
|
3631 | const contentMarkup = children ? React.createElement(
|
3632 | 'div',
|
3633 | null,
|
3634 | children
|
3635 | ) : null;
|
3636 | const emptyMarkup = !children && !data ? React.createElement(
|
3637 | 'span',
|
3638 | { className: styles$29.SecondaryData },
|
3639 | '--'
|
3640 | ) : null;
|
3641 | return React.createElement(
|
3642 | 'div',
|
3643 | { className: styles$29.DataField },
|
3644 | iconMarkup,
|
3645 | React.createElement(
|
3646 | 'div',
|
3647 | { className: styles$29.Content },
|
3648 | labelMarkup,
|
3649 | React.createElement(
|
3650 | 'div',
|
3651 | { className: styles$29.Data },
|
3652 | data,
|
3653 | secondaryDataMarkup
|
3654 | ),
|
3655 | contentMarkup,
|
3656 | emptyMarkup
|
3657 | )
|
3658 | );
|
3659 | }
|
3660 |
|
3661 | var styles$31 = {
|
3662 | "DataTable": "p_m0",
|
3663 | "hasFooter": "p_ht",
|
3664 | "ScrollContainer": "p_ik",
|
3665 | "Navigation": "p_e8",
|
3666 | "Navigation-left": "p_ki",
|
3667 | "Navigation-right": "p_re",
|
3668 | "Navigation-button": "p_yy",
|
3669 | "Navigation-chevron": "p_ic",
|
3670 | "Pip": "p_u3",
|
3671 | "Pip-visible": "p_fs",
|
3672 | "Table": "p_yi",
|
3673 | "TableFoot": "p_fi",
|
3674 | "Cell": "p_hz",
|
3675 | "Cell-numeric": "p_wy",
|
3676 | "Cell-fixed": "p_dn",
|
3677 | "Cell-truncated": "p_nx",
|
3678 | "Cell-header": "p_p1",
|
3679 | "Cell-sortable": "p_du",
|
3680 | "Heading": "p_t2",
|
3681 | "Icon": "p_fq",
|
3682 | "Heading-left": "p_h7",
|
3683 | "Cell-sorted": "p_j6",
|
3684 | "Cell-total": "p_br",
|
3685 | "Cell-footer": "p_c2",
|
3686 | "collapsed": "p_ao",
|
3687 | };
|
3688 |
|
3689 | function Cell$1({ height, content, contentType, fixed, truncate, header, total, footer, sorted, sortable, sortDirection, defaultSortDirection, polaris: { intl: { translate } }, onSort }) {
|
3690 | const numeric = contentType === 'numeric';
|
3691 | const className = styles.classNames(styles$31.Cell, fixed && styles$31['Cell-fixed'], fixed && truncate && styles$31['Cell-truncated'], header && styles$31['Cell-header'], total && styles$31['Cell-total'], footer && styles$31['Cell-footer'], numeric && styles$31['Cell-numeric'], sortable && styles$31['Cell-sortable'], sorted && styles$31['Cell-sorted']);
|
3692 | const headerClassName = styles.classNames(header && styles$31.Heading, header && contentType === 'text' && styles$31['Heading-left']);
|
3693 | const iconClassName = styles.classNames(sortable && styles$31.Icon);
|
3694 | const style = {
|
3695 | height: height ? `${height}px` : undefined
|
3696 | };
|
3697 | const direction = sorted ? sortDirection : defaultSortDirection;
|
3698 | const source = `caret${direction === 'ascending' ? 'Up' : 'Down'}`;
|
3699 | const oppositeDirection = sortDirection === 'ascending' ? 'descending' : 'ascending';
|
3700 | const sortAccessibilityLabel = translate('Polaris.DataTable.sortAccessibilityLabel', { direction: sorted ? oppositeDirection : direction });
|
3701 | const iconMarkup = React.createElement(
|
3702 | 'span',
|
3703 | { className: iconClassName },
|
3704 | React.createElement(Icon$2, { source: source, accessibilityLabel: sortAccessibilityLabel })
|
3705 | );
|
3706 | const sortableHeadingContent = React.createElement(
|
3707 | 'button',
|
3708 | { className: headerClassName, onClick: onSort },
|
3709 | iconMarkup,
|
3710 | content
|
3711 | );
|
3712 | const columnHeadingContent = sortable ? sortableHeadingContent : content;
|
3713 | const headingMarkup = header ? React.createElement(
|
3714 | 'th',
|
3715 | { className: className, scope: 'col', 'aria-sort': sortDirection, style: style },
|
3716 | columnHeadingContent
|
3717 | ) : React.createElement(
|
3718 | 'th',
|
3719 | { className: className, scope: 'row', style: style },
|
3720 | content
|
3721 | );
|
3722 | const cellMarkup = header || fixed ? headingMarkup : React.createElement(
|
3723 | 'td',
|
3724 | { className: className, style: style },
|
3725 | content
|
3726 | );
|
3727 | return cellMarkup;
|
3728 | }
|
3729 | var Cell$2 = withAppProvider()(Cell$1);
|
3730 |
|
3731 | var chevronLeft$1 = 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyIDE2YS45OTcuOTk3IDAgMCAxLS43MDctLjI5M2wtNS01YS45OTkuOTk5IDAgMCAxIDAtMS40MTRsNS01YS45OTkuOTk5IDAgMSAxIDEuNDE0IDEuNDE0TDguNDE0IDEwbDQuMjkzIDQuMjkzQS45OTkuOTk5IDAgMCAxIDEyIDE2IiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4K';
|
3732 |
|
3733 | var chevronRight$1 = 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTggMTZhLjk5OS45OTkgMCAwIDEtLjcwNy0xLjcwN0wxMS41ODYgMTAgNy4yOTMgNS43MDdhLjk5OS45OTkgMCAxIDEgMS40MTQtMS40MTRsNSA1YS45OTkuOTk5IDAgMCAxIDAgMS40MTRsLTUgNUEuOTk3Ljk5NyAwIDAgMSA4IDE2IiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4K';
|
3734 |
|
3735 | function Navigation$1({ isScrolledFarthestLeft, isScrolledFarthestRight, navigateTableLeft, navigateTableRight, polaris: { intl: { translate } } }) {
|
3736 | const leftA11yLabel = translate('Polaris.DataTable.navAccessibilityLabel', {
|
3737 | direction: 'left'
|
3738 | });
|
3739 | const rightA11yLabel = translate('Polaris.DataTable.navAccessibilityLabel', {
|
3740 | direction: 'right'
|
3741 | });
|
3742 | const leftButton = isScrolledFarthestLeft ? null : React.createElement(
|
3743 | 'div',
|
3744 | { className: styles$31['Navigation-left'] },
|
3745 | React.createElement(
|
3746 | 'a',
|
3747 | { 'aria-label': leftA11yLabel, className: styles$31['Navigation-button'], onClick: navigateTableLeft },
|
3748 | React.createElement('img', { src: chevronLeft$1, className: styles$31['Navigation-chevron'] })
|
3749 | )
|
3750 | );
|
3751 | const rightButton = isScrolledFarthestRight ? null : React.createElement(
|
3752 | 'div',
|
3753 | { className: styles$31['Navigation-right'] },
|
3754 | React.createElement(
|
3755 | 'a',
|
3756 | { 'aria-label': rightA11yLabel, className: styles$31['Navigation-button'], onClick: navigateTableRight },
|
3757 | React.createElement('img', { src: chevronRight$1, className: styles$31['Navigation-chevron'] })
|
3758 | )
|
3759 | );
|
3760 | return React.createElement(
|
3761 | 'div',
|
3762 | { className: styles$31.Navigation },
|
3763 | leftButton,
|
3764 | rightButton
|
3765 | );
|
3766 | }
|
3767 | var Navigation$2 = withAppProvider()(Navigation$1);
|
3768 |
|
3769 | class DataTable$1 extends React.PureComponent {
|
3770 | constructor(props) {
|
3771 | super(props);
|
3772 | this.state = {
|
3773 | collapsed: false,
|
3774 | columnVisibilityData: [],
|
3775 | heights: [],
|
3776 | preservedScrollPosition: {},
|
3777 | isScrolledFarthestLeft: true,
|
3778 | isScrolledFarthestRight: false
|
3779 | };
|
3780 | this.dataTable = React.createRef();
|
3781 | this.scrollContainer = React.createRef();
|
3782 | this.table = React.createRef();
|
3783 | const translate = props.polaris.intl.translate;
|
3784 |
|
3785 | this.totalsRowHeading = translate('Polaris.DataTable.totalsRowHeading');
|
3786 | }
|
3787 | componentDidMount() {
|
3788 |
|
3789 | if (process.env.NODE_ENV === 'development') {
|
3790 | setTimeout(() => {
|
3791 | this.handleResize();
|
3792 | }, 10);
|
3793 | } else {
|
3794 | this.handleResize();
|
3795 | }
|
3796 | }
|
3797 | componentDidUpdate(prevProps) {
|
3798 | if (isEqual(prevProps, this.props)) {
|
3799 | return;
|
3800 | }
|
3801 | this.handleResize();
|
3802 | }
|
3803 | render() {
|
3804 | var _props = this.props;
|
3805 | const columnContentTypes = _props.columnContentTypes,
|
3806 | headings = _props.headings,
|
3807 | totals = _props.totals,
|
3808 | rows = _props.rows,
|
3809 | truncate = _props.truncate,
|
3810 | footerContent = _props.footerContent,
|
3811 | sortable = _props.sortable;
|
3812 | var _props$defaultSortDir = _props.defaultSortDirection;
|
3813 | const defaultSortDirection = _props$defaultSortDir === undefined ? 'ascending' : _props$defaultSortDir;
|
3814 | var _props$initialSortCol = _props.initialSortColumnIndex;
|
3815 | const initialSortColumnIndex = _props$initialSortCol === undefined ? 0 : _props$initialSortCol;
|
3816 | var _state = this.state;
|
3817 | const collapsed = _state.collapsed,
|
3818 | heights = _state.heights;
|
3819 | var _state$sortedColumnIn = _state.sortedColumnIndex;
|
3820 | const sortedColumnIndex = _state$sortedColumnIn === undefined ? initialSortColumnIndex : _state$sortedColumnIn;
|
3821 | var _state$sortDirection = _state.sortDirection;
|
3822 | const sortDirection = _state$sortDirection === undefined ? defaultSortDirection : _state$sortDirection,
|
3823 | isScrolledFarthestLeft = _state.isScrolledFarthestLeft,
|
3824 | isScrolledFarthestRight = _state.isScrolledFarthestRight;
|
3825 |
|
3826 | const className = styles.classNames(styles$31.DataTable, collapsed && styles$31.collapsed, footerContent && styles$31.hasFooter);
|
3827 | const wrapperClassName = styles.classNames(styles$31.TableWrapper, collapsed && styles$31.collapsed);
|
3828 | const footerClassName = styles.classNames(footerContent && styles$31.TableFoot);
|
3829 | const footerMarkup = footerContent ? React.createElement(
|
3830 | 'tfoot',
|
3831 | { className: footerClassName },
|
3832 | React.createElement(
|
3833 | 'tr',
|
3834 | null,
|
3835 | this.renderFooter()
|
3836 | )
|
3837 | ) : null;
|
3838 | const totalsMarkup = totals ? React.createElement(
|
3839 | 'tr',
|
3840 | null,
|
3841 | totals.map(this.renderTotals)
|
3842 | ) : null;
|
3843 | const headingMarkup = React.createElement(
|
3844 | 'tr',
|
3845 | null,
|
3846 | headings.map((heading, headingIndex) => {
|
3847 | let sortableHeadingProps;
|
3848 | const id = `heading-cell-${headingIndex}`;
|
3849 | if (sortable) {
|
3850 | const isSortable = sortable[headingIndex];
|
3851 | const isSorted = sortedColumnIndex === headingIndex;
|
3852 | const direction = isSorted ? sortDirection : 'none';
|
3853 | sortableHeadingProps = {
|
3854 | defaultSortDirection,
|
3855 | sorted: isSorted,
|
3856 | sortable: isSortable,
|
3857 | sortDirection: direction,
|
3858 | onSort: this.defaultOnSort(headingIndex)
|
3859 | };
|
3860 | }
|
3861 | const height = !truncate ? heights[0] : undefined;
|
3862 | return React.createElement(Cell$2, Object.assign({ header: true, key: id, height: height, content: heading, contentType: columnContentTypes[headingIndex], fixed: headingIndex === 0, truncate: truncate }, sortableHeadingProps));
|
3863 | })
|
3864 | );
|
3865 | const bodyMarkup = rows.map(this.defaultRenderRow);
|
3866 | const style = footerContent ? { marginBottom: `${heights[heights.length - 1]}px` } : undefined;
|
3867 | return React.createElement(
|
3868 | 'div',
|
3869 | { className: wrapperClassName },
|
3870 | React.createElement(Navigation$2, { isScrolledFarthestLeft: isScrolledFarthestLeft, isScrolledFarthestRight: isScrolledFarthestRight, navigateTableLeft: this.navigateTable('left'), navigateTableRight: this.navigateTable('right') }),
|
3871 | React.createElement(
|
3872 | 'div',
|
3873 | { className: className, ref: this.dataTable },
|
3874 | React.createElement(
|
3875 | 'div',
|
3876 | { className: styles$31.ScrollContainer, ref: this.scrollContainer, style: style },
|
3877 | React.createElement(EventListener$1, { event: 'resize', handler: this.handleResize }),
|
3878 | React.createElement(EventListener$1, { capture: true, event: 'scroll', handler: this.scrollListener }),
|
3879 | React.createElement(
|
3880 | 'table',
|
3881 | { className: styles$31.Table, ref: this.table },
|
3882 | React.createElement(
|
3883 | 'thead',
|
3884 | null,
|
3885 | headingMarkup,
|
3886 | totalsMarkup
|
3887 | ),
|
3888 | React.createElement(
|
3889 | 'tbody',
|
3890 | null,
|
3891 | bodyMarkup
|
3892 | ),
|
3893 | footerMarkup
|
3894 | )
|
3895 | )
|
3896 | )
|
3897 | );
|
3898 | }
|
3899 | handleResize() {
|
3900 | var _props2 = this.props;
|
3901 | const footerContent = _props2.footerContent,
|
3902 | truncate = _props2.truncate;
|
3903 | const table = this.table.current,
|
3904 | scrollContainer = this.scrollContainer.current;
|
3905 |
|
3906 | let collapsed = false;
|
3907 | if (table && scrollContainer) {
|
3908 | collapsed = table.scrollWidth > scrollContainer.clientWidth;
|
3909 | scrollContainer.scrollLeft = 0;
|
3910 | }
|
3911 | this.setState(Object.assign({ collapsed, heights: [] }, this.calculateColumnVisibilityData(collapsed)), () => {
|
3912 | if (footerContent || !truncate) {
|
3913 | this.setHeightsAndScrollPosition();
|
3914 | }
|
3915 | });
|
3916 | }
|
3917 | tallestCellHeights() {
|
3918 | var _props3 = this.props;
|
3919 | const footerContent = _props3.footerContent,
|
3920 | truncate = _props3.truncate;
|
3921 | const table = this.table.current;
|
3922 | let heights = this.state.heights;
|
3923 |
|
3924 | if (table) {
|
3925 | const rows = Array.from(table.getElementsByTagName('tr'));
|
3926 | if (!truncate) {
|
3927 | return heights = rows.map(row => {
|
3928 | const fixedCell = row.childNodes[0];
|
3929 | return Math.max(row.clientHeight, fixedCell.clientHeight);
|
3930 | });
|
3931 | }
|
3932 | if (footerContent) {
|
3933 | const footerCellHeight = rows[rows.length - 1].childNodes[0].clientHeight;
|
3934 | heights = [footerCellHeight];
|
3935 | }
|
3936 | }
|
3937 | return heights;
|
3938 | }
|
3939 | resetScrollPosition() {
|
3940 | const scrollContainer = this.scrollContainer.current;
|
3941 |
|
3942 | if (scrollContainer) {
|
3943 | var _state$preservedScrol = this.state.preservedScrollPosition;
|
3944 | const left = _state$preservedScrol.left,
|
3945 | top = _state$preservedScrol.top;
|
3946 |
|
3947 | if (left) {
|
3948 | scrollContainer.scrollLeft = left;
|
3949 | }
|
3950 | if (top) {
|
3951 | window.scrollTo(0, top);
|
3952 | }
|
3953 | }
|
3954 | }
|
3955 | setHeightsAndScrollPosition() {
|
3956 | this.setState({ heights: this.tallestCellHeights() }, this.resetScrollPosition);
|
3957 | }
|
3958 | calculateColumnVisibilityData(collapsed) {
|
3959 | const table = this.table.current,
|
3960 | scrollContainer = this.scrollContainer.current,
|
3961 | dataTable = this.dataTable.current;
|
3962 |
|
3963 | if (collapsed && table && scrollContainer && dataTable) {
|
3964 | const headerCells = table.querySelectorAll('[class*=header]');
|
3965 | const collapsedHeaderCells = Array.from(headerCells).slice(1);
|
3966 | const fixedColumnWidth = headerCells[0].offsetWidth;
|
3967 | const firstVisibleColumnIndex = collapsedHeaderCells.length - 1;
|
3968 | const tableLeftVisibleEdge = scrollContainer.scrollLeft + fixedColumnWidth;
|
3969 | const tableRightVisibleEdge = scrollContainer.scrollLeft + dataTable.offsetWidth;
|
3970 | const tableData = {
|
3971 | fixedColumnWidth,
|
3972 | firstVisibleColumnIndex,
|
3973 | tableLeftVisibleEdge,
|
3974 | tableRightVisibleEdge
|
3975 | };
|
3976 | const columnVisibilityData = collapsedHeaderCells.map(measureColumn(tableData));
|
3977 | const lastColumn = columnVisibilityData[columnVisibilityData.length - 1];
|
3978 | return Object.assign({ fixedColumnWidth,
|
3979 | columnVisibilityData }, getPrevAndCurrentColumns(tableData, columnVisibilityData), { isScrolledFarthestLeft: tableLeftVisibleEdge === fixedColumnWidth, isScrolledFarthestRight: lastColumn.rightEdge <= tableRightVisibleEdge });
|
3980 | }
|
3981 | return {
|
3982 | columnVisibilityData: [],
|
3983 | previousColumn: undefined,
|
3984 | currentColumn: undefined
|
3985 | };
|
3986 | }
|
3987 | scrollListener() {
|
3988 | this.setState(prevState => Object.assign({}, this.calculateColumnVisibilityData(prevState.collapsed)));
|
3989 | }
|
3990 | navigateTable(direction) {
|
3991 | var _state2 = this.state;
|
3992 | const currentColumn = _state2.currentColumn,
|
3993 | previousColumn = _state2.previousColumn,
|
3994 | fixedColumnWidth = _state2.fixedColumnWidth;
|
3995 | const scrollContainer = this.scrollContainer.current;
|
3996 |
|
3997 | const handleScroll = () => {
|
3998 | if (!currentColumn || !previousColumn || !fixedColumnWidth) {
|
3999 | return;
|
4000 | }
|
4001 | if (scrollContainer) {
|
4002 | scrollContainer.scrollLeft = direction === 'right' ? currentColumn.rightEdge - fixedColumnWidth : previousColumn.leftEdge - fixedColumnWidth;
|
4003 | requestAnimationFrame(() => {
|
4004 | this.setState(prevState => Object.assign({}, this.calculateColumnVisibilityData(prevState.collapsed)));
|
4005 | });
|
4006 | }
|
4007 | };
|
4008 | return handleScroll;
|
4009 | }
|
4010 | renderTotals(total, index) {
|
4011 | const id = `totals-cell-${index}`;
|
4012 | const heights = this.state.heights;
|
4013 | var _props$truncate = this.props.truncate;
|
4014 | const truncate = _props$truncate === undefined ? false : _props$truncate;
|
4015 |
|
4016 | let content;
|
4017 | let contentType;
|
4018 | if (index === 0) {
|
4019 | content = this.totalsRowHeading;
|
4020 | }
|
4021 | if (total !== '' && index > 0) {
|
4022 | contentType = 'numeric';
|
4023 | content = total;
|
4024 | }
|
4025 | return React.createElement(Cell$2, { total: true, fixed: index === 0, key: id, height: heights[1], content: content, contentType: contentType, truncate: truncate });
|
4026 | }
|
4027 | defaultRenderRow(row, index) {
|
4028 | const className = styles.classNames(styles$31.TableRow);
|
4029 | var _props4 = this.props;
|
4030 | const columnContentTypes = _props4.columnContentTypes,
|
4031 | totals = _props4.totals,
|
4032 | footerContent = _props4.footerContent;
|
4033 | var _props4$truncate = _props4.truncate;
|
4034 | const truncate = _props4$truncate === undefined ? false : _props4$truncate;
|
4035 | const heights = this.state.heights;
|
4036 |
|
4037 | const bodyCellHeights = totals ? heights.slice(2) : heights.slice(1);
|
4038 | if (footerContent) {
|
4039 | bodyCellHeights.pop();
|
4040 | }
|
4041 | return React.createElement(
|
4042 | 'tr',
|
4043 | { key: `row-${index}`, className: className },
|
4044 | row.map((content, cellIndex) => {
|
4045 | const id = `cell-${cellIndex}-row-${index}`;
|
4046 | return React.createElement(Cell$2, { key: id, height: bodyCellHeights[index], content: content, contentType: columnContentTypes[cellIndex], fixed: cellIndex === 0, truncate: truncate });
|
4047 | })
|
4048 | );
|
4049 | }
|
4050 | renderFooter() {
|
4051 | const heights = this.state.heights;
|
4052 |
|
4053 | const footerCellHeight = heights[heights.length - 1];
|
4054 | return React.createElement(Cell$2, { footer: true, height: footerCellHeight, content: this.props.footerContent, truncate: this.props.truncate });
|
4055 | }
|
4056 | defaultOnSort(headingIndex) {
|
4057 | var _props5 = this.props;
|
4058 | const onSort = _props5.onSort,
|
4059 | truncate = _props5.truncate;
|
4060 | var _props5$defaultSortDi = _props5.defaultSortDirection;
|
4061 | const defaultSortDirection = _props5$defaultSortDi === undefined ? 'ascending' : _props5$defaultSortDi,
|
4062 | initialSortColumnIndex = _props5.initialSortColumnIndex;
|
4063 | var _state3 = this.state;
|
4064 | const sortDirection = _state3.sortDirection;
|
4065 | var _state3$sortedColumnI = _state3.sortedColumnIndex;
|
4066 | const sortedColumnIndex = _state3$sortedColumnI === undefined ? initialSortColumnIndex : _state3$sortedColumnI;
|
4067 |
|
4068 | let newSortDirection = defaultSortDirection;
|
4069 | if (sortedColumnIndex === headingIndex) {
|
4070 | newSortDirection = sortDirection === 'ascending' ? 'descending' : 'ascending';
|
4071 | }
|
4072 | const handleSort = () => {
|
4073 | this.setState({
|
4074 | sortDirection: newSortDirection,
|
4075 | sortedColumnIndex: headingIndex
|
4076 | }, () => {
|
4077 | if (onSort) {
|
4078 | onSort(headingIndex, newSortDirection);
|
4079 | if (!truncate && this.scrollContainer.current) {
|
4080 | const preservedScrollPosition = {
|
4081 | left: this.scrollContainer.current.scrollLeft,
|
4082 | top: window.scrollY
|
4083 | };
|
4084 | this.setState({ preservedScrollPosition });
|
4085 | this.handleResize();
|
4086 | }
|
4087 | }
|
4088 | });
|
4089 | };
|
4090 | return handleSort;
|
4091 | }
|
4092 | }
|
4093 | tslib_1.__decorate([decorators.autobind, decorators.debounce()], DataTable$1.prototype, "handleResize", null);
|
4094 | tslib_1.__decorate([decorators.autobind], DataTable$1.prototype, "tallestCellHeights", null);
|
4095 | tslib_1.__decorate([decorators.autobind], DataTable$1.prototype, "resetScrollPosition", null);
|
4096 | tslib_1.__decorate([decorators.autobind], DataTable$1.prototype, "setHeightsAndScrollPosition", null);
|
4097 | tslib_1.__decorate([decorators.autobind], DataTable$1.prototype, "calculateColumnVisibilityData", null);
|
4098 | tslib_1.__decorate([decorators.autobind], DataTable$1.prototype, "scrollListener", null);
|
4099 | tslib_1.__decorate([decorators.autobind], DataTable$1.prototype, "navigateTable", null);
|
4100 | tslib_1.__decorate([decorators.autobind], DataTable$1.prototype, "renderTotals", null);
|
4101 | tslib_1.__decorate([decorators.autobind], DataTable$1.prototype, "defaultRenderRow", null);
|
4102 | tslib_1.__decorate([decorators.autobind], DataTable$1.prototype, "renderFooter", null);
|
4103 | tslib_1.__decorate([decorators.autobind], DataTable$1.prototype, "defaultOnSort", null);
|
4104 | function measureColumn(tableData) {
|
4105 | return function (column, index) {
|
4106 | const firstVisibleColumnIndex = tableData.firstVisibleColumnIndex,
|
4107 | tableStart = tableData.tableLeftVisibleEdge,
|
4108 | tableEnd = tableData.tableRightVisibleEdge,
|
4109 | fixedColumnWidth = tableData.fixedColumnWidth;
|
4110 |
|
4111 | const leftEdge = column.offsetLeft + fixedColumnWidth;
|
4112 | const rightEdge = leftEdge + column.offsetWidth;
|
4113 | const isVisibleLeft = isEdgeVisible(leftEdge, tableStart, tableEnd);
|
4114 | const isVisibleRight = isEdgeVisible(rightEdge, tableStart, tableEnd);
|
4115 | const isVisible = isVisibleLeft || isVisibleRight;
|
4116 | if (isVisible) {
|
4117 | tableData.firstVisibleColumnIndex = Math.min(firstVisibleColumnIndex, index);
|
4118 | }
|
4119 | return { leftEdge, rightEdge, isVisible };
|
4120 | };
|
4121 | }
|
4122 | function isEdgeVisible(position, start, end) {
|
4123 | const minVisiblePixels = 30;
|
4124 | return position >= start + minVisiblePixels && position <= end - minVisiblePixels;
|
4125 | }
|
4126 | function getPrevAndCurrentColumns(tableData, columnData) {
|
4127 | const firstVisibleColumnIndex = tableData.firstVisibleColumnIndex;
|
4128 |
|
4129 | const previousColumnIndex = Math.max(firstVisibleColumnIndex - 1, 0);
|
4130 | const previousColumn = columnData[previousColumnIndex];
|
4131 | const currentColumn = columnData[firstVisibleColumnIndex];
|
4132 | return { previousColumn, currentColumn };
|
4133 | }
|
4134 | var DataTable$2 = withAppProvider()(DataTable$1);
|
4135 |
|
4136 | function DatePreference$1({ children }) {
|
4137 | const datePreference = "Spelled";
|
4138 | const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
4139 | const d = new Date(children);
|
4140 |
|
4141 | var date = "";
|
4142 | if (datePreference === "Spelled") {
|
4143 |
|
4144 | date = d.getDate() + " " + months[d.getMonth()] + " " + d.getFullYear();
|
4145 | } else if (datePreference === "American") {
|
4146 |
|
4147 | date = d.getMonth() + 1 + "/" + d.getDate() + "/" + d.getFullYear();
|
4148 | } else {
|
4149 |
|
4150 | date = d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear();
|
4151 | }
|
4152 | return React.createElement(
|
4153 | "span",
|
4154 | null,
|
4155 | date
|
4156 | );
|
4157 | }
|
4158 |
|
4159 | var styles$32 = {
|
4160 | "DatePicker": "p_hj",
|
4161 | "MonthContainer": "p_xq",
|
4162 | "Month": "p_ha",
|
4163 | "Month-current": "p_kv",
|
4164 | "Week": "p_jc",
|
4165 | "WeekHeadings": "p_dl",
|
4166 | "Day": "p_sp",
|
4167 | "EmptyDay": "p_j0",
|
4168 | "Day-today": "p_dk",
|
4169 | "Day-inRange": "p_lk",
|
4170 | "Day-selected": "p_sa",
|
4171 | "Day-disabled": "p_cq",
|
4172 | "Weekday": "p_vl",
|
4173 | "Weekday-current": "p_vb",
|
4174 | "Header": "p_nd",
|
4175 | "Title": "p_aq",
|
4176 | };
|
4177 |
|
4178 | class Day$1 extends React.PureComponent {
|
4179 | constructor() {
|
4180 | super(...arguments);
|
4181 | this.dayNode = null;
|
4182 | }
|
4183 | componentDidUpdate(prevProps) {
|
4184 | if (!prevProps.focused && this.props.focused && this.dayNode) {
|
4185 | this.dayNode.focus();
|
4186 | }
|
4187 | }
|
4188 | render() {
|
4189 | var _props = this.props;
|
4190 | const day = _props.day,
|
4191 | focused = _props.focused,
|
4192 | onClick = _props.onClick;
|
4193 | var _props$onHover = _props.onHover;
|
4194 | const onHover = _props$onHover === undefined ? other.noop : _props$onHover;
|
4195 | var _props$onFocus = _props.onFocus;
|
4196 | const onFocus = _props$onFocus === undefined ? other.noop : _props$onFocus,
|
4197 | selected = _props.selected,
|
4198 | inRange = _props.inRange,
|
4199 | inHoveringRange = _props.inHoveringRange,
|
4200 | disabled = _props.disabled,
|
4201 | intl = _props.polaris.intl;
|
4202 |
|
4203 | const handleHover = onHover.bind(null, day);
|
4204 | if (!day) {
|
4205 | return React.createElement('div', { className: styles$32.EmptyDay, onMouseOver: handleHover });
|
4206 | }
|
4207 | const handleClick = onClick && !disabled ? onClick.bind(null, day) : other.noop;
|
4208 | const today = dates.isSameDay(new Date(), day);
|
4209 | const className = styles.classNames(styles$32.Day, selected && styles$32['Day-selected'], disabled && styles$32['Day-disabled'], today && styles$32['Day-today'], (inRange || inHoveringRange) && !disabled && styles$32['Day-inRange']);
|
4210 | const date = day.getDate();
|
4211 | const tabIndex = (focused || selected || today || date === 1) && !disabled ? 0 : -1;
|
4212 | const ariaLabel = [`${today ? intl.translate('Polaris.DatePicker.today') : ''}`, `${dates.Months[day.getMonth()]} `, `${date} `, `${day.getFullYear()}`].join('');
|
4213 | return React.createElement(
|
4214 | 'button',
|
4215 | {
|
4216 |
|
4217 | onFocus: onFocus.bind(null, day), type: 'button', ref: this.setNode, tabIndex: tabIndex, className: className, onMouseOver: handleHover
|
4218 |
|
4219 | , onClick: handleClick, 'aria-label': ariaLabel, 'aria-selected': selected, 'aria-disabled': disabled, role: 'gridcell' },
|
4220 | date
|
4221 | );
|
4222 | }
|
4223 | setNode(node) {
|
4224 | this.dayNode = node;
|
4225 | }
|
4226 | }
|
4227 | tslib_1.__decorate([decorators.autobind], Day$1.prototype, "setNode", null);
|
4228 | var Day$2 = withAppProvider()(Day$1);
|
4229 |
|
4230 | function Weekday$1({ label, title, current }) {
|
4231 | const className = styles.classNames(styles$32.Weekday, current && styles$32['Weekday-current']);
|
4232 | return React.createElement(
|
4233 | 'div',
|
4234 | { 'aria-label': dates.Weekdays[label], className: className },
|
4235 | title
|
4236 | );
|
4237 | }
|
4238 |
|
4239 | const WEEKDAYS = [dates.Weekdays.Sunday, dates.Weekdays.Monday, dates.Weekdays.Tuesday, dates.Weekdays.Wednesday, dates.Weekdays.Thursday, dates.Weekdays.Friday, dates.Weekdays.Saturday];
|
4240 | function Month$1({ focusedDate, selected, hoverDate, disableDatesBefore, disableDatesAfter, allowRange, onChange = other.noop, onHover = other.noop, onFocus = other.noop, month, year, weekStartsOn }) {
|
4241 | const isInHoveringRange = allowRange ? hoveringDateIsInRange : () => false;
|
4242 | const now = new Date();
|
4243 | const current = now.getMonth() === month && now.getFullYear() === year;
|
4244 | const className = styles.classNames(styles$32.Title, current && styles$32['Month-current']);
|
4245 | const weeks = dates.getWeeksForMonth(month, year, weekStartsOn);
|
4246 | const weekdays = getWeekdaysOrdered(weekStartsOn).map(weekday => React.createElement(Weekday$1, { key: weekday, title: dates.abbreviationForWeekday(weekday), current: current && new Date().getDay() === weekday, label: weekday }));
|
4247 | function handleDateClick(selectedDate) {
|
4248 | onChange(dates.getNewRange(allowRange && selected, selectedDate));
|
4249 | }
|
4250 | function renderWeek(day, dayIndex) {
|
4251 | if (day == null) {
|
4252 | const lastDayOfMonth = new Date(year, month + 1, 0);
|
4253 | return (
|
4254 |
|
4255 | React.createElement(Day$2, { key: dayIndex, onHover: onHover.bind(null, lastDayOfMonth) })
|
4256 | );
|
4257 | }
|
4258 | const disabled = disableDatesBefore && dates.isDateBefore(day, disableDatesBefore) || disableDatesAfter && dates.isDateAfter(day, disableDatesAfter);
|
4259 | return React.createElement(Day$2, { focused: focusedDate != null && dates.isSameDay(day, focusedDate), day: day, key: dayIndex, onFocus: onFocus, onClick: handleDateClick, onHover: onHover, selected: selected != null && dates.dateIsSelected(day, selected), inRange: selected != null && dates.dateIsInRange(day, selected), disabled: disabled, inHoveringRange: selected != null && hoverDate != null && isInHoveringRange(day, selected, hoverDate) });
|
4260 | }
|
4261 | const weeksMarkup = weeks.map((week, index) => React.createElement(
|
4262 | 'div',
|
4263 | { role: 'row', className: styles$32.Week, key: index },
|
4264 | week.map(renderWeek)
|
4265 | ));
|
4266 | return React.createElement(
|
4267 | 'div',
|
4268 | { role: 'grid', className: styles$32.Month },
|
4269 | React.createElement(
|
4270 | 'div',
|
4271 | { className: className },
|
4272 | dates.Months[month],
|
4273 | ' ',
|
4274 | year
|
4275 | ),
|
4276 | React.createElement(
|
4277 | 'div',
|
4278 | { role: 'rowheader', className: styles$32.WeekHeadings },
|
4279 | weekdays
|
4280 | ),
|
4281 | weeksMarkup
|
4282 | );
|
4283 | }
|
4284 | function hoveringDateIsInRange(day, range, hoverEndDate) {
|
4285 | if (day == null) {
|
4286 | return false;
|
4287 | }
|
4288 | const start = range.start,
|
4289 | end = range.end;
|
4290 |
|
4291 | return Boolean(start === end && day > start && day <= hoverEndDate);
|
4292 | }
|
4293 | function getWeekdaysOrdered(weekStartsOn) {
|
4294 | const weekDays = [...WEEKDAYS];
|
4295 | const restOfDays = weekDays.splice(weekStartsOn);
|
4296 | return [...restOfDays, ...weekDays];
|
4297 | }
|
4298 |
|
4299 | class DatePicker$1 extends React.PureComponent {
|
4300 | constructor() {
|
4301 | super(...arguments);
|
4302 | this.state = {
|
4303 | hoverDate: undefined,
|
4304 | focusDate: undefined
|
4305 | };
|
4306 | }
|
4307 | componentDidUpdate(prevProps) {
|
4308 | const selectedPropDidChange = !isSameSelectedDate(prevProps.selected, this.props.selected);
|
4309 | if (selectedPropDidChange) {
|
4310 | this.resetFocus();
|
4311 | }
|
4312 | }
|
4313 | render() {
|
4314 | var _props = this.props;
|
4315 | const id = _props.id,
|
4316 | selected = _props.selected,
|
4317 | month = _props.month,
|
4318 | year = _props.year,
|
4319 | allowRange = _props.allowRange,
|
4320 | multiMonth = _props.multiMonth,
|
4321 | disableDatesBefore = _props.disableDatesBefore,
|
4322 | disableDatesAfter = _props.disableDatesAfter;
|
4323 | var _props$weekStartsOn = _props.weekStartsOn;
|
4324 | const weekStartsOn = _props$weekStartsOn === undefined ? dates.Weekdays.Sunday : _props$weekStartsOn,
|
4325 | intl = _props.polaris.intl;
|
4326 | var _state = this.state;
|
4327 | const hoverDate = _state.hoverDate,
|
4328 | focusDate = _state.focusDate;
|
4329 |
|
4330 | const showNextYear = dates.getNextDisplayYear(month, year);
|
4331 | const showNextMonth = dates.getNextDisplayMonth(month);
|
4332 | const showNextToNextYear = dates.getNextDisplayYear(showNextMonth, showNextYear);
|
4333 | const showNextToNextMonth = dates.getNextDisplayMonth(showNextMonth);
|
4334 | const showPreviousYear = dates.getPreviousDisplayYear(month, year);
|
4335 | const showPreviousMonth = dates.getPreviousDisplayMonth(month);
|
4336 | const previousMonthName = dates.Months[showPreviousMonth];
|
4337 | const nextMonth = multiMonth ? dates.Months[showNextToNextMonth] : dates.Months[showNextMonth];
|
4338 | const nextYear = multiMonth ? showNextToNextYear : showNextYear;
|
4339 | const secondDatePicker = multiMonth ? React.createElement(Month$1, { onFocus: this.handleFocus, focusedDate: focusDate, month: showNextMonth, year: showNextYear, selected: deriveRange(selected), hoverDate: hoverDate, onChange: this.handleDateSelection, onHover: this.handleHover, disableDatesBefore: disableDatesBefore, disableDatesAfter: disableDatesAfter, allowRange: allowRange, weekStartsOn: weekStartsOn }) : null;
|
4340 | return React.createElement(
|
4341 | 'div',
|
4342 | { id: id, className: styles$32.DatePicker, onKeyDown: handleKeyDown, onKeyUp: this.handleKeyUp },
|
4343 | React.createElement(
|
4344 | 'div',
|
4345 | { className: styles$32.Header },
|
4346 | React.createElement(Button$2, { plain: true, icon: 'arrowLeft', accessibilityLabel: intl.translate('Polaris.DatePicker.previousMonth', {
|
4347 | previousMonthName,
|
4348 | showPreviousYear
|
4349 | })
|
4350 |
|
4351 | , onClick: this.handleMonthChangeClick.bind(null, showPreviousMonth, showPreviousYear) }),
|
4352 | React.createElement(Button$2, { plain: true, icon: 'arrowRight', accessibilityLabel: intl.translate('Polaris.DatePicker.nextMonth', {
|
4353 | nextMonth,
|
4354 | nextYear
|
4355 | })
|
4356 |
|
4357 | , onClick: this.handleMonthChangeClick.bind(null, showNextMonth, showNextYear) })
|
4358 | ),
|
4359 | React.createElement(
|
4360 | 'div',
|
4361 | { className: styles$32.MonthContainer },
|
4362 | React.createElement(Month$1, { onFocus: this.handleFocus, focusedDate: focusDate, month: month, year: year, selected: deriveRange(selected), hoverDate: hoverDate, onChange: this.handleDateSelection, onHover: this.handleHover, disableDatesBefore: disableDatesBefore, disableDatesAfter: disableDatesAfter, allowRange: allowRange, weekStartsOn: weekStartsOn }),
|
4363 | secondDatePicker
|
4364 | )
|
4365 | );
|
4366 | }
|
4367 | handleFocus(date) {
|
4368 | this.setState({ focusDate: date });
|
4369 | }
|
4370 | resetFocus() {
|
4371 | this.setState({ focusDate: undefined });
|
4372 | }
|
4373 | handleKeyUp(event) {
|
4374 | const key = event.key;
|
4375 | var _props2 = this.props;
|
4376 | const selected = _props2.selected,
|
4377 | disableDatesBefore = _props2.disableDatesBefore,
|
4378 | disableDatesAfter = _props2.disableDatesAfter;
|
4379 | const focusDate = this.state.focusDate;
|
4380 |
|
4381 | const range = deriveRange(selected);
|
4382 | const focusedDate = focusDate || range && range.start;
|
4383 | if (focusedDate == null) {
|
4384 | return;
|
4385 | }
|
4386 | if (key === 'ArrowUp') {
|
4387 | const previousWeek = new Date(focusedDate);
|
4388 | previousWeek.setDate(focusedDate.getDate() - 7);
|
4389 | if (!(disableDatesBefore && dates.isDateBefore(previousWeek, disableDatesBefore))) {
|
4390 | this.setFocusDateAndHandleMonthChange(previousWeek);
|
4391 | }
|
4392 | }
|
4393 | if (key === 'ArrowDown') {
|
4394 | const nextWeek = new Date(focusedDate);
|
4395 | nextWeek.setDate(focusedDate.getDate() + 7);
|
4396 | if (!(disableDatesAfter && dates.isDateAfter(nextWeek, disableDatesAfter))) {
|
4397 | this.setFocusDateAndHandleMonthChange(nextWeek);
|
4398 | }
|
4399 | }
|
4400 | if (key === 'ArrowRight') {
|
4401 | const tomorrow = new Date(focusedDate);
|
4402 | tomorrow.setDate(focusedDate.getDate() + 1);
|
4403 | if (!(disableDatesAfter && dates.isDateAfter(tomorrow, disableDatesAfter))) {
|
4404 | this.setFocusDateAndHandleMonthChange(tomorrow);
|
4405 | }
|
4406 | }
|
4407 | if (key === 'ArrowLeft') {
|
4408 | const yesterday = new Date(focusedDate);
|
4409 | yesterday.setDate(focusedDate.getDate() - 1);
|
4410 | if (!(disableDatesBefore && dates.isDateBefore(yesterday, disableDatesBefore))) {
|
4411 | this.setFocusDateAndHandleMonthChange(yesterday);
|
4412 | }
|
4413 | }
|
4414 | }
|
4415 | setFocusDateAndHandleMonthChange(date) {
|
4416 | const onMonthChange = this.props.onMonthChange;
|
4417 |
|
4418 | if (onMonthChange) {
|
4419 | onMonthChange(date.getMonth(), date.getFullYear());
|
4420 | }
|
4421 | this.setState({
|
4422 | hoverDate: date,
|
4423 | focusDate: date
|
4424 | });
|
4425 | }
|
4426 | handleDateSelection(range) {
|
4427 | const end = range.end;
|
4428 | var _props$onChange = this.props.onChange;
|
4429 | const onChange = _props$onChange === undefined ? other.noop : _props$onChange;
|
4430 |
|
4431 | this.setState({ hoverDate: end, focusDate: new Date(end) }, () => onChange(range));
|
4432 | }
|
4433 | handleMonthChangeClick(month, year) {
|
4434 | const onMonthChange = this.props.onMonthChange;
|
4435 |
|
4436 | if (!onMonthChange) {
|
4437 | return;
|
4438 | }
|
4439 | this.setState({
|
4440 | focusDate: undefined
|
4441 | });
|
4442 | onMonthChange(month, year);
|
4443 | }
|
4444 | handleHover(date) {
|
4445 | this.setState({
|
4446 | hoverDate: date
|
4447 | });
|
4448 | }
|
4449 | }
|
4450 | tslib_1.__decorate([decorators.autobind], DatePicker$1.prototype, "handleFocus", null);
|
4451 | tslib_1.__decorate([decorators.autobind], DatePicker$1.prototype, "resetFocus", null);
|
4452 | tslib_1.__decorate([decorators.autobind], DatePicker$1.prototype, "handleKeyUp", null);
|
4453 | tslib_1.__decorate([decorators.autobind], DatePicker$1.prototype, "setFocusDateAndHandleMonthChange", null);
|
4454 | tslib_1.__decorate([decorators.autobind], DatePicker$1.prototype, "handleDateSelection", null);
|
4455 | tslib_1.__decorate([decorators.autobind], DatePicker$1.prototype, "handleMonthChangeClick", null);
|
4456 | tslib_1.__decorate([decorators.autobind], DatePicker$1.prototype, "handleHover", null);
|
4457 | function handleKeyDown(event) {
|
4458 | const key = event.key;
|
4459 |
|
4460 | if (key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight') {
|
4461 | event.preventDefault();
|
4462 | event.stopPropagation();
|
4463 | }
|
4464 | }
|
4465 | function isSameSelectedDate(previousDate, currentDate) {
|
4466 | if (previousDate == null || currentDate == null) {
|
4467 | return previousDate == null && currentDate == null;
|
4468 | }
|
4469 | if (previousDate instanceof Date || currentDate instanceof Date) {
|
4470 | return previousDate instanceof Date && currentDate instanceof Date && dates.isSameDay(previousDate, currentDate);
|
4471 | }
|
4472 | return dates.isSameDay(previousDate.start, currentDate.start) && dates.isSameDay(previousDate.end, currentDate.end);
|
4473 | }
|
4474 | function deriveRange(selected) {
|
4475 | return selected instanceof Date ? { start: selected, end: selected } : selected;
|
4476 | }
|
4477 | var DatePicker$2 = withAppProvider()(DatePicker$1);
|
4478 |
|
4479 | var styles$33 = {
|
4480 | "DescriptionList": "p_bw",
|
4481 | "Term": "p_on",
|
4482 | "Description": "p_uj",
|
4483 | "dense": "p_am",
|
4484 | };
|
4485 |
|
4486 | const getUniqueTermKey = other.createUniqueIDFactory(`Term`);
|
4487 | const getUniqueDescriptionKey = other.createUniqueIDFactory(`Description`);
|
4488 | function DescriptionList$1({ items, dense }) {
|
4489 | const terms = items.reduce((allTerms, { term, description }) => [...allTerms, React.createElement(
|
4490 | 'dt',
|
4491 | { key: getUniqueTermKey(), className: styles$33.Term },
|
4492 | term
|
4493 | ), React.createElement(
|
4494 | 'dd',
|
4495 | { key: getUniqueDescriptionKey(), className: styles$33.Description },
|
4496 | description ? description : '--'
|
4497 | )], []);
|
4498 | const className = styles.classNames(styles$33.DescriptionList, dense && styles$33.dense);
|
4499 | return React.createElement(
|
4500 | 'dl',
|
4501 | { className: className },
|
4502 | terms
|
4503 | );
|
4504 | }
|
4505 |
|
4506 | var styles$34 = {
|
4507 | "DisplayText": "p_ne",
|
4508 | "sizeSmall": "p_wx",
|
4509 | "sizeMedium": "p_tb",
|
4510 | "sizeLarge": "p_ti",
|
4511 | "sizeExtraLarge": "p_ww",
|
4512 | };
|
4513 |
|
4514 | function DisplayText$1({ element: Element = 'p', children, size = 'medium' }) {
|
4515 | const className = styles.classNames(styles$34.DisplayText, size && styles$34[styles.variationName('size', size)]);
|
4516 | return React.createElement(
|
4517 | Element,
|
4518 | { className: className },
|
4519 | children
|
4520 | );
|
4521 | }
|
4522 |
|
4523 | var styles$35 = {
|
4524 | "hidden": "p_f9",
|
4525 | "LabelWrapper": "p_e4",
|
4526 | "HelpText": "p_w5",
|
4527 | "Error": "p_we",
|
4528 | };
|
4529 |
|
4530 | function Labelled$1(_a) {
|
4531 | var id = _a.id,
|
4532 | label = _a.label,
|
4533 | error = _a.error,
|
4534 | action = _a.action,
|
4535 | helpText = _a.helpText,
|
4536 | children = _a.children,
|
4537 | labelHidden = _a.labelHidden,
|
4538 | optional = _a.optional,
|
4539 | rest = tslib_1.__rest(_a, ["id", "label", "error", "action", "helpText", "children", "labelHidden", "optional"]);
|
4540 |
|
4541 | const className = styles.classNames(labelHidden && styles$35.hidden);
|
4542 | const actionMarkup = action ? buttonFrom(action, { plain: true }) : null;
|
4543 | const helpTextMarkup = helpText ? React.createElement(
|
4544 | 'div',
|
4545 | { className: styles$35.HelpText, id: helpTextID$1(id) },
|
4546 | helpText
|
4547 | ) : null;
|
4548 | const errorMarkup = error && typeof error !== 'boolean' && React.createElement(
|
4549 | 'div',
|
4550 | { className: styles$35.Error },
|
4551 | React.createElement(InlineError$1, { message: error, fieldID: id })
|
4552 | );
|
4553 | const labelMarkup = label ? React.createElement(
|
4554 | 'div',
|
4555 | { className: styles$35.LabelWrapper },
|
4556 | React.createElement(
|
4557 | Label$1,
|
4558 | Object.assign({ id: id }, rest, { hidden: false, optional: optional }),
|
4559 | label
|
4560 | ),
|
4561 | actionMarkup
|
4562 | ) : null;
|
4563 | return React.createElement(
|
4564 | 'div',
|
4565 | { className: className },
|
4566 | labelMarkup,
|
4567 | children,
|
4568 | errorMarkup,
|
4569 | helpTextMarkup
|
4570 | );
|
4571 | }
|
4572 |
|
4573 | function helpTextID$1(id) {
|
4574 | return `${id}HelpText`;
|
4575 | }
|
4576 |
|
4577 | function withContext$1(Consumer) {
|
4578 | return function addContext(WrappedComponent) {
|
4579 |
|
4580 | class WithContext extends React.Component {
|
4581 | render() {
|
4582 | return React.createElement(
|
4583 | Consumer,
|
4584 | null,
|
4585 | ctx => {
|
4586 | const _a = this.props,
|
4587 | context = _a.context,
|
4588 | rest = tslib_1.__rest(_a, ["context"]);
|
4589 | return React.createElement(WrappedComponent, Object.assign({}, rest, { context: Object.assign({}, context, ctx) }));
|
4590 | }
|
4591 | );
|
4592 | }
|
4593 | }
|
4594 | const FinalComponent = hoistStatics(WithContext, WrappedComponent);
|
4595 | return FinalComponent;
|
4596 | };
|
4597 | }
|
4598 |
|
4599 | var _React$createContext$1 = React.createContext({
|
4600 | size: 'extraLarge',
|
4601 | type: 'file'
|
4602 | });
|
4603 |
|
4604 | const Provider$1 = _React$createContext$1.Provider;
|
4605 | const Consumer$1 = _React$createContext$1.Consumer;
|
4606 |
|
4607 | var IconDragDrop = {"viewBox":"0 0 20 20","body":"<path fill-rule=\"evenodd\" d=\"M19.317 12.052L14 10.28V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h5.28l1.772 5.317a.998.998 0 0 0 1.843.13l1.85-3.701 3.703-1.851a1 1 0 0 0-.131-1.843zM2 16a1 1 0 1 0-2 0v1a1 1 0 0 0 1 1h1a1 1 0 1 0 0-2M16 2a1 1 0 1 0 2 0V1a1 1 0 0 0-1-1h-1a1 1 0 1 0 0 2M6 2h1a1 1 0 1 0 0-2H6a1 1 0 1 0 0 2m5 0h1a1 1 0 1 0 0-2h-1a1 1 0 1 0 0 2M2 0H1a1 1 0 0 0-1 1v1a1 1 0 1 0 2 0 1 1 0 1 0 0-2M1 8a1 1 0 0 0 1-1V6a1 1 0 1 0-2 0v1a1 1 0 0 0 1 1m0 5a1 1 0 0 0 1-1v-1a1 1 0 1 0-2 0v1a1 1 0 0 0 1 1m13.553 1.105a1.002 1.002 0 0 0-.447.447l-.921 1.841-1.604-4.812 4.813 1.604-1.841.92zM6 12.002V6h6v3.612l-1.683-.561a.998.998 0 1 0-1.265 1.265L9.612 12H6zM7 16H6a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2M17 5a1 1 0 0 0-1 1v1a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1\"/>"};
|
4608 |
|
4609 | var AssetFileUpload = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggMTI4Ij48cGF0aCBkPSJNNjkuODEgMTI0LjQzYTEuMzkgMS4zOSAwIDAgMS0uNTctLjEyIDEuNDMgMS40MyAwIDAgMS0uNDktLjMyIDEuNTIgMS41MiAwIDAgMS0uNDQtMS4wNiAxLjUgMS41IDAgMCAxIC40NC0xLjA2IDEuNTMgMS41MyAwIDAgMSAxLjM1LS40MiAxLjMxIDEuMzEgMCAwIDEgLjI4LjA5IDEuMDggMS4wOCAwIDAgMSAuMjYuMTQgMS4wNiAxLjA2IDAgMCAxIC4yMy4xOSAxLjM3IDEuMzcgMCAwIDEgLjE5LjIyIDEuMjYgMS4yNiAwIDAgMSAuMTMuMjYgMS40OSAxLjQ5IDAgMCAxLS4zMiAxLjY0IDEuMzQgMS4zNCAwIDAgMS0uNDkuMzIgMS4zOSAxLjM5IDAgMCAxLS41Ny4xMnptLTkuNzEtMS41YTEuNSAxLjUgMCAwIDEgMS41LTEuNSAxLjUgMS41IDAgMCAxIDEuNSAxLjUgMS41MSAxLjUxIDAgMCAxLTEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUtMS41em0tOC4yMiAwYTEuNSAxLjUgMCAwIDEgMS41LTEuNSAxLjUgMS41IDAgMCAxIDEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUgMS41IDEuNSAxLjUgMCAwIDEtMS41LTEuNXptLTguMjIgMGExLjUgMS41IDAgMCAxIDEuNS0xLjUgMS41MSAxLjUxIDAgMCAxIDEuNTEgMS41IDEuNTEgMS41MSAwIDAgMS0xLjUxIDEuNSAxLjUxIDEuNTEgMCAwIDEtMS41LTEuNXptLTguMjEgMGExLjUgMS41IDAgMCAxIDEuNS0xLjUgMS41IDEuNSAwIDAgMSAxLjUgMS41IDEuNSAxLjUgMCAwIDEtMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNS0xLjV6bS04LjIyIDBhMS41IDEuNSAwIDAgMSAxLjUtMS41IDEuNTEgMS41MSAwIDAgMSAxLjUxIDEuNSAxLjUxIDEuNTEgMCAwIDEtMS41MSAxLjUgMS41MSAxLjUxIDAgMCAxLTEuNS0xLjV6bS04LjIxIDBhMS41IDEuNSAwIDAgMSAxLjUtMS41IDEuNSAxLjUgMCAwIDEgMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUyLTEuNXptLTguMjIgMGExLjUgMS41IDAgMCAxIDEuNS0xLjUgMS41MSAxLjUxIDAgMCAxIDEuNTEgMS41IDEuNTEgMS41MSAwIDAgMS0xLjUxIDEuNSAxLjUgMS41IDAgMCAxLTEuNS0xLjV6bS02LjcxIDEuNUExLjUgMS41IDAgMCAxIDMgMTI0YTEuNDcgMS40NyAwIDAgMS0uNDQtMS4wNiAxLjUzIDEuNTMgMCAwIDEgMC0uM2MwLS4wOSAwLS4xOS4wOC0uMjhhMi4xNSAyLjE1IDAgMCAxIC4xNC0uMjYgMS4zNyAxLjM3IDAgMCAxIC4xOS0uMjIgMS4wNiAxLjA2IDAgMCAxIC4yMy0uMTkgMS4wOCAxLjA4IDAgMCAxIC4yNi0uMTQgMS4zMSAxLjMxIDAgMCAxIC4yOC0uMDkgMS44OCAxLjg4IDAgMCAxIC41OCAwIDEuMzEgMS4zMSAwIDAgMSAuMjguMDkgMS4zIDEuMyAwIDAgMSAuMjYuMTQgMS4zNyAxLjM3IDAgMCAxIC4yMy4xOSAxLjM3IDEuMzcgMCAwIDEgLjE5LjIyIDEuMjYgMS4yNiAwIDAgMSAuMTMuMjYgMS40MSAxLjQxIDAgMCAxIC4xMi41OCAxLjU2IDEuNTYgMCAwIDEtLjExLjU3IDEuNjMgMS42MyAwIDAgMS0uMzMuNDkgMS41IDEuNSAwIDAgMS0xIC40M3ptLTEuNS05LjVhMS41IDEuNSAwIDAgMSAxLjUtMS41IDEuNSAxLjUgMCAwIDEgMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUtMS41em0wLThhMS41IDEuNSAwIDAgMSAxLjUtMS41IDEuNSAxLjUgMCAwIDEgMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUtMS41em0wLThhMS41IDEuNSAwIDAgMSAxLjUtMS41IDEuNSAxLjUgMCAwIDEgMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUtMS40OXptMC04YTEuNSAxLjUgMCAwIDEgMS41LTEuNSAxLjUgMS41IDAgMCAxIDEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUgMS41IDEuNSAxLjUgMCAwIDEtMS41LTEuNDl6bTAtOGExLjUgMS41IDAgMCAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSA1LjU5IDgzYTEuNSAxLjUgMCAwIDEtMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNS0xLjV6bTAtOGExLjUgMS41IDAgMCAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSA1LjU5IDc1YTEuNSAxLjUgMCAwIDEtMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNS0xLjV6bTAtOGExLjUgMS41IDAgMCAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSA1LjU5IDY3YTEuNTEgMS41MSAwIDAgMS0xLjUgMS41MUExLjUxIDEuNTEgMCAwIDEgMi41OSA2N3ptMC04YTEuNSAxLjUgMCAwIDEgMS41LTEuNUExLjUgMS41IDAgMCAxIDUuNTkgNTlhMS41IDEuNSAwIDAgMS0xLjUgMS41IDEuNSAxLjUgMCAwIDEtMS41LTEuNXptMC04YTEuNTEgMS41MSAwIDAgMSAxLjUtMS41MUExLjUxIDEuNTEgMCAwIDEgNS41OSA1MWExLjUgMS41IDAgMCAxLTEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUtMS41em0xLjUtNi40NkExLjUgMS41IDAgMCAxIDIuNTkgNDNhMS4zNiAxLjM2IDAgMCAxIDAtLjI5IDIuMjkgMi4yOSAwIDAgMSAuMDgtLjI4IDIuMTUgMi4xNSAwIDAgMSAuMTQtLjI2IDEuNTcgMS41NyAwIDAgMSAuNDItLjQyIDIgMiAwIDAgMSAuMjUtLjE0bC4yOS0uMDhhMS41IDEuNSAwIDAgMSAxLjM1LjQxIDEuNDUgMS40NSAwIDAgMSAuMTkuMjMgMS4yNiAxLjI2IDAgMCAxIC4xMy4yNiAxLjMxIDEuMzEgMCAwIDEgLjA5LjI4IDEuMzYgMS4zNiAwIDAgMSAwIC4yOSAxLjUyIDEuNTIgMCAwIDEtLjM4IDEgMi4xMSAyLjExIDAgMCAxLS4yMy4xOSAxLjI2IDEuMjYgMCAwIDEtLjI2LjEzIDEuMzEgMS4zMSAwIDAgMS0uMjguMDkgMS40MyAxLjQzIDAgMCAxLS4yOS4wNnpNNjAuMSA0M2ExLjUgMS41IDAgMCAxIDEuNS0xLjUgMS41IDEuNSAwIDAgMSAxLjUgMS41IDEuNSAxLjUgMCAwIDEtMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNS0xLjV6bS04LjIyIDBhMS41IDEuNSAwIDAgMSAxLjUtMS41IDEuNSAxLjUgMCAwIDEgMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUtMS41em0tOC4yMiAwYTEuNSAxLjUgMCAwIDEgMS41LTEuNSAxLjUxIDEuNTEgMCAwIDEgMS41MSAxLjUgMS41MSAxLjUxIDAgMCAxLTEuNTEgMS41IDEuNSAxLjUgMCAwIDEtMS41LTEuNXptLTguMjEgMGExLjUgMS41IDAgMCAxIDEuNS0xLjUgMS41IDEuNSAwIDAgMSAxLjUgMS41IDEuNSAxLjUgMCAwIDEtMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNS0xLjV6bS04LjIyIDBhMS41IDEuNSAwIDAgMSAxLjUtMS41IDEuNSAxLjUgMCAwIDEgMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUtMS41ek0xOSA0M2ExLjUgMS41IDAgMCAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAyMiA0M2ExLjUgMS41IDAgMCAxLTEuNSAxLjVBMS41IDEuNSAwIDAgMSAxOSA0M3ptLTguMiAwYTEuNSAxLjUgMCAwIDEgMS41LTEuNSAxLjUgMS41IDAgMCAxIDEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUgMS41IDEuNSAxLjUgMCAwIDEtMS41LTEuNXptNTkuMDEgMS40N2ExLjUgMS41IDAgMCAxLTEuMDYtLjQ3IDEuNTIgMS41MiAwIDAgMS0uNDQtMSAxLjUgMS41IDAgMCAxIDEuNzktMS41bC4yOC4wOC4yNi4xNGEyLjExIDIuMTEgMCAwIDEgLjIzLjE5IDEuNSAxLjUgMCAwIDEgLjQ0IDEuMDkgMS41MiAxLjUyIDAgMCAxLS40NCAxIDIuMTEgMi4xMSAwIDAgMS0uMjMuMTkgMS4yNiAxLjI2IDAgMCAxLS4yNi4xMyAxLjMxIDEuMzEgMCAwIDEtLjI4LjA5IDEuMzYgMS4zNiAwIDAgMS0uMjkuMDZ6bS0xLjUgNzAuNDZhMS41IDEuNSAwIDAgMSAxLjUtMS41IDEuNSAxLjUgMCAwIDEgMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUtMS41em0wLThhMS41IDEuNSAwIDAgMSAxLjUtMS41IDEuNSAxLjUgMCAwIDEgMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUtMS41em0wLThhMS41IDEuNSAwIDAgMSAxLjUtMS41IDEuNSAxLjUgMCAwIDEgMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUtMS40OXptMC04YTEuNSAxLjUgMCAwIDEgMS41LTEuNSAxLjUgMS41IDAgMCAxIDEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUgMS41IDEuNSAxLjUgMCAwIDEtMS41LTEuNDl6bTAtOGExLjUgMS41IDAgMCAxIDEuNS0xLjUgMS41IDEuNSAwIDAgMSAxLjUgMS41IDEuNSAxLjUgMCAwIDEtMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNS0xLjQzem0wLThhMS41IDEuNSAwIDAgMSAxLjUtMS41IDEuNSAxLjUgMCAwIDEgMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUtMS40M3ptMC04YTEuNSAxLjUgMCAwIDEgMS41LTEuNSAxLjUgMS41IDAgMCAxIDEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUgMS40OSAxLjUgMS41IDAgMCAxLTEuNS0xLjQyem0wLThhMS41IDEuNSAwIDAgMSAxLjUtMS41IDEuNSAxLjUgMCAwIDEgMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUtMS40M3ptMC04YTEuNSAxLjUgMCAwIDEgMS41LTEuNSAxLjUgMS41IDAgMCAxIDEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUgMS41IDEuNSAxLjUgMCAwIDEtMS41LTEuNDN6IiBmaWxsPSIjZGVlNGY1Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTI2LjY3IDMuNTdoNzkuNDF2OTYuNjFIMjYuNjd6Ii8+PHBhdGggZD0iTTEwNi45MiAxMDFIOTEuNzhjLTEuNjQgMC0zLjI0LjE1LTQuOS4xOHMtMy4zOS0uMDUtNS4xMS0uMTNjLS44NSAwLTEuNy0uMDYtMi41NCAwcy0xLjY3IDAtMi40OSAwbC05LjkxLjI5Yy0zLjMyLjA4LTYuNjIuMjQtMTAgLjI2cy02Ljc4LS4yNy0xMC4xMS0uMTljLTYuNjMuNDItMTMuNC4xNi0yMC4wNyAwaC0uMDhhMS4xIDEuMSAwIDAgMS0xLjA3LTEuMTNjLjA4LTIgLjA2LTQgLjA4LTZzMC00IDAtNi0uMTktNC0uMjMtNiAuMTUtNCAuMjgtNmEyMS42IDIxLjYgMCAwIDAgMC0zIDI3Ljg2IDI3Ljg2IDAgMCAxLS4xNC0zdi02bC4xMy0xMi4wOHYtMTJsLjMzLTZhNTMgNTMgMCAwIDAtLjEzLTZjLS4yMy00IC4xMi04IC4yNi0xMi4wOGwuMDYtM3YtM2wtLjA4LTZBLjU1LjU1IDAgMCAxIDI2LjY0IDNjMy4zLS4xIDYuNjEgMCA5LjkyIDBzNi42MiAwIDkuOTMuMDZjMS42NSAwIDMuMzEuMDYgNSAuMDdINTRsMi40OC0uMDggOS45My0uMzNDNzMgMi41NCA3OS42IDIuNCA4Ni4yMiAyLjQzYzMuMzEuMDcgNi42Mi4zIDkuOTMuMjRsOS45Mi0uMjZhMS4xMyAxLjEzIDAgMCAxIDEuMTYgMS4xdi4wNmwuMTggNi4xYzAgMi0uMTEgNC4wNi0uMTYgNi4wOCAwIDQuMDYuMjIgOC4xNi4xMyAxMi4yMiAwIDItLjI2IDQtLjMzIDYtLjA2IDEgMCAyIDAgM3Y2LjA2bC0uMTIgM2E0Ni43NSA0Ni43NSAwIDAgMCAuMDkgNi4xM2MuMjEgNC4xNi0uMjEgOC0uMiAxMi4wOC0uMTcgNCAuMTMgOC4yIDAgMTIuMjEgMCAyLS4xNSA0LS4xNiA2cy4wNyA0LjExLjEzIDYuMTlsLjA4IDMuMTJ2My4wNmMuMDYgMi4xOC4xMyA0LjE4LjA1IDYuMTh6bS0xLjctMS42OVY4Ny4zN2MwLTIgLjA4LTMuOTMuMDYtNS45M3MtLjItNC4xMy0uMjYtNi4xNWMtLjE1LTQuMDguMjItNy44MyAwLTExLjkzLS4wNi0yLS4xNi00LjA2LS4yNy02LjFhNDMuODkgNDMuODkgMCAwIDEgMC02IDMxLjE0IDMxLjE0IDAgMCAwIC4xNi01LjkgNDQuNzUgNDQuNzUgMCAwIDEtLjA5LTYgNTguNDUgNTguNDUgMCAwIDAgLjE4LTUuODZjMC0yLS4yNy00LjA1LS4yOC02czAtNCAuMTEtNS45NS4xNS00IC4xNC02LS4xOS00LS4xNi02bC4xNC02IDEuMTEgMS4xMWMtMy4zMS0uMDctNi42MS0uMTktOS45Mi0uMThzLTYuNjIuMy05LjkzLjQzQzc5LjYgNS4wNiA3MyA1IDY2LjM3IDQuODNjLTEuNjYgMC0zLjMxLS4xLTUtLjE3bC01LS4yOWMtMy4zMS0uMTgtNi42MSAwLTkuOTIuMTMtNi42Mi4yMi0xMy4yNC4zOS0xOS44NS4yN2wxLjItMS4yLS4yOCA2djNsLjEgM2MuMjIgNCAuODMgOC4wNi4zNyAxMi4wOC0uMTEgMS0uMjcgMi0uMzQgM3MwIDIgMCAzYy4xMSAyIC40MSA0IC41IDZ2M2wtLjA3IDMtLjE0IDZMMjggNjRsLS4wNiA2YTIyIDIyIDAgMCAxLS4yIDMgMjAuMTggMjAuMTggMCAwIDAtLjA4IDNjLjA5IDIgLjI4IDQgLjE5IDZsLS4yNyA2Yy0uMDYgNC0uMTQgOC4wNS0uMTMgMTIuMDhsLS43NC0uNzVoOS44NWMzLjI4IDAgNi41OC4wOCA5Ljg2LjA2czYuNTEtLjI1IDkuNzYtLjI5IDYuNTcuMSA5Ljg3LjE0bDkuOTEuMTloNC44OWMxLjU5IDAgMy4xOC0uMTQgNC44Mi0uMTRzMy4zNC4xMSA1IC4xNGw0Ljg2LS4wNmMzLjE3LS4wNSA2LjQ3LS4wMiA5LjY5LS4wNHoiIGZpbGw9IiNmZmYiLz48ZyBvcGFjaXR5PSIuNSIgZmlsbD0iI2RlZTRmNSI+PHBhdGggZD0iTTI2LjY3IDMuNTdoNzkuNDF2OTYuNjFIMjYuNjd6Ii8+PHBhdGggZD0iTTEwNi45MiAxMDFIOTEuNzhjLTEuNjQgMC0zLjI0LjE1LTQuOS4xOHMtMy4zOS0uMDUtNS4xMS0uMTNjLS44NSAwLTEuNy0uMDYtMi41NCAwcy0xLjY3IDAtMi40OSAwbC05LjkxLjI5Yy0zLjMyLjA4LTYuNjIuMjQtMTAgLjI2cy02Ljc4LS4yNy0xMC4xMS0uMTljLTYuNjMuNDItMTMuNC4xNi0yMC4wNyAwaC0uMDhhMS4xIDEuMSAwIDAgMS0xLjA3LTEuMTNjLjA4LTIgLjA2LTQgLjA4LTZzMC00IDAtNi0uMTktNC0uMjMtNiAuMTUtNCAuMjgtNmEyMS42IDIxLjYgMCAwIDAgMC0zIDI3Ljg2IDI3Ljg2IDAgMCAxLS4xNC0zdi02bC4xMy0xMi4wOHYtMTJsLjMzLTZhNTMgNTMgMCAwIDAtLjEzLTZjLS4yMy00IC4xMi04IC4yNi0xMi4wOGwuMDYtM3YtM2wtLjA4LTZBLjU1LjU1IDAgMCAxIDI2LjY0IDNjMy4zLS4xIDYuNjEgMCA5LjkyIDBzNi42MiAwIDkuOTMuMDZjMS42NSAwIDMuMzEuMDYgNSAuMDdINTRsMi40OC0uMDggOS45My0uMzNDNzMgMi41NCA3OS42IDIuNCA4Ni4yMiAyLjQzYzMuMzEuMDcgNi42Mi4zIDkuOTMuMjRsOS45Mi0uMjZhMS4xMyAxLjEzIDAgMCAxIDEuMTYgMS4xdi4wNmwuMTggNi4xYzAgMi0uMTEgNC4wNi0uMTYgNi4wOCAwIDQuMDYuMjIgOC4xNi4xMyAxMi4yMiAwIDItLjI2IDQtLjMzIDYtLjA2IDEgMCAyIDAgM3Y2LjA2bC0uMTIgM2E0Ni43NSA0Ni43NSAwIDAgMCAuMDkgNi4xM2MuMjEgNC4xNi0uMjEgOC0uMiAxMi4wOC0uMTcgNCAuMTMgOC4yIDAgMTIuMjEgMCAyLS4xNSA0LS4xNiA2cy4wNyA0LjExLjEzIDYuMTlsLjA4IDMuMTJ2My4wNmMuMDYgMi4xOC4xMyA0LjE4LjA1IDYuMTh6bS0xLjctMS42OVY4Ny4zN2MwLTIgLjA4LTMuOTMuMDYtNS45M3MtLjItNC4xMy0uMjYtNi4xNWMtLjE1LTQuMDguMjItNy44MyAwLTExLjkzLS4wNi0yLS4xNi00LjA2LS4yNy02LjFhNDMuODkgNDMuODkgMCAwIDEgMC02IDMxLjE0IDMxLjE0IDAgMCAwIC4xNi01LjkgNDQuNzUgNDQuNzUgMCAwIDEtLjA5LTYgNTguNDUgNTguNDUgMCAwIDAgLjE4LTUuODZjMC0yLS4yNy00LjA1LS4yOC02czAtNCAuMTEtNS45NS4xNS00IC4xNC02LS4xOS00LS4xNi02bC4xNC02IDEuMTEgMS4xMWMtMy4zMS0uMDctNi42MS0uMTktOS45Mi0uMThzLTYuNjIuMy05LjkzLjQzQzc5LjYgNS4wNiA3MyA1IDY2LjM3IDQuODNjLTEuNjYgMC0zLjMxLS4xLTUtLjE3bC01LS4yOWMtMy4zMS0uMTgtNi42MSAwLTkuOTIuMTMtNi42Mi4yMi0xMy4yNC4zOS0xOS44NS4yN2wxLjItMS4yLS4yOCA2djNsLjEgM2MuMjIgNCAuODMgOC4wNi4zNyAxMi4wOC0uMTEgMS0uMjcgMi0uMzQgM3MwIDIgMCAzYy4xMSAyIC40MSA0IC41IDZ2M2wtLjA3IDMtLjE0IDZMMjggNjRsLS4wNiA2YTIyIDIyIDAgMCAxLS4yIDMgMjAuMTggMjAuMTggMCAwIDAtLjA4IDNjLjA5IDIgLjI4IDQgLjE5IDZsLS4yNyA2Yy0uMDYgNC0uMTQgOC4wNS0uMTMgMTIuMDhsLS43NC0uNzVoOS44NWMzLjI4IDAgNi41OC4wOCA5Ljg2LjA2czYuNTEtLjI1IDkuNzYtLjI5IDYuNTcuMSA5Ljg3LjE0bDkuOTEuMTloNC44OWMxLjU5IDAgMy4xOC0uMTQgNC44Mi0uMTRzMy4zNC4xMSA1IC4xNGw0Ljg2LS4wNmMzLjE3LS4wNSA2LjQ3LS4wMiA5LjY5LS4wNHoiLz48L2c+PHJlY3QgeD0iMzguOCIgeT0iMTYuMTciIHdpZHRoPSIyMS45NiIgaGVpZ2h0PSIyMy4zMyIgcng9IjEwLjcxIiByeT0iMTAuNzEiIGZpbGw9IiNkZWU0ZjUiLz48cGF0aCBkPSJNNTAuMDUgNDAuMjlhMTEuNzggMTEuNzggMCAwIDEtNC43LS44MmMtLjcyLS4zNS0xLjQzLS43Mi0yLjE1LTEuMDktLjM1LS4xOS0uNjgtLjQzLTEtLjY0cy0uNjUtLjUtMS0uNzZhMTEuNDUgMTEuNDUgMCAwIDEtMy4yNy04Ljg3TDM4IDI3YzAtLjM5IDAtLjguMDctMS4ycy4xNC0uOC4yMi0xLjJsLjM0LTEuMTZhMTAuNjggMTAuNjggMCAwIDEgMi41MS00IDE1LjUxIDE1LjUxIDAgMCAxIDEuNzYtMS41OCAxMC4xOCAxMC4xOCAwIDAgMSAyLjA2LTEuMTYgMTMuNjMgMTMuNjMgMCAwIDEgNC41OC0uOTUgMTEuODUgMTEuODUgMCAwIDEgNC41OC44MSAxMi4yOSAxMi4yOSAwIDAgMSA0IDIuNDEgMTEuNzUgMTEuNzUgMCAwIDEgMy40NiA4LjY1IDEyLjYxIDEyLjYxIDAgMCAxLTMgOC44MiA3LjU3IDcuNTcgMCAwIDEtLjg5LjgxIDguNDYgOC40NiAwIDAgMS0xIC43MiAxMi40MiAxMi40MiAwIDAgMS0yIDEuMjMgMTEuMTQgMTEuMTQgMCAwIDEtNC42NCAxLjA5em0wLTEuNThhOS42OSA5LjY5IDAgMCAwIDQtLjkyIDkuMzIgOS4zMiAwIDAgMCAxLjc3LTEuMDYgNS4xMiA1LjEyIDAgMCAwIC43Ni0uNzEgNy4wNyA3LjA3IDAgMCAwIC42Ny0uNzggMTEuMTUgMTEuMTUgMCAwIDAgMi4wOS0zLjQ5bC4zLTEgLjE2LTEgLjA3LTF2LTEuMThjMC0uMzguMDUtLjc2IDAtMS4xYTYuMTUgNi4xNSAwIDAgMCAwLTEgNiA2IDAgMCAwLS41My0yQTEwLjE5IDEwLjE5IDAgMCAwIDU3LjA1IDIwYy0uNTEtLjQ3LTEuMDctLjg2LTEuNTctMS4zNmE0LjQ0IDQuNDQgMCAwIDAtMS44Mi0xIDYuMDcgNi4wNyAwIDAgMC0xLS4yNSA2LjE0IDYuMTQgMCAwIDAtMS0uMTJjLS43MS0uMDgtMS4zMyAwLTIuMTEgMGgtMWE4LjYxIDguNjEgMCAwIDAtMSAuMTIgOS4zOCA5LjM4IDAgMCAwLTIgLjY4IDExLjMyIDExLjMyIDAgMCAwLTEuNzkgMSA1IDUgMCAwIDAtLjgzLjYybC0uMzkuMzUtLjMyLjRhMjUuMzUgMjUuMzUgMCAwIDAtMi4xMSAzLjU1IDYuNDggNi40OCAwIDAgMC0uMzIgMWMtLjA1LjM0LS4xMS42OS0uMTUgMUwzOS40NiAyN2wtLjEgMS4xM2E5LjM4IDkuMzggMCAwIDAgMyA3LjcxYy4yNC4yNS41LjQ5Ljc1Ljc0cy41NC40NS44My42NmE1LjU5IDUuNTkgMCAwIDAgMS45LjkyIDExLjIzIDExLjIzIDAgMCAwIDQuMjEuNTV6IiBmaWxsPSIjZGVlNGY1Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTQ5Ljc3IDI3Ljg0aDI4LjY4djMwLjQ3SDQ5Ljc3eiIvPjxwYXRoIGQ9Ik03OSA1OC44N2MtMi40My4wNS01LS4xMy03LjMxLjA3YTQxLjQyIDQxLjQyIDAgMCAwLTcuMjYuMTggMjQuODcgMjQuODcgMCAwIDEtMy42NyAwIDE2IDE2IDAgMCAwLTMuNjcuMDVjLTIuNDMuMTYtNC45Mi0uMi03LjM0LS4yMWEuNjcuNjcgMCAwIDEtLjY3LS42OHYtMS45MWMwLS42NC0uMS0xLjI3LS4xNS0xLjktLjE1LTEuMjcuNDQtMi41NC4wOC0zLjgxIDAtMi41NC4xLTUuMDguMS03LjYyYTMyLjMxIDMyLjMxIDAgMCAxIC4wOS0zLjgxIDE1LjI2IDE1LjI2IDAgMCAwIC4xOC0xLjljMC0uNjQtLjEzLTEuMjctLjE2LTEuOTEgMC0xLjI2LjE1LTIuNTMuMjMtMy44czAtMi41NC0uMDUtMy44MWEuMzYuMzYgMCAwIDEgLjM0LS4zN2MxLjItLjA2IDIuMzkgMCAzLjU5IDBzMi4zOSAwIDMuNTguMDZjMi4zOS4xNiA0Ljc4LS4yMyA3LjE3LS4yOWE4Ni4xIDg2LjEgMCAwIDEgMy41OS0uMTMgMjUuMTkgMjUuMTkgMCAwIDEgMy41OC4wOSA2My42MiA2My42MiAwIDAgMCA3LjItLjE3Ljg3Ljg3IDAgMCAxIC44OS44M3YuMDZhMTggMTggMCAwIDEtLjEgMS45NCAxOCAxOCAwIDAgMCAwIDEuOTQgMTUuNjEgMTUuNjEgMCAwIDEtLjEyIDMuODcgMzguMyAzOC4zIDAgMCAwLS4wNiAzLjg3IDEzLjIgMTMuMiAwIDAgMC0uMTEgMS45IDE5LjY0IDE5LjY0IDAgMCAxIC4xNSAyYy0uMDYgMS4yNy0uMjIgMi40OS0uMjIgMy43N3MuMTYgMi42OSAwIDMuOTFhMjEuMDggMjEuMDggMCAwIDAgMCAzLjg5djJjMCAuNjYuMTIgMS4yNi4xMiAxLjg5em0tMS4xMy0xLjEzdi0zLjcxYTE4LjY0IDE4LjY0IDAgMCAwLS4wOC0zLjc4IDM1LjUgMzUuNSAwIDAgMSAwLTMuNzJjMC0xLjI1LS4yMy0yLjU5LS4yOC0zLjg0YTguNjcgOC42NyAwIDAgMSAuMjEtMS43OCAxMS4yOCAxMS4yOCAwIDAgMC0uMTItMS45IDguNTQgOC41NCAwIDAgMSAuMS0xLjgzIDcuODIgNy44MiAwIDAgMCAwLTEuODcgMTQuMjEgMTQuMjEgMCAwIDEgMC0zLjc0IDE0LjM5IDE0LjM5IDAgMCAwIC4wNi0xLjg2YzAtLjYzLS4xMS0xLjI1LS4wOS0xLjg3bC44My44M2MtMi4zOSAwLTQuNzgtLjQtNy4xNy0uMDhhMjEuNDkgMjEuNDkgMCAwIDEtMy41OC4xOUg2NS45bC0xLjc5LS4wN2MtMi4zOSAwLTQuNzgtLjY0LTcuMTctLjI5YTY4LjY5IDY4LjY5IDAgMCAxLTcuMTcuMjJsLjgtLjhhMjIuMDkgMjIuMDkgMCAwIDAtLjE2IDMuODEgMjIuMzMgMjIuMzMgMCAwIDEgLjM3IDMuOCAxNiAxNiAwIDAgMC0uMzUgMS45MSA4Ljg2IDguODYgMCAwIDAgLjI2IDEuOSAxNi4xOSAxNi4xOSAwIDAgMSAwIDMuODFjLS4xMSAyLjU0IDAgNS4wOC0uMTcgNy42Mi0uNDIgMS4yNy4xMyAyLjU0IDAgMy44MWwtLjE4IDEuOS0uMDUgMS45MS0uNTMtLjUzYzIuMzcuMDkgNC43MSAwIDcuMDggMGEyMi41NyAyMi41NyAwIDAgMCAzLjUtLjEgMjUuNDggMjUuNDggMCAwIDEgMy41IDAgNDUgNDUgMCAwIDAgNy4wNS4wNmMyLjQ3LjE3IDQuNjYtLjAzIDcgMHoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNODMuNzEgNDEuMTlMNzQgNTkuMjhsMjEuNDYtLjY3LTExLjE1LTE3LjQ1YS4zNC4zNCAwIDAgMC0uNi4wM3oiIGZpbGw9IiNkZWU0ZjUiLz48cGF0aCBkPSJNODQuNCA0MS41NmMtLjgyIDEuNS0xLjU5IDMtMi40OSA0LjQ4bC0xIDIuMzdjLS4zNS43OC0uNzUgMS41My0xLjE3IDIuMjhsLTIuNTIgNC40N2MtLjgxIDEuNS0xLjY3IDMtMi41NCA0LjQ1bC0uNjUtMWMxLjc5IDAgMy41OC4xNCA1LjM3IDBzMy41OCAwIDUuMzctLjA5IDMuNTcgMCA1LjM2LS4xMmE1My41MSA1My41MSAwIDAgMSA1LjM2LS40M2wtLjU1IDEtMS40OS0yLjIzYy0uNTItLjc0LTEtMS40Ny0xLjUyLTIuMjJDOTEgNTMgOTAuMTMgNTEuNDMgODkuMSA1MGMtLjQ4LS43Ni0xLTEuNDgtMS40NS0yLjI2cy0uODUtMS41OC0xLjM2LTIuMzEtMS0xLjQ5LTEuNTEtMi4yMkw4NCA0Mi4wOGwtLjMxLS40NmEuNDQuNDQgMCAwIDAgLjcxLS4wNnptLTEuNC0uNzRhMS4xMyAxLjEzIDAgMCAxIC44NS0uNiAxLjE1IDEuMTUgMCAwIDEgMSAuMzYgMiAyIDAgMCAxIC4xNy4yNGwuMDkuMTQuMTkuMjguNzMgMS4xMiAxLjQ4IDIuMjRjLjQ3Ljc2IDEuMDYgMS40NCAxLjU4IDIuMTdzLjk0IDEuNTIgMS40MSAyLjI4Yy44OSAxLjU2IDEuODYgMy4wNiAyLjc4IDQuNi40NC43OC44NSAxLjU4IDEuMzQgMi4zM2wxLjUzIDIuMmEuNzguNzggMCAwIDEtLjIgMS4wOC43NS43NSAwIDAgMS0uMzguMTNoLS4wNmEyNC43MiAyNC43MiAwIDAgMS01LjM3LjA3Yy0xLjc5LjA3LTMuNTcuNTItNS4zNi40NGExNy4yNiAxNy4yNiAwIDAgMC0yLjY5IDBjLS44OS4wNi0xLjc4LjA3LTIuNjguMDgtMS43OS0uMTUtMy41Ny40MS01LjM2LjE0aC0uMjVhLjguOCAwIDAgMS0uNjctLjkyLjY5LjY5IDAgMCAxIC4xMi0uMzJsLjc1LTEuMDkuNi0xLjEzYy40NS0uNzMuOTMtMS40NCAxLjQtMi4xNS44OS0xLjQ3IDEuNi0zIDIuMzQtNC41Ny4zNi0uNzguNzItMS41NSAxLjE0LTIuM2wxLjMtMi4yMWMuNjYtMS41OCAxLjQ4LTMuMDggMi4yMi00LjYxem0xNC43NiAzNi42OUg4NmExIDEgMCAwIDEgMC0yaDExLjc2YTEgMSAwIDAgMSAwIDJ6bS0yMC4xNiAwSDM1YTEgMSAwIDAgMSAwLTJoNDIuNmExIDEgMCAwIDEgMCAyek05OCA4OC4xNEg2OS4zMWExIDEgMCAwIDEgMC0ySDk4YTEgMSAwIDAgMSAwIDJ6bS0zNy4yNSAwSDM1YTEgMSAwIDAgMSAwLTJoMjUuNzVhMSAxIDAgMCAxIDAgMnoiIGZpbGw9IiNkZWU0ZjUiLz48Y2lyY2xlIGN4PSIxMDcuNDEiIGN5PSIxMDYuNDMiIHI9IjE4IiBmaWxsPSIjZGVlNGY1IiBzdHJva2U9IiNkZWU0ZjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzIi8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMyIgZD0iTTEwNy40MSA5Ni44NHYxOS4xOG03LjE4LTkuNTlsLTcuMTgtOS41OS03LjE4IDkuNTkiLz48L3N2Zz4K';
|
4610 |
|
4611 | var AssetImageUpload = 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTI5IDEwOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik02OC43OCAxMDYuMjVhMS41MiAxLjUyIDAgMCAxLTEuMDYtLjQ0IDEuNTQgMS41NCAwIDAgMS0uMzItLjQ5IDEuMzkgMS4zOSAwIDAgMS0uMTItLjU3IDEuNDEgMS40MSAwIDAgMSAuMTItLjU4Ljk0Ljk0IDAgMCAxIC4xNC0uMjYgMSAxIDAgMCAxIC4xOC0uMjIgMS41NCAxLjU0IDAgMCAxIDIuMTIgMCAxLjUgMS41IDAgMCAxLTEuMDYgMi41NnptLTkuNzgtMS41YTEuNSAxLjUgMCAxIDEgMyAwIDEuNSAxLjUgMCAwIDEtMyAwem0tOC4zMSAwYTEuNSAxLjUgMCAwIDEgMyAwIDEuNTEgMS41MSAwIDAgMS0xLjUgMS41IDEuNSAxLjUgMCAwIDEtMS41My0xLjVoLjAzem0tOC4zMiAwYTEuNSAxLjUgMCAxIDEgMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNTMtMS41aC4wM3ptLTguMzEgMGExLjUgMS41IDAgMSAxIDEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjU2LTEuNWguMDZ6bS04LjMxIDBhMS41IDEuNSAwIDEgMSAxLjUgMS41IDEuNSAxLjUgMCAwIDEtMS41My0xLjVoLjAzem0tOC4zMiAwYTEuNSAxLjUgMCAxIDEgMS41IDEuNSAxLjUxIDEuNTEgMCAwIDEtMS41My0xLjVoLjAzem0tOC4zMSAwYTEuNSAxLjUgMCAxIDEgMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNTMtMS41aC4wM3ptLTYuODQgMS41YTEuNSAxLjUgMCAwIDEtMS4wNi0uNDQgMS41IDEuNSAwIDAgMSAwLTIuMTIgMS4wNiAxLjA2IDAgMCAxIC4yMy0uMTkgMS4wOCAxLjA4IDAgMCAxIC4yNi0uMTQgMS4zMSAxLjMxIDAgMCAxIC4yOC0uMDkgMS44OCAxLjg4IDAgMCAxIC41OCAwIDEuMzEgMS4zMSAwIDAgMSAuMjguMDkgMS4zIDEuMyAwIDAgMSAuMjYuMTQgMS4zNyAxLjM3IDAgMCAxIC4yMy4xOSAxLjUgMS41IDAgMCAxIC40NCAxLjA2IDEuNSAxLjUgMCAwIDEtMS41IDEuNXptLTEuNS05LjQzYTEuNSAxLjUgMCAxIDEgMyAwIDEuNSAxLjUgMCAwIDEtMyAwem0wLTcuOTJhMS41IDEuNSAwIDEgMSAzIDAgMS41IDEuNSAwIDAgMS0zIDB6bTAtNy45MmExLjUgMS41IDAgMSAxIDMgLjAyIDEuNSAxLjUgMCAwIDEtMyAwdi0uMDJ6bTAtNy45M2ExLjUgMS41IDAgMSAxIDMgMCAxLjUgMS41IDAgMCAxLTMgMHptMC03LjkyYTEuNSAxLjUgMCAxIDEgMyAwIDEuNSAxLjUgMCAwIDEtMyAwem0wLTcuOTNhMS41IDEuNSAwIDEgMSAzIDAgMS41IDEuNSAwIDAgMS0zIDB6bTAtNy45MmExLjUgMS41IDAgMSAxIDMgMCAxLjUgMS41IDAgMCAxLTMgMHptMS41LTYuNDJhMS41IDEuNSAwIDAgMS0xLjA2LTIuNTYgMS4wNiAxLjA2IDAgMCAxIC4yMy0uMTkgMS41OSAxLjU5IDAgMCAxIC4yNi0uMTFsLjI5LS4xMWExLjQyIDEuNDIgMCAwIDEgLjU4IDBsLjI4LjA4LjI2LjE0YTEuMzcgMS4zNyAwIDAgMSAuMjMuMTkgMS41IDEuNSAwIDAgMS0xLjA2IDIuNTZoLS4wMXpNNTkgNDEuMzZhMS41IDEuNSAwIDEgMSAzIDAgMS41IDEuNSAwIDAgMS0zIDB6bS04LjMxIDBhMS41IDEuNSAwIDEgMSAxLjUgMS41IDEuNSAxLjUgMCAwIDEtMS41My0xLjVoLjAzem0tOC4zMiAwYTEuNSAxLjUgMCAxIDEgMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNTMtMS41aC4wM3ptLTguMzEgMGExLjUgMS41IDAgMSAxIDEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjU2LTEuNWguMDZ6bS04LjMxIDBhMS41IDEuNSAwIDEgMSAxLjUgMS41IDEuNSAxLjUgMCAwIDEtMS41My0xLjVoLjAzem0tOC4zMiAwYTEuNSAxLjUgMCAxIDEgMS41IDEuNSAxLjUgMS41IDAgMCAxLTEuNTMtMS41aC4wM3ptLTguMzEgMGExLjUgMS41IDAgMSAxIDEuNSAxLjUgMS41IDEuNSAwIDAgMS0xLjUzLTEuNWguMDN6bTU5LjY2IDEuNWExLjQ5IDEuNDkgMCAwIDEtMS4zOC0yLjA4IDEuMSAxLjEgMCAwIDEgLjE0LS4yNiAxLjI0IDEuMjQgMCAwIDEgLjE4LS4yMiAxLjUyIDEuNTIgMCAwIDEgMS4zNi0uNDFsLjI4LjA4YTIgMiAwIDAgMSAuMjUuMTQgMS4wNiAxLjA2IDAgMCAxIC4yMy4xOSAxLjMgMS4zIDAgMCAxIC4xOS4yMmMwIC4wOS4xLjE3LjE0LjI2YTEuNDcgMS40NyAwIDAgMSAuMDguMjggMS41IDEuNSAwIDAgMS0uNDEgMS4zNiAxIDEgMCAwIDEtLjIzLjE4IDEuMjMgMS4yMyAwIDAgMS0uMjUuMTQgMS40MSAxLjQxIDAgMCAxLS41OC4xMnptLTEuNSA1My45NmExLjUgMS41IDAgMSAxIDMgMCAxLjUgMS41IDAgMCAxLTMgMHptMC03LjkyYTEuNSAxLjUgMCAxIDEgMyAwIDEuNSAxLjUgMCAwIDEtMyAwem0wLTcuOTJjMC0uODMuNjctMS41MDUgMS41LTEuNTFhMS41MSAxLjUxIDAgMCAxIDEuNSAxLjUzIDEuNSAxLjUgMCAwIDEtMyAwdi0uMDJ6bTAtNy45M2ExLjUgMS41IDAgMSAxIDMgMCAxLjUgMS41IDAgMCAxLTMgMHptMC03LjkyYTEuNSAxLjUgMCAxIDEgMyAwIDEuNSAxLjUgMCAwIDEtMyAwem0wLTcuOTNhMS41IDEuNSAwIDEgMSAzIDAgMS41IDEuNSAwIDAgMS0zIDB6bTAtNy45MmExLjUgMS41IDAgMSAxIDMgMCAxLjUgMS41IDAgMCAxLTMgMHoiIGZpbGw9IiNERUU0RjUiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTE3LjY0IDEuOThoOTEuMjZ2ODcuNTVIMTcuNjR6Ii8+PHBhdGggZD0iTTEwOS43NSA5MC4zOEg5OC4xNmMtMS45MiAwLTMuODgtLjA2LTUuNzMgMC0uOTQgMC0xLjg1LjEtMi44MS4xaC0yLjkxYy0yLS4wNy0zLjk1LS4xNy01Ljg2LS4xNmwtNS42OC4xNS0xMS4zOC4zM2MtMS45MSAwLTMuODEuMTMtNS43NS4xcy0zLjg5LS4xMy01LjgzLS4xN2MtMS45NC0uMDQtMy44NSAwLTUuNzUuMDZzLTMuODEuMTctNS43My4xOWMtMy44Ny0uMDctNy43Mi0uMTQtMTEuNTgtLjI2bC0yLjg4LS4wOGgtOC42M2ExIDEgMCAwIDEtMS0xYzAtMy42NS0uMzktNy4yOS0uMTctMTAuOTRhNDUuNSA0NS41IDAgMCAwIC4yMy01LjQ3Yy0uMDYtLjkxLS4xNy0xLjgzLS4xOC0yLjc0LS4wMS0uOTEgMC0xLjgyIDAtMi43MyAwLTcuMy4yMS0xNC42LjE2LTIxLjg5VjQwLjRjMC0xLjgyLjE3LTMuNjUuMjUtNS40OC4wOC0xLjgzLjE5LTMuNjQuMTMtNS40Ny0uMDYtMS44My0uMjQtMy42NC0uMjMtNS40NyAwLTMuNjUuMy03LjI5LjM3LTEwLjk0LjA3LTMuNjUgMC03LjMtLjA4LTEwLjk1IDAtLjMuMjQtLjU0NS41NC0uNTUgMy44LS4wOSA3LjYxIDAgMTEuNDEgMHM3LjYgMCAxMS40MS4xMWMxLjkgMCAzLjguMDUgNS43IDBsNS43LS4xOGMzLjgxLS4xNiA3LjYxLS4yNCAxMS40MS0uMzMgMy44LS4wOSA3LjYtLjEyIDExLjQxLS4xOCAzLjgxLS4wNiA3LjYuMjEgMTEuNC4yNiAzLjguMDUgNy42MS0uMTYgMTEuNDEtLjI0IDMuOC0uMDggNy42MS0uMzMgMTEuNDEtLjFoLjA4QTEuMTkgMS4xOSAwIDAgMSAxMTAuMTMgMmMwIC45My0uMDYgMS44NS0uMDcgMi43N2wuMDYgMi43Ni4xMSA1LjU0YzAgMS44NSAwIDMuNjktLjEyIDUuNTItLjEyIDEuODMtLjI2IDMuNjQtLjI3IDUuNDggMCAzLjY4LjE2IDcuNDEtLjA5IDExYTQ1LjIxIDQ1LjIxIDAgMCAwIC4xMSA1LjU2IDUzLjcyIDUzLjcyIDAgMCAxIDAgNS41M2MtLjE2IDMuNjItLjI1IDcuMjUtLjI2IDEwLjkzLS4wMSAzLjY4LjE3IDcuNDcgMCAxMS0uMTcgMy41MyAwIDcuMzQuMDggMTEuMTEuMDYgMS45IDAgMy43My4wNiA1LjU5LjA2IDEuODYuMDMgMy43Ny4wMSA1LjU5em0tMS43LTEuN1Y3Ny44N2MuMDYtMy41NS4xOC03LjA4LS4wNi0xMC44NS0uMS0xLjg3LS4xOS0zLjcyLS4xNy01LjUxbC4xMS01LjM0YzAtMy42LS4xOC03LjMtLjM3LTExYTM2Ljg5IDM2Ljg5IDAgMCAxIDAtNS4zNyAzMC41MiAzMC41MiAwIDAgMCAuMTgtNS4zNSA1MCA1MCAwIDAgMS0uMTYtNS40NWMwLTEuNzguMjMtMy41NS4yMy01LjM2di0yLjcybC0uMTYtMi43M2MtLjEyLTEuODItLjEyLTMuNjItLjA5LTUuNDJsLjE3LTUuNC4wOC0yLjdWMS45NWwxLjE0IDEuMTVjLTcuNjEuMzItMTUuMjEtLjM5LTIyLjgyLS4xOC0xLjkgMC0zLjguMTktNS43LjI5LS45NS4wNy0xLjkuMS0yLjg1LjEzLS45NS4wMy0xLjkuMDUtMi44NSAwLTMuODEgMC03LjYxLjA1LTExLjQxLS4wNy0zLjgtLjEyLTcuNi0uMDktMTEuNDEtLjMzYTk0LjMgOTQuMyAwIDAgMC0xMS40LS4yYy03LjYxLjMyLTE1LjIxLjQ4LTIyLjgyLjM4TDE4Ljg0IDJjLS4xNCAzLjY1LS40MSA3LjMtLjI1IDExIC4xNiAzLjcuNTggNy4yOS41OSAxMC45NCAwIDEuODMtLjM0IDMuNjUtLjUgNS40N2EyMC44OSAyMC44OSAwIDAgMCAwIDIuNzRjMCAuOTEuMSAxLjgyLjE4IDIuNzNhNTAuNDEgNTAuNDEgMCAwIDEgLjM2IDUuNDhjLjA1IDEuODItLjA1IDMuNjQtLjA4IDUuNDdsLS4xNCA1LjR2NS40N2wtLjA4IDExdjIuNzNjMCAuOTEtLjE2IDEuODMtLjI0IDIuNzRhNDMuNDUgNDMuNDUgMCAwIDAgLjE0IDUuNDdjLjE3IDMuNjUtLjI0IDcuMjktLjI4IDEwLjk0bC0uODQtLjg0YzcuNTYuMTUgMTUuMTIuMDggMjIuNjcuMDZsNS42Ny4wNmMxLjg5IDAgMy43OSAwIDUuNjUtLjA3bDUuNTktLjE5aDUuNjZsMTEuNC4yIDUuNy4wOWMxLjg5IDAgMy43Mi0uMSA1LjU1LS4xNyAxLjgzLS4wNyAzLjczIDAgNS42NyAwaDUuNjZjMy42My0uMDMgNy40LS4wMiAxMS4xMy0uMDR6IiBmaWxsPSIjREVFNEY1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48ZyBvcGFjaXR5PSIuNSIgZmlsbD0iI0RFRTRGNSIgZmlsbC1ydWxlPSJub256ZXJvIj48cGF0aCBkPSJNMjUuOSA5LjloNzQuNzV2NzEuNzFIMjUuOXoiLz48cGF0aCBkPSJNMTAxLjIxIDgyLjE4SDg3LjA2Yy0xLjUyIDAtMy4wOC4xLTQuNjkgMC0xLjYxLS4xLTMuMjEtLjA5LTQuNzctLjA4bC00LjY1LjEtOS4zNC4yMmMtMy4wOS4xMi02LjI5IDAtOS40NSAwLTEuNTgtLjA2LTMuMTQgMC00LjcgMGwtNC43LjExYy02LjMxLS4wNy0xMi42LS4yOS0xOC44Ni0uMjVhLjcuNyAwIDAgMS0uNzEtLjY5YzAtMy0uMjQtNi0uMTEtOWE0NC43MSA0NC43MSAwIDAgMCAuMTYtNC40OGMwLS43NS0uMTItMS41LS4xMi0yLjI0di0yLjE4YzAtNiAuMTQtMTIgLjExLTE3LjkzLS4wMy01LjkzLjU3LTExLjk1LjEtMTcuOTNsLjI0LTljLjA2LTMgMC02LS4wNS05IDAtLjIuMTYtLjM2NS4zNi0uMzcgMy4xMS0uMDYgNi4yMiAwIDkuMzQgMHM2LjIzIDAgOS4zNC4wN2g0LjY3bDQuNjgtLjEyYzMuMTEtLjEgNi4yMy0uMTYgOS4zNC0uMjIgMy4xMS0uMDYgNi4yMy0uMDcgOS4zNC0uMTEgMy4xMS0uMDQgNi4yMy4xMSA5LjM1LjE1IDMuMTIuMDQgNi4yMy0uMDkgOS4zNC0uMTQgMy4xMS0uMDUgNi4yMy0uMTkgOS4zNC0uMDdoLjA2YS44MS44MSAwIDAgMSAuNzcuODJ2NC41MmwuMDYgNC41M2MwIDEuNTEgMCAzLS4wOCA0LjUxLS4wOCAxLjUxLS4xNCAzLS4xNyA0LjQ5IDAgMyAuMSA2IDAgOS0uMDcgMS40OCAwIDMgLjA2IDQuNTMuMDYgMS41MyAwIDMgMCA0LjUzLS4xIDMtLjE2IDUuOTQtLjE3IDguOTUtLjAxIDMuMDEuMTEgNi4wOSAwIDlzMCA2IC4wNSA5LjA4IDAgNi4xNy4wMSA5LjJ6bS0xLjEzLTEuMTN2LTguODhjMC0yLjg4LjEtNS44NSAwLTguOS0uMS0zLjA1LS4wOS02IDAtOC45LjA5LTIuOS0uMTEtNi0uMjQtOWE0MC42MyA0MC42MyAwIDAgMSAwLTQuNDIgMzIgMzIgMCAwIDAgLjEyLTQuNGMtLjI1LTMgMC01LjkxIDAtOC44NyAwLTIuOTYtLjMzLTYtLjE4LTguOTFsLjEtNC40NFY5Ljg4bC43Ny43N2MtMy4xMS4xMi02LjIyIDAtOS4zNCAwcy02LjIzLS4xMi05LjM0LS4wOGMtMy4xMS4wNC02LjIzLjMzLTkuMzUuMy0zLjEyLS4wMy02LjIzIDAtOS4zNCAwLTMuMTEgMC02LjIzLS4wOC05LjM0LS4yM2wtNC42OC0uMTdjLTEuNTUtLjA1LTMuMTEgMC00LjY3IDAtNi4yMy4yMi0xMi40Ni4zMi0xOC42OC4yNWwuOC0uOGMtLjEgMy0uMjggNi0uMTcgOSAuMTEgMyAuMzkgNiAuMzkgOSAwIDEuNS0uMjIgMy0uMzIgNC40OGEzMS44OSAzMS44OSAwIDAgMCAuMSA0LjQ4IDcwLjY5IDcwLjY5IDAgMCAxIC4xOCA5Yy0uMTUgNi0uMDcgMTEuOTUtLjE1IDE3LjkzdjIuMjRjMCAuNzQtLjExIDEuNDktLjE2IDIuMjRhNDEuODcgNDEuODcgMCAwIDAgLjA5IDQuNDhjLjEgMy0uMTUgNi0uMTggOWwtLjU2LS41NmM2LjE5LjEgMTIuMzkgMCAxOC41OCAwIDMuMSAwIDYuMjMuMTEgOS4yOSAwIDMuMDYtLjExIDYuMTItLjIgOS4yNC0uMTFsOS4zNC4xNCA0LjY3LjA2IDQuNTctLjFjMS41MS0uMDYgMy4wNyAwIDQuNjUgMGg0LjY0YzMuMDEtLjE1IDYuMDktLjE0IDkuMTctLjE1eiIvPjwvZz48cmVjdCBmaWxsPSIjREVFNEY1IiBmaWxsLXJ1bGU9Im5vbnplcm8iIHg9IjM0LjY3IiB5PSIyMy4xMSIgd2lkdGg9IjIyLjE1IiBoZWlnaHQ9IjI0LjUyIiByeD0iMTEuMDIiLz48cGF0aCBkPSJNNDUuNzkgNDhhMTIuMDcgMTIuMDcgMCAwIDEtOC42MS0zLjcgMTEuMTEgMTEuMTEgMCAwIDEtMi40Mi00LjE2Yy0uMTItLjM5LS4yLS43OS0uMy0xLjE4LS4xLS4zOS0uMTItLjc5LS4xOC0xLjE5bC0uMDUtMS4yMXYtMS4xNGMwLS43NyAwLTEuNTUuMDctMi4zNiAwLS40LjEzLS44LjE5LTEuMTlsLjMyLTEuMTZhMTEuMDYgMTEuMDYgMCAwIDEgMi40My00LjA4IDExLjM5IDExLjM5IDAgMCAxIDMuODItMi43OCAxMi4yNyAxMi4yNyAwIDAgMSA0LjYyLTEgMTEuMjUgMTEuMjUgMCAwIDEgNC42MSAxIDEyIDEyIDAgMCAxIDMuODggMi42OSAxMS40MSAxMS40MSAwIDAgMSAyLjQzIDQuMDljLjEzLjM3LjIyLjc3LjMyIDEuMTUuMS4zOC4xNC43OS4yMSAxLjE5bC4wNyAxLjE5djEuMTdjMCAuNzcgMCAxLjU1LS4wOSAyLjM1LS4wNS40LS4xMy44LS4xOSAxLjE5TDU2LjY0IDQwYTEwLjg3IDEwLjg3IDAgMCAxLTIuMzUgNC4xNCA3LjQ4IDcuNDggMCAwIDEtLjg2LjgzIDguMjYgOC4yNiAwIDAgMS0uOTQuNzRBMTAuOTIgMTAuOTIgMCAwIDEgNTAuNDQgNDdhMTEuNjIgMTEuNjIgMCAwIDEtNC42NSAxem0wLS43OWExMC4yOSAxMC4yOSAwIDAgMCA3Ljg2LTMuNjQgMTEuMjMgMTEuMjMgMCAwIDAgMi4yMi0zLjgxIDEzIDEzIDAgMCAwIC41My00LjQ2di0yLjI5Yy0uMDYtLjM3LS4wOS0uNzQtLjE2LTEuMTEtLjA3LS4zNy0uMTktLjczLS4zMS0xLjA4YTEwLjY5IDEwLjY5IDAgMCAwLTIuMy0zLjgyIDEwLjQ4IDEwLjQ4IDAgMCAwLTMuNTctMi42NSAxMS4yNyAxMS4yNyAwIDAgMC00LjM3LS43OGgtMS4xMWExMC42IDEwLjYgMCAwIDAtMS4xMS4xNiAxMSAxMSAwIDAgMC0yLjEuNzEgMTAuMjggMTAuMjggMCAwIDAtMy41OCAyLjYxIDE0LjEyIDE0LjEyIDAgMCAwLTIuMjMgMy44MyAxMC4yMiAxMC4yMiAwIDAgMC0uMzEgMS4xMmMwIC4zNy0uMTIuNzQtLjE2IDEuMTEtLjA4Ljc0LS4xMiAxLjUxLS4xNCAyLjI5YTEwLjU3IDEwLjU3IDAgMCAwIDIuODQgOC4zNCAxMC4yMyAxMC4yMyAwIDAgMCA4IDMuNDl2LS4wMnoiIGZpbGw9IiNERUU0RjUiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTQ1Ljc0IDM1LjM3aDI4LjkzdjMyLjAySDQ1Ljc0eiIvPjxwYXRoIGQ9Ik03NSA2Ny42N2MtMi40MyAwLTQuOTQtLjA2LTcuMyAwLTIuNTEtLjExLTQuODcgMC03LjI5LjA3LTEuMjEgMC0yLjQxLjA5LTMuNjUgMC0xLjI0LS4wOS0yLjQ2LS4wNy0zLjY2IDAtMi40My4xMi00Ljg5LS4wNy03LjMyLS4wN2EuMzYuMzYgMCAwIDEtLjM2LS4zNnYtNGMwLTEuMzMuMTItMi42NyAwLTQtLjA4LTIuNjYgMC01LjMzIDAtOHYtNGwuMDktMmMwLS42NyAwLTEuMzQtLjA2LTIgMC0xLjMzLjA2LTIuNjYuMDktNCAuMDMtMS4zNCAwLTIuNjcgMC00YS4yLjIgMCAwIDEgLjE5LS4xOWg3LjIzYzIuNDEuMDggNC44My0uMSA3LjI0LS4xMmg3LjI0YzIuNDEuMTEgNC44MiAwIDcuMjMtLjA4YS40Mi40MiAwIDAgMSAuNDMuNGMuMDcgMS4zNS0uMDkgMi42OSAwIDRzLjA3IDIuNzEgMCA0LS4wNyAyLjY3IDAgNGwtLjA3IDItLjAzIDIuMmMwIDEuMzQtLjEgMi42NS0uMTEgNC0uMDEgMS4zNS4wOCAyLjc0IDAgNGwtLjA1IDIgLjA1IDIuMDZDNzUgNjUgNzUgNjYuMzEgNzUgNjcuNjd6bS0uNTctLjU2di02bC0uMDctMmMtLjA5LTEuMzcgMC0yLjYxIDAtNGwtLjE0LTRjMC0uNjYuMTMtMS4yNy4xMi0xLjk0LS4wMS0uNjctLjA2LTEuMzQtLjA4LTJhMzcuMTIgMzcuMTIgMCAwIDAgMC00Yy0uMDktMS4zNCAwLTIuNjQgMC00IDAtMS4zNi0uMDctMi42NSAwLTRsLjQuNGMtMi40MSAwLTQuODItLjE2LTcuMjMgMGwtMS44MS4wN0g2MC4yYy0yLjQxIDAtNC44My0uMjktNy4yNC0uMTMtMi40MS4xNi00LjgyLjE2LTcuMjMuMWwuMzktLjM5YzAgMS4zMy0uMTQgMi42Ny0uMDYgNCAuMDggMS4zMy4yMyAyLjY3LjE2IDRhMTkuNDMgMTkuNDMgMCAwIDAtLjE2IDJjMCAuNjYuMDkgMS4zMy4xNCAyIC4xMiAxLjMzIDAgMi42NiAwIDQtLjA2IDIuNjcgMCA1LjM0LS4xMiA4LS4wOSAxLjM0LjEyIDIuNjcgMCA0cy0uMDcgMi42Ny0uMDkgNGwtLjI2LS4yNWg3LjE5YzEuMiAwIDIuMzkgMCAzLjU3LS4wNyAxLjE4LS4wNyAyLjM4IDAgMy41OCAwIDIuNCAwIDQuODUuMTMgNy4xNyAwIDIuNDUuMjkgNC43Ni4xOSA3LjE1LjIxaC4wNHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik04MCA0OS40bC05Ljc2IDE5IDIxLjY1LS43LTExLjMxLTE4LjMzYS4zMy4zMyAwIDAgMC0uNTguMDN6IiBmaWxsPSIjREVFNEY1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNODAuMzMgNDkuNThjLS44MiAxLjU4LTEuNjIgMy4xNy0yLjQ4IDQuNzNsLTEuMTIgMi40My0xLjIgMi4zOGMtMS42OCAzLjE1LTMuMjkgNi4zMi01IDkuNDVsLS4zMy0uNTJjMS44IDAgMy42MSAwIDUuNDItLjA5czMuNjEgMCA1LjQxLS4xM2MxLjgtLjEzIDMuNjEtLjA5IDUuNDEtLjE2IDEuOC0uMDcgMy42MS0uMjMgNS40MS0uM2wtLjI3LjUxLTMtNC43MWMtMS0xLjU4LTEuODctMy4yLTIuODgtNC43Ni0uNDktLjc5LTEtMS41Ny0xLjQ3LTIuMzdzLS45MS0xLjYyLTEuNDItMi40bC0xLjQ4LTIuMzUtLjc1LTEuMTgtLjM1LS41NC4xLjAxem0tLjctLjM2YS43NC43NCAwIDAgMSAuNTctLjQxLjcxLjcxIDAgMCAxIC42Ni4yN2MuMTkuMjcuMjcuNDEuNC42M2wuNzQgMS4xOCAxLjQ4IDIuMzZjLjQ4LjggMSAxLjU1IDEuNTIgMi4zNC41Mi43OSAxIDEuNTkgMS40NCAyLjM4bDIuODYgNC43OGE2NS4zNSA2NS4zNSAwIDAgMCAxLjQxIDIuNGwxLjUgMi4zNWEuMzguMzggMCAwIDEtLjEyLjU0LjMzLjMzIDAgMCAxLS4xOS4wNmwtMi43MS4xM2MtLjkuMDgtMS44MSAwLTIuNzEgMC0xLjguMDktMy42LjI5LTUuNDEuMzEtMS44MS4wMi0zLjYxLjEzLTUuNDEuMTQtMS44LjAxLTMuNjEuMjYtNS40Mi4xN2EuNDMuNDMgMCAwIDEtLjQxLS40NS40Ni40NiAwIDAgMSAwLS4yYy40NS0uNzcuOS0xLjU0IDEuMjktMi4zNC4zOS0uOC44OC0xLjU1IDEuMy0yLjMzLjg4LTEuNTMgMS41OC0zLjE3IDIuNDEtNC43N0w3NiA1Ni4zNyA3Ny4yNyA1NGMuNzMtMS42IDEuNTctMy4xOSAyLjM2LTQuNzh6IiBmaWxsPSIjREVFNEY1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48Y2lyY2xlIGZpbGw9IiNERUU0RjUiIGZpbGwtcnVsZT0ibm9uemVybyIgY3g9IjEwOC42NCIgY3k9Ijg4LjI1IiByPSIxOS41Ii8+PHBhdGggZD0iTTEwOC42NCA3OC42NnYxOS4xOG03LjE4LTkuNTlsLTcuMTgtOS41OS03LjE4IDkuNTkiIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L2c+PC9zdmc+Cg==';
|
4612 |
|
4613 | var styles$36 = {
|
4614 | "FileUpload": "p_km",
|
4615 | "Image": "p_j8",
|
4616 | "sizeExtraLarge": "p_yd",
|
4617 | "sizeLarge": "p_v6",
|
4618 | };
|
4619 |
|
4620 | class FileUpload$1 extends React.Component {
|
4621 | constructor(props) {
|
4622 | super(props);
|
4623 | const translate = props.polaris.intl.translate,
|
4624 | type = props.context.type;
|
4625 |
|
4626 | const suffix = capitalize(type);
|
4627 | this.state = {
|
4628 | actionTitle: translate(`Polaris.DropZone.FileUpload.actionTitle${suffix}`),
|
4629 | actionHint: translate(`Polaris.DropZone.FileUpload.actionHint${suffix}`)
|
4630 | };
|
4631 | }
|
4632 | updateStateFromProps(props) {
|
4633 | var _state = this.state;
|
4634 | const actionTitle = _state.actionTitle,
|
4635 | actionHint = _state.actionHint;
|
4636 |
|
4637 | if (props.actionTitle && props.actionTitle !== actionTitle) {
|
4638 | this.setState({ actionTitle: props.actionTitle });
|
4639 | }
|
4640 | if (props.actionHint && props.actionHint !== actionHint) {
|
4641 | this.setState({ actionHint: props.actionHint });
|
4642 | }
|
4643 | }
|
4644 |
|
4645 | componentWillReceiveProps(props) {
|
4646 | this.updateStateFromProps(props);
|
4647 | }
|
4648 |
|
4649 | componentWillMount() {
|
4650 | this.updateStateFromProps(this.props);
|
4651 | }
|
4652 | render() {
|
4653 | var _props$context = this.props.context;
|
4654 | const size = _props$context.size,
|
4655 | type = _props$context.type;
|
4656 | var _state2 = this.state;
|
4657 | const actionTitle = _state2.actionTitle,
|
4658 | actionHint = _state2.actionHint;
|
4659 |
|
4660 | const imageClasses = styles.classNames(styles$36.Image, size && size === 'extraLarge' && styles$36.sizeExtraLarge, size && size === 'large' && styles$36.sizeLarge);
|
4661 | const extraLargeView = size === 'extraLarge' ? React.createElement(
|
4662 | Stack$1,
|
4663 | { vertical: true },
|
4664 | type === 'file' && React.createElement('img', { className: imageClasses, src: AssetFileUpload, alt: '' }),
|
4665 | type === 'image' && React.createElement('img', { className: imageClasses, src: AssetImageUpload, alt: '' }),
|
4666 | React.createElement(
|
4667 | Button$2,
|
4668 | null,
|
4669 | actionTitle
|
4670 | ),
|
4671 | React.createElement(
|
4672 | TextStyle$1,
|
4673 | { variation: 'subdued' },
|
4674 | actionHint
|
4675 | )
|
4676 | ) : null;
|
4677 | const largeView = size === 'large' ? React.createElement(
|
4678 | Stack$1,
|
4679 | { vertical: true, spacing: 'tight' },
|
4680 | type === 'file' && React.createElement('img', { className: imageClasses, src: AssetFileUpload, alt: '' }),
|
4681 | type === 'image' && React.createElement('img', { className: imageClasses, src: AssetImageUpload, alt: '' }),
|
4682 | React.createElement(
|
4683 | Button$2,
|
4684 | { size: 'slim' },
|
4685 | actionTitle
|
4686 | ),
|
4687 | React.createElement(
|
4688 | Caption$1,
|
4689 | null,
|
4690 | React.createElement(
|
4691 | TextStyle$1,
|
4692 | { variation: 'subdued' },
|
4693 | actionHint
|
4694 | )
|
4695 | )
|
4696 | ) : null;
|
4697 | const mediumView = size === 'medium' ? React.createElement(
|
4698 | Stack$1,
|
4699 | { vertical: true, spacing: 'tight' },
|
4700 | React.createElement(
|
4701 | Link$2,
|
4702 | null,
|
4703 | actionTitle
|
4704 | ),
|
4705 | React.createElement(
|
4706 | Caption$1,
|
4707 | null,
|
4708 | React.createElement(
|
4709 | TextStyle$1,
|
4710 | { variation: 'subdued' },
|
4711 | actionHint
|
4712 | )
|
4713 | )
|
4714 | ) : null;
|
4715 | const smallView = size === 'small' ? React.createElement(
|
4716 | Stack$1,
|
4717 | { vertical: true, spacing: 'tight' },
|
4718 | React.createElement(Icon$2, { source: IconDragDrop, color: 'inkLightest' })
|
4719 | ) : null;
|
4720 | return React.createElement(
|
4721 | 'div',
|
4722 | { className: styles$36.FileUpload },
|
4723 | smallView,
|
4724 | mediumView,
|
4725 | largeView,
|
4726 | extraLargeView
|
4727 | );
|
4728 | }
|
4729 | }
|
4730 | var FileUpload$2 = compose$1(withContext$1(Consumer$1), withAppProvider(), withRef$1())(FileUpload$1);
|
4731 |
|
4732 | var IconAlertCircle = {"viewBox":"0 0 20 20","body":"<path fill-rule=\"evenodd\" d=\"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0m0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8m0-7a1 1 0 0 0 1-1V6a1 1 0 1 0-2 0v4a1 1 0 0 0 1 1m0 1.9a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2\"/>"};
|
4733 |
|
4734 | const dragEvents = ['dragover', 'dragenter', 'drop'];
|
4735 | function fileAccepted(file, accept) {
|
4736 | return file.type === 'application/x-moz-file' || accepts(file, accept);
|
4737 | }
|
4738 | function getDataTransferFiles(event) {
|
4739 | if (isDragEvent(event)) {
|
4740 | const dt = event.dataTransfer;
|
4741 | if (dt.files && dt.files.length) {
|
4742 | return Array.from(dt.files);
|
4743 | } else if (dt.items && dt.items.length) {
|
4744 |
|
4745 |
|
4746 | return Array.from(dt.items);
|
4747 | }
|
4748 | } else if (event.target && event.target.files) {
|
4749 |
|
4750 | return Array.from(event.target.files);
|
4751 | }
|
4752 | return [];
|
4753 | }
|
4754 | function accepts(file, acceptedFiles) {
|
4755 | if (file && acceptedFiles) {
|
4756 | const fileName = file.name || '';
|
4757 | const mimeType = file.type || '';
|
4758 | const baseMimeType = mimeType.replace(/\/.*$/, '');
|
4759 | const acceptedFilesArray = Array.isArray(acceptedFiles) ? acceptedFiles : acceptedFiles.split(',');
|
4760 | return acceptedFilesArray.some(type => {
|
4761 | const validType = type.trim();
|
4762 | if (validType.charAt(0) === '.') {
|
4763 | return fileName.toLowerCase().endsWith(validType.toLowerCase());
|
4764 | } else if (/\/\*$/.test(validType)) {
|
4765 |
|
4766 | return baseMimeType === validType.replace(/\/.*$/, '');
|
4767 | }
|
4768 | return mimeType === validType;
|
4769 | });
|
4770 | }
|
4771 | return true;
|
4772 | }
|
4773 | function isDragEvent(event) {
|
4774 | return dragEvents.indexOf(event.type) > 0;
|
4775 | }
|
4776 |
|
4777 | var styles$37 = {
|
4778 | "DropZone": "p_pd",
|
4779 | "hasOutline": "p_q3",
|
4780 | "isDragging": "p_fa",
|
4781 | "isDisabled": "p_o0",
|
4782 | "sizeExtraLarge": "p_ui",
|
4783 | "sizeLarge": "p_u9",
|
4784 | "sizeMedium": "p_k9",
|
4785 | "sizeSmall": "p_qe",
|
4786 | "Container": "p_nq",
|
4787 | "Overlay": "p_c4",
|
4788 | "hasError": "p_v2",
|
4789 | };
|
4790 |
|
4791 | const getUniqueID$3 = other.createUniqueIDFactory('DropZone');
|
4792 | class DropZone$1 extends React.Component {
|
4793 | constructor(props) {
|
4794 | super(props);
|
4795 | this.node = null;
|
4796 | this.dropNode = null;
|
4797 | this.dragTargets = [];
|
4798 | const translate = props.polaris.intl.translate,
|
4799 | type = props.type;
|
4800 |
|
4801 | const suffix = capitalize(type);
|
4802 | this.state = {
|
4803 | type,
|
4804 | id: props.id || getUniqueID$3(),
|
4805 | size: 'extraLarge',
|
4806 | dragging: false,
|
4807 | error: false,
|
4808 | overlayText: translate(`Polaris.DropZone.overlayText${suffix}`),
|
4809 | errorOverlayText: translate(`Polaris.DropZone.errorOverlayText${suffix}`)
|
4810 | };
|
4811 | }
|
4812 | static getDerivedStateFromProps(nextProps, prevState) {
|
4813 | const id = prevState.id,
|
4814 | error = prevState.error,
|
4815 | type = prevState.type,
|
4816 | overlayText = prevState.overlayText,
|
4817 | errorOverlayText = prevState.errorOverlayText;
|
4818 |
|
4819 | const newState = {};
|
4820 | if (nextProps.id != null && id !== nextProps.id) {
|
4821 | newState.id = nextProps.id || id;
|
4822 | }
|
4823 | if (nextProps.error != null && error !== nextProps.error) {
|
4824 | newState.error = nextProps.error;
|
4825 | }
|
4826 | if (nextProps.type != null && type !== nextProps.type) {
|
4827 | newState.type = nextProps.type;
|
4828 | }
|
4829 | if (nextProps.overlayText != null && overlayText !== nextProps.overlayText) {
|
4830 | newState.overlayText = nextProps.overlayText;
|
4831 | }
|
4832 | if (nextProps.errorOverlayText != null && errorOverlayText !== nextProps.errorOverlayText) {
|
4833 | newState.errorOverlayText = nextProps.errorOverlayText;
|
4834 | }
|
4835 | return Object.keys(newState).length ? newState : null;
|
4836 | }
|
4837 | get getContext() {
|
4838 | return {
|
4839 | size: this.state.size,
|
4840 | type: this.state.type || 'file'
|
4841 | };
|
4842 | }
|
4843 | render() {
|
4844 | var _state = this.state;
|
4845 | const id = _state.id,
|
4846 | dragging = _state.dragging,
|
4847 | error = _state.error,
|
4848 | size = _state.size,
|
4849 | overlayText = _state.overlayText,
|
4850 | errorOverlayText = _state.errorOverlayText;
|
4851 | var _props = this.props;
|
4852 | const label = _props.label,
|
4853 | labelAction = _props.labelAction,
|
4854 | labelHidden = _props.labelHidden,
|
4855 | children = _props.children,
|
4856 | disabled = _props.disabled,
|
4857 | outline = _props.outline,
|
4858 | accept = _props.accept,
|
4859 | active = _props.active,
|
4860 | overlay = _props.overlay,
|
4861 | allowMultiple = _props.allowMultiple;
|
4862 |
|
4863 | const inputAttributes = {
|
4864 | id,
|
4865 | accept,
|
4866 | disabled,
|
4867 | type: 'file',
|
4868 | multiple: allowMultiple,
|
4869 | ref: this.setInputNode,
|
4870 | onChange: this.handleDrop,
|
4871 | autoComplete: 'off'
|
4872 | };
|
4873 | const classes = styles.classNames(styles$37.DropZone, outline && styles$37.hasOutline, (active || dragging) && styles$37.isDragging, error && styles$37.hasError, size && size === 'extraLarge' && styles$37.sizeExtraLarge, size && size === 'large' && styles$37.sizeLarge, size && size === 'medium' && styles$37.sizeMedium, size && size === 'small' && styles$37.sizeSmall);
|
4874 | const dragOverlay = (active || dragging) && !error && overlay ? React.createElement(
|
4875 | 'div',
|
4876 | { className: styles$37.Overlay },
|
4877 | React.createElement(
|
4878 | Stack$1,
|
4879 | { vertical: true, spacing: 'tight' },
|
4880 | React.createElement(Icon$2, { source: IconDragDrop, color: 'blue' }),
|
4881 | size === 'extraLarge' && React.createElement(
|
4882 | DisplayText$1,
|
4883 | { size: 'small', element: 'p' },
|
4884 | overlayText
|
4885 | ),
|
4886 | (size === 'medium' || size === 'large') && React.createElement(
|
4887 | Caption$1,
|
4888 | null,
|
4889 | overlayText
|
4890 | )
|
4891 | )
|
4892 | ) : null;
|
4893 | const dragErrorOverlay = dragging && error ? React.createElement(
|
4894 | 'div',
|
4895 | { className: styles$37.Overlay },
|
4896 | React.createElement(
|
4897 | Stack$1,
|
4898 | { vertical: true, spacing: 'tight' },
|
4899 | React.createElement(Icon$2, { source: IconAlertCircle, color: 'red' }),
|
4900 | size === 'extraLarge' && React.createElement(
|
4901 | DisplayText$1,
|
4902 | { size: 'small', element: 'p' },
|
4903 | errorOverlayText
|
4904 | ),
|
4905 | (size === 'medium' || size === 'large') && React.createElement(
|
4906 | Caption$1,
|
4907 | null,
|
4908 | overlayText
|
4909 | )
|
4910 | )
|
4911 | ) : null;
|
4912 | const dropZoneMarkup = React.createElement(
|
4913 | 'div',
|
4914 | { ref: this.setNode, className: classes, 'aria-disabled': disabled, onClick: this.handleClick, onDragStart: handleDragStart },
|
4915 | dragOverlay,
|
4916 | dragErrorOverlay,
|
4917 | React.createElement(
|
4918 | 'div',
|
4919 | { className: styles$37.Container },
|
4920 | children
|
4921 | ),
|
4922 | React.createElement(
|
4923 | VisuallyHidden$1,
|
4924 | null,
|
4925 | React.createElement('input', inputAttributes)
|
4926 | )
|
4927 | );
|
4928 | const labelledDropzoneMarkup = label ? React.createElement(
|
4929 | Labelled$1,
|
4930 | { id: id, label: label, action: labelAction, labelHidden: labelHidden },
|
4931 | dropZoneMarkup
|
4932 | ) : dropZoneMarkup;
|
4933 | return React.createElement(
|
4934 | Provider$1,
|
4935 | { value: this.getContext },
|
4936 | labelledDropzoneMarkup
|
4937 | );
|
4938 | }
|
4939 | componentDidMount() {
|
4940 | this.dragTargets = [];
|
4941 |
|
4942 | this.setState({ error: this.props.error });
|
4943 | if (!this.dropNode) {
|
4944 | return;
|
4945 | }
|
4946 | events.addEventListener(this.dropNode, 'drop', this.handleDrop);
|
4947 | events.addEventListener(this.dropNode, 'dragover', this.handleDragOver);
|
4948 | events.addEventListener(this.dropNode, 'dragenter', this.handleDragEnter);
|
4949 | events.addEventListener(this.dropNode, 'dragleave', this.handleDragLeave);
|
4950 | events.addEventListener(window, 'resize', this.adjustSize);
|
4951 | if (this.props.openFileDialog) {
|
4952 | this.triggerFileDialog();
|
4953 | }
|
4954 | }
|
4955 | componentWillUnmount() {
|
4956 | if (!this.dropNode) {
|
4957 | return;
|
4958 | }
|
4959 | events.removeEventListener(this.dropNode, 'drop', this.handleDrop);
|
4960 | events.removeEventListener(this.dropNode, 'dragover', this.handleDragOver);
|
4961 | events.removeEventListener(this.dropNode, 'dragenter', this.handleDragEnter);
|
4962 | events.removeEventListener(this.dropNode, 'dragleave', this.handleDragLeave);
|
4963 | events.removeEventListener(window, 'resize', this.adjustSize);
|
4964 | }
|
4965 | componentDidUpdate() {
|
4966 | if (this.props.openFileDialog) {
|
4967 | this.triggerFileDialog();
|
4968 | }
|
4969 | }
|
4970 | triggerFileDialog() {
|
4971 | this.open();
|
4972 | if (this.props.onFileDialogClose) {
|
4973 | this.props.onFileDialogClose();
|
4974 | }
|
4975 | }
|
4976 | open() {
|
4977 | if (!this.fileInputNode) {
|
4978 | return;
|
4979 | }
|
4980 | this.fileInputNode.click();
|
4981 | }
|
4982 | adjustSize() {
|
4983 | if (!this.node) {
|
4984 | return;
|
4985 | }
|
4986 | let size = 'extraLarge';
|
4987 | const width = this.node.getBoundingClientRect().width;
|
4988 | if (width < 100) {
|
4989 | size = 'small';
|
4990 | } else if (width < 160) {
|
4991 | size = 'medium';
|
4992 | } else if (width < 300) {
|
4993 | size = 'large';
|
4994 | }
|
4995 | this.setState({ size });
|
4996 | }
|
4997 | getValidatedFiles(files) {
|
4998 | var _props2 = this.props;
|
4999 | const accept = _props2.accept,
|
5000 | allowMultiple = _props2.allowMultiple,
|
5001 | customValidator = _props2.customValidator;
|
5002 |
|
5003 | const acceptedFiles = [];
|
5004 | const rejectedFiles = [];
|
5005 | Array.from(files).forEach(file => {
|
5006 | if (!fileAccepted(file, accept) || customValidator && !customValidator(file)) {
|
5007 | rejectedFiles.push(file);
|
5008 | } else {
|
5009 | acceptedFiles.push(file);
|
5010 | }
|
5011 | });
|
5012 | if (!allowMultiple) {
|
5013 | acceptedFiles.splice(1, acceptedFiles.length);
|
5014 | rejectedFiles.push(...acceptedFiles.slice(1));
|
5015 | }
|
5016 | return {
|
5017 | files,
|
5018 | acceptedFiles,
|
5019 | rejectedFiles
|
5020 | };
|
5021 | }
|
5022 | setNode(node) {
|
5023 | const dropOnPage = this.props.dropOnPage;
|
5024 |
|
5025 | this.node = node;
|
5026 | this.dropNode = dropOnPage ? document : node;
|
5027 | this.adjustSize();
|
5028 | }
|
5029 | setInputNode(node) {
|
5030 | this.fileInputNode = node;
|
5031 | }
|
5032 | handleClick(event) {
|
5033 | var _props3 = this.props;
|
5034 | const onClick = _props3.onClick,
|
5035 | disabled = _props3.disabled;
|
5036 |
|
5037 | if (disabled) {
|
5038 | return;
|
5039 | }
|
5040 | return onClick ? onClick(event) : this.open();
|
5041 | }
|
5042 | handleDrop(event) {
|
5043 | event.preventDefault();
|
5044 | event.stopPropagation();
|
5045 | var _props4 = this.props;
|
5046 | const disabled = _props4.disabled,
|
5047 | onDrop = _props4.onDrop,
|
5048 | onDropAccepted = _props4.onDropAccepted,
|
5049 | onDropRejected = _props4.onDropRejected;
|
5050 |
|
5051 | if (disabled) {
|
5052 | return;
|
5053 | }
|
5054 | const fileList = getDataTransferFiles(event);
|
5055 |
|
5056 | var _getValidatedFiles = this.getValidatedFiles(fileList);
|
5057 |
|
5058 | const files = _getValidatedFiles.files,
|
5059 | acceptedFiles = _getValidatedFiles.acceptedFiles,
|
5060 | rejectedFiles = _getValidatedFiles.rejectedFiles;
|
5061 |
|
5062 | this.dragTargets = [];
|
5063 | this.setState({ dragging: false, error: rejectedFiles.length > 0 });
|
5064 | if (onDrop) {
|
5065 | onDrop(files, acceptedFiles, rejectedFiles);
|
5066 | }
|
5067 | if (onDropAccepted && acceptedFiles.length) {
|
5068 | onDropAccepted(acceptedFiles);
|
5069 | }
|
5070 | if (onDropRejected && rejectedFiles.length) {
|
5071 | onDropRejected(rejectedFiles);
|
5072 | }
|
5073 | }
|
5074 | handleDragEnter(event) {
|
5075 | event.preventDefault();
|
5076 | event.stopPropagation();
|
5077 | const dragging = this.state.dragging;
|
5078 | var _props5 = this.props;
|
5079 | const disabled = _props5.disabled,
|
5080 | onDragEnter = _props5.onDragEnter;
|
5081 |
|
5082 | if (disabled) {
|
5083 | return;
|
5084 | }
|
5085 | const fileList = getDataTransferFiles(event);
|
5086 | if (event.target && this.dragTargets.indexOf(event.target) === -1) {
|
5087 | this.dragTargets.push(event.target);
|
5088 | }
|
5089 | if (dragging) {
|
5090 | return false;
|
5091 | }
|
5092 |
|
5093 | var _getValidatedFiles2 = this.getValidatedFiles(fileList);
|
5094 |
|
5095 | const rejectedFiles = _getValidatedFiles2.rejectedFiles;
|
5096 |
|
5097 | this.setState({ dragging: true, error: rejectedFiles.length > 0 });
|
5098 | if (onDragEnter) {
|
5099 | onDragEnter();
|
5100 | }
|
5101 | }
|
5102 | handleDragOver(event) {
|
5103 | event.preventDefault();
|
5104 | event.stopPropagation();
|
5105 | var _props6 = this.props;
|
5106 | const disabled = _props6.disabled,
|
5107 | onDragOver = _props6.onDragOver;
|
5108 |
|
5109 | if (disabled) {
|
5110 | return;
|
5111 | }
|
5112 | if (onDragOver) {
|
5113 | onDragOver();
|
5114 | }
|
5115 | return false;
|
5116 | }
|
5117 | handleDragLeave(event) {
|
5118 | event.preventDefault();
|
5119 | var _props7 = this.props;
|
5120 | const disabled = _props7.disabled,
|
5121 | onDragLeave = _props7.onDragLeave;
|
5122 |
|
5123 | if (disabled) {
|
5124 | return;
|
5125 | }
|
5126 | this.dragTargets = this.dragTargets.filter(el => {
|
5127 | return el !== event.target && this.dropNode && this.dropNode.contains(el);
|
5128 | });
|
5129 | if (this.dragTargets.length > 0) {
|
5130 | return;
|
5131 | }
|
5132 | this.setState({ dragging: false, error: false });
|
5133 | if (onDragLeave) {
|
5134 | onDragLeave();
|
5135 | }
|
5136 | }
|
5137 | }
|
5138 | DropZone$1.FileUpload = FileUpload$2;
|
5139 | DropZone$1.defaultProps = {
|
5140 | type: 'file',
|
5141 | outline: true,
|
5142 | overlay: true,
|
5143 | allowMultiple: true
|
5144 | };
|
5145 | tslib_1.__decorate([decorators.autobind], DropZone$1.prototype, "triggerFileDialog", null);
|
5146 | tslib_1.__decorate([decorators.autobind], DropZone$1.prototype, "open", null);
|
5147 | tslib_1.__decorate([decorators.autobind, decorators.debounce(50, { trailing: true })], DropZone$1.prototype, "adjustSize", null);
|
5148 | tslib_1.__decorate([decorators.autobind], DropZone$1.prototype, "getValidatedFiles", null);
|
5149 | tslib_1.__decorate([decorators.autobind], DropZone$1.prototype, "setNode", null);
|
5150 | tslib_1.__decorate([decorators.autobind], DropZone$1.prototype, "setInputNode", null);
|
5151 | tslib_1.__decorate([decorators.autobind], DropZone$1.prototype, "handleClick", null);
|
5152 | tslib_1.__decorate([decorators.autobind], DropZone$1.prototype, "handleDrop", null);
|
5153 | tslib_1.__decorate([decorators.autobind], DropZone$1.prototype, "handleDragEnter", null);
|
5154 | tslib_1.__decorate([decorators.autobind], DropZone$1.prototype, "handleDragOver", null);
|
5155 | tslib_1.__decorate([decorators.autobind], DropZone$1.prototype, "handleDragLeave", null);
|
5156 | function handleDragStart(event) {
|
5157 | event.preventDefault();
|
5158 | event.stopPropagation();
|
5159 | }
|
5160 | var DropZone$2 = withAppProvider()(DropZone$1);
|
5161 |
|
5162 | var emptySearch = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzggMTU4Ij48cGF0aCBkPSJNOS4xOSAxMjkuODRhNDAuMDI5IDQwLjAyOSAwIDAgMS00LjktNy4xNEMtMTMuOTEgODguNTkgNTguMDgtNDEuODggMTM1Ljg1IDE4LjQzYTEwNS45NDYgMTA1Ljk0NiAwIDAgMSA4LjM0IDcuMThjLjMyLjMuNjMuNi45NS45MSA4Ny40OSA4NS04Mi4zIDE2Ni4yOC0xMzUuOTUgMTAzLjMyeiIgZmlsbD0iI2Y0ZjZmOCIvPjxwYXRoIGQ9Ik0xMjIuNiAxMDAuODg1Yy0zLjM2NyA1LjQtNy44MzQgMTAuNzY1LTEzLjY0NiAxMy42MDUtNC4yODcgMi4xLTE0LjQ1MyA5Ljc1LTMxLjcwOSA3LjAzMy03LjU2LTE0LjUyMyA0MC40MzEtMTEuMzIzIDIzLjE0OS0zMi44Ny04LjA3Mi0xMC4wODEgMTMuMzI3LTE0LjEyIDEwLjc0Ny0yMy42MDctMS43NTYtNi40NTItMTIuNTktNy40MS02LjA5My0xOS4yMTYgNC4xNzQtNy41ODktNC45Ny04LjE5NC05LjgzOS0xMC45MTRhOC40MzkgOC40MzkgMCAwIDEtMi45Ni0yLjcxNCAyNS41NCAyNS41NCAwIDAgMSAyLjYyNC40NzJjNC42MDkgMS4xIDkuMzE3IDMuNjI0IDEzLjMyNSA2LjExOSAxMC44ODEgNi43ODcgMTQuODM2IDEzLjQxNCAxNy4yMjEgMTkuNDggNS43NzUgMTQuNzQ5IDUuNzA1IDI4Ljk1MS0yLjgxOSA0Mi42MTJ6IiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Ik0xMTMuNyAyOC4yMDZjLS4xNTUuMTM2LS4zMTQuMjcyLS40NjkuNDEyLS40NDIuMzktLjg4NS43OS0xLjMzMSAxLjE4NGEyNC4xIDI0LjEgMCAwIDEtMy42NDIgMi44MSAxOS4zMzUgMTkuMzM1IDAgMCAxLTQuNTY5LjkzOGMtMi40MDUtMS41MzItNy43MjMtMS40LTcuNDY2LTQuODc5LjE3LTIuMjg4IDIuMy00Ljg1NiA0LjEzOC02LjM0My4xNjMtLjEzMi4zMjUtLjI1My40OC0uMzY3IDMuNTMyLTIuNTQ5IDguMjYtMi40MjEgMTIuMzQ1LTEuNjYgNC41NTkuODQ3IDMuNjE0IDUuMjM4LjUxNCA3LjkwNXoiIGZpbGw9IiNhZmJhZGQiLz48cGF0aCBkPSJNMTEzLjk2NCAyOC41MDhjLS44MjMuNzIxLTEuNzIgMS4zNzUtMi40ODggMi4xNzktLjk1NS41OTEtMS43IDEuNDQtMi42NDcgMi4wNzdsLS4zNTguMjQ4YTMuMSAzLjEgMCAwIDEtLjQ2NS4yMTIgNC4xNTcgNC4xNTcgMCAwIDEtLjgzOS4xNzggOS44ODEgOS44ODEgMCAwIDAtMS42MjkuNCA5LjIzOCA5LjIzOCAwIDAgMS0xLjcyNS4xNjIuODEzLjgxMyAwIDAgMS0uMjIyLS4wMzYuNDA3LjQwNyAwIDAgMS0uMTMtLjA2NmwtLjAzOS0uMDI3LS4xNTYtLjEwOWE0LjQ3MiA0LjQ3MiAwIDAgMC0uMzQ0LS4xNzkgOC41NTIgOC41NTIgMCAwIDAtLjczMy0uMzA3IDcuMDUxIDcuMDUxIDAgMCAxLTEuNTYxLS40NzggMS44NyAxLjg3IDAgMCAwLS44LS4yMjFjLS4yNzEtLjA2OS0uNTMyLS4xNzItLjgtLjI2OGE3LjgyNSA3LjgyNSAwIDAgMS0xLjU1Mi0uNzUyIDMuNDQ5IDMuNDQ5IDAgMCAxLTEuMjc2LTEuMjg4IDMuOTY3IDMuOTY3IDAgMCAxLS4xNjktMS43ODlBMy4yMzEgMy4yMzEgMCAwIDEgOTYuNSAyNi44YTE3LjkgMTcuOSAwIDAgMSAxLjg1Ni0yLjggMTIuODIzIDEyLjgyMyAwIDAgMSAyLjQ5NC0yLjIyMSA5Ljg5MSA5Ljg5MSAwIDAgMSAyLjk0LTEuNjU5IDEwLjA1IDEwLjA1IDAgMCAxIDEuNjQ0LS40MjhjLjU2MS0uMDgzIDEuMTMtLjA2IDEuNjg2LS4xMjVzMS4xMTktLjExMyAxLjY4LS4xMzZhNS44MzUgNS44MzUgMCAwIDEgMS42NzkuMDg5Yy41NTYuMDY3IDEuMTE3LjA3OCAxLjY3MS4xNThhMTUuNDM0IDE1LjQzNCAwIDAgMSAxLjY0My40MzIgNS43IDUuNyAwIDAgMSAuODM3LjI3NiAzLjE4IDMuMTggMCAwIDEgLjczOS41MDdjLjIxNS4yMS40NzIuMzc0LjY5MS42YTIuMTIyIDIuMTIyIDAgMCAxIC40MjIuODI5IDQuNjc0IDQuNjc0IDAgMCAxIC4wNTEgMS43ODggMy43ODggMy43ODggMCAwIDEtLjUzIDEuNjQ5Yy0uMy40ODktLjU2Ni45OTItLjg4NCAxLjQ3NGE3LjcxNCA3LjcxNCAwIDAgMS0xLjE1NSAxLjI3NXptLS41MjUtLjZhMTEuMjc3IDExLjI3NyAwIDAgMCAxLjExNi0xLjEyMSAzLjYwOSAzLjYwOSAwIDAgMCAuODYyLTEuMzEzYy4xMzktLjUwOC4zNjYtLjk2NC40NzYtMS40NmEyLjIgMi4yIDAgMCAwLS4xODgtMS40MmMtLjEtLjIwOS0uMjIyLS4zODktLjMxNy0uNmExLjExNCAxLjExNCAwIDAgMC0uNDIyLS41NzFjLS4yMTUtLjEyMy0uNDQ3LS4yLS42NjctLjMxNWE1LjQxMSA1LjQxMSAwIDAgMC0uNjg3LS4zMzJjLS40ODQtLjE3My0xLjA3MS0uMDgzLTEuNi0uMjFhMTMuNzQ3IDEzLjc0NyAwIDAgMC0xLjYwOC0uMjcxYy0xLjA4Ny4wMzEtMi4xNjEtLjIwOS0zLjI0Ny0uMTEyYTcuOCA3LjggMCAwIDAtMS41ODIuMzRjLS41MTkuMTIxLTEuMDQuMjI1LTEuNTQ1LjM4OWExMi4zNzEgMTIuMzcxIDAgMCAwLTEuNS41MTkgOCA4IDAgMCAwLTEuNDYuNjcgMTYuMDY0IDE2LjA2NCAwIDAgMC0yLjI2IDIuM2MtLjYzNC44MzktMS41NTMgMS41Ni0xLjc0MiAyLjY1YTUuMzE3IDUuMzE3IDAgMCAxLS40NDIgMS40NjguODc4Ljg3OCAwIDAgMC0uMDExLjcyNWMuMS4yMjcuMjQzLjQuMzMxLjU5M2EyLjczIDIuNzMgMCAwIDAgLjkzMyAxLjAxIDguMjIgOC4yMiAwIDAgMCAxLjQxMS42NjRjLjI0OC4xLjUwOS4xNzQuNzYuMjhhMS42ODYgMS42ODYgMCAwIDAgLjc3LjI5MiA1LjQzMSA1LjQzMSAwIDAgMSAxLjU3NS41NTljLjI2Mi4xLjUyMy4yMTQuNzc4LjM0NGwuMzguMi4xODkuMTA5Yy4xMTkuMDYtLjAzNSAwIC4wNjQuMDE5YTE1Ljg0OCAxNS44NDggMCAwIDAgMS41ODUtLjI0MyA3LjYyNiA3LjYyNiAwIDAgMCAxLjU5NC0uMzgyYy4yNTYtLjEuNTEzLS4xOTEuNzYyLS4yNjZhMi43MjYgMi43MjYgMCAwIDAgLjMyMy0uMWwuMzQ1LS4yQTEwLjUyMyAxMC41MjMgMCAwIDAgMTExIDMwLjE0Yy44NzgtLjY2NiAxLjYxMi0xLjQ5NiAyLjQzOS0yLjI0eiIgZmlsbD0iI2FmYmFkZCIvPjxnIG9wYWNpdHk9Ii40IiBmaWxsPSIjN2I4ZWQwIj48cGF0aCBkPSJNMTEzLjIzMyAyOC42MThjLS40NDIuMzktLjg4NS43OS0xLjMzMSAxLjE4NGEyNC4xIDI0LjEgMCAwIDEtMy42NDIgMi44MSAxOS4zMzUgMTkuMzM1IDAgMCAxLTQuNTY5LjkzOGMtMi40MDUtMS41MzItNy43MjMtMS40LTcuNDY2LTQuODc5LjE3LTIuMjg4IDIuMy00Ljg1NiA0LjEzOC02LjM0M2EyMi42NjggMjIuNjY4IDAgMCAxIDEyLjg3IDYuMjl6Ii8+PHBhdGggZD0iTTExMy42MzIgMjguNjMxYTEzLjYzMSAxMy42MzEgMCAwIDEtMS41IDEuNDE4Yy0uMjQuMTc3LS4zOTIuNDU0LS42MzcuNjI4LS4yMy4xOTEtLjUxNS4zMTYtLjczOS41MTVsLTEuMzU4IDEuMmE4LjMxMyA4LjMxMyAwIDAgMS0uNzM4LjU0MiAxLjUxOCAxLjUxOCAwIDAgMS0uNS4yMTRsLS40NjYuMDkxYTQuNjczIDQuNjczIDAgMCAwLS44NjcuMjc0IDQuMjU5IDQuMjU5IDAgMCAxLS44ODMuMTc1Yy0uNi4wNzItMS4xOS4xMjMtMS44LjIwOGwtLjI0My4wMThoLS4xNDNjLS4wNDItLjAwNi0uMDU5IDAtLjEyMy0uMDEyYS41NDYuNTQ2IDAgMCAxLS4xMzQtLjA1MmwtLjAyNC0uMDFhMy44NzggMy44NzggMCAwIDAtLjM4My0uMTU0IDMgMyAwIDAgMS0uNzQ1LS40MDhjLS41NjYtLjEyMy0xLjExMi0uMzI2LTEuNjc3LS41MDdsLTEuNy0uNTdjLS42LS4xNDQtMS4wMzMtLjY2Ni0xLjYxOC0uODgxYTIuMjY3IDIuMjY3IDAgMCAxLTEuMTI1LTEuNDg3IDMuMTM3IDMuMTM3IDAgMCAxLS4wOTMtMS44NDMgNi4zNzMgNi4zNzMgMCAwIDEgLjY2NC0xLjY5Yy4zMTctLjUxNC42MjUtMS4wMjUuOTMzLTEuNTQ2YTkuNyA5LjcgMCAwIDEgMi40MDctMi43bC4wNTYtLjA0MWEuMjQyLjI0MiAwIDAgMSAuMjEtLjAzN2MxLjE5My4zNTIgMi40ODMuMjI3IDMuNjQuNzI2LjU3NS4yMjggMS4yLjMwNiAxLjc2LjU5YTkuMDQ2IDkuMDQ2IDAgMCAwIC44MDguNDY2Yy4yNzguMTMxLjU3NC4yMjYuODQ2LjM3MWEzLjczNyAzLjczNyAwIDAgMCAuOC40NiAyLjQxNSAyLjQxNSAwIDAgMSAuODI3LjQxNCAxMS4zIDExLjMgMCAwIDAgMS41MjkgMS4wMzhjLjU1Ny4yODQuOTE4LjgyNSAxLjQ2NCAxLjEyNi4yNTEuMTc5LjUxOC4zNDQuNzUyLjU0N2E0LjE0MyA0LjE0MyAwIDAgMSAuOC45MTd6bS0uOC0uMDI2YTEuMjI3IDEuMjI3IDAgMCAxLS41MjYtLjMyM2MtLjIyOC0uMTkxLS40MTktLjQyNS0uNjM1LS42MzQtLjQtLjQ1Ny0xLjAzNy0uNjEyLTEuNDY4LTEuMDI5YTQuOTQxIDQuOTQxIDAgMCAwLTEuNTQzLS45MDYgMS44OTEgMS44OTEgMCAwIDEtLjc0LS41MDggMi40MDggMi40MDggMCAwIDAtLjgxMy0uMzc2Yy0uMjc3LS4xMTEtLjUwNS0uMzI2LS43NzQtLjQ1OGE1LjE1MyA1LjE1MyAwIDAgMC0uODU5LS4yNjdjLS41Ny0uMTc0LTEuMDgtLjUxOC0xLjY2Mi0uNjY2LTEuMTY2LS4yMTQtMi4yNy0uODQ3LTMuNS0uNjlsLjMxMi0uMDkxYy0uODIxLjgtMS42NSAxLjU4OC0yLjQ1MiAyLjQyN2EzLjIzNiAzLjIzNiAwIDAgMC0uOTUyIDEuNDM0IDkuNDA3IDkuNDA3IDAgMCAwLS41IDEuNiAzLjY3NCAzLjY3NCAwIDAgMC0uMDg0IDEuNTYzYy4yMTEuNTIxLjc5My42MDcgMS4wNzYgMS4wODlhLjg1MS44NTEgMCAwIDAgLjcxNy40IDIuMjg4IDIuMjg4IDAgMCAxIC44Mi4yMzIgMTEuMzQgMTEuMzQgMCAwIDAgMS42NDQuNiA3LjQ0NCA3LjQ0NCAwIDAgMSAxLjY3Ny42NyAyLjA4NSAyLjA4NSAwIDAgMSAuODY3LjMyN2MuMTMuMDkuMjU4LjE4Ny4zODIuMjg3LS4xLS4wMTctLjAyMy4wMDcuMDQzIDBsLjItLjAwOWExMS4yODEgMTEuMjgxIDAgMCAwIDEuNzI5LS4yNzggMTUuMjQ4IDE1LjI0OCAwIDAgMCAxLjcwOS0uNDA4Yy4xMzQtLjA1Ni4yNjktLjExLjM5MS0uMTc0YTIuNTM3IDIuNTM3IDAgMCAwIC4zMTctLjJjLjI0OS0uMTQ2LjUtLjI4OS43NDUtLjQ0Ny40ODktLjMxNC45NzMtLjY0NSAxLjQzNS0xLjAwNy4yMjktLjE4NS40LS40MzkuNjEzLS42MzlzLjQ4LS4zNDYuNjg1LS41NTlhNi45MTMgNi45MTMgMCAwIDEgMS4xNDctLjk2NXoiLz48L2c+PHBhdGggZD0iTTExNC44IDYyLjc5MWMuMDY5IDIxLjQ3OC0xMi4xODEgMTguODQyLTMxLjUgMzUuMTg3LTEyLjg3NiAxMC44OTMtMjIuNyA2LjQ3Ny0yNC4yNDYtLjczOGE5LjY0OCA5LjY0OCAwIDAgMS0uMi0yLjUyNEM1OS4xMTQgODkuNDEgNjMuNiA4My40NDQgNzQgODAuOTI1IDg0LjgzNyA3OC4zIDgwLjggNTkuNyA5OS42NDUgNTEuNGMuNDQ2LS4yLjktLjM4NiAxLjM3NC0uNTcxLjIwNi0uMDgyLjQwOC0uMTU1LjYwNS0uMjI3IDkuMzM1LTMuMzcgMTMuMTQ2IDEuODM2IDEzLjE3NiAxMi4xODl6IiBmaWxsPSIjZmZiZjRkIi8+PHBhdGggZD0iTTExNSA2Mi43OWEzMy44NTMgMzMuODUzIDAgMCAxLTEuNDU0IDEwLjUgMTYuOTU0IDE2Ljk1NCAwIDAgMS0yLjQ3OSA0LjcxbC0uODIxIDEuMDU5Yy0uMjgxLjM0Ni0uNjIxLjYzOC0uOTI5Ljk2cy0uNjI3LjYzNC0uOTUyLjkzOWwtMS4wMzUuODRhODYuMTMyIDg2LjEzMiAwIDAgMS04Ljg2MSA1LjgxN2MtMy4wMjUgMS44MDktNS45OSAzLjcwNi04Ljg1OCA1Ljc0NS0yLjg5MSAyLjAyMS01LjUzOSA0LjMxLTguMzcyIDYuNDU2YTI0LjY4NCAyNC42ODQgMCAwIDEtOS41NCA0LjU0NGwtMS4zMTUuMjM2LTEuMzM2LjA3MmE3LjI3IDcuMjcgMCAwIDEtMS4zMzYtLjA0NyA2LjUgNi41IDAgMCAxLTEuMzI0LS4xODUgOS4zMjIgOS4zMjIgMCAwIDEtNy4yLTEyLjIyMSAxNC44IDE0LjggMCAwIDEgNi41ODEtOC4wODYgMjYuMzE1IDI2LjMxNSAwIDAgMSA0Ljc3Ny0yLjMwOGMxLjY0NS0uNjUxIDMuNDQxLS45MiA1LjAyMi0xLjZhOS41NzggOS41NzggMCAwIDAgMy44NjEtMy40IDI4LjMxNSAyOC4zMTUgMCAwIDAgMi40ODQtNC42MjEgODIuMTI5IDgyLjEyOSAwIDAgMSA0LjU4Ny05LjU0OCAyNy43IDI3LjcgMCAwIDEgNy4wMjktNy45MTVBMzAuNzA5IDMwLjcwOSAwIDAgMSAxMDMgNDkuOTkzYTEyLjA0MiAxMi4wNDIgMCAwIDEgNS4zLS40MDcgNi42IDYuNiAwIDAgMSA0LjM4OCAyLjkxOCAxMy41MjUgMTMuNTI1IDAgMCAxIDEuODcyIDQuOTg4IDM0LjAzNCAzNC4wMzQgMCAwIDEgLjQ0IDUuMjk4em0tLjQgMGEzMy42NTEgMzMuNjUxIDAgMCAwLS40MzYtNS4yMjggMTMuMTQxIDEzLjE0MSAwIDAgMC0xLjgwOC00LjgzOCA2LjIgNi4yIDAgMCAwLTQuMTM1LTIuNzUzIDExLjU0NiAxMS41NDYgMCAwIDAtNS4xMTUuNCAzMC43ODcgMzAuNzg3IDAgMCAwLTkuMzM0IDQuNjgxIDI3LjM3IDI3LjM3IDAgMCAwLTYuOTQyIDcuNzk1IDgxLjg3NSA4MS44NzUgMCAwIDAtNC41ODcgOS41IDI4LjY0NCAyOC42NDQgMCAwIDEtMi41MjYgNC42OCA5LjkzMSA5LjkzMSAwIDAgMS00LjAwOCAzLjUwOWMtMS42ODIuNzE3LTMuNDE0Ljk1OS01LjA1MSAxLjZhMjUuOTg3IDI1Ljk4NyAwIDAgMC00LjcxNyAyLjI2OCAxNC40MDYgMTQuNDA2IDAgMCAwLTYuNDUxIDcuOSA5LjI0MiA5LjI0MiAwIDAgMCAyLjQxIDkuNDk2IDkuMTM1IDkuMTM1IDAgMCAwIDQuNTY3IDIuMjM4IDYuMTcgNi4xNyAwIDAgMCAxLjI3OC4xNzEgNy40NDMgNy40NDMgMCAwIDAgMS4yOTIuMDQ3bDEuMy0uMDY0IDEuMjgyLS4yMjVhMjQuMzEgMjQuMzEgMCAwIDAgOS40MDktNC40MzRjMi43ODktMi4xMTQgNS40NDMtNC40OTMgOC4zNTYtNi40ODUgMi44OC0yLjA0NCA1Ljg2NC0zLjkzOCA4Ljg4OC01Ljc1MWE5MC4wMDcgOTAuMDA3IDAgMCAwIDguNzk1LTUuODIxbDEuMDIxLS44MjcuOTMzLS45MmMuMy0uMzE1LjYzNy0uNi45MTItLjkzOWwuOC0xLjAzNGExNi41NDEgMTYuNTQxIDAgMCAwIDIuNDI5LTQuNiAzMy40NzEgMzMuNDcxIDAgMCAwIDEuNDM4LTEwLjM2NXpNNTkuMzEzIDg3LjVhMy4yMTYgMy4yMTYgMCAwIDEgLjc2OC0xLjA4MmwuMTI1LS4xMTFjLjA1Ni0uMDI1LjEzLS4wMzQuMTU2LS4wODRsLjIzMy0uMjM0Yy4xNDgtLjE2My4zOTEtLjIzNC41NDQtLjM4OGwuODM3LTEuMDIzYTEuMjYyIDEuMjYyIDAgMCAxIC41MzMtLjM4OCAzLjkzMiAzLjkzMiAwIDAgMCAuNDc4LS40NTZsLjQ4LjY0Yy0uMTU2LjE0Mi0uMy4zLS40Ni40MzNzLS40LjE3Ni0uNTI2LjM1MWMtLjMwOS4yODQtLjYxMy41NzMtLjg5Mi44ODUtLjEyOC4xNjgtLjE5LjM5NC0uMzc5LjUtLjA5My4wNTYtLjIxNy4wODUtLjMwNy4xNDYtLjA2NS4wMTMtLjA2OC4wOC0uMDkuMTI5bC0uMTMzLjA5M2EuOTI4LjkyOCAwIDAgMC0uMjQ5LjJjLS4wNTcuMDg5LS4wNDQuMjMyLS4xMTcuMzA4LS4xMTcuMTc0LS4yMDguMzY1LS4zMzguNTI4eiIgZmlsbD0iI2ZmYmY0ZCIvPjxwYXRoIGQ9Ik02Ni40IDgxLjY1NWEyOS43NjggMjkuNzY4IDAgMCAxIDUuNzIzLTIuMTU1IDkuMDU1IDkuMDU1IDAgMCAwIDQuOTEyLTIuODA4IDEyLjU2NiAxMi41NjYgMCAwIDAgLjkxNi0xLjEzNSA5LjQ1NyA5LjQ1NyAwIDAgMCAuODQ2LTEuMjExIDMzLjY3IDMzLjY3IDAgMCAwIDEuMzc2LTIuNjQ5bDIuNTcyLTUuNDU5YTM1LjEyNCAzNS4xMjQgMCAwIDEgNi41Mi0xMC4yMDggMjIuMjg0IDIyLjI4NCAwIDAgMSA0Ljc4Mi0zLjc5IDM1LjMzNSAzNS4zMzUgMCAwIDEgNS40MDktMi44MTNsLjI5NC43NDRhMzIuNTE0IDMyLjUxNCAwIDAgMC01LjI3NSAyLjc0MiAyNC43MzIgMjQuNzMyIDAgMCAwLTQuNjY0IDMuNjU3IDMzLjM1OSAzMy4zNTkgMCAwIDAtNi40OSA5LjkzNGMtLjgxNSAxLjgyOC0xLjQ5IDMuNzIzLTIuNDA4IDUuNTM2YTI5LjU3NyAyOS41NzcgMCAwIDEtMS41IDIuNjY1Yy0uMy40Mi0uNTI3Ljg3Ny0uODE4IDEuM2ExMS43MTEgMTEuNzExIDAgMCAxLS45ODUgMS4yIDEwLjAyMyAxMC4wMjMgMCAwIDEtMi40MjYgMS45MyAxMC43IDEwLjcgMCAwIDEtMS4zODcuNzE1IDEzLjQ5MSAxMy40OTEgMCAwIDEtMS40NzEuNDYxIDI4Ljk0MyAyOC45NDMgMCAwIDAtNS41NzcgMi4wNjJ6IiBmaWxsPSIjZmZiZjRkIi8+PHBhdGggZD0iTTExNC44IDYyLjc5MWMuMDY5IDIxLjQ3OC0xMi4xODEgMTguODQyLTMxLjUgMzUuMTg3LTEyLjg3NiAxMC44OTMtMjIuNyA2LjQ3Ny0yNC4yNDYtLjczOGE5LjY0OCA5LjY0OCAwIDAgMS0uMi0yLjUyNCAxOS41MTMgMTkuNTEzIDAgMCAxIDguNDY0LTMuOTgzYzQuMzgyLS42IDguOTc1LS4yNTggMTMuMzc4LTEuMTQyIDguMzg3LTEuNjgyIDE5LjA4Ny0xMC4zNjUgMTcuMzE0LTE5LjkzNy0uODcxLTQuNy0yLjQxMi04LjY3NC0uNy0xMy40NTFhMjMuMDA5IDIzLjAwOSAwIDAgMSAyLjMzNS00LjhjLjQ0Ni0uMi45LS4zODYgMS4zNzQtLjU3MS4yMDYtLjA4Mi40MDgtLjE1NS42MDUtLjIyNyA5LjMzNS0zLjM3MyAxMy4xNDYgMS44MzMgMTMuMTc2IDEyLjE4NnoiIGZpbGw9IiNmZmFhMTAiIHN0cm9rZT0iI2ZmYWExMCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIuNSIvPjxwYXRoIGQ9Ik0zOC4xMTMgODQuNjU5YTE3LjI2NSAxNy4yNjUgMCAwIDEtMy4yMDcgMy42MTYgMjkuMyAyOS4zIDAgMCAxLTMuNjcyIDIuNzA4IDEyLjE3MiAxMi4xNzIgMCAwIDEtMS41MTMuODEzYy0zLjU4OSAxLjY0NS03LjczOCAxLjc4NS0xMS4wOTMgMy45OS0yLjY1MSAxLjc0NC00LjU3MyA1LjE3OC04LjE4MSA0Ljg5LTMuNTU1LS4yODQtNS4yNzYtMy40MjMtNC4yNTUtNi42NTMgMS4zOTItNC40MjUgNy40NzctMy45MTUgMTAuNjItNi41MjhhNDEuODIxIDQxLjgyMSAwIDAgMCA0LjUtNC44NzFjLjMxOC0uMzc0LjY1MS0uNzQ1Ljk4LTEuMWExMy42NzMgMTMuNjczIDAgMCAxIDQuNTI3LTMuNDggOC4wMzYgOC4wMzYgMCAwIDEgMS42OTQtLjUzYzQuMTU0LS44MTQgMTMuNTY0Ljk3NiA5LjYgNy4xNDV6IiBmaWxsPSIjYWZiYWRkIi8+PHBhdGggZD0iTTM4LjQ0OSA4NC44NzVhMjEuMjE4IDIxLjIxOCAwIDAgMS0zLjcxIDQuMDI5IDQyLjQ4OSA0Mi40ODkgMCAwIDEtNC41IDMuMTEyIDkuOTc1IDkuOTc1IDAgMCAxLTIuNTYgMS4wMDhjLS44ODguMjEtMS43MzYuNTI2LTIuNi43NzdhMjUuMzkxIDI1LjM5MSAwIDAgMC01LjA1IDEuNTg3IDkuMzE2IDkuMzE2IDAgMCAwLTIuMTI5IDEuNDc3cS0uNTMuMzg4LTEuMDU1LjgwOGMtLjM0Ny4yODMtLjU5MS42NzktLjk0OS45NjJhMTIuNTQyIDEyLjU0MiAwIDAgMS0yLjIyOCAxLjY0MiA1Ljc2OCA1Ljc2OCAwIDAgMS0yLjczLjc0MiA0LjkgNC45IDAgMCAxLTIuNzE5LS43MDkgNi41NjIgNi41NjIgMCAwIDEtMS4xLS44NzcgNC41NzkgNC41NzkgMCAwIDEtLjg5NS0xLjA5NSA0Ljk5MSA0Ljk5MSAwIDAgMS0uNDc5LTIuNzM4IDYuODYxIDYuODYxIDAgMCAxIC43MjUtMi42NUE1LjA1MyA1LjA1MyAwIDAgMSA4LjQwOCA5MWExMS43IDExLjcgMCAwIDEgMi40OS0xLjEgMjIuOTcyIDIyLjk3MiAwIDAgMCA0LjktMi4wNjcgMTAuNCAxMC40IDAgMCAwIDEuOTU4LTEuNzExYy41ODUtLjY1OSAxLjIzOS0xLjI2NSAxLjgyOC0xLjkzOSAxLjItMS4zMjEgMi4xODUtMi44NTkgMy41NDItNC4xMDdhMjUuNjQ5IDI1LjY0OSAwIDAgMSAyLjE3NC0xLjcyMiA2Ljg4IDYuODggMCAwIDEgMi41OTMtMS4wNDMgOS4yMDggOS4yMDggMCAwIDEgMi43NTEtLjMgMjIuNiAyMi42IDAgMCAxIDIuNzM4LjE5IDE2LjU1NSAxNi41NTUgMCAwIDEgMi42MjguODIxIDUuNTE4IDUuNTE4IDAgMCAxIDIuMzYyIDEuNDg5IDMuOTg2IDMuOTg2IDAgMCAxIDEuMDIxIDIuNjc3IDUuNTg3IDUuNTg3IDAgMCAxLS45NDQgMi42ODd6bS0uNjczLS40MzNhNS41ODUgNS41ODUgMCAwIDAgLjkwNS0yLjMgMi43MDkgMi43MDkgMCAwIDAtLjExLTEuMTgyIDIuNjU0IDIuNjU0IDAgMCAwLS42OS0uOTgyIDguNzY5IDguNzY5IDAgMCAwLTIuMTA4LTEuMzYzIDEwLjU0OSAxMC41NDkgMCAwIDAtMi41MzQtLjU3MyAxMi4yNTggMTIuMjU4IDAgMCAwLTUuMTY2LS4wNTEgMTUuNjEgMTUuNjEgMCAwIDAtMi4zMTkgMS4xIDguNDgzIDguNDgzIDAgMCAwLTIuMDYzIDEuNTg4IDQzLjg1NiA0My44NTYgMCAwIDAtMy42MTMgMy45MjEgMTQuOTU4IDE0Ljk1OCAwIDAgMS0xLjcyMiAyLjExMSA5LjgxMyA5LjgxMyAwIDAgMS0yLjE3MyAxLjc2MWMtMS42MzYgMS4wMDctMy41MTYgMS4wODktNS4xMzggMS44MzZDOS40MjYgOTEgNy44MTEgOTEuOCA2Ljk3IDkzLjIzOGE0LjQwOSA0LjQwOSAwIDAgMC0uNzM5IDIuMzg1IDUuMjIzIDUuMjIzIDAgMCAwIC42ODYgMi4zNDcgNC45MzYgNC45MzYgMCAwIDAgLjU4MyAxLjA3NyAyLjQxMSAyLjQxMSAwIDAgMCAxLjA0MS42NTYgOC45IDguOSAwIDAgMCAyLjM4NS40OTRjMS42NjYuMDg4IDMuMTI0LTEuMDA1IDQuNDMtMi4xNTguMzEtLjMxNS43MzMtLjUxOSAxLjA1MS0uODM4cy42MzctLjY0NS45NzEtLjk2YTEyLjI4NSAxMi4yODUgMCAwIDEgMi4zNzQtMS40MTVjMy4zMDktMS41OSA3LjAyNi0xLjg1OCAxMC4xNDUtMy41MWwxLjE2OS0uNTk1cS41NzItLjM0NSAxLjEzMS0uNzA5YTEyLjY1MiAxMi42NTIgMCAwIDAgMi4wOTEtMS42NDUgMTkgMTkgMCAwIDAgMS45MjItMS44MiAxNy42ODQgMTcuNjg0IDAgMCAwIDEuNTY2LTIuMTA1eiIgZmlsbD0iI2FmYmFkZCIvPjxnIG9wYWNpdHk9Ii40IiBmaWxsPSIjN2I4ZWQwIj48cGF0aCBkPSJNMzguMTEzIDg0LjY1OWExNy4yNjUgMTcuMjY1IDAgMCAxLTMuMjA3IDMuNjE2IDI5LjMgMjkuMyAwIDAgMS0zLjY3MiAyLjcwOCAxMi4xNzIgMTIuMTcyIDAgMCAxLTEuNTEzLjgxM2MtLjIxOS0zLjI4My4zNjMtNi4zODgtLjkxNS05Ljc2NmEyNy4wMTggMjcuMDE4IDAgMCAwLTEuOTgyLTMuOTkgOC4wMzYgOC4wMzYgMCAwIDEgMS42OTQtLjUzYzQuMTQ5LS44MSAxMy41NTkuOTggOS41OTUgNy4xNDl6Ii8+PHBhdGggZD0iTTM4LjQ0OSA4NC44NzVBOS43NTQgOS43NTQgMCAwIDEgMzcuNTc1IDg2Yy0uMzQ5LjMyNC0uNTI2LjgtLjkxNSAxLjA4OC0uNzY4LjU2OS0xLjI5MiAxLjM3Ny0yLjAwNSAyLjAwNWE1LjgyNiA1LjgyNiAwIDAgMS0xLjE1My44MjJjLS40LjI1Mi0uNy42NDQtMS4xMTEuODczLS43OTEuNS0xLjcuODQ2LTIuNTI0IDEuMzI1YS4zMjkuMzI5IDAgMCAxLS40OTItLjI0MWwtLjAwNy0uMDU3YTYuODYxIDYuODYxIDAgMCAxLS4xMTctLjkwNSA0LjkgNC45IDAgMCAwIC4wNzgtLjkwNiAzLjAxIDMuMDEgMCAwIDEtLjA0NC0uOWwuMDI3LS44OTRhMTYuODMyIDE2LjgzMiAwIDAgMC0uMDA3LTEuNzc0Yy0uMDkxLS41NzkuMTQ2LTEuMTk0LS4wNTYtMS43NjRhMTEuMTE0IDExLjExNCAwIDAgMS0uMzEyLTEuNzM2IDkuMDY3IDkuMDY3IDAgMCAwLS42NDgtMS42NDUgMjYuOTkyIDI2Ljk5MiAwIDAgMC0uNzU0LTEuNjA4IDcuNTI4IDcuNTI4IDAgMCAwLS44OTMtMS41NDMuMTg3LjE4NyAwIDAgMSAuMDM3LS4yNjJsLjAyLS4wMTMuMDQtLjAyMmE2Ljg2NyA2Ljg2NyAwIDAgMSA0LjM0LS44MDggMTYuMzQxIDE2LjM0MSAwIDAgMSAyLjIyMS4wNjVjLjcuMjY0IDEuNDc3LjIzMiAyLjE3Mi41NDdhOC41MjYgOC41MjYgMCAwIDAgMS4wMDcuNTE3Yy4xNzQuMDczLjM0NS4xNTIuNTE2LjIzNWE0LjMwOCA0LjMwOCAwIDAgMSAuNDUzLjM0OWMuMjc1LjI1Ny43LjM0OS45MzQuNjgxYTMuODE2IDMuODE2IDAgMCAxIC42MDYgMS4wMTIgNC41NTggNC41NTggMCAwIDEgLjM3NCAxLjEyNSAzLjI3NCAzLjI3NCAwIDAgMS0uMTMyIDEuMTY0IDYuNjYgNi42NiAwIDAgMS0uMjY2IDEuMTI0IDguOTkyIDguOTkyIDAgMCAxLS41MTUgMS4wMjF6bS0uNjczLS40MzNhOC4yMjMgOC4yMjMgMCAwIDAgLjUtLjkgMy4zIDMuMyAwIDAgMCAuMzkxLS45MzEgNS4wMjQgNS4wMjQgMCAwIDAtLjAzOC0uOTcxIDEuODEyIDEuODEyIDAgMCAwLS4yMTctLjkxMiAyLjcxOCAyLjcxOCAwIDAgMC0uNjUtLjdjLS4yNDctLjE4OS0uMzU5LS41ODItLjY4My0uNzIyYTIuOTU1IDIuOTU1IDAgMCAxLS44OTQtLjUgMi40MzIgMi40MzIgMCAwIDAtLjk5MS0uMzIyIDcuNDY0IDcuNDY0IDAgMCAwLTIuMDMxLS41MzEgMTMuMzUzIDEzLjM1MyAwIDAgMC0yLjEtLjMwNyA1LjUgNS41IDAgMCAwLTEuMDU1LjE0OWMtLjM0Ny4wNTktLjY5My4wNjYtMS4wMzMuMTE5YTE2LjQ3NCAxNi40NzQgMCAwIDAtMi4wMTcuNDMxbC4xNTMtLjQ3YTUuNzE3IDUuNzE3IDAgMCAwIC44NzUgMS41NzkgMTIuMjE5IDEyLjIxOSAwIDAgMSAuODcgMS42Yy4yNy41NDkuMjk0IDEuMTk0LjU0MSAxLjc1Ni4yMjQuNTY0LjY1MiAxLjEyNC40NjggMS43NzktLjEyNi42MjkuMzg2IDEuMTkyLjI5MiAxLjgxNi0uMDE3LjYxMi0uMDQ1IDEuMjE1LS4wNDIgMS44MTVsLS4wMjMuOUEyLjk1MiAyLjk1MiAwIDAgMSAzMCA5MGEzLjM0NSAzLjM0NSAwIDAgMCAuMDcuODg1YzAgLjI5NS0uMDM5LjU5LS4wNTYuODg3bC0uNDEzLS4yNDdhMTMuMjQ3IDEzLjI0NyAwIDAgMCAyLjM3OC0xLjM0OSAxMS4zNTkgMTEuMzU5IDAgMCAwIDEuMTI5LS43OTMgOS4zMjQgOS4zMjQgMCAwIDEgMS4wMzItLjkxNGMuMzY0LS4yNzYuNzI1LS41NjMgMS4wNzQtLjg1OGEzLjk4MyAzLjk4MyAwIDAgMCAuOTQ1LS45OTNjLjI0NS0uMzkxLjY2MS0uNjMyLjg4Ni0xLjAzNy4yNDYtLjM4MS41MDQtLjc1LjczMS0xLjEzOXoiLz48L2c+PHBhdGggZD0iTTE0NC4xOSAyNS42MWEuMjQ5LjI0OSAwIDAgMS0uMDcuMDQgNDAuNTIxIDQwLjUyMSAwIDAgMC01LjQ5IDMuMDdjLTMuMSAyLjMyLTMuOTggOC4wNS04LjM2IDguMzYtMy4yMS4yMi01LjcyLTIuMDYtNS4yLTUuNC41My0zLjM5IDQuMTItNC40IDYuMzItNi40NiAyLjAyLTEuOSAzLjEyLTQuNDIgNC40Ni02Ljc5YTEwNS45NDYgMTA1Ljk0NiAwIDAgMSA4LjM0IDcuMTh6IiBmaWxsPSIjYWZiYWRkIi8+PHBhdGggZD0iTTExNy44NTUgMzcuMDMzYTUwLjkzNiA1MC45MzYgMCAxIDAgNC4yNjUgNzEuOTA4IDUwLjY3MSA1MC42NzEgMCAwIDAtNC4yNjUtNzEuOTA4em05LjcgNDkuNjM4Yy0yLjE3NiA2Ljg5Mi01LjE3NSAxMy4yOTUtMTAuMDEyIDE4Ljc0Mi00LjIyNSA0Ljc1My05LjUzMyA5LjMtMTUuNzM5IDExLjExOS0zLjk3OCAxLjE3LTguMDIgMi45NjYtMTIuMTM0IDMuNjA3YTQ1LjMyOCA0NS4zMjggMCAwIDEtOC43OTMuMjEyIDQ0LjUxNiA0NC41MTYgMCAwIDEtMjYuOTY3LTExLjE2NGMtOC43LTcuNzI5LTEyLjk0My0xNy4zNzktMTQuNDQ2LTI4LjYxNmEzNy4yIDM3LjIgMCAwIDEtLjE3NS0xMC41NjRjMS4yMjUtOC40OSA1LjE0Ni0xOC4wMzYgMTAuODQ3LTI0LjQ1MyA5LjktMTEuMTUyIDI3LjgxNy0xOC43MzUgNDIuNjg2LTE0LjYzOWE3MC42NzQgNzAuNjc0IDAgMCAxIDguODQgMi41OTRjNC4zNiAxLjg2MyA4LjU3NyA1LjEzOCAxMi4xMDcgOC4yNzFhNDcuOTQzIDQ3Ljk0MyAwIDAgMSA5LjE4NyAxMC42MzYgMjguMTU1IDI4LjE1NSAwIDAgMSAyLjA2NSAzLjYwOCAzOC41IDM4LjUgMCAwIDEgMi40NTEgNy44NTNjMS40NzIgNy4wNzcgMi4yOTQgMTUuNzk5LjA4NyAyMi43OTR6IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEyMy4zIDEwOS45ODZhNTEuNTU0IDUxLjU1NCAwIDAgMS0xNi4zNjYgMTIuMzA2Yy0xLjU2Ni43LTMuMiAxLjIzMS00Ljc2OSAxLjkyMmwtNC44NjUgMS42NzhjLTEuNjU3LjQ0MS0zLjMzNy44MTQtNS4wMTMgMS4yMjhsLTUuMTI2Ljc0MWE0OS41NTMgNDkuNTUzIDAgMCAxLTIwLjQxNC0yLjg0MyA1My44IDUzLjggMCAwIDEtMTcuNjY3LTEwLjU0NmwtMy42NjMtMy42MzljLTEuMTI1LTEuMy0yLjItMi42NDktMy4yOS0zLjk3Ny0uOTk1LTEuNC0xLjktMi44NzEtMi44NDQtNC4zLS44NTUtMS40ODgtMS42LTMuMDM4LTIuNDA2LTQuNTUyLS43LTEuNTYzLTEuMy0zLjE3Ni0xLjk0Ni00Ljc1OS0uNTM2LTEuNjI1LS45NzgtMy4yODItMS40NjgtNC45Mi0uMzY4LTEuNjctLjYzNC0zLjM2Mi0uOTQ1LTUuMDM4bC0uNDQzLTUuMWMuMDI5LTEuNy4wMTMtMy40MDYgMC01LjEwNi4xNTMtMS42OTQuMjU2LTMuMzk0LjQzMy01LjA4NS4zLTEuNjc1LjU4Ni0zLjM1Ni45NjQtNS4wMTIuNDk0LTEuNjI4LjkyNC0zLjI3NyAxLjQ3NC00Ljg4NC42NTYtMS41NjkgMS4yNTktMy4xNiAxLjk3Ni00LjcuODE1LTEuNDkgMS41NTUtMy4wMiAyLjQwOS00LjQ4Mi45NTctMS40IDEuODIxLTIuODYxIDIuNzczLTQuMjYzbDMuMTQ2LTRhNTEuMzg0IDUxLjM4NCAwIDAgMSAxNi4xNzMtMTIuMTMzIDUzLjA0IDUzLjA0IDAgMCAxIDQuNjgtMS45NzcgODEuMTkgODEuMTkgMCAwIDEgNC44LTEuNjg5IDQ2LjYwOCA0Ni42MDggMCAwIDEgNC45NjEtMS4yMiA1Mi41MTIgNTIuNTEyIDAgMCAxIDUuMDgyLS42IDUyLjQ2NyA1Mi40NjcgMCAwIDEgMzcuOTg1IDEyLjc3MmwzLjYyMSAzLjY2OWMxLjExMyAxLjMwNyAyLjE2NSAyLjY2NiAzLjI0NSA0IC45OTMgMS40IDEuODg5IDIuODYyIDIuODMzIDQuMjg5Ljg2NSAxLjQ3NSAxLjY1NiAzIDIuNDg1IDQuNS43MzYgMS41NDQgMS4zNiAzLjE0MyAyLjA0MyA0LjcxNS41NzIgMS42MTMgMS4wNDUgMy4yNjMgMS41NyA0LjkuNCAxLjY2Ni43MjMgMy4zNTEgMS4wODQgNS4wMjguMjM1IDEuNy4zNjIgMy40MTMuNTA3IDUuMTE4bC0uMDYxIDUuMTM2LS41NDkgNS4xYy0uMzExIDEuNjc3LS41NzEgMy4zNjgtLjkyOSA1LjAzNS0uNDgxIDEuNjM4LS44OCAzLjMtMS4zOTMgNC45MzFhNTIuMzI2IDUyLjMyNiAwIDAgMS0xMC4wODcgMTcuNzU3em0tMi4zNTUtMi4wOTFhNDkuNTgxIDQ5LjU4MSAwIDAgMCA5LjYzNC0xNi42NTVjLjUtMS41MzEuODgxLTMuMSAxLjMzMS00LjY0NS4zMzQtMS41NzQuNTczLTMuMTcuODY5LTQuNzUxLjE1LTEuNi4xODctMy4yMTYuMjktNC44MTZsLS4xNjktNC44MWMtLjIyLTEuNTktLjQxNi0zLjE3Ni0uNTY4LTQuNzctLjMxOC0xLjU2Ny0uNTk1LTMuMTQ2LS45MzktNC43MS0uNDY4LTEuNTMxLS44OTQtMy4wNzctMS4zODctNC42LS42MDktMS40ODEtMS4xNTYtMi45OTQtMS44MTEtNC40NTlhNDguMjcyIDQ4LjI3MiAwIDAgMC0xMS40NTUtMTUuMzk0IDQzLjkyIDQzLjkyIDAgMCAwLTE2LjUwNy05LjkyMSA0OS45NTMgNDkuOTUzIDAgMCAwLTE5LjEwNi0yLjM1NSA0OS4xNyA0OS4xNyAwIDAgMC00Ljc4OS41ODZjLTEuNTkuMjQ1LTMuMTcyLjUyMy00Ljc2OC44YTMwLjkyOCAzMC45MjggMCAwIDAtOS4xMzQgMy4yMTIgNTMuNDM0IDUzLjQzNCAwIDAgMC0xNC45ODcgMTIuMDA2Yy0xLjAxOCAxLjIzNS0yLjA4MyAyLjQzNi0zLjEyMyAzLjY2NWE3NS4zMjggNzUuMzI4IDAgMCAwLTIuNzE5IDMuOTgzYy0uNzgzIDEuNC0xLjQ3OCAyLjg1Ny0yLjIwOSA0LjI4OC0uNjQyIDEuNDcyLTEuMTU1IDMtMS43NTYgNC40ODgtLjUwOCAxLjUyMi0uOSAzLjA4My0xLjM2MiA0LjYyMS0uMzUgMS41NjctLjU4NCAzLjE1OS0uOTM0IDQuNzMxLS4yMTEgMS41OTMtLjM0NyAzLjItLjUgNC44LS4wMi44IDAgMS42MTEgMCAyLjQxNmwuMDgzIDIuNDE0LjcyMiA0Ljc3Yy4zNjggMS41NjMuNjg5IDMuMTMxIDEgNC43bC42NTkgMi4zMTNjLjIxNi43NzIuMzgxIDEuNTY1LjYzOCAyLjMyNi41NzMgMS41IDEuMDkzIDMuMDMgMS43MTYgNC41Mi43MjQgMS40MzggMS4zNzIgMi45MzMgMi4yMjIgNC4zMDcuOTE4IDEuMzMyIDEuNzg1IDIuNyAyLjc0IDQgMS4wMTQgMS4yNTggMS45NjYgMi41NzQgMi45OTMgMy44MzRsMy4zNTQgMy41NTFhNDQuMDIzIDQ0LjAyMyAwIDAgMCAxNi43NDggOS44NzUgNTEuMTU4IDUxLjE1OCAwIDAgMCAxOS4yNTEgMi4zMjZsNC44NDUtLjQ0NmMxLjU5Mi0uMzEgMy4yLS41ODEgNC43ODYtLjkxOCAxLjU1MS0uNDc5IDMuMTQ0LS44NDggNC42NjktMS40MTMgMS40ODEtLjY3OSAyLjk4Ny0xLjMgNC40MjktMi4wMzlhNTAuOTI5IDUwLjkyOSAwIDAgMCAxNS4yNDItMTEuODN6bTYuODg5IDMuNzA1YzIuOSAyLjM0NyA1Ljc2NCA0Ljc0IDguNDQgNy4zNDMgMS4zNDYgMS4yOTIgMi42IDIuNjg0IDMuOTc1IDMuOTQ3IDEuMzUgMS4yODggMi43OTUgMi40NjkgNC4yNTEgMy42MzdzMi45IDIuMzQ1IDQuMjY3IDMuNjE5IDIuNyAyLjU3NyA0LjA0OSAzLjg2NGMuNjY3LjY1MyAxLjQgMS4yMzcgMi4wOTMgMS44NTVsMi4yIDEuNzM3Yy43NDIuNTY4IDEuNDE3IDEuMjEzIDIuMTIxIDEuODI0czEuNCAxLjIzNSAyLjA2NSAxLjg4N2ExLjggMS44IDAgMCAxLTIuMzQ0IDIuNzMybC0uMDQ5LS4wMzdjLS43NDgtLjU2Mi0xLjQ3LTEuMTUyLTIuMTg3LTEuNzQ5cy0xLjQ1NC0xLjE3MS0yLjE0Mi0xLjhjLS43MDYtLjYwOS0xLjM4LTEuMjU0LTIuMDYyLTEuODlzLTEuMzE2LTEuMzI2LTIuMDIzLTEuOTM0Yy0yLjgwOS0yLjQ1Mi01LjYtNC45MjEtOC4yMzYtNy41NzItMS4zMjYtMS4zMTUtMi42NTUtMi42MjYtNC4wNjEtMy44NXMtMi44NTItMi40LTQuMjY0LTMuNjIyYy0xLjQ1MS0xLjE3My0yLjctMi41NzItNC4wODUtMy44MjRhNDEuMjQyIDQxLjI0MiAwIDAgMC00LjQtMy40NyAxLjggMS44IDAgMCAxIDItM3EuMDY4LjA0Ni4xMzEuMXoiIGZpbGw9IiMwODExNDAiLz48cGF0aCBkPSJNMTcwIDE0MS44MThhNi45NDMgNi45NDMgMCAwIDEtMS42NyA0LjM4NWMtMS4xIDEuNDYtMy4yNjggNS4wODMtNS4wNiA1LjYyMi0yLjY5My44MDgtNi41LTIuNzQ2LTguMzE3LTQuMS00LjY3NS0zLjQ4NC00LjQwNi0zLjAyNC04LjY3Ni02Ljk4Mi00LjMxLTQtOC41MjktOC4wODktMTIuNzc4LTEyLjE1LTIuMy0yLjE5My05LjI1My01Ljg4My03LjMxOC0xMC4xMzQuOTc2LTIuMTEgNC44NzMtNS4xMjkgNi43LTYuNDkzIDUuODMyLTQuMzYxIDE3LjE0NSAxMC4xODMgMjAuOTg2IDEzLjU5MyA0LjU1NSA0LjA0NCA0LjUyOCAzLjY0OCA5LjA4MiA3LjY5MiAyLjgzMSAyLjUxOCA2LjkyOSA0Ljk3NSA3LjA1MSA4LjU2N3oiIGZpbGw9IiMwODExNDAiLz48cGF0aCBkPSJNMTcwLjE5NCAxNDEuODExYTYuNjM5IDYuNjM5IDAgMCAxLTEuMTc2IDMuNzM1IDIxNC4yNSAyMTQuMjUgMCAwIDEtMi4yMzcgMy4xNiAxNC4yMTIgMTQuMjEyIDAgMCAxLTIuNjMxIDIuODkgMi45MiAyLjkyIDAgMCAxLTEuOTQ4LjU2NSA1LjU3OCA1LjU3OCAwIDAgMS0xLjkzNi0uNWMtMi40MjktMS4wODItNC4yOTItMi45NDUtNi4zNjUtNC40MjVhNjQuNjM3IDY0LjYzNyAwIDAgMS02LjA3NS00Ljc4NWMtMy43NzctMy41LTcuNDQ5LTcuMS0xMS4xNjctMTAuNjY0YTU2LjUzMyA1Ni41MzMgMCAwIDAtNS43NTktNS4xMDYgMjkuMDkxIDI5LjA5MSAwIDAgMS0yLjk0Mi0yLjUxNyA3LjYyNyA3LjYyNyAwIDAgMS0yLjEwNS0zLjI1MiAzLjYgMy42IDAgMCAxIC4wMjQtMS45NjcgNS4wNTQgNS4wNTQgMCAwIDEgLjk1NC0xLjcxMyAyMS4zODQgMjEuMzg0IDAgMCAxIDIuNzI5LTIuNzUxYy45NzMtLjg0OCAxLjk5My0xLjYzNiAzLjAxMi0yLjQyM2E0LjQ0IDQuNDQgMCAwIDEgMy43MTItLjk2OCAxMC44NDEgMTAuODQxIDAgMCAxIDMuNjIxIDEuNDMzIDI2LjM0OCAyNi4zNDggMCAwIDEgMy4xNzMgMi4yMzQgNjcuNjExIDY3LjYxMSAwIDAgMSA1LjY2MiA1LjI2OWwyLjY3MyAyLjc4NmMuODg1LjkzMiAxLjc1MyAxLjg4MiAyLjcgMi43MyAxLjg5NCAxLjc0MyAzLjkxMSAzLjMyMiA1LjkxMSA0Ljk1MSAxIC44MTcgMS45NTggMS42NzYgMi45MTUgMi41MzdzMS45NjYgMS42NDUgMi45NiAyLjQ2N2ExOS4zNjQgMTkuMzY0IDAgMCAxIDIuNzkgMi43MDcgNi4xODYgNi4xODYgMCAwIDEgMS41MDUgMy42MDd6bS0uMzkzLjAxM2E1LjggNS44IDAgMCAwLTEuNDA3LTMuMzg3IDE4Ljc4MyAxOC43ODMgMCAwIDAtMi43My0yLjY1NmMtLjk4NS0uODE5LTIuMDA3LTEuNjA2LTIuOTg1LTIuNDU3bC0yLjkzLTIuNWMtMS45OC0xLjYyNS0zLjk5LTMuMjYxLTUuOS00Ljk4Ny0xLjkxOC0xLjc2LTMuNTg4LTMuNzA5LTUuMzgzLTUuNTUxYTU5LjY2OCA1OS42NjggMCAwIDAtNS42MTgtNS4yNTMgMjUuOTg1IDI1Ljk4NSAwIDAgMC0zLjEzMS0yLjIgMTAuNDg0IDEwLjQ4NCAwIDAgMC0zLjQ5NC0xLjM4MSA0LjE0IDQuMTQgMCAwIDAtMy40NzYuODMzIDQ0LjAwMiA0NC4wMDIgMCAwIDAtMi45ODYgMi40MjEgMjEuMDc1IDIxLjA3NSAwIDAgMC0yLjY1OSAyLjczMSAzLjc3OCAzLjc3OCAwIDAgMC0uOSAzLjM3OCA3LjEzMyA3LjEzMyAwIDAgMCAxLjk5MiAzLjEwOCAyOC43NzkgMjguNzc5IDAgMCAwIDIuOTIzIDIuNDY4IDI4LjQyNiAyOC40MjYgMCAwIDEgMi45OTUgMi40NjdsMi43ODUgMi42NzFjMy44IDMuNDY3IDcuNCA3LjE1NyAxMS4xODQgMTAuNjMyLjk0My44NzMgMS45IDEuNzIgMi45MjMgMi41czIuMDggMS41MTEgMy4xMTQgMi4yNzdjMi4xMDYgMS40ODEgMy45OCAzLjMxNiA2LjMxNCA0LjM0MSAxLjEyNi40ODggMi41Ljc4NyAzLjUxNC4wMTVhMTEuNzUyIDExLjc1MiAwIDAgMCAyLjU1Ni0yLjhsMi4yLTMuMTU3YTYuMjU5IDYuMjU5IDAgMCAwIDEuMDk4LTMuNTEzeiIgZmlsbD0iIzA4MTE0MCIvPjxwYXRoIGQ9Ik0xNDEuNzUyIDExNC4wNjJhMzUuNTQgMzUuNTQgMCAwIDEtMi43MjYgMy4xMjMgMjMuNzE0IDIzLjcxNCAwIDAgMC0yLjg0IDMuMDIzIDMwLjA2NiAzMC4wNjYgMCAwIDEtMi43OTIgMy4wNjUgMTUuNTY2IDE1LjU2NiAwIDAgMC0xLjMyMSAxLjYgMjEuNzM3IDIxLjczNyAwIDAgMS0xLjM4MSAxLjU0Ni45LjkgMCAwIDEtMS4zNjktMS4xN2wuMDA4LS4wMTFhMjUuNjUzIDI1LjY1MyAwIDAgMSAyLjc0MS0zLjExOWMuOTExLTEuMDQyIDEuODMxLTIuMDc2IDIuODQyLTMuMDNhMzMuNDM3IDMzLjQzNyAwIDAgMCAyLjc5Mi0zLjA3NCAyMC4yMzEgMjAuMjMxIDAgMCAwIDIuNy0zLjE1My45LjkgMCAxIDEgMS41NTkuOTEuOTEzLjkxMyAwIDAgMS0uMDYzLjA5NHptMTQuOTg3IDM1LjExNGEzOS4yMTIgMzkuMjEyIDAgMCAxIDIuMi0zLjM1OSAyNi44NTYgMjYuODU2IDAgMCAwIDIuMzctMy4zIDE5LjE0MiAxOS4xNDIgMCAwIDEgMi41MDYtMy4yMzljLjQ2Ny0uNS44NzEtMS4wNjMgMS4zLTEuNjA5YTEzLjI4IDEzLjI4IDAgMCAxIDEuNDY5LTEuNDc2LjkuOSAwIDAgMSAxLjI2MyAxLjI3OWwtLjAzNi4wNDFhOTQuODY4IDk0Ljg2OCAwIDAgMS0yLjY0MiAyLjg4NGMtLjgyNSAxLjAyMi0xLjYxMSAyLjA4Mi0yLjQ3NSAzLjFhMjUuNjQzIDI1LjY0MyAwIDAgMC0yLjI4NSAzLjMgMjEuMDczIDIxLjA3MyAwIDAgMC0yLjE5MSAzLjQwNy45LjkgMCAxIDEtMS42MTEtLjgwN3oiIGZpbGw9IiNmZmM3NTciLz48cGF0aCBkPSJNMzguODM0IDY3LjY5MWMuNDQtMi43NzkgMS4zODYtNS40MDkgMS45NDItOC4xNzNhNDMuODkgNDMuODkgMCAwIDEgMy40MjQtNy42NzIgMzMuNSAzMy41IDAgMCAxIDIuMjM2LTMuNTYzQTMwLjkgMzAuOSAwIDAgMSA0OS4wNjMgNDVjLjkzMS0xLjA0OCAxLjg0NC0yLjEgMi44NjktMy4wNTNsMy4xMjktMi43NjdhNDQuOTQ5IDQ0Ljk0OSAwIDAgMSAzLjM2Mi0yLjQ2N2MxLjE4MS0uNzI4IDIuMi0xLjcyOCAzLjQxOS0yLjRsMS44LTEuMDYzIDEuODYyLS45NjFjMS4yNjQtLjU5IDIuNS0xLjI1OSAzLjgyMi0xLjczMS42NjktLjIxIDEuMzIzLS40NjEgMi0uNjI4czEuMzQ5LS4zNzEgMi4wMTMtLjU5M2EzMS45MjQgMzEuOTI0IDAgMCAxIDQuMDg2LS45NjJjLjY5MS0uMTE4IDEuMzkzLS4xNTggMi4wODktLjIyNy42OTItLjEwNiAxLjM4NC0uMiAyLjA4Mi0uMjYyIDEuMzkyLS4xODEgMi44LS4yMjkgNC4yLS4yNzdhLjc4Ny43ODcgMCAxIDEgLjA1MyAxLjU3MmgtLjFjLTEuMzQ5LjAyLTIuNy4wMzYtNC4wMzkuMTg1YTE5LjEzNiAxOS4xMzYgMCAwIDAtMy45OC43MDVjLS42NTEuMTc3LTEuMzI2LjIzMi0xLjk4MS4zOTNsLTEuOTc4LjQzM2E0MC4wMzMgNDAuMDMzIDAgMCAwLTMuODc1IDEuMiAyOC43NzkgMjguNzc5IDAgMCAwLTcuMzI3IDMuNSAxMC42IDEwLjYgMCAwIDEtMS43NyAxIDUgNSAwIDAgMC0uOTIxLjQ1MWMtLjI3OC4yLS41NDQuNDA5LS44MTYuNjEyLTEuMDgzLjgyNi0yLjAyNCAxLjgyMi0zLjA4NyAyLjY0OC0uNTMxLjQxNS0xLjEwOS43OC0xLjYxOCAxLjIyNWwtMS40MjQgMS40MjdjLS41LjQ1NC0uOTI2Ljk3OS0xLjQyIDEuNDQxYTEwLjI1OCAxMC4yNTggMCAwIDAtMS4zNDcgMS41IDI1LjEyMyAyNS4xMjMgMCAwIDEtMi40MzUgMy4yMjggMTEuMjQzIDExLjI0MyAwIDAgMC0xLjEyMiAxLjY5M2MtLjQuNTUyLS43NjUgMS4xMjYtMS4xNTMgMS42OWEzMi43MzYgMzIuNzM2IDAgMCAwLTMuMTEyIDcuNTQ0IDE5LjI4MyAxOS4yODMgMCAwIDAtMS4yMSAzLjkgNzEuMzMzIDcxLjMzMyAwIDAgMC0uNzQ5IDQgLjc4Ny43ODcgMCAwIDEtMS41NTYtLjIzOXptODIuOTA1IDM0LjI2bC0xLjg1NCAyLjMwOWEyMS4wOTEgMjEuMDkxIDAgMCAxLTEuOTQ2IDIuMjE1bC0xLjA1MiAxLjAzYy0uMzQ3LjM0Ny0uNjYxLjcyNy0xIDEuMDgzcS0xIDEuMDg0LTIuMDc3IDIuMTE2YTI5LjA4NSAyOS4wODUgMCAwIDEtMTAuMzI0IDUuOTA3bC01LjU0MSAxLjcxNGE0Ni41IDQ2LjUgMCAwIDEtNS42NzggMS41MTZjLS45NzEuMTctMS45NDIuMzc3LTIuOTI4LjQ4N2EyOC41MzEgMjguNTMxIDAgMCAxLTIuOTQ3LjE0OWMtLjk4IDAtMS45NTYtLjAzMi0yLjkzLS4wODNzLTEuOTQyLS4wNDUtMi45MjMtLjExOWEzOC44NjIgMzguODYyIDAgMCAxLTUuOC0uODY3IDUxLjU0NyA1MS41NDcgMCAwIDEtNS43MDktMS40IDQ3IDQ3IDAgMCAxLTEwLjYtNS4xMThjLTEuNjEzLTEuMTQtMy4xLTIuNDM2LTQuNi0zLjdhMzYuMjUgMzYuMjUgMCAwIDEtNC4xNzQtNC4xNzEgNTEuMjA1IDUxLjIwNSAwIDAgMS0xLjc3Ny0yLjM1OWMtLjYtLjc4LTEuMTYxLTEuNTg2LTEuNzE5LTIuNGE0My4zMTggNDMuMzE4IDAgMCAxLTIuOTktNS4xLjc4Ny43ODcgMCAxIDEgMS40MDctLjcwNnYuMDA2bC4wMTYuMDMyYTQxLjU0NiA0MS41NDYgMCAwIDAgMi44MTEgNC45NTMgMzguOSAzOC45IDAgMCAwIDEuNjUzIDIuMzE2Yy42LjczOCAxLjI1MiAxLjQyNyAxLjg4OSAyLjEyNiAxLjI4NyAxLjM4NSAyLjU2MSAyLjc4NyAzLjk1NyA0LjA3OGE0MC40MjcgNDAuNDI3IDAgMCAwIDQuNDU0IDMuNTQ3IDMzLjggMzMuOCAwIDAgMCAxMC4xNjIgNS4wODhjMS44NDEuNDUxIDMuNTM3IDEuNDY3IDUuNDU0IDEuNjcgMS44ODIuMzE5IDMuNzg4LjM5MSA1LjY2OS41MzUuOTMzLjExIDEuOS4yNDEgMi44NTYuMjY0czEuOTExLjAxIDIuODYtLjAyMWMuOTQ5LS4wMTEgMS44OS0uMDgyIDIuODIzLS4xNDdhMTIuMzI3IDEyLjMyNyAwIDAgMCAyLjc2MS0uNDY3Yy45MDYtLjI1OSAxLjc4OS0uNiAyLjcxMi0uODM2LjkxNS0uMjYzIDEuODU2LS40NzMgMi43ODctLjczOC45NDQtLjIyNiAxLjg0Ni0uNTg2IDIuNzc1LS44ODcuOTI1LS4yNzMgMS45MzEtLjQ3NCAyLjgyNi0uNzIyIDMuNzA2LS45NDkgNi44MzMtMy4zNTcgOS43LTUuODE3Ljc0MS0uNiAxLjQ3My0xLjIxMyAyLjE4LTEuODU4YTE1Ljk3NiAxNS45NzYgMCAwIDAgMS45NzgtMi4wNzZjMS4yOTItMS40MjUgMi4zNzYtMi45ODUgMy41NTktNC40NzJsLjA1LS4wNjNhLjc4Ni43ODYgMCAwIDEgMS4yMzEuOTc5ek00MC4yMTggODcuNDE0YTQuNzEgNC43MSAwIDAgMS0uNDU0LTEuNTU0IDMuNTczIDMuNTczIDAgMCAwLS4yNTEtMS42IDMuOTI4IDMuOTI4IDAgMCAxLS4yNzEtMS41OSAyLjQ4NiAyLjQ4NiAwIDAgMC0uMjE5LS43OCAzLjE4MiAzLjE4MiAwIDAgMS0uMTMtLjguOS45IDAgMCAxIDEuNzM0LS4zODRsLjA0Ny4xMWEzLjc3OSAzLjc3OSAwIDAgMSAuMjk1IDEuNTM5IDYuOTM3IDYuOTM3IDAgMCAxIC4yIDEuNTU2IDQuMDI1IDQuMDI1IDAgMCAwIC4zMTIgMS41MzYgNC4yNTEgNC4yNTEgMCAwIDEgLjExNi43NzggMS42ODUgMS42ODUgMCAwIDAgLjM1Ni43MTYuOTEuOTEgMCAxIDEtMS41MS45ODF6IiBmaWxsPSIjMDgxMTQwIi8+PHBhdGggZD0iTTI1LjMgMTIzLjYyN2MtMS43MjMgMy41NTMtNS4xMTQgNC4yMzMtOC41OTIgNC42MTZhNzEuNjM3IDcxLjYzNyAwIDAgMC03LjUyMSAxLjYgMzkuOTMxIDM5LjkzMSAwIDAgMS00Ljg5My03LjE0M2MxLjg1NS0uNSAzLjgyOS0xLjA4MiA0LjM2Ni0xLjMwNyA0Ljk1My0yLjEgNy43MzYtNi44MzcgMTIuNDkyLTkuMTE4IDEuMzc1LS42NjMgNC40MzctMS4xNSA1Ljc1NS0uMDc1IDIuMDgxIDEuNy0xLjMgMTAuNzgzLTEuNjA3IDExLjQyN3oiIGZpbGw9IiNhZmJhZGQiLz48cGF0aCBkPSJNODAuNDc1IDU4Ljk5NWMtLjQtLjgzOC0uODM4LTEuNjYtMS4yNTgtMi41YTE0LjYzMSAxNC42MzEgMCAwIDAtMS40MDctMi40MzZjLS41NTQtLjc2LTEuMDY3LTEuNTQ1LTEuNTktMi4zMjdhMTEuMDc5IDExLjA3OSAwIDAgMC0uODg3LTEuMDk1Yy0uMzA3LS4zNTUtLjU4OC0uNzMtLjg5MS0xLjA4N2EuNDUuNDUgMCAwIDEgLjY2Ny0uNmwuMDE4LjAxOWExNS44NjIgMTUuODYyIDAgMCAxIDEuOCAyLjI0NSAyMi4wMjMgMjIuMDIzIDAgMCAxIDEuNiAyLjM4OGMuNDcxLjgzNC45NzkgMS42NDQgMS40NjggMi40Ny4yNDQuNDE0LjQyOS44NTkuNjM5IDEuMjkxcy40My44Ni42NzYgMS4yODJhLjQ1MS40NTEgMCAwIDEtLjc3OS40NTVsLS4wMTctLjAzMnptLTMuMDA3IDQuMDZhMTkuNTQ3IDE5LjU0NyAwIDAgMS03LjcyNS01LjU2NiAxMC4xMzMgMTAuMTMzIDAgMCAxLTEuMzA3LTIuMDc4IDMuNTUgMy41NSAwIDAgMS0uMjktMi41OTQgMi42NjUgMi42NjUgMCAwIDEgLjgxMS0xLjExNyAzLjQxNiAzLjQxNiAwIDAgMSAxLjItLjU3NyAzLjYzOSAzLjYzOSAwIDAgMSAyLjU4MS4yNDEgMS45IDEuOSAwIDAgMSAuNTc4LjQ1NSAyLjU2NiAyLjU2NiAwIDAgMSAuMzc3LjU4IDIgMiAwIDAgMSAuMTUzIDEuNDQ1IDMuMDQ5IDMuMDQ5IDAgMCAxLTEuOTU1IDEuOCA4LjMxNyA4LjMxNyAwIDAgMS00Ljg4NS4wOTUgOS42OTMgOS42OTMgMCAwIDEtNC4yMzItMi4zODggOS45MjIgOS45MjIgMCAwIDEtMi40Ni00LjE4NS40NTEuNDUxIDAgMSAxIC44Ni0uMjcgOC44MzUgOC44MzUgMCAwIDAgNi4wNTIgNS45ODkgNy40NDMgNy40NDMgMCAwIDAgNC4zMzMtLjExQTIuMjQ1IDIuMjQ1IDAgMCAwIDczIDUzLjU5NWExLjEyOSAxLjEyOSAwIDAgMC0uMDc4LS44MzMgMS43NCAxLjc0IDAgMCAwLS4yNS0uNDA2IDEuMDggMS4wOCAwIDAgMC0uMzM1LS4yN2MtMS4xMjEtLjYxOC0zLjA0Mi0uMjctMy40NDEgMWEyLjc1OCAyLjc1OCAwIDAgMCAuMyAxLjk2OSA5LjI3NiA5LjI3NiAwIDAgMCAxLjIzNCAxLjg2NyAxOC4zMSAxOC4zMSAwIDAgMCAzLjMzNyAzLjEzMSAxOC41MDkgMTguNTA5IDAgMCAwIDQuMDMzIDIuMTY2LjQ1MS40NTEgMCAwIDEtLjMyNC44NDF6bS0uODY4IDMuNTI2Yy0xLjIxMi0uMzQ1LTIuNDY4LS41OTUtMy43MjItLjk1NGE0Ny43NCA0Ny43NCAwIDAgMS0xLjg2My0uNjEzIDE4LjUxNiAxOC41MTYgMCAwIDAtMS44NDYtLjUgMzEuNTUxIDMxLjU1MSAwIDAgMS0zLjc0Ni0xLjA0NmMtLjYxOC0uMjE1LTEuMjQ4LS40LTEuODctLjYzOGE5Ljg0NyA5Ljg0NyAwIDAgMS0xLjc4NS0uOTM0LjQ1LjQ1IDAgMCAxIC40NzEtLjc2N2wuMDI3LjAxNmEyMC44NjYgMjAuODY2IDAgMCAwIDMuNDIxIDEuNDg2YzEuMjEuMzgyIDIuNDYuNjc0IDMuNyAxLjA2MyAxLjI1NC4zNiAyLjQ4Mi44MDYgMy43MTMgMS4wOC42MjMuMTQ2IDEuMjM5LjMzNiAxLjg2Ny41czEuMjYzLjMwOSAxLjkxLjQ1M2EuNDUxLjQ1MSAwIDAgMS0uMi44OGwtLjAyNS0uMDA2eiIgZmlsbD0iIzIyMjY2ZCIvPjxwYXRoIGQ9Ik04MC41MjcgNTguOTczYy0uMjE0LS40MTItLjI3Mi0uOS0uNjU4LTEuMjM0LS4yNTItLjM5NC0uMzg4LS44NDktLjYwOC0xLjI2NHMtLjQtLjg1MS0uNTc4LTEuMjkzYy0uMS0uMjE1LS4yNS0uNC0uMzQ5LS42MTVhMi42OTQgMi42OTQgMCAwIDAtLjM2NC0uNjA3Yy0uMTM2LS4xOTMtLjIzOC0uNDA4LS4zNy0uNi0uMDk0LS4yMjItLjM2Ny0uMzIxLS40ODEtLjUyOC0uMy0uMzY2LS41OTEtLjczNS0uOS0xLjA5MmE2Ljg5MyA2Ljg5MyAwIDAgMC0uODE5LTEuMTUgMy44OTIgMy44OTIgMCAwIDAtLjkxMy0xLjA3Mi4zOTIuMzkyIDAgMCAxIC41NjMtLjU0NmwuMDM2LjAzNmE4LjcyOCA4LjcyOCAwIDAgMCAxIDEuMDQ0Yy4zLjM3Mi41Mi44MS44MDUgMS4xOTRhMy45ODggMy45ODggMCAwIDAgLjg1MyAxLjE1NGMuMjA4LjE0OC4xMjYuNDkzLjM0Mi42MzVhMy41MDggMy41MDggMCAwIDEgLjUwNS41MjcgMTQuODIyIDE0LjgyMiAwIDAgMSAxLjMgMi41NzEgNS45MjkgNS45MjkgMCAwIDAgLjczIDEuMjQgNy45OCA3Ljk4IDAgMCAwIC42NCAxLjMuMzkzLjM5MyAwIDAgMS0uNzEzLjMyOXoiIGZpbGw9IiNmZmM2NTciLz48cGF0aCBkPSJNODAuMTIgNTkuMTY0YTIzLjM4MSAyMy4zODEgMCAwIDAtMS41MDktMi44MzNBMjUuOTE4IDI1LjkxOCAwIDAgMCA3NyA1My42MzhjLS4zLS40NDYtLjU4Ny0uOS0uODY3LTEuMzY0LS4yNzQtLjQ3Ni0uNi0uODUtLjg5Mi0xLjMtLjMxMS0uNDI3LS42ODMtLjgyNC0xLTEuMjU4YS42OTEuNjkxIDAgMCAxIC4yMjMtMS4wNDguNzIuNzIgMCAwIDEgLjU4LS4wMjcuNy43IDAgMCAxIC4yNC4xNjRsLjE0NC4xNDNhMTUuMTggMTUuMTggMCAwIDEgMS4wMzYgMS4yNTZjLjMuNDYxLjcyNi44MDkgMS4wMDYgMS4yNzQuNjA1Ljg5IDEuMyAxLjc1NiAxLjg0NCAyLjY2Ny40NjQuOTY1IDEuMDg2IDEuODM0IDEuNTI4IDIuODQ0YTkuMjU0IDkuMjU0IDAgMCAwIC43MDkgMS40MjIuODYxLjg2MSAwIDAgMSAuMTM1LjYxNS44LjggMCAwIDEtLjQuNTYxLjgyNC44MjQgMCAwIDEtMS4wMDYtLjE3IDEuMTY3IDEuMTY3IDAgMCAxLS4xNi0uMjUzem0uNzExLS4zMzljLjAzOS4wODEuMDQ1LjA4Mi4wNDUuMDgyYS4wNDMuMDQzIDAgMCAwIC4wMi4wMS4wNDMuMDQzIDAgMCAwIC4wNC0uMDA3LjAzNy4wMzcgMCAwIDAgLjAxNy0uMDMyLjA1NS4wNTUgMCAwIDAgMC0uMDE2bC0uMDQxLS4wNzQtLjM5My0uNzE4Yy0uMTQtLjIzMS0uMzA3LS40NjUtLjQzLS42ODktLjI3Mi0uNDUyLS40MTktLjk0OC0uNy0xLjQxOC0uMjQ2LS40NzktLjUyNi0uOTM3LS43ODctMS40MDZBMTQuODI5IDE0LjgyOSAwIDAgMCA3Ni44NiA1MS45Yy0uMzc1LS4zODEtLjQ1My0uOTkxLS44NS0xLjMzOC0uMzU0LS4zODgtLjc1Mi0uNzMyLTEuMTEzLTEuMTA2LS4wNDYtLjA0Ny0uMDgxLS4xLS4xMjItLjE1NC0uMDIyLS4wMzEuMDA4LS4wMTMuMDA1LS4wMjRzMC0uMDMxIDAtLjAyMi4wMS4wMTUuMDExIDBjLjM1NC40LjYyNi44NTYgMSAxLjI1NWE0LjI1MSA0LjI1MSAwIDAgMSAuOTggMS4zMjYgNS4wODMgNS4wODMgMCAwIDAgLjQyNy42NzdsLjM4My43MDlhMTAuNjg0IDEwLjY4NCAwIDAgMCAuOSAxLjM1MSAxMiAxMiAwIDAgMSAuODcyIDEuMzkgMjcuNzU4IDI3Ljc1OCAwIDAgMCAxLjQ3NyAyLjg2MXpNNzcuNDg5IDYzYTM0LjQ2NiAzNC40NjYgMCAwIDEtNC4yMDgtMi4yNyAxNy4yNiAxNy4yNiAwIDAgMS0zLjQ5LTMuMjgxIDkuMzczIDkuMzczIDAgMCAxLTEuMjg0LTIuMDcyIDMuMzkgMy4zOSAwIDAgMS0uMjI2LTIuNTE2IDIuNjg4IDIuNjg4IDAgMCAxIC43NTgtMS4wNjEgMi45NTggMi45NTggMCAwIDEgMS4xNTQtLjU0MSAzLjgyNyAzLjgyNyAwIDAgMSAyLjQ1OC4yNiAxLjkxMSAxLjkxMSAwIDAgMSAuODU4Ljk2NCAxLjc3NCAxLjc3NCAwIDAgMSAuMTE1IDEuMjkzIDIuOTY5IDIuOTY5IDAgMCAxLTEuNzg4IDEuNzI4IDguMzI5IDguMzI5IDAgMCAxLTQuODI4LjIyNyA5Ljc4NSA5Ljc4NSAwIDAgMS00LjE3Mi0yLjQ0IDEwLjIxNiAxMC4yMTYgMCAwIDEtLjc1OC0uOTUxIDkuNDk1IDkuNDk1IDAgMCAxLS42ODItMSAxMi4yNjUgMTIuMjY1IDAgMCAxLTEuMDI3LTIuMTkuMzkzLjM5MyAwIDAgMSAuNzM2LS4yNzh2LjAwNmwuMDEzLjAzNmE4LjU0MyA4LjU0MyAwIDAgMCAyLjMyNSAzLjc3NCAxMS4zNTQgMTEuMzU0IDAgMCAwIDEuNzI1IDEuMzc1IDcuNzI5IDcuNzI5IDAgMCAwIDIuMDQ0Ljg2NyA2LjM5NCA2LjM5NCAwIDAgMCA0LjM1Ni0uMTIyYy4zMzEtLjEzOS42MTgtLjMyNS45MjYtLjQ3MWExLjA0MSAxLjA0MSAwIDAgMCAuNTYxLS43MjkgMS40NjMgMS40NjMgMCAwIDAtLjc1OS0xLjQ1MyAyLjM5MSAyLjM5MSAwIDAgMC0xLjkyOS0uMjA3IDEuODMgMS44MyAwIDAgMC0xLjQxMSAxLjE1NSA0LjAyOSA0LjAyOSAwIDAgMCAuMjQ4IDEuOTQ3IDQuMzIzIDQuMzIzIDAgMCAwIC41My45NzljLjE3My4zMzQuNC42NDUuNjA1Ljk2NmExMy43MTEgMTMuNzExIDAgMCAwIDMuNDI1IDMuMDYxIDE0Ljc5MyAxNC43OTMgMCAwIDAgNC4wMTYgMi4yMTIuMzk0LjM5NCAwIDAgMS0uMjk0LjczeiIgZmlsbD0iI2ZmYzY1NyIvPjxwYXRoIGQ9Ik03Ny4zMjEgNjMuNDIxYTIxLjk4NyAyMS45ODcgMCAwIDEtOC4wMjEtNS43MzMgMTAuMTM1IDEwLjEzNSAwIDAgMS0xLjM0Mi0yLjE3MiAzLjk0NCAzLjk0NCAwIDAgMS0uMy0yLjY4NCAzLjEgMy4xIDAgMCAxIDEuOTE1LTEuOTc3IDQuMjYzIDQuMjYzIDAgMCAxIDIuNjY2LS4xNDEgMi45NjggMi45NjggMCAwIDEgMS4yNDIuNjY0IDIuODYgMi44NiAwIDAgMSAuNDIxLjU2OSAyLjE1NSAyLjE1NSAwIDAgMSAuMzE3LjYzNiAyLjMxNiAyLjMxNiAwIDAgMS0uMDE3IDEuNDQ3IDIuODE3IDIuODE3IDAgMCAxLS43ODkgMS4xNDkgNC45ODIgNC45ODIgMCAwIDEtMi4zNyAxLjA1NCA4LjE4MyA4LjE4MyAwIDAgMS0yLjUxNy4wNjcgMTAuMDEgMTAuMDEgMCAwIDEtNC42NDMtMS43MTggMTAuMTM0IDEwLjEzNCAwIDAgMS0zLjY0Ny00LjkyOCAyIDIgMCAwIDEtLjE2NS0uNjg1LjY4LjY4IDAgMCAxIDEuMzE4LS4xNjNsLjIuNTdhMTAuMTYyIDEwLjE2MiAwIDAgMCAuNDkzIDEuMDgyIDguNTIgOC41MiAwIDAgMCAzLjI3NiAzLjMyNCA3Ljg1OSA3Ljg1OSAwIDAgMCA0LjQ4OCAxIDUuMTc4IDUuMTc4IDAgMCAwIDIuMTU4LS42MjMgMS4zODUgMS4zODUgMCAwIDAgLjYzLS42Ny44NjUuODY1IDAgMCAwLS4yMDgtLjc3OGMtLjY2Ny0uOTE5LTMuMTE1LS42NjUtMy4yMzMuN2EzLjU0IDMuNTQgMCAwIDAgLjY1NCAyLjA1MSAxNS4zNTQgMTUuMzU0IDAgMCAwIDEuNDMzIDEuODczIDE0LjY3NiAxNC42NzYgMCAwIDAgMy42MiAzLjA3MSAxNy4wMTkgMTcuMDE5IDAgMCAwIDIuMTIgMS4xbC41NTEuMjI4LjI3OC4xMDdhLjk1Mi45NTIgMCAwIDEgLjQuMjQ3LjgzNC44MzQgMCAwIDEgLjA2OCAxLjAzNi44NDQuODQ0IDAgMCAxLS45OTYuMjk3em0uMjkzLS43MzFhLjA1NC4wNTQgMCAwIDAgLjA2NC0uMDg0Yy4wNi4wMTQtLjIyLS4wODctLjQtLjE2MWwtLjU3My0uMjQzYTE4Ljk2NSAxOC45NjUgMCAwIDEtMi4yLTEuMTU4IDE2LjU2OCAxNi41NjggMCAwIDEtMi4wMjUtMS40NTMgMTguMTY0IDE4LjE2NCAwIDAgMS0xLjg0Ny0xLjY3OEExMC43ODYgMTAuNzg2IDAgMCAxIDY5LjEgNTUuOWE0LjI2NyA0LjI2NyAwIDAgMS0uNzItMi42MDcgMi4xMTYgMi4xMTYgMCAwIDEgLjc2MS0xLjMwOSAyLjg4NiAyLjg4NiAwIDAgMSAxLjMtLjU3MiAzLjM0NyAzLjM0NyAwIDAgMSAxLjM4My4wMzEgMi43NDEgMi43NDEgMCAwIDEgLjY2OC4yNDYgMS4zNSAxLjM1IDAgMCAxIC41ODkuNTMyIDEuNjUgMS42NSAwIDAgMSAuMjgxIDEuNTA5IDIuMTMzIDIuMTMzIDAgMCAxLS45OTQgMS4wNjQgNi41OTIgNi41OTIgMCAwIDEtMi40ODMuNyA4LjU0NyA4LjU0NyAwIDAgMS00LjkxOS0xLjA3NiA5LjYwNSA5LjYwNSAwIDAgMS0zLjQyMS0zLjY4NCAxMC43NjcgMTAuNzY3IDAgMCAxLS41NTUtMS4xMzRsLS4yMjItLjU3NmMtLjAwOC0uMDA5LS4wMjctLjAwNy0uMDIzIDAtLjEtLjMxMy4zMzcuODQyLjYxNSAxLjQ2MWE4LjUzMSA4LjUzMSAwIDAgMCAxLjE5MSAxLjk3NyA4LjcgOC43IDAgMCAwIDEuNzI3IDEuNTI2IDkuMSA5LjEgMCAwIDAgNC4zMTEgMS41ODkgOS4zIDkuMyAwIDAgMCAyLjI4MS0uMTUgNC4zNzQgNC4zNzQgMCAwIDAgMi4wMTYtLjgyNCAxLjgxNyAxLjgxNyAwIDAgMCAuNTg5LS44MjQgMS41NDcgMS41NDcgMCAwIDAtLjAwNy0uOTYzIDEuNiAxLjYgMCAwIDAtLjIyLS40NjMgMi4yNDEgMi4yNDEgMCAwIDAtLjI4OS0uNDM4IDIuMTcyIDIuMTcyIDAgMCAwLS45MTktLjUyYy0xLjM5Mi0uNDYyLTMuMzA1LjE3MS0zLjY3OCAxLjYzM2EzLjMxIDMuMzEgMCAwIDAgLjMyOCAyLjE3MSA5LjM4IDkuMzggMCAwIDAgMS4yNiAxLjk3MyAxNy45MjMgMTcuOTIzIDAgMCAwIDcuNjY0IDUuNTE4em0tLjk5NyAzLjgzN2E2LjEyMyA2LjEyMyAwIDAgMC0xLjg1OC0uNDM1Yy0uNjMzLS4xMDctMS4yMzktLjM0OC0xLjg2OC0uNTE0YTEyLjQwOSAxMi40MDkgMCAwIDEtMS44MzctLjY4NWMtLjI5NC0uMTI0LS42MTItLjE3OS0uOTEtLjNhNC43MTYgNC43MTYgMCAwIDAtLjkyNS0uMjY5Yy0uMzEzLS4wNzUtLjYxNy0uMTg2LS45My0uMjY1LS4zLS4xMjgtLjY1Ni0uMDQyLS45NjItLjE1Mi0uNjMxLS4xNDUtMS4yNy0uMjc1LTEuOS0uNDQ1LS41OTMtLjI4OS0xLjIzNS0uNDM3LTEuODM2LS43MTgtLjU1Ni0uMzcyLTEuMi0uNTQ4LTEuNzg4LS45YS4zOTMuMzkzIDAgMCAxIC4zOTUtLjY3OWwuMDQxLjAyM2E2LjE3NCA2LjE3NCAwIDAgMCAxLjY4OC43NjdjLjU3OS4yMjYgMS4xNDEuNTMgMS43NDkuNzE4YTYuNDc1IDYuNDc1IDAgMCAwIDEuODQ1LjUxNWMuMzM1LS4wMTQuNTc5LjMyNi45MTYuMzA5YTYuMDkyIDYuMDkyIDAgMCAxIC45NzEuMTE1IDMuNSAzLjUgMCAwIDAgLjkzMS4yOTNjLjMyLjA3My42MTMuMjMxLjkzNi4zYTEuODExIDEuODExIDAgMCAxIC45LjMxMyAxLjcgMS43IDAgMCAwIC40NTIuMTU3bC40NDEuMjA3YTkuMTkgOS4xOSAwIDAgMCAxLjg5My40IDE4LjI1OCAxOC4yNTggMCAwIDAgMS45LjQ5LjM5My4zOTMgMCAwIDEtLjIyMS43NTV6IiBmaWxsPSIjZmZjNjU3Ii8+PHBhdGggZD0iTTc2LjQ5MiA2Ni45NmMtMS4zNzUtLjMzOS0yLjcwOS0uNzc1LTQuMTI2LTEtMS40LS40NC0yLjY0Ny0uODcyLTQuMDI4LTEuMmEyNy44MTQgMjcuODE0IDAgMCAxLTQuMDQ2LTEuMzgzYy0uMzI4LS4xNDMtLjY2NS0uMjI3LTEuMDA1LS4zNjJhNy42ODQgNy42ODQgMCAwIDEtLjk3Mi0uNDlsLS40NTgtLjI4OS0uMjI3LS4xNTVhLjY3Ni42NzYgMCAwIDEtLjI0LS4zMS43LjcgMCAwIDEgLjE0OC0uNzMxLjY4My42ODMgMCAwIDEgLjczOS0uMTU0IDE2LjQ5IDE2LjQ5IDAgMCAwIDEuODkzLjk0MiAxNS45NzYgMTUuOTc2IDAgMCAwIDIuMDA3LjYyMmw0LjA4OCAxLjA4MmMuNjczLjIyNCAxLjMyMi41IDIgLjY2OHMxLjM2LjMgMi4wMzguNTIyYy4zMzguMS42NzQuMjI5IDEuMDE0LjMxNWwxLjAzLjIyMi41MTUuMTExYS45NS45NSAwIDAgMSAuMzcyLjEzNy44MTIuODEyIDAgMCAxIC4xMTggMS4yNS44NjIuODYyIDAgMCAxLS44Ni4yMDN6bS4yMTYtLjc1N2MuMTQyLjA0My4xMTEtLjAzMS4xMTEtLjA1NWEuMDUuMDUgMCAwIDAtLjAxOC0uMDE4LjYuNiAwIDAgMC0uMS0uMDI0bC0uNTE5LS4xMTdjLS42ODktLjE2OS0xLjM5MS0uMy0yLjA3Ny0uNDM1LTEuMzQ1LS4zMy0yLjc2Ny0uNzk0LTQuMDgtMS4yMzNhMzQuNjM2IDM0LjYzNiAwIDAgMC00LjA4LTEuMTY3Yy0uNzI1LS4xLTEuMjg5LS42MjYtMS45OS0uNzkxLS4zMzgtLjEyLS42ODYtLjIyNS0xLjAyMi0uMzY1bC0uNTA2LS4yMTQtLjI1MS0uMTE3LS4xMi0uMDY4Yy0uMDQ4LS4wMjktLjA3OS0uMDQ2LS4wNTktLjAzNi4wNjItLjAxLjAwNi0uMDY5LjAxLS4wNDFoLjAwNWwuMjEuMTI5LjQ0NC4yNDdhOC4yIDguMiAwIDAgMCAxLjg3OS44IDkuODQyIDkuODQyIDAgMCAxIDEuOTcyLjcgNi43MDggNi43MDggMCAwIDAgMSAuMzE5bC45OTUuMzRjMS4zNDEuNDI1IDIuOC42NzMgNC4xMDYgMS4xYTM5LjE2NCAzOS4xNjQgMCAwIDAgNC4wOSAxLjA0M3oiIGZpbGw9IiNmZmM2NTciLz48cGF0aCBkPSJNNjguMSA0NC45MDZjLjAzNi0uMjkzLS4yMzMtLjU3Ni0uNDUxLS40NzNhLjUxNS41MTUgMCAwIDAtLjA5LjcyN2MuMTgyLjE5MS41LjAzOS41NDEtLjI1NCIgZmlsbD0iI2ZmYzc1NyIvPjxwYXRoIGQ9Ik02Ny43MDcgNDQuODU3Yy0uMDM4LS4wMzItLjE1OS4wMjMtLjAyMi0uMDE1YS4zMS4zMSAwIDAgMCAuMDUtLjAxNGMuMDIxLS4wMjcuMDMtLjA3Ni4wNDUtLjA2OC4wMjctLjAxMy4wMzgtLjAzMi4wMzUtLjAzOHMtLjE0NC0uMDA4LS4xNTQuMDY1YzAgLjE1NC4yLjIxOS4xMi4wODItLjA1LS4wNzctLjA3Ny4wMTgtLjAyOS4wMzkuMDEtLjAwNyAwLS4wNDEtLjA0NS0uMDUxYS42NTYuNjU2IDAgMSAxIC44MDktLjYyNWwtLjAxNS43MjRhLjc3Mi43NzIgMCAwIDEtLjIyOS41NTFjLS4xNjYuMTYxLS40MjkuMTIxLS42NTYuMTEzYS43LjcgMCAwIDEtLjUtLjQxNSAxLjA4NSAxLjA4NSAwIDAgMS0uMDgyLS41YzAtLjE1NS0uMDU0LS4zOTIuMTcyLS41NDdhLjc2Ni43NjYgMCAwIDEgLjQtLjA5MWMuMDY5LjAyNS4xMjQtLjAyMy4xOS0uMDMxYS40NS40NSAwIDAgMSAuMTU5LjA3OCAyLjQxMiAyLjQxMiAwIDAgMSAuMTkzLjJjLjA2My4wNDMuMTkxLjA1Mi4yMjMuMTM3YS43LjcgMCAwIDEgLjEzMy41MDYuMjk0LjI5NCAwIDAgMS0uNDc3LjE3em00LjEgMS4zNDNjLjA2Ny0uNTUzLS41MDctMS4xLS45NjItLjkyMWEuOS45IDAgMCAwLS4xNjcgMS4zNzIuNjg3LjY4NyAwIDAgMCAxLjEyOS0uNDUxIiBmaWxsPSIjZmZjNzU3Ii8+PHBhdGggZD0iTTcxLjQxIDQ2LjE1NGMtLjAyMi0uMTg4LS4yNDItLjMyNC0uMzI1LS40NTVsLS4wMzgtLjAzNWMtLjAwOC0uMDI5LS4wMjctLjA3OC0uMDQxLS4wNjJhLjE3Mi4xNzIgMCAwIDAtLjA5My4wMjVjLS4wNTUuMDQyLS4yNDEuMTI0LS4yNjMuMjktLjAxMi4zMy4yNDUuNTg5LjQuNTIzLjA3Mi0uMDUuMTUzLjAwNS4yNzMtLjAyMmEuMjMyLjIzMiAwIDAgMCAuMDg2LS4yNjMuNDE2LjQxNiAwIDEgMSAuODA2LS4xMjdsLS4wMTEuMjI0YTEuMSAxLjEgMCAwIDEtLjQxNS44MDkgMS4yNTggMS4yNTggMCAwIDEtLjkuMTMgMS4wMzkgMS4wMzkgMCAwIDEtLjcxMi0uNTUyIDEuNDggMS40OCAwIDAgMS0uMTQ5LS44LjkxMi45MTIgMCAwIDEgLjMzOC0uODI5Ljk4Ni45ODYgMCAwIDEgLjUyOC0uMTExYy4wODYuMDI2LjE2Mi0uMDE2LjI0NS0uMDIxYS43NjIuNzYyIDAgMCAxIC4yMTEuMDk0IDIuODg2IDIuODg2IDAgMCAxIC4zMDkuMjU3Yy4xLjA2OC4yNTkuMTA2LjMyMy4yMjhhMS4wOTIgMS4wOTIgMCAwIDEgLjIyNS44LjQuNCAwIDAgMS0uNzg1LS4wMTV6IiBmaWxsPSIjZmZjNzU3Ii8+PC9zdmc+Cg==';
|
5163 |
|
5164 | var styles$38 = {
|
5165 | "Image": "p_d9",
|
5166 | };
|
5167 |
|
5168 | class EmptySearchResult$1 extends React.PureComponent {
|
5169 | render() {
|
5170 | var _props = this.props;
|
5171 | const title = _props.title,
|
5172 | description = _props.description,
|
5173 | withIllustration = _props.withIllustration,
|
5174 | intl = _props.polaris.intl;
|
5175 |
|
5176 | const altText = intl.translate('Polaris.EmptySearchResult.altText');
|
5177 | const descriptionMarkup = description ? React.createElement(
|
5178 | 'p',
|
5179 | null,
|
5180 | description
|
5181 | ) : null;
|
5182 | const illustrationMarkup = withIllustration ? React.createElement(Image$1, { alt: altText, source: emptySearch, className: styles$38.Image, draggable: false }) : null;
|
5183 | return React.createElement(
|
5184 | Stack$1,
|
5185 | { alignment: 'center', vertical: true },
|
5186 | illustrationMarkup,
|
5187 | React.createElement(
|
5188 | DisplayText$1,
|
5189 | { size: 'small' },
|
5190 | title
|
5191 | ),
|
5192 | React.createElement(
|
5193 | TextStyle$1,
|
5194 | { variation: 'subdued' },
|
5195 | descriptionMarkup
|
5196 | )
|
5197 | );
|
5198 | }
|
5199 | }
|
5200 | var EmptySearchResult$2 = withAppProvider()(EmptySearchResult$1);
|
5201 |
|
5202 | var styles$39 = {
|
5203 | "EmptyState": "p_l6",
|
5204 | "imageContained": "p_pv",
|
5205 | "Image": "p_e5",
|
5206 | "Section": "p_cs",
|
5207 | "ImageContainer": "p_ms",
|
5208 | "DetailsContainer": "p_fg",
|
5209 | "Details": "p_p5",
|
5210 | "Content": "p_un",
|
5211 | "Actions": "p_pw",
|
5212 | };
|
5213 |
|
5214 | class EmptyState$1 extends React.PureComponent {
|
5215 | render() {
|
5216 | var _props = this.props;
|
5217 | const children = _props.children,
|
5218 | heading = _props.heading,
|
5219 | image = _props.image,
|
5220 | largeImage = _props.largeImage,
|
5221 | imageContained = _props.imageContained,
|
5222 | action = _props.action,
|
5223 | secondaryAction = _props.secondaryAction;
|
5224 |
|
5225 | const className = styles.classNames(styles$39.EmptyState, imageContained && styles$39.imageContained);
|
5226 | const imageMarkup = largeImage ? React.createElement(Image$1, { alt: '', role: 'presentation', className: styles$39.Image, source: largeImage, sourceSet: [{ source: image, descriptor: '568w' }, { source: largeImage, descriptor: '1136w' }], sizes: '(max-width: 568px) 60vw' }) : React.createElement(Image$1, { role: 'presentation', alt: '', className: styles$39.Image, source: image });
|
5227 | const secondaryActionMarkup = secondaryAction ? buttonFrom(secondaryAction, { plain: true }) : null;
|
5228 | return React.createElement(
|
5229 | 'div',
|
5230 | { className: className },
|
5231 | React.createElement(
|
5232 | 'div',
|
5233 | { className: styles$39.Section },
|
5234 | React.createElement(
|
5235 | 'div',
|
5236 | { className: styles$39.DetailsContainer },
|
5237 | React.createElement(
|
5238 | 'div',
|
5239 | { className: styles$39.Details },
|
5240 | React.createElement(
|
5241 | TextContainer$1,
|
5242 | null,
|
5243 | React.createElement(
|
5244 | DisplayText$1,
|
5245 | { size: 'medium' },
|
5246 | heading
|
5247 | ),
|
5248 | React.createElement(
|
5249 | 'div',
|
5250 | { className: styles$39.Content },
|
5251 | children
|
5252 | )
|
5253 | ),
|
5254 | React.createElement(
|
5255 | 'div',
|
5256 | { className: styles$39.Actions },
|
5257 | React.createElement(
|
5258 | Stack$1,
|
5259 | { alignment: 'center' },
|
5260 | buttonFrom(action, { primary: true, size: 'large' }),
|
5261 | secondaryActionMarkup
|
5262 | )
|
5263 | )
|
5264 | )
|
5265 | ),
|
5266 | React.createElement(
|
5267 | 'div',
|
5268 | { className: styles$39.ImageContainer },
|
5269 | imageMarkup
|
5270 | )
|
5271 | )
|
5272 | );
|
5273 | }
|
5274 | }
|
5275 |
|
5276 | var styles$40 = {
|
5277 | "Truncate": "p_mz",
|
5278 | };
|
5279 |
|
5280 | function Truncate$1({ children }) {
|
5281 | return React.createElement(
|
5282 | 'span',
|
5283 | { className: styles$40.Truncate },
|
5284 | children
|
5285 | );
|
5286 | }
|
5287 |
|
5288 | var styles$41 = {
|
5289 | "ExceptionList": "p_l4",
|
5290 | "Item": "p_v1",
|
5291 | "Icon": "p_k6",
|
5292 | "statusWarning": "p_ff",
|
5293 | "statusCritical": "p_nm",
|
5294 | "Bullet": "p_kf",
|
5295 | "Title": "p_zf",
|
5296 | "Description": "p_cg",
|
5297 | };
|
5298 |
|
5299 | function ExceptionList$1({ items: itemsList }) {
|
5300 | const items = itemsList.map((item, index) => {
|
5301 | const status = item.status,
|
5302 | icon = item.icon,
|
5303 | title = item.title,
|
5304 | description = item.description;
|
5305 | var _item$truncate = item.truncate;
|
5306 | const truncate = _item$truncate === undefined ? false : _item$truncate;
|
5307 |
|
5308 | const itemClasses = styles.classNames(styles$41.Item, status && styles$41[styles.variationName('status', status)]);
|
5309 | const iconMarkup = icon ? React.createElement(Icon$2, { source: icon }) : React.createElement('span', { className: styles$41.Bullet });
|
5310 | const titleMarkup = title && React.createElement(
|
5311 | 'span',
|
5312 | { className: styles$41.Title },
|
5313 | title
|
5314 | );
|
5315 | const descriptionMarkup = description && React.createElement(
|
5316 | 'span',
|
5317 | { className: styles$41.Description },
|
5318 | description
|
5319 | );
|
5320 | const Element = truncate ? Truncate$1 : React.Fragment;
|
5321 | return React.createElement(
|
5322 | 'li',
|
5323 | { className: itemClasses, key: index },
|
5324 | React.createElement(
|
5325 | 'span',
|
5326 | { className: styles$41.Icon },
|
5327 | iconMarkup
|
5328 | ),
|
5329 | React.createElement(
|
5330 | Element,
|
5331 | null,
|
5332 | titleMarkup,
|
5333 | descriptionMarkup
|
5334 | )
|
5335 | );
|
5336 | });
|
5337 | return React.createElement(
|
5338 | 'ul',
|
5339 | { className: styles$41.ExceptionList },
|
5340 | items
|
5341 | );
|
5342 | }
|
5343 |
|
5344 | class Form$1 extends React.PureComponent {
|
5345 | render() {
|
5346 | var _props = this.props;
|
5347 | const acceptCharset = _props.acceptCharset,
|
5348 | action = _props.action,
|
5349 | autoComplete = _props.autoComplete,
|
5350 | children = _props.children,
|
5351 | encType = _props.encType;
|
5352 | var _props$implicitSubmit = _props.implicitSubmit;
|
5353 | const implicitSubmit = _props$implicitSubmit === undefined ? true : _props$implicitSubmit,
|
5354 | method = _props.method,
|
5355 | name = _props.name,
|
5356 | noValidate = _props.noValidate,
|
5357 | target$$1 = _props.target;
|
5358 |
|
5359 | const autoCompleteInputs = normalizeAutoComplete(autoComplete);
|
5360 | const submitMarkup = implicitSubmit ? React.createElement(
|
5361 | VisuallyHidden$1,
|
5362 | null,
|
5363 | React.createElement('button', { type: 'submit', 'aria-hidden': 'true' })
|
5364 | ) : null;
|
5365 | return React.createElement(
|
5366 | 'form',
|
5367 | { acceptCharset: acceptCharset, action: action, autoComplete: autoCompleteInputs, encType: encType, method: method, name: name, noValidate: noValidate, target: target$$1, onSubmit: this.handleSubmit },
|
5368 | children,
|
5369 | submitMarkup
|
5370 | );
|
5371 | }
|
5372 | handleSubmit(event) {
|
5373 | var _props2 = this.props,
|
5374 | _props2$preventDefaul = _props2.preventDefault;
|
5375 | const preventDefault = _props2$preventDefaul === undefined ? true : _props2$preventDefaul,
|
5376 | onSubmit = _props2.onSubmit;
|
5377 |
|
5378 | if (!preventDefault) {
|
5379 | return;
|
5380 | }
|
5381 | event.preventDefault();
|
5382 | onSubmit(event);
|
5383 | }
|
5384 | }
|
5385 | tslib_1.__decorate([decorators.autobind], Form$1.prototype, "handleSubmit", null);
|
5386 | function normalizeAutoComplete(autoComplete) {
|
5387 | if (autoComplete == null) {
|
5388 | return autoComplete;
|
5389 | }
|
5390 | return autoComplete ? 'on' : 'off';
|
5391 | }
|
5392 |
|
5393 | var styles$42 = {
|
5394 | "DateTextField": "p_nv",
|
5395 | "DatePicker": "p_uh",
|
5396 | };
|
5397 |
|
5398 | const VALID_DATE_REGEX = /^\d{4}-\d{1,2}-\d{1,2}$/;
|
5399 | var DateFilterOption;
|
5400 | (function (DateFilterOption) {
|
5401 | DateFilterOption["PastWeek"] = "past_week";
|
5402 | DateFilterOption["PastMonth"] = "past_month";
|
5403 | DateFilterOption["PastQuarter"] = "past_quarter";
|
5404 | DateFilterOption["PastYear"] = "past_year";
|
5405 | DateFilterOption["ComingWeek"] = "coming_week";
|
5406 | DateFilterOption["ComingMonth"] = "coming_month";
|
5407 | DateFilterOption["ComingQuarter"] = "coming_quarter";
|
5408 | DateFilterOption["ComingYear"] = "coming_year";
|
5409 | DateFilterOption["OnOrBefore"] = "on_or_before";
|
5410 | DateFilterOption["OnOrAfter"] = "on_or_after";
|
5411 | })(DateFilterOption || (DateFilterOption = {}));
|
5412 | class DateSelector$1 extends React.PureComponent {
|
5413 | constructor() {
|
5414 | super(...arguments);
|
5415 | this.state = {
|
5416 | datePickerMonth: this.now.getMonth(),
|
5417 | datePickerYear: this.now.getFullYear(),
|
5418 | initialConsumerFilterKey: this.props.filterKey
|
5419 | };
|
5420 | }
|
5421 | render() {
|
5422 | var _props = this.props;
|
5423 | const filterValue = _props.filterValue,
|
5424 | filterKey = _props.filterKey,
|
5425 | filterMinKey = _props.filterMinKey,
|
5426 | filterMaxKey = _props.filterMaxKey,
|
5427 | dateOptionType = _props.dateOptionType,
|
5428 | intl = _props.polaris.intl;
|
5429 | var _state = this.state;
|
5430 | const selectedDate = _state.selectedDate,
|
5431 | datePickerMonth = _state.datePickerMonth,
|
5432 | datePickerYear = _state.datePickerYear,
|
5433 | userInputDateError = _state.userInputDateError;
|
5434 |
|
5435 | const dateFilterOption = getDateFilterOption(filterValue, filterKey, filterMinKey, filterMaxKey);
|
5436 | const showDatePredicate = dateFilterOption === DateFilterOption.OnOrBefore || dateFilterOption === DateFilterOption.OnOrAfter;
|
5437 | const datePredicateMarkup = showDatePredicate && React.createElement(
|
5438 | React.Fragment,
|
5439 | null,
|
5440 | React.createElement(
|
5441 | 'div',
|
5442 | { className: styles$42.DateTextField },
|
5443 | React.createElement(TextField$1, { label: intl.translate('Polaris.ResourceList.DateSelector.dateValueLabel'), placeholder: intl.translate('Polaris.ResourceList.DateSelector.dateValuePlaceholder'), value: this.dateTextFieldValue, error: userInputDateError, prefix: React.createElement(Icon$2, { source: 'calendar', color: 'skyDark' }), autoComplete: false, onChange: this.handleDateFieldChange, onBlur: this.handleDateBlur })
|
5444 | ),
|
5445 | React.createElement(
|
5446 | 'div',
|
5447 | { className: styles$42.DatePicker },
|
5448 | React.createElement(DatePicker$2, { selected: selectedDate, month: datePickerMonth, year: datePickerYear, onChange: this.handleDatePickerChange, onMonthChange: this.handleDatePickerMonthChange })
|
5449 | )
|
5450 | );
|
5451 | return React.createElement(
|
5452 | React.Fragment,
|
5453 | null,
|
5454 | React.createElement(Select$1, { label: intl.translate('Polaris.ResourceList.DateSelector.SelectOptions.dateFilterLabel'), labelHidden: true, options: dateOptionType ? this.dateOptionTypes[dateOptionType] : this.dateOptionTypes.full, placeholder: intl.translate('Polaris.ResourceList.FilterValueSelector.selectFilterValuePlaceholder'), value: dateFilterOption, onChange: this.handleDateFilterOptionsChange }),
|
5455 | datePredicateMarkup
|
5456 | );
|
5457 | }
|
5458 | get dateComparatorOptions() {
|
5459 | const intl = this.props.polaris.intl;
|
5460 |
|
5461 | return [{
|
5462 | value: DateFilterOption.OnOrBefore,
|
5463 | label: intl.translate('Polaris.ResourceList.DateSelector.SelectOptions.OnOrBefore')
|
5464 | }, {
|
5465 | value: DateFilterOption.OnOrAfter,
|
5466 | label: intl.translate('Polaris.ResourceList.DateSelector.SelectOptions.OnOrAfter')
|
5467 | }];
|
5468 | }
|
5469 | get datePastOptions() {
|
5470 | const intl = this.props.polaris.intl;
|
5471 |
|
5472 | return [{
|
5473 | value: DateFilterOption.PastWeek,
|
5474 | label: intl.translate('Polaris.ResourceList.DateSelector.SelectOptions.PastWeek')
|
5475 | }, {
|
5476 | value: DateFilterOption.PastMonth,
|
5477 | label: intl.translate('Polaris.ResourceList.DateSelector.SelectOptions.PastMonth')
|
5478 | }, {
|
5479 | value: DateFilterOption.PastQuarter,
|
5480 | label: intl.translate('Polaris.ResourceList.DateSelector.SelectOptions.PastQuarter')
|
5481 | }, {
|
5482 | value: DateFilterOption.PastYear,
|
5483 | label: intl.translate('Polaris.ResourceList.DateSelector.SelectOptions.PastYear')
|
5484 | }];
|
5485 | }
|
5486 | get dateFutureOptions() {
|
5487 | const intl = this.props.polaris.intl;
|
5488 |
|
5489 | return [{
|
5490 | value: DateFilterOption.ComingWeek,
|
5491 | label: intl.translate('Polaris.ResourceList.DateSelector.SelectOptions.ComingWeek')
|
5492 | }, {
|
5493 | value: DateFilterOption.ComingMonth,
|
5494 | label: intl.translate('Polaris.ResourceList.DateSelector.SelectOptions.ComingMonth')
|
5495 | }, {
|
5496 | value: DateFilterOption.ComingQuarter,
|
5497 | label: intl.translate('Polaris.ResourceList.DateSelector.SelectOptions.ComingQuarter')
|
5498 | }, {
|
5499 | value: DateFilterOption.ComingYear,
|
5500 | label: intl.translate('Polaris.ResourceList.DateSelector.SelectOptions.ComingYear')
|
5501 | }];
|
5502 | }
|
5503 | get dateOptionTypes() {
|
5504 | return {
|
5505 | past: [...this.datePastOptions, ...this.dateComparatorOptions],
|
5506 | future: [...this.dateFutureOptions, ...this.dateComparatorOptions],
|
5507 | full: [...this.datePastOptions, ...this.dateFutureOptions, ...this.dateComparatorOptions]
|
5508 | };
|
5509 | }
|
5510 | get now() {
|
5511 | return new Date();
|
5512 | }
|
5513 | get dateTextFieldValue() {
|
5514 | var _state2 = this.state;
|
5515 | const userInputDate = _state2.userInputDate,
|
5516 | selectedDate = _state2.selectedDate;
|
5517 |
|
5518 | if (!userInputDate && !selectedDate) {
|
5519 | return undefined;
|
5520 | }
|
5521 | if (userInputDate !== undefined) {
|
5522 | return userInputDate;
|
5523 | }
|
5524 | if (selectedDate) {
|
5525 | return formatDateValue(selectedDate);
|
5526 | }
|
5527 | }
|
5528 | handleDateFilterOptionsChange(newOption) {
|
5529 | var _props2 = this.props;
|
5530 | const onFilterValueChange = _props2.onFilterValueChange,
|
5531 | onFilterKeyChange = _props2.onFilterKeyChange,
|
5532 | filterMinKey = _props2.filterMinKey,
|
5533 | filterMaxKey = _props2.filterMaxKey;
|
5534 | var _state3 = this.state;
|
5535 | const initialConsumerFilterKey = _state3.initialConsumerFilterKey,
|
5536 | selectedDate = _state3.selectedDate;
|
5537 |
|
5538 | if (!initialConsumerFilterKey) {
|
5539 | return;
|
5540 | }
|
5541 | if (newOption === DateFilterOption.OnOrBefore) {
|
5542 | onFilterKeyChange(filterMaxKey);
|
5543 | onFilterValueChange(selectedDate ? formatDateValue(selectedDate) : undefined);
|
5544 | return;
|
5545 | }
|
5546 | if (newOption === DateFilterOption.OnOrAfter) {
|
5547 | onFilterKeyChange(filterMinKey);
|
5548 | onFilterValueChange(selectedDate ? formatDateValue(selectedDate) : undefined);
|
5549 | return;
|
5550 | }
|
5551 | onFilterKeyChange(initialConsumerFilterKey);
|
5552 | onFilterValueChange(newOption);
|
5553 | }
|
5554 | handleDateFieldChange(value) {
|
5555 | const onFilterValueChange = this.props.onFilterValueChange;
|
5556 | const userInputDateError = this.state.userInputDateError;
|
5557 |
|
5558 | if (value.length === 0) {
|
5559 | this.setState({
|
5560 | selectedDate: undefined
|
5561 | }, () => {
|
5562 | onFilterValueChange(undefined);
|
5563 | });
|
5564 | }
|
5565 | if (userInputDateError && isValidDate(value)) {
|
5566 | this.setState({
|
5567 | userInputDateError: undefined
|
5568 | });
|
5569 | }
|
5570 | this.setState({
|
5571 | userInputDate: value
|
5572 | });
|
5573 | }
|
5574 | handleDateBlur() {
|
5575 | var _props3 = this.props;
|
5576 | const intl = _props3.polaris.intl,
|
5577 | onFilterValueChange = _props3.onFilterValueChange;
|
5578 |
|
5579 | if (!this.dateTextFieldValue || !isValidDate(this.dateTextFieldValue)) {
|
5580 | this.setState({
|
5581 | selectedDate: undefined,
|
5582 | userInputDateError: intl.translate('Polaris.ResourceList.DateSelector.dateValueError')
|
5583 | });
|
5584 | onFilterValueChange(undefined);
|
5585 | return;
|
5586 | }
|
5587 | const userInputDate = this.state.userInputDate;
|
5588 |
|
5589 | if (!userInputDate) {
|
5590 | return;
|
5591 | }
|
5592 | const nextDate = new Date(userInputDate.replace(/-/g, '/'));
|
5593 | this.setState({
|
5594 | selectedDate: nextDate,
|
5595 | datePickerMonth: nextDate.getMonth(),
|
5596 | datePickerYear: nextDate.getFullYear(),
|
5597 | userInputDate: undefined,
|
5598 | userInputDateError: undefined
|
5599 | }, this.handleDateChanged);
|
5600 | }
|
5601 | handleDateChanged() {
|
5602 | const onFilterValueChange = this.props.onFilterValueChange;
|
5603 | const selectedDate = this.state.selectedDate;
|
5604 |
|
5605 | if (!selectedDate) {
|
5606 | return;
|
5607 | }
|
5608 | onFilterValueChange(formatDateValue(selectedDate));
|
5609 | }
|
5610 | handleDatePickerChange({ end: nextDate }) {
|
5611 | this.setState({
|
5612 | selectedDate: new Date(nextDate),
|
5613 | userInputDate: undefined,
|
5614 | userInputDateError: undefined
|
5615 | }, this.handleDateChanged);
|
5616 | }
|
5617 | handleDatePickerMonthChange(month, year) {
|
5618 | this.setState({ datePickerMonth: month, datePickerYear: year });
|
5619 | }
|
5620 | }
|
5621 | tslib_1.__decorate([decorators.autobind], DateSelector$1.prototype, "handleDateFilterOptionsChange", null);
|
5622 | tslib_1.__decorate([decorators.autobind], DateSelector$1.prototype, "handleDateFieldChange", null);
|
5623 | tslib_1.__decorate([decorators.autobind], DateSelector$1.prototype, "handleDateBlur", null);
|
5624 | tslib_1.__decorate([decorators.autobind], DateSelector$1.prototype, "handleDatePickerChange", null);
|
5625 | tslib_1.__decorate([decorators.autobind], DateSelector$1.prototype, "handleDatePickerMonthChange", null);
|
5626 | function isValidDate(date) {
|
5627 | if (!date) {
|
5628 | return false;
|
5629 | }
|
5630 | return VALID_DATE_REGEX.test(date) && !isNaN(new Date(date).getTime());
|
5631 | }
|
5632 | function getDateFilterOption(filterValue, filterKey, filterMinKey, filterMaxKey) {
|
5633 | if (filterKey === filterMaxKey) {
|
5634 | return DateFilterOption.OnOrBefore;
|
5635 | }
|
5636 | if (filterKey === filterMinKey) {
|
5637 | return DateFilterOption.OnOrAfter;
|
5638 | }
|
5639 | return filterValue;
|
5640 | }
|
5641 | function formatDateValue(date) {
|
5642 | return date.toISOString().slice(0, 10);
|
5643 | }
|
5644 | var DateSelector$2 = withAppProvider()(DateSelector$1);
|
5645 |
|
5646 | (function (FilterType) {
|
5647 | FilterType[FilterType["Select"] = 0] = "Select";
|
5648 | FilterType[FilterType["TextField"] = 1] = "TextField";
|
5649 | FilterType[FilterType["DateSelector"] = 2] = "DateSelector";
|
5650 | })(exports.FilterType || (exports.FilterType = {}));
|
5651 |
|
5652 | class FilterValueSelector extends React.PureComponent {
|
5653 | componentDidMount() {
|
5654 | var _props$filter = this.props.filter;
|
5655 | const operatorText = _props$filter.operatorText,
|
5656 | type = _props$filter.type;
|
5657 |
|
5658 | if (type === exports.FilterType.DateSelector || !operatorText || typeof operatorText === 'string' || operatorText.length === 0) {
|
5659 | return;
|
5660 | }
|
5661 | this.handleOperatorOptionChange(operatorText[0].key);
|
5662 | }
|
5663 | render() {
|
5664 | var _props = this.props;
|
5665 | const filter = _props.filter,
|
5666 | filterKey = _props.filterKey,
|
5667 | value = _props.value,
|
5668 | onChange = _props.onChange,
|
5669 | onFilterKeyChange = _props.onFilterKeyChange,
|
5670 | intl = _props.polaris.intl;
|
5671 | const operatorText = filter.operatorText;
|
5672 |
|
5673 | const showOperatorOptions = filter.type !== exports.FilterType.DateSelector && operatorText && typeof operatorText !== 'string';
|
5674 | const operatorOptionsMarkup = showOperatorOptions ? React.createElement(Select$1, { label: filter.label, labelHidden: true, options: buildOperatorOptions(operatorText), value: filterKey, onChange: this.handleOperatorOptionChange }) : null;
|
5675 | const selectedFilterLabel = typeof operatorText === 'string' ? operatorText : '';
|
5676 | switch (filter.type) {
|
5677 | case exports.FilterType.Select:
|
5678 | return React.createElement(
|
5679 | Stack$1,
|
5680 | { vertical: true },
|
5681 | operatorOptionsMarkup,
|
5682 | React.createElement(Select$1, { label: selectedFilterLabel, options: filter.options, placeholder: intl.translate('Polaris.ResourceList.FilterValueSelector.selectFilterValuePlaceholder'), value: value, onChange: onChange })
|
5683 | );
|
5684 | case exports.FilterType.TextField:
|
5685 | return React.createElement(
|
5686 | Stack$1,
|
5687 | { vertical: true },
|
5688 | operatorOptionsMarkup,
|
5689 | React.createElement(TextField$1, { label: selectedFilterLabel, value: value, type: filter.textFieldType, onChange: onChange })
|
5690 | );
|
5691 | case exports.FilterType.DateSelector:
|
5692 | return React.createElement(DateSelector$2, { dateOptionType: filter.dateOptionType, filterValue: value, filterKey: filterKey, filterMinKey: filter.minKey, filterMaxKey: filter.maxKey, onFilterValueChange: onChange, onFilterKeyChange: onFilterKeyChange });
|
5693 | default:
|
5694 | return null;
|
5695 | }
|
5696 | }
|
5697 | handleOperatorOptionChange(operatorKey) {
|
5698 | var _props2 = this.props;
|
5699 | const value = _props2.value,
|
5700 | onChange = _props2.onChange,
|
5701 | onFilterKeyChange = _props2.onFilterKeyChange;
|
5702 |
|
5703 | onFilterKeyChange(operatorKey);
|
5704 | if (!value) {
|
5705 | return;
|
5706 | }
|
5707 | onChange(value);
|
5708 | }
|
5709 | }
|
5710 | tslib_1.__decorate([decorators.autobind], FilterValueSelector.prototype, "handleOperatorOptionChange", null);
|
5711 | function buildOperatorOptions(operatorText) {
|
5712 | if (!operatorText || typeof operatorText === 'string') {
|
5713 | return [];
|
5714 | }
|
5715 | return operatorText.map(({ key, optionLabel }) => {
|
5716 | return { value: key, label: optionLabel };
|
5717 | });
|
5718 | }
|
5719 | var FilterValueSelector$1 = withAppProvider()(FilterValueSelector);
|
5720 |
|
5721 | class FilterCreator extends React.PureComponent {
|
5722 | constructor() {
|
5723 | super(...arguments);
|
5724 | this.state = {
|
5725 | popoverActive: false
|
5726 | };
|
5727 | this.node = null;
|
5728 | }
|
5729 | get canAddFilter() {
|
5730 | return Boolean(this.state.selectedFilter && this.state.selectedFilterKey && this.state.selectedFilterValue);
|
5731 | }
|
5732 | render() {
|
5733 | var _props = this.props;
|
5734 | const filters = _props.filters,
|
5735 | resourceName = _props.resourceName,
|
5736 | disabled = _props.disabled,
|
5737 | intl = _props.polaris.intl;
|
5738 | var _state = this.state;
|
5739 | const popoverActive = _state.popoverActive,
|
5740 | selectedFilter = _state.selectedFilter,
|
5741 | selectedFilterKey = _state.selectedFilterKey,
|
5742 | selectedFilterValue = _state.selectedFilterValue;
|
5743 |
|
5744 | const activator = React.createElement(
|
5745 | Button$2,
|
5746 | { onClick: this.togglePopover, disclosure: true, disabled: disabled, onFocus: this.handleButtonFocus },
|
5747 | intl.translate('Polaris.ResourceList.FilterCreator.filterButtonLabel')
|
5748 | );
|
5749 | const filterOptions = filters.map(({ key, label }) => ({
|
5750 | value: key,
|
5751 | label
|
5752 | }));
|
5753 | const filterValueSelectionMarkup = selectedFilter ? React.createElement(FilterValueSelector$1, { filter: selectedFilter, filterKey: selectedFilterKey, value: selectedFilterValue, onFilterKeyChange: this.handleFilterKeyChange, onChange: this.handleFilterValueChange }) : null;
|
5754 | const addFilterButtonMarkup = selectedFilter ? React.createElement(
|
5755 | Button$2,
|
5756 | { onClick: this.handleAddFilter, disabled: !this.canAddFilter },
|
5757 | intl.translate('Polaris.ResourceList.FilterCreator.addFilterButtonLabel')
|
5758 | ) : null;
|
5759 | return React.createElement(
|
5760 | Popover$1,
|
5761 | { active: popoverActive, activator: activator, onClose: this.togglePopover, sectioned: true, fullHeight: true },
|
5762 | React.createElement(
|
5763 | Form$1,
|
5764 | { onSubmit: this.handleAddFilter },
|
5765 | React.createElement(
|
5766 | FormLayout$1,
|
5767 | null,
|
5768 | React.createElement(Select$1, { label: intl.translate('Polaris.ResourceList.FilterCreator.showAllWhere', { resourceNamePlural: resourceName.plural.toLocaleLowerCase() }), placeholder: intl.translate('Polaris.ResourceList.FilterCreator.selectFilterKeyPlaceholder'), options: filterOptions, onChange: this.handleFilterKeyChange, value: selectedFilter && selectedFilter.key }),
|
5769 | filterValueSelectionMarkup,
|
5770 | addFilterButtonMarkup
|
5771 | )
|
5772 | )
|
5773 | );
|
5774 | }
|
5775 | handleButtonFocus(...args) {
|
5776 | const event = args[0];
|
5777 | if (!this.node && event) {
|
5778 | this.node = event.target;
|
5779 | }
|
5780 | }
|
5781 | togglePopover() {
|
5782 | this.setState(({ popoverActive }) => ({ popoverActive: !popoverActive }));
|
5783 | }
|
5784 | handleFilterKeyChange(filterKey) {
|
5785 | const filters = this.props.filters;
|
5786 |
|
5787 | const foundFilter = filters.find(filter => {
|
5788 | const minKey = filter.minKey,
|
5789 | maxKey = filter.maxKey,
|
5790 | operatorText = filter.operatorText;
|
5791 |
|
5792 | if (minKey || maxKey) {
|
5793 | return filter.key === filterKey || minKey === filterKey || maxKey === filterKey;
|
5794 | }
|
5795 | if (operatorText && typeof operatorText !== 'string') {
|
5796 | return filter.key === filterKey || operatorText.filter(({ key }) => key === filterKey).length === 1;
|
5797 | }
|
5798 | return filter.key === filterKey;
|
5799 | });
|
5800 | if (!foundFilter) {
|
5801 | return;
|
5802 | }
|
5803 | this.setState({
|
5804 | selectedFilter: foundFilter,
|
5805 | selectedFilterKey: filterKey,
|
5806 | selectedFilterValue: undefined
|
5807 | });
|
5808 | }
|
5809 | handleFilterValueChange(filterValue) {
|
5810 | this.setState({ selectedFilterValue: filterValue });
|
5811 | }
|
5812 | handleAddFilter() {
|
5813 | const onAddFilter = this.props.onAddFilter;
|
5814 | const selectedFilterKey = this.state.selectedFilterKey;
|
5815 |
|
5816 | if (!onAddFilter || !this.canAddFilter || !selectedFilterKey) {
|
5817 | return;
|
5818 | }
|
5819 | onAddFilter({
|
5820 | key: selectedFilterKey,
|
5821 | value: this.state.selectedFilterValue || ''
|
5822 | });
|
5823 | this.setState({
|
5824 | popoverActive: false,
|
5825 | selectedFilter: undefined,
|
5826 | selectedFilterValue: undefined
|
5827 | });
|
5828 | if (this.node != null) {
|
5829 | this.node.focus();
|
5830 | }
|
5831 | }
|
5832 | }
|
5833 | tslib_1.__decorate([decorators.autobind], FilterCreator.prototype, "handleButtonFocus", null);
|
5834 | tslib_1.__decorate([decorators.autobind], FilterCreator.prototype, "togglePopover", null);
|
5835 | tslib_1.__decorate([decorators.autobind], FilterCreator.prototype, "handleFilterKeyChange", null);
|
5836 | tslib_1.__decorate([decorators.autobind], FilterCreator.prototype, "handleFilterValueChange", null);
|
5837 | tslib_1.__decorate([decorators.autobind], FilterCreator.prototype, "handleAddFilter", null);
|
5838 | var FilterCreator$1 = withAppProvider()(FilterCreator);
|
5839 |
|
5840 | var styles$43 = {
|
5841 | "Controls": "p_so",
|
5842 | "Search": "p_qi",
|
5843 | "AppliedFilters": "p_vg",
|
5844 | "AppliedFilter": "p_us",
|
5845 | };
|
5846 |
|
5847 | var styles$44 = {
|
5848 | "Select": "p_hd",
|
5849 | "disabled": "p_ng",
|
5850 | "Content": "p_e3",
|
5851 | "InlineLabel": "p_gn",
|
5852 | "Icon": "p_w1",
|
5853 | "Backdrop": "p_tu",
|
5854 | "error": "p_b6",
|
5855 | "Input": "p_ir",
|
5856 | "placeholder": "p_ok",
|
5857 | "SelectedOption": "p_mj",
|
5858 | };
|
5859 |
|
5860 | const PLACEHOLDER_VALUE = '';
|
5861 | const getUniqueID$5 = other.createUniqueIDFactory('Select');
|
5862 | function Select$1({ options: optionsProp, groups: groupsProp, label, labelAction, labelHidden: labelHiddenProp, labelInline, disabled, helpText, placeholder, id = getUniqueID$5(), name, value = PLACEHOLDER_VALUE, error, onChange, onFocus, onBlur }) {
|
5863 | const labelHidden = labelInline ? true : labelHiddenProp;
|
5864 | const className = styles.classNames(styles$44.Select, error && styles$44.error, disabled && styles$44.disabled);
|
5865 | const handleChange = onChange ? event => onChange(event.currentTarget.value, id) : undefined;
|
5866 | const describedBy = [];
|
5867 | if (helpText) {
|
5868 | describedBy.push(helpTextID$1(id));
|
5869 | }
|
5870 | if (error) {
|
5871 | describedBy.push(`${id}Error`);
|
5872 | }
|
5873 | if (groupsProp != null) {
|
5874 |
|
5875 | console.warn('Deprecation: the `groups` prop is deprecated and will be removed in the next major version. Pass groups to the `options` prop instead.');
|
5876 | }
|
5877 | const options = optionsProp || groupsProp || [];
|
5878 | let normalizedOptions = options.map(normalizeOption);
|
5879 | if (placeholder) {
|
5880 | normalizedOptions = [{
|
5881 | label: placeholder,
|
5882 | value: PLACEHOLDER_VALUE,
|
5883 | disabled: true
|
5884 | }, ...normalizedOptions];
|
5885 | }
|
5886 | const inlineLabelMarkup = labelInline && React.createElement(
|
5887 | 'span',
|
5888 | { className: styles$44.InlineLabel },
|
5889 | label
|
5890 | );
|
5891 | const selectedOption = getSelectedOption(normalizedOptions, value);
|
5892 | const contentMarkup = React.createElement(
|
5893 | 'div',
|
5894 | { className: styles$44.Content, 'aria-hidden': true },
|
5895 | inlineLabelMarkup,
|
5896 | React.createElement(
|
5897 | 'span',
|
5898 | { className: styles$44.SelectedOption },
|
5899 | selectedOption
|
5900 | ),
|
5901 | React.createElement(
|
5902 | 'span',
|
5903 | { className: styles$44.Icon },
|
5904 | React.createElement(Icon$2, { source: 'arrowUpDown' })
|
5905 | )
|
5906 | );
|
5907 | const optionsMarkup = normalizedOptions.map(renderOption);
|
5908 | return React.createElement(
|
5909 | Labelled$1,
|
5910 | { id: id, label: label, error: error, action: labelAction, labelHidden: labelHidden, helpText: helpText },
|
5911 | React.createElement(
|
5912 | 'div',
|
5913 | { className: className },
|
5914 | React.createElement(
|
5915 | 'select',
|
5916 | { id: id, name: name, value: value, className: styles$44.Input, disabled: disabled, onFocus: onFocus, onBlur: onBlur, onChange: handleChange, 'aria-invalid': Boolean(error), 'aria-describedby': describedBy.length ? describedBy.join(' ') : undefined },
|
5917 | optionsMarkup
|
5918 | ),
|
5919 | contentMarkup,
|
5920 | React.createElement('div', { className: styles$44.Backdrop })
|
5921 | )
|
5922 | );
|
5923 | }
|
5924 | function isString(option) {
|
5925 | return typeof option === 'string';
|
5926 | }
|
5927 | function isGroup(option) {
|
5928 | return option.options != null;
|
5929 | }
|
5930 | function normalizeStringOption(option) {
|
5931 | return {
|
5932 | label: option,
|
5933 | value: option
|
5934 | };
|
5935 | }
|
5936 |
|
5937 |
|
5938 |
|
5939 |
|
5940 | function normalizeOption(option) {
|
5941 | if (isString(option)) {
|
5942 | return normalizeStringOption(option);
|
5943 | } else if (isGroup(option)) {
|
5944 | const title = option.title,
|
5945 | options = option.options;
|
5946 |
|
5947 | return {
|
5948 | title,
|
5949 | options: options.map(option => {
|
5950 | return isString(option) ? normalizeStringOption(option) : option;
|
5951 | })
|
5952 | };
|
5953 | }
|
5954 | return option;
|
5955 | }
|
5956 |
|
5957 |
|
5958 |
|
5959 | function getSelectedOption(options, value) {
|
5960 | const flatOptions = flattenOptions(options);
|
5961 | let selectedOption = flatOptions.find(option => value === option.value);
|
5962 | if (selectedOption === undefined) {
|
5963 |
|
5964 | selectedOption = flatOptions.find(option => !option.hidden);
|
5965 | }
|
5966 | return selectedOption ? selectedOption.label : '';
|
5967 | }
|
5968 |
|
5969 |
|
5970 |
|
5971 | function flattenOptions(options) {
|
5972 | let flatOptions = [];
|
5973 | options.forEach(optionOrGroup => {
|
5974 | if (isGroup(optionOrGroup)) {
|
5975 | flatOptions = flatOptions.concat(optionOrGroup.options);
|
5976 | } else {
|
5977 | flatOptions.push(optionOrGroup);
|
5978 | }
|
5979 | });
|
5980 | return flatOptions;
|
5981 | }
|
5982 | function renderSingleOption(option) {
|
5983 | const value = option.value,
|
5984 | label = option.label,
|
5985 | rest = tslib_1.__rest(option, ["value", "label"]);
|
5986 |
|
5987 | return React.createElement(
|
5988 | 'option',
|
5989 | Object.assign({ key: value, value: value }, rest),
|
5990 | label
|
5991 | );
|
5992 | }
|
5993 | function renderOption(optionOrGroup) {
|
5994 | if (isGroup(optionOrGroup)) {
|
5995 | const title = optionOrGroup.title,
|
5996 | options = optionOrGroup.options;
|
5997 |
|
5998 | return React.createElement(
|
5999 | 'optgroup',
|
6000 | { label: title, key: title },
|
6001 | options.map(renderSingleOption)
|
6002 | );
|
6003 | }
|
6004 | return renderSingleOption(optionOrGroup);
|
6005 | }
|
6006 |
|
6007 | var selectIcon = {"viewBox":"0 0 20 20","body":"<path d=\"M9 14.41l-3.71-3.7 1.42-1.42L9 11.59l5.29-5.3 1.42 1.42L9 14.41zM17 2H3c-.55 0-1 .45-1 1v14c0 .55.45 1 1 1h14c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1z\" />"};
|
6008 |
|
6009 | var styles$45 = {
|
6010 | "CheckableButton": "p_mh",
|
6011 | "CheckableButton-measuring": "p_ec",
|
6012 | "CheckableButton-plain": "p_uc",
|
6013 | "CheckableButton-selectMode": "p_uy",
|
6014 | "CheckableButton-selected": "p_if",
|
6015 | "Checkbox": "p_fw",
|
6016 | "Label": "p_rs",
|
6017 | };
|
6018 |
|
6019 | function CheckableButton$1({ accessibilityLabel, label = '', onToggleAll, selected, selectMode, plain, measuring, disabled }) {
|
6020 | const className = plain ? styles.classNames(styles$45.CheckableButton, styles$45['CheckableButton-plain']) : styles.classNames(styles$45.CheckableButton, selectMode && styles$45['CheckableButton-selectMode'], selected && styles$45['CheckableButton-selected'], measuring && styles$45['CheckableButton-measuring']);
|
6021 | return React.createElement(
|
6022 | 'div',
|
6023 | { className: className, onClick: onToggleAll },
|
6024 | React.createElement(
|
6025 | 'div',
|
6026 | { className: styles$45.Checkbox },
|
6027 | React.createElement(Checkbox$2, { label: accessibilityLabel, labelHidden: true, checked: selected, disabled: disabled })
|
6028 | ),
|
6029 | React.createElement(
|
6030 | 'span',
|
6031 | { className: styles$45.Label },
|
6032 | label
|
6033 | )
|
6034 | );
|
6035 | }
|
6036 | var CheckableButton$2 = withAppProvider()(CheckableButton$1);
|
6037 |
|
6038 | var styles$46 = {
|
6039 | "Button": "p_i8",
|
6040 | "Group-measuring": "p_mt",
|
6041 | "Group": "p_oc",
|
6042 | "Group-entering": "p_m7",
|
6043 | "Group-exiting": "p_zu",
|
6044 | "Group-entered": "p_kt",
|
6045 | "Group-exited": "p_oy",
|
6046 | "Group-smallScreen": "p_ru",
|
6047 | "Group-largeScreen": "p_cp",
|
6048 | "ButtonGroup": "p_ni",
|
6049 | "Button-cancel": "p_rl",
|
6050 | "Popover": "p_sn",
|
6051 | "ActionContent": "p_dp",
|
6052 | "ActionIcon": "p_mb",
|
6053 | "disabled": "p_js",
|
6054 | "PaginatedSelectAll": "p_c1",
|
6055 | "Slide": "p_gq",
|
6056 | "Slide-appear": "p_hi",
|
6057 | "Slide-enter": "p_gc",
|
6058 | "Slide-exit": "p_bf",
|
6059 | "Slide-appearing": "p_ii",
|
6060 | "Slide-entering": "p_a1",
|
6061 | };
|
6062 |
|
6063 | class BulkActionButton extends React.PureComponent {
|
6064 | componentDidMount() {
|
6065 | const handleMeasurement = this.props.handleMeasurement;
|
6066 |
|
6067 | if (handleMeasurement) {
|
6068 | const bulkActionButtonNode = ReactDOM.findDOMNode(this);
|
6069 | const width = bulkActionButtonNode instanceof Element && bulkActionButtonNode.getBoundingClientRect().width || 0;
|
6070 | handleMeasurement(width);
|
6071 | }
|
6072 | }
|
6073 | render() {
|
6074 | var _props = this.props;
|
6075 | const url = _props.url,
|
6076 | external = _props.external,
|
6077 | onAction = _props.onAction,
|
6078 | content = _props.content,
|
6079 | disclosure = _props.disclosure,
|
6080 | accessibilityLabel = _props.accessibilityLabel,
|
6081 | disabled = _props.disabled;
|
6082 |
|
6083 | const disclosureIconMarkup = disclosure ? React.createElement(
|
6084 | 'span',
|
6085 | { className: styles$46.ActionIcon },
|
6086 | React.createElement(Icon$2, { source: 'caretDown' })
|
6087 | ) : null;
|
6088 | const contentMarkup = disclosureIconMarkup ? React.createElement(
|
6089 | 'span',
|
6090 | { className: styles$46.ActionContent },
|
6091 | React.createElement(
|
6092 | 'span',
|
6093 | null,
|
6094 | content
|
6095 | ),
|
6096 | disclosureIconMarkup
|
6097 | ) : content;
|
6098 | if (url) {
|
6099 | return React.createElement(
|
6100 | UnstyledLink$2,
|
6101 | { external: external, url: url, onMouseUp: handleMouseUpByBlurring, className: styles$46.Button, 'aria-label': accessibilityLabel },
|
6102 | contentMarkup
|
6103 | );
|
6104 | }
|
6105 | const className = reactUtilities.classNames(styles$46.Button, disabled && styles$46.disabled);
|
6106 | return React.createElement(
|
6107 | 'button',
|
6108 | { className: className, onClick: onAction, onMouseUp: handleMouseUpByBlurring, 'aria-label': accessibilityLabel, type: 'button', disabled: disabled },
|
6109 | contentMarkup
|
6110 | );
|
6111 | }
|
6112 | }
|
6113 |
|
6114 | const MAX_PROMOTED_ACTIONS = 2;
|
6115 | const slideClasses = {
|
6116 | appear: styles.classNames(styles$46.Slide, styles$46['Slide-appear']),
|
6117 | appearActive: styles.classNames(styles$46.Slide, styles$46['Slide-appearing']),
|
6118 | enter: styles.classNames(styles$46.Slide, styles$46['Slide-enter']),
|
6119 | enterActive: styles.classNames(styles$46.Slide, styles$46['Slide-entering']),
|
6120 | exit: styles.classNames(styles$46.Slide, styles$46['Slide-exit'])
|
6121 | };
|
6122 | class BulkActions$1 extends React.PureComponent {
|
6123 | constructor() {
|
6124 | super(...arguments);
|
6125 | this.state = {
|
6126 | smallScreenPopoverVisible: false,
|
6127 | largeScreenPopoverVisible: false,
|
6128 | containerWidth: 0,
|
6129 | measuring: true
|
6130 | };
|
6131 | this.promotedActionsWidths = [];
|
6132 | this.bulkActionsWidth = 0;
|
6133 | this.addedMoreActionsWidthForMeasuring = 0;
|
6134 | }
|
6135 | get numberOfPromotedActionsToRender() {
|
6136 | const promotedActions = this.props.promotedActions;
|
6137 | var _state = this.state;
|
6138 | const containerWidth = _state.containerWidth,
|
6139 | measuring = _state.measuring;
|
6140 |
|
6141 | if (!promotedActions) {
|
6142 | return 0;
|
6143 | }
|
6144 | if (containerWidth >= this.bulkActionsWidth || measuring) {
|
6145 | return promotedActions.length;
|
6146 | }
|
6147 | let sufficientSpace = false;
|
6148 | let counter = promotedActions.length - 1;
|
6149 | let totalWidth = 0;
|
6150 | while (!sufficientSpace && counter >= 0) {
|
6151 | totalWidth += this.promotedActionsWidths[counter];
|
6152 | const widthWithRemovedAction = this.bulkActionsWidth - totalWidth + this.addedMoreActionsWidthForMeasuring;
|
6153 | if (containerWidth >= widthWithRemovedAction) {
|
6154 | sufficientSpace = true;
|
6155 | } else {
|
6156 | counter--;
|
6157 | }
|
6158 | }
|
6159 | return counter;
|
6160 | }
|
6161 | get hasActions() {
|
6162 | var _props = this.props;
|
6163 | const promotedActions = _props.promotedActions,
|
6164 | actions = _props.actions;
|
6165 |
|
6166 | return Boolean(promotedActions && promotedActions.length > 0 || actions && actions.length > 0);
|
6167 | }
|
6168 | get actionSections() {
|
6169 | const actions = this.props.actions;
|
6170 |
|
6171 | if (!actions || actions.length === 0) {
|
6172 | return;
|
6173 | }
|
6174 | if (instanceOfBulkActionListSectionArray(actions)) {
|
6175 | return actions;
|
6176 | }
|
6177 | if (instanceOfBulkActionArray(actions)) {
|
6178 | return [{
|
6179 | items: actions
|
6180 | }];
|
6181 | }
|
6182 | }
|
6183 | componentDidMount() {
|
6184 | var _props2 = this.props;
|
6185 | const actions = _props2.actions,
|
6186 | promotedActions = _props2.promotedActions;
|
6187 |
|
6188 | if (promotedActions && !actions && this.moreActionsNode) {
|
6189 | this.addedMoreActionsWidthForMeasuring = this.moreActionsNode.getBoundingClientRect().width;
|
6190 | }
|
6191 | this.bulkActionsWidth = this.largeScreenButtonsNode ? this.largeScreenButtonsNode.getBoundingClientRect().width - this.addedMoreActionsWidthForMeasuring : 0;
|
6192 | if (this.containerNode) {
|
6193 |
|
6194 | this.setState({
|
6195 | containerWidth: this.containerNode.getBoundingClientRect().width,
|
6196 | measuring: false
|
6197 | });
|
6198 | }
|
6199 | }
|
6200 | render() {
|
6201 | var _props3 = this.props;
|
6202 | const selectMode = _props3.selectMode,
|
6203 | accessibilityLabel = _props3.accessibilityLabel;
|
6204 | var _props3$label = _props3.label;
|
6205 | const label = _props3$label === undefined ? '' : _props3$label,
|
6206 | onToggleAll = _props3.onToggleAll,
|
6207 | selected = _props3.selected,
|
6208 | disabled = _props3.disabled,
|
6209 | promotedActions = _props3.promotedActions;
|
6210 | var _props3$paginatedSele = _props3.paginatedSelectAllText;
|
6211 | const paginatedSelectAllText = _props3$paginatedSele === undefined ? null : _props3$paginatedSele,
|
6212 | paginatedSelectAllAction = _props3.paginatedSelectAllAction,
|
6213 | intl = _props3.polaris.intl;
|
6214 |
|
6215 | if (promotedActions && promotedActions.length > MAX_PROMOTED_ACTIONS) {
|
6216 |
|
6217 | console.warn(intl.translate('Polaris.ResourceList.BulkActions.warningMessage', {
|
6218 | maxPromotedActions: MAX_PROMOTED_ACTIONS
|
6219 | }));
|
6220 | }
|
6221 | var _state2 = this.state;
|
6222 | const smallScreenPopoverVisible = _state2.smallScreenPopoverVisible,
|
6223 | largeScreenPopoverVisible = _state2.largeScreenPopoverVisible,
|
6224 | measuring = _state2.measuring;
|
6225 |
|
6226 | const paginatedSelectAllActionMarkup = paginatedSelectAllAction ? React.createElement(
|
6227 | Button$2,
|
6228 | { onClick: paginatedSelectAllAction.onAction, plain: true, disabled: disabled },
|
6229 | paginatedSelectAllAction.content
|
6230 | ) : null;
|
6231 | const paginatedSelectAllTextMarkup = paginatedSelectAllText && paginatedSelectAllAction ? React.createElement(
|
6232 | 'span',
|
6233 | { 'aria-live': 'polite' },
|
6234 | paginatedSelectAllText
|
6235 | ) : paginatedSelectAllText;
|
6236 | const paginatedSelectAllMarkup = paginatedSelectAllActionMarkup || paginatedSelectAllTextMarkup ? React.createElement(
|
6237 | 'div',
|
6238 | { className: styles$46.PaginatedSelectAll },
|
6239 | paginatedSelectAllTextMarkup,
|
6240 | ' ',
|
6241 | paginatedSelectAllActionMarkup
|
6242 | ) : null;
|
6243 | const cancelButtonClassName = styles.classNames(styles$46.Button, styles$46['Button-cancel']);
|
6244 | const cancelButton = React.createElement(
|
6245 | 'button',
|
6246 | { className: cancelButtonClassName
|
6247 |
|
6248 | , onClick: this.setSelectMode.bind(this, false) },
|
6249 | 'Cancel'
|
6250 | );
|
6251 | const numberOfPromotedActionsToRender = this.numberOfPromotedActionsToRender;
|
6252 | const allActionsPopover = this.hasActions ? React.createElement(
|
6253 | 'div',
|
6254 | { className: styles$46.Popover, ref: this.setMoreActionsNode },
|
6255 | React.createElement(
|
6256 | Popover$1,
|
6257 | { active: smallScreenPopoverVisible, activator: React.createElement(BulkActionButton, { disclosure: true, onAction: this.toggleSmallScreenPopover, content: intl.translate('Polaris.ResourceList.BulkActions.actionsActivatorLabel') }), onClose: this.toggleSmallScreenPopover },
|
6258 | React.createElement(ActionList$1, { items: promotedActions, sections: this.actionSections, onActionAnyItem: this.toggleSmallScreenPopover })
|
6259 | )
|
6260 | ) : null;
|
6261 | const promotedActionsMarkup = promotedActions && numberOfPromotedActionsToRender > 0 ? [...promotedActions].slice(0, numberOfPromotedActionsToRender).map((action, index) => React.createElement(BulkActionButton, Object.assign({}, action, { key: index, handleMeasurement: this.handleMeasurement }))) : null;
|
6262 | const rolledInPromotedActions = promotedActions && numberOfPromotedActionsToRender < promotedActions.length ? [...promotedActions].slice(numberOfPromotedActionsToRender) : [];
|
6263 | const activatorLabel = !promotedActions || promotedActions && numberOfPromotedActionsToRender === 0 && !measuring ? intl.translate('Polaris.ResourceList.BulkActions.actionsActivatorLabel') : intl.translate('Polaris.ResourceList.BulkActions.moreActionsActivatorLabel');
|
6264 | let combinedActions = [];
|
6265 | if (this.actionSections && rolledInPromotedActions.length > 0) {
|
6266 | combinedActions = [{ items: rolledInPromotedActions }, ...this.actionSections];
|
6267 | } else if (this.actionSections) {
|
6268 | combinedActions = this.actionSections;
|
6269 | } else if (rolledInPromotedActions.length > 0) {
|
6270 | combinedActions = [{ items: rolledInPromotedActions }];
|
6271 | }
|
6272 | const actionsPopover = this.actionSections || rolledInPromotedActions.length > 0 || measuring ? React.createElement(
|
6273 | 'div',
|
6274 | { className: styles$46.Popover, ref: this.setMoreActionsNode },
|
6275 | React.createElement(
|
6276 | Popover$1,
|
6277 | { active: largeScreenPopoverVisible, activator: React.createElement(BulkActionButton, { disclosure: true, onAction: this.toggleLargeScreenPopover, content: activatorLabel, disabled: disabled }), onClose: this.toggleLargeScreenPopover },
|
6278 | React.createElement(ActionList$1, { sections: combinedActions, onActionAnyItem: this.toggleLargeScreenPopover })
|
6279 | )
|
6280 | ) : null;
|
6281 | const checkableButtonProps = {
|
6282 | accessibilityLabel,
|
6283 | label,
|
6284 | selected,
|
6285 | selectMode,
|
6286 | onToggleAll,
|
6287 | measuring,
|
6288 | disabled
|
6289 | };
|
6290 | const smallScreenGroup = React.createElement(
|
6291 | reactTransitionGroup.Transition,
|
6292 | { timeout: 0, 'in': selectMode, key: 'smallGroup' },
|
6293 | status => {
|
6294 | const smallScreenGroupClassName = styles.classNames(styles$46.Group, styles$46['Group-smallScreen'], styles$46[`Group-${status}`]);
|
6295 | return React.createElement(
|
6296 | 'div',
|
6297 | { className: smallScreenGroupClassName },
|
6298 | React.createElement(
|
6299 | 'div',
|
6300 | { className: styles$46.ButtonGroup },
|
6301 | React.createElement(
|
6302 | reactTransitionGroup.CSSTransition,
|
6303 | { 'in': selectMode, timeout: Duration.Base, classNames: slideClasses, appear: true },
|
6304 | React.createElement(CheckableButton$2, checkableButtonProps)
|
6305 | ),
|
6306 | allActionsPopover,
|
6307 | cancelButton
|
6308 | ),
|
6309 | paginatedSelectAllMarkup
|
6310 | );
|
6311 | }
|
6312 | );
|
6313 | const largeScreenGroup = React.createElement(
|
6314 | reactTransitionGroup.Transition,
|
6315 | { timeout: 0, 'in': selectMode, key: 'largeGroup' },
|
6316 | status => {
|
6317 | const largeScreenGroupClassName = styles.classNames(styles$46.Group, styles$46['Group-largeScreen'], !measuring && styles$46[`Group-${status}`], measuring && styles$46['Group-measuring']);
|
6318 | return React.createElement(
|
6319 | 'div',
|
6320 | { className: largeScreenGroupClassName },
|
6321 | React.createElement(EventListener$1, { event: 'resize', handler: this.handleResize }),
|
6322 | React.createElement(
|
6323 | 'div',
|
6324 | { className: styles$46.ButtonGroup, ref: this.setLargeScreenButtonsNode },
|
6325 | React.createElement(CheckableButton$2, checkableButtonProps),
|
6326 | promotedActionsMarkup,
|
6327 | actionsPopover
|
6328 | ),
|
6329 | paginatedSelectAllMarkup
|
6330 | );
|
6331 | }
|
6332 | );
|
6333 | return React.createElement(
|
6334 | 'div',
|
6335 | { ref: this.setContainerNode },
|
6336 | smallScreenGroup,
|
6337 | largeScreenGroup
|
6338 | );
|
6339 | }
|
6340 | setLargeScreenButtonsNode(node) {
|
6341 | this.largeScreenButtonsNode = node;
|
6342 | }
|
6343 | setContainerNode(node) {
|
6344 | this.containerNode = node;
|
6345 | }
|
6346 | setMoreActionsNode(node) {
|
6347 | this.moreActionsNode = node;
|
6348 | }
|
6349 | setSelectMode(val) {
|
6350 | const onSelectModeToggle = this.props.onSelectModeToggle;
|
6351 |
|
6352 | if (onSelectModeToggle) {
|
6353 | onSelectModeToggle(val);
|
6354 | }
|
6355 | }
|
6356 | toggleSmallScreenPopover() {
|
6357 | this.setState(({ smallScreenPopoverVisible }) => ({
|
6358 | smallScreenPopoverVisible: !smallScreenPopoverVisible
|
6359 | }));
|
6360 | }
|
6361 | toggleLargeScreenPopover() {
|
6362 | this.setState(({ largeScreenPopoverVisible }) => ({
|
6363 | largeScreenPopoverVisible: !largeScreenPopoverVisible
|
6364 | }));
|
6365 | }
|
6366 | handleResize() {
|
6367 | var _state3 = this.state;
|
6368 | const smallScreenPopoverVisible = _state3.smallScreenPopoverVisible,
|
6369 | largeScreenPopoverVisible = _state3.largeScreenPopoverVisible;
|
6370 |
|
6371 | if (this.containerNode) {
|
6372 | const containerWidth = this.containerNode.getBoundingClientRect().width;
|
6373 | if (containerWidth > 0) {
|
6374 | this.setState({ containerWidth });
|
6375 | }
|
6376 | }
|
6377 | if (smallScreenPopoverVisible || largeScreenPopoverVisible) {
|
6378 | this.setState({
|
6379 | smallScreenPopoverVisible: false,
|
6380 | largeScreenPopoverVisible: false
|
6381 | });
|
6382 | }
|
6383 | }
|
6384 | handleMeasurement(width) {
|
6385 | const measuring = this.state.measuring;
|
6386 |
|
6387 | if (measuring) {
|
6388 | this.promotedActionsWidths.push(width);
|
6389 | }
|
6390 | }
|
6391 | }
|
6392 | tslib_1.__decorate([decorators.autobind], BulkActions$1.prototype, "setLargeScreenButtonsNode", null);
|
6393 | tslib_1.__decorate([decorators.autobind], BulkActions$1.prototype, "setContainerNode", null);
|
6394 | tslib_1.__decorate([decorators.autobind], BulkActions$1.prototype, "setMoreActionsNode", null);
|
6395 | tslib_1.__decorate([decorators.autobind], BulkActions$1.prototype, "setSelectMode", null);
|
6396 | tslib_1.__decorate([decorators.autobind], BulkActions$1.prototype, "toggleSmallScreenPopover", null);
|
6397 | tslib_1.__decorate([decorators.autobind], BulkActions$1.prototype, "toggleLargeScreenPopover", null);
|
6398 | tslib_1.__decorate([decorators.autobind, decorators.debounce(50, { trailing: true })], BulkActions$1.prototype, "handleResize", null);
|
6399 | tslib_1.__decorate([decorators.autobind], BulkActions$1.prototype, "handleMeasurement", null);
|
6400 | function instanceOfBulkActionListSectionArray(actions) {
|
6401 | const validList = actions.filter(action => {
|
6402 | return action.items;
|
6403 | });
|
6404 | return actions.length === validList.length;
|
6405 | }
|
6406 | function instanceOfBulkActionArray(actions) {
|
6407 | const validList = actions.filter(action => {
|
6408 | return !action.items;
|
6409 | });
|
6410 | return actions.length === validList.length;
|
6411 | }
|
6412 | var BulkActions$2 = withAppProvider()(BulkActions$1);
|
6413 |
|
6414 | const getUniqueID$7 = other.createUniqueIDFactory('portal-');
|
6415 | class Portal$1 extends React.PureComponent {
|
6416 | constructor() {
|
6417 | super(...arguments);
|
6418 | this.portalId = this.props.idPrefix !== '' ? `${this.props.idPrefix}-${getUniqueID$7()}` : getUniqueID$7();
|
6419 | }
|
6420 |
|
6421 | componentWillMount() {
|
6422 | if (target.isServer) {
|
6423 | return;
|
6424 | }
|
6425 | this.portalNode = document.createElement('div');
|
6426 | this.portalNode.setAttribute('data-portal-id', this.portalId);
|
6427 | document.body.appendChild(this.portalNode);
|
6428 | }
|
6429 | componentWillUnmount() {
|
6430 | if (target.isServer) {
|
6431 | return;
|
6432 | }
|
6433 | document.body.removeChild(this.portalNode);
|
6434 | }
|
6435 | render() {
|
6436 | if (target.isServer) {
|
6437 | return null;
|
6438 | }
|
6439 | return ReactDOM.createPortal(this.props.children, this.portalNode);
|
6440 | }
|
6441 | }
|
6442 | Portal$1.defaultProps = { idPrefix: '' };
|
6443 |
|
6444 | const contextTypes = {
|
6445 | scrollToPosition: PropTypes.func
|
6446 | };
|
6447 |
|
6448 | class ScrollTo$1 extends React.Component {
|
6449 | constructor() {
|
6450 | super(...arguments);
|
6451 | this.ref = React.createRef();
|
6452 | }
|
6453 | componentDidMount() {
|
6454 | const scrollToPosition = this.context.scrollToPosition;
|
6455 |
|
6456 | if (!scrollToPosition || !this.ref.current) {
|
6457 | return;
|
6458 | }
|
6459 | scrollToPosition(this.ref.current.offsetTop);
|
6460 | }
|
6461 | render() {
|
6462 | const getUniqueId = other.createUniqueIDFactory(`ScrollTo`);
|
6463 |
|
6464 | return React.createElement('a', { id: getUniqueId(), ref: this.ref });
|
6465 | }
|
6466 | }
|
6467 | ScrollTo$1.contextTypes = contextTypes;
|
6468 |
|
6469 | var styles$47 = {
|
6470 | "Scrollable": "p_b3",
|
6471 | "horizontal": "p_w0",
|
6472 | "vertical": "p_ag",
|
6473 | "hasTopShadow": "p_kg",
|
6474 | "hasBottomShadow": "p_fp",
|
6475 | };
|
6476 |
|
6477 | const MAX_SCROLL_DISTANCE = 100;
|
6478 | const DELTA_THRESHOLD = 0.2;
|
6479 | const DELTA_PERCENTAGE = 0.2;
|
6480 | const EVENTS_TO_LOCK = ['scroll', 'touchmove', 'wheel'];
|
6481 | const PREFERS_REDUCED_MOTION = prefersReducedMotion();
|
6482 | class Scrollable$1 extends React.Component {
|
6483 | constructor() {
|
6484 | super(...arguments);
|
6485 | this.state = {
|
6486 | topShadow: false,
|
6487 | bottomShadow: false,
|
6488 | scrollPosition: 0
|
6489 | };
|
6490 | }
|
6491 | static forNode(node) {
|
6492 | return dom.closest(node, scrollable.selector) || document;
|
6493 | }
|
6494 | getChildContext() {
|
6495 | return {
|
6496 | scrollToPosition: this.scrollToPosition
|
6497 | };
|
6498 | }
|
6499 | componentDidMount() {
|
6500 | const polaris = this.props.polaris;
|
6501 |
|
6502 | if (this.scrollArea == null) {
|
6503 | return;
|
6504 | }
|
6505 | polaris.stickyManager.setContainer(this.scrollArea);
|
6506 | events.addEventListener(this.scrollArea, 'scroll', () => {
|
6507 | window.requestAnimationFrame(this.handleScroll);
|
6508 | });
|
6509 | events.addEventListener(window, 'resize', this.handleResize);
|
6510 | window.requestAnimationFrame(() => {
|
6511 | this.handleScroll();
|
6512 | if (this.props.hint) {
|
6513 | this.scrollHint();
|
6514 | }
|
6515 | });
|
6516 | }
|
6517 | componentWillUnmount() {
|
6518 | const polaris = this.props.polaris;
|
6519 |
|
6520 | if (this.scrollArea == null) {
|
6521 | return;
|
6522 | }
|
6523 | events.removeEventListener(this.scrollArea, 'scroll', this.handleScroll);
|
6524 | events.removeEventListener(window, 'resize', this.handleResize);
|
6525 | polaris.stickyManager.removeScrollListener();
|
6526 | }
|
6527 | componentDidUpdate() {
|
6528 | const scrollPosition = this.state.scrollPosition;
|
6529 |
|
6530 | if (scrollPosition && this.scrollArea && scrollPosition > 0) {
|
6531 | this.scrollArea.scrollTop = scrollPosition;
|
6532 | }
|
6533 | }
|
6534 | render() {
|
6535 | var _state = this.state;
|
6536 | const topShadow = _state.topShadow,
|
6537 | bottomShadow = _state.bottomShadow;
|
6538 | const _a = this.props,
|
6539 | children = _a.children,
|
6540 | className = _a.className,
|
6541 | horizontal = _a.horizontal;var _a$vertical = _a.vertical;
|
6542 |
|
6543 | const vertical = _a$vertical === undefined ? true : _a$vertical,
|
6544 | shadow = _a.shadow,
|
6545 | hint = _a.hint,
|
6546 | rest = tslib_1.__rest(_a, ["children", "className", "horizontal", "vertical", "shadow", "hint"]);
|
6547 |
|
6548 | const finalClassName = styles.classNames(className, styles$47.Scrollable, vertical && styles$47.vertical, horizontal && styles$47.horizontal, topShadow && styles$47.hasTopShadow, bottomShadow && styles$47.hasBottomShadow);
|
6549 | return React.createElement(
|
6550 | 'div',
|
6551 | Object.assign({ className: finalClassName }, scrollable.props, rest, { ref: this.setScrollArea }),
|
6552 | children
|
6553 | );
|
6554 | }
|
6555 | setScrollArea(scrollArea) {
|
6556 | this.scrollArea = scrollArea;
|
6557 | }
|
6558 | handleScroll() {
|
6559 | const scrollArea = this.scrollArea;
|
6560 | const shadow = this.props.shadow;
|
6561 |
|
6562 | if (scrollArea == null) {
|
6563 | return;
|
6564 | }
|
6565 | const scrollTop = scrollArea.scrollTop,
|
6566 | clientHeight = scrollArea.clientHeight,
|
6567 | scrollHeight = scrollArea.scrollHeight;
|
6568 |
|
6569 | const shouldBottomShadow = Boolean(shadow && !(scrollTop + clientHeight >= scrollHeight));
|
6570 | const shouldTopShadow = Boolean(shadow && scrollTop > 0);
|
6571 | this.setState({
|
6572 | topShadow: shouldTopShadow,
|
6573 | bottomShadow: shouldBottomShadow,
|
6574 | scrollPosition: scrollTop
|
6575 | });
|
6576 | }
|
6577 | handleResize() {
|
6578 | this.handleScroll();
|
6579 | }
|
6580 | scrollHint() {
|
6581 | const scrollArea = this.scrollArea;
|
6582 |
|
6583 | if (scrollArea == null) {
|
6584 | return;
|
6585 | }
|
6586 | const clientHeight = scrollArea.clientHeight,
|
6587 | scrollHeight = scrollArea.scrollHeight;
|
6588 |
|
6589 | if (PREFERS_REDUCED_MOTION || this.state.scrollPosition > 0 || scrollHeight <= clientHeight) {
|
6590 | return;
|
6591 | }
|
6592 | const scrollDistance = scrollHeight - clientHeight;
|
6593 | this.toggleLock();
|
6594 | this.setState({
|
6595 | scrollPosition: scrollDistance > MAX_SCROLL_DISTANCE ? MAX_SCROLL_DISTANCE : scrollDistance
|
6596 | }, () => {
|
6597 | window.requestAnimationFrame(this.scrollStep);
|
6598 | });
|
6599 | }
|
6600 | scrollStep() {
|
6601 | this.setState(({ scrollPosition }) => {
|
6602 | const delta = scrollPosition * DELTA_PERCENTAGE;
|
6603 | return {
|
6604 | scrollPosition: delta < DELTA_THRESHOLD ? 0 : scrollPosition - delta
|
6605 | };
|
6606 | }, () => {
|
6607 | if (this.state.scrollPosition > 0) {
|
6608 | window.requestAnimationFrame(this.scrollStep);
|
6609 | } else {
|
6610 | this.toggleLock(false);
|
6611 | }
|
6612 | });
|
6613 | }
|
6614 | toggleLock(shouldLock = true) {
|
6615 | const scrollArea = this.scrollArea;
|
6616 |
|
6617 | if (scrollArea == null) {
|
6618 | return;
|
6619 | }
|
6620 | EVENTS_TO_LOCK.forEach(eventName => {
|
6621 | if (shouldLock) {
|
6622 | events.addEventListener(scrollArea, eventName, prevent);
|
6623 | } else {
|
6624 | events.removeEventListener(scrollArea, eventName, prevent);
|
6625 | }
|
6626 | });
|
6627 | }
|
6628 | scrollToPosition(scrollY) {
|
6629 | this.setState({ scrollPosition: scrollY });
|
6630 | }
|
6631 | }
|
6632 | Scrollable$1.childContextTypes = contextTypes;
|
6633 | Scrollable$1.ScrollTo = ScrollTo$1;
|
6634 | tslib_1.__decorate([decorators.autobind], Scrollable$1.prototype, "setScrollArea", null);
|
6635 | tslib_1.__decorate([decorators.autobind], Scrollable$1.prototype, "handleScroll", null);
|
6636 | tslib_1.__decorate([decorators.autobind, decorators.debounce(50, { trailing: true })], Scrollable$1.prototype, "handleResize", null);
|
6637 | tslib_1.__decorate([decorators.autobind], Scrollable$1.prototype, "scrollHint", null);
|
6638 | tslib_1.__decorate([decorators.autobind], Scrollable$1.prototype, "scrollStep", null);
|
6639 | tslib_1.__decorate([decorators.autobind], Scrollable$1.prototype, "scrollToPosition", null);
|
6640 | function prevent(evt) {
|
6641 | evt.preventDefault();
|
6642 | }
|
6643 | function prefersReducedMotion() {
|
6644 | try {
|
6645 | return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
6646 | } catch (err) {
|
6647 | return false;
|
6648 | }
|
6649 | }
|
6650 | var Scrollable$2 = withSticky()(Scrollable$1);
|
6651 |
|
6652 | var styles$48 = {
|
6653 | "Popover": "p_fr",
|
6654 | "fullWidth": "p_ur",
|
6655 | "Content": "p_ap",
|
6656 | "measuring": "p_xf",
|
6657 | "exiting": "p_lj",
|
6658 | "positionedAbove": "p_eg",
|
6659 | "Wrapper": "p_ia",
|
6660 | "Content-fullHeight": "p_g8",
|
6661 | "Pane": "p_rk",
|
6662 | "Pane-fixed": "p_w9",
|
6663 | "Section": "p_sk",
|
6664 | "FocusTracker": "p_qy",
|
6665 | };
|
6666 |
|
6667 | function Section$5({ children }) {
|
6668 | return React.createElement(
|
6669 | 'div',
|
6670 | { className: styles$48.Section },
|
6671 | children
|
6672 | );
|
6673 | }
|
6674 |
|
6675 | function Pane$1({ fixed, sectioned, children }) {
|
6676 | const className = styles.classNames(styles$48.Pane, fixed && styles$48['Pane-fixed']);
|
6677 | const content = sectioned ? reactUtilities.wrapWithComponent(children, Section$5) : children;
|
6678 | return fixed ? React.createElement(
|
6679 | 'div',
|
6680 | { className: className },
|
6681 | content
|
6682 | ) : React.createElement(
|
6683 | Scrollable$2,
|
6684 | { hint: true, shadow: true, className: className },
|
6685 | content
|
6686 | );
|
6687 | }
|
6688 |
|
6689 | class KeypressListener$1 extends React.Component {
|
6690 | componentDidMount() {
|
6691 | events.addEventListener(document, 'keyup', this.handleKeyEvent);
|
6692 | }
|
6693 | componentWillUnmount() {
|
6694 | events.removeEventListener(document, 'keyup', this.handleKeyEvent);
|
6695 | }
|
6696 | render() {
|
6697 | return null;
|
6698 | }
|
6699 | handleKeyEvent(event) {
|
6700 | var _props = this.props;
|
6701 | const keyCode = _props.keyCode,
|
6702 | handler = _props.handler;
|
6703 |
|
6704 | if (event.keyCode === keyCode) {
|
6705 | handler(event);
|
6706 | }
|
6707 | }
|
6708 | }
|
6709 | tslib_1.__decorate([decorators.autobind], KeypressListener$1.prototype, "handleKeyEvent", null);
|
6710 |
|
6711 | function calculateVerticalPosition(activatorRect, overlayRect, overlayMargins, scrollableContainerRect, containerRect, preferredPosition, fixed) {
|
6712 | const activatorTop = activatorRect.top;
|
6713 | const activatorBottom = activatorTop + activatorRect.height;
|
6714 | const spaceAbove = activatorRect.top;
|
6715 | const spaceBelow = containerRect.height - activatorRect.top - activatorRect.height;
|
6716 | const desiredHeight = overlayRect.height;
|
6717 | const verticalMargins = overlayMargins.activator + overlayMargins.container;
|
6718 | const minimumSpaceToScroll = overlayMargins.container;
|
6719 | const distanceToTopScroll = activatorRect.top - Math.max(scrollableContainerRect.top, 0);
|
6720 | const distanceToBottomScroll = containerRect.top + Math.min(containerRect.height, scrollableContainerRect.top + scrollableContainerRect.height) - (activatorRect.top + activatorRect.height);
|
6721 | const enoughSpaceFromTopScroll = distanceToTopScroll >= minimumSpaceToScroll;
|
6722 | const enoughSpaceFromBottomScroll = distanceToBottomScroll >= minimumSpaceToScroll;
|
6723 | const heightIfBelow = Math.min(spaceBelow, desiredHeight);
|
6724 | const heightIfAbove = Math.min(spaceAbove, desiredHeight);
|
6725 | const containerRectTop = fixed ? 0 : containerRect.top;
|
6726 | const positionIfAbove = {
|
6727 | height: heightIfAbove - verticalMargins,
|
6728 | top: activatorTop + containerRectTop - heightIfAbove,
|
6729 | positioning: 'above'
|
6730 | };
|
6731 | const positionIfBelow = {
|
6732 | height: heightIfBelow - verticalMargins,
|
6733 | top: activatorBottom + containerRectTop,
|
6734 | positioning: 'below'
|
6735 | };
|
6736 | if (preferredPosition === 'above') {
|
6737 | return (enoughSpaceFromTopScroll || distanceToTopScroll >= distanceToBottomScroll && !enoughSpaceFromBottomScroll) && (spaceAbove > desiredHeight || spaceAbove > spaceBelow) ? positionIfAbove : positionIfBelow;
|
6738 | }
|
6739 | if (preferredPosition === 'below') {
|
6740 | return (enoughSpaceFromBottomScroll || distanceToBottomScroll >= distanceToTopScroll && !enoughSpaceFromTopScroll) && (spaceBelow > desiredHeight || spaceBelow > spaceAbove) ? positionIfBelow : positionIfAbove;
|
6741 | }
|
6742 | if (enoughSpaceFromTopScroll && enoughSpaceFromBottomScroll) {
|
6743 | return spaceAbove > spaceBelow ? positionIfAbove : positionIfBelow;
|
6744 | }
|
6745 | return distanceToTopScroll > minimumSpaceToScroll ? positionIfAbove : positionIfBelow;
|
6746 | }
|
6747 | function calculateHorizontalPosition(activatorRect, overlayRect, containerRect, overlayMargins, preferredAlignment) {
|
6748 | const maximum = containerRect.width - overlayRect.width;
|
6749 | if (preferredAlignment === 'left') {
|
6750 | return Math.min(maximum, Math.max(0, activatorRect.left - overlayMargins.horizontal));
|
6751 | } else if (preferredAlignment === 'right') {
|
6752 | const activatorRight = activatorRect.left + activatorRect.width;
|
6753 | return Math.min(maximum, Math.max(0, activatorRight - overlayRect.width + overlayMargins.horizontal));
|
6754 | }
|
6755 | return Math.min(maximum, Math.max(0, activatorRect.center.x - overlayRect.width / 2));
|
6756 | }
|
6757 | function rectIsOutsideOfRect(inner, outer) {
|
6758 | const center = inner.center;
|
6759 |
|
6760 | return center.y < outer.top || center.y > outer.top + outer.height;
|
6761 | }
|
6762 |
|
6763 | var styles$49 = {
|
6764 | "PositionedOverlay": "p_gv",
|
6765 | "fixed": "p_gu",
|
6766 | "calculating": "p_vm",
|
6767 | };
|
6768 |
|
6769 | class PositionedOverlay$1 extends React.PureComponent {
|
6770 | constructor() {
|
6771 | super(...arguments);
|
6772 | this.state = {
|
6773 | measuring: true,
|
6774 | activatorRect: geometry.getRectForNode(this.props.activator),
|
6775 | left: 0,
|
6776 | top: 0,
|
6777 | height: 0,
|
6778 | width: null,
|
6779 | positioning: 'below',
|
6780 | zIndex: null,
|
6781 | outsideScrollableContainer: false,
|
6782 | lockPosition: false
|
6783 | };
|
6784 | this.overlay = null;
|
6785 | this.scrollableContainer = null;
|
6786 | }
|
6787 | componentDidMount() {
|
6788 | this.scrollableContainer = Scrollable$2.forNode(this.props.activator);
|
6789 | if (this.scrollableContainer && !this.props.fixed) {
|
6790 | this.scrollableContainer.addEventListener('scroll', this.handleMeasurement);
|
6791 | }
|
6792 | this.handleMeasurement();
|
6793 | }
|
6794 | componentWillUnmount() {
|
6795 | if (this.scrollableContainer && !this.props.fixed) {
|
6796 | this.scrollableContainer.removeEventListener('scroll', this.handleMeasurement);
|
6797 | }
|
6798 | }
|
6799 |
|
6800 | componentWillReceiveProps() {
|
6801 | this.handleMeasurement();
|
6802 | }
|
6803 | componentDidUpdate() {
|
6804 | var _state = this.state;
|
6805 | const outsideScrollableContainer = _state.outsideScrollableContainer,
|
6806 | top = _state.top;
|
6807 | var _props = this.props;
|
6808 | const onScrollOut = _props.onScrollOut,
|
6809 | active = _props.active;
|
6810 |
|
6811 | if (active && onScrollOut != null && top !== 0 && outsideScrollableContainer) {
|
6812 | onScrollOut();
|
6813 | }
|
6814 | }
|
6815 | render() {
|
6816 | var _state2 = this.state;
|
6817 | const left = _state2.left,
|
6818 | top = _state2.top,
|
6819 | zIndex = _state2.zIndex,
|
6820 | width = _state2.width;
|
6821 | var _props2 = this.props;
|
6822 | const render = _props2.render,
|
6823 | fixed = _props2.fixed;
|
6824 |
|
6825 | const style = {
|
6826 | top: top == null ? undefined : top,
|
6827 | left: left == null ? undefined : left,
|
6828 | width: width == null ? undefined : width,
|
6829 | zIndex: zIndex == null ? undefined : zIndex
|
6830 | };
|
6831 | const className = styles.classNames(styles$49.PositionedOverlay, fixed && styles$49.fixed);
|
6832 | return React.createElement(
|
6833 | 'div',
|
6834 | { className: className, style: style, ref: this.setOverlay },
|
6835 | React.createElement(EventListener$1, { event: 'resize', handler: this.handleMeasurement }),
|
6836 | render(this.overlayDetails())
|
6837 | );
|
6838 | }
|
6839 | overlayDetails() {
|
6840 | var _state3 = this.state;
|
6841 | const measuring = _state3.measuring,
|
6842 | left = _state3.left,
|
6843 | positioning = _state3.positioning,
|
6844 | height = _state3.height,
|
6845 | activatorRect = _state3.activatorRect;
|
6846 |
|
6847 | return {
|
6848 | measuring,
|
6849 | left,
|
6850 | desiredHeight: height,
|
6851 | positioning,
|
6852 | activatorRect
|
6853 | };
|
6854 | }
|
6855 | setOverlay(node) {
|
6856 | this.overlay = node;
|
6857 | }
|
6858 | handleMeasurement() {
|
6859 | var _state4 = this.state;
|
6860 | const lockPosition = _state4.lockPosition,
|
6861 | top = _state4.top;
|
6862 |
|
6863 | this.setState({
|
6864 | left: 0,
|
6865 | top: lockPosition ? top : 0,
|
6866 | height: 0,
|
6867 | positioning: 'below',
|
6868 | measuring: true
|
6869 | }, () => {
|
6870 | if (this.overlay == null || this.scrollableContainer == null) {
|
6871 | return;
|
6872 | }
|
6873 | var _props3 = this.props;
|
6874 | const activator = _props3.activator;
|
6875 | var _props3$preferredPosi = _props3.preferredPosition;
|
6876 | const preferredPosition = _props3$preferredPosi === undefined ? 'below' : _props3$preferredPosi;
|
6877 | var _props3$preferredAlig = _props3.preferredAlignment;
|
6878 | const preferredAlignment = _props3$preferredAlig === undefined ? 'center' : _props3$preferredAlig,
|
6879 | onScrollOut = _props3.onScrollOut,
|
6880 | fullWidth = _props3.fullWidth,
|
6881 | fixed = _props3.fixed;
|
6882 |
|
6883 | const activatorRect = geometry.getRectForNode(activator);
|
6884 | const currentOverlayRect = geometry.getRectForNode(this.overlay);
|
6885 | const scrollableElement = isDocument$1(this.scrollableContainer) ? document.body : this.scrollableContainer;
|
6886 | const scrollableContainerRect = geometry.getRectForNode(scrollableElement);
|
6887 | const overlayRect = fullWidth ? Object.assign({}, currentOverlayRect, { width: activatorRect.width }) : currentOverlayRect;
|
6888 |
|
6889 |
|
6890 | if (scrollableElement === document.body) {
|
6891 | scrollableContainerRect.height = document.body.scrollHeight;
|
6892 | }
|
6893 | const overlayMargins = this.overlay.firstElementChild ? getMarginsForNode(this.overlay.firstElementChild) : { activator: 0, container: 0, horizontal: 0 };
|
6894 | const containerRect = windowRect();
|
6895 | const zIndexForLayer = getZIndexForLayerFromNode(activator);
|
6896 | const zIndex = zIndexForLayer == null ? zIndexForLayer : zIndexForLayer + 1;
|
6897 | const verticalPosition = calculateVerticalPosition(activatorRect, overlayRect, overlayMargins, scrollableContainerRect, containerRect, preferredPosition, fixed);
|
6898 | const horizontalPosition = calculateHorizontalPosition(activatorRect, overlayRect, containerRect, overlayMargins, preferredAlignment);
|
6899 | this.setState({
|
6900 | measuring: false,
|
6901 | activatorRect: geometry.getRectForNode(activator),
|
6902 | left: horizontalPosition,
|
6903 | top: lockPosition ? top : verticalPosition.top,
|
6904 | lockPosition: Boolean(fixed),
|
6905 | height: verticalPosition.height || 0,
|
6906 | width: fullWidth ? overlayRect.width : null,
|
6907 | positioning: verticalPosition.positioning,
|
6908 | outsideScrollableContainer: onScrollOut != null && rectIsOutsideOfRect(activatorRect, intersectionWithViewport(scrollableContainerRect)),
|
6909 | zIndex
|
6910 | });
|
6911 | });
|
6912 | }
|
6913 | }
|
6914 | tslib_1.__decorate([decorators.autobind], PositionedOverlay$1.prototype, "overlayDetails", null);
|
6915 | tslib_1.__decorate([decorators.autobind], PositionedOverlay$1.prototype, "setOverlay", null);
|
6916 | tslib_1.__decorate([decorators.autobind], PositionedOverlay$1.prototype, "handleMeasurement", null);
|
6917 | function intersectionWithViewport(rect) {
|
6918 | const viewport = windowRect();
|
6919 | return new geometry.Rect({
|
6920 | top: Math.max(rect.top, 0),
|
6921 | left: Math.max(rect.left, 0),
|
6922 | height: Math.min(rect.height - rect.top + viewport.top, viewport.height, viewport.height - rect.top),
|
6923 | width: Math.min(rect.width - rect.left + viewport.left, viewport.width, viewport.width - rect.left)
|
6924 | });
|
6925 | }
|
6926 | function getMarginsForNode(node) {
|
6927 | const nodeStyles = window.getComputedStyle(node);
|
6928 | return {
|
6929 | activator: parseFloat(nodeStyles.marginTop || ''),
|
6930 | container: parseFloat(nodeStyles.marginBottom || ''),
|
6931 | horizontal: parseFloat(nodeStyles.marginLeft || '')
|
6932 | };
|
6933 | }
|
6934 | function getZIndexForLayerFromNode(node) {
|
6935 | const layerNode = dom.closest(node, layer.selector) || document.body;
|
6936 | const zIndex = layerNode === document.body ? 'auto' : parseInt(window.getComputedStyle(layerNode).zIndex || '0', 10);
|
6937 | return zIndex === 'auto' || isNaN(zIndex) ? null : zIndex;
|
6938 | }
|
6939 | function windowRect() {
|
6940 | return new geometry.Rect({
|
6941 | top: window.scrollY,
|
6942 | left: window.scrollX,
|
6943 | height: window.innerHeight,
|
6944 | width: window.innerWidth
|
6945 | });
|
6946 | }
|
6947 | function isDocument$1(node) {
|
6948 | return node === document;
|
6949 | }
|
6950 |
|
6951 | (function (CloseSource) {
|
6952 | CloseSource[CloseSource["Click"] = 0] = "Click";
|
6953 | CloseSource[CloseSource["EscapeKeypress"] = 1] = "EscapeKeypress";
|
6954 | CloseSource[CloseSource["FocusOut"] = 2] = "FocusOut";
|
6955 | CloseSource[CloseSource["ScrollOut"] = 3] = "ScrollOut";
|
6956 | })(exports.PopoverCloseSource || (exports.PopoverCloseSource = {}));
|
6957 | class PopoverOverlay$1 extends React.PureComponent {
|
6958 | constructor() {
|
6959 | super(...arguments);
|
6960 | this.contentNode = React.createRef();
|
6961 | this.transitionStatus = null;
|
6962 | }
|
6963 | componentDidMount() {
|
6964 | if (this.props.active) {
|
6965 | this.focusContent();
|
6966 | }
|
6967 | }
|
6968 | componentDidUpdate(oldProps) {
|
6969 | if (this.props.active && !oldProps.active) {
|
6970 | this.focusContent();
|
6971 | }
|
6972 | }
|
6973 | render() {
|
6974 | const active = this.props.active;
|
6975 |
|
6976 | return React.createElement(
|
6977 | reactTransitionGroup.Transition,
|
6978 | { 'in': active, timeout: Duration.Fast, mountOnEnter: true, unmountOnExit: true },
|
6979 | this.renderOverlay
|
6980 | );
|
6981 | }
|
6982 | focusContent() {
|
6983 | if (this.props.preventAutofocus) {
|
6984 | return;
|
6985 | }
|
6986 | if (this.contentNode == null) {
|
6987 | return;
|
6988 | }
|
6989 | fastdom.write(() => {
|
6990 | if (this.contentNode.current == null) {
|
6991 | return;
|
6992 | }
|
6993 | this.contentNode.current.focus();
|
6994 | });
|
6995 | }
|
6996 | renderOverlay(transitionStatus) {
|
6997 | var _props = this.props;
|
6998 | const active = _props.active,
|
6999 | activator = _props.activator,
|
7000 | fullWidth = _props.fullWidth;
|
7001 | var _props$preferredPosit = _props.preferredPosition;
|
7002 | const preferredPosition = _props$preferredPosit === undefined ? 'below' : _props$preferredPosit;
|
7003 | var _props$preferredAlign = _props.preferredAlignment;
|
7004 | const preferredAlignment = _props$preferredAlign === undefined ? 'center' : _props$preferredAlign,
|
7005 | fixed = _props.fixed;
|
7006 |
|
7007 | return React.createElement(PositionedOverlay$1, { fullWidth: fullWidth, active: active, activator: activator, preferredPosition: preferredPosition, preferredAlignment: preferredAlignment
|
7008 |
|
7009 | , render: this.renderPopover.bind(this, transitionStatus), fixed: fixed, onScrollOut: this.handleScrollOut });
|
7010 | }
|
7011 | renderPopover(transitionStatus, overlayDetails) {
|
7012 | const measuring = overlayDetails.measuring,
|
7013 | desiredHeight = overlayDetails.desiredHeight,
|
7014 | positioning = overlayDetails.positioning;
|
7015 | var _props2 = this.props;
|
7016 | const id = _props2.id,
|
7017 | children = _props2.children,
|
7018 | sectioned = _props2.sectioned,
|
7019 | fullWidth = _props2.fullWidth,
|
7020 | fullHeight = _props2.fullHeight;
|
7021 |
|
7022 | const className = styles.classNames(styles$48.Popover, transitionStatus && animationVariations(transitionStatus), positioning === 'above' && styles$48.positionedAbove, fullWidth && styles$48.fullWidth, measuring && styles$48.measuring);
|
7023 | this.transitionStatus = transitionStatus;
|
7024 | const contentStyles = measuring ? undefined : { height: desiredHeight };
|
7025 | const contentClassNames = styles.classNames(styles$48.Content, fullHeight && styles$48['Content-fullHeight']);
|
7026 | const content = React.createElement(
|
7027 | 'div',
|
7028 | { id: id, tabIndex: -1, className: contentClassNames, style: contentStyles, ref: this.contentNode },
|
7029 | renderPopoverContent(children, { sectioned })
|
7030 | );
|
7031 | return React.createElement(
|
7032 | 'div',
|
7033 | Object.assign({ className: className }, overlay.props),
|
7034 | React.createElement(EventListener$1, { event: 'click', handler: this.handleClick }),
|
7035 | React.createElement(EventListener$1, { event: 'touchstart', handler: this.handleClick }),
|
7036 | React.createElement(KeypressListener$1, { keyCode: exports.Keys.ESCAPE, handler: this.handleEscape }),
|
7037 | React.createElement('div', { className: styles$48.FocusTracker
|
7038 |
|
7039 | , tabIndex: 0, onFocus: this.handleFocusFirstItem }),
|
7040 | React.createElement(
|
7041 | 'div',
|
7042 | { className: styles$48.Wrapper },
|
7043 | content
|
7044 | ),
|
7045 | React.createElement('div', { className: styles$48.FocusTracker
|
7046 |
|
7047 | , tabIndex: 0, onFocus: this.handleFocusLastItem })
|
7048 | );
|
7049 | }
|
7050 | handleClick(event) {
|
7051 | const target$$1 = event.target;
|
7052 | const contentNode = this.contentNode;
|
7053 | var _props3 = this.props;
|
7054 | const activator = _props3.activator,
|
7055 | onClose = _props3.onClose;
|
7056 |
|
7057 | const isDescendant = contentNode.current != null && dom.nodeContainsDescendant(contentNode.current, target$$1);
|
7058 | const isActivatorDescendant = dom.nodeContainsDescendant(activator, target$$1);
|
7059 | if (isDescendant || isActivatorDescendant || this.transitionStatus !== 'entered') {
|
7060 | return;
|
7061 | }
|
7062 | onClose(exports.PopoverCloseSource.Click);
|
7063 | }
|
7064 | handleScrollOut() {
|
7065 | this.props.onClose(exports.PopoverCloseSource.ScrollOut);
|
7066 | }
|
7067 | handleEscape() {
|
7068 | this.props.onClose(exports.PopoverCloseSource.EscapeKeypress);
|
7069 | }
|
7070 | handleFocusFirstItem() {
|
7071 | this.props.onClose(exports.PopoverCloseSource.FocusOut);
|
7072 | }
|
7073 | handleFocusLastItem() {
|
7074 | this.props.onClose(exports.PopoverCloseSource.FocusOut);
|
7075 | }
|
7076 | }
|
7077 | tslib_1.__decorate([decorators.autobind], PopoverOverlay$1.prototype, "renderOverlay", null);
|
7078 | tslib_1.__decorate([decorators.autobind], PopoverOverlay$1.prototype, "renderPopover", null);
|
7079 | tslib_1.__decorate([decorators.autobind], PopoverOverlay$1.prototype, "handleClick", null);
|
7080 | tslib_1.__decorate([decorators.autobind], PopoverOverlay$1.prototype, "handleScrollOut", null);
|
7081 | tslib_1.__decorate([decorators.autobind], PopoverOverlay$1.prototype, "handleEscape", null);
|
7082 | tslib_1.__decorate([decorators.autobind], PopoverOverlay$1.prototype, "handleFocusFirstItem", null);
|
7083 | tslib_1.__decorate([decorators.autobind], PopoverOverlay$1.prototype, "handleFocusLastItem", null);
|
7084 | function renderPopoverContent(children, props) {
|
7085 | const childrenArray = React.Children.toArray(children);
|
7086 | if (reactUtilities.isElementOfType(childrenArray[0], Pane$1)) {
|
7087 | return childrenArray;
|
7088 | }
|
7089 | return reactUtilities.wrapWithComponent(childrenArray, Pane$1, props);
|
7090 | }
|
7091 | function animationVariations(status) {
|
7092 | switch (status) {
|
7093 | case 'exiting':
|
7094 | return styles$48.exiting;
|
7095 | default:
|
7096 | return null;
|
7097 | }
|
7098 | }
|
7099 |
|
7100 | const getUniqueID$6 = other.createUniqueIDFactory('Popover');
|
7101 | class Popover$1 extends React.PureComponent {
|
7102 | constructor() {
|
7103 | super(...arguments);
|
7104 | this.state = {
|
7105 | activatorNode: null
|
7106 | };
|
7107 | this.activatorContainer = null;
|
7108 | this.id = getUniqueID$6();
|
7109 | }
|
7110 | componentDidMount() {
|
7111 | this.setAccessibilityAttributes();
|
7112 | }
|
7113 | componentDidUpdate() {
|
7114 | if (this.activatorContainer && this.state.activatorNode && !this.activatorContainer.contains(this.state.activatorNode)) {
|
7115 | this.setActivator(this.activatorContainer);
|
7116 | }
|
7117 | this.setAccessibilityAttributes();
|
7118 | }
|
7119 | render() {
|
7120 | const _a = this.props;var _a$activatorWrapper = _a.activatorWrapper;
|
7121 | const WrapperComponent = _a$activatorWrapper === undefined ? 'div' : _a$activatorWrapper,
|
7122 | children = _a.children,
|
7123 | onClose = _a.onClose,
|
7124 | activator = _a.activator,
|
7125 | activatorWrapper = _a.activatorWrapper,
|
7126 | active = _a.active,
|
7127 | fixed = _a.fixed;
|
7128 | var _a$preventAutofocus = _a.preventAutofocus;
|
7129 | const preventAutofocus = _a$preventAutofocus === undefined ? true : _a$preventAutofocus,
|
7130 | rest = tslib_1.__rest(_a, ["activatorWrapper", "children", "onClose", "activator", "activatorWrapper", "active", "fixed", "preventAutofocus"]);const activatorNode = this.state.activatorNode;
|
7131 |
|
7132 | const portal = activatorNode ? React.createElement(
|
7133 | Portal$1,
|
7134 | { idPrefix: 'popover' },
|
7135 | React.createElement(
|
7136 | PopoverOverlay$1,
|
7137 | Object.assign({ id: this.id, activator: activatorNode, onClose: this.handleClose, active: active, fixed: fixed, preventAutofocus: preventAutofocus }, rest),
|
7138 | children
|
7139 | )
|
7140 | ) : null;
|
7141 | return React.createElement(
|
7142 | WrapperComponent,
|
7143 | { ref: this.setActivator },
|
7144 | React.Children.only(this.props.activator),
|
7145 | portal
|
7146 | );
|
7147 | }
|
7148 | setAccessibilityAttributes() {
|
7149 | const id = this.id,
|
7150 | activatorContainer = this.activatorContainer;
|
7151 |
|
7152 | if (activatorContainer == null) {
|
7153 | return;
|
7154 | }
|
7155 | const firstFocusable = focus.findFirstFocusableNode(activatorContainer);
|
7156 | const focusableActivator = firstFocusable || activatorContainer;
|
7157 | focusableActivator.tabIndex = focusableActivator.tabIndex || 0;
|
7158 | focusableActivator.setAttribute('aria-controls', id);
|
7159 | focusableActivator.setAttribute('aria-owns', id);
|
7160 | focusableActivator.setAttribute('aria-haspopup', 'true');
|
7161 | focusableActivator.setAttribute('aria-expanded', String(this.props.active));
|
7162 | }
|
7163 | handleClose(source) {
|
7164 | this.props.onClose(source);
|
7165 | if (this.activatorContainer == null) {
|
7166 | return;
|
7167 | }
|
7168 | if (source === exports.PopoverCloseSource.FocusOut || source === exports.PopoverCloseSource.EscapeKeypress) {
|
7169 | focus.focusFirstFocusableNode(this.activatorContainer, false);
|
7170 | }
|
7171 | }
|
7172 | setActivator(node) {
|
7173 | if (node == null) {
|
7174 | this.activatorContainer = null;
|
7175 | this.setState({ activatorNode: null });
|
7176 | return;
|
7177 | }
|
7178 | this.setState({ activatorNode: node.firstElementChild });
|
7179 | this.activatorContainer = node;
|
7180 | }
|
7181 | }
|
7182 | Popover$1.Pane = Pane$1;
|
7183 | Popover$1.Section = Section$5;
|
7184 | tslib_1.__decorate([decorators.autobind], Popover$1.prototype, "handleClose", null);
|
7185 | tslib_1.__decorate([decorators.autobind], Popover$1.prototype, "setActivator", null);
|
7186 |
|
7187 | const SELECT_ALL_ITEMS = 'All';
|
7188 |
|
7189 | var styles$50 = {
|
7190 | "CheckboxWrapper": "p_vq",
|
7191 | "Item": "p_ja",
|
7192 | "persistActions": "p_x8",
|
7193 | "Actions": "p_lp",
|
7194 | "selected": "p_k4",
|
7195 | "focused": "p_l3",
|
7196 | "focusedInner": "p_u5",
|
7197 | "Link": "p_y8",
|
7198 | "Button": "p_lz",
|
7199 | "Container": "p_th",
|
7200 | "Owned": "p_pu",
|
7201 | "Handle": "p_ab",
|
7202 | "selectable": "p_n1",
|
7203 | "selectMode": "p_gw",
|
7204 | "Media": "p_f8",
|
7205 | "Content": "p_ba",
|
7206 | "Disclosure": "p_di",
|
7207 | };
|
7208 |
|
7209 | const intl = new Intl(undefined);
|
7210 |
|
7211 | var _React$createContext$2 = React.createContext({
|
7212 | selectMode: false,
|
7213 | resourceName: {
|
7214 | singular: intl.translate('Polaris.ResourceList.defaultItemSingular'),
|
7215 | plural: intl.translate('Polaris.ResourceList.defaultItemPlural')
|
7216 | }
|
7217 | });
|
7218 |
|
7219 | const Provider$2 = _React$createContext$2.Provider;
|
7220 | const Consumer$2 = _React$createContext$2.Consumer;
|
7221 |
|
7222 | const getUniqueCheckboxID = other.createUniqueIDFactory('ResourceListItemCheckbox');
|
7223 | class Item$9 extends React.PureComponent {
|
7224 | constructor() {
|
7225 | super(...arguments);
|
7226 | this.state = {
|
7227 | actionsMenuVisible: false,
|
7228 | focused: false,
|
7229 | focusedInner: false
|
7230 | };
|
7231 | this.node = null;
|
7232 | this.checkboxId = getUniqueCheckboxID();
|
7233 | }
|
7234 | render() {
|
7235 | var _props = this.props;
|
7236 | const children = _props.children,
|
7237 | url = _props.url,
|
7238 | media = _props.media,
|
7239 | shortcutActions = _props.shortcutActions,
|
7240 | ariaControls = _props.ariaControls,
|
7241 | ariaExpanded = _props.ariaExpanded;
|
7242 | var _props$persistActions = _props.persistActions;
|
7243 | const persistActions = _props$persistActions === undefined ? false : _props$persistActions,
|
7244 | intl = _props.polaris.intl,
|
7245 | accessibilityLabel = _props.accessibilityLabel;
|
7246 | var _props$context = _props.context;
|
7247 | const selectable = _props$context.selectable,
|
7248 | selectMode = _props$context.selectMode,
|
7249 | loading = _props$context.loading;
|
7250 | var _state = this.state;
|
7251 | const actionsMenuVisible = _state.actionsMenuVisible,
|
7252 | focused = _state.focused,
|
7253 | focusedInner = _state.focusedInner;
|
7254 |
|
7255 | const selected = this.isSelected();
|
7256 |
|
7257 | let ownedMarkup = null;
|
7258 | let handleMarkup = null;
|
7259 | const mediaMarkup = media ? React.createElement(
|
7260 | 'div',
|
7261 | { className: styles$50.Media },
|
7262 | media
|
7263 | ) : null;
|
7264 | const checkboxAccessibilityLabel = accessibilityLabel || intl.translate('Polaris.Common.checkbox');
|
7265 | if (selectable) {
|
7266 | const label = selected ? intl.translate('Polaris.ResourceList.Item.deselectItem', {
|
7267 | accessibilityLabel: checkboxAccessibilityLabel
|
7268 | }) : intl.translate('Polaris.ResourceList.Item.selectItem', {
|
7269 | accessibilityLabel: checkboxAccessibilityLabel
|
7270 | });
|
7271 | handleMarkup = React.createElement(
|
7272 | 'div',
|
7273 | { className: styles$50.Handle, onClick: this.handleLargerSelectionArea },
|
7274 | React.createElement(
|
7275 | 'div',
|
7276 | { onClick: stopPropagation, className: styles$50.CheckboxWrapper },
|
7277 | React.createElement(Checkbox$2, { id: this.checkboxId, label: label, labelHidden: true, onChange: this.handleSelection, checked: selected, disabled: loading })
|
7278 | )
|
7279 | );
|
7280 | }
|
7281 | if (media || selectable) {
|
7282 | ownedMarkup = React.createElement(
|
7283 | 'div',
|
7284 | { className: styles$50.Owned },
|
7285 | handleMarkup,
|
7286 | mediaMarkup
|
7287 | );
|
7288 | }
|
7289 | const className = styles.classNames(styles$50.Item, focused && styles$50.focused, selectable && styles$50.selectable, selected && styles$50.selected, selectMode && styles$50.selectMode, persistActions && styles$50.persistActions, focusedInner && styles$50.focusedInner);
|
7290 | let actionsMarkup = null;
|
7291 | let disclosureMarkup = null;
|
7292 | if (shortcutActions) {
|
7293 | if (persistActions) {
|
7294 | actionsMarkup = React.createElement(
|
7295 | 'div',
|
7296 | { className: styles$50.Actions, onClick: stopPropagation },
|
7297 | React.createElement(
|
7298 | ButtonGroup$1,
|
7299 | null,
|
7300 | buttonsFrom(shortcutActions, { size: 'slim', plain: true })
|
7301 | )
|
7302 | );
|
7303 | disclosureMarkup = React.createElement(
|
7304 | 'div',
|
7305 | { className: styles$50.Disclosure, onClick: stopPropagation },
|
7306 | React.createElement(
|
7307 | Popover$1,
|
7308 | { activator: React.createElement(Button$2, { 'aria-label': intl.translate('Polaris.ResourceList.Item.actionsDropdown'), onClick: this.handleActionsClick, plain: true, icon: 'horizontalDots' }), onClose: this.handleCloseRequest, active: actionsMenuVisible },
|
7309 | React.createElement(ActionList$1, { items: shortcutActions })
|
7310 | )
|
7311 | );
|
7312 | } else {
|
7313 | actionsMarkup = React.createElement(
|
7314 | 'div',
|
7315 | { className: styles$50.Actions, onClick: stopPropagation },
|
7316 | React.createElement(
|
7317 | ButtonGroup$1,
|
7318 | { segmented: true },
|
7319 | buttonsFrom(shortcutActions, { size: 'slim' })
|
7320 | )
|
7321 | );
|
7322 | }
|
7323 | }
|
7324 | const content = children ? React.createElement(
|
7325 | 'div',
|
7326 | { className: styles$50.Content },
|
7327 | children
|
7328 | ) : null;
|
7329 | const containerMarkup = React.createElement(
|
7330 | 'div',
|
7331 | { className: styles$50.Container, id: this.props.id },
|
7332 | ownedMarkup,
|
7333 | content,
|
7334 | actionsMarkup,
|
7335 | disclosureMarkup
|
7336 | );
|
7337 | const accessibleMarkup = url ? React.createElement(UnstyledLink$2, { 'aria-describedby': this.props.id, 'aria-label': accessibilityLabel, className: styles$50.Link, url: url, onFocus: this.handleAnchorFocus, onBlur: this.handleFocusedBlur }) : React.createElement('button', { className: styles$50.Button, 'aria-label': accessibilityLabel, 'aria-controls': ariaControls, 'aria-expanded': ariaExpanded, onClick: this.handleClick, onFocus: this.handleAnchorFocus, onBlur: this.handleFocusedBlur });
|
7338 | return React.createElement(
|
7339 | 'div',
|
7340 | { ref: this.setNode, className: className, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, onKeyUp: this.handleKeypress },
|
7341 | accessibleMarkup,
|
7342 | containerMarkup
|
7343 | );
|
7344 | }
|
7345 | setNode(node) {
|
7346 | this.node = node;
|
7347 | }
|
7348 | handleAnchorFocus() {
|
7349 | this.setState({ focused: true, focusedInner: false });
|
7350 | }
|
7351 | handleFocusedBlur() {
|
7352 | this.setState({ focused: true, focusedInner: true });
|
7353 | }
|
7354 | handleFocus() {
|
7355 | this.setState({ focused: true });
|
7356 | }
|
7357 | handleBlur(event) {
|
7358 | const isInside = this.compareEventNode(event);
|
7359 | if (this.node == null || !this.node.contains(event.relatedTarget)) {
|
7360 | this.setState({ focused: false });
|
7361 | } else if (isInside) {
|
7362 | this.setState({ focusedInner: true });
|
7363 | }
|
7364 | }
|
7365 | handleMouseDown() {
|
7366 | this.setState({ focusedInner: true });
|
7367 | }
|
7368 | handleLargerSelectionArea(event) {
|
7369 | stopPropagation(event);
|
7370 | this.handleSelection(!this.isSelected());
|
7371 | }
|
7372 | handleSelection(value) {
|
7373 | var _props2 = this.props;
|
7374 | const id = _props2.id,
|
7375 | onSelectionChange = _props2.context.onSelectionChange;
|
7376 |
|
7377 | if (id == null || onSelectionChange == null) {
|
7378 | return;
|
7379 | }
|
7380 | this.setState({ focused: true, focusedInner: true });
|
7381 | onSelectionChange(value, id);
|
7382 | }
|
7383 | handleClick(event) {
|
7384 | var _props3 = this.props;
|
7385 | const id = _props3.id,
|
7386 | onClick = _props3.onClick,
|
7387 | url = _props3.url,
|
7388 | selectMode = _props3.context.selectMode;
|
7389 |
|
7390 | const anchor = this.node && this.node.querySelector('a');
|
7391 | if (selectMode) {
|
7392 | this.handleLargerSelectionArea(event);
|
7393 | return;
|
7394 | }
|
7395 | if (anchor === event.target) {
|
7396 | return;
|
7397 | }
|
7398 | if (onClick) {
|
7399 | onClick(id);
|
7400 | }
|
7401 | if (url && anchor) {
|
7402 | anchor.click();
|
7403 | }
|
7404 | }
|
7405 | handleKeypress(event) {
|
7406 | var _props4 = this.props,
|
7407 | _props4$onClick = _props4.onClick;
|
7408 | const onClick = _props4$onClick === undefined ? other.noop : _props4$onClick,
|
7409 | selectMode = _props4.context.selectMode;
|
7410 | const key = event.key;
|
7411 |
|
7412 | if (key === 'Enter' && !selectMode) {
|
7413 | onClick();
|
7414 | }
|
7415 | }
|
7416 | handleActionsClick() {
|
7417 | this.setState(({ actionsMenuVisible }) => ({
|
7418 | actionsMenuVisible: !actionsMenuVisible
|
7419 | }));
|
7420 | }
|
7421 | handleCloseRequest() {
|
7422 | this.setState({ actionsMenuVisible: false });
|
7423 | }
|
7424 | isSelected() {
|
7425 | var _props5 = this.props;
|
7426 | const id = _props5.id,
|
7427 | selectedItems = _props5.context.selectedItems;
|
7428 |
|
7429 | return selectedItems && (Array.isArray(selectedItems) && selectedItems.includes(id) || selectedItems === SELECT_ALL_ITEMS);
|
7430 | }
|
7431 | compareEventNode(event) {
|
7432 | return this.props.onClick ? event.target === this.node : event.target.tagName.toLowerCase() === 'a';
|
7433 | }
|
7434 | }
|
7435 | tslib_1.__decorate([decorators.autobind], Item$9.prototype, "setNode", null);
|
7436 | tslib_1.__decorate([decorators.autobind], Item$9.prototype, "handleAnchorFocus", null);
|
7437 | tslib_1.__decorate([decorators.autobind], Item$9.prototype, "handleFocusedBlur", null);
|
7438 | tslib_1.__decorate([decorators.autobind], Item$9.prototype, "handleFocus", null);
|
7439 | tslib_1.__decorate([decorators.autobind], Item$9.prototype, "handleBlur", null);
|
7440 | tslib_1.__decorate([decorators.autobind], Item$9.prototype, "handleMouseDown", null);
|
7441 | tslib_1.__decorate([decorators.autobind], Item$9.prototype, "handleLargerSelectionArea", null);
|
7442 | tslib_1.__decorate([decorators.autobind], Item$9.prototype, "handleSelection", null);
|
7443 | tslib_1.__decorate([decorators.autobind], Item$9.prototype, "handleClick", null);
|
7444 | tslib_1.__decorate([decorators.autobind], Item$9.prototype, "handleKeypress", null);
|
7445 | tslib_1.__decorate([decorators.autobind], Item$9.prototype, "handleActionsClick", null);
|
7446 | tslib_1.__decorate([decorators.autobind], Item$9.prototype, "handleCloseRequest", null);
|
7447 | function stopPropagation(event) {
|
7448 | event.stopPropagation();
|
7449 | }
|
7450 | var Item$10 = compose(withContext$1(Consumer$2), withAppProvider())(Item$9);
|
7451 |
|
7452 | var styles$51 = {
|
7453 | "FiltersWrapper": "p_rf",
|
7454 | "ResourceList": "p_ij",
|
7455 | "HeaderOuterWrapper": "p_qh",
|
7456 | "HeaderWrapper-disabled": "p_ut",
|
7457 | "HeaderWrapper-overlay": "p_rz",
|
7458 | "HeaderWrapper": "p_nt",
|
7459 | "HeaderWrapper-isSticky": "p_q2",
|
7460 | "HeaderContentWrapper": "p_k5",
|
7461 | "HeaderWrapper-inSelectMode": "p_vi",
|
7462 | "SortWrapper": "p_jh",
|
7463 | "HeaderWrapper-hasSelect": "p_vr",
|
7464 | "HeaderWrapper-hasSort": "p_na",
|
7465 | "SortLabel": "p_eo",
|
7466 | "ItemCountTextWrapper": "p_gs",
|
7467 | "BulkActionsWrapper": "p_pp",
|
7468 | "CheckableButtonWrapper": "p_j9",
|
7469 | "SelectButtonWrapper": "p_r1",
|
7470 | "EmptySearchResultWrapper": "p_es",
|
7471 | "ResourceListWrapper": "p_y5",
|
7472 | "ItemWrapper": "p_f0",
|
7473 | "SpinnerContainer": "p_k0",
|
7474 | "LoadingOverlay": "p_c7",
|
7475 | "DisabledPointerEvents": "p_kh",
|
7476 | };
|
7477 |
|
7478 | const SMALL_SCREEN_WIDTH = 458;
|
7479 | const SMALL_SPINNER_HEIGHT = 28;
|
7480 | const LARGE_SPINNER_HEIGHT = 45;
|
7481 | const getUniqueID$4 = other.createUniqueIDFactory('Select');
|
7482 | class ResourceList$1 extends React.Component {
|
7483 | constructor(props) {
|
7484 | super(props);
|
7485 | this.state = {
|
7486 | selectMode: false,
|
7487 | loadingPosition: 0,
|
7488 | listNode: null
|
7489 | };
|
7490 | this.listRef = React.createRef();
|
7491 | const intl = props.polaris.intl;
|
7492 |
|
7493 | this.defaultResourceName = {
|
7494 | singular: intl.translate('Polaris.ResourceList.defaultItemSingular'),
|
7495 | plural: intl.translate('Polaris.ResourceList.defaultItemPlural')
|
7496 | };
|
7497 | }
|
7498 | get selectable() {
|
7499 | var _props = this.props;
|
7500 | const promotedBulkActions = _props.promotedBulkActions,
|
7501 | bulkActions = _props.bulkActions;
|
7502 |
|
7503 | return Boolean(promotedBulkActions && promotedBulkActions.length > 0 || bulkActions && bulkActions.length > 0);
|
7504 | }
|
7505 | get bulkSelectState() {
|
7506 | var _props2 = this.props;
|
7507 | const selectedItems = _props2.selectedItems,
|
7508 | items = _props2.items;
|
7509 |
|
7510 | let selectState = 'indeterminate';
|
7511 | if (!selectedItems || Array.isArray(selectedItems) && selectedItems.length === 0) {
|
7512 | selectState = false;
|
7513 | } else if (selectedItems === SELECT_ALL_ITEMS || Array.isArray(selectedItems) && selectedItems.length === items.length) {
|
7514 | selectState = true;
|
7515 | }
|
7516 | return selectState;
|
7517 | }
|
7518 | get itemCountText() {
|
7519 | var _props3 = this.props,
|
7520 | _props3$resourceName = _props3.resourceName;
|
7521 | const resourceName = _props3$resourceName === undefined ? this.defaultResourceName : _props3$resourceName,
|
7522 | items = _props3.items,
|
7523 | intl = _props3.polaris.intl;
|
7524 |
|
7525 | const itemsCount = items.length;
|
7526 | const resource = itemsCount === 1 ? resourceName.singular : resourceName.plural;
|
7527 | return intl.translate('Polaris.ResourceList.showing', {
|
7528 | itemsCount,
|
7529 | resource
|
7530 | });
|
7531 | }
|
7532 | get bulkActionsLabel() {
|
7533 | var _props4 = this.props,
|
7534 | _props4$selectedItems = _props4.selectedItems;
|
7535 | const selectedItems = _props4$selectedItems === undefined ? [] : _props4$selectedItems,
|
7536 | items = _props4.items,
|
7537 | intl = _props4.polaris.intl;
|
7538 |
|
7539 | const selectedItemsCount = selectedItems === SELECT_ALL_ITEMS ? `${items.length}+` : selectedItems.length;
|
7540 | return intl.translate('Polaris.ResourceList.selected', {
|
7541 | selectedItemsCount
|
7542 | });
|
7543 | }
|
7544 | get bulkActionsAccessibilityLabel() {
|
7545 | var _props5 = this.props,
|
7546 | _props5$resourceName = _props5.resourceName;
|
7547 | const resourceName = _props5$resourceName === undefined ? this.defaultResourceName : _props5$resourceName;
|
7548 | var _props5$selectedItems = _props5.selectedItems;
|
7549 | const selectedItems = _props5$selectedItems === undefined ? [] : _props5$selectedItems,
|
7550 | items = _props5.items,
|
7551 | intl = _props5.polaris.intl;
|
7552 |
|
7553 | const selectedItemsCount = selectedItems.length;
|
7554 | const totalItemsCount = items.length;
|
7555 | const allSelected = selectedItemsCount === totalItemsCount;
|
7556 | if (totalItemsCount === 1 && allSelected) {
|
7557 | return intl.translate('Polaris.ResourceList.a11yCheckboxDeselectAllSingle', { resourceNameSingular: resourceName.singular });
|
7558 | } else if (totalItemsCount === 1) {
|
7559 | return intl.translate('Polaris.ResourceList.a11yCheckboxSelectAllSingle', {
|
7560 | resourceNameSingular: resourceName.singular
|
7561 | });
|
7562 | } else if (allSelected) {
|
7563 | return intl.translate('Polaris.ResourceList.a11yCheckboxDeselectAllMultiple', {
|
7564 | itemsLength: items.length,
|
7565 | resourceNamePlural: resourceName.plural
|
7566 | });
|
7567 | } else {
|
7568 | return intl.translate('Polaris.ResourceList.a11yCheckboxSelectAllMultiple', {
|
7569 | itemsLength: items.length,
|
7570 | resourceNamePlural: resourceName.plural
|
7571 | });
|
7572 | }
|
7573 | }
|
7574 | get paginatedSelectAllText() {
|
7575 | var _props6 = this.props;
|
7576 | const hasMoreItems = _props6.hasMoreItems,
|
7577 | selectedItems = _props6.selectedItems,
|
7578 | items = _props6.items;
|
7579 | var _props6$resourceName = _props6.resourceName;
|
7580 | const resourceName = _props6$resourceName === undefined ? this.defaultResourceName : _props6$resourceName,
|
7581 | intl = _props6.polaris.intl;
|
7582 |
|
7583 | if (!this.selectable || !hasMoreItems) {
|
7584 | return;
|
7585 | }
|
7586 | if (selectedItems === SELECT_ALL_ITEMS) {
|
7587 | return intl.translate('Polaris.ResourceList.allItemsSelected', {
|
7588 | itemsLength: items.length,
|
7589 | resourceNamePlural: resourceName.plural
|
7590 | });
|
7591 | }
|
7592 | }
|
7593 | get paginatedSelectAllAction() {
|
7594 | var _props7 = this.props;
|
7595 | const hasMoreItems = _props7.hasMoreItems,
|
7596 | selectedItems = _props7.selectedItems,
|
7597 | items = _props7.items;
|
7598 | var _props7$resourceName = _props7.resourceName;
|
7599 | const resourceName = _props7$resourceName === undefined ? this.defaultResourceName : _props7$resourceName,
|
7600 | intl = _props7.polaris.intl;
|
7601 |
|
7602 | if (!this.selectable || !hasMoreItems) {
|
7603 | return;
|
7604 | }
|
7605 | const actionText = selectedItems === SELECT_ALL_ITEMS ? intl.translate('Polaris.Common.undo') : intl.translate('Polaris.ResourceList.selectAllItems', {
|
7606 | itemsLength: items.length,
|
7607 | resourceNamePlural: resourceName.plural
|
7608 | });
|
7609 | return {
|
7610 | content: actionText,
|
7611 | onAction: this.handleSelectAllItemsInStore
|
7612 | };
|
7613 | }
|
7614 | get emptySearchResultText() {
|
7615 | var _props8 = this.props;
|
7616 | const intl = _props8.polaris.intl;
|
7617 | var _props8$resourceName = _props8.resourceName;
|
7618 | const resourceName = _props8$resourceName === undefined ? this.defaultResourceName : _props8$resourceName;
|
7619 |
|
7620 | return {
|
7621 | title: intl.translate('Polaris.ResourceList.emptySearchResultTitle', {
|
7622 | resourceNamePlural: resourceName.plural
|
7623 | }),
|
7624 | description: intl.translate('Polaris.ResourceList.emptySearchResultDescription')
|
7625 | };
|
7626 | }
|
7627 | get getContext() {
|
7628 | var _props9 = this.props;
|
7629 | const selectedItems = _props9.selectedItems;
|
7630 | var _props9$resourceName = _props9.resourceName;
|
7631 | const resourceName = _props9$resourceName === undefined ? this.defaultResourceName : _props9$resourceName,
|
7632 | loading = _props9.loading;
|
7633 | const selectMode = this.state.selectMode;
|
7634 |
|
7635 | return {
|
7636 | selectable: this.selectable,
|
7637 | selectedItems,
|
7638 | selectMode,
|
7639 | resourceName,
|
7640 | loading,
|
7641 | onSelectionChange: this.handleSelectionChange
|
7642 | };
|
7643 | }
|
7644 |
|
7645 | componentWillReceiveProps(nextProps) {
|
7646 | const selectedItems = this.props.selectedItems;
|
7647 |
|
7648 | if (selectedItems && selectedItems.length > 0 && (!nextProps.selectedItems || nextProps.selectedItems.length === 0) && !isSmallScreen()) {
|
7649 | this.setState({ selectMode: false });
|
7650 | }
|
7651 | }
|
7652 | componentDidMount() {
|
7653 | this.setState({
|
7654 | listNode: this.listRef.current
|
7655 | }, () => {
|
7656 | if (this.props.loading) {
|
7657 | this.setLoadingPosition();
|
7658 | }
|
7659 | });
|
7660 | }
|
7661 | componentDidUpdate(prevProps) {
|
7662 | if (this.props.loading && !prevProps.loading) {
|
7663 | this.setLoadingPosition();
|
7664 | }
|
7665 | }
|
7666 | render() {
|
7667 | var _props10 = this.props;
|
7668 | const items = _props10.items,
|
7669 | promotedBulkActions = _props10.promotedBulkActions,
|
7670 | bulkActions = _props10.bulkActions,
|
7671 | filterControl = _props10.filterControl,
|
7672 | loading = _props10.loading;
|
7673 | var _props10$showHeader = _props10.showHeader;
|
7674 | const showHeader = _props10$showHeader === undefined ? false : _props10$showHeader,
|
7675 | sortOptions = _props10.sortOptions,
|
7676 | sortValue = _props10.sortValue,
|
7677 | onSortChange = _props10.onSortChange,
|
7678 | intl = _props10.polaris.intl;
|
7679 | var _state = this.state;
|
7680 | const selectMode = _state.selectMode,
|
7681 | loadingPosition = _state.loadingPosition,
|
7682 | listNode = _state.listNode;
|
7683 |
|
7684 | const itemsExist = items.length > 0;
|
7685 | const filterControlMarkup = filterControl ? React.createElement(
|
7686 | 'div',
|
7687 | { className: styles$51.FiltersWrapper },
|
7688 | filterControl
|
7689 | ) : null;
|
7690 | const bulkActionsMarkup = this.selectable ? React.createElement(
|
7691 | 'div',
|
7692 | { className: styles$51.BulkActionsWrapper },
|
7693 | React.createElement(BulkActions$2, { label: this.bulkActionsLabel, accessibilityLabel: this.bulkActionsAccessibilityLabel, selected: this.bulkSelectState, onToggleAll: this.handleToggleAll, selectMode: selectMode, onSelectModeToggle: this.handleSelectMode, promotedActions: promotedBulkActions, paginatedSelectAllAction: this.paginatedSelectAllAction, paginatedSelectAllText: this.paginatedSelectAllText, actions: bulkActions, disabled: loading }),
|
7694 | React.createElement(EventListener$1, { event: 'resize', handler: this.handleResize })
|
7695 | ) : null;
|
7696 | const selectId = getUniqueID$4();
|
7697 | const sortingLabelMarkup = React.createElement(
|
7698 | 'label',
|
7699 | { className: styles$51.SortLabel, htmlFor: selectId },
|
7700 | intl.translate('Polaris.ResourceList.sortingLabel')
|
7701 | );
|
7702 | const sortingSelectMarkup = sortOptions && sortOptions.length > 0 ? React.createElement(
|
7703 | 'div',
|
7704 | { className: styles$51.SortWrapper },
|
7705 | sortingLabelMarkup,
|
7706 | React.createElement(Select$1, { label: intl.translate('Polaris.ResourceList.sortingLabel'), labelHidden: true, options: sortOptions, onChange: onSortChange, value: sortValue, disabled: selectMode })
|
7707 | ) : null;
|
7708 | const itemCountTextMarkup = React.createElement(
|
7709 | 'div',
|
7710 | { className: styles$51.ItemCountTextWrapper },
|
7711 | this.itemCountText
|
7712 | );
|
7713 | const selectButtonMarkup = this.selectable ? React.createElement(
|
7714 | 'div',
|
7715 | { className: styles$51.SelectButtonWrapper },
|
7716 | React.createElement(
|
7717 | Button$2,
|
7718 | { disabled: selectMode, icon: selectIcon
|
7719 |
|
7720 | , onClick: this.handleSelectMode.bind(this, true) },
|
7721 | intl.translate('Polaris.ResourceList.selectButtonText')
|
7722 | )
|
7723 | ) : null;
|
7724 | const checkableButtonMarkup = this.selectable ? React.createElement(
|
7725 | 'div',
|
7726 | { className: styles$51.CheckableButtonWrapper },
|
7727 | React.createElement(CheckableButton$2, { accessibilityLabel: this.bulkActionsAccessibilityLabel, label: this.itemCountText, onToggleAll: this.handleToggleAll, plain: true, disabled: loading })
|
7728 | ) : null;
|
7729 | const needsHeader = this.selectable || sortOptions && sortOptions.length > 0;
|
7730 | const headerWrapperOverlay = loading ? React.createElement('div', { className: styles$51['HeaderWrapper-overlay'] }) : null;
|
7731 | const headerMarkup = (showHeader || needsHeader) && listNode && itemsExist && React.createElement(
|
7732 | 'div',
|
7733 | { className: styles$51.HeaderOuterWrapper },
|
7734 | React.createElement(
|
7735 | Sticky$1,
|
7736 | { boundingElement: listNode },
|
7737 | isSticky => {
|
7738 | const headerClassName = styles.classNames(styles$51.HeaderWrapper, sortOptions && sortOptions.length > 0 && styles$51['HeaderWrapper-hasSort'], this.selectable && styles$51['HeaderWrapper-hasSelect'], loading && styles$51['HeaderWrapper-disabled'], this.selectable && selectMode && styles$51['HeaderWrapper-inSelectMode'], isSticky && styles$51['HeaderWrapper-isSticky']);
|
7739 | return React.createElement(
|
7740 | 'div',
|
7741 | { className: headerClassName },
|
7742 | headerWrapperOverlay,
|
7743 | React.createElement(
|
7744 | 'div',
|
7745 | { className: styles$51.HeaderContentWrapper },
|
7746 | itemCountTextMarkup,
|
7747 | checkableButtonMarkup,
|
7748 | sortingSelectMarkup,
|
7749 | selectButtonMarkup
|
7750 | ),
|
7751 | bulkActionsMarkup
|
7752 | );
|
7753 | }
|
7754 | )
|
7755 | );
|
7756 | const emptyStateMarkup = filterControl && !itemsExist ? React.createElement(
|
7757 | 'div',
|
7758 | { className: styles$51.EmptySearchResultWrapper },
|
7759 | React.createElement(EmptySearchResult$2, Object.assign({}, this.emptySearchResultText, { withIllustration: true }))
|
7760 | ) : null;
|
7761 | const defaultTopPadding = 8;
|
7762 | const topPadding = loadingPosition > 0 ? loadingPosition : defaultTopPadding;
|
7763 | const spinnerStyle = { paddingTop: `${topPadding}px` };
|
7764 | const spinnerSize = items.length === 1 ? 'small' : 'large';
|
7765 | const loadingOverlay = loading ? React.createElement(
|
7766 | React.Fragment,
|
7767 | null,
|
7768 | React.createElement(
|
7769 | 'div',
|
7770 | { className: styles$51.SpinnerContainer, style: spinnerStyle },
|
7771 | React.createElement(Spinner$2, { size: spinnerSize, accessibilityLabel: 'Items are loading' })
|
7772 | ),
|
7773 | React.createElement('div', { className: styles$51.LoadingOverlay })
|
7774 | ) : null;
|
7775 | const resourceListClassName = styles.classNames(styles$51.ResourceList, loading && styles$51.disabledPointerEvents);
|
7776 | const listMarkup = itemsExist ? React.createElement(
|
7777 | 'ul',
|
7778 | { className: resourceListClassName, ref: this.listRef, 'aria-live': 'polite', 'aria-busy': loading },
|
7779 | loadingOverlay,
|
7780 | items.map(this.renderItem)
|
7781 | ) : emptyStateMarkup;
|
7782 | return React.createElement(
|
7783 | Provider$2,
|
7784 | { value: this.getContext },
|
7785 | React.createElement(
|
7786 | 'div',
|
7787 | { className: styles$51.ResourceListWrapper },
|
7788 | filterControlMarkup,
|
7789 | headerMarkup,
|
7790 | listMarkup
|
7791 | )
|
7792 | );
|
7793 | }
|
7794 | handleResize() {
|
7795 | const selectedItems = this.props.selectedItems;
|
7796 | const selectMode = this.state.selectMode;
|
7797 |
|
7798 | if (selectedItems && selectedItems.length === 0 && selectMode && !isSmallScreen()) {
|
7799 | this.handleSelectMode(false);
|
7800 | }
|
7801 | }
|
7802 | setLoadingPosition() {
|
7803 | const listNode = this.state.listNode;
|
7804 |
|
7805 | if (listNode != null) {
|
7806 | if (typeof window === 'undefined') {
|
7807 | return;
|
7808 | }
|
7809 | const overlay = listNode.getBoundingClientRect();
|
7810 | const viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
7811 | const overflow = viewportHeight - overlay.height;
|
7812 | const spinnerHeight = this.props.items.length === 1 ? SMALL_SPINNER_HEIGHT : LARGE_SPINNER_HEIGHT;
|
7813 | const spinnerPosition = overflow > 0 ? (overlay.height - spinnerHeight) / 2 : (viewportHeight - overlay.top - spinnerHeight) / 2;
|
7814 | this.setState({ loadingPosition: spinnerPosition });
|
7815 | }
|
7816 | }
|
7817 | handleSelectAllItemsInStore() {
|
7818 | var _props11 = this.props;
|
7819 | const onSelectionChange = _props11.onSelectionChange,
|
7820 | selectedItems = _props11.selectedItems,
|
7821 | items = _props11.items;
|
7822 | var _props11$idForItem = _props11.idForItem;
|
7823 | const idForItem = _props11$idForItem === undefined ? defaultIdForItem : _props11$idForItem;
|
7824 |
|
7825 | const newlySelectedItems = selectedItems === SELECT_ALL_ITEMS ? getAllItemsOnPage(items, idForItem) : SELECT_ALL_ITEMS;
|
7826 | if (onSelectionChange) {
|
7827 | onSelectionChange(newlySelectedItems);
|
7828 | }
|
7829 | }
|
7830 | renderItem(item, index) {
|
7831 | var _props12 = this.props;
|
7832 | const renderItem = _props12.renderItem;
|
7833 | var _props12$idForItem = _props12.idForItem;
|
7834 | const idForItem = _props12$idForItem === undefined ? defaultIdForItem : _props12$idForItem,
|
7835 | loading = _props12.loading;
|
7836 |
|
7837 | const id = idForItem(item, index);
|
7838 | const tabIndex = loading ? -1 : 0;
|
7839 | return React.createElement(
|
7840 | 'li',
|
7841 | { key: id, className: styles$51.ItemWrapper, tabIndex: tabIndex },
|
7842 | renderItem(item, id)
|
7843 | );
|
7844 | }
|
7845 | handleSelectionChange(selected, id) {
|
7846 | var _props13 = this.props;
|
7847 | const onSelectionChange = _props13.onSelectionChange,
|
7848 | selectedItems = _props13.selectedItems,
|
7849 | items = _props13.items;
|
7850 | var _props13$idForItem = _props13.idForItem;
|
7851 | const idForItem = _props13$idForItem === undefined ? defaultIdForItem : _props13$idForItem;
|
7852 |
|
7853 | if (selectedItems == null || onSelectionChange == null) {
|
7854 | return;
|
7855 | }
|
7856 | const newlySelectedItems = selectedItems === SELECT_ALL_ITEMS ? getAllItemsOnPage(items, idForItem) : [...selectedItems];
|
7857 | if (selected) {
|
7858 | newlySelectedItems.push(id);
|
7859 | } else {
|
7860 | newlySelectedItems.splice(newlySelectedItems.indexOf(id), 1);
|
7861 | }
|
7862 | if (newlySelectedItems.length === 0 && !isSmallScreen()) {
|
7863 | this.handleSelectMode(false);
|
7864 | } else if (newlySelectedItems.length > 0) {
|
7865 | this.handleSelectMode(true);
|
7866 | }
|
7867 | if (onSelectionChange) {
|
7868 | onSelectionChange(newlySelectedItems);
|
7869 | }
|
7870 | }
|
7871 | handleSelectMode(selectMode) {
|
7872 | const onSelectionChange = this.props.onSelectionChange;
|
7873 |
|
7874 | this.setState({ selectMode });
|
7875 | if (!selectMode && onSelectionChange) {
|
7876 | onSelectionChange([]);
|
7877 | }
|
7878 | }
|
7879 | handleToggleAll() {
|
7880 | var _props14 = this.props;
|
7881 | const onSelectionChange = _props14.onSelectionChange,
|
7882 | selectedItems = _props14.selectedItems,
|
7883 | items = _props14.items;
|
7884 | var _props14$idForItem = _props14.idForItem;
|
7885 | const idForItem = _props14$idForItem === undefined ? defaultIdForItem : _props14$idForItem;
|
7886 |
|
7887 | let newlySelectedItems = [];
|
7888 | if (Array.isArray(selectedItems) && selectedItems.length === items.length || selectedItems === SELECT_ALL_ITEMS) {
|
7889 | newlySelectedItems = [];
|
7890 | } else {
|
7891 | newlySelectedItems = items.map((item, index) => {
|
7892 | const id = idForItem(item, index);
|
7893 | return id;
|
7894 | });
|
7895 | }
|
7896 | if (newlySelectedItems.length === 0 && !isSmallScreen()) {
|
7897 | this.handleSelectMode(false);
|
7898 | } else if (newlySelectedItems.length > 0) {
|
7899 | this.handleSelectMode(true);
|
7900 | }
|
7901 | if (onSelectionChange) {
|
7902 | onSelectionChange(newlySelectedItems);
|
7903 | }
|
7904 | }
|
7905 | }
|
7906 | ResourceList$1.Item = Item$10;
|
7907 | ResourceList$1.FilterControl = FilterControl$2;
|
7908 | tslib_1.__decorate([decorators.autobind], ResourceList$1.prototype, "bulkSelectState", null);
|
7909 | tslib_1.__decorate([decorators.autobind], ResourceList$1.prototype, "itemCountText", null);
|
7910 | tslib_1.__decorate([decorators.autobind], ResourceList$1.prototype, "bulkActionsLabel", null);
|
7911 | tslib_1.__decorate([decorators.autobind], ResourceList$1.prototype, "bulkActionsAccessibilityLabel", null);
|
7912 | tslib_1.__decorate([decorators.autobind], ResourceList$1.prototype, "paginatedSelectAllText", null);
|
7913 | tslib_1.__decorate([decorators.autobind], ResourceList$1.prototype, "paginatedSelectAllAction", null);
|
7914 | tslib_1.__decorate([decorators.debounce(50), decorators.autobind], ResourceList$1.prototype, "handleResize", null);
|
7915 | tslib_1.__decorate([decorators.autobind], ResourceList$1.prototype, "setLoadingPosition", null);
|
7916 | tslib_1.__decorate([decorators.autobind], ResourceList$1.prototype, "handleSelectAllItemsInStore", null);
|
7917 | tslib_1.__decorate([decorators.autobind], ResourceList$1.prototype, "renderItem", null);
|
7918 | tslib_1.__decorate([decorators.autobind], ResourceList$1.prototype, "handleSelectionChange", null);
|
7919 | tslib_1.__decorate([decorators.autobind], ResourceList$1.prototype, "handleSelectMode", null);
|
7920 | tslib_1.__decorate([decorators.autobind], ResourceList$1.prototype, "handleToggleAll", null);
|
7921 | function getAllItemsOnPage(items, idForItem) {
|
7922 | return items.map((item, index) => {
|
7923 | return idForItem(item, index);
|
7924 | });
|
7925 | }
|
7926 | function defaultIdForItem(item, index) {
|
7927 | return item.hasOwnProperty('id') ? item.id : index.toString();
|
7928 | }
|
7929 | function isSmallScreen() {
|
7930 | return typeof window === 'undefined' ? false : window.innerWidth <= SMALL_SCREEN_WIDTH;
|
7931 | }
|
7932 | var ResourceList$2 = withAppProvider()(ResourceList$1);
|
7933 |
|
7934 | var styles$52 = {
|
7935 | "marginNone": "p_sr",
|
7936 | "paddingNone": "p_ow",
|
7937 | "marginExtraTight": "p_vf",
|
7938 | "paddingExtraTight": "p_z8",
|
7939 | "marginTight": "p_dt",
|
7940 | "paddingTight": "p_zi",
|
7941 | "marginBase": "p_pc",
|
7942 | "paddingBase": "p_z6",
|
7943 | "marginLoose": "p_rj",
|
7944 | "paddingLoose": "p_fh",
|
7945 | "marginExtraLoose": "p_hk",
|
7946 | "paddingExtraLoose": "p_a7",
|
7947 | "marginTopNone": "p_cd",
|
7948 | "paddingTopNone": "p_mg",
|
7949 | "marginTopExtraTight": "p_om",
|
7950 | "paddingTopExtraTight": "p_pe",
|
7951 | "marginTopTight": "p_or",
|
7952 | "paddingTopTight": "p_cc",
|
7953 | "marginTopBase": "p_xw",
|
7954 | "paddingTopBase": "p_vs",
|
7955 | "marginTopLoose": "p_gd",
|
7956 | "paddingTopLoose": "p_eb",
|
7957 | "marginTopExtraLoose": "p_x6",
|
7958 | "paddingTopExtraLoose": "p_iy",
|
7959 | "marginLeftNone": "p_lh",
|
7960 | "paddingLeftNone": "p_gp",
|
7961 | "marginLeftExtraTight": "p_jq",
|
7962 | "paddingLeftExtraTight": "p_sb",
|
7963 | "marginLeftTight": "p_s7",
|
7964 | "paddingLeftTight": "p_zq",
|
7965 | "marginLeftBase": "p_xk",
|
7966 | "paddingLeftBase": "p_g5",
|
7967 | "marginLeftLoose": "p_s4",
|
7968 | "paddingLeftLoose": "p_g9",
|
7969 | "marginLeftExtraLoose": "p_uz",
|
7970 | "paddingLeftExtraLoose": "p_nj",
|
7971 | "marginRightNone": "p_kc",
|
7972 | "paddingRightNone": "p_c8",
|
7973 | "marginRightExtraTight": "p_fj",
|
7974 | "paddingRightExtraTight": "p_bs",
|
7975 | "marginRightTight": "p_xj",
|
7976 | "paddingRightTight": "p_um",
|
7977 | "marginRightBase": "p_gf",
|
7978 | "paddingRightBase": "p_yh",
|
7979 | "marginRightLoose": "p_uq",
|
7980 | "paddingRightLoose": "p_t6",
|
7981 | "marginRightExtraLoose": "p_io",
|
7982 | "paddingRightExtraLoose": "p_sv",
|
7983 | "marginBottomNone": "p_s1",
|
7984 | "paddingBottomNone": "p_a9",
|
7985 | "marginBottomExtraTight": "p_nh",
|
7986 | "paddingBottomExtraTight": "p_hy",
|
7987 | "marginBottomTight": "p_ps",
|
7988 | "paddingBottomTight": "p_ue",
|
7989 | "marginBottomBase": "p_f4",
|
7990 | "paddingBottomBase": "p_xm",
|
7991 | "marginBottomLoose": "p_lo",
|
7992 | "paddingBottomLoose": "p_xu",
|
7993 | "marginBottomExtraLoose": "p_ac",
|
7994 | "paddingBottomExtraLoose": "p_v7",
|
7995 | };
|
7996 |
|
7997 | function Spacing$1({ children, margin, marginTop, marginLeft, marginRight, marginBottom, padding, paddingTop, paddingLeft, paddingRight, paddingBottom }) {
|
7998 | const className = styles.classNames(styles$52.Spacing, margin && styles$52[styles.variationName('margin', stringSpacing(margin))], marginTop && styles$52[styles.variationName('marginTop', stringSpacing(marginTop))], marginLeft && styles$52[styles.variationName('marginLeft', stringSpacing(marginLeft))], marginRight && styles$52[styles.variationName('marginRight', stringSpacing(marginRight))], marginBottom && styles$52[styles.variationName('marginBottom', stringSpacing(marginBottom))], padding && styles$52[styles.variationName('padding', stringSpacing(padding))], paddingTop && styles$52[styles.variationName('paddingTop', stringSpacing(paddingTop))], paddingLeft && styles$52[styles.variationName('paddingLeft', stringSpacing(paddingLeft))], paddingRight && styles$52[styles.variationName('paddingRight', stringSpacing(paddingRight))], paddingBottom && styles$52[styles.variationName('paddingBottom', stringSpacing(paddingBottom))]);
|
7999 | return React.createElement(
|
8000 | 'div',
|
8001 | { className: className },
|
8002 | children
|
8003 | );
|
8004 | }
|
8005 | function stringSpacing(value) {
|
8006 | if (typeof value === 'string') {
|
8007 | return value;
|
8008 | }
|
8009 | if (value === true) {
|
8010 | return 'base';
|
8011 | }
|
8012 | return 'none';
|
8013 | }
|
8014 |
|
8015 | class FilterControl$1 extends React.Component {
|
8016 | render() {
|
8017 | var _props = this.props;
|
8018 | const searchValue = _props.searchValue;
|
8019 | var _props$appliedFilters = _props.appliedFilters;
|
8020 | const appliedFilters = _props$appliedFilters === undefined ? [] : _props$appliedFilters,
|
8021 | additionalAction = _props.additionalAction;
|
8022 | var _props$focused = _props.focused;
|
8023 | const focused = _props$focused === undefined ? false : _props$focused;
|
8024 | var _props$filters = _props.filters;
|
8025 | const filters = _props$filters === undefined ? [] : _props$filters,
|
8026 | onSearchBlur = _props.onSearchBlur,
|
8027 | onSearchChange = _props.onSearchChange,
|
8028 | names = _props.names,
|
8029 | intl = _props.polaris.intl,
|
8030 | selectMode = _props.context.selectMode;
|
8031 |
|
8032 | let resourceName = this.props.context.resourceName;
|
8033 | if (names) {
|
8034 | resourceName = {
|
8035 | singular: names.singular,
|
8036 | plural: names.plural
|
8037 | };
|
8038 | }
|
8039 | let textFieldLabel = intl.translate('Polaris.ResourceList.FilterControl.textFieldLabel', {
|
8040 | resourceNamePlural: resourceName.plural.toLocaleLowerCase()
|
8041 | });
|
8042 | textFieldLabel = `${textFieldLabel}...`;
|
8043 | if (additionalAction) {
|
8044 | additionalAction.disabled = selectMode;
|
8045 | }
|
8046 | const additionalActionButton = additionalAction && buttonsFrom(additionalAction) || null;
|
8047 | const filterCreatorMarkup = filters.length > 0 ? React.createElement(
|
8048 | Spacing$1,
|
8049 | { marginRight: true },
|
8050 | React.createElement(FilterCreator$1, { resourceName: resourceName, filters: filters, onAddFilter: this.handleAddFilter, disabled: selectMode })
|
8051 | ) : null;
|
8052 | const appliedFiltersMarkup = appliedFilters.map(appliedFilter => {
|
8053 | const activeFilterLabel = this.getFilterLabel(appliedFilter);
|
8054 | const filterId = idFromFilter(appliedFilter);
|
8055 | return React.createElement(
|
8056 | 'li',
|
8057 | { className: styles$43.AppliedFilter, key: filterId },
|
8058 | React.createElement(
|
8059 | Tag$2,
|
8060 | { onRemove: this.getRemoveFilterCallback(filterId), disabled: selectMode },
|
8061 | activeFilterLabel
|
8062 | )
|
8063 | );
|
8064 | });
|
8065 | const appliedFiltersWrapper = appliedFilters.length > 0 ? React.createElement(
|
8066 | 'ul',
|
8067 | { className: styles$43.AppliedFilters },
|
8068 | appliedFiltersMarkup
|
8069 | ) : null;
|
8070 | return React.createElement(
|
8071 | FormLayout$1,
|
8072 | null,
|
8073 | React.createElement(
|
8074 | 'div',
|
8075 | { className: styles$43.Controls },
|
8076 | filterCreatorMarkup,
|
8077 | React.createElement(
|
8078 | 'div',
|
8079 | { className: styles$43.Search },
|
8080 | React.createElement(TextField$1, { label: textFieldLabel, labelHidden: true, placeholder: textFieldLabel, prefix: React.createElement(Icon$2, { source: 'search', color: 'inkLightest' }), value: searchValue, onChange: onSearchChange, onBlur: onSearchBlur, focused: focused, disabled: selectMode })
|
8081 | ),
|
8082 | additionalActionButton
|
8083 | ),
|
8084 | appliedFiltersWrapper
|
8085 | );
|
8086 | }
|
8087 | handleAddFilter(newFilter) {
|
8088 | var _props2 = this.props;
|
8089 | const onFiltersChange = _props2.onFiltersChange;
|
8090 | var _props2$appliedFilter = _props2.appliedFilters;
|
8091 | const appliedFilters = _props2$appliedFilter === undefined ? [] : _props2$appliedFilter;
|
8092 |
|
8093 | if (!onFiltersChange) {
|
8094 | return;
|
8095 | }
|
8096 | const foundFilter = appliedFilters.find(appliedFilter => idFromFilter(appliedFilter) === idFromFilter(newFilter));
|
8097 | if (foundFilter) {
|
8098 | return;
|
8099 | }
|
8100 | const newAppliedFilters = [...appliedFilters, newFilter];
|
8101 | onFiltersChange(newAppliedFilters);
|
8102 | }
|
8103 | getRemoveFilterCallback(filterId) {
|
8104 | return () => {
|
8105 | this.handleRemoveFilter(filterId);
|
8106 | };
|
8107 | }
|
8108 | handleRemoveFilter(filterId) {
|
8109 | var _props3 = this.props;
|
8110 | const onFiltersChange = _props3.onFiltersChange;
|
8111 | var _props3$appliedFilter = _props3.appliedFilters;
|
8112 | const appliedFilters = _props3$appliedFilter === undefined ? [] : _props3$appliedFilter;
|
8113 |
|
8114 | if (!onFiltersChange) {
|
8115 | return;
|
8116 | }
|
8117 | const foundIndex = appliedFilters.findIndex(appliedFilter => idFromFilter(appliedFilter) === filterId);
|
8118 | const newAppliedFilters = foundIndex >= 0 ? [...appliedFilters.slice(0, foundIndex), ...appliedFilters.slice(foundIndex + 1, appliedFilters.length)] : [...appliedFilters];
|
8119 | onFiltersChange(newAppliedFilters);
|
8120 | }
|
8121 | getFilterLabel(appliedFilter) {
|
8122 | const key = appliedFilter.key,
|
8123 | value = appliedFilter.value,
|
8124 | label = appliedFilter.label;
|
8125 |
|
8126 | if (label) {
|
8127 | return label;
|
8128 | }
|
8129 | var _props$filters2 = this.props.filters;
|
8130 | const filters = _props$filters2 === undefined ? [] : _props$filters2;
|
8131 |
|
8132 | const filter = filters.find(filter => {
|
8133 | const minKey = filter.minKey,
|
8134 | maxKey = filter.maxKey,
|
8135 | operatorText = filter.operatorText;
|
8136 |
|
8137 | if (minKey || maxKey) {
|
8138 | return filter.key === key || minKey === key || maxKey === key;
|
8139 | }
|
8140 | if (operatorText && typeof operatorText !== 'string') {
|
8141 | return filter.key === key || operatorText.filter(({ key: operatorKey }) => operatorKey === key).length === 1;
|
8142 | }
|
8143 | return filter.key === key;
|
8144 | });
|
8145 | if (!filter) {
|
8146 | return value;
|
8147 | }
|
8148 | const filterOperatorLabel = findOperatorLabel(filter, appliedFilter);
|
8149 | const filterLabelByType = this.findFilterLabelByType(filter, appliedFilter);
|
8150 | if (!filterOperatorLabel) {
|
8151 | return `${filter.label} ${filterLabelByType}`;
|
8152 | }
|
8153 | return `${filter.label} ${filterOperatorLabel} ${filterLabelByType}`;
|
8154 | }
|
8155 | findFilterLabelByType(filter, appliedFilter) {
|
8156 | const intl = this.props.polaris.intl;
|
8157 | const appliedFilterValue = appliedFilter.value;
|
8158 |
|
8159 | if (filter.type === exports.FilterType.Select) {
|
8160 | const foundFilterOption = filter.options.find(option => typeof option === 'string' ? option === appliedFilterValue : option.value === appliedFilterValue);
|
8161 | if (foundFilterOption) {
|
8162 | return typeof foundFilterOption === 'string' ? foundFilterOption : foundFilterOption.label;
|
8163 | }
|
8164 | }
|
8165 | if (filter.type === exports.FilterType.DateSelector) {
|
8166 | if (filter.key === appliedFilter.key) {
|
8167 | const filterLabelKey = `Polaris.ResourceList.DateSelector.FilterLabelForValue.${appliedFilter.value}`;
|
8168 | return intl.translationKeyExists(filterLabelKey) ? intl.translate(filterLabelKey) : appliedFilter.value;
|
8169 | }
|
8170 | if (appliedFilter.key === filter.maxKey) {
|
8171 | return intl.translate('Polaris.ResourceList.DateSelector.FilterLabelForValue.on_or_before', {
|
8172 | date: formatDateForLabelDisplay(appliedFilter.value)
|
8173 | });
|
8174 | }
|
8175 | if (appliedFilter.key === filter.minKey) {
|
8176 | return intl.translate('Polaris.ResourceList.DateSelector.FilterLabelForValue.on_or_after', {
|
8177 | date: formatDateForLabelDisplay(appliedFilter.value)
|
8178 | });
|
8179 | }
|
8180 | }
|
8181 | return appliedFilterValue;
|
8182 | }
|
8183 | }
|
8184 | tslib_1.__decorate([decorators.autobind], FilterControl$1.prototype, "handleAddFilter", null);
|
8185 | tslib_1.__decorate([decorators.memoize()], FilterControl$1.prototype, "getRemoveFilterCallback", null);
|
8186 | function idFromFilter(appliedFilter) {
|
8187 | return `${appliedFilter.key}-${appliedFilter.value}`;
|
8188 | }
|
8189 | function formatDateForLabelDisplay(date) {
|
8190 | if (isNaN(new Date(date).getTime())) {
|
8191 | return date;
|
8192 | }
|
8193 | return new Date(date.replace(/-/g, '/')).toLocaleDateString();
|
8194 | }
|
8195 | function findOperatorLabel(filter, appliedFilter) {
|
8196 | const operatorText = filter.operatorText;
|
8197 |
|
8198 | if (filter.type === exports.FilterType.DateSelector && (appliedFilter.key === filter.minKey || appliedFilter.key === filter.maxKey)) {
|
8199 | return '';
|
8200 | }
|
8201 | if (!operatorText || typeof operatorText === 'string') {
|
8202 | return operatorText;
|
8203 | }
|
8204 | const appliedOperator = operatorText.find(operator => {
|
8205 | return operator.key === appliedFilter.key;
|
8206 | });
|
8207 | if (appliedOperator) {
|
8208 | return appliedOperator.filterLabel || appliedOperator.optionLabel;
|
8209 | }
|
8210 | }
|
8211 | var FilterControl$2 = compose(withAppProvider(), withContext$1(Consumer$2))(FilterControl$1);
|
8212 |
|
8213 | class Focus$1 extends React.PureComponent {
|
8214 | componentDidMount() {
|
8215 | fastdom.write(() => {
|
8216 | const root = ReactDOM.findDOMNode(this);
|
8217 | if (root) {
|
8218 | if (!root.querySelector('[autofocus]')) {
|
8219 | focus.focusFirstFocusableNode(root, false);
|
8220 | }
|
8221 | }
|
8222 | });
|
8223 | }
|
8224 | render() {
|
8225 | const Fragment$$1 = React.Fragment;
|
8226 | const children = this.props.children;
|
8227 |
|
8228 | return React.createElement(
|
8229 | Fragment$$1,
|
8230 | null,
|
8231 | children
|
8232 | );
|
8233 | }
|
8234 | }
|
8235 |
|
8236 | class TrapFocus extends React.PureComponent {
|
8237 | render() {
|
8238 | const children = this.props.children;
|
8239 |
|
8240 | return React.createElement(
|
8241 | Focus$1,
|
8242 | null,
|
8243 | React.createElement(
|
8244 | 'div',
|
8245 | { ref: this.setFocusTrapWrapper },
|
8246 | React.createElement(EventListener$1, { event: 'focusout', handler: this.handleBlur }),
|
8247 | children
|
8248 | )
|
8249 | );
|
8250 | }
|
8251 | setFocusTrapWrapper(node) {
|
8252 | this.focusTrapWrapper = node;
|
8253 | }
|
8254 | handleBlur(event) {
|
8255 | const relatedTarget = event.relatedTarget;
|
8256 | const focusTrapWrapper = this.focusTrapWrapper;
|
8257 | var _props$trapping = this.props.trapping;
|
8258 | const trapping = _props$trapping === undefined ? true : _props$trapping;
|
8259 |
|
8260 | if (relatedTarget == null || !trapping) {
|
8261 | return;
|
8262 | }
|
8263 | if (focusTrapWrapper && !focusTrapWrapper.contains(relatedTarget) && !dom.closest(relatedTarget, '[data-polaris-overlay]')) {
|
8264 | event.preventDefault();
|
8265 | if (event.srcElement === focus.findFirstFocusableNode(focusTrapWrapper)) {
|
8266 | return focus.focusLastFocusableNode(focusTrapWrapper);
|
8267 | }
|
8268 | focus.focusFirstFocusableNode(focusTrapWrapper);
|
8269 | }
|
8270 | }
|
8271 | }
|
8272 | tslib_1.__decorate([decorators.autobind], TrapFocus.prototype, "setFocusTrapWrapper", null);
|
8273 | tslib_1.__decorate([decorators.autobind], TrapFocus.prototype, "handleBlur", null);
|
8274 |
|
8275 | var styles$53 = {
|
8276 | "FooterHelp": "p_i2",
|
8277 | "Content": "p_xg",
|
8278 | "Icon": "p_uv",
|
8279 | "Text": "p_yc",
|
8280 | };
|
8281 |
|
8282 | function FooterHelp$1({ children }) {
|
8283 | return React.createElement(
|
8284 | 'div',
|
8285 | { className: styles$53.FooterHelp },
|
8286 | React.createElement(
|
8287 | 'div',
|
8288 | { className: styles$53.Content },
|
8289 | React.createElement(
|
8290 | 'div',
|
8291 | { className: styles$53.Icon },
|
8292 | React.createElement(Icon$2, { source: 'help', color: 'teal', backdrop: true })
|
8293 | ),
|
8294 | React.createElement(
|
8295 | 'div',
|
8296 | { className: styles$53.Text },
|
8297 | children
|
8298 | )
|
8299 | )
|
8300 | );
|
8301 | }
|
8302 |
|
8303 | var styles$54 = {
|
8304 | "FormLayout": "p_uw",
|
8305 | "condensed": "p_ke",
|
8306 | "Item": "p_to",
|
8307 | "Title": "p_ji",
|
8308 | "Items": "p_ez",
|
8309 | "HelpText": "p_b1",
|
8310 | "Footer": "p_ss",
|
8311 | };
|
8312 |
|
8313 | function Group({ children }) {
|
8314 | const itemsMarkup = React.Children.map(children, child => child);
|
8315 | return React.createElement(
|
8316 | 'footer',
|
8317 | { role: 'footer', className: styles$54.Footer },
|
8318 | React.createElement(
|
8319 | Stack$1,
|
8320 | { distribution: 'trailing' },
|
8321 | itemsMarkup
|
8322 | )
|
8323 | );
|
8324 | }
|
8325 |
|
8326 | function Item$12(props) {
|
8327 | return React.createElement(
|
8328 | 'div',
|
8329 | { className: styles$54.Item },
|
8330 | props.children
|
8331 | );
|
8332 | }
|
8333 |
|
8334 | const getUniqueID$8 = other.createUniqueIDFactory('FormLayoutGroup');
|
8335 | function Group$2({ children, condensed, title, helpText }) {
|
8336 | const className = styles.classNames(condensed && styles$54.condensed);
|
8337 | const id = getUniqueID$8();
|
8338 | let helpTextElement = null;
|
8339 | let helpTextID;
|
8340 | let titleElement = null;
|
8341 | let titleID;
|
8342 | if (helpText) {
|
8343 | helpTextID = `${id}HelpText`;
|
8344 | helpTextElement = React.createElement(
|
8345 | 'div',
|
8346 | { id: helpTextID, className: styles$54.HelpText },
|
8347 | helpText
|
8348 | );
|
8349 | }
|
8350 | if (title) {
|
8351 | titleID = `${id}Title`;
|
8352 | titleElement = React.createElement(
|
8353 | 'div',
|
8354 | { id: titleID, className: styles$54.Title },
|
8355 | title
|
8356 | );
|
8357 | }
|
8358 | const itemsMarkup = React.Children.map(children, child => reactUtilities.wrapWithComponent(child, Item$12));
|
8359 | return React.createElement(
|
8360 | 'div',
|
8361 | { role: 'group', className: className, 'aria-labelledby': titleID, 'aria-describedby': helpTextID },
|
8362 | titleElement,
|
8363 | React.createElement(
|
8364 | 'div',
|
8365 | { className: styles$54.Items },
|
8366 | itemsMarkup
|
8367 | ),
|
8368 | helpTextElement
|
8369 | );
|
8370 | }
|
8371 |
|
8372 | class FormLayout$1 extends React.PureComponent {
|
8373 | render() {
|
8374 | const children = this.props.children;
|
8375 |
|
8376 | return React.createElement(
|
8377 | 'div',
|
8378 | { className: styles$54.FormLayout },
|
8379 | React.Children.map(children, wrapChildren)
|
8380 | );
|
8381 | }
|
8382 | }
|
8383 | FormLayout$1.Group = Group$2;
|
8384 | FormLayout$1.Footer = Group;
|
8385 | function wrapChildren(child, index) {
|
8386 | if (reactUtilities.isElementOfType(child, Group$2)) {
|
8387 | return child;
|
8388 | }
|
8389 | if (reactUtilities.isElementOfType(child, Group)) {
|
8390 | return child;
|
8391 | }
|
8392 | const props = { key: index };
|
8393 | return reactUtilities.wrapWithComponent(child, Item$12, props);
|
8394 | }
|
8395 |
|
8396 | var styles$55 = {
|
8397 | "always": "p_zn",
|
8398 | "whenTablet": "p_jt",
|
8399 | "whenLaptop": "p_ox",
|
8400 | "whenDesktop": "p_o1",
|
8401 | "belowMobile": "p_pg",
|
8402 | "belowTablet": "p_o8",
|
8403 | "belowLaptop": "p_xi",
|
8404 | };
|
8405 |
|
8406 | function Hide$1({ children, when, below }) {
|
8407 | const className = styles.classNames(styles$55.Hide, when && styles$55[styles.variationName('when', when)], below && styles$55[styles.variationName('below', below)], !when && !below && styles$55.always);
|
8408 | return React.createElement(
|
8409 | 'div',
|
8410 | { className: className },
|
8411 | children
|
8412 | );
|
8413 | }
|
8414 |
|
8415 | var styles$56 = {
|
8416 | "variationPositive": "p_go",
|
8417 | "variationNegative": "p_lg",
|
8418 | "variationWarning": "p_h5",
|
8419 | "variationCode": "p_df",
|
8420 | "variationStrong": "p_sx",
|
8421 | "variationSubdued": "p_b9",
|
8422 | };
|
8423 |
|
8424 | var VariationValue;
|
8425 | (function (VariationValue) {
|
8426 | VariationValue["Positive"] = "positive";
|
8427 | VariationValue["Warning"] = "warning";
|
8428 | VariationValue["Negative"] = "negative";
|
8429 | VariationValue["Strong"] = "strong";
|
8430 | VariationValue["Subdued"] = "subdued";
|
8431 | VariationValue["Code"] = "code";
|
8432 | })(VariationValue || (VariationValue = {}));
|
8433 | function TextStyle$1({ variation, children }) {
|
8434 | const className = styles.classNames(variation && styles$56[styles.variationName('variation', variation)], variation === VariationValue.Code && styles$56.code);
|
8435 | const Element = variationElement(variation);
|
8436 | return React.createElement(
|
8437 | Element,
|
8438 | { className: className },
|
8439 | children
|
8440 | );
|
8441 | }
|
8442 | function variationElement(variation) {
|
8443 | switch (variation) {
|
8444 | case VariationValue.Code:
|
8445 | return 'code';
|
8446 | case VariationValue.Strong:
|
8447 | return 'b';
|
8448 | case VariationValue.Positive:
|
8449 | case VariationValue.Warning:
|
8450 | case VariationValue.Negative:
|
8451 | case VariationValue.Subdued:
|
8452 | default:
|
8453 | return 'span';
|
8454 | }
|
8455 | }
|
8456 |
|
8457 | var styles$57 = {
|
8458 | "InlineValidation": "p_gg",
|
8459 | "Icon": "p_b2",
|
8460 | };
|
8461 |
|
8462 | function InlineValidation$1({ message, fieldID, status }) {
|
8463 | if (!message) {
|
8464 | return null;
|
8465 | }
|
8466 | let color = 'red';
|
8467 | let icon = 'alert';
|
8468 | let textStyle = 'negative';
|
8469 | switch (status) {
|
8470 | case 'success':
|
8471 | color = 'green';
|
8472 | icon = 'circleCheckmark';
|
8473 | textStyle = null;
|
8474 | break;
|
8475 | case 'info':
|
8476 | color = 'blue';
|
8477 | icon = 'circleInformationFilled';
|
8478 | textStyle = null;
|
8479 | break;
|
8480 | case 'attention':
|
8481 | color = 'orange';
|
8482 | icon = 'attentionFilled';
|
8483 | textStyle = 'warning';
|
8484 | break;
|
8485 | default:
|
8486 | color = 'red';
|
8487 | icon = 'alert';
|
8488 | textStyle = 'negative';
|
8489 | }
|
8490 | return React.createElement(
|
8491 | 'div',
|
8492 | { id: `${fieldID}Error`, className: styles$57.InlineValidation },
|
8493 | React.createElement(
|
8494 | 'div',
|
8495 | { className: styles$57.Icon },
|
8496 | React.createElement(Icon$2, { source: icon, color: color })
|
8497 | ),
|
8498 | textStyle ? React.createElement(
|
8499 | TextStyle$1,
|
8500 | { variation: textStyle },
|
8501 | message
|
8502 | ) : React.createElement(
|
8503 | TextStyle$1,
|
8504 | null,
|
8505 | message
|
8506 | )
|
8507 | );
|
8508 | }
|
8509 |
|
8510 | var styles$58 = {
|
8511 | "KeyboardKey": "p_ka",
|
8512 | };
|
8513 |
|
8514 | function KeyboardKey$1({ children }) {
|
8515 | let key = children || '';
|
8516 | key = key.length > 1 ? key.toLowerCase() : key.toUpperCase();
|
8517 | return React.createElement(
|
8518 | 'kbd',
|
8519 | { className: styles$58.KeyboardKey },
|
8520 | key
|
8521 | );
|
8522 | }
|
8523 |
|
8524 | var styles$59 = {
|
8525 | "Layout": "p_sy",
|
8526 | "Section": "p_xa",
|
8527 | "Section-secondary": "p_tz",
|
8528 | "Section-fullWidth": "p_wd",
|
8529 | "AnnotatedSection": "p_ve",
|
8530 | "AnnotationWrapper": "p_ey",
|
8531 | "AnnotationContent": "p_ko",
|
8532 | "Annotation": "p_mo",
|
8533 | "AnnotationDescription": "p_y4",
|
8534 | };
|
8535 |
|
8536 | function AnnotatedSection$1(props) {
|
8537 | const children = props.children,
|
8538 | title = props.title,
|
8539 | description = props.description;
|
8540 |
|
8541 | const descriptionMarkup = typeof description === 'string' ? React.createElement(
|
8542 | 'p',
|
8543 | null,
|
8544 | description
|
8545 | ) : description;
|
8546 | return React.createElement(
|
8547 | 'div',
|
8548 | { className: styles$59.AnnotatedSection },
|
8549 | React.createElement(
|
8550 | 'div',
|
8551 | { className: styles$59.AnnotationWrapper },
|
8552 | React.createElement(
|
8553 | 'div',
|
8554 | { className: styles$59.Annotation },
|
8555 | React.createElement(
|
8556 | TextContainer$1,
|
8557 | null,
|
8558 | React.createElement(
|
8559 | Heading$1,
|
8560 | null,
|
8561 | title
|
8562 | ),
|
8563 | descriptionMarkup && React.createElement(
|
8564 | 'div',
|
8565 | { className: styles$59.AnnotationDescription },
|
8566 | descriptionMarkup
|
8567 | )
|
8568 | )
|
8569 | ),
|
8570 | React.createElement(
|
8571 | 'div',
|
8572 | { className: styles$59.AnnotationContent },
|
8573 | children
|
8574 | )
|
8575 | )
|
8576 | );
|
8577 | }
|
8578 |
|
8579 | function Section$7({ children, secondary, fullWidth }) {
|
8580 | const className = styles.classNames(styles$59.Section, secondary && styles$59['Section-secondary'], fullWidth && styles$59['Section-fullWidth']);
|
8581 | return React.createElement(
|
8582 | 'div',
|
8583 | { className: className },
|
8584 | children
|
8585 | );
|
8586 | }
|
8587 |
|
8588 | class Layout$1 extends React.Component {
|
8589 | render() {
|
8590 | var _props = this.props;
|
8591 | const children = _props.children,
|
8592 | sectioned = _props.sectioned;
|
8593 |
|
8594 | const content = sectioned ? React.createElement(
|
8595 | Section$7,
|
8596 | null,
|
8597 | children
|
8598 | ) : children;
|
8599 | return React.createElement(
|
8600 | 'div',
|
8601 | { className: styles$59.Layout },
|
8602 | content
|
8603 | );
|
8604 | }
|
8605 | }
|
8606 | Layout$1.AnnotatedSection = AnnotatedSection$1;
|
8607 | Layout$1.Section = Section$7;
|
8608 |
|
8609 | var styles$60 = {
|
8610 | "Link": "p_d5",
|
8611 | };
|
8612 |
|
8613 | function Link$2({ url, children, onClick, external, id }) {
|
8614 | return url ? React.createElement(
|
8615 | UnstyledLink$2,
|
8616 | { onClick: onClick, className: styles$60.Link, url: url, external: external, id: id },
|
8617 | children
|
8618 | ) : React.createElement(
|
8619 | 'button',
|
8620 | { onClick: onClick, className: styles$60.Link, id: id },
|
8621 | children
|
8622 | );
|
8623 | }
|
8624 |
|
8625 | var styles$61 = {
|
8626 | "List": "p_hf",
|
8627 | "typeNumber": "p_y6",
|
8628 | "Item": "p_tn",
|
8629 | };
|
8630 |
|
8631 | function Item$14({ children }) {
|
8632 | return React.createElement(
|
8633 | 'li',
|
8634 | { className: styles$61.Item },
|
8635 | children
|
8636 | );
|
8637 | }
|
8638 |
|
8639 | class ContentList extends React.PureComponent {
|
8640 | render() {
|
8641 | var _props = this.props;
|
8642 | const children = _props.children;
|
8643 | var _props$type = _props.type;
|
8644 | const type = _props$type === undefined ? 'bullet' : _props$type;
|
8645 |
|
8646 | const className = styles.classNames(styles$61.List, type && styles$61[styles.variationName('type', type)]);
|
8647 | const ListElement = type === 'bullet' ? 'ul' : 'ol';
|
8648 | return React.createElement(
|
8649 | ListElement,
|
8650 | { className: className },
|
8651 | children
|
8652 | );
|
8653 | }
|
8654 | }
|
8655 | ContentList.Item = Item$14;
|
8656 |
|
8657 | var styles$62 = {
|
8658 | "Media": "p_tc",
|
8659 | "link": "p_t5",
|
8660 | "active": "p_e2",
|
8661 | "Title": "p_m6",
|
8662 | "Image": "p_zb",
|
8663 | "Content": "p_ot",
|
8664 | "Link": "p_wh",
|
8665 | "Button": "p_z3",
|
8666 | "Header": "p_rm",
|
8667 | "Badge": "p_sq",
|
8668 | };
|
8669 |
|
8670 | var styles$63 = {
|
8671 | "Thumbnail": "p_ks",
|
8672 | "sizeExtraSmall": "p_q6",
|
8673 | "sizeSmall": "p_wt",
|
8674 | "sizeMedium": "p_ro",
|
8675 | "sizeLarge": "p_cw",
|
8676 | "Image": "p_r8",
|
8677 | "File": "p_xd",
|
8678 | };
|
8679 |
|
8680 | function Thumbnail$1({ source, alt, abbr, size = 'medium' }) {
|
8681 | const className = styles.classNames(styles$63.Thumbnail, size && styles$63[styles.variationName('size', size)]);
|
8682 | const contentMarkup = source ? React.createElement(Image$1, { alt: alt, source: source, className: styles$63.Image }) : React.createElement(
|
8683 | 'div',
|
8684 | { className: styles$63.File },
|
8685 | abbr
|
8686 | );
|
8687 | return React.createElement(
|
8688 | 'span',
|
8689 | { className: className },
|
8690 | contentMarkup
|
8691 | );
|
8692 | }
|
8693 |
|
8694 | function Media$1({
|
8695 | // children,
|
8696 | // data,
|
8697 | // content,
|
8698 | // label,
|
8699 | header, body, bodySpacing, url, avatar, avatarSource, thumbnailSource, thumbnailAbbr, thumbnailSize, icon, iconColor, iconBackdrop, badgeText, badgeStatus, active }) {
|
8700 | const className = reactUtilities.classNames(styles$62.Media, url && styles$62.link, active && styles$62.active);
|
8701 | const iconMarkup = icon ? React.createElement(
|
8702 | 'div',
|
8703 | { className: styles$62.Image },
|
8704 | React.createElement(Icon$2, { source: icon, color: iconColor ? iconColor : "inkLighter", backdrop: iconBackdrop ? true : false })
|
8705 | ) : null;
|
8706 | const badgeMarkup = badgeText ? React.createElement(
|
8707 | Hide$1,
|
8708 | { below: 'mobile' },
|
8709 | React.createElement(
|
8710 | 'div',
|
8711 | { className: styles$62.Badge },
|
8712 | React.createElement(
|
8713 | Badge$2,
|
8714 | { status: badgeStatus },
|
8715 | badgeText
|
8716 | )
|
8717 | )
|
8718 | ) : null;
|
8719 | const headerMarkup = header ? React.createElement(
|
8720 | 'header',
|
8721 | { className: styles$62.Header },
|
8722 | React.createElement(
|
8723 | 'span',
|
8724 | { className: styles$62.Title },
|
8725 | header
|
8726 | ),
|
8727 | badgeMarkup
|
8728 | ) : null;
|
8729 | const bodyMarkup = body ? React.createElement(
|
8730 | 'div',
|
8731 | { className: styles$62.Body },
|
8732 | body
|
8733 | ) : null;
|
8734 | const linkMarkup = url ? React.createElement(UnstyledLink$2, { className: styles$62.Link, url: url }) : null;
|
8735 | const avatarMarkup = avatar ? React.createElement(
|
8736 | 'div',
|
8737 | { className: styles$62.Image },
|
8738 | React.createElement(Avatar$2, { size: 'small', customer: true, name: avatar, source: avatarSource })
|
8739 | ) : null;
|
8740 | const thumbnailMarkup = thumbnailSource ? React.createElement(
|
8741 | 'div',
|
8742 | { className: styles$62.Image },
|
8743 | React.createElement(Thumbnail$1, { alt: 'thumbnail', size: thumbnailSize ? thumbnailSize : "small", source: thumbnailSource })
|
8744 | ) : thumbnailAbbr ? React.createElement(
|
8745 | 'div',
|
8746 | { className: styles$62.Image },
|
8747 | React.createElement(Thumbnail$1, { alt: 'thumbnail', size: thumbnailSize ? thumbnailSize : "small", abbr: thumbnailAbbr })
|
8748 | ) : null;
|
8749 | return React.createElement(
|
8750 | 'div',
|
8751 | { className: className },
|
8752 | iconMarkup,
|
8753 | avatarMarkup,
|
8754 | thumbnailMarkup,
|
8755 | React.createElement(
|
8756 | 'div',
|
8757 | { className: styles$62.Content },
|
8758 | React.createElement(
|
8759 | Stack$1,
|
8760 | { vertical: true, spacing: bodySpacing ? bodySpacing : 'none' },
|
8761 | headerMarkup,
|
8762 | bodyMarkup
|
8763 | )
|
8764 | ),
|
8765 | linkMarkup
|
8766 | );
|
8767 | }
|
8768 |
|
8769 | function memoizedBind(callback, ...args) {
|
8770 | return function bound() {
|
8771 | return callback(...args);
|
8772 | };
|
8773 | }
|
8774 | var memoizedBind$1 = memoize$1(memoizedBind);
|
8775 |
|
8776 | var styles$64 = {
|
8777 | "Container": "p_af",
|
8778 | "Modal": "p_dy",
|
8779 | "limitHeight": "p_bo",
|
8780 | "sizeLarge": "p_me",
|
8781 | "animateFadeUp": "p_px",
|
8782 | "entering": "p_ev",
|
8783 | "exiting": "p_lc",
|
8784 | "exited": "p_ul",
|
8785 | "entered": "p_pa",
|
8786 | };
|
8787 |
|
8788 | function DialogContainer(props) {
|
8789 | return React.createElement(
|
8790 | 'div',
|
8791 | { className: styles$64.Container, 'data-polaris-layer': true, 'data-polaris-overlay': true },
|
8792 | props.children
|
8793 | );
|
8794 | }
|
8795 | function Dialog$1(_a) {
|
8796 | var instant = _a.instant,
|
8797 | labelledBy = _a.labelledBy,
|
8798 | children = _a.children,
|
8799 | onClose = _a.onClose,
|
8800 | onExited = _a.onExited,
|
8801 | onEntered = _a.onEntered,
|
8802 | large = _a.large,
|
8803 | limitHeight = _a.limitHeight,
|
8804 | props = tslib_1.__rest(_a, ["instant", "labelledBy", "children", "onClose", "onExited", "onEntered", "large", "limitHeight"]);
|
8805 |
|
8806 | const classes = styles.classNames(styles$64.Modal, large && styles$64.sizeLarge, limitHeight && styles$64.limitHeight);
|
8807 | const handleClose = memoizedBind$1(onClose);
|
8808 | const TransitionChild = instant ? reactTransitionGroup.Transition : FadeUp;
|
8809 | return React.createElement(
|
8810 | TransitionChild,
|
8811 | Object.assign({}, props, { mountOnEnter: true, unmountOnExit: true, timeout: Duration.Base, onEntered: onEntered, onExited: onExited }),
|
8812 | React.createElement(
|
8813 | DialogContainer,
|
8814 | null,
|
8815 | React.createElement(
|
8816 | TrapFocus,
|
8817 | null,
|
8818 | React.createElement(
|
8819 | 'div',
|
8820 | { className: classes, role: 'dialog', 'aria-labelledby': labelledBy, tabIndex: -1 },
|
8821 | React.createElement(KeypressListener$1, { keyCode: exports.Keys.ESCAPE, handler: handleClose }),
|
8822 | children
|
8823 | )
|
8824 | )
|
8825 | )
|
8826 | );
|
8827 | }
|
8828 | const fadeUpClasses = {
|
8829 | enter: styles.classNames(styles$64.animateFadeUp, styles$64.entering),
|
8830 | enterActive: styles.classNames(styles$64.animateFadeUp, styles$64.entered),
|
8831 | exit: styles.classNames(styles$64.animateFadeUp, styles$64.exiting),
|
8832 | exitActive: styles.classNames(styles$64.animateFadeUp, styles$64.exited)
|
8833 | };
|
8834 | function FadeUp(_a) {
|
8835 | var children = _a.children,
|
8836 | props = tslib_1.__rest(_a, ["children"]);
|
8837 | return React.createElement(
|
8838 | reactTransitionGroup.CSSTransition,
|
8839 | Object.assign({}, props, { classNames: fadeUpClasses }),
|
8840 | children
|
8841 | );
|
8842 | }
|
8843 |
|
8844 | var styles$65 = {
|
8845 | "Footer": "p_ie",
|
8846 | "FooterContent": "p_wu",
|
8847 | };
|
8848 |
|
8849 | function Footer$1({ primaryAction, secondaryActions, children }) {
|
8850 | const primaryActionButton = primaryAction && buttonsFrom(primaryAction, { primary: true }) || null;
|
8851 | const secondaryActionButtons = secondaryActions && buttonsFrom(secondaryActions) || null;
|
8852 | const actions = primaryActionButton || secondaryActionButtons ? React.createElement(
|
8853 | ButtonGroup$1,
|
8854 | null,
|
8855 | secondaryActionButtons,
|
8856 | primaryActionButton
|
8857 | ) : null;
|
8858 | return React.createElement(
|
8859 | 'div',
|
8860 | { className: styles$65.Footer },
|
8861 | React.createElement(
|
8862 | 'div',
|
8863 | { className: styles$65.FooterContent },
|
8864 | React.createElement(
|
8865 | Stack$1,
|
8866 | { alignment: 'center' },
|
8867 | React.createElement(
|
8868 | Stack$1.Item,
|
8869 | { fill: true },
|
8870 | children
|
8871 | ),
|
8872 | actions
|
8873 | )
|
8874 | )
|
8875 | );
|
8876 | }
|
8877 |
|
8878 | var styles$66 = {
|
8879 | "CloseButton": "p_aa",
|
8880 | "withoutTitle": "p_gl",
|
8881 | };
|
8882 |
|
8883 | function CloseButton$1({ title = true, onClick }) {
|
8884 | const className = reactUtilities.classNames(styles$66.CloseButton, !title && styles$66.withoutTitle);
|
8885 | return React.createElement(
|
8886 | 'button',
|
8887 | { onClick: onClick, className: className },
|
8888 | React.createElement(Icon$2, { source: 'cancel', color: 'inkLighter' })
|
8889 | );
|
8890 | }
|
8891 |
|
8892 | var styles$67 = {
|
8893 | "Header": "p_v3",
|
8894 | "Title": "p_n6",
|
8895 | };
|
8896 |
|
8897 | function Header$3({ id, children, onClose }) {
|
8898 | const handleClose = memoizedBind$1(onClose);
|
8899 | return React.createElement(
|
8900 | 'div',
|
8901 | { className: styles$67.Header },
|
8902 | React.createElement(
|
8903 | 'div',
|
8904 | { id: id, className: styles$67.Title },
|
8905 | React.createElement(
|
8906 | DisplayText$1,
|
8907 | { element: 'h2', size: 'small' },
|
8908 | children
|
8909 | )
|
8910 | ),
|
8911 | React.createElement(CloseButton$1, { onClick: handleClose })
|
8912 | );
|
8913 | }
|
8914 |
|
8915 | var styles$68 = {
|
8916 | "Section": "p_dv",
|
8917 | "subdued": "p_q8",
|
8918 | "flush": "p_qt",
|
8919 | };
|
8920 |
|
8921 | function Section$9({ children, flush = false, subdued = false }) {
|
8922 | const className = styles.classNames(styles$68.Section, flush && styles$68.flush, subdued && styles$68.subdued);
|
8923 | return React.createElement(
|
8924 | 'section',
|
8925 | { className: className },
|
8926 | children
|
8927 | );
|
8928 | }
|
8929 |
|
8930 | var styles$69 = {
|
8931 | "BodyWrapper": "p_jl",
|
8932 | "Body": "p_a8",
|
8933 | "IFrame": "p_be",
|
8934 | "Backdrop": "p_qo",
|
8935 | "Spinner": "p_oi",
|
8936 | "fade-in": "p_qd",
|
8937 | };
|
8938 |
|
8939 | const IFRAME_LOADING_HEIGHT = 200;
|
8940 | const getUniqueID$9 = other.createUniqueIDFactory('modal-header');
|
8941 | class Modal$2 extends React.Component {
|
8942 | constructor() {
|
8943 | super(...arguments);
|
8944 | this.state = {
|
8945 | iframeHeight: IFRAME_LOADING_HEIGHT
|
8946 | };
|
8947 | this.headerId = getUniqueID$9();
|
8948 | }
|
8949 | getChildContext() {
|
8950 | return {
|
8951 | withinContentContainer: true
|
8952 | };
|
8953 | }
|
8954 | componentDidMount() {
|
8955 | if (this.context.easdk == null) {
|
8956 | return;
|
8957 | }
|
8958 | const open = this.props.open;
|
8959 |
|
8960 | if (open) {
|
8961 | this.handleEASDKMessaging();
|
8962 | this.focusReturnPointNode = document.activeElement;
|
8963 | }
|
8964 | }
|
8965 | componentDidUpdate({ open: wasOpen }) {
|
8966 | if (this.context.easdk == null) {
|
8967 | return;
|
8968 | }
|
8969 | const open = this.props.open;
|
8970 |
|
8971 | if (wasOpen !== open) {
|
8972 | this.handleEASDKMessaging();
|
8973 | }
|
8974 | if (!wasOpen && open) {
|
8975 | this.focusReturnPointNode = document.activeElement;
|
8976 | } else if (wasOpen && !open && this.focusReturnPointNode != null && document.contains(this.focusReturnPointNode)) {
|
8977 | this.focusReturnPointNode.focus();
|
8978 | this.focusReturnPointNode = null;
|
8979 | }
|
8980 | }
|
8981 | render() {
|
8982 | if (this.context.easdk != null) {
|
8983 | return null;
|
8984 | }
|
8985 | var _props = this.props;
|
8986 | const children = _props.children,
|
8987 | onClose = _props.onClose,
|
8988 | title = _props.title,
|
8989 | src = _props.src,
|
8990 | iFrameName = _props.iFrameName,
|
8991 | open = _props.open;
|
8992 | var _props$instant = _props.instant;
|
8993 | const instant = _props$instant === undefined ? true : _props$instant,
|
8994 | sectioned = _props.sectioned,
|
8995 | loading = _props.loading,
|
8996 | large = _props.large,
|
8997 | limitHeight = _props.limitHeight,
|
8998 | footer = _props.footer,
|
8999 | primaryAction = _props.primaryAction,
|
9000 | secondaryActions = _props.secondaryActions,
|
9001 | intl = _props.polaris.intl;
|
9002 | const iframeHeight = this.state.iframeHeight;
|
9003 |
|
9004 | const iframeTitle = intl.translate('Polaris.Modal.iFrameTitle');
|
9005 | const handleClose = memoizedBind$1(onClose);
|
9006 | let dialog;
|
9007 | let backdrop;
|
9008 | if (open) {
|
9009 | const footerMarkup = !footer && !primaryAction && !secondaryActions ? null : React.createElement(
|
9010 | Footer$1,
|
9011 | { primaryAction: primaryAction, secondaryActions: secondaryActions },
|
9012 | footer
|
9013 | );
|
9014 | const content = sectioned ? reactUtilities.wrapWithComponent(children, Section$9) : children;
|
9015 | const body = loading ? React.createElement(
|
9016 | 'div',
|
9017 | { className: styles$69.Spinner },
|
9018 | React.createElement(Spinner$2, null)
|
9019 | ) : content;
|
9020 | const bodyMarkup = src ? React.createElement('iframe', { name: iFrameName, title: iframeTitle, src: src, className: styles$69.IFrame, onLoad: this.handleIFrameLoad, style: { height: `${iframeHeight}px` } }) : React.createElement(
|
9021 | Scrollable$2,
|
9022 | { shadow: true, className: styles$69.Body },
|
9023 | body
|
9024 | );
|
9025 | const headerMarkup = title ? React.createElement(
|
9026 | Header$3,
|
9027 | { id: this.headerId, onClose: handleClose },
|
9028 | title
|
9029 | ) : React.createElement(CloseButton$1, { onClick: handleClose, title: false });
|
9030 | dialog = React.createElement(
|
9031 | Dialog$1,
|
9032 | { instant: instant, labelledBy: this.headerId, onClose: handleClose, onEntered: this.handleEntered, onExited: this.handleExited, large: large, limitHeight: limitHeight },
|
9033 | headerMarkup,
|
9034 | React.createElement(
|
9035 | 'div',
|
9036 | { className: styles$69.BodyWrapper },
|
9037 | bodyMarkup
|
9038 | ),
|
9039 | footerMarkup
|
9040 | );
|
9041 | backdrop = React.createElement('div', { className: styles$69.Backdrop, onClick: handleClose });
|
9042 | }
|
9043 | const animated = !instant;
|
9044 | this.handleWarning('modal');
|
9045 | return React.createElement(
|
9046 | Portal$1,
|
9047 | { idPrefix: 'modal' },
|
9048 | React.createElement(
|
9049 | reactTransitionGroup.TransitionGroup,
|
9050 | { appear: animated, enter: animated, exit: animated },
|
9051 | dialog
|
9052 | ),
|
9053 | backdrop
|
9054 | );
|
9055 | }
|
9056 | handleEntered() {
|
9057 | const onTransitionEnd = this.props.onTransitionEnd;
|
9058 |
|
9059 | if (onTransitionEnd) {
|
9060 | onTransitionEnd();
|
9061 | }
|
9062 | }
|
9063 | handleExited() {
|
9064 | this.setState({
|
9065 | iframeHeight: IFRAME_LOADING_HEIGHT
|
9066 | });
|
9067 | if (this.focusReturnPointNode) {
|
9068 | fastdom.write(() => focus.focusFirstFocusableNode(this.focusReturnPointNode, false));
|
9069 | }
|
9070 | }
|
9071 | handleIFrameLoad(evt) {
|
9072 | const iframe = evt.target;
|
9073 | if (iframe && iframe.contentWindow) {
|
9074 | this.setState({
|
9075 | iframeHeight: iframe.contentWindow.document.body.scrollHeight
|
9076 | });
|
9077 | }
|
9078 | const onIFrameLoad = this.props.onIFrameLoad;
|
9079 |
|
9080 | if (onIFrameLoad != null) {
|
9081 | onIFrameLoad(evt);
|
9082 | }
|
9083 | }
|
9084 | handleEASDKMessaging() {
|
9085 | const easdk = this.context.easdk;
|
9086 | const open = this.props.open;
|
9087 |
|
9088 | if (easdk == null) {
|
9089 | return;
|
9090 | }
|
9091 | if (open) {
|
9092 | this.handleWarning('easdk');
|
9093 | easdk.Modal.open(this.props);
|
9094 | } else {
|
9095 | easdk.Modal.close();
|
9096 | }
|
9097 | }
|
9098 | handleWarning(type) {
|
9099 | const intl = this.props.polaris.intl;
|
9100 |
|
9101 | const reqProps = {
|
9102 | modal: {
|
9103 | open: 'open',
|
9104 | onClose: 'onClose'
|
9105 | },
|
9106 | easdk: {
|
9107 | open: 'open',
|
9108 | src: 'src',
|
9109 | onClose: 'onClose'
|
9110 | }
|
9111 | };
|
9112 | const missingProps = Object.keys(reqProps[type]).reduce((acc, key) => {
|
9113 | if (!this.props.hasOwnProperty(key)) {
|
9114 | acc.push(key);
|
9115 | }
|
9116 | return acc;
|
9117 | }, []);
|
9118 | if (missingProps.length > 0) {
|
9119 |
|
9120 | console.warn(intl.translate('Polaris.Modal.modalWarning', {
|
9121 | missingProps: missingProps.join(', ')
|
9122 | }));
|
9123 | }
|
9124 | const actionWarnings = handleActionWanrings(this.props.primaryAction, this.props.secondaryActions);
|
9125 | if (type === 'easdk' && actionWarnings.length > 0) {
|
9126 |
|
9127 | console.warn(intl.translate('Polaris.Modal.actionWarning', {
|
9128 | actionWarnings: actionWarnings.join(', ')
|
9129 | }));
|
9130 | }
|
9131 | }
|
9132 | }
|
9133 | Modal$2.contextTypes = { easdk: PropTypes.object };
|
9134 | Modal$2.childContextTypes = contentContextTypes;
|
9135 | Modal$2.Dialog = Dialog$1;
|
9136 | Modal$2.Section = Section$9;
|
9137 | tslib_1.__decorate([decorators.autobind], Modal$2.prototype, "handleEntered", null);
|
9138 | tslib_1.__decorate([decorators.autobind], Modal$2.prototype, "handleExited", null);
|
9139 | tslib_1.__decorate([decorators.autobind], Modal$2.prototype, "handleIFrameLoad", null);
|
9140 | function handleActionWanrings(primary = {}, secondary = []) {
|
9141 | const actions = [primary, ...secondary];
|
9142 | const actionKeysToIgnore = ['icon', 'loading'];
|
9143 | return actions.reduce((acc, action) => {
|
9144 | return acc.concat(...actionKeysToIgnore.filter(val => action[val] && acc.indexOf(val) === -1 && val));
|
9145 | }, []);
|
9146 | }
|
9147 | var Modal$3 = withAppProvider()(Modal$2);
|
9148 |
|
9149 | var styles$70 = {
|
9150 | "Option": "p_cx",
|
9151 | "SingleSelectOption": "p_my",
|
9152 | "disabled": "p_n0",
|
9153 | "Media": "p_tt",
|
9154 | "Label": "p_ek",
|
9155 | "Checkbox": "p_oj",
|
9156 | "focused": "p_mk",
|
9157 | "select": "p_s6",
|
9158 | "active": "p_hl",
|
9159 | };
|
9160 |
|
9161 | class Option$1 extends React.Component {
|
9162 | constructor() {
|
9163 | super(...arguments);
|
9164 | this.state = {
|
9165 | focused: false,
|
9166 | active: false
|
9167 | };
|
9168 | }
|
9169 | static getDerivedStateFromProps(nextProps, prevState) {
|
9170 | if (nextProps.active !== undefined && nextProps.active !== prevState.active) {
|
9171 | return nextProps.active ? { active: true } : { active: false };
|
9172 | }
|
9173 | return null;
|
9174 | }
|
9175 | render() {
|
9176 | var _props = this.props;
|
9177 | const label = _props.label,
|
9178 | value = _props.value,
|
9179 | id = _props.id,
|
9180 | select = _props.select,
|
9181 | active = _props.active,
|
9182 | allowMultiple = _props.allowMultiple,
|
9183 | disabled = _props.disabled,
|
9184 | role = _props.role,
|
9185 | media = _props.media;
|
9186 | const focused = this.state.focused;
|
9187 |
|
9188 | const mediaMarkup = media ? React.createElement(
|
9189 | 'div',
|
9190 | { className: styles$70.Media },
|
9191 | media
|
9192 | ) : null;
|
9193 | const singleSelectClassName = styles.classNames(styles$70.SingleSelectOption, focused && styles$70.focused, disabled && styles$70.disabled, select && styles$70.select, active && styles$70.active);
|
9194 | const multiSelectClassName = styles.classNames(styles$70.Label, active && styles$70.active);
|
9195 | const checkBoxRole = role === 'option' ? 'presentation' : undefined;
|
9196 | const optionMarkup = allowMultiple ? React.createElement(
|
9197 | 'label',
|
9198 | { htmlFor: id, className: multiSelectClassName },
|
9199 | React.createElement(
|
9200 | 'div',
|
9201 | { className: styles$70.Checkbox },
|
9202 | React.createElement(Checkbox$4, { id: id, value: value, checked: select, active: active, disabled: disabled, onChange: this.handleClick, role: checkBoxRole })
|
9203 | ),
|
9204 | mediaMarkup,
|
9205 | label
|
9206 | ) : React.createElement(
|
9207 | 'button',
|
9208 | { type: 'button', className: singleSelectClassName, onClick: this.handleClick, disabled: disabled, onFocus: this.toggleFocus, onBlur: this.toggleFocus },
|
9209 | mediaMarkup,
|
9210 | label
|
9211 | );
|
9212 | const scrollMarkup = active ? React.createElement(Scrollable$2.ScrollTo, null) : null;
|
9213 | return React.createElement(
|
9214 | 'li',
|
9215 | { key: id, className: styles$70.Option, tabIndex: -1, 'aria-selected': active, role: role },
|
9216 | scrollMarkup,
|
9217 | optionMarkup
|
9218 | );
|
9219 | }
|
9220 | handleClick() {
|
9221 | var _props2 = this.props;
|
9222 | const onClick = _props2.onClick,
|
9223 | section = _props2.section,
|
9224 | index = _props2.index,
|
9225 | disabled = _props2.disabled;
|
9226 |
|
9227 | if (disabled) {
|
9228 | return;
|
9229 | }
|
9230 | onClick(section, index);
|
9231 | }
|
9232 | toggleFocus() {
|
9233 | this.setState(prevState => ({ focused: !prevState.focused }));
|
9234 | }
|
9235 | }
|
9236 | tslib_1.__decorate([decorators.autobind], Option$1.prototype, "handleClick", null);
|
9237 | tslib_1.__decorate([decorators.autobind], Option$1.prototype, "toggleFocus", null);
|
9238 |
|
9239 | var styles$71 = {
|
9240 | "Checkbox": "p_n5",
|
9241 | "Input": "p_q4",
|
9242 | "Backdrop": "p_je",
|
9243 | "Input-indeterminate": "p_bx",
|
9244 | "Icon": "p_iv",
|
9245 | "active": "p_oo",
|
9246 | };
|
9247 |
|
9248 | const getUniqueID$10 = other.createUniqueIDFactory('Checkbox');
|
9249 | function Checkbox$4({ id = getUniqueID$10(), checked = false, disabled, active, onChange, name, value, role }) {
|
9250 | const className = styles.classNames(styles$71.Checkbox, active && styles$71.active);
|
9251 | return React.createElement(
|
9252 | 'div',
|
9253 | { className: className },
|
9254 | React.createElement('input', { id: id, name: name, value: value, type: 'checkbox', checked: checked, disabled: disabled, className: styles$71.Input, 'aria-checked': checked, onChange: onChange, role: role }),
|
9255 | React.createElement('div', { className: styles$71.Backdrop }),
|
9256 | React.createElement(
|
9257 | 'div',
|
9258 | { className: styles$71.Icon },
|
9259 | React.createElement(Icon$2, { source: 'checkmark' })
|
9260 | )
|
9261 | );
|
9262 | }
|
9263 |
|
9264 | function arraysAreEqual(firstArray, secondArray, comparator) {
|
9265 | if (firstArray.length !== secondArray.length) {
|
9266 | return false;
|
9267 | }
|
9268 | return firstArray.every((firstItem, index) => {
|
9269 | const secondItem = secondArray[index];
|
9270 | if (comparator != null) {
|
9271 | return comparator(firstItem, secondItem);
|
9272 | }
|
9273 | return firstItem === secondItem;
|
9274 | });
|
9275 | }
|
9276 |
|
9277 | var styles$72 = {
|
9278 | "OptionList": "p_z5",
|
9279 | "Options": "p_up",
|
9280 | "Title": "p_ea",
|
9281 | };
|
9282 |
|
9283 | const getUniqueId = other.createUniqueIDFactory('OptionList');
|
9284 | class OptionList$1 extends React.Component {
|
9285 | constructor() {
|
9286 | super(...arguments);
|
9287 | this.state = {
|
9288 | normalizedOptions: createNormalizedOptions(this.props.options, this.props.sections, this.props.title)
|
9289 | };
|
9290 | this.id = this.props.id || getUniqueId();
|
9291 | }
|
9292 |
|
9293 | componentWillReceiveProps({ options: nextOptions = [], sections: nextSections = [], id: nextID, title: nextTitle }) {
|
9294 | var _props = this.props,
|
9295 | _props$options = _props.options;
|
9296 | const options = _props$options === undefined ? [] : _props$options;
|
9297 | var _props$sections = _props.sections;
|
9298 | const sections = _props$sections === undefined ? [] : _props$sections,
|
9299 | id = _props.id,
|
9300 | title = _props.title;
|
9301 |
|
9302 | if (id !== nextID) {
|
9303 | this.id = nextID || this.id;
|
9304 | }
|
9305 | const optionsChanged = !arraysAreEqual(nextOptions, options);
|
9306 | const sectionsChanged = !arraysAreEqual(nextSections, sections, testSectionsPropEquality);
|
9307 | const titleChanged = title !== nextTitle;
|
9308 | if (optionsChanged || sectionsChanged || titleChanged) {
|
9309 | this.setState({
|
9310 | normalizedOptions: createNormalizedOptions(nextOptions, nextSections, nextTitle)
|
9311 | });
|
9312 | }
|
9313 | }
|
9314 | render() {
|
9315 | const normalizedOptions = this.state.normalizedOptions;
|
9316 | var _props2 = this.props;
|
9317 | const selected = _props2.selected,
|
9318 | allowMultiple = _props2.allowMultiple,
|
9319 | role = _props2.role,
|
9320 | optionRole = _props2.optionRole;
|
9321 |
|
9322 | const optionsExist = normalizedOptions.length > 0;
|
9323 | const optionsMarkup = optionsExist ? normalizedOptions.map(({ title, options }, sectionIndex) => {
|
9324 | const titleMarkup = title ? React.createElement(
|
9325 | 'p',
|
9326 | { className: styles$72.Title, role: 'presentation' },
|
9327 | title
|
9328 | ) : null;
|
9329 | const optionsMarkup = options && options.map((option, optionIndex) => {
|
9330 | const isSelected = selected.includes(option.value);
|
9331 | const id = option.id || `${this.id}-${sectionIndex}-${optionIndex}`;
|
9332 | return React.createElement(Option$1, Object.assign({}, option, { key: id, id: id, section: sectionIndex, index: optionIndex, onClick: this.handleClick, select: isSelected, allowMultiple: allowMultiple, role: optionRole }));
|
9333 | });
|
9334 | return React.createElement(
|
9335 | 'li',
|
9336 | { key: title || `noTitle-${sectionIndex}` },
|
9337 | titleMarkup,
|
9338 | React.createElement(
|
9339 | 'ul',
|
9340 | { className: styles$72.Options, id: this.id, role: role, 'aria-multiselectable': allowMultiple },
|
9341 | optionsMarkup
|
9342 | )
|
9343 | );
|
9344 | }) : null;
|
9345 | return React.createElement(
|
9346 | 'ul',
|
9347 | { className: styles$72.OptionList },
|
9348 | optionsMarkup
|
9349 | );
|
9350 | }
|
9351 | handleClick(sectionIndex, optionIndex) {
|
9352 | var _props3 = this.props;
|
9353 | const selected = _props3.selected,
|
9354 | onChange = _props3.onChange,
|
9355 | allowMultiple = _props3.allowMultiple;
|
9356 |
|
9357 | const selectedValue = this.state.normalizedOptions[sectionIndex].options[optionIndex].value;
|
9358 | const foundIndex = selected.indexOf(selectedValue);
|
9359 | if (allowMultiple) {
|
9360 | const newSelection = foundIndex === -1 ? [selectedValue, ...selected] : [...selected.slice(0, foundIndex), ...selected.slice(foundIndex + 1, selected.length)];
|
9361 | onChange(newSelection);
|
9362 | return;
|
9363 | }
|
9364 | onChange([selectedValue]);
|
9365 | }
|
9366 | }
|
9367 | tslib_1.__decorate([decorators.autobind], OptionList$1.prototype, "handleClick", null);
|
9368 | function createNormalizedOptions(options, sections, title) {
|
9369 | if (options == null) {
|
9370 | const section = { options: [], title };
|
9371 | return sections == null ? [] : [section, ...sections];
|
9372 | }
|
9373 | if (sections == null) {
|
9374 | return [{
|
9375 | title,
|
9376 | options
|
9377 | }];
|
9378 | }
|
9379 | return [{
|
9380 | title,
|
9381 | options
|
9382 | }, ...sections];
|
9383 | }
|
9384 | function testSectionsPropEquality(previousSection, currentSection) {
|
9385 | const previousOptions = previousSection.options;
|
9386 | const currentOptions = currentSection.options;
|
9387 |
|
9388 | const optionsAreEqual = arraysAreEqual(previousOptions, currentOptions);
|
9389 | const titlesAreEqual = previousSection.title === currentSection.title;
|
9390 | return optionsAreEqual && titlesAreEqual;
|
9391 | }
|
9392 | var OptionList$2 = withAppProvider()(OptionList$1);
|
9393 |
|
9394 | var styles$73 = {
|
9395 | "Page": "p_zl",
|
9396 | "fullWidth": "p_te",
|
9397 | "singleColumn": "p_yf",
|
9398 | "Header": "p_rd",
|
9399 | "Header-hasPagination": "p_mp",
|
9400 | "Header-hasBreadcrumbs": "p_g2",
|
9401 | "Header-hasSecondaryActions": "p_at",
|
9402 | "Header-hasSeparator": "p_qs",
|
9403 | "Content": "p_hb",
|
9404 | "Header-hasRollup": "p_u7",
|
9405 | "IndividualActions": "p_lf",
|
9406 | "Rollup": "p_r0",
|
9407 | "Navigation": "p_qz",
|
9408 | "Pagination": "p_jm",
|
9409 | "MainContent": "p_ua",
|
9410 | "TitleAndActions": "p_tl",
|
9411 | "Title": "p_wf",
|
9412 | "Title-hidden": "p_c6",
|
9413 | "Actions": "p_iu",
|
9414 | "SecondaryActions": "p_kz",
|
9415 | "Action": "p_w2",
|
9416 | "ActionGroup": "p_no",
|
9417 | "PrimaryAction": "p_ds",
|
9418 | "ActionIcon": "p_bl",
|
9419 | "disabled": "p_ju",
|
9420 | "ActionContent": "p_q7",
|
9421 | "Details": "p_uu",
|
9422 | "withActions": "p_kj",
|
9423 | "Action-outline": "p_aw",
|
9424 | };
|
9425 |
|
9426 | function Action$1({ icon, url, external, onAction, children, disclosure, accessibilityLabel, disabled, showIndicator, hasIndicator }) {
|
9427 | const iconMarkup = icon ? React.createElement(
|
9428 | 'span',
|
9429 | { className: styles$73.ActionIcon },
|
9430 | React.createElement(Icon$2, { source: icon })
|
9431 | ) : null;
|
9432 | const disclosureIconMarkup = disclosure ? React.createElement(
|
9433 | 'span',
|
9434 | { className: styles$73.ActionIcon },
|
9435 | React.createElement(Icon$2, { source: 'caretDown' })
|
9436 | ) : null;
|
9437 | const contentMarkup = iconMarkup || disclosureIconMarkup ? React.createElement(
|
9438 | 'span',
|
9439 | { className: styles$73.ActionContent },
|
9440 | iconMarkup,
|
9441 | React.createElement(
|
9442 | 'span',
|
9443 | null,
|
9444 | children
|
9445 | ),
|
9446 | disclosureIconMarkup
|
9447 | ) : children;
|
9448 | if (url) {
|
9449 | return React.createElement(
|
9450 | UnstyledLink$2,
|
9451 | { key: children, external: external, url: url, onMouseUp: handleMouseUpByBlurring, className: styles$73.Action, 'aria-label': accessibilityLabel },
|
9452 | contentMarkup
|
9453 | );
|
9454 | }
|
9455 | const indicatorMarkup = false && showIndicator && !hasIndicator && React.createElement(Indicator$1, null);
|
9456 | const className = reactUtilities.classNames(styles$73.Action, disabled && styles$73.disabled, icon && children == null && styles$73.iconOnly, false && showIndicator && styles$73['Action-outline']);
|
9457 | return React.createElement(
|
9458 | 'button',
|
9459 | { key: children, className: className, onClick: onAction, onMouseUp: handleMouseUpByBlurring, 'aria-label': accessibilityLabel, type: 'button', disabled: disabled },
|
9460 | indicatorMarkup,
|
9461 | contentMarkup
|
9462 | );
|
9463 | }
|
9464 |
|
9465 | var EditableTarget;
|
9466 | (function (EditableTarget) {
|
9467 | EditableTarget["Input"] = "INPUT";
|
9468 | EditableTarget["Textarea"] = "TEXTAREA";
|
9469 | EditableTarget["Select"] = "SELECT";
|
9470 | EditableTarget["ContentEditable"] = "contenteditable";
|
9471 | })(EditableTarget || (EditableTarget = {}));
|
9472 | function isInputFocused() {
|
9473 | if (document == null) {
|
9474 | return false;
|
9475 | }
|
9476 | const tagName = document.activeElement.tagName;
|
9477 |
|
9478 | return tagName === EditableTarget.Input || tagName === EditableTarget.Textarea || tagName === EditableTarget.Select || document.activeElement.hasAttribute(EditableTarget.ContentEditable);
|
9479 | }
|
9480 |
|
9481 | var styles$74 = {
|
9482 | "Tooltip": "p_gz",
|
9483 | "measuring": "p_j3",
|
9484 | "positionedAbove": "p_v4",
|
9485 | "Tip": "p_p4",
|
9486 | "light": "p_se",
|
9487 | "Wrapper": "p_yt",
|
9488 | "Content": "p_zj",
|
9489 | "Label": "p_dc",
|
9490 | };
|
9491 |
|
9492 | class TooltipOverlay$1 extends React.PureComponent {
|
9493 | render() {
|
9494 | const markup = this.props.active ? this.renderOverlay() : null;
|
9495 | return markup;
|
9496 | }
|
9497 | renderOverlay() {
|
9498 | var _props = this.props;
|
9499 | const active = _props.active,
|
9500 | activator = _props.activator;
|
9501 | var _props$preferredPosit = _props.preferredPosition;
|
9502 | const preferredPosition = _props$preferredPosit === undefined ? 'below' : _props$preferredPosit;
|
9503 |
|
9504 | return React.createElement(PositionedOverlay$1, { active: active, activator: activator, preferredPosition: preferredPosition, render: this.renderTooltip });
|
9505 | }
|
9506 | renderTooltip(overlayDetails) {
|
9507 | const measuring = overlayDetails.measuring,
|
9508 | desiredHeight = overlayDetails.desiredHeight,
|
9509 | positioning = overlayDetails.positioning;
|
9510 | var _props2 = this.props;
|
9511 | const id = _props2.id,
|
9512 | children = _props2.children,
|
9513 | light = _props2.light;
|
9514 |
|
9515 | const containerClassName = styles.classNames(styles$74.Tooltip, light && styles$74.light, measuring && styles$74.measuring, positioning === 'above' && styles$74.positionedAbove);
|
9516 | const contentStyles = measuring ? undefined : { maxHeight: desiredHeight };
|
9517 | return React.createElement(
|
9518 | 'div',
|
9519 | Object.assign({ className: containerClassName }, layer.props),
|
9520 | React.createElement(
|
9521 | 'div',
|
9522 | { className: styles$74.Wrapper },
|
9523 | React.createElement(
|
9524 | 'div',
|
9525 | { id: id, role: 'tooltip', className: styles$74.Content, style: contentStyles },
|
9526 | children
|
9527 | )
|
9528 | )
|
9529 | );
|
9530 | }
|
9531 | }
|
9532 | tslib_1.__decorate([decorators.autobind], TooltipOverlay$1.prototype, "renderOverlay", null);
|
9533 | tslib_1.__decorate([decorators.autobind], TooltipOverlay$1.prototype, "renderTooltip", null);
|
9534 |
|
9535 | const getUniqueID$11 = other.createUniqueIDFactory('TooltipContent');
|
9536 | class Tooltip$1 extends React.PureComponent {
|
9537 | constructor() {
|
9538 | super(...arguments);
|
9539 | this.state = {
|
9540 | active: Boolean(this.props.active),
|
9541 | activatorNode: null
|
9542 | };
|
9543 | this.id = getUniqueID$11();
|
9544 | }
|
9545 | componentDidMount() {
|
9546 | this.setAccessibilityAttributes();
|
9547 | }
|
9548 | componentDidUpdate() {
|
9549 | this.setAccessibilityAttributes();
|
9550 | }
|
9551 | render() {
|
9552 | const id = this.id;
|
9553 | var _props = this.props;
|
9554 | const children = _props.children,
|
9555 | content = _props.content,
|
9556 | light = _props.light;
|
9557 | var _props$preferredPosit = _props.preferredPosition;
|
9558 | const preferredPosition = _props$preferredPosit === undefined ? 'above' : _props$preferredPosit;
|
9559 | var _props$activatorWrapp = _props.activatorWrapper;
|
9560 | const WrapperComponent = _props$activatorWrapp === undefined ? 'span' : _props$activatorWrapp;
|
9561 | var _state = this.state;
|
9562 | const active = _state.active,
|
9563 | activatorNode = _state.activatorNode;
|
9564 |
|
9565 | const portal = activatorNode ? React.createElement(
|
9566 | Portal$1,
|
9567 | { idPrefix: 'tooltip' },
|
9568 | React.createElement(
|
9569 | TooltipOverlay$1,
|
9570 | { id: id, preferredPosition: preferredPosition, activator: activatorNode, active: active, onClose: other.noop, light: light },
|
9571 | React.createElement(
|
9572 | 'div',
|
9573 | { className: styles$74.Label },
|
9574 | content
|
9575 | )
|
9576 | )
|
9577 | ) : null;
|
9578 | return React.createElement(
|
9579 | WrapperComponent,
|
9580 | { onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, ref: this.setActivator },
|
9581 | children,
|
9582 | portal
|
9583 | );
|
9584 | }
|
9585 | setActivator(node) {
|
9586 | if (node == null) {
|
9587 | this.activatorContainer = null;
|
9588 | this.setState({ activatorNode: null });
|
9589 | return;
|
9590 | }
|
9591 | this.setState({ activatorNode: node.firstElementChild });
|
9592 | this.activatorContainer = node;
|
9593 | }
|
9594 | handleFocus() {
|
9595 | this.setState({ active: true });
|
9596 | }
|
9597 | handleBlur() {
|
9598 | this.setState({ active: false });
|
9599 | }
|
9600 | handleMouseEnter() {
|
9601 | this.setState({ active: true });
|
9602 | }
|
9603 | handleMouseLeave() {
|
9604 | this.setState({ active: false });
|
9605 | }
|
9606 | setAccessibilityAttributes() {
|
9607 | const activatorContainer = this.activatorContainer,
|
9608 | id = this.id;
|
9609 |
|
9610 | if (activatorContainer == null) {
|
9611 | return;
|
9612 | }
|
9613 | const firstFocusable = focus.findFirstFocusableNode(activatorContainer);
|
9614 | const accessibilityNode = firstFocusable || activatorContainer;
|
9615 | accessibilityNode.tabIndex = 0;
|
9616 | accessibilityNode.setAttribute('aria-describedby', id);
|
9617 | }
|
9618 | }
|
9619 | tslib_1.__decorate([decorators.autobind], Tooltip$1.prototype, "setActivator", null);
|
9620 | tslib_1.__decorate([decorators.autobind], Tooltip$1.prototype, "handleFocus", null);
|
9621 | tslib_1.__decorate([decorators.autobind], Tooltip$1.prototype, "handleBlur", null);
|
9622 | tslib_1.__decorate([decorators.autobind], Tooltip$1.prototype, "handleMouseEnter", null);
|
9623 | tslib_1.__decorate([decorators.autobind], Tooltip$1.prototype, "handleMouseLeave", null);
|
9624 |
|
9625 | var styles$75 = {
|
9626 | "Pagination": "p_kq",
|
9627 | "plain": "p_c3",
|
9628 | "Button": "p_hs",
|
9629 | };
|
9630 |
|
9631 | function Pagination$1({ hasNext, hasPrevious, nextURL, previousURL, onNext, onPrevious, nextTooltip, previousTooltip, nextKeys, previousKeys, plain, accessibilityLabel, polaris: { intl } }) {
|
9632 | const node = React.createRef();
|
9633 | let label;
|
9634 | if (accessibilityLabel) {
|
9635 | label = accessibilityLabel;
|
9636 | } else {
|
9637 | label = intl.translate('Polaris.Pagination.pagination');
|
9638 | }
|
9639 | const className = reactUtilities.classNames(styles$75.Pagination, plain && styles$75.plain);
|
9640 | const previousButton = previousURL ? React.createElement(
|
9641 | UnstyledLink$2,
|
9642 | { className: styles$75.Button, url: previousURL, onMouseUp: handleMouseUpByBlurring, 'aria-label': intl.translate('Polaris.Pagination.previous'), id: 'previousURL' },
|
9643 | React.createElement(Icon$2, { source: 'arrowLeft' })
|
9644 | ) : React.createElement(
|
9645 | 'button',
|
9646 | { onClick: onPrevious, type: 'button', onMouseUp: handleMouseUpByBlurring, className: styles$75.Button, 'aria-label': intl.translate('Polaris.Pagination.previous'), disabled: !hasPrevious },
|
9647 | React.createElement(Icon$2, { source: 'arrowLeft' })
|
9648 | );
|
9649 | const nextButton = nextURL ? React.createElement(
|
9650 | UnstyledLink$2,
|
9651 | { className: styles$75.Button, url: nextURL, onMouseUp: handleMouseUpByBlurring, 'aria-label': intl.translate('Polaris.Pagination.next'), id: 'nextURL' },
|
9652 | React.createElement(Icon$2, { source: 'arrowRight' })
|
9653 | ) : React.createElement(
|
9654 | 'button',
|
9655 | { onClick: onNext, type: 'button', onMouseUp: handleMouseUpByBlurring, className: styles$75.Button, 'aria-label': intl.translate('Polaris.Pagination.next'), disabled: !hasNext },
|
9656 | React.createElement(Icon$2, { source: 'arrowRight' })
|
9657 | );
|
9658 | const constructedPrevious = previousTooltip ? React.createElement(
|
9659 | Tooltip$1,
|
9660 | { content: previousTooltip },
|
9661 | previousButton
|
9662 | ) : previousButton;
|
9663 | const constructedNext = nextTooltip ? React.createElement(
|
9664 | Tooltip$1,
|
9665 | { content: nextTooltip },
|
9666 | nextButton
|
9667 | ) : nextButton;
|
9668 | const previousButtonEvents = previousKeys && (previousURL || onPrevious) && previousKeys.map(key => React.createElement(KeypressListener$1, { key: key, keyCode: key, handler: previousURL ? handleCallback(clickPaginationLink('previousURL', node)) : handleCallback(onPrevious) }));
|
9669 | const nextButtonEvents = nextKeys && (nextURL || onNext) && nextKeys.map(key => React.createElement(KeypressListener$1, { key: key, keyCode: key, handler: nextURL ? handleCallback(clickPaginationLink('nextURL', node)) : handleCallback(onNext) }));
|
9670 | return React.createElement(
|
9671 | 'nav',
|
9672 | { className: className, 'aria-label': label, ref: node },
|
9673 | previousButtonEvents,
|
9674 | constructedPrevious,
|
9675 | nextButtonEvents,
|
9676 | constructedNext
|
9677 | );
|
9678 | }
|
9679 | function clickPaginationLink(id, node) {
|
9680 | return () => {
|
9681 | if (node.current == null) {
|
9682 | return;
|
9683 | }
|
9684 | const link = node.current.querySelector(`#${id}`);
|
9685 | if (link) {
|
9686 | link.click();
|
9687 | }
|
9688 | };
|
9689 | }
|
9690 | function handleCallback(fn) {
|
9691 | return () => {
|
9692 | if (isInputFocused()) {
|
9693 | return;
|
9694 | }
|
9695 | fn();
|
9696 | };
|
9697 | }
|
9698 | var Pagination$2 = withAppProvider()(Pagination$1);
|
9699 |
|
9700 | class Header$5 extends React.PureComponent {
|
9701 | constructor() {
|
9702 | super(...arguments);
|
9703 | this.state = {
|
9704 | rollupOpen: false
|
9705 | };
|
9706 | }
|
9707 | render() {
|
9708 | var _props = this.props;
|
9709 | const title = _props.title,
|
9710 | titleMetadata = _props.titleMetadata;
|
9711 | var _props$breadcrumbs = _props.breadcrumbs;
|
9712 | const breadcrumbs = _props$breadcrumbs === undefined ? [] : _props$breadcrumbs;
|
9713 | var _props$titleHidden = _props.titleHidden;
|
9714 | const titleHidden = _props$titleHidden === undefined ? false : _props$titleHidden,
|
9715 | primaryAction = _props.primaryAction,
|
9716 | pagination = _props.pagination,
|
9717 | separator = _props.separator,
|
9718 | secondaryActions = _props.secondaryActions;
|
9719 |
|
9720 | const className = styles.classNames(styles$73.Header, titleHidden && styles$73['Title-hidden'], pagination && styles$73['Header-hasPagination'], separator && styles$73['Header-hasSeparator'], breadcrumbs && breadcrumbs.length && styles$73['Header-hasBreadcrumbs'], this.hasRollup && styles$73['Header-hasRollup'], secondaryActions && secondaryActions.length && styles$73['Header-hasSecondaryActions']);
|
9721 | const breadcrumbMarkup = breadcrumbs.length > 0 ? React.createElement(Breadcrumbs$1, { breadcrumbs: breadcrumbs }) : null;
|
9722 | const primary = primaryAction && (primaryAction.primary === undefined ? true : primaryAction.primary);
|
9723 | const primaryActionMarkup = primaryAction ? React.createElement(
|
9724 | 'div',
|
9725 | { className: styles$73.PrimaryAction },
|
9726 | buttonsFrom(primaryAction, { primary })
|
9727 | ) : null;
|
9728 | const paginationMarkup = pagination ? React.createElement(
|
9729 | 'div',
|
9730 | { className: styles$73.Pagination },
|
9731 | React.createElement(Pagination$2, Object.assign({}, pagination, { plain: true }))
|
9732 | ) : null;
|
9733 | const nonPrimaryActionsMarkup = this.renderSecondaryActions();
|
9734 | const actionsMarkup = React.createElement(
|
9735 | 'div',
|
9736 | { className: styles$73.Actions },
|
9737 | primaryActionMarkup,
|
9738 | nonPrimaryActionsMarkup
|
9739 | );
|
9740 | const navigationMarkup = breadcrumbMarkup || paginationMarkup ? React.createElement(
|
9741 | 'div',
|
9742 | { className: styles$73.Navigation },
|
9743 | breadcrumbMarkup,
|
9744 | paginationMarkup
|
9745 | ) : null;
|
9746 | const titleMarkup = React.createElement(
|
9747 | 'div',
|
9748 | { className: styles$73.Title },
|
9749 | React.createElement(
|
9750 | 'div',
|
9751 | null,
|
9752 | React.createElement(
|
9753 | DisplayText$1,
|
9754 | { size: 'large', element: 'h1' },
|
9755 | title
|
9756 | )
|
9757 | ),
|
9758 | React.createElement(
|
9759 | 'div',
|
9760 | null,
|
9761 | titleMetadata
|
9762 | )
|
9763 | );
|
9764 | return primaryActionMarkup ? React.createElement(
|
9765 | 'div',
|
9766 | { className: className },
|
9767 | navigationMarkup,
|
9768 | React.createElement(
|
9769 | 'div',
|
9770 | { className: styles$73.MainContent },
|
9771 | React.createElement(
|
9772 | 'div',
|
9773 | { className: styles$73.TitleAndActions },
|
9774 | titleMarkup,
|
9775 | actionsMarkup
|
9776 | ),
|
9777 | primaryActionMarkup
|
9778 | )
|
9779 | ) : React.createElement(
|
9780 | 'div',
|
9781 | { className: className },
|
9782 | navigationMarkup,
|
9783 | titleMarkup,
|
9784 | actionsMarkup
|
9785 | );
|
9786 | }
|
9787 | get hasRollup() {
|
9788 | var _props2 = this.props,
|
9789 | _props2$secondaryActi = _props2.secondaryActions;
|
9790 | const secondaryActions = _props2$secondaryActi === undefined ? [] : _props2$secondaryActi;
|
9791 | var _props2$actionGroups = _props2.actionGroups;
|
9792 | const actionGroups = _props2$actionGroups === undefined ? [] : _props2$actionGroups;
|
9793 |
|
9794 | return secondaryActions.length + actionGroups.length > 1;
|
9795 | }
|
9796 | renderSecondaryActions() {
|
9797 | var _state = this.state;
|
9798 | const openActionGroup = _state.openActionGroup,
|
9799 | rollupOpen = _state.rollupOpen;
|
9800 | var _props3 = this.props,
|
9801 | _props3$secondaryActi = _props3.secondaryActions;
|
9802 | const secondaryActions = _props3$secondaryActi === undefined ? [] : _props3$secondaryActi;
|
9803 | var _props3$actionGroups = _props3.actionGroups;
|
9804 | const actionGroups = _props3$actionGroups === undefined ? [] : _props3$actionGroups;
|
9805 |
|
9806 | if (secondaryActions.length === 0 && actionGroups.length === 0) {
|
9807 | return null;
|
9808 | }
|
9809 | const secondaryActionMarkup = secondaryActions.length > 0 ? secondaryActionsFrom(secondaryActions) : null;
|
9810 | const actionGroupsMarkup = actionGroups.length > 0 ? actionGroups.map(({ title, icon, actions, details }) => {
|
9811 | const detailsClassName = styles.classNames(styles$73.Details, actions && Array.isArray(actions) && actions.length > 0 && styles$73.withActions);
|
9812 | const detailsMarkup = details ? React.createElement(
|
9813 | 'div',
|
9814 | { className: detailsClassName },
|
9815 | details
|
9816 | ) : null;
|
9817 | const showIndicator = hasNewStatus(actions);
|
9818 | const active = title === openActionGroup;
|
9819 | return React.createElement(
|
9820 | 'div',
|
9821 | { className: styles$73.ActionGroup, key: `ActionGroup-${title}` },
|
9822 | React.createElement(
|
9823 | Popover$1,
|
9824 | { key: title, active: active
|
9825 |
|
9826 | , onClose: this.handleActionGroupClose.bind(this, title), activator: React.createElement(
|
9827 | Action$1,
|
9828 | { showIndicator: showIndicator, hasIndicator: active, disclosure: true, icon: icon
|
9829 |
|
9830 | , onAction: this.handleActionGroupOpen.bind(this, title) },
|
9831 | title
|
9832 | ) },
|
9833 | React.createElement(ActionList$1, { items: actions
|
9834 |
|
9835 | , onActionAnyItem: this.handleActionGroupClose.bind(this, title) }),
|
9836 | detailsMarkup
|
9837 | )
|
9838 | );
|
9839 | }) : null;
|
9840 | const showIndicator = false && actionGroups.filter(group => hasNewStatus(group.actions)).length > 0;
|
9841 | const rollupMarkup = this.hasRollup ? React.createElement(
|
9842 | 'div',
|
9843 | { className: styles$73.Rollup },
|
9844 | React.createElement(
|
9845 | Popover$1,
|
9846 | { active: rollupOpen, onClose: this.handleRollupToggle, activator: React.createElement(
|
9847 | Button$2,
|
9848 | { outline: false && showIndicator, disclosure: true, onClick: this.handleRollupToggle },
|
9849 | 'Actions'
|
9850 | ) },
|
9851 | React.createElement(ActionList$1, { items: secondaryActions, sections: actionGroups.map(convertActionGroupToActionListSection), onActionAnyItem: this.handleRollupToggle })
|
9852 | )
|
9853 | ) : null;
|
9854 | return React.createElement(
|
9855 | 'div',
|
9856 | { className: styles$73.SecondaryActions },
|
9857 | rollupMarkup,
|
9858 | React.createElement(
|
9859 | 'div',
|
9860 | { className: styles$73.IndividualActions },
|
9861 | secondaryActionMarkup,
|
9862 | actionGroupsMarkup
|
9863 | )
|
9864 | );
|
9865 | }
|
9866 | handleRollupToggle() {
|
9867 | this.setState(({ rollupOpen }) => ({ rollupOpen: !rollupOpen }));
|
9868 | }
|
9869 | handleActionGroupClose(group) {
|
9870 | this.setState(({ openActionGroup }) => openActionGroup === group ? { openActionGroup: undefined } : {});
|
9871 | }
|
9872 | handleActionGroupOpen(group) {
|
9873 | this.setState({ openActionGroup: group });
|
9874 | }
|
9875 | }
|
9876 | tslib_1.__decorate([decorators.autobind], Header$5.prototype, "handleRollupToggle", null);
|
9877 | function hasNewStatus(actions) {
|
9878 | for (let i = 0; i < actions.length; i++) {
|
9879 | const badge = actions[i].badge;
|
9880 |
|
9881 | if (badge && badge.status === 'new') {
|
9882 | return true;
|
9883 | }
|
9884 | }
|
9885 | return false;
|
9886 | }
|
9887 | function convertActionGroupToActionListSection({ title, actions }) {
|
9888 | return { title, items: actions };
|
9889 | }
|
9890 | function secondaryActionsFrom(actions) {
|
9891 | return actions.map((_a, index) => {
|
9892 | var content = _a.content,
|
9893 | action = tslib_1.__rest(_a, ["content"]);
|
9894 | return React.createElement(
|
9895 | Action$1,
|
9896 | Object.assign({}, action, { key: `Action-${content || index}` }),
|
9897 | content
|
9898 | );
|
9899 | });
|
9900 | }
|
9901 |
|
9902 | const EASDK_PROPS = ['title', 'icon', 'breadcrumbs', 'secondaryActions', 'actionGroups', 'primaryAction', 'pagination'];
|
9903 | class Page$1 extends React.PureComponent {
|
9904 | componentDidMount() {
|
9905 | if (this.props.polaris.easdk == null) {
|
9906 | return;
|
9907 | }
|
9908 | this.handleEASDKMessaging();
|
9909 | }
|
9910 | componentDidUpdate(prevProps) {
|
9911 | if (this.props.polaris.easdk == null) {
|
9912 | return;
|
9913 | }
|
9914 | const prevEASDKProps = pick(prevProps, EASDK_PROPS);
|
9915 | const currentEASDKProps = pick(this.props, EASDK_PROPS);
|
9916 | if (!isEqual(prevEASDKProps, currentEASDKProps)) {
|
9917 | this.handleEASDKMessaging();
|
9918 | }
|
9919 | }
|
9920 | render() {
|
9921 | const _a = this.props,
|
9922 | children = _a.children,
|
9923 | fullWidth = _a.fullWidth,
|
9924 | singleColumn = _a.singleColumn,
|
9925 | rest = tslib_1.__rest(_a, ["children", "fullWidth", "singleColumn"]);
|
9926 | const className = styles.classNames(styles$73.Page, fullWidth && styles$73.fullWidth, singleColumn && styles$73.singleColumn);
|
9927 | const headerMarkup = this.props.polaris.easdk || !this.hasHeaderContent() ? null : React.createElement(Header$5, rest);
|
9928 | return React.createElement(
|
9929 | 'div',
|
9930 | { className: className },
|
9931 | headerMarkup,
|
9932 | React.createElement(
|
9933 | 'div',
|
9934 | { className: styles$73.Content },
|
9935 | children
|
9936 | )
|
9937 | );
|
9938 | }
|
9939 | handleEASDKMessaging() {
|
9940 | const easdk = this.props.polaris.easdk;
|
9941 |
|
9942 | if (easdk) {
|
9943 | easdk.Bar.update(this.props);
|
9944 | }
|
9945 | }
|
9946 | hasHeaderContent() {
|
9947 | var _props = this.props;
|
9948 | const title = _props.title,
|
9949 | primaryAction = _props.primaryAction,
|
9950 | secondaryActions = _props.secondaryActions,
|
9951 | breadcrumbs = _props.breadcrumbs;
|
9952 |
|
9953 | return title && title !== '' || primaryAction || secondaryActions && secondaryActions.length > 0 || breadcrumbs && breadcrumbs.length > 0;
|
9954 | }
|
9955 | }
|
9956 | var Page$2 = withAppProvider()(Page$1);
|
9957 |
|
9958 | var styles$76 = {
|
9959 | "PageActions": "p_t4",
|
9960 | "temporary": "p_rn",
|
9961 | "translateUp": "p_vt",
|
9962 | };
|
9963 |
|
9964 | function PageActions$1({ primaryAction, secondaryActions, temporary }) {
|
9965 | const className = styles.classNames(styles$76.PageActions, temporary && styles$76.temporary);
|
9966 | const primaryActionMarkup = primaryAction ? buttonsFrom(primaryAction, { primary: true }) : null;
|
9967 | const secondaryActionsMarkup = secondaryActions ? React.createElement(
|
9968 | ButtonGroup$1,
|
9969 | null,
|
9970 | buttonsFrom(secondaryActions)
|
9971 | ) : null;
|
9972 | const distribution = secondaryActionsMarkup ? 'equalSpacing' : 'trailing';
|
9973 | const unsavedChangesMarkup = temporary ? React.createElement(
|
9974 | TextStyle$1,
|
9975 | { variation: 'subdued' },
|
9976 | 'You have unsaved changes.'
|
9977 | ) : null;
|
9978 | return React.createElement(
|
9979 | 'div',
|
9980 | { className: className },
|
9981 | React.createElement(
|
9982 | Stack$1,
|
9983 | { distribution: distribution, spacing: 'tight', alignment: 'center' },
|
9984 | secondaryActionsMarkup,
|
9985 | unsavedChangesMarkup,
|
9986 | primaryActionMarkup
|
9987 | )
|
9988 | );
|
9989 | }
|
9990 |
|
9991 | var styles$77 = {
|
9992 | "RangeSlider": "p_zg",
|
9993 | "disabled": "p_cm",
|
9994 | "InputWrapper": "p_m9",
|
9995 | "Prefix": "p_hg",
|
9996 | "Suffix": "p_bn",
|
9997 | "Input": "p_jg",
|
9998 | "error": "p_k1",
|
9999 | "Output": "p_r9",
|
10000 | "OutputBubble": "p_w8",
|
10001 | "OutputText": "p_oe",
|
10002 | };
|
10003 |
|
10004 | const getUniqueID$12 = other.createUniqueIDFactory('RangeSlider');
|
10005 | const cssVarPrefix = '--Polaris-RangeSlider-';
|
10006 | class RangeSlider$1 extends React.PureComponent {
|
10007 | constructor(props) {
|
10008 | super(props);
|
10009 | this.state = {
|
10010 | id: props.id || getUniqueID$12()
|
10011 | };
|
10012 | }
|
10013 | static getDerivedStateFromProps(nextProps, prevState) {
|
10014 | return nextProps.id != null && nextProps.id !== prevState.id ? {
|
10015 | id: nextProps.id || prevState.id
|
10016 | } : null;
|
10017 | }
|
10018 | render() {
|
10019 | const id = this.state.id;
|
10020 | var _props = this.props,
|
10021 | _props$min = _props.min;
|
10022 | const min = _props$min === undefined ? 0 : _props$min;
|
10023 | var _props$max = _props.max;
|
10024 | const max = _props$max === undefined ? 100 : _props$max;
|
10025 | var _props2 = this.props;
|
10026 | const label = _props2.label,
|
10027 | labelAction = _props2.labelAction,
|
10028 | labelHidden = _props2.labelHidden,
|
10029 | step = _props2.step,
|
10030 | value = _props2.value,
|
10031 | output = _props2.output,
|
10032 | helpText = _props2.helpText,
|
10033 | error = _props2.error,
|
10034 | disabled = _props2.disabled,
|
10035 | prefix = _props2.prefix,
|
10036 | suffix = _props2.suffix,
|
10037 | onFocus = _props2.onFocus,
|
10038 | onBlur = _props2.onBlur;
|
10039 |
|
10040 | const describedBy = [];
|
10041 | if (error) {
|
10042 | describedBy.push(`${id}Error`);
|
10043 | }
|
10044 | if (helpText) {
|
10045 | describedBy.push(helpTextID$1(id));
|
10046 | }
|
10047 | const ariaDescribedBy = describedBy.length ? describedBy.join(' ') : undefined;
|
10048 | const sliderProgress = (value - min) * 100 / (max - min);
|
10049 | const cssVars = {
|
10050 | [`${cssVarPrefix}min`]: min,
|
10051 | [`${cssVarPrefix}max`]: max,
|
10052 | [`${cssVarPrefix}current`]: value,
|
10053 | [`${cssVarPrefix}progress`]: `${sliderProgress}%`,
|
10054 | [`${cssVarPrefix}output-factor`]: invertNumber((sliderProgress - 50) / 100)
|
10055 | };
|
10056 | const outputMarkup = !disabled && output && React.createElement(
|
10057 | 'output',
|
10058 | { htmlFor: id, className: styles$77.Output },
|
10059 | React.createElement(
|
10060 | 'div',
|
10061 | { className: styles$77.OutputBubble },
|
10062 | React.createElement(
|
10063 | 'span',
|
10064 | { className: styles$77.OutputText },
|
10065 | value
|
10066 | )
|
10067 | )
|
10068 | );
|
10069 | const prefixMarkup = prefix && React.createElement(
|
10070 | 'div',
|
10071 | { className: styles$77.Prefix },
|
10072 | prefix
|
10073 | );
|
10074 | const suffixMarkup = suffix && React.createElement(
|
10075 | 'div',
|
10076 | { className: styles$77.Suffix },
|
10077 | suffix
|
10078 | );
|
10079 | const className = styles.classNames(styles$77.RangeSlider, error && styles$77.error, disabled && styles$77.disabled);
|
10080 | return React.createElement(
|
10081 | Labelled$1,
|
10082 | { id: id, label: label, error: error, action: labelAction, labelHidden: labelHidden, helpText: helpText },
|
10083 | React.createElement(
|
10084 | 'div',
|
10085 | { className: className, style: cssVars },
|
10086 | prefixMarkup,
|
10087 | React.createElement(
|
10088 | 'div',
|
10089 | { className: styles$77.InputWrapper },
|
10090 | React.createElement('input', { type: 'range', className: styles$77.Input, id: id, name: id, min: min, max: max, step: step, value: value, disabled: disabled, onChange: this.handleChange, onFocus: onFocus, onBlur: onBlur, 'aria-valuemin': min, 'aria-valuemax': max, 'aria-valuenow': value, 'aria-invalid': Boolean(error), 'aria-describedby': ariaDescribedBy }),
|
10091 | outputMarkup
|
10092 | ),
|
10093 | suffixMarkup
|
10094 | )
|
10095 | );
|
10096 | }
|
10097 | handleChange(event) {
|
10098 | const onChange = this.props.onChange;
|
10099 |
|
10100 | if (onChange == null) {
|
10101 | return;
|
10102 | }
|
10103 | onChange(parseFloat(event.currentTarget.value), this.state.id);
|
10104 | }
|
10105 | }
|
10106 | tslib_1.__decorate([decorators.autobind], RangeSlider$1.prototype, "handleChange", null);
|
10107 | function invertNumber(number) {
|
10108 | if (Math.sign(number) === 1) {
|
10109 | return -Math.abs(number);
|
10110 | } else if (Math.sign(number) === -1) {
|
10111 | return Math.abs(number);
|
10112 | } else {
|
10113 | return 0;
|
10114 | }
|
10115 | }
|
10116 | var RangeSlider$2 = withAppProvider()(RangeSlider$1);
|
10117 |
|
10118 |
|
10119 | function SettingToggle$1({ enabled, action, children }) {
|
10120 | const actionMarkup = action ? buttonFrom(action, { primary: !enabled }) : null;
|
10121 | return React.createElement(
|
10122 | Card$1,
|
10123 | { sectioned: true },
|
10124 | React.createElement(
|
10125 | SettingAction$1,
|
10126 | { action: actionMarkup },
|
10127 | children
|
10128 | )
|
10129 | );
|
10130 | }
|
10131 |
|
10132 | class Sticky$1 extends React.Component {
|
10133 | constructor() {
|
10134 | super(...arguments);
|
10135 | this.state = {
|
10136 | isSticky: false,
|
10137 | style: {}
|
10138 | };
|
10139 | this.placeHolderNode = null;
|
10140 | this.stickyNode = null;
|
10141 | }
|
10142 | componentDidMount() {
|
10143 | const stickyManager = this.context.polaris.stickyManager;
|
10144 | var _props = this.props;
|
10145 | const boundingElement = _props.boundingElement,
|
10146 | offset = _props.offset,
|
10147 | disableWhenStacked = _props.disableWhenStacked;
|
10148 |
|
10149 | stickyManager.registerStickyItem({
|
10150 | stickyNode: this.stickyNode,
|
10151 | placeHolderNode: this.placeHolderNode,
|
10152 | handlePositioning: this.handlePositioning,
|
10153 | offset,
|
10154 | boundingElement,
|
10155 | disableWhenStacked
|
10156 | });
|
10157 | }
|
10158 | componentWillUnmount() {
|
10159 | const stickyManager = this.context.polaris.stickyManager;
|
10160 |
|
10161 | stickyManager.unregisterStickyItem(this.stickyNode);
|
10162 | }
|
10163 | render() {
|
10164 | var _state = this.state;
|
10165 | const style = _state.style,
|
10166 | isSticky = _state.isSticky;
|
10167 | const children = this.props.children;
|
10168 |
|
10169 | const childrenContent = typeof children === 'function' ? children(isSticky) : children;
|
10170 | return React.createElement(
|
10171 | 'div',
|
10172 | null,
|
10173 | React.createElement('div', { ref: this.setPlaceHolderNode }),
|
10174 | React.createElement(
|
10175 | 'div',
|
10176 | { ref: this.setStickyNode, style: style },
|
10177 | childrenContent
|
10178 | )
|
10179 | );
|
10180 | }
|
10181 | setPlaceHolderNode(node) {
|
10182 | this.placeHolderNode = node;
|
10183 | }
|
10184 | setStickyNode(node) {
|
10185 | this.stickyNode = node;
|
10186 | }
|
10187 | handlePositioning(stick, top = 0, left = 0, width = 0) {
|
10188 | const isSticky = this.state.isSticky;
|
10189 |
|
10190 | if (stick && !isSticky || !stick && isSticky) {
|
10191 | this.adjustPlaceHolderNode(stick);
|
10192 | this.setState({ isSticky: !isSticky });
|
10193 | }
|
10194 | const style = stick ? {
|
10195 | position: 'fixed',
|
10196 | top,
|
10197 | left,
|
10198 | width
|
10199 | } : {};
|
10200 | this.setState({ style });
|
10201 | }
|
10202 | adjustPlaceHolderNode(add) {
|
10203 | if (this.placeHolderNode && this.stickyNode) {
|
10204 | this.placeHolderNode.style.paddingBottom = add ? `${geometry.getRectForNode(this.stickyNode).height}px` : '0px';
|
10205 | }
|
10206 | }
|
10207 | }
|
10208 | Sticky$1.contextTypes = polarisAppProviderContextTypes;
|
10209 | tslib_1.__decorate([decorators.autobind], Sticky$1.prototype, "setPlaceHolderNode", null);
|
10210 | tslib_1.__decorate([decorators.autobind], Sticky$1.prototype, "setStickyNode", null);
|
10211 | tslib_1.__decorate([decorators.autobind], Sticky$1.prototype, "handlePositioning", null);
|
10212 | tslib_1.__decorate([decorators.autobind], Sticky$1.prototype, "adjustPlaceHolderNode", null);
|
10213 |
|
10214 | var styles$78 = {
|
10215 | "Tabs": "p_j7",
|
10216 | "fitted": "p_l7",
|
10217 | "TabContainer": "p_l5",
|
10218 | "Tab": "p_s5",
|
10219 | "Title": "p_wz",
|
10220 | "fillSpace": "p_bh",
|
10221 | "Tab-selected": "p_ze",
|
10222 | "Panel": "p_kw",
|
10223 | "List": "p_x2",
|
10224 | "Item": "p_wv",
|
10225 | "DisclosureTab": "p_oq",
|
10226 | "DisclosureTab-visible": "p_zr",
|
10227 | "DisclosureActivator": "p_po",
|
10228 | "TabMeasurer": "p_x9",
|
10229 | };
|
10230 |
|
10231 | class Item$16 extends React.PureComponent {
|
10232 | constructor() {
|
10233 | super(...arguments);
|
10234 | this.focusedNode = null;
|
10235 | }
|
10236 | componentDidMount() {
|
10237 | const focusedNode = this.focusedNode;
|
10238 | const focused = this.props.focused;
|
10239 |
|
10240 | if (focusedNode && focusedNode instanceof HTMLElement && focused) {
|
10241 | focusedNode.focus();
|
10242 | }
|
10243 | }
|
10244 | componentDidUpdate() {
|
10245 | const focusedNode = this.focusedNode;
|
10246 | const focused = this.props.focused;
|
10247 |
|
10248 | if (focusedNode && focusedNode instanceof HTMLElement && focused) {
|
10249 | focusedNode.focus();
|
10250 | }
|
10251 | }
|
10252 | render() {
|
10253 | var _props = this.props;
|
10254 | const id = _props.id,
|
10255 | panelID = _props.panelID,
|
10256 | children = _props.children,
|
10257 | url = _props.url,
|
10258 | accessibilityLabel = _props.accessibilityLabel;
|
10259 | var _props$onClick = _props.onClick;
|
10260 | const onClick = _props$onClick === undefined ? other.noop : _props$onClick;
|
10261 |
|
10262 | const sharedProps = {
|
10263 | id,
|
10264 | ref: this.setFocusedNode,
|
10265 | onClick,
|
10266 | className: styles$78.Item,
|
10267 | 'aria-controls': panelID,
|
10268 | 'aria-selected': false,
|
10269 | 'aria-label': accessibilityLabel
|
10270 | };
|
10271 | const markup = url ? React.createElement(UnstyledLink$2, Object.assign({ url }, sharedProps), children) : React.createElement(
|
10272 | 'button',
|
10273 | Object.assign({}, sharedProps, { type: 'button' }),
|
10274 | children
|
10275 | );
|
10276 | return React.createElement(
|
10277 | 'li',
|
10278 | { role: 'presentation' },
|
10279 | markup
|
10280 | );
|
10281 | }
|
10282 | setFocusedNode(node) {
|
10283 | this.focusedNode = node;
|
10284 | }
|
10285 | }
|
10286 | tslib_1.__decorate([decorators.autobind], Item$16.prototype, "setFocusedNode", null);
|
10287 |
|
10288 | class List$2 extends React.PureComponent {
|
10289 | render() {
|
10290 | var _props = this.props;
|
10291 | const focusIndex = _props.focusIndex,
|
10292 | disclosureTabs = _props.disclosureTabs;
|
10293 | var _props$onClick = _props.onClick;
|
10294 | const onClick = _props$onClick === undefined ? other.noop : _props$onClick;
|
10295 |
|
10296 | const tabs = disclosureTabs.map((_a, index) => {
|
10297 | var id = _a.id,
|
10298 | content = _a.content,
|
10299 | tabProps = tslib_1.__rest(_a, ["id", "content"]);
|
10300 |
|
10301 | return React.createElement(
|
10302 | Item$16,
|
10303 | Object.assign({}, tabProps, { key: id, id: id, focused: index === focusIndex
|
10304 |
|
10305 | , onClick: onClick.bind(null, id) }),
|
10306 | content
|
10307 | );
|
10308 | });
|
10309 | return React.createElement(
|
10310 | 'ul',
|
10311 | { className: styles$78.List, onKeyDown: handleKeyDown$2, onKeyUp: this.handleKeypress },
|
10312 | tabs
|
10313 | );
|
10314 | }
|
10315 | handleKeypress(event) {
|
10316 | var _props$onKeyPress = this.props.onKeyPress;
|
10317 | const onKeyPress = _props$onKeyPress === undefined ? other.noop : _props$onKeyPress;
|
10318 |
|
10319 | onKeyPress(event);
|
10320 | }
|
10321 | }
|
10322 | tslib_1.__decorate([decorators.autobind], List$2.prototype, "handleKeypress", null);
|
10323 | function handleKeyDown$2(event) {
|
10324 | const key = event.key;
|
10325 |
|
10326 | if (key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight') {
|
10327 | event.preventDefault();
|
10328 | event.stopPropagation();
|
10329 | }
|
10330 | }
|
10331 |
|
10332 | function Panel$1({ id, tabID, children }) {
|
10333 | return React.createElement(
|
10334 | 'div',
|
10335 | { className: styles$78.Panel, id: id, role: 'tabpanel', 'aria-labelledby': tabID, tabIndex: -1 },
|
10336 | children
|
10337 | );
|
10338 | }
|
10339 |
|
10340 | class Tab$1 extends React.PureComponent {
|
10341 | constructor() {
|
10342 | super(...arguments);
|
10343 | this.node = null;
|
10344 | }
|
10345 |
|
10346 |
|
10347 |
|
10348 | componentDidMount() {
|
10349 | var _props = this.props;
|
10350 | const id = _props.id,
|
10351 | measuring = _props.measuring,
|
10352 | selected = _props.selected,
|
10353 | panelID = _props.panelID,
|
10354 | focused = _props.focused;
|
10355 |
|
10356 | if (measuring) {
|
10357 | return;
|
10358 | }
|
10359 |
|
10360 |
|
10361 |
|
10362 | const itemHadFocus = focused || document.activeElement && document.activeElement.id === id;
|
10363 |
|
10364 |
|
10365 | if (itemHadFocus && selected && panelID != null) {
|
10366 | focusPanelID(panelID);
|
10367 | }
|
10368 | }
|
10369 | componentDidUpdate(previousProps) {
|
10370 | const wasSelected = previousProps.selected;
|
10371 | var _props2 = this.props;
|
10372 | const focused = _props2.focused,
|
10373 | measuring = _props2.measuring,
|
10374 | selected = _props2.selected,
|
10375 | panelID = _props2.panelID;
|
10376 |
|
10377 | if (measuring) {
|
10378 | return;
|
10379 | }
|
10380 | if (selected && !wasSelected && panelID != null) {
|
10381 | focusPanelID(panelID);
|
10382 | } else if (focused && this.node != null) {
|
10383 | focus.focusFirstFocusableNode(this.node);
|
10384 | }
|
10385 | }
|
10386 | render() {
|
10387 | var _props3 = this.props;
|
10388 | const id = _props3.id,
|
10389 | focused = _props3.focused,
|
10390 | siblingTabHasFocus = _props3.siblingTabHasFocus,
|
10391 | children = _props3.children,
|
10392 | onClick = _props3.onClick,
|
10393 | selected = _props3.selected,
|
10394 | url = _props3.url,
|
10395 | panelID = _props3.panelID,
|
10396 | measuring = _props3.measuring,
|
10397 | accessibilityLabel = _props3.accessibilityLabel;
|
10398 |
|
10399 | const handleClick = onClick && onClick.bind(null, id);
|
10400 | const className = styles.classNames(styles$78.Tab, selected && styles$78['Tab-selected']);
|
10401 | let tabIndex;
|
10402 | if (selected && !siblingTabHasFocus && !measuring) {
|
10403 | tabIndex = 0;
|
10404 | } else if (focused && !measuring) {
|
10405 | tabIndex = 0;
|
10406 | } else {
|
10407 | tabIndex = -1;
|
10408 | }
|
10409 | const markup = url ? React.createElement(
|
10410 | UnstyledLink$2,
|
10411 | { id: id, url: url, role: 'tab', tabIndex: tabIndex, onClick: handleClick, className: className, 'aria-selected': selected, 'aria-controls': panelID, 'aria-label': accessibilityLabel, onMouseUp: handleMouseUpByBlurring },
|
10412 | React.createElement(
|
10413 | 'span',
|
10414 | { className: styles$78.Title },
|
10415 | children
|
10416 | )
|
10417 | ) : React.createElement(
|
10418 | 'button',
|
10419 | { id: id, role: 'tab', type: 'button', tabIndex: tabIndex, className: className, onClick: handleClick, 'aria-selected': selected, 'aria-controls': panelID, 'aria-label': accessibilityLabel, onMouseUp: handleMouseUpByBlurring },
|
10420 | React.createElement(
|
10421 | 'span',
|
10422 | { className: styles$78.Title },
|
10423 | children
|
10424 | )
|
10425 | );
|
10426 | return React.createElement(
|
10427 | 'li',
|
10428 | { role: 'presentation', className: styles$78.TabContainer, ref: this.setNode },
|
10429 | markup
|
10430 | );
|
10431 | }
|
10432 | setNode(node) {
|
10433 | this.node = node;
|
10434 | }
|
10435 | }
|
10436 | tslib_1.__decorate([decorators.autobind], Tab$1.prototype, "setNode", null);
|
10437 | function focusPanelID(panelID) {
|
10438 | const panel = document.getElementById(panelID);
|
10439 | if (panel) {
|
10440 | panel.focus();
|
10441 | }
|
10442 | }
|
10443 | var Tab$2 = withAppProvider()(Tab$1);
|
10444 |
|
10445 | class TabMeasurer$1 extends React.PureComponent {
|
10446 | constructor() {
|
10447 | super(...arguments);
|
10448 | this.containerNode = null;
|
10449 | }
|
10450 | componentDidMount() {
|
10451 | this.handleMeasurement();
|
10452 | if (process.env.NODE_ENV === 'development') {
|
10453 |
|
10454 |
|
10455 | setTimeout(this.handleMeasurement, 0);
|
10456 | }
|
10457 | }
|
10458 | componentDidUpdate(prevProps) {
|
10459 | if (prevProps.tabs !== this.props.tabs) {
|
10460 | this.handleMeasurement();
|
10461 | }
|
10462 | }
|
10463 | render() {
|
10464 | var _props = this.props;
|
10465 | const selected = _props.selected,
|
10466 | tabs = _props.tabs,
|
10467 | activator = _props.activator,
|
10468 | tabToFocus = _props.tabToFocus,
|
10469 | siblingTabHasFocus = _props.siblingTabHasFocus;
|
10470 |
|
10471 | const tabsMarkup = tabs.map((tab, index) => {
|
10472 | return React.createElement(
|
10473 | Tab$2,
|
10474 | { measuring: true, key: `${index}${tab.id}Hidden`, id: `${tab.id}Measurer`, siblingTabHasFocus: siblingTabHasFocus, focused: index === tabToFocus, selected: index === selected, onClick: other.noop, url: tab.url },
|
10475 | tab.content
|
10476 | );
|
10477 | });
|
10478 | const classname = styles.classNames(styles$78.Tabs, styles$78.TabMeasurer);
|
10479 | return React.createElement(
|
10480 | 'div',
|
10481 | { className: classname, ref: this.setContainerNode },
|
10482 | React.createElement(EventListener$1, { event: 'resize', handler: this.handleMeasurement }),
|
10483 | tabsMarkup,
|
10484 | activator
|
10485 | );
|
10486 | }
|
10487 | setContainerNode(node) {
|
10488 | this.containerNode = node;
|
10489 | }
|
10490 | handleMeasurement() {
|
10491 | if (this.containerNode == null) {
|
10492 | return;
|
10493 | }
|
10494 | const domNode = ReactDOM.findDOMNode(this);
|
10495 | if (domNode == null) {
|
10496 | return;
|
10497 | }
|
10498 |
|
10499 | const handleMeasurement = this.props.handleMeasurement;
|
10500 |
|
10501 | const containerWidth = this.containerNode.offsetWidth;
|
10502 | const tabMeasurerNode = ReactDOM.findDOMNode(this);
|
10503 | const hiddenTabNodes = tabMeasurerNode instanceof Element && tabMeasurerNode.children;
|
10504 | const hiddenTabNodesArray = [].slice.call(hiddenTabNodes);
|
10505 | const hiddenTabWidths = hiddenTabNodesArray.map(node => {
|
10506 | return node.getBoundingClientRect().width;
|
10507 | });
|
10508 | const disclosureWidth = hiddenTabWidths.pop();
|
10509 | handleMeasurement({
|
10510 | containerWidth,
|
10511 | disclosureWidth,
|
10512 | hiddenTabWidths
|
10513 | });
|
10514 | }
|
10515 | }
|
10516 | tslib_1.__decorate([decorators.autobind], TabMeasurer$1.prototype, "setContainerNode", null);
|
10517 | tslib_1.__decorate([decorators.autobind], TabMeasurer$1.prototype, "handleMeasurement", null);
|
10518 |
|
10519 | class Tabs$1 extends React.PureComponent {
|
10520 | constructor() {
|
10521 | super(...arguments);
|
10522 | this.state = {
|
10523 | disclosureWidth: 0,
|
10524 | containerWidth: Infinity,
|
10525 | tabWidths: [],
|
10526 | visibleTabs: [],
|
10527 | hiddenTabs: [],
|
10528 | showDisclosure: false,
|
10529 | tabToFocus: -1
|
10530 | };
|
10531 | }
|
10532 |
|
10533 | componentWillReceiveProps(nextProps) {
|
10534 | const selected = this.props.selected;
|
10535 | var _state = this.state;
|
10536 | const disclosureWidth = _state.disclosureWidth,
|
10537 | tabWidths = _state.tabWidths,
|
10538 | containerWidth = _state.containerWidth,
|
10539 | tabToFocus = _state.tabToFocus;
|
10540 |
|
10541 | var _getVisibleAndHiddenT = getVisibleAndHiddenTabIndices(nextProps.tabs, nextProps.selected, disclosureWidth, tabWidths, containerWidth);
|
10542 |
|
10543 | const visibleTabs = _getVisibleAndHiddenT.visibleTabs,
|
10544 | hiddenTabs = _getVisibleAndHiddenT.hiddenTabs;
|
10545 |
|
10546 | this.setState({
|
10547 | visibleTabs,
|
10548 | hiddenTabs,
|
10549 | tabToFocus: selected === nextProps.selected ? -1 : tabToFocus,
|
10550 | showDisclosure: false
|
10551 | });
|
10552 | }
|
10553 | render() {
|
10554 | var _props = this.props;
|
10555 | const tabs = _props.tabs,
|
10556 | selected = _props.selected,
|
10557 | fitted = _props.fitted,
|
10558 | children = _props.children;
|
10559 | var _state2 = this.state;
|
10560 | const tabToFocus = _state2.tabToFocus,
|
10561 | visibleTabs = _state2.visibleTabs,
|
10562 | hiddenTabs = _state2.hiddenTabs,
|
10563 | showDisclosure = _state2.showDisclosure;
|
10564 |
|
10565 | const disclosureTabs = hiddenTabs.map(tabIndex => tabs[tabIndex]);
|
10566 | const panelMarkup = children ? React.createElement(
|
10567 | Panel$1,
|
10568 | { id: tabs[selected].panelID || `${tabs[selected].id}-panel`, tabID: tabs[selected].id },
|
10569 | children
|
10570 | ) : null;
|
10571 | const tabsMarkup = visibleTabs.sort((tabA, tabB) => tabA - tabB).map(tabIndex => this.renderTabMarkup(tabs[tabIndex], tabIndex));
|
10572 | const disclosureActivatorVisible = visibleTabs.length < tabs.length;
|
10573 | const classname = styles.classNames(styles$78.Tabs, fitted && styles$78.fitted, disclosureActivatorVisible && styles$78.fillSpace);
|
10574 | const disclosureTabClassName = styles.classNames(styles$78.DisclosureTab, disclosureActivatorVisible && styles$78['DisclosureTab-visible']);
|
10575 | const activator = React.createElement(
|
10576 | 'button',
|
10577 | { tabIndex: -1, className: styles$78.DisclosureActivator, onClick: this.handleDisclosureActivatorClick },
|
10578 | React.createElement(Icon$2, { source: 'horizontalDots' })
|
10579 | );
|
10580 | return React.createElement(
|
10581 | 'div',
|
10582 | null,
|
10583 | React.createElement(
|
10584 | 'ul',
|
10585 | { role: 'tablist', className: classname, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: handleKeyDown$1, onKeyUp: this.handleKeyPress },
|
10586 | tabsMarkup,
|
10587 | React.createElement(
|
10588 | 'li',
|
10589 | { role: 'presentation', className: disclosureTabClassName },
|
10590 | React.createElement(
|
10591 | Popover$1,
|
10592 | { preferredPosition: 'below', activator: activator, active: disclosureActivatorVisible && showDisclosure, onClose: this.handleClose },
|
10593 | React.createElement(List$2, { focusIndex: hiddenTabs.indexOf(tabToFocus), disclosureTabs: disclosureTabs, onClick: this.handleTabClick, onKeyPress: this.handleKeyPress })
|
10594 | )
|
10595 | )
|
10596 | ),
|
10597 | React.createElement(TabMeasurer$1, { tabToFocus: tabToFocus, activator: activator, selected: selected, tabs: tabs, siblingTabHasFocus: tabToFocus > -1, handleMeasurement: this.handleMeasurement }),
|
10598 | panelMarkup
|
10599 | );
|
10600 | }
|
10601 | handleKeyPress(event) {
|
10602 | var _state3 = this.state;
|
10603 | const tabToFocus = _state3.tabToFocus,
|
10604 | visibleTabs = _state3.visibleTabs,
|
10605 | hiddenTabs = _state3.hiddenTabs;
|
10606 |
|
10607 | const tabsArrayInOrder = visibleTabs.concat(hiddenTabs);
|
10608 | const key = event.key;
|
10609 | let newFocus = tabsArrayInOrder.indexOf(tabToFocus);
|
10610 | if (key === 'ArrowRight' || key === 'ArrowDown') {
|
10611 | newFocus += 1;
|
10612 | if (newFocus === tabsArrayInOrder.length) {
|
10613 | newFocus = 0;
|
10614 | }
|
10615 | }
|
10616 | if (key === 'ArrowLeft' || key === 'ArrowUp') {
|
10617 | newFocus -= 1;
|
10618 | if (newFocus === -1) {
|
10619 | newFocus = tabsArrayInOrder.length - 1;
|
10620 | }
|
10621 | }
|
10622 | this.setState({
|
10623 | showDisclosure: hiddenTabs.indexOf(tabsArrayInOrder[newFocus]) > -1,
|
10624 | tabToFocus: tabsArrayInOrder[newFocus]
|
10625 | });
|
10626 | }
|
10627 | renderTabMarkup(tab, index) {
|
10628 | const selected = this.props.selected;
|
10629 | const tabToFocus = this.state.tabToFocus;
|
10630 |
|
10631 | return React.createElement(
|
10632 | Tab$2,
|
10633 | { key: `${index}-${tab.id}`, id: tab.id, siblingTabHasFocus: tabToFocus > -1, focused: index === tabToFocus, selected: index === selected, onClick: this.handleTabClick, panelID: tab.panelID || `${tab.id}-panel`, accessibilityLabel: tab.accessibilityLabel, url: tab.url },
|
10634 | tab.content
|
10635 | );
|
10636 | }
|
10637 | handleFocus(event) {
|
10638 | var _props2 = this.props;
|
10639 | const selected = _props2.selected,
|
10640 | tabs = _props2.tabs;
|
10641 |
|
10642 |
|
10643 |
|
10644 | const target$$1 = event.target;
|
10645 | if (target$$1.classList.contains(styles$78.Tab) || target$$1.classList.contains(styles$78.Item)) {
|
10646 | let tabToFocus = -1;
|
10647 | tabs.every((tab, index) => {
|
10648 | if (tab.id === target$$1.id) {
|
10649 | tabToFocus = index;
|
10650 | return false;
|
10651 | }
|
10652 | return true;
|
10653 | });
|
10654 | this.setState({ tabToFocus });
|
10655 | return;
|
10656 | }
|
10657 | if (target$$1.classList.contains(styles$78.DisclosureActivator)) {
|
10658 | return;
|
10659 | }
|
10660 |
|
10661 |
|
10662 |
|
10663 | if (!event.relatedTarget) {
|
10664 | this.setState({ tabToFocus: selected });
|
10665 | return;
|
10666 | }
|
10667 | const relatedTarget = event.relatedTarget;
|
10668 | if (!relatedTarget.classList.contains(styles$78.Tab) && !relatedTarget.classList.contains(styles$78.Item) && !relatedTarget.classList.contains(styles$78.DisclosureActivator)) {
|
10669 | this.setState({ tabToFocus: selected });
|
10670 | }
|
10671 | }
|
10672 | handleBlur(event) {
|
10673 |
|
10674 | if (event.relatedTarget == null) {
|
10675 | this.setState({ tabToFocus: -1 });
|
10676 | return;
|
10677 | }
|
10678 | const target$$1 = event.relatedTarget;
|
10679 |
|
10680 | if (!target$$1.classList.contains(styles$78.Tab) && !target$$1.classList.contains(styles$78.Item)) {
|
10681 | this.setState({ tabToFocus: -1 });
|
10682 | }
|
10683 | }
|
10684 | handleDisclosureActivatorClick() {
|
10685 | this.setState(({ showDisclosure }) => ({ showDisclosure: !showDisclosure }));
|
10686 | }
|
10687 | handleClose() {
|
10688 | this.setState({
|
10689 | showDisclosure: false
|
10690 | });
|
10691 | }
|
10692 | handleMeasurement(measurements) {
|
10693 | var _props3 = this.props;
|
10694 | const tabs = _props3.tabs,
|
10695 | selected = _props3.selected;
|
10696 | const tabToFocus = this.state.tabToFocus;
|
10697 | const tabWidths = measurements.hiddenTabWidths,
|
10698 | containerWidth = measurements.containerWidth,
|
10699 | disclosureWidth = measurements.disclosureWidth;
|
10700 |
|
10701 | var _getVisibleAndHiddenT2 = getVisibleAndHiddenTabIndices(tabs, selected, disclosureWidth, tabWidths, containerWidth);
|
10702 |
|
10703 | const visibleTabs = _getVisibleAndHiddenT2.visibleTabs,
|
10704 | hiddenTabs = _getVisibleAndHiddenT2.hiddenTabs;
|
10705 |
|
10706 | this.setState({
|
10707 | tabToFocus: tabToFocus === -1 ? -1 : selected,
|
10708 | visibleTabs,
|
10709 | hiddenTabs,
|
10710 | disclosureWidth,
|
10711 | containerWidth,
|
10712 | tabWidths
|
10713 | });
|
10714 | }
|
10715 | handleTabClick(id) {
|
10716 | var _props4 = this.props;
|
10717 | const tabs = _props4.tabs;
|
10718 | var _props4$onSelect = _props4.onSelect;
|
10719 | const onSelect = _props4$onSelect === undefined ? other.noop : _props4$onSelect;
|
10720 |
|
10721 | const tab = tabs.find(aTab => aTab.id === id);
|
10722 | if (tab == null) {
|
10723 | return;
|
10724 | }
|
10725 | const selectedIndex = tabs.indexOf(tab);
|
10726 | onSelect(selectedIndex);
|
10727 | }
|
10728 | }
|
10729 | Tabs$1.Panel = Panel$1;
|
10730 | tslib_1.__decorate([decorators.autobind], Tabs$1.prototype, "handleKeyPress", null);
|
10731 | tslib_1.__decorate([decorators.autobind], Tabs$1.prototype, "renderTabMarkup", null);
|
10732 | tslib_1.__decorate([decorators.autobind], Tabs$1.prototype, "handleFocus", null);
|
10733 | tslib_1.__decorate([decorators.autobind], Tabs$1.prototype, "handleBlur", null);
|
10734 | tslib_1.__decorate([decorators.autobind], Tabs$1.prototype, "handleDisclosureActivatorClick", null);
|
10735 | tslib_1.__decorate([decorators.autobind], Tabs$1.prototype, "handleClose", null);
|
10736 | tslib_1.__decorate([decorators.autobind], Tabs$1.prototype, "handleMeasurement", null);
|
10737 | tslib_1.__decorate([decorators.autobind], Tabs$1.prototype, "handleTabClick", null);
|
10738 | function handleKeyDown$1(event) {
|
10739 | const key = event.key;
|
10740 |
|
10741 | if (key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight') {
|
10742 | event.preventDefault();
|
10743 | event.stopPropagation();
|
10744 | }
|
10745 | }
|
10746 | function getVisibleAndHiddenTabIndices(tabs, selected, disclosureWidth, tabWidths, containerWidth) {
|
10747 | const sumTabWidths = tabWidths.reduce((sum, width) => sum + width, 0);
|
10748 | const arrayOfTabIndices = tabs.map((_, index) => {
|
10749 | return index;
|
10750 | });
|
10751 | const visibleTabs = [];
|
10752 | const hiddenTabs = [];
|
10753 | if (containerWidth > sumTabWidths) {
|
10754 | visibleTabs.push(...arrayOfTabIndices);
|
10755 | } else {
|
10756 | visibleTabs.push(selected);
|
10757 | let newTabWidth = tabWidths[selected];
|
10758 | arrayOfTabIndices.forEach(index => {
|
10759 | if (index !== selected) {
|
10760 | if (newTabWidth + tabWidths[index] > containerWidth - disclosureWidth) {
|
10761 | hiddenTabs.push(index);
|
10762 | return;
|
10763 | }
|
10764 | visibleTabs.push(index);
|
10765 | newTabWidth += tabWidths[index];
|
10766 | }
|
10767 | });
|
10768 | }
|
10769 | return {
|
10770 | visibleTabs,
|
10771 | hiddenTabs
|
10772 | };
|
10773 | }
|
10774 |
|
10775 | var styles$79 = {
|
10776 | "Tag": "p_qk",
|
10777 | "disabled": "p_ct",
|
10778 | "TagText": "p_e9",
|
10779 | "Button": "p_hw",
|
10780 | };
|
10781 |
|
10782 | function Tag$1({ children, disabled = false, onRemove, polaris: { intl } }) {
|
10783 | const className = reactUtilities.classNames(disabled && styles$79.disabled, styles$79.Tag);
|
10784 | const ariaLabel = intl.translate('Polaris.Tag.ariaLabel', { children });
|
10785 | return React.createElement(
|
10786 | 'span',
|
10787 | { className: className },
|
10788 | React.createElement(
|
10789 | 'span',
|
10790 | { title: children, className: styles$79.TagText },
|
10791 | children
|
10792 | ),
|
10793 | React.createElement(
|
10794 | 'button',
|
10795 | { type: 'button', 'aria-label': ariaLabel, className: styles$79.Button, onClick: onRemove, onMouseUp: handleMouseUpByBlurring, disabled: disabled },
|
10796 | React.createElement(Icon$2, { source: 'cancelSmall' })
|
10797 | )
|
10798 | );
|
10799 | }
|
10800 | var Tag$2 = withAppProvider()(Tag$1);
|
10801 |
|
10802 | var styles$80 = {
|
10803 | "TextField": "p_t8",
|
10804 | "multiline": "p_el",
|
10805 | "Input": "p_oh",
|
10806 | "minimal": "p_mf",
|
10807 | "focus": "p_og",
|
10808 | "Backdrop": "p_q0",
|
10809 | "hasValue": "p_ml",
|
10810 | "error": "p_tr",
|
10811 | "readOnly": "p_ou",
|
10812 | "disabled": "p_bg",
|
10813 | "Prefix": "p_fe",
|
10814 | "Input-suffixed": "p_tv",
|
10815 | "Suffix": "p_p7",
|
10816 | "Spinner": "p_vv",
|
10817 | "SpinnerIcon": "p_uf",
|
10818 | "Resizer": "p_yz",
|
10819 | "DummyInput": "p_hm",
|
10820 | "Segment": "p_kk",
|
10821 | };
|
10822 |
|
10823 | class Resizer$1 extends React.PureComponent {
|
10824 | constructor() {
|
10825 | super(...arguments);
|
10826 | this.contentNode = null;
|
10827 | this.minimumLinesNode = null;
|
10828 | }
|
10829 | componentDidMount() {
|
10830 | this.handleHeightCheck();
|
10831 | if (process.env.NODE_ENV === 'development') {
|
10832 |
|
10833 |
|
10834 | setTimeout(this.handleHeightCheck, 0);
|
10835 | }
|
10836 | }
|
10837 | componentDidUpdate() {
|
10838 | this.handleHeightCheck();
|
10839 | }
|
10840 | render() {
|
10841 | var _props = this.props;
|
10842 | const contents = _props.contents,
|
10843 | minimumLines = _props.minimumLines;
|
10844 |
|
10845 | const minimumLinesMarkup = minimumLines ? React.createElement('div', { ref: this.setMinimumLinesNode, className: styles$80.DummyInput, dangerouslySetInnerHTML: {
|
10846 | __html: getContentsForMinimumLines(minimumLines)
|
10847 | } }) : null;
|
10848 | return React.createElement(
|
10849 | 'div',
|
10850 | { 'aria-hidden': true, className: styles$80.Resizer },
|
10851 | React.createElement(EventListener$1, { event: 'resize', handler: this.handleHeightCheck }),
|
10852 | React.createElement('div', { ref: this.setContentNode, className: styles$80.DummyInput, dangerouslySetInnerHTML: { __html: getFinalContents(contents) } }),
|
10853 | minimumLinesMarkup
|
10854 | );
|
10855 | }
|
10856 | handleHeightCheck() {
|
10857 | if (this.contentNode == null || this.minimumLinesNode == null) {
|
10858 | return;
|
10859 | }
|
10860 | const contentHeight = this.contentNode.offsetHeight;
|
10861 | const minimumHeight = this.setMinimumLinesNode ? this.minimumLinesNode.offsetHeight : 0;
|
10862 | const newHeight = Math.max(contentHeight, minimumHeight);
|
10863 | var _props2 = this.props;
|
10864 | const currentHeight = _props2.currentHeight,
|
10865 | onHeightChange = _props2.onHeightChange;
|
10866 |
|
10867 | if (newHeight !== currentHeight) {
|
10868 | onHeightChange(newHeight);
|
10869 | }
|
10870 | }
|
10871 | setContentNode(node) {
|
10872 | this.contentNode = node;
|
10873 | }
|
10874 | setMinimumLinesNode(node) {
|
10875 | this.minimumLinesNode = node;
|
10876 | }
|
10877 | }
|
10878 | tslib_1.__decorate([decorators.autobind], Resizer$1.prototype, "handleHeightCheck", null);
|
10879 | tslib_1.__decorate([decorators.autobind], Resizer$1.prototype, "setContentNode", null);
|
10880 | tslib_1.__decorate([decorators.autobind], Resizer$1.prototype, "setMinimumLinesNode", null);
|
10881 | const ENTITIES_TO_REPLACE = {
|
10882 | '&': '&',
|
10883 | '<': '<',
|
10884 | '>': '>',
|
10885 | '\n': '<br>'
|
10886 | };
|
10887 | const REPLACE_REGEX$1 = /[\n&<>]/g;
|
10888 | function replaceEntity(entity) {
|
10889 | return ENTITIES_TO_REPLACE[entity] || entity;
|
10890 | }
|
10891 | function getContentsForMinimumLines(minimumLines) {
|
10892 | let content = '';
|
10893 | for (let line = 0; line < minimumLines; line++) {
|
10894 | content += '<br>';
|
10895 | }
|
10896 | return content;
|
10897 | }
|
10898 | function getFinalContents(contents) {
|
10899 | return contents ? `${contents.replace(REPLACE_REGEX$1, replaceEntity)}<br>` : '<br>';
|
10900 | }
|
10901 |
|
10902 | function Spinner$4({ onChange, onClick }) {
|
10903 | function handleStep(step) {
|
10904 | return () => onChange(step);
|
10905 | }
|
10906 | return React.createElement(
|
10907 | 'div',
|
10908 | { className: styles$80.Spinner, onClick: onClick, 'aria-hidden': true },
|
10909 | React.createElement(
|
10910 | 'div',
|
10911 | { role: 'button', className: styles$80.Segment, tabIndex: -1, onClick: handleStep(1) },
|
10912 | React.createElement(
|
10913 | 'div',
|
10914 | { className: styles$80.SpinnerIcon },
|
10915 | React.createElement(Icon$2, { source: 'caretUp' })
|
10916 | )
|
10917 | ),
|
10918 | React.createElement(
|
10919 | 'div',
|
10920 | { role: 'button', className: styles$80.Segment, tabIndex: -1, onClick: handleStep(-1) },
|
10921 | React.createElement(
|
10922 | 'div',
|
10923 | { className: styles$80.SpinnerIcon },
|
10924 | React.createElement(Icon$2, { source: 'caretDown' })
|
10925 | )
|
10926 | )
|
10927 | );
|
10928 | }
|
10929 |
|
10930 | const getUniqueID$13 = other.createUniqueIDFactory('TextField');
|
10931 | class TextField$1 extends React.PureComponent {
|
10932 | constructor(props) {
|
10933 | super(props);
|
10934 | this.state = {
|
10935 | height: null,
|
10936 | focus: false,
|
10937 | id: props.id || getUniqueID$13()
|
10938 | };
|
10939 | }
|
10940 | componentDidUpdate({ focused }) {
|
10941 | if (this.input && focused !== this.props.focused && this.props.focused === true) {
|
10942 | this.input.focus();
|
10943 | }
|
10944 | }
|
10945 |
|
10946 | componentWillReceiveProps(newProps) {
|
10947 | this.setState(prevState => ({
|
10948 | id: newProps.id || prevState.id
|
10949 | }));
|
10950 | }
|
10951 | render() {
|
10952 | var _props = this.props,
|
10953 | _props$id = _props.id;
|
10954 | const id = _props$id === undefined ? this.state.id : _props$id;
|
10955 | var _props$value = _props.value;
|
10956 | const value = _props$value === undefined ? '' : _props$value,
|
10957 | placeholder = _props.placeholder,
|
10958 | minimal = _props.minimal,
|
10959 | disabled = _props.disabled,
|
10960 | readOnly = _props.readOnly,
|
10961 | role = _props.role,
|
10962 | autoFocus = _props.autoFocus,
|
10963 | type = _props.type,
|
10964 | name = _props.name,
|
10965 | error = _props.error,
|
10966 | multiline = _props.multiline,
|
10967 | connectedRight = _props.connectedRight,
|
10968 | connectedLeft = _props.connectedLeft,
|
10969 | label = _props.label,
|
10970 | labelAction = _props.labelAction,
|
10971 | labelHidden = _props.labelHidden,
|
10972 | helpText = _props.helpText,
|
10973 | prefix = _props.prefix,
|
10974 | suffix = _props.suffix,
|
10975 | onFocus = _props.onFocus,
|
10976 | onBlur = _props.onBlur,
|
10977 | autoComplete = _props.autoComplete,
|
10978 | min = _props.min,
|
10979 | max = _props.max,
|
10980 | minLength = _props.minLength,
|
10981 | maxLength = _props.maxLength,
|
10982 | spellCheck = _props.spellCheck,
|
10983 | optional = _props.optional,
|
10984 | pattern = _props.pattern,
|
10985 | ariaOwns = _props.ariaOwns,
|
10986 | ariaActiveDescendant = _props.ariaActiveDescendant,
|
10987 | ariaAutocomplete = _props.ariaAutocomplete,
|
10988 | ariaControls = _props.ariaControls;
|
10989 | const height = this.state.height;
|
10990 |
|
10991 | const className = styles.classNames(styles$80.TextField, Boolean(value) && styles$80.hasValue, minimal && styles$80.minimal, disabled && styles$80.disabled, readOnly && styles$80.readOnly, error && styles$80.error, multiline && styles$80.multiline, this.state.focus && styles$80.focus);
|
10992 | const inputType = type === 'currency' ? 'text' : type;
|
10993 | const prefixMarkup = prefix ? React.createElement(
|
10994 | 'div',
|
10995 | { className: styles$80.Prefix, id: `${id}Prefix` },
|
10996 | prefix
|
10997 | ) : null;
|
10998 | const suffixMarkup = suffix ? React.createElement(
|
10999 | 'div',
|
11000 | { className: styles$80.Suffix, id: `${id}Suffix` },
|
11001 | suffix
|
11002 | ) : null;
|
11003 | const spinnerMarkup = type === 'number' && !disabled ? React.createElement(Spinner$4, { onChange: this.handleNumberChange }) : null;
|
11004 | const style = multiline && height ? { height } : null;
|
11005 | const resizer = multiline ? React.createElement(Resizer$1, { contents: value || placeholder, currentHeight: height, minimumLines: typeof multiline === 'number' ? multiline : 1, onHeightChange: this.handleExpandingResize }) : null;
|
11006 | const describedBy = [];
|
11007 | if (error) {
|
11008 | describedBy.push(`${id}Error`);
|
11009 | }
|
11010 | if (helpText) {
|
11011 | describedBy.push(helpTextID$1(id));
|
11012 | }
|
11013 | const labelledBy = [labelID(id)];
|
11014 | if (prefix) {
|
11015 | labelledBy.push(`${id}Prefix`);
|
11016 | }
|
11017 | if (suffix) {
|
11018 | labelledBy.push(`${id}Suffix`);
|
11019 | }
|
11020 | const inputClassName = styles.classNames(styles$80.Input, suffix && styles$80['Input-suffixed']);
|
11021 | const input = React.createElement(multiline ? 'textarea' : 'input', {
|
11022 | name,
|
11023 | id,
|
11024 | disabled,
|
11025 | readOnly,
|
11026 | role,
|
11027 | autoFocus,
|
11028 | value,
|
11029 | placeholder,
|
11030 | onFocus,
|
11031 | onBlur,
|
11032 | onKeyPress: this.handleKeyPress,
|
11033 | style,
|
11034 | autoComplete: normalizeAutoComplete$1(autoComplete),
|
11035 | className: inputClassName,
|
11036 | onChange: this.handleChange,
|
11037 | ref: this.setInput,
|
11038 | min,
|
11039 | max,
|
11040 | minLength,
|
11041 | maxLength,
|
11042 | spellCheck,
|
11043 | pattern,
|
11044 | type: inputType,
|
11045 | 'aria-describedby': describedBy.length ? describedBy.join(' ') : undefined,
|
11046 | 'aria-label': label,
|
11047 | 'aria-labelledby': labelledBy.join(' '),
|
11048 | 'aria-invalid': Boolean(error),
|
11049 | 'aria-owns': ariaOwns,
|
11050 | 'aria-activedescendant': ariaActiveDescendant,
|
11051 | 'aria-autocomplete': ariaAutocomplete,
|
11052 | 'aria-controls': ariaControls,
|
11053 | 'aria-multiline': multiline
|
11054 | });
|
11055 | return React.createElement(
|
11056 | Labelled$1,
|
11057 | { label: label, id: id, error: error, action: labelAction, labelHidden: labelHidden, helpText: helpText, optional: optional },
|
11058 | React.createElement(
|
11059 | Connected$1,
|
11060 | { left: connectedLeft, right: connectedRight },
|
11061 | React.createElement(
|
11062 | 'div',
|
11063 | { className: className, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick },
|
11064 | prefixMarkup,
|
11065 | input,
|
11066 | suffixMarkup,
|
11067 | spinnerMarkup,
|
11068 | React.createElement('div', { className: styles$80.Backdrop }),
|
11069 | resizer
|
11070 | )
|
11071 | )
|
11072 | );
|
11073 | }
|
11074 | setInput(input) {
|
11075 | this.input = input;
|
11076 | }
|
11077 | handleNumberChange(steps) {
|
11078 | var _props2 = this.props;
|
11079 | const onChange = _props2.onChange,
|
11080 | value = _props2.value;
|
11081 | var _props2$step = _props2.step;
|
11082 | const step = _props2$step === undefined ? 1 : _props2$step;
|
11083 | var _props2$min = _props2.min;
|
11084 | const min = _props2$min === undefined ? -Infinity : _props2$min;
|
11085 | var _props2$max = _props2.max;
|
11086 | const max = _props2$max === undefined ? Infinity : _props2$max;
|
11087 |
|
11088 | if (onChange == null) {
|
11089 | return;
|
11090 | }
|
11091 |
|
11092 | const dpl = num => (num.toString().split('.')[1] || []).length;
|
11093 | const numericValue = value ? parseFloat(value) : 0;
|
11094 | if (isNaN(numericValue)) {
|
11095 | return;
|
11096 | }
|
11097 |
|
11098 |
|
11099 | const decimalPlaces = Math.max(dpl(numericValue), dpl(step));
|
11100 | const newValue = Math.min(max, Math.max(numericValue + steps * step, min));
|
11101 | onChange(String(newValue.toFixed(decimalPlaces)), this.state.id);
|
11102 | }
|
11103 | handleExpandingResize(height) {
|
11104 | this.setState({ height });
|
11105 | }
|
11106 | handleKeyPress(event) {
|
11107 | const key = event.key,
|
11108 | which = event.which;
|
11109 | const type = this.props.type;
|
11110 |
|
11111 | const numbersSpec = /[\d.eE+-]$/;
|
11112 | if (type !== 'number' || which === exports.Keys.ENTER || key.match(numbersSpec)) {
|
11113 | return;
|
11114 | }
|
11115 | event.preventDefault();
|
11116 | }
|
11117 | handleChange(event) {
|
11118 | const onChange = this.props.onChange;
|
11119 |
|
11120 | if (onChange == null) {
|
11121 | return;
|
11122 | }
|
11123 | onChange(event.currentTarget.value, this.state.id);
|
11124 | }
|
11125 | handleFocus() {
|
11126 | this.setState({ focus: true });
|
11127 | }
|
11128 | handleBlur() {
|
11129 | this.setState({ focus: false });
|
11130 | }
|
11131 | handleClick() {
|
11132 | this.input.focus();
|
11133 | }
|
11134 | }
|
11135 | tslib_1.__decorate([decorators.autobind], TextField$1.prototype, "setInput", null);
|
11136 | tslib_1.__decorate([decorators.autobind], TextField$1.prototype, "handleNumberChange", null);
|
11137 | tslib_1.__decorate([decorators.autobind], TextField$1.prototype, "handleExpandingResize", null);
|
11138 | tslib_1.__decorate([decorators.autobind], TextField$1.prototype, "handleKeyPress", null);
|
11139 | tslib_1.__decorate([decorators.autobind], TextField$1.prototype, "handleChange", null);
|
11140 | tslib_1.__decorate([decorators.autobind], TextField$1.prototype, "handleFocus", null);
|
11141 | tslib_1.__decorate([decorators.autobind], TextField$1.prototype, "handleBlur", null);
|
11142 | tslib_1.__decorate([decorators.autobind], TextField$1.prototype, "handleClick", null);
|
11143 | function normalizeAutoComplete$1(autoComplete) {
|
11144 | if (autoComplete == null) {
|
11145 | return autoComplete;
|
11146 | }
|
11147 | return autoComplete ? 'on' : 'off';
|
11148 | }
|
11149 |
|
11150 | var styles$81 = {
|
11151 | "DisplayText": "p_ub",
|
11152 | "sizeSmall": "p_jx",
|
11153 | "sizeMedium": "p_j1",
|
11154 | "sizeLarge": "p_bd",
|
11155 | "sizeExtraLarge": "p_rw",
|
11156 | };
|
11157 |
|
11158 | function SkeletonDisplayText$1({ size = 'medium' }) {
|
11159 | const className = styles.classNames(styles$81.DisplayText, size && styles$81[styles.variationName('size', size)]);
|
11160 | return React.createElement('div', { className: className });
|
11161 | }
|
11162 |
|
11163 | var styles$82 = {
|
11164 | "SkeletonBodyTextContainer": "p_v9",
|
11165 | "SkeletonBodyText": "p_nn",
|
11166 | };
|
11167 |
|
11168 | function SkeletonBodyText$1({ lines = 3 }) {
|
11169 | const bodyTextLines = [];
|
11170 | for (let i = 0; i < lines; i++) {
|
11171 | bodyTextLines.push(React.createElement('div', { className: styles$82.SkeletonBodyText, key: i }));
|
11172 | }
|
11173 | return React.createElement(
|
11174 | 'div',
|
11175 | { className: styles$82.SkeletonBodyTextContainer },
|
11176 | bodyTextLines
|
11177 | );
|
11178 | }
|
11179 |
|
11180 | var styles$83 = {
|
11181 | "Page": "p_m3",
|
11182 | "fullWidth": "p_et",
|
11183 | "singleColumn": "p_vw",
|
11184 | "Header": "p_fv",
|
11185 | "Header-hasSecondaryActions": "p_l0",
|
11186 | "BreadcrumbAction": "p_tf",
|
11187 | "Actions": "p_h1",
|
11188 | "Action": "p_fn",
|
11189 | };
|
11190 |
|
11191 | class SkeletonPage extends React.PureComponent {
|
11192 | render() {
|
11193 | var _props = this.props;
|
11194 | const children = _props.children,
|
11195 | fullWidth = _props.fullWidth,
|
11196 | singleColumn = _props.singleColumn,
|
11197 | secondaryActions = _props.secondaryActions;
|
11198 | var _props$title = _props.title;
|
11199 | const title = _props$title === undefined ? '' : _props$title,
|
11200 | breadcrumbs = _props.breadcrumbs;
|
11201 |
|
11202 | const className = styles.classNames(styles$83.Page, fullWidth && styles$83.fullWidth, singleColumn && styles$83.singleColumn);
|
11203 | const headerClassName = styles.classNames(styles$83.Header, breadcrumbs && styles$83['Header-hasBreadcrumbs'], secondaryActions && styles$83['Header-hasSecondaryActions']);
|
11204 | const titleMarkup = title !== null ? renderTitle(title) : null;
|
11205 | const secondaryActionsMarkup = secondaryActions ? renderSecondaryActions(secondaryActions) : null;
|
11206 | const breadcrumbMarkup = breadcrumbs ? React.createElement(
|
11207 | 'div',
|
11208 | { className: styles$83.BreadcrumbAction, style: { width: 60 } },
|
11209 | React.createElement(SkeletonBodyText$1, { lines: 1 })
|
11210 | ) : null;
|
11211 | const headerMarkup = !this.props.polaris.easdk ? React.createElement(
|
11212 | 'div',
|
11213 | { className: headerClassName },
|
11214 | breadcrumbMarkup,
|
11215 | titleMarkup,
|
11216 | secondaryActionsMarkup
|
11217 | ) : null;
|
11218 | return React.createElement(
|
11219 | 'div',
|
11220 | { className: className, role: 'status', 'aria-label': 'Page loading' },
|
11221 | headerMarkup,
|
11222 | React.createElement(
|
11223 | 'div',
|
11224 | { className: styles$83.Content },
|
11225 | children
|
11226 | )
|
11227 | );
|
11228 | }
|
11229 | }
|
11230 | function renderSecondaryActions(actionCount) {
|
11231 | const actions = [];
|
11232 | for (let i = 0; i < actionCount; i++) {
|
11233 | const width = Math.round(Math.random() * 40 + 60);
|
11234 | actions.push(React.createElement(
|
11235 | 'div',
|
11236 | { className: styles$83.Action, style: { width }, key: i },
|
11237 | React.createElement(SkeletonBodyText$1, { lines: 1 })
|
11238 | ));
|
11239 | }
|
11240 | return React.createElement(
|
11241 | 'div',
|
11242 | { className: styles$83.Actions },
|
11243 | actions
|
11244 | );
|
11245 | }
|
11246 | function renderTitle(title) {
|
11247 | const titleContent = title === '' ? React.createElement(SkeletonDisplayText$1, { size: 'large' }) : React.createElement(
|
11248 | DisplayText$1,
|
11249 | { size: 'large', element: 'h1' },
|
11250 | title
|
11251 | );
|
11252 | return React.createElement(
|
11253 | 'div',
|
11254 | { className: styles$83.Title },
|
11255 | titleContent
|
11256 | );
|
11257 | }
|
11258 | var SkeletongBodyText$1 = withAppProvider()(SkeletonPage);
|
11259 |
|
11260 | var styles$84 = {
|
11261 | "ProgressBar": "p_tq",
|
11262 | "sizeExtraSmall": "p_wb",
|
11263 | "sizeSmall": "p_wc",
|
11264 | "sizeMedium": "p_ra",
|
11265 | "sizeLarge": "p_ql",
|
11266 | "Indicator": "p_bi",
|
11267 | "fillup": "p_jw",
|
11268 | "Progress": "p_gm",
|
11269 | "Label": "p_ns",
|
11270 | };
|
11271 |
|
11272 | function ProgressBar$1({ progress = 0, size = 'medium', polaris: { intl } }) {
|
11273 | const className = styles.classNames(styles$84.ProgressBar, size && styles$84[styles.variationName('size', size)]);
|
11274 | const warningMessage = intl.translate(progress < 0 ? 'Polaris.ProgressBar.negativeWarningMessage' : 'Polaris.ProgressBar.exceedWarningMessage', { progress });
|
11275 | const parsedProgress = parseProgress(progress, warningMessage);
|
11276 | return React.createElement(
|
11277 | 'div',
|
11278 | { className: className },
|
11279 | React.createElement('progress', { className: styles$84.Progress, value: parsedProgress, max: '100' }),
|
11280 | React.createElement(
|
11281 | 'div',
|
11282 | { className: styles$84.Indicator, style: { width: `${parsedProgress}%` } },
|
11283 | React.createElement(
|
11284 | 'span',
|
11285 | { className: styles$84.Label },
|
11286 | parsedProgress,
|
11287 | '%'
|
11288 | )
|
11289 | )
|
11290 | );
|
11291 | }
|
11292 | function parseProgress(progress, warningMessage) {
|
11293 | let progressWidth;
|
11294 | if (progress < 0) {
|
11295 | if (process.env.NODE_ENV === 'development') {
|
11296 |
|
11297 | console.warn(warningMessage);
|
11298 | }
|
11299 | progressWidth = 0;
|
11300 | } else if (progress > 100) {
|
11301 | if (process.env.NODE_ENV === 'development') {
|
11302 |
|
11303 | console.warn(warningMessage);
|
11304 | }
|
11305 | progressWidth = 100;
|
11306 | } else {
|
11307 | progressWidth = progress;
|
11308 | }
|
11309 | return progressWidth;
|
11310 | }
|
11311 | var ProgressBar$2 = withAppProvider()(ProgressBar$1);
|
11312 |
|
11313 | var styles$85 = {
|
11314 | "DataTable": "p_em",
|
11315 | "collapsed": "p_tg",
|
11316 | "Table": "p_xo",
|
11317 | "Navigation": "p_ce",
|
11318 | "hasFooter": "p_lu",
|
11319 | "ScrollContainer": "p_ws",
|
11320 | "Pip": "p_it",
|
11321 | "Pip-visible": "p_yb",
|
11322 | "TableFoot": "p_a5",
|
11323 | "Cell": "p_i1",
|
11324 | "Cell-numeric": "p_fl",
|
11325 | "Cell-fixed": "p_yp",
|
11326 | "Cell-header": "p_h8",
|
11327 | "Cell-truncated": "p_vx",
|
11328 | "Cell-presentational": "p_ep",
|
11329 | "Cell-sortable": "p_zh",
|
11330 | "Heading": "p_pf",
|
11331 | "Heading-left": "p_jr",
|
11332 | "Heading-sortable": "p_fu",
|
11333 | "Cell-total": "p_ej",
|
11334 | "Cell-footer": "p_b8",
|
11335 | };
|
11336 |
|
11337 | function Cell$3({ height, content, contentType, fixed, truncate, presentational, header, total, footer, sorted, sortable, sortDirection, defaultSortDirection, polaris: { intl: { translate } }, onSort }) {
|
11338 | const numeric = contentType === 'numeric';
|
11339 | const className = styles.classNames(styles$85.Cell, fixed && styles$85['Cell-fixed'], truncate && styles$85['Cell-truncated'], presentational && styles$85['Cell-presentational'], header && styles$85['Cell-header'], total && styles$85['Cell-total'], footer && styles$85['Cell-footer'], numeric && styles$85['Cell-numeric'], sorted && styles$85['Cell-sorted'], sortable && styles$85['Cell-sortable']);
|
11340 | const style = height ? { height: `${height}px` } : undefined;
|
11341 | const headerClassName = styles.classNames(header && styles$85.Heading, header && contentType === 'text' && styles$85['Heading-left']);
|
11342 | const iconClassName = styles.classNames(sortable && styles$85['Heading-sortable']);
|
11343 |
|
11344 | const presentationalMarkup = header ?
|
11345 |
|
11346 | React.createElement('th', { 'aria-hidden': true, role: 'presentation', className: className, style: style }) :
|
11347 |
|
11348 | React.createElement('td', { 'aria-hidden': true, role: 'presentation', className: className, style: style });
|
11349 | let sortedIconMarkup = null;
|
11350 | let sortableIconMarkup = null;
|
11351 | let sortAccessibilityLabel;
|
11352 | if (sortable) {
|
11353 |
|
11354 | sortAccessibilityLabel = translate('Polaris.DataTable.sortAccessibilityLabel', { content: content.toLowerCase() });
|
11355 | if (sorted) {
|
11356 | const direction = sortDirection === 'ascending' ? 'Up' : 'Down';
|
11357 | const source = `caret${direction}`;
|
11358 | sortedIconMarkup = React.createElement(Icon$2, { source: source });
|
11359 | } else {
|
11360 | const direction = defaultSortDirection === 'ascending' ? 'Up' : 'Down';
|
11361 | const source = `caret${direction}`;
|
11362 | sortableIconMarkup = React.createElement(Icon$2, { source: source });
|
11363 | }
|
11364 | }
|
11365 | const sortableHeadingContent = contentType === 'text' ? React.createElement(
|
11366 | 'span',
|
11367 | { className: headerClassName },
|
11368 | content,
|
11369 | React.createElement(
|
11370 | 'span',
|
11371 | { className: iconClassName },
|
11372 | sortableIconMarkup
|
11373 | ),
|
11374 | React.createElement(
|
11375 | 'span',
|
11376 | null,
|
11377 | sortedIconMarkup
|
11378 | )
|
11379 | ) : React.createElement(
|
11380 | 'span',
|
11381 | { className: headerClassName },
|
11382 | React.createElement(
|
11383 | 'span',
|
11384 | { className: iconClassName },
|
11385 | sortableIconMarkup
|
11386 | ),
|
11387 | React.createElement(
|
11388 | 'span',
|
11389 | null,
|
11390 | sortedIconMarkup
|
11391 | ),
|
11392 | content
|
11393 | );
|
11394 | const columnHeadingContent = sortable ? sortableHeadingContent : content;
|
11395 | const sortProps = sortable ? {
|
11396 | role: 'button',
|
11397 | onClick: onSort,
|
11398 | onKeyDown: onKeyDownEnter(onSort),
|
11399 | 'aria-sort': sortDirection,
|
11400 | 'aria-label': sortAccessibilityLabel,
|
11401 | tabIndex: 0
|
11402 | } : { 'aria-disabled': true };
|
11403 | const headingMarkup = header ? React.createElement(
|
11404 | 'th',
|
11405 | Object.assign({ className: className, scope: 'col', style: style }, sortProps),
|
11406 | columnHeadingContent
|
11407 | ) : React.createElement(
|
11408 | 'th',
|
11409 | { className: className, scope: 'row', style: style },
|
11410 | content
|
11411 | );
|
11412 | const title = truncate ? content : '';
|
11413 | const nonPresentationalMarkup = header || fixed ? headingMarkup : React.createElement(
|
11414 | 'td',
|
11415 | { className: className, style: style, title: title },
|
11416 | content
|
11417 | );
|
11418 | const cellMarkup = presentational ? presentationalMarkup : nonPresentationalMarkup;
|
11419 | return cellMarkup;
|
11420 | }
|
11421 | function onKeyDownEnter(sortFunc) {
|
11422 | return function handleKeyPress(event) {
|
11423 | const keyCode = event.keyCode;
|
11424 |
|
11425 | if (keyCode === 13 && sortFunc !== undefined) {
|
11426 | sortFunc();
|
11427 | }
|
11428 | };
|
11429 | }
|
11430 | var Cell$4 = withAppProvider()(Cell$3);
|
11431 |
|
11432 | class DataTable$3 extends React.PureComponent {
|
11433 | constructor(props) {
|
11434 | super(props);
|
11435 | this.state = {
|
11436 | collapsed: false,
|
11437 | columnVisibilityData: [],
|
11438 | sorted: this.props.sortable && this.props.sortable.length > 0,
|
11439 | heights: [],
|
11440 | preservedScrollPosition: {}
|
11441 | };
|
11442 | const translate = props.polaris.intl.translate;
|
11443 |
|
11444 | this.totalsRowHeading = translate('Polaris.DataTable.totalsRowHeading');
|
11445 | }
|
11446 | componentDidMount() {
|
11447 |
|
11448 | if (process.env.NODE_ENV === 'development') {
|
11449 | setTimeout(() => {
|
11450 | this.handleResize();
|
11451 | }, 10);
|
11452 | } else {
|
11453 | this.handleResize();
|
11454 | }
|
11455 | }
|
11456 | render() {
|
11457 | var _props = this.props;
|
11458 | const headings = _props.headings,
|
11459 | totals = _props.totals,
|
11460 | rows = _props.rows,
|
11461 | truncate = _props.truncate,
|
11462 | footerContent = _props.footerContent,
|
11463 | sortable = _props.sortable;
|
11464 | var _props$defaultSortDir = _props.defaultSortDirection;
|
11465 | const defaultSortDirection = _props$defaultSortDir === undefined ? 'ascending' : _props$defaultSortDir;
|
11466 | var _props$initialSortCol = _props.initialSortColumnIndex;
|
11467 | const initialSortColumnIndex = _props$initialSortCol === undefined ? 0 : _props$initialSortCol;
|
11468 | var _state = this.state;
|
11469 | const collapsed = _state.collapsed,
|
11470 | heights = _state.heights;
|
11471 | var _state$sortedColumnIn = _state.sortedColumnIndex;
|
11472 | const sortedColumnIndex = _state$sortedColumnIn === undefined ? initialSortColumnIndex : _state$sortedColumnIn;
|
11473 | var _state$sortDirection = _state.sortDirection;
|
11474 | const sortDirection = _state$sortDirection === undefined ? defaultSortDirection : _state$sortDirection;
|
11475 |
|
11476 | const className = styles.classNames(styles$85.DataTable, collapsed && styles$85.collapsed, footerContent && styles$85.hasFooter);
|
11477 | const wrapperClassName = styles.classNames(styles$85.TableWrapper, collapsed && styles$85.collapsed);
|
11478 | const footerClassName = styles.classNames(footerContent && styles$85.TableFoot);
|
11479 | const footerMarkup = footerContent ? React.createElement(
|
11480 | 'tfoot',
|
11481 | { className: footerClassName },
|
11482 | React.createElement(
|
11483 | 'tr',
|
11484 | null,
|
11485 | this.renderFooter()
|
11486 | )
|
11487 | ) : null;
|
11488 | const totalsMarkup = totals ? React.createElement(
|
11489 | 'tr',
|
11490 | null,
|
11491 | insertPresentationalCell(totals).map(this.renderTotals)
|
11492 | ) : null;
|
11493 | const headingMarkup = React.createElement(
|
11494 | 'tr',
|
11495 | null,
|
11496 | insertPresentationalCell(headings).map((heading, headingIndex) => {
|
11497 | let sortableHeadingProps = {};
|
11498 | const id = `heading-cell-${headingIndex}`;
|
11499 |
|
11500 |
|
11501 |
|
11502 | const index = headingIndex <= 1 ? headingIndex : headingIndex - 1;
|
11503 | const contentTypes = this.getContentTypes();
|
11504 | if (sortable) {
|
11505 | const isSortable = sortable[index];
|
11506 | const isSorted = isSortable && sortedColumnIndex === index;
|
11507 | const direction = isSorted && sortedColumnIndex === index ? sortDirection : 'none';
|
11508 | sortableHeadingProps = {
|
11509 | defaultSortDirection,
|
11510 | sorted: isSorted,
|
11511 | sortable: isSortable,
|
11512 | sortDirection: direction,
|
11513 | onSort: this.defaultOnSort(index)
|
11514 | };
|
11515 | }
|
11516 | const height = !truncate ? heights[0] : undefined;
|
11517 | return React.createElement(Cell$4, Object.assign({ header: true, key: id, height: height, content: heading, contentType: contentTypes[headingIndex], fixed: headingIndex === 0, truncate: truncate, presentational: headingIndex === 1 }, sortableHeadingProps));
|
11518 | })
|
11519 | );
|
11520 | const bodyMarkup = rows.map(this.defaultRenderRow);
|
11521 | const style = footerContent ? { marginBottom: `${heights[heights.length - 1]}px` } : {};
|
11522 | return React.createElement(
|
11523 | 'div',
|
11524 | { className: wrapperClassName },
|
11525 | React.createElement(
|
11526 | 'div',
|
11527 | { className: className, ref: this.setDataTable },
|
11528 | React.createElement(
|
11529 | 'div',
|
11530 | { className: styles$85.ScrollContainer, ref: this.setScrollContainer, style: style },
|
11531 | React.createElement(EventListener$1, { event: 'resize', handler: this.handleResize }),
|
11532 | React.createElement(EventListener$1, { capture: true, event: 'scroll', handler: this.scrollListener }),
|
11533 | React.createElement(
|
11534 | 'table',
|
11535 | { className: styles$85.Table, ref: this.setTable },
|
11536 | React.createElement(
|
11537 | 'thead',
|
11538 | null,
|
11539 | headingMarkup,
|
11540 | totalsMarkup
|
11541 | ),
|
11542 | React.createElement(
|
11543 | 'tbody',
|
11544 | null,
|
11545 | bodyMarkup
|
11546 | ),
|
11547 | footerMarkup
|
11548 | )
|
11549 | )
|
11550 | )
|
11551 | );
|
11552 | }
|
11553 | setDataTable(dataTable) {
|
11554 | this.dataTable = dataTable;
|
11555 | }
|
11556 | setScrollContainer(scrollContainer) {
|
11557 | this.scrollContainer = scrollContainer;
|
11558 | }
|
11559 | setTable(table) {
|
11560 | this.table = table;
|
11561 | }
|
11562 | handleResize() {
|
11563 | var _props2 = this.props;
|
11564 | const footerContent = _props2.footerContent,
|
11565 | truncate = _props2.truncate;
|
11566 |
|
11567 | const collapsed = this.table.scrollWidth > this.dataTable.offsetWidth;
|
11568 | this.scrollContainer.scrollLeft = 0;
|
11569 | this.setState(Object.assign({ collapsed, heights: [] }, this.calculateColumnVisibilityData(collapsed)), () => {
|
11570 | if (footerContent || !truncate) {
|
11571 | this.setHeightsAndScrollPosition();
|
11572 | }
|
11573 | });
|
11574 | }
|
11575 | tallestCellHeights() {
|
11576 | var _props3 = this.props;
|
11577 | const footerContent = _props3.footerContent,
|
11578 | truncate = _props3.truncate;
|
11579 |
|
11580 | const rows = Array.from(this.table.getElementsByTagName('tr'));
|
11581 | let heights = this.state.heights;
|
11582 |
|
11583 | if (!truncate) {
|
11584 | return heights = rows.map(row => {
|
11585 | const fixedCell = row.childNodes[0];
|
11586 | return Math.max(row.clientHeight, fixedCell.clientHeight);
|
11587 | });
|
11588 | }
|
11589 | if (footerContent) {
|
11590 | const footerCellHeight = rows[rows.length - 1].childNodes[0].clientHeight;
|
11591 | heights = [footerCellHeight];
|
11592 | }
|
11593 | return heights;
|
11594 | }
|
11595 | resetScrollPosition() {
|
11596 | var _state$preservedScrol = this.state.preservedScrollPosition;
|
11597 | const left = _state$preservedScrol.left,
|
11598 | top = _state$preservedScrol.top;
|
11599 |
|
11600 | if (left) {
|
11601 | this.scrollContainer.scrollLeft = left;
|
11602 | }
|
11603 | if (top) {
|
11604 | window.scrollTo(0, top);
|
11605 | }
|
11606 | }
|
11607 | setHeightsAndScrollPosition() {
|
11608 | this.setState({ heights: this.tallestCellHeights() }, this.resetScrollPosition);
|
11609 | }
|
11610 | calculateColumnVisibilityData(collapsed) {
|
11611 | if (collapsed) {
|
11612 | const headerCells = this.table.querySelectorAll('[class*=header]');
|
11613 | const collapsedHeaderCells = Array.from(headerCells).slice(2);
|
11614 | const fixedColumnWidth = headerCells[0].offsetWidth;
|
11615 | const tableData = {
|
11616 | fixedColumnWidth,
|
11617 | firstVisibleColumnIndex: collapsedHeaderCells.length - 1,
|
11618 | tableLeftVisibleEdge: this.scrollContainer.scrollLeft,
|
11619 | tableRightVisibleEdge: this.scrollContainer.scrollLeft + (this.dataTable.offsetWidth - fixedColumnWidth)
|
11620 | };
|
11621 | const columnVisibilityData = collapsedHeaderCells.map(measureColumn$1(tableData));
|
11622 | return Object.assign({ columnVisibilityData }, getPrevAndCurrentColumns$1(tableData, columnVisibilityData));
|
11623 | }
|
11624 | return {
|
11625 | columnVisibilityData: [],
|
11626 | previousColumn: undefined,
|
11627 | currentColumn: undefined
|
11628 | };
|
11629 | }
|
11630 | scrollListener() {
|
11631 | this.setState(Object.assign({}, this.calculateColumnVisibilityData(this.state.collapsed)));
|
11632 | }
|
11633 | getContentTypes() {
|
11634 | const columnContentTypes = this.props.columnContentTypes;
|
11635 |
|
11636 | const fixedCellType = columnContentTypes[0];
|
11637 | return [fixedCellType, ...columnContentTypes];
|
11638 | }
|
11639 | renderFirstTwoTotalsCells(index) {
|
11640 | let height;
|
11641 | const id = `totals-cell-${index}`;
|
11642 | const heights = this.state.heights;
|
11643 | var _props$truncate = this.props.truncate;
|
11644 | const truncate = _props$truncate === undefined ? false : _props$truncate;
|
11645 |
|
11646 | if (!truncate) {
|
11647 | height = heights[1];
|
11648 | }
|
11649 | if (index === 0) {
|
11650 | return React.createElement(Cell$4, { fixed: true, total: true, key: id, height: height, content: this.totalsRowHeading, truncate: truncate });
|
11651 | }
|
11652 | if (index === 1) {
|
11653 | return React.createElement(Cell$4, { key: id, presentational: true, height: height });
|
11654 | }
|
11655 | return React.createElement(Cell$4, { total: true, key: id, contentType: 'numeric', height: height });
|
11656 | }
|
11657 | renderTotals(total, index) {
|
11658 | let height;
|
11659 | const id = `totals-cell-${index}`;
|
11660 | const heights = this.state.heights;
|
11661 | var _props$truncate2 = this.props.truncate;
|
11662 | const truncate = _props$truncate2 === undefined ? false : _props$truncate2;
|
11663 |
|
11664 | if (!truncate) {
|
11665 | height = heights[1];
|
11666 | }
|
11667 | return total === '' ? this.renderFirstTwoTotalsCells(index) : React.createElement(Cell$4, { total: true, key: id, height: height, contentType: 'numeric', content: total });
|
11668 | }
|
11669 | defaultRenderRow(row, index) {
|
11670 | const className = styles.classNames(styles$85.TableRow);
|
11671 | const contentTypes = this.getContentTypes();
|
11672 | var _props4 = this.props;
|
11673 | const totals = _props4.totals,
|
11674 | footerContent = _props4.footerContent;
|
11675 | var _props4$truncate = _props4.truncate;
|
11676 | const truncate = _props4$truncate === undefined ? false : _props4$truncate;
|
11677 | const heights = this.state.heights;
|
11678 |
|
11679 | const bodyCellHeights = totals ? heights.slice(2) : heights.slice(1);
|
11680 | if (footerContent) {
|
11681 | bodyCellHeights.pop();
|
11682 | }
|
11683 | return React.createElement(
|
11684 | 'tr',
|
11685 | { key: `row-${index}`, className: className },
|
11686 | insertPresentationalCell(row).map((content, cellIndex) => {
|
11687 | const id = `cell-${cellIndex}-row-${index}`;
|
11688 | return React.createElement(Cell$4, { key: id, height: bodyCellHeights[index], content: content, contentType: contentTypes[cellIndex], fixed: cellIndex === 0, truncate: truncate, presentational: cellIndex === 1 });
|
11689 | })
|
11690 | );
|
11691 | }
|
11692 | renderFooter() {
|
11693 | const heights = this.state.heights;
|
11694 |
|
11695 | const footerCellHeight = heights[heights.length - 1];
|
11696 | return React.createElement(Cell$4, { footer: true, height: footerCellHeight, content: this.props.footerContent, truncate: this.props.truncate });
|
11697 | }
|
11698 | defaultOnSort(headingIndex) {
|
11699 | var _props5 = this.props;
|
11700 | const onSort = _props5.onSort,
|
11701 | truncate = _props5.truncate;
|
11702 | var _props5$defaultSortDi = _props5.defaultSortDirection;
|
11703 | const defaultSortDirection = _props5$defaultSortDi === undefined ? 'ascending' : _props5$defaultSortDi,
|
11704 | initialSortColumnIndex = _props5.initialSortColumnIndex;
|
11705 | var _state2 = this.state;
|
11706 | const sortDirection = _state2.sortDirection;
|
11707 | var _state2$sortedColumnI = _state2.sortedColumnIndex;
|
11708 | const sortedColumnIndex = _state2$sortedColumnI === undefined ? initialSortColumnIndex : _state2$sortedColumnI;
|
11709 |
|
11710 | let newSortDirection = defaultSortDirection;
|
11711 | if (sortedColumnIndex === headingIndex) {
|
11712 | newSortDirection = sortDirection === 'ascending' ? 'descending' : 'ascending';
|
11713 | }
|
11714 | const handleSort = () => {
|
11715 | this.setState({
|
11716 | sorted: true,
|
11717 | sortDirection: newSortDirection,
|
11718 | sortedColumnIndex: headingIndex
|
11719 | }, () => {
|
11720 | if (onSort) {
|
11721 | onSort(headingIndex, newSortDirection);
|
11722 | if (!truncate) {
|
11723 | const preservedScrollPosition = {
|
11724 | left: this.scrollContainer.scrollLeft,
|
11725 | top: window.scrollY
|
11726 | };
|
11727 | this.setState({ preservedScrollPosition });
|
11728 | this.handleResize();
|
11729 | }
|
11730 | }
|
11731 | });
|
11732 | };
|
11733 | return handleSort;
|
11734 | }
|
11735 | }
|
11736 | tslib_1.__decorate([decorators.autobind], DataTable$3.prototype, "setDataTable", null);
|
11737 | tslib_1.__decorate([decorators.autobind], DataTable$3.prototype, "setScrollContainer", null);
|
11738 | tslib_1.__decorate([decorators.autobind], DataTable$3.prototype, "setTable", null);
|
11739 | tslib_1.__decorate([decorators.autobind, decorators.debounce()], DataTable$3.prototype, "handleResize", null);
|
11740 | tslib_1.__decorate([decorators.autobind], DataTable$3.prototype, "tallestCellHeights", null);
|
11741 | tslib_1.__decorate([decorators.autobind], DataTable$3.prototype, "resetScrollPosition", null);
|
11742 | tslib_1.__decorate([decorators.autobind], DataTable$3.prototype, "setHeightsAndScrollPosition", null);
|
11743 | tslib_1.__decorate([decorators.autobind], DataTable$3.prototype, "calculateColumnVisibilityData", null);
|
11744 | tslib_1.__decorate([decorators.autobind], DataTable$3.prototype, "scrollListener", null);
|
11745 | tslib_1.__decorate([decorators.autobind
|
11746 |
|
11747 |
|
11748 |
|
11749 |
|
11750 |
|
11751 |
|
11752 |
|
11753 |
|
11754 |
|
11755 |
|
11756 |
|
11757 |
|
11758 |
|
11759 |
|
11760 |
|
11761 |
|
11762 |
|
11763 |
|
11764 |
|
11765 |
|
11766 |
|
11767 |
|
11768 |
|
11769 | , decorators.autobind], DataTable$3.prototype, "getContentTypes", null);
|
11770 | tslib_1.__decorate([decorators.autobind], DataTable$3.prototype, "renderFirstTwoTotalsCells", null);
|
11771 | tslib_1.__decorate([decorators.autobind], DataTable$3.prototype, "renderTotals", null);
|
11772 | tslib_1.__decorate([decorators.autobind], DataTable$3.prototype, "defaultRenderRow", null);
|
11773 | tslib_1.__decorate([decorators.autobind], DataTable$3.prototype, "renderFooter", null);
|
11774 | tslib_1.__decorate([decorators.autobind], DataTable$3.prototype, "defaultOnSort", null);
|
11775 | function insertPresentationalCell(arr = []) {
|
11776 | const fixedCell = arr[0];
|
11777 | const presentationalCell = '';
|
11778 | return [fixedCell, presentationalCell, ...arr.slice(1)];
|
11779 | }
|
11780 | function measureColumn$1(tableData) {
|
11781 | return function (column, index) {
|
11782 | const tableLeftVisibleEdge = tableData.tableLeftVisibleEdge,
|
11783 | tableRightVisibleEdge = tableData.tableRightVisibleEdge,
|
11784 | firstVisibleColumnIndex = tableData.firstVisibleColumnIndex,
|
11785 | fixedColumnWidth = tableData.fixedColumnWidth;
|
11786 |
|
11787 | const width = column.offsetWidth;
|
11788 | const leftEdge = column.offsetLeft - fixedColumnWidth;
|
11789 | const rightEdge = leftEdge + width;
|
11790 | const leftEdgeIsVisible = isEdgeVisible$1(leftEdge, tableLeftVisibleEdge, tableRightVisibleEdge);
|
11791 | const rightEdgeIsVisible = isEdgeVisible$1(rightEdge, tableLeftVisibleEdge, tableRightVisibleEdge);
|
11792 | const isCompletelyVisible = leftEdge < tableLeftVisibleEdge && rightEdge > tableRightVisibleEdge;
|
11793 | const isVisible = isCompletelyVisible || leftEdgeIsVisible || rightEdgeIsVisible;
|
11794 | if (isVisible) {
|
11795 | tableData.firstVisibleColumnIndex = Math.min(firstVisibleColumnIndex, index);
|
11796 | }
|
11797 | return { leftEdge, rightEdge, isVisible };
|
11798 | };
|
11799 | }
|
11800 | function isEdgeVisible$1(target$$1, start, end) {
|
11801 | const minVisiblePixels = 30;
|
11802 | return target$$1 >= start + minVisiblePixels && target$$1 <= end - minVisiblePixels;
|
11803 | }
|
11804 | function getPrevAndCurrentColumns$1(tableData, columnData) {
|
11805 | const tableRightVisibleEdge = tableData.tableRightVisibleEdge,
|
11806 | tableLeftVisibleEdge = tableData.tableLeftVisibleEdge,
|
11807 | firstVisibleColumnIndex = tableData.firstVisibleColumnIndex;
|
11808 |
|
11809 | const previousColumnIndex = Math.max(firstVisibleColumnIndex - 1, 0);
|
11810 | const previousColumn = columnData[previousColumnIndex];
|
11811 | const lastColumnIndex = columnData.length - 1;
|
11812 | const lastColumn = columnData[lastColumnIndex];
|
11813 | const currentColumn = Object.assign({ isScrolledFarthestLeft: firstVisibleColumnIndex === 0 && tableLeftVisibleEdge === 0, isScrolledFarthestRight: lastColumn.rightEdge <= tableRightVisibleEdge }, columnData[firstVisibleColumnIndex]);
|
11814 | return { previousColumn, currentColumn };
|
11815 | }
|
11816 | var MobileTable$1 = withAppProvider()(DataTable$3);
|
11817 |
|
11818 | exports.handleMouseUpByBlurring = handleMouseUpByBlurring;
|
11819 | exports.contentContextTypes = contentContextTypes;
|
11820 | exports.AccountConnection = AccountConnection$1;
|
11821 | exports.ActionList = ActionList$1;
|
11822 | exports.AppProvider = AppProvider$1;
|
11823 | exports.polarisContextTypes = polarisAppProviderContextTypes;
|
11824 | exports.createPolarisContext = createPolarisContext;
|
11825 | exports.withAppProvider = withAppProvider;
|
11826 | exports.Avatar = Avatar$2;
|
11827 | exports.Badge = Badge$2;
|
11828 | exports.Banner = Banner$1;
|
11829 | exports.Breadcrumbs = Breadcrumbs$1;
|
11830 | exports.Button = Button$2;
|
11831 | exports.buttonFrom = buttonFrom;
|
11832 | exports.buttonsFrom = buttonsFrom;
|
11833 | exports.ButtonGroup = ButtonGroup$1;
|
11834 | exports.CalloutCard = CalloutCard$1;
|
11835 | exports.Caption = Caption$1;
|
11836 | exports.Card = Card$1;
|
11837 | exports.Checkbox = Checkbox$2;
|
11838 | exports.ChoiceList = ChoiceList$2;
|
11839 | exports.Collapsible = Collapsible$2;
|
11840 | exports.ColorPicker = ColorPicker$1;
|
11841 | exports.rgbToHex = rgbToHex;
|
11842 | exports.rgbToHsb = rgbToHsb;
|
11843 | exports.hsbToRgb = hsbToRgb;
|
11844 | exports.hsbToHex = hsbToHex;
|
11845 | exports.rgbString = rgbString;
|
11846 | exports.rgbaString = rgbaString;
|
11847 | exports.Connected = Connected$1;
|
11848 | exports.DataField = DataField$1;
|
11849 | exports.DataTable = DataTable$2;
|
11850 | exports.DatePreference = DatePreference$1;
|
11851 | exports.DatePicker = DatePicker$2;
|
11852 | exports.Months = dates.Months;
|
11853 | exports.DescriptionList = DescriptionList$1;
|
11854 | exports.DisplayText = DisplayText$1;
|
11855 | exports.DropZone = DropZone$2;
|
11856 | exports.EmptySearchResult = EmptySearchResult$2;
|
11857 | exports.EmptyState = EmptyState$1;
|
11858 | exports.EventListener = EventListener$1;
|
11859 | exports.ExceptionList = ExceptionList$1;
|
11860 | exports.FilterControl = FilterControl$2;
|
11861 | exports.Focus = Focus$1;
|
11862 | exports.TrapFocus = TrapFocus;
|
11863 | exports.FooterHelp = FooterHelp$1;
|
11864 | exports.Form = Form$1;
|
11865 | exports.FormLayout = FormLayout$1;
|
11866 | exports.Heading = Heading$1;
|
11867 | exports.Hide = Hide$1;
|
11868 | exports.Icon = Icon$2;
|
11869 | exports.Image = Image$1;
|
11870 | exports.InlineError = InlineError$1;
|
11871 | exports.InlineValidation = InlineValidation$1;
|
11872 | exports.Indicator = Indicator$1;
|
11873 | exports.KeyboardKey = KeyboardKey$1;
|
11874 | exports.KeypressListener = KeypressListener$1;
|
11875 | exports.Label = Label$1;
|
11876 | exports.Labelled = Labelled$1;
|
11877 | exports.Layout = Layout$1;
|
11878 | exports.Link = Link$2;
|
11879 | exports.List = ContentList;
|
11880 | exports.Media = Media$1;
|
11881 | exports.Modal = Modal$3;
|
11882 | exports.OptionList = OptionList$2;
|
11883 | exports.Page = Page$2;
|
11884 | exports.PageActions = PageActions$1;
|
11885 | exports.Pagination = Pagination$2;
|
11886 | exports.Popover = Popover$1;
|
11887 | exports.Portal = Portal$1;
|
11888 | exports.RadioButton = RadioButton$1;
|
11889 | exports.RangeSlider = RangeSlider$2;
|
11890 | exports.ResourceList = ResourceList$2;
|
11891 | exports.Scrollable = Scrollable$2;
|
11892 | exports.Select = Select$1;
|
11893 | exports.SettingToggle = SettingToggle$1;
|
11894 | exports.Spacing = Spacing$1;
|
11895 | exports.Spinner = Spinner$2;
|
11896 | exports.Stack = Stack$1;
|
11897 | exports.Sticky = Sticky$1;
|
11898 | exports.Subheading = Subheading$1;
|
11899 | exports.Tabs = Tabs$1;
|
11900 | exports.Tag = Tag$2;
|
11901 | exports.TextContainer = TextContainer$1;
|
11902 | exports.TextField = TextField$1;
|
11903 | exports.TextStyle = TextStyle$1;
|
11904 | exports.Thumbnail = Thumbnail$1;
|
11905 | exports.Tooltip = Tooltip$1;
|
11906 | exports.Truncate = Truncate$1;
|
11907 | exports.UnstyledLink = UnstyledLink$2;
|
11908 | exports.VisuallyHidden = VisuallyHidden$1;
|
11909 | exports.SkeletonPage = SkeletongBodyText$1;
|
11910 | exports.SkeletonBodyText = SkeletonBodyText$1;
|
11911 | exports.SkeletonDisplayText = SkeletonDisplayText$1;
|
11912 | exports.ProgressBar = ProgressBar$2;
|
11913 | exports.withContext = withContext$1;
|
11914 | exports.withRef = withRef$1;
|
11915 | exports.MobileTable = MobileTable$1;
|