@widergy/energy-ui 3.158.1 → 3.159.0

package/dist/esm/components/UTRating/versions/V0/components/Star/styles.module.scss

@@ -0,0 +1,79 @@
+@use '../../../../../../scss/variables/colors.module.scss' as *;
+@use '../../../../../../scss/variables/fontSizes.module.scss' as *;
+@use '../../../../../../scss/variables/mediaQueries.module.scss' as *;
+
+.container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.first {
+  flex-direction: row-reverse;
+
+  @media #{$mobile} {
+    position: relative;
+
+    .text {
+      left: 0;
+      position: absolute;
+      top: 40px;
+    }
+  }
+}
+
+.last {
+  flex-direction: inherit;
+
+  @media #{$mobile} {
+    position: relative;
+
+    .text {
+      position: absolute;
+      right: 0;
+      top: 40px;
+    }
+  }
+}
+
+.withTextBottom {
+  margin-right: 5px;
+  min-width: 40px;
+  text-align: center;
+  width: 20%;
+
+  @media #{$mobile} {
+    min-width: 30px;
+  }
+}
+
+.starButton {
+  color: $disabled-gray;
+  padding: 2px;
+  transition: color 0.65s ease-out;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.starSize {
+  font-size: 32px;
+}
+
+.starsPainted {
+  color: $rating-star-selected;
+}
+
+.starHovered {
+  color: $rating-star-selected;
+}
+
+.text {
+  font-size: $small;
+
+  .first > &,
+  .last > & {
+    white-space: nowrap;
+  }
+}

package/dist/esm/components/UTRating/versions/V0/constants.js

@@ -0,0 +1,8 @@
+export const RATING_VARIANTS = {
+  CIRCULAR: 'circular',
+  FACES: 'faces',
+  STAR: 'star'
+};
+export const SIDE_TEXT = 'side_text';
+export const BOTTOM_TEXT = 'bottom_text';
+export const NO_TEXT = 'no_text';

package/dist/esm/components/UTRating/versions/V0/index.js

@@ -0,0 +1,96 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { Fragment, useState } from 'react';
+import { func, arrayOf, shape, number, string, oneOfType, bool, object, objectOf } from 'prop-types';
+import { isEmpty, autocompleteWithNumbers } from '@widergy/web-utils/lib/array';
+import Colors from '../../../../scss/variables/colors.module.scss';
+import { fieldType } from '../../../../types/formTypes';
+import WithTheme from '../../../WithTheme';
+import UTLabel from '../../../UTLabel';
+import { mergeClasses } from '../../../../utils/classesUtils';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+import Circle from './components/Circle';
+import Faces from './components/Faces';
+import Star from './components/Star';
+import { RATING_VARIANTS } from './constants';
+const UTRatingContainer = _ref => {
+  let {
+    classes: theme,
+    classNames,
+    field = {},
+    onChange,
+    options,
+    titleProps,
+    withUpperTitle
+  } = _ref;
+  const [selectedOptions, setSelectedOptions] = useState([]);
+  const [hoveredOptions, setHoveredOptions] = useState([]);
+  const [temporalSelected, setTemporalSelected] = useState([]);
+  const classes = mergeClasses(theme, classNames);
+  const {
+    ignore_title: ignoreTitle,
+    variant,
+    star_color: starColor,
+    text_variant: textVariant
+  } = field.configuration || {};
+  const shouldShowUpperTitle = ignoreTitle && withUpperTitle;
+  const handleClick = (order, value) => {
+    setSelectedOptions(autocompleteWithNumbers(1, order));
+    if (isEmpty(selectedOptions)) setTemporalSelected(autocompleteWithNumbers(1, order));
+    onChange(value.toString());
+  };
+  const handleHover = value => {
+    setHoveredOptions(autocompleteWithNumbers(1, value));
+    setSelectedOptions([]);
+  };
+  const handleMouseLeave = () => {
+    setHoveredOptions([]);
+    setSelectedOptions(temporalSelected);
+  };
+  const handleMapOptions = option => {
+    const defaultProps = {
+      onClick: handleClick,
+      value: option.value,
+      order: option.order,
+      isFirst: options[0].order === option.order,
+      isLast: options[options.length - 1].order === option.order,
+      textVariant,
+      name: option.name,
+      classes,
+      color: starColor || Colors.ratingStarSelected
+    };
+    return variant === RATING_VARIANTS.CIRCULAR ? /*#__PURE__*/React.createElement(Circle, _extends({
+      key: option.value,
+      selected: selectedOptions[selectedOptions.length - 1] === option.order
+    }, defaultProps)) : variant === RATING_VARIANTS.FACES ? /*#__PURE__*/React.createElement(Faces, _extends({
+      key: option.value,
+      selected: selectedOptions[selectedOptions.length - 1] === option.order
+    }, defaultProps)) : /*#__PURE__*/React.createElement(Star, _extends({
+      key: option.value,
+      hovered: hoveredOptions.includes(option.order),
+      selected: selectedOptions.includes(option.order),
+      onMouseLeave: handleMouseLeave,
+      onHover: handleHover
+    }, defaultProps));
+  };
+  return /*#__PURE__*/React.createElement(Fragment, null, shouldShowUpperTitle && /*#__PURE__*/React.createElement(UTLabel, _extends({
+    className: "".concat(classes.title)
+  }, titleProps, {
+    withMarkdown: true
+  }), field.title), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(classes.container)
+  }, options.map(handleMapOptions)));
+};
+UTRatingContainer.propTypes = {
+  classes: objectOf(string),
+  classNames: objectOf(string),
+  field: fieldType,
+  onChange: func,
+  options: arrayOf(shape({
+    order: number,
+    value: oneOfType([number, string])
+  })),
+  titleProps: object,
+  withUpperTitle: bool
+};
+export default WithTheme(retrieveStyle)(UTRatingContainer);

