@digital-ai/dot-components 1.3.4 → 1.3.5
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/dot-components.esm.js +337 -187
- package/dot-components.umd.js +330 -179
- package/lib/components/badge/Badge.d.ts +1 -1
- package/lib/components/badge/Badge.styles.d.ts +5 -2
- package/lib/components/dynamic-form/DynamicForm.d.ts +1 -1
- package/lib/components/dynamic-form/DynamicForm.stories.data.d.ts +2 -0
- package/lib/components/dynamic-form/DynamicForm.stories.styles.d.ts +1 -0
- package/lib/components/dynamic-form/DynamicForm.styles.d.ts +2 -1
- package/lib/components/dynamic-form/models.d.ts +22 -8
- package/lib/components/dynamic-form/sample.d.ts +1 -3
- package/lib/components/dynamic-form/utils/formHelpers.d.ts +7 -3
- package/lib/components/dynamic-form/utils/helpers.d.ts +3 -2
- package/lib/components/index.d.ts +2 -2
- package/lib/components/input-form-fields/InputFormFields.propTypes.d.ts +4 -0
- package/lib/components/input-form-fields/InputSelect.d.ts +1 -1
- package/lib/components/input-form-fields/InputText.d.ts +1 -1
- package/package.json +1 -1
package/dot-components.umd.js
CHANGED
|
@@ -1992,7 +1992,7 @@
|
|
|
1992
1992
|
var rootClassName$w = 'dot-sidebar';
|
|
1993
1993
|
var StyledSidebar = styled__default["default"].aside(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
1994
1994
|
var theme = _a.theme;
|
|
1995
|
-
return styled.css(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n &.", " {\n align-items: stretch;\n background: ", ";\n border-width: 0 1px;\n border-style: solid;\n border-color: ", ";\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: space-between;\n letter-spacing: 0.01em;\n padding: ", ";\n -o-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n header {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n height: 40px;\n flex-shrink: 0;\n overflow: hidden;\n margin-bottom: ", ";\n padding: ", ";\n white-space: nowrap;\n\n &.app-logo {\n box-sizing: border-box;\n\n .dot-app-logo {\n svg,\n img {\n max-width: 100%;\n }\n }\n }\n\n .dot-avatar {\n margin-right: ", "px;\n }\n }\n\n .go-back {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n\n .dot-icon {\n margin-right: ", "px;\n width: 40px;\n height: 40px;\n }\n\n &:hover {\n background-color: ", ";\n }\n }\n\n hr.MuiDivider-root {\n background-color: ", ";\n margin: ", ";\n }\n\n .MuiTypography-subtitle2 {\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n margin: ", ";\n }\n\n ul.side-nav {\n background: transparent;\n flex-grow: 2;\n overflow-x: hidden;\n overflow-y: auto;\n padding: 0;\n width: auto;\n\n .dot-nested-list {\n background: transparent;\n }\n\n .", " {\n .dot-drawer-paper {\n border-right: 1px solid\n ", ";\n box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);\n padding-top: ", ";\n }\n\n /* TO-DO: Add class for agility in cases like this? */\n .MuiTypography-root.MuiTypography-subtitle2 {\n border: ", ";\n color: ", ";\n font-size: ", ";\n line-height: 40px;\n margin: ", ";\n padding: ", ";\n }\n\n .", " {\n margin: 0;\n padding-left: ", "px;\n }\n }\n\n .dot-list-item {\n height: ", ";\n padding: 0;\n margin-bottom: ", ";\n\n &.MuiListItem-root.Mui-selected,\n &.MuiListItem-root.Mui-selected:hover,\n &:hover {\n background-color: ", ";\n }\n\n &:hover,\n &:active,\n &:focus {\n .dot-typography,\n .dot-icon i.dot-i:before {\n color: ", ";\n }\n }\n\n &.open {\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n\n &:hover {\n background-color: ", ";\n }\n }\n\n .MuiTouchRipple-root {\n display: ", ";\n }\n\n .dot-list-item-link .dot-icon {\n margin-right: ", "px;\n }\n\n .dot-icon {\n border-radius: 50%;\n height: 40px;\n width: 40px;\n }\n &.Mui-focusVisible {\n box-shadow: inset 0 0 0 2px ", ";\n border: 2px solid ", ";\n }\n }\n\n li.dot-list-item .dot-typography {\n white-space: nowrap;\n }\n }\n\n .toggle-nav {\n border-top: 1px solid;\n border-top-color: ", ";\n padding: ", "px;\n text-align: right;\n\n .dot-icon {\n transform: rotate(0deg);\n -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n }\n }\n\n .powered-by {\n border-top: 1px solid;\n border-top-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n font-size: 12px;\n overflow: hidden;\n margin: ", ";\n padding: ", "px;\n\n p.desc {\n white-space: nowrap;\n }\n\n .company-name {\n margin-top: ", "px;\n }\n\n .d-icon {\n display: none;\n }\n }\n\n &.collapsed {\n overflow: hidden;\n padding: ", ";\n width: 58px;\n -o-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n header .dot-app-logo {\n text-align: center;\n }\n\n ul.side-nav {\n width: 56px;\n li.MuiListSubheader-root .MuiTypography-root {\n opacity: 0;\n }\n .dot-list-item {\n margin-left: 0;\n\n .dot-icon {\n margin-left: ", "px;\n }\n }\n\n .toggle-nav {\n align-self: center;\n }\n }\n\n .go-back .MuiTypography-root,\n .MuiListItem-divider .dot-list-item-link,\n .dot-drawer {\n display: none;\n }\n\n .powered-by {\n align-items: center;\n\n .company-name,\n p.desc {\n display: none;\n }\n\n .d-icon {\n display: block;\n }\n }\n }\n }\n "], ["\n &.", " {\n align-items: stretch;\n background: ", ";\n border-width: 0 1px;\n border-style: solid;\n border-color: ", ";\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: space-between;\n letter-spacing: 0.01em;\n padding: ", ";\n -o-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n header {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n height: 40px;\n flex-shrink: 0;\n overflow: hidden;\n margin-bottom: ", ";\n padding: ", ";\n white-space: nowrap;\n\n &.app-logo {\n box-sizing: border-box;\n\n .dot-app-logo {\n svg,\n img {\n max-width: 100%;\n }\n }\n }\n\n .dot-avatar {\n margin-right: ", "px;\n }\n }\n\n .go-back {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n\n .dot-icon {\n margin-right: ", "px;\n width: 40px;\n height: 40px;\n }\n\n &:hover {\n background-color: ", ";\n }\n }\n\n hr.MuiDivider-root {\n background-color: ", ";\n margin: ", ";\n }\n\n .MuiTypography-subtitle2 {\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n margin: ", ";\n }\n\n ul.side-nav {\n background: transparent;\n flex-grow: 2;\n overflow-x: hidden;\n overflow-y: auto;\n padding: 0;\n width: auto;\n\n .dot-nested-list {\n background: transparent;\n }\n\n .", " {\n .dot-drawer-paper {\n border-right: 1px solid\n ", ";\n box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);\n padding-top: ", ";\n }\n\n /* TO-DO: Add class for agility in cases like this? */\n .MuiTypography-root.MuiTypography-subtitle2 {\n border: ", ";\n color: ", ";\n font-size: ", ";\n line-height: 40px;\n margin: ", ";\n padding: ", ";\n }\n\n .", " {\n margin: 0;\n padding-left: ", "px;\n }\n }\n\n .dot-list-item {\n height: ", ";\n padding: 0;\n margin-bottom: ", ";\n\n &.MuiListItem-root.Mui-selected,\n &.MuiListItem-root.Mui-selected:hover,\n &:hover {\n background-color: ", ";\n }\n\n &:hover,\n &:active,\n &:focus {\n .dot-typography,\n .dot-icon i.dot-i:before {\n color: ", ";\n }\n }\n\n &.open {\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n\n &:hover {\n background-color: ", ";\n }\n }\n\n .MuiTouchRipple-root {\n display: ", ";\n }\n\n .dot-list-item-link .dot-icon {\n margin-right: ", "px;\n }\n\n .dot-icon {\n border-radius: 50%;\n height: 40px;\n width: 40px;\n }\n &.Mui-focusVisible {\n box-shadow: inset 0 0 0 2px ", ";\n border: 2px solid ", ";\n }\n }\n\n li.dot-list-item .dot-typography {\n white-space: nowrap;\n }\n }\n\n .toggle-nav {\n border-top: 1px solid;\n border-top-color: ", ";\n padding: ", "px;\n text-align: right;\n\n .dot-icon {\n transform: rotate(0deg);\n -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n }\n }\n\n .powered-by {\n border-top: 1px solid;\n border-top-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n font-size: 12px;\n overflow: hidden;\n margin: ", ";\n padding: ", "px;\n\n p.desc {\n white-space: nowrap;\n }\n\n .company-name {\n margin-top: ", "px;\n }\n\n .d-icon {\n display: none;\n }\n }\n\n &.collapsed {\n overflow: hidden;\n padding: ", ";\n width: 58px;\n -o-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n header .dot-app-logo {\n text-align: center;\n }\n\n ul.side-nav {\n width: 56px;\n li.MuiListSubheader-root .MuiTypography-root {\n opacity: 0;\n }\n .dot-list-item {\n margin-left: 0;\n\n .dot-icon {\n margin-left: ", "px;\n }\n }\n\n .toggle-nav {\n align-self: center;\n }\n }\n\n .go-back .MuiTypography-root,\n .MuiListItem-divider .dot-list-item-link,\n .dot-drawer {\n display: none;\n }\n\n .powered-by {\n align-items: center;\n\n .company-name,\n p.desc {\n display: none;\n }\n\n .d-icon {\n display: block;\n }\n }\n }\n }\n "])), rootClassName$w, theme.palette.product === 'agility' ? theme.palette.layer.n50 : theme.palette.grey[50], theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '0 0 5px rgba(0, 0, 0, 0.15)', theme.palette.product === 'agility' ? theme.palette.layer.n700 : theme.palette.grey[700], theme.palette.product === 'agility' && theme.spacing(2) + "px", theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && theme.spacing(1) + "px", theme.palette.product === 'agililty' ? theme.spacing(0, 0, 1) : theme.spacing(1, 2), theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(1), theme.palette.grey[100], theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' ? theme.spacing(2, 0) : theme.spacing(1, 0), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0, 0, 1), nestedDrawerClassName, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '10px', theme.palette.product === 'agility' && 'none', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavSubHeaderText, theme.palette.product === 'agility' && '11px', theme.palette.product === 'agility' && '10px 0 0', theme.palette.product === 'agility' && '0 8px', listItemRootClass, theme.spacing(2), theme.palette.product === 'agility' ? '40px' : '44px', theme.palette.product === 'agility' && theme.spacing(1) + "px", theme.palette.product === 'agility' && 'transparent', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverText, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' ? "1px solid " + theme.palette.agilityInterface.sideNavHoverBorder : 'none', theme.palette.product === 'agility' && '4px', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' && 'none', theme.spacing(1), theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.grey[400], theme.palette.product !== 'agility' && theme.spacing(0, 1), theme.spacing(1), theme.spacing(1), theme.palette.product === 'agility' && theme.spacing(2, 0), theme.spacing(1));
|
|
1995
|
+
return styled.css(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n &.", " {\n align-items: stretch;\n background: ", ";\n border-width: 0 1px;\n border-style: solid;\n border-color: ", ";\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: space-between;\n letter-spacing: 0.01em;\n padding: ", ";\n -o-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n header {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n height: 40px;\n flex-shrink: 0;\n overflow: hidden;\n margin-bottom: ", ";\n padding: ", ";\n white-space: nowrap;\n\n &.app-logo {\n box-sizing: border-box;\n\n .dot-app-logo {\n svg,\n img {\n max-width: 100%;\n }\n }\n }\n\n .dot-avatar {\n margin-right: ", "px;\n }\n }\n\n .go-back {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n\n .dot-icon {\n margin-right: ", "px;\n width: 40px;\n height: 40px;\n }\n\n &:hover {\n background-color: ", ";\n }\n }\n\n hr.MuiDivider-root {\n background-color: ", ";\n margin: ", ";\n }\n\n .MuiTypography-subtitle2 {\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n margin: ", ";\n }\n\n ul.side-nav {\n background: transparent;\n flex-grow: 2;\n overflow-x: hidden;\n overflow-y: auto;\n padding: 0;\n width: auto;\n\n .dot-nested-list {\n background: transparent;\n }\n\n .", " {\n .dot-drawer-paper {\n border-right: 1px solid\n ", ";\n box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);\n padding-top: ", ";\n }\n\n /* TO-DO: Add class for agility in cases like this? */\n .MuiTypography-root.MuiTypography-subtitle2 {\n border: ", ";\n color: ", ";\n font-size: ", ";\n line-height: 40px;\n margin: ", ";\n padding: ", ";\n }\n\n .", " {\n margin: 0;\n padding-left: ", "px;\n }\n }\n\n .dot-list-item {\n height: ", ";\n padding: 0;\n margin-bottom: ", ";\n\n &.MuiListItem-root.Mui-selected,\n &.MuiListItem-root.Mui-selected:hover,\n &:hover {\n background-color: ", ";\n }\n\n &:hover,\n &:active,\n &:focus {\n .dot-typography,\n .dot-icon i.dot-i:before {\n color: ", ";\n }\n }\n\n &.open {\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n\n &:hover {\n background-color: ", ";\n }\n }\n\n .MuiTouchRipple-root {\n display: ", ";\n }\n\n .dot-list-item-link .dot-icon {\n margin-right: ", "px;\n }\n\n .dot-icon {\n border-radius: 50%;\n height: 40px;\n width: 40px;\n }\n &.Mui-focusVisible {\n box-shadow: inset 0 0 0 2px ", ";\n border: 2px solid ", ";\n }\n }\n\n li.dot-list-item .dot-typography {\n white-space: nowrap;\n }\n }\n\n .toggle-nav {\n border-top: 1px solid;\n border-top-color: ", ";\n padding: ", "px;\n text-align: right;\n\n .dot-icon {\n transform: rotate(0deg);\n -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n }\n }\n\n .powered-by {\n border-top: 1px solid;\n border-top-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n font-size: 12px;\n overflow: hidden;\n margin: ", ";\n padding: ", "px;\n\n p.desc {\n white-space: nowrap;\n }\n\n .company-name {\n margin-top: ", "px;\n }\n\n .d-icon {\n display: none;\n }\n }\n\n &.collapsed {\n overflow: hidden;\n padding: ", ";\n width: 58px;\n -o-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n header .dot-app-logo {\n text-align: center;\n }\n\n ul.side-nav {\n width: 56px;\n li.MuiListSubheader-root .MuiTypography-root {\n opacity: 0;\n }\n .dot-list-item {\n margin-left: 0;\n\n .dot-icon {\n margin-left: ", "px;\n }\n }\n\n .toggle-nav {\n align-self: center;\n }\n }\n\n .go-back .dot-icon {\n margin: ", ";\n }\n\n .go-back .MuiTypography-root,\n .MuiListItem-divider .dot-list-item-link,\n .dot-drawer {\n display: none;\n }\n\n .powered-by {\n align-items: center;\n\n .company-name,\n p.desc {\n display: none;\n }\n\n .d-icon {\n display: block;\n }\n }\n }\n }\n "], ["\n &.", " {\n align-items: stretch;\n background: ", ";\n border-width: 0 1px;\n border-style: solid;\n border-color: ", ";\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: space-between;\n letter-spacing: 0.01em;\n padding: ", ";\n -o-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n header {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n height: 40px;\n flex-shrink: 0;\n overflow: hidden;\n margin-bottom: ", ";\n padding: ", ";\n white-space: nowrap;\n\n &.app-logo {\n box-sizing: border-box;\n\n .dot-app-logo {\n svg,\n img {\n max-width: 100%;\n }\n }\n }\n\n .dot-avatar {\n margin-right: ", "px;\n }\n }\n\n .go-back {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n\n .dot-icon {\n margin-right: ", "px;\n width: 40px;\n height: 40px;\n }\n\n &:hover {\n background-color: ", ";\n }\n }\n\n hr.MuiDivider-root {\n background-color: ", ";\n margin: ", ";\n }\n\n .MuiTypography-subtitle2 {\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n margin: ", ";\n }\n\n ul.side-nav {\n background: transparent;\n flex-grow: 2;\n overflow-x: hidden;\n overflow-y: auto;\n padding: 0;\n width: auto;\n\n .dot-nested-list {\n background: transparent;\n }\n\n .", " {\n .dot-drawer-paper {\n border-right: 1px solid\n ", ";\n box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);\n padding-top: ", ";\n }\n\n /* TO-DO: Add class for agility in cases like this? */\n .MuiTypography-root.MuiTypography-subtitle2 {\n border: ", ";\n color: ", ";\n font-size: ", ";\n line-height: 40px;\n margin: ", ";\n padding: ", ";\n }\n\n .", " {\n margin: 0;\n padding-left: ", "px;\n }\n }\n\n .dot-list-item {\n height: ", ";\n padding: 0;\n margin-bottom: ", ";\n\n &.MuiListItem-root.Mui-selected,\n &.MuiListItem-root.Mui-selected:hover,\n &:hover {\n background-color: ", ";\n }\n\n &:hover,\n &:active,\n &:focus {\n .dot-typography,\n .dot-icon i.dot-i:before {\n color: ", ";\n }\n }\n\n &.open {\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n\n &:hover {\n background-color: ", ";\n }\n }\n\n .MuiTouchRipple-root {\n display: ", ";\n }\n\n .dot-list-item-link .dot-icon {\n margin-right: ", "px;\n }\n\n .dot-icon {\n border-radius: 50%;\n height: 40px;\n width: 40px;\n }\n &.Mui-focusVisible {\n box-shadow: inset 0 0 0 2px ", ";\n border: 2px solid ", ";\n }\n }\n\n li.dot-list-item .dot-typography {\n white-space: nowrap;\n }\n }\n\n .toggle-nav {\n border-top: 1px solid;\n border-top-color: ", ";\n padding: ", "px;\n text-align: right;\n\n .dot-icon {\n transform: rotate(0deg);\n -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n }\n }\n\n .powered-by {\n border-top: 1px solid;\n border-top-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n font-size: 12px;\n overflow: hidden;\n margin: ", ";\n padding: ", "px;\n\n p.desc {\n white-space: nowrap;\n }\n\n .company-name {\n margin-top: ", "px;\n }\n\n .d-icon {\n display: none;\n }\n }\n\n &.collapsed {\n overflow: hidden;\n padding: ", ";\n width: 58px;\n -o-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n header .dot-app-logo {\n text-align: center;\n }\n\n ul.side-nav {\n width: 56px;\n li.MuiListSubheader-root .MuiTypography-root {\n opacity: 0;\n }\n .dot-list-item {\n margin-left: 0;\n\n .dot-icon {\n margin-left: ", "px;\n }\n }\n\n .toggle-nav {\n align-self: center;\n }\n }\n\n .go-back .dot-icon {\n margin: ", ";\n }\n\n .go-back .MuiTypography-root,\n .MuiListItem-divider .dot-list-item-link,\n .dot-drawer {\n display: none;\n }\n\n .powered-by {\n align-items: center;\n\n .company-name,\n p.desc {\n display: none;\n }\n\n .d-icon {\n display: block;\n }\n }\n }\n }\n "])), rootClassName$w, theme.palette.product === 'agility' ? theme.palette.layer.n50 : theme.palette.grey[50], theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '0 0 5px rgba(0, 0, 0, 0.15)', theme.palette.product === 'agility' ? theme.palette.layer.n700 : theme.palette.grey[700], theme.palette.product === 'agility' && theme.spacing(2) + "px", theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && theme.spacing(1) + "px", theme.palette.product === 'agililty' ? theme.spacing(0, 0, 1) : theme.spacing(1, 2), theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(2), theme.palette.grey[100], theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' ? theme.spacing(2, 0) : theme.spacing(1, 0), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0, 0, 1), nestedDrawerClassName, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '10px', theme.palette.product === 'agility' && 'none', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavSubHeaderText, theme.palette.product === 'agility' && '11px', theme.palette.product === 'agility' && '10px 0 0', theme.palette.product === 'agility' && '0 8px', listItemRootClass, theme.spacing(2), theme.palette.product === 'agility' ? '40px' : '44px', theme.palette.product === 'agility' && theme.spacing(1) + "px", theme.palette.product === 'agility' && 'transparent', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverText, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' ? "1px solid " + theme.palette.agilityInterface.sideNavHoverBorder : 'none', theme.palette.product === 'agility' && '4px', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' && 'none', theme.spacing(1), theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.grey[400], theme.palette.product !== 'agility' && theme.spacing(0, 1), theme.spacing(1), theme.spacing(1), theme.palette.product === 'agility' && theme.spacing(2, 0), theme.spacing(1), theme.spacing(0, 1));
|
|
1996
1996
|
});
|
|
1997
1997
|
var templateObject_1$z, templateObject_2$x;
|
|
1998
1998
|
|
|
@@ -2767,8 +2767,8 @@
|
|
|
2767
2767
|
var rootClassName$q = 'dot-badge';
|
|
2768
2768
|
var StyledBadge = styled__default["default"](core.Badge)(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function () {
|
|
2769
2769
|
return styled.css(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n &.", " {\n .MuiBadge-badge {\n background-color: ", ";\n }\n }\n "], ["\n &.", " {\n .MuiBadge-badge {\n background-color: ", ";\n }\n }\n "])), rootClassName$q, function (_a) {
|
|
2770
|
-
var badgeColor = _a
|
|
2771
|
-
return badgeColor;
|
|
2770
|
+
var $badgeColor = _a.$badgeColor;
|
|
2771
|
+
return $badgeColor;
|
|
2772
2772
|
});
|
|
2773
2773
|
});
|
|
2774
2774
|
var templateObject_1$t, templateObject_2$r;
|
|
@@ -2783,12 +2783,12 @@
|
|
|
2783
2783
|
overlap = _a.overlap;
|
|
2784
2784
|
var rootClasses = useStylesWithRootClass(rootClassName$q, className);
|
|
2785
2785
|
return /*#__PURE__*/React__default["default"].createElement(StyledBadge, {
|
|
2786
|
+
"$badgeColor": badgeColor,
|
|
2786
2787
|
anchorOrigin: {
|
|
2787
2788
|
vertical: 'top',
|
|
2788
2789
|
horizontal: 'right'
|
|
2789
2790
|
},
|
|
2790
2791
|
"aria-label": ariaLabel,
|
|
2791
|
-
badgeColor: badgeColor,
|
|
2792
2792
|
classes: {
|
|
2793
2793
|
root: rootClasses
|
|
2794
2794
|
},
|
|
@@ -3714,9 +3714,8 @@
|
|
|
3714
3714
|
};
|
|
3715
3715
|
|
|
3716
3716
|
var rootClassName$d = 'dot-dynamic-form';
|
|
3717
|
-
var StyledDynamicForm = styled__default["default"]
|
|
3718
|
-
|
|
3719
|
-
return styled.css(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n &.", " {\n margin: ", "px;\n }\n "], ["\n &.", " {\n margin: ", "px;\n }\n "])), rootClassName$d, theme.spacing(2));
|
|
3717
|
+
var StyledDynamicForm = styled__default["default"](DotForm)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function () {
|
|
3718
|
+
return styled.css(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n &.", " {\n }\n "], ["\n &.", " {\n }\n "])), rootClassName$d);
|
|
3720
3719
|
});
|
|
3721
3720
|
var templateObject_1$d, templateObject_2$d;
|
|
3722
3721
|
|
|
@@ -3753,15 +3752,45 @@
|
|
|
3753
3752
|
return false;
|
|
3754
3753
|
}
|
|
3755
3754
|
};
|
|
3755
|
+
var checkIfDisabledControl = function checkIfDisabledControl(disabled, formValues, isFormValid) {
|
|
3756
|
+
if (!disabled) return false;
|
|
3757
|
+
if (typeof disabled === 'boolean') return disabled;
|
|
3758
|
+
|
|
3759
|
+
try {
|
|
3760
|
+
return disabled(formValues, isFormValid);
|
|
3761
|
+
} catch (e) {
|
|
3762
|
+
return false;
|
|
3763
|
+
}
|
|
3764
|
+
};
|
|
3765
|
+
|
|
3766
|
+
var getInitialValueFromControl = function getInitialValueFromControl(_a) {
|
|
3767
|
+
var controlType = _a.controlType,
|
|
3768
|
+
initialValue = _a.initialValue; // Skip non-data controls (ignore buttons and other non-relevant elements)
|
|
3769
|
+
// or hidden elements
|
|
3770
|
+
|
|
3771
|
+
if (!DATA_CONTROLS.includes(controlType)) return;
|
|
3772
|
+
return initialValue ? initialValue : undefined;
|
|
3773
|
+
};
|
|
3774
|
+
|
|
3756
3775
|
var getFormDataFromInitialValues = function getFormDataFromInitialValues(config) {
|
|
3757
3776
|
var formValues = {};
|
|
3758
|
-
config.controls.forEach(function (
|
|
3759
|
-
var controlName =
|
|
3760
|
-
|
|
3761
|
-
controlType =
|
|
3762
|
-
|
|
3777
|
+
config.controls.forEach(function (control) {
|
|
3778
|
+
var controlName = control.controlName,
|
|
3779
|
+
formSection = control.formSection,
|
|
3780
|
+
controlType = control.controlType; // Check if there are section controls and grab initial values from those
|
|
3781
|
+
|
|
3782
|
+
if (formSection && formSection.sectionControls) {
|
|
3783
|
+
formSection.sectionControls.forEach(function (formSectionControl) {
|
|
3784
|
+
var sectionControlName = formSectionControl.controlName,
|
|
3785
|
+
sectionControlType = formSectionControl.controlType;
|
|
3786
|
+
if (!DATA_CONTROLS.includes(sectionControlType)) return;
|
|
3787
|
+
var sectionControlInitialValue = getInitialValueFromControl(formSectionControl);
|
|
3788
|
+
formValues[sectionControlName] = sectionControlInitialValue ? sectionControlInitialValue : undefined;
|
|
3789
|
+
});
|
|
3790
|
+
}
|
|
3763
3791
|
|
|
3764
3792
|
if (!DATA_CONTROLS.includes(controlType)) return;
|
|
3793
|
+
var initialValue = getInitialValueFromControl(control);
|
|
3765
3794
|
formValues[controlName] = initialValue ? initialValue : undefined;
|
|
3766
3795
|
});
|
|
3767
3796
|
return formValues;
|
|
@@ -3932,7 +3961,9 @@
|
|
|
3932
3961
|
_e = _a.multiline,
|
|
3933
3962
|
multiline = _e === void 0 ? false : _e,
|
|
3934
3963
|
name = _a.name,
|
|
3964
|
+
onBlur = _a.onBlur,
|
|
3935
3965
|
onChange = _a.onChange,
|
|
3966
|
+
onFocus = _a.onFocus,
|
|
3936
3967
|
placeholder = _a.placeholder,
|
|
3937
3968
|
_f = _a.readOnly,
|
|
3938
3969
|
readOnly = _f === void 0 ? false : _f,
|
|
@@ -4029,7 +4060,9 @@
|
|
|
4029
4060
|
label: label,
|
|
4030
4061
|
multiline: multiline,
|
|
4031
4062
|
name: name,
|
|
4063
|
+
onBlur: onBlur,
|
|
4032
4064
|
onChange: hasDebounce ? handleChange : onChange,
|
|
4065
|
+
onFocus: onFocus,
|
|
4033
4066
|
placeholder: placeholder,
|
|
4034
4067
|
required: required,
|
|
4035
4068
|
rows: multiline ? rows : null,
|
|
@@ -4059,7 +4092,9 @@
|
|
|
4059
4092
|
inputRef = _a.inputRef,
|
|
4060
4093
|
label = _a.label,
|
|
4061
4094
|
name = _a.name,
|
|
4095
|
+
onBlur = _a.onBlur,
|
|
4062
4096
|
onChange = _a.onChange,
|
|
4097
|
+
onFocus = _a.onFocus,
|
|
4063
4098
|
_e = _a.options,
|
|
4064
4099
|
options = _e === void 0 ? [] : _e,
|
|
4065
4100
|
required = _a.required,
|
|
@@ -4100,7 +4135,9 @@
|
|
|
4100
4135
|
label: label,
|
|
4101
4136
|
multiline: false,
|
|
4102
4137
|
name: name,
|
|
4138
|
+
onBlur: onBlur,
|
|
4103
4139
|
onChange: onChange,
|
|
4140
|
+
onFocus: onFocus,
|
|
4104
4141
|
required: required,
|
|
4105
4142
|
select: true,
|
|
4106
4143
|
SelectProps: {
|
|
@@ -4117,13 +4154,67 @@
|
|
|
4117
4154
|
}));
|
|
4118
4155
|
};
|
|
4119
4156
|
|
|
4120
|
-
var rootClassName$c = 'dot-
|
|
4121
|
-
var
|
|
4122
|
-
_a.theme;
|
|
4123
|
-
return styled.css(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["
|
|
4157
|
+
var rootClassName$c = 'dot-progress-button';
|
|
4158
|
+
var StyledProgressButton = styled__default["default"](DotButton)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
4159
|
+
var theme = _a.theme;
|
|
4160
|
+
return styled.css(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n &.", " {\n .hidden {\n // hide children but preserve its space so that\n // button's dimensions don't change\n visibility: hidden;\n }\n .progress-circle {\n color: ", ";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n margin: auto;\n }\n }\n "], ["\n &.", " {\n .hidden {\n // hide children but preserve its space so that\n // button's dimensions don't change\n visibility: hidden;\n }\n .progress-circle {\n color: ", ";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n margin: auto;\n }\n }\n "])), rootClassName$c, theme.palette.layer.n300);
|
|
4124
4161
|
});
|
|
4125
4162
|
var templateObject_1$c, templateObject_2$c;
|
|
4126
4163
|
|
|
4164
|
+
var SPINNER_DEFAULT_SIZE = 20;
|
|
4165
|
+
var SPINNER_LARGE_SIZE = 24;
|
|
4166
|
+
var DotProgressButton = function DotProgressButton(_a) {
|
|
4167
|
+
var ariaLabel = _a.ariaLabel,
|
|
4168
|
+
children = _a.children,
|
|
4169
|
+
className = _a.className,
|
|
4170
|
+
dataTestId = _a["data-testid"],
|
|
4171
|
+
_b = _a.disabled,
|
|
4172
|
+
disabled = _b === void 0 ? false : _b,
|
|
4173
|
+
_c = _a.disableRipple,
|
|
4174
|
+
disableRipple = _c === void 0 ? false : _c,
|
|
4175
|
+
_d = _a.fullWidth,
|
|
4176
|
+
fullWidth = _d === void 0 ? false : _d,
|
|
4177
|
+
_e = _a.isLoading,
|
|
4178
|
+
isLoading = _e === void 0 ? false : _e,
|
|
4179
|
+
_f = _a.isSubmit,
|
|
4180
|
+
isSubmit = _f === void 0 ? false : _f,
|
|
4181
|
+
onClick = _a.onClick,
|
|
4182
|
+
_g = _a.size,
|
|
4183
|
+
size = _g === void 0 ? 'medium' : _g,
|
|
4184
|
+
tooltip = _a.tooltip,
|
|
4185
|
+
_h = _a.type,
|
|
4186
|
+
type = _h === void 0 ? 'primary' : _h;
|
|
4187
|
+
var rootClasses = useStylesWithRootClass(rootClassName$c, className);
|
|
4188
|
+
var isButtonDisabled = disabled || isLoading;
|
|
4189
|
+
var titleClasses = useStylesWithRootClass(isLoading ? 'hidden' : '');
|
|
4190
|
+
var progressCircleSize = size === 'large' ? SPINNER_LARGE_SIZE : SPINNER_DEFAULT_SIZE;
|
|
4191
|
+
return /*#__PURE__*/React__default["default"].createElement(StyledProgressButton, {
|
|
4192
|
+
ariaLabel: ariaLabel,
|
|
4193
|
+
className: rootClasses,
|
|
4194
|
+
"data-testid": dataTestId,
|
|
4195
|
+
disableRipple: disableRipple,
|
|
4196
|
+
disabled: isButtonDisabled,
|
|
4197
|
+
fullWidth: fullWidth,
|
|
4198
|
+
isSubmit: isSubmit,
|
|
4199
|
+
onClick: onClick,
|
|
4200
|
+
size: size,
|
|
4201
|
+
tooltip: tooltip,
|
|
4202
|
+
type: type
|
|
4203
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
4204
|
+
className: titleClasses
|
|
4205
|
+
}, children), isLoading && /*#__PURE__*/React__default["default"].createElement(DotProgress, {
|
|
4206
|
+
className: "progress-circle",
|
|
4207
|
+
size: progressCircleSize
|
|
4208
|
+
}));
|
|
4209
|
+
};
|
|
4210
|
+
|
|
4211
|
+
var rootClassName$b = 'dot-radio';
|
|
4212
|
+
var StyledRadioButton = styled__default["default"](core.Radio)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
4213
|
+
_a.theme;
|
|
4214
|
+
return styled.css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["{\n &.", " {\n padding: 8px;\n }\n "], ["{\n &.", " {\n padding: 8px;\n }\n "])), rootClassName$b);
|
|
4215
|
+
});
|
|
4216
|
+
var templateObject_1$b, templateObject_2$b;
|
|
4217
|
+
|
|
4127
4218
|
function DotRadioButton(_a) {
|
|
4128
4219
|
var ariaLabel = _a.ariaLabel,
|
|
4129
4220
|
checked = _a.checked,
|
|
@@ -4154,7 +4245,7 @@
|
|
|
4154
4245
|
control: /*#__PURE__*/React__default["default"].createElement(StyledRadioButton, {
|
|
4155
4246
|
"aria-label": ariaLabel,
|
|
4156
4247
|
classes: {
|
|
4157
|
-
root: rootClassName$
|
|
4248
|
+
root: rootClassName$b
|
|
4158
4249
|
},
|
|
4159
4250
|
checked: checked,
|
|
4160
4251
|
color: "primary",
|
|
@@ -4254,12 +4345,12 @@
|
|
|
4254
4345
|
}, renderOptions), helperText && /*#__PURE__*/React__default["default"].createElement(core.FormHelperText, null, helperText)));
|
|
4255
4346
|
};
|
|
4256
4347
|
|
|
4257
|
-
var rootClassName$
|
|
4258
|
-
var StyledSwitch = styled__default["default"](core.Switch)(templateObject_2$
|
|
4348
|
+
var rootClassName$a = 'dot-switch';
|
|
4349
|
+
var StyledSwitch = styled__default["default"](core.Switch)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
4259
4350
|
var theme = _a.theme;
|
|
4260
|
-
return styled.css(templateObject_1$
|
|
4351
|
+
return styled.css(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["{\n &.dot-switch {\n span.Mui-disabled {\n color: ", ";\n }\n\n .MuiSwitch-switchBase\n :not(.Mui-checked) \n :not(.Mui-disabled) {\n color: ", ";\n }\n }\n "], ["{\n &.dot-switch {\n span.Mui-disabled {\n color: ", ";\n }\n\n .MuiSwitch-switchBase\n :not(.Mui-checked) \n :not(.Mui-disabled) {\n color: ", ";\n }\n }\n "])), theme.palette.grey[200], theme.palette.background["default"]);
|
|
4261
4352
|
});
|
|
4262
|
-
var templateObject_1$
|
|
4353
|
+
var templateObject_1$a, templateObject_2$a;
|
|
4263
4354
|
|
|
4264
4355
|
var DotSwitch = function DotSwitch(_a) {
|
|
4265
4356
|
var ariaLabel = _a.ariaLabel,
|
|
@@ -4278,7 +4369,7 @@
|
|
|
4278
4369
|
onChange = _a.onChange,
|
|
4279
4370
|
_e = _a.size,
|
|
4280
4371
|
size = _e === void 0 ? 'medium' : _e;
|
|
4281
|
-
var rootClasses = useStylesWithRootClass(rootClassName$
|
|
4372
|
+
var rootClasses = useStylesWithRootClass(rootClassName$a, className);
|
|
4282
4373
|
|
|
4283
4374
|
var handleChange = function handleChange(event) {
|
|
4284
4375
|
onChange && onChange(event);
|
|
@@ -4307,50 +4398,76 @@
|
|
|
4307
4398
|
});
|
|
4308
4399
|
};
|
|
4309
4400
|
|
|
4401
|
+
var getInitialStateFromControl = function getInitialStateFromControl(_a, liveValidation, formValues) {
|
|
4402
|
+
var hidden = _a.hidden,
|
|
4403
|
+
initialValue = _a.initialValue,
|
|
4404
|
+
controlType = _a.controlType,
|
|
4405
|
+
validation = _a.validation;
|
|
4406
|
+
_a.formSection; // Skip non-data controls (ignore buttons and other non-relevant elements)
|
|
4407
|
+
// or hidden elements
|
|
4408
|
+
|
|
4409
|
+
if (!DATA_CONTROLS.includes(controlType)) return;
|
|
4410
|
+
|
|
4411
|
+
var formStateItem = __assign({}, INITIAL_STATE_ITEM);
|
|
4412
|
+
|
|
4413
|
+
if (hidden) formStateItem.hidden = hidden;
|
|
4414
|
+
|
|
4415
|
+
if (initialValue) {
|
|
4416
|
+
formStateItem.value = initialValue;
|
|
4417
|
+
|
|
4418
|
+
if (liveValidation) {
|
|
4419
|
+
var isHidden = checkIfHiddenControl(hidden, formValues);
|
|
4420
|
+
formStateItem.isTouched = true; // Since it is hidden field we will mark valid field to true so that is doesn't
|
|
4421
|
+
// prevent form submission
|
|
4422
|
+
|
|
4423
|
+
if (isHidden) {
|
|
4424
|
+
formStateItem.isValid = true;
|
|
4425
|
+
} else {
|
|
4426
|
+
var fieldValidation = getFieldValidation(initialValue, validation, formValues);
|
|
4427
|
+
formStateItem.isValid = fieldValidation.isValid;
|
|
4428
|
+
formStateItem.errorMessage = fieldValidation.errorMessage;
|
|
4429
|
+
}
|
|
4430
|
+
}
|
|
4431
|
+
} // If no validation always set valid to true
|
|
4432
|
+
|
|
4433
|
+
|
|
4434
|
+
if (!validation || DATA_CONTROLS_WITHOUT_VALIDATION.includes(controlType)) {
|
|
4435
|
+
// Set always to valid for now
|
|
4436
|
+
formStateItem.isValid = true;
|
|
4437
|
+
}
|
|
4438
|
+
|
|
4439
|
+
return formStateItem;
|
|
4440
|
+
};
|
|
4310
4441
|
var getInitialFormState = function getInitialFormState(config, liveValidation) {
|
|
4311
4442
|
var formValues = getFormDataFromInitialValues(config);
|
|
4312
4443
|
var initialState = {
|
|
4313
4444
|
data: {},
|
|
4314
4445
|
isValid: false
|
|
4315
4446
|
};
|
|
4316
|
-
config.controls.forEach(function (
|
|
4317
|
-
var
|
|
4318
|
-
|
|
4319
|
-
|
|
4320
|
-
|
|
4321
|
-
|
|
4322
|
-
|
|
4323
|
-
|
|
4324
|
-
|
|
4325
|
-
|
|
4326
|
-
if (hidden) initialState.data[controlName].hidden = hidden;
|
|
4327
|
-
|
|
4328
|
-
if (initialValue) {
|
|
4329
|
-
initialState.data[controlName].value = initialValue;
|
|
4330
|
-
|
|
4331
|
-
if (liveValidation) {
|
|
4332
|
-
var isHidden = checkIfHiddenControl(hidden, formValues);
|
|
4333
|
-
initialState.data[controlName].isTouched = true; // Since it is hidden field we will mark valid field to true so that is doesn't
|
|
4334
|
-
// prevent form submission
|
|
4335
|
-
|
|
4336
|
-
if (isHidden) {
|
|
4337
|
-
initialState.data[controlName].isValid = true;
|
|
4338
|
-
} else {
|
|
4339
|
-
var fieldValidation = getFieldValidation(initialValue, validation, formValues);
|
|
4340
|
-
initialState.data[controlName].isValid = fieldValidation.isValid;
|
|
4341
|
-
initialState.data[controlName].errorMessage = fieldValidation.errorMessage;
|
|
4342
|
-
}
|
|
4343
|
-
}
|
|
4344
|
-
} // If no validation always set valid to true
|
|
4345
|
-
|
|
4346
|
-
|
|
4347
|
-
if (!validation || DATA_CONTROLS_WITHOUT_VALIDATION.includes(controlType)) {
|
|
4348
|
-
// Set always to valid for now
|
|
4349
|
-
initialState.data[controlName].isValid = true;
|
|
4447
|
+
config.controls.forEach(function (control) {
|
|
4448
|
+
var formSection = control.formSection; // Check if there are form section controls and grab initial state from those
|
|
4449
|
+
|
|
4450
|
+
if (formSection && formSection.sectionControls) {
|
|
4451
|
+
formSection.sectionControls.forEach(function (formSectionControl) {
|
|
4452
|
+
var formSectionControlName = formSectionControl.controlName;
|
|
4453
|
+
var sectionFormStateItem = getInitialStateFromControl(formSectionControl, liveValidation, formValues);
|
|
4454
|
+
if (!sectionFormStateItem) return;
|
|
4455
|
+
initialState.data[formSectionControlName] = sectionFormStateItem;
|
|
4456
|
+
});
|
|
4350
4457
|
}
|
|
4458
|
+
|
|
4459
|
+
var controlName = control.controlName;
|
|
4460
|
+
var formStateItem = getInitialStateFromControl(control, liveValidation, formValues);
|
|
4461
|
+
if (!formStateItem) return;
|
|
4462
|
+
initialState.data[controlName] = formStateItem;
|
|
4351
4463
|
});
|
|
4352
4464
|
return initialState;
|
|
4353
4465
|
};
|
|
4466
|
+
var getControlClickHandler = function getControlClickHandler(formValues, onControlClick) {
|
|
4467
|
+
return onControlClick ? function () {
|
|
4468
|
+
return onControlClick(formValues);
|
|
4469
|
+
} : undefined;
|
|
4470
|
+
};
|
|
4354
4471
|
var buildInputTextControl = function buildInputTextControl(_a) {
|
|
4355
4472
|
var controlName = _a.controlName,
|
|
4356
4473
|
controlProps = _a.controlProps,
|
|
@@ -4495,14 +4612,43 @@
|
|
|
4495
4612
|
var buildButtonControl = function buildButtonControl(_a) {
|
|
4496
4613
|
var controlProps = _a.controlProps,
|
|
4497
4614
|
disabled = _a.disabled,
|
|
4498
|
-
index = _a.index
|
|
4615
|
+
index = _a.index,
|
|
4616
|
+
handleClick = _a.handleClick;
|
|
4499
4617
|
var props = controlProps;
|
|
4618
|
+
var onClick = props.onClick;
|
|
4619
|
+
var handleButtonClick = onClick || handleClick ? function (e) {
|
|
4620
|
+
var _a;
|
|
4621
|
+
|
|
4622
|
+
(_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
|
4623
|
+
handleClick === null || handleClick === void 0 ? void 0 : handleClick();
|
|
4624
|
+
} : undefined;
|
|
4500
4625
|
return /*#__PURE__*/React__default["default"].createElement(DotButton, __assign({
|
|
4501
4626
|
key: index
|
|
4502
4627
|
}, props, {
|
|
4503
|
-
disabled: disabled
|
|
4628
|
+
disabled: disabled,
|
|
4629
|
+
onClick: handleButtonClick
|
|
4504
4630
|
}), props.children);
|
|
4505
4631
|
};
|
|
4632
|
+
var buildProgressButtonControl = function buildProgressButtonControl(_a) {
|
|
4633
|
+
var controlProps = _a.controlProps,
|
|
4634
|
+
disabled = _a.disabled,
|
|
4635
|
+
index = _a.index,
|
|
4636
|
+
handleClick = _a.handleClick;
|
|
4637
|
+
var props = controlProps;
|
|
4638
|
+
var onClick = props.onClick;
|
|
4639
|
+
var handleButtonClick = onClick || handleClick ? function (e) {
|
|
4640
|
+
var _a;
|
|
4641
|
+
|
|
4642
|
+
(_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
|
4643
|
+
handleClick === null || handleClick === void 0 ? void 0 : handleClick();
|
|
4644
|
+
} : undefined;
|
|
4645
|
+
return /*#__PURE__*/React__default["default"].createElement(DotProgressButton, __assign({
|
|
4646
|
+
key: index
|
|
4647
|
+
}, props, {
|
|
4648
|
+
disabled: disabled,
|
|
4649
|
+
onClick: handleButtonClick
|
|
4650
|
+
}));
|
|
4651
|
+
};
|
|
4506
4652
|
var buildResetControl = function buildResetControl(_a) {
|
|
4507
4653
|
var controlProps = _a.controlProps,
|
|
4508
4654
|
disabled = _a.disabled,
|
|
@@ -4536,19 +4682,38 @@
|
|
|
4536
4682
|
isSubmit: true
|
|
4537
4683
|
}), props.children);
|
|
4538
4684
|
};
|
|
4685
|
+
var buildProgressSubmitControl = function buildProgressSubmitControl(_a) {
|
|
4686
|
+
var controlProps = _a.controlProps,
|
|
4687
|
+
disabled = _a.disabled,
|
|
4688
|
+
formState = _a.formState,
|
|
4689
|
+
index = _a.index,
|
|
4690
|
+
liveValidation = _a.liveValidation;
|
|
4691
|
+
var props = controlProps;
|
|
4692
|
+
var isDisabled = disabled || liveValidation && !formState.isValid;
|
|
4693
|
+
return /*#__PURE__*/React__default["default"].createElement(DotProgressButton, __assign({
|
|
4694
|
+
key: index
|
|
4695
|
+
}, props, {
|
|
4696
|
+
disabled: isDisabled,
|
|
4697
|
+
isSubmit: true
|
|
4698
|
+
}));
|
|
4699
|
+
};
|
|
4539
4700
|
|
|
4540
4701
|
var DotDynamicForm = function DotDynamicForm(_a) {
|
|
4541
4702
|
var ariaLabel = _a.ariaLabel,
|
|
4542
4703
|
className = _a.className,
|
|
4543
4704
|
dataTestId = _a["data-testid"],
|
|
4544
4705
|
config = _a.config,
|
|
4545
|
-
|
|
4706
|
+
isFormDisabled = _a.disabled,
|
|
4546
4707
|
_b = _a.liveValidation,
|
|
4547
4708
|
liveValidation = _b === void 0 ? true : _b,
|
|
4548
4709
|
onChange = _a.onChange,
|
|
4549
4710
|
onSubmit = _a.onSubmit;
|
|
4550
|
-
var rootClasses = useStylesWithRootClass(rootClassName$d, className);
|
|
4551
|
-
|
|
4711
|
+
var rootClasses = useStylesWithRootClass(rootClassName$d, className); // Memoize this operation so that is doesn't get executed each time this
|
|
4712
|
+
// component re-renders
|
|
4713
|
+
|
|
4714
|
+
var initialFormState = React.useMemo(function () {
|
|
4715
|
+
return getInitialFormState(config, liveValidation);
|
|
4716
|
+
}, [config, liveValidation, getInitialFormState]);
|
|
4552
4717
|
|
|
4553
4718
|
var _c = React.useState(initialFormState),
|
|
4554
4719
|
formState = _c[0],
|
|
@@ -4694,22 +4859,34 @@
|
|
|
4694
4859
|
return setFormState(initialFormState);
|
|
4695
4860
|
};
|
|
4696
4861
|
|
|
4697
|
-
var buildFormControls = function buildFormControls() {
|
|
4698
|
-
|
|
4862
|
+
var buildFormControls = function buildFormControls(controls, startIndex) {
|
|
4863
|
+
if (startIndex === void 0) {
|
|
4864
|
+
startIndex = 0;
|
|
4865
|
+
}
|
|
4866
|
+
|
|
4867
|
+
if (!controls || !controls.length) return;
|
|
4868
|
+
return controls.map(function (_a, index) {
|
|
4699
4869
|
var controlName = _a.controlName,
|
|
4700
4870
|
controlType = _a.controlType,
|
|
4701
4871
|
_b = _a.controlProps,
|
|
4702
4872
|
controlProps = _b === void 0 ? {} : _b,
|
|
4703
4873
|
customElement = _a.customElement,
|
|
4874
|
+
disabled = _a.disabled,
|
|
4704
4875
|
hidden = _a.hidden;
|
|
4705
4876
|
_a.initialValue;
|
|
4706
|
-
|
|
4877
|
+
var formSection = _a.formSection,
|
|
4878
|
+
onControlClick = _a.onControlClick;
|
|
4879
|
+
var elementIndex = startIndex + index;
|
|
4880
|
+
var inputControlName = controlName || "control-" + elementIndex;
|
|
4707
4881
|
var formValues = getOutputFormData(formState);
|
|
4708
|
-
if (checkIfHiddenControl(hidden, formValues)) return '';
|
|
4882
|
+
if (checkIfHiddenControl(hidden, formValues)) return ''; // Control can be disabled when: 1) whole form is disabled, 2.) control is disabled via config prop
|
|
4883
|
+
// 3.) control is disabled via its own `disable` control prop
|
|
4884
|
+
|
|
4885
|
+
var isDisabled = isFormDisabled || checkIfDisabledControl(disabled, formValues, formState.isValid) || 'disabled' in controlProps && controlProps.disabled;
|
|
4709
4886
|
var control = {
|
|
4710
4887
|
controlProps: controlProps,
|
|
4711
|
-
disabled:
|
|
4712
|
-
index:
|
|
4888
|
+
disabled: isDisabled,
|
|
4889
|
+
index: elementIndex,
|
|
4713
4890
|
liveValidation: liveValidation
|
|
4714
4891
|
};
|
|
4715
4892
|
|
|
@@ -4770,7 +4947,18 @@
|
|
|
4770
4947
|
|
|
4771
4948
|
case 'dot-button':
|
|
4772
4949
|
{
|
|
4773
|
-
|
|
4950
|
+
var handleClick = getControlClickHandler(formValues, onControlClick);
|
|
4951
|
+
return buildButtonControl(__assign(__assign({}, control), {
|
|
4952
|
+
handleClick: handleClick
|
|
4953
|
+
}));
|
|
4954
|
+
}
|
|
4955
|
+
|
|
4956
|
+
case 'dot-progress-button':
|
|
4957
|
+
{
|
|
4958
|
+
var handleClick = getControlClickHandler(formValues, onControlClick);
|
|
4959
|
+
return buildProgressButtonControl(__assign(__assign({}, control), {
|
|
4960
|
+
handleClick: handleClick
|
|
4961
|
+
}));
|
|
4774
4962
|
}
|
|
4775
4963
|
|
|
4776
4964
|
case 'dot-reset':
|
|
@@ -4787,13 +4975,31 @@
|
|
|
4787
4975
|
}));
|
|
4788
4976
|
}
|
|
4789
4977
|
|
|
4978
|
+
case 'dot-progress-submit':
|
|
4979
|
+
{
|
|
4980
|
+
return buildProgressSubmitControl(__assign(__assign({}, control), {
|
|
4981
|
+
formState: formState
|
|
4982
|
+
}));
|
|
4983
|
+
}
|
|
4984
|
+
|
|
4790
4985
|
case 'custom-element':
|
|
4791
4986
|
{
|
|
4792
4987
|
return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
|
|
4793
|
-
key:
|
|
4988
|
+
key: elementIndex
|
|
4794
4989
|
}, customElement);
|
|
4795
4990
|
}
|
|
4796
4991
|
|
|
4992
|
+
case 'dot-form-section':
|
|
4993
|
+
{
|
|
4994
|
+
var FormSectionComponent = formSection.FormSectionComponent,
|
|
4995
|
+
sectionControls = formSection.sectionControls;
|
|
4996
|
+
var sectionStartIndex = elementIndex + 1;
|
|
4997
|
+
return /*#__PURE__*/React__default["default"].createElement(FormSectionComponent, {
|
|
4998
|
+
key: elementIndex,
|
|
4999
|
+
sectionControls: buildFormControls(sectionControls, sectionStartIndex)
|
|
5000
|
+
});
|
|
5001
|
+
}
|
|
5002
|
+
|
|
4797
5003
|
default:
|
|
4798
5004
|
{
|
|
4799
5005
|
return '';
|
|
@@ -4803,20 +5009,19 @@
|
|
|
4803
5009
|
};
|
|
4804
5010
|
|
|
4805
5011
|
return /*#__PURE__*/React__default["default"].createElement(StyledDynamicForm, {
|
|
4806
|
-
className: rootClasses,
|
|
4807
|
-
"data-testid": dataTestId
|
|
4808
|
-
}, /*#__PURE__*/React__default["default"].createElement(DotForm, {
|
|
4809
5012
|
ariaLabel: ariaLabel,
|
|
5013
|
+
className: rootClasses,
|
|
5014
|
+
"data-testid": dataTestId,
|
|
4810
5015
|
onSubmit: handleFormSubmit
|
|
4811
|
-
}, buildFormControls())
|
|
5016
|
+
}, buildFormControls(config.controls));
|
|
4812
5017
|
};
|
|
4813
5018
|
|
|
4814
|
-
var rootClassName$
|
|
4815
|
-
var StyledInlineEdit = styled__default["default"].div(templateObject_2$
|
|
5019
|
+
var rootClassName$9 = 'dot-inline-edit';
|
|
5020
|
+
var StyledInlineEdit = styled__default["default"].div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
4816
5021
|
var theme = _a.theme;
|
|
4817
|
-
return styled.css(templateObject_1$
|
|
5022
|
+
return styled.css(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n &.dot-inline-edit {\n color: ", ";\n\n &:not(.disabled):not(.editing) {\n &:hover,\n &:focus {\n .MuiInputAdornment-root {\n display: flex;\n }\n }\n }\n\n .MuiInputAdornment-root {\n display: none;\n }\n\n .editing-actions {\n display: flex;\n justify-content: flex-end;\n margin-top: ", "px;\n\n .dot-icon-btn {\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n margin-left: ", "px;\n padding: ", "px;\n\n &:hover {\n background: ", ";\n }\n }\n }\n\n .inline-edit {\n &:hover,\n &:focus,\n &:active {\n cursor: pointer;\n }\n }\n\n // icon already has spacing, strip the extra\n .MuiOutlinedInput-adornedEnd {\n padding-right: 0;\n margin-left: 0;\n\n .dot-icon {\n height: auto;\n width: auto;\n }\n }\n }\n "], ["\n &.dot-inline-edit {\n color: ", ";\n\n &:not(.disabled):not(.editing) {\n &:hover,\n &:focus {\n .MuiInputAdornment-root {\n display: flex;\n }\n }\n }\n\n .MuiInputAdornment-root {\n display: none;\n }\n\n .editing-actions {\n display: flex;\n justify-content: flex-end;\n margin-top: ", "px;\n\n .dot-icon-btn {\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n margin-left: ", "px;\n padding: ", "px;\n\n &:hover {\n background: ", ";\n }\n }\n }\n\n .inline-edit {\n &:hover,\n &:focus,\n &:active {\n cursor: pointer;\n }\n }\n\n // icon already has spacing, strip the extra\n .MuiOutlinedInput-adornedEnd {\n padding-right: 0;\n margin-left: 0;\n\n .dot-icon {\n height: auto;\n width: auto;\n }\n }\n }\n "])), theme.palette.grey[700], theme.spacing(0.5), theme.palette.grey[0], theme.palette.grey[300], theme.palette.grey[700], theme.spacing(1), theme.spacing(0.25), theme.palette.grey[50]);
|
|
4818
5023
|
});
|
|
4819
|
-
var templateObject_1$
|
|
5024
|
+
var templateObject_1$9, templateObject_2$9;
|
|
4820
5025
|
|
|
4821
5026
|
/**
|
|
4822
5027
|
* @experimental This component is still in development
|
|
@@ -4847,7 +5052,7 @@
|
|
|
4847
5052
|
size = _j === void 0 ? 'small' : _j,
|
|
4848
5053
|
_k = _a.value,
|
|
4849
5054
|
value = _k === void 0 ? '' : _k;
|
|
4850
|
-
var rootClasses = useStylesWithRootClass(rootClassName$
|
|
5055
|
+
var rootClasses = useStylesWithRootClass(rootClassName$9, className);
|
|
4851
5056
|
|
|
4852
5057
|
var _l = React.useState(false),
|
|
4853
5058
|
editing = _l[0],
|
|
@@ -4997,13 +5202,13 @@
|
|
|
4997
5202
|
})));
|
|
4998
5203
|
};
|
|
4999
5204
|
|
|
5000
|
-
var rootClassName$
|
|
5001
|
-
var StyledNavigationRail = styled__default["default"].div(templateObject_2$
|
|
5205
|
+
var rootClassName$8 = 'dot-navigation-rail';
|
|
5206
|
+
var StyledNavigationRail = styled__default["default"].div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
5002
5207
|
var theme = _a.theme,
|
|
5003
5208
|
railItemPosition = _a.railItemPosition;
|
|
5004
|
-
return styled.css(templateObject_1$
|
|
5209
|
+
return styled.css(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n &.", " {\n background-color: ", ";\n border-left: 1px solid ", ";\n display: flex;\n flex-direction: column;\n justify-content: ", ";\n padding: ", ";\n width: 72px;\n\n .rail-item-button {\n flex-basis: 72px;\n border-radius: 0;\n margin: 0;\n padding: 0;\n width: 100%;\n white-space: normal;\n\n &.selected {\n background-color: ", ";\n }\n\n &:focus-visible {\n background-color: ", ";\n }\n\n .MuiButton-label {\n display: flex;\n flex-direction: column;\n word-break: break-word;\n }\n }\n }\n "], ["\n &.", " {\n background-color: ", ";\n border-left: 1px solid ", ";\n display: flex;\n flex-direction: column;\n justify-content: ", ";\n padding: ", ";\n width: 72px;\n\n .rail-item-button {\n flex-basis: 72px;\n border-radius: 0;\n margin: 0;\n padding: 0;\n width: 100%;\n white-space: normal;\n\n &.selected {\n background-color: ", ";\n }\n\n &:focus-visible {\n background-color: ", ";\n }\n\n .MuiButton-label {\n display: flex;\n flex-direction: column;\n word-break: break-word;\n }\n }\n }\n "])), rootClassName$8, theme.palette.layer.n50, theme.palette.layer.n100, railItemPosition, theme.spacing(1, 0, 0), theme.palette.layer.n0, theme.palette.layer.n100);
|
|
5005
5210
|
});
|
|
5006
|
-
var templateObject_1$
|
|
5211
|
+
var templateObject_1$8, templateObject_2$8;
|
|
5007
5212
|
|
|
5008
5213
|
var MAX_ALLOWED_ITEMS = 7;
|
|
5009
5214
|
var DotNavigationRail = function DotNavigationRail(_a) {
|
|
@@ -5016,7 +5221,7 @@
|
|
|
5016
5221
|
railItems = _a.railItems,
|
|
5017
5222
|
_c = _a.selectedIndex,
|
|
5018
5223
|
selectedIndex = _c === void 0 ? 0 : _c;
|
|
5019
|
-
var rootClasses = useStylesWithRootClass(rootClassName$
|
|
5224
|
+
var rootClasses = useStylesWithRootClass(rootClassName$8, className);
|
|
5020
5225
|
|
|
5021
5226
|
var _d = React.useState(selectedIndex),
|
|
5022
5227
|
selectedItemIndex = _d[0],
|
|
@@ -5063,10 +5268,10 @@
|
|
|
5063
5268
|
}, railItems && renderRailItems());
|
|
5064
5269
|
};
|
|
5065
5270
|
|
|
5066
|
-
var rootClassName$
|
|
5067
|
-
var StyledPill = styled__default["default"](core.Chip)(templateObject_2$
|
|
5271
|
+
var rootClassName$7 = 'dot-pill';
|
|
5272
|
+
var StyledPill = styled__default["default"](core.Chip)(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
5068
5273
|
var theme = _a.theme;
|
|
5069
|
-
return styled.css(templateObject_1$
|
|
5274
|
+
return styled.css(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n &.", " {\n background-color: ", ";\n color: ", ";\n\n &.error {\n background-color: ", ";\n color: ", ";\n }\n\n &.success {\n background-color: ", ";\n color: ", ";\n }\n &.warning {\n background-color: ", ";\n color: ", ";\n }\n\n &.in-progress {\n background-color: ", ";\n color: ", ";\n }\n "], ["\n &.", " {\n background-color: ", ";\n color: ", ";\n\n &.error {\n background-color: ", ";\n color: ", ";\n }\n\n &.success {\n background-color: ", ";\n color: ", ";\n }\n &.warning {\n background-color: ", ";\n color: ", ";\n }\n\n &.in-progress {\n background-color: ", ";\n color: ", ";\n }\n "])), rootClassName$7, function (_a) {
|
|
5070
5275
|
var backgroundcolor = _a.backgroundcolor;
|
|
5071
5276
|
return backgroundcolor ? backgroundcolor : theme.palette.product === 'agility' ? theme.palette.layer.n100 : theme.palette.grey[200];
|
|
5072
5277
|
}, function (_a) {
|
|
@@ -5074,7 +5279,7 @@
|
|
|
5074
5279
|
return labelcolor ? labelcolor : theme.palette.layer.n700;
|
|
5075
5280
|
}, theme.palette.error[500], theme.palette.layer.n0, theme.palette.success[500], theme.palette.layer.n0, theme.palette.warning[500], theme.palette.layer.n700, theme.palette.primary.main, theme.palette.layer.n0);
|
|
5076
5281
|
});
|
|
5077
|
-
var templateObject_1$
|
|
5282
|
+
var templateObject_1$7, templateObject_2$7;
|
|
5078
5283
|
|
|
5079
5284
|
var DotPill = function DotPill(_a) {
|
|
5080
5285
|
var ariaLabel = _a.ariaLabel,
|
|
@@ -5087,7 +5292,7 @@
|
|
|
5087
5292
|
size = _b === void 0 ? 'medium' : _b,
|
|
5088
5293
|
_c = _a.status,
|
|
5089
5294
|
status = _c === void 0 ? 'default' : _c;
|
|
5090
|
-
var rootClasses = useStylesWithRootClass(rootClassName$
|
|
5295
|
+
var rootClasses = useStylesWithRootClass(rootClassName$7, className, status);
|
|
5091
5296
|
return /*#__PURE__*/React__default["default"].createElement(StyledPill, {
|
|
5092
5297
|
"aria-label": ariaLabel,
|
|
5093
5298
|
backgroundcolor: backgroundcolor,
|
|
@@ -5102,12 +5307,12 @@
|
|
|
5102
5307
|
});
|
|
5103
5308
|
};
|
|
5104
5309
|
|
|
5105
|
-
var rootClassName$
|
|
5106
|
-
var StyledSkeleton = styled__default["default"](lab.Skeleton)(templateObject_2$
|
|
5310
|
+
var rootClassName$6 = 'dot-skeleton';
|
|
5311
|
+
var StyledSkeleton = styled__default["default"](lab.Skeleton)(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
5107
5312
|
var theme = _a.theme;
|
|
5108
|
-
return styled.css(templateObject_1$
|
|
5313
|
+
return styled.css(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n &.", " {\n background-color: ", ";\n }\n "], ["\n &.", " {\n background-color: ", ";\n }\n "])), rootClassName$6, theme.palette.grey[100]);
|
|
5109
5314
|
});
|
|
5110
|
-
var templateObject_1$
|
|
5315
|
+
var templateObject_1$6, templateObject_2$6;
|
|
5111
5316
|
|
|
5112
5317
|
var DotSkeleton = function DotSkeleton(_a) {
|
|
5113
5318
|
var ariaLabel = _a.ariaLabel,
|
|
@@ -5117,7 +5322,7 @@
|
|
|
5117
5322
|
height = _a.height,
|
|
5118
5323
|
width = _a.width,
|
|
5119
5324
|
variant = _a.variant;
|
|
5120
|
-
var rootClasses = useStylesWithRootClass(rootClassName$
|
|
5325
|
+
var rootClasses = useStylesWithRootClass(rootClassName$6, className); // When we upgrade to Material UI v5 this must be removed!
|
|
5121
5326
|
|
|
5122
5327
|
var skeletonVariant = variant === 'circular' ? 'circle' : variant === 'rectangular' ? 'rect' : variant;
|
|
5123
5328
|
return /*#__PURE__*/React__default["default"].createElement(StyledSkeleton, {
|
|
@@ -5133,14 +5338,14 @@
|
|
|
5133
5338
|
}, children);
|
|
5134
5339
|
};
|
|
5135
5340
|
|
|
5136
|
-
var rootClassName$
|
|
5137
|
-
var StyledSnackbar = styled__default["default"](core.Snackbar)(templateObject_2$
|
|
5341
|
+
var rootClassName$5 = 'dot-snackbar';
|
|
5342
|
+
var StyledSnackbar = styled__default["default"](core.Snackbar)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
5138
5343
|
var theme = _a.theme;
|
|
5139
|
-
return styled.css(templateObject_1$
|
|
5344
|
+
return styled.css(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n &.", " {\n .MuiSvgIcon-root {\n color: ", ";\n }\n .MuiAlert-icon {\n padding: 11px 0px;\n }\n .MuiAlert-message {\n padding: 13px 0px;\n word-break: break-all;\n }\n &.MuiSnackbar-anchorOriginTopRight{\n top: 0px;\n z-index: ", ";\n }\n .MuiAlert-root {\n &.MuiAlert-standardInfo{\n background-color: ", ";\n }\n &.MuiAlert-standardWarning{\n color: ", ";\n .MuiSvgIcon-root{\n color: ", ";\n }\n }\n max-width: 500px;\n min-width: 344px;\n color: ", ";\n z-index: ", ";\n position: relative;\n margin-top: 108px;\n background-color: ", ";\n @media (min-width: 720px) {\n .MuiAlert-root {\n top: 112px;\n position: relative;\n }\n }\n }\n "], ["\n &.", " {\n .MuiSvgIcon-root {\n color: ", ";\n }\n .MuiAlert-icon {\n padding: 11px 0px;\n }\n .MuiAlert-message {\n padding: 13px 0px;\n word-break: break-all;\n }\n &.MuiSnackbar-anchorOriginTopRight{\n top: 0px;\n z-index: ", ";\n }\n .MuiAlert-root {\n &.MuiAlert-standardInfo{\n background-color: ", ";\n }\n &.MuiAlert-standardWarning{\n color: ", ";\n .MuiSvgIcon-root{\n color: ", ";\n }\n }\n max-width: 500px;\n min-width: 344px;\n color: ", ";\n z-index: ", ";\n position: relative;\n margin-top: 108px;\n background-color: ", ";\n @media (min-width: 720px) {\n .MuiAlert-root {\n top: 112px;\n position: relative;\n }\n }\n }\n "])), rootClassName$5, theme.palette.layer.n0, levelFourth, theme.palette.primary[500], theme.palette.grey[900], theme.palette.grey[900], theme.palette.layer.n0, levelFourth, function (props) {
|
|
5140
5345
|
return theme.palette[props.severity].main;
|
|
5141
5346
|
});
|
|
5142
5347
|
});
|
|
5143
|
-
var templateObject_1$
|
|
5348
|
+
var templateObject_1$5, templateObject_2$5;
|
|
5144
5349
|
|
|
5145
5350
|
function addAutoHideDuration(severity) {
|
|
5146
5351
|
return severity === 'error' ? null : 10000;
|
|
@@ -5170,7 +5375,7 @@
|
|
|
5170
5375
|
onClose: onClose,
|
|
5171
5376
|
action: action
|
|
5172
5377
|
});
|
|
5173
|
-
var rootClasses = useStylesWithRootClass(rootClassName$
|
|
5378
|
+
var rootClasses = useStylesWithRootClass(rootClassName$5, className);
|
|
5174
5379
|
return /*#__PURE__*/React__default["default"].createElement(StyledSnackbar, {
|
|
5175
5380
|
anchorOrigin: {
|
|
5176
5381
|
vertical: 'top',
|
|
@@ -5197,11 +5402,11 @@
|
|
|
5197
5402
|
}, children)));
|
|
5198
5403
|
};
|
|
5199
5404
|
|
|
5200
|
-
var rootClassName$
|
|
5201
|
-
var StyledSnackbarContainer = styled__default["default"].div(templateObject_2$
|
|
5202
|
-
return styled.css(templateObject_1$
|
|
5405
|
+
var rootClassName$4 = 'dot-snackbar-container';
|
|
5406
|
+
var StyledSnackbarContainer = styled__default["default"].div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function () {
|
|
5407
|
+
return styled.css(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n &.", " {\n position: absolute;\n top: 0;\n width: 250px;\n height: auto;\n right: 0;\n & > div {\n position: relative;\n }\n }\n "], ["\n &.", " {\n position: absolute;\n top: 0;\n width: 250px;\n height: auto;\n right: 0;\n & > div {\n position: relative;\n }\n }\n "])), rootClassName$4);
|
|
5203
5408
|
});
|
|
5204
|
-
var templateObject_1$
|
|
5409
|
+
var templateObject_1$4, templateObject_2$4;
|
|
5205
5410
|
|
|
5206
5411
|
var DotSnackbarContext = /*#__PURE__*/React.createContext({
|
|
5207
5412
|
alerts: [],
|
|
@@ -5224,10 +5429,10 @@
|
|
|
5224
5429
|
}
|
|
5225
5430
|
|
|
5226
5431
|
return /*#__PURE__*/React__default["default"].createElement(StyledSnackbarContainer, {
|
|
5227
|
-
className: rootClassName$
|
|
5432
|
+
className: rootClassName$4
|
|
5228
5433
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
5229
|
-
"data-testid": rootClassName$
|
|
5230
|
-
className: rootClassName$
|
|
5434
|
+
"data-testid": rootClassName$4,
|
|
5435
|
+
className: rootClassName$4
|
|
5231
5436
|
}, alerts.slice().reverse().map(function (alert) {
|
|
5232
5437
|
return /*#__PURE__*/React__default["default"].createElement(DotSnackbar, {
|
|
5233
5438
|
key: alert.id,
|
|
@@ -5283,13 +5488,13 @@
|
|
|
5283
5488
|
return React.useContext(DotSnackbarContext);
|
|
5284
5489
|
};
|
|
5285
5490
|
|
|
5286
|
-
var rootClassName$
|
|
5287
|
-
var StyledSplitButtonGroup = styled__default["default"](core.ButtonGroup)(templateObject_2$
|
|
5491
|
+
var rootClassName$3 = 'dot-split-button-group';
|
|
5492
|
+
var StyledSplitButtonGroup = styled__default["default"](core.ButtonGroup)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
5288
5493
|
var theme = _a.theme;
|
|
5289
|
-
return styled.css(templateObject_1$
|
|
5494
|
+
return styled.css(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n &.", " {\n box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%),\n 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);\n &.disabled {\n box-shadow: none;\n\n .dot-button {\n background: ", ";\n border: 1px solid ", ";\n }\n }\n\n &.outlined,\n &.text {\n box-shadow: none;\n .expand-button {\n border-left: none;\n }\n }\n\n &.outlined .dot-button {\n border-color: ", ";\n }\n\n &.destructive .expand-button {\n border-left-color: ", ";\n }\n\n .dot-button {\n box-shadow: none;\n margin: 0;\n padding: ", ";\n }\n\n .expand-button {\n border-left: 1px solid ", ";\n\n &.Mui-disabled {\n border-left: 0;\n }\n\n .MuiButton-label,\n .dot-icon {\n width: 14px;\n height: 14px;\n }\n }\n }\n "], ["\n &.", " {\n box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%),\n 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);\n &.disabled {\n box-shadow: none;\n\n .dot-button {\n background: ", ";\n border: 1px solid ", ";\n }\n }\n\n &.outlined,\n &.text {\n box-shadow: none;\n .expand-button {\n border-left: none;\n }\n }\n\n &.outlined .dot-button {\n border-color: ", ";\n }\n\n &.destructive .expand-button {\n border-left-color: ", ";\n }\n\n .dot-button {\n box-shadow: none;\n margin: 0;\n padding: ", ";\n }\n\n .expand-button {\n border-left: 1px solid ", ";\n\n &.Mui-disabled {\n border-left: 0;\n }\n\n .MuiButton-label,\n .dot-icon {\n width: 14px;\n height: 14px;\n }\n }\n }\n "])), rootClassName$3, theme.palette.grey['50'], theme.palette.grey['200'], theme.palette.grey['300'], theme.palette.error['800'], theme.spacing(0.75, 1.5), theme.palette.primary['800']);
|
|
5290
5495
|
});
|
|
5291
5496
|
var StyledMenu$1 = styled__default["default"](DotMenu)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n &.dot-menu {\n z-index: ", ";\n }\n"], ["\n &.dot-menu {\n z-index: ", ";\n }\n"])), levelTop);
|
|
5292
|
-
var templateObject_1$
|
|
5497
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$1;
|
|
5293
5498
|
|
|
5294
5499
|
var DotSplitButton = function DotSplitButton(_a) {
|
|
5295
5500
|
var _b = _a.autoFocus,
|
|
@@ -5319,7 +5524,7 @@
|
|
|
5319
5524
|
tooltip = _a.tooltip,
|
|
5320
5525
|
_j = _a.type,
|
|
5321
5526
|
type = _j === void 0 ? 'primary' : _j;
|
|
5322
|
-
var rootClasses = useStylesWithRootClass(rootClassName$
|
|
5527
|
+
var rootClasses = useStylesWithRootClass(rootClassName$3, className, type, disabled ? 'disabled' : '');
|
|
5323
5528
|
|
|
5324
5529
|
var _k = React.useState(false),
|
|
5325
5530
|
open = _k[0],
|
|
@@ -5393,17 +5598,17 @@
|
|
|
5393
5598
|
}));
|
|
5394
5599
|
};
|
|
5395
5600
|
|
|
5396
|
-
var rootClassName$
|
|
5397
|
-
var StyledPaper = styled__default["default"](core.Paper)(templateObject_2$
|
|
5601
|
+
var rootClassName$2 = 'dot-table';
|
|
5602
|
+
var StyledPaper = styled__default["default"](core.Paper)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
5398
5603
|
var theme = _a.theme;
|
|
5399
|
-
return styled.css(templateObject_1$
|
|
5604
|
+
return styled.css(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n &.", " {\n background: ", ";\n border: 1px solid\n ", ";\n\n // while loading, change opacity, disable pointer events\n // and hide pagination.\n &.loading {\n opacity: 0.4;\n pointer-events: none;\n .dot-table-pagination {\n display: none;\n }\n }\n }\n "], ["\n &.", " {\n background: ", ";\n border: 1px solid\n ", ";\n\n // while loading, change opacity, disable pointer events\n // and hide pagination.\n &.loading {\n opacity: 0.4;\n pointer-events: none;\n .dot-table-pagination {\n display: none;\n }\n }\n }\n "])), rootClassName$2, theme.palette.product === 'agility' && theme.palette.layer.n50, theme.palette.product === 'agility' ? theme.palette.layer.n100 : theme.palette.grey[200]);
|
|
5400
5605
|
});
|
|
5401
5606
|
var StyledTableContainer = styled__default["default"](core.TableContainer)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
5402
5607
|
var theme = _a.theme;
|
|
5403
5608
|
return styled.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n &.dot-table-container {\n border-radius: 4px;\n align-items: stretch;\n flex-direction: column;\n justify-content: center;\n\n tr:hover {\n background-color: ", ";\n }\n\n tr:last-child td {\n border-bottom: none;\n }\n\n table {\n width: 100%;\n thead,\n th {\n font-weight: 700;\n &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {\n padding-left: 26px;\n }\n }\n thead > tr > th:last-child {\n text-align: right;\n }\n tbody > tr > td.noWrap,\n tbody > tr > td.actionItems {\n max-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n tbody > tr > td.actionItems {\n text-overflow: clip;\n text-align: right;\n }\n .empty-row td {\n text-align: center;\n }\n\n .Mui-selected:not(:hover) {\n background-color: ", ";\n }\n\n .MuiTableRow-head {\n height: 56px;\n }\n\n .MuiTableCell-root {\n border-bottom: 1px solid\n ", ";\n\n &.MuiTableCell-stickyHeader {\n background: ", ";\n }\n }\n\n .MuiTableRow-root {\n height: 52px;\n }\n\n .MuiTableCell-body {\n padding-top: 0;\n padding-bottom: 0;\n }\n .action-cell-wrapper {\n width: 100%;\n }\n }\n }\n "], ["\n &.dot-table-container {\n border-radius: 4px;\n align-items: stretch;\n flex-direction: column;\n justify-content: center;\n\n tr:hover {\n background-color: ", ";\n }\n\n tr:last-child td {\n border-bottom: none;\n }\n\n table {\n width: 100%;\n thead,\n th {\n font-weight: 700;\n &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {\n padding-left: 26px;\n }\n }\n thead > tr > th:last-child {\n text-align: right;\n }\n tbody > tr > td.noWrap,\n tbody > tr > td.actionItems {\n max-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n tbody > tr > td.actionItems {\n text-overflow: clip;\n text-align: right;\n }\n .empty-row td {\n text-align: center;\n }\n\n .Mui-selected:not(:hover) {\n background-color: ", ";\n }\n\n .MuiTableRow-head {\n height: 56px;\n }\n\n .MuiTableCell-root {\n border-bottom: 1px solid\n ", ";\n\n &.MuiTableCell-stickyHeader {\n background: ", ";\n }\n }\n\n .MuiTableRow-root {\n height: 52px;\n }\n\n .MuiTableCell-body {\n padding-top: 0;\n padding-bottom: 0;\n }\n .action-cell-wrapper {\n width: 100%;\n }\n }\n }\n "])), theme.palette.product === 'agility' ? theme.palette.agilityInterface.fixedCol : theme.palette.grey[50], theme.palette.product === 'agility' ? theme.palette.agilityInterface.fixedCol : theme.palette.grey[200], theme.palette.product === 'agility' ? theme.palette.layer.n100 : theme.palette.grey[200], theme.palette.product === 'agility' && theme.palette.layer.n50);
|
|
5404
5609
|
});
|
|
5405
5610
|
var StyledMenu = styled__default["default"](DotMenu)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n .dot-ul > li {\n padding: 0;\n > button {\n width: 100%;\n margin: 0;\n }\n }\n"], ["\n .dot-ul > li {\n padding: 0;\n > button {\n width: 100%;\n margin: 0;\n }\n }\n"])));
|
|
5406
|
-
var templateObject_1$
|
|
5611
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3, templateObject_4, templateObject_5;
|
|
5407
5612
|
|
|
5408
5613
|
/**
|
|
5409
5614
|
* A wrapper component around the TableCell component from @material-ui.
|
|
@@ -5710,12 +5915,12 @@
|
|
|
5710
5915
|
}, value);
|
|
5711
5916
|
};
|
|
5712
5917
|
|
|
5713
|
-
var rootClassName$
|
|
5714
|
-
var StyledTablePagination = styled__default["default"](core.TablePagination)(templateObject_2$
|
|
5918
|
+
var rootClassName$1 = 'dot-table-pagination';
|
|
5919
|
+
var StyledTablePagination = styled__default["default"](core.TablePagination)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
5715
5920
|
var theme = _a.theme;
|
|
5716
|
-
return styled.css(templateObject_1$
|
|
5921
|
+
return styled.css(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n &.", " {\n border-top: 1px solid\n ", ";\n }\n "], ["\n &.", " {\n border-top: 1px solid\n ", ";\n }\n "])), rootClassName$1, theme.palette.product === 'agility' ? theme.palette.layer.n100 : theme.palette.grey[200]);
|
|
5717
5922
|
});
|
|
5718
|
-
var templateObject_1$
|
|
5923
|
+
var templateObject_1$1, templateObject_2$1;
|
|
5719
5924
|
|
|
5720
5925
|
var rowsPerPageOptions = [10, 25, 50, 100, 150, 200];
|
|
5721
5926
|
/** This component wraps the TablePagination component from @material-ui. */
|
|
@@ -5731,7 +5936,7 @@
|
|
|
5731
5936
|
page = _b === void 0 ? 0 : _b,
|
|
5732
5937
|
_c = _a.rowsPerPage,
|
|
5733
5938
|
rowsPerPage = _c === void 0 ? 10 : _c;
|
|
5734
|
-
var rootClasses = useStylesWithRootClass(rootClassName$
|
|
5939
|
+
var rootClasses = useStylesWithRootClass(rootClassName$1, className);
|
|
5735
5940
|
|
|
5736
5941
|
var handlePageChange = function handlePageChange(event, newPage) {
|
|
5737
5942
|
onChangePage && onChangePage(newPage);
|
|
@@ -5847,7 +6052,7 @@
|
|
|
5847
6052
|
pageData = _l[0],
|
|
5848
6053
|
setPageData = _l[1];
|
|
5849
6054
|
|
|
5850
|
-
var rootClasses = useStylesWithRootClass(rootClassName$
|
|
6055
|
+
var rootClasses = useStylesWithRootClass(rootClassName$2, className, loading ? 'loading' : '');
|
|
5851
6056
|
|
|
5852
6057
|
var updateData = function updateData(newOrder, newOrderBy, newPage, newRowsPerPage) {
|
|
5853
6058
|
var newData = stableSort(data, getComparator(newOrder, newOrderBy));
|
|
@@ -5952,12 +6157,12 @@
|
|
|
5952
6157
|
}));
|
|
5953
6158
|
};
|
|
5954
6159
|
|
|
5955
|
-
var rootClassName
|
|
5956
|
-
var StyledTabs = styled__default["default"](core.Tabs)(templateObject_2
|
|
6160
|
+
var rootClassName = 'dot-tabs';
|
|
6161
|
+
var StyledTabs = styled__default["default"](core.Tabs)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
5957
6162
|
var theme = _a.theme;
|
|
5958
|
-
return styled.css(templateObject_1
|
|
6163
|
+
return styled.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &.", " {\n &.MuiTabs-root {\n width: 100%;\n }\n .dot-tab-label-container {\n display: flex;\n .dot-tab-label {\n padding-top: ", "px;\n }\n }\n .MuiTab-root {\n color: ", ";\n max-width: 360px;\n min-width: 0;\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n &.Mui-selected {\n color: ", ";\n }\n &.Mui-disabled {\n color: ", ";\n }\n &.MuiTab-textColorPrimary:hover {\n background-color: ", ";\n }\n &.MuiTab-textColorSecondary:hover {\n background-color: ", ";\n }\n }\n .MuiIcon-root {\n display: inline;\n padding-right: ", "px;\n }\n .MuiTabs-indicator {\n background-color: ", ";\n }\n }\n "], ["\n &.", " {\n &.MuiTabs-root {\n width: 100%;\n }\n .dot-tab-label-container {\n display: flex;\n .dot-tab-label {\n padding-top: ", "px;\n }\n }\n .MuiTab-root {\n color: ", ";\n max-width: 360px;\n min-width: 0;\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n &.Mui-selected {\n color: ", ";\n }\n &.Mui-disabled {\n color: ", ";\n }\n &.MuiTab-textColorPrimary:hover {\n background-color: ", ";\n }\n &.MuiTab-textColorSecondary:hover {\n background-color: ", ";\n }\n }\n .MuiIcon-root {\n display: inline;\n padding-right: ", "px;\n }\n .MuiTabs-indicator {\n background-color: ", ";\n }\n }\n "])), rootClassName, theme.spacing(0.5), theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.agilityInterface.activeCardBg, theme.palette.product === 'agility' && agilityGreen, theme.palette.product === 'agility' && agilityGreen, theme.palette.product === 'agility' && theme.palette.agilityInterface.disabledText, theme.palette.product !== 'agility' && styles.alpha(theme.palette.primary.main, 0.12), theme.palette.product !== 'agility' && styles.alpha(theme.palette.secondary.main, 0.12), theme.spacing(0.5), theme.palette.product === 'agility' && agilityGreen);
|
|
5959
6164
|
});
|
|
5960
|
-
var templateObject_1
|
|
6165
|
+
var templateObject_1, templateObject_2;
|
|
5961
6166
|
|
|
5962
6167
|
var DotTabs = function DotTabs(_a) {
|
|
5963
6168
|
var _b = _a.centered,
|
|
@@ -5979,7 +6184,7 @@
|
|
|
5979
6184
|
value = _g[0],
|
|
5980
6185
|
setValue = _g[1];
|
|
5981
6186
|
|
|
5982
|
-
var rootClasses = useStylesWithRootClass(rootClassName
|
|
6187
|
+
var rootClasses = useStylesWithRootClass(rootClassName, className); // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
5983
6188
|
|
|
5984
6189
|
var handleChange = function handleChange(_event, val) {
|
|
5985
6190
|
setValue(val);
|
|
@@ -6023,60 +6228,6 @@
|
|
|
6023
6228
|
}, tabArray);
|
|
6024
6229
|
};
|
|
6025
6230
|
|
|
6026
|
-
var rootClassName = 'dot-progress-button';
|
|
6027
|
-
var StyledProgressButton = styled__default["default"](DotButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
6028
|
-
var theme = _a.theme;
|
|
6029
|
-
return styled.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &.", " {\n .hidden {\n // hide children but preserve its space so that\n // button's dimensions don't change\n visibility: hidden;\n }\n .progress-circle {\n color: ", ";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n margin: auto;\n }\n }\n "], ["\n &.", " {\n .hidden {\n // hide children but preserve its space so that\n // button's dimensions don't change\n visibility: hidden;\n }\n .progress-circle {\n color: ", ";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n margin: auto;\n }\n }\n "])), rootClassName, theme.palette.layer.n300);
|
|
6030
|
-
});
|
|
6031
|
-
var templateObject_1, templateObject_2;
|
|
6032
|
-
|
|
6033
|
-
var SPINNER_DEFAULT_SIZE = 20;
|
|
6034
|
-
var SPINNER_LARGE_SIZE = 24;
|
|
6035
|
-
var DotProgressButton = function DotProgressButton(_a) {
|
|
6036
|
-
var ariaLabel = _a.ariaLabel,
|
|
6037
|
-
children = _a.children,
|
|
6038
|
-
className = _a.className,
|
|
6039
|
-
dataTestId = _a["data-testid"],
|
|
6040
|
-
_b = _a.disabled,
|
|
6041
|
-
disabled = _b === void 0 ? false : _b,
|
|
6042
|
-
_c = _a.disableRipple,
|
|
6043
|
-
disableRipple = _c === void 0 ? false : _c,
|
|
6044
|
-
_d = _a.fullWidth,
|
|
6045
|
-
fullWidth = _d === void 0 ? false : _d,
|
|
6046
|
-
_e = _a.isLoading,
|
|
6047
|
-
isLoading = _e === void 0 ? false : _e,
|
|
6048
|
-
_f = _a.isSubmit,
|
|
6049
|
-
isSubmit = _f === void 0 ? false : _f,
|
|
6050
|
-
onClick = _a.onClick,
|
|
6051
|
-
_g = _a.size,
|
|
6052
|
-
size = _g === void 0 ? 'medium' : _g,
|
|
6053
|
-
tooltip = _a.tooltip,
|
|
6054
|
-
_h = _a.type,
|
|
6055
|
-
type = _h === void 0 ? 'primary' : _h;
|
|
6056
|
-
var rootClasses = useStylesWithRootClass(rootClassName, className);
|
|
6057
|
-
var isButtonDisabled = disabled || isLoading;
|
|
6058
|
-
var titleClasses = useStylesWithRootClass(isLoading ? 'hidden' : '');
|
|
6059
|
-
var progressCircleSize = size === 'large' ? SPINNER_LARGE_SIZE : SPINNER_DEFAULT_SIZE;
|
|
6060
|
-
return /*#__PURE__*/React__default["default"].createElement(StyledProgressButton, {
|
|
6061
|
-
ariaLabel: ariaLabel,
|
|
6062
|
-
className: rootClasses,
|
|
6063
|
-
"data-testid": dataTestId,
|
|
6064
|
-
disableRipple: disableRipple,
|
|
6065
|
-
disabled: isButtonDisabled,
|
|
6066
|
-
fullWidth: fullWidth,
|
|
6067
|
-
isSubmit: isSubmit,
|
|
6068
|
-
onClick: onClick,
|
|
6069
|
-
size: size,
|
|
6070
|
-
tooltip: tooltip,
|
|
6071
|
-
type: type
|
|
6072
|
-
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
6073
|
-
className: titleClasses
|
|
6074
|
-
}, children), isLoading && /*#__PURE__*/React__default["default"].createElement(DotProgress, {
|
|
6075
|
-
className: "progress-circle",
|
|
6076
|
-
size: progressCircleSize
|
|
6077
|
-
}));
|
|
6078
|
-
};
|
|
6079
|
-
|
|
6080
6231
|
exports.Cell = Cell;
|
|
6081
6232
|
exports.CssCell = CssCell;
|
|
6082
6233
|
exports.CssGrid = CssGrid;
|