@realsee/dnalogel 2.1.0-alpha.3 → 2.1.0-alpha.5

package/libs/PanoSpatialTagPlugin/Components/tag.svelte

@@ -0,0 +1,292 @@
+<script>import { onMount, onDestroy, afterUpdate } from 'svelte';
+import '../typings';
+import { currentTarget } from '../store';
+export let id;
+export let upsideDown;
+export let content;
+export let contentZoom;
+export let lineWidthZoom;
+export let lineHeightZoom;
+export let destroying = false;
+export let folded;
+export let dispose;
+export let events;
+export let hooks;
+let contentWidth = 0;
+let contentHeight = 0;
+let contentDom;
+let show;
+let timeoutId = setTimeout(() => {
+    if (!folded)
+        show = true;
+    timeoutId = undefined;
+}, 100);
+const handleClickContent = event => {
+    const eventsName = Object.keys(events);
+    let node = event.target;
+    while (node) {
+        const classNames = node.getAttribute('class');
+        if (!classNames) {
+            node = node.parentNode;
+            continue;
+        }
+        if (classNames.includes('PanoSpatialTagPlugin__tag-content')) {
+            node = null;
+            break;
+        }
+        eventsName.forEach(key => {
+            if (classNames.includes(key))
+                events[key](id);
+        });
+        node = node.parentNode;
+    }
+};
+onMount(() => {
+    hooks.emit('initTag', { id });
+});
+const unsubscribe = currentTarget.subscribe((str) => {
+    if (str === null)
+        return;
+    const [currentId, date] = str.split('-PanoSpatialTagPlugin-');
+    if (id === currentId) {
+        hooks.emit('clickOrigin', { id, show });
+        if (!timeoutId) {
+            show = folded;
+            folded = !folded;
+            timeoutId = setTimeout(() => {
+                timeoutId = undefined;
+            }, 1500);
+        }
+    }
+});
+afterUpdate(() => {
+    contentWidth = contentDom.offsetWidth;
+    contentHeight = contentDom.offsetHeight;
+    if (timeoutId)
+        return;
+    show = !folded;
+});
+onDestroy(() => {
+    hooks.emit('destroyTag', { id });
+    unsubscribe();
+    dispose();
+});
+</script>
+
+<div
+  class:PanoSpatialTagPlugin__tag-x={true}
+  class:PanoSpatialTagPlugin__tag-upside-down={upsideDown}
+  class:PanoSpatialTagPlugin__tag-show={show}
+  class:PanoSpatialTagPlugin__tag-hide={show === false || destroying}
+  id={'PanoSpatialTagPlugin__' + id}
+  style="height: {20 * lineHeightZoom}rem"
+>
+  <div class="PanoSpatialTagPlugin__tag-shadow"
+    style="transform: translate({contentWidth / 2 * contentZoom * 3}px, {
+      contentHeight / 2 * (upsideDown ? -1 : 1) * contentZoom * 3
+    }px) scale({1 / contentZoom})"
+  />
+  <div class="PanoSpatialTagPlugin__tag-line">
+    <i class="PanoSpatialTagPlugin__tag-flagpole"
+      style="width: {lineWidthZoom}rem;"
+    />
+    <i class="PanoSpatialTagPlugin__tag-line1"/>
+    <i class="PanoSpatialTagPlugin__tag-line2"/>
+  </div>
+  <div class="PanoSpatialTagPlugin__tag-animate" style="transform: scale({contentZoom * 3})">
+    <div class="PanoSpatialTagPlugin__tag-content" on:click="{handleClickContent}" bind:this={contentDom}>
+      {@html content}
+    </div>
+  </div>
+</div>
+
+<style>
+  .PanoSpatialTagPlugin__tag-x {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    white-space: nowrap;
+    box-sizing: border-box;
+    width: 25rem;
+    height: 14rem;
+    color: #FFF;
+    transform: translate(0, -100%);
+    transition: height .5s linear;
+  }
+
+  .PanoSpatialTagPlugin__tag-shadow {
+    content: '';
+    position: absolute;
+    width: 30rem;
+    height: 30rem;
+    top: -15rem;
+    left: -15rem;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity .8s .6s;
+    background: url('https://vrlab-image4.ljcdn.com/release/web/PanoSpatialTagPlugin__blur.png');
+    background-size: 30rem 30rem;
+  }
+
+  .PanoSpatialTagPlugin__tag-line {
+    position: absolute;
+    left: -1rem;
+    width: 2rem;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .PanoSpatialTagPlugin__tag-flagpole {
+    position: absolute;
+    top: 0;
+    left: 1rem;
+    height: calc(100% - 1.5rem);
+    width: .15rem;
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, .1));
+    box-shadow: 0 .1rem .5rem rgba(0, 0, 0, .2);
+    opacity: 0;
+    transform: translate(-50%, 60%) scaleY(0);
+    transition: transform .4s cubic-bezier(.44,.44,.74,.98) , opacity .4s cubic-bezier(.44,.44,.74,.98), width .5s linear, height .5s linear ;
+    transform-origin: center bottom;
+  }
+
+  .PanoSpatialTagPlugin__tag-line1 {
+    position: absolute;
+    top: 0;
+    left: 0.3rem;
+    height: 1.8rem;
+    width: .1rem;
+    background: #fff;
+    opacity: 0;
+    transform: translate(-50%, 200%) scaleY(0);
+    transform-origin: center top;
+  }
+
+  .PanoSpatialTagPlugin__tag-line2 {
+    position: absolute;
+    top: 0;
+    left: 0.5rem;
+    height: 1.8rem;
+    width: .1rem;
+    background: #fff;
+    opacity: 0;
+    transform: translate(-50%, 200%) scaleY(0);
+    transform-origin: center top;
+  }
+
+  .PanoSpatialTagPlugin__tag-show .PanoSpatialTagPlugin__tag-line1 {
+    animation: PanoSpatialTagPlugin__tag-line1 linear .5s forwards .45s;
+  }
+
+  .PanoSpatialTagPlugin__tag-show .PanoSpatialTagPlugin__tag-line2 {
+    animation: PanoSpatialTagPlugin__tag-line2 linear .5s forwards .65s;
+  }
+
+  .PanoSpatialTagPlugin__tag-x.PanoSpatialTagPlugin__tag-upside-down {
+    transform: translate(0, 0);
+  }
+
+  .PanoSpatialTagPlugin__tag-upside-down .PanoSpatialTagPlugin__tag-line {
+    transform: scaleY(-1);
+  }
+
+  .PanoSpatialTagPlugin__tag-animate {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+    transform-origin: left top;
+    transition: transform .5s linear;
+  }
+
+  .PanoSpatialTagPlugin__tag-upside-down .PanoSpatialTagPlugin__tag-animate{
+    transform-origin: left bottom;
+  }
+
+  .PanoSpatialTagPlugin__tag-content {
+    position: absolute;
+    display: inline-block;
+    transform: translate(-100%, 0);
+    transition: transform .9s cubic-bezier(0,.65,.16,1.08) .6s;
+    padding-left: .5rem;
+    font-size: 1rem;
+  }
+
+  .PanoSpatialTagPlugin__tag-upside-down .PanoSpatialTagPlugin__tag-content{
+    bottom: 0;
+  }
+
+  .PanoSpatialTagPlugin__tag-show .PanoSpatialTagPlugin__tag-flagpole {
+    opacity: 1;
+    transform: translate(-50%, 0) scaleY(1);
+  }
+
+  .PanoSpatialTagPlugin__tag-upside-down .PanoSpatialTagPlugin__tag-shadow {
+    top: unset;
+    bottom: -15rem;
+  }
+
+  .PanoSpatialTagPlugin__tag-show .PanoSpatialTagPlugin__tag-shadow {
+    opacity: .32;
+  }
+
+  .PanoSpatialTagPlugin__tag-show .PanoSpatialTagPlugin__tag-content {
+    transform: translate(0, 0);
+  }
+
+  .PanoSpatialTagPlugin__tag-hide .PanoSpatialTagPlugin__tag-flagpole {
+    opacity: 0;
+    transform: translate(-50%, 60%) scaleY(0);
+    transition: transform .5s .55s, opacity .4s .55s;
+  }
+
+  .PanoSpatialTagPlugin__tag-hide .PanoSpatialTagPlugin__tag-shadow {
+    opacity: 0;
+    transition: opacity .8s;
+  }
+
+  .PanoSpatialTagPlugin__tag-hide .PanoSpatialTagPlugin__tag-content {
+    transform: translate(-100%, 0);
+    transition: transform .6s cubic-bezier(.53,.06,.88,.59);
+  }
+
+  .PanoSpatialTagPlugin__tag-hide .PanoSpatialTagPlugin__tag-content * {
+    pointer-events: none;
+  }
+
+  .PanoSpatialTagPlugin__tag-hide .PanoSpatialTagPlugin__tag-line1 {
+    opacity: 0.5;
+    transform: translate(-50%, 10%) scaleY(0);
+    animation: PanoSpatialTagPlugin__tag-line1-hide linear .28s forwards .3s;
+  }
+
+  .PanoSpatialTagPlugin__tag-hide .PanoSpatialTagPlugin__tag-line2 {
+    opacity: 0.5;
+    transform: translate(-50%, 0) scaleY(0);
+    animation: PanoSpatialTagPlugin__tag-line2-hide linear .28s forwards .45s;
+  }
+
+  @keyframes PanoSpatialTagPlugin__tag-line1 {
+    0% { opacity: 0; transform: translate(-50%, 250%) scaleY(1); }
+    50% { opacity: 0.5; transform: translate(-50%, 135%) scaleY(1); }
+    100% { opacity: 0.5; transform: translate(-50%, 20%) scaleY(0); }
+  }
+
+  @keyframes PanoSpatialTagPlugin__tag-line2 {
+    0% { opacity: 0; transform: translate(-50%, 250%) scaleY(1); }
+    50% { opacity: 0.5; transform: translate(-50%, 125%) scaleY(1); }
+    100% { opacity: 0.5; transform: translate(-50%, 0) scaleY(0); }
+  }
+
+  @keyframes PanoSpatialTagPlugin__tag-line1-hide {
+    0% { opacity: 0.5; transform: translate(-50%, 10%) scaleY(0); }
+    50% { opacity: 0.2; transform: translate(-50%, 105%) scaleY(1); }
+    100% { opacity: 0; transform: translate(-50%, 200%) scaleY(0); }
+  }
+
+  @keyframes PanoSpatialTagPlugin__tag-line2-hide {
+    0% { opacity: 0.5; transform: translate(-50%, 0) scaleY(0); }
+    50% { opacity: 0.2; transform: translate(-50%, 100%) scaleY(1); }
+    100% { opacity: 0; transform: translate(-50%, 200%) scaleY(0); }
+  }
+</style>