package/dist/esm/components/UTRating/versions/V0/styles.module.scss

@@ -0,0 +1,12 @@
+@use '../../../../scss/variables/mediaQueries.module.scss' as *;
+
+.container {
+  display: flex;
+  grid-gap: 12px;
+  margin: 10px 0;
+
+  @media #{$mobile} {
+    justify-content: space-between;
+    margin-bottom: 15px;
+  }
+}

package/dist/esm/components/UTRating/versions/V0/theme.js

@@ -0,0 +1,85 @@
+import { getIn } from 'seamless-immutable';
+import Colors from '../../../../scss/variables/colors.module.scss';
+export const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    faceButtonConfuzed: {
+      '&:hover path, &$faceButtonSelected path': {
+        fill: theme.Palette.error['05']
+      },
+      '&:hover + $label, &$faceButtonSelected + $label': {
+        color: theme.Palette.error['05']
+      }
+    },
+    faceButtonSad: {
+      '&:hover path, &$faceButtonSelected path': {
+        fill: theme.Palette.error['03']
+      },
+      '&:hover + $label, &$faceButtonSelected + $label': {
+        color: theme.Palette.error['03']
+      }
+    },
+    faceButtonEmpty: {
+      '&:hover path, &$faceButtonSelected path': {
+        fill: theme.Palette.warning['04']
+      },
+      '&:hover + $label, &$faceButtonSelected + $label': {
+        color: theme.Palette.warning['04']
+      }
+    },
+    faceButtonSmile: {
+      '&:hover path, &$faceButtonSelected path': {
+        fill: theme.Palette.success['03']
+      },
+      '&:hover + $label, &$faceButtonSelected + $label': {
+        color: theme.Palette.success['03']
+      }
+    },
+    faceButtonHappy: {
+      '&:hover path, &$faceButtonSelected path': {
+        fill: theme.Palette.success['05']
+      },
+      '&:hover + $label, &$faceButtonSelected + $label': {
+        color: theme.Palette.success['05']
+      }
+    },
+    faceButtonSelected: {},
+    label: {
+      color: "".concat(getIn(theme, ['UTRating', 'label', 'color'])),
+      fontSize: "".concat(getIn(theme, ['UTRating', 'label', 'fontSize'])),
+      right: "".concat(getIn(theme, ['UTRating', 'label', 'right']))
+    },
+    labelBottomFirst: {
+      alignSelf: "".concat(getIn(theme, ['UTRating', 'labelBottomFirst', 'alignSelf'])),
+      position: "".concat(getIn(theme, ['UTRating', 'labelBottomFirst', 'position'])),
+      right: "".concat(getIn(theme, ['UTRating', 'labelBottomFirst', 'right'])),
+      top: "".concat(getIn(theme, ['UTRating', 'labelBottomFirst', 'top'])),
+      width: "".concat(getIn(theme, ['UTRating', 'labelBottomFirst', 'width']))
+    },
+    labelBottomLast: {
+      alignSelf: "".concat(getIn(theme, ['UTRating', 'labelBottomLast', 'alignSelf'])),
+      position: "".concat(getIn(theme, ['UTRating', 'labelBottomLast', 'position'])),
+      right: "".concat(getIn(theme, ['UTRating', 'labelBottomLast', 'right'])),
+      top: "".concat(getIn(theme, ['UTRating', 'labelBottomLast', 'top'])),
+      width: "".concat(getIn(theme, ['UTRating', 'labelBottomLast', 'width']))
+    },
+    avatar: {
+      color: "".concat(getIn(theme, ['UTRating', 'avatar', 'color'], Colors.gray3), " !important")
+    },
+    container: {
+      justifyContent: "".concat(getIn(theme, ['UTRating', 'container', 'justifyContent'])),
+      pointerEvents: "".concat(getIn(theme, ['UTRating', 'container', 'pointerEvents']))
+    },
+    circleWithTextBottom: {
+      margin: "".concat(getIn(theme, ['UTRating', 'circleWithTextBottom', 'margin'])),
+      width: "".concat(getIn(theme, ['UTRating', 'circleWithTextBottom', 'width']))
+    },
+    title: {
+      fontWeight: "".concat(getIn(theme, ['UTRating', 'title', 'fontWeight'])),
+      marginBottom: "".concat(getIn(theme, ['UTRating', 'title', 'marginBottom'])),
+      textAlign: "".concat(getIn(theme, ['UTRating', 'title', 'textAlign']))
+    }
+  };
+};

