@zohodesk/dot 1.0.0-temp-187.22 → 1.0.0-temp-187.24

package/lib/AudioPlayer/__tests__/__snapshots__/AudioPlayer.spec.js.snap

@@ -1,1995 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AudioPlayer - Snapshot Render with a11y attributes 1`] = `
-<DocumentFragment>
-  <div
-    class="flex coldir"
-    data-id="AudioRange"
-    data-selector-id="container"
-    data-test-id="AudioRange"
-    tabindex="0"
-  >
-    <div
-      class="container flex rowdir vCenter"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <audio
-        class="audioHid"
-        controls=""
-        preload="auto"
-      >
-        <source
-          src="https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
-          type="audio/mpeg"
-        />
-      </audio>
-      <div
-        class="rightBox downloadBox boxLeftRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_playpause"
-          data-selector-id="container"
-          data-test-id="AudioRange_playpause"
-          data-title="Play"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-bcarr  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="timerBox shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="flex cover rowdir vCenter"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <div
-            class="container flex cover rowdir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            00:00:00
-          </div>
-        </div>
-      </div>
-      <div
-        class="dragtag disable grow basis shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="audioRangeContainer flex cover coldir"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <span
-            class="loading"
-          />
-          <input
-            class="input"
-            data-id="AudioRange"
-            max="0"
-            min="0"
-            step="1"
-            type="range"
-            value="0"
-          />
-        </div>
-      </div>
-      <div
-        class="rightBox downloadBox  shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_download"
-          data-selector-id="container"
-          data-test-id="AudioRange_download"
-          data-title="Download"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-download-new  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="closeBox boxRightRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_close"
-          data-selector-id="container"
-          data-test-id="AudioRange_close"
-          data-title="Close"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-cross  pauseIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`AudioPlayer - Snapshot Render with backwardStepInSec=10 1`] = `
-<DocumentFragment>
-  <div
-    class="flex coldir"
-    data-id="AudioRange"
-    data-selector-id="container"
-    data-test-id="AudioRange"
-    tabindex="0"
-  >
-    <div
-      class="container flex rowdir vCenter"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <audio
-        class="audioHid"
-        controls=""
-        preload="auto"
-      >
-        <source
-          src="https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
-          type="audio/mpeg"
-        />
-      </audio>
-      <div
-        class="rightBox downloadBox boxLeftRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_playpause"
-          data-selector-id="container"
-          data-test-id="AudioRange_playpause"
-          data-title="Play"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-bcarr  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="timerBox shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="flex cover rowdir vCenter"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <div
-            class="container flex cover rowdir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            00:00:00
-          </div>
-        </div>
-      </div>
-      <div
-        class="dragtag disable grow basis shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="audioRangeContainer flex cover coldir"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <span
-            class="loading"
-          />
-          <input
-            class="input"
-            data-id="AudioRange"
-            max="0"
-            min="0"
-            step="1"
-            type="range"
-            value="0"
-          />
-        </div>
-      </div>
-      <div
-        class="rightBox downloadBox  shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_download"
-          data-selector-id="container"
-          data-test-id="AudioRange_download"
-          data-title="Download"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-download-new  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="closeBox boxRightRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_close"
-          data-selector-id="container"
-          data-test-id="AudioRange_close"
-          data-title="Close"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-cross  pauseIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`AudioPlayer - Snapshot Render with customClass 1`] = `
-<DocumentFragment>
-  <div
-    class="my-audio-player flex coldir"
-    data-id="AudioRange"
-    data-selector-id="container"
-    data-test-id="AudioRange"
-    tabindex="0"
-  >
-    <div
-      class="container flex rowdir vCenter"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <audio
-        class="audioHid"
-        controls=""
-        preload="auto"
-      >
-        <source
-          src="https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
-          type="audio/mpeg"
-        />
-      </audio>
-      <div
-        class="rightBox downloadBox boxLeftRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_playpause"
-          data-selector-id="container"
-          data-test-id="AudioRange_playpause"
-          data-title="Play"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-bcarr  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="timerBox shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="flex cover rowdir vCenter"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <div
-            class="container flex cover rowdir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            00:00:00
-          </div>
-        </div>
-      </div>
-      <div
-        class="dragtag disable grow basis shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="audioRangeContainer flex cover coldir"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <span
-            class="loading"
-          />
-          <input
-            class="input"
-            data-id="AudioRange"
-            max="0"
-            min="0"
-            step="1"
-            type="range"
-            value="0"
-          />
-        </div>
-      </div>
-      <div
-        class="rightBox downloadBox  shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_download"
-          data-selector-id="container"
-          data-test-id="AudioRange_download"
-          data-title="Download"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-download-new  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="closeBox boxRightRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_close"
-          data-selector-id="container"
-          data-test-id="AudioRange_close"
-          data-title="Close"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-cross  pauseIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`AudioPlayer - Snapshot Render with customId and testId 1`] = `
-<DocumentFragment>
-  <div
-    class="flex coldir"
-    data-id="AudioRange"
-    data-selector-id="container"
-    data-test-id="AudioRange"
-    tabindex="0"
-  >
-    <div
-      class="container flex rowdir vCenter"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <audio
-        class="audioHid"
-        controls=""
-        preload="auto"
-      >
-        <source
-          src="https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
-          type="audio/mpeg"
-        />
-      </audio>
-      <div
-        class="rightBox downloadBox boxLeftRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_playpause"
-          data-selector-id="container"
-          data-test-id="AudioRange_playpause"
-          data-title="Play"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-bcarr  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="timerBox shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="flex cover rowdir vCenter"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <div
-            class="container flex cover rowdir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            00:00:00
-          </div>
-        </div>
-      </div>
-      <div
-        class="dragtag disable grow basis shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="audioRangeContainer flex cover coldir"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <span
-            class="loading"
-          />
-          <input
-            class="input"
-            data-id="AudioRange"
-            max="0"
-            min="0"
-            step="1"
-            type="range"
-            value="0"
-          />
-        </div>
-      </div>
-      <div
-        class="rightBox downloadBox  shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_download"
-          data-selector-id="container"
-          data-test-id="AudioRange_download"
-          data-title="Download"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-download-new  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="closeBox boxRightRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_close"
-          data-selector-id="container"
-          data-test-id="AudioRange_close"
-          data-title="Close"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-cross  pauseIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`AudioPlayer - Snapshot Render with default props 1`] = `
-<DocumentFragment>
-  <div
-    class="flex coldir"
-    data-id="AudioRange"
-    data-selector-id="container"
-    data-test-id="AudioRange"
-    tabindex="0"
-  >
-    <div
-      class="container flex rowdir vCenter"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <audio
-        class="audioHid"
-        controls=""
-        preload="auto"
-      >
-        <source
-          src="https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
-          type="audio/mpeg"
-        />
-      </audio>
-      <div
-        class="rightBox downloadBox boxLeftRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_playpause"
-          data-selector-id="container"
-          data-test-id="AudioRange_playpause"
-          data-title="Play"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-bcarr  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="timerBox shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="flex cover rowdir vCenter"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <div
-            class="container flex cover rowdir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            00:00:00
-          </div>
-        </div>
-      </div>
-      <div
-        class="dragtag disable grow basis shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="audioRangeContainer flex cover coldir"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <span
-            class="loading"
-          />
-          <input
-            class="input"
-            data-id="AudioRange"
-            max="0"
-            min="0"
-            step="1"
-            type="range"
-            value="0"
-          />
-        </div>
-      </div>
-      <div
-        class="rightBox downloadBox  shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_download"
-          data-selector-id="container"
-          data-test-id="AudioRange_download"
-          data-title="Download"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-download-new  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="closeBox boxRightRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_close"
-          data-selector-id="container"
-          data-test-id="AudioRange_close"
-          data-title="Close"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-cross  pauseIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`AudioPlayer - Snapshot Render with forwardStepInSec=10 1`] = `
-<DocumentFragment>
-  <div
-    class="flex coldir"
-    data-id="AudioRange"
-    data-selector-id="container"
-    data-test-id="AudioRange"
-    tabindex="0"
-  >
-    <div
-      class="container flex rowdir vCenter"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <audio
-        class="audioHid"
-        controls=""
-        preload="auto"
-      >
-        <source
-          src="https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
-          type="audio/mpeg"
-        />
-      </audio>
-      <div
-        class="rightBox downloadBox boxLeftRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_playpause"
-          data-selector-id="container"
-          data-test-id="AudioRange_playpause"
-          data-title="Play"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-bcarr  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="timerBox shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="flex cover rowdir vCenter"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <div
-            class="container flex cover rowdir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            00:00:00
-          </div>
-        </div>
-      </div>
-      <div
-        class="dragtag disable grow basis shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="audioRangeContainer flex cover coldir"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <span
-            class="loading"
-          />
-          <input
-            class="input"
-            data-id="AudioRange"
-            max="0"
-            min="0"
-            step="1"
-            type="range"
-            value="0"
-          />
-        </div>
-      </div>
-      <div
-        class="rightBox downloadBox  shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_download"
-          data-selector-id="container"
-          data-test-id="AudioRange_download"
-          data-title="Download"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-download-new  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="closeBox boxRightRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_close"
-          data-selector-id="container"
-          data-test-id="AudioRange_close"
-          data-title="Close"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-cross  pauseIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`AudioPlayer - Snapshot Render with i18nKeys 1`] = `
-<DocumentFragment>
-  <div
-    class="flex coldir"
-    data-id="AudioRange"
-    data-selector-id="container"
-    data-test-id="AudioRange"
-    tabindex="0"
-  >
-    <div
-      class="container flex rowdir vCenter"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <audio
-        class="audioHid"
-        controls=""
-        preload="auto"
-      >
-        <source
-          src="https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
-          type="audio/mpeg"
-        />
-      </audio>
-      <div
-        class="rightBox downloadBox boxLeftRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_playpause"
-          data-selector-id="container"
-          data-test-id="AudioRange_playpause"
-          data-title="Play"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-bcarr  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="timerBox shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="flex cover rowdir vCenter"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <div
-            class="container flex cover rowdir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            00:00:00
-          </div>
-        </div>
-      </div>
-      <div
-        class="dragtag disable grow basis shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="audioRangeContainer flex cover coldir"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <span
-            class="loading"
-          />
-          <input
-            class="input"
-            data-id="AudioRange"
-            max="0"
-            min="0"
-            step="1"
-            type="range"
-            value="0"
-          />
-        </div>
-      </div>
-      <div
-        class="rightBox downloadBox  shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_download"
-          data-selector-id="container"
-          data-test-id="AudioRange_download"
-          data-title="Download"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-download-new  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="closeBox boxRightRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_close"
-          data-selector-id="container"
-          data-test-id="AudioRange_close"
-          data-title="Close"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-cross  pauseIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`AudioPlayer - Snapshot Render with isPlay=true 1`] = `
-<DocumentFragment>
-  <div
-    class="flex coldir"
-    data-id="AudioRange"
-    data-selector-id="container"
-    data-test-id="AudioRange"
-    tabindex="0"
-  >
-    <div
-      class="container flex rowdir vCenter"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <audio
-        class="audioHid"
-        controls=""
-        preload="auto"
-      >
-        <source
-          src="https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
-          type="audio/mpeg"
-        />
-      </audio>
-      <div
-        class="rightBox downloadBox boxLeftRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_playpause"
-          data-selector-id="container"
-          data-test-id="AudioRange_playpause"
-          data-title="Pause"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-comment-timer-pause  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="timerBox shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="flex cover rowdir vCenter"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <div
-            class="container flex cover rowdir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            00:00:00
-          </div>
-        </div>
-      </div>
-      <div
-        class="dragtag disable grow basis shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="audioRangeContainer flex cover coldir"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <span
-            class="loading"
-          />
-          <input
-            class="input"
-            data-id="AudioRange"
-            max="0"
-            min="0"
-            step="1"
-            type="range"
-            value="0"
-          />
-        </div>
-      </div>
-      <div
-        class="rightBox downloadBox  shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_download"
-          data-selector-id="container"
-          data-test-id="AudioRange_download"
-          data-title="Download"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-download-new  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="closeBox boxRightRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_close"
-          data-selector-id="container"
-          data-test-id="AudioRange_close"
-          data-title="Close"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-cross  pauseIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`AudioPlayer - Snapshot Render with needClose=false 1`] = `
-<DocumentFragment>
-  <div
-    class="flex coldir"
-    data-id="AudioRange"
-    data-selector-id="container"
-    data-test-id="AudioRange"
-    tabindex="0"
-  >
-    <div
-      class="container flex rowdir vCenter"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <audio
-        class="audioHid"
-        controls=""
-        preload="auto"
-      >
-        <source
-          src="https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
-          type="audio/mpeg"
-        />
-      </audio>
-      <div
-        class="rightBox downloadBox boxLeftRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_playpause"
-          data-selector-id="container"
-          data-test-id="AudioRange_playpause"
-          data-title="Play"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-bcarr  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="timerBox shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="flex cover rowdir vCenter"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <div
-            class="container flex cover rowdir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            00:00:00
-          </div>
-        </div>
-      </div>
-      <div
-        class="dragtag disable grow basis shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="audioRangeContainer flex cover coldir"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <span
-            class="loading"
-          />
-          <input
-            class="input"
-            data-id="AudioRange"
-            max="0"
-            min="0"
-            step="1"
-            type="range"
-            value="0"
-          />
-        </div>
-      </div>
-      <div
-        class="rightBox downloadBox boxRightRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_download"
-          data-selector-id="container"
-          data-test-id="AudioRange_download"
-          data-title="Download"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-download-new  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`AudioPlayer - Snapshot Render with needDownload=false 1`] = `
-<DocumentFragment>
-  <div
-    class="flex coldir"
-    data-id="AudioRange"
-    data-selector-id="container"
-    data-test-id="AudioRange"
-    tabindex="0"
-  >
-    <div
-      class="container flex rowdir vCenter"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <audio
-        class="audioHid"
-        controls=""
-        preload="auto"
-      >
-        <source
-          src="https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
-          type="audio/mpeg"
-        />
-      </audio>
-      <div
-        class="rightBox downloadBox boxLeftRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_playpause"
-          data-selector-id="container"
-          data-test-id="AudioRange_playpause"
-          data-title="Play"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-bcarr  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="timerBox shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="flex cover rowdir vCenter"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <div
-            class="container flex cover rowdir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            00:00:00
-          </div>
-        </div>
-      </div>
-      <div
-        class="dragtag disable grow basis shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="audioRangeContainer flex cover coldir"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <span
-            class="loading"
-          />
-          <input
-            class="input"
-            data-id="AudioRange"
-            max="0"
-            min="0"
-            step="1"
-            type="range"
-            value="0"
-          />
-        </div>
-      </div>
-      <div
-        class="closeBox boxRightRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_close"
-          data-selector-id="container"
-          data-test-id="AudioRange_close"
-          data-title="Close"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-cross  pauseIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`AudioPlayer - Snapshot Render with needMuteIcon=true 1`] = `
-<DocumentFragment>
-  <div
-    class="flex coldir"
-    data-id="AudioRange"
-    data-selector-id="container"
-    data-test-id="AudioRange"
-    tabindex="0"
-  >
-    <div
-      class="container flex rowdir vCenter"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <audio
-        class="audioHid"
-        controls=""
-        preload="auto"
-      >
-        <source
-          src="https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
-          type="audio/mpeg"
-        />
-      </audio>
-      <div
-        class="rightBox downloadBox boxLeftRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_playpause"
-          data-selector-id="container"
-          data-test-id="AudioRange_playpause"
-          data-title="Play"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-bcarr  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="timerBox shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="flex cover rowdir vCenter"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <div
-            class="container flex cover rowdir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            00:00:00
-          </div>
-        </div>
-      </div>
-      <div
-        class="dragtag disable grow basis shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="audioRangeContainer flex cover coldir"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <span
-            class="loading"
-          />
-          <input
-            class="input"
-            data-id="AudioRange"
-            max="0"
-            min="0"
-            step="1"
-            type="range"
-            value="0"
-          />
-        </div>
-      </div>
-      <div
-        class="rightBox downloadBox  shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_download"
-          data-selector-id="container"
-          data-test-id="AudioRange_download"
-          data-title="Download"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-download-new  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="rightBox downloadBox  shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_muteUnmute"
-          data-selector-id="container"
-          data-test-id="AudioRange_muteUnmute"
-          data-title="Mute"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-kb-catlogo-volume  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="closeBox boxRightRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_close"
-          data-selector-id="container"
-          data-test-id="AudioRange_close"
-          data-title="Close"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-cross  pauseIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`AudioPlayer - Snapshot Render with range=50 1`] = `
-<DocumentFragment>
-  <div
-    class="flex coldir"
-    data-id="AudioRange"
-    data-selector-id="container"
-    data-test-id="AudioRange"
-    tabindex="0"
-  >
-    <div
-      class="container flex rowdir vCenter"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <audio
-        class="audioHid"
-        controls=""
-        preload="auto"
-      >
-        <source
-          src="https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
-          type="audio/mpeg"
-        />
-      </audio>
-      <div
-        class="rightBox downloadBox boxLeftRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_playpause"
-          data-selector-id="container"
-          data-test-id="AudioRange_playpause"
-          data-title="Play"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-bcarr  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="timerBox shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="flex cover rowdir vCenter"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <div
-            class="container flex cover rowdir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            00:00:00
-          </div>
-        </div>
-      </div>
-      <div
-        class="dragtag disable grow basis shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="audioRangeContainer flex cover coldir"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <span
-            class="loading"
-          />
-          <input
-            class="input"
-            data-id="AudioRange"
-            max="0"
-            min="0"
-            step="1"
-            type="range"
-            value="0"
-          />
-        </div>
-      </div>
-      <div
-        class="rightBox downloadBox  shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_download"
-          data-selector-id="container"
-          data-test-id="AudioRange_download"
-          data-title="Download"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-download-new  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="closeBox boxRightRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_close"
-          data-selector-id="container"
-          data-test-id="AudioRange_close"
-          data-title="Close"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-cross  pauseIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`AudioPlayer - Snapshot Render with tag attributes 1`] = `
-<DocumentFragment>
-  <div
-    class="flex coldir"
-    data-id="AudioRange"
-    data-selector-id="container"
-    data-test-id="AudioRange"
-    tabindex="0"
-  >
-    <div
-      class="container flex rowdir vCenter"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <audio
-        class="audioHid"
-        controls=""
-        preload="auto"
-      >
-        <source
-          src="https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
-          type="audio/mpeg"
-        />
-      </audio>
-      <div
-        class="rightBox downloadBox boxLeftRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_playpause"
-          data-selector-id="container"
-          data-test-id="AudioRange_playpause"
-          data-title="Play"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-bcarr  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="timerBox shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="flex cover rowdir vCenter"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <div
-            class="container flex cover rowdir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            00:00:00
-          </div>
-        </div>
-      </div>
-      <div
-        class="dragtag disable grow basis shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="audioRangeContainer flex cover coldir"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <span
-            class="loading"
-          />
-          <input
-            class="input"
-            data-id="AudioRange"
-            max="0"
-            min="0"
-            step="1"
-            type="range"
-            value="0"
-          />
-        </div>
-      </div>
-      <div
-        class="rightBox downloadBox  shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_download"
-          data-selector-id="container"
-          data-test-id="AudioRange_download"
-          data-title="Download"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-download-new  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="closeBox boxRightRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_close"
-          data-selector-id="container"
-          data-test-id="AudioRange_close"
-          data-title="Close"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-cross  pauseIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`AudioPlayer - Snapshot Render with timerFormat=ss:mm 1`] = `
-<DocumentFragment>
-  <div
-    class="flex coldir"
-    data-id="AudioRange"
-    data-selector-id="container"
-    data-test-id="AudioRange"
-    tabindex="0"
-  >
-    <div
-      class="container flex rowdir vCenter"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <audio
-        class="audioHid"
-        controls=""
-        preload="auto"
-      >
-        <source
-          src="https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
-          type="audio/mpeg"
-        />
-      </audio>
-      <div
-        class="rightBox downloadBox boxLeftRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_playpause"
-          data-selector-id="container"
-          data-test-id="AudioRange_playpause"
-          data-title="Play"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-bcarr  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="timerBox shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="flex cover rowdir vCenter"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <div
-            class="container flex cover rowdir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            00:00:00
-          </div>
-        </div>
-      </div>
-      <div
-        class="dragtag disable grow basis shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="audioRangeContainer flex cover coldir"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        >
-          <span
-            class="loading"
-          />
-          <input
-            class="input"
-            data-id="AudioRange"
-            max="0"
-            min="0"
-            step="1"
-            type="range"
-            value="0"
-          />
-        </div>
-      </div>
-      <div
-        class="rightBox downloadBox  shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_download"
-          data-selector-id="container"
-          data-test-id="AudioRange_download"
-          data-title="Download"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-download-new  downloadIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-      <div
-        class="closeBox boxRightRadius shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="disable flex cover coldir both"
-          data-id="AudioRange_close"
-          data-selector-id="container"
-          data-test-id="AudioRange_close"
-          data-title="Close"
-        >
-          <i
-            aria-hidden="true"
-            class="zd_font_icons basic icon-cross  pauseIcon iconColor  "
-            data-id="fontIcon"
-            data-selector-id="fontIcon"
-            data-test-id="fontIcon"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;