so we can target it specifically\r\n var htmlInput = this.datePickerRef.current.querySelector('.DateInput_input');\r\n\r\n if (this.props.size === 'small' && htmlInput && htmlInput.classList && htmlInput.parentElement.parentElement.parentElement) {\r\n htmlInput.parentElement.parentElement.parentElement.classList.add('div_small');\r\n }\r\n\r\n // DatePicker with appendToBody doesn't respect calendar's top positioning because of where it's rendered\r\n // Need to be more aggressive setting it\r\n var datePickers = document.querySelectorAll('body > div > div.SingleDatePicker_picker');\r\n\r\n if (datePickers.length > 0) {\r\n for (var i = 0; i < datePickers.length; i++) {\r\n var datePicker = datePickers[i];\r\n if (datePicker && datePicker.classList && !datePicker.classList.contains('SingleDatePicker_picker_small')) {\r\n datePicker.classList.add('SingleDatePicker_picker_small');\r\n }\r\n }\r\n }\r\n }\r\n\r\n // add the correct aria-label to the datepicker input field\r\n\r\n }, {\r\n key: 'HACK_updateAriaLabel',\r\n value: function HACK_updateAriaLabel() {\r\n\r\n // add a \"hasPopup\" aria attribute to the button that pops up the date picker\r\n if (this.props['aria-label']) {\r\n\r\n var htmlInput = this.datePickerRef.current.querySelector('.DateInput_input');\r\n\r\n if (htmlInput.getAttribute('aria-label') !== this.props['aria-label']) {\r\n\r\n // note -- we need to hack this in, because the placeholder text always overrides\r\n // whatever you pass in for ariaLabel, effectively making it impossible to have\r\n // different placeholder and aria-label text\r\n htmlInput.setAttribute('aria-label', this.props['aria-label']);\r\n }\r\n }\r\n }\r\n\r\n // builds a month selection dropdown\r\n\r\n }, {\r\n key: 'buildSelector',\r\n value: function buildSelector(menuItems, callback, value) {\r\n\r\n var classes = this.props.classes;\r\n\r\n return _react2.default.createElement(\r\n _Select2.default,\r\n {\r\n IconComponent: _ChevronDown2.default,\r\n onChange: callback,\r\n MenuProps: {\r\n id: this.selectorId,\r\n MenuListProps: {\r\n classes: {\r\n root: classes.monthYearSelectMenu\r\n }\r\n }\r\n },\r\n classes: {\r\n icon: classes.monthYearSelectIcon\r\n },\r\n value: value,\r\n input: _react2.default.createElement(_Input2.default, { classes: {\r\n root: classes.monthYearSelectInput,\r\n input: classes.monthYearSelectInputInput }, disableUnderline: true })\r\n },\r\n menuItems\r\n );\r\n }\r\n\r\n // Method will close the calender if user clicks outside of the calendar container.\r\n\r\n }, {\r\n key: 'render',\r\n value: function render() {\r\n var _this3 = this,\r\n _cn,\r\n _cn2;\r\n\r\n var _props2 = this.props,\r\n classes = _props2.classes,\r\n error = _props2.error,\r\n variant = _props2.variant,\r\n className = _props2.className,\r\n helperText = _props2.helperText,\r\n fullWidth = _props2.fullWidth,\r\n edsContext = _props2.edsContext,\r\n FormControlProps = _props2.FormControlProps,\r\n FormHelperTextProps = _props2.FormHelperTextProps,\r\n InputLabelProps = _props2.InputLabelProps,\r\n labelProp = _props2.label,\r\n startYear = _props2.startYear,\r\n endYear = _props2.endYear,\r\n autoPosition = _props2.autoPosition,\r\n screenReaderInputMessageProp = _props2.screenReaderInputMessage,\r\n placeholderProp = _props2.placeholder,\r\n onFocusChange = _props2.onFocusChange,\r\n monthSelectionVariant = _props2.monthSelectionVariant,\r\n isOutsideRange = _props2.isOutsideRange,\r\n ariaLabel = _props2['aria-label'],\r\n size = _props2.size,\r\n props = _objectWithoutProperties(_props2, ['classes', 'error', 'variant', 'className', 'helperText', 'fullWidth', 'edsContext', 'FormControlProps', 'FormHelperTextProps', 'InputLabelProps', 'label', 'startYear', 'endYear', 'autoPosition', 'screenReaderInputMessage', 'placeholder', 'onFocusChange', 'monthSelectionVariant', 'isOutsideRange', 'aria-label', 'size']);\r\n\r\n var shrink = this.state.shrink;\r\n\r\n\r\n var label = labelProp;\r\n var hasLabel = !(0, _isNil2.default)(labelProp);\r\n var helperTextId = helperText && props.id ? props.id + '-helper-text' : undefined;\r\n var shouldShrink = props.focused || props.date !== null || shrink;\r\n\r\n // translate placeholder text if we're displaying the default\r\n var placeholder = placeholderProp === DEFAULT_PLACEHOLDER ? edsContext.formatMessage('component.DatePicker.dateLabel') : placeholderProp;\r\n\r\n // Add asterisk to label or placeholder if required\r\n if (props.required) {\r\n if (hasLabel) {\r\n label = labelProp + ' *';\r\n } else {\r\n placeholder = placeholder + ' *';\r\n }\r\n }\r\n\r\n // set up the default screen reader input message\r\n var screenReaderInputMessage = screenReaderInputMessageProp || edsContext.formatMessage('component.DatePicker.a11y.inputDescription', {\r\n dateFormat: this.props.displayFormat\r\n });\r\n\r\n var showMonthSelectors = this.props.monthSelectionVariant === MONTH_YEAR_SELECTION;\r\n\r\n // Month/Year Calendar Hack\r\n //\r\n // The month/year variant of the calendar has an issue where the transitions from one month\r\n // to another gets 'stuck' when using the month selector; you wind up with the calendar\r\n // half-shifted out of the viewport. This only happens when you put a MUI select in the month\r\n // header; something about it throws off the fragile timing of the transition in the bowels\r\n // of react-dates.\r\n //\r\n // The most consistent/least intrusive way we've found to solve this is by making the month/\r\n // year calendar *vertically*-oriented. This appears to satisfy the transition that is\r\n // causing us so many problems, without any visual impact to the component (since we only\r\n // show one calendar at a time).\r\n //\r\n // We had to add a few CSS tweaks to make this work (see the monthYearPickerFix class, above).\r\n // They are only applied for the month/year version of the calendar.\r\n\r\n var DatePickerPropOverrides = {\r\n inputIconPosition: ICON_AFTER_POSITION,\r\n orientation: monthSelectionVariant === MONTH_YEAR_SELECTION ? VERTICAL_ORIENTATION : HORIZONTAL_ORIENTATION,\r\n customInputIcon: _react2.default.createElement(\r\n _react2.default.Fragment,\r\n null,\r\n _react2.default.createElement(\r\n 'span',\r\n { className: classes.srOnly },\r\n edsContext.formatMessage('component.DatePicker.inputCalendarIconButton')\r\n ),\r\n _react2.default.createElement(_Calendar2.default, null)\r\n ),\r\n numberOfMonths: 1,\r\n displayFormat: DEFAULT_DISPLAY_FORMAT,\r\n weekDayFormat: DEFAULT_WEEK_DAY_FORMAT,\r\n anchorDirection: this.variants === props.isRTL ? ANCHOR_RIGHT : ANCHOR_LEFT,\r\n screenReaderInputMessage: screenReaderInputMessage,\r\n placeholder: placeholder,\r\n navPrev: showMonthSelectors ? _react2.default.createElement('span', null) : props.isRTL ? _react2.default.createElement(\r\n DatePickerNavigationButton,\r\n {\r\n className: classes.srOnly,\r\n phrase: props.phrases.jumpToNextMonth\r\n },\r\n _react2.default.createElement(_ChevronRight2.default, null)\r\n ) : _react2.default.createElement(\r\n DatePickerNavigationButton,\r\n {\r\n className: classes.srOnly,\r\n phrase: props.phrases.jumpToPrevMonth\r\n },\r\n _react2.default.createElement(_ChevronLeft2.default, null)\r\n ),\r\n navNext: showMonthSelectors ? _react2.default.createElement('span', null) : props.isRTL ? _react2.default.createElement(\r\n DatePickerNavigationButton,\r\n {\r\n className: classes.srOnly,\r\n phrase: props.phrases.jumpToPrevMonth\r\n },\r\n _react2.default.createElement(_ChevronLeft2.default, null)\r\n ) : _react2.default.createElement(\r\n DatePickerNavigationButton,\r\n {\r\n className: classes.srOnly,\r\n phrase: props.phrases.jumpToNextMonth\r\n },\r\n _react2.default.createElement(_ChevronRight2.default, null)\r\n ),\r\n\r\n onFocusChange: function onFocusChange(focused) {\r\n\r\n // this is to get past react-dates' stubborn insistence on closing whenever you click\r\n // outside the calendar; selecting a dropdown item is considered an outside click, so\r\n // without this code the calendar would close (in non-standalone mode) whenever you\r\n // select a new date/year\r\n if (focused.focused || !showMonthSelectors || variant === STANDALONE) {\r\n _this3.props.onFocusChange(focused);\r\n } else {\r\n\r\n // if the month/year selection menu is visible, abort the close\r\n if (document.getElementById(_this3.selectorId)) {\r\n _this3.props.onFocusChange({ focused: true });\r\n } else {\r\n _this3.props.onFocusChange(focused);\r\n }\r\n }\r\n },\r\n\r\n onClose: function onClose() {\r\n\r\n // if the appendToBody prop is specified, users might run afoul of a react-date bug\r\n // where, if you invoke a date picker calendar while another one is already open,\r\n // react-date's scroll-disabling code gets confused, and turns off scrolling forever\r\n // (or until the page refreshes, whichever comes first)\r\n\r\n // work around this by explicitly setting overflow-y back to its previous value,\r\n // whenever a calendar closes\r\n\r\n if (_this3.props.appendToBody) {\r\n\r\n setTimeout(function () {\r\n\r\n // both html & body tags might have their overflows disabled (it appears to be\r\n // browser-dependent); so check both, and reset them if necessary\r\n var html = document.querySelector('html');\r\n var body = document.querySelector('body');\r\n\r\n if (html.style.overflowY === 'hidden' && _this3.htmlOverflowY !== 'hidden') {\r\n html.style.overflowY = _this3.htmlOverflowY;\r\n }\r\n\r\n if (body.style.overflowY === 'hidden' && _this3.bodyOverflowY !== 'hidden') {\r\n body.style.overflowY = _this3.bodyOverflowY;\r\n }\r\n }, 1);\r\n }\r\n\r\n // if the caller provided their own onClose, call it\r\n if (_this3.props.onClose) {\r\n _this3.props.onClose();\r\n }\r\n },\r\n\r\n // if we're showing month selectors, don't allow selections of years outside of the\r\n // given year range\r\n isOutsideRange: this.props.isOutsideRange ? this.props.isOutsideRange : showMonthSelectors ? function (day) {\r\n return day.year() < startYear || day.year() > endYear;\r\n } : function () {\r\n return false;\r\n },\r\n\r\n renderMonthElement: showMonthSelectors ? function (_ref2) {\r\n var month = _ref2.month,\r\n onMonthSelect = _ref2.onMonthSelect,\r\n onYearSelect = _ref2.onYearSelect;\r\n return _react2.default.createElement(\r\n 'div',\r\n { className: classes.monthYearSelector },\r\n _react2.default.createElement(\r\n 'div',\r\n null,\r\n _this3.buildSelector(_moment2.default.months().map(function (monthLabel, value) {\r\n return _react2.default.createElement(\r\n _MenuItem2.default,\r\n {\r\n classes: {\r\n root: classes.monthYearSelectMenuItem,\r\n selected: classes.monthYearSelectMenuItemSelected\r\n },\r\n key: value,\r\n value: value,\r\n disableRipple: true,\r\n disableTouchRipple: true\r\n },\r\n monthLabel\r\n );\r\n }), function (e) {\r\n onMonthSelect(month, e.target.value);\r\n }, month.month())\r\n ),\r\n _react2.default.createElement(\r\n 'div',\r\n null,\r\n _this3.buildSelector((0, _range2.default)(startYear, endYear + 1, 1).map(function (year) {\r\n return _react2.default.createElement(\r\n _MenuItem2.default,\r\n {\r\n classes: {\r\n root: classes.monthYearSelectMenuItem,\r\n selected: classes.monthYearSelectMenuItemSelected\r\n },\r\n key: year,\r\n value: year,\r\n disableRipple: true,\r\n disableTouchRipple: true\r\n },\r\n (0, _moment2.default)(year, 'YYYY').format('YYYY')\r\n );\r\n }), function (e) {\r\n onYearSelect(month, e.target.value);\r\n }, month.year())\r\n )\r\n );\r\n } : null,\r\n enableOutsideDays: true,\r\n daySize: DEFAULT_DAY_SIZE,\r\n hideKeyboardShortcutsPanel: true,\r\n transitionDuration: 0\r\n };\r\n\r\n var autoPositionOverrides = {};\r\n\r\n if (autoPosition && this.datePickerRef.current && this.props.focused) {\r\n\r\n var rect = this.datePickerRef.current.getBoundingClientRect();\r\n\r\n // determine if the datepicker will fit in the available vertical space, and if not\r\n // if it makes more sense to open it *above* the field\r\n var verticalFit = rect.bottom + AUTOPOSITION_CALENDAR_HEIGHT <= document.documentElement.clientHeight;\r\n var bottomDelta = document.documentElement.clientHeight - rect.bottom;\r\n var topDelta = rect.top;\r\n var openDirection = !verticalFit && bottomDelta <= topDelta ? OPEN_UP : OPEN_DOWN;\r\n\r\n // determine if the datepicker will fit in the available horizontal space, and if not\r\n // if it makes more sense to anchor it to the *right* of the field\r\n var horizontalFit = rect.left + AUTOPOSITION_CALENDAR_WIDTH <= document.documentElement.clientWidth;\r\n var leftDelta = document.documentElement.clientWidth - rect.left;\r\n var rightDelta = rect.right;\r\n var anchorDirection = !horizontalFit && leftDelta <= rightDelta ? ANCHOR_RIGHT : ANCHOR_LEFT;\r\n\r\n // add positioning overrides\r\n autoPositionOverrides = {\r\n openDirection: openDirection,\r\n anchorDirection: anchorDirection\r\n };\r\n }\r\n\r\n var datePicker = variant === STANDALONE ?\r\n // Standalone\r\n _react2.default.createElement(\r\n 'div',\r\n {\r\n className: (0, _classnames2.default)(classes.root, classes.standalone, (_cn = {}, _defineProperty(_cn, classes.monthYearPickerFix, showMonthSelectors), _defineProperty(_cn, classes.rootRTL, props.isRTL), _defineProperty(_cn, classes.standaloneRTL, props.isRTL), _cn), className)\r\n },\r\n _react2.default.createElement(_reactDates.DayPickerSingleDateController, Object.assign({}, (0, _omit2.default)(DatePickerPropOverrides, INPUT_SPECIFIC_PROPS), (0, _omit2.default)(props, INPUT_SPECIFIC_PROPS)))\r\n ) :\r\n // With input\r\n _react2.default.createElement(\r\n _FormControl2.default,\r\n Object.assign({\r\n className: (0, _classnames2.default)(classes.root, (_cn2 = {}, _defineProperty(_cn2, classes.focused, props.focused), _defineProperty(_cn2, classes.monthYearPickerFix, showMonthSelectors), _defineProperty(_cn2, classes.showPlaceholder, props.focused), _defineProperty(_cn2, classes.rootRTL, props.isRTL), _defineProperty(_cn2, classes.fullWidth, fullWidth), _defineProperty(_cn2, (0, _classnames2.default)(classes.noLabel, classes.noLabelMedium), !hasLabel && size !== 'small'), _defineProperty(_cn2, (0, _classnames2.default)(classes.noLabel, classes.noLabelSmall), !hasLabel && size === 'small'), _defineProperty(_cn2, classes.error, error), _defineProperty(_cn2, classes.focusedError, error && props.focused), _defineProperty(_cn2, classes.smallDatePicker, size === 'small'), _cn2), className),\r\n fullWidth: fullWidth,\r\n error: error\r\n }, FormControlProps),\r\n hasLabel && _react2.default.createElement(\r\n _InputLabel2.default,\r\n Object.assign({\r\n htmlFor: props.id,\r\n classes: {\r\n formControl: classes.inputLabelFormControl,\r\n shrink: classes.inputLabelShrink\r\n },\r\n className: (0, _classnames2.default)(_defineProperty({}, classes.inputLabelSmall, size === 'small')),\r\n shrink: shouldShrink,\r\n error: error\r\n }, InputLabelProps),\r\n label\r\n ),\r\n _react2.default.createElement(\r\n _ClickAwayListener2.default,\r\n { onClickAway: this.handleClose },\r\n _react2.default.createElement(_reactDates.SingleDatePicker, Object.assign({\r\n id: this.singleDatePickerId\r\n }, DatePickerPropOverrides, props, autoPositionOverrides))\r\n ),\r\n helperText && _react2.default.createElement(\r\n _FormHelperText2.default,\r\n Object.assign({ id: helperTextId }, FormHelperTextProps),\r\n helperText\r\n )\r\n );\r\n\r\n // if we're autopositioning, wrap the datepicker in a span so that\r\n // it can be referenced by the autopositioning algorithm\r\n datePicker = _react2.default.createElement(\r\n 'span',\r\n { ref: this.datePickerRef },\r\n datePicker\r\n );\r\n\r\n return datePicker;\r\n }\r\n }]);\r\n\r\n return DatePicker;\r\n}(_react2.default.Component);\r\n\r\nDatePicker.defaultProps = {\r\n placeholder: DEFAULT_PLACEHOLDER,\r\n anchorDirection: ANCHOR_LEFT,\r\n disableScroll: false,\r\n displayFormat: DEFAULT_DISPLAY_FORMAT,\r\n enableOutsideDays: true,\r\n firstDayOfWeek: 0,\r\n inputIconPosition: ICON_AFTER_POSITION,\r\n isDayBlocked: function isDayBlocked() {\r\n return false;\r\n },\r\n isDayHighlighted: function isDayHighlighted() {\r\n return false;\r\n },\r\n isOutsideRange: null,\r\n isRTL: false,\r\n keepOpenOnDateSelect: false,\r\n openDirection: OPEN_DOWN,\r\n variant: WITH_TEXT_FIELD,\r\n weekDayFormat: DEFAULT_WEEK_DAY_FORMAT,\r\n phrases: _defaultPhrases.SingleDatePickerPhrases,\r\n monthSelectionVariant: INCREMENTAL_SELECTION,\r\n startYear: (0, _moment2.default)().year() - 3,\r\n endYear: (0, _moment2.default)().year() + 3,\r\n autoPosition: false,\r\n size: 'medium'\r\n};\r\n\r\nDatePicker.propTypes = {\r\n /**\r\n * @ignore\r\n * Added to allow for global JSS styling (and theme usage).\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * @ignore\r\n */\r\n edsContext: _propTypes2.default.object,\r\n\r\n /****\r\n * FormControl, Input\r\n ****/\r\n /**\r\n * Custom class name to be applied on the `div` when `variant=\"standalone\"` or the `FormControl`\r\n * when `variant=\"with-text-field\"` (default).\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * Mark the `FormControl`, `FormHelperText` and `Input` in an error state.\r\n */\r\n error: _propTypes2.default.bool,\r\n /**\r\n * The helper text content.\r\n */\r\n helperText: _propTypes2.default.node,\r\n /**\r\n * Input label text. This is rendered as the child within the `InputLabel` component.\r\n */\r\n label: _propTypes2.default.string,\r\n /**\r\n * Properties applied to the [`FormControl`](#/components/FormControl) element.\r\n */\r\n FormControlProps: _propTypes2.default.object,\r\n /**\r\n * Properties applied to the [`FormHelperText`](#/components/FormControl) element.\r\n */\r\n FormHelperTextProps: _propTypes2.default.object,\r\n /**\r\n * Render the input field full width of the parent container.\r\n */\r\n fullWidth: _propTypes2.default.bool,\r\n /**\r\n * Properties applied to the [`InputLabel`](#/components/FormControl) element.\r\n */\r\n InputLabelProps: _propTypes2.default.object,\r\n /**\r\n * Render the `DatePicker` with input field or as a standalone calendar UI.\r\n *\r\n * Options are `WITH_TEXT_FIELD` ('with-text-field') or `STANDALONE` ('standalone') and must be imported from `@hedtech/react-design-system/core/DatePicker`.\r\n */\r\n variant: _propTypes2.default.oneOf([WITH_TEXT_FIELD, STANDALONE]),\r\n\r\n /****\r\n * Required props for a function interactive SingleDatePicker\r\n ****/\r\n /**\r\n * The selected date to display in the `DatePicker` input field.\r\n *\r\n * This prop expects a `moment` object.\r\n */\r\n date: _reactMomentProptypes2.default.momentObj,\r\n /**\r\n * Function that handles setting the date.\r\n * This function receives a `date` parameter.\r\n *\r\n * i.e. `date => this.setState({ date })`\r\n */\r\n onDateChange: _propTypes2.default.func.isRequired,\r\n /**\r\n * Handles the focused state of the component.\r\n */\r\n focused: _propTypes2.default.bool,\r\n /**\r\n * Function to set whether the `DatePicker` has a focused state or not.\r\n *\r\n * i.e. `({ focused }) => this.setState({ focused })`\r\n */\r\n onFocusChange: _propTypes2.default.func.isRequired,\r\n\r\n /**\r\n * How months are selected; incrementally, or by month/year:\r\n * * `INCREMENTAL_SELECTION`: Shows next/previous navigation arrows on the date picker\r\n * * `MONTH_YEAR_SELECTION`: Shows month/year selection dropdowns on the date picker\r\n *\r\n * Note: If month/year selection is enabled, the calendar will not allow selection of dates\r\n * before the start year, or after the end year.\r\n */\r\n monthSelectionVariant: _propTypes2.default.oneOf([INCREMENTAL_SELECTION, MONTH_YEAR_SELECTION]),\r\n\r\n /**\r\n * The first year in the year selection dropdown. Only applies when\r\n * `monthSelectionVariant` === `MONTH_YEAR_SELECTION`.\r\n *\r\n * Defaults to three years before current year.\r\n */\r\n startYear: _propTypes2.default.number,\r\n\r\n /**\r\n * The last year in the year selection dropdown. Only applies when\r\n * `monthSelectionVariant` === `MONTH_YEAR_SELECTION`.\r\n *\r\n * Defaults to three years after current year.\r\n */\r\n endYear: _propTypes2.default.number,\r\n\r\n /****\r\n * Input related props\r\n ****/\r\n /**\r\n * A unique identifier of the `DatePicker` to assist with ARIA attribute.\r\n */\r\n id: _propTypes2.default.string,\r\n /**\r\n * Placeholder text in the input field.\r\n */\r\n placeholder: _propTypes2.default.string,\r\n /**\r\n * @ignore\r\n */\r\n 'aria-label': _propTypes2.default.string,\r\n /**\r\n * ARIA label for the HTML input field.\r\n *\r\n * **DEPRECATED** Use `aria-label` instead.\r\n */\r\n ariaLabel: _propTypes2.default.string,\r\n /**\r\n * Set the input field to disabled.\r\n */\r\n disabled: _propTypes2.default.bool,\r\n /**\r\n * Set the input field to required.\r\n */\r\n required: _propTypes2.default.bool,\r\n /**\r\n * Set the input to `readOnly`. This prevents the users from being able to type into the input field. The date can only be selected from the `DatePicker` UI.\r\n */\r\n readOnly: _propTypes2.default.bool,\r\n /**\r\n * Inform screen reader users of the date format, minimum days, blocked out dates, etc.\r\n */\r\n screenReaderInputMessage: _propTypes2.default.string,\r\n\r\n // NOTE: Hidden until needed\r\n // /**\r\n // * If a date is selected, the Calendar icon will be swapped out with a Clear icon.\r\n // */\r\n // showClearDate: PropTypes.bool,\r\n // NOTE: Hidden until needed\r\n // /**\r\n // * Render a custom close icon. `showClearDate` has to be `true`.\r\n // */\r\n // customCloseIcon: PropTypes.node,\r\n // NOTE: Hidden until needed\r\n // /**\r\n // * Show the default input icon.\r\n // */\r\n // showDefaultInputIcon: PropTypes.bool,\r\n\r\n /**\r\n * Render the icon before the input, or after.\r\n *\r\n * Options are `ICON_BEFORE_POSITION` ('before') or `ICON_AFTER_POSITION` ('after') and must be imported from `@hedtech/react-design-system/core/DatePicker`.\r\n */\r\n inputIconPosition: _propTypes2.default.oneOf([ICON_BEFORE_POSITION, ICON_AFTER_POSITION]),\r\n\r\n // NOTE: Hidden until needed\r\n // /**\r\n // * Render a custom input icon. `showDefaultInputIcon` has to be `true`.\r\n // */\r\n // customInputIcon: PropTypes.node,\r\n // NOTE: Hidden until needed\r\n // /**\r\n // * Render the `DatePicker` with no border.\r\n // */\r\n // noBorder: PropTypes.bool,\r\n\r\n /**\r\n * Render the `DatePicker` with `display` set to `'block'`.\r\n */\r\n block: _propTypes2.default.bool,\r\n\r\n // NOTE: Hidden until needed\r\n // /**\r\n // * Render `DatePicker` with size small.\r\n // */\r\n // small: PropTypes.bool,\r\n // NOTE: Hidden until needed\r\n // /**\r\n // * Render `DatePicker` with size regular.\r\n // */\r\n // regular: PropTypes.bool,\r\n // NOTE: Hidden until needed\r\n // /**\r\n // * Set the vertical spacing between the input field and the calendar UI.\r\n // */\r\n // verticalSpacing: PropTypes.number,\r\n // NOTE: Hidden until needed\r\n // /**\r\n // * Keep focus on the `input` after selecting a date.\r\n // */\r\n // keepFocusOnInput: PropTypes.bool,\r\n\r\n /****\r\n * Calendar presentation and interaction related props\r\n ****/\r\n /**\r\n * Customize the month text rendered in the `DatePicker` UI.\r\n *\r\n * i.e. month => momentJalaali(month).format('jMMMM jYYYY') or 'MM YY'\r\n */\r\n renderMonthText: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]), // (month) => PropTypes.string,\r\n\r\n // NOTE: Hidden until needed\r\n // /**\r\n // * Render custom month calendar.\r\n // *\r\n // * See the airbnb 'single month, custom caption' DayPickerSingleDateController example.\r\n // *\r\n // * i.e. `({ month, onMonthSelect, onYearSelect }) =>
`\r\n // */\r\n // renderMonthElement: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\r\n // NOTE: Hidden until needed\r\n // /**\r\n // * Define the orientation of the `DatePicker` calendar UI.\r\n // */\r\n // orientation: PropTypes.oneOf([HORIZONTAL_ORIENTATION, VERTICAL_ORIENTATION]),\r\n\r\n /**\r\n * Set the direction of the calendar UI to be anchored to the left or the right of the input.\r\n *\r\n * Options are `ANCHOR_LEFT` ('left') or `ANCHOR_RIGHT` ('right') and must be imported from `@hedtech/react-design-system/core/DatePicker`.\r\n */\r\n anchorDirection: _propTypes2.default.oneOf([ANCHOR_LEFT, ANCHOR_RIGHT]),\r\n /**\r\n * Open the `DatePicker` from the top or bottom of the input. This is useful to use when the `DatePicker` selection is near the bottom of the screen.\r\n *\r\n * Options are `OPEN_DOWN` ('down') or `OPEN_UP` ('up') and must be imported from `@hedtech/react-design-system/core/DatePicker`.\r\n */\r\n openDirection: _propTypes2.default.oneOf([OPEN_DOWN, OPEN_UP]),\r\n\r\n // NOTE: Hidden until needed\r\n // horizontalMargin: PropTypes.number,\r\n // withPortal: PropTypes.bool,\r\n // withFullScreenPortal: PropTypes.bool,\r\n\r\n /**\r\n * Render the `DatePicker` as the last child in the HTML `body` element.\r\n *\r\n * This is particularly useful when rendering a `DatePicker` in a `Dialog`.\r\n */\r\n appendToBody: _propTypes2.default.bool,\r\n /**\r\n * Disable the scrolling behavior of the parent container when the `DatePicker` is open.\r\n */\r\n disableScroll: _propTypes2.default.bool,\r\n /**\r\n * Function to set whether the initial month shown.\r\n *\r\n * i.e. This function will force the `DatePicker` to open 10 months from today's month: `() => moment().add(10, 'months')`\r\n */\r\n initialVisibleMonth: _propTypes2.default.func,\r\n /**\r\n * Set the first day of the week.\r\n *\r\n * Options are `0`, `1`, `2`, `3`, `4`, `5`, or `6`.\r\n */\r\n firstDayOfWeek: _propTypes2.default.oneOf([0, 1, 2, 3, 4, 5, 6]),\r\n /**\r\n * Positions the DatePicker so that it doesn't go off the screen.\r\n *\r\n * If this is specified, the `openDirection` and `anchorDirection` props are ignored.\r\n */\r\n autoPosition: _propTypes2.default.bool,\r\n // NOTE: Hidden until needed\r\n // /**\r\n // * Set the number of months visible when the DatePicker is open.\r\n // */\r\n // numberOfMonths: PropTypes.number,\r\n\r\n /**\r\n * Keep the `DatePicker` open after selecting a date.\r\n */\r\n keepOpenOnDateSelect: _propTypes2.default.bool,\r\n\r\n // NOTE: Hidden until needed\r\n // /**\r\n // * Open the `DatePicker` back up when the date is cleared.\r\n // */\r\n // reopenPickerOnClearDate: PropTypes.bool,\r\n // NOTE: Hidden until needed\r\n // /**\r\n // * Render custom calendar information.\r\n // */\r\n // renderCalendarInfo: PropTypes.func,\r\n // NOTE: Hidden until needed\r\n // /**\r\n // * Define where to render the additional calendar info. Use with `renderCalendarInfo`.\r\n // */\r\n // calendarInfoPosition: PropTypes.oneOf([\r\n // INFO_POSITION_TOP,\r\n // INFO_POSITION_BOTTOM,\r\n // INFO_POSITION_BEFORE,\r\n // INFO_POSITION_AFTER,\r\n // ]),\r\n // NOTE: Hidden until needed\r\n // /**\r\n // * Hide the keyboard shortcuts panel.\r\n // */\r\n // hideKeyboardShortcutsPanel: PropTypes.bool,\r\n // NOTE: Hidden until needed\r\n // /**\r\n // * Customize the size of the days. This number should be a non-negative integer.\r\n // */\r\n // daySize: PropTypes.number,\r\n\r\n /**\r\n * Change the reading direction of the `DatePicker`.\r\n */\r\n isRTL: _propTypes2.default.bool,\r\n\r\n // NOTE: Hidden until needed\r\n // /**\r\n // * Change the duration of the month transition, measured in `milliseconds`.\r\n // */\r\n // verticalHeight: PropTypes.number,\r\n // /**\r\n // * Change the duration of the month transition, measured in `milliseconds`.\r\n // */\r\n // transitionDuration: PropTypes.number,\r\n // /**\r\n // * Change the horizontal month padding.\r\n // */\r\n // horizontalMonthPadding: PropTypes.number,\r\n\r\n /****\r\n * Navigation related props\r\n ****/\r\n // NOTE: Hidden until needed\r\n // /**\r\n // * Render a custom element in place of the `previous` chevron button.\r\n // */\r\n // navPrev: PropTypes.node,\r\n // /**\r\n // * Render a custom element in place of the `next` chevron button.\r\n // */\r\n // navNext: PropTypes.node,\r\n\r\n /**\r\n * Event handler called when the `previous` chevron button is clicked.\r\n */\r\n onPrevMonthClick: _propTypes2.default.func,\r\n /**\r\n * Event handler called when the `next` chevron button is clicked.\r\n */\r\n onNextMonthClick: _propTypes2.default.func,\r\n /**\r\n * Event handler called when the `DatePicker` is closed.\r\n */\r\n onClose: _propTypes2.default.func,\r\n\r\n /****\r\n * Day presentation and interaction props\r\n ****/\r\n // NOTE: Hidden until needed\r\n // /**\r\n // * Customize the contents of the Calendar day elements.\r\n // *\r\n // * See https://github.com/airbnb/react-dates/blob/master/stories/DateRangePicker_day.js#L136 and\r\n // * https://github.com/airbnb/react-dates/blob/master/src/components/CustomizableCalendarDay.jsx.\r\n // */\r\n // renderCalendarDay: PropTypes.func,\r\n\r\n // NOTE: We do not want consumers to customize this prop\r\n // it should be removed in an upcoming release.\r\n /**\r\n * Toggles if days outside of the shown month are visible.\r\n *\r\n * i.e. When March 2019 is shown, the overlapping dates in February and April will show.\r\n */\r\n enableOutsideDays: _propTypes2.default.bool,\r\n /**\r\n * A function that blocks specific days.\r\n * This function receives a `day` (a `moment` object) parameter.\r\n *\r\n * i.e. This function disables all Fridays: `day => moment.weekdays(day.weekday()) === 'Friday'`\r\n */\r\n isDayBlocked: _propTypes2.default.func,\r\n /**\r\n * A function that blocks a range of dates.\r\n * This function receives a `day` (a `moment` object) parameter.\r\n *\r\n * Note: `isInclusivelyAfterDay` is a utility function provided by `react-dates/utils`.\r\n *\r\n * i.e. This function allows for the next two weeks to be available: `day => !isInclusivelyAfterDay(day, moment()) || isInclusivelyAfterDay(day, moment().add(2, 'weeks'))`\r\n */\r\n isOutsideRange: _propTypes2.default.func,\r\n /**\r\n * A function that highlights a specific dates.\r\n * This function receives a `day` (a `moment` object) parameter.\r\n *\r\n * Note: `isSameDay` is a utility function provided by `react-dates/utils`.\r\n *\r\n * i.e. This function highlights dates that match a `moment` date stored in an `Array`: `day1 => datesList.some(day2 => isSameDay(day1, day2))`\r\n */\r\n isDayHighlighted: _propTypes2.default.func,\r\n\r\n /****\r\n * Internationalization props\r\n ****/\r\n\r\n /**\r\n * Date format of the date displayed in the input.\r\n *\r\n * See https://momentjs.com/docs/#/displaying/format/ for more information.\r\n *\r\n * i.e. `() => moment.localeData().longDateFormat('L')` or `'MM DD, YYYY'`\r\n */\r\n displayFormat: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),\r\n /**\r\n * Date format of the month displayed.\r\n *\r\n * See https://momentjs.com/docs/#/displaying/format/ for more information.\r\n *\r\n * i.e. `'MMM'`\r\n */\r\n monthFormat: _propTypes2.default.string,\r\n /**\r\n * Date format of weekday headers.\r\n *\r\n * See https://momentjs.com/docs/#/displaying/format/ for more information.\r\n *\r\n * i.e. `'dd'`\r\n */\r\n weekDayFormat: _propTypes2.default.string,\r\n /**\r\n * Override default component phrases.\r\n *\r\n * See https://github.com/airbnb/react-dates/blob/master/src/defaultPhrases.js for more information.\r\n */\r\n phrases: _propTypes2.default.shape((0, _getPhrasePropTypes2.default)(_defaultPhrases.SingleDatePickerPhrases)),\r\n /**\r\n * ARIA label given to the focus-able days.\r\n */\r\n dayAriaLabelFormat: _propTypes2.default.string,\r\n /**\r\n * The size of the `DatePicker`. Small size is recommended to be used within the `TableEditableCell` component.\r\n */\r\n size: _propTypes2.default.oneOf(['small', 'medium'])\r\n};\r\n\r\nexports.default = (0, _EDSContext.withEDSContext)((0, _styles2.default)(styles)(DatePicker));","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _Tabs = require('./Tabs');\r\n\r\nObject.defineProperty(exports, 'default', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_Tabs).default;\r\n }\r\n});\r\n\r\nvar _Tab = require('./Tab');\r\n\r\nObject.defineProperty(exports, 'Tab', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_Tab).default;\r\n }\r\n});\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _core = require('@material-ui/core');\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _TabScrollButton = require('./internal/TabScrollButton');\r\n\r\nvar _TabScrollButton2 = _interopRequireDefault(_TabScrollButton);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\r\n\r\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\r\n\r\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nvar styles = function styles(theme) {\r\n return _defineProperty({\r\n root: {\r\n backgroundColor: 'transparent'\r\n },\r\n cardLevelFlexContainer: {\r\n boxShadow: 'inset 0 -1px 0 0 ' + theme.palette.grey[300]\r\n },\r\n indicator: {\r\n height: '0.125rem',\r\n backgroundColor: theme.palette.ctaColor.base\r\n }\r\n }, theme.breakpoints.down('sm'), {\r\n scrollButtonsDesktop: {\r\n display: 'inherit !important' // Forcing to display on mobile\r\n }\r\n });\r\n};\r\n\r\n/**\r\n * Use `Tabs` to group similar content into different sections on the same page.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.2\r\n * @examples\r\n * TabsWithContent\r\n * ScrollableButtonTab\r\n * CardLevelTabs\r\n * CardLevelTabsScrollableButtons\r\n */\r\n\r\nvar Tabs = function (_Component) {\r\n _inherits(Tabs, _Component);\r\n\r\n function Tabs(props) {\r\n _classCallCheck(this, Tabs);\r\n\r\n // create a ref to store the Tabs DOM element\r\n var _this = _possibleConstructorReturn(this, (Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call(this, props));\r\n\r\n _this.state = {\r\n hideScrollButtons: false\r\n };\r\n _this.tabsContainer = _react2.default.createRef();\r\n _this.updateScrollButtonsOnLoad = false;\r\n return _this;\r\n }\r\n\r\n _createClass(Tabs, [{\r\n key: 'componentDidMount',\r\n value: function componentDidMount() {\r\n var _this2 = this;\r\n\r\n // Options for the observer (which mutations to observe)\r\n var config = { attributes: true, childList: true, subtree: true };\r\n\r\n // Callback function to execute when mutations are observed\r\n var callback = function callback(mutationsList, observer) {\r\n if (mutationsList && mutationsList.length > 0) {\r\n var _iteratorNormalCompletion = true;\r\n var _didIteratorError = false;\r\n var _iteratorError = undefined;\r\n\r\n try {\r\n for (var _iterator = mutationsList[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {\r\n var mutation = _step.value;\r\n\r\n if (mutation.attributeName === 'disabled' && mutation.target.nodeName === 'BUTTON') {\r\n _this2.showOrHideScrollButtons();\r\n }\r\n }\r\n } catch (err) {\r\n _didIteratorError = true;\r\n _iteratorError = err;\r\n } finally {\r\n try {\r\n if (!_iteratorNormalCompletion && _iterator.return) {\r\n _iterator.return();\r\n }\r\n } finally {\r\n if (_didIteratorError) {\r\n throw _iteratorError;\r\n }\r\n }\r\n }\r\n }\r\n };\r\n\r\n // Create an observer instance linked to the callback function\r\n this.observer = new MutationObserver(callback);\r\n\r\n // Start observing the target node for configured mutations\r\n this.observer.observe(this.tabsContainer.current, config);\r\n\r\n // Call this here so that it triggers `componentDidUpdate()`\r\n this.showOrHideScrollButtons();\r\n }\r\n }, {\r\n key: 'componentDidUpdate',\r\n value: function componentDidUpdate(prevProps, prevState) {\r\n // This need to be called only once when the component is loaded.\r\n // With `componentDidMount()` it did not work and maybe DOM state\r\n // was not updated which is strange. After the first update MutationObserver\r\n // will take care of updating the state of scroll buttons.\r\n if (!this.updateScrollButtonsOnLoad) {\r\n this.showOrHideScrollButtons();\r\n this.updateScrollButtonsOnLoad = true;\r\n }\r\n }\r\n }, {\r\n key: 'showOrHideScrollButtons',\r\n value: function showOrHideScrollButtons() {\r\n var buttons = this.tabsContainer.current.querySelectorAll('.tab-scroll-button:disabled');\r\n this.setState(function (state) {\r\n return { hideScrollButtons: buttons.length === 2 };\r\n });\r\n }\r\n }, {\r\n key: 'componentWillUnmount',\r\n value: function componentWillUnmount() {\r\n this.observer.disconnect();\r\n }\r\n }, {\r\n key: 'render',\r\n value: function render() {\r\n var _this3 = this;\r\n\r\n var _props = this.props,\r\n classes = _props.classes,\r\n TabIndicatorProps = _props.TabIndicatorProps,\r\n childrenProp = _props.children,\r\n scrollButtons = _props.scrollButtons,\r\n scrollButtonsOnMobile = _props.scrollButtonsOnMobile,\r\n variant = _props.variant,\r\n widthVariant = _props.widthVariant,\r\n rest = _objectWithoutProperties(_props, ['classes', 'TabIndicatorProps', 'children', 'scrollButtons', 'scrollButtonsOnMobile', 'variant', 'widthVariant']);\r\n\r\n var _TabIndicatorProps = void 0,\r\n children = childrenProp;\r\n\r\n if (variant === 'card') {\r\n _TabIndicatorProps = Object.assign({\r\n style: { display: 'none' }\r\n }, TabIndicatorProps);\r\n\r\n children = _react2.default.Children.map(this.props.children, function (child) {\r\n return _react2.default.cloneElement(child, {\r\n variant: _this3.props.variant\r\n });\r\n });\r\n } else {\r\n _TabIndicatorProps = Object.assign({}, TabIndicatorProps);\r\n }\r\n\r\n var scrollButtonsProp = scrollButtons;\r\n if (scrollButtons) {\r\n scrollButtonsProp = 'auto';\r\n } else {\r\n scrollButtonsProp = 'off';\r\n }\r\n\r\n return _react2.default.createElement(\r\n 'div',\r\n { ref: this.tabsContainer },\r\n _react2.default.createElement(\r\n _core.Tabs,\r\n Object.assign({\r\n classes: {\r\n root: classes.root,\r\n scroller: variant === 'card' && classes.cardLevelFlexContainer,\r\n indicator: classes.indicator,\r\n scrollButtonsDesktop: scrollButtonsOnMobile ? classes.scrollButtonsDesktop : ''\r\n },\r\n ScrollButtonComponent: function ScrollButtonComponent(props) {\r\n return _react2.default.createElement(_TabScrollButton2.default, Object.assign({\r\n hideScrollButtons: _this3.state.hideScrollButtons\r\n }, props));\r\n },\r\n TabIndicatorProps: _TabIndicatorProps,\r\n scrollButtons: scrollButtonsProp,\r\n variant: widthVariant\r\n }, rest),\r\n children\r\n )\r\n );\r\n }\r\n }]);\r\n\r\n return Tabs;\r\n}(_react.Component);\r\n\r\nTabs.muiName = 'Tabs';\r\n\r\nTabs.propTypes = {\r\n /**\r\n * Callback fired when the component mounts.\r\n * This is useful when you want to trigger an action programmatically.\r\n * It currently only supports `updateIndicator()` action.\r\n *\r\n * @param {object} actions This object contains all possible actions\r\n * that can be triggered programmatically.\r\n */\r\n action: _propTypes2.default.func,\r\n /**\r\n * If `true`, the tabs will be centered.\r\n * This property is intended for large views.\r\n */\r\n centered: _propTypes2.default.bool,\r\n /**\r\n * The content of the component.\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Useful to extend the style applied to components.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * Send a custom class name.\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * @ignore\r\n * Determines the color of the indicator.\r\n */\r\n indicatorColor: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.oneOf(['secondary', 'primary'])]),\r\n /**\r\n * Callback fired when the value changes.\r\n *\r\n * @param {object} event The event source of the callback\r\n * @param {number} value We default to the index of the child\r\n */\r\n onChange: _propTypes2.default.func,\r\n /**\r\n * Render the scroll buttons. If set to `true`, scroll buttons will be rendered if the tabs\r\n * don't fit in the current viewport.\r\n *\r\n * On mobile viewports the Tabs container has horizontal scrolling. To suppress scroll buttons\r\n * on mobile viewports, use the `scrollButtonsOnMobile` prop.\r\n */\r\n scrollButtons: _propTypes2.default.bool,\r\n /**\r\n * Whether to show scroll buttons in the mobile viewport (when `scrollButtons` is `true`).\r\n */\r\n scrollButtonsOnMobile: _propTypes2.default.bool,\r\n /**\r\n * @ignore\r\n * The component used to render the scroll buttons.\r\n */\r\n ScrollButtonComponent: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object]),\r\n /**\r\n * @ignore\r\n * Properties applied to the private `TabIndicator` element.\r\n */\r\n TabIndicatorProps: _propTypes2.default.object,\r\n /**\r\n * The value of the currently selected `Tab`.\r\n * If you don't want any selected `Tab`, you can set this property to `false`.\r\n */\r\n value: _propTypes2.default.any,\r\n /**\r\n * Set the variant to `page` to render a page level Tab.\r\n * Set the variant to `card` to render a card level Tab.\r\n */\r\n variant: _propTypes2.default.oneOf(['page', 'card']),\r\n\r\n /**\r\n * Determines additional display behavior of the tabs:\r\n * - scrollable will invoke scrolling properties and allow for horizontally scrolling (or swiping) of the tab bar.\r\n * - fullWidth will make the tabs grow to use all the available space, which should be used for small views, like on mobile.\r\n * - standard will render the default state.\r\n */\r\n widthVariant: _propTypes2.default.oneOf(['scrollable', 'standard', 'fullWidth'])\r\n};\r\n\r\nTabs.defaultProps = {\r\n centered: false,\r\n widthVariant: 'scrollable',\r\n scrollButtons: false,\r\n scrollButtonsOnMobile: true,\r\n variant: 'page'\r\n};\r\n\r\nexports.default = (0, _styles.withStyles)(styles, { index: 0 })(Tabs);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\nexports.styles = undefined;\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _classnames = require('classnames');\r\n\r\nvar _classnames2 = _interopRequireDefault(_classnames);\r\n\r\nvar _ChevronRight = require('@eui/ds-icons/lib/ChevronRight');\r\n\r\nvar _ChevronRight2 = _interopRequireDefault(_ChevronRight);\r\n\r\nvar _ChevronLeft = require('@eui/ds-icons/lib/ChevronLeft');\r\n\r\nvar _ChevronLeft2 = _interopRequireDefault(_ChevronLeft);\r\n\r\nvar _withStyles = require('../../styles/withStyles');\r\n\r\nvar _withStyles2 = _interopRequireDefault(_withStyles);\r\n\r\nvar _IconButton = require('../../IconButton');\r\n\r\nvar _IconButton2 = _interopRequireDefault(_IconButton);\r\n\r\nvar _tokens = require('../../styles/tokens');\r\n\r\nvar _EDSContext = require('../../EDSContext/EDSContext');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = exports.styles = {\r\n /* Styles applied to the root element. */\r\n root: {\r\n color: 'inherit',\r\n flexBasis: 'auto',\r\n alignSelf: 'center',\r\n margin: '0 2px'\r\n },\r\n icon: {\r\n height: _tokens.spacingSmall,\r\n width: _tokens.spacingSmall\r\n },\r\n scrollLeftIcon: {\r\n marginRight: _tokens.spacingXSmall\r\n },\r\n scrollRightIcon: {\r\n marginLeft: _tokens.spacingXSmall\r\n },\r\n hideScrollButtons: {\r\n display: 'none'\r\n }\r\n};\r\n\r\nvar TabScrollButton = _react2.default.forwardRef(function (props, ref) {\r\n var _classNames2;\r\n\r\n var classes = props.classes,\r\n classNameProp = props.className,\r\n direction = props.direction,\r\n edsContext = props.edsContext,\r\n onClick = props.onClick,\r\n visible = props.visible,\r\n hideScrollButtons = props.hideScrollButtons,\r\n other = _objectWithoutProperties(props, ['classes', 'className', 'direction', 'edsContext', 'onClick', 'visible', 'hideScrollButtons']);\r\n\r\n var className = (0, _classnames2.default)('tab-scroll-button', classes.root, _defineProperty({}, classes.hideScrollButtons, hideScrollButtons), classNameProp, (_classNames2 = {}, _defineProperty(_classNames2, classes.scrollLeftIcon, direction === 'left'), _defineProperty(_classNames2, classes.scrollRightIcon, direction === 'right'), _classNames2));\r\n\r\n return (\r\n // NOTE: This should use the gray version of the icon-only IconButton\r\n _react2.default.createElement(\r\n _IconButton2.default,\r\n Object.assign({\r\n 'aria-label': edsContext.formatMessage('component.Tabs.scrollButtons'),\r\n title: edsContext.formatMessage('component.Tabs.scrollButtons'),\r\n className: className,\r\n onClick: onClick,\r\n tabIndex: -1,\r\n color: 'secondary',\r\n disabled: !visible\r\n }, other, {\r\n ref: ref\r\n }),\r\n direction === 'left' ? _react2.default.createElement(_ChevronLeft2.default, { className: classes.icon }) : _react2.default.createElement(_ChevronRight2.default, { className: classes.icon })\r\n )\r\n );\r\n});\r\n\r\nTabScrollButton.propTypes = {\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * The direction of icon to render.\r\n */\r\n direction: _propTypes2.default.oneOf(['left', 'right']),\r\n /**\r\n * @ignore\r\n */\r\n edsContext: _propTypes2.default.object,\r\n /**\r\n * Callback to execute for button press.\r\n */\r\n onClick: _propTypes2.default.func,\r\n /**\r\n * Should the button be present or just consume space.\r\n */\r\n visible: _propTypes2.default.bool,\r\n /**\r\n * For auto mode, buttons will be hidden if tabs don't need scrolling\r\n */\r\n hideScrollButtons: _propTypes2.default.bool\r\n};\r\n\r\nTabScrollButton.defaultProps = {\r\n visible: true\r\n};\r\n\r\nTabScrollButton.muiName = 'MuiPrivateTabScrollButton';\r\n\r\nexports.default = (0, _EDSContext.withEDSContext)((0, _withStyles2.default)(styles)(TabScrollButton));","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _core = require('@material-ui/core');\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _classnames = require('classnames');\r\n\r\nvar _classnames2 = _interopRequireDefault(_classnames);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nvar styles = function styles(theme) {\r\n var _tabRoot, _cardLevelTabRoot;\r\n\r\n return {\r\n tabRoot: (_tabRoot = {\r\n textTransform: 'none',\r\n minWidth: 'auto',\r\n margin: '0 ' + _tokens.spacingSmall,\r\n padding: '0px ' + _tokens.spacingXxSmall,\r\n lineHeight: '' + _tokens.lineHeightParagraphSmall\r\n }, _defineProperty(_tabRoot, theme.breakpoints.up('md'), {\r\n minWidth: 'auto'\r\n }), _defineProperty(_tabRoot, '&:hover', {\r\n color: theme.palette.ctaColor.hover\r\n }), _defineProperty(_tabRoot, '&:focus', {\r\n boxShadow: _tokens.boxShadowFocusInset,\r\n color: theme.palette.ctaColor.active\r\n }), _defineProperty(_tabRoot, '&$disabled', {\r\n color: theme.palette.text.disabled\r\n }), _defineProperty(_tabRoot, 'fontFamily', theme.typography.fontFamily), _defineProperty(_tabRoot, 'fontWeight', theme.typography.button.fontWeight), _defineProperty(_tabRoot, 'fontSize', theme.typography.body1.fontSize), _tabRoot),\r\n cardLevelTabRoot: (_cardLevelTabRoot = {\r\n fontFamily: theme.typography.fontFamily,\r\n fontWeight: theme.typography.button.fontWeight,\r\n fontSize: theme.typography.body1.fontSize,\r\n textTransform: 'none',\r\n minWidth: 'auto',\r\n padding: '0px ' + _tokens.spacingSmall\r\n }, _defineProperty(_cardLevelTabRoot, theme.breakpoints.up('md'), {\r\n minWidth: 'auto'\r\n }), _defineProperty(_cardLevelTabRoot, '&:hover', {\r\n color: theme.palette.ctaColor.hover\r\n }), _defineProperty(_cardLevelTabRoot, '&:focus', {\r\n boxShadow: _tokens.boxShadowFocusInset,\r\n color: theme.palette.ctaColor.active\r\n }), _defineProperty(_cardLevelTabRoot, '&$disabled', {\r\n color: theme.palette.text.disabled\r\n }), _cardLevelTabRoot),\r\n selected: {\r\n color: theme.palette.ctaColor.base\r\n },\r\n // Inherit styles\r\n textColorInherit: {\r\n color: theme.palette.text.secondary,\r\n opacity: '1',\r\n '&$selected': {\r\n color: theme.palette.ctaColor.base\r\n },\r\n '&$disabled': {\r\n opacity: 1,\r\n color: theme.palette.grey[400]\r\n }\r\n },\r\n // Primary styles\r\n textColorPrimary: {\r\n color: theme.palette.text.secondary,\r\n opacity: '1',\r\n '&$selected': {\r\n color: theme.palette.ctaColor.base\r\n },\r\n '&$disabled': {\r\n opacity: '1'\r\n }\r\n },\r\n // Secondary styles\r\n textColorSecondary: {\r\n color: theme.palette.text.secondary,\r\n opacity: '1',\r\n '&$selected': {\r\n color: theme.palette.ctaColor.base\r\n },\r\n '&$disabled': {\r\n opacity: '1',\r\n '&:hover': {\r\n color: theme.palette.grey[400]\r\n }\r\n }\r\n },\r\n // label: {\r\n // fontFamily: theme.typography.fontFamily,\r\n // fontWeight: theme.typography.button.fontWeight,\r\n // fontSize: theme.typography.body1.fontSize,\r\n // },\r\n // labelContainer: {\r\n // width: '100%', // Fix an IE 11 issue\r\n // boxSizing: 'border-box',\r\n // padding: `0 ${spacingXxSmall}`,\r\n // },\r\n cardLevel: {\r\n border: '1px solid transparent', // Fix text/tab shift with border\r\n '&$selected': {\r\n borderColor: theme.palette.grey[300] + ' ' + theme.palette.grey[300] + ' #fff',\r\n borderTopRightRadius: 4,\r\n borderTopLeftRadius: 4\r\n }\r\n },\r\n disabled: {\r\n opacity: '1',\r\n color: theme.palette.grey[400]\r\n }\r\n };\r\n};\r\n\r\nvar Tab = _react2.default.forwardRef(function (props, ref) {\r\n var _classNames;\r\n\r\n var classes = props.classes,\r\n classNameProp = props.className,\r\n variant = props.variant,\r\n rest = _objectWithoutProperties(props, ['classes', 'className', 'variant']);\r\n\r\n return _react2.default.createElement(_core.Tab, Object.assign({}, rest, {\r\n classes: {\r\n root: variant === 'card' ? classes.cardLevelTabRoot : classes.tabRoot,\r\n selected: classes.selected,\r\n textColorInherit: classes.textColorInherit,\r\n textColorPrimary: classes.textColorPrimary,\r\n textColorSecondary: classes.textColorSecondary,\r\n // label: classes.label,\r\n // labelContainer: classes.labelContainer,\r\n disabled: classes.disabled\r\n },\r\n className: (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, classes.cardLevel, variant === 'card'), _defineProperty(_classNames, 'classNameProp', classNameProp), _classNames)),\r\n disableRipple: true,\r\n ref: ref\r\n }));\r\n});\r\n\r\nTab.muiName = 'Tab';\r\nTab.displayName = 'Tab';\r\n\r\nTab.propTypes = {\r\n /**\r\n * Useful to extend the style applied to components.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * If `true`, the tab will be disabled.\r\n */\r\n disabled: _propTypes2.default.bool,\r\n /**\r\n * @ignore\r\n */\r\n fullWidth: _propTypes2.default.bool,\r\n /**\r\n * @ignore\r\n * For server side rendering consideration, we let the selected tab\r\n * render the indicator.\r\n */\r\n indicator: _propTypes2.default.node,\r\n /**\r\n * The label element.\r\n */\r\n label: _propTypes2.default.node,\r\n /**\r\n * @ignore\r\n */\r\n onChange: _propTypes2.default.func,\r\n /**\r\n * @ignore\r\n */\r\n onClick: _propTypes2.default.func,\r\n /**\r\n * @ignore\r\n */\r\n selected: _propTypes2.default.bool,\r\n /**\r\n * @ignore\r\n */\r\n textColor: _propTypes2.default.oneOf(['secondary', 'primary', 'inherit']),\r\n /**\r\n * You can provide your own value. Otherwise, we fallback to the child position index.\r\n */\r\n value: _propTypes2.default.any,\r\n /**\r\n * @ignore\r\n * Internal value to check if the Tab should have Card Level styling.\r\n */\r\n variant: _propTypes2.default.oneOf(['page', 'card'])\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(Tab);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\nexports.styles = exports.TEXT_STYLING_INLINE = exports.TEXT_STYLING_STANDALONE = undefined;\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _Button = require('@material-ui/core/Button');\r\n\r\nvar _Button2 = _interopRequireDefault(_Button);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\n// text styling variants\r\nvar TEXT_STYLING_STANDALONE = exports.TEXT_STYLING_STANDALONE = 'standalone';\r\nvar TEXT_STYLING_INLINE = exports.TEXT_STYLING_INLINE = 'inline';\r\n\r\n/**\r\n * TODO: Need to implement the css for outlined buttons now that they are available.\r\n */\r\nvar styles = exports.styles = function styles(theme) {\r\n return {\r\n // Shared Button styles\r\n root: {\r\n // fontFamily is being updated from theme object for fontFamilies: { button: ... }\r\n lineHeight: 1.5,\r\n boxShadow: 'none',\r\n textTransform: 'none',\r\n color: theme.palette.text.white,\r\n borderRadius: _tokens.borderRadiusXLarge,\r\n padding: _tokens.spacingXxSmall + ' ' + _tokens.spacingMedium,\r\n fontSize: theme.typography.body1.fontSize,\r\n minHeight: _tokens.sizingXLarge,\r\n outline: 'none',\r\n '&$disabled': {\r\n color: theme.palette.text.white\r\n },\r\n '& svg': {\r\n flex: '1 0 auto'\r\n }\r\n },\r\n // Sizes\r\n sizeSmall: {\r\n fontSize: theme.typography.body2.fontSize,\r\n minHeight: '2.375rem',\r\n padding: _tokens.spacingXxSmall + ' ' + _tokens.spacingSmall\r\n },\r\n sizeLarge: {\r\n fontSize: theme.typography.body1.fontSize,\r\n minHeight: '3.125rem',\r\n padding: _tokens.spacingXxSmall + ' ' + _tokens.spacingLarge\r\n },\r\n // Shared Disabled Button styles\r\n disabled: {\r\n backgroundColor: theme.palette.disabled.background,\r\n color: theme.palette.grey[100]\r\n },\r\n // Primary Button\r\n contained: {\r\n backgroundColor: theme.palette.ctaColor.base,\r\n '&:hover': {\r\n backgroundColor: theme.palette.ctaColor.hover,\r\n borderColor: theme.palette.ctaColor.hover\r\n },\r\n '&:active': {\r\n boxShadow: 'none',\r\n backgroundColor: theme.palette.ctaColor.active,\r\n borderColor: theme.palette.ctaColor.active\r\n },\r\n '&$disabled': {\r\n boxShadow: 'none',\r\n border: 'none',\r\n backgroundColor: theme.palette.disabled.background,\r\n color: theme.palette.text.white\r\n },\r\n '&:focus': {\r\n outline: 'none',\r\n boxShadow: _tokens.boxShadowFocus\r\n },\r\n '&:focus:hover': {\r\n backgroundColor: theme.palette.ctaColor.active,\r\n borderColor: theme.palette.ctaColor.active,\r\n boxShadow: _tokens.boxShadowFocus\r\n }\r\n },\r\n textPrimary: {\r\n backgroundColor: 'transparent',\r\n color: _tokens.colorCtaBlueBase, // text buttons do not respond to theme changes\r\n borderRadius: _tokens.borderRadiusSmall,\r\n minWidth: 'inherit',\r\n minHeight: 'inherit',\r\n height: 'auto',\r\n padding: '0 ' + _tokens.spacingXxSmall + ' 0 ' + _tokens.spacingXxSmall,\r\n textDecoration: 'underline',\r\n '&$disabled': {\r\n boxShadow: 'none',\r\n border: 'none',\r\n color: theme.palette.action.disabled,\r\n backgroundColor: 'transparent'\r\n },\r\n '&:focus:active': {\r\n color: theme.palette.ctaColor.active,\r\n boxShadow: 'none'\r\n },\r\n '&:hover': {\r\n backgroundColor: 'transparent',\r\n color: theme.palette.ctaColor.hover,\r\n textDecoration: 'underline',\r\n boxShadow: 'none'\r\n },\r\n '&:focus': {\r\n outline: 'none',\r\n boxShadow: _tokens.boxShadowFocus\r\n },\r\n '&:focus:hover': {\r\n boxShadow: 'none'\r\n }\r\n },\r\n textStandalone: {\r\n fontFamily: _tokens.fontFamilyDefault,\r\n fontWeight: _tokens.fontWeightStrong\r\n },\r\n textInline: {\r\n fontFamily: 'inherit',\r\n fontSize: 'inherit',\r\n fontWeight: 'inherit',\r\n verticalAlign: 'inherit',\r\n padding: 0\r\n },\r\n textPrimaryDark: {\r\n color: theme.palette.grey[100],\r\n '&:hover': {\r\n color: theme.palette.grey[200]\r\n },\r\n '&:focus:active': {\r\n color: theme.palette.grey[300]\r\n }\r\n },\r\n // Secondary Button\r\n containedSecondary: {\r\n backgroundColor: theme.palette.grey[100],\r\n color: theme.palette.ctaColor.base,\r\n border: _tokens.borderWidthThin + ' solid',\r\n '&:hover': {\r\n backgroundColor: theme.palette.ctaColor.hover,\r\n borderColor: theme.palette.ctaColor.hover,\r\n color: theme.palette.grey[100]\r\n },\r\n '&:active': {\r\n boxShadow: 'none',\r\n backgroundColor: theme.palette.ctaColor.active,\r\n borderColor: theme.palette.ctaColor.active,\r\n color: theme.palette.grey[100]\r\n },\r\n '&$disabled': {\r\n boxShadow: 'none',\r\n border: 'none',\r\n backgroundColor: theme.palette.disabled.background,\r\n color: theme.palette.text.white\r\n },\r\n '&:focus': {\r\n outline: 'none',\r\n boxShadow: _tokens.boxShadowFocus\r\n },\r\n '&:focus:hover': {\r\n backgroundColor: theme.palette.ctaColor.active,\r\n borderColor: theme.palette.ctaColor.active,\r\n boxShadow: _tokens.boxShadowFocus,\r\n color: theme.palette.text.white\r\n }\r\n }\r\n // Outlined => Inverted Buttons\r\n // outlined: {\r\n // backgroundColor: \"transparent\",\r\n // color: \"#FFFFFF\",\r\n // border: \"1px solid #FFFFFF\",\r\n // \"&:hover\": {\r\n // backgroundColor: \"#FFFFFF\",\r\n // color: \"transparent\" // TODO: verify with UXD about color fo rtext on hover, pressed, focused\r\n // },\r\n // \"&:active\": {\r\n // boxShadow: \"none\",\r\n // backgroundColor: \"#0A4982\",\r\n // borderColor: \"#0A4982\",\r\n // color: \"#FFFFFF\"\r\n // },\r\n // \"&$disabled\": {\r\n // color: \"#FFFFFF\", // FIXME: not showing up properly, being overridden\r\n // boxShadow: \"none\",\r\n // backgroundColor: \"#B2B3B7\",\r\n // border: \"none\"\r\n // },\r\n // \"&:focus\": {\r\n // boxShadow: \"0 0 0 2px #FFFFFF\"\r\n // },\r\n // \"&:focus:hover\": {\r\n // backgroundColor: \"#FFFFFF\",\r\n // borderColor: \"#FFFFFF\",\r\n // boxShadow: \"0 0 0 2px #FFFFFF\",\r\n // color: \"transparent\"\r\n // }\r\n // },\r\n };\r\n};\r\n\r\n/**\r\n * Use `Button` to show a call to action.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.5\r\n * @examples\r\n * SimpleExample\r\n * SizesExample\r\n * FluidExample\r\n * TextWithIconExample\r\n * ButtonGroupExample\r\n * TextButtonExample\r\n * TextOverflowExample\r\n */\r\nvar Button = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n fluid = props.fluid,\r\n textVariantStyling = props.textVariantStyling,\r\n variant = props.variant,\r\n withDarkBackground = props.withDarkBackground,\r\n rest = _objectWithoutProperties(props, ['classes', 'fluid', 'textVariantStyling', 'variant', 'withDarkBackground']);\r\n\r\n var textClass = classes.textPrimary + '\\n ' + (withDarkBackground ? classes.textPrimaryDark : '') + '\\n ' + (textVariantStyling === TEXT_STYLING_INLINE ? classes.textInline : classes.textStandalone) + '\\n ';\r\n\r\n var classOverrides = {\r\n root: classes.root,\r\n contained: classes.contained,\r\n text: textClass,\r\n containedSecondary: classes.containedSecondary,\r\n sizeSmall: classes.sizeSmall,\r\n sizeLarge: classes.sizeLarge,\r\n disabled: classes.disabled\r\n };\r\n\r\n var propOverrides = {\r\n disableRipple: true, // disable the click ripple by default\r\n disableFocusRipple: true // disable the default MUI focus ripple effect\r\n };\r\n\r\n if (variant === 'text') {\r\n // Need to override these props to prevent styling issues\r\n propOverrides.color = 'primary';\r\n propOverrides.fullWidth = false;\r\n };\r\n\r\n return _react2.default.createElement(\r\n _Button2.default,\r\n Object.assign({\r\n variant: variant,\r\n classes: classOverrides,\r\n fullWidth: fluid,\r\n ref: ref\r\n }, rest, propOverrides),\r\n props.children\r\n );\r\n});\r\n\r\nButton.propTypes = {\r\n /**\r\n * Class name to assign the component.\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * Classes used to extend original style object.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * The content of the button.\r\n */\r\n children: _propTypes2.default.node.isRequired,\r\n /**\r\n * The color of the component.\r\n */\r\n color: _propTypes2.default.oneOf(['primary', 'secondary']),\r\n /**\r\n * If `true`, the button will be disabled.\r\n */\r\n disabled: _propTypes2.default.bool,\r\n /**\r\n * If `true`, the button will take up the full width of its container.\r\n */\r\n fluid: _propTypes2.default.bool,\r\n /**\r\n * The URL to link to when the button is clicked.\r\n * If defined, an `a` element will be used as the root node.\r\n */\r\n href: _propTypes2.default.string,\r\n /**\r\n * The size of the button.\r\n *\r\n * **DEPRECATION NOTICE**\r\n *\r\n * In the next major version:\r\n *\r\n * 1. The `large` button size will be removed\r\n * 2. The `medium` button size will be renamed 'default'\r\n *\r\n */\r\n size: _propTypes2.default.oneOf(['small', 'medium', 'large']),\r\n /**\r\n * The font configuration of the `text` variant\r\n *\r\n * * `standalone` - Use standard text-button styling\r\n * * `inline` - Inherits styling from context. Used for text buttons placed inline with other text.\r\n */\r\n textVariantStyling: _propTypes2.default.oneOf(['standalone', 'inline']),\r\n /**\r\n * The HTML button type.\r\n */\r\n type: _propTypes2.default.string,\r\n /**\r\n * The type of button.\r\n */\r\n variant: _propTypes2.default.oneOf(['contained', 'text']),\r\n /**\r\n * With `variant=\"text\"`, use this if you want to render a button on Snackbar or any dark background.\r\n */\r\n withDarkBackground: _propTypes2.default.bool\r\n // We should use \"flat\" for our \"text\" buttons, and \"outlined\" for our \"inverted\", and \"fab\" for our floating action button.\r\n};\r\n\r\nButton.defaultProps = {\r\n variant: 'contained',\r\n color: 'primary',\r\n size: 'medium',\r\n textVariantStyling: 'standalone',\r\n fluid: false,\r\n withDarkBackground: false\r\n};\r\n\r\n// necessary to add an explicit display name, since docgen can't seem to\r\n// extract one from a forwardRef'd component\r\nButton.displayName = 'Button';\r\n\r\n/**\r\n * We order Button styles at index: 0 to avoid improper ordering\r\n * of Dropdown styles.\r\n */\r\nexports.default = (0, _styles2.default)(styles, { name: 'Button', index: 0 })(Button);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\nexports.styles = undefined;\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _classnames = require('classnames');\r\n\r\nvar _classnames2 = _interopRequireDefault(_classnames);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = exports.styles = function styles(theme) {\r\n return {\r\n root: {\r\n '& button': {\r\n margin: '0 8px',\r\n marginBottom: '8px'\r\n }\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * Use a `ButtonGroup` for two or more buttons that are grouped together.\r\n */\r\nvar ButtonGroup = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n className = props.className,\r\n children = props.children,\r\n rest = _objectWithoutProperties(props, ['classes', 'className', 'children']);\r\n\r\n // showcase all class overrides\r\n\r\n\r\n var buttonGroupClasses = (0, _classnames2.default)(classes.root, className);\r\n\r\n return _react2.default.createElement(\r\n 'div',\r\n Object.assign({ className: buttonGroupClasses }, rest, { ref: ref }),\r\n children\r\n );\r\n});\r\n\r\nButtonGroup.displayName = 'ButtonGroup';\r\n\r\nButtonGroup.propTypes = {\r\n /**\r\n * Class name to assign the component.\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * Classes used to extend original style object.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * The buttons that are passed in as children within ButtonGroups.\r\n */\r\n children: _propTypes2.default.node.isRequired\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(ButtonGroup);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\nexports.styles = undefined;\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _classnames = require('classnames');\r\n\r\nvar _classnames2 = _interopRequireDefault(_classnames);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _EDSContext = require('../EDSContext/EDSContext');\r\n\r\nvar _v = require('uuid/v4');\r\n\r\nvar _v2 = _interopRequireDefault(_v);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\n// TODO: Account for custom logos\r\n\r\nvar styles = exports.styles = function styles(theme) {\r\n return {\r\n root: {\r\n height: _tokens.sizingXxLarge1,\r\n minWidth: '7.5rem',\r\n padding: _tokens.spacingSmall\r\n },\r\n logoContainer: {\r\n height: _tokens.heightFluid,\r\n width: _tokens.widthFluid,\r\n display: 'inline-block',\r\n maxHeight: 'none',\r\n fill: _tokens.colorFillLogoPreferred // by default assign to preferred fill color\r\n },\r\n logoAlternativeLogo: {\r\n fill: _tokens.colorFillLogoAlternativePowerButton\r\n },\r\n logoAlternativeText: {\r\n fill: _tokens.colorFillLogoAlternativeText\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * Use `Logo` to display the logo within the top header bar.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.5\r\n * @examples\r\n * SimpleExample\r\n * ClickExample\r\n * NavLinkExample\r\n * RedirectExample\r\n */\r\nvar Logo = _react2.default.forwardRef(function (props, ref) {\r\n var logo = props.logo,\r\n id = props.id,\r\n classes = props.classes,\r\n classNameProp = props.className,\r\n component = props.component,\r\n edsContext = props.edsContext,\r\n rest = _objectWithoutProperties(props, ['logo', 'id', 'classes', 'className', 'component', 'edsContext']);\r\n\r\n var logoPowerButtonClasses = (0, _classnames2.default)(_defineProperty({}, classes.logoAlternativeLogo, logo === 'alternative'));\r\n\r\n var logoTextClasses = (0, _classnames2.default)(_defineProperty({}, classes.logoAlternativeText, logo === 'alternative'));\r\n\r\n var ComponentProp = component;\r\n // Only id the logo if original id present.\r\n var svgId = id ? id + '_LogoSvg' : '' + (0, _v2.default)();\r\n\r\n return _react2.default.createElement(\r\n ComponentProp,\r\n Object.assign({\r\n id: id,\r\n className: (0, _classnames2.default)(classes.root, classNameProp)\r\n }, rest, {\r\n ref: ref\r\n }),\r\n _react2.default.createElement(\r\n 'svg',\r\n {\r\n className: (0, _classnames2.default)(classes.logoContainer),\r\n role: 'img',\r\n 'aria-labelledby': 'logo_description_' + svgId,\r\n id: svgId,\r\n xmlns: 'http://www.w3.org/2000/svg',\r\n viewBox: '0 0 431.49 88.05'\r\n },\r\n _react2.default.createElement(\r\n 'desc',\r\n { id: 'logo_description_' + svgId },\r\n edsContext.formatMessage('component.Logo.logo')\r\n ),\r\n _react2.default.createElement('path', {\r\n className: logoPowerButtonClasses,\r\n d: 'M135.2,124a44,44,0,1,0,24.33,57.3A44,44,0,0,0,135.2,124Zm14.1,53.17a33,33,0,1,1-23.69-44.59,31,31,0,0,1,10.54,4.26l-4.3,10.64-10.11,25-10.53-4.25,10.1-25A21.78,21.78,0,1,0,139,156.94l5.26-13A33,33,0,0,1,149.3,177.14Z',\r\n transform: 'translate(-74.69 -120.75)'\r\n }),\r\n _react2.default.createElement('path', {\r\n className: logoTextClasses,\r\n d: 'M506.18,191.09a4.38,4.38,0,1,1-4.37-4.26A4.29,4.29,0,0,1,506.18,191.09Zm-7.67,0a3.31,3.31,0,0,0,3.33,3.41,3.41,3.41,0,0,0,0-6.81A3.31,3.31,0,0,0,498.51,191.09Zm2.63,2.24h-1v-4.27a9.4,9.4,0,0,1,1.64-.13,2.58,2.58,0,0,1,1.48.32,1.19,1.19,0,0,1,.42.93,1.1,1.1,0,0,1-.89,1v.05a1.26,1.26,0,0,1,.78,1,3.47,3.47,0,0,0,.31,1.07h-1.06a3.73,3.73,0,0,1-.34-1c-.08-.47-.34-.68-.88-.68h-.47Zm0-2.42h.47c.55,0,1-.18,1-.62s-.29-.65-.91-.65a2.26,2.26,0,0,0-.55.05Z',\r\n transform: 'translate(-74.69 -120.75)'\r\n }),\r\n _react2.default.createElement('path', {\r\n className: logoTextClasses,\r\n d: 'M235,172.54H200.62a17.9,17.9,0,0,0,4.7,12.2,12.17,12.17,0,0,0,8.94,3.46c3.84,0,7-1.06,9-3.17a10.29,10.29,0,0,0,2.88-5.28h8a17.85,17.85,0,0,1-7.49,12,22.36,22.36,0,0,1-12.39,3.66,20.76,20.76,0,0,1-16.14-7.3c-4-4.71-6.05-11.14-6.05-18.06,0-5.86,1.05-11.05,3.75-15.57a20.81,20.81,0,0,1,18.34-10.18,19.61,19.61,0,0,1,14.8,6.25,25.1,25.1,0,0,1,6.15,17.09Zm-11.24-16.9a11.55,11.55,0,0,0-9.61-4.42c-8.84,0-13.16,7.2-13.35,14.31h25.94A17,17,0,0,0,223.77,155.64Zm93.59,38.52-.67-7.4c-2.5,5.57-8.74,8.55-14.41,8.55-11,0-16.62-6.63-16.62-17.87V145.55h8.17v30.74c0,7.3,2.69,11.63,10.37,11.63a11,11,0,0,0,8.07-3.65c3.07-3.17,4-8.46,4-13.45V145.55h8.16v48.61Zm51.73-4c-3.46,3.36-8.07,5.29-14,5.29-8.74,0-14.31-4-17.77-9.13-2.6-3.84-4-9.12-4-16.42s1.43-12.59,4-16.43c3.46-5.09,8.93-9.13,17.67-9.13a19.33,19.33,0,0,1,13.84,5.19A18.7,18.7,0,0,1,374.57,162h-8.26a12.18,12.18,0,0,0-3.46-7.59,11.37,11.37,0,0,0-7.88-3,12.25,12.25,0,0,0-8.45,3.17c-3.84,3.27-4.9,9.32-4.9,15.28s1.06,12,4.9,15.27a12.29,12.29,0,0,0,8.45,3.16,11.34,11.34,0,0,0,8.26-3.26,11.9,11.9,0,0,0,3.27-7.2h8.26A18.23,18.23,0,0,1,369.09,190.12Zm14.16-51.57V130.1h8.88v8.45Zm.26,55.61V145.55h8.36v48.61Zm56.25.67c-4.32,0-7-3.27-7-7.4h-.19c-2.78,4.9-8.83,8-15.66,8-11.14,0-16.71-7.49-16.71-15,0-6.25,4-14.41,17.29-15.17l14.8-.87v-3.56c0-2.4-.29-5.37-2.5-7.39-1.64-1.54-4-2.5-8-2.5-4.41,0-7.2,1.25-8.84,2.88a8,8,0,0,0-2.4,5.86h-8a14.39,14.39,0,0,1,4.23-10.18c3.27-3.46,9-5.19,15-5.19,9.42,0,14.8,4,17.1,9.32a18.63,18.63,0,0,1,1.44,7.49v23.54c0,2.59,1.06,3.27,2.69,3.27a11.79,11.79,0,0,0,2.12-.29v6.05A11.36,11.36,0,0,1,439.76,194.83Zm-7.49-24.11-13.07.77c-4.9.29-10.66,2.59-10.66,8.74,0,4.32,2.69,8.35,9.6,8.35a13.67,13.67,0,0,0,10-3.93,15.72,15.72,0,0,0,4.14-11.05Zm51.63,23.44V163.32c0-7.3-3-11.62-10.66-11.62-4.71,0-8.46,3.07-10.57,7.49-1.63,3.56-1.73,8.64-1.73,12.39v22.58h-8.16V145.55h7.1l.68,7.3c2.5-5.57,9.22-8.55,14.7-8.55,11,0,16.8,6.63,16.8,17.87v32Zm-231.45,0V124.8h-8.16v69.36Zm22.27,0V124.8h-8.17v69.36Z',\r\n transform: 'translate(-74.69 -120.75)'\r\n })\r\n )\r\n );\r\n});\r\n\r\nLogo.propTypes = {\r\n /** Class name prop for logo container. */\r\n className: _propTypes2.default.string,\r\n /** Prop used to add additional styling to the component. */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * The component used for the root node.\r\n * Either a string to use a DOM element or a component.\r\n */\r\n component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object]),\r\n /** HTML ID attribute for uniqueness. */\r\n id: _propTypes2.default.string,\r\n /** Set the color style of the logo. */\r\n logo: _propTypes2.default.oneOf(['preferred', 'alternative']),\r\n /**\r\n * @ignore\r\n */\r\n edsContext: _propTypes2.default.object\r\n};\r\n\r\nLogo.displayName = 'Logo';\r\n\r\nLogo.defaultProps = {\r\n logo: 'preferred',\r\n component: 'div'\r\n};\r\n\r\nexports.default = (0, _EDSContext.withEDSContext)((0, _styles2.default)(styles)(Logo));","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _Dialog = require('./Dialog');\r\n\r\nObject.defineProperty(exports, 'default', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_Dialog).default;\r\n }\r\n});\r\n\r\nvar _DialogActions = require('./DialogActions');\r\n\r\nObject.defineProperty(exports, 'DialogActions', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_DialogActions).default;\r\n }\r\n});\r\n\r\nvar _DialogContent = require('./DialogContent');\r\n\r\nObject.defineProperty(exports, 'DialogContent', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_DialogContent).default;\r\n }\r\n});\r\n\r\nvar _DialogContentText = require('./DialogContentText');\r\n\r\nObject.defineProperty(exports, 'DialogContentText', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_DialogContentText).default;\r\n }\r\n});\r\n\r\nvar _DialogTitle = require('./DialogTitle');\r\n\r\nObject.defineProperty(exports, 'DialogTitle', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_DialogTitle).default;\r\n }\r\n});\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _Dialog = require('@material-ui/core/Dialog');\r\n\r\nvar _Dialog2 = _interopRequireDefault(_Dialog);\r\n\r\nvar _lib = require('@eui/ds-icons/lib');\r\n\r\nvar _classnames = require('classnames');\r\n\r\nvar _classnames2 = _interopRequireDefault(_classnames);\r\n\r\nvar _EDSContext = require('../EDSContext/EDSContext');\r\n\r\nvar _useEnforceFocusFlag3 = require('./internal/useEnforceFocusFlag');\r\n\r\nvar _useEnforceFocusFlag4 = _interopRequireDefault(_useEnforceFocusFlag3);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nvar styles = function styles(theme) {\r\n var _paper, _internalDialog;\r\n\r\n return {\r\n\r\n // Styles applied to the root element.\r\n root: {\r\n '&.fullScreen': {\r\n padding: 0,\r\n '& .dialog-close-button': {\r\n top: _tokens.spacingXSmall,\r\n right: _tokens.spacingXSmall\r\n }\r\n }\r\n },\r\n\r\n // Styles applied to the Paper component.\r\n paper: (_paper = {\r\n borderRadius: _tokens.borderRadiusMedium,\r\n minHeight: '12.5rem',\r\n padding: _tokens.spacingSmall,\r\n width: '21rem'\r\n }, _defineProperty(_paper, '@media ' + _tokens.mqSmall, {\r\n padding: _tokens.spacingLarge,\r\n width: '37.5rem'\r\n }), _defineProperty(_paper, '@media ' + _tokens.mqMedium, {\r\n padding: _tokens.spacingLarge,\r\n width: '39.625rem'\r\n }), _defineProperty(_paper, '@media ' + _tokens.mqLarge, {\r\n padding: _tokens.spacingLarge,\r\n width: '53rem'\r\n }), _paper),\r\n\r\n // Styles applied to the Paper component if fullWidth=true.\r\n paperFullWidth: {\r\n width: _tokens.widthFluid + ' !important'\r\n },\r\n\r\n dialogXButton: {\r\n background: 'none',\r\n border: 'none',\r\n width: _tokens.sizingXxLarge,\r\n height: _tokens.sizingXxLarge,\r\n position: 'absolute',\r\n top: _tokens.spacingSmall,\r\n right: _tokens.spacingSmall,\r\n textAlign: 'center',\r\n '&:active': {\r\n color: theme.palette.ctaColor.active\r\n },\r\n '&:hover': {\r\n color: theme.palette.ctaColor.hover\r\n },\r\n '&:active:hover': {\r\n color: theme.palette.ctaColor.active\r\n }\r\n },\r\n paperFullScreen: {\r\n // TODO: Find a better way to increase the opacity.\r\n // internalDialog classes are overriding this class for now,\r\n // hence !important.\r\n width: _tokens.widthFluid + ' !important',\r\n borderRadius: _tokens.borderRadiusReset + ' !important'\r\n },\r\n\r\n internalDialog: (_internalDialog = {\r\n padding: '1.25rem',\r\n borderRadius: _tokens.sizingXSmall,\r\n position: 'relative',\r\n minHeight: '12.5rem',\r\n width: '21.5rem'\r\n }, _defineProperty(_internalDialog, '@media ' + _tokens.mqSmall, {\r\n width: '37.5rem'\r\n }), _defineProperty(_internalDialog, '@media ' + _tokens.mqMedium, {\r\n width: '39.625rem'\r\n }), _defineProperty(_internalDialog, '@media ' + _tokens.mqLarge, {\r\n width: '53rem'\r\n }), _internalDialog)\r\n };\r\n};\r\n\r\nvar paperClassName = 'eds-dialog-paper';\r\n\r\n/**\r\n * Use `Dialog` to display information without losing the context of the page.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.10\r\n * @examples\r\n * DialogA11y\r\n */\r\nvar Dialog = _react2.default.forwardRef(function (props, ref) {\r\n var _useEnforceFocusFlag = (0, _useEnforceFocusFlag4.default)(),\r\n _useEnforceFocusFlag2 = _slicedToArray(_useEnforceFocusFlag, 3),\r\n disableEnforceFocusFlag = _useEnforceFocusFlag2[0],\r\n onFocus = _useEnforceFocusFlag2[1],\r\n onBlur = _useEnforceFocusFlag2[2];\r\n\r\n var children = props.children,\r\n classesProp = props.classes,\r\n onClose = props.onClose,\r\n showTitleBarClose = props.showTitleBarClose,\r\n PaperPropsProp = props.PaperProps,\r\n edsContext = props.edsContext,\r\n open = props.open,\r\n fullScreen = props.fullScreen,\r\n rest = _objectWithoutProperties(props, ['children', 'classes', 'onClose', 'showTitleBarClose', 'PaperProps', 'edsContext', 'open', 'fullScreen']);\r\n\r\n var classes = {\r\n root: classesProp.root,\r\n paper: classesProp.paper,\r\n paperWidthXs: classesProp.paperWidthXs,\r\n paperWidthSm: classesProp.paperWidthSm,\r\n paperWidthMd: classesProp.paperWidthMd,\r\n paperFullWidth: classesProp.paperFullWidth,\r\n paperFullScreen: classesProp.paperFullScreen\r\n };\r\n\r\n // local overrides to the dialog's internal paper\r\n var internalPaperProps = {\r\n classes: {\r\n root: classesProp.internalDialog\r\n },\r\n className: paperClassName\r\n };\r\n\r\n // incorporate consumer's paper overrides as well (if any)\r\n var PaperProps2 = Object.assign(internalPaperProps, PaperPropsProp);\r\n\r\n // style the close 'x' in the title\r\n var buttonClasses = (0, _classnames2.default)(undefined !== props.className ? props.className : '', 'dialog-close-button', classesProp.dialogXButton);\r\n\r\n var onFocusCallback = function onFocusCallback(e) {\r\n var propsOnFocus = props.onFocus;\r\n\r\n onFocus(e);\r\n propsOnFocus && propsOnFocus(e);\r\n };\r\n\r\n var onBlurCallback = function onBlurCallback(e) {\r\n var propsOnBlur = props.onFocus;\r\n\r\n onBlur(e);\r\n propsOnBlur && propsOnBlur(e);\r\n };\r\n\r\n return _react2.default.createElement(\r\n _Dialog2.default,\r\n Object.assign({\r\n classes: classes,\r\n disableBackdropClick: true,\r\n disableEscapeKeyDown: true,\r\n PaperProps: PaperProps2,\r\n onClose: onClose,\r\n className: 'eds-dialog',\r\n open: open,\r\n fullScreen: fullScreen,\r\n onFocus: onFocusCallback,\r\n onBlur: onBlurCallback\r\n }, rest, {\r\n ref: ref,\r\n disableEnforceFocus: disableEnforceFocusFlag\r\n }),\r\n showTitleBarClose && _react2.default.createElement(\r\n 'button',\r\n {\r\n 'aria-label': edsContext.formatMessage('component.Dialog.close'),\r\n title: edsContext.formatMessage('component.Dialog.close'),\r\n className: buttonClasses,\r\n onClick: onClose },\r\n _react2.default.createElement(_lib.Icon, { name: 'close', large: true })\r\n ),\r\n children\r\n );\r\n});\r\n\r\nDialog.muiName = 'Dialog';\r\nDialog.displayName = 'Dialog';\r\n\r\nDialog.propTypes = {\r\n /**\r\n * @ignore\r\n */\r\n BackdropProps: _propTypes2.default.object,\r\n /**\r\n * Dialog children, usually the included sub-components.\r\n */\r\n children: _propTypes2.default.node.isRequired,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * If `true`, clicking the backdrop will not fire the `onClose` callback.\r\n */\r\n disableBackdropClick: _propTypes2.default.bool,\r\n /**\r\n * If `true`, hitting escape will not fire the `onClose` callback.\r\n */\r\n disableEscapeKeyDown: _propTypes2.default.bool,\r\n /**\r\n * If `true`, the dialog will be full-screen\r\n */\r\n fullScreen: _propTypes2.default.bool,\r\n /**\r\n * If `true`, the dialog stretches to `maxWidth`.\r\n */\r\n fullWidth: _propTypes2.default.bool,\r\n /**\r\n * @ignore\r\n */\r\n edsContext: _propTypes2.default.object,\r\n /**\r\n * Determine the max width of the dialog.\r\n *\r\n * The dialog width grows with the size of the screen, this property is useful\r\n * on the desktop where you might need some different widths across your\r\n * application.\r\n *\r\n * Valid values:\r\n *\r\n * * `xs`\r\n * * `sm`\r\n * * `md`\r\n * * `lg`\r\n * * `false` (disables max width)\r\n */\r\n maxWidth: _propTypes2.default.oneOf(['xs', 'sm', 'md', 'lg', false]),\r\n /**\r\n * Callback fired when the backdrop is clicked.\r\n */\r\n onBackdropClick: _propTypes2.default.func,\r\n /**\r\n * Callback fired when the component requests to be closed.\r\n *\r\n * @param {object} event The event source of the callback\r\n */\r\n onClose: _propTypes2.default.func,\r\n /**\r\n * Callback fired before the dialog enters.\r\n */\r\n onEnter: _propTypes2.default.func,\r\n /**\r\n * Callback fired when the dialog has entered.\r\n */\r\n onEntered: _propTypes2.default.func,\r\n /**\r\n * Callback fired when the dialog is entering.\r\n */\r\n onEntering: _propTypes2.default.func,\r\n /**\r\n * Callback fired when the escape key is pressed,\r\n * `disableKeyboard` is false and the modal is in focus.\r\n */\r\n onEscapeKeyDown: _propTypes2.default.func,\r\n /**\r\n * Callback fired before the dialog exits.\r\n */\r\n onExit: _propTypes2.default.func,\r\n /**\r\n * Callback fired when the dialog has exited.\r\n */\r\n onExited: _propTypes2.default.func,\r\n /**\r\n * Callback fired when the dialog is exiting.\r\n */\r\n onExiting: _propTypes2.default.func,\r\n /**\r\n * If `true`, the Dialog is open.\r\n */\r\n open: _propTypes2.default.bool.isRequired,\r\n /**\r\n * Properties applied to the dialog's internal Paper element.\r\n */\r\n PaperProps: _propTypes2.default.object,\r\n /**\r\n * Determine the container for scrolling the dialog.\r\n */\r\n scroll: _propTypes2.default.oneOf(['body', 'paper']),\r\n /**\r\n * Whether to show a close 'x' in the title bar. Clicking this invokes the\r\n * `onClose` handler.\r\n */\r\n showTitleBarClose: _propTypes2.default.bool,\r\n /**\r\n * Transition component.\r\n */\r\n TransitionComponent: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object]),\r\n /**\r\n * The duration for the transition, in milliseconds.\r\n * You may specify a single timeout for all transitions, or individually with an object.\r\n */\r\n transitionDuration: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.shape({ enter: _propTypes2.default.number, exit: _propTypes2.default.number })]),\r\n /**\r\n * Properties applied to the `Transition` element.\r\n */\r\n TransitionProps: _propTypes2.default.object\r\n};\r\n\r\nDialog.defaultProps = {\r\n disableBackdropClick: false,\r\n disableEscapeKeyDown: false,\r\n fullScreen: false,\r\n fullWidth: false,\r\n maxWidth: 'sm',\r\n scroll: 'paper',\r\n showTitleBarClose: true\r\n};\r\n\r\nexports.default = (0, _EDSContext.withEDSContext)((0, _styles2.default)(styles)(Dialog));","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\r\n\r\nvar _react = require('react');\r\n\r\n/**\r\n * This is a custom hook to determine if the dialog consists of a `Datepicker` component.\r\n * If so the `enforceFocusFlag` is set to `true` momentarily to allow the control to go out of a `Dialog`.\r\n * TODO: This is a dirty hack and get rid of this code once we switch the date picker with some other lib.\r\n */\r\nfunction useEnforceFocusFlag() {\r\n var _useState = (0, _react.useState)(false),\r\n _useState2 = _slicedToArray(_useState, 2),\r\n disableEnforceFocusFlag = _useState2[0],\r\n setEnforceFocusFlag = _useState2[1];\r\n\r\n var onFocus = function onFocus(e) {\r\n if (e.target.querySelector('.DateInput_input')) {\r\n setEnforceFocusFlag(true);\r\n }\r\n };\r\n\r\n var onBlur = function onBlur(e) {\r\n if (e.target.getAttribute && e.target.getAttribute('tabindex') === '0') {\r\n setEnforceFocusFlag(false);\r\n }\r\n };\r\n\r\n return [disableEnforceFocusFlag, onFocus, onBlur];\r\n}\r\n\r\nexports.default = useEnforceFocusFlag;","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _DialogActions = require('@material-ui/core/DialogActions');\r\n\r\nvar _DialogActions2 = _interopRequireDefault(_DialogActions);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: _defineProperty({\r\n display: 'flex',\r\n flexDirection: 'column-reverse',\r\n margin: 0,\r\n padding: 0\r\n }, theme.breakpoints.up('sm'), {\r\n justifyContent: 'flex-end',\r\n flexDirection: 'row'\r\n }),\r\n\r\n spacing: {\r\n '& > button ': _defineProperty({\r\n margin: _tokens.spacingXSmall + ' 0',\r\n width: '100%'\r\n\r\n }, theme.breakpoints.up('sm'), {\r\n margin: '0 ' + _tokens.spacingXSmall,\r\n width: 'auto'\r\n })\r\n }\r\n\r\n };\r\n};\r\n\r\n/**\r\n * DialogActions are controls that live within a Dialog.\r\n */\r\nvar DialogActions = _react2.default.forwardRef(function (props, ref) {\r\n var children = props.children,\r\n classesProp = props.classes,\r\n rest = _objectWithoutProperties(props, ['children', 'classes']);\r\n\r\n var classes = {\r\n root: classesProp.root,\r\n spacing: classesProp.spacing\r\n };\r\n\r\n return _react2.default.createElement(\r\n _DialogActions2.default,\r\n Object.assign({ classes: classes }, rest, { ref: ref }),\r\n children\r\n );\r\n});\r\n\r\nDialogActions.muiName = 'DialogActions';\r\nDialogActions.displayName = 'DialogActions';\r\n\r\nDialogActions.propTypes = {\r\n /**\r\n * The content of the component.\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * If `true`, the dialog actions do not have additional margin.\r\n */\r\n disableSpacing: _propTypes2.default.bool\r\n};\r\n\r\nDialogActions.defaultProps = {\r\n disableSpacing: false\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles, { index: 0 })(DialogActions);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _DialogContent = require('@material-ui/core/DialogContent');\r\n\r\nvar _DialogContent2 = _interopRequireDefault(_DialogContent);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: {\r\n padding: '0 ' + _tokens.spacingMedium + ' ' + _tokens.spacingMedium\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * DialogContent is the main content that lives within a Dialog.\r\n */\r\nvar DialogContent = _react2.default.forwardRef(function (props, ref) {\r\n var children = props.children,\r\n classesProp = props.classes,\r\n rest = _objectWithoutProperties(props, ['children', 'classes']);\r\n\r\n var classes = {\r\n root: classesProp.root\r\n };\r\n\r\n return _react2.default.createElement(\r\n _DialogContent2.default,\r\n Object.assign({ classes: classes }, rest, { ref: ref }),\r\n children\r\n );\r\n});\r\n\r\nDialogContent.muiName = 'DialogContent';\r\nDialogContent.displayName = 'DialogContent';\r\n\r\nDialogContent.propTypes = {\r\n /**\r\n * The content of the component.\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(DialogContent);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _DialogContentText = require('@material-ui/core/DialogContentText');\r\n\r\nvar _DialogContentText2 = _interopRequireDefault(_DialogContentText);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: _defineProperty({\r\n fontFamily: theme.typography.fontFamily,\r\n fontSize: theme.typography.body2.fontSize,\r\n fontWeight: theme.typography.fontWeight,\r\n lineHeight: theme.typography.body2.lineHeight,\r\n marginBottom: _tokens.spacingSmall\r\n }, theme.breakpoints.up('sm'), {\r\n marginBottom: _tokens.spacingSmall\r\n })\r\n };\r\n};\r\n\r\n/**\r\n * DialogContentText is the text of the main content within a Dialog.\r\n */\r\nvar DialogContentText = _react2.default.forwardRef(function (props, ref) {\r\n var children = props.children,\r\n classesProp = props.classes,\r\n rest = _objectWithoutProperties(props, ['children', 'classes']);\r\n\r\n var classes = {\r\n root: classesProp.root\r\n };\r\n\r\n return _react2.default.createElement(\r\n _DialogContentText2.default,\r\n Object.assign({ classes: classes }, rest, { ref: ref }),\r\n children\r\n );\r\n});\r\n\r\nDialogContentText.muiName = 'DialogContentText';\r\nDialogContentText.displayName = 'DialogContentText';\r\n\r\nDialogContentText.propTypes = {\r\n /**\r\n * The content of the component.\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(DialogContentText);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _ = require('../');\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _DialogTitle = require('@material-ui/core/DialogTitle');\r\n\r\nvar _DialogTitle2 = _interopRequireDefault(_DialogTitle);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: {\r\n fontFamily: theme.typography.fontFamily,\r\n fontSize: theme.typography.h2.fontSize,\r\n fontWeight: theme.typography.fontWeight,\r\n lineHeight: theme.typography.h2.lineHeight,\r\n margin: 0,\r\n padding: _tokens.spacingXSmall2 + ' ' + _tokens.spacingXSmall2 + ' ' + _tokens.spacingSmall + ' ' + _tokens.spacingXSmall2\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * DialogTitle is the title within a Dialog.\r\n */\r\nvar DialogTitle = _react2.default.forwardRef(function (props, ref) {\r\n var children = props.children,\r\n disableTypography = props.disableTypography,\r\n classesProp = props.classes,\r\n rest = _objectWithoutProperties(props, ['children', 'disableTypography', 'classes']);\r\n\r\n var classes = {\r\n root: classesProp.root\r\n };\r\n\r\n // use our own typography element (if the user hasn't disabled typography for titles),\r\n // so that we can control the variant\r\n var titleContents = disableTypography ? children : _react2.default.createElement(\r\n _.Typography,\r\n { variant: 'h2' },\r\n children\r\n );\r\n\r\n return _react2.default.createElement(\r\n _DialogTitle2.default,\r\n Object.assign({ disableTypography: true, classes: classes }, rest, { ref: ref }),\r\n titleContents\r\n );\r\n});\r\n\r\nDialogTitle.muiName = 'DialogTitle';\r\nDialogTitle.displayName = 'DialogTitle';\r\n\r\nDialogTitle.propTypes = {\r\n /**\r\n * The content of the component.\r\n */\r\n children: _propTypes2.default.node.isRequired,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * If `true`, the children won't be wrapped by a typography component.\r\n * For instance, this can be useful to render an h4 instead of the default h2.\r\n */\r\n disableTypography: _propTypes2.default.bool\r\n};\r\n\r\nDialogTitle.defaultProps = {\r\n disableTypography: false\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(DialogTitle);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _ActionMenu = require('./ActionMenu');\r\n\r\nObject.defineProperty(exports, 'default', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_ActionMenu).default;\r\n }\r\n});\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\nexports.styles = undefined;\r\n\r\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _classnames = require('classnames');\r\n\r\nvar _classnames2 = _interopRequireDefault(_classnames);\r\n\r\nvar _v = require('uuid/v4');\r\n\r\nvar _v2 = _interopRequireDefault(_v);\r\n\r\nvar _reactPopper = require('react-popper');\r\n\r\nvar _debounce = require('lodash/debounce');\r\n\r\nvar _debounce2 = _interopRequireDefault(_debounce);\r\n\r\nvar _ClickAwayListener = require('@material-ui/core/ClickAwayListener');\r\n\r\nvar _ClickAwayListener2 = _interopRequireDefault(_ClickAwayListener);\r\n\r\nvar _Grow = require('@material-ui/core/Grow');\r\n\r\nvar _Grow2 = _interopRequireDefault(_Grow);\r\n\r\nvar _Paper = require('@material-ui/core/Paper');\r\n\r\nvar _Paper2 = _interopRequireDefault(_Paper);\r\n\r\nvar _MenuItem = require('@material-ui/core/MenuItem');\r\n\r\nvar _MenuItem2 = _interopRequireDefault(_MenuItem);\r\n\r\nvar _MenuList = require('@material-ui/core/MenuList');\r\n\r\nvar _MenuList2 = _interopRequireDefault(_MenuList);\r\n\r\nvar _EDSContext = require('../EDSContext/EDSContext');\r\n\r\nvar _IconButton = require('../IconButton/IconButton');\r\n\r\nvar _IconButton2 = _interopRequireDefault(_IconButton);\r\n\r\nvar _MoreVertical = require('@eui/ds-icons/lib/MoreVertical');\r\n\r\nvar _MoreVertical2 = _interopRequireDefault(_MoreVertical);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\r\n\r\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\r\n\r\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\r\n\r\nvar styles = exports.styles = function styles(theme) {\r\n return {\r\n root: {\r\n display: 'inline-block',\r\n '& .paper': {\r\n boxShadow: 'none'\r\n }\r\n },\r\n iconButton: {\r\n borderRadius: _tokens.borderRadiusSmall,\r\n fontSize: '1.2rem',\r\n '&:focus': {\r\n boxShadow: '0 0 0 ' + _tokens.borderWidthThick + ' ' + theme.palette.focus\r\n },\r\n '&.color': {\r\n color: theme.palette.grey[500]\r\n },\r\n '&.color:hover': {\r\n background: 'none',\r\n color: theme.palette.ctaColor.base\r\n },\r\n '&.color:active': {\r\n background: 'none',\r\n color: theme.palette.ctaColor.base\r\n },\r\n '&.actionMenuOpen': {\r\n color: theme.palette.ctaColor.base\r\n },\r\n '&.actionMenuOpen:after': {\r\n position: 'absolute',\r\n width: '0.625rem',\r\n height: '0.625rem',\r\n top: 'auto',\r\n bottom: '-0.3rem',\r\n left: '1.05rem',\r\n content: '\"\"',\r\n background: 'linear-gradient(-45deg, white 0%, white 54%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%)',\r\n borderRight: _tokens.borderWidthThin + ' solid ' + theme.palette.grey[400],\r\n borderBottom: _tokens.borderWidthThin + ' solid ' + theme.palette.grey[400],\r\n transform: 'rotate(-135deg)',\r\n borderBottomRightRadius: _tokens.borderRadiusXSmall,\r\n zIndex: theme.zIndex.actionMenu + 1\r\n },\r\n '&.actionMenuOpen.topPlacement:after': {\r\n bottom: 'auto',\r\n top: '-0.3rem',\r\n transform: 'rotate(45deg)'\r\n }\r\n },\r\n popperClose: {\r\n pointerEvents: 'none'\r\n },\r\n popperOpen: {\r\n zIndex: theme.zIndex.actionMenu\r\n },\r\n menuList: {\r\n maxWidth: '18.750rem',\r\n borderRadius: '' + _tokens.borderRadiusXSmall,\r\n border: _tokens.borderWidthThin + ' solid ' + theme.palette.grey[400],\r\n boxShadow: 'none'\r\n },\r\n menuListItem: {\r\n // Since menu list item is pulling from MUI, have to override to match recommended list\r\n fontFamily: theme.typography.fontFamily,\r\n fontSize: theme.typography.fontSize,\r\n fontWeight: theme.typography.fontWeightNormal,\r\n lineHeight: _tokens.lineHeightParagraphMedium,\r\n textOverflow: 'ellipsis',\r\n '&.padding': {\r\n padding: _tokens.spacingSmall + ' 1.25rem',\r\n display: 'block'\r\n },\r\n '&:hover': {\r\n color: '' + theme.palette.grey[600],\r\n backgroundColor: theme.palette.grey[250]\r\n },\r\n '&:focus': {\r\n color: '' + theme.palette.grey[100],\r\n backgroundColor: theme.palette.action.hover\r\n },\r\n '&:active': {\r\n backgroundColor: theme.palette.ctaColor.base\r\n }\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * Use `ActionMenu` to give users access to additional actions related to a field.\r\n * @done true\r\n * @updated true\r\n * @versionAdded v0.0.8\r\n * @examples\r\n * BasicActionMenuExamples\r\n * PlacementActionMenuExamples\r\n */\r\n\r\nvar ActionMenu = function (_React$Component) {\r\n _inherits(ActionMenu, _React$Component);\r\n\r\n function ActionMenu(props) {\r\n _classCallCheck(this, ActionMenu);\r\n\r\n var _this = _possibleConstructorReturn(this, (ActionMenu.__proto__ || Object.getPrototypeOf(ActionMenu)).call(this, props));\r\n\r\n _this.handleToggle = function () {\r\n _this.setState({ open: !_this.state.open }, function () {\r\n if (_this.state.open) {\r\n _this.registerEvents();\r\n } else {\r\n _this.removeEvents();\r\n }\r\n\r\n // Queue it for execution from event queue as there is some timing issue.\r\n // TODO: Revisit this code later\r\n setTimeout(function () {\r\n return _this.setInverted();\r\n });\r\n });\r\n };\r\n\r\n _this.handleClose = function (event, item) {\r\n if (_this.target.contains(event.target)) {\r\n return;\r\n }\r\n\r\n if (item) {\r\n item.callback(item);\r\n }\r\n\r\n _this.removeEvents();\r\n _this.setState({ open: false });\r\n };\r\n\r\n _this.popperRef = _react2.default.createRef();\r\n _this.findMenuPlacement = (0, _debounce2.default)(_this.findMenuPlacement.bind(_this), 0);\r\n _this.placements = ['top-start', 'top-end'];\r\n\r\n _this.state = {\r\n open: props.initialOpenOverride, // action menu is closed by default, unless an override is passed in\r\n invertedMenu: false\r\n };\r\n return _this;\r\n }\r\n\r\n _createClass(ActionMenu, [{\r\n key: 'registerEvents',\r\n value: function registerEvents() {\r\n window.addEventListener('resize', this.findMenuPlacement);\r\n window.addEventListener('scroll', this.findMenuPlacement, true);\r\n }\r\n }, {\r\n key: 'removeEvents',\r\n value: function removeEvents() {\r\n window.removeEventListener('resize', this.findMenuPlacement);\r\n window.removeEventListener('scroll', this.findMenuPlacement, true);\r\n }\r\n }, {\r\n key: 'componentWillUnmount',\r\n value: function componentWillUnmount() {\r\n // Making sure to remove listeners\r\n this.removeEvents();\r\n }\r\n }, {\r\n key: 'findMenuPlacement',\r\n value: function findMenuPlacement() {\r\n if (this.state.open) {\r\n this.setInverted();\r\n }\r\n }\r\n }, {\r\n key: 'setInverted',\r\n value: function setInverted() {\r\n var placement = this.popperRef.current.state.data.placement;\r\n\r\n this.setState({\r\n invertedMenu: this.placements.indexOf(placement) !== -1\r\n });\r\n }\r\n }, {\r\n key: 'render',\r\n value: function render() {\r\n var _this2 = this,\r\n _classNames2;\r\n\r\n var _props = this.props,\r\n classes = _props.classes,\r\n actions = _props.actions,\r\n placement = _props.placement,\r\n menuId = _props.menuId,\r\n edsContext = _props.edsContext;\r\n var _state = this.state,\r\n open = _state.open,\r\n invertedMenu = _state.invertedMenu;\r\n // const classOverrides = {\r\n // root:\r\n // selelcted: classes.selected\r\n // }\r\n\r\n var menuItems = actions.map(function (item, index) {\r\n return _react2.default.createElement(\r\n _MenuItem2.default,\r\n {\r\n onClick: function onClick(e) {\r\n return _this2.handleClose(e, item);\r\n },\r\n key: (0, _v2.default)(),\r\n tabIndex: index === 0 ? 0 : -1,\r\n className: classes.menuListItem + ' padding' // Not sure if this is the way to increase the Specificity of css\r\n },\r\n item.label\r\n );\r\n });\r\n\r\n return _react2.default.createElement(\r\n 'div',\r\n { className: classes.root },\r\n _react2.default.createElement(\r\n _reactPopper.Manager,\r\n null,\r\n _react2.default.createElement(\r\n _reactPopper.Target,\r\n { className: 'menuTarget' },\r\n _react2.default.createElement(\r\n 'div',\r\n {\r\n ref: function ref(node) {\r\n _this2.target = node;\r\n },\r\n className: 'menuTargetInner'\r\n },\r\n _react2.default.createElement(\r\n _IconButton2.default,\r\n {\r\n disableRipple: true,\r\n title: edsContext.formatMessage('component.ActionMenu.more'),\r\n 'aria-label': edsContext.formatMessage('component.ActionMenu.more'),\r\n 'aria-expanded': open,\r\n 'aria-haspopup': 'true',\r\n 'aria-controls': menuId,\r\n onClick: this.handleToggle,\r\n color: 'gray',\r\n className: (0, _classnames2.default)(_defineProperty({}, classes.iconButton + ' color', true), { 'actionMenuOpen': open }, { 'topPlacement': invertedMenu }),\r\n tabIndex: 0\r\n },\r\n _react2.default.createElement(_MoreVertical2.default, null)\r\n )\r\n )\r\n ),\r\n _react2.default.createElement(\r\n _reactPopper.Popper,\r\n {\r\n ref: this.popperRef,\r\n placement: placement,\r\n eventsEnabled: open,\r\n className: (0, _classnames2.default)('eds-actionmenu-popper', (_classNames2 = {}, _defineProperty(_classNames2, classes.popperClose, !open), _defineProperty(_classNames2, classes.popperOpen, open), _classNames2))\r\n },\r\n _react2.default.createElement(\r\n _ClickAwayListener2.default,\r\n { onClickAway: this.handleClose },\r\n _react2.default.createElement(\r\n _Grow2.default,\r\n { 'in': open, className: 'eds-action-menu', style: { transformOrigin: '0 0 0' } },\r\n _react2.default.createElement(\r\n _Paper2.default,\r\n { className: classes.root + ' paper' },\r\n _react2.default.createElement(\r\n _MenuList2.default,\r\n { id: menuId, role: 'menu', className: classes.menuList },\r\n menuItems\r\n )\r\n )\r\n )\r\n )\r\n )\r\n )\r\n );\r\n }\r\n }]);\r\n\r\n return ActionMenu;\r\n}(_react2.default.Component);\r\n\r\nActionMenu.propTypes = {\r\n /**\r\n * Classes used to extend original style object.\r\n */\r\n classes: _propTypes2.default.object,\r\n\r\n /**\r\n * Actions and label for the actions to be taken from the `ActionMenu`.\r\n */\r\n actions: _propTypes2.default.arrayOf(_propTypes2.default.object).isRequired,\r\n /**\r\n * @ignore\r\n */\r\n edsContext: _propTypes2.default.object,\r\n\r\n /**\r\n * Menu HTML ID for uniqueness.\r\n */\r\n menuId: _propTypes2.default.string,\r\n\r\n /**\r\n * Placement is used to place the menu at start or end of the container or screen.\r\n * Values include `bottom-start` or `bottom-end`.\r\n */\r\n placement: _propTypes2.default.string,\r\n\r\n /**\r\n * @ignore\r\n *\r\n * Externally set the initial open state of the action menu. For testing purposes only.\r\n */\r\n initialOpenOverride: _propTypes2.default.bool\r\n\r\n};\r\n\r\nActionMenu.defaultProps = {\r\n placement: 'bottom-end',\r\n initialOpenOverride: false\r\n};\r\n\r\nexports.default = (0, _EDSContext.withEDSContext)((0, _styles2.default)(styles)(ActionMenu));","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _Switch = require('./Switch');\r\n\r\nObject.defineProperty(exports, 'default', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_Switch).default;\r\n }\r\n});\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _Switch = require('@material-ui/core/Switch');\r\n\r\nvar _Switch2 = _interopRequireDefault(_Switch);\r\n\r\nvar _classnames = require('classnames');\r\n\r\nvar _classnames2 = _interopRequireDefault(_classnames);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\r\n\r\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\r\n\r\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: {\r\n width: '3.75rem',\r\n height: '3rem',\r\n padding: '0.9375rem 0.5rem 0.75rem 0.75rem'\r\n },\r\n switchBase: {\r\n '&$checked': {\r\n color: theme.palette.grey[100],\r\n '& + $barBase': {\r\n opacity: 1,\r\n backgroundColor: theme.palette.ctaColor.base,\r\n border: 'none'\r\n },\r\n '& $iconBase': {\r\n boxShadow: 'none',\r\n border: 'none !important'\r\n },\r\n '&:hover': {\r\n backgroundColor: 'transparent'\r\n }\r\n },\r\n '&:hover': {\r\n backgroundColor: 'transparent'\r\n },\r\n top: '8px',\r\n left: '5px'\r\n },\r\n checked: {\r\n left: '58px !important',\r\n display: 'block'\r\n },\r\n barBase: {\r\n borderRadius: '0.75rem',\r\n width: _tokens.sizingXLarge,\r\n height: '1.25rem',\r\n backgroundColor: theme.palette.grey[100],\r\n opacity: 1,\r\n transition: 'none'\r\n },\r\n bar: {\r\n '& + $barBase': {\r\n border: _tokens.borderWidthThick + ' solid ' + theme.palette.grey[400]\r\n }\r\n },\r\n barFocused: {\r\n '& + $barBase': {\r\n border: _tokens.borderWidthThick + ' solid ' + theme.palette.grey[400],\r\n boxShadow: _tokens.boxShadowFocus\r\n },\r\n '&$checked': {\r\n '& + $barBase': {\r\n boxShadow: _tokens.boxShadowFocus\r\n }\r\n }\r\n },\r\n disabledOff: {\r\n '& + $barBase': {\r\n opacity: 1,\r\n backgroundColor: theme.palette.grey[300]\r\n },\r\n '&$switchBase': {\r\n color: theme.palette.grey[300], //disabled off circle\r\n boxShadow: 'none',\r\n '& + $barBase': {\r\n opacity: 1,\r\n backgroundColor: theme.palette.grey[300], //disabled off background\r\n border: _tokens.borderWidthThick + ' solid ' + theme.palette.grey[400] //disabled off border\r\n }\r\n }\r\n },\r\n disabledOn: {\r\n '& + $barBase': {\r\n opacity: 1,\r\n backgroundColor: theme.palette.grey[300]\r\n },\r\n '&$switchBase': {\r\n color: theme.palette.grey[300], //disabled on circle\r\n boxShadow: 'none',\r\n '& + $barBase': {\r\n opacity: 1,\r\n backgroundColor: theme.palette.grey[400], //disabled on background\r\n border: _tokens.borderWidthThick + ' solid ' + theme.palette.grey[400] //disabled on border\r\n }\r\n }\r\n },\r\n iconBase: {\r\n width: _tokens.sizingSmall,\r\n height: _tokens.sizingSmall\r\n },\r\n iconOn: {\r\n boxShadow: 'none',\r\n border: 'none !important'\r\n },\r\n iconOnDisabled: {\r\n boxShadow: 'none',\r\n border: 'none !important',\r\n color: theme.palette.grey[300]\r\n },\r\n iconOff: {\r\n color: theme.palette.grey[100],\r\n border: _tokens.borderWidthThin + ' solid ' + theme.palette.grey[400],\r\n boxShadow: 'none !important' //MUI applies a very stubborn box-shadow when a border is added\r\n },\r\n iconOffDisabled: {\r\n border: _tokens.borderWidthThin + ' solid ' + theme.palette.grey[400],\r\n boxShadow: 'none !important' //MUI applies a very stubborn box-shadow when a border is added\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * Use `Switch` to select one of two options, typically a \"yes/no\" or an \"on/off\" selection.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.8\r\n * @examples\r\n * SwitchExamples\r\n * ControlledExample\r\n * SwitchFormGroup\r\n * SwitchLabels\r\n */\r\n\r\nvar Switch = function (_React$Component) {\r\n _inherits(Switch, _React$Component);\r\n\r\n function Switch(props) {\r\n _classCallCheck(this, Switch);\r\n\r\n var _this = _possibleConstructorReturn(this, (Switch.__proto__ || Object.getPrototypeOf(Switch)).call(this, props));\r\n\r\n _this.state = {\r\n isFocused: false\r\n };\r\n _this.handleFocus = _this.handleFocus.bind(_this);\r\n _this.handleBlur = _this.handleBlur.bind(_this);\r\n return _this;\r\n }\r\n\r\n _createClass(Switch, [{\r\n key: 'handleFocus',\r\n value: function handleFocus(e) {\r\n if (this.props.onFocus) {\r\n this.props.onFocus(e);\r\n }\r\n this.setState(function (prevState) {\r\n return {\r\n isFocused: true\r\n };\r\n });\r\n }\r\n }, {\r\n key: 'handleBlur',\r\n value: function handleBlur(e) {\r\n if (this.props.onBlur) {\r\n this.props.onBlur(e);\r\n }\r\n this.setState(function (prevState) {\r\n return {\r\n isFocused: false\r\n };\r\n });\r\n }\r\n }, {\r\n key: 'render',\r\n value: function render() {\r\n var isFocused = this.state.isFocused;\r\n\r\n var _props = this.props,\r\n classes = _props.classes,\r\n checked = _props.checked,\r\n disabled = _props.disabled,\r\n rest = _objectWithoutProperties(_props, ['classes', 'checked', 'disabled']);\r\n\r\n var classOverrides = {\r\n switchBase: (0, _classnames2.default)(classes.switchBase, isFocused ? classes.barFocused : classes.bar),\r\n track: classes.barBase,\r\n root: classes.root,\r\n disabled: checked ? classes.disabledOn : classes.disabledOff,\r\n thumb: (0, _classnames2.default)(classes.iconBase, disabled ? classes.iconOffDisabled : classes.iconOff),\r\n checked: classes.checked\r\n };\r\n\r\n return _react2.default.createElement(_Switch2.default, Object.assign({\r\n onFocus: this.handleFocus,\r\n onBlur: this.handleBlur,\r\n color: 'secondary',\r\n disableRipple: true,\r\n classes: classOverrides,\r\n checked: checked,\r\n disabled: disabled\r\n }, rest));\r\n }\r\n }]);\r\n\r\n return Switch;\r\n}(_react2.default.Component);\r\n\r\nSwitch.muiName = 'Switch';\r\nSwitch.displayName = 'Switch';\r\n\r\nSwitch.propTypes = {\r\n /**\r\n * If `true`, the component is checked.\r\n */\r\n checked: _propTypes2.default.bool,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * If true, the switch will be disabled.\r\n */\r\n disabled: _propTypes2.default.bool,\r\n /**\r\n * The id of the input element.\r\n */\r\n id: _propTypes2.default.string,\r\n /**\r\n * Attributes applied to the input element.\r\n */\r\n inputProps: _propTypes2.default.object,\r\n /**\r\n * Use this property to pass a ref callback to the native input component.\r\n */\r\n inputRef: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.object]),\r\n /**\r\n * Callback fired when the state is changed.\r\n */\r\n onChange: _propTypes2.default.func,\r\n /**\r\n * @ignore\r\n */\r\n onBlur: _propTypes2.default.func,\r\n /**\r\n * @ignore\r\n */\r\n onFocus: _propTypes2.default.func\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(Switch);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _Divider = require('@material-ui/core/Divider');\r\n\r\nvar _Divider2 = _interopRequireDefault(_Divider);\r\n\r\nvar _classnames = require('classnames');\r\n\r\nvar _classnames2 = _interopRequireDefault(_classnames);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: {\r\n backgroundColor: theme.palette.grey[400],\r\n marginTop: _tokens.spacingSmall,\r\n marginBottom: _tokens.spacingSmall\r\n },\r\n middle: {\r\n marginLeft: _tokens.spacingSmall,\r\n marginRight: _tokens.spacingSmall\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * Use `Divider` to group and separate content within lists and page layouts.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.11\r\n * @examples\r\n * FullBleedDividerExample\r\n * MiddleDividerExample\r\n */\r\nvar Divider = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n variant = props.variant,\r\n rest = _objectWithoutProperties(props, ['classes', 'variant']);\r\n\r\n var classOverrides = {\r\n root: (0, _classnames2.default)(classes.root, _defineProperty({}, classes.middle, variant === 'middle'))\r\n };\r\n\r\n return _react2.default.createElement(_Divider2.default, Object.assign({}, rest, { classes: classOverrides, ref: ref }));\r\n});\r\n\r\nDivider.muiName = 'Divider';\r\nDivider.displayName = 'Divider';\r\n\r\nDivider.propTypes = {\r\n absolute: _propTypes2.default.bool,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * The component used for the root node.\r\n * Either a string to use a DOM element or a component.\r\n */\r\n component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object]),\r\n /**\r\n * Specifies fullbleed or middle Divider styling. Default is fullbleed.\r\n */\r\n variant: _propTypes2.default.oneOf(['fullbleed', 'middle'])\r\n};\r\n\r\nDivider.defaultProps = {\r\n variant: 'fullbleed'\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(Divider);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _Snackbar = require('./Snackbar');\r\n\r\nObject.defineProperty(exports, 'default', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_Snackbar).default;\r\n }\r\n});\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _Snackbar = require('@material-ui/core/Snackbar');\r\n\r\nvar _Snackbar2 = _interopRequireDefault(_Snackbar);\r\n\r\nvar _useWidth = require('./../useWidth');\r\n\r\nvar _useWidth2 = _interopRequireDefault(_useWidth);\r\n\r\nvar _ = require('../');\r\n\r\nvar _CheckFeedback = require('@eui/ds-icons/lib/CheckFeedback');\r\n\r\nvar _CheckFeedback2 = _interopRequireDefault(_CheckFeedback);\r\n\r\nvar _Warning = require('@eui/ds-icons/lib/Warning');\r\n\r\nvar _Warning2 = _interopRequireDefault(_Warning);\r\n\r\nvar _Error = require('@eui/ds-icons/lib/Error');\r\n\r\nvar _Error2 = _interopRequireDefault(_Error);\r\n\r\nvar _Info = require('@eui/ds-icons/lib/Info');\r\n\r\nvar _Info2 = _interopRequireDefault(_Info);\r\n\r\nvar _EDSContext = require('../EDSContext/EDSContext');\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nvar commonStyles = {\r\n top: _tokens.sizingXxLarge1,\r\n margin: _tokens.spacingLarge\r\n};\r\n\r\nvar commonMobileStyles = {\r\n margin: _tokens.spacingSmall\r\n};\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: {\r\n zIndex: _tokens.zIndexSnackbar\r\n },\r\n anchorOriginTopRight: Object.assign({}, commonStyles, _defineProperty({\r\n right: 0\r\n }, theme.breakpoints.between('xs', 'sm'), Object.assign({}, commonMobileStyles))),\r\n anchorOriginTopCenter: Object.assign({}, commonStyles, _defineProperty({}, theme.breakpoints.between('xs', 'sm'), Object.assign({}, commonMobileStyles))),\r\n anchorOriginTopLeft: Object.assign({}, commonStyles, _defineProperty({}, theme.breakpoints.between('xs', 'sm'), Object.assign({}, commonMobileStyles))),\r\n anchorOriginBottomCenter: _defineProperty({\r\n margin: _tokens.spacingLarge\r\n }, theme.breakpoints.between('xs', 'sm'), Object.assign({}, commonMobileStyles)),\r\n anchorOriginBottomLeft: _defineProperty({}, theme.breakpoints.between('xs', 'sm'), Object.assign({}, commonMobileStyles)),\r\n anchorOriginBottomRight: _defineProperty({}, theme.breakpoints.between('xs', 'sm'), Object.assign({}, commonMobileStyles)),\r\n contentPropsStyles: _defineProperty({\r\n minWidth: '21.5rem',\r\n backgroundColor: _tokens.colorBrandNeutral500,\r\n color: _tokens.colorTextNeutral100,\r\n fontSize: _tokens.fontSizeLarge\r\n }, theme.breakpoints.between('xs', 'sm'), {\r\n borderRadius: _tokens.borderRadiusMedium\r\n }),\r\n contentMessage: {\r\n marginRight: _tokens.spacingLarge,\r\n flex: 1\r\n },\r\n message: {\r\n width: _tokens.widthFluid\r\n },\r\n snackbarContent: {\r\n display: 'flex',\r\n alignItems: 'center'\r\n },\r\n undoAction: {\r\n '& a, a:hover': {\r\n color: _tokens.colorTextNeutral100,\r\n textDecoration: 'underline'\r\n }\r\n },\r\n customAction: {\r\n marginRight: _tokens.spacingXSmall\r\n },\r\n icon: {\r\n marginRight: _tokens.spacingXSmall,\r\n height: _tokens.sizingMedium,\r\n width: _tokens.sizingMedium,\r\n fill: _tokens.colorTextNeutral100\r\n }\r\n };\r\n};\r\n\r\nvar snackbarVariant = {\r\n success: _CheckFeedback2.default,\r\n warning: _Warning2.default,\r\n error: _Error2.default,\r\n info: _Info2.default\r\n};\r\n\r\nvar CustomMessage = _react2.default.forwardRef(function (props, ref) {\r\n var variant = props.variant,\r\n message = props.message,\r\n onUndoClick = props.onUndoClick,\r\n action = props.action,\r\n classes = props.classes,\r\n edsContext = props.edsContext;\r\n\r\n var SnackbarIcon = function SnackbarIcon() {\r\n return null;\r\n };\r\n var undoAction = null;\r\n\r\n if (variant) {\r\n SnackbarIcon = snackbarVariant[variant];\r\n }\r\n\r\n if (onUndoClick) {\r\n undoAction = _react2.default.createElement(\r\n _.Button,\r\n {\r\n variant: 'text',\r\n withDarkBackground: true,\r\n onClick: onUndoClick\r\n },\r\n edsContext.formatMessage('component.Snackbar.undo')\r\n );\r\n }\r\n\r\n return _react2.default.createElement(\r\n 'div',\r\n { className: classes.snackbarContent },\r\n _react2.default.createElement(SnackbarIcon, { className: classes.icon, ref: ref }),\r\n _react2.default.createElement(\r\n 'span',\r\n { className: classes.contentMessage },\r\n message\r\n ),\r\n action && _react2.default.createElement(\r\n 'span',\r\n { className: classes.customAction },\r\n action\r\n ),\r\n undoAction && _react2.default.createElement(\r\n 'span',\r\n { className: classes.undoAction },\r\n undoAction\r\n )\r\n );\r\n});\r\n\r\nCustomMessage.propTypes = {\r\n /**\r\n * The action to display.\r\n */\r\n action: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * The message to display.\r\n */\r\n message: _propTypes2.default.node,\r\n /**\r\n * Variants of the Snackbar. Choose from these ['success', 'error', 'warning', 'info'].\r\n */\r\n variant: _propTypes2.default.oneOf(['success', 'error', 'warning', 'info']),\r\n /**\r\n * Callback fired when the undo action is clicked.\r\n * If this callback is present Snackbar will add Undo button automatically\r\n */\r\n onUndoClick: _propTypes2.default.func,\r\n /**\r\n * @ignore\r\n */\r\n edsContext: _propTypes2.default.object\r\n};\r\n\r\nvar DEFAULT_DURATION = 5000;\r\nvar ACTIONABLE_DEFAULT_DURATION = 7000;\r\n\r\n/**\r\n * Use `Snackbar` to deliver low-urgency communication to the user.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.8\r\n * @examples\r\n * SnackbarExamples\r\n */\r\nvar Snackbar = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n ContentProps = props.ContentProps,\r\n action = props.action,\r\n onUndoClick = props.onUndoClick,\r\n anchorOrigin = props.anchorOrigin,\r\n bottom = props.bottom,\r\n edsContext = props.edsContext,\r\n autoHideDuration = props.autoHideDuration,\r\n rest = _objectWithoutProperties(props, ['classes', 'ContentProps', 'action', 'onUndoClick', 'anchorOrigin', 'bottom', 'edsContext', 'autoHideDuration']);\r\n\r\n var width = (0, _useWidth2.default)();\r\n var shouldAddMobileCustomStyles = function shouldAddMobileCustomStyles() {\r\n return (width === 'xs' || width === 'sm') && !anchorOrigin;\r\n };\r\n var getNewAutoHideDuration = function getNewAutoHideDuration() {\r\n var defatulDuration = onUndoClick || action ? ACTIONABLE_DEFAULT_DURATION : DEFAULT_DURATION;\r\n\r\n return autoHideDuration || defatulDuration;\r\n };\r\n\r\n var classOverrides = {\r\n root: classes.root,\r\n anchorOriginTopRight: classes.anchorOriginTopRight,\r\n anchorOriginTopCenter: classes.anchorOriginTopCenter,\r\n anchorOriginTopLeft: classes.anchorOriginTopLeft,\r\n anchorOriginBottomCenter: classes.anchorOriginBottomCenter,\r\n anchorOriginBottomRight: classes.anchorOriginBottomRight,\r\n anchorOriginBottomLeft: classes.anchorOriginBottomLeft\r\n };\r\n\r\n // This line will help screen read to read popper content.\r\n if (!ContentProps['aria-live']) {\r\n ContentProps['aria-live'] = 'assertive';\r\n }\r\n var contentProps = Object.assign({\r\n classes: {\r\n root: classes.contentPropsStyles,\r\n message: classes.message\r\n },\r\n style: shouldAddMobileCustomStyles() && bottom ? { marginBottom: bottom } : {}\r\n }, ContentProps);\r\n\r\n var propOverrides = {\r\n autoHideDuration: getNewAutoHideDuration(),\r\n // Custom actions need to be inserted in particular order which is done in `
`.\r\n action: null,\r\n anchorOrigin: anchorOrigin || { vertical: 'top', horizontal: 'right' }\r\n };\r\n\r\n if (shouldAddMobileCustomStyles()) {\r\n propOverrides.anchorOrigin = { vertical: 'bottom', horizontal: 'center' };\r\n }\r\n\r\n return _react2.default.createElement(_Snackbar2.default, Object.assign({}, rest, propOverrides, {\r\n classes: classOverrides,\r\n message: _react2.default.createElement(CustomMessage, Object.assign({ formatMessage: edsContext.formatMessage }, props, { ref: ref })),\r\n ContentProps: contentProps,\r\n ClickAwayListenerProps: {\r\n onClickAway: function onClickAway() {} // Prevent hiding on clickway\r\n },\r\n ref: ref\r\n }));\r\n});\r\n\r\nSnackbar.muiName = 'Snackbar';\r\nSnackbar.displayName = 'Snackbar';\r\n\r\nSnackbar.propTypes = {\r\n /**\r\n * The number of milliseconds to wait before `Snackbar` automatically closes.\r\n * Defaults to 5secs for nonactionable `Snackbar`s and 7secs for actionable `Snackbar`s.\r\n * This can be overridden by the users.\r\n */\r\n autoHideDuration: _propTypes2.default.number,\r\n /**\r\n * The custom action for Snackbar to display.\r\n * Undo action is built in to Snackbar but if you need more actions to perform, you can use `action` prop.\r\n */\r\n action: _propTypes2.default.node,\r\n /**\r\n * The anchor of the `Snackbar`. Defaults to top, right.\r\n */\r\n anchorOrigin: _propTypes2.default.shape({\r\n horizontal: _propTypes2.default.oneOf(['left', 'center', 'right']).isRequired,\r\n vertical: _propTypes2.default.oneOf(['top', 'bottom']).isRequired\r\n }),\r\n /**\r\n * If you wish the take control over the children of the component you can use this property.\r\n * When used, you replace the `SnackbarContent` component with the children.\r\n */\r\n children: _propTypes2.default.element,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * Properties applied to the `SnackbarContent` element.\r\n */\r\n ContentProps: _propTypes2.default.object,\r\n /**\r\n * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.\r\n */\r\n disableWindowBlurListener: _propTypes2.default.bool,\r\n /**\r\n * When displaying multiple consecutive Snackbars from a parent rendering a single\r\n *
, add the key property to ensure independent treatment of each message.\r\n * e.g.
, otherwise, the message may update-in-place and\r\n * features such as autoHideDuration may be canceled.\r\n */\r\n key: _propTypes2.default.any,\r\n /**\r\n * The message to display.\r\n */\r\n message: _propTypes2.default.node,\r\n /**\r\n * Callback fired when the component requests to be closed.\r\n * Typically `onClose` is used to set state in the parent component,\r\n * which is used to control the `Snackbar` `open` prop.\r\n * The `reason` parameter can optionally be used to control the response to `onClose`,\r\n * for example ignoring `clickaway`.\r\n *\r\n * @param {object} event The event source of the callback\r\n * @param {string} reason Can be:`\"timeout\"` (`autoHideDuration` expired) or: `\"clickaway\"`\r\n */\r\n onClose: _propTypes2.default.func,\r\n /**\r\n * Callback fired before the transition is entering.\r\n */\r\n onEnter: _propTypes2.default.func,\r\n /**\r\n * Callback fired when the transition has entered.\r\n */\r\n onEntered: _propTypes2.default.func,\r\n /**\r\n * Callback fired when the transition is entering.\r\n */\r\n onEntering: _propTypes2.default.func,\r\n /**\r\n * Callback fired before the transition is exiting.\r\n */\r\n onExit: _propTypes2.default.func,\r\n /**\r\n * Callback fired when the transition has exited.\r\n */\r\n onExited: _propTypes2.default.func,\r\n /**\r\n * Callback fired when the transition is exiting.\r\n */\r\n onExiting: _propTypes2.default.func,\r\n /**\r\n * @ignore\r\n */\r\n onMouseEnter: _propTypes2.default.func,\r\n /**\r\n * @ignore\r\n */\r\n onMouseLeave: _propTypes2.default.func,\r\n /**\r\n * If true, `Snackbar` is open.\r\n */\r\n open: _propTypes2.default.bool,\r\n /**\r\n * The number of milliseconds to wait before dismissing after user interaction.\r\n * If `autoHideDuration` property isn't specified, it does nothing.\r\n * If `autoHideDuration` property is specified but `resumeHideDuration` isn't,\r\n * we default to `autoHideDuration / 2` ms.\r\n */\r\n resumeHideDuration: _propTypes2.default.number,\r\n /**\r\n * Transition component.\r\n */\r\n TransitionComponent: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object]),\r\n /**\r\n * The duration for the transition, in milliseconds.\r\n * You may specify a single timeout for all transitions, or individually with an object.\r\n */\r\n transitionDuration: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.shape({ enter: _propTypes2.default.number, exit: _propTypes2.default.number })]),\r\n /**\r\n * Properties applied to the `Transition` element.\r\n */\r\n TransitionProps: _propTypes2.default.object,\r\n /**\r\n * Variants of the Snackbar. Choose from these ['success', 'error', 'warning', 'info'].\r\n */\r\n variant: _propTypes2.default.oneOf(['success', 'error', 'warning', 'info']),\r\n /**\r\n * Callback fired when the undo action is clicked.\r\n * If this callback is present Snackbar will add Undo button automatically\r\n */\r\n onUndoClick: _propTypes2.default.func,\r\n /**\r\n * @ignore\r\n * Width based on the viewport size like xs, sm, md etc\r\n */\r\n width: _propTypes2.default.string,\r\n /**\r\n * Set the bottom in case of CTA bottom actions on mobile or floating button desktop.\r\n * Use the CSS units like `rem` or `px`\r\n */\r\n bottom: _propTypes2.default.string,\r\n /**\r\n * @ignore\r\n */\r\n edsContext: _propTypes2.default.object\r\n};\r\n\r\nSnackbar.defaultProps = {\r\n ContentProps: {}\r\n};\r\n\r\nexports.default = (0, _EDSContext.withEDSContext)((0, _styles2.default)(styles)(Snackbar));","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _styles = require('@material-ui/core/styles');\r\n\r\nvar _useMediaQuery = require('../useMediaQuery');\r\n\r\nvar _useMediaQuery2 = _interopRequireDefault(_useMediaQuery);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\r\n\r\n/**\r\n * Be careful using this hook. It only works because the number of\r\n * breakpoints in theme is static. It will break once you change the number of\r\n * breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level\r\n * https://material-ui.com/components/use-media-query/#migrating-from-withwidth\r\n */\r\n\r\n/**\r\n * This method returns the size of the viewport on which an app is running.\r\n * Return value would be one of 'xs', 'sm', 'md', 'lg', 'xl'.\r\n */\r\nvar useWidth = function useWidth() {\r\n var theme = (0, _styles.useTheme)();\r\n var keys = [].concat(_toConsumableArray(theme.breakpoints.keys)).reverse();\r\n\r\n return keys.reduce(function (output, key) {\r\n // eslint-disable-next-line react-hooks/rules-of-hooks\r\n var matches = (0, _useMediaQuery2.default)(theme.breakpoints.up(key));\r\n return !output && matches ? key : output;\r\n }, null) || 'xs';\r\n};\r\n\r\nexports.default = useWidth;","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _useMediaQuery = require('./useMediaQuery');\r\n\r\nObject.defineProperty(exports, 'default', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_useMediaQuery).default;\r\n }\r\n});\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _useMediaQuery = require('@material-ui/core/useMediaQuery');\r\n\r\nvar _useMediaQuery2 = _interopRequireDefault(_useMediaQuery);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nexports.default = _useMediaQuery2.default;","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _ExpansionPanel = require('./ExpansionPanel');\r\n\r\nObject.defineProperty(exports, 'default', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_ExpansionPanel).default;\r\n }\r\n});\r\n\r\nvar _ExpansionPanelActions = require('./ExpansionPanelActions');\r\n\r\nObject.defineProperty(exports, 'ExpansionPanelActions', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_ExpansionPanelActions).default;\r\n }\r\n});\r\n\r\nvar _ExpansionPanelDetails = require('./ExpansionPanelDetails');\r\n\r\nObject.defineProperty(exports, 'ExpansionPanelDetails', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_ExpansionPanelDetails).default;\r\n }\r\n});\r\n\r\nvar _ExpansionPanelSummary = require('./ExpansionPanelSummary');\r\n\r\nObject.defineProperty(exports, 'ExpansionPanelSummary', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_ExpansionPanelSummary).default;\r\n }\r\n});\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _ExpansionPanel = require('@material-ui/core/ExpansionPanel');\r\n\r\nvar _ExpansionPanel2 = _interopRequireDefault(_ExpansionPanel);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\n// Necessary design tokens are imported here\r\n//import { } from '../styles/tokens';\r\n\r\nvar styles = {\r\n card: {\r\n boxShadow: '0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.21)'\r\n },\r\n default: {\r\n boxShadow: '0 19px 20px 0 rgba(0, 0, 0, 0.03), 0 3px 8px 0 rgba(0, 0, 0, 0.06)'\r\n }\r\n};\r\n\r\n/**\r\n * Use `ExpansionPanel` to organize content into expandable and collapsible sections.\r\n * @done true\r\n * @updated true\r\n * @versionAdded v0.0.13\r\n * @examples\r\n * ExpansionPanelSimple\r\n * ExpansionPanelCard\r\n * ExpansionPanelControlledAccordion\r\n * ExpansionPanelLeftIcon\r\n * ExpansionPanelSecondary\r\n */\r\nvar ExpansionPanel = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n variant = props.variant,\r\n rest = _objectWithoutProperties(props, ['classes', 'variant']);\r\n\r\n var classOverrides = {};\r\n classOverrides.root = variant === 'card' ? classes.card : classes.default;\r\n\r\n return _react2.default.createElement(_ExpansionPanel2.default, Object.assign({}, rest, {\r\n classes: classOverrides,\r\n ref: ref\r\n }));\r\n});\r\n\r\nExpansionPanel.muiName = 'ExpansionPanel';\r\nExpansionPanel.displayName = 'ExpansionPanel';\r\n\r\nExpansionPanel.propTypes = {\r\n /**\r\n * The content of the expansion panel.\r\n */\r\n children: _propTypes2.default.node.isRequired,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * Properties applied to the `Collapse` element.\r\n */\r\n CollapseProps: _propTypes2.default.object,\r\n /**\r\n * If `true`, expands the panel by default.\r\n */\r\n defaultExpanded: _propTypes2.default.bool,\r\n /**\r\n * If `true`, the panel will be displayed in a disabled state.\r\n */\r\n disabled: _propTypes2.default.bool,\r\n /**\r\n * If `true`, expands the panel, otherwise collapse it.\r\n * Setting this prop enables control over the panel.\r\n */\r\n expanded: _propTypes2.default.bool,\r\n /**\r\n * Callback fired when the expand/collapse state is changed.\r\n *\r\n * @param {object} event The event source of the callback\r\n * @param {boolean} expanded The `expanded` state of the panel\r\n */\r\n onChange: _propTypes2.default.func,\r\n /**\r\n * Styles the ExpansionPanel for the context it is on, either 'default' or 'card'.\r\n */\r\n variant: _propTypes2.default.oneOf(['default', 'card'])\r\n};\r\n\r\n// If default props are needed, they must be set here\r\nExpansionPanel.defaultProps = {\r\n variant: 'default',\r\n defaultExpanded: false,\r\n disabled: false\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(ExpansionPanel);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _ExpansionPanelActions = require('@material-ui/core/ExpansionPanelActions');\r\n\r\nvar _ExpansionPanelActions2 = _interopRequireDefault(_ExpansionPanelActions);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\n// Necessary design tokens are imported here\r\n//import { } from '../styles/tokens';\r\n\r\nvar styles = {\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n root: {}\r\n};\r\n\r\n/**\r\n * A component that....\r\n */\r\nvar ExpansionPanelActions = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var classOverrides = {\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n root: classes.root\r\n };\r\n\r\n return _react2.default.createElement(_ExpansionPanelActions2.default, Object.assign({}, rest, {\r\n classes: classOverrides,\r\n ref: ref\r\n }));\r\n});\r\n\r\nExpansionPanelActions.muiName = 'ExpansionPanelActions';\r\nExpansionPanelActions.displayName = 'ExpansionPanelActions';\r\n\r\nExpansionPanelActions.propTypes = {\r\n /**\r\n * The content of the component.\r\n */\r\n children: _propTypes2.default.node.isRequired,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string\r\n};\r\n\r\n// If default props are needed, they must be set here\r\n// ExpansionPanelActions.defaultProps = { };\r\n\r\nexports.default = (0, _styles2.default)(styles)(ExpansionPanelActions);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _ExpansionPanelDetails = require('@material-ui/core/ExpansionPanelDetails');\r\n\r\nvar _ExpansionPanelDetails2 = _interopRequireDefault(_ExpansionPanelDetails);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\n// Necessary design tokens are imported here\r\n//import { } from '../styles/tokens';\r\n\r\nvar styles = {\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n root: {}\r\n};\r\n\r\n/**\r\n * A component that....\r\n */\r\nvar ExpansionPanelDetails = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var classOverrides = {\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n root: classes.root\r\n };\r\n\r\n return _react2.default.createElement(_ExpansionPanelDetails2.default, Object.assign({}, rest, {\r\n classes: classOverrides,\r\n ref: ref\r\n }));\r\n});\r\n\r\nExpansionPanelDetails.muiName = 'ExpansionPanelDetails';\r\nExpansionPanelDetails.displayName = 'ExpansionPanelDetails';\r\n\r\nExpansionPanelDetails.propTypes = {\r\n /**\r\n * The content of the expansion panel details.\r\n */\r\n children: _propTypes2.default.node.isRequired,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string\r\n};\r\n\r\n// If default props are needed, they must be set here\r\n// ExpansionPanelDetails.defaultProps = { };\r\n\r\nexports.default = (0, _styles2.default)(styles)(ExpansionPanelDetails);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _classnames = require('classnames');\r\n\r\nvar _classnames2 = _interopRequireDefault(_classnames);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _ExpansionPanelSummary = require('@material-ui/core/ExpansionPanelSummary');\r\n\r\nvar _ExpansionPanelSummary2 = _interopRequireDefault(_ExpansionPanelSummary);\r\n\r\nvar _ChevronDown = require('@eui/ds-icons/lib/ChevronDown');\r\n\r\nvar _ChevronDown2 = _interopRequireDefault(_ChevronDown);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: {\r\n color: _tokens.colorTextPrimary,\r\n outline: 'none',\r\n '&$focused': {\r\n backgroundColor: 'transparent'\r\n },\r\n '&$disabled': {\r\n opacity: 1\r\n }\r\n },\r\n disabled: {\r\n color: _tokens.colorBrandNeutral400,\r\n backgroundColor: _tokens.colorBrandNeutral100\r\n },\r\n focused: {\r\n boxShadow: _tokens.boxShadowFocusInset,\r\n outline: 'none'\r\n },\r\n iconButtonRoot: {\r\n fontSize: _tokens.fontSizeLarge,\r\n '&$disabled': {\r\n color: _tokens.colorBrandNeutral400\r\n }\r\n },\r\n iconLeftPosition: {\r\n top: '0.25rem',\r\n left: '0.5625rem',\r\n right: 'auto',\r\n position: 'absolute'\r\n },\r\n iconLeftPositionExpanded: {\r\n '& $iconLeftPosition': {\r\n top: '0.75rem'\r\n }\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * A component that....\r\n */\r\nvar ExpansionPanelSummary = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n leftIconDisplay = props.leftIconDisplay,\r\n expandIcon = props.expandIcon,\r\n expandIconProps = props.expandIconProps,\r\n rest = _objectWithoutProperties(props, ['classes', 'leftIconDisplay', 'expandIcon', 'expandIconProps']);\r\n\r\n var classOverrides = {\r\n root: classes.root,\r\n disabled: classes.disabled,\r\n focused: classes.focused\r\n };\r\n\r\n if (leftIconDisplay) {\r\n classOverrides.expandIcon = (0, _classnames2.default)(classOverrides.expandIcon, classes.iconLeftPosition, 'eds-expansion-panel-icon-left-position');\r\n classOverrides.expanded = classes.iconLeftPositionExpanded;\r\n }\r\n\r\n return _react2.default.createElement(_ExpansionPanelSummary2.default, Object.assign({\r\n expandIcon: expandIcon ? expandIcon : _react2.default.createElement(_ChevronDown2.default, Object.assign({ fill: props.disabled ? _tokens.colorBrandNeutral400 : _tokens.colorBrandNeutral500 }, expandIconProps)),\r\n IconButtonProps: { classes: { root: classes.iconButtonRoot } },\r\n classes: classOverrides,\r\n ref: ref\r\n }, rest));\r\n});\r\n\r\nExpansionPanelSummary.muiName = 'ExpansionPanelSummary';\r\nExpansionPanelSummary.displayName = 'ExpansionPanelSummary';\r\n\r\nExpansionPanelSummary.propTypes = {\r\n /**\r\n * The content of the expansion panel summary.\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * @ignore\r\n * If `true`, the summary will be displayed in a disabled state.\r\n */\r\n disabled: _propTypes2.default.bool,\r\n /**\r\n * @ignore\r\n * If `true`, expands the summary, otherwise collapse it.\r\n */\r\n expanded: _propTypes2.default.bool,\r\n /**\r\n * **DEPRECATED** This is now handled by the component.\r\n *\r\n * The icon to display as the expand indicator.\r\n */\r\n expandIcon: _propTypes2.default.node,\r\n /**\r\n * Properties applied to the icon element.\r\n */\r\n expandIconProps: _propTypes2.default.object,\r\n /**\r\n * Displays the expandIcon on the left side of the ExpansionPanel.\r\n */\r\n leftIconDisplay: _propTypes2.default.bool,\r\n /**\r\n * @ignore\r\n */\r\n onChange: _propTypes2.default.func,\r\n /**\r\n * @ignore\r\n */\r\n onClick: _propTypes2.default.func\r\n};\r\n\r\nExpansionPanelSummary.defaultProps = {\r\n leftIconDisplay: false\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(ExpansionPanelSummary);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _Table = require('./Table');\r\n\r\nObject.defineProperty(exports, 'default', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_Table).default;\r\n }\r\n});\r\n\r\nvar _TableHead = require('./TableHead');\r\n\r\nObject.defineProperty(exports, 'TableHead', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_TableHead).default;\r\n }\r\n});\r\n\r\nvar _TableCell = require('./TableCell');\r\n\r\nObject.defineProperty(exports, 'TableCell', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_TableCell).default;\r\n }\r\n});\r\n\r\nvar _TableExpandableRow = require('./TableExpandableRow');\r\n\r\nObject.defineProperty(exports, 'TableExpandableRow', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_TableExpandableRow).default;\r\n }\r\n});\r\n\r\nvar _TableFooter = require('./TableFooter');\r\n\r\nObject.defineProperty(exports, 'TableFooter', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_TableFooter).default;\r\n }\r\n});\r\n\r\nvar _TableRow = require('./TableRow');\r\n\r\nObject.defineProperty(exports, 'TableRow', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_TableRow).default;\r\n }\r\n});\r\n\r\nvar _TableBody = require('./TableBody');\r\n\r\nObject.defineProperty(exports, 'TableBody', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_TableBody).default;\r\n }\r\n});\r\n\r\nvar _TableSortLabel = require('./TableSortLabel');\r\n\r\nObject.defineProperty(exports, 'TableSortLabel', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_TableSortLabel).default;\r\n }\r\n});\r\n\r\nvar _TableToolbar = require('./TableToolbar');\r\n\r\nObject.defineProperty(exports, 'TableToolbar', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_TableToolbar).default;\r\n }\r\n});\r\n\r\nvar _TableEditableCell = require('./TableEditableCell');\r\n\r\nObject.defineProperty(exports, 'TableEditableCell', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_TableEditableCell).default;\r\n }\r\n});\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _expansionPanelStyles;\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _classnames = require('classnames');\r\n\r\nvar _classnames2 = _interopRequireDefault(_classnames);\r\n\r\nvar _styles2 = require('../styles');\r\n\r\nvar _styles3 = _interopRequireDefault(_styles2);\r\n\r\nvar _Table = require('@material-ui/core/Table');\r\n\r\nvar _Table2 = _interopRequireDefault(_Table);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nvar defaultResponsiveStyles = {\r\n border: 0,\r\n position: 'relative',\r\n '& thead': {\r\n // `display: 'none'` will not be read by screen readers\r\n // hence hiding it through visibility property.\r\n border: 'none',\r\n clip: 'rect(0 0 0 0)',\r\n height: _tokens.borderWidthThin,\r\n margin: _tokens.borderWidthThin,\r\n overflow: 'hidden',\r\n padding: 0,\r\n position: 'absolute',\r\n width: _tokens.borderWidthThin\r\n },\r\n '& tbody tr': {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n height: 'auto',\r\n marginBottom: _tokens.spacingMedium,\r\n borderBottom: _tokens.borderWidthThin + ' solid ' + _tokens.colorBrandNeutral300,\r\n paddingBottom: _tokens.spacingMedium,\r\n position: 'relative'\r\n },\r\n '& tbody td:before, & tbody th:before': {\r\n content: 'attr(data-label)',\r\n fontWeight: 'bold',\r\n whiteSpace: 'normal',\r\n wordBreak: 'break-all',\r\n left: 0,\r\n color: _tokens.colorBrandNeutral600,\r\n float: 'left',\r\n width: '6rem',\r\n minWidth: '6rem',\r\n marginRight: _tokens.spacingMedium\r\n },\r\n '& tbody td, & tbody th': {\r\n borderBottom: 'none',\r\n fontSize: _tokens.fontSizeDefault,\r\n textAlign: 'left',\r\n width: _tokens.widthFluid,\r\n padding: _tokens.spacingXSmall + ' 0',\r\n color: _tokens.colorBrandNeutral500,\r\n display: 'block'\r\n },\r\n '& tbody td > *, & tbody th > *': {\r\n display: 'flex'\r\n }\r\n};\r\n\r\nvar expansionPanelStyles = (_expansionPanelStyles = {\r\n '& tbody tr': {\r\n padding: _tokens.spacingXSmall + ' !important',\r\n paddingRight: _tokens.spacingXxLarge + ' !important',\r\n marginBottom: '0 !important',\r\n borderColor: 'transparent'\r\n },\r\n '& tbody tr td, & tbody tr th': {\r\n wordBreak: 'break-all'\r\n }\r\n}, _defineProperty(_expansionPanelStyles, '& thead th:last-child,\\n & tbody td:last-child,\\n & tbody th:last-child', {\r\n // On mobile should be always visible\r\n display: 'inherit !important'\r\n}), _defineProperty(_expansionPanelStyles, '& tbody td:not(:first-child), & tbody th:not(:first-child)', {\r\n display: 'none'\r\n}), _defineProperty(_expansionPanelStyles, '& tbody tr.table-row-expanded td:not(:first-child),\\n & tbody tr.table-row-expanded th:not(:first-child),\\n & tbody td.no-expanded-row-content span,\\n & tbody th.no-expanded-row-content span', {\r\n display: 'inherit'\r\n}), _defineProperty(_expansionPanelStyles, '& tbody tr td.expand-row-button', {\r\n position: 'absolute',\r\n width: 'auto',\r\n top: 0,\r\n right: 0,\r\n paddingRight: _tokens.spacingSmall\r\n}), _defineProperty(_expansionPanelStyles, '& tbody tr.table-row-expanded-content', {\r\n paddingRight: _tokens.spacingMedium\r\n}), _defineProperty(_expansionPanelStyles, '& tbody tr.table-row-expanded-content td,\\n & tbody tr.table-row-expanded-content th', {\r\n wordBreak: 'break-word',\r\n paddingRight: 0\r\n}), _defineProperty(_expansionPanelStyles, '& tbody tr.table-row-expanded-content td:before,\\n & tbody tr.table-row-expanded-content th:before', {\r\n display: 'none'\r\n}), _defineProperty(_expansionPanelStyles, '& tbody tr.table-row-expanded-content td > *,\\n & tbody tr.table-row-expanded-content th > *', {\r\n display: 'inline-block'\r\n}), _expansionPanelStyles);\r\n\r\nvar generateResponsiveBreakpoints = function generateResponsiveBreakpoints(breakpoints) {\r\n var styles = {};\r\n\r\n // Create responsive styles for each breakpoint\r\n // When responsive='xl', it will always show\r\n breakpoints.keys.forEach(function (breakpoint) {\r\n var _styles;\r\n\r\n styles['responsive_' + breakpoint] = (_styles = {\r\n width: 'calc(100% - 0.8rem)'\r\n }, _defineProperty(_styles, '& tbody td.no-expanded-row-content span,\\n & tbody th.no-expanded-row-content span', {\r\n display: 'none'\r\n }), _defineProperty(_styles, '&$responsive', _defineProperty({}, breakpoints.down(breakpoint), Object.assign({}, defaultResponsiveStyles))), _defineProperty(_styles, '&$expansionPanels', _defineProperty({}, breakpoints.down(breakpoint), Object.assign({}, expansionPanelStyles))), _styles);\r\n });\r\n\r\n return styles;\r\n};\r\n\r\nvar styles = function styles(theme) {\r\n return Object.assign({\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n root: {},\r\n responsive: _defineProperty({\r\n width: 'calc(100% - 0.8rem)'\r\n }, '& tbody td.no-expanded-row-content span,\\n & tbody th.no-expanded-row-content span', {\r\n display: 'none'\r\n }),\r\n expansionPanels: {}\r\n }, generateResponsiveBreakpoints(theme.breakpoints));\r\n};\r\n\r\n/**\r\n * Use `Table` to display sets of data within a grid.\r\n * @done true\r\n * @updated true\r\n * @versionAdded v0.0.10\r\n * @examples\r\n TableExample\r\n TableWithPagination\r\n AnytimeEditableTableExample\r\n ResponsiveTableExample\r\n ResponsiveTableExpansionPanels\r\n ResponsiveTableExpansionAll\r\n */\r\nvar Table = _react2.default.forwardRef(function (props, ref) {\r\n var _classNames;\r\n\r\n var classes = props.classes,\r\n onExpand = props.onExpand,\r\n onClick = props.onClick,\r\n layoutProp = props.layout,\r\n rest = _objectWithoutProperties(props, ['classes', 'onExpand', 'onClick', 'layout']);\r\n\r\n var layout = Object.assign({\r\n // declare default values to compare if consumer sent in a prop or not, but hide from prop API\r\n variant: '',\r\n breakpoint: ''\r\n }, layoutProp);\r\n\r\n var classOverrides = {\r\n root: (0, _classnames2.default)(classes.root, (_classNames = {}, _defineProperty(_classNames, classes.responsive, layoutProp), _defineProperty(_classNames, classes.responsive_xs, layout.breakpoint === 'xs'), _defineProperty(_classNames, classes.responsive_sm, layout.breakpoint === 'sm'), _defineProperty(_classNames, classes.responsive_md, layout.breakpoint === 'md'), _defineProperty(_classNames, classes.responsive_lg, layout.breakpoint === 'lg'), _defineProperty(_classNames, classes.responsive_xl, layout.variant !== '' && layout.breakpoint === ''), _defineProperty(_classNames, classes.expansionPanels, layout.variant === 'expansionPanels'), _classNames))\r\n };\r\n\r\n var callback = function callback(e) {\r\n var targetClassList = e.target.classList;\r\n var isTargetExpandButton = targetClassList ? targetClassList.contains('expand-icon-container') || targetClassList.contains('expand-icon') : false;\r\n\r\n if (isTargetExpandButton && onExpand) {\r\n var _target = e.currentTarget;\r\n\r\n // NOTE: The code coverage tool is not counting statements within `setTimeout()` for some reason.\r\n // Ignoring this for a while until we find a solution.\r\n // However, this block is always executed when expand all is clicked for which I have added UTs\r\n // TODO: Find how to get around `setTimeout()` for code coverage\r\n /* istanbul ignore next */\r\n // Break out of execution stack.\r\n setTimeout(function () {\r\n var rowsExpanded = _target.querySelectorAll('.table-row-expanded');\r\n var rowsNotExpanded = _target.querySelectorAll('.not-table-row-expanded');\r\n var rows = _target.querySelectorAll('.table-expandable-row');\r\n\r\n if (rowsExpanded.length === rows.length) {\r\n onExpand(e, true);\r\n } else if (rowsNotExpanded.length === rows.length) {\r\n onExpand(e, false);\r\n }\r\n });\r\n }\r\n\r\n onClick && onClick(e);\r\n };\r\n\r\n return _react2.default.createElement(_Table2.default, Object.assign({}, rest, { onClick: callback, classes: classOverrides, ref: ref }));\r\n});\r\n\r\nTable.muiName = 'Table';\r\nTable.displayName = 'Table';\r\n\r\nTable.propTypes = {\r\n /**\r\n * The content of the table, normally `TableHeader` and `TableBody`.\r\n */\r\n children: _propTypes2.default.node.isRequired,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * Class name to be applied to the `Table` container.\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * The component used for the root node.\r\n * Either a string to use a DOM element or a component.\r\n */\r\n component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object]),\r\n /**\r\n * Specify the cell size\r\n */\r\n size: _propTypes2.default.oneOf(['small', 'medium']),\r\n\r\n /**\r\n * Set the responsive layout `variant` and the `breakpoint` to trigger the responsive layout of the table.\r\n *\r\n * The shape of this prop is `{ variant: ['card', 'expansionPanels'], breakpoint: ['xs', 'sm', 'md', 'lg'] }`.\r\n *\r\n * If you do not specify a `breakpoint`, then the table will always show the given responsive layout variant.\r\n *\r\n * e.g.\r\n *\r\n * - `{ variant: 'card', breakpoint: 'sm' }` will result in the table rendering in the default table layout for viewports\r\n * greater than or equal to `sm` (960px) and the 'card' responsive layout when the viewport is smaller than `sm`.\r\n * - `{ variant: 'expansionPanels' }` will result in the table always showing the responsive expansion panel layout\r\n */\r\n layout: _propTypes2.default.shape({\r\n variant: _propTypes2.default.string,\r\n breakpoint: _propTypes2.default.oneOf(['xs', 'sm', 'md', 'lg'])\r\n }),\r\n /**\r\n * Callback to toggle the boolean value\r\n */\r\n onExpand: _propTypes2.default.func,\r\n /**\r\n * Callback triggered when expand all is clicked.\r\n */\r\n onClick: _propTypes2.default.func\r\n};\r\n\r\n// default props\r\nTable.defaultProps = {\r\n size: 'medium'\r\n};\r\n\r\nexports.default = (0, _styles3.default)(styles)(Table);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _TableHead = require('@material-ui/core/TableHead');\r\n\r\nvar _TableHead2 = _interopRequireDefault(_TableHead);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\n// Necessary design tokens are imported here\r\n//import { } from '../styles/tokens';\r\n\r\nvar styles = {\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n root: {}\r\n};\r\n\r\n/**\r\n * Table header\r\n */\r\nvar TableHead = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var classOverrides = {\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n root: classes.root\r\n };\r\n\r\n return _react2.default.createElement(_TableHead2.default, Object.assign({}, rest, {\r\n classes: classOverrides,\r\n ref: ref\r\n }));\r\n});\r\n\r\nTableHead.muiName = 'TableHead';\r\nTableHead.displayName = 'TableHead';\r\n\r\nTableHead.propTypes = {\r\n /**\r\n * The content of the table head, normally `TableRow`\r\n */\r\n children: _propTypes2.default.node.isRequired,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * The component used for the root node. Either a string to use a DOM element or a component.\r\n */\r\n component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object])\r\n};\r\n\r\n// If default props are needed, they must be set here\r\nTableHead.defaultProps = {\r\n component: 'thead'\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(TableHead);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _TableCell = require('@material-ui/core/TableCell');\r\n\r\nvar _TableCell2 = _interopRequireDefault(_TableCell);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n// Necessary design tokens are imported here\r\n//import { } from '../styles/tokens';\r\n\r\nvar styles = {\r\n root: {\r\n paddingTop: _tokens.spacingXxSmall,\r\n paddingBottom: _tokens.spacingXxSmall\r\n },\r\n head: {},\r\n body: {}\r\n};\r\n\r\n/**\r\n * Table cell\r\n */\r\nvar TableCell = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n columnName = props.columnName,\r\n rest = _objectWithoutProperties(props, ['classes', 'columnName']);\r\n\r\n var classOverrides = {\r\n root: classes.root,\r\n head: classes.head,\r\n body: classes.body\r\n };\r\n\r\n return _react2.default.createElement(_TableCell2.default, Object.assign({}, rest, {\r\n 'data-label': columnName || '',\r\n classes: classOverrides,\r\n ref: ref\r\n }));\r\n});\r\n\r\nTableCell.muiName = 'TableCell';\r\nTableCell.displayName = 'TableCell';\r\n\r\nTableCell.propTypes = {\r\n /**\r\n * Set the text-align on the table cell content. Monetary or generally number fields should\r\n * be right aligned as that allows you to add them up quickly in your head without having\r\n * to worry about decimals.\r\n */\r\n align: _propTypes2.default.oneOf(['inherit', 'left', 'right', 'center', 'justify']),\r\n /**\r\n * The table cell contents\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * The component used for the root node. Either a string to use a DOM element or a component.\r\n */\r\n component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object]),\r\n /**\r\n * Sets the padding applied to the cell.\r\n */\r\n padding: _propTypes2.default.oneOf(['default', 'checkbox', 'none']),\r\n /**\r\n * Specify the size of the cell. By default, inherits `size` from the parent `Table`.\r\n */\r\n size: _propTypes2.default.oneOf(['small', 'medium']),\r\n /**\r\n * Set scope attribute.\r\n */\r\n scope: _propTypes2.default.string,\r\n /**\r\n * Set aria-sort direction.\r\n */\r\n sortDirection: _propTypes2.default.oneOf(['asc', 'desc', false]),\r\n /**\r\n * Specify the cell type. By default, the `TableHead`, `TableBody` or `TableFooter` parent component set the value.\r\n */\r\n variant: _propTypes2.default.oneOf(['head', 'body', 'footer']),\r\n /**\r\n * Set this if you want to render a responsive Table\r\n */\r\n columnName: _propTypes2.default.string\r\n};\r\n\r\n// default props\r\nTableCell.defaultProps = {\r\n align: 'inherit',\r\n padding: 'default'\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(TableCell);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _EDSContext = require('../EDSContext/EDSContext');\r\n\r\nvar _TableCell = require('@material-ui/core/TableCell');\r\n\r\nvar _TableCell2 = _interopRequireDefault(_TableCell);\r\n\r\nvar _TableRow = require('@material-ui/core/TableRow');\r\n\r\nvar _TableRow2 = _interopRequireDefault(_TableRow);\r\n\r\nvar _ChevronDown = require('@eui/ds-icons/lib/ChevronDown');\r\n\r\nvar _ChevronDown2 = _interopRequireDefault(_ChevronDown);\r\n\r\nvar _classnames3 = require('classnames');\r\n\r\nvar _classnames4 = _interopRequireDefault(_classnames3);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\r\n\r\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\r\n\r\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: _defineProperty({\r\n height: '3rem'\r\n }, '@media ' + _tokens.mqSmallDown, {\r\n '&.table-row-expanded': {\r\n backgroundColor: theme.palette.grey[200]\r\n }\r\n }),\r\n iconContainer: {\r\n cursor: 'pointer',\r\n padding: _tokens.spacingXSmall,\r\n '&:focus': {\r\n outline: _tokens.borderWidthThick + ' solid ' + _tokens.colorBrandSecondary\r\n }\r\n },\r\n expandIcon: {\r\n transform: 'rotate(0deg)',\r\n transition: theme.transitions.create('transform', {\r\n duration: theme.transitions.duration.shortest\r\n }),\r\n verticalAlign: 'middle'\r\n },\r\n expandIconOpen: {\r\n transform: 'rotate(180deg)'\r\n },\r\n tableRowExpandedBackground: {\r\n backgroundColor: theme.palette.grey[200]\r\n },\r\n tableRowExpand: {\r\n padding: _tokens.spacingSmall + ' ' + _tokens.spacingMedium\r\n },\r\n muiTableCellRoot: {\r\n '&:last-child': {\r\n paddingRight: _tokens.spacingSmall,\r\n textAlign: 'right'\r\n }\r\n }\r\n };\r\n};\r\n\r\nvar TableExpandableRow = function (_React$Component) {\r\n _inherits(TableExpandableRow, _React$Component);\r\n\r\n function TableExpandableRow(props) {\r\n _classCallCheck(this, TableExpandableRow);\r\n\r\n var _this = _possibleConstructorReturn(this, (TableExpandableRow.__proto__ || Object.getPrototypeOf(TableExpandableRow)).call(this, props));\r\n\r\n _this.toggleExpand = function (e) {\r\n if (e.type === 'keypress' && (e.key === 'Enter' || e.key === ' ')) {\r\n e.preventDefault();\r\n _this.updateState();\r\n } else if (e.type === 'click') {\r\n _this.updateState();\r\n }\r\n };\r\n\r\n _this.state = {\r\n expanded: false\r\n };\r\n return _this;\r\n }\r\n\r\n _createClass(TableExpandableRow, [{\r\n key: 'componentDidUpdate',\r\n value: function componentDidUpdate(prevProps, prevState) {\r\n var _this2 = this;\r\n\r\n if (this.props.expand !== prevProps.expand) {\r\n this.setState(function (state) {\r\n return { expanded: _this2.props.expand };\r\n });\r\n }\r\n }\r\n }, {\r\n key: 'updateState',\r\n value: function updateState() {\r\n this.setState(function (state) {\r\n return {\r\n expanded: !state.expanded\r\n };\r\n });\r\n }\r\n }, {\r\n key: 'render',\r\n value: function render() {\r\n var _classnames,\r\n _this3 = this;\r\n\r\n var _props = this.props,\r\n classes = _props.classes,\r\n children = _props.children,\r\n expandedRowClassName = _props.expandedRowClassName,\r\n expandedRowContent = _props.expandedRowContent,\r\n expandToggleAriaLabel = _props.expandToggleAriaLabel,\r\n TableRowProps = _props.TableRowProps,\r\n ExpandedTableRowProps = _props.ExpandedTableRowProps,\r\n edsContext = _props.edsContext,\r\n expand = _props.expand,\r\n rest = _objectWithoutProperties(_props, ['classes', 'children', 'expandedRowClassName', 'expandedRowContent', 'expandToggleAriaLabel', 'TableRowProps', 'ExpandedTableRowProps', 'edsContext', 'expand']);\r\n\r\n var expanded = this.state.expanded;\r\n\r\n\r\n var expandLabel = expandToggleAriaLabel === TableExpandableRow.defaultProps.expandToggleAriaLabel ? // translate unless a label was provided\r\n edsContext.formatMessage('component.Table.showMore') : expandToggleAriaLabel;\r\n\r\n return _react2.default.createElement(\r\n _react2.default.Fragment,\r\n null,\r\n _react2.default.createElement(\r\n _TableRow2.default,\r\n Object.assign({\r\n className: (0, _classnames4.default)(classes.root, (_classnames = {}, _defineProperty(_classnames, classes.tableRowExpandedBackground, expanded && expandedRowContent), _defineProperty(_classnames, 'table-row-expanded', expanded), _defineProperty(_classnames, 'not-table-row-expanded', !expanded && expandedRowContent), _defineProperty(_classnames, 'table-expandable-row', expandedRowContent), _classnames))\r\n }, TableRowProps, rest),\r\n children,\r\n _react2.default.createElement(\r\n _TableCell2.default,\r\n {\r\n className: (0, _classnames4.default)('expand-row-button', { 'no-expanded-row-content': !expandedRowContent }),\r\n classes: { root: classes.muiTableCellRoot }\r\n },\r\n _react2.default.createElement(\r\n 'span',\r\n {\r\n className: 'expand-icon-container ' + classes.iconContainer,\r\n 'aria-expanded': expanded,\r\n 'aria-label': expandLabel,\r\n title: expandLabel,\r\n onClick: function onClick(e) {\r\n return _this3.toggleExpand(e);\r\n },\r\n onKeyPress: function onKeyPress(e) {\r\n return _this3.toggleExpand(e);\r\n },\r\n role: 'button',\r\n tabIndex: 0 },\r\n _react2.default.createElement(_ChevronDown2.default, {\r\n className: (0, _classnames4.default)(classes.expandIcon, 'expand-icon', _defineProperty({}, classes.expandIconOpen, expanded))\r\n })\r\n )\r\n )\r\n ),\r\n expandedRowContent && expanded && _react2.default.createElement(\r\n _TableRow2.default,\r\n Object.assign({ className: (0, _classnames4.default)(classes.tableRowExpandedBackground, expandedRowClassName, 'table-row-expanded-content')\r\n }, ExpandedTableRowProps),\r\n _react2.default.createElement(\r\n _TableCell2.default,\r\n { className: classes.tableRowExpand, colSpan: children.length + 1 },\r\n expandedRowContent\r\n )\r\n )\r\n );\r\n }\r\n }]);\r\n\r\n return TableExpandableRow;\r\n}(_react2.default.Component);\r\n\r\nTableExpandableRow.propTypes = {\r\n /**\r\n * Common children are the TableCells with information you want to show on the TableRow.\r\n */\r\n children: _propTypes2.default.node.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * This is the custom prop for developers to control the expand collapse.\r\n * Useful when you want to expand / collapse all section in one click.\r\n */\r\n expand: _propTypes2.default.bool,\r\n /**\r\n * This is the actual content that should be shown when the TableExpandableRow is expanded.\r\n * When used for responsive table, you can choose not to supply any content.\r\n */\r\n expandedRowContent: _propTypes2.default.node,\r\n /**\r\n * Custom string name to send to the TableRow that is shown when expanded.\r\n */\r\n expandedRowClassName: _propTypes2.default.string,\r\n /**\r\n * Override the aria-label for the toggle arrow button.\r\n */\r\n expandToggleAriaLabel: _propTypes2.default.string,\r\n /**\r\n * @ignore\r\n */\r\n edsContext: _propTypes2.default.object,\r\n /**\r\n * Object of props to send to the TableRow with the toggle arrow.\r\n */\r\n TableRowProps: _propTypes2.default.object,\r\n /**\r\n * Object of props to send to the TableRow that is shown when expanded.\r\n */\r\n ExpandedTableRowProps: _propTypes2.default.object\r\n};\r\n\r\nTableExpandableRow.defaultProps = {\r\n expandToggleAriaLabel: 'Show More'\r\n};\r\n\r\nexports.default = (0, _EDSContext.withEDSContext)((0, _styles.withStyles)(styles)(TableExpandableRow));","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _TableFooter = require('@material-ui/core/TableFooter');\r\n\r\nvar _TableFooter2 = _interopRequireDefault(_TableFooter);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\n// Necessary design tokens are imported here\r\n//import { } from '../styles/tokens';\r\n\r\nvar styles = {\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n root: {}\r\n};\r\n\r\n/**\r\n * Table component for displaying table footers\r\n */\r\nvar TableFooter = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var classOverrides = {\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n root: classes.root\r\n };\r\n\r\n return _react2.default.createElement(_TableFooter2.default, Object.assign({}, rest, {\r\n classes: classOverrides,\r\n ref: ref\r\n }));\r\n});\r\n\r\nTableFooter.muiName = 'TableFooter';\r\nTableFooter.displayName = 'TableFooter';\r\n\r\nTableFooter.propTypes = {\r\n /**\r\n * The content of the table head, normally `TableRow`\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * The component used for the root node. Either a string to use a DOM element or a component.\r\n */\r\n component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object])\r\n};\r\n\r\n// If default props are needed, they must be set here\r\nTableFooter.defaultProps = {\r\n component: 'tfoot'\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(TableFooter);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _TableRow = require('@material-ui/core/TableRow');\r\n\r\nvar _TableRow2 = _interopRequireDefault(_TableRow);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\n// Necessary design tokens are imported here\r\n//import { } from '../styles/tokens';\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n root: {\r\n height: '3rem',\r\n '&$hover:hover': {\r\n backgroundColor: theme.palette.grey[250]\r\n }\r\n },\r\n hover: {}\r\n };\r\n};\r\n\r\n/**\r\n * Table component for displaying a row\r\n */\r\nvar TableRow = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var classOverrides = {\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n root: classes.root,\r\n hover: classes.hover\r\n };\r\n\r\n return _react2.default.createElement(_TableRow2.default, Object.assign({}, rest, {\r\n classes: classOverrides,\r\n ref: ref\r\n }));\r\n});\r\n\r\nTableRow.muiName = 'TableRow';\r\nTableRow.displayName = 'TableRow';\r\n\r\nTableRow.propTypes = {\r\n /**\r\n * Should be valid `
`children such as `TableCell`.\r\n */\r\n children: _propTypes2.default.node.isRequired,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * The component used for the root node. Either a string to use a DOM element or a component.\r\n */\r\n component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object]),\r\n /**\r\n * If `true`, the table row will shade on hover.\r\n */\r\n hover: _propTypes2.default.bool,\r\n /**\r\n * If `true`, the table row will have the selected shading.\r\n */\r\n selected: _propTypes2.default.bool\r\n\r\n};\r\n\r\n// If default props are needed, they must be set here\r\nTableRow.defaultProps = {\r\n component: 'tr',\r\n hover: false,\r\n selected: false\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(TableRow);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _TableBody = require('@material-ui/core/TableBody');\r\n\r\nvar _TableBody2 = _interopRequireDefault(_TableBody);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\n// Necessary design tokens are imported here\r\n//import { } from '../styles/tokens';\r\n\r\nvar styles = {\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n root: {}\r\n};\r\n\r\n/**\r\n * The body of the table\r\n */\r\nvar TableBody = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var classOverrides = {\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n root: classes.root\r\n };\r\n\r\n return _react2.default.createElement(_TableBody2.default, Object.assign({}, rest, {\r\n classes: classOverrides,\r\n ref: ref\r\n }));\r\n});\r\n\r\nTableBody.muiName = 'TableBody';\r\nTableBody.displayName = 'TableBody';\r\n\r\nTableBody.propTypes = {\r\n /**\r\n * The content of the component, normally `TableRow`.\r\n */\r\n children: _propTypes2.default.node.isRequired,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * The component used for the root node. Either a string to use a DOM element or a component.\r\n */\r\n component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object])\r\n\r\n};\r\n\r\n// default props\r\nTableBody.defaultProps = {\r\n component: 'tbody'\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(TableBody);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _TableSortLabel = require('@material-ui/core/TableSortLabel');\r\n\r\nvar _TableSortLabel2 = _interopRequireDefault(_TableSortLabel);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\n// Necessary design tokens are imported here\r\n//import { } from '../styles/tokens';\r\n\r\nvar styles = {\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n root: {}\r\n};\r\n\r\n/**\r\n * Table component for the label of a column sort\r\n */\r\nvar TableSortLabel = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var classOverrides = {\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n root: classes.root\r\n };\r\n\r\n return _react2.default.createElement(_TableSortLabel2.default, Object.assign({}, rest, {\r\n classes: classOverrides,\r\n ref: ref\r\n }));\r\n});\r\n\r\nTableSortLabel.muiName = 'TableSortLabel';\r\n\r\nTableSortLabel.propTypes = {\r\n /**\r\n * If true, the table row will have the selected shading.\r\n */\r\n active: _propTypes2.default.bool,\r\n /**\r\n * Label contents, the arrow will be appended automatically.\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * The current sort direction.\r\n */\r\n direction: _propTypes2.default.oneOf(['asc', 'desc'])\r\n\r\n};\r\n\r\nTableSortLabel.displayName = 'TableSortLabel';\r\n\r\n// If default props are needed, they must be set here\r\nTableSortLabel.defaultProps = {\r\n active: false,\r\n direction: 'desc'\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(TableSortLabel);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _classnames3 = require('classnames');\r\n\r\nvar _classnames4 = _interopRequireDefault(_classnames3);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _Toolbar = require('@material-ui/core/Toolbar');\r\n\r\nvar _Toolbar2 = _interopRequireDefault(_Toolbar);\r\n\r\nvar _ChevronDown = require('@eui/ds-icons/lib/ChevronDown');\r\n\r\nvar _ChevronDown2 = _interopRequireDefault(_ChevronDown);\r\n\r\nvar _Edit = require('@eui/ds-icons/lib/Edit');\r\n\r\nvar _Edit2 = _interopRequireDefault(_Edit);\r\n\r\nvar _ = require('../');\r\n\r\nvar _EDSContext = require('../EDSContext/EDSContext');\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: {\r\n display: 'flex',\r\n padding: _tokens.spacingSmall\r\n },\r\n flex: {\r\n flexGrow: 1,\r\n fontSize: _tokens.fontSizeHeader2Small,\r\n color: _tokens.colorTextNeutral500\r\n },\r\n iconContainer: {\r\n cursor: 'pointer',\r\n padding: _tokens.spacingXSmall,\r\n '&:not(:last-child)': {\r\n marginRight: _tokens.spacingMedium\r\n },\r\n '&:focus': {\r\n outline: _tokens.borderWidthThin + ' solid ' + _tokens.colorBrandSecondary\r\n }\r\n },\r\n expandIcon: {\r\n transform: 'rotate(0deg)',\r\n transition: theme.transitions.create('transform', {\r\n duration: theme.transitions.duration.shortest\r\n }),\r\n verticalAlign: 'middle'\r\n },\r\n expandIconOpen: {\r\n transform: 'rotate(180deg)'\r\n },\r\n footer: {\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n width: _tokens.widthFluid,\r\n alignItems: 'center'\r\n },\r\n footerLeft: {\r\n justifyContent: 'flex-start'\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * TableToolbar\r\n */\r\nvar TableToolbar = _react2.default.forwardRef(function (props, ref) {\r\n var _classnames;\r\n\r\n var classes = props.classes,\r\n caption = props.caption,\r\n showExpandAllToggle = props.showExpandAllToggle,\r\n expandAllToggleAriaLabel = props.expandAllToggleAriaLabel,\r\n showEditToggle = props.showEditToggle,\r\n children = props.children,\r\n expanded = props.expanded,\r\n onExpand = props.onExpand,\r\n onEdit = props.onEdit,\r\n location = props.location,\r\n footerAlignItems = props.footerAlignItems,\r\n showFooterToolbarOnEdit = props.showFooterToolbarOnEdit,\r\n edsContext = props.edsContext,\r\n rest = _objectWithoutProperties(props, ['classes', 'caption', 'showExpandAllToggle', 'expandAllToggleAriaLabel', 'showEditToggle', 'children', 'expanded', 'onExpand', 'onEdit', 'location', 'footerAlignItems', 'showFooterToolbarOnEdit', 'edsContext']);\r\n\r\n var showToolbar = location === 'footer' && showFooterToolbarOnEdit || location === 'header';\r\n\r\n var toggleExpand = function toggleExpand(e) {\r\n if (e.type === 'keypress' && (e.key === 'Enter' || e.key === ' ')) {\r\n e.preventDefault();\r\n onExpand(e);\r\n } else if (e.type === 'click') {\r\n onExpand(e);\r\n }\r\n };\r\n\r\n var toggleEdit = function toggleEdit(e) {\r\n if (e.type === 'keypress' && (e.key === 'Enter' || e.key === ' ')) {\r\n e.preventDefault();\r\n onEdit(e);\r\n } else if (e.type === 'click') {\r\n onEdit(e);\r\n }\r\n };\r\n\r\n var expandLabel = expandAllToggleAriaLabel === TableToolbar.defaultProps.expandAllToggleAriaLabel ? // translate unless a label was provided\r\n edsContext.formatMessage('component.Table.showAll') : expandAllToggleAriaLabel;\r\n\r\n return _react2.default.createElement(\r\n _react2.default.Fragment,\r\n null,\r\n showToolbar && _react2.default.createElement(\r\n _Toolbar2.default,\r\n Object.assign({ className: classes.root }, rest, { ref: ref }),\r\n caption && _react2.default.createElement(\r\n _.Typography,\r\n { variant: 'h1', className: classes.flex },\r\n caption\r\n ),\r\n _react2.default.createElement(\r\n 'div',\r\n { className: (0, _classnames4.default)((_classnames = {}, _defineProperty(_classnames, classes.footer, location === 'footer'), _defineProperty(_classnames, classes.footerLeft, footerAlignItems === 'left'), _classnames)) },\r\n children,\r\n showEditToggle && _react2.default.createElement(\r\n 'span',\r\n {\r\n className: classes.iconContainer,\r\n onClick: function onClick(e) {\r\n return toggleEdit(e);\r\n },\r\n onKeyPress: function onKeyPress(e) {\r\n return toggleEdit(e);\r\n },\r\n 'aria-label': edsContext.formatMessage('component.Table.edit'),\r\n title: edsContext.formatMessage('component.Table.edit'),\r\n role: 'button',\r\n tabIndex: 0 },\r\n _react2.default.createElement(_Edit2.default, null)\r\n ),\r\n showExpandAllToggle && _react2.default.createElement(\r\n 'span',\r\n {\r\n className: classes.iconContainer,\r\n 'aria-expanded': expanded,\r\n 'aria-label': expandLabel,\r\n title: expandLabel,\r\n onClick: function onClick(e) {\r\n return toggleExpand(e);\r\n },\r\n onKeyPress: function onKeyPress(e) {\r\n return toggleExpand(e);\r\n },\r\n role: 'button',\r\n tabIndex: 0 },\r\n _react2.default.createElement(_ChevronDown2.default, {\r\n className: (0, _classnames4.default)(classes.expandIcon, _defineProperty({}, classes.expandIconOpen, expanded))\r\n })\r\n )\r\n )\r\n )\r\n );\r\n});\r\n\r\nTableToolbar.muiName = 'TableToolbar';\r\nTableToolbar.displayName = 'TableToolbar';\r\n\r\nTableToolbar.propTypes = {\r\n /**\r\n * The content of the table, normally `TableHeader` and `TableBody`.\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * Class name to be applied to the Alert container.\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * Table caption or table title\r\n */\r\n caption: _propTypes2.default.string,\r\n /**\r\n * Show expand all or collapse all icon for expansion panels on mobile or expandable rows.\r\n */\r\n showExpandAllToggle: _propTypes2.default.bool,\r\n /**\r\n * Override the aria-label for the toggle all.\r\n */\r\n expandAllToggleAriaLabel: _propTypes2.default.string,\r\n /**\r\n * Prop to toggle expand all.\r\n */\r\n expanded: _propTypes2.default.bool,\r\n /**\r\n * @ignore\r\n */\r\n edsContext: _propTypes2.default.object,\r\n /**\r\n * Callback to toggle the boolean value\r\n */\r\n onExpand: _propTypes2.default.func,\r\n /**\r\n * Show editable toggle button to switch between edit and read-only table mode.\r\n */\r\n showEditToggle: _propTypes2.default.bool,\r\n /**\r\n * Callback when edit toggle button is clicked\r\n */\r\n onEdit: _propTypes2.default.func,\r\n /**\r\n * Align items for footer actions.\r\n */\r\n footerAlignItems: _propTypes2.default.oneOf(['left', 'right']),\r\n /**\r\n * If you need to use actions along with table caption,\r\n * use `header` location. For action with footer, use `footer` location.\r\n * NOTE: Captions actions are always right aligned.\r\n * For footer actions, you can choose left or right.\r\n */\r\n location: _propTypes2.default.oneOf(['header', 'footer']),\r\n /**\r\n * For footer, show the footer actions only when table is in edit mode.\r\n */\r\n showFooterToolbarOnEdit: _propTypes2.default.bool\r\n};\r\n\r\nTableToolbar.defaultProps = {\r\n showExpandAllToggle: false,\r\n showEditToggle: false,\r\n expandAllToggleAriaLabel: 'Show All',\r\n expanded: false,\r\n location: 'header',\r\n footerAlignItems: 'right'\r\n};\r\n\r\nexports.default = (0, _EDSContext.withEDSContext)((0, _styles2.default)(styles)(TableToolbar));","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _classnames2 = require('classnames');\r\n\r\nvar _classnames3 = _interopRequireDefault(_classnames2);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _TableCell = require('@material-ui/core/TableCell');\r\n\r\nvar _TableCell2 = _interopRequireDefault(_TableCell);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = {\r\n root: {\r\n paddingTop: _tokens.spacingXxSmall,\r\n paddingBottom: _tokens.spacingXxSmall\r\n },\r\n head: {},\r\n body: {},\r\n error: {\r\n backgroundColor: _tokens.colorBackgroundAlertError\r\n }\r\n};\r\n\r\n/**\r\n * Table cell\r\n */\r\nvar TableEditableCell = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n columnName = props.columnName,\r\n edit = props.edit,\r\n content = props.content,\r\n editableComponent = props.editableComponent,\r\n error = props.error,\r\n rest = _objectWithoutProperties(props, ['classes', 'columnName', 'edit', 'content', 'editableComponent', 'error']);\r\n\r\n var classOverrides = {\r\n root: classes.root,\r\n head: classes.head,\r\n body: classes.body\r\n };\r\n\r\n return _react2.default.createElement(\r\n _TableCell2.default,\r\n Object.assign({}, rest, {\r\n 'data-label': columnName || '',\r\n classes: classOverrides,\r\n className: (0, _classnames3.default)(_defineProperty({}, classes.error, error)),\r\n ref: ref\r\n }),\r\n edit ? editableComponent : content\r\n );\r\n});\r\n\r\nTableEditableCell.muiName = 'TableEditableCell';\r\nTableEditableCell.displayName = 'TableEditableCell';\r\n\r\nTableEditableCell.propTypes = {\r\n /**\r\n * Set the text-align on the table cell content. Monetary or generally number fields should\r\n * be right aligned as that allows you to add them up quickly in your head without having\r\n * to worry about decimals.\r\n */\r\n align: _propTypes2.default.oneOf(['inherit', 'left', 'right', 'center', 'justify']),\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * The component used for the root node. Either a string to use a DOM element or a component.\r\n */\r\n component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object]),\r\n /**\r\n * Sets the padding applied to the cell.\r\n */\r\n padding: _propTypes2.default.oneOf(['default', 'checkbox', 'dense', 'none']),\r\n /**\r\n * Set scope attribute.\r\n */\r\n scope: _propTypes2.default.string,\r\n /**\r\n * Set aria-sort direction.\r\n */\r\n sortDirection: _propTypes2.default.oneOf(['asc', 'desc', false]),\r\n /**\r\n * Specify the cell type. By default, the `TableHead`, `TableBody` or `TableFooter` parent component set the value.\r\n */\r\n variant: _propTypes2.default.oneOf(['head', 'body', 'footer']),\r\n /**\r\n * Set this if you want to render a responsive Table\r\n */\r\n columnName: _propTypes2.default.string,\r\n /**\r\n * If true, the cells will turn to edit mode. Defaults to `true`\r\n */\r\n edit: _propTypes2.default.bool,\r\n /**\r\n * Content to be shown when table is in read-only mode\r\n */\r\n content: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node, _propTypes2.default.object]),\r\n /**\r\n * This will be rendered when table is in editable mode.\r\n */\r\n editableComponent: _propTypes2.default.node.isRequired,\r\n /**\r\n * If true, the cell will be displayed in an error state.\r\n */\r\n error: _propTypes2.default.bool\r\n};\r\n\r\n// default props\r\nTableEditableCell.defaultProps = {\r\n align: 'inherit',\r\n padding: 'default',\r\n edit: true\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(TableEditableCell);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _Pagination = require('./Pagination');\r\n\r\nObject.defineProperty(exports, 'default', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_Pagination).default;\r\n }\r\n});\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _IconButton = require('../IconButton');\r\n\r\nvar _IconButton2 = _interopRequireDefault(_IconButton);\r\n\r\nvar _TextField = require('../TextField');\r\n\r\nvar _TextField2 = _interopRequireDefault(_TextField);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _classnames = require('classnames');\r\n\r\nvar _classnames2 = _interopRequireDefault(_classnames);\r\n\r\nvar _TablePagination = require('@material-ui/core/TablePagination');\r\n\r\nvar _TablePagination2 = _interopRequireDefault(_TablePagination);\r\n\r\nvar _ChevronDown = require('@eui/ds-icons/lib/ChevronDown');\r\n\r\nvar _ChevronDown2 = _interopRequireDefault(_ChevronDown);\r\n\r\nvar _ArrowEndLeft = require('@eui/ds-icons/lib/ArrowEndLeft');\r\n\r\nvar _ArrowEndLeft2 = _interopRequireDefault(_ArrowEndLeft);\r\n\r\nvar _ArrowEndRight = require('@eui/ds-icons/lib/ArrowEndRight');\r\n\r\nvar _ArrowEndRight2 = _interopRequireDefault(_ArrowEndRight);\r\n\r\nvar _ChevronRight = require('@eui/ds-icons/lib/ChevronRight');\r\n\r\nvar _ChevronRight2 = _interopRequireDefault(_ChevronRight);\r\n\r\nvar _ChevronLeft = require('@eui/ds-icons/lib/ChevronLeft');\r\n\r\nvar _ChevronLeft2 = _interopRequireDefault(_ChevronLeft);\r\n\r\nvar _Typography = require('../Typography');\r\n\r\nvar _Typography2 = _interopRequireDefault(_Typography);\r\n\r\nvar _EDSContext = require('../EDSContext/EDSContext');\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\r\n\r\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\r\n\r\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\n// PaginationAction Styles\r\nvar actionStyles = function actionStyles(theme) {\r\n var _root;\r\n\r\n return {\r\n root: (_root = {\r\n alignItems: 'center',\r\n display: 'flex',\r\n flex: 1,\r\n order: 2\r\n }, _defineProperty(_root, theme.breakpoints.between('xs', 'sm'), {\r\n flex: '1 1 100%',\r\n textAlign: 'center',\r\n paddingBottom: _tokens.spacingXSmall,\r\n borderBottom: _tokens.borderWidthThin + ' solid ' + theme.palette.grey[300],\r\n marginBottom: _tokens.spacingXSmall,\r\n justifyContent: 'space-between'\r\n }), _defineProperty(_root, '& $paginationButtons', {\r\n color: theme.palette.grey[500] + ' ',\r\n fill: theme.palette.grey[500] + ' ',\r\n backgroundColor: 'transparent ',\r\n '&:hover': {\r\n backgroundColor: 'transparent ',\r\n color: theme.palette.ctaColor.base + ' ',\r\n fill: theme.palette.ctaColor.base + ' '\r\n },\r\n '&:active': {\r\n backgroundColor: 'transparent ',\r\n color: theme.palette.ctaColor.hover + ' ',\r\n fill: theme.palette.ctaColor.hover + ' '\r\n },\r\n '&:disabled': {\r\n backgroundColor: 'transparent ',\r\n fill: theme.palette.grey[400] + ' '\r\n },\r\n // NOTE: Could create an 'icon' classes prop to handle this sizing\r\n '& svg': {\r\n width: 16,\r\n height: 16\r\n }\r\n }), _defineProperty(_root, '& $textField', {\r\n // NOTE: Remove when Textfield supports us overriding the classes prop\r\n width: '40px',\r\n marginLeft: '' + _tokens.spacingXSmall,\r\n marginRight: '' + _tokens.spacingXSmall,\r\n verticalAlign: 'baseline',\r\n '& input': {\r\n padding: '0.1rem',\r\n textAlign: 'center',\r\n fontSize: theme.typography.caption.fontSize\r\n }\r\n }), _root),\r\n typography: {\r\n display: 'flex',\r\n alignSelf: 'center'\r\n },\r\n // NOTE: This should be sent to the TextField classes.root\r\n // But our implementation doesn't allow this\r\n // textFieldRoot: {\r\n // width: 32,\r\n // marginLeft: 8,\r\n // marginRight: 8,\r\n // verticalAlign: 'baseline',\r\n // },\r\n // Remove if TextField can support classes override\r\n textField: {},\r\n // Remove after transparent IconButtons variant is created\r\n paginationButtons: {},\r\n pageNumberInput: _defineProperty({\r\n display: 'flex',\r\n margin: '0 ' + _tokens.spacingXxLarge\r\n }, theme.breakpoints.between('xs', 'sm'), {\r\n margin: 0\r\n }),\r\n buttonSpacer: _defineProperty({\r\n marginRight: _tokens.spacingMedium\r\n }, theme.breakpoints.between('xs', 'sm'), {\r\n marginRight: 0\r\n })\r\n };\r\n};\r\n\r\nvar PaginationActions = function (_React$Component) {\r\n _inherits(PaginationActions, _React$Component);\r\n\r\n function PaginationActions() {\r\n var _ref;\r\n\r\n var _temp, _this, _ret;\r\n\r\n _classCallCheck(this, PaginationActions);\r\n\r\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\r\n args[_key] = arguments[_key];\r\n }\r\n\r\n return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = PaginationActions.__proto__ || Object.getPrototypeOf(PaginationActions)).call.apply(_ref, [this].concat(args))), _this), _this.state = {\r\n pageNumberInput: _this.props.page + 1 || 1 // zero-based number\r\n }, _this.handleFirstPageButtonClick = function (event) {\r\n _this.setState({\r\n pageNumberInput: 1\r\n }, function () {\r\n return _this.props.onChangePage(event, 0);\r\n });\r\n }, _this.handleBackButtonClick = function (event) {\r\n var page = _this.props.page - 1;\r\n\r\n _this.setState({\r\n pageNumberInput: page + 1\r\n }, function () {\r\n return _this.props.onChangePage(event, page);\r\n });\r\n }, _this.handleNextButtonClick = function (event) {\r\n var page = _this.props.page + 1;\r\n _this.setState({\r\n pageNumberInput: page + 1\r\n }, function () {\r\n return _this.props.onChangePage(event, page);\r\n });\r\n }, _this.handleLastPageButtonClick = function (event) {\r\n // returns 0-based\r\n var page = Math.max(0, Math.ceil(_this.props.count / _this.props.rowsPerPage) - 1);\r\n\r\n // display value non-0 based\r\n _this.setState({\r\n pageNumberInput: page + 1\r\n }, function () {\r\n return _this.props.onChangePage(event, page);\r\n });\r\n }, _this.handleTextFieldOnChange = function (event) {\r\n var value = event.target.value;\r\n if (!isNaN(Number(value))) {\r\n _this.setState({\r\n pageNumberInput: value\r\n });\r\n }\r\n }, _this.handleTextFieldOnBlur = function (event) {\r\n event.preventDefault();\r\n if (_this.paginationPageTextField.value - 1 !== _this.props.page) {\r\n _this.handlePageChange(event);\r\n }\r\n }, _this.handleTextFieldFocus = function () {\r\n _this.paginationPageTextField.select();\r\n }, _this.handleEnterKeyPress = function (event) {\r\n if (event.key === 'Enter') {\r\n event.preventDefault();\r\n if (_this.paginationPageTextField.value - 1 !== _this.props.page) {\r\n _this.handlePageChange(event);\r\n }\r\n }\r\n }, _temp), _possibleConstructorReturn(_this, _ret);\r\n }\r\n\r\n _createClass(PaginationActions, [{\r\n key: 'componentDidUpdate',\r\n value: function componentDidUpdate(prevProps) {\r\n var _this2 = this;\r\n\r\n if (prevProps.rowsPerPage !== this.props.rowsPerPage || prevProps.count !== this.props.count) {\r\n this.setState({\r\n pageNumberInput: 1\r\n }, function () {\r\n return _this2.props.onChangePage({}, 0);\r\n });\r\n }\r\n }\r\n }, {\r\n key: 'handlePageChange',\r\n\r\n\r\n // Shared function to change page or alter state\r\n // Receives `value` from the TextField\r\n value: function handlePageChange(event) {\r\n var _this3 = this;\r\n\r\n // 1-based\r\n var value = this.paginationPageTextField.value;\r\n\r\n // 0-based\r\n var totalNumberOfPages = Math.max(0, Math.ceil(this.props.count / this.props.rowsPerPage) - 1);\r\n\r\n if (value <= 0) {\r\n // If value is zero or negative\r\n // Go to first page\r\n this.setState({ pageNumberInput: 1 }, function () {\r\n return _this3.props.onChangePage(event, 0);\r\n });\r\n } else if (value >= 1 && value <= totalNumberOfPages) {\r\n // If value is greater than 1\r\n // and value is less than or equal totalNumberOfPages\r\n this.setState({\r\n pageNumberInput: value\r\n }, this.props.onChangePage(event, Number(value) - 1));\r\n } else if (value >= totalNumberOfPages + 1) {\r\n // If value is greater than total number of pages\r\n // Go to last page\r\n this.setState({\r\n pageNumberInput: totalNumberOfPages + 1\r\n }, this.props.onChangePage(event, totalNumberOfPages));\r\n }\r\n }\r\n }, {\r\n key: 'render',\r\n value: function render() {\r\n var _this4 = this;\r\n\r\n var _props = this.props,\r\n classes = _props.classes,\r\n count = _props.count,\r\n page = _props.page,\r\n rowsPerPage = _props.rowsPerPage,\r\n theme = _props.theme,\r\n edsContext = _props.edsContext;\r\n var pageNumberInput = this.state.pageNumberInput;\r\n\r\n\r\n var totalNumberOfPages = Math.max(0, Math.ceil(count / rowsPerPage) - 1);\r\n var disablePreviousButtons = page === 0;\r\n var disableNextButtons = page >= Math.ceil(count / rowsPerPage) - 1;\r\n\r\n // TODO: Change IconButtons to different transparent variant\r\n return _react2.default.createElement(\r\n 'div',\r\n { className: '' + classes.root },\r\n _react2.default.createElement(\r\n _IconButton2.default,\r\n {\r\n onClick: this.handleFirstPageButtonClick,\r\n disabled: disablePreviousButtons,\r\n color: 'secondary',\r\n 'aria-label': edsContext.formatMessage('component.Pagination.firstPage'),\r\n title: edsContext.formatMessage('component.Pagination.firstPage'),\r\n className: classes.paginationButtons + ' ' + classes.buttonSpacer\r\n },\r\n theme.direction === 'rtl' ? _react2.default.createElement(_ArrowEndRight2.default, null) : _react2.default.createElement(_ArrowEndLeft2.default, null)\r\n ),\r\n _react2.default.createElement(\r\n _IconButton2.default,\r\n {\r\n onClick: this.handleBackButtonClick,\r\n disabled: disablePreviousButtons,\r\n color: 'secondary',\r\n 'aria-label': edsContext.formatMessage('component.Pagination.previousPage'),\r\n title: edsContext.formatMessage('component.Pagination.previousPage'),\r\n className: classes.paginationButtons\r\n },\r\n theme.direction === 'rtl' ? _react2.default.createElement(_ChevronRight2.default, null) : _react2.default.createElement(_ChevronLeft2.default, null)\r\n ),\r\n _react2.default.createElement(\r\n 'span',\r\n { className: classes.pageNumberInput + ' page-input' },\r\n _react2.default.createElement(\r\n _Typography2.default,\r\n { variant: 'body3', className: classes.typography },\r\n edsContext.formatMessage('component.Pagination.page')\r\n ),\r\n _react2.default.createElement(_TextField2.default, {\r\n className: (0, _classnames2.default)(classes.textField),\r\n inputRef: function inputRef(input) {\r\n return _this4.paginationPageTextField = input;\r\n },\r\n value: pageNumberInput,\r\n inputProps: { 'aria-label': '' + pageNumberInput },\r\n onChange: this.handleTextFieldOnChange,\r\n margin: 'normal',\r\n onKeyPress: this.handleEnterKeyPress,\r\n onFocus: this.handleTextFieldFocus,\r\n onBlur: this.handleTextFieldOnBlur,\r\n disabled: totalNumberOfPages === 0\r\n }),\r\n _react2.default.createElement(\r\n _Typography2.default,\r\n { variant: 'body3', className: classes.typography },\r\n edsContext.formatMessage('component.Pagination.ofTotalCount', { count: totalNumberOfPages + 1 })\r\n )\r\n ),\r\n _react2.default.createElement(\r\n _IconButton2.default,\r\n {\r\n onClick: this.handleNextButtonClick,\r\n disabled: disableNextButtons,\r\n color: 'secondary',\r\n 'aria-label': edsContext.formatMessage('component.Pagination.nextPage'),\r\n title: edsContext.formatMessage('component.Pagination.nextPage'),\r\n className: classes.paginationButtons + ' ' + classes.buttonSpacer\r\n },\r\n theme.direction === 'rtl' ? _react2.default.createElement(_ChevronLeft2.default, null) : _react2.default.createElement(_ChevronRight2.default, null)\r\n ),\r\n _react2.default.createElement(\r\n _IconButton2.default,\r\n {\r\n onClick: this.handleLastPageButtonClick,\r\n disabled: disableNextButtons,\r\n color: 'secondary',\r\n 'aria-label': edsContext.formatMessage('component.Pagination.lastPage'),\r\n title: edsContext.formatMessage('component.Pagination.lastPage'),\r\n className: classes.paginationButtons\r\n },\r\n theme.direction === 'rtl' ? _react2.default.createElement(_ArrowEndLeft2.default, null) : _react2.default.createElement(_ArrowEndRight2.default, null)\r\n )\r\n );\r\n }\r\n }]);\r\n\r\n return PaginationActions;\r\n}(_react2.default.Component);\r\n\r\nPaginationActions.propTypes = {\r\n classes: _propTypes2.default.object.isRequired,\r\n count: _propTypes2.default.number.isRequired,\r\n onChangePage: _propTypes2.default.func.isRequired,\r\n page: _propTypes2.default.number.isRequired,\r\n rowsPerPage: _propTypes2.default.number.isRequired,\r\n theme: _propTypes2.default.object.isRequired,\r\n edsContext: _propTypes2.default.object.isRequired\r\n};\r\n\r\nvar PaginationActionsWrapped = (0, _EDSContext.withEDSContext)((0, _styles2.default)(actionStyles, { withTheme: true })(PaginationActions));\r\n\r\n// Pagination Styles\r\nvar styles = function styles(theme) {\r\n return {\r\n root: _defineProperty({\r\n // Target the \"Total results...\" text\r\n '& $caption:nth-last-child(2)': _defineProperty({\r\n order: 4,\r\n marginRight: 0,\r\n marginLeft: 'auto'\r\n }, theme.breakpoints.between('xs', 'sm'), {\r\n marginRight: _tokens.spacingXSmall\r\n })\r\n }, theme.breakpoints.between('xs', 'sm'), {\r\n width: _tokens.widthFluid,\r\n paddingTop: _tokens.spacingXSmall,\r\n paddingBottom: _tokens.spacingLarge\r\n // TODO: To be used if it needs to be attached to bottom or made configurable\r\n // bottom: \"0\",\r\n // zIndex: \"99\",\r\n // background: \"rgba(255, 255, 255, 1)\",\r\n // position: \"fixed\",\r\n // left: 0,\r\n // boxShadow: \"0px -3px 10px #ccc\",\r\n }),\r\n toolbar: _defineProperty({\r\n padding: 0,\r\n margin: '0 ' + _tokens.spacingSmall + ' ' + _tokens.spacingSmall + ' ' + _tokens.spacingXSmall\r\n }, theme.breakpoints.between('xs', 'sm'), {\r\n justifyContent: 'flex-start',\r\n flexWrap: 'wrap',\r\n margin: '0 ' + _tokens.spacingXSmall + ' 0 ' + _tokens.spacingXSmall\r\n }),\r\n spacer: {\r\n flex: 'none',\r\n order: 1\r\n },\r\n caption: {\r\n color: theme.palette.grey[500],\r\n order: 3,\r\n marginRight: _tokens.spacingSmall,\r\n marginLeft: _tokens.spacingXSmall\r\n },\r\n selectRoot: _defineProperty({\r\n marginRight: _tokens.spacingXxLarge\r\n }, theme.breakpoints.between('xs', 'sm'), {\r\n marginRight: 0\r\n }),\r\n selectIcon: {\r\n top: _tokens.spacingXSmall,\r\n right: _tokens.spacingXxSmall,\r\n fill: theme.palette.grey[500]\r\n },\r\n select: {\r\n fontSize: theme.typography.caption.fontSize,\r\n paddingRight: _tokens.spacingLarge,\r\n '&:focus': {\r\n borderRadius: _tokens.borderRadiusSmall,\r\n boxShadow: _tokens.boxShadowFocusInset,\r\n backgroundColor: 'transparent'\r\n }\r\n },\r\n input: {\r\n order: 4\r\n },\r\n menuList: {\r\n border: theme.palette.ctaColor.base + ' ' + _tokens.borderWidthThin + ' solid',\r\n borderRadius: _tokens.borderRadiusMedium\r\n },\r\n menuListItem: {\r\n '& :first-child': {\r\n borderTopRightRadius: _tokens.borderRadiusSmall,\r\n borderTopLeftRadius: _tokens.borderRadiusSmall\r\n },\r\n '& :last-child': {\r\n borderBottomRightRadius: _tokens.borderRadiusSmall,\r\n borderBottomLeftRadius: _tokens.borderRadiusSmall\r\n }\r\n },\r\n menuItem: {\r\n padding: _tokens.spacingXSmall + ' ' + _tokens.spacingXSmall2,\r\n borderBottom: _tokens.borderWidthThin + ' solid ' + theme.palette.grey[300],\r\n // Had to use `!important` below to override styles as MUI Pagination is adding inline styles.\r\n minWidth: _tokens.spacingLarge + ' !important',\r\n '&:last-child': {\r\n borderBottom: 'transparent ' + _tokens.borderWidthThin + ' solid'\r\n },\r\n fontSize: _tokens.fontSizeDefault,\r\n '&:hover': {\r\n color: theme.palette.grey[600],\r\n backgroundColor: theme.palette.grey[250]\r\n },\r\n //Using aria-selected as a workaround as accessing the selected styles of menuItem was not possible\r\n '&[aria-selected=true]': {\r\n backgroundColor: theme.palette.ctaColor.base,\r\n color: theme.palette.grey[100],\r\n '&:hover': {\r\n backgroundColor: theme.palette.ctaColor.active\r\n }\r\n }\r\n },\r\n\r\n menuPaper: {\r\n boxShadow: 'none'\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * Use `Pagination` to allow users to navigate large data sets by breaking out the data into smaller, more consumable \"pages.\"\r\n * @done true\r\n * @updated true\r\n * @versionAdded v0.0.8\r\n * @examples\r\n * PaginationExamples\r\n * PaginationWithListExamples\r\n * PaginationWithTableExamples\r\n */\r\n\r\nvar Pagination = function (_React$Component2) {\r\n _inherits(Pagination, _React$Component2);\r\n\r\n function Pagination() {\r\n _classCallCheck(this, Pagination);\r\n\r\n return _possibleConstructorReturn(this, (Pagination.__proto__ || Object.getPrototypeOf(Pagination)).apply(this, arguments));\r\n }\r\n\r\n _createClass(Pagination, [{\r\n key: 'render',\r\n value: function render() {\r\n var _props2 = this.props,\r\n classes = _props2.classes,\r\n rowsPerPageOptions = _props2.rowsPerPageOptions,\r\n count = _props2.count,\r\n edsContext = _props2.edsContext,\r\n rowsPerPageShowAll = _props2.rowsPerPageShowAll,\r\n labelRowsPerPage = _props2.labelRowsPerPage,\r\n SelectProps = _props2.SelectProps,\r\n rest = _objectWithoutProperties(_props2, ['classes', 'rowsPerPageOptions', 'count', 'edsContext', 'rowsPerPageShowAll', 'labelRowsPerPage', 'SelectProps']);\r\n\r\n // Append `count` to the Select input\r\n\r\n\r\n var _rowsPerPageOption = rowsPerPageOptions;\r\n if (rowsPerPageShowAll) {\r\n _rowsPerPageOption = [].concat(_toConsumableArray(rowsPerPageOptions), [count]);\r\n }\r\n\r\n var classOverrides = {\r\n root: classes.root,\r\n toolbar: classes.toolbar,\r\n spacer: classes.spacer,\r\n caption: classes.caption,\r\n selectRoot: classes.selectRoot,\r\n select: classes.select,\r\n selectIcon: classes.selectIcon,\r\n input: classes.input,\r\n menuItem: classes.menuItem\r\n };\r\n\r\n var selectProps = Object.assign({\r\n IconComponent: _ChevronDown2.default,\r\n MenuProps: {\r\n classes: {\r\n paper: classes.menuPaper\r\n },\r\n MenuListProps: {\r\n className: classes.menuList,\r\n disablePadding: true,\r\n classes: {\r\n root: classes.menuListItem\r\n }\r\n }\r\n }\r\n }, SelectProps);\r\n\r\n return _react2.default.createElement(_TablePagination2.default, Object.assign({\r\n ActionsComponent: PaginationActionsWrapped,\r\n classes: classOverrides,\r\n className: classes.root,\r\n count: count,\r\n rowsPerPageOptions: _rowsPerPageOption,\r\n labelRowsPerPage: labelRowsPerPage === Pagination.defaultProps.labelRowsPerPage ? // translate unless a label was provided\r\n edsContext.formatMessage('component.Pagination.perPage') : labelRowsPerPage,\r\n labelDisplayedRows: function labelDisplayedRows(rows) {\r\n return edsContext.formatMessage('component.Pagination.totalResults') + ' ' + rows.count;\r\n },\r\n SelectProps: selectProps\r\n }, rest));\r\n }\r\n }]);\r\n\r\n return Pagination;\r\n}(_react2.default.Component);\r\n\r\n;\r\n\r\nPagination.muiName = 'Pagination';\r\n\r\nPagination.propTypes = {\r\n /**\r\n * The component used for the root node.\r\n * Either a string to use a DOM element or a component.\r\n * EX: Use TableCell if used within Table\r\n */\r\n component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * The total number of rows.\r\n */\r\n count: _propTypes2.default.number.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n edsContext: _propTypes2.default.object,\r\n /**\r\n * Customize the rows per page label. Invoked with a `{ from, to, count, page }`\r\n * object.\r\n */\r\n labelRowsPerPage: _propTypes2.default.node,\r\n /**\r\n * Callback fired when the page is changed.\r\n *\r\n * @param {object} event The event source of the callback\r\n * @param {number} page The page selected\r\n */\r\n onChangePage: _propTypes2.default.func.isRequired,\r\n /**\r\n * Callback fired when the number of rows per page is changed.\r\n *\r\n * @param {object} event The event source of the callback\r\n */\r\n onChangeRowsPerPage: _propTypes2.default.func,\r\n /**\r\n * The zero-based index of the current page.\r\n */\r\n page: _propTypes2.default.number,\r\n /**\r\n * The number of rows per page.\r\n */\r\n rowsPerPage: _propTypes2.default.number.isRequired,\r\n /**\r\n * Customizes the options of the rows per page select field. If less than two options are\r\n * available, no select field will be displayed.\r\n */\r\n rowsPerPageOptions: _propTypes2.default.array,\r\n /**\r\n * Set to `true` to render a total count option in the `Select` in the last index.\r\n */\r\n rowsPerPageShowAll: _propTypes2.default.bool,\r\n /**\r\n * Properties applied to the rows per page `Select` element.\r\n */\r\n SelectProps: _propTypes2.default.object\r\n};\r\n\r\n// If default props are needed, they must be set here\r\nPagination.defaultProps = {\r\n labelRowsPerPage: 'Per page:',\r\n component: 'div',\r\n rowsPerPageOptions: [10, 20],\r\n rowsPerPageShowAll: false\r\n};\r\n\r\nexports.default = (0, _EDSContext.withEDSContext)((0, _styles2.default)(styles)(Pagination));","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _List = require('@material-ui/core/List');\r\n\r\nvar _List2 = _interopRequireDefault(_List);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: {\r\n backgroundColor: theme.palette.common.white,\r\n width: _tokens.widthFluid\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * Use `List` to display a continuous, vertical index of text and/or images.\r\n * @done true\r\n * @updated true\r\n * @versionAdded v0.0.15\r\n * @examples\r\n * PrimaryTextExample\r\n * SecondaryTextExample\r\n * ControlsExample\r\n * ListItemWithButtonExample\r\n * IconsExample\r\n * ComplexListExample\r\n * MultilineExample\r\n * NestedListExample\r\n */\r\nvar List = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var classOverrides = {\r\n // Style overrides\r\n root: classes.root\r\n };\r\n\r\n return _react2.default.createElement(_List2.default, Object.assign({}, rest, {\r\n classes: classOverrides,\r\n ref: ref\r\n }));\r\n});\r\n\r\nList.muiName = 'List';\r\nList.displayName = 'List';\r\n\r\nList.propTypes = {\r\n /**\r\n * The content of the component.\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * The component used for the root node.\r\n * Either a string to use a DOM element or a component.\r\n */\r\n component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),\r\n /**\r\n * If `true`, compact vertical padding designed for keyboard and mouse input will be used for\r\n * the list and list items. The property is available to descendant components as the\r\n * `dense` context.\r\n */\r\n dense: _propTypes2.default.bool,\r\n /**\r\n * If `true`, vertical padding will be removed from the list.\r\n */\r\n disablePadding: _propTypes2.default.bool,\r\n /**\r\n * The content of the subheader, normally `ListSubheader`.\r\n */\r\n subheader: _propTypes2.default.node\r\n};\r\n\r\nList.defaultProps = {\r\n dense: false,\r\n disablePadding: true\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(List);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _ListItem = require('@material-ui/core/ListItem');\r\n\r\nvar _ListItem2 = _interopRequireDefault(_ListItem);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nvar FOCUS_VISIBLE_CLASSNAME = 'eds-list-item-focus-visible';\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: _defineProperty({\r\n cursor: 'pointer',\r\n padding: _tokens.spacingSmall,\r\n '&:hover': {\r\n backgroundColor: theme.palette.grey['250']\r\n }\r\n }, '&.' + FOCUS_VISIBLE_CLASSNAME, {\r\n backgroundColor: '' + theme.palette.grey['250']\r\n })\r\n };\r\n};\r\n\r\n/**\r\n * An item in a list.\r\n */\r\nvar ListItem = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var classOverrides = {\r\n root: classes.root\r\n };\r\n\r\n return _react2.default.createElement(_ListItem2.default, Object.assign({}, rest, {\r\n classes: classOverrides,\r\n focusVisibleClassName: FOCUS_VISIBLE_CLASSNAME,\r\n ref: ref\r\n }));\r\n});\r\n\r\nListItem.muiName = 'ListItem';\r\nListItem.displayName = 'ListItem';\r\n\r\nListItem.propTypes = {\r\n /**\r\n * If `true`, the list item will be a button (using `ButtonBase`).\r\n */\r\n button: _propTypes2.default.bool,\r\n /**\r\n * The content of the component.\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * The component used for the root node.\r\n * Either a string to use a DOM element or a component.\r\n * By default, it's a `li` when `button` is `false` and a `div` when `button` is `true`.\r\n */\r\n component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object]),\r\n /**\r\n * The container component used when a `ListItemSecondaryAction` is rendered.\r\n */\r\n ContainerComponent: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object]),\r\n /**\r\n * Properties applied to the container element when the component\r\n * is used to display a `ListItemSecondaryAction`.\r\n */\r\n ContainerProps: _propTypes2.default.object,\r\n /**\r\n * If `true`, compact vertical padding designed for keyboard and mouse input will be used.\r\n */\r\n dense: _propTypes2.default.bool,\r\n /**\r\n * If `true`, the list item will be disabled.\r\n */\r\n disabled: _propTypes2.default.bool,\r\n /**\r\n * If `true`, the left and right padding is removed.\r\n */\r\n disableGutters: _propTypes2.default.bool,\r\n /**\r\n * If `true`, a 1px light border is added to the bottom of the list item.\r\n */\r\n divider: _propTypes2.default.bool\r\n};\r\n\r\nListItem.defaultProps = {\r\n button: false,\r\n ContainerComponent: 'li',\r\n dense: false,\r\n disabled: false,\r\n disableGutters: false,\r\n divider: false\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(ListItem);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _ListItemAvatar = require('@material-ui/core/ListItemAvatar');\r\n\r\nvar _ListItemAvatar2 = _interopRequireDefault(_ListItemAvatar);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\n// Necessary design tokens are imported here\r\n//import { } from '../styles/tokens';\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n // Necessary style overrides are set here\r\n root: {}\r\n };\r\n};\r\n\r\n/**\r\n * A simple wrapper component to apply avavtar styles to ListItems.\r\n */\r\nvar ListItemAvatar = function ListItemAvatar(props) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var classOverrides = {\r\n // See Material UI documentation for available CSS classes can be passed through to override\r\n root: classes.root\r\n };\r\n\r\n return _react2.default.createElement(_ListItemAvatar2.default, Object.assign({}, rest, {\r\n classes: classOverrides\r\n }));\r\n};\r\n\r\nListItemAvatar.muiName = 'ListItemAvatar';\r\n\r\nListItemAvatar.propTypes = {\r\n /**\r\n * The content of the component – normally `Avatar`.\r\n */\r\n children: _propTypes2.default.element.isRequired,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object\r\n};\r\n\r\n// If default props are needed, they must be set here\r\n// ListItemAvatar.defaultProps = { };\r\n\r\nexports.default = (0, _styles2.default)(styles)(ListItemAvatar);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _ListItemIcon = require('@material-ui/core/ListItemIcon');\r\n\r\nvar _ListItemIcon2 = _interopRequireDefault(_ListItemIcon);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\n// Necessary design tokens are imported here\r\n//import { } from '../styles/tokens';\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n // Necessary style overrides are set here\r\n root: {}\r\n };\r\n};\r\n\r\n/**\r\n * A simple wrapper component to apply icon styles to ListItems.\r\n */\r\nvar ListItemIcon = function ListItemIcon(props) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var classOverrides = {\r\n // See Material UI documentation for available CSS classes can be passed through to override\r\n root: classes.root\r\n };\r\n\r\n return _react2.default.createElement(_ListItemIcon2.default, Object.assign({}, rest, {\r\n classes: classOverrides }));\r\n};\r\n\r\nListItemIcon.muiName = 'ListItemIcon';\r\n\r\nListItemIcon.propTypes = {\r\n /**\r\n * The content of the component, normally an icon\r\n */\r\n children: _propTypes2.default.element.isRequired,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(ListItemIcon);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _ListItemSecondaryAction = require('@material-ui/core/ListItemSecondaryAction');\r\n\r\nvar _ListItemSecondaryAction2 = _interopRequireDefault(_ListItemSecondaryAction);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: {}\r\n };\r\n};\r\n\r\n/**\r\n * A simple wrapper component to apply secondary action styles to ListItems.\r\n */\r\nvar ListItemSecondaryAction = function ListItemSecondaryAction(props) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var classOverrides = {\r\n // See Material UI documentation for available CSS classes can be passed through to override\r\n root: classes.root\r\n };\r\n\r\n return _react2.default.createElement(_ListItemSecondaryAction2.default, Object.assign({}, rest, {\r\n classes: classOverrides\r\n }));\r\n};\r\n\r\nListItemSecondaryAction.muiName = 'ListItemSecondaryAction';\r\n\r\nListItemSecondaryAction.propTypes = {\r\n /**\r\n * The content of the component, normally an `IconButton` or selection control.\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object\r\n};\r\n\r\n// If default props are needed, they must be set here\r\n// ListItemSecondaryAction.defaultProps = { };\r\n\r\nexports.default = (0, _styles2.default)(styles)(ListItemSecondaryAction);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _ListItemText = require('@material-ui/core/ListItemText');\r\n\r\nvar _ListItemText2 = _interopRequireDefault(_ListItemText);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: {\r\n margin: 0\r\n },\r\n // Note that these styles propagate out to components that use List, e.g. Dropdown\r\n primary: { // Primary typography components\r\n fontFamily: theme.typography.fontFamily,\r\n fontSize: theme.typography.body1.fontSize,\r\n fontWeight: theme.typography.fontWeightNormal,\r\n lineHeight: theme.typography.body2.lineHeight\r\n },\r\n secondary: { // Secondary typography components\r\n fontFamily: theme.typography.fontFamily,\r\n fontSize: theme.typography.caption.fontSize,\r\n fontWeight: theme.typography.fontWeightNormal,\r\n lineHeight: theme.typography.caption.lineHeight\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * A component that applies correct text styling to ListItems.\r\n */\r\nvar ListItemText = function ListItemText(props) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var classOverrides = {\r\n root: classes.root,\r\n primary: classes.primary,\r\n secondary: classes.secondary\r\n };\r\n\r\n return _react2.default.createElement(_ListItemText2.default, Object.assign({}, rest, {\r\n classes: classOverrides\r\n }));\r\n};\r\n\r\nListItemText.muiName = 'ListItemText';\r\n\r\nListItemText.propTypes = {\r\n /**\r\n * Alias for the `primary` property.\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * If `true`, the children won't be wrapped by a Typography component.\r\n * This can be useful to render an alternative Typography variant by wrapping\r\n * the `children` (or `primary`) text, and optional `secondary` text\r\n * with the Typography component.\r\n */\r\n disableTypography: _propTypes2.default.bool,\r\n /**\r\n * If `true`, the children will be indented.\r\n * This should be used if there is no left avatar or left icon.\r\n */\r\n inset: _propTypes2.default.bool,\r\n /**\r\n * The main content element.\r\n */\r\n primary: _propTypes2.default.node,\r\n /**\r\n * These props will be forwarded to the primary typography component\r\n * (as long as disableTypography is not `true`).\r\n */\r\n primaryTypographyProps: _propTypes2.default.object,\r\n /**\r\n * The secondary content element.\r\n */\r\n secondary: _propTypes2.default.node,\r\n /**\r\n * These props will be forwarded to the secondary typography component\r\n * (as long as disableTypography is not `true`).\r\n */\r\n secondaryTypographyProps: _propTypes2.default.object\r\n};\r\n\r\nListItemText.defaultProps = {\r\n disableTypography: false,\r\n inset: false\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(ListItemText);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _ListSubheader = require('@material-ui/core/ListSubheader');\r\n\r\nvar _ListSubheader2 = _interopRequireDefault(_ListSubheader);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\n// Necessary design tokens are imported here\r\n//import { } from '../styles/tokens';\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n // Necessary style overrides are set here\r\n root: {}\r\n };\r\n};\r\n\r\n/**\r\n * A component that....\r\n */\r\nvar ListSubheader = function ListSubheader(props) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var classOverrides = {\r\n // See Material UI documentation for available CSS classes can be passed through to override\r\n root: classes.root\r\n };\r\n\r\n return _react2.default.createElement(_ListSubheader2.default, Object.assign({}, rest, {\r\n classes: classOverrides\r\n }));\r\n};\r\n\r\nListSubheader.muiName = 'ListSubheader';\r\n\r\nListSubheader.propTypes = {\r\n /**\r\n * The content of the component.\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * The color of the component. It supports those theme colors that make sense for this component.\r\n */\r\n color: _propTypes2.default.oneOf(['default', 'primary', 'inherit']),\r\n /**\r\n * The component used for the root node.\r\n * Either a string to use a DOM element or a component.\r\n */\r\n component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object]),\r\n /**\r\n * If `true`, the List Subheader will not stick to the top during scroll.\r\n */\r\n disableSticky: _propTypes2.default.bool,\r\n /**\r\n * If `true`, the List Subheader will be indented.\r\n */\r\n inset: _propTypes2.default.bool\r\n};\r\n\r\nListSubheader.defaultProps = {\r\n color: 'default',\r\n component: 'li',\r\n disableSticky: false,\r\n inset: false\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(ListSubheader);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _StepProgress = require('./StepProgress');\r\n\r\nObject.defineProperty(exports, 'default', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_StepProgress).default;\r\n }\r\n});\r\n\r\nvar _MobileStepper = require('./MobileStepper');\r\n\r\nObject.defineProperty(exports, 'MobileStepper', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_MobileStepper).default;\r\n }\r\n});\r\n\r\nvar _MobileStepperCounter = require('./MobileStepperCounter');\r\n\r\nObject.defineProperty(exports, 'MobileStepperCounter', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_MobileStepperCounter).default;\r\n }\r\n});\r\n\r\nvar _MobileStepperStep = require('./MobileStepperStep');\r\n\r\nObject.defineProperty(exports, 'MobileStepperStep', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_MobileStepperStep).default;\r\n }\r\n});\r\n\r\nvar _MobileStepperLabel = require('./MobileStepperLabel');\r\n\r\nObject.defineProperty(exports, 'MobileStepperLabel', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_MobileStepperLabel).default;\r\n }\r\n});\r\n\r\nvar _MobileStepperTitle = require('./MobileStepperTitle');\r\n\r\nObject.defineProperty(exports, 'MobileStepperTitle', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_MobileStepperTitle).default;\r\n }\r\n});\r\n\r\nvar _Step = require('./Step');\r\n\r\nObject.defineProperty(exports, 'Step', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_Step).default;\r\n }\r\n});\r\n\r\nvar _StepButton = require('./StepButton');\r\n\r\nObject.defineProperty(exports, 'StepButton', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_StepButton).default;\r\n }\r\n});\r\n\r\nvar _StepContent = require('./StepContent');\r\n\r\nObject.defineProperty(exports, 'StepContent', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_StepContent).default;\r\n }\r\n});\r\n\r\nvar _StepLabel = require('./StepLabel');\r\n\r\nObject.defineProperty(exports, 'StepLabel', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_StepLabel).default;\r\n }\r\n});\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _EDSContext = require('./../EDSContext/EDSContext');\r\n\r\nvar _core = require('@material-ui/core');\r\n\r\nvar _constants = require('./internal/constants.js');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: {\r\n background: 'transparent',\r\n },\r\n hidden: {\r\n width: 0,\r\n height: 0,\r\n color: 'transparent'\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * Use `StepProgress` to display a user's progress through numbered steps.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.14\r\n * @examples\r\n * LinearHorizontalExample\r\n * NonLinearExample\r\n * AlternativeLabelExample\r\n * VerticalExample\r\n * ErrorStateExample\r\n * MobileStepperExample\r\n * NonLinearDisabledExample\r\n */\r\nvar StepProgress = _react2.default.forwardRef(function (props, ref) {\r\n var _useState = (0, _react.useState)(''),\r\n _useState2 = _slicedToArray(_useState, 2),\r\n stepLabel = _useState2[0],\r\n setStepLabel = _useState2[1];\r\n\r\n var _useState3 = (0, _react.useState)(false),\r\n _useState4 = _slicedToArray(_useState3, 2),\r\n hasStepError = _useState4[0],\r\n setHasStepError = _useState4[1];\r\n\r\n var _useState5 = (0, _react.useState)(''),\r\n _useState6 = _slicedToArray(_useState5, 2),\r\n errorLabel = _useState6[0],\r\n setErrorLabel = _useState6[1];\r\n\r\n var localRef = ref || (0, _react.useRef)();\r\n\r\n var classes = props.classes,\r\n edsContext = props.edsContext,\r\n rest = _objectWithoutProperties(props, ['classes', 'edsContext']);\r\n\r\n var classOverrides = {\r\n root: classes.root\r\n };\r\n\r\n // This effect sets the `aria-label` to say `, / \r\n // by the screen reader by extracting all the step labels\r\n (0, _react.useEffect)(function () {\r\n var stepLabels = localRef.current.querySelectorAll('.' + _constants.STEP_LABEL_CLASSNAME);\r\n\r\n stepLabels.forEach(function (localStepLabel, i) {\r\n localStepLabel.setAttribute('aria-label', edsContext.formatMessage('component.StepProgress.a11yLabel', {\r\n label: localStepLabel.textContent.replace(/^[0-9]/, ''),\r\n step: i + 1,\r\n totalSteps: stepLabels.length\r\n }));\r\n });\r\n }, [localRef, edsContext]);\r\n\r\n // This effect sets the div with current step content with error message if there is one.\r\n (0, _react.useEffect)(function () {\r\n try {\r\n var stepLabels = localRef.current.querySelectorAll('.' + _constants.STEP_LABEL_CLASSNAME);\r\n var activeStep = stepLabels[props.activeStep];\r\n var localStepLabel = localRef.current.querySelectorAll('.' + _constants.STEP_PROGRESS_STEP_CLASSNAME)[props.activeStep];\r\n var localErrorLabel = localStepLabel && localStepLabel.querySelector('.' + _constants.STEP_LABEL_ERROR_CLASSNAME);\r\n var secondaryLabel = localErrorLabel ? localErrorLabel.textContent : '';\r\n setHasStepError(activeStep ? activeStep.classList.contains(_constants.STEP_LABEL_HAS_ERROR_CLASSNAME) : '');\r\n setErrorLabel(secondaryLabel);\r\n setStepLabel(props.activeStep + 1 > stepLabels.length ? edsContext.formatMessage('component.MobileStepper.allStepsCompleted') : activeStep && activeStep.getAttribute('aria-label'));\r\n } catch (error) {\r\n console.log(error);\r\n }\r\n }, [props.activeStep, localRef, edsContext]);\r\n\r\n var getText = function getText() {\r\n var errorMessage = edsContext.formatMessage('component.StepProgress.errorMessage', {\r\n errorMessage: errorLabel\r\n });\r\n var text = stepLabel;\r\n\r\n text += hasStepError ? ', ' + edsContext.formatMessage('component.StepProgress.errorMessageTitle') : '';\r\n text += errorLabel.length ? ', ' + errorMessage : '';\r\n\r\n return text;\r\n };\r\n\r\n return _react2.default.createElement(\r\n _react2.default.Fragment,\r\n null,\r\n _react2.default.createElement(_core.Stepper, Object.assign({}, rest, {\r\n classes: classOverrides,\r\n ref: localRef\r\n })),\r\n _react2.default.createElement(\r\n 'div',\r\n { 'aria-live': 'assertive', className: classes.hidden + ' ' + _constants.ACTIVE_STEP_SCREEN_READER_TEXT },\r\n getText()\r\n )\r\n );\r\n});\r\n\r\nStepProgress.muiName = 'Stepper';\r\nStepProgress.displayName = 'StepProgress';\r\n\r\nStepProgress.propTypes = {\r\n /**\r\n * Set the active step (zero based index).\r\n */\r\n activeStep: _propTypes2.default.number,\r\n /**\r\n * If set to 'true' and orientation is `horizontal`,\r\n * then the step label will be positioned under the icon.\r\n */\r\n alternativeLabel: _propTypes2.default.bool,\r\n /**\r\n * Two or more `` components.\r\n */\r\n children: _propTypes2.default.node.isRequired,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * A component to be placed between each step.\r\n */\r\n connector: _propTypes2.default.element,\r\n /**\r\n * If set the `StepProgress` will not assist in controlling steps for linear flow.\r\n */\r\n nonLinear: _propTypes2.default.bool,\r\n /**\r\n * The stepper orientation (layout flow direction).\r\n */\r\n orientation: _propTypes2.default.oneOf(['horizontal', 'vertical'])\r\n};\r\n\r\nStepProgress.defaultProps = {\r\n activeStep: 0,\r\n alternativeLabel: false,\r\n connector: _react2.default.createElement(_core.StepConnector, null),\r\n nonLinear: false,\r\n orientation: 'horizontal'\r\n};\r\n\r\nexports.default = (0, _EDSContext.withEDSContext)((0, _styles2.default)(styles)(StepProgress));","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _classnames = require('classnames');\r\n\r\nvar _classnames2 = _interopRequireDefault(_classnames);\r\n\r\nvar _capitalize = require('lodash/capitalize');\r\n\r\nvar _capitalize2 = _interopRequireDefault(_capitalize);\r\n\r\nvar _EDSContext = require('./../EDSContext/EDSContext');\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _core = require('@material-ui/core');\r\n\r\nvar _MobileStepperCounter = require('./MobileStepperCounter');\r\n\r\nvar _MobileStepperCounter2 = _interopRequireDefault(_MobileStepperCounter);\r\n\r\nvar _constants = require('./internal/constants');\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: {\r\n backgroundColor: theme.palette.grey[200],\r\n height: _tokens.sizingXxLarge1,\r\n padding: '0 ' + _tokens.spacingMedium\r\n },\r\n // StepCounter styles when position is bottom\r\n stepCounterBottom: {\r\n position: 'fixed',\r\n transform: 'translate(-50%, -50%)',\r\n textAlign: 'center',\r\n left: '50%',\r\n bottom: _tokens.spacingXSmall,\r\n zIndex: theme.zIndex.mobileStepper + 1 // MUI defined z-index + 1 to show on top of the MuiMobileStepper\r\n },\r\n // StepCounter styles when position is static\r\n stepCounterStatic: {\r\n position: 'relative',\r\n textAlign: 'center',\r\n top: 40\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * Mobile step progress\r\n */\r\nvar MobileStepper = _react2.default.forwardRef(function (props, ref) {\r\n var _useState = (0, _react.useState)(''),\r\n _useState2 = _slicedToArray(_useState, 2),\r\n label = _useState2[0],\r\n setLabel = _useState2[1];\r\n\r\n var localRef = ref || (0, _react.useRef)();\r\n\r\n var classes = props.classes,\r\n activeStep = props.activeStep,\r\n steps = props.steps,\r\n StepCounterContent = props.StepCounterContent,\r\n position = props.position,\r\n children = props.children,\r\n edsContext = props.edsContext,\r\n rest = _objectWithoutProperties(props, ['classes', 'activeStep', 'steps', 'StepCounterContent', 'position', 'children', 'edsContext']);\r\n\r\n var classOverrides = {\r\n root: classes.root\r\n };\r\n\r\n var mobileStepperCounterClassName = (0, _classnames2.default)(classes['stepCounter' + (0, _capitalize2.default)(position)]);\r\n\r\n // This effect sets the div with current step content with error message if there is one.\r\n (0, _react.useEffect)(function () {\r\n var mobileStepLabel = localRef.current.querySelector('.' + _constants.MOBILE_STEPPER_LABEL_CLASSNAME);\r\n setLabel(props.activeStep + 1 > steps ? edsContext.formatMessage('component.MobileStepper.allStepsCompleted') : edsContext.formatMessage('component.MobileStepper.a11yLabel', {\r\n label: mobileStepLabel && mobileStepLabel.textContent\r\n }));\r\n }, [props.activeStep, steps, edsContext, localRef]);\r\n\r\n return _react2.default.createElement(\r\n 'div',\r\n { ref: localRef },\r\n children,\r\n StepCounterContent ? _react2.default.createElement(\r\n 'div',\r\n { className: mobileStepperCounterClassName },\r\n StepCounterContent\r\n ) : _react2.default.createElement(\r\n 'div',\r\n { className: mobileStepperCounterClassName,\r\n 'aria-atomic': 'false',\r\n 'aria-live': 'assertive',\r\n 'aria-label': label\r\n },\r\n _react2.default.createElement(_MobileStepperCounter2.default, { activeStep: activeStep, steps: steps, position: position })\r\n ),\r\n _react2.default.createElement(_core.MobileStepper, Object.assign({\r\n steps: steps,\r\n activeStep: activeStep,\r\n position: position,\r\n classes: classOverrides,\r\n variant: null\r\n }, rest))\r\n );\r\n});\r\n\r\nMobileStepper.muiName = 'MobileStepper';\r\nMobileStepper.displayName = 'MobileStepper';\r\n\r\nMobileStepper.propTypes = {\r\n /**\r\n * Set the active step (zero based index).\r\n */\r\n activeStep: _propTypes2.default.number,\r\n /**\r\n * A back button element. For instance, it can be be a `Button` or a `IconButton`.\r\n */\r\n backButton: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * The children will be rendered before the `` and the bottom control bar.\r\n */\r\n children: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object, _propTypes2.default.node]),\r\n /**\r\n * A next button element. For instance, it can be be a `Button` or a `IconButton`.\r\n */\r\n nextButton: _propTypes2.default.node,\r\n /**\r\n * Set the positioning type.\r\n */\r\n position: _propTypes2.default.oneOf(['bottom', 'static']),\r\n /**\r\n * The total steps.\r\n */\r\n steps: _propTypes2.default.number.isRequired,\r\n /**\r\n * Sent in a custom step counter.\r\n */\r\n StepCounterContent: _propTypes2.default.node\r\n};\r\n\r\n// default property values\r\nMobileStepper.defaultProps = {\r\n activeStep: 0,\r\n position: 'bottom'\r\n};\r\n\r\nexports.default = (0, _EDSContext.withEDSContext)((0, _styles2.default)(styles)(MobileStepper));","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _Typography = require('../Typography');\r\n\r\nvar _Typography2 = _interopRequireDefault(_Typography);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n currentStepContainer: {\r\n alignContent: 'stretch',\r\n alignItems: 'center',\r\n display: 'flex',\r\n flexDirection: 'row',\r\n flexWrap: 'nowrap',\r\n justifyContent: 'flex-start',\r\n marginBottom: _tokens.spacingMedium\r\n },\r\n currentStep: {\r\n alignSelf: 'auto',\r\n backgroundColor: theme.palette.ctaColor.base,\r\n borderRadius: '100%',\r\n flex: '0 1 auto',\r\n height: _tokens.spacingLarge,\r\n order: 0,\r\n textAlign: 'center',\r\n width: _tokens.spacingLarge\r\n },\r\n currentStepNumber: {\r\n fontSize: _tokens.fontSizeSmall,\r\n color: theme.palette.grey[100],\r\n position: 'relative',\r\n top: _tokens.spacingXSmall\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * A component that displays the current step of the total steps\r\n */\r\nvar MobileStepperStep = _react2.default.forwardRef(function (props, ref) {\r\n var activeStep = props.activeStep,\r\n classes = props.classes;\r\n\r\n\r\n return _react2.default.createElement(\r\n 'div',\r\n { className: classes.currentStepContainer, ref: ref },\r\n _react2.default.createElement(\r\n 'div',\r\n { className: classes.currentStep },\r\n _react2.default.createElement(\r\n _Typography2.default,\r\n { className: classes.currentStepNumber },\r\n activeStep + 1\r\n )\r\n ),\r\n props.children && props.children\r\n );\r\n});\r\n\r\nMobileStepperStep.propTypes = {\r\n /**\r\n * Set the active step (zero based index). This should be the same value that is being sent to the component.\r\n */\r\n activeStep: _propTypes2.default.number,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * The step title component node.\r\n */\r\n children: _propTypes2.default.node\r\n};\r\n\r\nMobileStepperStep.displayName = 'MobileStepperStep';\r\n\r\nexports.default = (0, _styles2.default)(styles)(MobileStepperStep);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _classnames = require('classnames');\r\n\r\nvar _classnames2 = _interopRequireDefault(_classnames);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _Typography = require('../Typography');\r\n\r\nvar _Typography2 = _interopRequireDefault(_Typography);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nvar _constants = require('./internal/constants');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n currentStepTitle: {\r\n order: 0,\r\n marginLeft: _tokens.spacingXSmall,\r\n flex: '1 1 auto',\r\n alignSelf: 'auto'\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * A component that displays the current step of the total steps\r\n */\r\nvar MobileStepperLabel = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n return (\r\n /* These marker class names will be used by its parent component MobileStepper */\r\n _react2.default.createElement(\r\n _Typography2.default,\r\n Object.assign({ variant: 'h3',\r\n className: (0, _classnames2.default)(classes.currentStepTitle, _constants.MOBILE_STEPPER_LABEL_CLASSNAME),\r\n component: 'span'\r\n }, rest, {\r\n ref: ref\r\n }),\r\n props.children\r\n )\r\n );\r\n});\r\n\r\nMobileStepperLabel.propTypes = {\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * The step title component.\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Props will be passed into the rendered `` component.\r\n */\r\n props: _propTypes2.default.object\r\n};\r\n\r\nMobileStepperLabel.displayName = 'MobileStepperLabel';\r\n\r\nexports.default = (0, _styles2.default)(styles)(MobileStepperLabel);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _Typography = require('../Typography');\r\n\r\nvar _Typography2 = _interopRequireDefault(_Typography);\r\n\r\nvar _Divider = require('../Divider');\r\n\r\nvar _Divider2 = _interopRequireDefault(_Divider);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = {\r\n root: {\r\n marginBottom: _tokens.spacingMedium\r\n }\r\n};\r\n\r\n/**\r\n * A component that displays the current step of the total steps\r\n */\r\nvar MobileStepperTitle = _react2.default.forwardRef(function (props, ref) {\r\n var withDivider = props.withDivider,\r\n children = props.children,\r\n classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['withDivider', 'children', 'classes']);\r\n\r\n return _react2.default.createElement(\r\n 'div',\r\n { className: classes.root, ref: ref },\r\n _react2.default.createElement(\r\n _Typography2.default,\r\n Object.assign({ variant: 'h2' }, rest),\r\n children\r\n ),\r\n withDivider && _react2.default.createElement(_Divider2.default, null)\r\n );\r\n});\r\n\r\nMobileStepperTitle.propTypes = {\r\n /**\r\n * The MobileStepper title value.\r\n */\r\n children: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.string]),\r\n /**\r\n * @ignore\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * Props will be passed into the rendered `` component.\r\n */\r\n props: _propTypes2.default.object,\r\n /**\r\n * Render the MobileStepperTitle with a divider. Set false to use without a Divider.\r\n */\r\n withDivider: _propTypes2.default.bool\r\n};\r\n\r\nMobileStepperTitle.defaultProps = {\r\n withDivider: true\r\n};\r\n\r\nMobileStepperTitle.displayName = 'MobileStepperTitle';\r\n\r\nexports.default = (0, _styles2.default)(styles)(MobileStepperTitle);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _core = require('@material-ui/core');\r\n\r\nvar _constants = require('./internal/constants');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: {\r\n borderColor: theme.palette.ctaColor.base\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * A single step in a stepper\r\n */\r\nvar Step = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var classOverrides = {\r\n root: classes.root\r\n };\r\n\r\n return (\r\n /* These marker class names will be used by its parent component StepProgress */\r\n _react2.default.createElement(_core.Step, Object.assign({}, rest, {\r\n className: _constants.STEP_PROGRESS_STEP_CLASSNAME,\r\n classes: classOverrides,\r\n ref: ref\r\n }))\r\n );\r\n});\r\n\r\nStep.muiName = 'Step';\r\nStep.displayName = 'Step';\r\n\r\nStep.propTypes = {\r\n /**\r\n * Sets the step as active. Is passed to child components.\r\n */\r\n active: _propTypes2.default.bool,\r\n /**\r\n * Should be `Step` sub-components such as `StepLabel`, `StepContent`.\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * Mark the step as completed. Is passed to child components.\r\n */\r\n completed: _propTypes2.default.bool,\r\n /**\r\n * Mark the step as disabled, will also disable the button if\r\n * `StepButton` is a child of `Step`. Is passed to child components.\r\n */\r\n disabled: _propTypes2.default.bool\r\n};\r\n\r\n// NOTE: we are very intentionally NOT providing defaults for these props; if any\r\n// value is assigned to the active, completed, or disabled props, those values will\r\n// supercede the directives of the parent StepProgress; ie, if the stepper tries to\r\n// set a Step to active, any defaults we declare here will override those settings\r\n\r\nexports.default = (0, _styles2.default)(styles)(Step);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _core = require('@material-ui/core');\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: {\r\n outline: 'none',\r\n '&:focus': {\r\n boxShadow: '0 0 0 ' + _tokens.borderWidthThick + ' ' + _tokens.colorBrandSecondary\r\n }\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * A component that displays progress through numbered steps.\r\n */\r\nvar StepButton = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var classOverrides = {\r\n root: classes.root\r\n };\r\n\r\n return _react2.default.createElement(_core.StepButton, Object.assign({}, rest, {\r\n classes: classOverrides,\r\n ref: ref\r\n }));\r\n});\r\n\r\nStepButton.muiName = 'StepButton';\r\nStepButton.displayName = 'StepButton';\r\n\r\nStepButton.propTypes = {\r\n /**\r\n * Can be a `StepLabel` or a node to place inside `StepLabel` as children.\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * The icon displayed by the step label.\r\n */\r\n icon: _propTypes2.default.node,\r\n /**\r\n * The optional node to display.\r\n */\r\n optional: _propTypes2.default.node\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(StepButton);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _core = require('@material-ui/core');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = {\r\n root: {}\r\n};\r\n\r\n/**\r\n * A component that displays progress through numbered steps.\r\n */\r\nvar StepContent = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var classOverrides = {\r\n root: classes.root\r\n };\r\n\r\n return _react2.default.createElement(_core.StepContent, Object.assign({}, rest, {\r\n classes: classOverrides,\r\n ref: ref\r\n }));\r\n});\r\n\r\nStepContent.muiName = 'StepContent';\r\nStepContent.displayName = 'StepContent';\r\n\r\nStepContent.propTypes = {\r\n /**\r\n * Step content.\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * Collapse component.\r\n */\r\n TransitionComponent: _propTypes2.default.elementType,\r\n /**\r\n * Adjust the duration of the content expand transition.\r\n * Passed as a property to the transition component.\r\n *\r\n * Set to 'auto' to automatically calculate transition time based on height.\r\n */\r\n transitionDuration: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.shape({ enter: _propTypes2.default.number, exit: _propTypes2.default.number }), _propTypes2.default.oneOf(['auto'])]),\r\n /**\r\n * Properties applied to the `Transition` element.\r\n */\r\n TransitionProps: _propTypes2.default.object\r\n};\r\n\r\nStepContent.defaultProps = {\r\n TransitionComponent: _core.Collapse,\r\n transitionDuration: 'auto'\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(StepContent);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _classnames = require('classnames');\r\n\r\nvar _classnames2 = _interopRequireDefault(_classnames);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _core = require('@material-ui/core');\r\n\r\nvar _Warning = require('@eui/ds-icons/lib/Warning');\r\n\r\nvar _Warning2 = _interopRequireDefault(_Warning);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nvar _Typography = require('../Typography');\r\n\r\nvar _Typography2 = _interopRequireDefault(_Typography);\r\n\r\nvar _constants = require('./internal/constants.js');\r\n\r\nvar _StepEdit = require('./internal/StepEdit');\r\n\r\nvar _StepEdit2 = _interopRequireDefault(_StepEdit);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n labelRoot: {\r\n fontFamily: theme.typography.body1.fontFamily,\r\n fontSize: theme.typography.body1.fontSize,\r\n fontWeight: theme.typography.body1.fontWeight,\r\n lineHeight: theme.typography.body1.lineHeight,\r\n color: theme.palette.grey[600]\r\n },\r\n labelError: {\r\n color: theme.palette.status.error.fill\r\n },\r\n stepIconRoot: {\r\n color: theme.palette.grey[100],\r\n borderRadius: '100%',\r\n border: _tokens.borderWidthThin + ' solid ' + theme.palette.ctaColor.base,\r\n '&$stepIconActive': {\r\n border: 'none',\r\n color: theme.palette.ctaColor.base,\r\n '&> text': {\r\n color: theme.palette.grey[100],\r\n fill: theme.palette.grey[100]\r\n }\r\n }\r\n },\r\n stepIconText: {\r\n fill: theme.palette.ctaColor.base\r\n },\r\n stepIconActive: {\r\n color: theme.palette.ctaColor.base\r\n },\r\n stepIconCustomRoot: {\r\n border: 'none',\r\n width: _tokens.sizingMedium,\r\n height: _tokens.sizingMedium,\r\n verticalAlign: 'middle'\r\n },\r\n stepIconError: {\r\n color: theme.palette.status.error.fill,\r\n fill: theme.palette.status.error.fill\r\n },\r\n stepIconCompleted: {\r\n color: theme.palette.ctaColor.base,\r\n fill: theme.palette.ctaColor.base\r\n },\r\n stepIconDisabled: {\r\n '& svg': {\r\n border: _tokens.borderWidthThin + ' solid ' + theme.palette.grey[400],\r\n '&> text': {\r\n color: theme.palette.grey[400],\r\n fill: theme.palette.grey[400]\r\n }\r\n }\r\n },\r\n stepLabelDisabled: {\r\n color: theme.palette.grey[400]\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * A component that displays progress through numbered steps.\r\n */\r\nvar StepLabel = _react2.default.forwardRef(function (props, ref) {\r\n var _classNames;\r\n\r\n var classes = props.classes,\r\n children = props.children,\r\n error = props.error,\r\n completed = props.completed,\r\n optional = props.optional,\r\n disabled = props.disabled,\r\n StepIconProps = props.StepIconProps,\r\n rest = _objectWithoutProperties(props, ['classes', 'children', 'error', 'completed', 'optional', 'disabled', 'StepIconProps']);\r\n\r\n var defaultOverrides = {\r\n StepIconProps: Object.assign({\r\n classes: {\r\n root: classes.stepIconRoot,\r\n text: classes.stepIconText,\r\n active: classes.stepIconActive,\r\n completed: classes.stepIconActive,\r\n error: classes.stepIconError\r\n }\r\n }, StepIconProps)\r\n };\r\n\r\n if (optional) {\r\n defaultOverrides.optional = _react2.default.createElement(\r\n _Typography2.default,\r\n {\r\n variant: 'body3',\r\n color: 'textSecondary',\r\n align: props.alternativeLabel ? 'center' : 'left'\r\n },\r\n optional\r\n );\r\n }\r\n\r\n if (error) {\r\n // Assign new error icon\r\n defaultOverrides.StepIconProps.icon = _react2.default.createElement(_Warning2.default, { className: (0, _classnames2.default)(classes.stepIconError, classes.stepIconCustomRoot) });\r\n\r\n // if error is a string make the optional prop print the error message\r\n if (error.length > 0) {\r\n /* These marker class names will be used by its parent component StepProgress */\r\n defaultOverrides.optional = _react2.default.createElement(\r\n _Typography2.default,\r\n {\r\n variant: 'body3',\r\n className: (0, _classnames2.default)(classes.labelError, _constants.STEP_LABEL_ERROR_CLASSNAME),\r\n align: props.alternativeLabel ? 'center' : 'left'\r\n },\r\n error\r\n );\r\n }\r\n }\r\n\r\n if (props.active) {\r\n defaultOverrides.StepIconProps.icon = _react2.default.createElement(_StepEdit2.default, { className: classes.stepIconActive });\r\n }\r\n\r\n // NOTE: This icon is not in the @eui/ds-icons package\r\n // if (completed) {\r\n // // Assign new check icon\r\n // defaultOverrides.StepIconProps.icon = (\r\n // \r\n // );\r\n // }\r\n\r\n return _react2.default.createElement(\r\n _core.StepLabel,\r\n Object.assign({}, defaultOverrides, {\r\n classes: {\r\n disabled: !error && disabled && classes.stepIconDisabled\r\n },\r\n disabled: disabled,\r\n completed: completed\r\n }, rest, {\r\n ref: ref\r\n }),\r\n _react2.default.createElement(\r\n 'span',\r\n { className: (0, _classnames2.default)(classes.labelRoot, '' + _constants.STEP_LABEL_CLASSNAME, (_classNames = {}, _defineProperty(_classNames, classes.labelError, error), _defineProperty(_classNames, _constants.STEP_LABEL_HAS_ERROR_CLASSNAME, error), _defineProperty(_classNames, classes.stepLabelDisabled, disabled && !error), _classNames)) },\r\n children\r\n )\r\n );\r\n});\r\n\r\nStepLabel.muiName = 'StepLabel';\r\nStepLabel.displayName = 'StepLabel';\r\n\r\nStepLabel.propTypes = {\r\n /**\r\n * @ignore\r\n * Sets the step as active. Is passed to child components.\r\n */\r\n active: _propTypes2.default.bool,\r\n /**\r\n * @ignore\r\n * Set internally by Stepper when it's supplied with the alternativeLabel property.\r\n */\r\n alternativeLabel: _propTypes2.default.bool,\r\n /**\r\n * In most cases will simply be a string containing a title for the label.\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * @ignore\r\n * Mark the step as completed. Is passed to child components.\r\n */\r\n completed: _propTypes2.default.bool,\r\n /**\r\n * Mark the step as disabled, will also disable the button if\r\n * `StepLabelButton` is a child of `StepLabel`. Is passed to child components.\r\n */\r\n disabled: _propTypes2.default.bool,\r\n /**\r\n * Used to mark the step in an error state and provide an error message.\r\n */\r\n error: _propTypes2.default.any,\r\n /**\r\n * Override the default icon.\r\n */\r\n icon: _propTypes2.default.node,\r\n /**\r\n * The optional text to display.\r\n */\r\n optional: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object])\r\n};\r\n\r\nStepLabel.defaultProps = {\r\n error: false\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(StepLabel);","\"use strict\";\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require(\"react\");\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nvar StepEdit = function StepEdit(props) {\r\n return _react2.default.createElement(\r\n \"svg\",\r\n Object.assign({}, props, { width: \"24px\", height: \"24px\", viewBox: \"0 0 32 32\", xmlns: \"http://www.w3.org/2000/svg\" }),\r\n _react2.default.createElement(\r\n \"defs\",\r\n null,\r\n _react2.default.createElement(\"path\", { d: \"M15.3627681,2.30077663 L13.6796131,0.61830983 C12.8553012,-0.206032963 11.5209897,-0.206157963 10.6964903,0.61827858 L0.778435041,10.4715172 L0.0102793522,15.1276367 C-0.0733143368,15.6343549 0.365529093,16.0732919 0.872372473,15.9897295 L5.52846282,15.2215429 L15.3823931,5.3034919 C16.205205,4.4806491 16.2130488,3.15102564 15.3627681,2.30077663 Z M3.77012036,9.4374871 L9.09071022,4.15139948 L11.848552,6.90924003 L6.56249332,12.2298276 L6.56249332,10.9374854 L5.06249441,10.9374854 L5.06249441,9.4374871 L3.77012036,9.4374871 Z M2.56662124,14.3166064 L1.68340313,13.4333887 L2.06277785,11.1337976 L2.63777743,10.5624858 L3.93749523,10.5624858 L3.93749523,12.0624858 L5.43749414,12.0624858 L5.43749414,13.36217 L4.86618206,13.9372006 L2.56662124,14.3166064 L2.56662124,14.3166064 Z M14.4098938,4.33121177 L14.4083001,4.33280552 L14.4067063,4.33439927 L12.9057699,5.84514752 L10.1548344,3.09421321 L11.6655833,1.59327745 L11.6671458,1.59171495 L11.6687083,1.59015245 C11.9545519,1.30434028 12.4180203,1.30080904 12.7073326,1.5901212 L14.3902689,3.27305675 C14.6989561,3.58171264 14.7008624,4.04021211 14.4098938,4.33121177 L14.4098938,4.33121177 Z\", id: \"path-1\" })\r\n ),\r\n _react2.default.createElement(\r\n \"g\",\r\n { id: \"Components\", stroke: \"none\", strokeWidth: \"1\", fill: \"none\", fillRule: \"evenodd\" },\r\n _react2.default.createElement(\r\n \"g\",\r\n { id: \"Step-Progress\", transform: \"translate(-288.000000, -636.000000)\" },\r\n _react2.default.createElement(\r\n \"g\",\r\n { id: \"Steps-[16h]\", transform: \"translate(69.000000, 636.000000)\" },\r\n _react2.default.createElement(\r\n \"g\",\r\n { id: \"Step\", transform: \"translate(219.000000, 0.000000)\" },\r\n _react2.default.createElement(\r\n \"g\",\r\n { id: \"Group\" },\r\n _react2.default.createElement(\r\n \"g\",\r\n { id: \"Misc/Pagination/Button/Outline\" },\r\n _react2.default.createElement(\"circle\", { id: \"Circle\", stroke: \"currentColor\", strokeWidth: \"1\", fill: \"#FFFFFF\", fillRule: \"evenodd\", cx: \"16\", cy: \"16\", r: \"15.5\" }),\r\n _react2.default.createElement(\"g\", { id: \"Buttons/zFocused/Off\" }),\r\n _react2.default.createElement(\r\n \"g\",\r\n { id: \"1)-Main-Use/edit\", transform: \"translate(8.000000, 8.000000)\" },\r\n _react2.default.createElement(\r\n \"mask\",\r\n { id: \"mask-2\", fill: \"white\" },\r\n _react2.default.createElement(\"use\", { xlinkHref: \"#path-1\" })\r\n ),\r\n _react2.default.createElement(\"use\", { id: \"1---Main-Use/edit\", fill: \"currentColor\", fillRule: \"evenodd\", xlinkHref: \"#path-1\" })\r\n )\r\n )\r\n )\r\n )\r\n )\r\n )\r\n )\r\n );\r\n};\r\n\r\nexports.default = StepEdit;","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _Slider = require('./Slider');\r\n\r\nObject.defineProperty(exports, 'default', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_Slider).default;\r\n }\r\n});\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\nexports.styles = undefined;\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _Slider = require('@material-ui/core/Slider');\r\n\r\nvar _Slider2 = _interopRequireDefault(_Slider);\r\n\r\nvar _EDSContext = require('../EDSContext/EDSContext');\r\n\r\nvar _Circle = require('@eui/ds-icons/lib/Circle');\r\n\r\nvar _Circle2 = _interopRequireDefault(_Circle);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\n// Necessary design tokens are imported here\r\n// import { } from '../styles/tokens';\r\n\r\nvar styles = exports.styles = function styles(theme) {\r\n return {\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n root: {},\r\n sliderThumb: {\r\n fill: theme.palette.primary.main,\r\n backgroundColor: theme.palette.primary.main,\r\n borderRadius: '2.5rem'\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * A tool to select a value within a range.\r\n * @done false\r\n * @updated false\r\n * @versionAdded v0.0.8\r\n * @examples\r\n * SliderExample\r\n */\r\nvar Slider = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n edsContext = props.edsContext,\r\n rest = _objectWithoutProperties(props, ['classes', 'edsContext']);\r\n\r\n var classOverrides = {\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n root: classes.root\r\n };\r\n\r\n return _react2.default.createElement(_Slider2.default, Object.assign({}, rest, {\r\n thumb: _react2.default.createElement(_Circle2.default, { 'aria-label': edsContext.formatMessage('component.Slider.thumb'), className: classes.sliderThumb }),\r\n classes: classOverrides,\r\n ref: ref\r\n }));\r\n});\r\n\r\nSlider.muiName = 'Slider';\r\nSlider.displayName = 'Slider';\r\n\r\nSlider.propTypes = {\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * The component used for the root node.\r\n * Either a string to use a DOM element or a component.\r\n */\r\n component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object]),\r\n /**\r\n * If `true`, the slider will be disabled.\r\n */\r\n disabled: _propTypes2.default.bool,\r\n /**\r\n * @ignore\r\n */\r\n edsContext: _propTypes2.default.object,\r\n /**\r\n * The maximum allowed value of the slider.\r\n * Should not be equal to min.\r\n */\r\n max: _propTypes2.default.number,\r\n /**\r\n * The minimum allowed value of the slider.\r\n * Should not be equal to max.\r\n */\r\n min: _propTypes2.default.number,\r\n /**\r\n * Callback function that is fired when the slider's value changed.\r\n */\r\n onChange: _propTypes2.default.func,\r\n /**\r\n * The granularity the slider can step through values.\r\n */\r\n step: _propTypes2.default.number,\r\n /**\r\n * @ignore\r\n */\r\n theme: _propTypes2.default.object,\r\n /**\r\n * The value of the slider.\r\n */\r\n value: _propTypes2.default.number.isRequired,\r\n /**\r\n * The slider orientation.\r\n */\r\n orientation: _propTypes2.default.oneOf(['horizontal', 'vertical'])\r\n};\r\n\r\n// If default props are needed, they must be set here\r\nSlider.defaultProps = {\r\n orientation: 'horizontal'\r\n};\r\n\r\nexports.default = (0, _EDSContext.withEDSContext)((0, _styles2.default)(styles)(Slider));","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _Avatar = require('./Avatar');\r\n\r\nObject.defineProperty(exports, 'default', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_Avatar).default;\r\n }\r\n});\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _Avatar = require('@material-ui/core/Avatar');\r\n\r\nvar _Avatar2 = _interopRequireDefault(_Avatar);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n// Necessary design tokens are imported here\r\n\r\n\r\nvar styles = {\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n root: {},\r\n colorDefault: {\r\n backgroundColor: _tokens.colorBrandNeutral500\r\n }\r\n};\r\n\r\n/**\r\n * A component that creates a graphical representation of a user.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.8\r\n * @examples\r\n * AvatarIcon\r\n * AvatarImage\r\n * AvatarLetter\r\n */\r\nvar Avatar = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var classOverrides = {\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n root: classes.root,\r\n colorDefault: classes.colorDefault\r\n };\r\n\r\n return _react2.default.createElement(_Avatar2.default, Object.assign({}, rest, {\r\n classes: classOverrides,\r\n ref: ref\r\n }));\r\n});\r\n\r\nAvatar.muiName = 'Avatar';\r\n\r\nAvatar.propTypes = {\r\n /**\r\n * Used in combination with src or srcSet to provide an alt attribute for the rendered img element.\r\n */\r\n alt: _propTypes2.default.string,\r\n /**\r\n * Used to render icon or text elements inside the Avatar. src and alt props will not be used and no img will be rendered by default.\r\n * This can be an element, or just a string.\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * The component used for the root node. Either a string to use a DOM element or a component.\r\n */\r\n component: _propTypes2.default.oneOf(['string', 'func', 'object']),\r\n /**\r\n * Attributes applied to the img element when the component is used to display an image.\r\n */\r\n imgProps: _propTypes2.default.object,\r\n /**\r\n * The sizes attribute for the img element.\r\n */\r\n sizes: _propTypes2.default.string,\r\n /**\r\n * The src attribute for the img element.\r\n */\r\n src: _propTypes2.default.string,\r\n /**\r\n * The srcSet attribute for the img element.\r\n */\r\n srcSet: _propTypes2.default.string\r\n};\r\n\r\n// necessary to add an explicit display name, since docgen can't seem to\r\n// extract one from a forwardRef'd component\r\nAvatar.displayName = 'Avatar';\r\n\r\n// If default props are needed, they must be set here\r\n//Avatar.defaultProps = {\r\n//};\r\n\r\nexports.default = (0, _styles2.default)(styles)(Avatar);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _Popover = require('./Popover');\r\n\r\nObject.defineProperty(exports, 'default', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_Popover).default;\r\n }\r\n});\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _Popover = require('@material-ui/core/Popover');\r\n\r\nvar _Popover2 = _interopRequireDefault(_Popover);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\n// Necessary design tokens are imported here\r\n//import { } from '../styles/tokens';\r\n\r\nvar styles = {\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n paperRoot: {}\r\n};\r\n\r\n/**\r\n * Use `Popover` to display additional content.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.8\r\n * @examples\r\n * PopoverExamples\r\n */\r\nvar Popover = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n // This component passes through to an internal paper element to style the pertinent area\r\n // By default it passes the paper class above, but that can be overridden by downstream\r\n // NOTE! There appears to be a problem preventing styling currently, see the expected behavior here: https://codesandbox.io/s/wq78039yol\r\n\r\n\r\n var PaperProps = {\r\n classes: {\r\n root: classes.paperRoot\r\n }\r\n };\r\n\r\n return _react2.default.createElement(_Popover2.default, Object.assign({}, rest, {\r\n PaperProps: PaperProps,\r\n ref: ref\r\n }));\r\n});\r\n\r\nPopover.muiName = 'Popover';\r\nPopover.displayName = 'Popover';\r\n\r\nPopover.propTypes = {\r\n /**\r\n * This is callback property. It's called by the component on mount.\r\n * This is useful when you want to trigger an action programmatically.\r\n * It currently only supports updatePosition() action.\r\n *\r\n * @param {object} actions This object contains all posible actions\r\n * that can be triggered programmatically.\r\n */\r\n action: _propTypes2.default.func,\r\n /**\r\n * This is the DOM element, or a function that returns the DOM element,\r\n * that may be used to set the position of the popover.\r\n */\r\n anchorEl: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.func]),\r\n /**\r\n * This is the point on the anchor where the popover's\r\n * `anchorEl` will attach to. This is not used when the\r\n * anchorReference is 'anchorPosition'.\r\n *\r\n * Options:\r\n * vertical: [top, center, bottom];\r\n * horizontal: [left, center, right].\r\n */\r\n anchorOrigin: _propTypes2.default.shape({\r\n horizontal: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.oneOf(['left', 'center', 'right'])]),\r\n vertical: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.oneOf(['top', 'center', 'bottom'])])\r\n }),\r\n /**\r\n * This is the position that may be used\r\n * to set the position of the popover.\r\n * The coordinates are relative to\r\n * the application's client area.\r\n */\r\n anchorPosition: _propTypes2.default.shape({\r\n top: _propTypes2.default.number,\r\n left: _propTypes2.default.number\r\n }),\r\n /*\r\n * This determines which anchor prop to refer to to set\r\n * the position of the popover.\r\n */\r\n anchorReference: _propTypes2.default.oneOf(['anchorEl', 'anchorPosition', 'none']),\r\n /**\r\n * Supported props for the Backdrop of Popover:\r\n *\r\n * children: The content of the component.\r\n *\r\n * classes: Override or extend the styles applied to the component.\r\n *\r\n * invisible: If true, the backdrop is invisible.\r\n *\r\n * open: If true, the backdrop is open.\r\n *\r\n * tranistionDuration: The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.\r\n *\r\n * See more detailed information here: https://material-ui.com/api/backdrop/\r\n */\r\n BackdropProps: _propTypes2.default.object,\r\n /**\r\n * The content of the component.\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * A node, component instance, or function that returns either.\r\n * The `container` will passed to the Modal component.\r\n * By default, it uses the body of the anchorEl's top-level document object,\r\n * so it's simply `document.body` most of the time.\r\n */\r\n container: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.func]),\r\n /**\r\n * The elevation of the popover.\r\n */\r\n elevation: _propTypes2.default.number,\r\n /**\r\n * This function is called in order to retrieve the content anchor element.\r\n * It's the opposite of the `anchorEl` property.\r\n * The content anchor element should be an element inside the popover.\r\n * It's used to correctly scroll and set the position of the popover.\r\n * The positioning strategy tries to make the content anchor element just above the\r\n * anchor element.\r\n */\r\n getContentAnchorEl: _propTypes2.default.func,\r\n /**\r\n * Specifies how close to the edge of the window the popover can appear.\r\n */\r\n marginThreshold: _propTypes2.default.number,\r\n /**\r\n * Callback fired when the component requests to be closed.\r\n *\r\n * @param {object} event The event source of the callback.\r\n */\r\n onClose: _propTypes2.default.func,\r\n /**\r\n * Callback fired before the component is entering.\r\n */\r\n onEnter: _propTypes2.default.func,\r\n /**\r\n * Callback fired when the component has entered.\r\n */\r\n onEntered: _propTypes2.default.func,\r\n /**\r\n * Callback fired when the component is entering.\r\n */\r\n onEntering: _propTypes2.default.func,\r\n /**\r\n * Callback fired before the component is exiting.\r\n */\r\n onExit: _propTypes2.default.func,\r\n /**\r\n * Callback fired when the component has exited.\r\n */\r\n onExited: _propTypes2.default.func,\r\n /**\r\n * Callback fired when the component is exiting.\r\n */\r\n onExiting: _propTypes2.default.func,\r\n /**\r\n * If `true`, the popover is visible.\r\n */\r\n open: _propTypes2.default.bool.isRequired,\r\n /**\r\n * Properties applied to the `Paper` element.\r\n */\r\n PaperProps: _propTypes2.default.object,\r\n /**\r\n * @ignore\r\n */\r\n role: _propTypes2.default.string,\r\n /**\r\n * This is the point on the popover which\r\n * will attach to the anchor's origin.\r\n *\r\n * Options:\r\n * vertical: [top, center, bottom, x(px)];\r\n * horizontal: [left, center, right, x(px)].\r\n */\r\n transformOrigin: _propTypes2.default.shape({\r\n horizontal: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.oneOf(['left', 'center', 'right'])]),\r\n vertical: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.oneOf(['top', 'center', 'bottom'])])\r\n }),\r\n /**\r\n * Transition component.\r\n */\r\n TransitionComponent: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object]),\r\n /**\r\n * Set to 'auto' to automatically calculate transition time based on height.\r\n */\r\n transitionDuration: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.shape({ enter: _propTypes2.default.number, exit: _propTypes2.default.number }), _propTypes2.default.oneOf(['auto'])]),\r\n /**\r\n * Properties applied to the `Transition` element.\r\n */\r\n TransitionProps: _propTypes2.default.object\r\n};\r\n\r\n// If default props are needed, they must be set here\r\n// Popover.defaultProps = { };\r\n\r\nexports.default = (0, _styles2.default)(styles)(Popover);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _Chip = require('./Chip');\r\n\r\nObject.defineProperty(exports, 'default', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_Chip).default;\r\n }\r\n});\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _classnames = require('classnames');\r\n\r\nvar _classnames2 = _interopRequireDefault(_classnames);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _Chip = require('@material-ui/core/Chip');\r\n\r\nvar _Chip2 = _interopRequireDefault(_Chip);\r\n\r\nvar _Close = require('@eui/ds-icons/lib/Close');\r\n\r\nvar _Close2 = _interopRequireDefault(_Close);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: {\r\n backgroundColor: theme.palette.grey[100],\r\n border: _tokens.borderWidthThin + ' solid ' + theme.palette.grey[400],\r\n color: theme.palette.grey[500],\r\n fontSize: _tokens.fontSizeDefault\r\n },\r\n activatedRoot: {\r\n backgroundColor: theme.palette.ctaColor.tint,\r\n border: _tokens.borderWidthThin + ' solid ' + theme.palette.ctaColor.base,\r\n color: theme.palette.ctaColor.base,\r\n '&:hover': {\r\n backgroundColor: theme.palette.ctaColor.tint\r\n },\r\n '&:active': {\r\n boxShadow: 'none',\r\n backgroundColor: theme.palette.ctaColor.tint\r\n }\r\n },\r\n label: {\r\n paddingLeft: _tokens.spacingSmall,\r\n paddingRight: _tokens.spacingSmall,\r\n paddingBottom: '0.125rem' // Push label up by 2px to perfectly center\r\n },\r\n labelWithIcon: {\r\n paddingRight: _tokens.spacingXSmall2\r\n },\r\n clickable: {\r\n WebkitTapHighlightColor: 'transparent', // Remove grey highlight\r\n cursor: 'pointer',\r\n '&:hover': {\r\n backgroundColor: theme.palette.grey[100]\r\n },\r\n '&:focus': {\r\n backgroundColor: theme.palette.grey[100],\r\n boxShadow: '0 0 0 ' + _tokens.borderWidthThick + ' ' + _tokens.colorBrandSecondary\r\n },\r\n '&:active': {\r\n backgroundColor: theme.palette.grey[300],\r\n boxShadow: 'none'\r\n },\r\n '&:active:focus': {\r\n boxShadow: 'none',\r\n backgroundColor: theme.palette.grey[300]\r\n },\r\n '&$activatedRoot': {\r\n backgroundColor: theme.palette.ctaColor.tint,\r\n border: _tokens.borderWidthThin + ' solid ' + theme.palette.ctaColor.base,\r\n color: theme.palette.ctaColor.base,\r\n '&:hover': {\r\n backgroundColor: theme.palette.ctaColor.tint\r\n },\r\n '&:focus': {\r\n backgroundColor: theme.palette.ctaColor.tint,\r\n boxShadow: '0 0 0 ' + _tokens.borderWidthThick + ' ' + _tokens.colorBrandSecondary\r\n },\r\n '&:active': {\r\n boxShadow: 'none',\r\n backgroundColor: theme.palette.ctaColor.tint\r\n }\r\n }\r\n },\r\n deletable: {\r\n '&:focus': {\r\n backgroundColor: theme.palette.grey[100],\r\n boxShadow: '0 0 0 ' + _tokens.borderWidthThick + ' ' + _tokens.colorBrandSecondary\r\n },\r\n '&$activatedRoot': {\r\n '&:focus': {\r\n backgroundColor: theme.palette.ctaColor.tint,\r\n boxShadow: '0 0 0 ' + _tokens.borderWidthThick + ' ' + _tokens.colorBrandSecondary\r\n }\r\n }\r\n },\r\n deleteIcon: {\r\n boxSizing: 'initial', // required to fix stylistic differences between storybook and doc site\r\n height: _tokens.sizingSmall,\r\n width: _tokens.sizingSmall,\r\n color: theme.palette.grey[500],\r\n fill: theme.palette.grey[500],\r\n borderRadius: _tokens.borderRadiusCircle,\r\n padding: _tokens.spacingXxSmall,\r\n '&:hover': {\r\n backgroundColor: theme.palette.grey[300]\r\n },\r\n '&:active': {\r\n backgroundColor: theme.palette.grey[400]\r\n }\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * Use `Chip` to represent a selected item or filter.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.8\r\n * @examples\r\n * ChipExamples\r\n * ChipActions\r\n * ChipGroup\r\n * ListActivatedChips\r\n * SelectedContentWithChips\r\n */\r\nvar Chip = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n activated = props.activated,\r\n rest = _objectWithoutProperties(props, ['classes', 'activated']);\r\n\r\n return _react2.default.createElement(_Chip2.default, Object.assign({\r\n classes: {\r\n root: (0, _classnames2.default)(classes.root, _defineProperty({}, classes.activatedRoot, activated)),\r\n label: (0, _classnames2.default)(classes.label, _defineProperty({}, classes.labelWithIcon, props.onDelete)),\r\n clickable: classes.clickable,\r\n deletable: classes.deletable,\r\n deleteIcon: classes.deleteIcon\r\n },\r\n deleteIcon: _react2.default.createElement(_Close2.default, null)\r\n }, rest, {\r\n ref: ref\r\n }));\r\n});\r\n\r\nChip.muiName = 'Chip';\r\n\r\nChip.propTypes = {\r\n /**\r\n * Set the chip to active, using the theme CTA color.\r\n */\r\n activated: _propTypes2.default.bool,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * If true, the chip will appear clickable, and will raise when pressed,\r\n * even if the onClick property is not defined. This can be used, for example,\r\n * along with the component property to indicate an anchor Chip is clickable.\r\n */\r\n clickable: _propTypes2.default.bool,\r\n /**\r\n * The component used for the root node.\r\n * Either a string to use a DOM element or a component.\r\n */\r\n component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object]),\r\n /**\r\n * The content of the `Chip` label.\r\n */\r\n label: _propTypes2.default.node,\r\n /**\r\n * Callback to fire when the `Chip` is clicked on or `space` or `enter` keys are pressed when the Chip has focus.\r\n */\r\n onClick: _propTypes2.default.func,\r\n /**\r\n * Callback function fired when the delete icon is clicked or `backspace` key is pressed when the `Chip` has focus.\r\n * If set, the delete icon will be shown.\r\n */\r\n onDelete: _propTypes2.default.func,\r\n /**\r\n * @ignore\r\n */\r\n onKeyDown: _propTypes2.default.func,\r\n /**\r\n * @ignore\r\n */\r\n tabIndex: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])\r\n};\r\n\r\nChip.displayName = 'Chip';\r\n\r\nexports.default = (0, _styles2.default)(styles)(Chip);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _CircularProgress = require('./CircularProgress');\r\n\r\nObject.defineProperty(exports, 'default', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_CircularProgress).default;\r\n }\r\n});\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _CircularProgress = require('@material-ui/core/CircularProgress');\r\n\r\nvar _CircularProgress2 = _interopRequireDefault(_CircularProgress);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\n// Necessary design tokens are imported here\r\n//import { } from '../styles/tokens';\r\n\r\nvar styles = {\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n root: {}\r\n};\r\n\r\n/**\r\n * Use `CircularProgress` to indicate work is being done \"behind the scenes\" when a user initiates a call to action (loading, working, etc).\r\n * @done false\r\n * @updated false\r\n * @versionAdded v0.0.8\r\n * @examples\r\n * CircularProgressIndeterminate\r\n * CircularProgressDeterminate\r\n * CircularProgressStatic\r\n */\r\nvar CircularProgress = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var classOverrides = {\r\n // Necessary style overrides are set here\r\n // See Material UI documentation for available CSS classes to override\r\n root: classes.root\r\n };\r\n\r\n return _react2.default.createElement(_CircularProgress2.default, Object.assign({}, rest, {\r\n classes: classOverrides,\r\n ref: ref\r\n }));\r\n});\r\n\r\nCircularProgress.muiName = 'CircularProgress';\r\nCircularProgress.displayName = 'CircularProgress';\r\n\r\nCircularProgress.propTypes = {\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * The color of the component. It supports those theme colors that make sense for this component.\r\n */\r\n color: _propTypes2.default.oneOf(['primary', 'secondary', 'inherit']),\r\n /**\r\n * If true, the shrink animation is disabled. This only works if variant is indeterminate.\r\n */\r\n disableShrink: _propTypes2.default.bool,\r\n /**\r\n * The size of the circle.\r\n * If using a number, the pixel unit is assumed.\r\n * If using a string, you need to provide the CSS unit, e.g '3rem'.\r\n */\r\n size: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),\r\n /**\r\n * @ignore\r\n */\r\n style: _propTypes2.default.object,\r\n /**\r\n * The thickness of the circle.\r\n */\r\n thickness: _propTypes2.default.number,\r\n /**\r\n * The value of the progress indicator for the determinate and static variants.\r\n * Value between 0 and 100.\r\n */\r\n value: _propTypes2.default.number,\r\n /**\r\n * The variant to use.\r\n * Use indeterminate when there is no progress value.\r\n */\r\n variant: _propTypes2.default.oneOf(['determinate', 'indeterminate', 'static'])\r\n};\r\n\r\nCircularProgress.defaultProps = {\r\n color: 'primary',\r\n disableShrink: false,\r\n size: 40,\r\n thickness: 3.6,\r\n value: 0,\r\n variant: 'indeterminate'\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(CircularProgress);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _PageHeader = require('./PageHeader');\r\n\r\nObject.defineProperty(exports, 'default', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_PageHeader).default;\r\n }\r\n});\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _Typography = require('../Typography');\r\n\r\nvar _Typography2 = _interopRequireDefault(_Typography);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nvar styles = function styles(theme) {\r\n var _pageHeader;\r\n\r\n return {\r\n pageHeader: (_pageHeader = {\r\n paddingTop: _tokens.spacingLarge,\r\n paddingBottom: _tokens.spacingMedium,\r\n lineHeight: '2.625rem',\r\n color: theme.palette.grey[600]\r\n }, _defineProperty(_pageHeader, theme.breakpoints.up('lg'), {\r\n fontSize: _tokens.fontSizeHeader1\r\n }), _defineProperty(_pageHeader, theme.breakpoints.down('md'), {\r\n fontSize: _tokens.fontSizeHeader1Small\r\n }), _pageHeader)\r\n };\r\n};\r\n\r\n/**\r\n * Use `PageHeader` to display a page title at the top of a page.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.8\r\n * @examples\r\n * PageHeaderExample\r\n */\r\nvar PageHeader = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n text = props.text,\r\n rest = _objectWithoutProperties(props, ['classes', 'text']);\r\n\r\n var classOverrides = {\r\n h1: classes.pageHeader\r\n };\r\n\r\n return _react2.default.createElement(\r\n _Typography2.default,\r\n Object.assign({}, rest, { classes: classOverrides, variant: 'h1', ref: ref }),\r\n text\r\n );\r\n});\r\n\r\nPageHeader.muiName = 'PageHeader';\r\nPageHeader.displayName = 'PageHeader';\r\n\r\nPageHeader.propTypes = {\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * The content to be displayed as the page header.\r\n */\r\n text: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node])\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(PageHeader);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _StatusLabel = require('./StatusLabel');\r\n\r\nObject.defineProperty(exports, 'default', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_StatusLabel).default;\r\n }\r\n});\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _classnames = require('classnames');\r\n\r\nvar _classnames2 = _interopRequireDefault(_classnames);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _Typography = require('../Typography');\r\n\r\nvar _Typography2 = _interopRequireDefault(_Typography);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n // Necessary style overrides are set here\r\n root: {\r\n display: 'inline-block',\r\n fontFamily: theme.typography.fontFamily,\r\n fontSize: theme.typography.caption.fontSize,\r\n fontWeight: theme.typography.button.fontWeight,\r\n padding: _tokens.spacingXxSmall + ' ' + _tokens.spacingXSmall\r\n },\r\n default: {\r\n backgroundColor: theme.palette.status.default.background,\r\n color: theme.palette.status.default.text\r\n },\r\n draft: {\r\n backgroundColor: theme.palette.status.warning.background,\r\n color: theme.palette.status.warning.text\r\n },\r\n error: {\r\n backgroundColor: theme.palette.status.error.background,\r\n color: theme.palette.status.error.text\r\n },\r\n pending: {\r\n backgroundColor: theme.palette.status.neutral.background,\r\n color: theme.palette.status.neutral.text\r\n },\r\n success: {\r\n backgroundColor: theme.palette.status.success.background,\r\n color: theme.palette.status.success.text\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * Use a `StatusLabel` to indicate the status or category of an item.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.10\r\n * @examples\r\n * StatusLabelExample\r\n * StatusLabelTableExample\r\n * StatusLabelText\r\n */\r\nvar StatusLabel = _react2.default.forwardRef(function (props, ref) {\r\n var _classNames;\r\n\r\n var classes = props.classes,\r\n className = props.className,\r\n textProp = props.text,\r\n typeProp = props.type,\r\n rest = _objectWithoutProperties(props, ['classes', 'className', 'text', 'type']);\r\n\r\n var text = textProp.toUpperCase();\r\n var type = typeProp.toLowerCase();\r\n\r\n var classOverrides = {\r\n //CSS classes to override from Material UI Typography CSS API\r\n root: (0, _classnames2.default)(classes.root, (_classNames = {}, _defineProperty(_classNames, classes.default, type === 'default'), _defineProperty(_classNames, classes.draft, type === 'draft'), _defineProperty(_classNames, classes.error, type === 'error'), _defineProperty(_classNames, classes.pending, type === 'pending'), _defineProperty(_classNames, classes.success, type === 'success'), _classNames), className)\r\n };\r\n\r\n return _react2.default.createElement(\r\n _Typography2.default,\r\n Object.assign({ component: 'span',\r\n classes: classOverrides,\r\n ref: ref\r\n }, rest),\r\n text\r\n );\r\n});\r\n\r\nStatusLabel.muiName = 'StatusLabel';\r\n\r\nStatusLabel.propTypes = {\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * Text for the component to display\r\n */\r\n text: _propTypes2.default.string.isRequired,\r\n /**\r\n * Type of status to indicate (default, draft, error, pending, success)\r\n */\r\n type: _propTypes2.default.oneOf(['default', 'draft', 'error', 'pending', 'success'])\r\n};\r\n\r\nStatusLabel.displayName = 'StatusLabel';\r\n\r\nStatusLabel.defaultProps = {\r\n type: 'default'\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(StatusLabel);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _classnames = require('classnames');\r\n\r\nvar _classnames2 = _interopRequireDefault(_classnames);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nvar _isEmpty = require('lodash/isEmpty');\r\n\r\nvar _isEmpty2 = _interopRequireDefault(_isEmpty);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n link: {\r\n color: theme.palette.ctaColor.base,\r\n textDecoration: 'underline',\r\n '&:hover': {\r\n color: theme.palette.ctaColor.hover,\r\n textDecoration: 'underline',\r\n cursor: 'pointer'\r\n },\r\n '&:active': {\r\n color: theme.palette.ctaColor.active,\r\n textDecoration: 'underline'\r\n },\r\n '&:focus': {\r\n outline: 'none',\r\n textDecoration: 'underline',\r\n borderRadius: _tokens.borderRadiusSmall,\r\n boxShadow: '0 0 0 ' + _tokens.borderWidthThick + ' ' + _tokens.colorBorderGlobalFocus\r\n }\r\n },\r\n disabled: {\r\n fontFamily: 'inherit',\r\n fontSize: 'inherit',\r\n fontWeight: 'inherit',\r\n textDecoration: 'underline',\r\n color: _tokens.colorTextNeutral400\r\n },\r\n standalone: {\r\n fontFamily: _tokens.fontFamilyDefault,\r\n fontSize: _tokens.fontSizeDefault,\r\n fontWeight: _tokens.fontWeightStrong\r\n },\r\n inline: {\r\n fontFamily: 'inherit',\r\n fontSize: 'inherit',\r\n fontWeight: 'inherit'\r\n }\r\n };\r\n};\r\n\r\n/**\r\n * Use `TextLink` to take the user to a new page.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.10\r\n * @examples\r\n * TextLinkExample\r\n * CustomComponent\r\n */\r\nvar TextLink = _react2.default.forwardRef(function (props, ref) {\r\n var _classNames;\r\n\r\n var classes = props.classes,\r\n className = props.className,\r\n Component = props.component,\r\n disabled = props.disabled,\r\n text = props.text,\r\n url = props.url,\r\n variant = props.variant,\r\n rest = _objectWithoutProperties(props, ['classes', 'className', 'component', 'disabled', 'text', 'url', 'variant']);\r\n\r\n var classOverrides = {\r\n stateStyle: (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, classes.disabled, disabled), _defineProperty(_classNames, classes.link, !disabled), _defineProperty(_classNames, classes.standalone, variant === 'standalone'), _defineProperty(_classNames, classes.inline, variant === 'inline'), _classNames), className)\r\n };\r\n\r\n (0, _react.useEffect)(function () {\r\n if (props.component === 'a' && (0, _isEmpty2.default)(props.url)) {\r\n console.warn('url prop is required for TextLink component.');\r\n }\r\n }, [props.component, props.url]);\r\n\r\n if (disabled) {\r\n return _react2.default.createElement(\r\n Component,\r\n Object.assign({\r\n 'aria-disabled': 'true',\r\n className: classOverrides.stateStyle\r\n }, rest),\r\n text\r\n );\r\n } else {\r\n return _react2.default.createElement(\r\n Component,\r\n Object.assign({\r\n href: url,\r\n className: classOverrides.stateStyle\r\n }, rest, {\r\n ref: ref\r\n }),\r\n text\r\n );\r\n }\r\n});\r\n\r\nTextLink.muiName = 'TextLink';\r\nTextLink.displayName = 'TextLink';\r\n\r\nTextLink.propTypes = {\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * Custom className for additional styling\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * The component used for the root node. We recommend using a component or element\r\n * that supports the `href` prop.\r\n */\r\n component: _propTypes2.default.elementType,\r\n /**\r\n * Set to true to disable the link\r\n */\r\n disabled: _propTypes2.default.bool,\r\n /**\r\n * The text that the link will display\r\n */\r\n text: _propTypes2.default.string.isRequired,\r\n /**\r\n * The redirect URL. This prop is required if replacement `component` prop is not specified.\r\n */\r\n url: _propTypes2.default.string,\r\n /**\r\n * Style variant of the TextLink to be displayed. inherit will inherit font weight, font size, and font family from surrounding text. standalone is to be used for a TextLink that is not surrounded by other text.\r\n */\r\n variant: _propTypes2.default.oneOf(['standalone', 'inherit'])\r\n};\r\n\r\nTextLink.defaultProps = {\r\n component: 'a',\r\n disabled: false,\r\n variant: 'standalone'\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(TextLink);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _ConfirmationDialog = require('./ConfirmationDialog');\r\n\r\nObject.defineProperty(exports, 'default', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_ConfirmationDialog).default;\r\n }\r\n});\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _ = require('../');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\n/**\r\n * Use `ConfirmationDialog` to require user action before closing a dialog.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.10\r\n * @examples\r\n * ConfirmationDialogExample\r\n * FormDialogExample\r\n */\r\nvar ConfirmationDialog = _react2.default.forwardRef(function (props, ref) {\r\n var content = props.content,\r\n contentText = props.contentText,\r\n DialogProps = props.DialogProps,\r\n DialogActionsProps = props.DialogActionsProps,\r\n DialogContentProps = props.DialogContentProps,\r\n DialogContentTextProps = props.DialogContentTextProps,\r\n DialogTitleProps = props.DialogTitleProps,\r\n open = props.open,\r\n primaryActionOnClick = props.primaryActionOnClick,\r\n primaryActionProps = props.primaryActionProps,\r\n primaryActionText = props.primaryActionText,\r\n secondaryActionOnClick = props.secondaryActionOnClick,\r\n secondaryActionProps = props.secondaryActionProps,\r\n secondaryActionText = props.secondaryActionText,\r\n title = props.title;\r\n\r\n /**\r\n * Override `disableBackdropClick` and `disableEscapeKeyDown` to true\r\n * Pass `open` for convenience\r\n */\r\n\r\n DialogProps['disableBackdropClick'] = true;\r\n DialogProps['disableEscapeKeyDown'] = true;\r\n DialogProps['maxWidth'] = false;\r\n DialogProps['open'] = open;\r\n DialogProps['showTitleBarClose'] = false;\r\n\r\n // Override color for primary action\r\n primaryActionProps['color'] = 'primary';\r\n primaryActionProps['onClick'] = primaryActionOnClick;\r\n\r\n // Override color for secondary action\r\n secondaryActionProps['color'] = 'secondary';\r\n secondaryActionProps['onClick'] = secondaryActionOnClick;\r\n\r\n return _react2.default.createElement(\r\n _.Dialog,\r\n Object.assign({}, DialogProps, { ref: ref }),\r\n _react2.default.createElement(\r\n _.DialogTitle,\r\n DialogTitleProps,\r\n title\r\n ),\r\n _react2.default.createElement(\r\n _.DialogContent,\r\n DialogContentProps,\r\n _react2.default.createElement(\r\n _.DialogContentText,\r\n DialogContentTextProps,\r\n contentText\r\n ),\r\n content\r\n ),\r\n _react2.default.createElement(\r\n _.DialogActions,\r\n DialogActionsProps,\r\n _react2.default.createElement(\r\n _.Button,\r\n secondaryActionProps,\r\n secondaryActionText\r\n ),\r\n _react2.default.createElement(\r\n _.Button,\r\n primaryActionProps,\r\n primaryActionText\r\n )\r\n )\r\n );\r\n});\r\n\r\nConfirmationDialog.muiName = 'ConfirmationDialog';\r\nConfirmationDialog.displayName = 'ConfirmationDialog';\r\n\r\nConfirmationDialog.propTypes = {\r\n /**\r\n * Content displayed by the `DialogContent` element.\r\n */\r\n content: _propTypes2.default.node,\r\n /**\r\n * Text displayed by the `DialogContentText` element.\r\n */\r\n contentText: _propTypes2.default.string,\r\n /**\r\n * Props that will be applied to the `Dialog` element.\r\n */\r\n DialogProps: _propTypes2.default.object,\r\n /**\r\n * Props that will be applied to the `DialogActions` element.\r\n */\r\n DialogActionsProps: _propTypes2.default.object,\r\n /**\r\n * Props that will be applied to the `DialogContent` element.\r\n */\r\n DialogContentProps: _propTypes2.default.object,\r\n /**\r\n * Props that will be applied to the `DialogContentText` element.\r\n */\r\n DialogContentTextProps: _propTypes2.default.object,\r\n /**\r\n * Props that will be applied to the `DialogTitle` element.\r\n */\r\n DialogTitleProps: _propTypes2.default.object,\r\n /**\r\n * If `true`, the Dialog is open.\r\n */\r\n open: _propTypes2.default.bool.isRequired,\r\n /**\r\n * onClick applied to the primary action Button element.\r\n */\r\n primaryActionOnClick: _propTypes2.default.func.isRequired,\r\n /**\r\n * Props applied to the primary action Button element.\r\n */\r\n primaryActionProps: _propTypes2.default.object.isRequired,\r\n /**\r\n * Text applied to the primary action Button element.\r\n */\r\n primaryActionText: _propTypes2.default.string.isRequired,\r\n /**\r\n * onClick applied to the secondary action Button element.\r\n */\r\n secondaryActionOnClick: _propTypes2.default.func.isRequired,\r\n /**\r\n * Props applied to the secondary action Button element.\r\n */\r\n secondaryActionProps: _propTypes2.default.object.isRequired,\r\n /**\r\n * Text applied to the secondary action Button element.\r\n */\r\n secondaryActionText: _propTypes2.default.string.isRequired,\r\n /**\r\n * Title displayed by the DialogTitle element.\r\n */\r\n title: _propTypes2.default.string.isRequired\r\n};\r\n\r\nConfirmationDialog.defaultProps = {\r\n DialogProps: {},\r\n DialogActionsProps: {},\r\n DialogContentProps: {},\r\n DialogContentTextProps: {},\r\n DialogTitleProps: {},\r\n primaryActionProps: {},\r\n secondaryActionProps: {}\r\n};\r\n\r\nexports.default = ConfirmationDialog;","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _classnames = require('classnames');\r\n\r\nvar _classnames2 = _interopRequireDefault(_classnames);\r\n\r\nvar _v = require('uuid/v4');\r\n\r\nvar _v2 = _interopRequireDefault(_v);\r\n\r\nvar _get = require('lodash/get');\r\n\r\nvar _get2 = _interopRequireDefault(_get);\r\n\r\nvar _flattenDeep = require('lodash/flattenDeep');\r\n\r\nvar _flattenDeep2 = _interopRequireDefault(_flattenDeep);\r\n\r\nvar _filter = require('lodash/filter');\r\n\r\nvar _filter2 = _interopRequireDefault(_filter);\r\n\r\nvar _reduce = require('lodash/reduce');\r\n\r\nvar _reduce2 = _interopRequireDefault(_reduce);\r\n\r\nvar _isEqual = require('lodash/isEqual');\r\n\r\nvar _isEqual2 = _interopRequireDefault(_isEqual);\r\n\r\nvar _isNil = require('lodash/isNil');\r\n\r\nvar _isNil2 = _interopRequireDefault(_isNil);\r\n\r\nvar _InputLabel = require('@material-ui/core/InputLabel');\r\n\r\nvar _InputLabel2 = _interopRequireDefault(_InputLabel);\r\n\r\nvar _Select = require('@material-ui/core/Select');\r\n\r\nvar _Select2 = _interopRequireDefault(_Select);\r\n\r\nvar _Checkbox = require('../Checkbox');\r\n\r\nvar _Checkbox2 = _interopRequireDefault(_Checkbox);\r\n\r\nvar _Dropdown = require('../Dropdown');\r\n\r\nvar _FormControl = require('../FormControl');\r\n\r\nvar _FormControl2 = _interopRequireDefault(_FormControl);\r\n\r\nvar _EDSContext = require('../EDSContext/EDSContext');\r\n\r\nvar _IOSBodyScroll = require('./../IOSBodyScroll');\r\n\r\nvar _IOSBodyScroll2 = _interopRequireDefault(_IOSBodyScroll);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nvar _ChevronDown = require('@eui/ds-icons/lib/ChevronDown');\r\n\r\nvar _ChevronDown2 = _interopRequireDefault(_ChevronDown);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\r\n\r\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\r\n\r\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\r\n\r\n// MUI imports\r\n\r\n\r\n// select all selection states\r\nvar ALL = 0;\r\nvar INDETERMINATE = 1;\r\nvar NONE = 2;\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n select: {\r\n backgroundColor: theme.palette.grey['100'],\r\n '&$disabled': {\r\n backgroundColor: theme.palette.grey['200'],\r\n cursor: 'not-allowed'\r\n },\r\n '&:focus': {\r\n backgroundColor: theme.palette.grey['100'],\r\n borderRadius: _tokens.borderRadiusMedium,\r\n boxShadow: _tokens.boxShadowFocus\r\n }\r\n },\r\n selectIcon: {\r\n '&:hover': {\r\n '& $icon': {\r\n fill: theme.palette.ctaColor.active\r\n }\r\n }\r\n },\r\n paper: {\r\n border: _tokens.borderWidthThin + ' solid ' + theme.palette.grey[400],\r\n boxShadow: '0 0.125rem 0.0625rem -0.0625rem rgba(0, 0, 0, 0.12), 0 0.0625rem 0.0625rem 0 rgba(0, 0, 0, 0.14), 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.21)'\r\n },\r\n selectMenu: {\r\n border: _tokens.borderWidthThin + ' solid ' + theme.palette.grey['400'],\r\n borderRadius: _tokens.borderRadiusMedium,\r\n lineHeight: '1.3rem',\r\n padding: _tokens.spacingMedium + ' 3.5rem ' + _tokens.spacingXSmall + ' ' + _tokens.spacingSmall,\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap'\r\n },\r\n nativeSelect: {\r\n backgroundColor: theme.palette.grey['100'],\r\n border: _tokens.borderWidthThin + ' solid ' + theme.palette.grey['400'],\r\n borderRadius: _tokens.borderRadiusMedium,\r\n padding: _tokens.spacingMedium + ' 3.5rem ' + _tokens.spacingXSmall + ' ' + _tokens.spacingSmall,\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n width: 'calc(100% - 4.625rem)',\r\n height: 'auto',\r\n '&$disabled': {\r\n backgroundColor: theme.palette.grey['200'],\r\n cursor: 'not-allowed'\r\n },\r\n '&:focus': {\r\n backgroundColor: theme.palette.grey['100'],\r\n borderRadius: _tokens.borderRadiusMedium,\r\n boxShadow: _tokens.boxShadowFocus\r\n }\r\n },\r\n icon: {\r\n right: _tokens.spacingSmall,\r\n top: '1.1875rem',\r\n fill: theme.palette.grey['500']\r\n },\r\n inputLabelRoot: {\r\n fontSize: _tokens.fontSizeLarge,\r\n color: theme.palette.grey['500'],\r\n left: '1.0625rem',\r\n top: '-0.375rem',\r\n zIndex: theme.zIndex.textFieldLabel,\r\n pointerEvents: 'none'\r\n },\r\n inputLabelShrink: {\r\n top: _tokens.spacingXSmall\r\n },\r\n disabled: {\r\n cursor: 'not-allowed'\r\n },\r\n zIndex: {\r\n zIndex: theme.zIndex.dropdown + 1\r\n },\r\n small: {\r\n fontSize: _tokens.fontSizeDefault,\r\n '& $icon': {\r\n top: _tokens.spacingXSmall2\r\n },\r\n '& $inputLabelRoot': {\r\n top: '-' + _tokens.spacingXSmall2,\r\n fontSize: _tokens.fontSizeDefault\r\n },\r\n '& $selectMenu': {\r\n padding: '\\n ' + _tokens.spacingXSmall1 + '\\n 3.5rem\\n ' + _tokens.spacingXSmall1 + '\\n ' + _tokens.spacingXSmall1 + '\\n ',\r\n lineHeight: 'unset'\r\n },\r\n '& $nativeSelect': {\r\n padding: _tokens.spacingXSmall1 + ' 3.5rem ' + _tokens.spacingXSmall1 + ' ' + _tokens.spacingXSmall1,\r\n lineHeight: 'unset'\r\n }\r\n },\r\n inputLabelSmall: {\r\n top: '-' + _tokens.spacingXSmall2,\r\n left: _tokens.spacingXSmall2,\r\n fontSize: _tokens.fontSizeDefault,\r\n '&[data-shrink=true]': {\r\n display: 'none'\r\n }\r\n },\r\n error: {\r\n border: _tokens.borderWidthThick + ' solid ' + theme.palette.status.error.fill,\r\n '&:focus': {\r\n boxShadow: '0 0 0 ' + _tokens.borderWidthThin + ' ' + _tokens.colorFillAlertError,\r\n '-webkit-box-shadow': '0 0 0 ' + _tokens.borderWidthThin + ' ' + _tokens.colorFillAlertError,\r\n '-moz-box-shadow:': '0 0 0 ' + _tokens.borderWidthThin + ' ' + _tokens.colorFillAlertError\r\n }\r\n },\r\n ffErrorTextAdjuster: {\r\n '-moz-transform': 'translateY(-' + _tokens.spacingSmall + ')'\r\n },\r\n formControlWidth: {\r\n maxWidth: _tokens.widthInputFields\r\n }\r\n };\r\n};\r\n\r\nvar menuListClassName = 'menu-list';\r\n\r\n/**\r\n * Use `Dropdown` to make selections from a list.\r\n * @done true\r\n * @updated true\r\n * @versionAdded v0.0.10\r\n * @examples\r\n * ControlledDropdownExample\r\n * ErrorDropdownExample\r\n * FullWidthDropdownExample\r\n * IconDropdownExample\r\n * LongTextDropdownExample\r\n * MultiSelectDropdownExample\r\n * SelectAllDropdownExample\r\n * PerformanceTestDropdownExample\r\n * NativeExample\r\n */\r\n\r\nvar Dropdown = function (_React$Component) {\r\n _inherits(Dropdown, _React$Component);\r\n\r\n function Dropdown(props) {\r\n _classCallCheck(this, Dropdown);\r\n\r\n // the internal value of the 'select all' item\r\n var _this = _possibleConstructorReturn(this, (Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call(this, props));\r\n\r\n _this.onDropDownOpen = function (e) {\r\n var onOpen = _this.props.onOpen;\r\n\r\n\r\n _IOSBodyScroll2.default.lock('.' + menuListClassName);\r\n onOpen && onOpen(e);\r\n };\r\n\r\n _this.onDropDownClose = function (e) {\r\n var onClose = _this.props.onClose;\r\n\r\n\r\n _IOSBodyScroll2.default.unlock();\r\n onClose && onClose(e);\r\n };\r\n\r\n _this.selectAllValue = (0, _v2.default)();\r\n\r\n _this.state = {\r\n selectionState: NONE,\r\n allItems: {}\r\n };\r\n\r\n _this.onDropDownOpen = _this.onDropDownOpen.bind(_this);\r\n _this.onDropDownClose = _this.onDropDownClose.bind(_this);\r\n return _this;\r\n }\r\n\r\n /**\r\n * Called when the dropdown value changes\r\n *\r\n * @param {Event} event The event that spurred this callback\r\n * @param {object} child The react element that was selected\r\n */\r\n\r\n\r\n _createClass(Dropdown, [{\r\n key: 'handleChange',\r\n value: function handleChange(event, child) {\r\n var _this2 = this;\r\n\r\n // if the user click the 'select all' item in a multi-select dropdown\r\n if (this.props.multiple && event.target.value.indexOf(this.selectAllValue) > -1) {\r\n // if no items are selected, select everything; otherwise unselect everything\r\n var newState = this.state.selectionState === NONE ? ALL : NONE;\r\n\r\n // set the new select all state\r\n this.setState({ selectionState: newState }, function () {\r\n // either select or unselect everything (overriding the value in the\r\n // event with the results of doing so)\r\n if (_this2.state.selectionState === ALL) {\r\n event.target.value = Object.keys(_this2.state.allItems);\r\n } else {\r\n event.target.value = [];\r\n }\r\n\r\n // let the caller know\r\n _this2.props.onChange && _this2.props.onChange(event, child);\r\n });\r\n } else {\r\n this.props.onChange && this.props.onChange(event, child);\r\n }\r\n }\r\n\r\n /**\r\n * Grab the label/value of each item\r\n */\r\n\r\n }, {\r\n key: 'objectifyItems',\r\n value: function objectifyItems() {\r\n // grab all the dropdown items\r\n\r\n var filteredDropdownItems = (0, _filter2.default)((0, _flattenDeep2.default)(this.props.children), function (item) {\r\n return (0, _get2.default)(item, 'type.muiName') === 'DropdownItem';\r\n });\r\n\r\n return (0, _reduce2.default)(filteredDropdownItems, function (mapping, item) {\r\n mapping[item.props.value] = item.props.label;\r\n return mapping;\r\n }, {});\r\n }\r\n\r\n /**\r\n * Render a single value.\r\n *\r\n * @param {*} val The value to render\r\n * @return The rendered value\r\n */\r\n\r\n }, {\r\n key: 'renderSingleValue',\r\n value: function renderSingleValue(val) {\r\n return this.state.allItems[val];\r\n }\r\n\r\n /**\r\n * Render multiple values.\r\n *\r\n * @param {Array.<*>} values The values to render\r\n * @return The rendered values\r\n */\r\n\r\n }, {\r\n key: 'renderMultipleValues',\r\n value: function renderMultipleValues(values) {\r\n var _this3 = this;\r\n\r\n return values.map(function (val) {\r\n return _this3.renderSingleValue(val);\r\n }).join(', ');\r\n }\r\n }, {\r\n key: 'componentDidMount',\r\n value: function componentDidMount() {\r\n // retain a catalog of each dropdown item\r\n this.setState({\r\n allItems: this.objectifyItems()\r\n });\r\n }\r\n }, {\r\n key: 'componentDidUpdate',\r\n value: function componentDidUpdate(prevProps) {\r\n // if the list of items has changed, update our internal catalog\r\n var itemsHaveChanged = (0, _get2.default)(this.props, 'children.length', 0) !== (0, _get2.default)(prevProps, 'children.length', 0) || !(0, _isEqual2.default)(this.objectifyItems(), this.state.allItems);\r\n\r\n if (itemsHaveChanged) {\r\n this.setState({\r\n allItems: this.objectifyItems()\r\n });\r\n }\r\n\r\n // if the select-all item is visible, update it based on current selections\r\n if (this.props.multiple && this.props.showSelectAll) {\r\n var selectionState = NONE;\r\n\r\n if (this.props.value.length === Object.keys(this.state.allItems).length) {\r\n selectionState = ALL;\r\n } else if (this.props.value.length > 0) {\r\n selectionState = INDETERMINATE;\r\n }\r\n\r\n // if selection state changed, update it\r\n if (this.state.selectionState !== selectionState) {\r\n this.setState({\r\n selectionState: selectionState\r\n });\r\n }\r\n }\r\n }\r\n }, {\r\n key: 'render',\r\n value: function render() {\r\n var _classNames3, _classNames4;\r\n\r\n var _props = this.props,\r\n childrenProp = _props.children,\r\n classes = _props.classes,\r\n disabled = _props.disabled,\r\n error = _props.error,\r\n edsContext = _props.edsContext,\r\n helperText = _props.helperText,\r\n id = _props.id,\r\n inputProps = _props.inputProps,\r\n labelProp = _props.label,\r\n multiple = _props.multiple,\r\n required = _props.required,\r\n value = _props.value,\r\n size = _props.size,\r\n onChange = _props.onChange,\r\n showSelectAll = _props.showSelectAll,\r\n fullWidth = _props.fullWidth,\r\n FormControlProps = _props.FormControlProps,\r\n FormHelperTextProps = _props.FormHelperTextProps,\r\n rest = _objectWithoutProperties(_props, ['children', 'classes', 'disabled', 'error', 'edsContext', 'helperText', 'id', 'inputProps', 'label', 'multiple', 'required', 'value', 'size', 'onChange', 'showSelectAll', 'fullWidth', 'FormControlProps', 'FormHelperTextProps']);\r\n\r\n var cleanedId = id || (0, _v2.default)();\r\n var selectLabelId = cleanedId + '_label';\r\n\r\n var newInputProps = Object.assign({}, inputProps, {\r\n id: cleanedId\r\n });\r\n\r\n var children = childrenProp;\r\n var label = labelProp;\r\n\r\n // we do this to handle a bug within MUI - if the initial value is nil, then the label does not correctly\r\n // shrink out of the way when an item is selected. so we set the initial value to empty string instead, which\r\n // appears to solve the issue\r\n var localValue = (0, _isNil2.default)(value) ? '' : value;\r\n\r\n if (multiple) {\r\n children = _react2.default.Children.map(childrenProp, function (child, index) {\r\n return (0, _react.cloneElement)(child, { multiple: true });\r\n });\r\n\r\n // add the current selection count to the label\r\n if (localValue && this.state.allItems) {\r\n var countString = '(' + this.props.value.length + '/' + Object.keys(this.state.allItems).length + ')';\r\n label = labelProp + ' ' + countString;\r\n }\r\n }\r\n\r\n return _react2.default.createElement(\r\n _FormControl2.default,\r\n Object.assign({\r\n className: (0, _classnames2.default)(_defineProperty({}, classes.formControlWidth, !fullWidth))\r\n }, FormControlProps),\r\n _react2.default.createElement(\r\n _react.Fragment,\r\n null,\r\n _react2.default.createElement(\r\n _InputLabel2.default,\r\n {\r\n id: selectLabelId,\r\n classes: {\r\n root: classes.inputLabelRoot,\r\n shrink: classes.inputLabelShrink,\r\n disabled: (0, _classnames2.default)(classes.disabled, classes.zIndex)\r\n },\r\n disabled: disabled,\r\n htmlFor: cleanedId,\r\n className: (0, _classnames2.default)(_defineProperty({}, classes.inputLabelSmall, size === 'small'))\r\n },\r\n required ? label + ' *' : label\r\n ),\r\n _react2.default.createElement(\r\n _Select2.default,\r\n Object.assign({\r\n className: (0, _classnames2.default)((_classNames3 = {}, _defineProperty(_classNames3, classes.small, size === 'small'), _defineProperty(_classNames3, classes.selectIcon, !disabled), _classNames3)),\r\n classes: {\r\n select: (0, _classnames2.default)((_classNames4 = {}, _defineProperty(_classNames4, classes.select, !this.props.native), _defineProperty(_classNames4, classes.nativeSelect, this.props.native), _defineProperty(_classNames4, classes.error, this.props.native && error), _classNames4)),\r\n selectMenu: (0, _classnames2.default)(classes.selectMenu, _defineProperty({}, classes.error, error)),\r\n icon: classes.icon,\r\n disabled: classes.disabled\r\n },\r\n onChange: this.handleChange.bind(this),\r\n disabled: disabled,\r\n disableUnderline: true,\r\n IconComponent: _ChevronDown2.default,\r\n inputProps: newInputProps,\r\n 'aria-labelledby': selectLabelId,\r\n MenuProps: {\r\n MenuListProps: {\r\n disablePadding: true,\r\n className: menuListClassName\r\n },\r\n classes: {\r\n paper: classes.paper\r\n }\r\n },\r\n multiple: multiple,\r\n renderValue: multiple ? this.renderMultipleValues.bind(this) : this.renderSingleValue.bind(this),\r\n value: localValue\r\n }, rest, {\r\n onOpen: this.onDropDownOpen,\r\n onClose: this.onDropDownClose\r\n }),\r\n showSelectAll && _react2.default.createElement(\r\n _Dropdown.DropdownItem,\r\n {\r\n label: edsContext.formatMessage('component.Dropdown.selectAll'),\r\n selectAll: true,\r\n multiple: true,\r\n value: this.selectAllValue\r\n },\r\n _react2.default.createElement(_Checkbox2.default, {\r\n indeterminate: this.state.selectionState === INDETERMINATE,\r\n checked: this.state.selectionState !== NONE\r\n })\r\n ),\r\n children\r\n ),\r\n helperText && _react2.default.createElement(\r\n _FormControl.FormHelperText,\r\n Object.assign({\r\n className: size === 'medium' && !this.props.native ? classes.ffErrorTextAdjuster : null,\r\n error: error,\r\n id: cleanedId + '_HelperText'\r\n }, FormHelperTextProps),\r\n helperText\r\n )\r\n )\r\n );\r\n }\r\n }, {\r\n key: 'componentWillUnmount',\r\n value: function componentWillUnmount() {\r\n // Just making sure to unlock the body scroll\r\n _IOSBodyScroll2.default.unlock();\r\n }\r\n }]);\r\n\r\n return Dropdown;\r\n}(_react2.default.Component);\r\n\r\n/**\r\n * The following should be used to enable Tooltip hover once bugs have been tested\r\n *\r\n \r\n \r\n \r\n */\r\n\r\nDropdown.muiName = 'Dropdown';\r\n\r\nDropdown.propTypes = {\r\n /**\r\n * If `true`, the width of the popover will automatically be set according to the items inside the\r\n * menu, otherwise it will be at least the width of the select input.\r\n */\r\n autoWidth: _propTypes2.default.bool,\r\n /**\r\n * The elements to populate the select with.\r\n *\r\n * - If `native` it true, these must be `option` elements\r\n * - if `native` is false, these must be `DropdownItem` elements\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * If `true`, the dropdown will be disabled.\r\n */\r\n disabled: _propTypes2.default.bool,\r\n /**\r\n * If `true`, the selected item is displayed even if its value is empty.\r\n */\r\n displayEmpty: _propTypes2.default.bool,\r\n /**\r\n * If `true`, the dropdown will display in an error state\r\n */\r\n error: _propTypes2.default.bool,\r\n /**\r\n * Properties applied to the [`FormControl`](#/components/FormControl) element.\r\n */\r\n FormControlProps: _propTypes2.default.object,\r\n /**\r\n * Properties applied to the [`FormHelperText`](#/components/FormControl) element.\r\n */\r\n FormHelperTextProps: _propTypes2.default.object,\r\n /**\r\n * If `true`, the dropdown will take up the full width of its container.\r\n */\r\n fullWidth: _propTypes2.default.bool,\r\n /**\r\n * Text to be displayed by the FormHelperText component\r\n */\r\n helperText: _propTypes2.default.string,\r\n /**\r\n * The icon that displays the arrow.\r\n */\r\n IconComponent: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object]),\r\n /**\r\n * Id assigned to the input element and referenced by label element\r\n */\r\n id: _propTypes2.default.string,\r\n /**\r\n * An `Input` element; does not have to be a material-ui specific `Input`.\r\n */\r\n input: _propTypes2.default.element,\r\n /**\r\n * Attributes applied to the `input` element. When `native` is `true`,\r\n * the attributes are applied on the `select` element.\r\n */\r\n inputProps: _propTypes2.default.object,\r\n /**\r\n * @ignore\r\n */\r\n edsContext: _propTypes2.default.object,\r\n /**\r\n * Label that is attached to the `Dropdown`\r\n */\r\n label: _propTypes2.default.string.isRequired,\r\n /**\r\n * Properties applied to the [`Menu`](https://material-ui.com/api/menu/) element.\r\n */\r\n MenuProps: _propTypes2.default.object,\r\n /**\r\n * If true, `value` must be an array and the menu will support multiple selections.\r\n * This feature will only work if `native` is `false`.\r\n */\r\n multiple: _propTypes2.default.bool,\r\n /**\r\n * If `true`, the component will be using a native `select` element.\r\n * Be sure to use the `option` element to create dropdown items when\r\n * `native` is set to `true`, instead of our `DropdownItem` component.\r\n */\r\n native: _propTypes2.default.bool,\r\n /**\r\n * Callback function fired when a menu item is selected.\r\n *\r\n * Signature:\r\n * ```\r\n * function(event: object, child?: object) => void\r\n * ```\r\n * _event_: The event source of the callback. You can pull out the new value by accessing `event.target.value`.\r\n *\r\n * _child_: The react element that was selected\r\n */\r\n onChange: _propTypes2.default.func,\r\n /**\r\n * Callback fired when the component requests to be closed.\r\n * Use in controlled mode (see open).\r\n *\r\n * Signature:\r\n * ```\r\n * function(event: object) => void\r\n * ```\r\n * _event_: The event source of the callback\r\n */\r\n onClose: _propTypes2.default.func,\r\n /**\r\n * Callback fired when the component requests to be opened.\r\n * Use in controlled mode (see open).\r\n *\r\n * Signature:\r\n * ```\r\n * function(event: object) => void\r\n * ```\r\n *\r\n * _event_: The event source of the callback\r\n */\r\n onOpen: _propTypes2.default.func,\r\n /**\r\n * Control `select` open state. You can only use it when the `native` property is `false` (default).\r\n *\r\n * If you use `onOpen` or `onClose` callbacks, you must always provide the `open` prop.\r\n */\r\n open: _propTypes2.default.bool,\r\n /**\r\n * Render the selected value.\r\n *\r\n * Signature:\r\n * ```\r\n * function(value: any) => ReactElement\r\n * ```\r\n *\r\n * _value_: The `value` provided to the component.\r\n */\r\n renderValue: _propTypes2.default.func,\r\n /**\r\n * Whether this dropdown is required.\r\n */\r\n required: _propTypes2.default.bool,\r\n /**\r\n * Properties applied to the clickable div element.\r\n */\r\n SelectDisplayProps: _propTypes2.default.object,\r\n /**\r\n * Whether to provide a \"select all\" option for multi-select dropdowns\r\n */\r\n showSelectAll: _propTypes2.default.bool,\r\n /**\r\n * The input value.\r\n */\r\n value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.bool, _propTypes2.default.arrayOf(_propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.bool]))]),\r\n /**\r\n * The size of the Dropdown. Small size is recommended to be used within the `TableEditableCell` component.\r\n */\r\n size: _propTypes2.default.oneOf(['small', 'medium'])\r\n};\r\n\r\nDropdown.defaultProps = {\r\n autoWidth: false,\r\n displayEmpty: false,\r\n fullWidth: false,\r\n multiple: false,\r\n required: false,\r\n showSelectAll: false,\r\n size: 'medium',\r\n value: ''\r\n};\r\nexports.default = (0, _EDSContext.withEDSContext)((0, _styles2.default)(styles)(Dropdown));","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _Paper = require('@material-ui/core/Paper');\r\n\r\nvar _Paper2 = _interopRequireDefault(_Paper);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n root: {}\r\n };\r\n};\r\n\r\n/**\r\n * A component that is the basis for many of other components.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.11\r\n */\r\nvar Paper = _react2.default.forwardRef(function (props, ref) {\r\n var classes = props.classes,\r\n rest = _objectWithoutProperties(props, ['classes']);\r\n\r\n var classOverrides = {\r\n root: classes.root\r\n };\r\n\r\n return _react2.default.createElement(_Paper2.default, Object.assign({}, rest, {\r\n classes: classOverrides,\r\n ref: ref\r\n }));\r\n});\r\n\r\nPaper.muiName = 'Paper';\r\nPaper.displayName = 'Paper';\r\n\r\nPaper.propTypes = {\r\n /**\r\n * The content of the component.\r\n */\r\n children: _propTypes2.default.node,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object.isRequired,\r\n /**\r\n * @ignore\r\n */\r\n className: _propTypes2.default.string,\r\n /**\r\n * The component used for the root node.\r\n * Either a string to use a DOM element or a component.\r\n */\r\n component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),\r\n /**\r\n * Shadow depth, corresponds to `dp` in the spec.\r\n * It's accepting values between 0 and 24 inclusive.\r\n */\r\n elevation: _propTypes2.default.number,\r\n /**\r\n * If `true`, rounded corners are disabled.\r\n */\r\n square: _propTypes2.default.bool\r\n};\r\n\r\nPaper.defaultProps = {\r\n component: 'div',\r\n elevation: 2,\r\n square: false\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(Paper);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _SimpleDialog = require('./SimpleDialog');\r\n\r\nObject.defineProperty(exports, 'default', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_SimpleDialog).default;\r\n }\r\n});\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _classnames = require('classnames');\r\n\r\nvar _classnames2 = _interopRequireDefault(_classnames);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _ = require('../');\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\r\n\r\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\r\n\r\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nvar overlayActionsMobileStyles = {\r\n flexFlow: 'column',\r\n '& button': {\r\n marginBottom: _tokens.spacingSmall,\r\n marginRight: 0,\r\n textAlign: 'center',\r\n width: _tokens.widthFluid,\r\n '&:last-child': {\r\n marginBottom: 0\r\n }\r\n }\r\n};\r\n\r\nvar styles = function styles(theme) {\r\n return {\r\n actionRoot: _defineProperty({\r\n justifyContent: 'flex-start',\r\n margin: '0.7rem',\r\n '& button': {\r\n marginRight: _tokens.spacingSmall\r\n }\r\n }, '@media ' + _tokens.mqSmallDown, overlayActionsMobileStyles),\r\n actionsRight: _defineProperty({\r\n flexFlow: 'row-reverse',\r\n '& button': _defineProperty({\r\n marginLeft: _tokens.spacingSmall,\r\n marginRight: 0\r\n }, '@media ' + _tokens.mqSmallDown, {\r\n marginLeft: 0\r\n })\r\n }, '@media ' + _tokens.mqSmallDown, overlayActionsMobileStyles)\r\n };\r\n};\r\n\r\n/**\r\n * Use `SimpleDialog` to create a dialog, without having to explicitly specify each individual aspect of it.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.13\r\n * @examples\r\n * SimpleDialogExample\r\n * SimpleDialogOverflowExample\r\n * SimpleDialogResponsiveExample\r\n */\r\n\r\nvar SimpleDialog = function (_React$Component) {\r\n _inherits(SimpleDialog, _React$Component);\r\n\r\n function SimpleDialog() {\r\n _classCallCheck(this, SimpleDialog);\r\n\r\n return _possibleConstructorReturn(this, (SimpleDialog.__proto__ || Object.getPrototypeOf(SimpleDialog)).apply(this, arguments));\r\n }\r\n\r\n _createClass(SimpleDialog, [{\r\n key: 'componentDidMount',\r\n value: function componentDidMount() {\r\n\r\n // complain if caller gave us more than 3 buttons\r\n if (this.props.buttonConfig.length > 3) {\r\n console.warn('Dialogs should not have more than three buttons');\r\n }\r\n }\r\n }, {\r\n key: 'render',\r\n value: function render() {\r\n var _this2 = this;\r\n\r\n var _props = this.props,\r\n DialogProps = _props.DialogProps,\r\n DialogActionsProps = _props.DialogActionsProps,\r\n DialogContentProps = _props.DialogContentProps,\r\n DialogTitleProps = _props.DialogTitleProps,\r\n rightAlignButtons = _props.rightAlignButtons,\r\n classes = _props.classes,\r\n maxWidth = _props.maxWidth,\r\n title = _props.title,\r\n showTitleBarClose = _props.showTitleBarClose,\r\n closeOnClickOut = _props.closeOnClickOut,\r\n fullScreen = _props.fullScreen,\r\n fullWidth = _props.fullWidth,\r\n buttonConfig = _props.buttonConfig,\r\n PaperProps = _props.PaperProps,\r\n children = _props.children;\r\n\r\n\r\n var actionClassOverrides = {\r\n root: classes.actionRoot\r\n };\r\n\r\n return _react2.default.createElement(\r\n _.Dialog,\r\n Object.assign({}, DialogProps, {\r\n open: this.props.open,\r\n onClose: this.props.onClose,\r\n disableBackdropClick: !closeOnClickOut,\r\n showTitleBarClose: showTitleBarClose,\r\n fullScreen: fullScreen,\r\n fullWidth: fullWidth,\r\n PaperProps: PaperProps,\r\n maxWidth: maxWidth\r\n }),\r\n title && _react2.default.createElement(\r\n _.DialogTitle,\r\n DialogTitleProps,\r\n title\r\n ),\r\n _react2.default.createElement(\r\n _.DialogContent,\r\n DialogContentProps,\r\n children\r\n ),\r\n _react2.default.createElement(\r\n _.DialogActions,\r\n Object.assign({}, DialogActionsProps, {\r\n classes: actionClassOverrides,\r\n 'data-id': 'hed-simpleDialog-dialogActions',\r\n className: (0, _classnames2.default)(_defineProperty({}, classes.actionsRight, rightAlignButtons)) }),\r\n buttonConfig.map(function (config, index) {\r\n return _react2.default.createElement(\r\n _.Button,\r\n {\r\n color: index === 0 ? 'primary' : 'secondary',\r\n key: config.id,\r\n 'data-key': config.id,\r\n onClick: function onClick() {\r\n return _this2.props.handleButtonClick(config.id);\r\n }\r\n },\r\n config.title\r\n );\r\n })\r\n )\r\n );\r\n }\r\n }]);\r\n\r\n return SimpleDialog;\r\n}(_react2.default.Component);\r\n\r\n;\r\n\r\nSimpleDialog.muiName = 'SimpleDialog';\r\n\r\nSimpleDialog.propTypes = {\r\n /**\r\n * The contents of the dialog.\r\n */\r\n children: _propTypes2.default.node.isRequired,\r\n /**\r\n * Props that will be applied to the `Dialog` element.\r\n */\r\n DialogProps: _propTypes2.default.object,\r\n /**\r\n * Props that will be applied to the `DialogActions` element.\r\n */\r\n DialogActionsProps: _propTypes2.default.object,\r\n /**\r\n * Props that will be applied to the `DialogContent` element.\r\n */\r\n DialogContentProps: _propTypes2.default.object,\r\n /**\r\n * Props that will be applied to the `DialogTitle` element.\r\n */\r\n DialogTitleProps: _propTypes2.default.object,\r\n /**\r\n * Whether the dialog is open\r\n */\r\n open: _propTypes2.default.bool.isRequired,\r\n /**\r\n * The dialog title.\r\n */\r\n title: _propTypes2.default.string,\r\n /**\r\n * The buttons to display in the action area. An array of objects with the following properties:\r\n *\r\n * * `id`: The button's unique identifier\r\n * * `title`: The button title\r\n *\r\n * Dialogs should have a maximum of three buttons.\r\n */\r\n buttonConfig: _propTypes2.default.arrayOf(_propTypes2.default.object),\r\n /**\r\n * If true, shows an 'x' in the title bar, which closes the dialog\r\n */\r\n showTitleBarClose: _propTypes2.default.bool,\r\n /**\r\n * If true, clicking outside the dialog will close it\r\n */\r\n closeOnClickOut: _propTypes2.default.bool,\r\n /**\r\n * Determine the max width of the dialog.\r\n *\r\n * The dialog width grows with the size of the screen, this property is useful\r\n * on the desktop where you might need some different widths across your\r\n * application.\r\n *\r\n * Valid values:\r\n *\r\n * * `xs`\r\n * * `sm`\r\n * * `md`\r\n * * `lg`\r\n * * `false` (disables max width)\r\n */\r\n maxWidth: _propTypes2.default.oneOf(['xs', 'sm', 'md', 'lg', false]),\r\n /**\r\n * If `true`, the dialog stretches to `maxWidth`.\r\n */\r\n fullWidth: _propTypes2.default.bool,\r\n /**\r\n * If true, dialog will appear in full screen\r\n */\r\n fullScreen: _propTypes2.default.bool,\r\n /**\r\n * If true, the action buttons will be aligned right\r\n */\r\n rightAlignButtons: _propTypes2.default.bool,\r\n /**\r\n * Invoked when the dialog wants to close\r\n */\r\n onClose: _propTypes2.default.func,\r\n /**\r\n * Properties applied to the dialog's internal Paper element.\r\n */\r\n PaperProps: _propTypes2.default.object,\r\n /**\r\n * Invoked when the user clicks on one of the buttons. Is passed a single argument, the button id.\r\n */\r\n handleButtonClick: _propTypes2.default.func,\r\n /**\r\n * Override or extend the styles applied to the component.\r\n */\r\n classes: _propTypes2.default.object\r\n};\r\n\r\n// default prop values\r\nSimpleDialog.defaultProps = {\r\n showTitleBarClose: true,\r\n closeOnClickOut: true,\r\n fullScreen: false,\r\n fullWidth: false,\r\n rightAlignButtons: true,\r\n maxWidth: false,\r\n buttonConfig: []\r\n};\r\n\r\nexports.default = (0, _styles2.default)(styles)(SimpleDialog);","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\nexports.cdn = exports.config = undefined;\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _MuiThemeProvider = require('@material-ui/core/styles/MuiThemeProvider');\r\n\r\nvar _MuiThemeProvider2 = _interopRequireDefault(_MuiThemeProvider);\r\n\r\nvar _styles = require('@material-ui/styles');\r\n\r\nvar _themes = require('@hedtech/react-design-system/core/themes');\r\n\r\nvar _styles2 = require('../styles/');\r\n\r\nvar _EDSContext = require('../EDSContext/EDSContext');\r\n\r\nvar _CssBaseline = require('./internal/CssBaseline');\r\n\r\nvar _CssBaseline2 = _interopRequireDefault(_CssBaseline);\r\n\r\nvar _edsconfig = require('./internal/edsconfig.js');\r\n\r\nvar _edsconfig2 = _interopRequireDefault(_edsconfig);\r\n\r\nvar _urls = require('./internal/urls');\r\n\r\nvar _urls2 = _interopRequireDefault(_urls);\r\n\r\nvar _moment = require('moment');\r\n\r\nvar _moment2 = _interopRequireDefault(_moment);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nvar DEFAULT_LOCALE = 'en_US';\r\n\r\n/**\r\n * `EDSApplication` is the top-level component of an EDS application. All apps must be wrapped in this component.\r\n *\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.13\r\n * @examples\r\n * EDSApplicationExample\r\n */\r\nvar EDSApplication = function EDSApplication(props) {\r\n\r\n (0, _react.useEffect)(function () {\r\n // if the caller wants us to automatically set the global moment locale, do so\r\n if (props.locale && props.autosetMomentLocale) {\r\n _moment2.default.locale(props.locale);\r\n }\r\n }, [props.locale]); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n return _react2.default.createElement(\r\n _EDSContext.EDSContext.Provider,\r\n { value: {\r\n locale: props.locale,\r\n labelOverrides: props.labelOverrides\r\n } },\r\n _react2.default.createElement(\r\n _styles.StylesProvider,\r\n { generateClassName: _styles2.classNameGenerator },\r\n _react2.default.createElement(\r\n _MuiThemeProvider2.default,\r\n { theme: props.theme },\r\n _react2.default.createElement(_CssBaseline2.default, null),\r\n props.children\r\n )\r\n )\r\n );\r\n};\r\n\r\nEDSApplication.muiName = 'EDSApplication';\r\nEDSApplication.displayName = 'EDSApplication';\r\n\r\nEDSApplication.propTypes = {\r\n\r\n /**\r\n * The nodes comprising the wrapped application\r\n */\r\n children: _propTypes2.default.node.isRequired,\r\n /**\r\n * The application's theme.\r\n */\r\n theme: _propTypes2.default.object,\r\n /**\r\n * Overrides for the translated labels.\r\n */\r\n labelOverrides: _propTypes2.default.object,\r\n /**\r\n * Locale to use for translations\r\n */\r\n locale: _propTypes2.default.string,\r\n /**\r\n * Whether to set the global moment context to the locale specified by the `locale` prop.\r\n */\r\n autosetMomentLocale: _propTypes2.default.bool\r\n\r\n};\r\n\r\n// If default props are needed, they must be set here\r\nEDSApplication.defaultProps = {\r\n theme: (0, _themes.createEDSTheme)('light'),\r\n labelOverrides: {},\r\n locale: DEFAULT_LOCALE,\r\n autosetMomentLocale: true\r\n};\r\n\r\nexports.config = _edsconfig2.default;\r\nexports.cdn = _urls2.default;\r\nexports.default = EDSApplication;","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _styles = require('@material-ui/styles');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nvar useStyles = (0, _styles.makeStyles)(function (theme) {\r\n return {\r\n '@global': {\r\n html: {\r\n WebkitFontSmoothing: 'antialiased', // Antialiasing.\r\n MozOsxFontSmoothing: 'grayscale', // Antialiasing.\r\n // Change from `box-sizing: content-box` so that `width`\r\n // is not affected by `padding` or `border`.\r\n boxSizing: 'border-box'\r\n },\r\n '*, *::before, *::after': {\r\n boxSizing: 'inherit'\r\n },\r\n body: {\r\n margin: 0, // Remove the margin in all browsers.\r\n backgroundColor: theme.palette.background.default,\r\n '@media print': {\r\n // Save printer ink.\r\n backgroundColor: theme.palette.common.white\r\n }\r\n }\r\n }\r\n };\r\n}, { name: 'CssBaseline' });\r\n\r\nfunction CssBaseline(props) {\r\n var _props$children = props.children,\r\n children = _props$children === undefined ? null : _props$children;\r\n\r\n useStyles();\r\n return _react2.default.createElement(\r\n _react2.default.Fragment,\r\n null,\r\n children\r\n );\r\n}\r\n\r\nCssBaseline.propTypes = {\r\n /**\r\n * You can wrap a node.\r\n */\r\n children: _propTypes2.default.node\r\n};\r\n\r\nexports.default = CssBaseline;","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _edsconfig = require('./edsconfig.js');\r\n\r\nvar _edsconfig2 = _interopRequireDefault(_edsconfig);\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nvar cdnBaseUrlWithVersion = '' + _edsconfig2.default.cdnBaseUrl + _edsconfig2.default.appVersion;\r\nvar getLargeIllustrationsUrl = function getLargeIllustrationsUrl(assetName) {\r\n return cdnBaseUrlWithVersion + '/img/illustrations/large/' + assetName;\r\n};\r\n\r\nvar getFontsUrl = function getFontsUrl() {\r\n return cdnBaseUrlWithVersion + '/fonts/fonts.css';\r\n};\r\n\r\nvar getBackgroundImageUrl = function getBackgroundImageUrl(assetName) {\r\n return cdnBaseUrlWithVersion + '/img/bg/' + assetName;\r\n};\r\n\r\nvar getFavIconUrl = function getFavIconUrl(assetName) {\r\n return assetName ? cdnBaseUrlWithVersion + '/img/favicons/' + assetName : cdnBaseUrlWithVersion + '/img/favicons/favicon.svg';\r\n};\r\n\r\nvar cdn = {\r\n getLargeIllustrationsUrl: getLargeIllustrationsUrl,\r\n getFontsUrl: getFontsUrl,\r\n getBackgroundImageUrl: getBackgroundImageUrl,\r\n getFavIconUrl: getFavIconUrl\r\n};\r\n\r\nexports.default = cdn;","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _MegaMenu = require('./MegaMenu');\r\n\r\nObject.defineProperty(exports, 'default', {\r\n enumerable: true,\r\n get: function get() {\r\n return _interopRequireDefault(_MegaMenu).default;\r\n }\r\n});\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }","'use strict';\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\n\r\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\r\n\r\nvar _react = require('react');\r\n\r\nvar _react2 = _interopRequireDefault(_react);\r\n\r\nvar _propTypes = require('prop-types');\r\n\r\nvar _propTypes2 = _interopRequireDefault(_propTypes);\r\n\r\nvar _ = require('../');\r\n\r\nvar _EDSContext = require('../EDSContext/EDSContext');\r\n\r\nvar _Icon = require('@eui/ds-icons/lib/Icon');\r\n\r\nvar _Icon2 = _interopRequireDefault(_Icon);\r\n\r\nvar _styles = require('../styles');\r\n\r\nvar _styles2 = _interopRequireDefault(_styles);\r\n\r\nvar _classnames = require('classnames');\r\n\r\nvar _classnames2 = _interopRequireDefault(_classnames);\r\n\r\nvar _withWidth = require('./../withWidth');\r\n\r\nvar _withWidth2 = _interopRequireDefault(_withWidth);\r\n\r\nvar _Grid = require('./../Grid');\r\n\r\nvar _Grid2 = _interopRequireDefault(_Grid);\r\n\r\nvar _find = require('lodash/find');\r\n\r\nvar _find2 = _interopRequireDefault(_find);\r\n\r\nvar _v = require('uuid/v4');\r\n\r\nvar _v2 = _interopRequireDefault(_v);\r\n\r\nvar _tokens = require('../styles/tokens');\r\n\r\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\r\n\r\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\r\n\r\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\r\n\r\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\r\n\r\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\r\n\r\nvar styles = function styles(theme) {\r\n var _ref;\r\n\r\n return _ref = {\r\n\r\n megaMenu: {\r\n position: 'fixed',\r\n color: _tokens.colorBrandNeutral600,\r\n bottom: 0,\r\n left: 0,\r\n right: 0,\r\n opacity: 1,\r\n willChange: 'opacity',\r\n backgroundColor: '#FFF',\r\n zIndex: theme.zIndex.megaMenu,\r\n overflowX: 'hidden',\r\n\r\n '&.useFluidTransition': {\r\n transition: 'all 0.15s ease-in-out',\r\n transformOrigin: '0 0'\r\n }\r\n\r\n },\r\n\r\n megaMenuHidden: {\r\n maxHeight: '0'\r\n },\r\n\r\n wrapper: {\r\n padding: '6rem 5rem'\r\n }\r\n\r\n }, _defineProperty(_ref, '@media ' + _tokens.mqLarge, {\r\n wrapper: {\r\n padding: '6rem 10rem'\r\n }\r\n }), _defineProperty(_ref, 'staticAreaStart', {\r\n borderLeft: '1px solid black'\r\n }), _defineProperty(_ref, 'footerArea', {\r\n paddingTop: '5rem',\r\n justifyContent: 'center',\r\n display: 'flex'\r\n }), _defineProperty(_ref, 'listItemRoot', {\r\n backgroundColor: 'white',\r\n outline: '1px solid blue'\r\n }), _defineProperty(_ref, 'section', {\r\n\r\n // remove top padding to ensure that the top of the dividing line between static and dynamic area lines up correctly\r\n '&.first-row': {\r\n paddingTop: '0 !important'\r\n },\r\n\r\n '&.last-row': {\r\n paddingBottom: '0 !important'\r\n },\r\n\r\n '& .section-header': {\r\n color: theme.palette.grey[600],\r\n paddingBottom: _tokens.spacingSmall\r\n },\r\n '& .section-link': {\r\n color: theme.palette.action.selected,\r\n cursor: 'pointer',\r\n lineHeight: _tokens.spacingMedium\r\n },\r\n '& .section-link:hover': {\r\n textDecoration: 'underline'\r\n },\r\n '& .section-link a': {\r\n color: theme.palette.action.selected,\r\n textDecoration: 'none'\r\n },\r\n '& .section-link.disabled': {\r\n color: _tokens.colorTextDisabled,\r\n textDecoration: 'none',\r\n cursor: 'auto',\r\n pointerEvents: 'none'\r\n },\r\n '& .section-link.disabled a': {\r\n color: _tokens.colorTextDisabled\r\n }\r\n }), _defineProperty(_ref, 'logo', {\r\n height: '0.875rem !important',\r\n marginTop: '0.125rem',\r\n minWidth: '0 !important',\r\n padding: '0 0 0 ' + _tokens.spacingXSmall + ' !important',\r\n '& svg': {\r\n width: 'auto'\r\n }\r\n }), _defineProperty(_ref, 'topLevelMenuItem', {\r\n borderBottom: _tokens.borderWidthThin + ' solid ' + theme.palette.grey[300]\r\n }), _defineProperty(_ref, 'smallListItemOverrides', {\r\n padding: '1rem 0 !important', // TODO this class always appears below native list item classes in precedence, so need the !important\r\n backgroundColor: 'transparent !important'\r\n }), _defineProperty(_ref, 'smallMenuTopLevelItemText', {\r\n fontFamily: _tokens.fontFamilyHeader + ' !important'\r\n }), _defineProperty(_ref, 'smallMenu', {\r\n display: 'flex',\r\n flexDirection: 'column'\r\n }), _defineProperty(_ref, 'smallMenuHeader', {\r\n\r\n display: 'flex',\r\n borderBottom: _tokens.borderWidthThick + ' solid ' + theme.palette.grey[400],\r\n padding: '0.5rem 0',\r\n minHeight: '3.375rem', // necessary to maintain consistent height in iOS Safari\r\n\r\n marginLeft: _tokens.spacingMedium,\r\n marginRight: _tokens.spacingMedium,\r\n\r\n '& > .back-nav': {\r\n marginLeft: '-1rem'\r\n },\r\n\r\n '& > .back-icon': {\r\n color: theme.palette.grey[600]\r\n },\r\n\r\n '& > .back-icon:hover': {\r\n cursor: 'pointer'\r\n },\r\n\r\n '& > .header-title': {\r\n margin: 'auto'\r\n }\r\n\r\n }), _defineProperty(_ref, 'smallMenuSubHeader', {\r\n borderBottom: _tokens.borderWidthThick + ' solid ' + theme.palette.grey[400],\r\n padding: '1rem 0',\r\n marginLeft: _tokens.spacingMedium,\r\n marginRight: _tokens.spacingMedium,\r\n\r\n '& > .back-icon': {\r\n color: theme.palette.grey[600]\r\n },\r\n\r\n '& > .back-icon:hover': {\r\n cursor: 'pointer'\r\n },\r\n '& > .submenu-header-title': {\r\n margin: 'auto'\r\n },\r\n\r\n '& > .header-title': {\r\n paddingTop: '1.5rem'\r\n }\r\n\r\n }), _defineProperty(_ref, 'smallMenuIcon', {\r\n marginRight: 0,\r\n color: theme.palette.grey[600]\r\n }), _defineProperty(_ref, 'smallMenuList', {\r\n flexGrow: 1,\r\n margin: '0 ' + _tokens.spacingMedium,\r\n width: 'auto !important'\r\n }), _defineProperty(_ref, 'smallMenuItem', {\r\n color: theme.palette.action.selected,\r\n fontWeight: _tokens.fontWeightStrong,\r\n\r\n '& a': {\r\n color: theme.palette.action.selected,\r\n textDecoration: 'none'\r\n },\r\n '& a:visited': {\r\n color: theme.palette.action.selected,\r\n textDecoration: 'none'\r\n },\r\n '& a:hover': {\r\n color: theme.palette.action.selected,\r\n textDecoration: 'none'\r\n }\r\n }), _defineProperty(_ref, 'smallMenuItemContents', {\r\n display: 'flex',\r\n '&> div': {\r\n paddingRight: _tokens.spacingSmall\r\n }\r\n }), _defineProperty(_ref, 'smallMenuItemDisabled', {\r\n color: theme.palette.grey[400],\r\n cursor: 'default'\r\n }), _defineProperty(_ref, 'menuFooter', {\r\n display: 'flex',\r\n margin: 'auto',\r\n padding: _tokens.spacingLarge + ' 0',\r\n\r\n '&.smallMenuFooter': {\r\n paddingBottom: '5rem'\r\n }\r\n }), _ref;\r\n};\r\n\r\n// detects when we've switched size classes that necessitate a change in the megamenu's form\r\nvar withMobileMegaMenu = function withMobileMegaMenu() {\r\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\r\n return function (Component) {\r\n var _options$breakpoint = options.breakpoint,\r\n breakpoint = _options$breakpoint === undefined ? 'xs' : _options$breakpoint;\r\n\r\n\r\n function WithMobileMegaMenu(props) {\r\n return _react2.default.createElement(Component, Object.assign({ variant: (0, _withWidth.isWidthDown)(breakpoint, props.width) ? 'small' : 'large' }, props));\r\n }\r\n\r\n WithMobileMegaMenu.propTypes = {\r\n width: _propTypes2.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']).isRequired\r\n };\r\n\r\n return (0, _withWidth2.default)()(WithMobileMegaMenu);\r\n };\r\n};\r\n\r\n/**\r\n * Use `MegaMenu` to display all menu and utility options.\r\n * @done true\r\n * @updated false\r\n * @versionAdded v0.0.15\r\n*/\r\n\r\nvar MegaMenu = function (_React$Component) {\r\n _inherits(MegaMenu, _React$Component);\r\n\r\n function MegaMenu() {\r\n var _ref2;\r\n\r\n var _temp, _this, _ret;\r\n\r\n _classCallCheck(this, MegaMenu);\r\n\r\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\r\n args[_key] = arguments[_key];\r\n }\r\n\r\n return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = MegaMenu.__proto__ || Object.getPrototypeOf(MegaMenu)).call.apply(_ref2, [this].concat(args))), _this), _this.state = {\r\n selectedItemKey: null,\r\n previousBodyScroll: 'auto'\r\n\r\n /**\r\n * Calculates dynamic styles for the menu (based on its size, and it's positioning)\r\n *\r\n * @returns {object} Dynamic menu styles\r\n */\r\n }, _this.previousSelected = function (event) {\r\n if (event.type !== 'keydown' || event.key === 'Enter') {\r\n _this.setState({\r\n selectedItemKey: null\r\n });\r\n }\r\n }, _temp), _possibleConstructorReturn(_this, _ret);\r\n }\r\n\r\n _createClass(MegaMenu, [{\r\n key: 'getMenuStyles',\r\n value: function getMenuStyles() {\r\n var _props = this.props,\r\n classes = _props.classes,\r\n parentElementRef = _props.parentElementRef,\r\n open = _props.open,\r\n topOffset = _props.topOffset,\r\n variant = _props.variant;\r\n\r\n // figure out the height of the megamenu\r\n\r\n var height = 'calc(100vh - ' + topOffset + 'px';\r\n\r\n var menuStyles = {\r\n display: variant === 'small' ? 'flex' : 'block',\r\n top: topOffset + 'px'\r\n };\r\n\r\n // if we're provided with a parent element, place the menu within that element\r\n if (parentElementRef && parentElementRef.current) {\r\n\r\n var el = parentElementRef.current;\r\n var rect = el.getBoundingClientRect();\r\n\r\n height = rect.height + 'px';\r\n\r\n // position the menu within the element\r\n menuStyles = Object.assign(menuStyles, {\r\n position: 'absolute',\r\n top: topOffset + 'px',\r\n left: 0,\r\n width: rect.width - classes.megaMenu.top + 'px'\r\n });\r\n }\r\n\r\n var menuHeight = open ? height : 0;\r\n\r\n // set the height of the megamenu\r\n Object.assign(menuStyles, {\r\n maxHeight: menuHeight, // need to specify max height as well, because transitions don't work with just height\r\n height: menuHeight\r\n });\r\n\r\n return menuStyles;\r\n }\r\n\r\n /**\r\n * Handle item selection.\r\n *\r\n * @param {object} item The selected item\r\n */\r\n\r\n }, {\r\n key: 'selectItem',\r\n value: function selectItem(event, item) {\r\n\r\n // if this element contains an href somewhere in its hierarchy, invoke it\r\n var anchor = event.target && event.target.querySelector('a');\r\n\r\n if (anchor) {\r\n anchor.click();\r\n } else {\r\n\r\n // do whatever our caller tells us to do\r\n if (this.props.onItemSelected) {\r\n this.props.onItemSelected(item);\r\n }\r\n\r\n // tell our caller that we're ready to close\r\n this.props.onClose();\r\n }\r\n }\r\n\r\n /**\r\n * Whether the item event should be handled.\r\n *\r\n * @param {Event} event Selection event\r\n * @param {object} item Selected item\r\n * @return {boolean} True if event should be handled\r\n */\r\n\r\n }, {\r\n key: 'shouldHandleSelection',\r\n value: function shouldHandleSelection(event, item) {\r\n return !item.disabled && ((event.type === 'keydown' || event.type === 'keypress') && event.key === 'Enter' || event.type === 'click');\r\n }\r\n\r\n /**\r\n * Handle larege menu item selection.\r\n *\r\n * @param {Event} event Selection event\r\n * @param {object} sectionItem The selected item\r\n */\r\n\r\n }, {\r\n key: 'largeMenuItemSelected',\r\n value: function largeMenuItemSelected(event, sectionItem) {\r\n\r\n // check if the event is a keypress event, then check for the key pressed\r\n if (this.shouldHandleSelection(event, sectionItem)) {\r\n this.selectItem(event, sectionItem);\r\n }\r\n }\r\n\r\n /**\r\n * Handle small menu item selection.\r\n *\r\n * @param {Event} event Selection event\r\n * @param {object} item Selected item\r\n */\r\n\r\n }, {\r\n key: 'smallMenuItemSelected',\r\n value: function smallMenuItemSelected(event, item) {\r\n\r\n if (this.shouldHandleSelection(event, item)) {\r\n\r\n // item has submenus, navigate to them\r\n if (item.items) {\r\n this.setState({\r\n selectedItemKey: item.key\r\n });\r\n\r\n // leaf node, engage selection apparatus\r\n } else {\r\n this.selectItem(event, item);\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * We were asked to go up a level\r\n */\r\n\r\n }, {\r\n key: 'getSelectedItem',\r\n\r\n\r\n /**\r\n * Returns the item corresponding to the given key\r\n *\r\n * @param {string} key Item key\r\n * @return {object} Corresponding item\r\n */\r\n value: function getSelectedItem(key) {\r\n return (0, _find2.default)(this.props.menuDefinition.concat(this.props.utilityDefinition), function (item) {\r\n return item.key === key;\r\n });\r\n }\r\n\r\n /**\r\n * Renders a single small megamenu items\r\n *\r\n * @param {object} item Item to render\r\n * @return {Element} The rendered element\r\n */\r\n\r\n }, {\r\n key: 'renderSmallItem',\r\n value: function renderSmallItem(item) {\r\n var _this2 = this;\r\n\r\n var classes = this.props.classes;\r\n\r\n // apply special header styling to text if we're at the top level of the menu\r\n var listItemClasses = this.state.selectedItemKey ? null : {\r\n primary: classes.smallMenuTopLevelItemText\r\n };\r\n\r\n return _react2.default.createElement(\r\n 'div',\r\n { key: item.key },\r\n _react2.default.createElement(\r\n _.ListItem,\r\n {\r\n classes: {\r\n root: classes.smallListItemOverrides\r\n },\r\n button: true,\r\n focusVisibleClassName: classes.listItemRoot,\r\n onClick: function onClick(event) {\r\n return _this2.smallMenuItemSelected(event, item);\r\n },\r\n onKeyPress: function onKeyPress(event) {\r\n return _this2.smallMenuItemSelected(event, item);\r\n },\r\n className: this.state.selectedItemKey ? null : classes.topLevelMenuItem,\r\n disabled: item.disabled,\r\n tabIndex: this.props.open ? 0 : -1\r\n },\r\n _react2.default.createElement(\r\n _.ListItemText,\r\n {\r\n classes: listItemClasses,\r\n className: item.disabled ? 'disabled' : null,\r\n primaryTypographyProps: this.getSmallListItemTypographyClass(item)\r\n },\r\n _react2.default.createElement(\r\n 'div',\r\n { className: this.props.classes.smallMenuItemContents },\r\n _react2.default.createElement(\r\n 'div',\r\n null,\r\n item.megaMenuContent || item.content\r\n ),\r\n item.label && _react2.default.createElement(\r\n 'div',\r\n null,\r\n item.label\r\n )\r\n )\r\n ),\r\n item.items && _react2.default.createElement(\r\n _.ListItemIcon,\r\n { className: classes.smallMenuIcon },\r\n _react2.default.createElement(_Icon2.default, { name: 'chevron-right' })\r\n )\r\n )\r\n );\r\n }\r\n\r\n /**\r\n * Renders the small version of the menu\r\n *\r\n * @param {Array.\r\n ) : (\r\n <>\r\n {components ? (\r\n \r\n \r\n \r\n {components.name || ''}\r\n \r\n {components.enableOnlinePayment\r\n && components.feeAmount ?\r\n (\r\n \r\n {Format.toString(components.isFlatFee\r\n ? resources.formatHasFee\r\n : resources.formatHasFees, [components.feeAmount])}\r\n \r\n )\r\n : undefined}\r\n \r\n \r\n \r\n ) : undefined}\r\n \r\n {content.map((step, i) => (\r\n \r\n \r\n \r\n {step.title}\r\n \r\n \r\n \r\n {step.content}\r\n \r\n \r\n \r\n {activeStep === content.length - 1\r\n ? resources.lblSubmit\r\n : resources.lblNext}\r\n \r\n
\r\n \r\n \r\n ))}\r\n \r\n \r\n )\r\n }\r\n \r\n ) : noContent}\r\n {showSaveButton && onClickSave ?\r\n (\r\n \r\n
\r\n
\r\n \r\n {saveMessage}\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n {resources.lblSave}\r\n
\r\n \r\n \r\n
\r\n {footer}\r\n
\r\n {fieldsGroupsModal}\r\n \r\n \r\n \r\n );\r\n};\r\n// #endregion\r\n\r\n// Export: Component\r\nexport default withStyles(styles)(ApplicationHandler);","import React from 'react';\r\nimport EdsConfirmationDialog from '@hedtech/react-design-system/core/es/ConfirmationDialog';\r\nconst ConfirmationDialog = (props) => (React.createElement(EdsConfirmationDialog, Object.assign({}, props)));\r\nexport default ConfirmationDialog;\r\n","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport warning from 'warning';\nimport { getDisplayName } from '@material-ui/utils';\n\nfunction mergeClasses() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n var baseClasses = options.baseClasses,\n newClasses = options.newClasses,\n Component = options.Component;\n\n if (!newClasses) {\n return baseClasses;\n }\n\n var nextClasses = _extends({}, baseClasses);\n\n if (process.env.NODE_ENV !== 'production' && typeof newClasses === 'string') {\n process.env.NODE_ENV !== \"production\" ? warning(false, [\"Material-UI: the value `\".concat(newClasses, \"` \") + \"provided to the classes prop of \".concat(getDisplayName(Component), \" is incorrect.\"), 'You might want to use the className prop instead.'].join('\\n')) : void 0;\n return baseClasses;\n }\n\n Object.keys(newClasses).forEach(function (key) {\n process.env.NODE_ENV !== \"production\" ? warning(baseClasses[key] || !newClasses[key], [\"Material-UI: the key `\".concat(key, \"` \") + \"provided to the classes prop is not implemented in \".concat(getDisplayName(Component), \".\"), \"You can only override one of the following: \".concat(Object.keys(baseClasses).join(','), \".\")].join('\\n')) : void 0;\n process.env.NODE_ENV !== \"production\" ? warning(!newClasses[key] || typeof newClasses[key] === 'string', [\"Material-UI: the key `\".concat(key, \"` \") + \"provided to the classes prop is not valid for \".concat(getDisplayName(Component), \".\"), \"You need to provide a non empty string instead of: \".concat(newClasses[key], \".\")].join('\\n')) : void 0;\n\n if (newClasses[key]) {\n nextClasses[key] = \"\".concat(baseClasses[key], \" \").concat(newClasses[key]);\n }\n });\n return nextClasses;\n}\n\nexport default mergeClasses;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\nimport { exactProp } from '@material-ui/utils';\nimport createGenerateClassName from '../createGenerateClassName';\nimport { create } from 'jss';\nimport jssPreset from '../jssPreset'; // Default JSS instance.\n\nvar jss = create(jssPreset()); // Use a singleton or the provided one by the context.\n//\n// The counter-based approach doesn't tolerate any mistake.\n// It's much safer to use the same counter everywhere.\n\nvar generateClassName = createGenerateClassName(); // Exported for test purposes\n\nexport var sheetsManager = new Map();\nvar defaultOptions = {\n disableGeneration: false,\n generateClassName: generateClassName,\n jss: jss,\n sheetsCache: null,\n sheetsManager: sheetsManager,\n sheetsRegistry: null\n};\nexport var StylesContext = React.createContext(defaultOptions);\nvar injectFirstNode;\n\nfunction StylesProvider(props) {\n var children = props.children,\n _props$injectFirst = props.injectFirst,\n injectFirst = _props$injectFirst === void 0 ? false : _props$injectFirst,\n _props$disableGenerat = props.disableGeneration,\n disableGeneration = _props$disableGenerat === void 0 ? false : _props$disableGenerat,\n localOptions = _objectWithoutProperties(props, [\"children\", \"injectFirst\", \"disableGeneration\"]);\n\n var outerOptions = React.useContext(StylesContext);\n\n var context = _extends({}, outerOptions, {\n disableGeneration: disableGeneration\n }, localOptions);\n\n process.env.NODE_ENV !== \"production\" ? warning(typeof window !== 'undefined' || context.sheetsManager, 'Material-UI: you need to use the ServerStyleSheets API when rendering on the server.') : void 0;\n process.env.NODE_ENV !== \"production\" ? warning(!context.jss.options.insertionPoint || !injectFirst, 'Material-UI: you cannot use a custom insertionPoint and at the same time.') : void 0;\n process.env.NODE_ENV !== \"production\" ? warning(!injectFirst || !localOptions.jss, 'Material-UI: you cannot use the jss and injectFirst props at the same time.') : void 0;\n\n if (!context.jss.options.insertionPoint && injectFirst && typeof window !== 'undefined') {\n if (!injectFirstNode) {\n var head = document.head;\n injectFirstNode = document.createComment('mui-inject-first');\n head.insertBefore(injectFirstNode, head.firstChild);\n }\n\n context.jss = create({\n plugins: jssPreset().plugins,\n insertionPoint: injectFirstNode\n });\n }\n\n return React.createElement(StylesContext.Provider, {\n value: context\n }, children);\n}\n\nprocess.env.NODE_ENV !== \"production\" ? StylesProvider.propTypes = {\n /**\n * Your component tree.\n */\n children: PropTypes.node.isRequired,\n\n /**\n * You can disable the generation of the styles with this option.\n * It can be useful when traversing the React tree outside of the HTML\n * rendering step on the server.\n * Let's say you are using react-apollo to extract all\n * the queries made by the interface server-side - you can significantly speed up the traversal with this prop.\n */\n disableGeneration: PropTypes.bool,\n\n /**\n * JSS's class name generator.\n */\n generateClassName: PropTypes.func,\n\n /**\n * By default, the styles are injected last in the element of the page.\n * As a result, they gain more specificity than any other style sheet.\n * If you want to override Material-UI's styles, set this prop.\n */\n injectFirst: PropTypes.bool,\n\n /**\n * JSS's instance.\n */\n jss: PropTypes.object,\n\n /**\n * @ignore\n */\n serverGenerateClassName: PropTypes.func,\n\n /**\n * @ignore\n *\n * Beta feature.\n *\n * Cache for the sheets.\n */\n sheetsCache: PropTypes.object,\n\n /**\n * @ignore\n *\n * The sheetsManager is used to deduplicate style sheet injection in the page.\n * It's deduplicating using the (theme, styles) couple.\n * On the server, you should provide a new instance for each request.\n */\n sheetsManager: PropTypes.object,\n\n /**\n * @ignore\n *\n * Collect the sheets.\n */\n sheetsRegistry: PropTypes.object\n} : void 0;\n\nif (process.env.NODE_ENV !== 'production') {\n process.env.NODE_ENV !== \"production\" ? StylesProvider.propTypes = exactProp(StylesProvider.propTypes) : void 0;\n}\n\nexport default StylesProvider;","import _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { exactProp } from '@material-ui/utils';\nvar useEnhancedEffect = typeof window !== 'undefined' && process.env.NODE_ENV !== 'test' ? React.useLayoutEffect : React.useEffect;\n/**\n * NoSsr purposely removes components from the subject of Server Side Rendering (SSR).\n *\n * This component can be useful in a variety of situations:\n * - Escape hatch for broken dependencies not supporting SSR.\n * - Improve the time-to-first paint on the client by only rendering above the fold.\n * - Reduce the rendering time on the server.\n * - Under too heavy server load, you can turn on service degradation.\n */\n\nfunction NoSsr(props) {\n var children = props.children,\n _props$defer = props.defer,\n defer = _props$defer === void 0 ? false : _props$defer,\n _props$fallback = props.fallback,\n fallback = _props$fallback === void 0 ? null : _props$fallback;\n\n var _React$useState = React.useState(false),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n mountedState = _React$useState2[0],\n setMountedState = _React$useState2[1];\n\n useEnhancedEffect(function () {\n if (!defer) {\n setMountedState(true);\n }\n }, [defer]);\n React.useEffect(function () {\n if (defer) {\n setMountedState(true);\n }\n }, [defer]); // We need the Fragment here to force react-docgen to recognise NoSsr as a component.\n\n return React.createElement(React.Fragment, null, mountedState ? children : fallback);\n}\n\nprocess.env.NODE_ENV !== \"production\" ? NoSsr.propTypes = {\n /**\n * You can wrap a node.\n */\n children: PropTypes.node.isRequired,\n\n /**\n * If `true`, the component will not only prevent server-side rendering.\n * It will also defer the rendering of the children into a different screen frame.\n */\n defer: PropTypes.bool,\n\n /**\n * The fallback content to display.\n */\n fallback: PropTypes.node\n} : void 0;\n\nif (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line\n NoSsr['propTypes' + ''] = exactProp(NoSsr.propTypes);\n}\n\nexport default NoSsr;","import _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport ButtonBase from '../ButtonBase';\nimport { capitalize } from '../utils/helpers';\nimport unsupportedProp from '../utils/unsupportedProp';\nexport var styles = function styles(theme) {\n var _extends2;\n\n return {\n /* Styles applied to the root element. */\n root: _extends({}, theme.typography.button, (_extends2 = {\n maxWidth: 264,\n minWidth: 72,\n position: 'relative',\n boxSizing: 'border-box',\n minHeight: 48,\n flexShrink: 0,\n padding: '6px 12px'\n }, _defineProperty(_extends2, theme.breakpoints.up('md'), {\n padding: '6px 24px'\n }), _defineProperty(_extends2, \"overflow\", 'hidden'), _defineProperty(_extends2, \"whiteSpace\", 'normal'), _defineProperty(_extends2, \"textAlign\", 'center'), _defineProperty(_extends2, theme.breakpoints.up('md'), {\n fontSize: theme.typography.pxToRem(13),\n minWidth: 160\n }), _extends2)),\n\n /* Styles applied to the root element if both `icon` and `label` are provided. */\n labelIcon: {\n minHeight: 72,\n paddingTop: 9,\n '& $wrapper > *:first-child': {\n marginBottom: 6\n }\n },\n\n /* Styles applied to the root element if the parent [`Tabs`](/api/tabs/) has `textColor=\"inherit\"`. */\n textColorInherit: {\n color: 'inherit',\n opacity: 0.7,\n '&$selected': {\n opacity: 1\n },\n '&$disabled': {\n opacity: 0.4\n }\n },\n\n /* Styles applied to the root element if the parent [`Tabs`](/api/tabs/) has `textColor=\"primary\"`. */\n textColorPrimary: {\n color: theme.palette.text.secondary,\n '&$selected': {\n color: theme.palette.primary.main\n },\n '&$disabled': {\n color: theme.palette.text.disabled\n }\n },\n\n /* Styles applied to the root element if the parent [`Tabs`](/api/tabs/) has `textColor=\"secondary\"`. */\n textColorSecondary: {\n color: theme.palette.text.secondary,\n '&$selected': {\n color: theme.palette.secondary.main\n },\n '&$disabled': {\n color: theme.palette.text.disabled\n }\n },\n\n /* Pseudo-class applied to the root element if `selected={true}` (controlled by the Tabs component). */\n selected: {},\n\n /* Pseudo-class applied to the root element if `disabled={true}` (controlled by the Tabs component). */\n disabled: {},\n\n /* Styles applied to the root element if `fullWidth={true}` (controlled by the Tabs component). */\n fullWidth: {\n flexShrink: 1,\n flexGrow: 1,\n flexBasis: 0,\n maxWidth: 'none'\n },\n\n /* Styles applied to the root element if `wrapped={true}`. */\n wrapped: {\n fontSize: theme.typography.pxToRem(12),\n lineHeight: 1.5\n },\n\n /* Styles applied to the `icon` and `label`'s wrapper element. */\n wrapper: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '100%',\n flexDirection: 'column'\n }\n };\n};\nvar Tab = React.forwardRef(function Tab(props, ref) {\n var classes = props.classes,\n className = props.className,\n _props$disabled = props.disabled,\n disabled = _props$disabled === void 0 ? false : _props$disabled,\n _props$disableFocusRi = props.disableFocusRipple,\n disableFocusRipple = _props$disableFocusRi === void 0 ? false : _props$disableFocusRi,\n fullWidth = props.fullWidth,\n icon = props.icon,\n indicator = props.indicator,\n label = props.label,\n onChange = props.onChange,\n onClick = props.onClick,\n selected = props.selected,\n _props$textColor = props.textColor,\n textColor = _props$textColor === void 0 ? 'inherit' : _props$textColor,\n value = props.value,\n _props$wrapped = props.wrapped,\n wrapped = _props$wrapped === void 0 ? false : _props$wrapped,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"disabled\", \"disableFocusRipple\", \"fullWidth\", \"icon\", \"indicator\", \"label\", \"onChange\", \"onClick\", \"selected\", \"textColor\", \"value\", \"wrapped\"]);\n\n var handleChange = function handleChange(event) {\n if (onChange) {\n onChange(event, value);\n }\n\n if (onClick) {\n onClick(event);\n }\n };\n\n return React.createElement(ButtonBase, _extends({\n focusRipple: !disableFocusRipple,\n className: clsx(classes.root, classes[\"textColor\".concat(capitalize(textColor))], className, disabled && classes.disabled, selected && classes.selected, label && icon && classes.labelIcon, fullWidth && classes.fullWidth, wrapped && classes.wrapped),\n ref: ref,\n role: \"tab\",\n \"aria-selected\": selected,\n disabled: disabled,\n onClick: handleChange\n }, other), React.createElement(\"span\", {\n className: classes.wrapper\n }, icon, label), indicator);\n});\nprocess.env.NODE_ENV !== \"production\" ? Tab.propTypes = {\n /**\n * This prop isn't supported.\n * Use the `component` prop if you need to change the children structure.\n */\n children: unsupportedProp,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * If `true`, the tab will be disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * If `true`, the keyboard focus ripple will be disabled.\n * `disableRipple` must also be true.\n */\n disableFocusRipple: PropTypes.bool,\n\n /**\n * If `true`, the ripple effect will be disabled.\n */\n disableRipple: PropTypes.bool,\n\n /**\n * @ignore\n */\n fullWidth: PropTypes.bool,\n\n /**\n * The icon element.\n */\n icon: PropTypes.node,\n\n /**\n * @ignore\n * For server-side rendering consideration, we let the selected tab\n * render the indicator.\n */\n indicator: PropTypes.node,\n\n /**\n * The label element.\n */\n label: PropTypes.node,\n\n /**\n * @ignore\n */\n onChange: PropTypes.func,\n\n /**\n * @ignore\n */\n onClick: PropTypes.func,\n\n /**\n * @ignore\n */\n selected: PropTypes.bool,\n\n /**\n * @ignore\n */\n textColor: PropTypes.oneOf(['secondary', 'primary', 'inherit']),\n\n /**\n * You can provide your own value. Otherwise, we fallback to the child position index.\n */\n value: PropTypes.any,\n\n /**\n * Tab labels appear in a single row.\n * They can use a second line if needed.\n */\n wrapped: PropTypes.bool\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiTab'\n})(Tab);","import _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\n// A grid component using the following libs as inspiration.\n//\n// For the implementation:\n// - https://getbootstrap.com/docs/4.3/layout/grid/\n// - https://github.com/kristoferjoseph/flexboxgrid/blob/master/src/css/flexboxgrid.css\n// - https://github.com/roylee0704/react-flexbox-grid\n// - https://material.angularjs.org/latest/layout/introduction\n//\n// Follow this flexbox Guide to better understand the underlying model:\n// - https://css-tricks.com/snippets/css/a-guide-to-flexbox/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport { keys as breakpointKeys } from '../styles/createBreakpoints';\nimport requirePropFactory from '../utils/requirePropFactory';\nvar SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nvar GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];\n\nfunction generateGrid(globalStyles, theme, breakpoint) {\n var styles = {};\n GRID_SIZES.forEach(function (size) {\n var key = \"grid-\".concat(breakpoint, \"-\").concat(size);\n\n if (size === true) {\n // For the auto layouting\n styles[key] = {\n flexBasis: 0,\n flexGrow: 1,\n maxWidth: '100%'\n };\n return;\n }\n\n if (size === 'auto') {\n styles[key] = {\n flexBasis: 'auto',\n flexGrow: 0,\n maxWidth: 'none'\n };\n return;\n } // Keep 7 significant numbers.\n\n\n var width = \"\".concat(Math.round(size / 12 * 10e7) / 10e5, \"%\"); // Close to the bootstrap implementation:\n // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41\n\n styles[key] = {\n flexBasis: width,\n flexGrow: 0,\n maxWidth: width\n };\n }); // No need for a media query for the first size.\n\n if (breakpoint === 'xs') {\n _extends(globalStyles, styles);\n } else {\n globalStyles[theme.breakpoints.up(breakpoint)] = styles;\n }\n}\n\nfunction generateGutter(theme, breakpoint) {\n var styles = {};\n SPACINGS.forEach(function (spacing) {\n var themeSpacing = theme.spacing(spacing);\n\n if (themeSpacing === 0) {\n return;\n }\n\n styles[\"spacing-\".concat(breakpoint, \"-\").concat(spacing)] = {\n margin: -themeSpacing / 2,\n width: \"calc(100% + \".concat(themeSpacing, \"px)\"),\n '& > $item': {\n padding: themeSpacing / 2\n }\n };\n });\n return styles;\n} // Default CSS values\n// flex: '0 1 auto',\n// flexDirection: 'row',\n// alignItems: 'flex-start',\n// flexWrap: 'nowrap',\n// justifyContent: 'flex-start',\n\n\nexport var styles = function styles(theme) {\n return _extends({\n /* Styles applied to the root element */\n root: {},\n\n /* Styles applied to the root element if `container={true}`. */\n container: {\n boxSizing: 'border-box',\n display: 'flex',\n flexWrap: 'wrap',\n width: '100%'\n },\n\n /* Styles applied to the root element if `item={true}`. */\n item: {\n boxSizing: 'border-box',\n margin: '0' // For instance, it's useful when used with a `figure` element.\n\n },\n\n /* Styles applied to the root element if `zeroMinWidth={true}`. */\n zeroMinWidth: {\n minWidth: 0\n },\n\n /* Styles applied to the root element if `direction=\"column\"`. */\n 'direction-xs-column': {\n flexDirection: 'column'\n },\n\n /* Styles applied to the root element if `direction=\"column-reverse\"`. */\n 'direction-xs-column-reverse': {\n flexDirection: 'column-reverse'\n },\n\n /* Styles applied to the root element if `direction=\"rwo-reverse\"`. */\n 'direction-xs-row-reverse': {\n flexDirection: 'row-reverse'\n },\n\n /* Styles applied to the root element if `wrap=\"nowrap\"`. */\n 'wrap-xs-nowrap': {\n flexWrap: 'nowrap'\n },\n\n /* Styles applied to the root element if `wrap=\"reverse\"`. */\n 'wrap-xs-wrap-reverse': {\n flexWrap: 'wrap-reverse'\n },\n\n /* Styles applied to the root element if `alignItems=\"center\"`. */\n 'align-items-xs-center': {\n alignItems: 'center'\n },\n\n /* Styles applied to the root element if `alignItems=\"flex-start\"`. */\n 'align-items-xs-flex-start': {\n alignItems: 'flex-start'\n },\n\n /* Styles applied to the root element if `alignItems=\"flex-end\"`. */\n 'align-items-xs-flex-end': {\n alignItems: 'flex-end'\n },\n\n /* Styles applied to the root element if `alignItems=\"baseline\"`. */\n 'align-items-xs-baseline': {\n alignItems: 'baseline'\n },\n\n /* Styles applied to the root element if `alignContent=\"center\"`. */\n 'align-content-xs-center': {\n alignContent: 'center'\n },\n\n /* Styles applied to the root element if `alignContent=\"flex-start\"`. */\n 'align-content-xs-flex-start': {\n alignContent: 'flex-start'\n },\n\n /* Styles applied to the root element if `alignContent=\"flex-end\"`. */\n 'align-content-xs-flex-end': {\n alignContent: 'flex-end'\n },\n\n /* Styles applied to the root element if `alignContent=\"space-between\"`. */\n 'align-content-xs-space-between': {\n alignContent: 'space-between'\n },\n\n /* Styles applied to the root element if `alignContent=\"space-around\"`. */\n 'align-content-xs-space-around': {\n alignContent: 'space-around'\n },\n\n /* Styles applied to the root element if `justify=\"center\"`. */\n 'justify-xs-center': {\n justifyContent: 'center'\n },\n\n /* Styles applied to the root element if `justify=\"flex-end\"`. */\n 'justify-xs-flex-end': {\n justifyContent: 'flex-end'\n },\n\n /* Styles applied to the root element if `justify=\"space-between\"`. */\n 'justify-xs-space-between': {\n justifyContent: 'space-between'\n },\n\n /* Styles applied to the root element if `justify=\"space-around\"`. */\n 'justify-xs-space-around': {\n justifyContent: 'space-around'\n },\n\n /* Styles applied to the root element if `justify=\"space-evenly\"`. */\n 'justify-xs-space-evenly': {\n justifyContent: 'space-evenly'\n }\n }, generateGutter(theme, 'xs'), {}, breakpointKeys.reduce(function (accumulator, key) {\n // Use side effect over immutability for better performance.\n generateGrid(accumulator, theme, key);\n return accumulator;\n }, {}));\n};\nvar Grid = React.forwardRef(function (props, ref) {\n var _props$alignContent = props.alignContent,\n alignContent = _props$alignContent === void 0 ? 'stretch' : _props$alignContent,\n _props$alignItems = props.alignItems,\n alignItems = _props$alignItems === void 0 ? 'stretch' : _props$alignItems,\n classes = props.classes,\n classNameProp = props.className,\n _props$component = props.component,\n Component = _props$component === void 0 ? 'div' : _props$component,\n _props$container = props.container,\n container = _props$container === void 0 ? false : _props$container,\n _props$direction = props.direction,\n direction = _props$direction === void 0 ? 'row' : _props$direction,\n _props$item = props.item,\n item = _props$item === void 0 ? false : _props$item,\n _props$justify = props.justify,\n justify = _props$justify === void 0 ? 'flex-start' : _props$justify,\n _props$lg = props.lg,\n lg = _props$lg === void 0 ? false : _props$lg,\n _props$md = props.md,\n md = _props$md === void 0 ? false : _props$md,\n _props$sm = props.sm,\n sm = _props$sm === void 0 ? false : _props$sm,\n _props$spacing = props.spacing,\n spacing = _props$spacing === void 0 ? 0 : _props$spacing,\n _props$wrap = props.wrap,\n wrap = _props$wrap === void 0 ? 'wrap' : _props$wrap,\n _props$xl = props.xl,\n xl = _props$xl === void 0 ? false : _props$xl,\n _props$xs = props.xs,\n xs = _props$xs === void 0 ? false : _props$xs,\n _props$zeroMinWidth = props.zeroMinWidth,\n zeroMinWidth = _props$zeroMinWidth === void 0 ? false : _props$zeroMinWidth,\n other = _objectWithoutProperties(props, [\"alignContent\", \"alignItems\", \"classes\", \"className\", \"component\", \"container\", \"direction\", \"item\", \"justify\", \"lg\", \"md\", \"sm\", \"spacing\", \"wrap\", \"xl\", \"xs\", \"zeroMinWidth\"]);\n\n var className = clsx(classes.root, classNameProp, container && [classes.container, spacing !== 0 && classes[\"spacing-xs-\".concat(String(spacing))]], item && classes.item, zeroMinWidth && classes.zeroMinWidth, direction !== 'row' && classes[\"direction-xs-\".concat(String(direction))], wrap !== 'wrap' && classes[\"wrap-xs-\".concat(String(wrap))], alignItems !== 'stretch' && classes[\"align-items-xs-\".concat(String(alignItems))], alignContent !== 'stretch' && classes[\"align-content-xs-\".concat(String(alignContent))], justify !== 'flex-start' && classes[\"justify-xs-\".concat(String(justify))], xs !== false && classes[\"grid-xs-\".concat(String(xs))], sm !== false && classes[\"grid-sm-\".concat(String(sm))], md !== false && classes[\"grid-md-\".concat(String(md))], lg !== false && classes[\"grid-lg-\".concat(String(lg))], xl !== false && classes[\"grid-xl-\".concat(String(xl))]);\n return React.createElement(Component, _extends({\n className: className,\n ref: ref\n }, other));\n});\n\nif (process.env.NODE_ENV !== 'production') {\n // can't use named function expression since the function body references `Grid`\n // which would point to the render function instead of the actual component\n Grid.displayName = 'ForwardRef(Grid)';\n}\n\nprocess.env.NODE_ENV !== \"production\" ? Grid.propTypes = {\n /**\n * Defines the `align-content` style property.\n * It's applied for all screen sizes.\n */\n alignContent: PropTypes.oneOf(['stretch', 'center', 'flex-start', 'flex-end', 'space-between', 'space-around']),\n\n /**\n * Defines the `align-items` style property.\n * It's applied for all screen sizes.\n */\n alignItems: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'stretch', 'baseline']),\n\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a DOM element or a component.\n */\n component: PropTypes.elementType,\n\n /**\n * If `true`, the component will have the flex *container* behavior.\n * You should be wrapping *items* with a *container*.\n */\n container: PropTypes.bool,\n\n /**\n * Defines the `flex-direction` style property.\n * It is applied for all screen sizes.\n */\n direction: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),\n\n /**\n * If `true`, the component will have the flex *item* behavior.\n * You should be wrapping *items* with a *container*.\n */\n item: PropTypes.bool,\n\n /**\n * Defines the `justify-content` style property.\n * It is applied for all screen sizes.\n */\n justify: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly']),\n\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `lg` breakpoint and wider screens if not overridden.\n */\n lg: PropTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),\n\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `md` breakpoint and wider screens if not overridden.\n */\n md: PropTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),\n\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `sm` breakpoint and wider screens if not overridden.\n */\n sm: PropTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),\n\n /**\n * Defines the space between the type `item` component.\n * It can only be used on a type `container` component.\n */\n spacing: PropTypes.oneOf(SPACINGS),\n\n /**\n * Defines the `flex-wrap` style property.\n * It's applied for all screen sizes.\n */\n wrap: PropTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse']),\n\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `xl` breakpoint and wider screens.\n */\n xl: PropTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),\n\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for all the screen sizes with the lowest priority.\n */\n xs: PropTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),\n\n /**\n * If `true`, it sets `min-width: 0` on the item.\n * Refer to the limitations section of the documentation to better understand the use case.\n */\n zeroMinWidth: PropTypes.bool\n} : void 0;\nvar StyledGrid = withStyles(styles, {\n name: 'MuiGrid'\n})(Grid);\n\nif (process.env.NODE_ENV !== 'production') {\n var requireProp = requirePropFactory('Grid');\n StyledGrid.propTypes = _extends({}, StyledGrid.propTypes, {\n alignContent: requireProp('container'),\n alignItems: requireProp('container'),\n direction: requireProp('container'),\n justify: requireProp('container'),\n lg: requireProp('item'),\n md: requireProp('item'),\n sm: requireProp('item'),\n spacing: requireProp('container'),\n wrap: requireProp('container'),\n xs: requireProp('item'),\n zeroMinWidth: requireProp('item')\n });\n}\n\nexport default StyledGrid;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { useFormControl } from '../FormControl';\nimport withStyles from '../styles/withStyles';\nimport Typography from '../Typography';\nimport { capitalize } from '../utils/helpers';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n display: 'inline-flex',\n alignItems: 'center',\n cursor: 'pointer',\n // For correct alignment with the text.\n verticalAlign: 'middle',\n // Remove grey highlight\n WebkitTapHighlightColor: 'transparent',\n marginLeft: -11,\n marginRight: 16,\n // used for row presentation of radio/checkbox\n '&$disabled': {\n cursor: 'default'\n }\n },\n\n /* Styles applied to the root element if `labelPlacement=\"start\"`. */\n labelPlacementStart: {\n flexDirection: 'row-reverse',\n marginLeft: 16,\n // used for row presentation of radio/checkbox\n marginRight: -11\n },\n\n /* Styles applied to the root element if `labelPlacement=\"top\"`. */\n labelPlacementTop: {\n flexDirection: 'column-reverse',\n marginLeft: 16\n },\n\n /* Styles applied to the root element if `labelPlacement=\"bottom\"`. */\n labelPlacementBottom: {\n flexDirection: 'column',\n marginLeft: 16\n },\n\n /* Pseudo-class applied to the root element if `disabled={true}`. */\n disabled: {},\n\n /* Styles applied to the label's Typography component. */\n label: {\n '&$disabled': {\n color: theme.palette.text.disabled\n }\n }\n };\n};\n/**\n * Drop in replacement of the `Radio`, `Switch` and `Checkbox` component.\n * Use this component if you want to display an extra label.\n */\n\nvar FormControlLabel = React.forwardRef(function FormControlLabel(props, ref) {\n var checked = props.checked,\n classes = props.classes,\n classNameProp = props.className,\n control = props.control,\n disabledProp = props.disabled,\n inputRef = props.inputRef,\n label = props.label,\n _props$labelPlacement = props.labelPlacement,\n labelPlacement = _props$labelPlacement === void 0 ? 'end' : _props$labelPlacement,\n name = props.name,\n onChange = props.onChange,\n value = props.value,\n other = _objectWithoutProperties(props, [\"checked\", \"classes\", \"className\", \"control\", \"disabled\", \"inputRef\", \"label\", \"labelPlacement\", \"name\", \"onChange\", \"value\"]);\n\n var muiFormControl = useFormControl();\n var disabled = disabledProp;\n\n if (typeof disabled === 'undefined' && typeof control.props.disabled !== 'undefined') {\n disabled = control.props.disabled;\n }\n\n if (typeof disabled === 'undefined' && muiFormControl) {\n disabled = muiFormControl.disabled;\n }\n\n var controlProps = {\n disabled: disabled\n };\n ['checked', 'name', 'onChange', 'value', 'inputRef'].forEach(function (key) {\n if (typeof control.props[key] === 'undefined' && typeof props[key] !== 'undefined') {\n controlProps[key] = props[key];\n }\n });\n return React.createElement(\"label\", _extends({\n className: clsx(classes.root, classNameProp, labelPlacement !== 'end' && classes[\"labelPlacement\".concat(capitalize(labelPlacement))], disabled && classes.disabled),\n ref: ref\n }, other), React.cloneElement(control, controlProps), React.createElement(Typography, {\n component: \"span\",\n className: clsx(classes.label, disabled && classes.disabled)\n }, label));\n});\nprocess.env.NODE_ENV !== \"production\" ? FormControlLabel.propTypes = {\n /**\n * If `true`, the component appears selected.\n */\n checked: PropTypes.bool,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`.\n */\n control: PropTypes.element,\n\n /**\n * If `true`, the control will be disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * This prop can be used to pass a ref callback to the `input` element.\n */\n inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n\n /**\n * The text to be used in an enclosing label element.\n */\n label: PropTypes.node,\n\n /**\n * The position of the label.\n */\n labelPlacement: PropTypes.oneOf(['end', 'start', 'top', 'bottom']),\n\n /*\n * @ignore\n */\n name: PropTypes.string,\n\n /**\n * Callback fired when the state is changed.\n *\n * @param {object} event The event source of the callback.\n * You can pull out the new value by accessing `event.target.checked`.\n * @param {boolean} checked The `checked` value of the switch\n */\n onChange: PropTypes.func,\n\n /**\n * The value of the component.\n */\n value: PropTypes.any\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiFormControlLabel'\n})(FormControlLabel);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport Paper from '../Paper';\nimport StepConnector from '../StepConnector';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n display: 'flex',\n padding: 24\n },\n\n /* Styles applied to the root element if `orientation=\"horizontal\"`. */\n horizontal: {\n flexDirection: 'row',\n alignItems: 'center'\n },\n\n /* Styles applied to the root element if `orientation=\"vertical\"`. */\n vertical: {\n flexDirection: 'column'\n },\n\n /* Styles applied to the root element if `alternativeLabel={true}`. */\n alternativeLabel: {\n alignItems: 'flex-start'\n }\n};\nvar defaultConnector = React.createElement(StepConnector, null);\nvar Stepper = React.forwardRef(function Stepper(props, ref) {\n var _props$activeStep = props.activeStep,\n activeStep = _props$activeStep === void 0 ? 0 : _props$activeStep,\n _props$alternativeLab = props.alternativeLabel,\n alternativeLabel = _props$alternativeLab === void 0 ? false : _props$alternativeLab,\n children = props.children,\n classes = props.classes,\n classNameProp = props.className,\n _props$connector = props.connector,\n connectorProp = _props$connector === void 0 ? defaultConnector : _props$connector,\n _props$nonLinear = props.nonLinear,\n nonLinear = _props$nonLinear === void 0 ? false : _props$nonLinear,\n _props$orientation = props.orientation,\n orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,\n other = _objectWithoutProperties(props, [\"activeStep\", \"alternativeLabel\", \"children\", \"classes\", \"className\", \"connector\", \"nonLinear\", \"orientation\"]);\n\n var className = clsx(classes.root, classes[orientation], classNameProp, alternativeLabel && classes.alternativeLabel);\n var connector = React.isValidElement(connectorProp) ? React.cloneElement(connectorProp, {\n orientation: orientation\n }) : null;\n var childrenArray = React.Children.toArray(children);\n var steps = childrenArray.map(function (step, index) {\n var controlProps = {\n alternativeLabel: alternativeLabel,\n connector: connectorProp,\n last: index + 1 === childrenArray.length,\n orientation: orientation\n };\n var state = {\n index: index,\n active: false,\n completed: false,\n disabled: false\n };\n\n if (activeStep === index) {\n state.active = true;\n } else if (!nonLinear && activeStep > index) {\n state.completed = true;\n } else if (!nonLinear && activeStep < index) {\n state.disabled = true;\n }\n\n return [!alternativeLabel && connector && index !== 0 && React.cloneElement(connector, _extends({\n key: index\n }, state)), React.cloneElement(step, _extends({}, controlProps, {}, state, {}, step.props))];\n });\n return React.createElement(Paper, _extends({\n square: true,\n elevation: 0,\n className: className,\n ref: ref\n }, other), steps);\n});\nprocess.env.NODE_ENV !== \"production\" ? Stepper.propTypes = {\n /**\n * Set the active step (zero based index).\n */\n activeStep: PropTypes.number,\n\n /**\n * If set to 'true' and orientation is horizontal,\n * then the step label will be positioned under the icon.\n */\n alternativeLabel: PropTypes.bool,\n\n /**\n * Two or more `` components.\n */\n children: PropTypes.node.isRequired,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * An element to be placed between each step.\n */\n connector: PropTypes.element,\n\n /**\n * If set the `Stepper` will not assist in controlling steps for linear flow.\n */\n nonLinear: PropTypes.bool,\n\n /**\n * The stepper orientation (layout flow direction).\n */\n orientation: PropTypes.oneOf(['horizontal', 'vertical'])\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiStepper'\n})(Stepper);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _toConsumableArray from \"@babel/runtime/helpers/esm/toConsumableArray\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport Paper from '../Paper';\nimport { capitalize } from '../utils/helpers';\nimport LinearProgress from '../LinearProgress';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n background: theme.palette.background.default,\n padding: 8\n },\n\n /* Styles applied to the root element if `position=\"bottom\"`. */\n positionBottom: {\n position: 'fixed',\n bottom: 0,\n left: 0,\n right: 0,\n zIndex: theme.zIndex.mobileStepper\n },\n\n /* Styles applied to the root element if `position=\"top\"`. */\n positionTop: {\n position: 'fixed',\n top: 0,\n left: 0,\n right: 0,\n zIndex: theme.zIndex.mobileStepper\n },\n\n /* Styles applied to the root element if `position=\"static\"`. */\n positionStatic: {},\n\n /* Styles applied to the dots container if `variant=\"dots\"`. */\n dots: {\n display: 'flex',\n flexDirection: 'row'\n },\n\n /* Styles applied to each dot if `variant=\"dots\"`. */\n dot: {\n backgroundColor: theme.palette.action.disabled,\n borderRadius: '50%',\n width: 8,\n height: 8,\n margin: '0 2px'\n },\n\n /* Styles applied to a dot if `variant=\"dots\"` and this is the active step. */\n dotActive: {\n backgroundColor: theme.palette.primary.main\n },\n\n /* Styles applied to the Linear Progress component if `variant=\"progress\"`. */\n progress: {\n width: '50%'\n }\n };\n};\nvar MobileStepper = React.forwardRef(function MobileStepper(props, ref) {\n var _props$activeStep = props.activeStep,\n activeStep = _props$activeStep === void 0 ? 0 : _props$activeStep,\n backButton = props.backButton,\n classes = props.classes,\n className = props.className,\n LinearProgressProps = props.LinearProgressProps,\n nextButton = props.nextButton,\n _props$position = props.position,\n position = _props$position === void 0 ? 'bottom' : _props$position,\n steps = props.steps,\n _props$variant = props.variant,\n variant = _props$variant === void 0 ? 'dots' : _props$variant,\n other = _objectWithoutProperties(props, [\"activeStep\", \"backButton\", \"classes\", \"className\", \"LinearProgressProps\", \"nextButton\", \"position\", \"steps\", \"variant\"]);\n\n return React.createElement(Paper, _extends({\n square: true,\n elevation: 0,\n className: clsx(classes.root, classes[\"position\".concat(capitalize(position))], className),\n ref: ref\n }, other), backButton, variant === 'text' && React.createElement(React.Fragment, null, activeStep + 1, \" / \", steps), variant === 'dots' && React.createElement(\"div\", {\n className: classes.dots\n }, _toConsumableArray(new Array(steps)).map(function (_, index) {\n return React.createElement(\"div\", {\n key: index,\n className: clsx(classes.dot, index === activeStep && classes.dotActive)\n });\n })), variant === 'progress' && React.createElement(LinearProgress, _extends({\n className: classes.progress,\n variant: \"determinate\",\n value: Math.ceil(activeStep / (steps - 1) * 100)\n }, LinearProgressProps)), nextButton);\n});\nprocess.env.NODE_ENV !== \"production\" ? MobileStepper.propTypes = {\n /**\n * Set the active step (zero based index).\n * Defines which dot is highlighted when the variant is 'dots'.\n */\n activeStep: PropTypes.number,\n\n /**\n * A back button element. For instance, it can be a `Button` or an `IconButton`.\n */\n backButton: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * Props applied to the `LinearProgress` element.\n */\n LinearProgressProps: PropTypes.object,\n\n /**\n * A next button element. For instance, it can be a `Button` or an `IconButton`.\n */\n nextButton: PropTypes.node,\n\n /**\n * Set the positioning type.\n */\n position: PropTypes.oneOf(['bottom', 'top', 'static']),\n\n /**\n * The total steps.\n */\n steps: PropTypes.number.isRequired,\n\n /**\n * The variant to use.\n */\n variant: PropTypes.oneOf(['text', 'dots', 'progress'])\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiMobileStepper'\n})(MobileStepper);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport warning from 'warning';\nimport withStyles from '../styles/withStyles';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {},\n\n /* Styles applied to the root element if `orientation=\"horizontal\"`. */\n horizontal: {\n paddingLeft: 8,\n paddingRight: 8\n },\n\n /* Styles applied to the root element if `orientation=\"vertical\"`. */\n vertical: {},\n\n /* Styles applied to the root element if `alternativeLabel={true}`. */\n alternativeLabel: {\n flex: 1,\n position: 'relative'\n },\n\n /* Pseudo-class applied to the root element if `completed={true}`. */\n completed: {}\n};\nvar Step = React.forwardRef(function Step(props, ref) {\n var _props$active = props.active,\n active = _props$active === void 0 ? false : _props$active,\n alternativeLabel = props.alternativeLabel,\n children = props.children,\n classes = props.classes,\n classNameProp = props.className,\n _props$completed = props.completed,\n completed = _props$completed === void 0 ? false : _props$completed,\n connector = props.connector,\n _props$disabled = props.disabled,\n disabled = _props$disabled === void 0 ? false : _props$disabled,\n index = props.index,\n last = props.last,\n orientation = props.orientation,\n other = _objectWithoutProperties(props, [\"active\", \"alternativeLabel\", \"children\", \"classes\", \"className\", \"completed\", \"connector\", \"disabled\", \"index\", \"last\", \"orientation\"]);\n\n var className = clsx(classes.root, classes[orientation], classNameProp, alternativeLabel && classes.alternativeLabel, completed && classes.completed);\n return React.createElement(\"div\", _extends({\n className: className,\n ref: ref\n }, other), connector && alternativeLabel && index !== 0 && React.cloneElement(connector, {\n orientation: orientation,\n alternativeLabel: alternativeLabel,\n index: index,\n active: active,\n completed: completed,\n disabled: disabled\n }), React.Children.map(children, function (child) {\n if (!React.isValidElement(child)) {\n return null;\n }\n\n process.env.NODE_ENV !== \"production\" ? warning(child.type !== React.Fragment, [\"Material-UI: the Step component doesn't accept a Fragment as a child.\", 'Consider providing an array instead.'].join('\\n')) : void 0;\n return React.cloneElement(child, _extends({\n active: active,\n alternativeLabel: alternativeLabel,\n completed: completed,\n disabled: disabled,\n last: last,\n icon: index + 1,\n orientation: orientation\n }, child.props));\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? Step.propTypes = {\n /**\n * Sets the step as active. Is passed to child components.\n */\n active: PropTypes.bool,\n\n /**\n * @ignore\n * Set internally by Stepper when it's supplied with the alternativeLabel property.\n */\n alternativeLabel: PropTypes.bool,\n\n /**\n * Should be `Step` sub-components such as `StepLabel`, `StepContent`.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * Mark the step as completed. Is passed to child components.\n */\n completed: PropTypes.bool,\n\n /**\n * @ignore\n * Passed down from Stepper if alternativeLabel is also set.\n */\n connector: PropTypes.element,\n\n /**\n * Mark the step as disabled, will also disable the button if\n * `StepButton` is a child of `Step`. Is passed to child components.\n */\n disabled: PropTypes.bool,\n\n /**\n * @ignore\n * Used internally for numbering.\n */\n index: PropTypes.number,\n\n /**\n * @ignore\n */\n last: PropTypes.bool,\n\n /**\n * @ignore\n */\n orientation: PropTypes.oneOf(['horizontal', 'vertical'])\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiStep'\n})(Step);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport ButtonBase from '../ButtonBase';\nimport StepLabel from '../StepLabel';\nimport { isMuiElement } from '../utils/reactHelpers';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n width: '100%',\n padding: '24px 16px',\n margin: '-24px -16px',\n boxSizing: 'content-box'\n },\n\n /* Styles applied to the root element if `orientation=\"horizontal\"`. */\n horizontal: {},\n\n /* Styles applied to the root element if `orientation=\"vertical\"`. */\n vertical: {\n justifyContent: 'flex-start'\n },\n\n /* Styles applied to the `ButtonBase` touch-ripple. */\n touchRipple: {\n color: 'rgba(0, 0, 0, 0.3)'\n }\n};\nvar StepButton = React.forwardRef(function StepButton(props, ref) {\n var active = props.active,\n alternativeLabel = props.alternativeLabel,\n children = props.children,\n classes = props.classes,\n classNameProp = props.className,\n completed = props.completed,\n disabled = props.disabled,\n icon = props.icon,\n last = props.last,\n optional = props.optional,\n orientation = props.orientation,\n other = _objectWithoutProperties(props, [\"active\", \"alternativeLabel\", \"children\", \"classes\", \"className\", \"completed\", \"disabled\", \"icon\", \"last\", \"optional\", \"orientation\"]);\n\n var childProps = {\n active: active,\n alternativeLabel: alternativeLabel,\n completed: completed,\n disabled: disabled,\n icon: icon,\n optional: optional,\n orientation: orientation\n };\n var child = isMuiElement(children, ['StepLabel']) ? React.cloneElement(children, childProps) : React.createElement(StepLabel, childProps, children);\n return React.createElement(ButtonBase, _extends({\n disabled: disabled,\n TouchRippleProps: {\n className: classes.touchRipple\n },\n className: clsx(classes.root, classes[orientation], classNameProp),\n ref: ref\n }, other), child);\n});\nprocess.env.NODE_ENV !== \"production\" ? StepButton.propTypes = {\n /**\n * @ignore\n * Passed in via `Step` - passed through to `StepLabel`.\n */\n active: PropTypes.bool,\n\n /**\n * @ignore\n * Set internally by Stepper when it's supplied with the alternativeLabel property.\n */\n alternativeLabel: PropTypes.bool,\n\n /**\n * Can be a `StepLabel` or a node to place inside `StepLabel` as children.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * @ignore\n * Sets completed styling. Is passed to StepLabel.\n */\n completed: PropTypes.bool,\n\n /**\n * @ignore\n * Disables the button and sets disabled styling. Is passed to StepLabel.\n */\n disabled: PropTypes.bool,\n\n /**\n * The icon displayed by the step label.\n */\n icon: PropTypes.node,\n\n /**\n * @ignore\n */\n last: PropTypes.bool,\n\n /**\n * The optional node to display.\n */\n optional: PropTypes.node,\n\n /**\n * @ignore\n */\n orientation: PropTypes.oneOf(['horizontal', 'vertical'])\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiStepButton'\n})(StepButton);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\nimport clsx from 'clsx';\nimport Collapse from '../Collapse';\nimport withStyles from '../styles/withStyles';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n marginTop: 8,\n marginLeft: 12,\n // half icon\n paddingLeft: 8 + 12,\n // margin + half icon\n paddingRight: 8,\n borderLeft: \"1px solid \".concat(theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600])\n },\n\n /* Styles applied to the root element if `last={true}` (controlled by `Step`). */\n last: {\n borderLeft: 'none'\n },\n\n /* Styles applied to the Transition component. */\n transition: {}\n };\n};\nvar StepContent = React.forwardRef(function StepContent(props, ref) {\n var active = props.active,\n alternativeLabel = props.alternativeLabel,\n children = props.children,\n classes = props.classes,\n className = props.className,\n completed = props.completed,\n last = props.last,\n optional = props.optional,\n orientation = props.orientation,\n _props$TransitionComp = props.TransitionComponent,\n TransitionComponent = _props$TransitionComp === void 0 ? Collapse : _props$TransitionComp,\n _props$transitionDura = props.transitionDuration,\n transitionDurationProp = _props$transitionDura === void 0 ? 'auto' : _props$transitionDura,\n TransitionProps = props.TransitionProps,\n other = _objectWithoutProperties(props, [\"active\", \"alternativeLabel\", \"children\", \"classes\", \"className\", \"completed\", \"last\", \"optional\", \"orientation\", \"TransitionComponent\", \"transitionDuration\", \"TransitionProps\"]);\n\n process.env.NODE_ENV !== \"production\" ? warning(orientation === 'vertical', 'Material-UI: is only designed for use with the vertical stepper.') : void 0;\n var transitionDuration = transitionDurationProp;\n\n if (transitionDurationProp === 'auto' && !TransitionComponent.muiSupportAuto) {\n transitionDuration = undefined;\n }\n\n return React.createElement(\"div\", _extends({\n className: clsx(classes.root, className, last && classes.last),\n ref: ref\n }, other), React.createElement(TransitionComponent, _extends({\n in: active,\n className: classes.transition,\n timeout: transitionDuration,\n unmountOnExit: true\n }, TransitionProps), children));\n});\nprocess.env.NODE_ENV !== \"production\" ? StepContent.propTypes = {\n /**\n * @ignore\n * Expands the content.\n */\n active: PropTypes.bool,\n\n /**\n * @ignore\n * Set internally by Step when it's supplied with the alternativeLabel prop.\n */\n alternativeLabel: PropTypes.bool,\n\n /**\n * Step content.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * @ignore\n */\n completed: PropTypes.bool,\n\n /**\n * @ignore\n */\n last: PropTypes.bool,\n\n /**\n * @ignore\n * Set internally by Step when it's supplied with the optional prop.\n */\n optional: PropTypes.bool,\n\n /**\n * @ignore\n */\n orientation: PropTypes.oneOf(['horizontal', 'vertical']),\n\n /**\n * The component used for the transition.\n */\n TransitionComponent: PropTypes.elementType,\n\n /**\n * Adjust the duration of the content expand transition.\n * Passed as a prop to the transition component.\n *\n * Set to 'auto' to automatically calculate transition time based on height.\n */\n transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({\n enter: PropTypes.number,\n exit: PropTypes.number\n }), PropTypes.oneOf(['auto'])]),\n\n /**\n * Props applied to the `Transition` element.\n */\n TransitionProps: PropTypes.object\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiStepContent'\n})(StepContent);","var camel2hyphen = function (str) {\n return str\n .replace(/[A-Z]/g, function (match) {\n return '-' + match.toLowerCase();\n })\n .toLowerCase();\n};\n\nmodule.exports = camel2hyphen;","// Based on https://github.com/react-bootstrap/dom-helpers/blob/master/src/util/inDOM.js\r\nvar inDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);\r\nvar cachedType;\r\nexport function _setScrollType(type) {\r\n cachedType = type;\r\n}\r\n// Based on the jquery plugin https://github.com/othree/jquery.rtl-scroll-type\r\nexport function detectScrollType() {\r\n if (cachedType) {\r\n return cachedType;\r\n }\r\n if (!inDOM || !window.document.body) {\r\n return 'indeterminate';\r\n }\r\n var dummy = window.document.createElement('div');\r\n dummy.appendChild(document.createTextNode('ABCD'));\r\n dummy.dir = 'rtl';\r\n dummy.style.fontSize = '14px';\r\n dummy.style.width = '4px';\r\n dummy.style.height = '1px';\r\n dummy.style.position = 'absolute';\r\n dummy.style.top = '-1000px';\r\n dummy.style.overflow = 'scroll';\r\n document.body.appendChild(dummy);\r\n cachedType = 'reverse';\r\n if (dummy.scrollLeft > 0) {\r\n cachedType = 'default';\r\n }\r\n else {\r\n dummy.scrollLeft = 1;\r\n if (dummy.scrollLeft === 0) {\r\n cachedType = 'negative';\r\n }\r\n }\r\n document.body.removeChild(dummy);\r\n return cachedType;\r\n}\r\n// Based on https://stackoverflow.com/a/24394376\r\nexport function getNormalizedScrollLeft(element, direction) {\r\n var scrollLeft = element.scrollLeft;\r\n // Perform the calculations only when direction is rtl to avoid messing up the ltr bahavior\r\n if (direction !== 'rtl') {\r\n return scrollLeft;\r\n }\r\n var type = detectScrollType();\r\n if (type === 'indeterminate') {\r\n return Number.NaN;\r\n }\r\n switch (type) {\r\n case 'negative':\r\n return element.scrollWidth - element.clientWidth + scrollLeft;\r\n case 'reverse':\r\n return element.scrollWidth - element.clientWidth - scrollLeft;\r\n }\r\n return scrollLeft;\r\n}\r\nexport function setNormalizedScrollLeft(element, scrollLeft, direction) {\r\n // Perform the calculations only when direction is rtl to avoid messing up the ltr bahavior\r\n if (direction !== 'rtl') {\r\n element.scrollLeft = scrollLeft;\r\n return;\r\n }\r\n var type = detectScrollType();\r\n if (type === 'indeterminate') {\r\n return;\r\n }\r\n switch (type) {\r\n case 'negative':\r\n element.scrollLeft = element.clientWidth - element.scrollWidth + scrollLeft;\r\n break;\r\n case 'reverse':\r\n element.scrollLeft = element.scrollWidth - element.clientWidth - scrollLeft;\r\n break;\r\n default:\r\n element.scrollLeft = scrollLeft;\r\n break;\r\n }\r\n}\r\n","function easeInOutSin(time) {\n return (1 + Math.sin(Math.PI * time - Math.PI / 2)) / 2;\n}\n\nfunction animate(prop, element, to) {\n var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};\n var cb = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : function () {};\n var _options$ease = options.ease,\n ease = _options$ease === void 0 ? easeInOutSin : _options$ease,\n _options$duration = options.duration,\n duration = _options$duration === void 0 ? 300 : _options$duration;\n var start = null;\n var from = element[prop];\n var cancelled = false;\n\n var cancel = function cancel() {\n cancelled = true;\n };\n\n var step = function step(timestamp) {\n if (cancelled) {\n cb(new Error('Animation cancelled'));\n return;\n }\n\n if (start === null) {\n start = timestamp;\n }\n\n var time = Math.min(1, (timestamp - start) / duration);\n element[prop] = ease(time) * (to - from) + from;\n\n if (time >= 1) {\n requestAnimationFrame(function () {\n cb(null);\n });\n return;\n }\n\n requestAnimationFrame(step);\n };\n\n if (from === to) {\n cb(new Error('Element already at target position'));\n return cancel;\n }\n\n requestAnimationFrame(step);\n return cancel;\n}\n\nexport default animate;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport debounce from '../utils/debounce';\nvar styles = {\n width: 99,\n height: 99,\n position: 'absolute',\n top: -9999,\n overflow: 'scroll'\n};\n/**\n * @ignore - internal component.\n * The component is originates from https://github.com/STORIS/react-scrollbar-size.\n * It has been moved into the core in order to minimize the bundle size.\n */\n\nexport default function ScrollbarSize(props) {\n var onChange = props.onChange,\n other = _objectWithoutProperties(props, [\"onChange\"]);\n\n var scrollbarHeight = React.useRef();\n var nodeRef = React.useRef(null);\n\n var setMeasurements = function setMeasurements() {\n scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;\n };\n\n React.useEffect(function () {\n var handleResize = debounce(function () {\n var prevHeight = scrollbarHeight.current;\n setMeasurements();\n\n if (prevHeight !== scrollbarHeight.current) {\n onChange(scrollbarHeight.current);\n }\n });\n window.addEventListener('resize', handleResize);\n return function () {\n handleResize.clear();\n window.removeEventListener('resize', handleResize);\n };\n }, [onChange]);\n React.useEffect(function () {\n setMeasurements();\n onChange(scrollbarHeight.current);\n }, [onChange]);\n return React.createElement(\"div\", _extends({\n style: styles,\n ref: nodeRef\n }, other));\n}\nprocess.env.NODE_ENV !== \"production\" ? ScrollbarSize.propTypes = {\n onChange: PropTypes.func.isRequired\n} : void 0;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport { capitalize } from '../utils/helpers';\nexport var styles = function styles(theme) {\n return {\n root: {\n position: 'absolute',\n height: 2,\n bottom: 0,\n width: '100%',\n transition: theme.transitions.create()\n },\n colorPrimary: {\n backgroundColor: theme.palette.primary.main\n },\n colorSecondary: {\n backgroundColor: theme.palette.secondary.main\n },\n vertical: {\n height: '100%',\n width: 2,\n right: 0\n }\n };\n};\n/**\n * @ignore - internal component.\n */\n\nvar TabIndicator = React.forwardRef(function TabIndicator(props, ref) {\n var classes = props.classes,\n className = props.className,\n color = props.color,\n orientation = props.orientation,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"color\", \"orientation\"]);\n\n return React.createElement(\"span\", _extends({\n className: clsx(classes.root, classes[\"color\".concat(capitalize(color))], className, {\n vertical: classes.vertical\n }[orientation]),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? TabIndicator.propTypes = {\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * @ignore\n * The color of the tab indicator.\n */\n color: PropTypes.oneOf(['primary', 'secondary']).isRequired,\n\n /**\n * The tabs orientation (layout flow direction).\n */\n orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired\n} : void 0;\nexport default withStyles(styles, {\n name: 'PrivateTabIndicator'\n})(TabIndicator);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\n\n/* eslint-disable jsx-a11y/aria-role */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';\nimport KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';\nimport withStyles from '../styles/withStyles';\nimport ButtonBase from '../ButtonBase';\nexport var styles = {\n root: {\n width: 40,\n flexShrink: 0\n },\n vertical: {\n width: '100%',\n height: 40,\n '& svg': {\n transform: 'rotate(90deg)'\n }\n }\n};\n/**\n * @ignore - internal component.\n */\n\nvar _ref = React.createElement(KeyboardArrowLeft, {\n fontSize: \"small\"\n});\n\nvar _ref2 = React.createElement(KeyboardArrowRight, {\n fontSize: \"small\"\n});\n\nvar TabScrollButton = React.forwardRef(function TabScrollButton(props, ref) {\n var classes = props.classes,\n classNameProp = props.className,\n direction = props.direction,\n orientation = props.orientation,\n visible = props.visible,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"direction\", \"orientation\", \"visible\"]);\n\n var className = clsx(classes.root, classNameProp, {\n vertical: classes.vertical\n }[orientation]);\n\n if (!visible) {\n return React.createElement(\"div\", {\n className: className\n });\n }\n\n return React.createElement(ButtonBase, _extends({\n component: \"div\",\n className: className,\n ref: ref,\n role: null,\n tabIndex: null\n }, other), direction === 'left' ? _ref : _ref2);\n});\nprocess.env.NODE_ENV !== \"production\" ? TabScrollButton.propTypes = {\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * Which direction should the button indicate?\n */\n direction: PropTypes.oneOf(['left', 'right']).isRequired,\n\n /**\n * The tabs orientation (layout flow direction).\n */\n orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,\n\n /**\n * Should the button be present or just consume space.\n */\n visible: PropTypes.bool.isRequired\n} : void 0;\nexport default withStyles(styles, {\n name: 'PrivateTabScrollButton'\n})(TabScrollButton);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\n\n/* eslint-disable no-restricted-globals */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\nimport clsx from 'clsx';\nimport debounce from '../utils/debounce';\nimport ownerWindow from '../utils/ownerWindow';\nimport { getNormalizedScrollLeft, detectScrollType } from 'normalize-scroll-left';\nimport animate from '../internal/animate';\nimport ScrollbarSize from './ScrollbarSize';\nimport withStyles from '../styles/withStyles';\nimport TabIndicator from './TabIndicator';\nimport TabScrollButton from './TabScrollButton';\nimport useEventCallback from '../utils/useEventCallback';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n overflow: 'hidden',\n minHeight: 48,\n WebkitOverflowScrolling: 'touch',\n // Add iOS momentum scrolling.\n display: 'flex'\n },\n\n /* Styles applied to the root element if `orientation=\"vertical\"`. */\n vertical: {\n flexDirection: 'column'\n },\n\n /* Styles applied to the flex container element. */\n flexContainer: {\n display: 'flex'\n },\n\n /* Styles applied to the flex container element if `orientation=\"vertical\"`. */\n flexContainerVertical: {\n flexDirection: 'column'\n },\n\n /* Styles applied to the flex container element if `centered={true}` & `!variant=\"scrollable\"`. */\n centered: {\n justifyContent: 'center'\n },\n\n /* Styles applied to the tablist element. */\n scroller: {\n position: 'relative',\n display: 'inline-block',\n flex: '1 1 auto',\n whiteSpace: 'nowrap'\n },\n\n /* Styles applied to the tablist element if `!variant=\"scrollable\"`\b\b\b. */\n fixed: {\n overflowX: 'hidden',\n width: '100%'\n },\n\n /* Styles applied to the tablist element if `variant=\"scrollable\"`. */\n scrollable: {\n overflowX: 'scroll',\n // Hide dimensionless scrollbar on MacOS\n scrollbarWidth: 'none',\n // Firefox\n '&::-webkit-scrollbar': {\n display: 'none' // Safari + Chrome\n\n }\n },\n\n /* Styles applied to the `ScrollButtonComponent` component. */\n scrollButtons: {},\n\n /* Styles applied to the `ScrollButtonComponent` component if `scrollButtons=\"auto\"` or scrollButtons=\"desktop\"`. */\n scrollButtonsDesktop: _defineProperty({}, theme.breakpoints.down('xs'), {\n display: 'none'\n }),\n\n /* Styles applied to the `TabIndicator` component. */\n indicator: {}\n };\n};\nvar Tabs = React.forwardRef(function Tabs(props, ref) {\n var action = props.action,\n _props$centered = props.centered,\n centered = _props$centered === void 0 ? false : _props$centered,\n childrenProp = props.children,\n classes = props.classes,\n className = props.className,\n _props$component = props.component,\n Component = _props$component === void 0 ? 'div' : _props$component,\n _props$indicatorColor = props.indicatorColor,\n indicatorColor = _props$indicatorColor === void 0 ? 'secondary' : _props$indicatorColor,\n onChange = props.onChange,\n _props$orientation = props.orientation,\n orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,\n _props$ScrollButtonCo = props.ScrollButtonComponent,\n ScrollButtonComponent = _props$ScrollButtonCo === void 0 ? TabScrollButton : _props$ScrollButtonCo,\n _props$scrollButtons = props.scrollButtons,\n scrollButtons = _props$scrollButtons === void 0 ? 'auto' : _props$scrollButtons,\n _props$TabIndicatorPr = props.TabIndicatorProps,\n TabIndicatorProps = _props$TabIndicatorPr === void 0 ? {} : _props$TabIndicatorPr,\n _props$textColor = props.textColor,\n textColor = _props$textColor === void 0 ? 'inherit' : _props$textColor,\n theme = props.theme,\n value = props.value,\n _props$variant = props.variant,\n variant = _props$variant === void 0 ? 'standard' : _props$variant,\n other = _objectWithoutProperties(props, [\"action\", \"centered\", \"children\", \"classes\", \"className\", \"component\", \"indicatorColor\", \"onChange\", \"orientation\", \"ScrollButtonComponent\", \"scrollButtons\", \"TabIndicatorProps\", \"textColor\", \"theme\", \"value\", \"variant\"]);\n\n var scrollable = variant === 'scrollable';\n var isRtl = theme.direction === 'rtl';\n var vertical = orientation === 'vertical';\n var scrollStart = vertical ? 'scrollTop' : 'scrollLeft';\n var start = vertical ? 'top' : 'left';\n var end = vertical ? 'bottom' : 'right';\n var clientSize = vertical ? 'clientHeight' : 'clientWidth';\n var size = vertical ? 'height' : 'width';\n process.env.NODE_ENV !== \"production\" ? warning(!centered || !scrollable, 'Material-UI: you can not use the `centered={true}` and `variant=\"scrollable\"` properties ' + 'at the same time on a `Tabs` component.') : void 0;\n\n var _React$useState = React.useState(false),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n mounted = _React$useState2[0],\n setMounted = _React$useState2[1];\n\n var _React$useState3 = React.useState({}),\n _React$useState4 = _slicedToArray(_React$useState3, 2),\n indicatorStyle = _React$useState4[0],\n setIndicatorStyle = _React$useState4[1];\n\n var _React$useState5 = React.useState({\n start: false,\n end: false\n }),\n _React$useState6 = _slicedToArray(_React$useState5, 2),\n displayScroll = _React$useState6[0],\n setDisplayScroll = _React$useState6[1];\n\n var _React$useState7 = React.useState({\n overflow: 'hidden',\n marginBottom: null\n }),\n _React$useState8 = _slicedToArray(_React$useState7, 2),\n scrollerStyle = _React$useState8[0],\n setScrollerStyle = _React$useState8[1];\n\n var valueToIndex = new Map();\n var tabsRef = React.useRef(null);\n var childrenWrapperRef = React.useRef(null);\n\n var getTabsMeta = function getTabsMeta() {\n var tabsNode = tabsRef.current;\n var tabsMeta;\n\n if (tabsNode) {\n var rect = tabsNode.getBoundingClientRect(); // create a new object with ClientRect class props + scrollLeft\n\n tabsMeta = {\n clientWidth: tabsNode.clientWidth,\n scrollLeft: tabsNode.scrollLeft,\n scrollTop: tabsNode.scrollTop,\n scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, theme.direction),\n scrollWidth: tabsNode.scrollWidth,\n top: rect.top,\n bottom: rect.bottom,\n left: rect.left,\n right: rect.right\n };\n }\n\n var tabMeta;\n\n if (tabsNode && value !== false) {\n var _children = childrenWrapperRef.current.children;\n\n if (_children.length > 0) {\n var tab = _children[valueToIndex.get(value)];\n\n process.env.NODE_ENV !== \"production\" ? warning(tab, [\"Material-UI: the value provided `\".concat(value, \"` to the Tabs component is invalid.\"), 'None of the Tabs children have this value.', valueToIndex.keys ? \"You can provide one of the following values: \".concat(Array.from(valueToIndex.keys()).join(', '), \".\") : null].join('\\n')) : void 0;\n tabMeta = tab ? tab.getBoundingClientRect() : null;\n }\n }\n\n return {\n tabsMeta: tabsMeta,\n tabMeta: tabMeta\n };\n };\n\n var updateIndicatorState = useEventCallback(function () {\n var _newIndicatorStyle;\n\n var _getTabsMeta = getTabsMeta(),\n tabsMeta = _getTabsMeta.tabsMeta,\n tabMeta = _getTabsMeta.tabMeta;\n\n var startValue = 0;\n\n if (tabMeta && tabsMeta) {\n if (vertical) {\n startValue = Math.round(tabMeta.top - tabsMeta.top + tabsMeta.scrollTop);\n } else {\n var correction = isRtl ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth : tabsMeta.scrollLeft;\n startValue = Math.round(tabMeta.left - tabsMeta.left + correction);\n }\n }\n\n var newIndicatorStyle = (_newIndicatorStyle = {}, _defineProperty(_newIndicatorStyle, start, startValue), _defineProperty(_newIndicatorStyle, size, tabMeta ? Math.round(tabMeta[size]) : 0), _newIndicatorStyle);\n\n if ((newIndicatorStyle[start] !== indicatorStyle[start] || newIndicatorStyle[size] !== indicatorStyle[size]) && !isNaN(newIndicatorStyle[start]) && !isNaN(newIndicatorStyle[size])) {\n setIndicatorStyle(newIndicatorStyle);\n }\n });\n\n var scroll = function scroll(scrollValue) {\n animate(scrollStart, tabsRef.current, scrollValue);\n };\n\n var moveTabsScroll = function moveTabsScroll(delta) {\n var scrollValue = tabsRef.current[scrollStart];\n\n if (vertical) {\n scrollValue += delta;\n } else {\n scrollValue += delta * (isRtl ? -1 : 1); // Fix for Edge\n\n scrollValue *= isRtl && detectScrollType() === 'reverse' ? -1 : 1;\n }\n\n scroll(scrollValue);\n };\n\n var handleStartScrollClick = function handleStartScrollClick() {\n moveTabsScroll(-tabsRef.current[clientSize]);\n };\n\n var handleEndScrollClick = function handleEndScrollClick() {\n moveTabsScroll(tabsRef.current[clientSize]);\n };\n\n var handleScrollbarSizeChange = React.useCallback(function (scrollbarHeight) {\n setScrollerStyle({\n overflow: null,\n marginBottom: -scrollbarHeight\n });\n }, []);\n\n var getConditionalElements = function getConditionalElements() {\n var conditionalElements = {};\n conditionalElements.scrollbarSizeListener = scrollable ? React.createElement(ScrollbarSize, {\n className: classes.scrollable,\n onChange: handleScrollbarSizeChange\n }) : null;\n var scrollButtonsActive = displayScroll.start || displayScroll.end;\n var showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === 'desktop' || scrollButtons === 'on');\n conditionalElements.scrollButtonStart = showScrollButtons ? React.createElement(ScrollButtonComponent, {\n orientation: orientation,\n direction: isRtl ? 'right' : 'left',\n onClick: handleStartScrollClick,\n visible: displayScroll.start,\n className: clsx(classes.scrollButtons, scrollButtons !== 'on' && classes.scrollButtonsDesktop)\n }) : null;\n conditionalElements.scrollButtonEnd = showScrollButtons ? React.createElement(ScrollButtonComponent, {\n orientation: orientation,\n direction: isRtl ? 'left' : 'right',\n onClick: handleEndScrollClick,\n visible: displayScroll.end,\n className: clsx(classes.scrollButtons, scrollButtons !== 'on' && classes.scrollButtonsDesktop)\n }) : null;\n return conditionalElements;\n };\n\n var scrollSelectedIntoView = useEventCallback(function () {\n var _getTabsMeta2 = getTabsMeta(),\n tabsMeta = _getTabsMeta2.tabsMeta,\n tabMeta = _getTabsMeta2.tabMeta;\n\n if (!tabMeta || !tabsMeta) {\n return;\n }\n\n if (tabMeta[start] < tabsMeta[start]) {\n // left side of button is out of view\n var nextScrollStart = tabsMeta[scrollStart] + (tabMeta[start] - tabsMeta[start]);\n scroll(nextScrollStart);\n } else if (tabMeta[end] > tabsMeta[end]) {\n // right side of button is out of view\n var _nextScrollStart = tabsMeta[scrollStart] + (tabMeta[end] - tabsMeta[end]);\n\n scroll(_nextScrollStart);\n }\n });\n var updateScrollButtonState = useEventCallback(function () {\n if (scrollable && scrollButtons !== 'off') {\n var _tabsRef$current = tabsRef.current,\n scrollTop = _tabsRef$current.scrollTop,\n scrollHeight = _tabsRef$current.scrollHeight,\n clientHeight = _tabsRef$current.clientHeight,\n scrollWidth = _tabsRef$current.scrollWidth,\n clientWidth = _tabsRef$current.clientWidth;\n var showStartScroll;\n var showEndScroll;\n\n if (vertical) {\n showStartScroll = scrollTop > 1;\n showEndScroll = scrollTop < scrollHeight - clientHeight - 1;\n } else {\n var scrollLeft = getNormalizedScrollLeft(tabsRef.current, theme.direction); // use 1 for the potential rounding error with browser zooms.\n\n showStartScroll = isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;\n showEndScroll = !isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;\n }\n\n if (showStartScroll !== displayScroll.start || showEndScroll !== displayScroll.end) {\n setDisplayScroll({\n start: showStartScroll,\n end: showEndScroll\n });\n }\n }\n });\n React.useEffect(function () {\n var handleResize = debounce(function () {\n updateIndicatorState();\n updateScrollButtonState();\n });\n var win = ownerWindow(tabsRef.current);\n win.addEventListener('resize', handleResize);\n return function () {\n handleResize.clear();\n win.removeEventListener('resize', handleResize);\n };\n }, [updateIndicatorState, updateScrollButtonState]);\n var handleTabsScroll = React.useCallback(debounce(function () {\n updateScrollButtonState();\n }));\n React.useEffect(function () {\n return function () {\n handleTabsScroll.clear();\n };\n }, [handleTabsScroll]);\n React.useEffect(function () {\n setMounted(true);\n }, []);\n React.useEffect(function () {\n updateIndicatorState();\n updateScrollButtonState();\n });\n React.useEffect(function () {\n scrollSelectedIntoView();\n }, [scrollSelectedIntoView, indicatorStyle]);\n React.useImperativeHandle(action, function () {\n return {\n updateIndicator: updateIndicatorState\n };\n }, [updateIndicatorState]);\n var indicator = React.createElement(TabIndicator, _extends({\n className: classes.indicator,\n orientation: orientation,\n color: indicatorColor\n }, TabIndicatorProps, {\n style: _extends({}, indicatorStyle, {}, TabIndicatorProps.style)\n }));\n var childIndex = 0;\n var children = React.Children.map(childrenProp, function (child) {\n if (!React.isValidElement(child)) {\n return null;\n }\n\n process.env.NODE_ENV !== \"production\" ? warning(child.type !== React.Fragment, [\"Material-UI: the Tabs component doesn't accept a Fragment as a child.\", 'Consider providing an array instead.'].join('\\n')) : void 0;\n var childValue = child.props.value === undefined ? childIndex : child.props.value;\n valueToIndex.set(childValue, childIndex);\n var selected = childValue === value;\n childIndex += 1;\n return React.cloneElement(child, {\n fullWidth: variant === 'fullWidth',\n indicator: selected && !mounted && indicator,\n selected: selected,\n onChange: onChange,\n textColor: textColor,\n value: childValue\n });\n });\n var conditionalElements = getConditionalElements();\n return React.createElement(Component, _extends({\n className: clsx(classes.root, className, vertical && classes.vertical),\n ref: ref\n }, other), conditionalElements.scrollButtonStart, conditionalElements.scrollbarSizeListener, React.createElement(\"div\", {\n className: clsx(classes.scroller, scrollable ? classes.scrollable : classes.fixed),\n style: scrollerStyle,\n ref: tabsRef,\n onScroll: handleTabsScroll\n }, React.createElement(\"div\", {\n className: clsx(classes.flexContainer, vertical && classes.flexContainerVertical, centered && !scrollable && classes.centered),\n ref: childrenWrapperRef,\n role: \"tablist\"\n }, children), mounted && indicator), conditionalElements.scrollButtonEnd);\n});\nprocess.env.NODE_ENV !== \"production\" ? Tabs.propTypes = {\n /**\n * Callback fired when the component mounts.\n * This is useful when you want to trigger an action programmatically.\n * It currently only supports `updateIndicator()` action.\n *\n * @param {object} actions This object contains all possible actions\n * that can be triggered programmatically.\n */\n action: PropTypes.func,\n\n /**\n * If `true`, the tabs will be centered.\n * This property is intended for large views.\n */\n centered: PropTypes.bool,\n\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a DOM element or a component.\n */\n component: PropTypes.elementType,\n\n /**\n * Determines the color of the indicator.\n */\n indicatorColor: PropTypes.oneOf(['secondary', 'primary']),\n\n /**\n * Callback fired when the value changes.\n *\n * @param {object} event The event source of the callback\n * @param {any} value We default to the index of the child (number)\n */\n onChange: PropTypes.func,\n\n /**\n * The tabs orientation (layout flow direction).\n */\n orientation: PropTypes.oneOf(['horizontal', 'vertical']),\n\n /**\n * The component used to render the scroll buttons.\n */\n ScrollButtonComponent: PropTypes.elementType,\n\n /**\n * Determine behavior of scroll buttons when tabs are set to scroll:\n *\n * - `auto` will only present them when not all the items are visible.\n * - `desktop` will only present them on medium and larger viewports.\n * - `on` will always present them.\n * - `off` will never present them.\n */\n scrollButtons: PropTypes.oneOf(['auto', 'desktop', 'on', 'off']),\n\n /**\n * Props applied to the tab indicator element.\n */\n TabIndicatorProps: PropTypes.object,\n\n /**\n * Determines the color of the `Tab`.\n */\n textColor: PropTypes.oneOf(['secondary', 'primary', 'inherit']),\n\n /**\n * @ignore\n */\n theme: PropTypes.object.isRequired,\n\n /**\n * The value of the currently selected `Tab`.\n * If you don't want any selected `Tab`, you can set this property to `false`.\n */\n value: PropTypes.any,\n\n /**\n * Determines additional display behavior of the tabs:\n *\n * - `scrollable` will invoke scrolling properties and allow for horizontally\n * scrolling (or swiping) of the tab bar.\n * -`fullWidth` will make the tabs grow to use all the available space,\n * which should be used for small views, like on mobile.\n * - `standard` will render the default state.\n */\n variant: PropTypes.oneOf(['standard', 'scrollable', 'fullWidth'])\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiTabs',\n withTheme: true\n})(Tabs);","import PropTypes from 'prop-types';\nimport { keys as breakpointKeys } from '../styles/createBreakpoints';\nimport withWidth, { isWidthDown, isWidthUp } from '../withWidth';\nimport { exactProp } from '@material-ui/utils';\n/**\n * @ignore - internal component.\n */\n\nfunction HiddenJs(props) {\n var children = props.children,\n only = props.only,\n width = props.width;\n var visible = true; // `only` check is faster to get out sooner if used.\n\n if (only) {\n if (Array.isArray(only)) {\n for (var i = 0; i < only.length; i += 1) {\n var breakpoint = only[i];\n\n if (width === breakpoint) {\n visible = false;\n break;\n }\n }\n } else if (only && width === only) {\n visible = false;\n }\n } // Allow `only` to be combined with other props. If already hidden, no need to check others.\n\n\n if (visible) {\n // determine visibility based on the smallest size up\n for (var _i = 0; _i < breakpointKeys.length; _i += 1) {\n var _breakpoint = breakpointKeys[_i];\n var breakpointUp = props[\"\".concat(_breakpoint, \"Up\")];\n var breakpointDown = props[\"\".concat(_breakpoint, \"Down\")];\n\n if (breakpointUp && isWidthUp(_breakpoint, width) || breakpointDown && isWidthDown(_breakpoint, width)) {\n visible = false;\n break;\n }\n }\n }\n\n if (!visible) {\n return null;\n }\n\n return children;\n}\n\nHiddenJs.propTypes = {\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * Specify which implementation to use. 'js' is the default, 'css' works better for\n * server-side rendering.\n */\n implementation: PropTypes.oneOf(['js', 'css']),\n\n /**\n * You can use this prop when choosing the `js` implementation with server-side rendering.\n *\n * As `window.innerWidth` is unavailable on the server,\n * we default to rendering an empty component during the first mount.\n * You might want to use an heuristic to approximate\n * the screen width of the client browser screen width.\n *\n * For instance, you could be using the user-agent or the client-hints.\n * https://caniuse.com/#search=client%20hint\n */\n initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),\n\n /**\n * If true, screens this size and down will be hidden.\n */\n lgDown: PropTypes.bool,\n\n /**\n * If true, screens this size and up will be hidden.\n */\n lgUp: PropTypes.bool,\n\n /**\n * If true, screens this size and down will be hidden.\n */\n mdDown: PropTypes.bool,\n\n /**\n * If true, screens this size and up will be hidden.\n */\n mdUp: PropTypes.bool,\n\n /**\n * Hide the given breakpoint(s).\n */\n only: PropTypes.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']))]),\n\n /**\n * If true, screens this size and down will be hidden.\n */\n smDown: PropTypes.bool,\n\n /**\n * If true, screens this size and up will be hidden.\n */\n smUp: PropTypes.bool,\n\n /**\n * @ignore\n * width prop provided by withWidth decorator.\n */\n width: PropTypes.string.isRequired,\n\n /**\n * If true, screens this size and down will be hidden.\n */\n xlDown: PropTypes.bool,\n\n /**\n * If true, screens this size and up will be hidden.\n */\n xlUp: PropTypes.bool,\n\n /**\n * If true, screens this size and down will be hidden.\n */\n xsDown: PropTypes.bool,\n\n /**\n * If true, screens this size and up will be hidden.\n */\n xsUp: PropTypes.bool\n};\n\nif (process.env.NODE_ENV !== 'production') {\n HiddenJs.propTypes = exactProp(HiddenJs.propTypes);\n}\n\nexport default withWidth()(HiddenJs);","import _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\nimport { keys as breakpointKeys } from '../styles/createBreakpoints';\nimport { capitalize } from '../utils/helpers';\nimport withStyles from '../styles/withStyles';\n\nvar styles = function styles(theme) {\n var hidden = {\n display: 'none'\n };\n return breakpointKeys.reduce(function (acc, key) {\n acc[\"only\".concat(capitalize(key))] = _defineProperty({}, theme.breakpoints.only(key), hidden);\n acc[\"\".concat(key, \"Up\")] = _defineProperty({}, theme.breakpoints.up(key), hidden);\n acc[\"\".concat(key, \"Down\")] = _defineProperty({}, theme.breakpoints.down(key), hidden);\n return acc;\n }, {});\n};\n/**\n * @ignore - internal component.\n */\n\n\nfunction HiddenCss(props) {\n var children = props.children,\n classes = props.classes,\n className = props.className,\n lgDown = props.lgDown,\n lgUp = props.lgUp,\n mdDown = props.mdDown,\n mdUp = props.mdUp,\n only = props.only,\n smDown = props.smDown,\n smUp = props.smUp,\n xlDown = props.xlDown,\n xlUp = props.xlUp,\n xsDown = props.xsDown,\n xsUp = props.xsUp,\n other = _objectWithoutProperties(props, [\"children\", \"classes\", \"className\", \"lgDown\", \"lgUp\", \"mdDown\", \"mdUp\", \"only\", \"smDown\", \"smUp\", \"xlDown\", \"xlUp\", \"xsDown\", \"xsUp\"]);\n\n process.env.NODE_ENV !== \"production\" ? warning(Object.keys(other).length === 0 || Object.keys(other).length === 1 && other.hasOwnProperty('ref'), \"Material-UI: unsupported props received \".concat(Object.keys(other).join(', '), \" by ``.\")) : void 0;\n var clsx = [];\n\n if (className) {\n clsx.push(className);\n }\n\n for (var i = 0; i < breakpointKeys.length; i += 1) {\n var breakpoint = breakpointKeys[i];\n var breakpointUp = props[\"\".concat(breakpoint, \"Up\")];\n var breakpointDown = props[\"\".concat(breakpoint, \"Down\")];\n\n if (breakpointUp) {\n clsx.push(classes[\"\".concat(breakpoint, \"Up\")]);\n }\n\n if (breakpointDown) {\n clsx.push(classes[\"\".concat(breakpoint, \"Down\")]);\n }\n }\n\n if (only) {\n var onlyBreakpoints = Array.isArray(only) ? only : [only];\n onlyBreakpoints.forEach(function (breakpoint) {\n clsx.push(classes[\"only\".concat(capitalize(breakpoint))]);\n });\n }\n\n return React.createElement(\"div\", {\n className: clsx.join(' ')\n }, children);\n}\n\nprocess.env.NODE_ENV !== \"production\" ? HiddenCss.propTypes = {\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * Specify which implementation to use. 'js' is the default, 'css' works better for\n * server-side rendering.\n */\n implementation: PropTypes.oneOf(['js', 'css']),\n\n /**\n * If true, screens this size and down will be hidden.\n */\n lgDown: PropTypes.bool,\n\n /**\n * If true, screens this size and up will be hidden.\n */\n lgUp: PropTypes.bool,\n\n /**\n * If true, screens this size and down will be hidden.\n */\n mdDown: PropTypes.bool,\n\n /**\n * If true, screens this size and up will be hidden.\n */\n mdUp: PropTypes.bool,\n\n /**\n * Hide the given breakpoint(s).\n */\n only: PropTypes.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']))]),\n\n /**\n * If true, screens this size and down will be hidden.\n */\n smDown: PropTypes.bool,\n\n /**\n * If true, screens this size and up will be hidden.\n */\n smUp: PropTypes.bool,\n\n /**\n * If true, screens this size and down will be hidden.\n */\n xlDown: PropTypes.bool,\n\n /**\n * If true, screens this size and up will be hidden.\n */\n xlUp: PropTypes.bool,\n\n /**\n * If true, screens this size and down will be hidden.\n */\n xsDown: PropTypes.bool,\n\n /**\n * If true, screens this size and up will be hidden.\n */\n xsUp: PropTypes.bool\n} : void 0;\nexport default withStyles(styles, {\n name: 'PrivateHiddenCss'\n})(HiddenCss);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport HiddenJs from './HiddenJs';\nimport HiddenCss from './HiddenCss';\n/**\n * Responsively hides children based on the selected implementation.\n */\n\nfunction Hidden(props) {\n var _props$implementation = props.implementation,\n implementation = _props$implementation === void 0 ? 'js' : _props$implementation,\n _props$lgDown = props.lgDown,\n lgDown = _props$lgDown === void 0 ? false : _props$lgDown,\n _props$lgUp = props.lgUp,\n lgUp = _props$lgUp === void 0 ? false : _props$lgUp,\n _props$mdDown = props.mdDown,\n mdDown = _props$mdDown === void 0 ? false : _props$mdDown,\n _props$mdUp = props.mdUp,\n mdUp = _props$mdUp === void 0 ? false : _props$mdUp,\n _props$smDown = props.smDown,\n smDown = _props$smDown === void 0 ? false : _props$smDown,\n _props$smUp = props.smUp,\n smUp = _props$smUp === void 0 ? false : _props$smUp,\n _props$xlDown = props.xlDown,\n xlDown = _props$xlDown === void 0 ? false : _props$xlDown,\n _props$xlUp = props.xlUp,\n xlUp = _props$xlUp === void 0 ? false : _props$xlUp,\n _props$xsDown = props.xsDown,\n xsDown = _props$xsDown === void 0 ? false : _props$xsDown,\n _props$xsUp = props.xsUp,\n xsUp = _props$xsUp === void 0 ? false : _props$xsUp,\n other = _objectWithoutProperties(props, [\"implementation\", \"lgDown\", \"lgUp\", \"mdDown\", \"mdUp\", \"smDown\", \"smUp\", \"xlDown\", \"xlUp\", \"xsDown\", \"xsUp\"]);\n\n if (implementation === 'js') {\n return React.createElement(HiddenJs, _extends({\n lgDown: lgDown,\n lgUp: lgUp,\n mdDown: mdDown,\n mdUp: mdUp,\n smDown: smDown,\n smUp: smUp,\n xlDown: xlDown,\n xlUp: xlUp,\n xsDown: xsDown,\n xsUp: xsUp\n }, other));\n }\n\n return React.createElement(HiddenCss, _extends({\n lgDown: lgDown,\n lgUp: lgUp,\n mdDown: mdDown,\n mdUp: mdUp,\n smDown: smDown,\n smUp: smUp,\n xlDown: xlDown,\n xlUp: xlUp,\n xsDown: xsDown,\n xsUp: xsUp\n }, other));\n}\n\nprocess.env.NODE_ENV !== \"production\" ? Hidden.propTypes = {\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * Specify which implementation to use. 'js' is the default, 'css' works better for\n * server-side rendering.\n */\n implementation: PropTypes.oneOf(['js', 'css']),\n\n /**\n * You can use this prop when choosing the `js` implementation with server-side rendering.\n *\n * As `window.innerWidth` is unavailable on the server,\n * we default to rendering an empty component during the first mount.\n * You might want to use an heuristic to approximate\n * the screen width of the client browser screen width.\n *\n * For instance, you could be using the user-agent or the client-hints.\n * https://caniuse.com/#search=client%20hint\n */\n initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),\n\n /**\n * If true, screens this size and down will be hidden.\n */\n lgDown: PropTypes.bool,\n\n /**\n * If true, screens this size and up will be hidden.\n */\n lgUp: PropTypes.bool,\n\n /**\n * If true, screens this size and down will be hidden.\n */\n mdDown: PropTypes.bool,\n\n /**\n * If true, screens this size and up will be hidden.\n */\n mdUp: PropTypes.bool,\n\n /**\n * Hide the given breakpoint(s).\n */\n only: PropTypes.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']))]),\n\n /**\n * If true, screens this size and down will be hidden.\n */\n smDown: PropTypes.bool,\n\n /**\n * If true, screens this size and up will be hidden.\n */\n smUp: PropTypes.bool,\n\n /**\n * If true, screens this size and down will be hidden.\n */\n xlDown: PropTypes.bool,\n\n /**\n * If true, screens this size and up will be hidden.\n */\n xlUp: PropTypes.bool,\n\n /**\n * If true, screens this size and down will be hidden.\n */\n xsDown: PropTypes.bool,\n\n /**\n * If true, screens this size and up will be hidden.\n */\n xsUp: PropTypes.bool\n} : void 0;\nexport default Hidden;","import React from 'react';\r\nimport MuiHidden from '@material-ui/core/Hidden';\r\nconst Hidden = (props) => (React.createElement(MuiHidden, Object.assign({}, props)));\r\nexport default Hidden;\r\n","/* Copyright 2019 Ellucian Company L.P. and its affiliates.\r\n * File: Print.tsx\r\n * Type: Presentation component */\r\n\r\n// #region Imports\r\nimport React, { useState } from 'react';\r\n\r\n// Core components\r\nimport Hidden from '@powercampus/design-system/react/core/Hidden';\r\nimport Icon from '@powercampus/design-system/react/core/Icon';\r\nimport IconButton from '@powercampus/design-system/react/core/IconButton';\r\nimport IconLink from '@powercampus/design-system/react/core/IconLink';\r\nimport Snackbar from '@powercampus/design-system/react/core/Snackbar';\r\n\r\n// Types\r\nimport { ResultType } from '@powercampus/design-system/types/ResultType';\r\nimport { IPrintResources } from '../../Types/Resources/Generic/IPrintResources';\r\n\r\n// #endregion Imports\r\n\r\n// #region Types\r\nexport interface IPrintProps {\r\n classNameIconButton?: string;\r\n classNameIconLink?: string;\r\n lblPrint?: string;\r\n link: string;\r\n resources: IPrintResources;\r\n}\r\n// #endregion Types\r\n\r\n// #region Component\r\nconst Print: React.FC = (props: IPrintProps): JSX.Element => {\r\n const {\r\n classNameIconButton,\r\n classNameIconLink,\r\n link,\r\n lblPrint,\r\n resources\r\n } = props;\r\n\r\n const [open, setOpen] = useState(false);\r\n\r\n const onClickPrint = () => {\r\n setOpen(!open);\r\n window.location.assign(link);\r\n };\r\n\r\n const onClose = () => {\r\n setOpen(!open);\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {resources.lblPrintProcess}\r\n \r\n )}\r\n open={open}\r\n type={ResultType.success}\r\n onClose={onClose}\r\n />\r\n \r\n );\r\n};\r\n// #endregion Component\r\n\r\n// Export: Component\r\nexport default Print;","/* Copyright 2019 Ellucian Company L.P. and its affiliates.\r\n * File: PaymentOrigin.ts */\r\n\r\nexport enum PaymentOrigin {\r\n Registration = 0,\r\n ConEdRegistration = 1,\r\n MakePayment = 2,\r\n TranscriptRequest = 3,\r\n OnlineDonation = 4,\r\n Application = 5,\r\n PowerCampusReceipt = 6,\r\n PowerCampusGift = 7,\r\n SharedAccessMakePayment = 8\r\n}","/* Copyright 2019 Ellucian Company L.P. and its affiliates.\r\n * File: PaymentDetailModal.tsx\r\n * Type: Container component */\r\n\r\n// #region Imports\r\nimport classnames from 'classnames';\r\nimport React from 'react';\r\n\r\n// Core components\r\nimport Button, { ButtonGroup } from '@powercampus/design-system/react/core/Button';\r\nimport Grid from '@powercampus/design-system/react/core/Grid';\r\nimport Icon from '@powercampus/design-system/react/core/Icon';\r\nimport IconButton from '@powercampus/design-system/react/core/IconButton';\r\nimport Modal from '@powercampus/design-system/react/core/Modal';\r\nimport RadioGroup from '@powercampus/design-system/react/core/RadioGroup';\r\nimport Table, { TableBody, TableCell, TableFooter, TableHead, TableRow } from '@powercampus/design-system/react/core/Table';\r\nimport Text from '@powercampus/design-system/react/core/Text';\r\nimport TextField from '@powercampus/design-system/react/core/TextField';\r\n\r\n// Internal components\r\nimport Print from './Print';\r\n\r\n// Helpers\r\nimport Constants from '@powercampus/design-system/helpers/Constants';\r\nimport Format from '@powercampus/design-system/helpers/Format';\r\nimport Tokens from '@powercampus/design-system/react/core/styles/Tokens';\r\nimport { createStyles, Theme, withStyles, WithStyles } from '@powercampus/design-system/react/core/styles/withStyles';\r\n\r\n// Types\r\nimport { IAlert } from '@powercampus/design-system/types/IAlert';\r\nimport { IJsonResult } from '@powercampus/design-system/types/IJsonResult';\r\nimport { ILogData } from '@powercampus/design-system/types/ILogData';\r\nimport { IRadioOption } from '@powercampus/design-system/types/IRadioOption';\r\nimport { ResultType } from '@powercampus/design-system/types/ResultType';\r\nimport { PaymentOrigin } from '../../Types/Enum/PaymentOrigin';\r\nimport { IPaymentDiscountCoupon } from '../../Types/Payment/IPaymentDiscountCoupon';\r\nimport { IPaymentInfo } from '../../Types/Payment/IPaymentInfo';\r\nimport { IPaymentDetailModalResources } from '../../Types/Resources/Generic/IPaymentDetailModalResources';\r\nimport { IPrintResources } from '../../Types/Resources/Generic/IPrintResources';\r\n\r\n// Helpers\r\nimport LogData from '@powercampus/design-system/helpers/LogData';\r\n\r\n// Requests\r\nimport RequestsLayout from '@powercampus/design-system/requests/Layout';\r\n\r\n// State Management\r\nimport LayoutActions from '@powercampus/design-system/flux/actions/LayoutActions';\r\n// #endregion Imports\r\n\r\n// #region Types\r\nexport interface IPaymentDetailModalProps {\r\n coupons: IPaymentDiscountCoupon[];\r\n enableOnlinePayment: boolean;\r\n open: boolean;\r\n paymentInfo: IPaymentInfo;\r\n paymentInfoNoChanges: IPaymentInfo;\r\n paymentMethod?: string;\r\n paymentOrigin: PaymentOrigin;\r\n titleName?: string;\r\n yearTerm?: string;\r\n onApplyCoupon?: () => void;\r\n onChangeCouponCode?: (event: any) => void;\r\n onChangePaymentAnotherAmount?: (event: any) => void;\r\n onChangePaymentMethod?: (event: any) => void;\r\n onClose: () => void;\r\n onPay: () => void;\r\n onRemoveCoupon?: (event: any) => void;\r\n}\r\n\r\ninterface IPaymentDetailModalRes extends IPaymentDetailModalResources {\r\n printing: IPrintResources;\r\n}\r\n\r\ninterface IPaymentDetailModalState {\r\n componentError: boolean;\r\n resources?: IPaymentDetailModalRes;\r\n}\r\n\r\nconst styles = (theme: Theme) => createStyles({\r\n amountContainer: {\r\n backgroundColor: Tokens.colorBrandNeutral200,\r\n height: '100px',\r\n marginBottom: Tokens.spacingMedium,\r\n paddingBottom: Tokens.spacingMedium,\r\n paddingLeft: Tokens.spacingSmall,\r\n paddingRight: Tokens.spacingSmall,\r\n paddingTop: Tokens.spacingMedium,\r\n width: 'auto'\r\n },\r\n discountApplied: {\r\n color: Tokens.colorTextAlertNeutral\r\n },\r\n footerPayment: {\r\n backgroundColor: Tokens.colorBrandNeutral200,\r\n paddingBottom: Tokens.spacingSmall,\r\n paddingTop: Tokens.spacingXSmall\r\n },\r\n footerTextSpacing: {\r\n marginTop: Tokens.spacingXSmall\r\n },\r\n instructionsContainer: {\r\n marginBottom: Tokens.sizingSmall,\r\n marginTop: Tokens.sizingSmall\r\n },\r\n noBottomBorder: {\r\n borderBottomColor: `${Tokens.colorBrandNeutral100}!important`\r\n },\r\n noDeleteButton: {\r\n width: Tokens.spacingXLarge\r\n },\r\n table: {\r\n [theme.breakpoints.up('md')]: {\r\n // Width\r\n '& > thead > tr > th:nth-child(1)': {\r\n width: '50%'\r\n }\r\n }\r\n }\r\n});\r\n\r\ntype PropsWithStyles = IPaymentDetailModalProps & WithStyles;\r\n// #endregion Types\r\n\r\n// #region Component\r\nclass PaymentDetailModal extends React.Component {\r\n private idModule: string;\r\n private idPage: string;\r\n\r\n public readonly state: Readonly;\r\n\r\n public constructor(props) {\r\n super(props);\r\n\r\n // #region Initialize Variables and State\r\n this.idModule = 'Generic';\r\n this.idPage = 'PaymentDetailModal';\r\n this.state = this.getInitialState();\r\n // #endregion Initialize Variables and State\r\n }\r\n\r\n private getInitialState(): IPaymentDetailModalState {\r\n let resources: IPaymentDetailModalRes | undefined;\r\n if (this.state) {\r\n resources = this.state.resources;\r\n }\r\n return {\r\n componentError: false,\r\n resources: resources\r\n };\r\n }\r\n\r\n // #region Error Functions\r\n private logError(logData: ILogData): void {\r\n LayoutActions.setLogData(logData);\r\n }\r\n\r\n private redirectError(code: number): void {\r\n LayoutActions.setRedirectCode(code);\r\n }\r\n\r\n private showError(message?: string): void {\r\n LayoutActions.setAlert({ message: message, messageType: ResultType.error } as IAlert);\r\n }\r\n // #endregion Error Functions\r\n\r\n // #region Resolvers\r\n private resolveGetResources = (json: string): void => {\r\n try {\r\n const result: IJsonResult = JSON.parse(json);\r\n if (result.status) {\r\n this.setState({\r\n resources: result.data\r\n });\r\n }\r\n else if (result.code) {\r\n this.redirectError(result.code);\r\n }\r\n else if (result.log) {\r\n this.showError();\r\n }\r\n else {\r\n this.logError(LogData.badJsonResult(this.resolveGetResources.name));\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolveGetResources.name, e));\r\n }\r\n };\r\n // #endregion Resolvers\r\n\r\n // #region Lifecycle\r\n public componentDidMount(): void {\r\n try {\r\n RequestsLayout.getResources(this.idModule, this.idPage,\r\n this.resolveGetResources,\r\n this.logError);\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.componentDidMount.name, e));\r\n }\r\n }\r\n\r\n public componentDidCatch(error, info): void {\r\n this.setState({\r\n componentError: true\r\n }, () => {\r\n this.logError(LogData.fromComponentException(this.componentDidCatch.name, error, info));\r\n this.redirectError(500);\r\n });\r\n }\r\n // #endregion Lifecycle\r\n\r\n public render(): JSX.Element {\r\n const {\r\n classes,\r\n coupons,\r\n enableOnlinePayment,\r\n open,\r\n paymentInfo,\r\n paymentInfoNoChanges,\r\n paymentMethod,\r\n paymentOrigin,\r\n titleName,\r\n yearTerm,\r\n onApplyCoupon,\r\n onChangeCouponCode,\r\n onChangePaymentAnotherAmount,\r\n onChangePaymentMethod,\r\n onClose,\r\n onPay,\r\n onRemoveCoupon\r\n } = this.props;\r\n\r\n const {\r\n componentError,\r\n resources\r\n } = this.state;\r\n\r\n let contentPage: JSX.Element | undefined;\r\n if (!componentError && resources) {\r\n let paymentMethods: IRadioOption[] | undefined;\r\n let hasCharges: boolean = false;\r\n\r\n if (paymentOrigin === PaymentOrigin.Registration) {\r\n paymentMethods = [];\r\n hasCharges = paymentInfo.currentBalanceValue > 0 || paymentInfo.totalAmountValue > 0;\r\n\r\n if (hasCharges) {\r\n paymentMethods.push({\r\n description: Format.toString(resources.formatBalance, [paymentInfo.currentBalance]),\r\n disabled: paymentInfo.currentBalanceValue < 0,\r\n value: '1'\r\n } as IRadioOption);\r\n // TODO: Review if this code is useful for the next story about the total charges and taxes\r\n // paymentMethods.push({\r\n // description: Format.toString(resources.formatTotal, [paymentInfo.totalAmount]),\r\n // disabled: paymentInfo.totalAmountValue < 0,\r\n // value: '2'\r\n // } as IRadioOption);\r\n\r\n let errorAnotherAmount: boolean = false;\r\n let errorTextAnotherAmount: string | undefined;\r\n if (paymentMethod === '0' && paymentInfo.modified) {\r\n errorAnotherAmount = !Boolean(paymentInfo.anotherAmount)\r\n || paymentInfo.invalidAnotherAmount;\r\n errorTextAnotherAmount = !Boolean(paymentInfo.anotherAmount) ?\r\n resources.lblAnotherAmountRequired\r\n : (paymentInfo.invalidAnotherAmount ?\r\n resources.lblAnotherAmountInvalid\r\n : undefined);\r\n }\r\n\r\n paymentMethods.push({\r\n description: resources.lblAnotherAmount,\r\n nodeComplement: (\r\n \r\n ),\r\n value: '0'\r\n } as IRadioOption);\r\n }\r\n }\r\n else if (paymentOrigin === PaymentOrigin.ConEdRegistration && !paymentInfo.useTransactionChargesOnly) {\r\n hasCharges = paymentInfo.paymentDueValue > 0;\r\n }\r\n else {\r\n hasCharges = paymentInfo.totalAmountValue > 0;\r\n }\r\n\r\n let headerModal: JSX.Element;\r\n headerModal = (\r\n <>\r\n \r\n {Format.toString(resources.formatTitle, [yearTerm || titleName || ''])}\r\n \r\n \r\n \r\n \r\n {resources.lblInstructions}\r\n \r\n \r\n {((paymentOrigin === PaymentOrigin.Registration\r\n || paymentOrigin === PaymentOrigin.ConEdRegistration)\r\n && paymentInfo.statementNumber) && (\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n {paymentOrigin === PaymentOrigin.Registration\r\n && paymentMethods && hasCharges && (\r\n \r\n )}\r\n {paymentOrigin !== PaymentOrigin.Registration && (\r\n \r\n \r\n {paymentOrigin === PaymentOrigin.ConEdRegistration\r\n && !paymentInfo.useTransactionChargesOnly ? (\r\n <>\r\n \r\n \r\n {paymentInfo.paymentDue}\r\n \r\n \r\n \r\n \r\n {resources.lblPaymentDue}\r\n \r\n \r\n \r\n ) : (\r\n <>\r\n \r\n {paymentInfoNoChanges.totalAmountValue !== paymentInfo.totalAmountValue ? (\r\n \r\n {paymentInfo.totalAmount}\r\n \r\n ) : (\r\n \r\n {paymentInfo.totalAmount}\r\n \r\n )}\r\n \r\n \r\n {paymentInfoNoChanges.totalAmountValue !== paymentInfo.totalAmountValue ? (\r\n \r\n {resources.lblDiscountedTotal}\r\n \r\n ) : (\r\n \r\n {resources.lblTotal}\r\n \r\n )}\r\n \r\n \r\n )}\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n );\r\n\r\n let footerModal: JSX.Element;\r\n footerModal = enableOnlinePayment && hasCharges ? (\r\n \r\n {!paymentInfo.requireOnlinePayment &&\r\n (paymentOrigin === PaymentOrigin.Registration\r\n || paymentOrigin === PaymentOrigin.ConEdRegistration) && (\r\n \r\n {resources.btnBillMeLater}\r\n \r\n )}\r\n \r\n {resources.btnPay}\r\n \r\n \r\n ) : (\r\n \r\n {resources.btnOk}\r\n \r\n );\r\n\r\n let rowClassName: string | undefined;\r\n let isFirstRow: boolean;\r\n contentPage = (\r\n \r\n {paymentOrigin === PaymentOrigin.ConEdRegistration && (\r\n \r\n \r\n \r\n {resources.lblDiscountTitle}\r\n \r\n \r\n {resources.lblDiscountInstructions}\r\n \r\n \r\n \r\n {coupons.map((coupon, ci) => (\r\n \r\n \r\n \r\n \r\n {!coupon.isNew ? (\r\n \r\n \r\n \r\n ) : ()}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {!coupon.isApplied && (\r\n \r\n {resources.btnApplyCoupon}\r\n \r\n )}\r\n \r\n \r\n \r\n\r\n \r\n ))}\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n {resources.lblDetail}\r\n \r\n \r\n \r\n {paymentInfo.chargeCredits && (\r\n \r\n \r\n \r\n \r\n \r\n {paymentOrigin === PaymentOrigin.ConEdRegistration && (\r\n \r\n {resources.lblCourse}\r\n \r\n )}\r\n \r\n {resources.lblCharge}\r\n \r\n \r\n {resources.lblAmount}\r\n \r\n {paymentOrigin === PaymentOrigin.ConEdRegistration\r\n && paymentInfo.chargeCredits.find(c => c.isCredit)\r\n && (\r\n \r\n {resources.lblDiscount}\r\n \r\n )}\r\n \r\n \r\n \r\n {paymentInfo.chargeCredits.map((row, cci) => {\r\n if (paymentOrigin === PaymentOrigin.ConEdRegistration) {\r\n rowClassName = undefined;\r\n isFirstRow = true;\r\n if (cci < paymentInfo.chargeCredits.length - 1\r\n && row.sectionId === paymentInfo.chargeCredits[cci + 1].sectionId) {\r\n rowClassName = classes.noBottomBorder;\r\n }\r\n if (cci > 0\r\n && row.sectionId === paymentInfo.chargeCredits[cci - 1].sectionId) {\r\n isFirstRow = false;\r\n }\r\n }\r\n return (\r\n \r\n {paymentOrigin === PaymentOrigin.ConEdRegistration && (\r\n \r\n {isFirstRow && !row.isCredit && !row.isOther && (\r\n \r\n {Format.toString(resources.formatTitleSection, [row.eventId, row.eventName])}\r\n \r\n )}\r\n {isFirstRow && row.isOther && (\r\n \r\n {resources.lblOthers}\r\n \r\n )}\r\n \r\n )}\r\n \r\n \r\n {row.description}\r\n \r\n {paymentOrigin === PaymentOrigin.Application\r\n && paymentInfo.chargeCredits\r\n && paymentInfo.chargeCredits.length > 0\r\n && paymentInfo.totalAmount !== paymentInfo.chargeCredits[0].amount && (\r\n <>\r\n
\r\n \r\n {resources.lblProgramFees}\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n {row.amount}\r\n \r\n \r\n {paymentOrigin === PaymentOrigin.ConEdRegistration\r\n && paymentInfo.chargeCredits.find(c => c.isCredit)\r\n && (\r\n \r\n \r\n {row.discountAmount || '-'}\r\n \r\n \r\n )}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n {paymentInfoNoChanges.totalAmountValue !== paymentInfo.totalAmountValue ? (\r\n \r\n {Format.toString(resources.formatDiscountedTotal, [paymentInfo.totalAmount])}\r\n \r\n ) : (\r\n \r\n {Format.toString(resources.formatTotal, [paymentInfo.totalAmount])}\r\n \r\n )}\r\n {paymentOrigin === PaymentOrigin.Registration && (\r\n \r\n {Format.toString(resources.formatPaymentDue, [paymentInfo.paymentDue])}\r\n \r\n )}\r\n {paymentOrigin === PaymentOrigin.ConEdRegistration\r\n && !paymentInfo.useTransactionChargesOnly && (\r\n \r\n {Format.toString(resources.formatPaymentDue, [paymentInfo.paymentDue])}\r\n \r\n )}\r\n | \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n );\r\n }\r\n\r\n return (\r\n <>\r\n {contentPage}\r\n \r\n );\r\n }\r\n}\r\n// #endregion Component\r\n\r\n// Export: Component\r\nexport default withStyles(styles)(PaymentDetailModal);","/* Copyright 2019 Ellucian Company L.P. and its affiliates.\r\n * File: ProcessPaymentModal.ts */\r\n\r\n// Types\r\nimport { ILogData } from '@powercampus/design-system/types/ILogData';\r\nimport { IRequestTranscript } from '../../Types/Grades/IRequestTranscript';\r\nimport { IPaymentRequest } from '../../Types/Payment/IPaymentRequest';\r\n\r\n// Helpers\r\nimport Request from '@powercampus/design-system/helpers/Request';\r\n\r\n// Functions for requests\r\nconst ProcessPaymentModalRequests = {\r\n postProcessPayment(paymentRequest: IPaymentRequest,\r\n resolver: (json: string) => void,\r\n resolveError: (logData: ILogData) => void): void {\r\n Request.post(this.postProcessPayment.name, '/Payment/Process', { paymentRequest }, resolver, resolveError);\r\n },\r\n postProcessTranscriptPayment(paymentRequest: IPaymentRequest,\r\n resolver: (json: string) => void,\r\n resolveError: (logData: ILogData) => void,\r\n requestTranscripts?: IRequestTranscript[]): void {\r\n Request.post(this.postProcessTranscriptPayment.name, '/Payment/Process', { paymentRequest, requestTranscripts }, resolver, resolveError);\r\n }\r\n};\r\n\r\n// Export object with the requests\r\nexport default ProcessPaymentModalRequests;","/* Copyright 2019 Ellucian Company L.P. and its affiliates.\r\n * File: ProcessPaymentModal.tsx\r\n * Type: Container component */\r\n\r\n// #region Imports\r\nimport React from 'react';\r\n\r\n// Core components\r\nimport Alert from '@powercampus/design-system/react/core/Alert';\r\nimport Button, { ButtonGroup } from '@powercampus/design-system/react/core/Button';\r\nimport Grid from '@powercampus/design-system/react/core/Grid';\r\nimport Modal from '@powercampus/design-system/react/core/Modal';\r\n\r\n// Types\r\nimport { IAlert } from '@powercampus/design-system/types/IAlert';\r\nimport { IJsonResult } from '@powercampus/design-system/types/IJsonResult';\r\nimport { ILogData } from '@powercampus/design-system/types/ILogData';\r\nimport { ResultType } from '@powercampus/design-system/types/ResultType';\r\nimport { PaymentOrigin } from '../../Types/Enum/PaymentOrigin';\r\nimport { IYearTerm } from '../../Types/Generic/IYearTerm';\r\nimport { IRequestTranscript } from '../../Types/Grades/IRequestTranscript';\r\nimport { IPaymentPeriod } from '../../Types/Payment/IPaymentPeriod';\r\nimport { IPaymentRequest } from '../../Types/Payment/IPaymentRequest';\r\nimport { IProcessPaymentModalResources } from '../../Types/Resources/Generic/IProcessPaymentModalResources';\r\n\r\n// Helpers\r\nimport LogData from '@powercampus/design-system/helpers/LogData';\r\nimport Constants from '@powercampus/design-system/helpers/Constants';\r\n\r\n// Requests\r\nimport RequestsLayout from '@powercampus/design-system/requests/Layout';\r\nimport Requests from '../../Requests/Generic/ProcessPaymentModal';\r\n\r\n// State Management\r\nimport LayoutActions from '@powercampus/design-system/flux/actions/LayoutActions';\r\n// #endregion Imports\r\n\r\n// #region Types\r\nexport interface IProcessPaymentModalProps {\r\n amount: number;\r\n applicationId?: number;\r\n conEdTransactionId?: number;\r\n open: boolean;\r\n paymentOrigin: PaymentOrigin;\r\n requestTranscripts?: IRequestTranscript[];\r\n returnUrl?: string;\r\n termSessionId?: string;\r\n yearTerm?: string;\r\n onClose: () => void;\r\n}\r\n\r\ninterface IProcessPaymentModalState {\r\n componentError: boolean;\r\n resources?: IProcessPaymentModalResources;\r\n}\r\n// #endregion Types\r\n\r\n// #region Component\r\nclass ProcessPaymentModal extends React.Component {\r\n private idModule: string;\r\n private idPage: string;\r\n\r\n public readonly state: Readonly;\r\n\r\n public constructor(props) {\r\n super(props);\r\n\r\n // #region Initialize Variables and State\r\n this.idModule = 'Generic';\r\n this.idPage = 'ProcessPaymentModal';\r\n this.state = this.getInitialState();\r\n // #endregion Initialize Variables and State\r\n }\r\n\r\n private getInitialState(): IProcessPaymentModalState {\r\n let resources: IProcessPaymentModalResources | undefined;\r\n if (this.state) {\r\n resources = this.state.resources;\r\n }\r\n return {\r\n componentError: false,\r\n resources: resources\r\n };\r\n }\r\n\r\n // #region Events\r\n private onOk = (): void => {\r\n try {\r\n const {\r\n amount,\r\n applicationId,\r\n conEdTransactionId,\r\n paymentOrigin,\r\n requestTranscripts,\r\n returnUrl,\r\n termSessionId,\r\n yearTerm\r\n } = this.props;\r\n\r\n const paymentRequest: IPaymentRequest = {\r\n amount: amount,\r\n applicationId: applicationId,\r\n conEdTransactionId: conEdTransactionId,\r\n paymentOrigin: paymentOrigin,\r\n returnUrl: returnUrl\r\n } as IPaymentRequest;\r\n if (termSessionId) {\r\n const periodId = termSessionId.split('/');\r\n paymentRequest.paymentPeriod = {\r\n sessionPeriodId: periodId[1] ? Number(periodId[1]) : null,\r\n termPeriodId: periodId[0] ? Number(periodId[0]) : null\r\n } as IPaymentPeriod;\r\n }\r\n else if (yearTerm) {\r\n const split = yearTerm.split('/');\r\n paymentRequest.yearTerm = {\r\n term: split[1],\r\n year: Number(split[0])\r\n } as IYearTerm;\r\n }\r\n if (requestTranscripts) {\r\n Requests.postProcessTranscriptPayment(paymentRequest, this.resolvePostProcessPayment, this.logError, requestTranscripts);\r\n }\r\n else {\r\n Requests.postProcessPayment(paymentRequest, this.resolvePostProcessPayment, this.logError);\r\n }\r\n LayoutActions.setLoading(true);\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onOk.name, e));\r\n }\r\n };\r\n // #endregion Events\r\n\r\n // #region Error Functions\r\n private logError(logData: ILogData): void {\r\n LayoutActions.setLogData(logData);\r\n }\r\n\r\n private redirectError(code: number): void {\r\n LayoutActions.setRedirectCode(code);\r\n }\r\n\r\n private showError(message?: string): void {\r\n LayoutActions.setAlert({ message: message, messageType: ResultType.error } as IAlert);\r\n }\r\n // #endregion Error Functions\r\n\r\n // #region Resolvers\r\n private resolveGetResources = (json: string): void => {\r\n console.log(json);\r\n console.log(JSON.parse(json));\r\n try {\r\n const result: IJsonResult = JSON.parse(json);\r\n if (result.status) {\r\n this.setState({\r\n resources: result.data\r\n });\r\n }\r\n else if (result.code) {\r\n this.redirectError(result.code);\r\n }\r\n else if (result.log) {\r\n this.showError();\r\n }\r\n else {\r\n this.logError(LogData.badJsonResult(this.resolveGetResources.name));\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolveGetResources.name, e));\r\n }\r\n };\r\n\r\n private resolvePostProcessPayment = (json: string): void => {\r\n console.log(json);\r\n console.log(JSON.parse(json));\r\n try {\r\n var complement =`Payment/RedirectToPaymentApi`;\r\n var toUrlAction=`${Constants.webUrl}/${complement}`;\r\n location.href=toUrlAction;\r\n // const result: IJsonResult = JSON.parse(json);\r\n // if (result.status) {\r\n // if (result.data) {\r\n // window.location.replace(encodeURI(result.data));\r\n // LayoutActions.setLoading(false);\r\n // }\r\n // else {\r\n // this.showError();\r\n // }\r\n // }\r\n // else if (result.code) {\r\n // this.redirectError(result.code);\r\n // }\r\n // else if (result.log) {\r\n // this.showError();\r\n // }\r\n // else {\r\n // this.logError(LogData.badJsonResult(this.resolvePostProcessPayment.name));\r\n // }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolvePostProcessPayment.name, e));\r\n }\r\n };\r\n // #endregion Resolvers\r\n\r\n // #region Lifecycle\r\n public componentDidMount(): void {\r\n try {\r\n RequestsLayout.getResources(this.idModule, this.idPage,\r\n this.resolveGetResources,\r\n this.logError);\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.componentDidMount.name, e));\r\n }\r\n }\r\n\r\n public componentDidCatch(error, info): void {\r\n this.setState({\r\n componentError: true\r\n }, () => {\r\n this.logError(LogData.fromComponentException(this.componentDidCatch.name, error, info));\r\n this.redirectError(500);\r\n });\r\n }\r\n // #endregion Lifecycle\r\n\r\n public render(): JSX.Element {\r\n const {\r\n open,\r\n onClose\r\n } = this.props;\r\n\r\n const {\r\n componentError,\r\n resources\r\n } = this.state;\r\n\r\n let contentPage: JSX.Element | undefined;\r\n if (!componentError && resources) {\r\n contentPage = (\r\n \r\n \r\n {resources.btnCancel}\r\n \r\n \r\n {resources.btnOk}\r\n \r\n \r\n )}\r\n maxWidth=\"sm\"\r\n open={open}\r\n showTitleBarClose={false}\r\n onClose={onClose}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n\r\n return (\r\n <>\r\n {contentPage}\r\n \r\n );\r\n }\r\n}\r\n// #endregion Component\r\n\r\n// Export: Component\r\nexport default ProcessPaymentModal;","/*! (c) Andrea Giammarchi - ISC */\nvar self = this || /* istanbul ignore next */ {};\ntry {\n (function (URLSearchParams, plus) {\n if (\n new URLSearchParams('q=%2B').get('q') !== plus ||\n new URLSearchParams({q: plus}).get('q') !== plus ||\n new URLSearchParams([['q', plus]]).get('q') !== plus ||\n new URLSearchParams('q=\\n').toString() !== 'q=%0A' ||\n new URLSearchParams({q: ' &'}).toString() !== 'q=+%26' ||\n new URLSearchParams({q: '%zx'}).toString() !== 'q=%25zx'\n )\n throw URLSearchParams;\n self.URLSearchParams = URLSearchParams;\n }(URLSearchParams, '+'));\n} catch(URLSearchParams) {\n (function (Object, String, isArray) {'use strict';\n var create = Object.create;\n var defineProperty = Object.defineProperty;\n var find = /[!'\\(\\)~]|%20|%00/g;\n var findPercentSign = /%(?![0-9a-fA-F]{2})/g;\n var plus = /\\+/g;\n var replace = {\n '!': '%21',\n \"'\": '%27',\n '(': '%28',\n ')': '%29',\n '~': '%7E',\n '%20': '+',\n '%00': '\\x00'\n };\n var proto = {\n append: function (key, value) {\n appendTo(this._ungap, key, value);\n },\n delete: function (key) {\n delete this._ungap[key];\n },\n get: function (key) {\n return this.has(key) ? this._ungap[key][0] : null;\n },\n getAll: function (key) {\n return this.has(key) ? this._ungap[key].slice(0) : [];\n },\n has: function (key) {\n return key in this._ungap;\n },\n set: function (key, value) {\n this._ungap[key] = [String(value)];\n },\n forEach: function (callback, thisArg) {\n var self = this;\n for (var key in self._ungap)\n self._ungap[key].forEach(invoke, key);\n function invoke(value) {\n callback.call(thisArg, value, String(key), self);\n }\n },\n toJSON: function () {\n return {};\n },\n toString: function () {\n var query = [];\n for (var key in this._ungap) {\n var encoded = encode(key);\n for (var\n i = 0,\n value = this._ungap[key];\n i < value.length; i++\n ) {\n query.push(encoded + '=' + encode(value[i]));\n }\n }\n return query.join('&');\n }\n };\n for (var key in proto)\n defineProperty(URLSearchParams.prototype, key, {\n configurable: true,\n writable: true,\n value: proto[key]\n });\n self.URLSearchParams = URLSearchParams;\n function URLSearchParams(query) {\n var dict = create(null);\n defineProperty(this, '_ungap', {value: dict});\n switch (true) {\n case !query:\n break;\n case typeof query === 'string':\n if (query.charAt(0) === '?') {\n query = query.slice(1);\n }\n for (var\n pairs = query.split('&'),\n i = 0,\n length = pairs.length; i < length; i++\n ) {\n var value = pairs[i];\n var index = value.indexOf('=');\n if (-1 < index) {\n appendTo(\n dict,\n decode(value.slice(0, index)),\n decode(value.slice(index + 1))\n );\n } else if (value.length){\n appendTo(\n dict,\n decode(value),\n ''\n );\n }\n }\n break;\n case isArray(query):\n for (var\n i = 0,\n length = query.length; i < length; i++\n ) {\n var value = query[i];\n appendTo(dict, value[0], value[1]);\n }\n break;\n case 'forEach' in query:\n query.forEach(addEach, dict);\n break;\n default:\n for (var key in query)\n appendTo(dict, key, query[key]);\n }\n }\n\n function addEach(value, key) {\n appendTo(this, key, value);\n }\n\n function appendTo(dict, key, value) {\n var res = isArray(value) ? value.join(',') : value;\n if (key in dict)\n dict[key].push(res);\n else\n dict[key] = [res];\n }\n\n function decode(str) {\n return decodeURIComponent(str.replace(findPercentSign, '%25').replace(plus, ' '));\n }\n\n function encode(str) {\n return encodeURIComponent(str).replace(find, replacer);\n }\n\n function replacer(match) {\n return replace[match];\n }\n\n }(Object, String, Array.isArray));\n}\n\n(function (URLSearchParamsProto) {\n\n var iterable = false;\n try { iterable = !!Symbol.iterator; } catch (o_O) {}\n\n /* istanbul ignore else */\n if (!('forEach' in URLSearchParamsProto)) {\n URLSearchParamsProto.forEach = function forEach(callback, thisArg) {\n var self = this;\n var names = Object.create(null);\n this.toString()\n .replace(/=[\\s\\S]*?(?:&|$)/g, '=')\n .split('=')\n .forEach(function (name) {\n if (!name.length || name in names)\n return;\n (names[name] = self.getAll(name)).forEach(function(value) {\n callback.call(thisArg, value, name, self);\n });\n });\n };\n }\n\n /* istanbul ignore else */\n if (!('keys' in URLSearchParamsProto)) {\n URLSearchParamsProto.keys = function keys() {\n return iterator(this, function(value, key) { this.push(key); });\n };\n }\n\n /* istanbul ignore else */\n if (!('values' in URLSearchParamsProto)) {\n URLSearchParamsProto.values = function values() {\n return iterator(this, function(value, key) { this.push(value); });\n };\n }\n\n /* istanbul ignore else */\n if (!('entries' in URLSearchParamsProto)) {\n URLSearchParamsProto.entries = function entries() {\n return iterator(this, function(value, key) { this.push([key, value]); });\n };\n }\n\n /* istanbul ignore else */\n if (iterable && !(Symbol.iterator in URLSearchParamsProto)) {\n URLSearchParamsProto[Symbol.iterator] = URLSearchParamsProto.entries;\n }\n\n /* istanbul ignore else */\n if (!('sort' in URLSearchParamsProto)) {\n URLSearchParamsProto.sort = function sort() {\n var\n entries = this.entries(),\n entry = entries.next(),\n done = entry.done,\n keys = [],\n values = Object.create(null),\n i, key, value\n ;\n while (!done) {\n value = entry.value;\n key = value[0];\n keys.push(key);\n if (!(key in values)) {\n values[key] = [];\n }\n values[key].push(value[1]);\n entry = entries.next();\n done = entry.done;\n }\n // not the champion in efficiency\n // but these two bits just do the job\n keys.sort();\n for (i = 0; i < keys.length; i++) {\n this.delete(keys[i]);\n }\n for (i = 0; i < keys.length; i++) {\n key = keys[i];\n this.append(key, values[key].shift());\n }\n };\n }\n\n function iterator(self, callback) {\n var items = [];\n self.forEach(callback, items);\n return iterable ?\n items[Symbol.iterator]() :\n {\n next: function() {\n var value = items.shift();\n return {done: value === undefined, value: value};\n }\n };\n }\n\n /* istanbul ignore next */\n (function (Object) {\n var\n dP = Object.defineProperty,\n gOPD = Object.getOwnPropertyDescriptor,\n createSearchParamsPollute = function (search) {\n function append(name, value) {\n URLSearchParamsProto.append.call(this, name, value);\n name = this.toString();\n search.set.call(this._usp, name ? ('?' + name) : '');\n }\n function del(name) {\n URLSearchParamsProto.delete.call(this, name);\n name = this.toString();\n search.set.call(this._usp, name ? ('?' + name) : '');\n }\n function set(name, value) {\n URLSearchParamsProto.set.call(this, name, value);\n name = this.toString();\n search.set.call(this._usp, name ? ('?' + name) : '');\n }\n return function (sp, value) {\n sp.append = append;\n sp.delete = del;\n sp.set = set;\n return dP(sp, '_usp', {\n configurable: true,\n writable: true,\n value: value\n });\n };\n },\n createSearchParamsCreate = function (polluteSearchParams) {\n return function (obj, sp) {\n dP(\n obj, '_searchParams', {\n configurable: true,\n writable: true,\n value: polluteSearchParams(sp, obj)\n }\n );\n return sp;\n };\n },\n updateSearchParams = function (sp) {\n var append = sp.append;\n sp.append = URLSearchParamsProto.append;\n URLSearchParams.call(sp, sp._usp.search.slice(1));\n sp.append = append;\n },\n verifySearchParams = function (obj, Class) {\n if (!(obj instanceof Class)) throw new TypeError(\n \"'searchParams' accessed on an object that \" +\n \"does not implement interface \" + Class.name\n );\n },\n upgradeClass = function (Class) {\n var\n ClassProto = Class.prototype,\n searchParams = gOPD(ClassProto, 'searchParams'),\n href = gOPD(ClassProto, 'href'),\n search = gOPD(ClassProto, 'search'),\n createSearchParams\n ;\n if (!searchParams && search && search.set) {\n createSearchParams = createSearchParamsCreate(\n createSearchParamsPollute(search)\n );\n Object.defineProperties(\n ClassProto,\n {\n href: {\n get: function () {\n return href.get.call(this);\n },\n set: function (value) {\n var sp = this._searchParams;\n href.set.call(this, value);\n if (sp) updateSearchParams(sp);\n }\n },\n search: {\n get: function () {\n return search.get.call(this);\n },\n set: function (value) {\n var sp = this._searchParams;\n search.set.call(this, value);\n if (sp) updateSearchParams(sp);\n }\n },\n searchParams: {\n get: function () {\n verifySearchParams(this, Class);\n return this._searchParams || createSearchParams(\n this,\n new URLSearchParams(this.search.slice(1))\n );\n },\n set: function (sp) {\n verifySearchParams(this, Class);\n createSearchParams(this, sp);\n }\n }\n }\n );\n }\n }\n ;\n try {\n upgradeClass(HTMLAnchorElement);\n if (/^function|object$/.test(typeof URL) && URL.prototype)\n upgradeClass(URL);\n } catch (meh) {}\n }(Object));\n\n}(self.URLSearchParams.prototype, Object));\nexport default self.URLSearchParams;\n","/* Copyright 2019 Ellucian Company L.P. and its affiliates.\r\n * File: SignIn.ts */\r\n\r\n// Types\r\nimport { ILogData } from '@powercampus/design-system/types/ILogData';\r\n\r\n// Helpers\r\nimport Request from '@powercampus/design-system/helpers/Request';\r\n\r\n// Functions for requests\r\nconst SignInRequests = {\r\n getAuthenticationMode(username: string, resolver: (json: string) => void, resolveError: (logData: ILogData) => void): void {\r\n Request.post(this.getAuthenticationMode.name, '/SignIn/GetAuthenticationMode', { username }, resolver, resolveError);\r\n },\r\n getShowForgotPassword(resolver: (json: string) => void, resolveError: (logData: ILogData) => void): void {\r\n Request.get(this.getShowForgotPassword.name, '/SignIn/ShowForgotPassword', resolver, resolveError);\r\n },\r\n postAuthenticateUser(username: string, password: string, resolver: (json: string) => void, resolveError: (logData: ILogData) => void): void {\r\n Request.post(this.postAuthenticateUser.name, '/SignIn/Authenticate', { username, password }, resolver, resolveError);\r\n }\r\n};\r\n\r\n// Export object with the requests\r\nexport default SignInRequests;","/* Copyright 2019 Ellucian Company L.P. and its affiliates.\r\n * File: SignIn.tsx\r\n * Type: Container component */\r\n\r\n// #region Imports\r\nimport URLSearchParams from '@ungap/url-search-params';\r\nimport React from 'react';\r\n\r\n// Core components\r\nimport Button from '@powercampus/design-system/react/core/Button';\r\nimport Card, { CardContent } from '@powercampus/design-system/react/core/Card';\r\nimport Grid from '@powercampus/design-system/react/core/Grid';\r\nimport Modal from '@powercampus/design-system/react/core/Modal';\r\nimport Paragraph from '@powercampus/design-system/react/core/Paragraph';\r\nimport Text from '@powercampus/design-system/react/core/Text';\r\nimport TextField from '@powercampus/design-system/react/core/TextField';\r\n\r\n// Types\r\nimport { IAlert } from '@powercampus/design-system/types/IAlert';\r\nimport { IJsonResult } from '@powercampus/design-system/types/IJsonResult';\r\nimport { ILogData } from '@powercampus/design-system/types/ILogData';\r\nimport { ResultType } from '@powercampus/design-system/types/ResultType';\r\nimport { IAuthResponse } from '../../Types/Generic/IAuthResponse';\r\nimport { ISignInResources } from '../../Types/Resources/Generic/ISignInResources';\r\n\r\n// Helpers\r\nimport Constants from '@powercampus/design-system/helpers/Constants';\r\nimport LogData from '@powercampus/design-system/helpers/LogData';\r\nimport Tokens from '@powercampus/design-system/react/core/styles/Tokens';\r\nimport { createStyles, withStyles, WithStyles } from '@powercampus/design-system/react/core/styles/withStyles';\r\n\r\n// Requests\r\nimport RequestsLayout from '@powercampus/design-system/requests/Layout';\r\nimport Requests from '../../Requests/Generic/SignIn';\r\n\r\n// State Management\r\nimport LayoutActions from '@powercampus/design-system/flux/actions/LayoutActions';\r\nimport LayoutStore from '@powercampus/design-system/flux/stores/LayoutStore';\r\n// #endregion Imports\r\n\r\n// #region Types\r\nexport interface ISignInProps {\r\n className?: string;\r\n open?: boolean;\r\n userName?: string;\r\n onAfterSignIn?: () => void;\r\n onClose?: () => void;\r\n onGoSignUp?: () => void;\r\n}\r\n\r\ninterface ISignInState {\r\n authMode?: number;\r\n componentError: boolean;\r\n hasStore: boolean;\r\n isLoadingNext: boolean;\r\n isLoadingSignIn: boolean;\r\n password: string;\r\n passwordResetURL: string;\r\n resources?: ISignInResources;\r\n showForgotPassword: boolean;\r\n userExists: boolean;\r\n username: string;\r\n}\r\n\r\nconst styles = createStyles({\r\n loginText: {\r\n marginTop: `${Tokens.spacingSmall}!important`\r\n },\r\n spacingButtons: {\r\n paddingTop: Tokens.spacingSmall\r\n },\r\n spacingInstructions: {\r\n paddingTop: Tokens.spacingSmall\r\n },\r\n spacingWelcome: {\r\n marginBottom: Tokens.spacingSmall\r\n }\r\n});\r\n\r\ntype PropsWithStyles = ISignInProps & WithStyles;\r\n// #endregion Types\r\n\r\n// #region Component\r\nclass SignIn extends React.Component {\r\n private idModule: string;\r\n private idPage: string;\r\n\r\n public readonly state: Readonly;\r\n\r\n public constructor(props) {\r\n super(props);\r\n\r\n // #region Initialize Variables and State\r\n this.idModule = 'Generic';\r\n this.idPage = 'SignIn';\r\n this.state = this.getInitialState(this.props.userName);\r\n // #endregion Initialize Variables and State\r\n }\r\n\r\n private getInitialState(userName?: string): ISignInState {\r\n let passwordResetURL: string = '';\r\n let resources: ISignInResources | undefined;\r\n let showForgotPassword: boolean = false;\r\n\r\n if (this.state) {\r\n passwordResetURL = this.state.passwordResetURL;\r\n resources = this.state.resources;\r\n showForgotPassword = this.state.showForgotPassword;\r\n }\r\n return {\r\n authMode: undefined,\r\n componentError: false,\r\n hasStore: false,\r\n isLoadingNext: false,\r\n isLoadingSignIn: false,\r\n password: '',\r\n passwordResetURL: passwordResetURL,\r\n resources: resources,\r\n showForgotPassword: showForgotPassword,\r\n userExists: false,\r\n username: userName || ''\r\n };\r\n }\r\n\r\n // #region Events\r\n private onChangePassword = (event: React.ChangeEvent): void => {\r\n this.setState({\r\n password: event.target.value\r\n });\r\n };\r\n\r\n private onChangeUsername = (event: React.ChangeEvent): void => {\r\n this.setState({\r\n username: event.target.value\r\n });\r\n };\r\n\r\n private onCloseModal = (): void => {\r\n try {\r\n const {\r\n onClose\r\n } = this.props;\r\n const {\r\n isLoadingNext,\r\n isLoadingSignIn\r\n } = this.state;\r\n\r\n if (onClose && !isLoadingNext && !isLoadingSignIn) {\r\n this.setState(this.getInitialState());\r\n onClose();\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onCloseModal.name, e));\r\n }\r\n };\r\n\r\n private onGoSignUpModal = (): void => {\r\n try {\r\n const {\r\n onGoSignUp\r\n } = this.props;\r\n\r\n const {\r\n isLoadingNext,\r\n isLoadingSignIn\r\n } = this.state;\r\n\r\n if (onGoSignUp && !isLoadingNext && !isLoadingSignIn) {\r\n this.setState(this.getInitialState());\r\n onGoSignUp();\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onGoSignUpModal.name, e));\r\n }\r\n };\r\n\r\n private onNext = (): void => {\r\n try {\r\n const {\r\n isLoadingNext,\r\n username\r\n } = this.state;\r\n\r\n if (!isLoadingNext) {\r\n this.showLoaderNext();\r\n Requests.getAuthenticationMode(username, this.resolveGetAuthenticationMode, this.logError);\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onNext.name, e));\r\n }\r\n };\r\n\r\n private onSignIn = (): void => {\r\n try {\r\n const {\r\n authMode,\r\n isLoadingSignIn,\r\n password,\r\n username\r\n } = this.state;\r\n\r\n if (authMode && !isLoadingSignIn) {\r\n this.showLoaderSignIn();\r\n if (authMode === 4) {\r\n window.location.assign(`${Constants.webUrl}/Sso/SAML`);\r\n }\r\n else {\r\n Requests.postAuthenticateUser(username, password, this.resolvePostAuthenticateUser, this.logError);\r\n }\r\n }\r\n else {\r\n this.showError();\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onSignIn.name, e));\r\n }\r\n };\r\n\r\n private onClickForgotPassword = (): void => {\r\n try {\r\n const {\r\n isLoadingNext,\r\n isLoadingSignIn,\r\n passwordResetURL\r\n } = this.state;\r\n\r\n if (passwordResetURL && !isLoadingNext && !isLoadingSignIn) {\r\n window.location.assign(passwordResetURL);\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onClickForgotPassword.name, e));\r\n }\r\n };\r\n\r\n private onUseAnotherAccount = (): void => {\r\n try {\r\n const {\r\n isLoadingNext,\r\n isLoadingSignIn\r\n } = this.state;\r\n\r\n if (!isLoadingNext && !isLoadingSignIn) {\r\n this.setState({\r\n authMode: undefined,\r\n password: '',\r\n username: ''\r\n });\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onUseAnotherAccount.name, e));\r\n }\r\n };\r\n // #endregion Events\r\n\r\n // #region Loader Functions\r\n private hideAllLoaders = (): void => {\r\n this.setState({\r\n isLoadingNext: false,\r\n isLoadingSignIn: false\r\n });\r\n };\r\n\r\n private hideLoaderNext = (): void => {\r\n this.setState({\r\n isLoadingNext: false\r\n });\r\n };\r\n\r\n private hideLoaderSignIn = (): void => {\r\n this.setState({\r\n isLoadingSignIn: false\r\n });\r\n };\r\n\r\n private showLoaderNext = (): void => {\r\n this.setState({\r\n isLoadingNext: true\r\n });\r\n };\r\n\r\n private showLoaderSignIn = (): void => {\r\n this.setState({\r\n isLoadingSignIn: true\r\n });\r\n };\r\n // #endregion Loader Functions\r\n\r\n // #region Error Functions\r\n private logError(logData: ILogData): void {\r\n this.hideAllLoaders();\r\n LayoutActions.setLogData(logData);\r\n }\r\n\r\n private redirectError(code: number): void {\r\n this.hideAllLoaders();\r\n LayoutActions.setRedirectCode(code);\r\n }\r\n\r\n private showError(message?: string): void {\r\n this.hideAllLoaders();\r\n LayoutActions.setAlert({ message: message, messageType: ResultType.error } as IAlert);\r\n }\r\n // #endregion Error Functions\r\n\r\n // #region Resolvers\r\n private resolveGetResources = (json: string): void => {\r\n try {\r\n const result: IJsonResult = JSON.parse(json);\r\n if (result.status) {\r\n this.setState({\r\n resources: result.data\r\n });\r\n }\r\n else if (result.code) {\r\n this.redirectError(result.code);\r\n }\r\n else if (result.log) {\r\n this.showError();\r\n }\r\n else {\r\n this.logError(LogData.badJsonResult(this.resolveGetResources.name));\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolveGetResources.name, e));\r\n }\r\n };\r\n\r\n private resolveGetShowForgotPassword = (json: string): void => {\r\n try {\r\n const result: IJsonResult = JSON.parse(json);\r\n if (result.status) {\r\n this.setState({\r\n passwordResetURL: result.data.passwordResetURL,\r\n showForgotPassword: result.data.enablePasswordReset\r\n });\r\n }\r\n else if (result.code) {\r\n this.redirectError(result.code);\r\n }\r\n else if (result.log) {\r\n this.showError();\r\n }\r\n else {\r\n this.logError(LogData.badJsonResult(this.resolveGetShowForgotPassword.name));\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolveGetShowForgotPassword.name, e));\r\n }\r\n };\r\n\r\n private resolveGetAuthenticationMode = (json: string): void => {\r\n try {\r\n const result: IJsonResult = JSON.parse(json);\r\n if (result.status) {\r\n const {\r\n resources\r\n } = this.state;\r\n if (resources) {\r\n this.setState({\r\n authMode: result.data.mode,\r\n hasStore: result.data.hasStore,\r\n userExists: result.data.userExists\r\n });\r\n\r\n let message: string | undefined;\r\n\r\n if (!result.data.userExists) {\r\n message = resources.lblUserExists;\r\n }\r\n else if (!result.data.hasStore) {\r\n message = resources.lblHasStore;\r\n }\r\n const alert: IAlert = {\r\n message: message,\r\n messageType: ResultType.error\r\n };\r\n\r\n if (message) {\r\n LayoutActions.setAlert(alert);\r\n }\r\n\r\n if (result.data.mode == 3) {\r\n window.location.assign(`${Constants.webUrl}/ADFS/Authentication`);\r\n }\r\n if (result.data.mode == 4) {\r\n window.location.assign(`${Constants.webUrl}/SSO/SAML`);\r\n }\r\n }\r\n this.hideLoaderNext();\r\n }\r\n else if (result.code) {\r\n this.redirectError(result.code);\r\n }\r\n else if (result.log) {\r\n this.showError();\r\n }\r\n else {\r\n this.logError(LogData.badJsonResult(this.resolvePostAuthenticateUser.name));\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolvePostAuthenticateUser.name, e));\r\n }\r\n };\r\n\r\n private resolvePostAuthenticateUser = (json: string): void => {\r\n try {\r\n const result: IJsonResult = JSON.parse(json);\r\n if (result.status) {\r\n const authResponse: IAuthResponse = result.data;\r\n if (authResponse && authResponse.success) {\r\n LayoutStore.setIsAuthenticated(true);\r\n LayoutStore.setMenuOptions(undefined);\r\n\r\n const urlParams: URLSearchParams = new URLSearchParams(window.location.search);\r\n const returnUrl: string | null = urlParams.get('ReturnUrl');\r\n\r\n const {\r\n onAfterSignIn\r\n } = this.props;\r\n\r\n if (onAfterSignIn) {\r\n onAfterSignIn();\r\n }\r\n else {\r\n if (returnUrl && !returnUrl.includes('LogOut')) {\r\n window.location.href = `${returnUrl}`;\r\n }\r\n else {\r\n window.location.href = `${Constants.webUrl}`;\r\n }\r\n }\r\n }\r\n else {\r\n const {\r\n resources\r\n } = this.state;\r\n\r\n if (resources) {\r\n let message: string = '';\r\n if (authResponse.status === 0) {\r\n message = resources.lblNone;\r\n }\r\n else if (authResponse.status === 1) {\r\n message = resources.lblSuccess;\r\n }\r\n else if (authResponse.status === 2) {\r\n message = resources.lblInvalidCredentials;\r\n }\r\n else if (authResponse.status === 3) {\r\n message = resources.lblInvalidPassword;\r\n }\r\n else if (authResponse.status === 4) {\r\n message = resources.lblNoIdentity;\r\n }\r\n else if (authResponse.status === 6) {\r\n message = resources.lblUnknown;\r\n }\r\n\r\n const alert: IAlert = {\r\n message: message,\r\n messageType: ResultType.error\r\n };\r\n\r\n LayoutActions.setAlert(alert);\r\n this.hideLoaderSignIn();\r\n }\r\n }\r\n }\r\n else if (result.code) {\r\n this.redirectError(result.code);\r\n }\r\n else if (result.log) {\r\n this.showError();\r\n }\r\n else {\r\n this.logError(LogData.badJsonResult(this.resolvePostAuthenticateUser.name));\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolvePostAuthenticateUser.name, e));\r\n }\r\n };\r\n // #endregion Resolvers\r\n\r\n // #region Lifecycle\r\n public componentDidMount(): void {\r\n try {\r\n RequestsLayout.getResources(this.idModule, this.idPage,\r\n this.resolveGetResources,\r\n this.logError);\r\n Requests.getShowForgotPassword(this.resolveGetShowForgotPassword, this.logError);\r\n\r\n const {\r\n username\r\n } = this.state;\r\n if (username) {\r\n this.onNext();\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.componentDidMount.name, e));\r\n }\r\n }\r\n\r\n public componentDidCatch(error, info): void {\r\n this.setState({\r\n componentError: true\r\n }, () => {\r\n this.logError(LogData.fromComponentException(this.componentDidCatch.name, error, info));\r\n this.redirectError(500);\r\n });\r\n }\r\n // #endregion Lifecycle\r\n\r\n public render(): JSX.Element {\r\n const {\r\n classes,\r\n className,\r\n open,\r\n onClose,\r\n onGoSignUp\r\n } = this.props;\r\n\r\n const {\r\n authMode,\r\n componentError,\r\n isLoadingNext,\r\n isLoadingSignIn,\r\n password,\r\n resources,\r\n showForgotPassword,\r\n username\r\n } = this.state;\r\n\r\n let contentPage: JSX.Element | undefined;\r\n if (!componentError && resources) {\r\n let forgotPassword: JSX.Element | undefined;\r\n if (showForgotPassword) {\r\n forgotPassword = (\r\n \r\n \r\n {resources.btnForgot}\r\n \r\n \r\n );\r\n }\r\n const stepNumber: number = !authMode ? 1 : (authMode && (authMode === 1 || authMode === 2) ? 2 : 0);\r\n\r\n let title: JSX.Element | undefined;\r\n let loginContent: JSX.Element | JSX.Element[] | undefined;\r\n let button: JSX.Element | undefined;\r\n\r\n switch (stepNumber) {\r\n case 0:\r\n title = (\r\n \r\n {resources.lblLogInTitle}\r\n \r\n );\r\n break;\r\n case 1:\r\n title = (\r\n <>\r\n \r\n {resources.lblLogInTitle}\r\n \r\n {onGoSignUp && (\r\n \r\n )}\r\n \r\n );\r\n button = (\r\n \r\n {resources.btnNext}\r\n \r\n );\r\n loginContent = (\r\n <>\r\n \r\n \r\n {!onClose && (\r\n <>\r\n {title}\r\n \r\n )}\r\n \r\n \r\n \r\n {!onClose && (\r\n \r\n \r\n {button}\r\n \r\n \r\n )}\r\n \r\n );\r\n break;\r\n case 2:\r\n title = (\r\n <>\r\n \r\n {resources.lblWelcome}\r\n \r\n \r\n {username}\r\n \r\n \r\n \r\n \r\n \r\n {resources.lblUseAnotherAccount}\r\n \r\n \r\n \r\n \r\n \r\n );\r\n button = (\r\n \r\n {resources.btnSingIn}\r\n \r\n );\r\n loginContent = (\r\n <>\r\n \r\n \r\n {!onClose && (\r\n <>\r\n {title}\r\n \r\n )}\r\n \r\n \r\n \r\n {!onClose && (\r\n \r\n {forgotPassword && (\r\n \r\n {forgotPassword}\r\n \r\n )}\r\n \r\n {button}\r\n \r\n \r\n )}\r\n {onClose && (\r\n \r\n {forgotPassword && (\r\n \r\n {forgotPassword}\r\n \r\n )}\r\n \r\n )}\r\n \r\n );\r\n break;\r\n }\r\n\r\n if (onClose) {\r\n contentPage = (\r\n \r\n {loginContent}\r\n \r\n );\r\n }\r\n else {\r\n contentPage = (\r\n \r\n \r\n {loginContent}\r\n \r\n \r\n );\r\n }\r\n }\r\n\r\n return (\r\n <>\r\n {contentPage}\r\n \r\n );\r\n }\r\n}\r\n// #endregion Component\r\n\r\n// Export: Component\r\nexport default withStyles(styles)(SignIn);","/* Copyright 2019 Ellucian Company L.P. and its affiliates.\r\n * File: AddressStatus - Copy.ts */\r\n\r\nexport enum ChangePasswordResponse {\r\n success = 0,\r\n newPasswordValid = 1,\r\n nullValue = 2,\r\n minLength = 3,\r\n upperCase = 4,\r\n lowerCase = 5,\r\n digits = 6,\r\n symbols = 7,\r\n currentPasswordInvalid = 8\r\n}","export const HexRegExp = new RegExp(/^#([0-9a-f]{6}|[0-9a-f]{3})$/);\r\nexport const JustNumbersAndLettersRegExp = new RegExp(/[^A-Za-z0-9Ññ]/);\r\nexport const NoNumbersRegExp = new RegExp(/([A-Za-zñ<> äÄëËïÏöÖüÜáÁéÉíÍóÓúÚýÝ'¿\"#_-Ä-´°%;&¨Ñ,¡.*+?^=!:$(){}|[\\]\\/\\\\])/);\r\nexport const SpecialCharsRegExp = new RegExp(/([<> äÄëËïÏöÖüÜáÁéÉíÍóÓúÚýÝ'¿\"#´°%;&¨,¡.*+?^=!:$(){}|[\\]\\/\\\\])/);\r\nexport const UrlRegExp = new RegExp(/^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$/);\r\nexport const emailIsValid = (value, expression) => Boolean(value.match(expression));\r\nexport const hexIsValid = (value) => HexRegExp.test(value);\r\nexport const urlIsValid = (value) => UrlRegExp.test(value);\r\nexport const hasJustNumbersAndLetters = (value) => !JustNumbersAndLettersRegExp.test(value);\r\nexport const hasNoNumbers = (value) => NoNumbersRegExp.test(value);\r\nexport const hasSpecialChars = (value) => SpecialCharsRegExp.test(value);\r\nexport const replaceSpecialChars = (value, newValue) => value.replace(SpecialCharsRegExp, newValue);\r\n","/* Copyright 2019-2020 Ellucian Company L.P. and its affiliates.\r\n * File: SignUp.ts */\r\n\r\n// Types\r\nimport { ILogData } from '@powercampus/design-system/types/ILogData';\r\nimport { IIdentityAccount } from '../../Types/Account/IIdentityAccount';\r\n\r\n// Helpers\r\nimport Request from '@powercampus/design-system/helpers/Request';\r\n\r\n// Functions for requests\r\nconst SignUpRequests = {\r\n getEmailRegExp(resolver: (json: string) => void, resolveError: (logData: ILogData) => void): void {\r\n Request.post(this.getEmailRegExp.name, '/Settings/EmailRegExp', null, resolver, resolveError);\r\n },\r\n postSignUpApplication(account: IIdentityAccount,\r\n resolver: (json: string) => void,\r\n resolveError: (logData: ILogData) => void): void {\r\n Request.post(this.postSignUpApplication.name, '/SignUp/Application', { account }, resolver, resolveError);\r\n },\r\n postSignUpConed(account: IIdentityAccount,\r\n resolver: (json: string) => void,\r\n resolveError: (logData: ILogData) => void): void {\r\n Request.post(this.postSignUpConed.name, '/SignUp/ConEd', { account }, resolver, resolveError);\r\n }\r\n};\r\n\r\n// Export object with the requests\r\nexport default SignUpRequests;","/* Copyright 2019 Ellucian Company L.P. and its affiliates.\r\n * File: SignUp.tsx\r\n * Type: Container component */\r\n\r\n// #region Imports\r\nimport React from 'react';\r\n\r\n// Core components\r\nimport Button from '@powercampus/design-system/react/core/Button';\r\nimport Grid from '@powercampus/design-system/react/core/Grid';\r\nimport Modal from '@powercampus/design-system/react/core/Modal';\r\nimport Paragraph from '@powercampus/design-system/react/core/Paragraph';\r\nimport Text from '@powercampus/design-system/react/core/Text';\r\nimport TextField from '@powercampus/design-system/react/core/TextField';\r\n\r\n// Types\r\nimport { IAlert } from '@powercampus/design-system/types/IAlert';\r\nimport { IJsonResult } from '@powercampus/design-system/types/IJsonResult';\r\nimport { ILogData } from '@powercampus/design-system/types/ILogData';\r\nimport { ResultType } from '@powercampus/design-system/types/ResultType';\r\nimport { IIdentityAccount, IIdentityAccountValidations, IResultSignUp } from '../../Types/Account/IIdentityAccount';\r\nimport { ChangePasswordResponse } from '../../Types/Enum/ChangePasswordResponse';\r\nimport { ISignUpResources } from '../../Types/Resources/Generic/ISignUpResources';\r\n\r\n// Helpers\r\nimport { emailIsValid } from '@powercampus/design-system/helpers/CharRegExp';\r\nimport Format from '@powercampus/design-system/helpers/Format';\r\nimport LogData from '@powercampus/design-system/helpers/LogData';\r\nimport Tokens from '@powercampus/design-system/react/core/styles/Tokens';\r\nimport { createStyles, withStyles, WithStyles } from '@powercampus/design-system/react/core/styles/withStyles';\r\n\r\n// Requests\r\nimport RequestsLayout from '@powercampus/design-system/requests/Layout';\r\nimport Requests from '../../Requests/Generic/SignUp';\r\n\r\n// State Management\r\nimport LayoutActions from '@powercampus/design-system/flux/actions/LayoutActions';\r\n// #endregion Imports\r\n\r\n// #region Types\r\nexport interface ISignUpProps {\r\n open?: boolean;\r\n type: 'coned' | 'application' | 'shared';\r\n onAfterSignUp?: (userName?: string) => void;\r\n onClose?: () => void;\r\n onGoSignIn?: () => void;\r\n}\r\n\r\ninterface ISignUpState {\r\n account: IIdentityAccount;\r\n accountValidations: IIdentityAccountValidations;\r\n componentError: boolean;\r\n emailRegExp?: string;\r\n isLoadingSave: boolean;\r\n resources?: ISignUpResources;\r\n}\r\n\r\nconst styles = createStyles({\r\n spacingButtons: {\r\n paddingTop: Tokens.spacingSmall\r\n },\r\n spacingInstructions: {\r\n paddingTop: Tokens.spacingSmall\r\n }\r\n});\r\n\r\ntype PropsWithStyles = ISignUpProps & WithStyles;\r\n// #endregion Types\r\n\r\n// #region Component\r\nclass SignUp extends React.Component {\r\n private idModule: string;\r\n private idPage: string;\r\n\r\n public readonly state: Readonly;\r\n\r\n public constructor(props) {\r\n super(props);\r\n\r\n // #region Initialize Variables and State\r\n this.idModule = 'Generic';\r\n this.idPage = 'SignUp';\r\n this.state = this.getInitialState();\r\n // #endregion Initialize Variables and State\r\n }\r\n\r\n private getInitialState(): ISignUpState {\r\n let resources: ISignUpResources | undefined;\r\n if (this.state) {\r\n resources = this.state.resources;\r\n }\r\n return {\r\n account: {\r\n email: '',\r\n firstName: '',\r\n lastName: '',\r\n password: ''\r\n },\r\n accountValidations: {\r\n confirmPassword: '',\r\n\r\n confirmPasswordModified: false,\r\n emailModified: false,\r\n firstNameModified: false,\r\n lastNameModified: false,\r\n passwordModified: false,\r\n\r\n emailInvalid: false,\r\n passwordInvalid: false,\r\n\r\n passwordInvalidMessage: '',\r\n\r\n existingUser: false\r\n },\r\n componentError: false,\r\n isLoadingSave: false,\r\n resources: resources\r\n };\r\n }\r\n\r\n // #region Events\r\n private onChangeTextField = (event: React.ChangeEvent): void => {\r\n try {\r\n const {\r\n account,\r\n accountValidations,\r\n emailRegExp\r\n } = this.state;\r\n\r\n const id: string = event.target.id;\r\n const value: string = event.target.value;\r\n switch (id) {\r\n case 'txtFirstName':\r\n if (value.length <= 60) {\r\n account.firstName = value;\r\n }\r\n accountValidations.firstNameModified = true;\r\n break;\r\n case 'txtLastName':\r\n if (value.length <= 60) {\r\n account.lastName = value;\r\n }\r\n accountValidations.lastNameModified = true;\r\n break;\r\n case 'txtEmail':\r\n if (value.length <= 255) {\r\n account.email = value;\r\n }\r\n if (emailRegExp && account.email) {\r\n accountValidations.emailInvalid = !emailIsValid(account.email, emailRegExp);\r\n }\r\n else {\r\n accountValidations.emailInvalid = false;\r\n }\r\n accountValidations.emailModified = true;\r\n break;\r\n case 'txtPassword':\r\n if (value.length <= 30) {\r\n account.password = value;\r\n }\r\n accountValidations.passwordModified = true;\r\n accountValidations.passwordInvalid = false;\r\n accountValidations.passwordInvalidMessage = '';\r\n break;\r\n case 'txtConfirmPassword':\r\n if (value.length <= 30) {\r\n accountValidations.confirmPassword = value;\r\n }\r\n accountValidations.confirmPasswordModified = true;\r\n accountValidations.passwordInvalid = false;\r\n accountValidations.passwordInvalidMessage = '';\r\n break;\r\n }\r\n this.setState({\r\n account: account,\r\n accountValidations: accountValidations\r\n });\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onChangeTextField.name, e));\r\n }\r\n };\r\n\r\n private onCloseModal = (): void => {\r\n try {\r\n const {\r\n onClose\r\n } = this.props;\r\n\r\n const {\r\n isLoadingSave\r\n } = this.state;\r\n\r\n if (onClose && !isLoadingSave) {\r\n this.setState(this.getInitialState());\r\n onClose();\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onCloseModal.name, e));\r\n }\r\n };\r\n\r\n private onCreateAccount = (): void => {\r\n try {\r\n const {\r\n type\r\n } = this.props;\r\n const {\r\n account,\r\n accountValidations,\r\n isLoadingSave\r\n } = this.state;\r\n\r\n if (!isLoadingSave) {\r\n accountValidations.confirmPasswordModified = true;\r\n accountValidations.emailModified = true;\r\n accountValidations.firstNameModified = true;\r\n accountValidations.lastNameModified = true;\r\n accountValidations.passwordModified = true;\r\n this.setState({\r\n account: account,\r\n accountValidations: accountValidations\r\n });\r\n\r\n if (Boolean(accountValidations.confirmPassword)\r\n && Boolean(account.email)\r\n && !accountValidations.emailInvalid\r\n && Boolean(account.firstName)\r\n && Boolean(account.lastName)\r\n && Boolean(account.password)\r\n && account.password === accountValidations.confirmPassword) {\r\n this.showLoaderSave();\r\n switch (type) {\r\n case 'application':\r\n Requests.postSignUpApplication(account, this.resolvePostSignUp, this.logError);\r\n break;\r\n case 'coned':\r\n Requests.postSignUpConed(account, this.resolvePostSignUp, this.logError);\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onCreateAccount.name, e));\r\n }\r\n };\r\n\r\n private onGoSignInModal = (): void => {\r\n try {\r\n const {\r\n onGoSignIn\r\n } = this.props;\r\n\r\n const {\r\n isLoadingSave\r\n } = this.state;\r\n\r\n if (onGoSignIn && !isLoadingSave) {\r\n this.setState(this.getInitialState());\r\n onGoSignIn();\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onGoSignInModal.name, e));\r\n }\r\n };\r\n // #endregion Events\r\n\r\n // #region Loader Functions\r\n private hideAllLoaders = (): void => {\r\n this.setState({\r\n isLoadingSave: false\r\n });\r\n };\r\n\r\n private hideLoaderSave = (): void => {\r\n this.setState({\r\n isLoadingSave: false\r\n });\r\n };\r\n\r\n private showLoaderSave = (): void => {\r\n this.setState({\r\n isLoadingSave: true\r\n });\r\n };\r\n // #endregion Loader Functions\r\n\r\n // #region Error Functions\r\n private logError(logData: ILogData): void {\r\n this.hideAllLoaders();\r\n LayoutActions.setLogData(logData);\r\n }\r\n\r\n private redirectError(code: number): void {\r\n this.hideAllLoaders();\r\n LayoutActions.setRedirectCode(code);\r\n }\r\n\r\n private showError(message?: string): void {\r\n this.hideAllLoaders();\r\n LayoutActions.setAlert({ message: message, messageType: ResultType.error } as IAlert);\r\n }\r\n // #endregion Error Functions\r\n\r\n // #region Resolvers\r\n private resolveGetEmailRegExp = (json: string): void => {\r\n try {\r\n const result: IJsonResult = JSON.parse(json);\r\n if (result.status) {\r\n this.setState({\r\n emailRegExp: result.data\r\n });\r\n }\r\n else if (result.code) {\r\n this.redirectError(result.code);\r\n }\r\n else if (result.log) {\r\n this.showError();\r\n }\r\n else {\r\n this.logError(LogData.badJsonResult(this.resolveGetEmailRegExp.name));\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolveGetEmailRegExp.name, e));\r\n }\r\n };\r\n private resolveGetResources = (json: string): void => {\r\n try {\r\n const result: IJsonResult = JSON.parse(json);\r\n if (result.status) {\r\n this.setState({\r\n resources: result.data\r\n });\r\n }\r\n else if (result.code) {\r\n this.redirectError(result.code);\r\n }\r\n else if (result.log) {\r\n this.showError();\r\n }\r\n else {\r\n this.logError(LogData.badJsonResult(this.resolveGetResources.name));\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolveGetResources.name, e));\r\n }\r\n };\r\n\r\n private resolvePostSignUp = (json: string): void => {\r\n try {\r\n const result: IJsonResult = JSON.parse(json);\r\n if (result.status) {\r\n const resultSignUp: IResultSignUp = result.data;\r\n if (resultSignUp.status === 0) {\r\n const {\r\n onAfterSignUp\r\n } = this.props;\r\n\r\n const {\r\n resources\r\n } = this.state;\r\n\r\n if (resources) {\r\n LayoutActions.setAlert({\r\n message: resources.lblCreatedSuccessfully,\r\n messageType: ResultType.success\r\n } as IAlert);\r\n if (onAfterSignUp) {\r\n onAfterSignUp(result.data.userName);\r\n }\r\n this.setState(this.getInitialState());\r\n }\r\n }\r\n else if (resultSignUp.status === 1) {\r\n const {\r\n accountValidations,\r\n resources\r\n } = this.state;\r\n\r\n if (accountValidations && resources) {\r\n accountValidations.passwordInvalid = true;\r\n switch (resultSignUp.passwordValidation) {\r\n case ChangePasswordResponse.digits:\r\n accountValidations.passwordInvalidMessage = resources.lblPasswordDigits;\r\n break;\r\n case ChangePasswordResponse.lowerCase:\r\n accountValidations.passwordInvalidMessage = resources.lblPasswordLowerCase;\r\n break;\r\n case ChangePasswordResponse.minLength:\r\n accountValidations.passwordInvalidMessage\r\n = Format.toString(resources.formatPasswordMinLength, [resultSignUp.passwordMinLength]);\r\n break;\r\n case ChangePasswordResponse.symbols:\r\n accountValidations.passwordInvalidMessage = resources.lblPasswordSymbols;\r\n break;\r\n case ChangePasswordResponse.upperCase:\r\n accountValidations.passwordInvalidMessage = resources.lblPasswordUpperCase;\r\n break;\r\n }\r\n\r\n this.setState({\r\n accountValidations: accountValidations\r\n });\r\n }\r\n }\r\n else if (resultSignUp.status === -1) {\r\n const {\r\n accountValidations\r\n } = this.state;\r\n\r\n if (accountValidations) {\r\n accountValidations.existingUser = true;\r\n this.setState({\r\n accountValidations: accountValidations\r\n });\r\n }\r\n }\r\n else {\r\n this.showError();\r\n }\r\n this.hideLoaderSave();\r\n }\r\n else if (result.code) {\r\n this.redirectError(result.code);\r\n }\r\n else if (result.log) {\r\n this.showError();\r\n }\r\n else {\r\n this.logError(LogData.badJsonResult(this.resolvePostSignUp.name));\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolvePostSignUp.name, e));\r\n }\r\n };\r\n // #endregion Resolvers\r\n\r\n // #region Lifecycle\r\n public componentDidMount(): void {\r\n try {\r\n RequestsLayout.getResources(this.idModule, this.idPage,\r\n this.resolveGetResources,\r\n this.logError);\r\n Requests.getEmailRegExp(this.resolveGetEmailRegExp, this.logError);\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.componentDidMount.name, e));\r\n }\r\n }\r\n\r\n public componentDidCatch(error, info): void {\r\n this.setState({\r\n componentError: true\r\n }, () => {\r\n this.logError(LogData.fromComponentException(this.componentDidCatch.name, error, info));\r\n this.redirectError(500);\r\n });\r\n }\r\n // #endregion Lifecycle\r\n\r\n public render(): JSX.Element {\r\n const {\r\n classes,\r\n open,\r\n onClose,\r\n onGoSignIn\r\n } = this.props;\r\n\r\n const {\r\n account,\r\n accountValidations,\r\n componentError,\r\n isLoadingSave,\r\n resources\r\n } = this.state;\r\n\r\n let contentPage: JSX.Element | undefined;\r\n if (!componentError && resources) {\r\n let title: JSX.Element | undefined;\r\n let newAccountContent: JSX.Element | JSX.Element[] | undefined;\r\n let button: JSX.Element | undefined;\r\n\r\n // #region First Name\r\n let errorFirstName: boolean = false;\r\n let errorTextFirstName: string | undefined;\r\n if (accountValidations.firstNameModified) {\r\n errorFirstName = !Boolean(account.firstName);\r\n errorTextFirstName = errorFirstName ?\r\n resources.lblFirstNameRequired\r\n : undefined;\r\n }\r\n // #endregion First Name\r\n\r\n // #region Last Name\r\n let errorLastName: boolean = false;\r\n let errorTextLastName: string | undefined;\r\n if (accountValidations.lastNameModified) {\r\n errorLastName = !Boolean(account.lastName);\r\n errorTextLastName = errorLastName ?\r\n resources.lblLastNameRequired\r\n : undefined;\r\n }\r\n // #endregion Last Name\r\n\r\n // #region Email\r\n let errorEmail: boolean = false;\r\n let errorTextEmail: string | undefined;\r\n if (accountValidations.emailModified) {\r\n errorEmail = !Boolean(account.email)\r\n || accountValidations.emailInvalid\r\n || accountValidations.existingUser;\r\n errorTextEmail = !Boolean(account.email) ?\r\n resources.lblEmailRequired\r\n : (accountValidations.emailInvalid ?\r\n resources.lblEmailInvalid\r\n : accountValidations.existingUser ?\r\n resources.lblExistingUser\r\n : undefined);\r\n }\r\n // #endregion Email\r\n\r\n // #region Password\r\n let errorPassword: boolean = false;\r\n let errorTextPassword: string | undefined;\r\n if (accountValidations.passwordModified) {\r\n errorPassword = !Boolean(account.password)\r\n || accountValidations.passwordInvalid;\r\n errorTextPassword = !Boolean(account.password) ?\r\n resources.lblPasswordRequired\r\n : (accountValidations.passwordInvalid ?\r\n accountValidations.passwordInvalidMessage\r\n : undefined);\r\n }\r\n // #endregion Password\r\n\r\n // #region Confirm password\r\n let errorConfirmPassword: boolean = false;\r\n let errorTextConfirmPassword: string | undefined;\r\n if (accountValidations.confirmPasswordModified) {\r\n errorConfirmPassword = !Boolean(accountValidations.confirmPassword)\r\n || accountValidations.confirmPassword !== account.password;\r\n errorTextConfirmPassword = !Boolean(accountValidations.confirmPassword) ?\r\n resources.lblConfirmPasswordRequired\r\n : (accountValidations.confirmPassword !== account.password ?\r\n resources.lblPasswordsNotMatch : undefined);\r\n }\r\n // #endregion Confirm password\r\n\r\n title = (\r\n <>\r\n \r\n {resources.lblCreateAccount}\r\n \r\n {onGoSignIn && (\r\n \r\n )}\r\n \r\n );\r\n button = (\r\n \r\n {resources.btnCreateAccount}\r\n \r\n );\r\n newAccountContent = (\r\n <>\r\n {!onClose && (\r\n \r\n \r\n {title}\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n {resources.lblContactInformation}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {!onClose && (\r\n \r\n \r\n {button}\r\n \r\n \r\n )}\r\n \r\n );\r\n\r\n if (onClose) {\r\n contentPage = (\r\n \r\n {newAccountContent}\r\n \r\n );\r\n }\r\n else {\r\n contentPage = (\r\n <>\r\n {newAccountContent}\r\n \r\n );\r\n }\r\n }\r\n\r\n return (\r\n <>\r\n {contentPage}\r\n \r\n );\r\n }\r\n}\r\n// #endregion Component\r\n\r\n// Export: Component\r\nexport default withStyles(styles)(SignUp);","/* Copyright 2019 Ellucian Company L.P. and its affiliates.\r\n * File: Attachments.tsx\r\n * Type: Presentation component */\r\n\r\n// #region Imports\r\nimport React from 'react';\r\n\r\n// Core components\r\nimport Button from '@powercampus/design-system/react/core/Button';\r\nimport Card, { CardContent } from '@powercampus/design-system/react/core/Card';\r\nimport Divider from '@powercampus/design-system/react/core/Divider';\r\nimport Grid from '@powercampus/design-system/react/core/Grid';\r\nimport Hidden from '@powercampus/design-system/react/core/Hidden';\r\nimport Icon from '@powercampus/design-system/react/core/Icon';\r\nimport IconButton from '@powercampus/design-system/react/core/IconButton';\r\nimport IconLink from '@powercampus/design-system/react/core/IconLink';\r\nimport MessageStyled from '@powercampus/design-system/react/core/MessageStyled';\r\nimport Table, { TableBody, TableCell, TableHead, TableRow } from '@powercampus/design-system/react/core/Table';\r\nimport Text from '@powercampus/design-system/react/core/Text';\r\nimport Tooltip from '@powercampus/design-system/react/core/Tooltip';\r\n\r\n// Helpers\r\nimport Format from '@powercampus/design-system/helpers/Format';\r\nimport Tokens from '@powercampus/design-system/react/core/styles/Tokens';\r\nimport { createStyles, Theme, withStyles, WithStyles } from '@powercampus/design-system/react/core/styles/withStyles';\r\n\r\n// Types\r\nimport { IApplicationAttachment } from '../../../Types/Applications/IApplicationAttachment';\r\nimport { IAttachments } from '../../../Types/Resources/Admissions/IApplicationFormResources';\r\n// #endregion Imports\r\n// #region Types\r\n\r\nexport interface IAttachmentProps {\r\n attachments?: IApplicationAttachment[];\r\n numberOfAttachments: number;\r\n totalSize?: string;\r\n onClickContinue: (event: React.MouseEvent) => void;\r\n onClickInfo: (event: React.MouseEvent) => void;\r\n onClickOpenFolder: (event: React.MouseEvent) => void;\r\n onClickRemoveAttachment: (event: React.MouseEvent) => void;\r\n resources: IAttachments;\r\n}\r\n\r\nconst styles = (theme: Theme) => createStyles({\r\n buttonContainer: {\r\n marginTop: Tokens.spacingMedium\r\n },\r\n buttonStep: {\r\n marginRight: Tokens.spacingSmall\r\n },\r\n icon: {\r\n color: theme.palette.action.active,\r\n cursor: 'pointer'\r\n },\r\n inline: {\r\n display: 'inline'\r\n },\r\n marginLeft: {\r\n display: 'inline',\r\n marginLeft: Tokens.sizingSmall\r\n },\r\n marginRigth: {\r\n display: 'inline',\r\n marginRigth: Tokens.sizingSmall\r\n },\r\n table: {\r\n '& > tbody > tr > th:nth-child(1)': {\r\n width: '70%'\r\n },\r\n '& > tbody > tr > th:nth-child(2)': {\r\n width: '10%'\r\n },\r\n '& > tbody > tr > th:nth-child(3)': {\r\n width: '10%'\r\n },\r\n '& > tbody > tr > th:nth-child(4)': {\r\n width: '10%'\r\n }\r\n }\r\n});\r\n\r\ntype PropsWithStyles = IAttachmentProps & WithStyles;\r\n// #endregion Types\r\n\r\n// #region Component\r\nconst Attachment: React.FC = (props: PropsWithStyles): JSX.Element => {\r\n const {\r\n attachments,\r\n numberOfAttachments,\r\n classes,\r\n totalSize,\r\n onClickContinue,\r\n onClickInfo,\r\n onClickOpenFolder,\r\n onClickRemoveAttachment,\r\n resources\r\n } = props;\r\n\r\n let table: JSX.Element | undefined;\r\n if (attachments && attachments.length > 0) {\r\n table = (\r\n \r\n \r\n \r\n \r\n {resources.lblName}\r\n \r\n \r\n {resources.lblType}\r\n \r\n \r\n {resources.lblSize}\r\n \r\n \r\n {resources.lblDelete}\r\n \r\n \r\n \r\n \r\n {attachments.map((attachment, i) => (\r\n \r\n \r\n \r\n {attachment.attachmentTitle}\r\n \r\n \r\n \r\n \r\n {attachment.extension}\r\n \r\n \r\n \r\n \r\n {attachment.fileSize}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ))}\r\n \r\n \r\n );\r\n }\r\n\r\n let content: JSX.Element | undefined;\r\n if (resources) {\r\n content = (\r\n \r\n \r\n \r\n \r\n \r\n {resources.lblTitle}\r\n \r\n \r\n \r\n \r\n \r\n {Format.toString(resources.lblInstructions, [numberOfAttachments])}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {resources.lblChooseFile}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n attachments && attachments.length > 0 ?\r\n (\r\n <>\r\n \r\n {resources.lblAttachments}\r\n \r\n {table}\r\n \r\n \r\n ) :\r\n (\r\n \r\n )\r\n }\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n {resources.lblContinue}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n }\r\n\r\n return (\r\n <>\r\n {content}\r\n \r\n );\r\n};\r\n// #endregion Component\r\n\r\n// Export: Component\r\nexport default withStyles(styles)(Attachment);","/* Copyright 2019 Ellucian Company L.P. and its affiliates.\r\n * File: ConfirmationSavedModal.tsx\r\n * Type: Presentation component */\r\n\r\n// #region Imports\r\nimport React from 'react';\r\n\r\n// Generic components\r\nimport Button from '@powercampus/design-system/react/core/Button';\r\nimport Grid from '@powercampus/design-system/react/core/Grid';\r\nimport Modal from '@powercampus/design-system/react/core/Modal';\r\nimport Text from '@powercampus/design-system/react/core/Text';\r\n\r\n// Types\r\nimport { IConfirmationSavedModal } from '../../../Types/Resources/Admissions/IApplicationFormResources';\r\n// #endregion Imports\r\n\r\n// #region Types\r\nexport interface IConfirmationSavedModalProps {\r\n confirmationMessage: string;\r\n open: boolean;\r\n resources: IConfirmationSavedModal;\r\n onCloseModal: () => void;\r\n}\r\n// #endregion Types\r\n\r\n// #region Component\r\nconst ConfirmationSavedModal: React.FC = (props: IConfirmationSavedModalProps): JSX.Element => {\r\n const {\r\n confirmationMessage,\r\n open,\r\n resources,\r\n onCloseModal\r\n } = props;\r\n\r\n return (\r\n \r\n {resources.btnOk}\r\n \r\n )}\r\n id=\"confirmationSaveModal\"\r\n header={resources.lblTitle}\r\n maxWidth=\"md\"\r\n open={open}\r\n onClose={onCloseModal}\r\n >\r\n \r\n \r\n \r\n {confirmationMessage}\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n// #endregion Component\r\n\r\n// Export: Component\r\nexport default ConfirmationSavedModal;","/* Copyright 2019 Ellucian Company L.P. and its affiliates.\r\n* File: ApplicationForm.ts */\r\n\r\n// Types\r\nimport { ILogData } from '@powercampus/design-system/types/ILogData';\r\nimport { IApplication } from '../../Types/Applications/IApplication';\r\nimport { IApplicationAttachment } from '../../Types/Applications/IApplicationAttachment';\r\nimport { ISavedApplication } from '../../Types/Applications/ISavedApplication';\r\nimport { IApplicationForm } from '../../Types/Form/IApplicationForm';\r\n\r\n// Helpers\r\nimport Request from '@powercampus/design-system/helpers/Request';\r\n\r\n// Functions for requests\r\nconst ApplicationFormRequests = {\r\n // #region Addresses\r\n getAddresses(startIndex: number, length: number, zipCode?: string, resolver?: (json: string) => void,\r\n resolveError?: (logData: ILogData) => void): void {\r\n Request.post(this.getAddresses.name, '/Address/Index',\r\n {\r\n length,\r\n startIndex,\r\n zipCode\r\n },\r\n resolver, resolveError);\r\n },\r\n // #endregion Addresses\r\n\r\n // #region ApplicationHandler\r\n getComponents(id: number, resolver: (json: string) => void, resolveError: (logData: ILogData) => void): void {\r\n Request.post(this.getComponents.name, '/Forms/Details',\r\n {\r\n id: id,\r\n type: 0\r\n },\r\n resolver, resolveError);\r\n },\r\n\r\n getSavedApplicationComponents(savedApplicationToken: string,\r\n resolver: (json: string) => void, resolveError: (logData: ILogData) => void): void {\r\n Request.post(this.getComponents.name, '/Forms/Saved',\r\n {\r\n savedApplicationToken: savedApplicationToken\r\n },\r\n resolver, resolveError);\r\n },\r\n\r\n postSubmit(application: IApplication,\r\n resolver: (json: string) => void, resolveError: (logData: ILogData) => void): void {\r\n Request.post(this.postSubmit.name, '/Applications/Create', application, resolver, resolveError);\r\n },\r\n\r\n postCreateSavedApplication(savedApplication: ISavedApplication,\r\n components: IApplicationForm, resolver: (json: string) => void, resolveError: (logData: ILogData) => void): void {\r\n Request.post(this.postCreateSavedApplication.name,\r\n '/Applications/CreateSavedApplication',\r\n {\r\n components: components,\r\n savedApplication: savedApplication\r\n },\r\n resolver,\r\n resolveError);\r\n },\r\n\r\n postCreateSaveApplicationNotification(urlToSend: string, email: string,\r\n formApplicationName: string, resolver: (json: string) => void, resolveError: (ILogData: ILogData) => void): void {\r\n Request.post(this.postCreateSaveApplicationNotification.name,\r\n '/Applications/CreateSaveApplicationNotification',\r\n {\r\n email: email,\r\n formApplicationName: formApplicationName,\r\n urlToSend: urlToSend\r\n },\r\n resolver,\r\n resolveError);\r\n },\r\n\r\n postCreateApplicationAttachment(applicationAttachment: IApplicationAttachment,\r\n resolver: (json: string) => void, resolveError: (logData: ILogData) => void): void {\r\n Request.post(this.postCreateApplicationAttachment.name,\r\n '/Applications/CreateApplicationAttachment',\r\n {\r\n applicationAttachment: applicationAttachment\r\n },\r\n resolver,\r\n resolveError);\r\n },\r\n\r\n postListApplicationAttachments(applicationId: number,\r\n resolver: (json: string) => void, resolveError: (logData: ILogData) => void): void {\r\n Request.post(this.postListApplicationAttachments.name,\r\n '/Applications/ListApplicationAttachments',\r\n {\r\n applicationId: applicationId\r\n },\r\n resolver,\r\n resolveError);\r\n },\r\n\r\n postDeleteApplicationAttachment(attachmentId: number,\r\n resolver: (json: string) => void, resolveError: (logData: ILogData) => void): void {\r\n Request.post(this.postListApplicationAttachments.name,\r\n '/Applications/DeleteApplicationAttachment',\r\n {\r\n attachmentId: attachmentId\r\n },\r\n resolver,\r\n resolveError);\r\n },\r\n\r\n getApplicationAttachments(applicationId: number,\r\n resolver: (json: string) => void, resolveError: (logData: ILogData) => void): void {\r\n Request.post(this.getApplicationAttachments.name,\r\n '/Applications/DeleteApplicationAttachment',\r\n {\r\n applicationId: applicationId\r\n },\r\n resolver,\r\n resolveError);\r\n },\r\n\r\n GetApplicationAttachmentTotals(applicationId: number,\r\n resolver: (json: string) => void, resolveError: (logData: ILogData) => void): void {\r\n Request.post(this.getApplicationAttachments.name,\r\n '/Applications/GetApplicationAttachmentTotals',\r\n {\r\n applicationId: applicationId\r\n },\r\n resolver,\r\n resolveError);\r\n },\r\n // #endregion\r\n\r\n // #region TestScores\r\n getChildOptions(url: string, id: number, step: string, group: string, targetId: string, isApplicationForm: boolean,\r\n resolver: (json: string) => void, resolveError: (logData: ILogData) => void,\r\n formId?: number): void {\r\n if (!formId) {\r\n Request.post(this.getChildOptions.name, `/${url}`, {\r\n group,\r\n id,\r\n step,\r\n targetId\r\n }, resolver, resolveError);\r\n }\r\n else {\r\n Request.post(this.getChildOptions.name, `/${url}`, {\r\n formId,\r\n group,\r\n id,\r\n step,\r\n targetId,\r\n isApplicationForm\r\n }, resolver, resolveError);\r\n }\r\n },\r\n getValidateScoreType(\r\n applicationId: number,\r\n test: any,\r\n group: string,\r\n componentId: string,\r\n resolver: (json: string) => void,\r\n resolveError: (logData: ILogData) => void): void {\r\n Request.post(this.getValidateScoreType.name,\r\n '/TestScores/ScoreType',\r\n { formId: applicationId, testId: test, group, componentId },\r\n resolver,\r\n resolveError);\r\n },\r\n // #endregion\r\n\r\n // #region Institutions\r\n getCountries(resolver: (json: string) => void, resolveError: (logData: ILogData) => void): void {\r\n Request.get(this.getCountries.name, '/Institutions/Countries', resolver, resolveError);\r\n },\r\n getStates(resolver: (json: string) => void, resolveError: (logData: ILogData) => void): void {\r\n Request.get(this.getCountries.name, '/Institutions/States', resolver, resolveError);\r\n },\r\n getInstitutions(startIndex: number, length: number, institutionName?: string, etsCode?: string,\r\n city?: string, stateId?: number, countryId?: number, resolver?: (json: string) => void,\r\n resolveError?: (logData: ILogData) => void): void {\r\n Request.post(this.getInstitutions.name, '/Institutions/Index',\r\n {\r\n city,\r\n countryId,\r\n etsCode,\r\n length,\r\n name: institutionName,\r\n startIndex,\r\n stateProvinceId: stateId\r\n },\r\n resolver, resolveError);\r\n }\r\n // #endregion\r\n};\r\n\r\n// Export object with the requests\r\nexport default ApplicationFormRequests;","/* Copyright 2019 Ellucian Company L.P. and its affiliates.\r\n * File: ApplicationFormView.tsx\r\n * Type: Container component */\r\n\r\n// #region Imports\r\nimport moment from 'moment';\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\n\r\n// Core components\r\nimport Layout from '@powercampus/design-system/react/components/Layout';\r\nimport ConfirmationDialog from '@powercampus/design-system/react/core/ConfirmationDialog';\r\n\r\n// Internal Components\r\nimport PaymentDetailModal from '../../Generic/PaymentDetailModal';\r\nimport ProcessPaymentModal from '../../Generic/ProcessPaymentModal';\r\nimport SignIn from '../../Generic/SignIn';\r\nimport SignUp from '../../Generic/SignUp';\r\nimport AddressSearchModal from './AddressSearchModal';\r\nimport ApplicationHandler from './ApplicationHandler';\r\nimport Attachments from './Attachments';\r\nimport ConfirmationSavedModal from './ConfirmationSavedModal';\r\nimport ETSSearchModal from './ETSSearchModal';\r\n\r\n// Generic components\r\nimport Button from '@powercampus/design-system/react/core/Button';\r\nimport Grid from '@powercampus/design-system/react/core/Grid';\r\nimport Modal from '@powercampus/design-system/react/core/Modal';\r\nimport Table, { TableBody, TableCell, TableRow } from '@powercampus/design-system/react/core/Table';\r\nimport Text from '@powercampus/design-system/react/core/Text';\r\nimport TextField from '@powercampus/design-system/react/core/TextField';\r\n\r\n// Helpers\r\nimport { hasJustNumbersAndLetters } from '@powercampus/design-system/helpers/CharRegExp';\r\n\r\n// #region Types\r\nimport { IAlert } from '@powercampus/design-system/types/IAlert';\r\nimport { ICultures } from '@powercampus/design-system/types/ICultures';\r\nimport { IDropDownOption } from '@powercampus/design-system/types/IDropDownOption';\r\nimport { IJsonResult } from '@powercampus/design-system/types/IJsonResult';\r\nimport { ILogData } from '@powercampus/design-system/types/ILogData';\r\nimport { ResultType } from '@powercampus/design-system/types/ResultType';\r\nimport { IAddress } from '../../../Types/Account/IAddress';\r\nimport { IApplication } from '../../../Types/Applications/IApplication';\r\nimport { IApplicationActivity } from '../../../Types/Applications/IApplicationActivity';\r\nimport { IApplicationAddress } from '../../../Types/Applications/IApplicationAddress';\r\nimport { IApplicationEducation } from '../../../Types/Applications/IApplicationEducation';\r\nimport { IApplicationEmergencyContact } from '../../../Types/Applications/IApplicationEmergencyContact';\r\nimport { IApplicationEmployment } from '../../../Types/Applications/IApplicationEmployment';\r\nimport { IGroupErrors } from '../../../Types/Applications/IApplicationErrors';\r\nimport { IApplicationErrors } from '../../../Types/Applications/IApplicationErrors';\r\nimport { IApplicationIpeds } from '../../../Types/Applications/IApplicationIpeds';\r\nimport { IApplicationPhoneList } from '../../../Types/Applications/IApplicationPhoneList';\r\nimport { IApplicationProgram } from '../../../Types/Applications/IApplicationProgram';\r\nimport { IApplicationRelative } from '../../../Types/Applications/IApplicationRelative';\r\nimport { IApplicationResidency } from '../../../Types/Applications/IApplicationResidency';\r\nimport { IApplicationUserDefined } from '../../../Types/Applications/IApplicationUserDefined';\r\nimport { IInstitution } from '../../../Types/Applications/IInstitution';\r\nimport { ISavedApplication } from '../../../Types/Applications/ISavedApplication';\r\nimport { ITestScore } from '../../../Types/Applications/ITestScore';\r\nimport { PaymentOrigin } from '../../../Types/Enum/PaymentOrigin';\r\nimport { IApplicationForm } from '../../../Types/Form/IApplicationForm';\r\nimport { IDataForm } from '../../../Types/Form/IDataForm';\r\nimport { IFieldForm } from '../../../Types/Form/IFieldForm';\r\nimport { IFieldsGroup } from '../../../Types/Form/IFieldsGroup';\r\nimport { IPaymentInfo } from '../../../Types/Payment/IPaymentInfo';\r\nimport { IPaymentTransaction } from '../../../Types/Payment/IPaymentTransaction';\r\nimport { IApplicationFormResources } from '../../../Types/Resources/Admissions/IApplicationFormResources';\r\n// #endregion Types\r\n\r\n// Helpers\r\nimport Format from '@powercampus/design-system/helpers/Format';\r\nimport LogData from '@powercampus/design-system/helpers/LogData';\r\n\r\n// Constants\r\nimport Constants from '@powercampus/design-system/helpers/Constants';\r\n\r\n// Requests\r\nimport Requests from '../../../Requests/Admissions/ApplicationForm';\r\nimport RequestsApplication from '../../../Requests/Admissions/Applications';\r\n\r\n// State Management\r\nimport LayoutActions from '@powercampus/design-system/flux/actions/LayoutActions';\r\nimport LayoutStore from '@powercampus/design-system/flux/stores/LayoutStore';\r\nimport { IApplicationAttachment } from '../../../Types/Applications/IApplicationAttachment';\r\n// #endregion Imports\r\n\r\ninterface IApplicationFormState {\r\n // Address Search Modal\r\n addresses?: IAddress[];\r\n openAddressSearchModal: boolean;\r\n selectedZipCode?: string;\r\n\r\n // Account\r\n hasPersonId: boolean;\r\n showSignIn: boolean;\r\n showSignUp: boolean;\r\n\r\n // Application\r\n activeStep: number;\r\n application: IApplication;\r\n applicationId?: number;\r\n componentError: boolean;\r\n components?: IApplicationForm;\r\n dateTimeCulture: string;\r\n errors: IApplicationErrors[];\r\n expanded: boolean | string;\r\n expansionPanelHeaders: string[];\r\n firstDayOfWeek: number;\r\n openNotAvailableModal: boolean;\r\n resources?: IApplicationFormResources;\r\n rowsPerPageOptions: number[];\r\n shortDatePattern: string;\r\n\r\n // Attachments\r\n attachments: IApplicationAttachment[];\r\n attachmentsTotalSize?: string;\r\n attachmentsTotalSizeNumber: number;\r\n fileId?: number;\r\n fileName?: string;\r\n fileSelector?: any;\r\n openRemoveAttachmentDialog: boolean;\r\n openSupportedFilesModal: boolean;\r\n showAttachments: boolean;\r\n totalNumberOfAttachments: number;\r\n\r\n // ETS Search Modal\r\n countries?: IDropDownOption[];\r\n institutions?: IInstitution[];\r\n openETSSearchModal: boolean;\r\n pageNumber: number;\r\n pageSize: number;\r\n selectedCity?: string;\r\n selectedCountry?: number;\r\n selectedEtsCode?: string;\r\n selectedFieldId?: string;\r\n selectedInstitutionName?: string;\r\n selectedState?: number;\r\n states?: IDropDownOption[];\r\n total: number;\r\n\r\n // Payment\r\n paymentDetailModalOpen: boolean;\r\n paymentInfo?: IPaymentInfo;\r\n paymentModalOpenFail: boolean;\r\n paymentModalOpenProcess: boolean;\r\n paymentModalOpenSuccess: boolean;\r\n paymentTransaction?: IPaymentTransaction;\r\n returnUrl?: string;\r\n\r\n // Save\r\n changeEmailText: boolean;\r\n confirmationMessage?: string;\r\n emailField?: string;\r\n emptyEmailField: boolean;\r\n invalidEmail: boolean;\r\n openConfirmationSavedModal: boolean;\r\n openEmailModal: boolean;\r\n saveMessage?: string;\r\n showSaveButton: boolean;\r\n token?: string;\r\n}\r\n// #endregion Types\r\n\r\n// #region Component\r\nclass ApplicationFormView extends React.Component {\r\n private idMainPage: string;\r\n private idModule: string;\r\n private idPage: string;\r\n private rowsPerPageOptions: number[];\r\n\r\n public readonly state: Readonly;\r\n\r\n public constructor(props) {\r\n super(props);\r\n\r\n // #region Initialize Variables and State\r\n this.idMainPage = 'Applications';\r\n this.idModule = 'Admissions';\r\n this.idPage = 'ApplicationForm';\r\n this.rowsPerPageOptions = [5, 10, 15, 20, 25, 50];\r\n this.state = this.getInitialState();\r\n // #endregion Initialize Variables and State\r\n\r\n // #region Bind State Management Listeners\r\n LayoutStore.addLayoutReadyListener(this.onLayoutReady);\r\n // #endregion State Management Listeners\r\n }\r\n\r\n private getInitialState(): IApplicationFormState {\r\n let resources: IApplicationFormResources | undefined;\r\n if (this.state) {\r\n resources = this.state.resources;\r\n }\r\n\r\n const cultures: ICultures = LayoutStore.getCultures();\r\n\r\n return {\r\n activeStep: 0,\r\n addresses: [],\r\n application: {\r\n addresses: [],\r\n education: [],\r\n employments: [],\r\n phones: [{ isPrimary: true }],\r\n testScores: [],\r\n userDefined: []\r\n },\r\n attachments: [],\r\n attachmentsTotalSizeNumber: 0,\r\n changeEmailText: true,\r\n componentError: false,\r\n components: undefined,\r\n dateTimeCulture: cultures.dateTimeCulture,\r\n emptyEmailField: false,\r\n errors: [],\r\n expanded: false,\r\n expansionPanelHeaders: [],\r\n firstDayOfWeek: cultures.firstDayOfWeek,\r\n hasPersonId: false,\r\n institutions: [],\r\n invalidEmail: false,\r\n openAddressSearchModal: false,\r\n openConfirmationSavedModal: false,\r\n openEmailModal: false,\r\n openETSSearchModal: false,\r\n openNotAvailableModal: false,\r\n openRemoveAttachmentDialog: false,\r\n openSupportedFilesModal: false,\r\n pageNumber: 0,\r\n pageSize: 5,\r\n resources: resources,\r\n rowsPerPageOptions: [],\r\n shortDatePattern: cultures.shortDatePattern,\r\n showAttachments: false,\r\n showSaveButton: false,\r\n showSignIn: false,\r\n showSignUp: false,\r\n total: 0,\r\n totalNumberOfAttachments: 0,\r\n\r\n // Payment\r\n paymentDetailModalOpen: false,\r\n paymentModalOpenFail: false,\r\n paymentModalOpenProcess: false,\r\n paymentModalOpenSuccess: false\r\n };\r\n }\r\n\r\n // #region Events\r\n // #region Payment\r\n private onClosePaymentDetailModal = (): void => {\r\n try {\r\n this.setState({\r\n paymentDetailModalOpen: false,\r\n paymentInfo: undefined\r\n });\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onClosePaymentDetailModal.name, e));\r\n }\r\n };\r\n\r\n private onClosePaymentModalProcess = (): void => {\r\n try {\r\n this.setState({\r\n paymentModalOpenProcess: false\r\n });\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onClosePaymentModalProcess.name, e));\r\n }\r\n };\r\n\r\n private onPay = (): void => {\r\n try {\r\n const {\r\n paymentInfo\r\n } = this.state;\r\n\r\n if (paymentInfo) {\r\n this.setState({\r\n paymentModalOpenProcess: true\r\n });\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onPay.name, e));\r\n }\r\n };\r\n\r\n private onCloseFailedPayment = (): void => {\r\n try {\r\n window.location.href = `${Constants.webUrl}/Admissions/Applications`;\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onCloseFailedPayment.name, e));\r\n }\r\n };\r\n // #endregion Payment\r\n\r\n // #region Attachment\r\n private buildFileSelector = () => {\r\n try {\r\n const fileSelector = document.createElement('input');\r\n const {\r\n components\r\n } = this.state;\r\n if (components) {\r\n let supportedTypes: string = '';\r\n if (components.fileTypes) {\r\n components.fileTypes.forEach(fileType => {\r\n const newFileExt = fileType.fileExtension.replace(' ', '');\r\n const fileExtensions = newFileExt.split(';');\r\n fileExtensions.forEach(fileExt => {\r\n supportedTypes = supportedTypes + fileExt.replace('*.', '') + ',';\r\n });\r\n });\r\n fileSelector.setAttribute('type', 'file');\r\n fileSelector.setAttribute('files', supportedTypes);\r\n fileSelector.onchange = this.onChangeFile.bind(this);\r\n }\r\n }\r\n return fileSelector;\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.buildFileSelector.name, e));\r\n return null;\r\n }\r\n };\r\n\r\n private getMediaTypeId = (fileExtension: string): number => {\r\n let mediaId: number = 0;\r\n try {\r\n const {\r\n components\r\n } = this.state;\r\n\r\n if (components && components.fileTypes) {\r\n components.fileTypes.forEach(fileType => {\r\n const newFileExt = fileType.fileExtension.replace(' ', '');\r\n const fileExtensions = newFileExt.split(';');\r\n fileExtensions.forEach(fileExt => {\r\n if (fileExt.replace('*.', '') === fileExtension) {\r\n mediaId = fileType.mediaTypeId;\r\n }\r\n });\r\n });\r\n }\r\n return mediaId;\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.getMediaTypeId.name, e));\r\n return mediaId;\r\n }\r\n };\r\n\r\n private readUploadedFile = inputFile => {\r\n try {\r\n const temporaryFileReader = new FileReader();\r\n\r\n return new Promise(resolve => {\r\n temporaryFileReader.onload = () => {\r\n if (temporaryFileReader.result) {\r\n let encoded = temporaryFileReader.result.toString().replace(/^data:(.*,)?/, '');\r\n if ((encoded.length % 4) > 0) {\r\n encoded += '='.repeat(4 - (encoded.length % 4));\r\n }\r\n resolve(encoded);\r\n }\r\n };\r\n temporaryFileReader.readAsDataURL(inputFile);\r\n });\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.readUploadedFile.name, e));\r\n return null;\r\n }\r\n };\r\n\r\n private onChangeFile = async event => {\r\n try {\r\n const {\r\n applicationId\r\n } = this.state;\r\n\r\n event.stopPropagation();\r\n event.preventDefault();\r\n\r\n const file = event.target.files[0];\r\n const fileName = file.name.split('.');\r\n const mediaId = this.getMediaTypeId(fileName[1]);\r\n if (mediaId !== 0 && applicationId) {\r\n const {\r\n attachmentsTotalSizeNumber,\r\n components,\r\n resources,\r\n totalNumberOfAttachments\r\n } = this.state;\r\n\r\n if (components && resources) {\r\n if (components.numberOfAttachments <= totalNumberOfAttachments) {\r\n LayoutActions.setAlert({\r\n message: Format.toString(resources.attachments.lblTotalAttachmentsError, [components.numberOfAttachments]),\r\n messageType: ResultType.warning\r\n } as IAlert);\r\n }\r\n else {\r\n const bytes = (file.size / 1048576).toFixed(5);\r\n if (Number(bytes) > Number(components.maxAttachmentSize)) {\r\n LayoutActions.setAlert({\r\n message: Format.toString(resources.attachments.lblAttachmentsSizeError, [components.maxAttachmentSize]),\r\n messageType: ResultType.warning\r\n } as IAlert);\r\n }\r\n else {\r\n if (Number(bytes) + Number(attachmentsTotalSizeNumber) > Number(components.maxAttachmentSize)) {\r\n LayoutActions.setAlert({\r\n message: Format.toString(resources.attachments.lblAllAttachmentsSizeError,\r\n [components.maxApplicationAttachmentSize]),\r\n messageType: ResultType.warning\r\n } as IAlert);\r\n }\r\n else {\r\n const fileContents = await this.readUploadedFile(file);\r\n const newFile: IApplicationAttachment = {\r\n applicationId: applicationId,\r\n attachmentTitle: fileName[0],\r\n extension: `.${fileName[1]}`,\r\n fileContent: fileContents,\r\n fileSize: file.size,\r\n mediaTypeId: mediaId\r\n };\r\n LayoutActions.setLoading(true);\r\n Requests.postCreateApplicationAttachment(newFile, this.resolveCreateAttachment, this.logError);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onChangeFile.name, e));\r\n }\r\n };\r\n\r\n private onClickOpenFolder = (event: React.MouseEvent) => {\r\n try {\r\n console.log(event);\r\n event.preventDefault();\r\n const {\r\n fileSelector\r\n } = this.state;\r\n fileSelector.click();\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onClickOpenFolder.name, e));\r\n }\r\n };\r\n\r\n private onClickContinue = () => {\r\n try {\r\n const {\r\n components,\r\n paymentInfo\r\n } = this.state;\r\n\r\n if (components) {\r\n if (paymentInfo) {\r\n const returnUrl =\r\n `${Constants.webUrl}/Admissions/ApplicationForm/${components.applicationFormId}`;\r\n this.setState({\r\n paymentDetailModalOpen: true,\r\n returnUrl: returnUrl,\r\n showAttachments: false\r\n });\r\n }\r\n else {\r\n components.isCompletedApplication = true;\r\n this.setState({\r\n components: components,\r\n showAttachments: false\r\n });\r\n }\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onClickContinue.name, e));\r\n }\r\n };\r\n\r\n private onClickInfo = () => {\r\n try {\r\n this.setState({\r\n openSupportedFilesModal: true\r\n });\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onClickInfo.name, e));\r\n }\r\n };\r\n\r\n private onCloseSupportedFilesModal = () => {\r\n try {\r\n this.setState({\r\n openSupportedFilesModal: false\r\n });\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onCloseSupportedFilesModal.name, e));\r\n }\r\n };\r\n\r\n private onClickRemoveAttachmentButton = (event: any) => {\r\n try {\r\n const fieldButtonId: string[] = event.target.id.split('|');\r\n this.setState({\r\n fileId: Number(fieldButtonId[1]),\r\n fileName: fieldButtonId[2],\r\n openRemoveAttachmentDialog: true\r\n });\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onClickRemoveAttachmentButton.name, e));\r\n }\r\n };\r\n\r\n private onClickRemoveAttachment = () => {\r\n try {\r\n const {\r\n fileId\r\n } = this.state;\r\n LayoutActions.setLoading(true);\r\n Requests.postDeleteApplicationAttachment(Number(fileId), this.resolveRemoveAttachment, this.logError);\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onClickRemoveAttachment.name, e));\r\n }\r\n };\r\n\r\n private onCloseRemoveAttachmentModal = (): void => {\r\n try {\r\n this.setState({\r\n openRemoveAttachmentDialog: false\r\n });\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onCloseRemoveAttachmentModal.name, e));\r\n }\r\n };\r\n\r\n // #endregion Attachment\r\n\r\n // #region Account\r\n private onCloseSignIn = (): void => {\r\n try {\r\n this.setState({\r\n showSignIn: false\r\n });\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onCloseSignIn.name, e));\r\n }\r\n };\r\n\r\n private onCloseSignUp = (): void => {\r\n try {\r\n this.setState({\r\n showSignUp: false\r\n });\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onCloseSignUp.name, e));\r\n }\r\n };\r\n\r\n private onOpenSignIn = (): void => {\r\n try {\r\n this.setState({\r\n showSignIn: true,\r\n showSignUp: false\r\n });\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onOpenSignIn.name, e));\r\n }\r\n };\r\n\r\n private onOpenSignUp = (): void => {\r\n try {\r\n this.setState({\r\n showSignIn: false,\r\n showSignUp: true\r\n });\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onOpenSignUp.name, e));\r\n }\r\n };\r\n\r\n private onAfterSignUp = (userName?: string): void => {\r\n try {\r\n // After creation of new account user must be logged in\r\n LayoutStore.setIsAuthenticated(true);\r\n LayoutStore.setMenuOptions(undefined);\r\n if (userName) {\r\n this.setState({\r\n emailField: userName,\r\n showSignUp: false\r\n });\r\n this.onSaveEmailField();\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onAfterSignUp.name, e));\r\n }\r\n };\r\n\r\n private onAfterSignIn = (): void => {\r\n try {\r\n this.setState({\r\n showSignIn: false\r\n });\r\n this.onSaveApplication();\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onAfterSignIn.name, e));\r\n }\r\n };\r\n // #endregion Account\r\n\r\n // #region Stepper\r\n private onBackStep = (): void => {\r\n try {\r\n const {\r\n activeStep\r\n } = this.state;\r\n\r\n this.setState({\r\n activeStep: activeStep - 1\r\n });\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onBackStep.name, e));\r\n }\r\n };\r\n\r\n private onClickStep = (event: React.MouseEvent) => {\r\n try {\r\n const steps: string[] = event.currentTarget.id.split('|');\r\n this.setState({\r\n activeStep: Number(steps[1])\r\n });\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onClickStep.name, e));\r\n }\r\n };\r\n\r\n private onNextStep = (): void => {\r\n try {\r\n const {\r\n activeStep\r\n } = this.state;\r\n\r\n this.setState({\r\n activeStep: activeStep + 1\r\n });\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onNextStep.name, e));\r\n }\r\n };\r\n // #endregion Stepper\r\n\r\n // #region Address\r\n private onCloseAddressSearchModal = (): void => {\r\n try {\r\n this.setState({\r\n addresses: [],\r\n openAddressSearchModal: false,\r\n selectedZipCode: undefined\r\n });\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onCloseAddressSearchModal.name, e));\r\n }\r\n };\r\n\r\n private onClickZipCodeLink = (zipCode?: string, city?: string, stateProvinceId?: number, countryId?: number,\r\n countyId?: number) => (): void => {\r\n try {\r\n const {\r\n components,\r\n selectedFieldId\r\n } = this.state;\r\n\r\n if (selectedFieldId && components) {\r\n const fieldId: string[] = selectedFieldId.split('|');\r\n\r\n const fieldGroup: IFieldForm[] =\r\n components.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].fields;\r\n\r\n if (fieldId.length > 4) {\r\n this.assignFieldValue(fieldGroup, fieldId, 'addressCityId', true, city);\r\n this.assignFieldValue(fieldGroup, fieldId, 'stateProvinceId', true, stateProvinceId);\r\n this.assignFieldValue(fieldGroup, fieldId, 'postalCodeId', true, zipCode);\r\n this.assignFieldValue(fieldGroup, fieldId, 'addressCountyId', true, countyId);\r\n this.assignFieldValue(fieldGroup, fieldId, 'addressCountryId', true, countryId);\r\n }\r\n else {\r\n this.assignFieldValue(fieldGroup, fieldId, 'addressCityId', false, city);\r\n this.assignFieldValue(fieldGroup, fieldId, 'stateProvinceId', false, stateProvinceId);\r\n this.assignFieldValue(fieldGroup, fieldId, 'postalCodeId', false, zipCode);\r\n this.assignFieldValue(fieldGroup, fieldId, 'addressCountyId', false, countyId);\r\n this.assignFieldValue(fieldGroup, fieldId, 'addressCountryId', false, countryId);\r\n }\r\n }\r\n\r\n this.setState({\r\n openAddressSearchModal: false\r\n });\r\n } catch (e) {\r\n this.logError(LogData.fromException(this.onClickZipCodeLink.name, e));\r\n }\r\n };\r\n\r\n private onChangeTextFieldAddressSearch = (event: any): void => {\r\n try {\r\n if (event.target.id && event.target.id !== '') {\r\n switch (event.target.id) {\r\n case 'txtZipCode':\r\n this.setState({\r\n selectedZipCode: event.target.value\r\n });\r\n break;\r\n }\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onChangeTextFieldAddressSearch.name, e));\r\n }\r\n };\r\n\r\n private onClearAddress = (): void => {\r\n try {\r\n this.setState({\r\n addresses: [],\r\n selectedZipCode: undefined\r\n });\r\n }\r\n catch (e) {\r\n throw e;\r\n }\r\n };\r\n\r\n private onSearchAddress = (): void => {\r\n try {\r\n LayoutActions.setLoading(true);\r\n\r\n const {\r\n pageSize,\r\n selectedZipCode\r\n } = this.state;\r\n\r\n Requests.getAddresses(\r\n 0,\r\n pageSize,\r\n selectedZipCode,\r\n this.resolveGetAddress, this.logError);\r\n\r\n const {\r\n total\r\n } = this.state;\r\n\r\n if (total) {\r\n const previousSize = pageSize;\r\n // Fix 60\r\n this.setState({\r\n pageSize: 0\r\n }, () => {\r\n this.setState({\r\n pageNumber: 0,\r\n pageSize: previousSize\r\n });\r\n });\r\n }\r\n }\r\n catch (e) {\r\n LayoutActions.setLoading(false);\r\n throw e;\r\n }\r\n };\r\n // #endregion Address\r\n\r\n // #region Education\r\n private onChangeTextFieldETSSearch = (event: any): void => {\r\n try {\r\n if (event.target.id && event.target.id !== '') {\r\n switch (event.target.id) {\r\n case 'txtEtsCode':\r\n this.setState({\r\n selectedEtsCode: event.target.value\r\n });\r\n break;\r\n case 'txtCity':\r\n this.setState({\r\n selectedCity: event.target.value\r\n });\r\n break;\r\n case 'txtInstitutionName':\r\n this.setState({\r\n selectedInstitutionName: event.target.value\r\n });\r\n break;\r\n }\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onChangeTextFieldETSSearch.name, e));\r\n }\r\n };\r\n\r\n private onCloseETSSearchModal = (): void => {\r\n try {\r\n this.setState({\r\n institutions: [],\r\n openETSSearchModal: false,\r\n selectedCity: undefined,\r\n selectedCountry: undefined,\r\n selectedEtsCode: undefined,\r\n selectedInstitutionName: undefined,\r\n selectedState: undefined\r\n });\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onCloseETSSearchModal.name, e));\r\n }\r\n };\r\n\r\n private onChangeDropDownETSSearch = (optionSelected: IDropDownOption, id: string): void => {\r\n try {\r\n if (id && id !== '') {\r\n switch (id) {\r\n case 'ddlCountry':\r\n this.setState({\r\n selectedCountry: optionSelected.value === '' ? undefined :\r\n Number(optionSelected.value)\r\n });\r\n break;\r\n case 'ddlState':\r\n this.setState({\r\n selectedState: optionSelected.value === '' ? undefined :\r\n Number(optionSelected.value)\r\n });\r\n break;\r\n }\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onChangeDropDownETSSearch.name, e));\r\n }\r\n };\r\n\r\n private onClearInstitution = (): void => {\r\n try {\r\n this.setState({\r\n institutions: [],\r\n selectedCity: undefined,\r\n selectedCountry: undefined,\r\n selectedEtsCode: undefined,\r\n selectedInstitutionName: undefined,\r\n selectedState: undefined\r\n });\r\n }\r\n catch (e) {\r\n throw e;\r\n }\r\n };\r\n\r\n private onSearchInstitution = (): void => {\r\n try {\r\n LayoutActions.setLoading(true);\r\n\r\n const {\r\n selectedCity,\r\n selectedEtsCode,\r\n selectedInstitutionName,\r\n selectedState,\r\n selectedCountry,\r\n pageSize\r\n } = this.state;\r\n\r\n Requests.getInstitutions(\r\n 0,\r\n pageSize,\r\n selectedInstitutionName,\r\n selectedEtsCode,\r\n selectedCity,\r\n selectedState,\r\n selectedCountry,\r\n this.resolveGetInstitutions, this.logError);\r\n\r\n const {\r\n total\r\n } = this.state;\r\n\r\n if (total) {\r\n const previousSize = pageSize;\r\n // Fix 60\r\n this.setState({\r\n pageSize: 0\r\n }, () => {\r\n this.setState({\r\n pageNumber: 0,\r\n pageSize: previousSize\r\n });\r\n });\r\n }\r\n }\r\n catch (e) {\r\n LayoutActions.setLoading(false);\r\n throw e;\r\n }\r\n };\r\n\r\n private onClickLink = (institutionName?: string, etsCode?: string, ficeCode?: string,\r\n city?: string, stateProvinceId?: number, countryId?: number) => (): void => {\r\n try {\r\n const {\r\n components,\r\n selectedFieldId\r\n } = this.state;\r\n\r\n if (selectedFieldId && components) {\r\n const fieldId: string[] = selectedFieldId.split('|');\r\n\r\n const fieldGroup: IFieldForm[] =\r\n components.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].fields;\r\n\r\n if (fieldId.length > 4) {\r\n this.assignFieldValue(fieldGroup, fieldId, 'educationInstitutionName', true, institutionName);\r\n this.assignFieldValue(fieldGroup, fieldId, 'educationEtsCodeId', true, etsCode);\r\n this.assignFieldValue(fieldGroup, fieldId, 'educationFiceCode', true, ficeCode);\r\n this.assignFieldValue(fieldGroup, fieldId, 'educationCityId', true, city);\r\n this.assignFieldValue(fieldGroup, fieldId, 'educationStateId', true, stateProvinceId);\r\n this.assignFieldValue(fieldGroup, fieldId, 'educationCountryId', true, countryId);\r\n }\r\n else {\r\n this.assignFieldValue(fieldGroup, fieldId, 'educationInstitutionName', false, institutionName);\r\n this.assignFieldValue(fieldGroup, fieldId, 'educationEtsCodeId', false, etsCode);\r\n this.assignFieldValue(fieldGroup, fieldId, 'educationFiceCode', false, ficeCode);\r\n this.assignFieldValue(fieldGroup, fieldId, 'educationCityId', false, city);\r\n this.assignFieldValue(fieldGroup, fieldId, 'educationStateId', false, stateProvinceId);\r\n this.assignFieldValue(fieldGroup, fieldId, 'educationCountryId', false, countryId);\r\n }\r\n }\r\n\r\n this.setState({\r\n openETSSearchModal: false\r\n });\r\n } catch (e) {\r\n this.logError(LogData.fromException(this.onClickLink.name, e));\r\n }\r\n };\r\n // #endregion Education\r\n\r\n // #region Phone\r\n private onPrimaryButtonClick = (fieldId: string[], newComponents: IApplicationForm, value: any): IApplicationForm => {\r\n try {\r\n const phoneFields: any = newComponents.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])];\r\n let field: any = [];\r\n let numRow: number = 4;\r\n\r\n field = newComponents;\r\n phoneFields.fields.forEach(function (item, row) {\r\n const idFields: string[] = item.data.id.split('|');\r\n if (fieldId[0] === idFields[0]) {\r\n if (fieldId[3] !== idFields[3] || fieldId[4] !== idFields[4]) {\r\n item.value = '';\r\n }\r\n else {\r\n numRow = row;\r\n }\r\n }\r\n });\r\n\r\n field.steps[Number(fieldId[1])].fieldsGroups[fieldId[2]].fields[Number(numRow)].value = value;\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolveLayoutReady.name, e));\r\n }\r\n return newComponents;\r\n };\r\n // #endregion Phone\r\n\r\n // #region Submit and Save\r\n private onSaveApplication = (): void => {\r\n try {\r\n const {\r\n components,\r\n resources,\r\n token\r\n } = this.state;\r\n\r\n if (resources) {\r\n const applicationTop: HTMLElement | null = document.getElementById('applicationTop');\r\n if (applicationTop) {\r\n applicationTop.scrollIntoView();\r\n }\r\n LayoutActions.setLoading(true);\r\n if (components) {\r\n if (components && components.layoutId) {\r\n // Update saved application\r\n if (token) {\r\n if (components.person &&\r\n (components.person.email || components.person.temporaryEmail)) {\r\n const savedApplication: ISavedApplication = {\r\n applicationFormSettingId: components.applicationFormId,\r\n email: components.person.email ? components.person.email :\r\n components.person.temporaryEmail ? components.person.temporaryEmail : '',\r\n formLayoutId: components.layoutId,\r\n token: token\r\n };\r\n RequestsApplication.postUpdateSavedApplication(savedApplication,\r\n components, this.resolveSaveIncompleteApplication, this.logError);\r\n }\r\n }\r\n else {\r\n if (LayoutStore && !LayoutStore.getIsAuthenticated()) {\r\n // If person doesn't have a person id\r\n if (!components.person || !components.person.personId) {\r\n this.onOpenSignIn();\r\n LayoutActions.setLoading(false);\r\n }\r\n }\r\n else {\r\n // If user has primary email use this to populate email confirmation modal.\r\n if (components.person && components.person.email) {\r\n this.setState({\r\n emailField: components.person.email,\r\n openEmailModal: true\r\n });\r\n LayoutActions.setLoading(false);\r\n }\r\n else if (components.person && components.person.temporaryEmail) {\r\n this.onSaveEmailField();\r\n }\r\n // If user has not primary email and email exist in the form with some value use it.\r\n else {\r\n if (components) {\r\n let hasValueEmailField: boolean = false;\r\n components.steps.forEach(step => {\r\n step.fieldsGroups.forEach(fieldsGroup => {\r\n fieldsGroup.fields.forEach(field => {\r\n if (field.data.id === 'emailId') {\r\n if (field.value && !field.data.error) {\r\n this.setState({\r\n emailField: field.value,\r\n openEmailModal: true\r\n });\r\n hasValueEmailField = true;\r\n LayoutActions.setLoading(false);\r\n }\r\n }\r\n });\r\n });\r\n });\r\n // If user has not primary email and email not exist in the form or is empty don't populate it.\r\n if (!hasValueEmailField) {\r\n this.setState({\r\n openEmailModal: true\r\n });\r\n LayoutActions.setLoading(false);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onSaveApplication.name, e));\r\n }\r\n };\r\n\r\n private onSaveEmailField = (): void => {\r\n try {\r\n LayoutActions.setLoading(true);\r\n\r\n const {\r\n components,\r\n emailField,\r\n invalidEmail\r\n } = this.state;\r\n\r\n if (!emailField &&\r\n components && components.person && !components.person.temporaryEmail) {\r\n this.setState({\r\n emptyEmailField: true\r\n });\r\n }\r\n else {\r\n if (!invalidEmail && components && components.person) {\r\n const savedApplication: ISavedApplication = {\r\n applicationFormSettingId: components.applicationFormId,\r\n email: emailField ? emailField :\r\n components.person.temporaryEmail ? components.person.temporaryEmail : '',\r\n formLayoutId: components.layoutId\r\n };\r\n Requests.postCreateSavedApplication(savedApplication, components, this.resolveSaveIncompleteApplication, this.logError);\r\n }\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onChangeTextFieldModal.name, e));\r\n }\r\n };\r\n\r\n private onSubmit = (): void => {\r\n try {\r\n const {\r\n application,\r\n components\r\n } = this.state;\r\n\r\n const applicationTop: HTMLElement | null = document.getElementById('applicationTop');\r\n if (applicationTop) {\r\n applicationTop.scrollIntoView();\r\n }\r\n\r\n if (components) {\r\n components.steps.forEach(step => {\r\n step.fieldsGroups.forEach(fieldsGroup => {\r\n fieldsGroup.fields.forEach(field => {\r\n let exist: boolean = false;\r\n if (field.componentType === 'Dropdown') {\r\n if (field.default && field.data.options) {\r\n field.data.options.forEach(option => {\r\n if (option.value.toString() === field.default.toString()) {\r\n exist = true;\r\n }\r\n });\r\n }\r\n if (exist) {\r\n field.value = field.value ? field.value : field.default;\r\n this.setApplicationValues(field.data.id, field.value);\r\n }\r\n else if (!field.default && field.value !== '') {\r\n this.setApplicationValues(field.data.id, field.value);\r\n }\r\n }\r\n else {\r\n field.value = field.value ? field.value : field.default;\r\n this.setApplicationValues(field.data.id, field.value);\r\n }\r\n });\r\n });\r\n });\r\n }\r\n\r\n this.setState({\r\n components\r\n });\r\n\r\n if (this.reviewRequiredFields()) {\r\n if (application) {\r\n LayoutActions.setLoading(true);\r\n Requests.postSubmit(application, this.resolveSubmitApplication, this.logError);\r\n }\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onSubmit.name, e));\r\n }\r\n };\r\n\r\n private onCloseEmailModal = (): void => {\r\n try {\r\n this.setState({\r\n openEmailModal: false\r\n });\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onCloseEmailModal.name, e));\r\n }\r\n };\r\n\r\n private onCloseNotAvailableModal = (): void => {\r\n try {\r\n window.location.assign(`${Constants.webUrl}/Admissions/Applications`);\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onCloseNotAvailableModal.name, e));\r\n }\r\n };\r\n\r\n private onCloseConfirmationSavedModal = (): void => {\r\n try {\r\n const {\r\n components\r\n } = this.state;\r\n\r\n if (components) {\r\n const confirmationIndex: number =\r\n components.fieldsGroups.findIndex(x => x.id === 'confirmationGroup');\r\n const finishButtonId: number =\r\n components.fieldsGroups[confirmationIndex].fields.findIndex(x => x.data.id === 'finishId');\r\n if (confirmationIndex > -1 && finishButtonId > -1) {\r\n const actionUrl: string | undefined = components.fieldsGroups[confirmationIndex].fields[finishButtonId].actionUrl;\r\n if (actionUrl) {\r\n window.location.assign(actionUrl);\r\n }\r\n else {\r\n window.location.assign(`${Constants.webUrl}/Admissions/Applications`);\r\n }\r\n }\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onCloseConfirmationSavedModal.name, e));\r\n }\r\n };\r\n // #endregion Submit and Save\r\n\r\n // #region Change Fields Events\r\n private onChangeCheckBox = (event: any): void => {\r\n try {\r\n const {\r\n application,\r\n components\r\n } = this.state;\r\n\r\n if (application && components) {\r\n const app: IApplication = application;\r\n const fieldId: string[] = event.target.id.split('|');\r\n const newComponents: IApplicationForm = components;\r\n const value: boolean = Boolean(event.target.checked);\r\n const evaluateAppJs = eval;\r\n\r\n if (fieldId.length < 5) {\r\n if (fieldId && fieldId[1] && fieldId[2] && fieldId[3]) {\r\n const field: IFieldForm = newComponents.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].fields[Number(fieldId[3])];\r\n\r\n if (field.isUserDefined && field.customScript) {\r\n if (value) {\r\n field.value = evaluateAppJs(field.customScript);\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n }\r\n else {\r\n field.value = NaN;\r\n }\r\n }\r\n else {\r\n field.value = value ? value : undefined;\r\n }\r\n }\r\n }\r\n else {\r\n const field: IFieldForm | undefined =\r\n components.steps[Number(fieldId[1])].\r\n fieldsGroups[Number(fieldId[2])].\r\n fields.find(x =>\r\n x.data.section === Number(fieldId[4]) &&\r\n x.data.id.substr(0, fieldId[0].length) === fieldId[0]);\r\n if (field) {\r\n field.value = value;\r\n }\r\n }\r\n\r\n this.setState({\r\n application: app,\r\n components: newComponents\r\n });\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onChangeCheckBox.name, e));\r\n }\r\n };\r\n\r\n private onChangeDateTimeField = (date: string, id: string, isValid: boolean): void => {\r\n try {\r\n const {\r\n application,\r\n components,\r\n shortDatePattern\r\n } = this.state;\r\n\r\n if (id && id !== '' && application && components) {\r\n const app: IApplication = application;\r\n const fieldId: string[] = id.split('|');\r\n let fieldIndex: number = 0;\r\n if (fieldId[4]) {\r\n fieldIndex = Number(fieldId[4]) + 1;\r\n }\r\n let newComponents: IApplicationForm = components;\r\n const field = newComponents.steps[Number(fieldId[1])].\r\n fieldsGroups[Number(fieldId[2])].\r\n fields[Number(fieldId[3])];\r\n switch (fieldId[0]) {\r\n case 'dateOfBirthId':\r\n if (isValid) {\r\n app.dateOfBirth = date;\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n newComponents = this.cleanErrorMessages(fieldId, newComponents);\r\n newComponents = this.setValues(fieldId, newComponents, date);\r\n }\r\n else {\r\n field.data.error = true;\r\n field.data.helperText =\r\n field.data.errorMessageFormat;\r\n }\r\n break;\r\n case 'visaExpirationDateId':\r\n if (isValid) {\r\n app.visaExpiration = date;\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n newComponents = this.cleanErrorMessages(fieldId, newComponents);\r\n newComponents = this.setValues(fieldId, newComponents, date);\r\n }\r\n else {\r\n field.data.error = true;\r\n field.data.helperText =\r\n field.data.errorMessageFormat;\r\n }\r\n break;\r\n case 'passportExpirationDateId':\r\n if (isValid) {\r\n app.passportExpiration = date;\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n newComponents = this.cleanErrorMessages(fieldId, newComponents);\r\n newComponents = this.setValues(fieldId, newComponents, date);\r\n }\r\n else {\r\n field.data.error = true;\r\n field.data.helperText =\r\n field.data.errorMessageFormat;\r\n }\r\n break;\r\n case 'testDateTakenId':\r\n const fieldTestTaken: any = newComponents.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])];\r\n\r\n if (!app.testScores[fieldIndex]) {\r\n app.testScores[fieldIndex] = {} as ITestScore;\r\n }\r\n if (isValid) {\r\n app.testScores[fieldIndex].dateTaken = date;\r\n }\r\n else {\r\n field.data.error = true;\r\n field.data.helperText =\r\n field.data.errorMessageFormat;\r\n }\r\n if (fieldId.length > 4) {\r\n fieldTestTaken.fields.forEach(function (field) {\r\n const itemArrId: string[] = field.data.id.split('|');\r\n if (fieldId[3] === itemArrId[3] && fieldId[4] === itemArrId[4]) {\r\n if (!isValid) {\r\n field.data.error = true;\r\n field.data.helperText = field.data.errorMessageNotValid;\r\n } else if (moment(date, shortDatePattern).toDate() > new Date()) {\r\n field.data.error = true;\r\n field.data.helperText =\r\n Format.toString(\r\n field.data.errorMessageRange, [\r\n newComponents.dateTimeMin,\r\n moment(new Date()).format(shortDatePattern.toUpperCase())]);\r\n } else {\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n field.value = date;\r\n }\r\n }\r\n });\r\n }\r\n else {\r\n fieldTestTaken.fields.forEach(function (field) {\r\n const itemArrId: string[] = field.data.id.split('|');\r\n if (fieldId[0] === itemArrId[0] && itemArrId.length === 1) {\r\n if (!isValid) {\r\n field.data.error = true;\r\n field.data.helperText = field.data.errorMessageNotValid;\r\n } else if (moment(date).toDate() > new Date()) {\r\n field.data.error = true;\r\n field.data.helperText =\r\n Format.toString(\r\n field.data.errorMessageRange, [\r\n newComponents.dateTimeMin,\r\n moment(new Date()).format(shortDatePattern.toUpperCase())]);\r\n } else {\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n field.value = date;\r\n }\r\n }\r\n });\r\n }\r\n break;\r\n default:\r\n newComponents = this.cleanErrorMessages(fieldId, newComponents);\r\n newComponents = this.setValues(fieldId, newComponents, date);\r\n break;\r\n }\r\n this.setState({\r\n application: app,\r\n components: newComponents\r\n });\r\n }\r\n } catch (e) {\r\n this.logError(LogData.fromException(this.onChangeDateTimeField.name, e));\r\n }\r\n };\r\n\r\n private onChangeDropDown = (optionSelected: IDropDownOption, id: string): void => {\r\n try {\r\n const {\r\n application,\r\n components\r\n } = this.state;\r\n\r\n if (id && id !== '' && application && components) {\r\n const app: IApplication = application;\r\n const fieldId: string[] = id.split('|');\r\n let fieldIndex: number = 0;\r\n if (fieldId[4]) {\r\n fieldIndex = Number(fieldId[4]) + 1;\r\n }\r\n\r\n let valueSelected: any | undefined;\r\n if (optionSelected.value) {\r\n switch (typeof optionSelected.value) {\r\n case 'string':\r\n valueSelected = String(optionSelected.value);\r\n break;\r\n case 'number':\r\n valueSelected = Number(optionSelected.value);\r\n break;\r\n default:\r\n valueSelected = optionSelected.value;\r\n break;\r\n }\r\n }\r\n\r\n switch (fieldId[0]) {\r\n case 'testId':\r\n if (!app.testScores[fieldIndex]) {\r\n app.testScores[fieldIndex] = {} as ITestScore;\r\n }\r\n app.testScores[fieldIndex].id = valueSelected;\r\n app.testScores[fieldIndex].typeId = 0;\r\n\r\n const testScoreComponents: IFieldForm[] =\r\n components.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].fields;\r\n const score: IFieldForm | undefined =\r\n testScoreComponents.find(f =>\r\n f.data.id.split('|')[0] === 'testScoreId' &&\r\n (f.data.id.split('|')[4] || '') === (fieldId[4] || ''));\r\n\r\n if (score && valueSelected && valueSelected !== '') {\r\n Requests.getValidateScoreType(\r\n application.applicationId || 0,\r\n app.testScores[fieldIndex].id,\r\n 'testScoreGroup',\r\n score.data.id,\r\n this.resolveValidateScore, this.logError);\r\n }\r\n break;\r\n case 'testTypeId':\r\n if (!app.testScores[fieldIndex]) {\r\n app.testScores[fieldIndex] = {} as ITestScore;\r\n }\r\n app.testScores[fieldIndex].typeId = valueSelected;\r\n break;\r\n case 'hispanicGroupId':\r\n if (components) {\r\n // Get fieldsGroup\r\n const fieldsGroup: IFieldForm[] =\r\n components.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].fields;\r\n // Get checkBoxList hispanicCheckboxListId index\r\n let checkBoxListIndex: number = -1;\r\n fieldsGroup.forEach((field, i) => {\r\n if (field.data.id.substr(0, 'hispanicCheckboxListId'.length) === 'hispanicCheckboxListId') {\r\n checkBoxListIndex = i;\r\n }\r\n });\r\n // Get checkBoxList hispanicCheckboxListId\r\n const checkBoxListField: IFieldForm =\r\n components.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].fields[checkBoxListIndex];\r\n let ipedsList: IApplicationIpeds[] | undefined = application.ipeds;\r\n if (valueSelected === '1') {\r\n if (checkBoxListField) {\r\n // Add category in list\r\n const ipeds: IApplicationIpeds = { ipedsEthnicityId: undefined, ipedsFederalCategoryId: 1 };\r\n if (ipedsList) {\r\n const ipedIndex: number =\r\n ipedsList.findIndex(x => x.ipedsFederalCategoryId === 1);\r\n // Category was not found, add category\r\n if (ipedIndex === -1) {\r\n ipedsList.push(ipeds);\r\n }\r\n }\r\n // ipedsList was undefined so add a new item with category\r\n else {\r\n ipedsList = [ipeds];\r\n }\r\n checkBoxListField.value = undefined;\r\n }\r\n }\r\n if (valueSelected === '0') {\r\n if (checkBoxListField) {\r\n if (ipedsList && ipedsList.length > 0) {\r\n let index: number = -1;\r\n do {\r\n index = ipedsList.findIndex(x => x.ipedsFederalCategoryId === 1);\r\n if (index > -1) {\r\n ipedsList.splice(index, 1);\r\n }\r\n } while (index > -1);\r\n }\r\n checkBoxListField.value = undefined;\r\n }\r\n }\r\n if (valueSelected === undefined) {\r\n if (checkBoxListField) {\r\n if (ipedsList && ipedsList.length > 0) {\r\n let index: number = ipedsList.length;\r\n do {\r\n ipedsList.splice(index, 1);\r\n index--;\r\n } while (ipedsList.length > 0);\r\n }\r\n checkBoxListField.value = undefined;\r\n }\r\n }\r\n application.ipeds = ipedsList;\r\n this.setState({\r\n application: application,\r\n components: components\r\n });\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n\r\n let newComponents: IApplicationForm = components;\r\n if (fieldId && fieldId[1] && fieldId[2] && fieldId[3]) {\r\n newComponents = this.cleanErrorMessages(fieldId, newComponents);\r\n newComponents = this.setValues(fieldId, newComponents, valueSelected);\r\n\r\n const fieldGroup: any = newComponents.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])];\r\n const sectionFields: any = fieldGroup.fields.filter(x => (x.data.id.split('|')[4] || '') === (fieldId[4] || ''));\r\n\r\n sectionFields.forEach(field => {\r\n if (fieldId[0] === 'testId' && field.childField && valueSelected && valueSelected !== '' &&\r\n Number(valueSelected) > 0) {\r\n Requests.getChildOptions(\r\n field.childEndPoint,\r\n valueSelected || 0,\r\n fieldId[1],\r\n fieldId[2],\r\n field.childField,\r\n true,\r\n this.resolveGetChildOptions,\r\n this.logError,\r\n undefined);\r\n }\r\n if (fieldId[0] === 'activityTypeId' && field.childField && valueSelected && valueSelected !== '' &&\r\n Number(valueSelected) > 0) {\r\n Requests.getChildOptions(\r\n field.childEndPoint,\r\n valueSelected || 0,\r\n fieldId[1],\r\n fieldId[2],\r\n field.childField,\r\n true,\r\n this.resolveGetChildOptions,\r\n this.logError,\r\n Number(newComponents.applicationFormId));\r\n }\r\n if (fieldId[0] === 'campusOptionsId' && field.childField && valueSelected && valueSelected !== '' &&\r\n Number(valueSelected) > 0) {\r\n Requests.getChildOptions(\r\n field.childEndPoint,\r\n valueSelected || 0,\r\n fieldId[1],\r\n fieldId[2],\r\n field.childField,\r\n true,\r\n this.resolveGetChildOptions,\r\n this.logError,\r\n undefined);\r\n }\r\n });\r\n }\r\n this.setState({\r\n application: app,\r\n components: newComponents\r\n });\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onChangeDropDown.name, e));\r\n }\r\n };\r\n\r\n private onChangeListCheckbox = (event: any): void => {\r\n try {\r\n const {\r\n application,\r\n components\r\n } = this.state;\r\n\r\n const fieldId: string[] = event.currentTarget.id.split('|');\r\n const app: IApplication = application;\r\n\r\n if (application && components) {\r\n const childField: string[] = event.target.id.split('|');\r\n if (childField[1] === 'noHispanicNestedCheckboxListId') {\r\n const field: IFieldForm =\r\n components.steps[Number(childField[2])].\r\n fieldsGroups[Number(childField[3])].\r\n fields[Number(childField[4])];\r\n if (!app.ipeds && field.value) {\r\n const fieldGroup: IFieldsGroup =\r\n components.steps[Number(childField[2])].\r\n fieldsGroups[Number(childField[3])];\r\n this.setIpedsValuesNestedCheckList(fieldGroup);\r\n }\r\n if (event.target.checked === true) {\r\n let ipedNew: IApplicationIpeds = { ipedsFederalCategoryId: 0 };\r\n let ipedIndex: number = -1;\r\n if (childField[0] === 'child') {\r\n ipedNew = {\r\n ipedsEthnicityId: Number(childField[7]),\r\n ipedsFederalCategoryId: Number(childField[6])\r\n };\r\n if (app.ipeds) {\r\n ipedIndex = app.ipeds.findIndex(x => x.ipedsEthnicityId === undefined &&\r\n x.ipedsFederalCategoryId === Number(childField[6]));\r\n }\r\n }\r\n else if (childField[0] === 'parent') {\r\n ipedNew = {\r\n ipedsEthnicityId: undefined,\r\n ipedsFederalCategoryId: Number(childField[6])\r\n };\r\n if (app.ipeds) {\r\n ipedIndex =\r\n app.ipeds.findIndex(x => x.ipedsFederalCategoryId ===\r\n Number(childField[6]));\r\n }\r\n }\r\n if (app.ipeds) {\r\n if (ipedIndex > -1) {\r\n app.ipeds[ipedIndex] = ipedNew;\r\n }\r\n else {\r\n app.ipeds.push(ipedNew);\r\n }\r\n }\r\n else {\r\n app.ipeds = [ipedNew];\r\n }\r\n }\r\n else {\r\n if (app.ipeds) {\r\n if (childField[0] === 'child') {\r\n const itemToRemove: number =\r\n app.ipeds.findIndex(x => x.ipedsEthnicityId === Number(childField[7]) &&\r\n x.ipedsFederalCategoryId === Number(childField[6]));\r\n app.ipeds.splice(itemToRemove, 1);\r\n }\r\n else if (childField[0] === 'parent') {\r\n let index: number = -1;\r\n do {\r\n index = app.ipeds.findIndex(x =>\r\n x.ipedsFederalCategoryId === Number(childField[6]));\r\n if (index > -1) {\r\n app.ipeds.splice(index, 1);\r\n }\r\n } while (index > -1);\r\n }\r\n }\r\n }\r\n if (childField && childField[2] && childField[3] && childField[4]) {\r\n const field: IFieldForm =\r\n components.steps[Number(childField[2])].\r\n fieldsGroups[Number(childField[3])].\r\n fields[Number(childField[4])];\r\n if (app.ipeds && app.ipeds.length === 0 && field.isRequired) {\r\n field.value = undefined;\r\n }\r\n else {\r\n // change value of field\r\n if (app.ipeds) {\r\n field.value = undefined;\r\n app.ipeds.forEach(iped => {\r\n if (iped.ipedsFederalCategoryId !== 1) {\r\n if (field.value) {\r\n field.value = field.value +\r\n `${iped.ipedsFederalCategoryId.toString()}$${iped.ipedsEthnicityId ?\r\n iped.ipedsEthnicityId.toString() : ''},`;\r\n }\r\n else {\r\n field.value =\r\n `${iped.ipedsFederalCategoryId.toString()}$${iped.ipedsEthnicityId ?\r\n iped.ipedsEthnicityId.toString() : ''},`;\r\n }\r\n }\r\n });\r\n }\r\n }\r\n }\r\n }\r\n\r\n switch (fieldId[0]) {\r\n case 'campusId':\r\n if (fieldId && fieldId[1] && fieldId[2] && fieldId[3] && fieldId[4]) {\r\n const field: any =\r\n components.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].fields[Number(fieldId[3])];\r\n if (!app.campuses && field.value) {\r\n const fieldGroup =\r\n components.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])];\r\n this.reviewCampus(fieldGroup);\r\n }\r\n }\r\n if (app.campuses) {\r\n const campusIndex: number = app.campuses.findIndex(x => x === Number(fieldId[4]));\r\n if (event.target.checked === true) {\r\n app.campuses.push(Number(fieldId[4]));\r\n }\r\n else {\r\n app.campuses.splice(campusIndex, 1);\r\n }\r\n }\r\n else {\r\n if (event.target.checked === true) {\r\n const campus: number = Number(fieldId[4]);\r\n app.campuses = [campus];\r\n }\r\n }\r\n if (fieldId && fieldId[1] && fieldId[2] && fieldId[3] && fieldId[4]) {\r\n const field: any =\r\n components.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].fields[Number(fieldId[3])];\r\n if (app.campuses && app.campuses.length === 0 && field.isRequired) {\r\n field.value = undefined;\r\n field.data.error = true;\r\n field.data.helperText = field.data.errorMessageRequired;\r\n }\r\n else {\r\n if (app.campuses) {\r\n field.value = app.campuses.toString();\r\n }\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n }\r\n }\r\n break;\r\n case 'interestId':\r\n if (fieldId && fieldId[1] && fieldId[2] && fieldId[3] && fieldId[4]) {\r\n const field: any =\r\n components.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].fields[Number(fieldId[3])];\r\n if (!app.academicInterests && field.value) {\r\n const fieldGroup =\r\n components.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])];\r\n this.reviewAcademicInterest(fieldGroup);\r\n }\r\n }\r\n if (app.academicInterests) {\r\n const index: number = app.academicInterests.findIndex(x => x === Number(fieldId[4]));\r\n if (event.target.checked === true) {\r\n app.academicInterests.push(Number(fieldId[4]));\r\n }\r\n else {\r\n app.academicInterests.splice(index, 1);\r\n }\r\n }\r\n else {\r\n if (event.target.checked === true) {\r\n app.academicInterests = [Number(fieldId[4])];\r\n }\r\n }\r\n if (fieldId && fieldId[1] && fieldId[2] && fieldId[3] && fieldId[4]) {\r\n const field: any = components.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].fields[Number(fieldId[3])];\r\n if (app.academicInterests && app.academicInterests.length === 0 && field.isRequired) {\r\n field.value = undefined;\r\n field.data.error = true;\r\n field.data.helperText = field.data.errorMessageRequired;\r\n }\r\n else {\r\n if (app.academicInterests) {\r\n field.value = app.academicInterests.toString();\r\n }\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n }\r\n }\r\n break;\r\n case 'hispanicCheckboxListId':\r\n const field: IFieldForm =\r\n components.steps[Number(childField[1])].\r\n fieldsGroups[Number(childField[2])].\r\n fields[Number(childField[3])];\r\n if (!app.ipeds && field.value) {\r\n const fieldGroup: IFieldsGroup =\r\n components.steps[Number(childField[1])].\r\n fieldsGroups[Number(childField[2])];\r\n this.setIpedsValuesCheckList(fieldGroup);\r\n }\r\n const ipedNew: IApplicationIpeds = {\r\n ipedsEthnicityId: Number(fieldId[4]),\r\n ipedsFederalCategoryId: 1\r\n };\r\n if (app.ipeds) {\r\n const ipedIndex: number = app.ipeds.findIndex(x => x.ipedsEthnicityId === undefined &&\r\n x.ipedsFederalCategoryId === 1);\r\n if (event.target.checked === true) {\r\n // when exists category 1 and null, record should be updated\r\n if (ipedIndex > -1) {\r\n app.ipeds[ipedIndex] = ipedNew;\r\n }\r\n else {\r\n app.ipeds.push(ipedNew);\r\n }\r\n }\r\n else {\r\n // remove item from list\r\n const itemToRemove: number =\r\n app.ipeds.findIndex(x => x.ipedsEthnicityId === Number(fieldId[4]) &&\r\n x.ipedsFederalCategoryId === 1);\r\n app.ipeds.splice(itemToRemove, 1);\r\n }\r\n }\r\n else {\r\n app.ipeds = [ipedNew];\r\n }\r\n // Select yes in radio buttons\r\n components.steps[Number(fieldId[1])].\r\n fieldsGroups[Number(fieldId[2])].fields.forEach(field => {\r\n if (field.data.id === 'hispanicGroupId') {\r\n field.value = '1';\r\n }\r\n });\r\n // Add in the list of value id's selected\r\n if (fieldId && fieldId[1] && fieldId[2] && fieldId[3] && fieldId[4]) {\r\n const field: IFieldForm =\r\n components.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].fields[Number(fieldId[3])];\r\n if (app.ipeds && app.ipeds.length === 0 && field.isRequired) {\r\n field.value = undefined;\r\n }\r\n else {\r\n // change value of field\r\n if (app.ipeds) {\r\n const ipedsArray: string[] = [];\r\n app.ipeds.forEach(ethnicity => {\r\n if (ethnicity.ipedsFederalCategoryId === 1) {\r\n if (ethnicity.ipedsEthnicityId) {\r\n ipedsArray.push(ethnicity.ipedsEthnicityId.toString());\r\n }\r\n }\r\n });\r\n field.value = ipedsArray.toString();\r\n }\r\n }\r\n }\r\n break;\r\n }\r\n this.setState({\r\n application: app,\r\n components: components\r\n });\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onChangeListCheckbox.name, e));\r\n }\r\n };\r\n\r\n private onChangeRadioGroup = (event: any, value: string): void => {\r\n try {\r\n const {\r\n application,\r\n components\r\n } = this.state;\r\n\r\n if (event.target.name && event.target.name !== '' && application && components) {\r\n const app: IApplication = application;\r\n const fieldId: string[] = event.target.name.split('|');\r\n let newComponents: IApplicationForm = components;\r\n\r\n switch (fieldId[0]) {\r\n case 'primaryPhoneId':\r\n newComponents = this.onPrimaryButtonClick(fieldId, newComponents, value);\r\n break;\r\n }\r\n\r\n newComponents = this.cleanErrorMessages(fieldId, newComponents);\r\n newComponents = this.setValues(fieldId, newComponents, value);\r\n\r\n this.setState({\r\n application: app,\r\n components: newComponents\r\n });\r\n }\r\n } catch (e) {\r\n this.logError(LogData.fromException(this.onChangeRadioGroup.name, e));\r\n }\r\n };\r\n\r\n private onChangeTextField = (event: any): void => {\r\n try {\r\n const {\r\n application,\r\n components\r\n } = this.state;\r\n\r\n if (event.target.id && event.target.id !== '' && application && components) {\r\n const app: IApplication = application;\r\n const fieldId: string[] = event.target.id.split('|');\r\n let fieldIndex: number = 0;\r\n if (fieldId[4]) {\r\n fieldIndex = Number(fieldId[4]) + 1;\r\n }\r\n let newComponents: IApplicationForm = components;\r\n switch (fieldId[0]) {\r\n case 'emailId':\r\n if (fieldId && fieldId[1] && fieldId[2]) {\r\n const field: any = newComponents.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].fields[Number(fieldId[3])];\r\n if (!components.emailRegExpression || event.target.value.match(components.emailRegExpression)) {\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n field.value = event.target.value;\r\n app.email = event.target.value;\r\n }\r\n else {\r\n field.data.error = true;\r\n field.data.helperText = field.data.errorMessageNotValid;\r\n }\r\n }\r\n break;\r\n case 'emergencyPhoneId':\r\n if (!event.target.value.match(/^[0-9]*$/g)) {\r\n const onlyNum = new RegExp(/([A-Za-zñ<> äÄëËïÏöÖüÜáÁéÉíÍóÓúÚýÝ'¿\"#_-Ä-´°%;&¨Ñ,¡.*+?^=!:$(){}|[\\]\\/\\\\])/g);\r\n event.target.value = event.target.value.replace(onlyNum, '');\r\n }\r\n break;\r\n case 'firstNameId':\r\n app.firstName = event.target.value;\r\n break;\r\n case 'formerLastNameId':\r\n app.formerLastName = event.target.value;\r\n break;\r\n case 'governmentId':\r\n if (fieldId && fieldId[1] && fieldId[2] && fieldId[3]) {\r\n const field: any = newComponents.steps[Number(fieldId[1])]\r\n .fieldsGroups[Number(fieldId[2])].fields[Number(fieldId[3])];\r\n if (!hasJustNumbersAndLetters(event.target.value)\r\n || event.target.value.length !== newComponents.governmentIdMaxLength) {\r\n field.data.error = true;\r\n field.data.helperText = field.data.errorMessageFormat;\r\n }\r\n else {\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n app.governmentId = event.target.value;\r\n }\r\n }\r\n break;\r\n case 'lastNameId':\r\n app.lastName = event.target.value;\r\n break;\r\n case 'lastNamePrefixId':\r\n app.lastNamePrefix = event.target.value;\r\n break;\r\n case 'legalNameId':\r\n app.legalName = event.target.value;\r\n break;\r\n case 'middleNameId':\r\n app.middleName = event.target.value;\r\n break;\r\n case 'monthsInCountryId':\r\n if (fieldId && fieldId[1] && fieldId[2] && fieldId[3]) {\r\n if (!event.target.value.match(/^[0-9]*$/g)) {\r\n const onlyNum = new RegExp(/([A-Za-zñ<> äÄëËïÏöÖüÜáÁéÉíÍóÓúÚýÝ'¿\"#_-Ä-´°%;&¨Ñ,¡.*+?^=!:$(){}|[\\]\\/\\\\])/g);\r\n event.target.value = event.target.value.replace(onlyNum, '');\r\n }\r\n const field: any = newComponents.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].fields[Number(fieldId[3])];\r\n if (Number(event.target.value) >= 0 && Number(event.target.value) <= 9999) {\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n app.monthsInCountry = Number(event.target.value);\r\n }\r\n else {\r\n if (Number(event.target.value) > 9999) {\r\n field.data.error = true;\r\n field.data.helperText = field.data.errorMessageRange;\r\n }\r\n else {\r\n field.data.error = true;\r\n field.data.helperText = field.data.errorMessageNumeric;\r\n }\r\n }\r\n }\r\n break;\r\n case 'nickNameId':\r\n app.nickname = event.target.value;\r\n break;\r\n case 'otherSourceId':\r\n app.otherSource = event.target.value;\r\n break;\r\n case 'testScoreId':\r\n const fieldGroupTestScore: any = newComponents.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])];\r\n\r\n if (!app.testScores[fieldIndex]) {\r\n app.testScores[fieldIndex] = {} as ITestScore;\r\n }\r\n app.testScores[fieldIndex].score = event.target.value;\r\n\r\n if (fieldId.length > 4) {\r\n fieldGroupTestScore.fields.forEach(function (field) {\r\n const itemArrId: string[] = field.data.id.split('|');\r\n if (fieldId[3] === itemArrId[3] && fieldId[4] === itemArrId[4]) {\r\n if (Number(event.target.value) > 9999) {\r\n field.data.error = true;\r\n field.data.helperText = field.data.errorMessageRange;\r\n field.value = event.target.value;\r\n } else {\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n field.value = event.target.value;\r\n }\r\n }\r\n });\r\n }\r\n else {\r\n fieldGroupTestScore.fields.forEach(function (field) {\r\n const itemArrId: string[] = field.data.id.split('|');\r\n if (fieldId[0] === itemArrId[0] && itemArrId.length === 1) {\r\n if (Number(event.target.value) > 9999) {\r\n field.data.error = true;\r\n field.data.helperText = field.data.errorMessageRange;\r\n field.value = event.target.value;\r\n } else {\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n field.value = event.target.value;\r\n }\r\n }\r\n });\r\n }\r\n break;\r\n case 'passportNumberId':\r\n app.passportNumber = event.target.value;\r\n break;\r\n case 'phoneNumberId':\r\n if (!event.target.value.match(/^[0-9]*$/g)) {\r\n const onlyNum = new RegExp(/([A-Za-zñ<> äÄëËïÏöÖüÜáÁéÉíÍóÓúÚýÝ'¿\"#_-Ä-´°%;&¨Ñ,¡.*+?^=!:$(){}|[\\]\\/\\\\])/g);\r\n event.target.value = event.target.value.replace(onlyNum, '');\r\n }\r\n break;\r\n case 'postalCodeId':\r\n if (!event.target.value.match(/^[0-9]*$/g)) {\r\n const onlyNum = new RegExp(/([A-Za-zñ<> äÄëËïÏöÖüÜáÁéÉíÍóÓúÚýÝ'¿\"#_-Ä-´°%;&¨Ñ,¡.*+?^=!:$(){}|[\\]\\/\\\\])/g);\r\n event.target.value = event.target.value.replace(onlyNum, '');\r\n }\r\n break;\r\n case 'visaNumberId':\r\n app.visaNumber = event.target.value;\r\n break;\r\n case 'numberOfHoursPerWeekId':\r\n if (!event.target.value.match(/^[0-9]*$/g)) {\r\n const onlyNum = new RegExp(/([A-Za-zñ<> äÄëËïÏöÖüÜáÁéÉíÍóÓúÚýÝ'¿\"#_-Ä-´°%;&¨Ñ,¡.*+?^=!:$(){}|[\\]\\/\\\\])/g);\r\n event.target.value = event.target.value.replace(onlyNum, '');\r\n }\r\n let fieldHoursPerWeek: any;\r\n if (fieldId.length < 5) {\r\n fieldHoursPerWeek = newComponents.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].fields[Number(fieldId[3])];\r\n }\r\n else {\r\n fieldHoursPerWeek = newComponents.steps[Number(fieldId[1])].\r\n fieldsGroups[Number(fieldId[2])].fields.find(x =>\r\n x.data.section === Number(fieldId[4]) &&\r\n x.data.id.substr(0, 'numberOfHoursPerWeekId'.length) ===\r\n 'numberOfHoursPerWeekId');\r\n }\r\n if (Number(event.target.value) > 168) {\r\n fieldHoursPerWeek.data.error = true;\r\n fieldHoursPerWeek.data.helperText = fieldHoursPerWeek.data.errorMessageRange;\r\n }\r\n else {\r\n fieldHoursPerWeek.data.error = false;\r\n fieldHoursPerWeek.data.helperText = '';\r\n }\r\n break;\r\n case 'numberOfWeeksPerYearId':\r\n if (!event.target.value.match(/^[0-9]*$/g)) {\r\n const onlyNum = new RegExp(/([A-Za-zñ<> äÄëËïÏöÖüÜáÁéÉíÍóÓúÚýÝ'¿\"#_-Ä-´°%;&¨Ñ,¡.*+?^=!:$(){}|[\\]\\/\\\\])/g);\r\n event.target.value = event.target.value.replace(onlyNum, '');\r\n }\r\n let fieldWeeksPerYear: any;\r\n if (fieldId.length < 5) {\r\n fieldWeeksPerYear = newComponents.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].fields[Number(fieldId[3])];\r\n }\r\n else {\r\n fieldWeeksPerYear = newComponents.steps[Number(fieldId[1])].\r\n fieldsGroups[Number(fieldId[2])].fields.find(x =>\r\n x.data.section === Number(fieldId[4]) &&\r\n x.data.id.substr(0, 'numberOfWeeksPerYearId'.length) ===\r\n 'numberOfWeeksPerYearId');\r\n }\r\n if (Number(event.target.value) > 52) {\r\n fieldWeeksPerYear.data.error = true;\r\n fieldWeeksPerYear.data.helperText = fieldWeeksPerYear.data.errorMessageRange;\r\n }\r\n else {\r\n fieldWeeksPerYear.data.error = false;\r\n fieldWeeksPerYear.data.helperText = '';\r\n }\r\n break;\r\n case 'numberOfYearsId':\r\n if (!event.target.value.match(/^[0-9]*$/g)) {\r\n const onlyNum = new RegExp(/([A-Za-zñ<> äÄëËïÏöÖüÜáÁéÉíÍóÓúÚýÝ'¿\"#_-Ä-´°%;&¨Ñ,¡.*+?^=!:$(){}|[\\]\\/\\\\])/g);\r\n event.target.value = event.target.value.replace(onlyNum, '');\r\n }\r\n let fieldYears: any;\r\n if (fieldId.length < 5) {\r\n fieldYears = newComponents.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].fields[Number(fieldId[3])];\r\n }\r\n else {\r\n fieldYears = newComponents.steps[Number(fieldId[1])].\r\n fieldsGroups[Number(fieldId[2])].fields.find(x =>\r\n x.data.section === Number(fieldId[4]) &&\r\n x.data.id.substr(0, 'numberOfYearsId'.length) ===\r\n 'numberOfYearsId');\r\n }\r\n if (Number(event.target.value) > 99) {\r\n fieldYears.data.error = true;\r\n fieldYears.data.helperText = fieldYears.data.errorMessageRange;\r\n }\r\n else {\r\n fieldYears.data.error = false;\r\n fieldYears.data.helperText = '';\r\n }\r\n break;\r\n }\r\n\r\n newComponents = this.cleanErrorMessages(fieldId, newComponents);\r\n newComponents = this.setValues(fieldId, newComponents, event.target.value);\r\n\r\n this.setState({\r\n application: app,\r\n components: newComponents\r\n });\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onChangeTextField.name, e));\r\n }\r\n };\r\n\r\n private onChangeTextFieldModal = (event: any): void => {\r\n try {\r\n\r\n if (event.target.id && event.target.id !== '') {\r\n switch (event.target.id) {\r\n case 'txtEmailField':\r\n const {\r\n components\r\n } = this.state;\r\n if (components) {\r\n if (!components.emailRegExpression || event.target.value.match(components.emailRegExpression)) {\r\n this.setState({\r\n changeEmailText: false,\r\n emailField: event.target.value,\r\n invalidEmail: false\r\n });\r\n }\r\n else {\r\n this.setState({\r\n changeEmailText: false,\r\n emailField: event.target.value,\r\n invalidEmail: true\r\n });\r\n }\r\n }\r\n break;\r\n }\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onChangeTextFieldModal.name, e));\r\n }\r\n };\r\n\r\n private onClickButton = (event: React.MouseEvent): void => {\r\n try {\r\n const {\r\n application,\r\n components\r\n } = this.state;\r\n\r\n if (event.currentTarget.id && event.currentTarget.id !== '' && application && components) {\r\n const fieldId: string[] = event.currentTarget.id.split('|');\r\n\r\n switch (fieldId[0]) {\r\n case 'educationEtsCodeButtonId':\r\n this.setState({\r\n institutions: undefined,\r\n openETSSearchModal: true,\r\n selectedCity: undefined,\r\n selectedCountry: undefined,\r\n selectedEtsCode: undefined,\r\n selectedFieldId: event.currentTarget.id,\r\n selectedInstitutionName: undefined,\r\n selectedState: undefined\r\n });\r\n break;\r\n case 'postalCodeButtonId':\r\n // Get zip code\r\n let zipCode: string = '';\r\n const fieldGroup: IFieldForm[] =\r\n components.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].fields;\r\n let fieldIndex: number = -1;\r\n if (fieldId.length > 4) {\r\n fieldIndex = fieldGroup.findIndex(x => x.data.section === Number(fieldId[4]) &&\r\n x.data.id.substr(0, 'postalCodeId'.length) === 'postalCodeId');\r\n }\r\n else {\r\n fieldIndex = fieldGroup.findIndex(x => x.data.id === 'postalCodeId');\r\n }\r\n if (fieldIndex > -1) {\r\n zipCode = components.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].\r\n fields[fieldIndex].value;\r\n }\r\n\r\n this.setState({\r\n openAddressSearchModal: true,\r\n selectedFieldId: event.currentTarget.id,\r\n selectedZipCode: zipCode\r\n });\r\n\r\n LayoutActions.setLoading(true);\r\n\r\n const {\r\n pageSize\r\n } = this.state;\r\n\r\n Requests.getAddresses(\r\n 0,\r\n pageSize,\r\n zipCode,\r\n this.resolveGetAddress, this.logError);\r\n\r\n const {\r\n total\r\n } = this.state;\r\n\r\n if (total) {\r\n const previousSize = pageSize;\r\n // Fix 60\r\n this.setState({\r\n pageSize: 0\r\n }, () => {\r\n this.setState({\r\n pageNumber: 0,\r\n pageSize: previousSize\r\n });\r\n });\r\n }\r\n break;\r\n case 'finishId':\r\n // Get action of button\r\n const confirmationIndex: number =\r\n components.fieldsGroups.findIndex(x => x.id === 'confirmationGroup');\r\n const finishButtonId: number =\r\n components.fieldsGroups[confirmationIndex].fields.findIndex(x => x.data.id === 'finishId');\r\n if (confirmationIndex > -1 && finishButtonId > -1) {\r\n const actionUrl: string | undefined = components.fieldsGroups[confirmationIndex].fields[finishButtonId].actionUrl;\r\n if (actionUrl) {\r\n window.location.assign(actionUrl);\r\n }\r\n else {\r\n window.location.assign(`${Constants.webUrl}/Admissions/Applications`);\r\n }\r\n }\r\n break;\r\n default:\r\n const actionUrl: string | undefined =\r\n components.steps[Number(fieldId[1])].\r\n fieldsGroups[Number(fieldId[2])].\r\n fields[Number(fieldId[3])].actionUrl;\r\n if (actionUrl) {\r\n window.location.assign(actionUrl);\r\n }\r\n else {\r\n window.location.assign(`${Constants.webUrl}/Admissions/Applications`);\r\n }\r\n break;\r\n }\r\n }\r\n } catch (e) {\r\n LayoutActions.setLoading(false);\r\n this.logError(LogData.fromException(this.onClickButton.name, e));\r\n }\r\n };\r\n // #endregion Change Fields Events\r\n\r\n // #region Pagination\r\n private getRowsPerPageOptions(maxValue: number): number[] {\r\n const rowsPerPageOptions: number[] = [];\r\n try {\r\n this.rowsPerPageOptions.forEach(option => {\r\n if (option < maxValue) {\r\n rowsPerPageOptions.push(option);\r\n }\r\n });\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.getRowsPerPageOptions.name, e));\r\n }\r\n return rowsPerPageOptions;\r\n }\r\n\r\n private onChangePage = (_event: any, page: number): void => {\r\n try {\r\n const {\r\n selectedInstitutionName,\r\n selectedEtsCode,\r\n selectedCity,\r\n selectedState,\r\n selectedCountry,\r\n pageSize\r\n } = this.state;\r\n\r\n this.setState({\r\n pageNumber: page\r\n });\r\n\r\n LayoutActions.setLoading(true);\r\n Requests.getInstitutions(\r\n page,\r\n pageSize,\r\n selectedInstitutionName,\r\n selectedEtsCode,\r\n selectedCity,\r\n selectedState,\r\n selectedCountry,\r\n this.resolveGetInstitutions, this.logError);\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onChangePage.name, e));\r\n }\r\n };\r\n\r\n private onChangePageAddress = (_event: any, page: number): void => {\r\n try {\r\n const {\r\n selectedZipCode,\r\n pageSize\r\n } = this.state;\r\n\r\n this.setState({\r\n pageNumber: page\r\n });\r\n\r\n LayoutActions.setLoading(true);\r\n Requests.getAddresses(\r\n page,\r\n pageSize,\r\n selectedZipCode,\r\n this.resolveGetAddress, this.logError);\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onChangePage.name, e));\r\n }\r\n };\r\n\r\n private onChangeRowsPerPage = (event: any): void => {\r\n try {\r\n this.setState({\r\n pageNumber: 0,\r\n pageSize: Number(event.target.value)\r\n });\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onChangeRowsPerPage.name, e));\r\n }\r\n };\r\n // #endregion Pagination\r\n\r\n // #region Expansion\r\n private onAddMore = (fieldGroup: IFieldsGroup, stepIndex: number, fieldGroupIndex: number): void => {\r\n try {\r\n if (fieldGroup.id && fieldGroup.id !== '') {\r\n const {\r\n components,\r\n errors,\r\n expanded\r\n } = this.state;\r\n\r\n if (components) {\r\n if (components.expansionPanel === null) {\r\n components.expansionPanel = {};\r\n }\r\n switch (fieldGroup.id) {\r\n case 'employmentGroup':\r\n if (components.expansionPanel.employeeCount !== undefined) {\r\n this.createNewSection(components, fieldGroup, errors, stepIndex,\r\n fieldGroupIndex, components.expansionPanel.employeeCount, 'employmentErrosId', expanded);\r\n\r\n components.expansionPanel.employeeCount++;\r\n }\r\n else {\r\n this.createNewSection(components, fieldGroup, errors, stepIndex,\r\n fieldGroupIndex, 0, 'employmentErrosId', expanded);\r\n\r\n components.expansionPanel.employeeCount = 1;\r\n }\r\n break;\r\n case 'programOfStudyGroup':\r\n if (components.expansionPanel.programsCount !== undefined) {\r\n this.createNewSection(components, fieldGroup, errors, stepIndex,\r\n fieldGroupIndex, components.expansionPanel.programsCount, 'programOfStudydErrorsId', expanded);\r\n\r\n components.expansionPanel.programsCount++;\r\n }\r\n else {\r\n this.createNewSection(components, fieldGroup, errors, stepIndex,\r\n fieldGroupIndex, 0, 'programOfStudydErrorsId', expanded);\r\n\r\n components.expansionPanel.programsCount = 1;\r\n }\r\n break;\r\n case 'phoneGroup':\r\n if (components.expansionPanel.phoneCount !== undefined) {\r\n this.createNewSection(components, fieldGroup, errors, stepIndex,\r\n fieldGroupIndex, components.expansionPanel.phoneCount, 'phoneErrorsId', expanded);\r\n\r\n components.expansionPanel.phoneCount++;\r\n }\r\n else {\r\n this.createNewSection(components, fieldGroup, errors, stepIndex,\r\n fieldGroupIndex, 0, 'phoneErrorsId', expanded);\r\n\r\n components.expansionPanel.phoneCount = 1;\r\n }\r\n break;\r\n case 'testScoreGroup':\r\n const initialGroupLengthTS: number = fieldGroup.fields.length;\r\n\r\n this.createNewSection(components, fieldGroup, errors, stepIndex,\r\n fieldGroupIndex, initialGroupLengthTS, 'testScoreErrorsId', expanded);\r\n\r\n const finalGroupLengthTS: number = fieldGroup.fields.length;\r\n const newSetTS: IFieldForm[] = fieldGroup.fields.slice(initialGroupLengthTS, finalGroupLengthTS);\r\n const parentDropDownTS: IFieldForm = newSetTS[newSetTS.findIndex(e => e.childField !== null)];\r\n const childDropDownTS:\r\n IFieldForm =\r\n newSetTS[newSetTS.findIndex(e => e.data.id.split('|')[0] === parentDropDownTS.childField)];\r\n childDropDownTS.data.options = [];\r\n parentDropDownTS.childField = childDropDownTS.data.id;\r\n\r\n if (components.expansionPanel.testScoresCount !== undefined) {\r\n components.expansionPanel.testScoresCount++;\r\n }\r\n else {\r\n components.expansionPanel.testScoresCount = 1;\r\n }\r\n break;\r\n case 'emergencyContactGroup':\r\n if (errors[stepIndex].groupErrors[fieldGroupIndex].sectionErrors.length < 1) {\r\n if (components.expansionPanel.emergencyContactsCount !== undefined) {\r\n // Error id is not sent because errorId for this group will be excluded\r\n this.createNewSection(components, fieldGroup, errors, stepIndex,\r\n fieldGroupIndex, components.expansionPanel.emergencyContactsCount, '', expanded);\r\n\r\n components.expansionPanel.emergencyContactsCount++;\r\n }\r\n else {\r\n this.createNewSection(components, fieldGroup, errors, stepIndex,\r\n fieldGroupIndex, 0, '', expanded);\r\n\r\n components.expansionPanel.emergencyContactsCount = 1;\r\n }\r\n }\r\n break;\r\n case 'addressInformationGroup':\r\n if (components.expansionPanel.addressessCount !== undefined) {\r\n // Error id is not sent because errorId for this group will be excluded\r\n this.createNewSection(components, fieldGroup, errors, stepIndex,\r\n fieldGroupIndex, components.expansionPanel.addressessCount, '', expanded);\r\n\r\n components.expansionPanel.addressessCount++;\r\n }\r\n else {\r\n this.createNewSection(components, fieldGroup, errors, stepIndex,\r\n fieldGroupIndex, 0, '', expanded);\r\n\r\n components.expansionPanel.addressessCount = 1;\r\n }\r\n break;\r\n case 'educationGroup':\r\n if (components.expansionPanel.educationCount !== undefined) {\r\n // Error id is not sent because errorId for this group will be excluded\r\n this.createNewSection(components, fieldGroup, errors, stepIndex,\r\n fieldGroupIndex, components.expansionPanel.educationCount, '', expanded);\r\n\r\n components.expansionPanel.educationCount++;\r\n }\r\n else {\r\n this.createNewSection(components, fieldGroup, errors, stepIndex,\r\n fieldGroupIndex, 0, '', expanded);\r\n\r\n components.expansionPanel.educationCount = 1;\r\n }\r\n break;\r\n case 'activityGroup':\r\n const initialGroupLength: number = fieldGroup.fields.length;\r\n\r\n if (components.expansionPanel.activityCount !== undefined) {\r\n // Error id is not sent because errorId for this group will be excluded\r\n this.createNewSection(components, fieldGroup, errors, stepIndex,\r\n fieldGroupIndex, components.expansionPanel.activityCount, '', expanded);\r\n }\r\n else {\r\n this.createNewSection(components, fieldGroup, errors, stepIndex,\r\n fieldGroupIndex, 0, '', expanded);\r\n }\r\n\r\n const finalGroupLength: number = fieldGroup.fields.length;\r\n const newSet: IFieldForm[] = fieldGroup.fields.slice(initialGroupLength, finalGroupLength);\r\n const parentDropDown: IFieldForm = newSet[newSet.findIndex(e => e.childField !== null)];\r\n const childDropDown: IFieldForm = newSet[newSet.findIndex(e => e.data.id.split('|')[0] === parentDropDown.childField)];\r\n childDropDown.data.options = [];\r\n parentDropDown.childField = childDropDown.data.id;\r\n\r\n if (components.expansionPanel.activityCount !== undefined) {\r\n components.expansionPanel.activityCount++;\r\n }\r\n else {\r\n components.expansionPanel.activityCount = 1;\r\n }\r\n break;\r\n case 'relativesGroup':\r\n if (components.expansionPanel.relativesCount !== undefined) {\r\n // Error id is not sent because errorId for this group will be excluded\r\n this.createNewSection(components, fieldGroup, errors, stepIndex,\r\n fieldGroupIndex, components.expansionPanel.relativesCount, '', expanded);\r\n\r\n components.expansionPanel.relativesCount++;\r\n }\r\n else {\r\n this.createNewSection(components, fieldGroup, errors, stepIndex,\r\n fieldGroupIndex, 0, '', expanded);\r\n\r\n components.expansionPanel.relativesCount = 1;\r\n }\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onAddMore.name, e));\r\n }\r\n };\r\n\r\n private onAddDeleteButton = (fieldGroup: IFieldsGroup, stepIndex: number, fieldGroupIndex:\r\n number, groupLength: number, sectionNumber: number): void => {\r\n try {\r\n const data: IDataForm = {\r\n id: `deleteIcon|${stepIndex}|${fieldGroupIndex}|${groupLength}|${sectionNumber}`,\r\n modified: true,\r\n section: sectionNumber\r\n };\r\n\r\n const deleteButton: IFieldForm = {\r\n componentType: 'DeleteIconButton',\r\n data: data,\r\n isNumeric: false,\r\n isRequired: false,\r\n onClick: this.onDeleteItem,\r\n value: ''\r\n };\r\n\r\n fieldGroup.fields.push(deleteButton);\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onAddDeleteButton.name, e));\r\n }\r\n };\r\n\r\n private onChangeExpansionPanel = (panelId: string) => (): void => {\r\n try {\r\n this.setState({\r\n expanded: panelId\r\n });\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onChangeExpansionPanel.name, e));\r\n }\r\n };\r\n\r\n private onDeleteItem = (event: any): void => {\r\n try {\r\n const {\r\n errors,\r\n components\r\n } = this.state;\r\n\r\n if (components) {\r\n if (event.currentTarget.id) {\r\n const buttonId: string[] = event.currentTarget.id.split('|');\r\n const componentName: string = components.steps[buttonId[1]].fieldsGroups[buttonId[2]].id;\r\n const fields: IFieldForm[] = components.steps[buttonId[1]].fieldsGroups[buttonId[2]].fields;\r\n if (fields) {\r\n let fieldIndex: number;\r\n do {\r\n fieldIndex = fields.findIndex(x => x.data.section === Number(buttonId[4]));\r\n if (fieldIndex > -1) {\r\n fields.splice(fieldIndex, 1);\r\n }\r\n } while (fieldIndex > -1);\r\n }\r\n components.steps[Number(buttonId[1])].fieldsGroups[Number(buttonId[2])].fields = fields;\r\n\r\n // Delete section from sectionErrors\r\n const sectionIndex = errors[Number(buttonId[1])].groupErrors[Number(buttonId[2])].sectionErrors.findIndex(\r\n section => section.sectionIndex === Number(buttonId[4]));\r\n if (sectionIndex > -1) {\r\n errors[Number(buttonId[1])].groupErrors[Number(buttonId[2])].sectionErrors.splice(sectionIndex, 1);\r\n }\r\n\r\n switch (componentName) {\r\n case 'phoneGroup':\r\n // Search for primary selected in phone group\r\n const primaryPhoneField: IFieldForm[] = components.steps[buttonId[1]].fieldsGroups[buttonId[2]]\r\n .fields.filter(x => x.data.id.substr(0, 'primaryPhoneId'.length) === 'primaryPhoneId' && x.value === '1');\r\n // If doesn't exist, select first item as primary\r\n if (primaryPhoneField.length === 0) {\r\n const firstPrimaryPhoneField: number = components.steps[buttonId[1]].fieldsGroups[buttonId[2]]\r\n .fields.findIndex(x => x.data.id === 'primaryPhoneId');\r\n if (firstPrimaryPhoneField > -1) {\r\n components.steps[buttonId[1]].fieldsGroups[buttonId[2]]\r\n .fields[firstPrimaryPhoneField].value = '1';\r\n }\r\n }\r\n break;\r\n case 'testScoreGroup':\r\n const {\r\n application\r\n } = this.state;\r\n application.testScores[Number(buttonId[3]) + 1] = {};\r\n this.setState({\r\n application: application\r\n });\r\n break;\r\n }\r\n const fieldGroup: IFieldsGroup =\r\n components.steps[buttonId[1]].fieldsGroups[buttonId[2]];\r\n let maxAdd: number;\r\n if (fieldGroup.maximumAllowed) {\r\n maxAdd = Number(fieldGroup.maximumAllowed) - 1;\r\n }\r\n else {\r\n maxAdd = 99;\r\n }\r\n if (errors[buttonId[1]].groupErrors[buttonId[2]].sectionErrors.length < maxAdd) {\r\n // Add more button if it was remove\r\n components.steps[buttonId[1]].fieldsGroups[buttonId[2]].isMultiple = true;\r\n }\r\n }\r\n\r\n this.setState({\r\n components: components,\r\n errors: errors\r\n });\r\n\r\n event.stopPropagation();\r\n event.preventDefault();\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.onDeleteItem.name, e));\r\n }\r\n };\r\n // #endregion Expansion\r\n // #endregion Events\r\n\r\n // #region Functions\r\n private assignFieldValue = (fieldGroup: IFieldForm[], fieldId: string[],\r\n fieldIdName: string, isSectionField: boolean, value?: any): void => {\r\n const {\r\n components\r\n } = this.state;\r\n\r\n if (components) {\r\n let fieldIndex: number = 1;\r\n if (isSectionField) {\r\n fieldIndex = fieldGroup.findIndex(x => x.data.section === Number(fieldId[4]) &&\r\n x.data.id.substr(0, fieldIdName.length) === fieldIdName);\r\n }\r\n else {\r\n fieldIndex = fieldGroup.findIndex(x => x.data.id === fieldIdName);\r\n }\r\n if (fieldIndex > -1) {\r\n components.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].\r\n fields[fieldIndex].value = value;\r\n }\r\n }\r\n };\r\n\r\n private cleanErrorMessages = (fieldId: string[], newComponents: IApplicationForm): IApplicationForm => {\r\n if (fieldId && fieldId[1] && fieldId[2] && fieldId[3]) {\r\n let field: IFieldForm | undefined;\r\n\r\n if (fieldId.length > 4) {\r\n const fieldGroup: IFieldForm[] =\r\n newComponents.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].fields;\r\n field =\r\n fieldGroup.find(x => x.data.id.split('|')[3] === fieldId[3] && x.data.id.split('|')[4] === fieldId[4]);\r\n }\r\n else {\r\n field =\r\n newComponents.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].fields[Number(fieldId[3])];\r\n }\r\n\r\n if (field !== undefined) {\r\n if ((field.data.errorMessageDuplicate === undefined ||\r\n field.data.errorMessageDuplicate === null) &&\r\n (field.data.errorMessageFormat === undefined ||\r\n field.data.errorMessageFormat === null) &&\r\n (field.data.errorMessageNotValid === undefined ||\r\n field.data.errorMessageNotValid === null) &&\r\n (field.data.errorMessageNumeric === undefined ||\r\n field.data.errorMessageNumeric === null) &&\r\n (field.data.errorMessagePrimary === undefined ||\r\n field.data.errorMessagePrimary === null) &&\r\n (field.data.errorMessageRange === undefined ||\r\n field.data.errorMessageRange === null)) {\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n }\r\n }\r\n }\r\n return newComponents;\r\n };\r\n\r\n private copyField = (id: string, stepIndex: number, fieldGroupIndex: number,\r\n groupLength: number, sectionNumber: number, components: IApplicationForm): IApplicationForm => {\r\n try {\r\n const fields: any =\r\n components.steps[stepIndex].fieldsGroups[fieldGroupIndex].fields;\r\n const fieldIndex: number =\r\n fields.findIndex(x => x.data.id === id);\r\n\r\n const copiedField: IFieldForm = fields[fieldIndex];\r\n const newField: IFieldForm = JSON.parse(JSON.stringify(copiedField));\r\n\r\n newField.data.id =\r\n `${id}|${stepIndex}|${fieldGroupIndex}|${groupLength}|${sectionNumber}`;\r\n let exist: boolean = false;\r\n if (copiedField.componentType === 'Dropdown') {\r\n if (copiedField.default && copiedField.data.options) {\r\n copiedField.data.options.forEach(option => {\r\n if (option.value.toString() === copiedField.default.toString()) {\r\n exist = true;\r\n }\r\n });\r\n }\r\n if (exist) {\r\n newField.value = copiedField.default;\r\n }\r\n else {\r\n newField.value = '';\r\n }\r\n }\r\n else {\r\n newField.value = copiedField.default ? copiedField.default : '';\r\n }\r\n newField.data.error = false;\r\n newField.data.helperText = '';\r\n newField.data.modified = true;\r\n newField.data.section = sectionNumber;\r\n fields.push(newField);\r\n components.steps[stepIndex].fieldsGroups[fieldGroupIndex].fields = fields;\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.copyField.name, e));\r\n }\r\n return components;\r\n };\r\n\r\n private createNewSection = (components: IApplicationForm, fieldGroup: IFieldsGroup, errors: IApplicationErrors[],\r\n stepIndex: number, fieldGroupIndex: number, count: number, errorTexId: string, expanded): void => {\r\n let sectionIndex: number;\r\n const groupLength: number = fieldGroup.fields.length;\r\n /* Initialization of SectionErrors in errors state variable and set of\r\n * SectionIndex = sectionErrors.length -1; \r\n */\r\n sectionIndex = errors[stepIndex].groupErrors[fieldGroupIndex].sectionErrors.push(\r\n { sectionIndex: count, isSectionError: false, fieldsErrors: [] }) - 1;\r\n\r\n fieldGroup.fields.forEach((field, i) => {\r\n if (!field.data.modified) {\r\n if (field.data.id !== errorTexId) {\r\n components = this.copyField(field.data.id, stepIndex,\r\n fieldGroupIndex, (groupLength - 1) + i, count, components);\r\n }\r\n // Initialization of FieldErrors in errors state variable\r\n errors[stepIndex].groupErrors[fieldGroupIndex].sectionErrors[sectionIndex].fieldsErrors.push(\r\n { fieldId: field.data.id, isFieldError: false }\r\n );\r\n }\r\n });\r\n\r\n this.onAddDeleteButton(fieldGroup, stepIndex, fieldGroupIndex, (groupLength - 1), count);\r\n\r\n let maxAdd: number;\r\n if (fieldGroup.maximumAllowed) {\r\n maxAdd = Number(fieldGroup.maximumAllowed) - 1;\r\n }\r\n else {\r\n maxAdd = 99;\r\n }\r\n if (errors && errors[stepIndex].groupErrors[fieldGroupIndex].sectionErrors.length < maxAdd) {\r\n fieldGroup.isMultiple = true;\r\n }\r\n else {\r\n fieldGroup.isMultiple = false;\r\n }\r\n\r\n this.setState({\r\n components: components,\r\n errors: errors,\r\n expanded: fieldGroup.isExpansionPanel ?\r\n `panel|${stepIndex}|${fieldGroupIndex}|${count}` : expanded\r\n });\r\n };\r\n\r\n private reviewRequiredFields = (): boolean => {\r\n const {\r\n application,\r\n components,\r\n errors\r\n } = this.state;\r\n\r\n let isValid: boolean = true;\r\n if (components) {\r\n let programsValid: boolean = true;\r\n let testScoresValid: boolean = true;\r\n let validPhones: boolean = true;\r\n let isValidEmploymentSection: boolean = true;\r\n let emergencyContactsValid: boolean = true;\r\n let ipedsValid: boolean = true;\r\n let addressValid: boolean = true;\r\n let userDefinedValid: boolean = true;\r\n let educationValid: boolean = true;\r\n let activityValid: boolean = true;\r\n let relativeValid: boolean = true;\r\n let residencyValid: boolean = true;\r\n\r\n let ids: string[] = [];\r\n let fieldSectionIndex: number;\r\n let fieldId: string;\r\n let sectionErrorIndex: number;\r\n let fieldErrorIndex: number;\r\n\r\n components.steps.forEach((step, stepIndex) => {\r\n fieldErrorIndex = -1;\r\n step.fieldsGroups.forEach((fieldsGroup, groupIndex) => {\r\n fieldsGroup.fields.forEach(field => {\r\n if (field.isRequired && !field.value) {\r\n field.data.error = true;\r\n field.data.helperText = field.data.errorMessageRequired;\r\n isValid = false;\r\n } else if (field.isNumeric && String(field.value).length > 0 && isNaN(Number(field.value))) {\r\n field.data.error = true;\r\n field.data.helperText = field.data.errorMessageNumeric;\r\n isValid = false;\r\n }\r\n else {\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n }\r\n });\r\n\r\n // init counts\r\n if (!components.expansionPanel) {\r\n components.expansionPanel = {};\r\n components.expansionPanel.activityCount = components.expansionPanel.activityCount ?\r\n components.expansionPanel.activityCount : 0;\r\n\r\n components.expansionPanel.addressessCount = components.expansionPanel.addressessCount ?\r\n components.expansionPanel.addressessCount : 0;\r\n\r\n components.expansionPanel.educationCount = components.expansionPanel.educationCount ?\r\n components.expansionPanel.educationCount : 0;\r\n\r\n components.expansionPanel.emergencyContactsCount = components.expansionPanel.emergencyContactsCount ?\r\n components.expansionPanel.emergencyContactsCount : 0;\r\n\r\n components.expansionPanel.employeeCount = components.expansionPanel.employeeCount ?\r\n components.expansionPanel.employeeCount : 0;\r\n\r\n components.expansionPanel.phoneCount = components.expansionPanel.phoneCount ?\r\n components.expansionPanel.phoneCount : 0;\r\n\r\n components.expansionPanel.programsCount = components.expansionPanel.programsCount ?\r\n components.expansionPanel.programsCount : 0;\r\n\r\n components.expansionPanel.relativesCount = components.expansionPanel.relativesCount ?\r\n components.expansionPanel.relativesCount : 0;\r\n\r\n components.expansionPanel.testScoresCount = components.expansionPanel.testScoresCount ?\r\n components.expansionPanel.testScoresCount : 0;\r\n }\r\n\r\n // #region Components Validations\r\n\r\n // #region Programs\r\n if (fieldsGroup.id === 'programOfStudyGroup') {\r\n programsValid = this.reviewPrograms(fieldsGroup);\r\n const textErrorIndex: number = fieldsGroup.fields.findIndex(x => x.data.id === 'programOfStudydErrorsId');\r\n if (!programsValid) {\r\n if (textErrorIndex > -1) {\r\n fieldsGroup.fields[textErrorIndex].data.error = true;\r\n }\r\n }\r\n else {\r\n if (textErrorIndex > -1) {\r\n fieldsGroup.fields[textErrorIndex].data.error = false;\r\n fieldsGroup.fields[textErrorIndex].data.label = '';\r\n }\r\n }\r\n }\r\n // #endregion Programs\r\n\r\n // #region TestScores\r\n if (fieldsGroup.id === 'testScoreGroup') {\r\n const filteredControls: IFieldForm[] =\r\n fieldsGroup.fields.filter(f => !(f.data.id.includes('deleteIcon') || f.data.id.includes('testScoreErrorsId')));\r\n const groupedControls: any = filteredControls.reduce(function (r, a) {\r\n const key: string | undefined = a.data.id.split('|')[4];\r\n let index: number = 0;\r\n if (!key) {\r\n index = 0;\r\n } else {\r\n index = Number(key) + 1;\r\n }\r\n r[index] = r[index] || [];\r\n r[index].push(a);\r\n return r;\r\n }, Object.create(null));\r\n\r\n const messageErrorIndex: number = fieldsGroup.fields.findIndex(x => x.data.id === 'testScoreErrorsId');\r\n testScoresValid = this.reviewTestScores(groupedControls);\r\n if (!testScoresValid) {\r\n if (messageErrorIndex > -1) {\r\n fieldsGroup.fields[messageErrorIndex].data.error = true;\r\n fieldsGroup.fields[messageErrorIndex].data.label = fieldsGroup.errorMessageDuplicate;\r\n }\r\n }\r\n else {\r\n if (messageErrorIndex > -1) {\r\n fieldsGroup.fields[messageErrorIndex].data.error = false;\r\n fieldsGroup.fields[messageErrorIndex].data.label = '';\r\n }\r\n }\r\n\r\n // Validate testscore completeness\r\n if (testScoresValid && !filteredControls.some(f => f.data.error === true)) {\r\n testScoresValid = this.reviewTestScoreCompleteness(groupedControls);\r\n\r\n if (!testScoresValid) {\r\n if (messageErrorIndex > -1) {\r\n fieldsGroup.fields[messageErrorIndex].data.error = true;\r\n fieldsGroup.fields[messageErrorIndex].data.label = fieldsGroup.errorMessageRequired;\r\n }\r\n }\r\n else {\r\n if (messageErrorIndex > -1) {\r\n fieldsGroup.fields[messageErrorIndex].data.error = false;\r\n fieldsGroup.fields[messageErrorIndex].data.label = '';\r\n }\r\n }\r\n }\r\n\r\n // removes empty test scores\r\n for (let i: number = application.testScores.length; i >= 0; i--) {\r\n if (application.testScores[i]) {\r\n if (!application.testScores[i].id) {\r\n application.testScores.splice(i, 1);\r\n }\r\n } else {\r\n application.testScores.splice(i, 1);\r\n }\r\n }\r\n }\r\n // #endregion TestScores\r\n\r\n // #region Phones\r\n if (fieldsGroup.id === 'phoneGroup') {\r\n validPhones = this.reviewPhoneGroup(fieldsGroup);\r\n const textErrorIndex: number = fieldsGroup.fields.findIndex(x => x.data.id === 'phoneErrorsId');\r\n if (!validPhones) {\r\n if (textErrorIndex > -1) {\r\n fieldsGroup.fields[textErrorIndex].data.error = true;\r\n }\r\n }\r\n else {\r\n if (textErrorIndex > -1) {\r\n fieldsGroup.fields[textErrorIndex].data.error = false;\r\n fieldsGroup.fields[textErrorIndex].data.label = '';\r\n }\r\n }\r\n }\r\n // #endregion Phones\r\n\r\n // #region Ipeds\r\n if (fieldsGroup.id === 'ipedsGroup') {\r\n ipedsValid = this.reviewIpeds(fieldsGroup);\r\n const textErrorIndex: number = fieldsGroup.fields.findIndex(x => x.data.id === 'ipedsErrorsId');\r\n if (!ipedsValid) {\r\n if (textErrorIndex > -1) {\r\n fieldsGroup.fields[textErrorIndex].data.error = true;\r\n }\r\n }\r\n else {\r\n if (textErrorIndex > -1) {\r\n fieldsGroup.fields[textErrorIndex].data.error = false;\r\n fieldsGroup.fields[textErrorIndex].data.label = '';\r\n }\r\n }\r\n }\r\n // #endregion Ipeds\r\n\r\n // #region Employment\r\n if (fieldsGroup.id === 'employmentGroup') {\r\n isValidEmploymentSection = this.reviewEmployment(fieldsGroup);\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id.substr(0, 'employmentErrosId'.length) === 'employmentErrosId');\r\n fieldsById.forEach(field => {\r\n if (!isValidEmploymentSection) {\r\n field.data.error = true;\r\n }\r\n else {\r\n field.data.error = false;\r\n field.data.label = '';\r\n }\r\n });\r\n isValid = !isValidEmploymentSection ? false : isValid;\r\n }\r\n // #endregion Employment\r\n\r\n // #region EmergencyContacts\r\n if (fieldsGroup.id === 'emergencyContactGroup') {\r\n emergencyContactsValid = this.reviewEmergencyContacts(fieldsGroup);\r\n isValid = !emergencyContactsValid ? false : isValid;\r\n }\r\n // #endregion EmergencyContacts\r\n\r\n // #region Address\r\n if (fieldsGroup.id === 'addressInformationGroup') {\r\n addressValid = this.reviewAddress(fieldsGroup);\r\n isValid = !addressValid ? false : isValid;\r\n }\r\n // #endregion Address\r\n\r\n // #region UserDefinedFields\r\n if (fieldsGroup.isCustom) {\r\n userDefinedValid = this.reviewUserDefined(fieldsGroup);\r\n isValid = !userDefinedValid ? false : isValid;\r\n }\r\n // #endregion UserDefinedFields\r\n\r\n // #region Education\r\n if (fieldsGroup.id === 'educationGroup') {\r\n educationValid = this.reviewEducation(fieldsGroup);\r\n isValid = !educationValid ? false : isValid;\r\n }\r\n // #endregion Education\r\n\r\n // #region Activities\r\n if (fieldsGroup.id === 'activityGroup') {\r\n activityValid = this.reviewActivities(fieldsGroup);\r\n }\r\n // #endregion Activities\r\n\r\n // #region Relatives\r\n if (fieldsGroup.id === 'relativesGroup') {\r\n relativeValid = this.reviewRelatives(fieldsGroup);\r\n isValid = !relativeValid ? false : isValid;\r\n }\r\n // #endregion Relatives\r\n\r\n // #region Residency\r\n if (fieldsGroup.id === 'residencyGroup') {\r\n residencyValid = this.reviewResidency(fieldsGroup);\r\n isValid = !residencyValid ? false : isValid;\r\n }\r\n // #endregion Residency\r\n\r\n // #region Campuses\r\n if (fieldsGroup.id === 'campusGroup') {\r\n this.reviewCampus(fieldsGroup);\r\n }\r\n // #endregion Campuses\r\n\r\n // #region Academic Interest\r\n if (fieldsGroup.id === 'interestGroup') {\r\n this.reviewAcademicInterest(fieldsGroup);\r\n }\r\n // #endregion Academic Interest\r\n // #endregion Components Validations\r\n // Group errors\r\n fieldsGroup.fields.forEach(field => {\r\n // Set errors in copied fields inside the SectionErrors array of errors state variable\r\n if (field.data.modified) {\r\n ids = field.data.id.split('|');\r\n if (ids[0] !== 'deleteIcon') {\r\n // Gets the actual Section index from the field id\r\n fieldSectionIndex = Number(ids[4]);\r\n // Gets the actual Field id\r\n fieldId = ids[0];\r\n // Gets the index of the sectionErrors array\r\n sectionErrorIndex = errors[stepIndex].groupErrors[groupIndex].sectionErrors.findIndex(section =>\r\n section.sectionIndex === fieldSectionIndex);\r\n if (sectionErrorIndex > -1) {\r\n // Gets the index of the fieldErrors array\r\n fieldErrorIndex = errors[stepIndex].groupErrors[groupIndex].sectionErrors[sectionErrorIndex].fieldsErrors\r\n .findIndex(field => field.fieldId === fieldId);\r\n if (fieldErrorIndex > -1) {\r\n // Sets the value of the error\r\n errors[stepIndex].groupErrors[groupIndex].sectionErrors[sectionErrorIndex].fieldsErrors[fieldErrorIndex]\r\n .isFieldError = field.data.error ? field.data.error : false;\r\n }\r\n }\r\n }\r\n }\r\n else {\r\n // Set errors in first fields inside the firstSectionErrors array state variable\r\n fieldErrorIndex = errors[stepIndex].groupErrors[groupIndex].firstSectionErrors.firstFieldsErrors.findIndex(fieldError =>\r\n fieldError.fieldId === field.data.id);\r\n // Checks if the field is already in firstFieldsErrors\r\n if (fieldErrorIndex > -1) {\r\n errors[stepIndex].groupErrors[groupIndex].firstSectionErrors.firstFieldsErrors[fieldErrorIndex].isFieldError =\r\n field.data.error ? field.data.error : false;\r\n } else {\r\n errors[stepIndex].groupErrors[groupIndex].firstSectionErrors.firstFieldsErrors.push(\r\n { fieldId: field.data.id, isFieldError: field.data.error ? field.data.error : false }\r\n );\r\n }\r\n }\r\n });\r\n\r\n errors[stepIndex].groupErrors[groupIndex].firstSectionErrors.isFirstSectionErrors =\r\n errors[stepIndex].groupErrors[groupIndex].firstSectionErrors.firstFieldsErrors.some(fieldError => fieldError.isFieldError);\r\n\r\n errors[stepIndex].groupErrors[groupIndex].sectionErrors.forEach(sectionError => {\r\n sectionError.isSectionError = sectionError.fieldsErrors.some(fieldError => fieldError.isFieldError);\r\n });\r\n\r\n errors[stepIndex].groupErrors[groupIndex].isGroupError =\r\n fieldsGroup.fields.some(field => field.data.error ? field.data.error : false);\r\n });\r\n errors[stepIndex].isStepError = errors[stepIndex].groupErrors.some(groupError => groupError.isGroupError);\r\n });\r\n\r\n // Multiple components validations\r\n isValid = programsValid && testScoresValid &&\r\n validPhones && ipedsValid && addressValid &&\r\n activityValid && relativeValid &&\r\n isValid;\r\n\r\n const allErrors: IGroupErrors[] = [];\r\n const especificErrors: IGroupErrors[] = [];\r\n if (!isValid) {\r\n errors.forEach(step => {\r\n step.groupErrors.forEach(groupError => {\r\n if (groupError.isGroupError) {\r\n if (\r\n // groupError.groupId === 'emergencyContactGroup' ||\r\n (groupError.groupId === 'educationGroup' && application.education.length === 0) ||\r\n groupError.groupId === 'activityGroup' ||\r\n groupError.groupId === 'residencyGroup') {\r\n especificErrors.push(groupError);\r\n }\r\n else {\r\n allErrors.push(groupError);\r\n }\r\n }\r\n });\r\n });\r\n if (allErrors.length === 0) {\r\n isValid = programsValid && testScoresValid && validPhones &&\r\n ipedsValid && addressValid &&\r\n isValidEmploymentSection && emergencyContactsValid &&\r\n educationValid && activityValid && relativeValid && residencyValid;\r\n }\r\n }\r\n\r\n this.setState({\r\n components: components,\r\n errors: errors\r\n });\r\n }\r\n return isValid;\r\n };\r\n\r\n private setApplicationValues = (fieldId: string, fieldDefault: any): void => {\r\n const {\r\n application\r\n } = this.state;\r\n\r\n switch (fieldId) {\r\n case 'attendStatusId':\r\n application.collegeAttendStatus = fieldDefault;\r\n break;\r\n case 'campusId':\r\n application.campuses = fieldDefault;\r\n break;\r\n case 'counselorId':\r\n application.counselorId = fieldDefault;\r\n break;\r\n case 'countryOfBirthId':\r\n application.countryOfBirth = fieldDefault;\r\n break;\r\n case 'ethnicityId':\r\n application.ethnicity = fieldDefault;\r\n break;\r\n case 'genderId':\r\n application.gender = fieldDefault;\r\n break;\r\n case 'maritalyId':\r\n application.maritalStatus = fieldDefault;\r\n break;\r\n case 'passportCountryId':\r\n application.passportCountryId = fieldDefault;\r\n break;\r\n case 'primaryCitizenshipId':\r\n application.primaryCitizenship = fieldDefault;\r\n break;\r\n case 'primaryLanguageId':\r\n application.primaryLanguage = fieldDefault;\r\n break;\r\n case 'prefixId':\r\n application.prefix = fieldDefault;\r\n break;\r\n case 'religionId':\r\n application.religion = fieldDefault;\r\n break;\r\n case 'secondayCitizenshipId':\r\n application.secondaryCitizenship = fieldDefault;\r\n break;\r\n case 'secondaryLanguageId':\r\n application.secondaryLanguage = fieldDefault;\r\n break;\r\n case 'sessionPeriodId':\r\n application.period = fieldDefault;\r\n break;\r\n case 'sourceId':\r\n application.sourceId = fieldDefault;\r\n break;\r\n case 'suffixId':\r\n application.suffix = fieldDefault;\r\n break;\r\n case 'veteranId':\r\n application.veteranStatus = fieldDefault;\r\n break;\r\n case 'visaId':\r\n application.visa = fieldDefault;\r\n break;\r\n case 'visaCountryId':\r\n application.visaCountryId = fieldDefault;\r\n break;\r\n case 'extraCurricularActivityId':\r\n application.isInterestedInExtracurricular = fieldDefault;\r\n break;\r\n case 'financialAidId':\r\n application.isInterestedInFinancialAid = fieldDefault;\r\n break;\r\n case 'retiredId':\r\n application.isRetired = fieldDefault;\r\n break;\r\n case 'seekingDegreeId':\r\n application.isSeekingDegree = fieldDefault;\r\n break;\r\n case 'policyCheckboxId':\r\n application.policy = fieldDefault;\r\n break;\r\n case 'dateOfBirthId':\r\n application.dateOfBirth = fieldDefault;\r\n break;\r\n case 'visaExpirationDateId':\r\n application.visaExpiration = fieldDefault;\r\n break;\r\n case 'passportExpirationDateId':\r\n application.passportExpiration = fieldDefault;\r\n break;\r\n case 'emailId':\r\n application.email = fieldDefault;\r\n break;\r\n case 'firstNameId':\r\n application.firstName = fieldDefault;\r\n break;\r\n case 'formerLastNameId':\r\n application.formerLastName = fieldDefault;\r\n break;\r\n case 'governmentId':\r\n application.governmentId = fieldDefault;\r\n break;\r\n case 'lastNameId':\r\n application.lastName = fieldDefault;\r\n break;\r\n case 'lastNamePrefixId':\r\n application.lastNamePrefix = fieldDefault;\r\n break;\r\n case 'legalNameId':\r\n application.legalName = fieldDefault;\r\n break;\r\n case 'middleNameId':\r\n application.middleName = fieldDefault;\r\n break;\r\n case 'monthsInCountryId':\r\n application.monthsInCountry = fieldDefault;\r\n break;\r\n case 'nickNameId':\r\n application.nickname = fieldDefault;\r\n break;\r\n case 'otherSourceId':\r\n application.otherSource = fieldDefault;\r\n break;\r\n case 'passportNumberId':\r\n application.passportNumber = fieldDefault;\r\n break;\r\n case 'visaNumberId':\r\n application.visaNumber = fieldDefault;\r\n break;\r\n default:\r\n break;\r\n }\r\n\r\n this.setState({\r\n application: fieldDefault\r\n });\r\n };\r\n\r\n private setValues = (fieldId: string[], newComponents: IApplicationForm, value: any): IApplicationForm => {\r\n if (fieldId.length > 4) {\r\n const fieldGroup: IFieldForm[] =\r\n newComponents.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].fields;\r\n const field: IFieldForm | undefined =\r\n fieldGroup.find(x => x.data.id.split('|')[3] === fieldId[3] && x.data.id.split('|')[4] === fieldId[4]);\r\n if (field) {\r\n field.value = value;\r\n }\r\n }\r\n else {\r\n const field: IFieldForm =\r\n newComponents.steps[Number(fieldId[1])].fieldsGroups[Number(fieldId[2])].fields[Number(fieldId[3])];\r\n if (fieldId) {\r\n field.value = value;\r\n }\r\n }\r\n return newComponents;\r\n };\r\n\r\n // #region Review Information\r\n private reviewActivities = (fieldsGroup: IFieldsGroup): boolean => {\r\n const {\r\n application,\r\n components\r\n } = this.state;\r\n\r\n let isValid = true;\r\n\r\n if (components && components.expansionPanel.activityCount === undefined) {\r\n components.expansionPanel.activityCount = 0;\r\n }\r\n\r\n if (components && components.expansionPanel.activityCount !== undefined && components.expansionPanel.activityCount > -1) {\r\n let activityList: IApplicationActivity[] = [];\r\n const activity: IApplicationActivity = {};\r\n\r\n let activityTypefield: IFieldForm | undefined;\r\n if (activityTypefield = fieldsGroup.fields.find(x => x.data.id === 'activityTypeId')) {\r\n activity.activityType = activityTypefield.value;\r\n }\r\n let activityField: IFieldForm | undefined;\r\n if (activityField = fieldsGroup.fields.find(x => x.data.id === 'activityId')) {\r\n activity.activity = activityField.value;\r\n }\r\n let positionHeldField: IFieldForm | undefined;\r\n if (positionHeldField = fieldsGroup.fields.find(x => x.data.id === 'positionHeldId')) {\r\n activity.position = positionHeldField.value;\r\n }\r\n let numberOfHoursPerWeekField: IFieldForm | undefined;\r\n if (numberOfHoursPerWeekField = fieldsGroup.fields.find(x => x.data.id === 'numberOfHoursPerWeekId')) {\r\n activity.hoursPerWeek = numberOfHoursPerWeekField.value;\r\n }\r\n let numberOfWeeksPerYearField: IFieldForm | undefined;\r\n if (numberOfWeeksPerYearField = fieldsGroup.fields.find(x => x.data.id === 'numberOfWeeksPerYearId')) {\r\n activity.weeksPerYear = numberOfWeeksPerYearField.value;\r\n }\r\n let numberOfYearsField: IFieldForm | undefined;\r\n if (numberOfYearsField = fieldsGroup.fields.find(x => x.data.id === 'numberOfYearsId')) {\r\n activity.numberOfYears = numberOfYearsField.value;\r\n }\r\n let participated9Field: IFieldForm | undefined;\r\n if (participated9Field = fieldsGroup.fields.find(x => x.data.id === 'participated9Id')) {\r\n activity.participatedGrade09 = participated9Field.value;\r\n }\r\n let participated10Field: IFieldForm | undefined;\r\n if (participated10Field = fieldsGroup.fields.find(x => x.data.id === 'participated10Id')) {\r\n activity.participatedGrade10 = participated10Field.value;\r\n }\r\n let participated11Field: IFieldForm | undefined;\r\n if (participated11Field = fieldsGroup.fields.find(x => x.data.id === 'participated11Id')) {\r\n activity.participatedGrade11 = participated11Field.value;\r\n }\r\n let participated12Field: IFieldForm | undefined;\r\n if (participated12Field = fieldsGroup.fields.find(x => x.data.id === 'participated12Id')) {\r\n activity.participatedGrade12 = participated12Field.value;\r\n }\r\n let participatedPostSecondaryField: IFieldForm | undefined;\r\n if (participatedPostSecondaryField = fieldsGroup.fields.find(x => x.data.id === 'participatedPostSecondaryId')) {\r\n activity.participatedPostsecondary = participatedPostSecondaryField.value;\r\n }\r\n\r\n // XNOR\r\n // If any required fields or none are filled that is allowed\r\n activity.activityType = activity.activityType || 0;\r\n activity.activity = activity.activity || 0;\r\n if (!(activity.activityType !== 0 && activity.activity !== 0) &&\r\n (activity.activityType !== 0 || activity.activity !== 0)) {\r\n return false;\r\n }\r\n\r\n activityList = this.setApplicationActivitiesValues(activity, activityList);\r\n\r\n let i: number = 0;\r\n do {\r\n let activityItem: IApplicationActivity = {};\r\n activityItem = this.setApplicationActivitiesAdditional(fieldsGroup, i, activityItem);\r\n\r\n // Duplicated\r\n if (activityList.find(x => x.activityType === activityItem.activityType &&\r\n x.activity === activityItem.activity)) {\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id.substr(0, 'activityErrosId'.length) === 'activityErrosId' &&\r\n x.data.section === i);\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageDuplicate;\r\n field.data.error = true;\r\n });\r\n return false;\r\n }\r\n\r\n activityList = this.setApplicationActivitiesValues(activityItem, activityList);\r\n\r\n i++;\r\n } while (i < components.expansionPanel.activityCount);\r\n\r\n if (activityList.length > 0) {\r\n // Required fields should be filled\r\n activityList.forEach(activity => {\r\n if (activity.position || activity.hoursPerWeek ||\r\n activity.weeksPerYear || activity.numberOfYears ||\r\n activity.participatedGrade09 || activity.participatedGrade10 ||\r\n activity.participatedGrade11 || activity.participatedGrade12 ||\r\n activity.participatedPostsecondary) {\r\n if ((activity.activityType === null || activity.activityType === 0) &&\r\n (activity.activity === null || activity.activity === 0)) {\r\n isValid = false;\r\n }\r\n }\r\n });\r\n }\r\n // List is empty so no error should be show\r\n else {\r\n fieldsGroup.fields.forEach(field => {\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n });\r\n isValid = true;\r\n }\r\n if (isValid) {\r\n application.activities = activityList;\r\n }\r\n\r\n this.setState({\r\n application\r\n });\r\n }\r\n return isValid;\r\n\r\n };\r\n\r\n private reviewAddress = (fieldsGroup: IFieldsGroup): boolean => {\r\n const {\r\n application,\r\n components\r\n } = this.state;\r\n\r\n if (components && components.expansionPanel.addressessCount === undefined) {\r\n components.expansionPanel.addressessCount = 0;\r\n }\r\n\r\n if (components && components.expansionPanel.addressessCount !== undefined && components.expansionPanel.addressessCount > -1) {\r\n const addressList: IApplicationAddress[] = [];\r\n let address: IApplicationAddress = { isPrimary: false };\r\n\r\n address = this.setApplicationAddress(fieldsGroup, address);\r\n address = this.setApplicationAddressValues(address);\r\n\r\n if (address.type !== 0 && address.line1 !== '' &&\r\n address.city !== '' && address.country !== 0) {\r\n address.isPrimary = true;\r\n addressList.push(address);\r\n }\r\n else if (address.line2 || address.line3 || address.line4 ||\r\n address.city || address.stateProvince || address.postalCode ||\r\n address.county) {\r\n addressList.push(address);\r\n }\r\n\r\n let i: number = 0;\r\n do {\r\n let address: IApplicationAddress = { isPrimary: false };\r\n address = this.setApplicationAddressAdditional(fieldsGroup, i, address);\r\n\r\n // Duplicated\r\n if (addressList.find(x => x.type === address.type)) {\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id.substr(0, 'addressErrorsId'.length) === 'addressErrorsId' &&\r\n x.data.section === i);\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageDuplicate;\r\n field.data.error = true;\r\n });\r\n return false;\r\n }\r\n\r\n address = this.setApplicationAddressValues(address);\r\n\r\n if (address.type !== 0 && address.line1 !== '' &&\r\n address.city !== '' && address.country !== 0) {\r\n addressList.push(address);\r\n }\r\n else if (address.line2 !== '' || address.line3 !== '' || address.line4 !== '' ||\r\n address.city !== '' || address.stateProvince !== 0 || address.postalCode !== '' ||\r\n address.county !== 0) {\r\n addressList.push(address);\r\n }\r\n i++;\r\n } while (i < components.expansionPanel.addressessCount);\r\n\r\n application.addresses = addressList;\r\n\r\n this.setState({\r\n application\r\n });\r\n\r\n return true;\r\n }\r\n else {\r\n return true;\r\n }\r\n };\r\n\r\n private reviewEducation = (fieldsGroup: IFieldsGroup): boolean => {\r\n const {\r\n application,\r\n components\r\n } = this.state;\r\n\r\n let isValid: boolean = true;\r\n\r\n if (components && components.expansionPanel.educationCount === undefined) {\r\n components.expansionPanel.educationCount = 0;\r\n }\r\n\r\n if (components && components.expansionPanel.educationCount !== undefined && components.expansionPanel.educationCount > -1) {\r\n const educationList: IApplicationEducation[] = [];\r\n let education: IApplicationEducation = {\r\n enrollment: {},\r\n institution: {\r\n city: '',\r\n countryDesc: '',\r\n etsCode: '',\r\n ficeCode: '',\r\n id: 0,\r\n name: '',\r\n stateDesc: ''\r\n }\r\n };\r\n\r\n education = this.setApplicationEducation(fieldsGroup, education);\r\n education = this.setApplicationEducationValues(education);\r\n\r\n if (education.institution.city || education.enrollment.startDate || education.enrollment.endDate ||\r\n education.institution.etsCode || education.institution.name || education.institution.ficeCode) {\r\n educationList.push(education);\r\n }\r\n else if (education.enrollment &&\r\n education.enrollment.curriculumId && education.enrollment.curriculumId > 0 ||\r\n education.enrollment.honorsId && education.enrollment.honorsId > 0 ||\r\n education.enrollment.degreeId && education.enrollment.degreeId > 0 ||\r\n education.institution.id && education.institution.id > 0 ||\r\n education.institution.stateProvinceId && education.institution.stateProvinceId > 0 ||\r\n education.institution.countryId && education.institution.countryId > 0) {\r\n educationList.push(education);\r\n }\r\n\r\n // Dates\r\n if (education.enrollment.startDate && education.enrollment.endDate) {\r\n if (components && (education.enrollment.startDate !== '' || education.enrollment.endDate !== '')) {\r\n if (moment(education.enrollment.startDate).format('YYYY-MM-DD') > moment(education.enrollment.endDate).format('YYYY-MM-DD')) {\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id === 'educationErrosId');\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageNotValid;\r\n field.data.error = true;\r\n });\r\n return false;\r\n }\r\n else if (moment(education.enrollment.startDate).format('YYYY-MM-DD') <\r\n moment(education.enrollment.endDate).format('YYYY-MM-DD')) {\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id === 'educationErrosId');\r\n fieldsById.forEach(field => {\r\n field.data.label = '';\r\n field.data.error = false;\r\n });\r\n }\r\n else if (education.enrollment && education.enrollment.startDate && education.enrollment.endDate &&\r\n (education.enrollment.startDate < moment(components.dateTimeMin).format('YYYY-MM-DD') ||\r\n education.enrollment.endDate > moment(components.dateTimeMax).format('YYYY-MM-DD'))) {\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id === 'educationErrosId');\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageRange\r\n + moment(components.dateTimeMin).format('YYYY') + '-' +\r\n + moment(components.dateTimeMax).format('YYYY');\r\n field.data.error = true;\r\n });\r\n return false;\r\n }\r\n else if (education.enrollment && education.enrollment.startDate && education.enrollment.endDate &&\r\n (education.enrollment.startDate < moment(components.dateTimeMin).format('YYYY-MM-DD') ||\r\n education.enrollment.endDate < moment(components.dateTimeMax).format('YYYY-MM-DD'))) {\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id === 'educationErrosId');\r\n fieldsById.forEach(field => {\r\n field.data.label = '';\r\n field.data.error = false;\r\n });\r\n }\r\n }\r\n }\r\n\r\n let i: number = 0;\r\n do {\r\n let education: IApplicationEducation = {\r\n enrollment: {},\r\n institution: {\r\n city: '',\r\n countryDesc: '',\r\n etsCode: '',\r\n ficeCode: '',\r\n id: 0,\r\n name: '',\r\n stateDesc: ''\r\n }\r\n };\r\n\r\n education = this.setApplicationEducationAdditional(fieldsGroup, i, education);\r\n education = this.setApplicationEducationValues(education);\r\n\r\n // Dates\r\n if (education.enrollment.startDate && education.enrollment.endDate) {\r\n if (components && (education.enrollment.startDate !== '' || education.enrollment.endDate !== '')) {\r\n if (moment(education.enrollment.startDate).format('YYYY-MM-DD') >\r\n moment(education.enrollment.endDate).format('YYYY-MM-DD')) {\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id.substr(0, 'educationErrosId'.length) === 'educationErrosId' &&\r\n x.data.section === i);\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageNotValid;\r\n field.data.error = true;\r\n });\r\n return false;\r\n }\r\n else if (moment(education.enrollment.startDate).format('YYYY-MM-DD') <\r\n moment(education.enrollment.endDate).format('YYYY-MM-DD')) {\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id.substr(0, 'educationErrosId'.length) === 'educationErrosId' &&\r\n x.data.section === i);\r\n fieldsById.forEach(field => {\r\n field.data.label = '';\r\n field.data.error = false;\r\n });\r\n }\r\n else if (education.enrollment && education.enrollment.startDate && education.enrollment.endDate &&\r\n (education.enrollment.startDate < moment(components.dateTimeMin).format('YYYY-MM-DD') ||\r\n education.enrollment.endDate > moment(components.dateTimeMax).format('YYYY-MM-DD'))) {\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id.substr(0, 'educationErrosId'.length) === 'educationErrosId' &&\r\n x.data.section === i);\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageRange\r\n + moment(components.dateTimeMin).format('YYYY') + '-' +\r\n + moment(components.dateTimeMax).format('YYYY');\r\n field.data.error = true;\r\n });\r\n return false;\r\n }\r\n else if (education.enrollment && education.enrollment.startDate && education.enrollment.endDate &&\r\n (education.enrollment.startDate < moment(components.dateTimeMin).format('YYYY-MM-DD') ||\r\n education.enrollment.endDate < moment(components.dateTimeMax).format('YYYY-MM-DD'))) {\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id.substr(0, 'educationErrosId'.length) === 'educationErrosId' &&\r\n x.data.section === i);\r\n fieldsById.forEach(field => {\r\n field.data.label = '';\r\n field.data.error = false;\r\n });\r\n }\r\n }\r\n }\r\n // Duplicated\r\n if (education.enrollment && education.enrollment.degreeId && education.enrollment.curriculumId &&\r\n education.enrollment.honorsId &&\r\n (education.enrollment.degreeId > 0 && education.enrollment.curriculumId > 0 &&\r\n education.enrollment.honorsId > 0)) {\r\n if (educationList.find(x => x.enrollment.degreeId === education.enrollment.degreeId &&\r\n x.enrollment.curriculumId === education.enrollment.curriculumId &&\r\n x.enrollment.honorsId === education.enrollment.honorsId)) {\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id.substr(0, 'educationErrosId'.length) === 'educationErrosId' &&\r\n x.data.section === i);\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageDuplicate;\r\n field.data.error = true;\r\n });\r\n return false;\r\n }\r\n }\r\n else {\r\n if (education.institution.etsCode) {\r\n if (educationList.find(x => x.institution.etsCode === education.institution.etsCode)) {\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id.substr(0, 'educationErrosId'.length) === 'educationErrosId');\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageDuplicate;\r\n field.data.error = true;\r\n });\r\n return false;\r\n }\r\n }\r\n }\r\n\r\n if (education.institution.city || education.enrollment.startDate || education.enrollment.endDate ||\r\n education.institution.etsCode || education.institution.name || education.institution.ficeCode) {\r\n educationList.push(education);\r\n }\r\n else if (education.enrollment &&\r\n education.enrollment.curriculumId && education.enrollment.curriculumId > 0 ||\r\n education.enrollment.honorsId && education.enrollment.honorsId > 0 ||\r\n education.enrollment.degreeId && education.enrollment.degreeId > 0 ||\r\n education.institution.id && education.institution.id > 0 ||\r\n education.institution.stateProvinceId && education.institution.stateProvinceId > 0 ||\r\n education.institution.countryId && education.institution.countryId > 0) {\r\n educationList.push(education);\r\n }\r\n i++;\r\n } while (i < components.expansionPanel.educationCount);\r\n\r\n // Education is required\r\n if (fieldsGroup.isRequired) {\r\n // List is no empty so no error should be show.\r\n if (educationList.length > 0) {\r\n isValid = true;\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id === 'educationErrosId');\r\n fieldsById.forEach(field => {\r\n field.data.label = '';\r\n field.data.error = false;\r\n });\r\n }\r\n // List is empty so error should be show.\r\n else {\r\n isValid = false;\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id === 'educationErrosId');\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageRequired;\r\n field.data.error = true;\r\n });\r\n }\r\n }\r\n // Education is include\r\n else {\r\n // List is empty so no error should be show\r\n if (educationList.length === 0) {\r\n fieldsGroup.fields.forEach(field => {\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n });\r\n isValid = true;\r\n }\r\n }\r\n if (isValid) {\r\n application.education = educationList;\r\n }\r\n this.setState({\r\n application: application\r\n });\r\n }\r\n return isValid;\r\n };\r\n\r\n private reviewEmergencyContacts = (fieldsGroup: IFieldsGroup): boolean => {\r\n const {\r\n application,\r\n components\r\n } = this.state;\r\n\r\n let isValid = true;\r\n\r\n if (components && components.expansionPanel.emergencyContactsCount === undefined) {\r\n components.expansionPanel.emergencyContactsCount = 0;\r\n }\r\n\r\n if (components && components.expansionPanel.emergencyContactsCount !== undefined && components.expansionPanel.emergencyContactsCount > -1) {\r\n const emergencyList: IApplicationEmergencyContact[] = [];\r\n\r\n const emergency: IApplicationEmergencyContact = { firstName: '', lastName: '', phoneNumber: '' };\r\n const firstNamefield = fieldsGroup.fields.findIndex(x => x.data.id === 'emergencyFirstNameId');\r\n if (firstNamefield > -1) {\r\n emergency.firstName = fieldsGroup.fields[firstNamefield].value;\r\n }\r\n const lastNameField = fieldsGroup.fields.findIndex(x => x.data.id === 'emergencyLastNameId');\r\n if (lastNameField > -1) {\r\n emergency.lastName = fieldsGroup.fields[lastNameField].value;\r\n }\r\n const phoneField = fieldsGroup.fields.findIndex(x => x.data.id === 'emergencyPhoneId');\r\n if (phoneField > -1) {\r\n emergency.phoneNumber = fieldsGroup.fields[phoneField].value;\r\n }\r\n const suffixField = fieldsGroup.fields.findIndex(x => x.data.id === 'emergencySuffixId');\r\n if (suffixField > -1) {\r\n emergency.suffixId = fieldsGroup.fields[suffixField].value;\r\n }\r\n const middleNameField = fieldsGroup.fields.findIndex(x => x.data.id === 'emergencyMiddleNameId');\r\n if (middleNameField > -1) {\r\n emergency.middleName = fieldsGroup.fields[middleNameField].value;\r\n }\r\n const lastNamePrefixField = fieldsGroup.fields.findIndex(x => x.data.id === 'emergencyLastNamePrefixId');\r\n if (lastNamePrefixField > -1) {\r\n emergency.lastNamePrefix = fieldsGroup.fields[lastNamePrefixField].value;\r\n }\r\n const relationshipField = fieldsGroup.fields.findIndex(x => x.data.id === 'emergencyRelationshipId');\r\n if (relationshipField > -1) {\r\n emergency.relationshipId = fieldsGroup.fields[relationshipField].value;\r\n }\r\n const prefix = fieldsGroup.fields.findIndex(x => x.data.id === 'emergencyPrefixId');\r\n if (prefix > -1) {\r\n emergency.prefixId = fieldsGroup.fields[prefix].value;\r\n }\r\n\r\n // XNOR\r\n // If any required fields or none are filled that is allowed\r\n emergency.firstName = emergency.firstName === null ? '' : emergency.firstName;\r\n emergency.lastName = emergency.lastName === null ? '' : emergency.lastName;\r\n emergency.phoneNumber = emergency.phoneNumber === null ? '' : emergency.phoneNumber;\r\n if (!(emergency.firstName !== '' && emergency.lastName !== '' && emergency.phoneNumber !== '') &&\r\n (emergency.firstName !== '' || emergency.lastName !== '' || emergency.phoneNumber !== '')) {\r\n return false;\r\n }\r\n\r\n if (emergency.firstName !== null && emergency.firstName !== '' &&\r\n emergency.lastName !== null && emergency.lastName !== '' &&\r\n emergency.phoneNumber !== null && emergency.phoneNumber !== '') {\r\n emergencyList.push(emergency);\r\n }\r\n else if (emergency.suffixId || emergency.middleName ||\r\n emergency.lastNamePrefix || emergency.relationshipId || emergency.prefixId) {\r\n emergencyList.push(emergency);\r\n }\r\n let i: number = 0;\r\n do {\r\n const emergency: IApplicationEmergencyContact = { firstName: '', lastName: '', phoneNumber: '' };\r\n\r\n const fieldsBySection = fieldsGroup.fields.filter(x => x.data.section === i);\r\n fieldsBySection.forEach(field => {\r\n if (field.data.id.substr(0, 'emergencyFirstNameId'.length) === 'emergencyFirstNameId') {\r\n emergency.firstName = field.value;\r\n }\r\n if (field.data.id.substr(0, 'emergencyLastNameId'.length) === 'emergencyLastNameId') {\r\n emergency.lastName = field.value;\r\n }\r\n if (field.data.id.substr(0, 'emergencyPhoneId'.length) === 'emergencyPhoneId') {\r\n emergency.phoneNumber = field.value;\r\n }\r\n if (field.data.id.substr(0, 'emergencySuffixId'.length) === 'emergencySuffixId') {\r\n emergency.suffixId = field.value;\r\n }\r\n if (field.data.id.substr(0, 'emergencyMiddleNameId'.length) === 'emergencyMiddleNameId') {\r\n emergency.middleName = field.value;\r\n }\r\n if (field.data.id.substr(0, 'emergencyLastNamePrefixId'.length) === 'emergencyLastNamePrefixId') {\r\n emergency.lastNamePrefix = field.value;\r\n }\r\n if (field.data.id.substr(0, 'emergencyRelationshipId'.length) === 'emergencyRelationshipId') {\r\n emergency.relationshipId = field.value;\r\n }\r\n if (field.data.id.substr(0, 'emergencyPrefixId'.length) === 'emergencyPrefixId') {\r\n emergency.prefixId = field.value;\r\n }\r\n });\r\n // Duplicated\r\n if (emergencyList.find(x => x.firstName === emergency.firstName &&\r\n x.lastName === emergency.lastName && x.relationshipId === emergency.relationshipId)) {\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id.substr(0, 'emergencyErrorsId'.length) === 'emergencyErrorsId' &&\r\n x.data.section === i);\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageDuplicate;\r\n field.data.error = true;\r\n });\r\n return false;\r\n }\r\n if (emergency.firstName !== null && emergency.firstName !== '' &&\r\n emergency.lastName !== null && emergency.lastName !== '' &&\r\n emergency.phoneNumber !== null && emergency.phoneNumber !== '') {\r\n emergencyList.push(emergency);\r\n }\r\n else if (emergency.suffixId || emergency.middleName ||\r\n emergency.lastNamePrefix || emergency.relationshipId || emergency.prefixId) {\r\n emergencyList.push(emergency);\r\n }\r\n i++;\r\n } while (i < components.expansionPanel.emergencyContactsCount);\r\n // Emergency is required\r\n if (fieldsGroup.isRequired) {\r\n // List is no empty so no error should be show.\r\n if (emergencyList.length > 0) {\r\n isValid = true;\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id === 'emergencyErrorsId');\r\n fieldsById.forEach(field => {\r\n field.data.label = '';\r\n field.data.error = false;\r\n });\r\n }\r\n // List is empty so error should be show.\r\n else {\r\n isValid = false;\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id === 'emergencyErrorsId');\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageRequired;\r\n field.data.error = true;\r\n });\r\n }\r\n }\r\n // Emergency is include\r\n else {\r\n // List is not empty\r\n if (emergencyList.length > 0) {\r\n // Required fields should be filled\r\n emergencyList.forEach(emergency => {\r\n if (emergency.suffixId || emergency.middleName ||\r\n emergency.lastNamePrefix || emergency.relationshipId || emergency.prefixId) {\r\n if ((emergency.firstName === null || emergency.firstName === '') &&\r\n (emergency.lastName === null || emergency.lastName === '') &&\r\n (emergency.phoneNumber === null || emergency.phoneNumber === '')) {\r\n isValid = false;\r\n }\r\n }\r\n });\r\n }\r\n // List is empty so no error should be show\r\n else {\r\n fieldsGroup.fields.forEach(field => {\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n });\r\n isValid = true;\r\n }\r\n }\r\n if (isValid) {\r\n application.emergencyContacts = emergencyList;\r\n }\r\n this.setState({\r\n application: application\r\n });\r\n }\r\n return isValid;\r\n };\r\n\r\n private reviewEmployment = (fieldsGroup: IFieldsGroup): boolean => {\r\n const {\r\n application,\r\n components\r\n } = this.state;\r\n\r\n let isValid = true;\r\n\r\n if (components && components.expansionPanel.employeeCount === undefined) {\r\n components.expansionPanel.employeeCount = 0;\r\n }\r\n\r\n if (components && components.expansionPanel.employeeCount !== undefined && components.expansionPanel.employeeCount > -1) {\r\n const employmentList: IApplicationEmployment[] = [];\r\n if (components) {\r\n const employment: IApplicationEmployment = { name: '', positionId: 0, startDate: '', endDate: '' };\r\n const employerNamefield = fieldsGroup.fields.findIndex(x => x.data.id === 'employerNameId');\r\n const employerPositionField = fieldsGroup.fields.findIndex(x => x.data.id === 'employerPositionId');\r\n if (employerNamefield > -1 && employerPositionField > -1) {\r\n employment.name = fieldsGroup.fields[employerNamefield].value;\r\n employment.positionId = fieldsGroup.fields[employerPositionField].value;\r\n\r\n employment.name = employment.name === null ? '' : employment.name;\r\n employment.positionId = employment.positionId === null ? 0 : employment.positionId;\r\n // If name has value position is not required\r\n if (employment.name !== '') {\r\n fieldsGroup.fields[employerPositionField].data.error = false;\r\n fieldsGroup.fields[employerPositionField].data.helperText = '';\r\n }\r\n // If position has value name is not required\r\n if (employment.positionId > 0) {\r\n fieldsGroup.fields[employerNamefield].data.error = false;\r\n fieldsGroup.fields[employerNamefield].data.helperText = '';\r\n }\r\n }\r\n const employerStartDateField = fieldsGroup.fields.findIndex(x => x.data.id === 'employerStartDateId');\r\n if (employerStartDateField > -1) {\r\n employment.startDate = fieldsGroup.fields[employerStartDateField].value;\r\n }\r\n const employerEndDateField = fieldsGroup.fields.findIndex(x => x.data.id === 'employerEndDateId');\r\n if (employerEndDateField > -1) {\r\n employment.endDate = fieldsGroup.fields[employerEndDateField].value;\r\n }\r\n // When group is required and name and position is empty, required error is show.\r\n if (fieldsGroup.isRequired && employment.name === '' &&\r\n (employment.positionId === 0 || employment.positionId === undefined)) {\r\n isValid = false;\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id.substr(0, 'employmentErrosId'.length) === 'employmentErrosId');\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageRequired;\r\n });\r\n return false;\r\n }\r\n if (employment.name !== '' || employment.positionId > 0) {\r\n employmentList.push(employment);\r\n }\r\n if (employment.startDate || employment.endDate) {\r\n if (employment.startDate && employment.endDate) {\r\n // Dates\r\n if (moment(employment.startDate).format('YYYY-MM-DD') > moment(employment.endDate).format('YYYY-MM-DD')) {\r\n isValid = false;\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id.substr(0, 'employmentErrosId'.length) === 'employmentErrosId');\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageNotValid;\r\n });\r\n }\r\n else if (employment.startDate < moment(components.dateTimeMin).format('YYYY-MM-DD') ||\r\n employment.endDate > moment(components.dateTimeMax).format('YYYY-MM-DD')) {\r\n isValid = false;\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id.substr(0, 'employmentErrosId'.length) === 'employmentErrosId');\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageRange\r\n + moment(components.dateTimeMin).format('YYYY') + '-' +\r\n + moment(components.dateTimeMax).format('YYYY');\r\n });\r\n }\r\n }\r\n if (employment.name === '' &&\r\n (employment.positionId === 0 || employment.positionId === undefined)) {\r\n isValid = false;\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id.substr(0, 'employmentErrosId'.length) === 'employmentErrosId');\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageRequired;\r\n });\r\n return false;\r\n }\r\n }\r\n let i: number = 0;\r\n do {\r\n const employment: IApplicationEmployment = { name: '', positionId: 0, startDate: '', endDate: '' };\r\n\r\n const fieldsBySection = fieldsGroup.fields.filter(x => x.data.section === i);\r\n fieldsBySection.forEach(field => {\r\n if (field.data.id.substr(0, 'employerNameId'.length) === 'employerNameId') {\r\n employment.name = field.value === null ? null : field.value;\r\n }\r\n if (field.data.id.substr(0, 'employerPositionId'.length) === 'employerPositionId') {\r\n employment.positionId = field.value === '' ? 0 : field.value;\r\n }\r\n if (field.data.id.substr(0, 'employerStartDateId'.length) === 'employerStartDateId') {\r\n employment.startDate = field.value === '' ? null : field.value;\r\n }\r\n if (field.data.id.substr(0, 'employerEndDateId'.length) === 'employerEndDateId') {\r\n employment.endDate = field.value === '' ? null : field.value;\r\n }\r\n });\r\n fieldsBySection.forEach(field => {\r\n if (field.data.id.substr(0, 'employerNameId'.length) === 'employerNameId' &&\r\n employment.positionId > 0) {\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n }\r\n if (field.data.id.substr(0, 'employerPositionId'.length) === 'employerPositionId' &&\r\n employment.name !== '') {\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n }\r\n });\r\n // Duplicated\r\n if (employmentList.find(x => x.name === employment.name &&\r\n x.positionId === employment.positionId &&\r\n x.startDate === employment.startDate &&\r\n x.endDate === employment.endDate)) {\r\n isValid = false;\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id.substr(0, 'employmentErrosId'.length) === 'employmentErrosId');\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageDuplicate;\r\n });\r\n return false;\r\n }\r\n // If start date or end date is entered Position or Name should have a value\r\n if (employment.startDate || employment.endDate) {\r\n if (employment.name === '' &&\r\n (employment.positionId === 0 || employment.positionId === undefined)) {\r\n isValid = false;\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id.substr(0, 'employmentErrosId'.length) === 'employmentErrosId');\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageRequired;\r\n });\r\n return false;\r\n }\r\n if (employment.startDate && employment.endDate) {\r\n // Dates validations\r\n if (moment(employment.startDate).format('YYYY-MM-DD') > moment(employment.endDate).format('YYYY-MM-DD')) {\r\n isValid = false;\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id.substr(0, 'employmentErrosId'.length) === 'employmentErrosId');\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageNotValid;\r\n });\r\n }\r\n else if (employment.startDate < moment(components.dateTimeMin).format('YYYY-MM-DD') ||\r\n employment.endDate > moment(components.dateTimeMax).format('YYYY-MM-DD')) {\r\n isValid = false;\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id.substr(0, 'employmentErrosId'.length) === 'employmentErrosId');\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageRange\r\n + moment(components.dateTimeMin).format('YYYY') + '-' +\r\n + moment(components.dateTimeMax).format('YYYY');\r\n });\r\n }\r\n }\r\n }\r\n if (employment.name !== '' || employment.positionId > 0) {\r\n employmentList.push(employment);\r\n }\r\n i++;\r\n } while (i < components.expansionPanel.employeeCount);\r\n // Employment is required\r\n if (fieldsGroup.isRequired) {\r\n // List is empty so error should be show.\r\n if (employmentList.length === 0) {\r\n isValid = false;\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id.substr(0, 'employmentErrosId'.length) === 'employmentErrosId');\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageRequired;\r\n });\r\n }\r\n }\r\n // Employment is include\r\n else {\r\n // List is not empty\r\n if (employmentList.length > 0) {\r\n // Required fields should be filled\r\n employmentList.forEach(employment => {\r\n if (employment.startDate || employment.endDate) {\r\n if ((employment.name === null || employment.name === '') &&\r\n employment.positionId === 0) {\r\n isValid = false;\r\n }\r\n }\r\n });\r\n }\r\n else {\r\n fieldsGroup.fields.forEach(field => {\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n });\r\n isValid = true;\r\n }\r\n }\r\n if (isValid) {\r\n application.employments = employmentList;\r\n }\r\n this.setState({\r\n application: application\r\n });\r\n }\r\n }\r\n return isValid;\r\n };\r\n\r\n private reviewIpeds = (fieldsGroup: IFieldsGroup): boolean => {\r\n const {\r\n application\r\n } = this.state;\r\n\r\n let isValid = true;\r\n const hispanicAnswer: string = fieldsGroup.fields[2].value;\r\n\r\n if (hispanicAnswer) {\r\n // If question is responded with NO, user must select at least one subrace\r\n if (hispanicAnswer === '0') {\r\n if (application.ipeds) {\r\n const subRaces: IApplicationIpeds[] =\r\n application.ipeds.filter(x => x.ipedsFederalCategoryId !== 1);\r\n if (subRaces.length === 0) {\r\n isValid = false;\r\n const textErrorIndex: number = fieldsGroup.fields.findIndex(x => x.data.id === 'ipedsErrorsId');\r\n fieldsGroup.fields[textErrorIndex].data.label =\r\n fieldsGroup.errorMessageRequired;\r\n }\r\n }\r\n else {\r\n isValid = false;\r\n const textErrorIndex: number = fieldsGroup.fields.findIndex(x => x.data.id === 'ipedsErrorsId');\r\n fieldsGroup.fields[textErrorIndex].data.label =\r\n fieldsGroup.errorMessageRequired;\r\n }\r\n }\r\n }\r\n else {\r\n // If question was not answered and some subraces were selected, user must answer question\r\n if (application.ipeds && application.ipeds.length > 0) {\r\n isValid = false;\r\n const textErrorIndex: number = fieldsGroup.fields.findIndex(x => x.data.id === 'ipedsErrorsId');\r\n fieldsGroup.fields[textErrorIndex].data.label =\r\n fieldsGroup.errorMessageNotValid;\r\n }\r\n }\r\n // Save ipeds if them were saved\r\n application.ipeds = undefined;\r\n this.setIpedsValuesCheckList(fieldsGroup);\r\n this.setIpedsValuesNestedCheckList(fieldsGroup);\r\n\r\n return isValid;\r\n };\r\n\r\n private reviewPhoneGroup = (fieldsGroup: IFieldsGroup): boolean => {\r\n const {\r\n application,\r\n components\r\n } = this.state;\r\n\r\n if (components && components.expansionPanel.phoneCount === undefined) {\r\n components.expansionPanel.phoneCount = 0;\r\n }\r\n\r\n if (components && components.expansionPanel.phoneCount !== undefined && components.expansionPanel.phoneCount > -1) {\r\n const phoneList: IApplicationPhoneList[] = [];\r\n\r\n const phone: IApplicationPhoneList = { type: '', countryId: 0, number: '', isPrimary: false };\r\n const phoneTypeField = fieldsGroup.fields.findIndex(x => x.data.id === 'phoneTypeId');\r\n if (phoneTypeField > -1) {\r\n phone.type = fieldsGroup.fields[phoneTypeField].value;\r\n }\r\n const phoneCountryField = fieldsGroup.fields.findIndex(x => x.data.id === 'phoneCountryId');\r\n if (phoneCountryField > -1) {\r\n phone.countryId = fieldsGroup.fields[phoneCountryField].value;\r\n }\r\n const phoneNumberField = fieldsGroup.fields.findIndex(x => x.data.id === 'phoneNumberId');\r\n if (phoneNumberField > -1) {\r\n phone.number = fieldsGroup.fields[phoneNumberField].value;\r\n }\r\n const primaryPhoneField = fieldsGroup.fields.findIndex(x => x.data.id === 'primaryPhoneId');\r\n if (primaryPhoneField > -1) {\r\n phone.isPrimary = fieldsGroup.fields[primaryPhoneField].value === '1' ? true : false;\r\n }\r\n\r\n // Set values\r\n phone.type = phone.type === null ? '' : phone.type;\r\n phone.countryId = phone.countryId === 0 ? 0 : phone.countryId;\r\n phone.number = phone.number === null ? '' : phone.number;\r\n phone.isPrimary = phone.isPrimary === null ? false : phone.isPrimary;\r\n\r\n // Add phone to list\r\n if (phone.type !== '' && phone.countryId !== 0 && phone.number !== '') {\r\n phoneList.push(phone);\r\n }\r\n\r\n let i: number = 0;\r\n do {\r\n const phoneItem: IApplicationPhoneList = { type: '', countryId: 0, number: '', isPrimary: false };\r\n\r\n const fieldsBySection = fieldsGroup.fields.filter(x => x.data.section === i);\r\n fieldsBySection.forEach(field => {\r\n if (field.data.id.substr(0, 'phoneTypeId'.length) === 'phoneTypeId') {\r\n phoneItem.type = field.value;\r\n }\r\n if (field.data.id.substr(0, 'phoneCountryId'.length) === 'phoneCountryId') {\r\n phoneItem.countryId = field.value;\r\n }\r\n if (field.data.id.substr(0, 'phoneNumberId'.length) === 'phoneNumberId') {\r\n phoneItem.number = field.value;\r\n }\r\n if (field.data.id.substr(0, 'primaryPhoneId'.length) === 'primaryPhoneId') {\r\n phoneItem.isPrimary = field.value === '1' ? true : false;\r\n }\r\n });\r\n // Duplicated\r\n if (phoneList.find(x => x.type === phoneItem.type &&\r\n x.countryId === phoneItem.countryId && x.number === phoneItem.number)) {\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id.substr(0, 'phoneErrorsId'.length) === 'phoneErrorsId');\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageDuplicate;\r\n });\r\n return false;\r\n }\r\n // Set values\r\n phoneItem.type = phoneItem.type === null ? '' : phoneItem.type;\r\n phoneItem.countryId = phoneItem.countryId === 0 ? 0 : phoneItem.countryId;\r\n phoneItem.number = phoneItem.number === null ? '' : phoneItem.number;\r\n phoneItem.isPrimary = phoneItem.isPrimary === null ? false : phoneItem.isPrimary;\r\n\r\n // Add phone to list\r\n if (phoneItem.type !== '' && phoneItem.countryId !== 0 && phoneItem.number !== '') {\r\n phoneList.push(phoneItem);\r\n }\r\n i++;\r\n } while (i < components.expansionPanel.phoneCount);\r\n\r\n application.phones = phoneList;\r\n\r\n this.setState({\r\n application\r\n });\r\n\r\n return true;\r\n }\r\n else {\r\n return true;\r\n }\r\n };\r\n\r\n private reviewPrograms = (fieldsGroup: IFieldsGroup): boolean => {\r\n const {\r\n application,\r\n components\r\n } = this.state;\r\n\r\n let isValid = true;\r\n\r\n if (components && components.expansionPanel.programsCount === undefined) {\r\n components.expansionPanel.programsCount = 0;\r\n }\r\n\r\n if (components && components.expansionPanel.programsCount !== undefined && components.expansionPanel.programsCount > -1) {\r\n const programList: IApplicationProgram[] = [];\r\n const program: IApplicationProgram = { programId: 0 };\r\n if (fieldsGroup && fieldsGroup.fields && fieldsGroup.fields.length > 0) {\r\n let exist: boolean = false;\r\n const field = fieldsGroup.fields.find(x => x.data.id === 'programOfStudydId');\r\n if (field && field.data && field.data.options && field.data.options.length > 0) {\r\n field.data.options.forEach(option => {\r\n if (Number(option.value) === Number(field.value)) {\r\n exist = true;\r\n }\r\n });\r\n if (exist) {\r\n program.programId = field.value;\r\n }\r\n else {\r\n isValid = false;\r\n }\r\n }\r\n }\r\n if (isValid) {\r\n const commintmentField = fieldsGroup.fields.findIndex(x => x.data.id === 'commitmentId');\r\n if (commintmentField > -1) {\r\n program.commitmentId = fieldsGroup.fields[commintmentField].value;\r\n }\r\n if (program.programId > 0) {\r\n programList.push(program);\r\n }\r\n let i: number = 0;\r\n do {\r\n const program: IApplicationProgram = { programId: 0 };\r\n\r\n const fieldsBySection = fieldsGroup.fields.filter(x => x.data.section === i);\r\n fieldsBySection.forEach(field => {\r\n if (field.data.id.substr(0, 'programOfStudydId'.length) === 'programOfStudydId') {\r\n program.programId = field.value;\r\n }\r\n if (field.data.id.substr(0, 'commitmentId'.length) === 'commitmentId') {\r\n program.commitmentId = field.value;\r\n }\r\n });\r\n if (programList.find(x => x.programId === program.programId)) {\r\n isValid = false;\r\n const textErrorIndex: number = fieldsGroup.fields.findIndex(x => x.data.id === 'programOfStudydErrorsId');\r\n fieldsGroup.fields[textErrorIndex].data.label =\r\n fieldsGroup.errorMessageDuplicate;\r\n }\r\n if (programList.find(x => x.programId ===\r\n program.programId && x.commitmentId === program.commitmentId)) {\r\n isValid = false;\r\n const textErrorIndex: number = fieldsGroup.fields.findIndex(x => x.data.id === 'programOfStudydErrorsId');\r\n fieldsGroup.fields[textErrorIndex].data.label =\r\n fieldsGroup.errorMessageRequired;\r\n }\r\n else if (program.programId > 0) {\r\n programList.push(program);\r\n }\r\n i++;\r\n } while (i < components.expansionPanel.programsCount);\r\n\r\n if (isValid) {\r\n application.programs = programList;\r\n }\r\n\r\n this.setState({\r\n application\r\n });\r\n }\r\n }\r\n return isValid;\r\n };\r\n\r\n private reviewRelatives = (fieldsGroup: IFieldsGroup): boolean => {\r\n const {\r\n application,\r\n components\r\n } = this.state;\r\n\r\n let isValid: boolean = true;\r\n\r\n if (components && components.expansionPanel.relativesCount === undefined) {\r\n components.expansionPanel.relativesCount = 0;\r\n }\r\n\r\n if (components && components.expansionPanel.relativesCount !== undefined && components.expansionPanel.relativesCount > -1) {\r\n const relativeList: IApplicationRelative[] = [];\r\n let relative: IApplicationRelative = {\r\n attendedInstitution: false,\r\n relationFirstName: '',\r\n relationLastName: '',\r\n relationType: 0\r\n };\r\n relative = this.setApplicationRelative(fieldsGroup, relative);\r\n relative = this.setApplicationRelativeValues(relative);\r\n\r\n if (relative.relationFirstName || relative.relationLastName || relative.relationType > 0 ||\r\n relative.attendedInstitution) {\r\n relativeList.push(relative);\r\n }\r\n else if (relative.relationPrefix || relative.relationSuffix || relative.relationMiddleName ||\r\n relative.relationLastNamePrefix) {\r\n relativeList.push(relative);\r\n }\r\n\r\n let i: number = 0;\r\n do {\r\n let relative: IApplicationRelative = {\r\n attendedInstitution: false,\r\n relationFirstName: '',\r\n relationLastName: '',\r\n relationType: 0\r\n };\r\n\r\n relative = this.setApplicationRelativeAdditional(fieldsGroup, i, relative);\r\n relative = this.setApplicationRelativeValues(relative);\r\n\r\n // Duplicated\r\n if (relative.relationFirstName && relative.relationLastName && relative.relationType) {\r\n if (relativeList.find(x => x.relationFirstName === relative.relationFirstName &&\r\n x.relationLastName === relative.relationLastName &&\r\n x.relationType === relative.relationType)) {\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id.substr(0, 'relativesErrosId'.length) === 'relativesErrosId' &&\r\n x.data.section === i);\r\n fieldsById.forEach(field => {\r\n field.data.label = fieldsGroup.errorMessageDuplicate;\r\n field.data.error = true;\r\n });\r\n return false;\r\n }\r\n }\r\n if (relative.relationFirstName || relative.relationLastName || relative.relationType > 0 ||\r\n relative.attendedInstitution) {\r\n relativeList.push(relative);\r\n }\r\n else if (relative.relationPrefix || relative.relationSuffix || relative.relationMiddleName ||\r\n relative.relationLastNamePrefix) {\r\n relativeList.push(relative);\r\n }\r\n i++;\r\n } while (i < components.expansionPanel.relativesCount);\r\n\r\n // Relatives is required\r\n if (fieldsGroup.isRequired) {\r\n // List is no empty so no error should be show.\r\n if (relativeList.length > 0) {\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id === 'relativesErrosId');\r\n fieldsById.forEach(field => {\r\n field.data.error = false;\r\n field.data.label = '';\r\n });\r\n isValid = true;\r\n }\r\n // List is empty so error should be show.\r\n if (relativeList.length === 0) {\r\n isValid = false;\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id === 'relativesErrosId');\r\n fieldsById.forEach(field => {\r\n field.data.error = true;\r\n field.data.label = fieldsGroup.errorMessageRequired;\r\n });\r\n }\r\n }\r\n else {\r\n if (relativeList.length === 0) {\r\n fieldsGroup.fields.forEach(field => {\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n });\r\n isValid = true;\r\n }\r\n }\r\n if (isValid) {\r\n application.relatives = relativeList;\r\n\r\n this.setState({\r\n application: application\r\n });\r\n }\r\n }\r\n return isValid;\r\n };\r\n\r\n private reviewResidency = (fieldsGroup: IFieldsGroup): boolean => {\r\n const {\r\n application\r\n } = this.state;\r\n\r\n let isValid: boolean = true;\r\n const residencyList: IApplicationResidency[] = [];\r\n let residency: IApplicationResidency = {};\r\n residency = this.setApplicationResidency(fieldsGroup, residency);\r\n\r\n if (residency.residencyPreference !== null ||\r\n residency.foodPlanInterest !== null ||\r\n residency.dormPlanInterest !== null ||\r\n residency.dormCampus !== null ||\r\n residency.dormBuilding !== null) {\r\n residencyList.push(residency);\r\n }\r\n\r\n // Residency is required\r\n if (fieldsGroup.isRequired) {\r\n // List is no empty so no error should be show.\r\n if (residencyList.length > 0) {\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id === 'relativesErrosId');\r\n fieldsById.forEach(field => {\r\n field.data.error = false;\r\n field.data.label = '';\r\n });\r\n isValid = true;\r\n }\r\n // List is empty so error should be show.\r\n if (residencyList.length === 0) {\r\n isValid = false;\r\n const fieldsById =\r\n fieldsGroup.fields.filter(x =>\r\n x.data.id === 'residencyErrosId');\r\n fieldsById.forEach(field => {\r\n field.data.error = true;\r\n field.data.label = fieldsGroup.errorMessageRequired;\r\n });\r\n }\r\n }\r\n // Residency is include\r\n else {\r\n // List is empty so no error should be show\r\n if (residencyList.length === 0) {\r\n fieldsGroup.fields.forEach(field => {\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n });\r\n isValid = true;\r\n }\r\n }\r\n if (isValid) {\r\n if (residencyList.length > 0) {\r\n if (residencyList[0].residencyPreference && residencyList[0].residencyPreference > 0) {\r\n application.residencyPreference = residencyList[0].residencyPreference;\r\n }\r\n if (residencyList[0].foodPlanInterest) {\r\n application.foodPlanInterest = residencyList[0].foodPlanInterest;\r\n }\r\n if (residencyList[0].dormPlanInterest) {\r\n application.dormPlanInterest = residencyList[0].dormPlanInterest;\r\n }\r\n if (residencyList[0].dormCampus && residencyList[0].dormCampus > 0) {\r\n application.dormCampus = residencyList[0].dormCampus;\r\n }\r\n if (residencyList[0].dormBuilding && residencyList[0].dormBuilding > 0) {\r\n application.dormBuilding = residencyList[0].dormBuilding;\r\n }\r\n }\r\n this.setState({\r\n application: application\r\n });\r\n }\r\n return isValid;\r\n };\r\n\r\n private reviewTestScoreCompleteness = (groupedControls: any): boolean => {\r\n let validCompleteness: boolean = true;\r\n // this is meant to iterate over all controls grouped by section\r\n for (const keyIndex of Object.keys(groupedControls)) {\r\n const scoreA: IFieldForm[] = groupedControls[Number(keyIndex)];\r\n\r\n const fieldsPopulated: boolean = scoreA.every(f => f.value && f.value !== '');\r\n const fieldsEmpty: boolean = scoreA.every(f => !f.value || f.value === '');\r\n\r\n if (!fieldsPopulated && !fieldsEmpty) {\r\n scoreA.forEach(field => {\r\n if (field.value && field.value !== '') {\r\n field.data.error = false;\r\n } else {\r\n field.data.error = true;\r\n validCompleteness = false;\r\n }\r\n });\r\n }\r\n }\r\n return validCompleteness;\r\n };\r\n\r\n private reviewTestScores = (groupedControls: any): boolean => {\r\n // this is meant to iterate over all controls grouped by section\r\n for (let i: number = 0; i < Object.keys(groupedControls).length; i++) {\r\n const scoreA: any = groupedControls[Number(Object.keys(groupedControls)[i])];\r\n for (let j: number = 0; j < Object.keys(groupedControls).length; j++) {\r\n if (i !== j) {\r\n let identical: boolean = true;\r\n const scoreB: any = groupedControls[Number(Object.keys(groupedControls)[j])];\r\n for (let k: number = 0; k < scoreA.length; k++) {\r\n const fieldA: IFieldForm = scoreA[k];\r\n const fieldB: IFieldForm = scoreB[k];\r\n if (fieldA.data.id !== fieldB.data.id) {\r\n if ((fieldA.value || '') !== (fieldB.value || '')) {\r\n identical = false;\r\n }\r\n }\r\n }\r\n if (identical) {\r\n return false;\r\n }\r\n }\r\n }\r\n }\r\n return true;\r\n };\r\n\r\n private reviewUserDefined = (fieldsGroup: IFieldsGroup): boolean => {\r\n const {\r\n application\r\n } = this.state;\r\n\r\n let isValid: boolean = true;\r\n fieldsGroup.fields.forEach(field => {\r\n if (field.isUserDefined) {\r\n // validate length of field\r\n const userDefined: IApplicationUserDefined = {\r\n columnLabel: '',\r\n columnName: '',\r\n columnType: 0,\r\n columnValue: '',\r\n isUploading: false\r\n };\r\n if (field.value) {\r\n if (field.maxLength && field.value.toString().length <= field.maxLength) {\r\n field.data.error = false;\r\n field.data.helperText = '';\r\n isValid = true;\r\n\r\n userDefined.columnLabel = field.data.id;\r\n userDefined.columnName = field.data.id;\r\n if (field.dataType === 'nvarchar') {\r\n userDefined.columnType = 1;\r\n }\r\n if (field.dataType === 'date') {\r\n userDefined.columnType = 2;\r\n }\r\n if (field.dataType === 'time') {\r\n userDefined.columnType = 3;\r\n }\r\n userDefined.columnValue = field.value;\r\n userDefined.isUploading = field.isUploading ? field.isUploading : false;\r\n let userDefinedIndex: number = -1;\r\n userDefinedIndex =\r\n application.userDefined.findIndex(x => x.columnName === userDefined.columnName);\r\n if (userDefinedIndex > -1) {\r\n application.userDefined.splice(userDefinedIndex, 1);\r\n }\r\n application.userDefined.push(userDefined);\r\n }\r\n else {\r\n field.data.error = true;\r\n field.data.helperText = field.data.errorMessageRange;\r\n isValid = false;\r\n }\r\n }\r\n else {\r\n if (field.isRequired) {\r\n field.data.error = true;\r\n field.data.helperText = field.data.errorMessageRequired;\r\n isValid = false;\r\n }\r\n }\r\n }\r\n });\r\n return isValid;\r\n };\r\n\r\n private reviewCampus = (fieldsGroup: IFieldsGroup): void => {\r\n const {\r\n application\r\n } = this.state;\r\n\r\n const campusIndex = fieldsGroup.fields.findIndex(x => x.data.id === 'campusId');\r\n if (fieldsGroup.fields[campusIndex].componentType === 'CheckboxList') {\r\n application.campuses = undefined;\r\n if (campusIndex > -1) {\r\n const campusList = fieldsGroup.fields[campusIndex].value;\r\n if (campusList) {\r\n const array = Object.values(campusList.split(','));\r\n array.forEach(campus => {\r\n if (application.campuses) {\r\n let findCampus: number = -1;\r\n findCampus = application.campuses.findIndex(x => x === Number(campus));\r\n if (findCampus === -1) {\r\n application.campuses.push(\r\n Number(campus)\r\n );\r\n }\r\n }\r\n else {\r\n application.campuses = [\r\n Number(campus)\r\n ];\r\n }\r\n });\r\n }\r\n }\r\n }\r\n };\r\n\r\n private reviewAcademicInterest = (fieldsGroup: IFieldsGroup): void => {\r\n const {\r\n application\r\n } = this.state;\r\n\r\n const interestIndex = fieldsGroup.fields.findIndex(x => x.data.id === 'interestId');\r\n application.academicInterests = undefined;\r\n if (interestIndex > -1) {\r\n const interestList = fieldsGroup.fields[interestIndex].value;\r\n if (interestList) {\r\n const array = Object.values(interestList.split(','));\r\n array.forEach(interest => {\r\n if (application.academicInterests) {\r\n let findInterest: number = -1;\r\n findInterest = application.academicInterests.findIndex(x => x === Number(interest));\r\n if (findInterest === -1) {\r\n application.academicInterests.push(\r\n Number(interest)\r\n );\r\n }\r\n }\r\n else {\r\n application.academicInterests = [\r\n Number(interest)\r\n ];\r\n }\r\n });\r\n }\r\n }\r\n };\r\n // #endregion Review Information\r\n\r\n // #region Set Values for Collections\r\n private setApplicationActivitiesAdditional = (fieldsGroup: any, sectionNumber: number, activityItem: IApplicationActivity):\r\n IApplicationActivity => {\r\n const fieldsBySection = fieldsGroup.fields.filter(x => x.data.section === sectionNumber);\r\n fieldsBySection.forEach(field => {\r\n if (field.data.id.substr(0, 'activityTypeId'.length) === 'activityTypeId') {\r\n activityItem.activityType = field.value;\r\n }\r\n if (field.data.id.substr(0, 'activityId'.length) === 'activityId') {\r\n activityItem.activity = field.value;\r\n }\r\n if (field.data.id.substr(0, 'positionHeldId'.length) === 'positionHeldId') {\r\n activityItem.position = field.value;\r\n }\r\n if (field.data.id.substr(0, 'numberOfHoursPerWeekId'.length) === 'numberOfHoursPerWeekId') {\r\n activityItem.hoursPerWeek = field.value;\r\n }\r\n if (field.data.id.substr(0, 'numberOfWeeksPerYearId'.length) === 'numberOfWeeksPerYearId') {\r\n activityItem.weeksPerYear = field.value;\r\n }\r\n if (field.data.id.substr(0, 'numberOfYearsId'.length) === 'numberOfYearsId') {\r\n activityItem.numberOfYears = field.value;\r\n }\r\n if (field.data.id.substr(0, 'participated9Id'.length) === 'participated9Id') {\r\n activityItem.participatedGrade09 = field.value;\r\n }\r\n if (field.data.id.substr(0, 'participated10Id'.length) === 'participated10Id') {\r\n activityItem.participatedGrade10 = field.value;\r\n }\r\n if (field.data.id.substr(0, 'participated11Id'.length) === 'participated11Id') {\r\n activityItem.participatedGrade11 = field.value;\r\n }\r\n if (field.data.id.substr(0, 'participated12Id'.length) === 'participated12Id') {\r\n activityItem.participatedGrade12 = field.value;\r\n }\r\n if (field.data.id.substr(0, 'participatedPostSecondaryId'.length) === 'participatedPostSecondaryId') {\r\n activityItem.participatedPostsecondary = field.value;\r\n }\r\n });\r\n return activityItem;\r\n };\r\n\r\n private setApplicationAddress = (fieldsGroup: any, address: IApplicationAddress):\r\n IApplicationAddress => {\r\n const addressTypefield = fieldsGroup.fields.findIndex(x => x.data.id === 'addressTypeId');\r\n if (addressTypefield > -1) {\r\n address.type = fieldsGroup.fields[addressTypefield].value;\r\n }\r\n const houseNumberField = fieldsGroup.fields.findIndex(x => x.data.id === 'houseNumberId');\r\n if (houseNumberField > -1) {\r\n address.houseNumber = fieldsGroup.fields[houseNumberField].value;\r\n }\r\n const addressLine1Field = fieldsGroup.fields.findIndex(x => x.data.id === 'addressLine1Id');\r\n if (addressLine1Field > -1) {\r\n address.line1 = fieldsGroup.fields[addressLine1Field].value;\r\n }\r\n const addressLine2Field = fieldsGroup.fields.findIndex(x => x.data.id === 'addressLine2Id');\r\n if (addressLine2Field > -1) {\r\n address.line2 = fieldsGroup.fields[addressLine2Field].value;\r\n }\r\n const addressLine3Field = fieldsGroup.fields.findIndex(x => x.data.id === 'addressLine3Id');\r\n if (addressLine3Field > -1) {\r\n address.line3 = fieldsGroup.fields[addressLine3Field].value;\r\n }\r\n const addressLine4Field = fieldsGroup.fields.findIndex(x => x.data.id === 'addressLine4Id');\r\n if (addressLine4Field > -1) {\r\n address.line4 = fieldsGroup.fields[addressLine4Field].value;\r\n }\r\n const addressCityField = fieldsGroup.fields.findIndex(x => x.data.id === 'addressCityId');\r\n if (addressCityField > -1) {\r\n address.city = fieldsGroup.fields[addressCityField].value;\r\n }\r\n const stateProvinceField = fieldsGroup.fields.findIndex(x => x.data.id === 'stateProvinceId');\r\n if (stateProvinceField > -1) {\r\n address.stateProvince = fieldsGroup.fields[stateProvinceField].value;\r\n }\r\n const postalCodeField = fieldsGroup.fields.findIndex(x => x.data.id === 'postalCodeId');\r\n if (postalCodeField > -1) {\r\n address.postalCode = fieldsGroup.fields[postalCodeField].value;\r\n }\r\n const countyIdField = fieldsGroup.fields.findIndex(x => x.data.id === 'addressCountyId');\r\n if (countyIdField > -1) {\r\n address.county = fieldsGroup.fields[countyIdField].value;\r\n }\r\n const addressCountryField = fieldsGroup.fields.findIndex(x => x.data.id === 'addressCountryId');\r\n if (addressCountryField > -1) {\r\n address.country = fieldsGroup.fields[addressCountryField].value;\r\n }\r\n return address;\r\n };\r\n\r\n private setApplicationAddressValues = (address: IApplicationAddress): IApplicationAddress => {\r\n address.type = address.type || 0;\r\n address.line1 = address.line1 || '';\r\n address.city = address.city || '';\r\n address.country = address.country || 0;\r\n\r\n address.line2 = address.line2 || '';\r\n address.line3 = address.line3 || '';\r\n address.line4 = address.line4 || '';\r\n address.city = address.city || '';\r\n address.stateProvince = address.stateProvince || 0;\r\n address.postalCode = address.postalCode || '';\r\n address.county = address.county || 0;\r\n\r\n return address;\r\n };\r\n\r\n private setApplicationAddressAdditional = (fieldsGroup: any, sectionNumber: number,\r\n address: IApplicationAddress): IApplicationAddress => {\r\n const fieldsBySection = fieldsGroup.fields.filter(x => x.data.section === sectionNumber);\r\n fieldsBySection.forEach(field => {\r\n if (field.data.id.substr(0, 'addressTypeId'.length) === 'addressTypeId') {\r\n address.type = field.value;\r\n }\r\n if (field.data.id.substr(0, 'houseNumberId'.length) === 'houseNumberId') {\r\n address.houseNumber = field.value;\r\n }\r\n if (field.data.id.substr(0, 'addressLine1Id'.length) === 'addressLine1Id') {\r\n address.line1 = field.value;\r\n }\r\n if (field.data.id.substr(0, 'addressLine2Id'.length) === 'addressLine2Id') {\r\n address.line2 = field.value;\r\n }\r\n if (field.data.id.substr(0, 'addressLine3Id'.length) === 'addressLine3Id') {\r\n address.line3 = field.value;\r\n }\r\n if (field.data.id.substr(0, 'addressLine4Id'.length) === 'addressLine4Id') {\r\n address.line4 = field.value;\r\n }\r\n if (field.data.id.substr(0, 'addressCityId'.length) === 'addressCityId') {\r\n address.city = field.value;\r\n }\r\n if (field.data.id.substr(0, 'stateProvinceId'.length) === 'stateProvinceId') {\r\n address.stateProvince = field.value;\r\n }\r\n if (field.data.id.substr(0, 'postalCodeId'.length) === 'postalCodeId') {\r\n address.postalCode = field.value;\r\n }\r\n if (field.data.id.substr(0, 'addressCountyId'.length) === 'addressCountyId') {\r\n address.county = field.value;\r\n }\r\n if (field.data.id.substr(0, 'addressCountryId'.length) === 'addressCountryId') {\r\n address.country = field.value;\r\n }\r\n });\r\n return address;\r\n };\r\n\r\n private setApplicationEducation = (fieldsGroup: any, education: IApplicationEducation): IApplicationEducation => {\r\n const degreefield = fieldsGroup.fields.findIndex(x => x.data.id === 'educationDegreeId');\r\n if (degreefield > -1) {\r\n education.enrollment.degreeId = fieldsGroup.fields[degreefield].value;\r\n }\r\n const curriculumField = fieldsGroup.fields.findIndex(x => x.data.id === 'educationCurriculumId');\r\n if (curriculumField > -1) {\r\n education.enrollment.curriculumId = fieldsGroup.fields[curriculumField].value;\r\n }\r\n const honorsField = fieldsGroup.fields.findIndex(x => x.data.id === 'educationHonorsId');\r\n if (honorsField > -1) {\r\n education.enrollment.honorsId = fieldsGroup.fields[honorsField].value;\r\n }\r\n const startDateField = fieldsGroup.fields.findIndex(x => x.data.id === 'educationStartDateId');\r\n if (startDateField > -1) {\r\n education.enrollment.startDate = fieldsGroup.fields[startDateField].value;\r\n }\r\n const endDateField = fieldsGroup.fields.findIndex(x => x.data.id === 'educationEndDateId');\r\n if (endDateField > -1) {\r\n education.enrollment.endDate = fieldsGroup.fields[endDateField].value;\r\n }\r\n const institutionField = fieldsGroup.fields.findIndex(x => x.data.id === 'educationInstitutionName');\r\n if (institutionField > -1) {\r\n education.institution.name = fieldsGroup.fields[institutionField].value;\r\n }\r\n const etsCodeField = fieldsGroup.fields.findIndex(x => x.data.id === 'educationEtsCodeId');\r\n if (etsCodeField > -1) {\r\n education.institution.etsCode = fieldsGroup.fields[etsCodeField].value;\r\n }\r\n const cityField = fieldsGroup.fields.findIndex(x => x.data.id === 'educationCityId');\r\n if (cityField > -1) {\r\n education.institution.city = fieldsGroup.fields[cityField].value;\r\n }\r\n const stateField = fieldsGroup.fields.findIndex(x => x.data.id === 'educationStateId');\r\n if (stateField > -1) {\r\n education.institution.stateProvinceId = fieldsGroup.fields[stateField].value;\r\n }\r\n const countryField = fieldsGroup.fields.findIndex(x => x.data.id === 'educationCountryId');\r\n if (countryField > -1) {\r\n education.institution.countryId = fieldsGroup.fields[countryField].value;\r\n }\r\n const ficeCodeField = fieldsGroup.fields.findIndex(x => x.data.id === 'educationFiceCode');\r\n if (ficeCodeField > -1) {\r\n education.institution.ficeCode = fieldsGroup.fields[ficeCodeField].value;\r\n }\r\n return education;\r\n };\r\n\r\n private setApplicationRelativeAdditional = (fieldsGroup: any, sectionNumber: number,\r\n relativeItem: IApplicationRelative): IApplicationRelative => {\r\n const fieldsBySection = fieldsGroup.fields.filter(x => x.data.section === sectionNumber);\r\n fieldsBySection.forEach(field => {\r\n if (field.data.id.substr(0, 'relativesPrefixId'.length) === 'relativesPrefixId') {\r\n relativeItem.relationPrefix = field.value;\r\n }\r\n if (field.data.id.substr(0, 'relativesFirstNameId'.length) === 'relativesFirstNameId') {\r\n relativeItem.relationFirstName = field.value;\r\n }\r\n if (field.data.id.substr(0, 'relativesMiddleNameId'.length) === 'relativesMiddleNameId') {\r\n relativeItem.relationMiddleName = field.value;\r\n }\r\n if (field.data.id.substr(0, 'relativesLastNamePrefixId'.length) === 'relativesLastNamePrefixId') {\r\n relativeItem.relationLastNamePrefix = field.value;\r\n }\r\n if (field.data.id.substr(0, 'relativesLastNameId'.length) === 'relativesLastNameId') {\r\n relativeItem.relationLastName = field.value;\r\n }\r\n if (field.data.id.substr(0, 'relativesSuffixId'.length) === 'relativesSuffixId') {\r\n relativeItem.relationSuffix = field.value;\r\n }\r\n if (field.data.id.substr(0, 'relativesRelationshipId'.length) === 'relativesRelationshipId') {\r\n relativeItem.relationType = field.value;\r\n }\r\n if (field.data.id.substr(0, 'relativesAttendedInstitutionId'.length) === 'relativesAttendedInstitutionId') {\r\n relativeItem.attendedInstitution = field.value;\r\n }\r\n });\r\n return relativeItem;\r\n };\r\n\r\n private setApplicationEducationValues = (education: IApplicationEducation): IApplicationEducation => {\r\n education.institution.city = education.institution.city || '';\r\n education.enrollment.curriculumId = education.enrollment.curriculumId || 0;\r\n education.enrollment.degreeId = education.enrollment.degreeId || 0;\r\n education.enrollment.honorsId = education.enrollment.honorsId || 0;\r\n education.enrollment.startDate = education.enrollment.startDate || '';\r\n education.enrollment.endDate = education.enrollment.endDate || '';\r\n education.institution.id = education.institution.id || 0;\r\n education.institution.name = education.institution.name || '';\r\n education.institution.etsCode = education.institution.etsCode || '';\r\n education.institution.city = education.institution.city || '';\r\n education.institution.stateProvinceId = education.institution.stateProvinceId || 0;\r\n education.institution.countryId = education.institution.countryId || 0;\r\n education.institution.ficeCode = education.institution.ficeCode || '';\r\n return education;\r\n };\r\n\r\n private setApplicationEducationAdditional = (fieldsGroup: any, sectionNumber: number, education: IApplicationEducation):\r\n IApplicationEducation => {\r\n const fieldsBySection = fieldsGroup.fields.filter(x => x.data.section === sectionNumber);\r\n fieldsBySection.forEach(field => {\r\n if (field.data.id.substr(0, 'educationDegreeId'.length) === 'educationDegreeId') {\r\n education.enrollment.degreeId = field.value;\r\n }\r\n if (field.data.id.substr(0, 'educationCurriculumId'.length) === 'educationCurriculumId') {\r\n education.enrollment.curriculumId = field.value;\r\n }\r\n if (field.data.id.substr(0, 'educationHonorsId'.length) === 'educationHonorsId') {\r\n education.enrollment.honorsId = field.value;\r\n }\r\n if (field.data.id.substr(0, 'educationStartDateId'.length) === 'educationStartDateId') {\r\n education.enrollment.startDate = field.value;\r\n }\r\n if (field.data.id.substr(0, 'educationEndDateId'.length) === 'educationEndDateId') {\r\n education.enrollment.endDate = field.value;\r\n }\r\n if (field.data.id.substr(0, 'educationInstitutionName'.length) === 'educationInstitutionName') {\r\n education.institution.name = field.value;\r\n }\r\n if (field.data.id.substr(0, 'educationEtsCodeId'.length) === 'educationEtsCodeId') {\r\n education.institution.etsCode = field.value;\r\n }\r\n if (field.data.id.substr(0, 'educationCityId'.length) === 'educationCityId') {\r\n education.institution.city = field.value;\r\n }\r\n if (field.data.id.substr(0, 'educationStateId'.length) === 'educationStateId') {\r\n education.institution.stateProvinceId = field.value;\r\n }\r\n if (field.data.id.substr(0, 'educationCountryId'.length) === 'educationCountryId') {\r\n education.institution.countryId = field.value;\r\n }\r\n if (field.data.id.substr(0, 'educationFiceCode'.length) === 'educationFiceCode') {\r\n education.institution.ficeCode = field.value;\r\n }\r\n });\r\n return education;\r\n };\r\n\r\n private setApplicationResidency = (fieldsGroup: any, residency: IApplicationResidency): IApplicationResidency => {\r\n const residencyPreferenceField = fieldsGroup.fields.findIndex(x => x.data.id === 'commutePreferenceId');\r\n if (residencyPreferenceField > -1) {\r\n residency.residencyPreference = fieldsGroup.fields[residencyPreferenceField].value;\r\n }\r\n const foodPlanInterestField = fieldsGroup.fields.findIndex(x => x.data.id === 'interestedFoodPlanId');\r\n if (foodPlanInterestField > -1) {\r\n residency.foodPlanInterest = fieldsGroup.fields[foodPlanInterestField].value;\r\n }\r\n const dormPlanInterestField = fieldsGroup.fields.findIndex(x => x.data.id === 'interestedDormPlanId');\r\n if (dormPlanInterestField > -1) {\r\n residency.dormPlanInterest = fieldsGroup.fields[dormPlanInterestField].value;\r\n }\r\n const dormCampusField = fieldsGroup.fields.findIndex(x => x.data.id === 'campusOptionsId');\r\n if (dormCampusField > -1) {\r\n residency.dormCampus = fieldsGroup.fields[dormCampusField].value;\r\n }\r\n const dormBuildingField = fieldsGroup.fields.findIndex(x => x.data.id === 'dormPlanOptionsId');\r\n if (dormBuildingField > -1) {\r\n residency.dormBuilding = fieldsGroup.fields[dormBuildingField].value;\r\n }\r\n return residency;\r\n };\r\n\r\n private setApplicationRelative = (fieldsGroup: any, relative: IApplicationRelative): IApplicationRelative => {\r\n const prefixField = fieldsGroup.fields.findIndex(x => x.data.id === 'relativesPrefixId');\r\n if (prefixField > -1) {\r\n relative.relationPrefix = fieldsGroup.fields[prefixField].value;\r\n }\r\n const firstNameField = fieldsGroup.fields.findIndex(x => x.data.id === 'relativesFirstNameId');\r\n if (firstNameField > -1) {\r\n relative.relationFirstName = fieldsGroup.fields[firstNameField].value;\r\n }\r\n const middleNameField = fieldsGroup.fields.findIndex(x => x.data.id === 'relativesMiddleNameId');\r\n if (middleNameField > -1) {\r\n relative.relationMiddleName = fieldsGroup.fields[middleNameField].value;\r\n }\r\n const lastNamePrefixField = fieldsGroup.fields.findIndex(x => x.data.id === 'relativesLastNamePrefixId');\r\n if (lastNamePrefixField > -1) {\r\n relative.relationLastNamePrefix = fieldsGroup.fields[lastNamePrefixField].value;\r\n }\r\n const lastNameField = fieldsGroup.fields.findIndex(x => x.data.id === 'relativesLastNameId');\r\n if (lastNameField > -1) {\r\n relative.relationLastName = fieldsGroup.fields[lastNameField].value;\r\n }\r\n const suffixField = fieldsGroup.fields.findIndex(x => x.data.id === 'relativesSuffixId');\r\n if (suffixField > -1) {\r\n relative.relationSuffix = fieldsGroup.fields[suffixField].value;\r\n }\r\n const relationshipField = fieldsGroup.fields.findIndex(x => x.data.id === 'relativesRelationshipId');\r\n if (relationshipField > -1) {\r\n relative.relationType = fieldsGroup.fields[relationshipField].value;\r\n }\r\n const attendedInstitutionField = fieldsGroup.fields.findIndex(x => x.data.id === 'relativesAttendedInstitutionId');\r\n if (attendedInstitutionField > -1) {\r\n relative.attendedInstitution = fieldsGroup.fields[attendedInstitutionField].value;\r\n }\r\n return relative;\r\n };\r\n\r\n private setApplicationRelativeValues = (relative: IApplicationRelative): IApplicationRelative => {\r\n relative.applicationId = relative.applicationId || 0;\r\n relative.relationMiddleName = relative.relationMiddleName || '';\r\n relative.relationLastNamePrefix = relative.relationLastNamePrefix || '';\r\n\r\n return relative;\r\n };\r\n\r\n private setApplicationActivitiesValues = (activity: IApplicationActivity,\r\n activityList: IApplicationActivity[]): IApplicationActivity[] => {\r\n activity.activityType = activity.activityType || 0;\r\n activity.activity = activity.activity || 0;\r\n activity.hoursPerWeek = activity.hoursPerWeek || 0;\r\n activity.weeksPerYear = activity.weeksPerYear || 0;\r\n activity.numberOfYears = activity.numberOfYears || 0;\r\n\r\n if (activity.activityType !== 0 && activity.activity !== 0) {\r\n activityList.push(activity);\r\n }\r\n else if (activity.position || activity.hoursPerWeek || activity.weeksPerYear ||\r\n activity.numberOfYears || activity.participatedGrade09 || activity.participatedGrade10 ||\r\n activity.participatedGrade11 || activity.participatedGrade12 || activity.participatedPostsecondary) {\r\n activityList.push(activity);\r\n }\r\n return activityList;\r\n };\r\n\r\n private setIpedsValuesCheckList = (fieldsGroup: IFieldsGroup): void => {\r\n const {\r\n application\r\n } = this.state;\r\n\r\n const ipedsCheckList = fieldsGroup.fields[3].value;\r\n if (ipedsCheckList) {\r\n const array = Object.values(ipedsCheckList.split(','));\r\n array.forEach(iped => {\r\n if (application.ipeds) {\r\n let index: number = -1;\r\n index = application.ipeds.findIndex(x => x.ipedsFederalCategoryId === 1\r\n && x.ipedsEthnicityId === Number(iped));\r\n if (index === -1) {\r\n application.ipeds.push({\r\n ipedsEthnicityId: Number(iped),\r\n ipedsFederalCategoryId: 1\r\n });\r\n }\r\n }\r\n else {\r\n application.ipeds = [{\r\n ipedsEthnicityId: Number(iped),\r\n ipedsFederalCategoryId: 1\r\n }];\r\n }\r\n });\r\n }\r\n\r\n this.setState({\r\n application: application\r\n });\r\n };\r\n\r\n private setIpedsValuesNestedCheckList = (fieldsGroup: IFieldsGroup): void => {\r\n const {\r\n application\r\n } = this.state;\r\n\r\n const ipedsNestedCheckboxList = fieldsGroup.fields[4].value;\r\n if (ipedsNestedCheckboxList) {\r\n const ipedsArray = ipedsNestedCheckboxList.split(',');\r\n ipedsArray.forEach(iped => {\r\n const ipedItem = iped.split('$');\r\n if (ipedItem[0] !== '') {\r\n if (ipedItem.length > 1) {\r\n if (application.ipeds) {\r\n application.ipeds.push({\r\n ipedsEthnicityId: ipedItem[1] !== '' ? Number(ipedItem[1]) : undefined,\r\n ipedsFederalCategoryId: Number(ipedItem[0])\r\n });\r\n }\r\n else {\r\n application.ipeds = [{\r\n ipedsEthnicityId: ipedItem[1] !== '' ? Number(ipedItem[1]) : undefined,\r\n ipedsFederalCategoryId: Number(ipedItem[0])\r\n }];\r\n }\r\n }\r\n else {\r\n if (application.ipeds) {\r\n application.ipeds.push({\r\n ipedsFederalCategoryId: Number(ipedItem[0])\r\n });\r\n }\r\n else {\r\n application.ipeds = [{\r\n ipedsFederalCategoryId: Number(ipedItem[0])\r\n }];\r\n }\r\n }\r\n }\r\n });\r\n }\r\n\r\n this.setState({\r\n application: application\r\n });\r\n };\r\n\r\n // #endregion Set Values for Collections\r\n // #endregion Functions\r\n\r\n // #region Error Functions\r\n private logError = (logData: ILogData): void => {\r\n LayoutActions.setLogData(logData);\r\n };\r\n\r\n private redirectError = (code: number): void => {\r\n LayoutActions.setRedirectCode(code);\r\n };\r\n\r\n private showError = (message?: string): void => {\r\n LayoutActions.setAlert({ message: message, messageType: ResultType.error } as IAlert);\r\n };\r\n // #endregion Error Functions\r\n\r\n // #region Resolvers\r\n private resolveLayoutReady = () => {\r\n try {\r\n const {\r\n application,\r\n resources\r\n } = this.state;\r\n\r\n if (resources) {\r\n document.title = resources.lblPageTitle;\r\n\r\n if (application) {\r\n const hdnAppId: HTMLInputElement | undefined =\r\n document.getElementById('hdnApplicationId') as HTMLInputElement;\r\n if (hdnAppId && hdnAppId.value) {\r\n application.applicationId = Number(hdnAppId.value);\r\n hdnAppId.remove();\r\n Requests.getComponents(application.applicationId, this.resolveGetComponents, this.logError);\r\n\r\n const hdnTransactionId: HTMLInputElement | undefined =\r\n document.getElementById('hdnTransactionId') as HTMLInputElement;\r\n const hdnTransactionStatus: HTMLInputElement | undefined =\r\n document.getElementById('hdnTransactionStatus') as HTMLInputElement;\r\n const hdnTransactionAmount: HTMLInputElement | undefined =\r\n document.getElementById('hdnTransactionAmount') as HTMLInputElement;\r\n const hdnTransactionDescription: HTMLInputElement | undefined =\r\n document.getElementById('hdnTransactionDescription') as HTMLInputElement;\r\n const hdnTransactionAuthorizationNumber: HTMLInputElement | undefined =\r\n document.getElementById('hdnTransactionAuthorizationNumber') as HTMLInputElement;\r\n const hdnTransactionReturnUrl: HTMLInputElement | undefined =\r\n document.getElementById('hdnTransactionReturnUrl') as HTMLInputElement;\r\n if (hdnTransactionId && hdnTransactionId.value\r\n && hdnTransactionStatus\r\n && hdnTransactionAmount\r\n && hdnTransactionDescription\r\n && hdnTransactionAuthorizationNumber\r\n && hdnTransactionReturnUrl) {\r\n const paymentTransaction: IPaymentTransaction = {\r\n amount: hdnTransactionAmount.value,\r\n authorizationNumber: hdnTransactionAuthorizationNumber.value,\r\n description: hdnTransactionDescription.value,\r\n returnUrl: hdnTransactionReturnUrl.value,\r\n status: Number(hdnTransactionStatus.value),\r\n transactionId: Number(hdnTransactionAmount.value)\r\n } as IPaymentTransaction;\r\n this.setState({\r\n paymentModalOpenFail: Number(hdnTransactionStatus.value) === 0,\r\n paymentModalOpenSuccess: Number(hdnTransactionStatus.value) === 1,\r\n paymentTransaction: paymentTransaction\r\n });\r\n hdnTransactionId.remove();\r\n hdnTransactionStatus.remove();\r\n hdnTransactionAmount.remove();\r\n hdnTransactionDescription.remove();\r\n hdnTransactionAuthorizationNumber.remove();\r\n hdnTransactionReturnUrl.remove();\r\n }\r\n }\r\n else {\r\n const hdnSavedApplicationToken: HTMLInputElement | undefined =\r\n document.getElementById('hdnSavedApplicationToken') as HTMLInputElement;\r\n if (hdnSavedApplicationToken && hdnSavedApplicationToken.value) {\r\n this.setState({\r\n token: hdnSavedApplicationToken.value\r\n });\r\n hdnSavedApplicationToken.remove();\r\n Requests.getSavedApplicationComponents(hdnSavedApplicationToken.value, this.resolveGetComponents, this.logError);\r\n }\r\n }\r\n }\r\n }\r\n else {\r\n this.logError(LogData.noResources(this.resolveLayoutReady.name));\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolveLayoutReady.name, e));\r\n }\r\n };\r\n\r\n private resolveCountries = (json: string): void => {\r\n try {\r\n const result: IJsonResult = JSON.parse(json);\r\n if (result.status) {\r\n const countries: any = result.data;\r\n\r\n this.setState({\r\n countries: countries\r\n });\r\n }\r\n else if (result.code) {\r\n this.redirectError(result.code);\r\n }\r\n else if (result.log) {\r\n this.showError();\r\n }\r\n else {\r\n this.showError();\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolveCountries.name, e));\r\n }\r\n };\r\n\r\n private resolveGetAddress = (json: string): void => {\r\n try {\r\n const result: IJsonResult = JSON.parse(json);\r\n if (result.status) {\r\n const rowsPerPageOptions: number[] = this.getRowsPerPageOptions(result.data.overallCount\r\n ? result.data.overallCount : 0);\r\n this.setState({\r\n addresses: result.data.addresses,\r\n rowsPerPageOptions,\r\n total: result.data.overallCount\r\n });\r\n LayoutActions.setLoading(false);\r\n }\r\n else if (result.code) {\r\n this.redirectError(result.code);\r\n }\r\n else if (result.log) {\r\n this.showError();\r\n }\r\n else {\r\n this.showError();\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolveGetAddress.name, e));\r\n }\r\n };\r\n\r\n private resolveGetComponents = (json: string): void => {\r\n try {\r\n const result: IJsonResult = JSON.parse(json);\r\n if (result.status) {\r\n const components: IApplicationForm = result.data;\r\n if (components.steps) {\r\n const errors: IApplicationErrors[] = Array(components.steps.length);\r\n if (components.applicationFormId > 0) {\r\n const {\r\n application\r\n } = this.state;\r\n\r\n application.applicationId = components.applicationFormId;\r\n }\r\n if (components.savedApplicationId) {\r\n const {\r\n application\r\n } = this.state;\r\n\r\n application.savedApplicationId = components.savedApplicationId;\r\n }\r\n if (components.canSaveApplication) {\r\n this.setState({\r\n confirmationMessage: components.confirmationSaveMessage,\r\n saveMessage: components.footerSaveMessage,\r\n showSaveButton: components.canSaveApplication\r\n });\r\n }\r\n\r\n components.steps.forEach((step, i) => {\r\n errors[i] = { isStepError: false, groupErrors: Array(step.fieldsGroups.length), stepTitle: step.title };\r\n for (let j = 0; j < step.fieldsGroups.length; j++) {\r\n errors[i].groupErrors[j] = {\r\n firstSectionErrors: {\r\n firstFieldsErrors: [],\r\n isFirstSectionErrors: false\r\n },\r\n groupId: step.fieldsGroups[j].id,\r\n isGroupError: false,\r\n sectionErrors: []\r\n };\r\n }\r\n });\r\n\r\n const {\r\n paymentModalOpenFail,\r\n paymentModalOpenSuccess\r\n } = this.state;\r\n\r\n if (paymentModalOpenFail || paymentModalOpenSuccess) {\r\n components.isCompletedApplication = true;\r\n this.setState({\r\n showAttachments: false\r\n });\r\n }\r\n\r\n this.setState({\r\n components: components,\r\n errors: errors\r\n }, () => LayoutActions.setLoading(false));\r\n\r\n const fileSelector = this.buildFileSelector();\r\n\r\n this.setState({\r\n fileSelector: fileSelector\r\n });\r\n }\r\n }\r\n else if (result.code === 0) {\r\n this.setState({\r\n openNotAvailableModal: true\r\n }, () => LayoutActions.setLoading(false));\r\n }\r\n else if (result.code) {\r\n this.redirectError(result.code);\r\n }\r\n else if (result.log) {\r\n this.showError();\r\n }\r\n else {\r\n this.showError();\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolveGetComponents.name, e));\r\n }\r\n };\r\n\r\n private resolveGetChildOptions = (json: string): void => {\r\n try {\r\n const {\r\n components\r\n } = this.state;\r\n\r\n if (components) {\r\n const jsonResult: any = JSON.parse(json);\r\n if (jsonResult.data) {\r\n if (jsonResult.data.step && jsonResult.data.group && jsonResult.data.targetId) {\r\n const fields: any = components.steps[Number(jsonResult.data.step)].fieldsGroups[Number(jsonResult.data.group)].fields;\r\n const fieldIndex: number =\r\n fields.findIndex(x => x.data.id === jsonResult.data.targetId);\r\n if (fieldIndex > -1) {\r\n const childField: IFieldForm = fields[fieldIndex];\r\n if (jsonResult.data.results) {\r\n childField.data.options = jsonResult.data.results as IDropDownOption[];\r\n }\r\n else {\r\n childField.data.options = [] as IDropDownOption[];\r\n }\r\n if (childField) {\r\n childField.value = undefined;\r\n }\r\n this.setState({\r\n components: components\r\n });\r\n }\r\n }\r\n }\r\n }\r\n } catch (e) {\r\n this.logError(LogData.fromException(this.resolveGetChildOptions.name, e));\r\n }\r\n };\r\n\r\n private resolveGetInstitutions = (json: string): void => {\r\n try {\r\n const result: IJsonResult = JSON.parse(json);\r\n if (result.status) {\r\n const rowsPerPageOptions: number[] = this.getRowsPerPageOptions(result.data.overallCount\r\n ? result.data.overallCount : 0);\r\n this.setState({\r\n institutions: result.data.institutions,\r\n rowsPerPageOptions,\r\n total: result.data.overallCount\r\n });\r\n LayoutActions.setLoading(false);\r\n }\r\n else if (result.code) {\r\n this.redirectError(result.code);\r\n }\r\n else if (result.log) {\r\n this.showError();\r\n }\r\n else {\r\n this.showError();\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolveGetInstitutions.name, e));\r\n }\r\n };\r\n\r\n private resolveStates = (json: string): void => {\r\n try {\r\n const result: IJsonResult = JSON.parse(json);\r\n if (result.status) {\r\n const states: any = result.data;\r\n\r\n this.setState({\r\n states: states\r\n });\r\n }\r\n else if (result.code) {\r\n this.redirectError(result.code);\r\n }\r\n else if (result.log) {\r\n this.showError();\r\n }\r\n else {\r\n this.showError();\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolveStates.name, e));\r\n }\r\n };\r\n\r\n private resolveSaveIncompleteApplication = (json: string): void => {\r\n try {\r\n const result: IJsonResult = JSON.parse(json);\r\n if (result.status) {\r\n if (result.data.result) {\r\n const {\r\n components\r\n } = this.state;\r\n // Send notification\r\n if (components && result.data.token && result.data.email && components.name) {\r\n LayoutActions.setLoading(false);\r\n const urlToSend = `${window.location.origin}${Constants.webUrl}/Admissions/ApplicationForm/Saved/${\r\n result.data.token}`;\r\n Requests.postCreateSaveApplicationNotification(urlToSend,\r\n result.data.email, components.name, this.resolveCreateSaveApplicationNotification, this.logError);\r\n this.setState({\r\n openConfirmationSavedModal: true\r\n });\r\n }\r\n }\r\n }\r\n else {\r\n // TO DO: Show error because application was not saved\r\n this.logError(LogData.badJsonResult(this.resolveSaveIncompleteApplication.name));\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolveSaveIncompleteApplication.name, e));\r\n }\r\n };\r\n\r\n private resolveCreateSaveApplicationNotification = (json: string): void => {\r\n try {\r\n const result: IJsonResult = JSON.parse(json);\r\n if (!result.status) {\r\n this.logError(LogData.badJsonResult(this.resolveCreateSaveApplicationNotification.name));\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolveCreateSaveApplicationNotification.name, e));\r\n }\r\n };\r\n\r\n private resolveSubmitApplication = (json: string): void => {\r\n try {\r\n const {\r\n components\r\n } = this.state;\r\n\r\n const result: IJsonResult = JSON.parse(json);\r\n if (result.status) {\r\n if (result.data.result) {\r\n if (components) {\r\n if (result.data.applicationId) {\r\n this.setState({\r\n applicationId: result.data.applicationId\r\n });\r\n }\r\n if (result.data.paymentInfo) {\r\n this.setState({\r\n paymentInfo: result.data.paymentInfo\r\n });\r\n }\r\n // Attachments are after sumbit and before payment\r\n if (components.allowAttachment) {\r\n const {\r\n applicationId\r\n } = this.state;\r\n if (applicationId !== undefined && applicationId > 0) {\r\n Requests.postListApplicationAttachments(applicationId, this.resolveGetListApplicationAttachments, this.logError);\r\n this.setState({\r\n showAttachments: true\r\n });\r\n }\r\n }\r\n else {\r\n if (result.data.paymentInfo) {\r\n const returnUrl =\r\n `${Constants.webUrl}/Admissions/ApplicationForm/${components.applicationFormId}`;\r\n\r\n this.setState({\r\n paymentDetailModalOpen: true,\r\n paymentInfo: result.data.paymentInfo,\r\n returnUrl: returnUrl\r\n });\r\n }\r\n else {\r\n components.isCompletedApplication = true;\r\n this.setState({\r\n components: components\r\n });\r\n }\r\n }\r\n LayoutActions.setLoading(false);\r\n }\r\n }\r\n else {\r\n this.showError();\r\n }\r\n }\r\n else if (result.code) {\r\n this.redirectError(result.code);\r\n }\r\n else if (result.log) {\r\n this.showError();\r\n }\r\n else {\r\n this.logError(LogData.badJsonResult(this.resolveSubmitApplication.name));\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolveSubmitApplication.name, e));\r\n }\r\n };\r\n\r\n private resolveValidateScore = (json: string): void => {\r\n try {\r\n const {\r\n components\r\n } = this.state;\r\n const result: IJsonResult = JSON.parse(json);\r\n if (result.status && components) {\r\n components.steps.forEach(step => {\r\n const group: IFieldsGroup | undefined = step.fieldsGroups.find(g => g.id === result.data.group);\r\n if (group) {\r\n const field: IFieldForm | undefined = group.fields.find(f => f.data.id === result.data.componentId);\r\n if (field) {\r\n if (result.data.isNumeric) {\r\n field.isNumeric = true;\r\n } else {\r\n field.isNumeric = false;\r\n }\r\n }\r\n }\r\n });\r\n\r\n this.setState({\r\n components: this.state.components\r\n });\r\n }\r\n else if (result.code) {\r\n this.redirectError(result.code);\r\n }\r\n else if (result.log) {\r\n this.showError();\r\n }\r\n else {\r\n this.showError();\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolveValidateScore.name, e));\r\n }\r\n };\r\n\r\n private resolveCreateAttachment = (json: string): void => {\r\n try {\r\n const result: IJsonResult = JSON.parse(json);\r\n if (result.status) {\r\n if (result.data.result) {\r\n const {\r\n applicationId\r\n } = this.state;\r\n if (applicationId !== undefined && applicationId > 0) {\r\n LayoutActions.setLoading(true);\r\n Requests.postListApplicationAttachments(applicationId, this.resolveGetListApplicationAttachments, this.logError);\r\n }\r\n }\r\n }\r\n else {\r\n this.logError(LogData.badJsonResult(this.resolveCreateAttachment.name));\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolveCreateAttachment.name, e));\r\n }\r\n };\r\n\r\n private resolveGetListApplicationAttachments = (json: string): void => {\r\n try {\r\n const result: IJsonResult = JSON.parse(json);\r\n if (result.status) {\r\n if (result.data) {\r\n this.setState({\r\n attachments: result.data.appAttachmentsViewModel,\r\n openRemoveAttachmentDialog: false\r\n });\r\n const {\r\n applicationId\r\n } = this.state;\r\n if (applicationId) {\r\n LayoutActions.setLoading(true);\r\n Requests.GetApplicationAttachmentTotals(applicationId, this.resolveGetAttachmentTotals, this.logError);\r\n }\r\n const fileSelector = this.buildFileSelector();\r\n this.setState({\r\n fileSelector: fileSelector\r\n });\r\n }\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolveGetListApplicationAttachments.name, e));\r\n }\r\n };\r\n\r\n private resolveRemoveAttachment = (json: string): void => {\r\n try {\r\n const result: IJsonResult = JSON.parse(json);\r\n if (result.status) {\r\n if (result.data) {\r\n const {\r\n applicationId\r\n } = this.state;\r\n if (applicationId) {\r\n LayoutActions.setLoading(true);\r\n Requests.postListApplicationAttachments(applicationId, this.resolveGetListApplicationAttachments, this.logError);\r\n }\r\n }\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolveRemoveAttachment.name, e));\r\n }\r\n };\r\n\r\n private resolveGetAttachmentTotals = (json: string): void => {\r\n try {\r\n const result: IJsonResult = JSON.parse(json);\r\n if (result.status) {\r\n this.setState({\r\n attachmentsTotalSize: result.data.appAttachmentTotalsViewModel.totalAttachmentSize,\r\n attachmentsTotalSizeNumber: Number(result.data.appAttachmentTotalsViewModel.totalAttachmentSizeNumber),\r\n totalNumberOfAttachments: Number(result.data.appAttachmentTotalsViewModel.totalNumberOfAttachments)\r\n });\r\n LayoutActions.setLoading(false);\r\n }\r\n }\r\n catch (e) {\r\n this.logError(LogData.fromException(this.resolveGetAttachmentTotals.name, e));\r\n }\r\n };\r\n // #endregion Resolvers\r\n\r\n // #region State Management Events\r\n private onLayoutReady = (): void => {\r\n const ready: boolean = LayoutStore.getLayoutReady();\r\n const resources: IApplicationFormResources | undefined = LayoutStore.getResources();\r\n const cultures: ICultures = LayoutStore.getCultures();\r\n\r\n if (ready) {\r\n Requests.getStates(this.resolveStates, this.logError);\r\n Requests.getCountries(this.resolveCountries, this.logError);\r\n\r\n this.setState({\r\n dateTimeCulture: cultures.dateTimeCulture,\r\n firstDayOfWeek: cultures.firstDayOfWeek,\r\n shortDatePattern: cultures.shortDatePattern,\r\n\r\n // Resources\r\n resources: resources\r\n }, this.resolveLayoutReady);\r\n }\r\n else {\r\n this.setState({\r\n componentError: true\r\n }, () => this.logError(LogData.layoutNoReady(this.onLayoutReady.name)));\r\n }\r\n };\r\n // #endregion State Management Events\r\n\r\n // #region Lifecycle\r\n public componentWillUnmount = (): void => {\r\n LayoutStore.removeLayoutReadyListener(this.onLayoutReady);\r\n };\r\n\r\n public componentDidCatch = (error, info): void => {\r\n this.setState({\r\n componentError: true\r\n }, () => {\r\n this.logError(LogData.fromComponentException(this.componentDidCatch.name, error, info));\r\n this.redirectError(500);\r\n });\r\n };\r\n // #endregion Lifecycle\r\n\r\n public render(): JSX.Element {\r\n const {\r\n activeStep,\r\n addresses,\r\n attachments,\r\n attachmentsTotalSize,\r\n changeEmailText,\r\n componentError,\r\n components,\r\n confirmationMessage,\r\n countries,\r\n dateTimeCulture,\r\n emailField,\r\n emptyEmailField,\r\n errors,\r\n expanded,\r\n fileName,\r\n firstDayOfWeek,\r\n hasPersonId,\r\n institutions,\r\n invalidEmail,\r\n openAddressSearchModal,\r\n openETSSearchModal,\r\n pageNumber,\r\n pageSize,\r\n paymentModalOpenFail,\r\n paymentModalOpenSuccess,\r\n paymentTransaction,\r\n resources,\r\n rowsPerPageOptions,\r\n openConfirmationSavedModal,\r\n openEmailModal,\r\n openNotAvailableModal,\r\n openRemoveAttachmentDialog,\r\n openSupportedFilesModal,\r\n saveMessage,\r\n selectedCity,\r\n selectedCountry,\r\n selectedEtsCode,\r\n selectedInstitutionName,\r\n selectedState,\r\n selectedZipCode,\r\n shortDatePattern,\r\n showAttachments,\r\n showSaveButton,\r\n showSignIn,\r\n showSignUp,\r\n states,\r\n total,\r\n\r\n // Payment\r\n paymentDetailModalOpen,\r\n paymentInfo,\r\n paymentModalOpenProcess,\r\n returnUrl\r\n } = this.state;\r\n\r\n // #region Payment modals\r\n let processPaymentModal: JSX.Element | undefined;\r\n if (paymentModalOpenProcess && paymentInfo) {\r\n processPaymentModal = (\r\n \r\n );\r\n }\r\n // #endregion Payment modals\r\n\r\n let addressSearchModal: JSX.Element | undefined;\r\n\r\n if (resources && resources.addressSearchModal) {\r\n addressSearchModal = (\r\n \r\n );\r\n }\r\n\r\n let etsSearchModal: JSX.Element | undefined;\r\n if (resources && resources.etsSearchModal && states && countries) {\r\n etsSearchModal = (\r\n \r\n );\r\n }\r\n\r\n let confirmationSavedModal: JSX.Element | undefined;\r\n if (resources && confirmationMessage) {\r\n confirmationSavedModal = (\r\n \r\n );\r\n }\r\n\r\n let emailModal: JSX.Element | undefined;\r\n if (resources && openEmailModal) {\r\n emailModal = (\r\n \r\n {resources.emailModal.lblSave}\r\n \r\n )}\r\n id=\"emailModal\"\r\n header={resources.emailModal.lblSaveApplication}\r\n maxWidth=\"md\"\r\n open={openEmailModal}\r\n onClose={this.onCloseEmailModal}\r\n >\r\n \r\n \r\n \r\n {emailField && changeEmailText ? resources.emailModal.lblSaveApplicationInstructions\r\n : resources.emailModal.lblSaveApplicationEmptyEmailIns}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n\r\n let notAvailableModal: JSX.Element | undefined;\r\n if (resources && openNotAvailableModal) {\r\n notAvailableModal = (\r\n \r\n {resources.notAvailableModal.lblOk}\r\n \r\n )}\r\n id=\"notAvailableModal\"\r\n header={resources.notAvailableModal.lblNotAvailable}\r\n maxWidth=\"md\"\r\n open={openNotAvailableModal}\r\n onClose={this.onCloseNotAvailableModal}\r\n >\r\n \r\n \r\n \r\n {resources.notAvailableModal.lblNotAvailableMessage}\r\n \r\n \r\n \r\n \r\n );\r\n }\r\n\r\n let supportedFiles: JSX.Element | undefined;\r\n if (resources && components && components.fileTypes) {\r\n const supportedFilesBody: JSX.Element[] = [];\r\n components.fileTypes.forEach((availableFileType, i) => {\r\n let fileExt = '';\r\n const fileExtensions = availableFileType.fileExtension.split(';');\r\n fileExtensions.forEach(fExt => {\r\n fileExt = fileExt + fExt.replace('*.', '');\r\n });\r\n fileExt = fileExt.replace(/ /g, ', ');\r\n supportedFilesBody.push(\r\n \r\n \r\n \r\n {fileExt}\r\n \r\n \r\n \r\n );\r\n });\r\n\r\n supportedFiles = (\r\n \r\n \r\n {supportedFilesBody}\r\n \r\n
\r\n );\r\n }\r\n\r\n let supportedFilesModal: JSX.Element | undefined;\r\n if (resources && openSupportedFilesModal) {\r\n supportedFilesModal = (\r\n \r\n {resources.attachments.lblClose}\r\n \r\n )}\r\n id=\"supportedFilesModal\"\r\n header={resources.attachments.lblSupportedFilesTitle}\r\n maxWidth=\"md\"\r\n open={openSupportedFilesModal}\r\n onClose={this.onCloseSupportedFilesModal}\r\n >\r\n \r\n \r\n {supportedFiles}\r\n \r\n \r\n \r\n );\r\n }\r\n\r\n let attachmentsComponent: JSX.Element | undefined;\r\n if (resources && components && components.fileTypes) {\r\n attachmentsComponent = (\r\n \r\n );\r\n }\r\n\r\n let removeAttachmentModal: JSX.Element | undefined;\r\n if (resources && openRemoveAttachmentDialog) {\r\n removeAttachmentModal = (\r\n \r\n );\r\n }\r\n\r\n let signInModal: JSX.Element | undefined;\r\n if (!hasPersonId) {\r\n signInModal = (\r\n \r\n );\r\n }\r\n\r\n let signUpModal: JSX.Element | undefined;\r\n if (showSignUp) {\r\n signUpModal = (\r\n \r\n );\r\n }\r\n\r\n let contentPage: JSX.Element | undefined;\r\n if (!componentError && resources) {\r\n // #region Payment Info modal\r\n let paymentInfoModal: JSX.Element | undefined;\r\n if (paymentInfo && components && paymentDetailModalOpen) {\r\n paymentInfoModal = (\r\n \r\n );\r\n }\r\n // #endregion Payment Info modal\r\n\r\n if (components) {\r\n if (!showAttachments) {\r\n contentPage = (\r\n <>\r\n \r\n {paymentInfoModal}\r\n \r\n );\r\n }\r\n else {\r\n contentPage = (\r\n <>\r\n {attachmentsComponent}\r\n \r\n );\r\n }\r\n }\r\n }\r\n\r\n return (\r\n \r\n {contentPage}\r\n {addressSearchModal}\r\n {etsSearchModal}\r\n {processPaymentModal}\r\n {confirmationSavedModal}\r\n {emailModal}\r\n {notAvailableModal}\r\n {supportedFilesModal}\r\n {removeAttachmentModal}\r\n {signInModal}\r\n {signUpModal}\r\n \r\n );\r\n }\r\n}\r\n// #endregion Component\r\n\r\n// RenderDOM: Component\r\nReactDOM.render(, document.getElementById('root'));"],"sourceRoot":""}