package/dist/esm/components/UTRating/versions/V1/README.md

@@ -0,0 +1,44 @@
+# UTRating
+
+## Description
+
+`UTRating` is a configurable rating input component that enables users to easily provide feedback through visual indicators.
+
+## Props
+
+| Name                | Type      | Default | Description                                                                                               |
+| ------------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------  |
+| classNames          | object    |         | Custom CSS class names for styling the component.                                                         |
+| dataTestId          | string    |         | Unique identifier for testing purposes.                                                                   |
+| disabled            | bool      | false   | Indicates whether the input is disabled and cannot be interacted with.                                    |
+| error               | string    |         | Error message to display when validation fails or an issue occurs.                                        |
+| helpTextEnd         | string    |         | Additional help text displayed at the end of the input for user guidance.                                 |
+| helpTextStart       | string    |         | Additional help text displayed at the beginning of the input for user guidance.                           |
+| onChange            | func      |         | Callback function invoked when the input value changes.                                                   |
+| options             | array     |         | Array of options available for selection.                                                                 |
+| required            | bool      | false   | Indicates whether the input is mandatory for form submission.                                             |
+| title               | string    |         | Title for the input, providing context to the user.                                                       |
+| validations         | array     |         | Array of validation rules to be applied to the input value.                                               |
+| value               | string    |         | The current value of the input.                                                                           |
+| variant             | string    | `star`  | Defines the visual style component.                                                                       |
+
+
+### options
+
+`options` is an array of objects with a `value` and a `name` key. The values should be in the range of 0-10, except for the `faces` variant. In desktop view, all options are displayed in one row; in responsive view, they are broken into 2 rows if there are more than 5 options.
+
+### variant
+
+The value of `variant` must be one of the following:
+
+- `faces`: the options are represented as face icons. Option values should exclusively be between 1 and 5, values outside this range are not supported.
+- `star`: the options are represented as star icons.
+- `text`: the options are represented as the option's `text`.
+
+### Structure of Validations
+
+For detailed information about the structure of validations, please refer to the UTValidation component documentation.
+
+### Handling Errors
+
+Errors can be displayed below the text input using either the `error` prop or the `validations` prop.

package/dist/esm/components/UTRating/versions/V1/components/Option/index.js

@@ -0,0 +1,46 @@
+import { bool, func, object, string } from 'prop-types';
+import React from 'react';
+import { RATING_VARIANTS } from '../../constants';
+import UTButton from '../../../../../UTButton';
+import WithTheme from '../../../../../WithTheme';
+import { getIcon, getVariant } from './utils';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+const Option = _ref => {
+  let {
+    classes,
+    disabled,
+    error,
+    isSelected,
+    name,
+    onChange,
+    value,
+    variant,
+    wrapperStyle
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    style: wrapperStyle
+  }, /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      root: "".concat(styles.option, " ").concat(error ? classes.error : ''),
+      text: styles.text
+    },
+    colorTheme: isSelected ? 'primary' : 'secondary',
+    disabled: disabled,
+    Icon: getIcon(variant, value, isSelected),
+    onClick: () => onChange(value),
+    variant: getVariant(variant, isSelected)
+  }, RATING_VARIANTS.TEXT === variant ? name : null));
+};
+Option.propTypes = {
+  classes: object,
+  disabled: bool,
+  error: string,
+  isSelected: bool,
+  name: string,
+  onChange: func,
+  value: string,
+  variant: string,
+  wrapperStyle: object
+};
+export default WithTheme(retrieveStyle)(Option);