package/libs/PanoSpatialTagPlugin/Plugin.js

@@ -1,8 +1,8 @@
 import * as THREE from 'three';
 import { Five, Subscribe } from '@realsee/five';
 import CSS3DRenderPlugin from '../CSS3DRenderPlugin';
-import Origins from './Components/origins';
-import Tag from './Components/tag';
+import Origins from './Components/origins.svelte';
+import Tag from './Components/tag.svelte';
 import { pluginStyle } from './style';
 import render from '../shared-utils/tinyEJSrender';
 const MESH_SIZE = 0.001;

package/libs/PanoTagPlugin/Components/Common/Arrow.js

@@ -52,8 +52,7 @@ function create_if_block(ctx) {
 			props: {
 				center: true,
 				blurRadius: 9,
-				spreadRadius: 3,
-				zIndex: -1
+				spreadRadius: 3
 			}
 		});
 

package/libs/PanoTagPlugin/Components/Common/Arrow.svelte

@@ -0,0 +1,56 @@
+<script>import { fade } from 'svelte/transition';
+import { Image_Arrow } from '../../Assets/Icon';
+import { cubicInOut } from 'svelte/easing';
+import Shadow from './Shadow.svelte';
+export let direction = 'right';
+export let visible = true;
+export let duration = 0;
+export let inDelay = 0;
+export let outDelay = 0;
+</script>
+
+{#if visible}
+  <div class="arrow-wrapper">
+    <Shadow center blurRadius={9} spreadRadius={3} />
+    <div
+      on:click
+      in:fade|local={{ duration, delay: inDelay, easing: cubicInOut }}
+      out:fade|local={{ duration, delay: outDelay, easing: cubicInOut }}
+      class="arrow {direction}"
+      style="background-image: url({Image_Arrow});"
+    />
+  </div>
+{/if}
+
+<style>
+  .arrow {
+    width: 100%;
+    height: 100%;
+    background-size: 100%;
+    transition: transform 400ms ease-in-out;
+    cursor: pointer;
+    pointer-events: auto;
+  }
+
+  .arrow-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .arrow.left {
+    transform: rotate(0deg);
+  }
+
+  .arrow.right {
+    transform: rotate(-180deg);
+  }
+
+  .arrow.top {
+    transform: rotate(90deg);
+  }
+
+  .arrow.bottom {
+    transform: rotate(-90deg);
+  }
+</style>

package/libs/PanoTagPlugin/Components/Common/Audio.js

@@ -59,8 +59,7 @@ function create_if_block(ctx) {
 			props: {
 				center: true,
 				blurRadius: 15,
-				spreadRadius: 6,
-				zIndex: -1
+				spreadRadius: 6
 			}
 		});
 

