@hexure/ui 1.13.33 → 1.13.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +155 -155
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +107 -107
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
- /package/dist/cjs/types/components/{Multiselect → MultiSelect}/MultiSelect.d.ts +0 -0
- /package/dist/cjs/types/components/{Multiselect → MultiSelect}/index.d.ts +0 -0
- /package/dist/esm/types/components/{Multiselect → MultiSelect}/MultiSelect.d.ts +0 -0
- /package/dist/esm/types/components/{Multiselect → MultiSelect}/index.d.ts +0 -0
package/dist/esm/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import React, { useState, useContext, useRef, useEffect } from 'react';
|
|
2
|
-
import styled, { ThemeContext, keyframes } from 'styled-components';
|
|
3
|
-
import Icon, { Icon as Icon$1 } from '@mdi/react';
|
|
4
|
-
import { mdiChevronUp, mdiChevronDown, mdiInformationOutline, mdiLoading, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiClose, mdiChevronRight, mdiChevronLeft, mdiDotsHorizontal, mdiMinusCircle, mdiFolderPlusOutline, mdiCheck } from '@mdi/js';
|
|
5
|
-
import dayjs from 'dayjs';
|
|
6
|
-
import Numeral from 'numeral';
|
|
7
|
-
import Moment from 'moment';
|
|
8
|
-
|
|
1
|
+
import React, { useState, useContext, useRef, useEffect } from 'react';
|
|
2
|
+
import styled, { ThemeContext, keyframes } from 'styled-components';
|
|
3
|
+
import Icon, { Icon as Icon$1 } from '@mdi/react';
|
|
4
|
+
import { mdiChevronUp, mdiChevronDown, mdiInformationOutline, mdiLoading, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiClose, mdiChevronRight, mdiChevronLeft, mdiDotsHorizontal, mdiMinusCircle, mdiFolderPlusOutline, mdiCheck } from '@mdi/js';
|
|
5
|
+
import dayjs from 'dayjs';
|
|
6
|
+
import Numeral from 'numeral';
|
|
7
|
+
import Moment from 'moment';
|
|
8
|
+
|
|
9
9
|
/******************************************************************************
|
|
10
10
|
Copyright (c) Microsoft Corporation.
|
|
11
11
|
|
|
@@ -19,22 +19,22 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
|
19
19
|
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
20
20
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
21
21
|
PERFORMANCE OF THIS SOFTWARE.
|
|
22
|
-
***************************************************************************** */
|
|
23
|
-
/* global Reflect, Promise, SuppressedError, Symbol */
|
|
24
|
-
|
|
25
|
-
function __rest(s, e) {
|
|
26
|
-
var t = {};
|
|
27
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
28
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
29
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
30
|
-
}
|
|
31
|
-
return t;
|
|
32
|
-
}
|
|
33
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
34
|
-
var e = new Error(message);
|
|
35
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
36
|
-
};
|
|
37
|
-
|
|
22
|
+
***************************************************************************** */
|
|
23
|
+
/* global Reflect, Promise, SuppressedError, Symbol */
|
|
24
|
+
|
|
25
|
+
function __rest(s, e) {
|
|
26
|
+
var t = {};
|
|
27
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
28
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
29
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
30
|
+
}
|
|
31
|
+
return t;
|
|
32
|
+
}
|
|
33
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
34
|
+
var e = new Error(message);
|
|
35
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
36
|
+
};
|
|
37
|
+
|
|
38
38
|
const Colors = {
|
|
39
39
|
PRIMARY: {
|
|
40
40
|
Hex: '#0193D7',
|
|
@@ -83,8 +83,8 @@ const FontSizes = {
|
|
|
83
83
|
};
|
|
84
84
|
const EditableTheme = {
|
|
85
85
|
PRIMARY_COLOR: Colors.PRIMARY,
|
|
86
|
-
};
|
|
87
|
-
|
|
86
|
+
};
|
|
87
|
+
|
|
88
88
|
//function to generate unique ids
|
|
89
89
|
const generateUniqueId = (() => {
|
|
90
90
|
let counter = 0;
|
|
@@ -92,8 +92,8 @@ const generateUniqueId = (() => {
|
|
|
92
92
|
counter += 1;
|
|
93
93
|
return `${prefix}-${counter}`;
|
|
94
94
|
};
|
|
95
|
-
})();
|
|
96
|
-
|
|
95
|
+
})();
|
|
96
|
+
|
|
97
97
|
const Header$3 = styled.div `
|
|
98
98
|
display: flex;
|
|
99
99
|
align-items: center;
|
|
@@ -121,8 +121,8 @@ const Accordion = (_a) => {
|
|
|
121
121
|
React.createElement(Title$2, { id: `${id}-title` }, title),
|
|
122
122
|
React.createElement(Icon, { color: Colors.BLACK.Hex, id: `${id}-icon`, path: open ? mdiChevronUp : mdiChevronDown, size: '24px' })),
|
|
123
123
|
open ? React.createElement("div", { id: `${id}-content` }, children) : null));
|
|
124
|
-
};
|
|
125
|
-
|
|
124
|
+
};
|
|
125
|
+
|
|
126
126
|
const StyledComponent = styled.p `
|
|
127
127
|
color: ${props => Colors[props.$color || 'BLACK'].Hex};
|
|
128
128
|
font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
|
|
@@ -144,8 +144,8 @@ const Copy = (_a) => {
|
|
|
144
144
|
};
|
|
145
145
|
Copy.defaultProps = {
|
|
146
146
|
type: 'default',
|
|
147
|
-
};
|
|
148
|
-
|
|
147
|
+
};
|
|
148
|
+
|
|
149
149
|
const Wrapper$h = styled.div `
|
|
150
150
|
display: inline-block;
|
|
151
151
|
position: relative;
|
|
@@ -195,8 +195,8 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
|
|
|
195
195
|
return (React.createElement(Wrapper$h, { id: `${id}-wrapper`, onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
|
|
196
196
|
trigger || React.createElement(StyledIcon$6, { id: `${id}-icon`, path: mdiInformationOutline }),
|
|
197
197
|
show_content ? (React.createElement(Content$3, { "$position": position, "$width": width, id: `${id}-content` }, children && (React.createElement(Copy, { id: `${id}-copy`, type: 'small' }, children)))) : null));
|
|
198
|
-
};
|
|
199
|
-
|
|
198
|
+
};
|
|
199
|
+
|
|
200
200
|
const StyledButton = styled.button `
|
|
201
201
|
height: ${props => (props.$small ? '30px' : '40px')};
|
|
202
202
|
line-height: 1em;
|
|
@@ -318,8 +318,8 @@ const Button = (_a) => {
|
|
|
318
318
|
return (React.createElement(Tooltip, Object.assign({}, toolTip, { trigger: (toolTip === null || toolTip === void 0 ? void 0 : toolTip.trigger) || button_view }), toolTip === null || toolTip === void 0 ? void 0 : toolTip.children));
|
|
319
319
|
}
|
|
320
320
|
return button_view;
|
|
321
|
-
};
|
|
322
|
-
|
|
321
|
+
};
|
|
322
|
+
|
|
323
323
|
const H1 = styled.h1 `
|
|
324
324
|
color: ${Colors.BLACK.Hex};
|
|
325
325
|
font-size: 30px;
|
|
@@ -368,8 +368,8 @@ const Heading = (_a) => {
|
|
|
368
368
|
Heading.defaultProps = {
|
|
369
369
|
bold: false,
|
|
370
370
|
type: 'primary',
|
|
371
|
-
};
|
|
372
|
-
|
|
371
|
+
};
|
|
372
|
+
|
|
373
373
|
const Wrapper$g = styled.div `
|
|
374
374
|
position: fixed;
|
|
375
375
|
top: 0;
|
|
@@ -403,8 +403,8 @@ const ActionDialog = (_a) => {
|
|
|
403
403
|
tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary', id: `${id}-tertiary-button` }))) : null,
|
|
404
404
|
secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${id}-secondary-button` }))) : null,
|
|
405
405
|
primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${id}-primary-button` }))) : null)) : null)));
|
|
406
|
-
};
|
|
407
|
-
|
|
406
|
+
};
|
|
407
|
+
|
|
408
408
|
const Wrapper$f = styled.div `
|
|
409
409
|
border: 1px solid #f1f1f1;
|
|
410
410
|
border-radius: 4px;
|
|
@@ -456,8 +456,8 @@ const Alert = (_a) => {
|
|
|
456
456
|
title && !small ? (React.createElement(Heading, { bold: true, id: `${id}-title`, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
|
|
457
457
|
description ? (React.createElement(Copy, { id: `${id}-description`, margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
|
|
458
458
|
action && !small ? (React.createElement(Action$1, { id: `${id}-action`, onClick: action.onClick }, action.label)) : null)));
|
|
459
|
-
};
|
|
460
|
-
|
|
459
|
+
};
|
|
460
|
+
|
|
461
461
|
const colorMapping = {
|
|
462
462
|
black: {
|
|
463
463
|
fill_1: '#000000',
|
|
@@ -499,8 +499,8 @@ const Logo = (_a) => {
|
|
|
499
499
|
React.createElement("path", { d: 'M67.8498 45.479C67.5109 44.893 66.7322 43.5486 66.2043 42.6319H55.1965C52.3299 42.6319 49.8532 41.6095 47.8364 39.5923C45.819 37.5755 44.7966 35.0985 44.7966 32.2321C44.7966 29.3656 45.819 26.8886 47.8364 24.8718C49.8388 22.8332 52.316 21.7975 55.1965 21.7975C58.0632 21.7975 60.5398 22.8199 62.5565 24.8374C63.6038 25.8847 64.3824 27.093 64.9357 28.5312L65.2435 29.3327H53.8141C53.231 30.2171 52.5673 31.6476 52.303 32.2354L53.912 35.0969H67.474L71.0059 28.6192C70.2872 25.5702 68.8261 22.9293 66.6625 20.7657C63.5219 17.6257 59.6649 16.0333 55.1965 16.0333C50.7283 16.0333 46.8708 17.6257 43.7303 20.7657C40.546 23.9501 38.9979 27.7011 38.9979 32.2321C38.9979 36.7001 40.5903 40.5577 43.7303 43.6981C46.8708 46.8384 50.7283 48.4308 55.1965 48.4308H66.0873C66.9322 47.0737 67.5668 45.977 67.8498 45.479', fill: colorMapping[type_parts[1]].fill_1, id: `${id}-path-7` }),
|
|
500
500
|
React.createElement("path", { d: 'M27.6655 20.7443C26.9235 20.002 26.2307 19.4097 25.608 18.9831C22.7338 17.0113 19.5684 16.0117 16.1992 16.0117C13.6229 16.0117 11.1676 16.5943 8.9002 17.7442C8.1016 18.1264 7.38657 18.6118 6.73074 19.0799L5.88805 19.6819C5.85364 19.711 5.81716 19.7449 5.78223 19.7749L5.77618 17.9067C5.78246 17.9022 5.7892 17.8965 5.79554 17.8921L5.72168 1.52402L2.84058 1.54784e-05L0 1.6145V24.9966V30.8918C0.0184614 30.8508 0.0393993 30.8108 0.0580857 30.7698C0.0216133 31.2417 0 31.7206 0 32.2105V47.6757L2.84688 49.2499C4.7412 48.3293 5.4988 47.9164 5.79866 47.7385V32.2105C5.79866 29.3439 6.82128 26.8672 8.83853 24.8504C10.8415 22.8118 13.319 21.7759 16.1992 21.7759C19.0796 21.7759 21.557 22.8118 23.5635 24.8538C25.3441 26.6351 26.3374 28.7976 26.5963 31.4625C26.6263 31.6669 26.6339 40.3058 26.6339 47.6694C27.2825 48.0147 28.6127 48.8167 29.5141 49.3059C29.9448 49.0814 32.0589 47.8425 32.3979 47.6669V32.2105C32.3979 27.6795 30.8499 23.9285 27.6655 20.7443Z', fill: colorMapping[type_parts[1]].fill_1, id: `${id}-path-8` })));
|
|
501
501
|
}
|
|
502
|
-
};
|
|
503
|
-
|
|
502
|
+
};
|
|
503
|
+
|
|
504
504
|
const Container$3 = styled.header `
|
|
505
505
|
width: 100%;
|
|
506
506
|
display: flex;
|
|
@@ -529,8 +529,8 @@ const AppHeader = ({ logoUrl, buttons = [] }) => {
|
|
|
529
529
|
return (React.createElement(Container$3, { id: `${id}-container` },
|
|
530
530
|
React.createElement(LogoWrapper, { id: `${id}-logo-wrapper` }, logoUrl ? (React.createElement(Image, { id: `${id}-logo`, src: logoUrl })) : (React.createElement(Logo, { height: '30px', id: `${id}-default-logo` }))),
|
|
531
531
|
React.createElement(Buttons, { id: `${id}-buttons` }, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b, { id: `${id}-button-${i}` })))))));
|
|
532
|
-
};
|
|
533
|
-
|
|
532
|
+
};
|
|
533
|
+
|
|
534
534
|
const Wrapper$e = styled.div `
|
|
535
535
|
display: inline-block;
|
|
536
536
|
border-radius: 4px;
|
|
@@ -564,8 +564,8 @@ const Tag = (_a) => {
|
|
|
564
564
|
React.createElement(Label$4, { "$color": color, id: `${id}-label` }, children),
|
|
565
565
|
removable ? (React.createElement(Remove$1, { id: `${id}-remove` },
|
|
566
566
|
React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', id: `${id}-icon`, path: mdiClose, size: '15px' }))) : null)));
|
|
567
|
-
};
|
|
568
|
-
|
|
567
|
+
};
|
|
568
|
+
|
|
569
569
|
const SidebarContainer = styled.div `
|
|
570
570
|
border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
|
|
571
571
|
display: flex;
|
|
@@ -680,8 +680,8 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
|
|
|
680
680
|
e.preventDefault();
|
|
681
681
|
toggleCollapse(!collapsed);
|
|
682
682
|
}, small: true }))));
|
|
683
|
-
};
|
|
684
|
-
|
|
683
|
+
};
|
|
684
|
+
|
|
685
685
|
const Wrapper$d = styled.div `
|
|
686
686
|
border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
|
|
687
687
|
border-radius: 8px;
|
|
@@ -764,8 +764,8 @@ const BulkActionBar = (_a) => {
|
|
|
764
764
|
errorMsg ? (React.createElement(Error$1, { id: `${id}-error` },
|
|
765
765
|
React.createElement(Icon, { color: Colors.RED.Hex, id: `${id}-error-icon`, path: mdiInformationOutline, size: '20px' }),
|
|
766
766
|
React.createElement(ErrorMsg, { id: `${id}-error-msg` }, errorMsg))) : null));
|
|
767
|
-
};
|
|
768
|
-
|
|
767
|
+
};
|
|
768
|
+
|
|
769
769
|
const Wrapper$c = styled.div `
|
|
770
770
|
background: #fff;
|
|
771
771
|
border-radius: 8px;
|
|
@@ -820,8 +820,8 @@ const MoreMenu = (_a) => {
|
|
|
820
820
|
item.icon ? (React.createElement(Icon, { color: item.disabled ? Colors.LIGHT_GRAY.Hex : Colors.MEDIUM_GRAY.Hex, id: `${itemId}-icon`, path: item.icon, size: '20px' })) : null,
|
|
821
821
|
React.createElement(Title$1, { disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false, id: `${itemId}-title` }, item.label)));
|
|
822
822
|
})));
|
|
823
|
-
};
|
|
824
|
-
|
|
823
|
+
};
|
|
824
|
+
|
|
825
825
|
const MenuWrapper = styled.div `
|
|
826
826
|
position: relative;
|
|
827
827
|
display: inline-block;
|
|
@@ -907,8 +907,8 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
|
|
|
907
907
|
return (React.createElement(MenuWrapper, { id: `${id}-menu-wrapper`, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuWrapperRef },
|
|
908
908
|
React.createElement(Button, { disabled: disabled, format: format, icon: mdiDotsHorizontal, id: `${id}-button`, small: small }, label),
|
|
909
909
|
showMenu && (React.createElement(StyledMoreMenu, { "$left": menuPosition.left, "$menuWidth": menuWidth, "$top": menuPosition.top, id: `${id}-more-menu`, maxHeight: maxHeight, menuItems: menuItems }))));
|
|
910
|
-
};
|
|
911
|
-
|
|
910
|
+
};
|
|
911
|
+
|
|
912
912
|
const Wrapper$b = styled.label `
|
|
913
913
|
border-radius: 4px;
|
|
914
914
|
padding: 4px 0px 4px 6px;
|
|
@@ -996,8 +996,8 @@ const Checkbox = (_a) => {
|
|
|
996
996
|
children ? (React.createElement(Label$3, { color: color, id: `${id}-label` },
|
|
997
997
|
children,
|
|
998
998
|
tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
|
|
999
|
-
};
|
|
1000
|
-
|
|
999
|
+
};
|
|
1000
|
+
|
|
1001
1001
|
const SelectAll = styled.div `
|
|
1002
1002
|
padding: 8px 12px;
|
|
1003
1003
|
border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
|
|
@@ -1044,8 +1044,8 @@ const Checklist = (_a) => {
|
|
|
1044
1044
|
const optionId = generateUniqueId('option');
|
|
1045
1045
|
return (React.createElement(Checkbox, Object.assign({ id: `${optionId}-checkbox`, key: i }, accessibleProps, { checked: checked, color: option.color, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
|
|
1046
1046
|
}))));
|
|
1047
|
-
};
|
|
1048
|
-
|
|
1047
|
+
};
|
|
1048
|
+
|
|
1049
1049
|
const Wrapper$a = styled.div `
|
|
1050
1050
|
border-radius: 4px;
|
|
1051
1051
|
height: 40px;
|
|
@@ -1142,8 +1142,8 @@ const Select = (_a) => {
|
|
|
1142
1142
|
filteredOptions &&
|
|
1143
1143
|
filteredOptions.map((option, i) => (React.createElement("option", { id: `${id}-option-${i}`, key: i, style: { color: option.color }, value: option.value }, option.label || option.value)))),
|
|
1144
1144
|
React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, id: `${id}-icon`, path: mdiChevronDown, size: '22px' })));
|
|
1145
|
-
};
|
|
1146
|
-
|
|
1145
|
+
};
|
|
1146
|
+
|
|
1147
1147
|
const DatePickerWrapper = styled.div `
|
|
1148
1148
|
display: flex;
|
|
1149
1149
|
width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
|
|
@@ -1232,8 +1232,8 @@ onChange = () => { }, style, }) => {
|
|
|
1232
1232
|
React.createElement(Middle, { id: `${id}-middle` },
|
|
1233
1233
|
React.createElement(Select, { id: `${id}-day-select`, invalid: invalid, onChange: handleDayChange, options: dayOptions, placeholder: 'Select Day', readOnly: readOnly, style: { borderRadius: '0px' }, value: selectedDay })),
|
|
1234
1234
|
React.createElement(Select, { id: `${id}-year-select`, invalid: invalid, onChange: handleYearChange, options: years, placeholder: 'Select Year', readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: selectedYear }))));
|
|
1235
|
-
};
|
|
1236
|
-
|
|
1235
|
+
};
|
|
1236
|
+
|
|
1237
1237
|
const Scrim$1 = styled.div `
|
|
1238
1238
|
position: ${({ $position }) => $position};
|
|
1239
1239
|
top: 0;
|
|
@@ -1320,8 +1320,8 @@ const Drawer = (_a) => {
|
|
|
1320
1320
|
secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${id}-secondary-button` }))) : null,
|
|
1321
1321
|
primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${id}-primary-button` }))) : null)) : null),
|
|
1322
1322
|
scrim ? (React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, id: `${id}-scrim`, onClick: onClose })) : null));
|
|
1323
|
-
};
|
|
1324
|
-
|
|
1323
|
+
};
|
|
1324
|
+
|
|
1325
1325
|
const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.$customStyle)));
|
|
1326
1326
|
const LabelRow = styled.div `
|
|
1327
1327
|
display: flex;
|
|
@@ -1375,16 +1375,16 @@ const Field = (_a) => {
|
|
|
1375
1375
|
const id = generateUniqueId('field');
|
|
1376
1376
|
return (React.createElement(Wrapper$9, Object.assign({ "$customStyle": style }, accessibleProps, { id: `${id}-wrapper` }),
|
|
1377
1377
|
React.createElement(LabelRow, { id: `${id}-label-row` },
|
|
1378
|
-
React.createElement(Label$2, { htmlFor: htmlFor, id: `${id}-label` },
|
|
1378
|
+
label || required || tooltip ? (React.createElement(Label$2, { htmlFor: htmlFor, id: `${id}-label` },
|
|
1379
1379
|
label,
|
|
1380
1380
|
required ? React.createElement(Required, { id: `${id}-required` }, "*") : null,
|
|
1381
|
-
tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null),
|
|
1381
|
+
tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null,
|
|
1382
1382
|
action ? (React.createElement(Action, { id: action.id || `${id}-action`, onClick: action.onClick }, action.label)) : null),
|
|
1383
1383
|
description ? React.createElement(Description, { id: `${id}-description` }, description) : null,
|
|
1384
1384
|
React.createElement("div", { id: `${id}-children` }, children),
|
|
1385
1385
|
validationText ? React.createElement(Validation, { id: `${id}-validation` }, validationText) : null));
|
|
1386
|
-
};
|
|
1387
|
-
|
|
1386
|
+
};
|
|
1387
|
+
|
|
1388
1388
|
const Wrapper$8 = styled.fieldset `
|
|
1389
1389
|
margin-inline-start: 0px;
|
|
1390
1390
|
margin-inline-end: 0px;
|
|
@@ -1419,8 +1419,8 @@ const FieldGroup = ({ children, label }) => {
|
|
|
1419
1419
|
return (React.createElement(Wrapper$8, { id: `${id}-wrapper` },
|
|
1420
1420
|
React.createElement(Label$1, { id: `${id}-label` }, label),
|
|
1421
1421
|
React.createElement(Content$1, { id: `${id}-content` }, children)));
|
|
1422
|
-
};
|
|
1423
|
-
|
|
1422
|
+
};
|
|
1423
|
+
|
|
1424
1424
|
const Dropzone = styled.div `
|
|
1425
1425
|
border-radius: 8px;
|
|
1426
1426
|
border-width: 1px;
|
|
@@ -1610,8 +1610,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, val
|
|
|
1610
1610
|
React.createElement(Copy, { align: 'center', color: 'GRAY', id: `${id}-message` }, message),
|
|
1611
1611
|
tooltipInfo && (React.createElement("span", { id: `${id}-tooltip` },
|
|
1612
1612
|
React.createElement(Tooltip, { children: tooltipInfo, position: 'left-center' }))))) : null))) : null)));
|
|
1613
|
-
};
|
|
1614
|
-
|
|
1613
|
+
};
|
|
1614
|
+
|
|
1615
1615
|
const getAgesFromDob = (dob) => {
|
|
1616
1616
|
let calculated_current_age = null;
|
|
1617
1617
|
let calculated_nearest_age = null;
|
|
@@ -1684,8 +1684,8 @@ const formatAsSsn = (number) => {
|
|
|
1684
1684
|
formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
|
|
1685
1685
|
}
|
|
1686
1686
|
return formatted_value;
|
|
1687
|
-
};
|
|
1688
|
-
|
|
1687
|
+
};
|
|
1688
|
+
|
|
1689
1689
|
const StyledInput = styled.input `
|
|
1690
1690
|
border: none !important;
|
|
1691
1691
|
background: none !important;
|
|
@@ -1926,7 +1926,7 @@ const Input$1 = (_a) => {
|
|
|
1926
1926
|
onBlur(e);
|
|
1927
1927
|
setTimeout(() => {
|
|
1928
1928
|
setShowOptions(false);
|
|
1929
|
-
},
|
|
1929
|
+
}, 500);
|
|
1930
1930
|
}, onChange: readOnly ? e => e.preventDefault() : handleInputChange, onFocus: readOnly
|
|
1931
1931
|
? e => e.preventDefault()
|
|
1932
1932
|
: e => {
|
|
@@ -1951,8 +1951,8 @@ const Input$1 = (_a) => {
|
|
|
1951
1951
|
onSuggestedSelect();
|
|
1952
1952
|
setShowOptions(false);
|
|
1953
1953
|
} }, suggestedValue))))) : null));
|
|
1954
|
-
};
|
|
1955
|
-
|
|
1954
|
+
};
|
|
1955
|
+
|
|
1956
1956
|
const Wrapper$7 = styled.a `
|
|
1957
1957
|
color: ${props => props.theme.PRIMARY_COLOR.Hex};
|
|
1958
1958
|
font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
|
|
@@ -1972,8 +1972,8 @@ const Link = (_a) => {
|
|
|
1972
1972
|
var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
|
|
1973
1973
|
const id = generateUniqueId('link');
|
|
1974
1974
|
return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps, { id: `${id}-wrapper` }), children));
|
|
1975
|
-
};
|
|
1976
|
-
|
|
1975
|
+
};
|
|
1976
|
+
|
|
1977
1977
|
const dash = keyframes `
|
|
1978
1978
|
0% {
|
|
1979
1979
|
stroke-dasharray: 1, 160;
|
|
@@ -2008,8 +2008,8 @@ const Loader = () => {
|
|
|
2008
2008
|
const id = generateUniqueId('loader');
|
|
2009
2009
|
return (React.createElement(Spinner, { id: `${id}-spinner`, viewBox: '0 0 16 18' },
|
|
2010
2010
|
React.createElement(Path, { d: 'M7.21487 1.2868C7.88431 0.9044 8.73031 0.9044 9.39974 1.2868L9.40283 1.28856L14.4613 4.20761C15.1684 4.598 15.5746 5.33558 15.5746 6.11465V8.99996V11.8853C15.5746 12.6507 15.1632 13.3848 14.4617 13.7721L9.37973 16.7132C8.71029 17.0956 7.86428 17.0956 7.19485 16.7132L7.19088 16.7109L2.11279 13.772C1.40602 13.3816 1 12.6441 1 11.8653V8.98995V6.11465C1 5.31458 1.44381 4.59039 2.10827 4.21051L7.21487 1.2868Z', fill: 'none', id: `${id}-path`, strokeWidth: '2' })));
|
|
2011
|
-
};
|
|
2012
|
-
|
|
2011
|
+
};
|
|
2012
|
+
|
|
2013
2013
|
const Steps = styled.div `
|
|
2014
2014
|
padding: 20px;
|
|
2015
2015
|
border-bottom: 1px solid #e7e6e6;
|
|
@@ -2068,8 +2068,8 @@ const ProgressBar = ({ steps, showStepLine = false }) => {
|
|
|
2068
2068
|
step.complete ? (React.createElement(StyledIcon$2, { id: `${stepId}-icon`, path: mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active, id: `${stepId}-indicator` }, i + 1)),
|
|
2069
2069
|
React.createElement(StepLabel, { id: `${stepId}-label` }, step.label))));
|
|
2070
2070
|
})));
|
|
2071
|
-
};
|
|
2072
|
-
|
|
2071
|
+
};
|
|
2072
|
+
|
|
2073
2073
|
const Wrapper$6 = styled.div `
|
|
2074
2074
|
position: fixed;
|
|
2075
2075
|
top: 0;
|
|
@@ -2182,8 +2182,8 @@ const Modal = (_a) => {
|
|
|
2182
2182
|
secondaryButton ? (React.createElement(ButtonContainer, { id: `${id}-secondary-button-container` },
|
|
2183
2183
|
React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${id}-secondary-button` })))) : null,
|
|
2184
2184
|
primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${id}-primary-button` }))) : null)) : null)) : null)));
|
|
2185
|
-
};
|
|
2186
|
-
|
|
2185
|
+
};
|
|
2186
|
+
|
|
2187
2187
|
const Wrapper$5 = styled.div `
|
|
2188
2188
|
position: relative;
|
|
2189
2189
|
width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
|
|
@@ -2287,8 +2287,8 @@ const MultiSelect = (_a) => {
|
|
|
2287
2287
|
showOptions ? (React.createElement(Options, { id: `${id}-options` },
|
|
2288
2288
|
React.createElement(Checklist, { id: `${id}-checklist`, onChange: onChange, options: filteredOptions, selected: selected, showSelectAll: showSelectAll }))) : null,
|
|
2289
2289
|
showOptions ? (React.createElement(Scrim, { id: `${id}-scrim`, onClick: setShowOptions.bind(null, !showOptions) })) : null));
|
|
2290
|
-
};
|
|
2291
|
-
|
|
2290
|
+
};
|
|
2291
|
+
|
|
2292
2292
|
const Wrapper$4 = styled.div `
|
|
2293
2293
|
display: flex;
|
|
2294
2294
|
padding: 16px 30px;
|
|
@@ -2340,8 +2340,8 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
|
|
|
2340
2340
|
return (React.createElement(Button, Object.assign({}, buttonProps, { id: `${actionId}-button`, key: i, small: true }), label));
|
|
2341
2341
|
}),
|
|
2342
2342
|
menuItems.length ? (React.createElement(ButtonMenu, { enableClick: enableClick, enableHover: enableHover, format: format, label: label, menuItems: menuItems, show: show, small: true })) : null)) : null));
|
|
2343
|
-
};
|
|
2344
|
-
|
|
2343
|
+
};
|
|
2344
|
+
|
|
2345
2345
|
const Wrapper$3 = styled.nav `
|
|
2346
2346
|
box-sizing: border-box;
|
|
2347
2347
|
display: flex;
|
|
@@ -2376,8 +2376,8 @@ const Pagination = (_a) => {
|
|
|
2376
2376
|
value: `${p}`,
|
|
2377
2377
|
})), value: `${currentPage}` }),
|
|
2378
2378
|
React.createElement(Button, { disabled: is_last_page, icon: mdiChevronRight, id: `${id}-next-button`, onClick: handleNextClick, small: true })));
|
|
2379
|
-
};
|
|
2380
|
-
|
|
2379
|
+
};
|
|
2380
|
+
|
|
2381
2381
|
const Wrapper$2 = styled.label `
|
|
2382
2382
|
border-radius: 4px;
|
|
2383
2383
|
padding: 4px 0px 4px 6px;
|
|
@@ -2462,16 +2462,16 @@ const Radio = (_a) => {
|
|
|
2462
2462
|
React.createElement(Label, { id: `${id}-label` },
|
|
2463
2463
|
children,
|
|
2464
2464
|
tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
|
|
2465
|
-
};
|
|
2466
|
-
|
|
2465
|
+
};
|
|
2466
|
+
|
|
2467
2467
|
const RadioList = (_a) => {
|
|
2468
2468
|
var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
|
|
2469
2469
|
return (React.createElement(React.Fragment, null, options.map((option) => {
|
|
2470
2470
|
const label = option.label || option.value;
|
|
2471
2471
|
return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
|
|
2472
2472
|
})));
|
|
2473
|
-
};
|
|
2474
|
-
|
|
2473
|
+
};
|
|
2474
|
+
|
|
2475
2475
|
const StyledTable = styled.table `
|
|
2476
2476
|
width: 100%;
|
|
2477
2477
|
margin-top: 1px;
|
|
@@ -2554,8 +2554,8 @@ const Table = (_a) => {
|
|
|
2554
2554
|
return (React.createElement(Column, { "$align": columns[j].align, "$width": columns[j].width, id: `${columnId}-column`, key: j }, column.render ? column.render(row) : row[column.id] || 'N/A'));
|
|
2555
2555
|
})));
|
|
2556
2556
|
}))) : null));
|
|
2557
|
-
};
|
|
2558
|
-
|
|
2557
|
+
};
|
|
2558
|
+
|
|
2559
2559
|
const Wrapper$1 = styled.div `
|
|
2560
2560
|
display: flex;
|
|
2561
2561
|
box-sizing: border-box;
|
|
@@ -2616,8 +2616,8 @@ const Tabs = (_a) => {
|
|
|
2616
2616
|
label));
|
|
2617
2617
|
})));
|
|
2618
2618
|
};
|
|
2619
|
-
Tabs.defaultProps = {};
|
|
2620
|
-
|
|
2619
|
+
Tabs.defaultProps = {};
|
|
2620
|
+
|
|
2621
2621
|
const Track = styled.div `
|
|
2622
2622
|
height: 24px;
|
|
2623
2623
|
border-radius: 12px;
|
|
@@ -2648,8 +2648,8 @@ const Toggle = (_a) => {
|
|
|
2648
2648
|
React.createElement(Handle, { "$on": on, id: `${id}-handle` },
|
|
2649
2649
|
React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, id: `${id}-icon`, path: on ? mdiCheck : mdiClose, size: '16px' }))));
|
|
2650
2650
|
};
|
|
2651
|
-
Toggle.defaultProps = {};
|
|
2652
|
-
|
|
2651
|
+
Toggle.defaultProps = {};
|
|
2652
|
+
|
|
2653
2653
|
const Container = styled.div `
|
|
2654
2654
|
width: 100%;
|
|
2655
2655
|
padding: 40px auto;
|
|
@@ -2685,7 +2685,7 @@ const ZeroState = (_a) => {
|
|
|
2685
2685
|
React.createElement(Heading, { children: title, id: `${id}-heading`, type: 'tertiary' }),
|
|
2686
2686
|
description && (React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', id: `${id}-description`, type: 'default' }))),
|
|
2687
2687
|
action && (React.createElement(Button, { children: action.children, disabled: action.disabled, format: action.format, icon: action.icon, id: `${id}-button`, onClick: action.onClick }))));
|
|
2688
|
-
};
|
|
2689
|
-
|
|
2690
|
-
export { Accordion, ActionDialog, Alert, AppHeader, AppMenu, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Colors, Copy, DatePicker, Drawer, EditableTheme, Field, FieldGroup, FileUpload, FontSizes, FontStyles, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, ProgressBar, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState, formatAsPhone, formatAsSsn, getAgesFromDob, getDaysForMonth, getYears, validateEmail, validatePhone };
|
|
2691
|
-
//# sourceMappingURL=index.js.map
|
|
2688
|
+
};
|
|
2689
|
+
|
|
2690
|
+
export { Accordion, ActionDialog, Alert, AppHeader, AppMenu, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Colors, Copy, DatePicker, Drawer, EditableTheme, Field, FieldGroup, FileUpload, FontSizes, FontStyles, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, ProgressBar, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState, formatAsPhone, formatAsSsn, getAgesFromDob, getDaysForMonth, getYears, validateEmail, validatePhone };
|
|
2691
|
+
//# sourceMappingURL=index.js.map
|