package/dist/esm/components/UTRating/versions/V1/components/Option/styles.module.scss

@@ -0,0 +1,9 @@
+.option {
+  border-width: 2px !important;
+  flex-grow: 1;
+  height: 48px;
+}
+
+.text {
+  font-size: 1.125rem !important
+}

package/dist/esm/components/UTRating/versions/V1/components/Option/theme.js

@@ -0,0 +1,10 @@
+export const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    error: {
+      borderColor: "".concat(theme.Palette.error['05'], " !important")
+    }
+  };
+};

package/dist/esm/components/UTRating/versions/V1/components/Option/utils.js

@@ -0,0 +1,13 @@
+import { RATING_VARIANTS } from '../../constants';
+export const getIcon = (variant, value, isSelected) => ({
+  [RATING_VARIANTS.TEXT]: null,
+  [RATING_VARIANTS.FACES]: {
+    1: 'IconMoodSad',
+    2: 'IconMoodConfuzed',
+    3: 'IconMoodEmpty',
+    4: 'IconMoodSmile',
+    5: 'IconMoodHappy'
+  }[value],
+  [RATING_VARIANTS.STAR]: isSelected ? 'IconStarFilled' : 'IconStar'
+})[variant];
+export const getVariant = (variant, isSelected) => !isSelected || variant === RATING_VARIANTS.STAR ? 'shadow' : 'outlined';

package/dist/esm/components/UTRating/versions/V1/constants.js

@@ -0,0 +1,5 @@
+export const RATING_VARIANTS = {
+  FACES: 'faces',
+  STAR: 'star',
+  TEXT: 'text'
+};

package/dist/esm/components/UTRating/versions/V1/index.js

@@ -0,0 +1,88 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useMemo } from 'react';
+import { func, string, bool, object, array } from 'prop-types';
+import UTLabel from '../../../UTLabel';
+import UTFieldLabel from '../../../UTFieldLabel';
+import { formatErrorToValidation } from '../../../UTValidation/utils';
+import UTValidation from '../../../UTValidation';
+import { useScreenSize } from '../../../../utils/useScreenSize';
+import styles from './styles.module.scss';
+import Option from './components/Option';
+import { RATING_VARIANTS } from './constants';
+const UTRating = _ref => {
+  let {
+    classNames = {},
+    dataTestId,
+    disabled,
+    error,
+    forceMultiRow,
+    helpTextEnd,
+    helpTextStart,
+    onChange,
+    options = [],
+    required,
+    title,
+    validations,
+    value,
+    variant = RATING_VARIANTS.STAR
+  } = _ref;
+  const {
+    isMobileOrTablet
+  } = useScreenSize();
+  const validationData = useMemo(() => validations || error && formatErrorToValidation(error), [error, validations]);
+  const valueIndex = options.map(_ref2 => {
+    let {
+      value: optionValue
+    } = _ref2;
+    return optionValue;
+  }).indexOf(value);
+  const isSelected = index => valueIndex !== -1 && variant === RATING_VARIANTS.STAR ? index <= valueIndex : index === valueIndex;
+  const wrapperStyle = {
+    boxSizing: 'border-box',
+    display: 'flex',
+    flex: (isMobileOrTablet || forceMultiRow) && options.length > 5 ? "0 0 calc(".concat(100 / Math.ceil(options.length / 2), "% - 4px)") : '1 '
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(classNames.container),
+    "data-testid": dataTestId
+  }, title && /*#__PURE__*/React.createElement(UTFieldLabel, {
+    required: required
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.optionsContainer, " ").concat(classNames.optionsContainer, " ").concat(isMobileOrTablet ? styles.responsive : '', " ").concat(forceMultiRow ? styles.forceMultiRow : '')
+  }, options.map((option, index) => /*#__PURE__*/React.createElement(Option, _extends({}, option, {
+    disabled: disabled,
+    error: error,
+    isSelected: isSelected(index),
+    key: option.value,
+    onChange: onChange,
+    variant: variant,
+    wrapperStyle: wrapperStyle
+  })))), helpTextStart && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.helpTextContainer, " ").concat(classNames.helpTextContainer)
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, helpTextStart), helpTextEnd && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, helpTextEnd)), validationData && /*#__PURE__*/React.createElement(UTValidation, {
+    validationData: validationData
+  }));
+};
+UTRating.propTypes = {
+  classNames: object,
+  dataTestId: string,
+  disabled: bool,
+  error: string,
+  forceMultiRow: bool,
+  helpTextEnd: string,
+  helpTextStart: string,
+  onChange: func,
+  options: array,
+  required: bool,
+  title: string,
+  validations: array,
+  value: string,
+  variant: string
+};
+export default UTRating;