package/libs/PanoTagPlugin/Components/Common/Audio.svelte

@@ -0,0 +1,82 @@
+<script>import { fade } from 'svelte/transition';
+import { cubicInOut } from 'svelte/easing';
+import Shadow from './Shadow.svelte';
+import { getContext } from 'svelte';
+export let inDelay = 0;
+export let outDelay = 0;
+export let duration = 0;
+export let url;
+export let unfolded;
+export let mediaStore;
+export let hooksInfo = {};
+const hooks = getContext('hooks');
+let audio;
+let paused = true;
+mediaStore.subscribe(({ currentMediaUrl }) => {
+    if (currentMediaUrl !== url)
+        audio === null || audio === void 0 ? void 0 : audio.pause();
+});
+$: {
+    if (!unfolded)
+        audio === null || audio === void 0 ? void 0 : audio.pause();
+}
+function onClick(event) {
+    mediaStore.set({ currentMediaUrl: url });
+    if (!audio)
+        return;
+    hooks.emit('click', Object.assign({ event, target: 'AudioTagPlayIcon', audioInstance: audio }, hooksInfo));
+    audio.paused ? audio.play() : audio.pause();
+    audio.onplay = (event) => hooks.emit('playStateChange', Object.assign({ event, state: 'playing', mediaInstance: audio }, hooksInfo));
+    audio.onpause = (event) => hooks.emit('playStateChange', Object.assign({ event, state: 'paused', mediaInstance: audio }, hooksInfo));
+}
+</script>
+
+{#if unfolded}
+  <div
+    class="audio"
+    class:paused
+    on:click|stopPropagation={onClick}
+    in:fade|local={{ duration, delay: inDelay, easing: cubicInOut }}
+    out:fade|local={{ duration, delay: outDelay, easing: cubicInOut }}
+  >
+    <Shadow center blurRadius={15} spreadRadius={6} />
+    <div class="audio-icon" />
+    <audio bind:this={audio} bind:paused controls={false} playsInline src={url} />
+  </div>
+{/if}
+
+<style>
+  .audio {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+  }
+
+  @keyframes playing {
+    25% {
+      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='9' r='8' transform='translate(-1 -1)' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+    }
+
+    50% {
+      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM5.533 6.685L4.169 8.049l1.414 1.413a2.078 2.078 0 0 0-.05-2.777z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+    }
+
+    75% {
+      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm-.656 4.874l-.906.905A3.35 3.35 0 0 1 7.369 8.1c0 .875-.333 1.67-.88 2.268l.906.906A4.628 4.628 0 0 0 8.65 8.101a4.627 4.627 0 0 0-1.306-3.227zm-1.811 1.81L4.169 8.05l1.414 1.413a2.078 2.078 0 0 0-.05-2.777z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+    }
+  }
+
+  .paused .audio-icon {
+    animation: none;
+  }
+
+  .audio-icon {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-size: 100%;
+    animation: playing 2s steps(1) infinite;
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm1.428 2.79l-.953.952a6.222 6.222 0 0 1 1.775 4.36c0 1.571-.58 3.006-1.538 4.103l-.184.202.793.794a7.344 7.344 0 0 0 2.21-5.26A7.341 7.341 0 0 0 9.428 2.79zM7.344 4.873l-.906.905A3.35 3.35 0 0 1 7.369 8.1c0 .802-.28 1.537-.748 2.115l-.132.153.906.906A4.628 4.628 0 0 0 8.65 8.101a4.627 4.627 0 0 0-1.306-3.227zm-1.811 1.81L4.169 8.05l1.414 1.413a2.078 2.078 0 0 0-.05-2.777z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+  }
+</style>

package/libs/PanoTagPlugin/Components/Common/Line/Polyline.svelte

@@ -0,0 +1,36 @@
+<script>import uuid from '../../../../shared-utils/uuid';
+import { draw } from 'svelte/transition';
+import { cubicOut, cubicInOut } from 'svelte/easing';
+export let inDelay = 0;
+export let duration = 0;
+export let outDelay = 0;
+export let unfolded;
+const defsID = uuid();
+</script>
+
+<svg class="line" viewBox="0 0 105 21">
+  <defs>
+    <linearGradient id={defsID} gradientUnits="userSpaceOnUse">
+      <stop offset="25%" stop-color="white" stop-opacity="1" />
+      <stop offset="100%" stop-color="white" stop-opacity="0.5" />
+    </linearGradient>
+  </defs>
+  {#if unfolded}
+    <path
+      in:draw|local={{ duration, delay: inDelay, easing: cubicOut }}
+      out:draw|local={{ duration, delay: outDelay, easing: cubicInOut }}
+      fill="none"
+      stroke="url(#{defsID})"
+      stroke-width="1"
+      d="M0 21 L14 0.5 L105 0.5"
+    />
+  {/if}
+</svg>
+
+<style>
+  .line {
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+</style>

package/libs/PanoTagPlugin/Components/Common/Line/Straight.svelte

@@ -0,0 +1,36 @@
+<script>import { draw } from 'svelte/transition';
+import uuid from '../../../../shared-utils/uuid';
+export let inDelay = 0;
+export let duration = 0;
+export let outDelay = 0;
+export let unfolded;
+const defsID = uuid();
+</script>
+
+<svg class="straight-line" viewBox="0 0 148 1" preserveAspectRatio="none">
+  <defs>
+    <linearGradient id={defsID} gradientUnits="userSpaceOnUse">
+      <stop offset="25%" stop-color="white" stop-opacity="1" />
+      <stop offset="100%" stop-color="white" stop-opacity="0.5" />
+    </linearGradient>
+  </defs>
+  {#if unfolded}
+    <path
+      in:draw|local={{ duration, delay: inDelay }}
+      out:draw|local={{ duration, delay: outDelay }}
+      fill="none"
+      stroke="url(#{defsID})"
+      stroke-width="1"
+      d="M0 0.5 L 148 0.5"
+    />
+  {/if}
+</svg>
+
+<style>
+  .straight-line {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+</style>

package/libs/PanoTagPlugin/Components/Common/Media.svelte

@@ -0,0 +1,70 @@
+<script>import { fly } from 'svelte/transition';
+import { Image_Play } from '../../Assets/Icon';
+import { linear } from 'svelte/easing';
+import { notNil } from '../../../shared-utils/isNil';
+export let mediaData;
+export let inDelay = 0;
+export let outDelay = 0;
+export let duration = 0;
+export let unfolded = true;
+export let animation = true;
+export let objectFit = 'cover';
+export let enableCarousel = true;
+$: mediaDataList = (enableCarousel ? mediaData : [mediaData[0]]).filter(notNil);
+</script>
+
+{#if unfolded}
+  <div
+    class="media"
+    class:unfolded
+    in:fly|local={animation ? { y: 4, duration, delay: inDelay, easing: linear } : undefined}
+    out:fly|local={animation ? { y: 4, duration, delay: outDelay, easing: linear } : undefined}
+  >
+    {#each mediaDataList as media}
+      <div class="carousel-item" style={`object-fit: ${objectFit};`}>
+        {#if media.type === 'Image'}
+          <img class="media-content carousel-indicator-item" src={media.url} alt={media.name} />
+        {:else if media.type === 'Video' && media.videoCoverUrl}
+          <img class="media-content" src={media.videoCoverUrl} alt={media.name} />
+        {:else if media.type === 'Video' && !media.videoCoverUrl}
+          <!-- eslint-disable-next-line prettier/prettier -->
+            <video class="media-content" src={media.url} poster={media.videoCoverUrl} playsinline paused loop={false} preload="auto" crossorigin="" controls={false} muted />
+        {/if}
+        {#if media.type === 'Video'}
+          <div class="video-icon" style="background-image: url({Image_Play});" />
+        {/if}
+      </div>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .media {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    border-radius: 2px;
+  }
+
+  .carousel-item {
+    height: 100%;
+  }
+
+  .media-content {
+    width: 100%;
+    height: 100%;
+    user-select: none;
+    object-fit: inherit;
+  }
+
+  .video-icon {
+    width: 28px;
+    height: 28px;
+    background-size: 100%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+</style>

package/libs/PanoTagPlugin/Components/Common/MultiLineText.svelte

@@ -0,0 +1,56 @@
+<script>import Text from '../Common/Text.svelte';
+import Arrow from '../Common/Arrow.svelte';
+export let visible = false;
+export let textUnfolded = false;
+export let textItems;
+let textElement;
+let translateY = 0;
+let lineHeight = 0;
+let textHeight = 0;
+$: translateY = textUnfolded ? lineHeight - textHeight : 0;
+$: transform = `translateY(${translateY}px)`;
+$: arrowDirection = textUnfolded ? 'left' : 'right';
+$: foldTextDelay = textUnfolded ? 450 : 0;
+$: {
+    if (textElement) {
+        const { height: heightString, lineHeight: lineHeightString } = getComputedStyle(textElement);
+        textHeight = Number(heightString.replace('px', ''));
+        lineHeight = Number(lineHeightString.replace('px', ''));
+    }
+}
+</script>
+
+{#each textItems as { id, content } (id)}
+  <div bind:this={textElement} class="text" style:transform>
+    <Text unfolded={visible} {content} inDelay={500} outDelay={foldTextDelay} />
+  </div>
+{/each}
+{#if lineHeight < textHeight}
+  <div class="arrow">
+    <Arrow direction={arrowDirection} {visible} inDelay={600} duration={1000} />
+  </div>
+{/if}
+
+<style>
+  .text {
+    pointer-events: auto;
+    box-sizing: border-box;
+    display: inline-block;
+    max-width: 120px;
+    transition: transform 400ms ease-in-out;
+    font-size: 12px;
+    line-height: 18px;
+    white-space: initial;
+    cursor: pointer;
+  }
+
+  .arrow {
+    pointer-events: auto;
+    display: inline-block;
+    vertical-align: top;
+    width: 14px;
+    height: 14px;
+    margin-left: 2px;
+    margin-top: 2px;
+  }
+</style>