@hanzo/ui 0.5.24 → 0.6.16

package/src/components/Timeline.svelte

@@ -0,0 +1,754 @@
+<!--
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { fly } from 'svelte/transition'
+  import { Timestamp } from '@hanzo/core'
+  import { TimelinePoint, TimelineRow, TimelineState } from '../types'
+  import ui, {
+    CheckBox,
+    Icon,
+    Scroller,
+    Button,
+    resizeObserver,
+    MILLISECONDS_IN_DAY,
+    MILLISECONDS_IN_WEEK,
+    IconArrowLeft,
+    IconArrowRight,
+    IconAdd
+  } from '..'
+  import { createEventDispatcher, onMount } from 'svelte'
+
+  export let selectedRows: number[] = []
+  export let selectedRow: number | undefined = undefined
+  export let lines: TimelineRow[] | undefined = undefined
+  export let currentTime: Timestamp = new Date().setHours(0, 0, 0, 0)
+
+  const dispatch = createEventDispatcher()
+  const NOT_ENDED = MILLISECONDS_IN_WEEK * 4
+  let currentDate: Date = new Date(currentTime)
+  $: currentDate = new Date(currentTime)
+
+  export const onObjectChecked = (row: number, value: boolean) => {
+    dispatch('check', { row, value })
+  }
+  export const selectRow = (row: number) => {
+    selectedRow = row
+  }
+  const handleRowFocused = (row: number) => {
+    dispatch('row-focus', row)
+  }
+
+  let panelWidth: number = 320
+  const dayWidth: number = 5
+  let container: HTMLElement
+  let viewbox: HTMLElement
+  let scroller: Scroller
+  let scrollDir: 'horizontal' | 'vertical' | 'none' = 'none'
+
+  const locale = new Intl.NumberFormat().resolvedOptions().locale
+  const nillPoint: TimelinePoint = { label: '', date: currentDate, x: 0 }
+  const nillRect: DOMRect = { x: 0, y: 0, width: 0, height: 0, left: 0, right: 0, top: 0, bottom: 0, toJSON: () => {} }
+  const time: TimelineState = {
+    todayMarker: nillPoint,
+    offsetView: 0,
+    renderedRange: { left: nillPoint, right: nillPoint, firstDays: [] },
+    rows: undefined,
+    months: [],
+    days: [],
+    timelineBox: nillRect,
+    viewBox: nillRect
+  }
+
+  const checkRange = (reverse: boolean) => {
+    if (reverse) {
+      if (time.offsetView * -1 - time.viewBox.width <= time.renderedRange.left.x) renderPrevMonth()
+    } else {
+      if (time.offsetView * -1 + time.viewBox.width * 2 >= time.renderedRange.right.x) renderNextMonth()
+    }
+  }
+
+  const getDateByOffset = (x: number): { date: Date, delta: number } => {
+    const deltaDays = Math.floor(x / dayWidth)
+    const calcDay = new Date(currentTime + deltaDays * MILLISECONDS_IN_DAY)
+    return { date: calcDay, delta: deltaDays }
+  }
+  const getOffsetByDate = (date: Timestamp | Date): number => {
+    const tempDay = new Date(date).setHours(0, 0, 0, 0)
+    const deltaDays = Math.floor((tempDay - currentTime) / MILLISECONDS_IN_DAY)
+    return deltaDays * dayWidth
+  }
+  const getNextMonth = (date: Date): TimelinePoint => {
+    const fDate = new Date(date.getFullYear(), date.getMonth() + 1, 1, 0, 0)
+    const offDate = getOffsetByDate(fDate)
+    const lDate = Intl.DateTimeFormat(locale, { month: 'long' }).format(fDate)
+    return { date: fDate, x: offDate, label: lDate }
+  }
+  const getNextWeek = (date: Date, reverse?: boolean): TimelinePoint => {
+    const fDate = new Date(date.getTime() + MILLISECONDS_IN_WEEK * (reverse ? -1 : 1))
+    const offDate = getOffsetByDate(fDate)
+    const lDate = fDate.getDate().toString()
+    return { date: fDate, x: offDate, label: lDate }
+  }
+
+  const renderPrevMonth = () => {
+    const oldRange: TimelinePoint = time.renderedRange.left
+    const newDate: Date = new Date(oldRange.date.getFullYear(), oldRange.date.getMonth() - 1, 1, 0, 0)
+    const newRange: number = getOffsetByDate(newDate)
+    const newLabel: string = Intl.DateTimeFormat(locale, { month: 'long' }).format(newDate)
+    const newPoint: TimelinePoint = {
+      x: newRange,
+      date: newDate,
+      label: newLabel
+    }
+    time.renderedRange.left = newPoint
+    time.months = [newPoint, ...time.months]
+    while (getNextWeek(time.days[0].date, true).x > newPoint.x) {
+      const prevDay: TimelinePoint = getNextWeek(time.days[0].date, true)
+      time.days = [prevDay, ...time.days]
+    }
+  }
+  const renderNextMonth = () => {
+    const oldRange: TimelinePoint = time.renderedRange.right
+    const newDate: Date = new Date(oldRange.date.getFullYear(), oldRange.date.getMonth() + 1, 1, 0, 0)
+    const newRange: number = getOffsetByDate(newDate)
+    const newLabel: string = Intl.DateTimeFormat(locale, { month: 'long' }).format(newDate)
+    const newPoint: TimelinePoint = {
+      x: newRange,
+      date: newDate,
+      label: newLabel
+    }
+    time.renderedRange.right = newPoint
+    time.months = [...time.months, newPoint]
+    while (getNextWeek(time.days[time.days.length - 1].date).x < newPoint.x) {
+      const nextDay: TimelinePoint = getNextWeek(time.days[time.days.length - 1].date)
+      time.days = [...time.days, nextDay]
+    }
+  }
+
+  const wheelEvent = (e: WheelEvent) => {
+    e = e || window.event
+    const deltaX = -e.deltaX
+    const deltaY = e.deltaY
+    if (scrollDir === 'none' && (Math.abs(deltaX) > 2 || Math.abs(deltaY) > 2)) {
+      if (Math.abs(deltaX) > Math.abs(deltaY)) scrollDir = 'horizontal'
+      else scrollDir = 'vertical'
+    } else if (Math.abs(deltaX) <= 4 && Math.abs(deltaY) <= 4) scrollDir = 'none'
+    time.offsetView += deltaX
+    if (scrollDir === 'horizontal') {
+      mouseMoveEvent(e)
+      checkRange(deltaX > 0)
+    }
+    if (scrollDir === 'vertical') scroller.scrollBy(deltaY)
+    e.preventDefault ? e.preventDefault() : (e.returnValue = false)
+  }
+  const mouseMoveEvent = (e: MouseEvent) => {
+    const cur = e.x - time.viewBox.left
+    if (cur >= 0 && cur <= time.viewBox.width) {
+      const offset = cur - time.offsetView
+      const t = getDateByOffset(offset)
+      time.cursorMarker = {
+        label: t.date.getDate().toString(),
+        x: offset,
+        date: t.date
+      }
+    }
+  }
+  const mouseOutEvent = (e: MouseEvent) => {
+    time.cursorMarker = undefined
+  }
+  const clickEvent = (e: MouseEvent) => {}
+
+  onMount(() => {
+    container.addEventListener('wheel', wheelEvent)
+    container.addEventListener('mousemove', mouseMoveEvent)
+    container.addEventListener('mouseout', mouseOutEvent)
+    container.addEventListener('click', clickEvent)
+
+    time.timelineBox = container.getBoundingClientRect()
+    time.viewBox = viewbox.getBoundingClientRect()
+    time.offsetView = Math.floor(time.viewBox.width / 2)
+    time.todayMarker.x = 0
+    time.todayMarker.date = currentDate
+    time.todayMarker.label = Intl.DateTimeFormat(locale, { day: 'numeric', month: 'short' }).format(currentDate)
+
+    let mass: number[] = [currentTime]
+    lines?.forEach((line) => {
+      if (line.items !== undefined) {
+        let tr: number[] = []
+        line.items.forEach((it) => {
+          if (it.startDate) tr = [...tr, it.startDate]
+          if (it.targetDate) tr = [...tr, it.targetDate]
+          else if (it.startDate) tr = [...tr, it.startDate + NOT_ENDED]
+        })
+        if (tr.length > 0) {
+          mass = [...mass, ...tr]
+          tr.sort((a, b) => a - b)
+          const minD: Date = new Date(tr[0])
+          const maxD: Date = new Date(tr[tr.length - 1])
+          const r = {
+            min: {
+              date: minD,
+              x: getOffsetByDate(minD)
+            },
+            max: {
+              date: maxD,
+              x: getOffsetByDate(maxD)
+            }
+          }
+          time.rows ? time.rows.push(r) : (time.rows = [r])
+        } else time.rows ? time.rows.push(null) : (time.rows = [null])
+      } else time.rows ? time.rows.push(null) : (time.rows = [null])
+    })
+    mass.sort((a, b) => a - b)
+
+    let leftRange: number = getOffsetByDate(mass[0]) - time.viewBox.width * 1.5
+    const leftDate: Date = new Date(getDateByOffset(leftRange).date.setDate(1))
+    leftRange = getOffsetByDate(leftDate)
+    time.renderedRange.left = {
+      x: leftRange,
+      date: leftDate,
+      label: Intl.DateTimeFormat(locale, { month: 'long' }).format(leftDate)
+    }
+    let rightRange: number = getOffsetByDate(mass[mass.length - 1]) + time.viewBox.width * 1.5
+    const tr: Date = new Date(getDateByOffset(rightRange).date)
+    const rightDate: Date = new Date(new Date(tr.getFullYear(), tr.getMonth() + 1, 1, 0, 0).getTime() - 1)
+    rightRange = getOffsetByDate(rightDate)
+    time.renderedRange.right = {
+      x: rightRange,
+      date: rightDate,
+      label: Intl.DateTimeFormat(locale, { month: 'long' }).format(rightDate)
+    }
+
+    time.months = [time.renderedRange.left]
+    let i = 0
+    do {
+      const nextMonth: TimelinePoint = getNextMonth(time.months[i].date)
+      time.months = [...time.months, nextMonth]
+      i++
+    } while (getNextMonth(time.months[i].date).x <= time.renderedRange.right.x)
+    time.days = [
+      {
+        x: time.renderedRange.left.x,
+        date: time.renderedRange.left.date,
+        label: '1'
+      }
+    ]
+    i = 0
+    do {
+      const nextWeek: TimelinePoint = getNextWeek(time.days[i].date)
+      time.days = [...time.days, nextWeek]
+      i++
+    } while (getNextWeek(time.days[i].date).x <= time.renderedRange.right.x)
+  })
+
+  let moving: boolean = false
+  let sX: number
+  const splitterStart = (e: MouseEvent) => {
+    if (time.timelineBox.width <= 450) return
+    sX = (e.x - time.viewBox.left) * -1
+    document.addEventListener('mouseup', splitterEnd)
+    document.addEventListener('mousemove', splitterMove)
+    moving = true
+  }
+  const splitterMove = (e: MouseEvent) => {
+    if (e.x - time.timelineBox.left + sX < 300) panelWidth = 300
+    else if (time.timelineBox.right - e.x + sX < 150) panelWidth = time.timelineBox.width - 150
+    else panelWidth = e.x - time.timelineBox.left + sX
+  }
+  const splitterEnd = (e: MouseEvent) => {
+    document.removeEventListener('mousemove', splitterMove)
+    document.removeEventListener('mouseup', splitterEnd)
+    time.viewBox = viewbox.getBoundingClientRect()
+    moving = false
+  }
+</script>
+
+<div
+  class="timeline-container"
+  bind:this={container}
+  use:resizeObserver={() => {
+    time.timelineBox = container.getBoundingClientRect()
+    time.viewBox = viewbox.getBoundingClientRect()
+  }}
+>
+  <div class="timeline-header">
+    <div class="timeline-header__title" style:width={`${panelWidth}px`}>
+      <Button
+        label={ui.string.Today}
+        on:click={() => {
+          time.offsetView = Math.floor(time.viewBox.width / 2)
+        }}
+      />
+    </div>
+    <div class="timeline-header__time" bind:this={viewbox}>
+      <div class="timeline-header__time-content" style:transform={`translateX(${time.offsetView}px)`}>
+        {#if time.months}
+          {#each time.months as month}
+            <div class="month firstLetter" style:left={`${month.x}px`}>
+              {#if month.date.getMonth() === 0}
+                <b class="caption-color">{month.date.getFullYear()}</b>
+              {/if}
+              <span style="firstLetter">{month.label}</span>
+            </div>
+          {/each}
+        {/if}
+        {#if time.days}
+          {#each time.days as day}
+            <div class="day" style:left={`${day.x}px`}>{day.label}</div>
+          {/each}
+        {/if}
+        <div class="cursor" style:left={`${time.todayMarker.x}px`}>{time.todayMarker.date.getDate()}</div>
+        <!-- {#if time.cursorMarker}
+          <div class="cursor" style:left={`${time.cursorMarker.x}px`}>{time.cursorMarker.label}</div>
+        {/if} -->
+      </div>
+    </div>
+  </div>
+  <div class="timeline-background__headers" style:width={`${panelWidth}px`} />
+  <div class="timeline-background__viewbox" style:left={`${panelWidth}px`}>
+    <div class="timeline-wrapped_content" style:transform={`translateX(${time.offsetView}px)`}>
+      {#if time.months}
+        {#each time.months as month}
+          <div class="monthMarker" style:left={`${month.x}px`} />
+        {/each}
+      {/if}
+    </div>
+  </div>
+  {#if lines}
+    <Scroller bind:this={scroller}>
+      {#each lines as line, row}
+        {@const rangeRow = time.rows ? time.rows[row] : null}
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <div
+          class="listGrid"
+          class:mListGridChecked={selectedRows.find((x) => x === row) !== undefined}
+          class:mListGridSelected={selectedRow === row}
+          on:focus={() => {}}
+          on:mousemove={(ev) => {
+            if (row !== selectedRow) {
+              handleRowFocused(row)
+            }
+            ev.preventDefault()
+          }}
+        >
+          <div class="headerWrapper" style:width={`${panelWidth}px`}>
+            <div class="gridElement">
+              <div class="eListGridCheckBox">
+                <CheckBox
+                  checked={selectedRows.filter((i) => i === row).length > 0}
+                  on:value={(event) => {
+                    onObjectChecked(row, event.detail)
+                  }}
+                />
+              </div>
+            </div>
+            <slot {row} />
+          </div>
+          <div class="contentWrapper" class:nullRow={rangeRow === null && !moving}>
+            <div class="timeline-wrapped_content" style:transform={`translateX(${time.offsetView}px)`}>
+              {#if line.items}
+                {#each line.items as item}
+                  {#if item.startDate}
+                    {@const target = item.targetDate ?? item.startDate + NOT_ENDED}
+                    <div
+                      class="component-item"
+                      class:noTarget={item.targetDate === null}
+                      style:left={`${getOffsetByDate(item.startDate)}px`}
+                      style:right={`${getOffsetByDate(target) + dayWidth - 1}px`}
+                      style:width={`${getOffsetByDate(target) - getOffsetByDate(item.startDate) + dayWidth - 1}px`}
+                    >
+                      <div class="component-presenter gap-2">
+                        {#if item.icon}<Icon
+                            icon={item.icon}
+                            size={item.iconSize ?? 'small'}
+                            iconProps={item.iconProps}
+                          />{/if}
+                        {#if item.presenter}<svelte:component this={item.presenter} {...item.props} />{/if}
+                        {#if item.label}<span>{item.label}</span>{/if}
+                      </div>
+                    </div>
+                  {/if}
+                {/each}
+              {/if}
+            </div>
+            {#if line.items}
+              {#if rangeRow !== null && -time.offsetView + time.viewBox.width < rangeRow.min.x}
+                <button
+                  transition:fly={{ duration: 150, x: 50, opacity: 0 }}
+                  class="timeline-action__button right"
+                  on:click={() => {
+                    if (rangeRow !== null) time.offsetView = -getOffsetByDate(rangeRow.min.date) + dayWidth * 5
+                  }}
+                >
+                  <IconArrowRight size={'small'} />
+                </button>
+              {/if}
+              {#if rangeRow !== null && -time.offsetView > rangeRow.max.x}
+                <button
+                  transition:fly={{ duration: 150, x: -50, opacity: 0 }}
+                  class="timeline-action__button left"
+                  on:click={() => {
+                    if (rangeRow !== null) time.offsetView = -getOffsetByDate(rangeRow.min.date) + dayWidth * 5
+                  }}
+                >
+                  <IconArrowLeft size={'small'} />
+                </button>
+              {/if}
+            {/if}
+            {#if rangeRow === null && selectedRow === row && time.cursorMarker && !moving}
+              <button class="timeline-action__button add" style:left={`${time.offsetView + time.cursorMarker.x}px`}>
+                <IconAdd size={'small'} />
+              </button>
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </Scroller>
+    <div class="timeline-foreground__viewbox" style:left={`${panelWidth}px`}>
+      <div class="timeline-wrapped_content" style:transform={`translateX(${time.offsetView}px)`}>
+        <div class="todayMarker" style:left={`${time.todayMarker.x}px`} />
+      </div>
+    </div>
+  {/if}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div class="timeline-splitter" class:moving style:left={`${panelWidth}px`} on:mousedown={splitterStart} />
+</div>
+
+<style lang="scss">
+  .timeline-container {
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+
+    & > * {
+      overscroll-behavior-x: contain;
+    }
+  }
+  .timeline-header {
+    display: flex;
+    align-items: center;
+    min-height: 4rem;
+    border-bottom: 1px solid var(--divider-color);
+  }
+  .timeline-header__title {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 0 2.25rem;
+    height: 100%;
+    background-color: var(--theme-comp-header-color);
+    box-shadow: var(--accent-shadow);
+    // z-index: 2;
+  }
+  .timeline-header__time {
+    // overflow: hidden;
+    position: relative;
+    flex-grow: 1;
+    height: 100%;
+    background-color: var(--theme-bg-color);
+    mask-image: linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0) 0,
+      rgba(0, 0, 0, 1) 2rem,
+      rgba(0, 0, 0, 1) calc(100% - 2rem),
+      rgba(0, 0, 0, 0) 100%
+    );
+
+    &-content {
+      width: 100%;
+      height: 100%;
+      will-change: transform;
+
+      .day,
+      .month {
+        position: absolute;
+        pointer-events: none;
+      }
+      .month {
+        width: max-content;
+        top: 0.25rem;
+        font-size: 1rem;
+        color: var(--accent-color);
+
+        &:first-letter {
+          text-transform: uppercase;
+        }
+      }
+      .day {
+        bottom: 0.5rem;
+        font-size: 1rem;
+        color: var(--content-color);
+        transform: translateX(-50%);
+      }
+      .cursor {
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-bottom: 1px;
+        width: 1.75rem;
+        height: 1.75rem;
+        bottom: 0.375rem;
+        font-size: 1rem;
+        font-weight: 600;
+        color: #fff;
+        background-color: var(--primary-bg-color);
+        border-radius: 50%;
+        transform: translateX(-50%);
+        pointer-events: none;
+      }
+    }
+  }
+  .todayMarker,
+  .monthMarker {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 0;
+    height: 100%;
+    pointer-events: none;
+  }
+  .monthMarker {
+    border-left: 1px dashed var(--highlight-select);
+  }
+  .todayMarker {
+    border-left: 1px solid var(--primary-bg-color);
+  }
+
+  .timeline-background__headers,
+  .timeline-background__viewbox,
+  .timeline-foreground__viewbox {
+    overflow: hidden;
+    position: absolute;
+    top: 4rem;
+    bottom: 0;
+    height: 100%;
+    z-index: -1;
+  }
+  .timeline-background__headers {
+    left: 0;
+    background-color: var(--theme-comp-header-color);
+  }
+  .timeline-background__viewbox,
+  .timeline-foreground__viewbox {
+    right: 0;
+    mask-image: linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0) 0,
+      rgba(0, 0, 0, 1) 2rem,
+      rgba(0, 0, 0, 1) calc(100% - 2rem),
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+  .timeline-foreground__viewbox {
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  .timeline-splitter,
+  .timeline-splitter::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+    transform: translateX(-50%);
+  }
+  .timeline-splitter {
+    width: 1px;
+    background-color: var(--divider-color);
+    cursor: col-resize;
+    z-index: 3;
+    transition-property: width, background-color;
+    transition-timing-function: var(--timing-main);
+    transition-duration: 0.1s;
+    transition-delay: 0s;
+
+    &:hover {
+      width: 3px;
+      background-color: var(--button-border-hover);
+      transition-duration: 0.15s;
+      transition-delay: 0.3s;
+    }
+    &::before {
+      content: '';
+      width: 10px;
+      left: 50%;
+    }
+    &.moving {
+      width: 2px;
+      background-color: var(--primary-edit-border-color);
+      transition-duration: 0.1s;
+      transition-delay: 0s;
+    }
+  }
+
+  .headerWrapper {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    min-width: 0;
+    padding-left: 0.75rem;
+    padding-right: 1.15rem;
+    // border-bottom: 1px solid var(--accent-bg-color);
+  }
+  .contentWrapper {
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    mask-image: linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0) 0,
+      rgba(0, 0, 0, 1) 2rem,
+      rgba(0, 0, 0, 1) calc(100% - 2rem),
+      rgba(0, 0, 0, 0) 100%
+    );
+
+    &.nullRow {
+      cursor: pointer;
+    }
+  }
+  .timeline-wrapped_content {
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    will-change: transform;
+  }
+
+  .timeline-action__button,
+  .component-item {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+    box-shadow: var(--button-shadow);
+  }
+  .component-item {
+    top: 0.25rem;
+    bottom: 0.25rem;
+    background-color: var(--button-bg-color);
+    border: 1px solid var(--button-border-color);
+    border-radius: 0.75rem;
+
+    &:hover {
+      background-color: var(--button-bg-hover);
+      border-color: var(--button-border-hover);
+    }
+    &.noTarget {
+      mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1) 2rem);
+      border-right-color: transparent;
+    }
+
+    .component-presenter {
+      display: flex;
+      align-items: center;
+    }
+  }
+  .timeline-action__button {
+    top: 0.625rem;
+    bottom: 0.625rem;
+    width: 2rem;
+    color: var(--content-color);
+    background-color: var(--button-bg-color);
+    border: 1px solid var(--button-border-color);
+    border-radius: 0.5rem;
+
+    // color: var(--caption-color);
+    // font-size: 0.65rem;
+    // font-weight: 600;
+
+    &:hover {
+      color: var(--accent-color);
+      background-color: var(--button-bg-hover);
+      border-color: var(--button-border-hover);
+    }
+
+    &.left {
+      left: 1rem;
+    }
+    &.right {
+      right: 1rem;
+    }
+    &.add {
+      transform: translateX(-50%);
+      pointer-events: none;
+    }
+  }
+
+  .listGrid {
+    display: flex;
+    justify-content: stretch;
+    align-items: center;
+    flex-shrink: 0;
+    width: 100%;
+    height: 3.25rem;
+    min-height: 0;
+    color: var(--caption-color);
+    z-index: 2;
+
+    &.mListGridChecked {
+      .headerWrapper {
+        background-color: var(--highlight-select);
+      }
+      .contentWrapper {
+        background-color: var(--trans-content-05);
+      }
+      .eListGridCheckBox {
+        opacity: 1;
+      }
+    }
+
+    &.mListGridSelected {
+      .headerWrapper {
+        background-color: var(--highlight-select-hover);
+      }
+      .contentWrapper {
+        background-color: var(--trans-content-10);
+      }
+    }
+
+    .eListGridCheckBox {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+    }
+
+    &:hover .eListGridCheckBox {
+      opacity: 1;
+    }
+  }
+
+  .gridElement {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-left: 0.5rem;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+</style>