package/dist/esm/components/UTRating/versions/V1/styles.module.scss

@@ -0,0 +1,28 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+  width: 100%;
+}
+
+.optionsContainer {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 4px;
+  width: 100%;
+}
+
+.helpTextContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.responsive {
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.forceMultiRow {
+  flex-wrap: wrap;
+}

package/dist/esm/components/UTRipple/Ripple.js

@@ -0,0 +1,60 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useState } from 'react';
+import { Transition } from 'react-transition-group';
+import { element, any } from 'prop-types';
+import styles from './styles.module.scss';
+const Ripple = _ref => {
+  let {
+    elem,
+    event,
+    ...other
+  } = _ref;
+  const [enter, setEnter] = useState(false);
+  const [leaving, setLeaving] = useState(false);
+  const handleEnter = () => setEnter(true);
+  const handleExit = () => {
+    setLeaving(true);
+  };
+  const rect = elem ? elem.getBoundingClientRect() : {
+    width: 0,
+    height: 0,
+    left: 0,
+    top: 0
+  };
+  let rippleX;
+  let rippleY;
+  if (event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
+    rippleX = Math.round(rect.width / 2);
+    rippleY = Math.round(rect.height / 2);
+  } else {
+    const clientX = event.clientX ? event.clientX : event.touches[0].clientX;
+    const clientY = event.clientY ? event.clientY : event.touches[0].clientY;
+    rippleX = Math.round(clientX - rect.left);
+    rippleY = Math.round(clientY - rect.top);
+  }
+  const sizeX = Math.max(Math.abs((elem ? elem.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
+  const sizeY = Math.max(Math.abs((elem ? elem.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
+  const rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);
+  const rippleStyles = {
+    width: rippleSize,
+    height: rippleSize,
+    top: -(rippleSize / 2) + rippleY,
+    left: -(rippleSize / 2) + rippleX
+  };
+  return /*#__PURE__*/React.createElement(Transition, _extends({
+    timeout: 500,
+    onEnter: handleEnter,
+    unmountOnExit: true,
+    onExit: handleExit
+  }, other), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(styles.ripple, " ").concat(enter && styles.rippleEnter),
+    style: rippleStyles
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(styles.child, " ").concat(leaving && styles.rippleExit)
+  })));
+};
+Ripple.propTypes = {
+  elem: element,
+  event: any
+};
+export default Ripple;

package/dist/esm/components/UTRipple/index.js

@@ -0,0 +1,44 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { TransitionGroup } from 'react-transition-group';
+import { bool } from 'prop-types';
+import { refType } from '../../types/commonTypes';
+import Ripple from './Ripple';
+import styles from './styles.module.scss';
+const UTRipple = _ref => {
+  let {
+    elem,
+    withRipple
+  } = _ref;
+  const [ripples, setRipples] = useState([]);
+  const setNewRipples = useCallback(event => {
+    setRipples(prevRipples => [...prevRipples, /*#__PURE__*/React.createElement(Ripple, {
+      event: event,
+      elem: elem,
+      key: Math.random()
+    })]);
+  }, [elem]);
+  const removeRipple = useCallback(() => setRipples(prevRipples => prevRipples.slice(1)), []);
+  useEffect(() => {
+    if (withRipple && elem) {
+      elem.addEventListener('mousedown', setNewRipples);
+      elem.addEventListener('mouseup', removeRipple);
+      elem.addEventListener('mouseleave', removeRipple);
+    }
+    return () => {
+      if (withRipple && elem) {
+        elem.removeEventListener('mousedown', setNewRipples);
+        elem.removeEventListener('mouseup', removeRipple);
+        elem.removeEventListener('mouseleave', removeRipple);
+      }
+    };
+  }, [elem, setNewRipples, removeRipple, withRipple]);
+  return /*#__PURE__*/React.createElement(TransitionGroup, {
+    component: "span",
+    className: styles.root
+  }, ripples);
+};
+UTRipple.propTypes = {
+  elem: refType,
+  withRipple: bool
+};
+export default UTRipple;