@zohodesk/dot 1.7.22 → 1.7.24

package/README.md

@@ -2,6 +2,16 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.7.24
+
+- **Timer**
+  - timer_default_text css variable added.
+
+# 1.7.23
+
+- introduced AudioPlayer & Timer comopnent.
+
+
 # 1.7.22
 
 - **useDragger**

package/assets/Appearance/dark/mode/Dot_DarkMode.module.css

@@ -34,6 +34,16 @@
 	--zdt_attachment_download_hover_bg: var(--zdt_cta_grey_35_bg);
 	--zdt_avataruser_delete_text: hsla(217, 23.08%, calc(17.84% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* audio player */
+	--zdt_audioplayer_default_bg: var(--zdt_cta_grey_15_bg);
+	--zdt_audioplayer_line_text: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_audioplayer_input_bg: var(--zdt_cta_grey_35_bg);
+	--zdt_audioplayer_pauseicon_text: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_audioplayer_loading_bg: var(--zdtm_cta_primary_bg_default_inverse_lower);
+	
+	/* timer */
+	--zdt_timer_default_text: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
 	/* avatar close */
 	--zdt_avatarclose_pop_bg: hsla(0, 0.00%, calc(0.00% + var(--zdc_default)), calc( 0.75 + var(--zdc_alpha_high)));
 	--zdt_avatarclose_pop_text: hsla(30, 1.64%, calc(76.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/mode/Dot_LightMode.module.css

@@ -34,6 +34,16 @@
 	--zdt_attachment_download_hover_bg: var(--zdt_cta_grey_35_bg);
 	--zdt_avataruser_delete_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* audio player */
+	--zdt_audioplayer_default_bg: var(--zdt_cta_grey_15_bg);
+	--zdt_audioplayer_line_text: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_audioplayer_input_bg: var(--zdt_cta_grey_35_bg);
+	--zdt_audioplayer_pauseicon_text: hsla(217, 25.93%, calc(15.88% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_audioplayer_loading_bg: var(--zdtm_cta_primary_bg_default_inverse_lower);
+	
+	/* timer */
+	--zdt_timer_default_text: hsla(217, 25.93%, calc(15.88% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
 	/* avatar close */
 	--zdt_avatarclose_pop_bg: hsla(0, 0.00%, calc(0.00% + var(--zdc_default)), calc( 0.75 + var(--zdc_alpha_high)));
 	--zdt_avatarclose_pop_text: hsla(30, 1.64%, calc(76.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css

@@ -34,6 +34,16 @@
 	--zdt_attachment_download_hover_bg: var(--zdt_cta_grey_35_bg);
 	--zdt_avataruser_delete_text: hsla(0, 0.00%, calc(12.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
+	/* audio player */
+	--zdt_audioplayer_default_bg: var(--zdt_cta_grey_15_bg);
+	--zdt_audioplayer_line_text: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_audioplayer_input_bg: var(--zdt_cta_grey_35_bg);
+	--zdt_audioplayer_pauseicon_text: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_audioplayer_loading_bg: var(--zdtm_cta_primary_bg_default_inverse_lower);
+	
+	/* timer */
+	--zdt_timer_default_text: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
 	/* avatar close */
 	--zdt_avatarclose_pop_bg: hsla(0, 0.00%, calc(0.00% + var(--zdc_default)), calc( 0.75 + var(--zdc_alpha_high)));
 	--zdt_avatarclose_pop_text: hsla(30, 1.64%, calc(76.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/es/AudioPlayer/AudioPlayer.js

@@ -0,0 +1,580 @@
+import React from 'react';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import Timer from "./Timer/Timer";
+import Icon from '@zohodesk/icons/lib/Icon';
+import { AudioPlayer_propTypes } from "./propTypes/propTypes";
+import { AudioPlayer_defaultProps } from "./propTypes/defaultProps";
+import { openInNewTabWithNoopener } from "./utils/utils";
+import { getExtensionFromFileName } from "./../AttachmentViewer/Attachment";
+import style from "./AudioPlayer.module.css";
+export default class AudioPlayer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.audioPlayer = null;
+    this.removeEventListeners = this.removeEventListeners.bind(this);
+    this.setAudioPlayerRef = this.setAudioPlayerRef.bind(this);
+  }
+
+  componentDidMount() {
+    const {
+      AudioPlayerChild
+    } = this.refs;
+    this.audioPlayer.addEventListener('keydown', AudioPlayerChild.handleKeyDown);
+  }
+
+  componentWillUnmount() {
+    this.removeEventListeners();
+  }
+
+  removeEventListeners() {
+    const {
+      AudioPlayerChild
+    } = this.refs;
+    this.audioPlayer.removeEventListener('keydown', AudioPlayerChild.handleKeyDown);
+  }
+
+  setAudioPlayerRef(ele) {
+    this.audioPlayer = ele;
+  }
+
+  render() {
+    const {
+      id,
+      isPlay,
+      onClose,
+      src,
+      timerFormat,
+      forwardStepInSec,
+      backwardStepInSec,
+      getAudioDuration,
+      needClose,
+      needDownload,
+      needMuteIcon,
+      onPlay,
+      onPause,
+      onDownloading,
+      onAudioSeeking,
+      onAudioLoading,
+      onError,
+      onMuteUnmute,
+      duration,
+      i18nKeys,
+      dataId,
+      customClass,
+      range
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      dataId: dataId,
+      eleRef: this.setAudioPlayerRef,
+      tabIndex: 0,
+      isCover: false,
+      className: `${customClass}`
+    }, /*#__PURE__*/React.createElement(AudioPlayerChild, {
+      ref: "AudioPlayerChild",
+      id: id,
+      src: src,
+      isPlay: isPlay,
+      onClose: onClose,
+      timerFormat: timerFormat,
+      duration: duration,
+      forwardStepInSec: forwardStepInSec,
+      backwardStepInSec: backwardStepInSec,
+      getAudioDuration: getAudioDuration,
+      needClose: needClose,
+      needDownload: needDownload,
+      needMuteIcon: needMuteIcon,
+      onPlay: onPlay,
+      onPause: onPause,
+      onDownloading: onDownloading,
+      onAudioSeeking: onAudioSeeking,
+      onAudioLoading: onAudioLoading,
+      onError: onError,
+      onMuteUnmute: onMuteUnmute,
+      i18nKeys: i18nKeys,
+      dataId: dataId,
+      range: range
+    }));
+  }
+
+}
+AudioPlayer.defaultProps = AudioPlayer_defaultProps;
+AudioPlayer.propTypes = AudioPlayer_propTypes;
+
+class AudioPlayerChild extends React.Component {
+  constructor(props) {
+    super(props);
+    this.audio = null;
+    this.intervalId = props.intervalId || '';
+    this.state = {
+      isPlay: props.isPlay,
+      currentHour: '00',
+      currentMinute: '00',
+      currentSecond: '00',
+      sliderRangeValue: 0,
+      audioHours: '00',
+      audioMinutes: '00',
+      audioSeconds: '00',
+      overallSeconds: 0,
+      minValue: 0,
+      step: '1',
+      audioType: 'audio/mpeg',
+      isMuted: false,
+      disableControlIcons: true,
+      isShowDuration: false,
+      disableRangeSlider: false,
+      loadingRange: props.range || 0
+    }; // Bind all methods
+
+    this.getAudioDetails = this.getAudioDetails.bind(this);
+    this.onPlayAudio = this.onPlayAudio.bind(this);
+    this.onPauseAudio = this.onPauseAudio.bind(this);
+    this.togglePlayPause = this.togglePlayPause.bind(this);
+    this.updatePlayer = this.updatePlayer.bind(this);
+    this.updateRangeValue = this.updateRangeValue.bind(this);
+    this.updateTimerValues = this.updateTimerValues.bind(this);
+    this.togglePlayer = this.togglePlayer.bind(this);
+    this.getAudioDurationDetails = this.getAudioDurationDetails.bind(this);
+    this.browserCompatible = this.browserCompatible.bind(this);
+    this.onMuteUnmute = this.onMuteUnmute.bind(this);
+    this.handleAudioSeeking = this.handleAudioSeeking.bind(this);
+    this.handleError = this.handleError.bind(this);
+    this.handleAudioLoading = this.handleAudioLoading.bind(this);
+    this.removeEventListeners = this.removeEventListeners.bind(this);
+    this.downloadFile = this.downloadFile.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleClosePlayer = this.handleClosePlayer.bind(this);
+    this.updateRange = this.updateRange.bind(this);
+    this.setInputRangeRef = this.setInputRangeRef.bind(this);
+    this.removeEvent = this.removeEvent.bind(this);
+  }
+
+  componentDidMount() {
+    this.audio.addEventListener('loadedmetadata', this.getAudioDetails);
+    this.audio.addEventListener('canplay', this.browserCompatible);
+    this.audio.addEventListener('seeking', this.handleAudioSeeking);
+    this.audio.addEventListener('waiting', this.handleAudioLoading);
+    this.audio.addEventListener('error', this.handleError);
+    this.audio.addEventListener('ended', this.removeEvent);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.isPlay !== this.props.isPlay && this.props.isPlay === false) {
+      this.onPauseAudio();
+    }
+  }
+
+  componentWillUnmount() {
+    this.audio.pause();
+    clearInterval(this.intervalId);
+    this.removeEventListeners();
+  }
+
+  removeEventListeners() {
+    this.audio.removeEventListener('loadedmetadata', this.getAudioDetails);
+    this.audio.removeEventListener('canplay', this.browserCompatible);
+    this.audio.removeEventListener('seeking', this.handleAudioSeeking);
+    this.audio.removeEventListener('waiting', this.handleAudioLoading);
+    this.audio.removeEventListener('error', this.handleError);
+    this.audio.removeEventListener('ended', this.removeEvent);
+  }
+
+  removeEvent() {
+    setTimeout(this.onPauseAudio, 1000);
+  }
+
+  getAudioDetails(event) {
+    const {
+      getAudioDuration,
+      src,
+      duration: fallbackDuration
+    } = this.props;
+    const audioType = getExtensionFromFileName(src);
+    let durationCalc = Math.ceil(event.target.duration);
+    const isDurationValid = Number.isFinite(durationCalc) && !Number.isNaN(durationCalc);
+    durationCalc = isDurationValid ? durationCalc : fallbackDuration ? fallbackDuration : 0;
+    const {
+      hours,
+      minutes,
+      seconds
+    } = this.getAudioDurationDetails(durationCalc);
+    const isShowDuration = isDurationValid || fallbackDuration !== undefined;
+    this.setState({
+      overallSeconds: durationCalc,
+      audioHours: hours,
+      audioMinutes: minutes,
+      audioSeconds: seconds,
+      audioType,
+      disableControlIcons: false,
+      isShowDuration,
+      disableRangeSlider: !isDurationValid
+    });
+    getAudioDuration && getAudioDuration(hours, minutes, seconds);
+  }
+
+  getAudioDurationDetails(valueInSec) {
+    let hours = 0,
+        minutes = 0,
+        seconds = 0;
+
+    if (valueInSec > 0) {
+      hours = Math.floor(valueInSec / 3600);
+      valueInSec %= 3600;
+      minutes = Math.floor(valueInSec / 60);
+      seconds = Math.floor(valueInSec % 60);
+    }
+
+    return {
+      hours: hours <= 9 ? `0${hours}` : `${hours}`,
+      minutes: minutes <= 9 ? `0${minutes}` : `${minutes}`,
+      seconds: seconds <= 9 ? `0${seconds}` : `${seconds}`
+    };
+  }
+
+  togglePlayPause() {
+    this.state.isPlay ? this.onPauseAudio() : this.onPlayAudio();
+  }
+
+  onPlayAudio() {
+    const {
+      onPlay,
+      id
+    } = this.props;
+    const {
+      sliderRangeValue,
+      overallSeconds
+    } = this.state;
+    const isRestart = sliderRangeValue === overallSeconds;
+    this.audio.play();
+    this.intervalId = setInterval(this.updatePlayer, 1000);
+    this.setState({
+      isPlay: true,
+      isRestart
+    });
+    onPlay && onPlay(id, 'playing');
+  }
+
+  onPauseAudio() {
+    const {
+      onPause,
+      id
+    } = this.props;
+    this.audio.pause();
+    clearInterval(this.intervalId);
+    this.setState({
+      isPlay: false
+    });
+    onPause && onPause(id, 'paused');
+  }
+
+  handleClosePlayer() {
+    const {
+      onClose,
+      id
+    } = this.props;
+    this.togglePlayer();
+    this.onPauseAudio();
+    onClose && onClose(id, 'closed');
+  }
+
+  handleAudioSeeking() {
+    const {
+      onAudioSeeking
+    } = this.props;
+    onAudioSeeking && onAudioSeeking(this.audio.seeking);
+  }
+
+  handleAudioLoading() {
+    const {
+      onAudioLoading
+    } = this.props;
+    onAudioLoading && onAudioLoading();
+  }
+
+  handleError() {
+    const {
+      onError
+    } = this.props;
+    onError && onError(this.audio.error.code);
+  }
+
+  browserCompatible(playable) {
+    if (playable === '') alert('Your browser is unable to play the audio');
+  }
+
+  onMuteUnmute(e) {
+    e && e.preventDefault();
+    const {
+      isMuted
+    } = this.state;
+    this.audio.muted = !isMuted;
+    const {
+      onMuteUnmute
+    } = this.props;
+    this.setState({
+      isMuted: !isMuted
+    });
+    onMuteUnmute && onMuteUnmute(!isMuted);
+  }
+
+  setInputRangeRef(ele) {
+    const {
+      getRef
+    } = this.props;
+    this.inputRange = ele;
+    getRef && getRef(ele);
+  }
+
+  updateRange(e) {
+    this.props.updateRange(e.target.value);
+  }
+
+  updatePlayer(e) {
+    this.updateRangeValue(e?.target?.value, this.updateTimerValues);
+  }
+
+  updateRangeValue(value, afterUpdateCallback) {
+    let {
+      isPlay,
+      sliderRangeValue,
+      overallSeconds,
+      isRestart
+    } = this.state;
+    sliderRangeValue = Math.max(0, sliderRangeValue);
+    let rangeValue = value || ++sliderRangeValue;
+
+    if (rangeValue > overallSeconds && !isRestart) {
+      if (isPlay) {
+        this.audio.pause();
+        this.setState({
+          isPlay: false
+        });
+      }
+
+      this.audio.currentTime = overallSeconds;
+      clearInterval(this.intervalId);
+      rangeValue = overallSeconds;
+    }
+
+    if (isRestart) {
+      this.audio.currentTime = 0;
+      rangeValue = 0;
+      this.setState({
+        sliderRangeValue: rangeValue,
+        isRestart: false,
+        isPlay: true
+      });
+    }
+
+    if (rangeValue <= overallSeconds) {
+      value && (this.audio.currentTime = value);
+      this.setState({
+        sliderRangeValue: rangeValue
+      }, () => afterUpdateCallback(rangeValue));
+    }
+  }
+
+  updateTimerValues(sliderRangeValue) {
+    const {
+      hours,
+      minutes,
+      seconds
+    } = this.getAudioDurationDetails(Number(sliderRangeValue));
+    this.setState({
+      currentHour: hours,
+      currentMinute: minutes,
+      currentSecond: seconds
+    });
+  }
+
+  togglePlayer() {
+    this.audio.pause();
+    this.setState({
+      isPlay: false
+    });
+  }
+
+  handleKeyDown(e) {
+    const {
+      keyCode
+    } = e;
+    const {
+      sliderRangeValue
+    } = this.state;
+    const {
+      forwardStepInSec,
+      backwardStepInSec
+    } = this.props;
+    if (keyCode === 32) this.togglePlayPause();else if (keyCode === 39) this.updatePlayer(sliderRangeValue + forwardStepInSec);else if (keyCode === 37) this.updatePlayer(sliderRangeValue - backwardStepInSec);else if (keyCode === 27) this.togglePlayer();
+  }
+
+  downloadFile() {
+    const {
+      onDownloading,
+      src,
+      requestOptions
+    } = this.props;
+
+    const getFileName = (url, ext) => {
+      const parts = url.split('/');
+      const name = parts[parts.length - 1].split('?')[0];
+      return name.includes('.') ? name : `${name}.${ext}`;
+    };
+
+    const reqOptions = requestOptions || {
+      credentials: 'include'
+    };
+    fetch(src, reqOptions).then(resp => resp.blob()).then(blob => {
+      const url = window.URL.createObjectURL(blob);
+      const extnsn = blob.type.split('-')[1] || blob.type.split('/')[1];
+      const fileName = getFileName(src, extnsn);
+      const a = document.createElement('a');
+      a.style.display = 'none';
+      a.href = url;
+      a.download = fileName;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+    }).catch(() => openInNewTabWithNoopener(src));
+    onDownloading && onDownloading();
+  }
+
+  render() {
+    const {
+      isPlay,
+      currentHour,
+      currentMinute,
+      currentSecond,
+      audioHours,
+      audioMinutes,
+      audioSeconds,
+      isMuted,
+      disableControlIcons,
+      isShowDuration,
+      disableRangeSlider,
+      sliderRangeValue,
+      overallSeconds,
+      minValue,
+      step
+    } = this.state;
+    const {
+      src,
+      needDownload,
+      needClose,
+      needMuteIcon,
+      id,
+      i18nKeys,
+      dataId
+    } = this.props;
+    const timerFormat = audioHours ? 'hh:mm:ss' : 'mm:ss';
+    const loadingRange = (sliderRangeValue - minValue) * 100 / (overallSeconds - minValue);
+    const {
+      playTitle = 'Play',
+      pauseTitle = 'Pause',
+      downloadTitle = 'Download',
+      closeTitle = 'Close',
+      muteTitle = 'Mute',
+      unmuteTitle = 'Unmute'
+    } = i18nKeys;
+    return /*#__PURE__*/React.createElement(Container, {
+      align: "vertical",
+      alignBox: "row",
+      className: style.container,
+      isCover: false
+    }, /*#__PURE__*/React.createElement("audio", {
+      id: id,
+      controls: true,
+      preload: "auto",
+      className: style.audioHid,
+      ref: ele => this.audio = ele
+    }, /*#__PURE__*/React.createElement("source", {
+      src: src,
+      type: this.state.audioType
+    })), /*#__PURE__*/React.createElement(Box, {
+      className: `${style.rightBox} ${style.downloadBox} ${style.boxLeftRadius}`
+    }, /*#__PURE__*/React.createElement(Container, {
+      className: disableControlIcons ? style.disable : '',
+      align: "both",
+      onClick: this.togglePlayPause,
+      "data-title": isPlay ? pauseTitle : playTitle,
+      dataId: `${dataId}_playpause`
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: isPlay ? 'ZD-commentTimerPause' : 'ZD-bcarr',
+      iconClass: `${style.downloadIcon} ${style.iconColor}`
+    }))), /*#__PURE__*/React.createElement(Box, {
+      className: style.timerBox
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "vertical",
+      alignBox: "row"
+    }, /*#__PURE__*/React.createElement(Timer, {
+      timerFormat: timerFormat,
+      hour: currentHour,
+      minute: currentMinute,
+      second: currentSecond,
+      separator: "colon",
+      className: style.iconColor
+    }), isShowDuration && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+      className: style.line
+    }, /*#__PURE__*/React.createElement("span", null, "\xA0"), "/", /*#__PURE__*/React.createElement("span", null, "\xA0")), /*#__PURE__*/React.createElement(Timer, {
+      timerFormat: timerFormat,
+      hour: audioHours,
+      minute: audioMinutes,
+      second: audioSeconds,
+      separator: "colon",
+      className: style.iconColor
+    })))), /*#__PURE__*/React.createElement(Box, {
+      className: `${style.dragtag} ${disableControlIcons || disableRangeSlider ? style.disable : style.cursor}`,
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      className: style.audioRangeContainer
+    }, /*#__PURE__*/React.createElement("span", {
+      className: style.loading,
+      style: {
+        width: `${loadingRange}%`
+      }
+    }), /*#__PURE__*/React.createElement("input", {
+      "data-id": dataId,
+      ref: this.setInputRangeRef,
+      className: style.input,
+      type: "range",
+      value: sliderRangeValue,
+      min: minValue,
+      max: overallSeconds,
+      step: step,
+      onChange: this.updatePlayer
+    }))), needDownload && /*#__PURE__*/React.createElement(Box, {
+      className: `${style.rightBox} ${style.downloadBox} ${!needClose && !needMuteIcon ? style.boxRightRadius : ''}`
+    }, /*#__PURE__*/React.createElement(Container, {
+      className: disableControlIcons ? style.disable : '',
+      align: "both",
+      onClick: this.downloadFile,
+      "data-title": downloadTitle,
+      dataId: `${dataId}_download`
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-downloadNew",
+      iconClass: `${style.downloadIcon} ${style.iconColor}`
+    }))), needMuteIcon && /*#__PURE__*/React.createElement(Box, {
+      className: `${style.rightBox} ${style.downloadBox} ${!needClose ? style.boxRightRadius : ''}`
+    }, /*#__PURE__*/React.createElement(Container, {
+      className: disableControlIcons ? style.disable : '',
+      align: "both",
+      onClick: this.onMuteUnmute,
+      "data-title": isMuted ? unmuteTitle : muteTitle,
+      dataId: `${dataId}_muteUnmute`
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: isMuted ? 'ZD-mute1New' : 'ZD-kbcatlogovolume',
+      iconClass: `${style.downloadIcon} ${style.iconColor}`
+    }))), needClose && /*#__PURE__*/React.createElement(Box, {
+      className: `${style.closeBox} ${style.boxRightRadius}`
+    }, /*#__PURE__*/React.createElement(Container, {
+      className: disableControlIcons ? style.disable : '',
+      align: "both",
+      onClick: this.handleClosePlayer,
+      "data-title": closeTitle,
+      dataId: `${dataId}_close`
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-cross",
+      iconClass: `${style.pauseIcon} ${style.iconColor}`
+    }))));
+  }
+
+}