pcm-shared-components 2.1.383 → 2.1.384
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,478 @@
|
|
|
1
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import { TextField, Icon, IconButton, Button, Paper, Typography, InputAdornment, MenuItem, ToggleButton, ToggleButtonGroup, Checkbox, ListItemText, Chip, Alert } from '@mui/material';
|
|
4
|
+
import { ThemeProvider } from '@mui/system';
|
|
5
|
+
import { createTheme, useTheme, alpha } from '@mui/material/styles';
|
|
6
|
+
import AddIcon from '@mui/icons-material/Add';
|
|
7
|
+
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
|
|
8
|
+
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
|
|
9
|
+
import WarningAmberIcon from '@mui/icons-material/WarningAmber';
|
|
10
|
+
import * as i18nextLocal from 'i18next';
|
|
11
|
+
|
|
12
|
+
// Every visible string this component owns lives under these two pre-existing i18next namespaces
|
|
13
|
+
// (already shared across both PitchCamp apps via pcm-shared-components' translations.json). Keyed
|
|
14
|
+
// by itemType so one component serves animals and vehicles without the caller needing to resolve
|
|
15
|
+
// any text itself -- only field labels/placeholders/options come from the caller (they're
|
|
16
|
+
// admin-configured or item-specific, not something this component could know).
|
|
17
|
+
const KEYS = {
|
|
18
|
+
animal: {
|
|
19
|
+
sectionTitle: 'animal.section_title',
|
|
20
|
+
itemTitle: 'animal.client_animal_title',
|
|
21
|
+
count: 'animal.animal_count',
|
|
22
|
+
addItem: 'animal.add_animal',
|
|
23
|
+
requiredInformation: 'animal.required_information',
|
|
24
|
+
missingCount: 'animal.missing_count',
|
|
25
|
+
needsInformation: 'animal.needs_information',
|
|
26
|
+
maxReached: 'occupant_vehicle.max_animal'
|
|
27
|
+
},
|
|
28
|
+
vehicle: {
|
|
29
|
+
sectionTitle: 'client_vehicle.client_vehicle_title',
|
|
30
|
+
itemTitle: 'client_vehicle.vehicle_title',
|
|
31
|
+
count: 'client_vehicle.vehicle_count',
|
|
32
|
+
addItem: 'client_vehicle.add_vehicle',
|
|
33
|
+
requiredInformation: 'client_vehicle.required_information',
|
|
34
|
+
missingCount: 'client_vehicle.missing_count',
|
|
35
|
+
needsInformation: 'client_vehicle.needs_information',
|
|
36
|
+
maxReached: 'occupant_vehicle.max_vehicle'
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
// Type-aware required-field wording so the guest/staff knows what's actually missing -- "please
|
|
41
|
+
// select an option" reads very differently from "please enter a number". Not itemType-specific:
|
|
42
|
+
// a select field is a select field whether it belongs to an animal or a vehicle. Falls back to
|
|
43
|
+
// animal.required_error for text/textarea, where the generic "fill this in" copy already fits.
|
|
44
|
+
const REQUIRED_ERROR_KEY_BY_TYPE = {
|
|
45
|
+
select: 'animal.required_error_select',
|
|
46
|
+
select_multiple: 'animal.required_error_select_multiple',
|
|
47
|
+
number: 'animal.required_error_number',
|
|
48
|
+
date: 'animal.required_error_date',
|
|
49
|
+
yes_no: 'animal.required_error_yes_no'
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* Tab-per-item editor for a lot's animal or vehicle detail fields: one tab per item (green
|
|
54
|
+
* check when every required field is answered, amber warning triangle otherwise), an "Add"
|
|
55
|
+
* button, the selected item's fields as a 2-column grid, and a sticky validation banner with a
|
|
56
|
+
* "Review" action that jumps to the first incomplete item and focuses its first invalid field.
|
|
57
|
+
*
|
|
58
|
+
* Fully controlled: this component owns no data, only the transient "which tab is selected" UI
|
|
59
|
+
* state. All actual mutation goes back through the callback props, so each host app keeps its own
|
|
60
|
+
* state management (Redux, local `useState`, whatever) as the source of truth.
|
|
61
|
+
*
|
|
62
|
+
* ## Importing the component in your project
|
|
63
|
+
*
|
|
64
|
+
```js
|
|
65
|
+
|
|
66
|
+
import {AnimalVehicleDetailsEditor} from 'pcm-shared-components';
|
|
67
|
+
|
|
68
|
+
```
|
|
69
|
+
*
|
|
70
|
+
*/
|
|
71
|
+
export const AnimalVehicleDetailsEditor = props => {
|
|
72
|
+
const {
|
|
73
|
+
itemType,
|
|
74
|
+
items,
|
|
75
|
+
fieldConfig,
|
|
76
|
+
isFieldAnswered,
|
|
77
|
+
onFieldChange,
|
|
78
|
+
onAddItem,
|
|
79
|
+
onRemoveItem,
|
|
80
|
+
canAddMore,
|
|
81
|
+
maxItems,
|
|
82
|
+
className,
|
|
83
|
+
theme,
|
|
84
|
+
i18next
|
|
85
|
+
} = props;
|
|
86
|
+
const compTheme = theme || useTheme();
|
|
87
|
+
const defaultTheme = createTheme(compTheme);
|
|
88
|
+
const keys = KEYS[itemType] || KEYS.animal;
|
|
89
|
+
const requiredErrorText = fieldType => i18next.t(REQUIRED_ERROR_KEY_BY_TYPE[fieldType] || 'animal.required_error');
|
|
90
|
+
const missingRequiredFields = item => fieldConfig.filter(f => f.required).filter(f => !isFieldAnswered(f.type, item.values?.[f.key] ?? (f.type === 'select_multiple' ? [] : '')));
|
|
91
|
+
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
92
|
+
// Growing the list (Add) jumps to the newly-added last item, since that's the one the host just
|
|
93
|
+
// asked for and the one that needs filling in. Shrinking it (Remove) just clamps the current
|
|
94
|
+
// selection back into range instead of jumping anywhere.
|
|
95
|
+
const prevItemsLengthRef = useRef(items.length);
|
|
96
|
+
useEffect(() => {
|
|
97
|
+
if (items.length > prevItemsLengthRef.current) {
|
|
98
|
+
setSelectedIndex(items.length - 1);
|
|
99
|
+
} else {
|
|
100
|
+
setSelectedIndex(prev => Math.min(prev, Math.max(0, items.length - 1)));
|
|
101
|
+
}
|
|
102
|
+
prevItemsLengthRef.current = items.length;
|
|
103
|
+
}, [items.length]);
|
|
104
|
+
|
|
105
|
+
// "Review" jumps to the first incomplete item and focuses its first invalid field. The field
|
|
106
|
+
// doesn't exist in the DOM until AFTER the tab switch commits, so this is a two-step dance:
|
|
107
|
+
// record which index we're waiting on, then once that index is actually selected, look inside
|
|
108
|
+
// fieldsContainerRef for the first data-field-invalid="true" control and focus it.
|
|
109
|
+
const fieldsContainerRef = useRef(null);
|
|
110
|
+
const [pendingFocusIndex, setPendingFocusIndex] = useState(null);
|
|
111
|
+
useEffect(() => {
|
|
112
|
+
if (pendingFocusIndex === null || selectedIndex !== pendingFocusIndex) return;
|
|
113
|
+
const firstInvalid = fieldsContainerRef.current?.querySelector('[data-field-invalid="true"] input, [data-field-invalid="true"] textarea, [data-field-invalid="true"] [role="combobox"]');
|
|
114
|
+
firstInvalid?.focus();
|
|
115
|
+
setPendingFocusIndex(null);
|
|
116
|
+
}, [selectedIndex, pendingFocusIndex]);
|
|
117
|
+
const handleReview = () => {
|
|
118
|
+
const idx = items.findIndex(item => missingRequiredFields(item).length > 0);
|
|
119
|
+
if (idx === -1) return;
|
|
120
|
+
setSelectedIndex(idx);
|
|
121
|
+
setPendingFocusIndex(idx);
|
|
122
|
+
};
|
|
123
|
+
const selectedItem = items[selectedIndex];
|
|
124
|
+
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
125
|
+
theme: defaultTheme
|
|
126
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
127
|
+
className: className
|
|
128
|
+
}, /*#__PURE__*/React.createElement(Paper, {
|
|
129
|
+
variant: "outlined",
|
|
130
|
+
sx: {
|
|
131
|
+
p: 1.5,
|
|
132
|
+
borderRadius: 2,
|
|
133
|
+
bgcolor: 'action.hover'
|
|
134
|
+
}
|
|
135
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
136
|
+
className: "flex items-center justify-between mb-8"
|
|
137
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
138
|
+
className: "flex items-center",
|
|
139
|
+
style: {
|
|
140
|
+
gap: 6
|
|
141
|
+
}
|
|
142
|
+
}, itemType === 'vehicle' ? /*#__PURE__*/React.createElement(Icon, {
|
|
143
|
+
color: "action"
|
|
144
|
+
}, "drive_eta") : /*#__PURE__*/React.createElement(Icon, {
|
|
145
|
+
color: "action"
|
|
146
|
+
}, "pets"), /*#__PURE__*/React.createElement(Typography, {
|
|
147
|
+
sx: {
|
|
148
|
+
fontWeight: 700
|
|
149
|
+
}
|
|
150
|
+
}, i18next.t(keys.sectionTitle))), /*#__PURE__*/React.createElement(Chip, {
|
|
151
|
+
size: "small",
|
|
152
|
+
label: i18next.t(keys.count, {
|
|
153
|
+
count: items.length
|
|
154
|
+
})
|
|
155
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
156
|
+
className: "flex flex-wrap items-center",
|
|
157
|
+
style: {
|
|
158
|
+
gap: 8
|
|
159
|
+
}
|
|
160
|
+
}, items.map((item, idx) => {
|
|
161
|
+
const complete = missingRequiredFields(item).length === 0;
|
|
162
|
+
const isSelected = selectedIndex === idx;
|
|
163
|
+
// Complete gets a green border/text + checkmark; incomplete gets a matching
|
|
164
|
+
// amber/orange border+text + warning triangle. Selection adds a light fill in that
|
|
165
|
+
// same color plus a heavier border + bold label, so it's clear which tab is "done"
|
|
166
|
+
// vs "current" at a glance.
|
|
167
|
+
return /*#__PURE__*/React.createElement(Button, {
|
|
168
|
+
key: item.id ?? idx,
|
|
169
|
+
variant: "outlined",
|
|
170
|
+
size: "small",
|
|
171
|
+
color: complete ? 'success' : 'warning',
|
|
172
|
+
onClick: () => setSelectedIndex(idx),
|
|
173
|
+
endIcon: complete ? /*#__PURE__*/React.createElement(CheckCircleIcon, {
|
|
174
|
+
fontSize: "small",
|
|
175
|
+
color: "success"
|
|
176
|
+
}) : /*#__PURE__*/React.createElement(WarningAmberIcon, {
|
|
177
|
+
fontSize: "small",
|
|
178
|
+
color: "warning"
|
|
179
|
+
}),
|
|
180
|
+
sx: {
|
|
181
|
+
whiteSpace: 'nowrap',
|
|
182
|
+
fontWeight: isSelected ? 700 : 400,
|
|
183
|
+
borderWidth: isSelected ? 2 : 1,
|
|
184
|
+
bgcolor: t => isSelected ? alpha(t.palette[complete ? 'success' : 'warning'].main, 0.12) : 'transparent'
|
|
185
|
+
}
|
|
186
|
+
}, `${i18next.t(keys.itemTitle)} ${idx + 1}`);
|
|
187
|
+
}), /*#__PURE__*/React.createElement(Button, {
|
|
188
|
+
variant: "outlined",
|
|
189
|
+
size: "small",
|
|
190
|
+
color: "inherit",
|
|
191
|
+
startIcon: /*#__PURE__*/React.createElement(AddIcon, {
|
|
192
|
+
fontSize: "small"
|
|
193
|
+
}),
|
|
194
|
+
disabled: !canAddMore,
|
|
195
|
+
onClick: onAddItem,
|
|
196
|
+
sx: {
|
|
197
|
+
whiteSpace: 'nowrap',
|
|
198
|
+
borderStyle: 'dashed'
|
|
199
|
+
}
|
|
200
|
+
}, i18next.t(keys.addItem))), !canAddMore && /*#__PURE__*/React.createElement(Typography, {
|
|
201
|
+
variant: "caption",
|
|
202
|
+
color: "error",
|
|
203
|
+
className: "block text-center mt-4"
|
|
204
|
+
}, `${i18next.t(keys.maxReached)} ${maxItems}`), selectedItem && /*#__PURE__*/React.createElement(Paper, {
|
|
205
|
+
variant: "outlined",
|
|
206
|
+
sx: {
|
|
207
|
+
mt: 1,
|
|
208
|
+
p: 1.5,
|
|
209
|
+
borderRadius: 2
|
|
210
|
+
}
|
|
211
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
212
|
+
className: "flex items-start justify-between mb-12"
|
|
213
|
+
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
|
|
214
|
+
sx: {
|
|
215
|
+
fontWeight: 700
|
|
216
|
+
}
|
|
217
|
+
}, `${i18next.t(keys.itemTitle)} ${selectedIndex + 1}`), /*#__PURE__*/React.createElement(Typography, {
|
|
218
|
+
variant: "caption",
|
|
219
|
+
color: "text.secondary"
|
|
220
|
+
}, i18next.t(keys.requiredInformation))), /*#__PURE__*/React.createElement(IconButton, {
|
|
221
|
+
size: "small",
|
|
222
|
+
color: "error",
|
|
223
|
+
onClick: () => onRemoveItem(selectedItem.id)
|
|
224
|
+
}, /*#__PURE__*/React.createElement(DeleteOutlineIcon, {
|
|
225
|
+
fontSize: "small"
|
|
226
|
+
}))), /*#__PURE__*/React.createElement("div", {
|
|
227
|
+
ref: fieldsContainerRef,
|
|
228
|
+
className: "grid grid-cols-2",
|
|
229
|
+
style: {
|
|
230
|
+
columnGap: 12,
|
|
231
|
+
rowGap: 16
|
|
232
|
+
}
|
|
233
|
+
}, fieldConfig.map(field => {
|
|
234
|
+
const value = selectedItem.values?.[field.key] ?? '';
|
|
235
|
+
const showError = field.required && !isFieldAnswered(field.type, value);
|
|
236
|
+
const labelText = field.required ? `${field.label} *` : `${field.label} (${i18next.t('common.app.optional')})`;
|
|
237
|
+
const wrapperClassName = ['select', 'textarea', 'select_multiple', 'yes_no'].includes(field.type) ? 'col-span-full' : undefined;
|
|
238
|
+
let control;
|
|
239
|
+
if (field.type === 'number') {
|
|
240
|
+
control = /*#__PURE__*/React.createElement(TextField, {
|
|
241
|
+
name: field.key,
|
|
242
|
+
value: value,
|
|
243
|
+
onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
|
|
244
|
+
onKeyDown: e => {
|
|
245
|
+
if (e.key === 'e' || e.key === 'E') e.preventDefault();
|
|
246
|
+
},
|
|
247
|
+
variant: "outlined",
|
|
248
|
+
size: "small",
|
|
249
|
+
error: showError,
|
|
250
|
+
helperText: showError ? requiredErrorText(field.type) : '',
|
|
251
|
+
inputProps: {
|
|
252
|
+
maxLength: field.maxLength || 45
|
|
253
|
+
},
|
|
254
|
+
type: "number",
|
|
255
|
+
placeholder: field.placeholder,
|
|
256
|
+
fullWidth: true,
|
|
257
|
+
InputProps: {
|
|
258
|
+
endAdornment: field.unit ? /*#__PURE__*/React.createElement(InputAdornment, {
|
|
259
|
+
position: "end"
|
|
260
|
+
}, field.unit) : undefined
|
|
261
|
+
}
|
|
262
|
+
});
|
|
263
|
+
} else if (field.type === 'select') {
|
|
264
|
+
control = /*#__PURE__*/React.createElement(TextField, {
|
|
265
|
+
select: true,
|
|
266
|
+
name: field.key,
|
|
267
|
+
value: value,
|
|
268
|
+
onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
|
|
269
|
+
variant: "outlined",
|
|
270
|
+
size: "small",
|
|
271
|
+
error: showError,
|
|
272
|
+
helperText: showError ? requiredErrorText(field.type) : '',
|
|
273
|
+
fullWidth: true
|
|
274
|
+
}, /*#__PURE__*/React.createElement(MenuItem, {
|
|
275
|
+
value: ""
|
|
276
|
+
}, /*#__PURE__*/React.createElement("em", null, field.placeholder || i18next.t('common.app.select'))), (field.options || []).map(opt => /*#__PURE__*/React.createElement(MenuItem, {
|
|
277
|
+
key: opt,
|
|
278
|
+
value: opt
|
|
279
|
+
}, opt)));
|
|
280
|
+
} else if (field.type === 'textarea') {
|
|
281
|
+
control = /*#__PURE__*/React.createElement(TextField, {
|
|
282
|
+
name: field.key,
|
|
283
|
+
value: value,
|
|
284
|
+
onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
|
|
285
|
+
variant: "outlined",
|
|
286
|
+
size: "small",
|
|
287
|
+
error: showError,
|
|
288
|
+
helperText: showError ? requiredErrorText(field.type) : '',
|
|
289
|
+
inputProps: {
|
|
290
|
+
maxLength: field.maxLength || 45
|
|
291
|
+
},
|
|
292
|
+
placeholder: field.placeholder,
|
|
293
|
+
multiline: true,
|
|
294
|
+
rows: 3,
|
|
295
|
+
fullWidth: true
|
|
296
|
+
});
|
|
297
|
+
} else if (field.type === 'select_multiple') {
|
|
298
|
+
const selectedValues = Array.isArray(value) ? value : [];
|
|
299
|
+
control = /*#__PURE__*/React.createElement(TextField, {
|
|
300
|
+
select: true,
|
|
301
|
+
name: field.key,
|
|
302
|
+
value: selectedValues,
|
|
303
|
+
onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
|
|
304
|
+
variant: "outlined",
|
|
305
|
+
size: "small",
|
|
306
|
+
error: showError,
|
|
307
|
+
helperText: showError ? requiredErrorText(field.type) : '',
|
|
308
|
+
fullWidth: true,
|
|
309
|
+
SelectProps: {
|
|
310
|
+
multiple: true,
|
|
311
|
+
renderValue: selected => /*#__PURE__*/React.createElement("div", {
|
|
312
|
+
className: "flex flex-wrap gap-4"
|
|
313
|
+
}, selected.map(opt => /*#__PURE__*/React.createElement(Chip, {
|
|
314
|
+
key: opt,
|
|
315
|
+
label: opt,
|
|
316
|
+
size: "small"
|
|
317
|
+
})))
|
|
318
|
+
}
|
|
319
|
+
}, (field.options || []).map(opt => /*#__PURE__*/React.createElement(MenuItem, {
|
|
320
|
+
key: opt,
|
|
321
|
+
value: opt
|
|
322
|
+
}, /*#__PURE__*/React.createElement(Checkbox, {
|
|
323
|
+
checked: selectedValues.indexOf(opt) > -1
|
|
324
|
+
}), /*#__PURE__*/React.createElement(ListItemText, {
|
|
325
|
+
primary: opt
|
|
326
|
+
}))));
|
|
327
|
+
} else if (field.type === 'yes_no') {
|
|
328
|
+
const toggleValue = value === true ? 'yes' : value === false ? 'no' : null;
|
|
329
|
+
control = /*#__PURE__*/React.createElement(ToggleButtonGroup, {
|
|
330
|
+
value: toggleValue,
|
|
331
|
+
exclusive: true,
|
|
332
|
+
onChange: (_, val) => {
|
|
333
|
+
if (val !== null) onFieldChange(selectedItem.id, field.key, val === 'yes');
|
|
334
|
+
},
|
|
335
|
+
fullWidth: true,
|
|
336
|
+
size: "small"
|
|
337
|
+
}, /*#__PURE__*/React.createElement(ToggleButton, {
|
|
338
|
+
value: "yes"
|
|
339
|
+
}, i18next.t('common.app.yes')), /*#__PURE__*/React.createElement(ToggleButton, {
|
|
340
|
+
value: "no"
|
|
341
|
+
}, i18next.t('common.app.no')));
|
|
342
|
+
} else if (field.type === 'date') {
|
|
343
|
+
// Native date input, not each host app's own local DateTimeField wrapper --
|
|
344
|
+
// this component can't depend on either app's app-local component tree.
|
|
345
|
+
// Value is a plain 'YYYY-MM-DD' string in and out, same convention both apps
|
|
346
|
+
// already use for this field type.
|
|
347
|
+
control = /*#__PURE__*/React.createElement(TextField, {
|
|
348
|
+
name: field.key,
|
|
349
|
+
type: "date",
|
|
350
|
+
value: value,
|
|
351
|
+
onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
|
|
352
|
+
variant: "outlined",
|
|
353
|
+
size: "small",
|
|
354
|
+
error: showError,
|
|
355
|
+
helperText: showError ? requiredErrorText(field.type) : '',
|
|
356
|
+
fullWidth: true,
|
|
357
|
+
InputLabelProps: {
|
|
358
|
+
shrink: true
|
|
359
|
+
}
|
|
360
|
+
});
|
|
361
|
+
} else {
|
|
362
|
+
// 'text' (default/unknown type too, for backward compat)
|
|
363
|
+
control = /*#__PURE__*/React.createElement(TextField, {
|
|
364
|
+
name: field.key,
|
|
365
|
+
value: value,
|
|
366
|
+
onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
|
|
367
|
+
variant: "outlined",
|
|
368
|
+
size: "small",
|
|
369
|
+
error: showError,
|
|
370
|
+
helperText: showError ? requiredErrorText(field.type) : '',
|
|
371
|
+
inputProps: {
|
|
372
|
+
maxLength: field.maxLength || 45
|
|
373
|
+
},
|
|
374
|
+
type: "text",
|
|
375
|
+
placeholder: field.placeholder,
|
|
376
|
+
fullWidth: true
|
|
377
|
+
});
|
|
378
|
+
}
|
|
379
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
380
|
+
className: wrapperClassName,
|
|
381
|
+
key: `${selectedItem.id}_${field.key}`,
|
|
382
|
+
"data-field-invalid": showError ? 'true' : undefined
|
|
383
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
384
|
+
variant: "body2",
|
|
385
|
+
sx: {
|
|
386
|
+
fontWeight: 500,
|
|
387
|
+
mb: 0.5,
|
|
388
|
+
color: showError ? 'error.main' : 'text.primary'
|
|
389
|
+
}
|
|
390
|
+
}, labelText), control, field.type === 'yes_no' && showError && /*#__PURE__*/React.createElement(Typography, {
|
|
391
|
+
variant: "caption",
|
|
392
|
+
color: "error",
|
|
393
|
+
className: "block mt-4"
|
|
394
|
+
}, requiredErrorText(field.type)));
|
|
395
|
+
})))), (() => {
|
|
396
|
+
const incompleteCount = items.filter(item => missingRequiredFields(item).length > 0).length;
|
|
397
|
+
if (incompleteCount === 0) return null;
|
|
398
|
+
return /*#__PURE__*/React.createElement(Alert, {
|
|
399
|
+
severity: "error",
|
|
400
|
+
sx: {
|
|
401
|
+
position: 'sticky',
|
|
402
|
+
bottom: '-12px',
|
|
403
|
+
mt: 1,
|
|
404
|
+
py: 0.25,
|
|
405
|
+
alignItems: 'center',
|
|
406
|
+
zIndex: 1,
|
|
407
|
+
'& .MuiAlert-action': {
|
|
408
|
+
alignItems: 'center',
|
|
409
|
+
paddingTop: 0
|
|
410
|
+
}
|
|
411
|
+
},
|
|
412
|
+
action: /*#__PURE__*/React.createElement(Button, {
|
|
413
|
+
variant: "outlined",
|
|
414
|
+
color: "error",
|
|
415
|
+
size: "small",
|
|
416
|
+
onClick: handleReview,
|
|
417
|
+
sx: {
|
|
418
|
+
whiteSpace: 'nowrap',
|
|
419
|
+
alignSelf: 'center'
|
|
420
|
+
}
|
|
421
|
+
}, i18next.t('common.app.review'))
|
|
422
|
+
}, i18next.t(keys.needsInformation, {
|
|
423
|
+
count: incompleteCount
|
|
424
|
+
}));
|
|
425
|
+
})()));
|
|
426
|
+
};
|
|
427
|
+
AnimalVehicleDetailsEditor.defaultProps = {
|
|
428
|
+
items: [],
|
|
429
|
+
fieldConfig: [],
|
|
430
|
+
onFieldChange: () => {},
|
|
431
|
+
onAddItem: () => {},
|
|
432
|
+
onRemoveItem: () => {},
|
|
433
|
+
canAddMore: true,
|
|
434
|
+
maxItems: 0,
|
|
435
|
+
className: 'w-full',
|
|
436
|
+
theme: undefined,
|
|
437
|
+
i18next: i18nextLocal
|
|
438
|
+
};
|
|
439
|
+
AnimalVehicleDetailsEditor.propTypes = {
|
|
440
|
+
/** Which chrome text set to use -- drives labels like "Animal"/"Vehicle", "Animals"/"Vehicles". */
|
|
441
|
+
itemType: PropTypes.oneOf(['animal', 'vehicle']).isRequired,
|
|
442
|
+
/** One entry per animal/vehicle. `values` is keyed by fieldConfig[].key. */
|
|
443
|
+
items: PropTypes.arrayOf(PropTypes.shape({
|
|
444
|
+
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
|
445
|
+
values: PropTypes.object
|
|
446
|
+
})),
|
|
447
|
+
/** Field definitions, already resolved to display strings (labels/placeholders/options) by the caller. */
|
|
448
|
+
fieldConfig: PropTypes.arrayOf(PropTypes.shape({
|
|
449
|
+
key: PropTypes.string.isRequired,
|
|
450
|
+
label: PropTypes.string.isRequired,
|
|
451
|
+
required: PropTypes.bool,
|
|
452
|
+
type: PropTypes.oneOf(['text', 'number', 'select', 'select_multiple', 'textarea', 'yes_no', 'date']),
|
|
453
|
+
options: PropTypes.arrayOf(PropTypes.string),
|
|
454
|
+
unit: PropTypes.string,
|
|
455
|
+
placeholder: PropTypes.string,
|
|
456
|
+
maxLength: PropTypes.number
|
|
457
|
+
})),
|
|
458
|
+
/** (type, value) => boolean. Injected rather than owned internally, so each host app's existing
|
|
459
|
+
* "has this field actually been answered" rule (yes_no's `false` counts, etc.) stays authoritative. */
|
|
460
|
+
isFieldAnswered: PropTypes.func.isRequired,
|
|
461
|
+
/** (itemId, fieldKey, value) => void */
|
|
462
|
+
onFieldChange: PropTypes.func,
|
|
463
|
+
/** () => void -- host owns the actual array/count mutation. */
|
|
464
|
+
onAddItem: PropTypes.func,
|
|
465
|
+
/** (itemId) => void -- host owns the actual array/count mutation. */
|
|
466
|
+
onRemoveItem: PropTypes.func,
|
|
467
|
+
/** Whether "Add" is enabled -- host computes this against its own per-lot/campground cap. */
|
|
468
|
+
canAddMore: PropTypes.bool,
|
|
469
|
+
/** Shown in the "max reached" message once canAddMore is false. */
|
|
470
|
+
maxItems: PropTypes.number,
|
|
471
|
+
/** Classes applied to the component's own wrapper div. */
|
|
472
|
+
className: PropTypes.string,
|
|
473
|
+
/** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used. */
|
|
474
|
+
theme: PropTypes.object,
|
|
475
|
+
/** The i18next instance to translate with -- pass your own if the default singleton import isn't the one your app initialized. */
|
|
476
|
+
i18next: PropTypes.any
|
|
477
|
+
};
|
|
478
|
+
export default AnimalVehicleDetailsEditor;
|
package/dist/index.js
CHANGED
|
@@ -36,4 +36,5 @@ import HorizontalImageTile from './components/Images/HorizontalImageTile';
|
|
|
36
36
|
import VerticalImageTile from './components/Images/VerticalImageTile';
|
|
37
37
|
import EventCard from './components/Cards/EventCard';
|
|
38
38
|
import ImageAssets from './components/Icons/ImageAssets';
|
|
39
|
-
|
|
39
|
+
import AnimalVehicleDetailsEditor from './components/Reservation/AnimalVehicleDetailsEditor';
|
|
40
|
+
export { TestButton, CodeHighlight, CustomFab, HelpButton, GenericDialogWindow, PcSharedComponentThemeInheritor, ImageCanvasDraw, PCMScrollbar, TwoColumnDisplay, SimpleTab, HrefLink, GenericAppBar, ReusablePopupMenu, SearchBar, TillButton, ProductItemButton, DropdownButton, translationResources, coreLocals, currencySymbol, DateRangeCalendar, DateCalendar, SimpleLabel, CurrencyTextInput, ImageStack, PlatformPaymentPlans, PlatformPlanTitles, PlatformPlanPrices, LoadingBackdrop, SimpleAccordion, PricingCalendar, FancyDate, HorizontalImageTile, VerticalImageTile, EventCard, ImageAssets, AnimalVehicleDetailsEditor };
|
package/dist/styles/tailwind.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.static{position:static}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-top-2{top:-.2rem}.-top-6{top:-.6rem}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.top-20{top:2rem}.top-64{top:6.4rem}.z-10{z-index:10}.z-99{z-index:99}.m-10{margin:1rem}.m-12{margin:1.2rem}.m-24{margin:2.4rem}.m-4{margin:.4rem}.m-6{margin:.6rem}.m-auto{margin:auto}.mx-0{margin-left:0;margin-right:0}.mx-12{margin-left:1.2rem;margin-right:1.2rem}.mx-2{margin-left:.2rem;margin-right:.2rem}.mx-4{margin-left:.4rem;margin-right:.4rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.mx-auto{margin-left:auto;margin-right:auto}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.my-24{margin-top:2.4rem;margin-bottom:2.4rem}.my-4{margin-top:.4rem;margin-bottom:.4rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.-ml-10{margin-left:-1rem}.mb-0{margin-bottom:0}.mb-12{margin-bottom:1.2rem}.mb-2{margin-bottom:.2rem}.mb-24{margin-bottom:2.4rem}.mb-6{margin-bottom:.6rem}.ml-0{margin-left:0}.ml-1{margin-left:.1rem}.ml-12{margin-left:1.2rem}.ml-24{margin-left:2.4rem}.ml-6{margin-left:.6rem}.ml-8{margin-left:.8rem}.mr-0{margin-right:0}.mr-12{margin-right:1.2rem}.mr-24{margin-right:2.4rem}.mr-6{margin-right:.6rem}.mt-0{margin-top:0}.mt-12{margin-top:1.2rem}.mt-24{margin-top:2.4rem}.mt-4{margin-top:.4rem}.mt-6{margin-top:.6rem}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-136{height:13.6rem}.h-200{height:20rem}.h-24{height:2.4rem}.h-400{height:40rem}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.max-h-32{max-height:3.2rem}.max-h-512{max-height:51.2rem}.min-h-160{min-height:16rem}.min-h-224{min-height:22.4rem}.min-h-256{min-height:25.6rem}.w-1\/2{width:50%}.w-2\/5{width:40%}.w-24{width:2.4rem}.w-3\/4{width:75%}.w-auto{width:auto}.w-full{width:100%}.max-w-full{max-width:100%}.max-w-min{max-width:-moz-min-content;max-width:min-content}.flex-shrink-0{flex-shrink:0}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-6{gap:.6rem}.space-x-10>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overscroll-none{overscroll-behavior:none}.truncate{overflow:hidden;white-space:nowrap}.overflow-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.rounded{border-radius:.4rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.8rem}.rounded-md{border-radius:.6rem}.rounded-t-md{border-top-left-radius:.6rem;border-top-right-radius:.6rem}.rounded-bl-lg{border-bottom-left-radius:.8rem}.rounded-br-lg{border-bottom-right-radius:.8rem}.rounded-tl-lg{border-top-left-radius:.8rem}.rounded-tr-lg{border-top-right-radius:.8rem}.border{border-width:1px}.border-2{border-width:2px}.border-t-8{border-top-width:8px}.border-transparent{border-color:#0000}.bg-black{--tw-bg-opacity:1;background-color:rgb(34 41 47/var(--tw-bg-opacity,1))}.bg-blue{--tw-bg-opacity:1;background-color:rgb(33 150 243/var(--tw-bg-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(66 66 66/var(--tw-bg-opacity,1))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(67 160 71/var(--tw-bg-opacity,1))}.bg-grey-100{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity,1))}.bg-grey-200{--tw-bg-opacity:1;background-color:rgb(238 238 238/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-yellow-100\/50{background-color:#fff9c480}.bg-cover{background-size:cover}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-10{padding:1rem}.p-12{padding:1.2rem}.p-24{padding:2.4rem}.p-6{padding:.6rem}.px-2{padding-left:.2rem;padding-right:.2rem}.px-4{padding-left:.4rem;padding-right:.4rem}.px-6{padding-left:.6rem;padding-right:.6rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-2{padding-top:.2rem;padding-bottom:.2rem}.py-4{padding-top:.4rem;padding-bottom:.4rem}.py-6{padding-top:.6rem;padding-bottom:.6rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-4{padding-left:.4rem}.pl-8{padding-left:.8rem}.pr-0{padding-right:0}.pr-6{padding-right:.6rem}.pt-0{padding-top:0}.pt-12{padding-top:1.2rem}.pt-4{padding-top:.4rem}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:Muli,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.font-serif{font-family:Georgia,Cambria,Times New Roman,Times,serif}.text-14{font-size:1.4rem}.text-16{font-size:1.6rem}.text-17{font-size:1.7rem}.text-24,.text-2xl{font-size:2.4rem}.text-2xl{line-height:3.2rem}.text-32{font-size:3.2rem}.text-4xl{font-size:3.6rem;line-height:4rem}.text-5xl{font-size:4.8rem;line-height:1}.text-6xl{font-size:6rem;line-height:1}.text-base{font-size:1.6rem;line-height:2.4rem}.text-sm{font-size:1.4rem;line-height:2rem}.text-xl{font-size:2rem;line-height:2.8rem}.font-500{font-weight:500}.font-600{font-weight:600}.font-800{font-weight:800}.font-900{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.capitalize{text-transform:capitalize}.normal-case{text-transform:none}.leading-none{line-height:1}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.text-gray-300{--tw-text-opacity:1;color:rgb(224 224 224/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(117 117 117/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(67 160 71/var(--tw-text-opacity,1))}.text-green-700{--tw-text-opacity:1;color:rgb(56 142 60/var(--tw-text-opacity,1))}.text-grey-800{--tw-text-opacity:1;color:rgb(66 66 66/var(--tw-text-opacity,1))}.text-orange-600{--tw-text-opacity:1;color:rgb(251 140 0/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.decoration-gray-500{text-decoration-color:#9e9e9e}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px 0 var(--tw-shadow-color)}.shadow,.shadow-1{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-1{--tw-shadow:0px 2px 1px -1px #0003,0px 1px 1px 0px #00000024,0px 1px 3px 0px #0000001f;--tw-shadow-colored:0px 2px 1px -1px var(--tw-shadow-color),0px 1px 1px 0px var(--tw-shadow-color),0px 1px 3px 0px var(--tw-shadow-color)}.shadow-2{--tw-shadow:0px 3px 1px -2px #0003,0px 2px 2px 0px #00000024,0px 1px 5px 0px #0000001f;--tw-shadow-colored:0px 3px 1px -2px var(--tw-shadow-color),0px 2px 2px 0px var(--tw-shadow-color),0px 1px 5px 0px var(--tw-shadow-color)}.shadow-2,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -1px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur{--tw-blur:blur(8px)}.blur,.contrast-0{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.contrast-0{--tw-contrast:contrast(0)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f)}.drop-shadow,.drop-shadow-none{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-none{--tw-drop-shadow:drop-shadow(0 0 #0000)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:translate-y-1:hover{--tw-translate-y:0.1rem}.hover\:rotate-3:hover,.hover\:translate-y-1:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:rotate-3:hover{--tw-rotate:3deg}.hover\:skew-y-3:hover{--tw-skew-y:3deg}.hover\:scale-105:hover,.hover\:skew-y-3:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:list-disc:hover{list-style-type:disc}.hover\:bg-gray-100\/75:hover{background-color:#f5f5f5bf}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(56 142 60/var(--tw-bg-opacity,1))}.hover\:bg-grey-300:hover{--tw-bg-opacity:1;background-color:rgb(224 224 224/var(--tw-bg-opacity,1))}.hover\:bg-indigo-100\/25:hover{background-color:#c5cae940}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:brightness-75:hover{--tw-brightness:brightness(.75)}.hover\:brightness-75:hover,.hover\:drop-shadow-2xl:hover{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:drop-shadow-2xl:hover{--tw-drop-shadow:drop-shadow(0 25px 25px #00000026)}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(76 175 80/var(--tw-ring-opacity,1))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}@media (min-width:600px){.sm\:p-8{padding:.8rem}}@media (min-width:960px){.md\:mx-auto{margin-left:auto;margin-right:auto}.md\:ml-12{margin-left:1.2rem}.md\:flex{display:flex}.md\:hidden{display:none}.md\:max-w-288{max-width:28.8rem}.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}.md\:pt-0{padding-top:0}}@media (prefers-color-scheme:dark){.dark\:text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity,1))}.dark\:text-green-500{--tw-text-opacity:1;color:rgb(76 175 80/var(--tw-text-opacity,1))}.dark\:text-orange-500{--tw-text-opacity:1;color:rgb(255 152 0/var(--tw-text-opacity,1))}}
|
|
1
|
+
*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.visible{visibility:visible}.static{position:static}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.-top-2{top:-.2rem}.-top-6{top:-.6rem}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.top-20{top:2rem}.top-64{top:6.4rem}.z-10{z-index:10}.z-99{z-index:99}.col-span-full{grid-column:1/-1}.m-10{margin:1rem}.m-12{margin:1.2rem}.m-24{margin:2.4rem}.m-4{margin:.4rem}.m-6{margin:.6rem}.m-auto{margin:auto}.mx-0{margin-left:0;margin-right:0}.mx-12{margin-left:1.2rem;margin-right:1.2rem}.mx-2{margin-left:.2rem;margin-right:.2rem}.mx-4{margin-left:.4rem;margin-right:.4rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.mx-auto{margin-left:auto;margin-right:auto}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.my-24{margin-top:2.4rem;margin-bottom:2.4rem}.my-4{margin-top:.4rem;margin-bottom:.4rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.-ml-10{margin-left:-1rem}.mb-0{margin-bottom:0}.mb-12{margin-bottom:1.2rem}.mb-2{margin-bottom:.2rem}.mb-24{margin-bottom:2.4rem}.mb-6{margin-bottom:.6rem}.mb-8{margin-bottom:.8rem}.ml-0{margin-left:0}.ml-1{margin-left:.1rem}.ml-12{margin-left:1.2rem}.ml-24{margin-left:2.4rem}.ml-6{margin-left:.6rem}.ml-8{margin-left:.8rem}.mr-0{margin-right:0}.mr-12{margin-right:1.2rem}.mr-24{margin-right:2.4rem}.mr-6{margin-right:.6rem}.mt-0{margin-top:0}.mt-12{margin-top:1.2rem}.mt-24{margin-top:2.4rem}.mt-4{margin-top:.4rem}.mt-6{margin-top:.6rem}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-136{height:13.6rem}.h-200{height:20rem}.h-24{height:2.4rem}.h-400{height:40rem}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.max-h-32{max-height:3.2rem}.max-h-512{max-height:51.2rem}.min-h-160{min-height:16rem}.min-h-224{min-height:22.4rem}.min-h-256{min-height:25.6rem}.w-1\/2{width:50%}.w-2\/5{width:40%}.w-24{width:2.4rem}.w-3\/4{width:75%}.w-auto{width:auto}.w-full{width:100%}.max-w-full{max-width:100%}.max-w-min{max-width:-moz-min-content;max-width:min-content}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-4{gap:.4rem}.gap-6{gap:.6rem}.space-x-10>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overscroll-none{overscroll-behavior:none}.truncate{overflow:hidden;white-space:nowrap}.overflow-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.rounded{border-radius:.4rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.8rem}.rounded-md{border-radius:.6rem}.rounded-t-md{border-top-left-radius:.6rem;border-top-right-radius:.6rem}.rounded-bl-lg{border-bottom-left-radius:.8rem}.rounded-br-lg{border-bottom-right-radius:.8rem}.rounded-tl-lg{border-top-left-radius:.8rem}.rounded-tr-lg{border-top-right-radius:.8rem}.border{border-width:1px}.border-2{border-width:2px}.border-t-8{border-top-width:8px}.border-transparent{border-color:#0000}.bg-black{--tw-bg-opacity:1;background-color:rgb(34 41 47/var(--tw-bg-opacity,1))}.bg-blue{--tw-bg-opacity:1;background-color:rgb(33 150 243/var(--tw-bg-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(66 66 66/var(--tw-bg-opacity,1))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(67 160 71/var(--tw-bg-opacity,1))}.bg-grey-100{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity,1))}.bg-grey-200{--tw-bg-opacity:1;background-color:rgb(238 238 238/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-yellow-100\/50{background-color:#fff9c480}.bg-cover{background-size:cover}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-10{padding:1rem}.p-12{padding:1.2rem}.p-24{padding:2.4rem}.p-6{padding:.6rem}.px-2{padding-left:.2rem;padding-right:.2rem}.px-4{padding-left:.4rem;padding-right:.4rem}.px-6{padding-left:.6rem;padding-right:.6rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-2{padding-top:.2rem;padding-bottom:.2rem}.py-4{padding-top:.4rem;padding-bottom:.4rem}.py-6{padding-top:.6rem;padding-bottom:.6rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-4{padding-left:.4rem}.pl-8{padding-left:.8rem}.pr-0{padding-right:0}.pr-6{padding-right:.6rem}.pt-0{padding-top:0}.pt-12{padding-top:1.2rem}.pt-4{padding-top:.4rem}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:Muli,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.font-serif{font-family:Georgia,Cambria,Times New Roman,Times,serif}.text-14{font-size:1.4rem}.text-16{font-size:1.6rem}.text-17{font-size:1.7rem}.text-24,.text-2xl{font-size:2.4rem}.text-2xl{line-height:3.2rem}.text-32{font-size:3.2rem}.text-4xl{font-size:3.6rem;line-height:4rem}.text-5xl{font-size:4.8rem;line-height:1}.text-6xl{font-size:6rem;line-height:1}.text-base{font-size:1.6rem;line-height:2.4rem}.text-sm{font-size:1.4rem;line-height:2rem}.text-xl{font-size:2rem;line-height:2.8rem}.font-500{font-weight:500}.font-600{font-weight:600}.font-800{font-weight:800}.font-900{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.capitalize{text-transform:capitalize}.normal-case{text-transform:none}.leading-none{line-height:1}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.text-gray-300{--tw-text-opacity:1;color:rgb(224 224 224/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(117 117 117/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(67 160 71/var(--tw-text-opacity,1))}.text-green-700{--tw-text-opacity:1;color:rgb(56 142 60/var(--tw-text-opacity,1))}.text-grey-800{--tw-text-opacity:1;color:rgb(66 66 66/var(--tw-text-opacity,1))}.text-orange-600{--tw-text-opacity:1;color:rgb(251 140 0/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.decoration-gray-500{text-decoration-color:#9e9e9e}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px 0 var(--tw-shadow-color)}.shadow,.shadow-1{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-1{--tw-shadow:0px 2px 1px -1px #0003,0px 1px 1px 0px #00000024,0px 1px 3px 0px #0000001f;--tw-shadow-colored:0px 2px 1px -1px var(--tw-shadow-color),0px 1px 1px 0px var(--tw-shadow-color),0px 1px 3px 0px var(--tw-shadow-color)}.shadow-2{--tw-shadow:0px 3px 1px -2px #0003,0px 2px 2px 0px #00000024,0px 1px 5px 0px #0000001f;--tw-shadow-colored:0px 3px 1px -2px var(--tw-shadow-color),0px 2px 2px 0px var(--tw-shadow-color),0px 1px 5px 0px var(--tw-shadow-color)}.shadow-2,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -1px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur{--tw-blur:blur(8px)}.blur,.contrast-0{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.contrast-0{--tw-contrast:contrast(0)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f)}.drop-shadow,.drop-shadow-none{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-none{--tw-drop-shadow:drop-shadow(0 0 #0000)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:translate-y-1:hover{--tw-translate-y:0.1rem}.hover\:rotate-3:hover,.hover\:translate-y-1:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:rotate-3:hover{--tw-rotate:3deg}.hover\:skew-y-3:hover{--tw-skew-y:3deg}.hover\:scale-105:hover,.hover\:skew-y-3:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:list-disc:hover{list-style-type:disc}.hover\:bg-gray-100\/75:hover{background-color:#f5f5f5bf}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(56 142 60/var(--tw-bg-opacity,1))}.hover\:bg-grey-300:hover{--tw-bg-opacity:1;background-color:rgb(224 224 224/var(--tw-bg-opacity,1))}.hover\:bg-indigo-100\/25:hover{background-color:#c5cae940}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:brightness-75:hover{--tw-brightness:brightness(.75)}.hover\:brightness-75:hover,.hover\:drop-shadow-2xl:hover{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:drop-shadow-2xl:hover{--tw-drop-shadow:drop-shadow(0 25px 25px #00000026)}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(76 175 80/var(--tw-ring-opacity,1))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}@media (min-width:600px){.sm\:p-8{padding:.8rem}}@media (min-width:960px){.md\:mx-auto{margin-left:auto;margin-right:auto}.md\:ml-12{margin-left:1.2rem}.md\:flex{display:flex}.md\:hidden{display:none}.md\:max-w-288{max-width:28.8rem}.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}.md\:pt-0{padding-top:0}}@media (prefers-color-scheme:dark){.dark\:text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity,1))}.dark\:text-green-500{--tw-text-opacity:1;color:rgb(76 175 80/var(--tw-text-opacity,1))}.dark\:text-orange-500{--tw-text-opacity:1;color:rgb(255 152 0/var(--tw-text-opacity,1))}}
|