@hanzo/ui 0.5.24 → 0.6.16

package/src/components/calendar/SimpleTimePopup.svelte

@@ -0,0 +1,41 @@
+<!--
+// Copyright © 2023 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 { createEventDispatcher } from 'svelte'
+  import TimeInputBox from './TimeInputBox.svelte'
+
+  export let currentDate: Date
+
+  const dispatch = createEventDispatcher()
+
+  function close (): void {
+    currentDate.setSeconds(0, 0)
+    dispatch('close', { value: currentDate })
+  }
+
+  export function canClose (): boolean {
+    return true
+  }
+</script>
+
+<div class="antiPopup popup">
+  <TimeInputBox bind:currentDate on:close={close} />
+</div>
+
+<style lang="scss">
+  .popup {
+    border-radius: 0.5rem;
+  }
+</style>

package/src/components/calendar/TimeInputBox.svelte

@@ -0,0 +1,282 @@
+<!--
+// Copyright © 2023 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 { afterUpdate, createEventDispatcher } from 'svelte'
+  import ui from '../../plugin'
+  import Label from '../Label.svelte'
+  import { fromCurrentToTz, fromTzToCurrent } from './internal/DateUtils'
+
+  export let currentDate: Date
+  export let size: 'small' | 'medium' | 'narrow' = 'medium'
+  export let noBorder: boolean = false
+  export let disabled: boolean = false
+  export let timeZone: string | undefined = undefined
+
+  type TEdits = 'hour' | 'min'
+  interface IEdits {
+    id: TEdits
+    value: number
+    el?: HTMLElement
+  }
+  const editsType: TEdits[] = ['hour', 'min']
+  const getIndex = (id: TEdits): number => editsType.indexOf(id)
+  let edits: IEdits[] = editsType.map((edit) => {
+    return { id: edit, value: -1 }
+  })
+  let selected: TEdits | null = null
+  let startTyping: boolean = false
+
+  const dispatch = createEventDispatcher()
+
+  const setValue = (val: number, date: Date | null, id: TEdits, timeZone: string | undefined): Date => {
+    if (date == null) date = new Date()
+    const value = timeZone ? fromTzToCurrent(date, timeZone) : new Date(date)
+    switch (id) {
+      case 'hour':
+        date = new Date(value.setHours(val))
+        break
+      case 'min':
+        date = new Date(value.setMinutes(val))
+        break
+    }
+    return date
+  }
+
+  const getMaxValue = (date: Date | null, id: TEdits): number => {
+    if (date == null) date = new Date()
+    switch (id) {
+      case 'hour':
+        return 23
+      case 'min':
+        return 59
+    }
+  }
+
+  const getValue = (date: Date, id: TEdits, timeZone: string | undefined): number => {
+    const value = timeZone ? fromCurrentToTz(date, timeZone) : new Date(date)
+    switch (id) {
+      case 'hour':
+        return value.getHours()
+      case 'min':
+        return value.getMinutes()
+    }
+  }
+
+  const dateToEdits = (currentDate: Date | null, timeZone: string | undefined): void => {
+    if (currentDate == null) {
+      edits.forEach((edit) => {
+        edit.value = -1
+      })
+    } else {
+      for (const edit of edits) {
+        edit.value = getValue(currentDate, edit.id, timeZone)
+      }
+    }
+    edits = edits
+  }
+
+  export const isNull = (currentDate?: Date): boolean => {
+    if (currentDate !== undefined) {
+      dateToEdits(currentDate, timeZone)
+    }
+    let result: boolean = false
+    edits.forEach((edit, i) => {
+      if (edit.value === -1) result = true
+    })
+    return result
+  }
+
+  const keyDown = (ev: KeyboardEvent, ed: TEdits): void => {
+    if (selected === ed && !disabled) {
+      const index = getIndex(ed)
+      if (ev.key >= '0' && ev.key <= '9') {
+        const shouldNext = !startTyping
+        const num: number = parseInt(ev.key, 10)
+        if (startTyping) {
+          if (num === 0) edits[index].value = 0
+          else {
+            edits[index].value = num
+          }
+          startTyping = false
+        } else if (edits[index].value * 10 + num > getMaxValue(currentDate, ed)) {
+          edits[index].value = getMaxValue(currentDate, ed)
+        } else {
+          edits[index].value = edits[index].value * 10 + num
+        }
+        if (!isNull() && !startTyping) {
+          fixEdits()
+          currentDate = setValue(edits[index].value, currentDate, ed, timeZone)
+          dateToEdits(currentDate, timeZone)
+        }
+        edits = edits
+        dispatch('update', currentDate)
+
+        if (selected === 'hour' && (shouldNext || edits[0].value > 2)) selected = 'min'
+      }
+      if (ev.code === 'Enter') {
+        dispatch('close', currentDate)
+      }
+      if (ev.code === 'Backspace') {
+        edits[index].value = -1
+        startTyping = true
+      }
+      if (ev.code === 'ArrowUp' || (ev.code === 'ArrowDown' && edits[index].el)) {
+        if (edits[index].value !== -1) {
+          const val = ev.code === 'ArrowUp' ? edits[index].value + 1 : edits[index].value - 1
+          if (currentDate) {
+            currentDate = setValue(val, currentDate, ed, timeZone)
+            dateToEdits(currentDate, timeZone)
+            dispatch('update', currentDate)
+          }
+        }
+      }
+      if (ev.code === 'ArrowLeft' && edits[index].el) {
+        selected = index === 0 ? edits[1].id : edits[index - 1].id
+      }
+      if (ev.code === 'ArrowRight' && edits[index].el) {
+        selected = index === 1 ? edits[0].id : edits[index + 1].id
+      }
+      if (ev.code === 'Tab') {
+        if (ed === 'min') dispatch('save')
+      }
+    }
+  }
+  export const focused = (ed: TEdits): void => {
+    selected = ed
+    startTyping = true
+  }
+  const fixEdits = (): void => {
+    const h: number = edits[0].value === -1 ? 0 : edits[0].value
+    const m: number = edits[1].value === -1 ? 0 : edits[1].value
+    currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), h, m)
+    dispatch('save')
+  }
+
+  $: dateToEdits(currentDate, timeZone)
+  $: if (selected && edits[getIndex(selected)].el) edits[getIndex(selected)].el?.focus()
+
+  afterUpdate(() => {
+    if (selected) edits[getIndex(selected)].el?.focus()
+  })
+</script>
+
+<div class="datetime-input {size}" class:noBorder class:disabled>
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <span
+    bind:this={edits[0].el}
+    class="digit"
+    tabindex="0"
+    on:keydown={(ev) => {
+      keyDown(ev, edits[0].id)
+    }}
+    on:focus={() => {
+      focused(edits[0].id)
+    }}
+    on:blur={() => (selected = null)}
+  >
+    {#if edits[0].value > -1}
+      {edits[0].value.toString().padStart(2, '0')}
+    {:else}<Label label={ui.string.HH} />{/if}
+  </span>
+  <span class="separator">:</span>
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <span
+    bind:this={edits[1].el}
+    class="digit"
+    tabindex="0"
+    on:keydown={(ev) => {
+      keyDown(ev, edits[1].id)
+    }}
+    on:focus={() => {
+      focused(edits[1].id)
+    }}
+    on:blur={() => (selected = null)}
+  >
+    {#if edits[1].value > -1}
+      {edits[1].value.toString().padStart(2, '0')}
+    {:else}<Label label={ui.string.MM} />{/if}
+  </span>
+</div>
+
+<style lang="scss">
+  .datetime-input {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin: 0;
+    min-width: 0;
+    font-family: inherit;
+    color: var(--theme-content-color);
+    border-radius: 0.25rem;
+    transition: border-color 0.15s ease;
+
+    &.small {
+      font-size: 0.8125rem;
+    }
+    &.medium {
+      height: 3rem;
+      font-size: 1rem;
+    }
+    &:not(.noBorder) {
+      padding: 0.75rem;
+      background-color: var(--theme-bg-color);
+      border: 1px solid var(--theme-button-border);
+      &:hover {
+        border-color: var(--theme-button-default);
+      }
+      &:focus-within {
+        border-color: var(--primary-edit-border-color);
+      }
+    }
+    &.noBorder {
+      padding: 0.125rem;
+    }
+    &.narrow {
+      padding: 0.125rem 0.5rem;
+    }
+    &:focus-within {
+      color: var(--theme-caption-color);
+    }
+
+    .digit {
+      position: relative;
+      padding: 0 0.125rem;
+      height: 1.5rem;
+      line-height: 1.5rem;
+      color: var(--theme-caption-color);
+      outline: none;
+      border-radius: 0.125rem;
+
+      &::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 11000;
+        cursor: pointer;
+      }
+    }
+    &:not(.disabled) .digit:focus {
+      color: var(--primary-button-color);
+      background-color: var(--primary-button-default);
+    }
+    .separator {
+      margin: 0 0.1rem;
+    }
+  }
+</style>

package/src/components/calendar/TimePopup.svelte

@@ -0,0 +1,62 @@
+<!--
+// Copyright © 2020 Hanzo <dev@hanzo.ai>.
+//
+// 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 { createEventDispatcher } from 'svelte'
+  import { MILLISECONDS_IN_DAY, DAYS_IN_WEEK } from './internal/DateUtils'
+
+  export let value: number
+
+  const dispatch = createEventDispatcher()
+
+  interface ITimes {
+    label: string
+    value: number
+  }
+
+  const actions: ITimes[] = [
+    { label: '- week', value: -DAYS_IN_WEEK * MILLISECONDS_IN_DAY },
+    { label: '- day', value: -MILLISECONDS_IN_DAY },
+    { label: '- hour', value: -60 * 60 * 1000 },
+    { label: '- 30 min', value: -30 * 60 * 1000 },
+    { label: '- 5 min', value: -5 * 60 * 1000 },
+    { label: '+ 5 min', value: 5 * 60 * 1000 },
+    { label: '+ 30 min', value: 30 * 60 * 1000 },
+    { label: '+ hour', value: 60 * 60 * 1000 },
+    { label: '+ day', value: MILLISECONDS_IN_DAY },
+    { label: '+ week', value: DAYS_IN_WEEK * MILLISECONDS_IN_DAY }
+  ]
+</script>
+
+<div class="scrollbox">
+  {#each actions as action}
+    <button
+      class="ap-menuItem no-word-wrap"
+      on:click={() => {
+        dispatch('update', new Date(value + action.value))
+      }}
+    >
+      {action.label}
+    </button>
+  {/each}
+</div>
+
+<style lang="scss">
+  .scrollbox {
+    overflow-x: hidden;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+  }
+</style>

package/src/components/calendar/WeekCalendar.svelte

@@ -0,0 +1,116 @@
+<!--
+// 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 { createEventDispatcher } from 'svelte'
+  import ui, { Scroller, Label, deviceOptionsStore as deviceInfo } from '../..'
+  import { addZero, areDatesEqual, day as getDay, getWeekStart, getWeekDayName } from './internal/DateUtils'
+
+  export let cellHeight: string | undefined = undefined
+  export let selectedDate: Date = new Date()
+  export let currentDate: Date = selectedDate
+  export let displayedDaysCount = 7
+  export let displayedHours = 24
+  export let startFromWeekStart = true
+  // export let startHour = 0
+
+  const dispatch = createEventDispatcher()
+
+  const todayDate = new Date()
+
+  $: startDay = startFromWeekStart
+    ? getWeekStart(currentDate, $deviceInfo.firstDayOfWeek)
+    : new Date(new Date(currentDate).setHours(0, 0, 0, 0))
+
+  function getDate (startDate: Date, dayIndex: number, minutes: number): Date {
+    const date = getDay(startDate, dayIndex)
+    return new Date(date.setMinutes(date.getMinutes() + minutes))
+  }
+</script>
+
+<Scroller fade={{ multipler: { top: 3, bottom: 0 } }}>
+  <table>
+    <thead class="scroller-thead">
+      <tr class="scroller-thead__tr">
+        <th><Label label={ui.string.HoursLabel} /></th>
+        {#each [...Array(displayedDaysCount).keys()] as dayOfWeek}
+          {@const day = getDay(startDay, dayOfWeek)}
+          <th>
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            <div
+              class="cursor-pointer uppercase flex-col-center"
+              class:today={areDatesEqual(todayDate, day)}
+              on:click={() => {
+                dispatch('select', day)
+              }}
+            >
+              <div class="flex-center">{getWeekDayName(day, 'short')}</div>
+              <div class="flex-center">{day.getDate()}</div>
+            </div>
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#each [...Array(displayedHours).keys()] as hourOfDay}
+        <tr>
+          <td style="width: 50px;" class="calendar-td first">
+            {#if hourOfDay !== 0}
+              {addZero(hourOfDay)}:00
+            {/if}
+          </td>
+          {#each [...Array(displayedDaysCount).keys()] as dayIndex}
+            <td class="calendar-td cell" style:height={cellHeight}>
+              {#if $$slots.cell}
+                <slot name="cell" date={getDate(startDay, dayIndex, hourOfDay * 60)} />
+              {/if}
+            </td>
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</Scroller>
+
+<style lang="scss">
+  table {
+    table-layout: fixed;
+  }
+  table tr th:nth-child(1) {
+    width: 5rem;
+  }
+  .today {
+    color: var(--theme-caption-color);
+  }
+  .calendar-td {
+    &:not(.first) {
+      border: 1px solid var(--theme-table-border-color);
+    }
+    padding: 0;
+    margin: 0;
+    &.first {
+      display: flex;
+      margin-top: -0.5rem;
+    }
+  }
+  .cell {
+    padding: 2px;
+    width: calc(calc(100% - 50px) / 7);
+  }
+  .cell:hover {
+    color: var(--primary-button-color);
+    background-color: var(--highlight-hover);
+  }
+</style>

package/src/components/calendar/YearCalendar.svelte

@@ -0,0 +1,67 @@
+<!--
+// 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 MonthCalendar from './MonthCalendar.svelte'
+  import Scroller from '../Scroller.svelte'
+  import { defaultSP } from '../..'
+
+  export let selectedDate: Date = new Date()
+  export let currentDate: Date = selectedDate
+  export let cellHeight: string | undefined = undefined
+  export let minWidth = '18rem'
+
+  function getMonthName (date: Date): string {
+    return new Intl.DateTimeFormat('default', { month: 'long' }).format(date)
+  }
+  function month (date: Date, m: number): Date {
+    date = new Date(date)
+    date.setDate(1)
+    date.setMonth(m)
+    return date
+  }
+</script>
+
+<Scroller padding={'0 2.25rem'} fade={defaultSP}>
+  <div class="year-erp-calendar">
+    {#each [...Array(12).keys()] as m}
+      <div class="antiComponentBox flex-col flex-grow flex-wrap" style:min-width={minWidth}>
+        <span class="month-caption">{getMonthName(month(currentDate, m))}</span>
+        <MonthCalendar {cellHeight} weekFormat="narrow" bind:selectedDate currentDate={month(currentDate, m)} on:change>
+          <svelte:fragment slot="cell" let:date let:today let:selected let:wrongMonth>
+            <slot name="cell" {date} {today} {selected} {wrongMonth} />
+          </svelte:fragment>
+        </MonthCalendar>
+      </div>
+    {/each}
+  </div>
+</Scroller>
+
+<style lang="scss">
+  .year-erp-calendar {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(max(20rem, calc(100% / 5)), 1fr));
+    grid-auto-rows: 18.5rem;
+    row-gap: 1rem;
+    column-gap: 1rem;
+    border-collapse: collapse;
+  }
+  .month-caption {
+    margin: 0.5rem 0.75rem 0.75rem;
+    font-weight: 500;
+    font-size: 0.8125rem;
+    text-transform: uppercase;
+    color: var(--theme-dark-color);
+  }
+</style>

package/src/components/calendar/icons/DPCalendar.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  export let size: 'x-small' | 'small' | 'medium' | 'large' | 'full'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M28 24.0044C28 26.2136 26.2091 28 24 28H8C5.79086 28 4 26.2091 4 24V8C4 5.79086 5.79086 4 8 4H10V3C10 2.44772 10.4477 2 11 2C11.5523 2 12 2.44772 12 3V4H19.9995V3C19.9995 2.44772 20.4472 2 20.9995 2C21.5518 2 21.9995 2.44772 21.9995 3V4H24C26.2091 4 28 5.79086 28 8C28 11.5569 28 19.2641 28 24.0044ZM19.9995 6V7C19.9995 7.55228 20.4472 8 20.9995 8C21.5518 8 21.9995 7.55228 21.9995 7V6H24C25.1046 6 26 6.89543 26 8V12H6V8C6 6.89543 6.89543 6 8 6H10V7C10 7.55228 10.4477 8 11 8C11.5523 8 12 7.55228 12 7V6H19.9995ZM6 14V24C6 25.1046 6.89543 26 8 26H24C25.1046 26 26 25.1046 26 24V14H6Z"
+  />
+</svg>

package/src/components/calendar/icons/DPCalendarOver.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  export let size: 'x-small' | 'small' | 'medium' | 'large' | 'full'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M4 7.99988V23.9999C4 26.209 5.79086 27.9999 8 27.9999H17C17.5523 27.9999 18 27.5522 18 26.9999C18 26.4476 17.5523 25.9999 17 25.9999H8C6.89543 25.9999 6 25.1044 6 23.9999V13.9999H26V17C26 17.5523 26.4477 18 27 18C27.5523 18 28 17.5523 28 17V7.99988C28 5.79074 26.2091 3.99988 24 3.99988H21.9995V2.99988C21.9995 2.44759 21.5518 1.99988 20.9995 1.99988C20.4472 1.99988 19.9995 2.44759 19.9995 2.99988V3.99988H12V2.99988C12 2.44759 11.5523 1.99988 11 1.99988C10.4477 1.99988 10 2.44759 10 2.99988V3.99988H8C5.79086 3.99988 4 5.79074 4 7.99988ZM19.9995 5.99988V6.99988C19.9995 7.55216 20.4472 7.99988 20.9995 7.99988C21.5518 7.99988 21.9995 7.55216 21.9995 6.99988V5.99988H24C25.1046 5.99988 26 6.89531 26 7.99988V11.9999H6V7.99988C6 6.89531 6.89543 5.99988 8 5.99988H10V6.99988C10 7.55216 10.4477 7.99988 11 7.99988C11.5523 7.99988 12 7.55216 12 6.99988V5.99988H19.9995Z"
+  />
+  <path
+    d="M20.2929 21.7071C19.9024 21.3166 19.9024 20.6834 20.2929 20.2929C20.6834 19.9024 21.3166 19.9024 21.7071 20.2929L25 23.5858L28.2929 20.2929C28.6834 19.9024 29.3166 19.9024 29.7071 20.2929C30.0976 20.6834 30.0976 21.3166 29.7071 21.7071L26.4142 25L29.7071 28.2929C30.0976 28.6834 30.0976 29.3166 29.7071 29.7071C29.3166 30.0976 28.6834 30.0976 28.2929 29.7071L25 26.4136L21.6849 29.7287C21.2929 30.0975 20.6761 30.0903 20.2929 29.7071C19.9024 29.3166 19.9024 28.6834 20.2929 28.2929L23.5858 25L20.2929 21.7071Z"
+  />
+</svg>

package/src/components/calendar/icons/DPClock.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let size: 'x-small' | 'small' | 'medium' | 'large' | 'full'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12,1.2C6.1,1.2,1.2,6.1,1.2,12S6.1,22.8,12,22.8S22.8,17.9,22.8,12S17.9,1.2,12,1.2z M12,21.2c-5.1,0-9.2-4.2-9.2-9.2 S6.9,2.8,12,2.8s9.2,4.2,9.2,9.2S17.1,21.2,12,21.2z"
+  />
+  <path
+    d="M16.1,14.5L13,12.7c-0.3-0.2-0.6-0.7-0.6-1.1V7.5c0-0.4-0.3-0.8-0.8-0.8c-0.4,0-0.8,0.3-0.8,0.8v4.1c0,0.9,0.6,1.9,1.3,2.4 l3.1,1.9c0.1,0.1,0.2,0.1,0.4,0.1c0.2,0,0.5-0.1,0.7-0.4C16.6,15.2,16.5,14.7,16.1,14.5z"
+  />
+</svg>

package/src/components/calendar/icons/DPClockBold.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let size: 'x-small' | 'small' | 'medium' | 'large' | 'full'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12,22C6.5,22,2,17.5,2,12C2,6.5,6.5,2,12,2c5.5,0,10,4.5,10,10C22,17.5,17.5,22,12,22z M12,4c-4.4,0-8,3.6-8,8 c0,4.4,3.6,8,8,8c4.4,0,8-3.6,8-8C20,7.6,16.4,4,12,4z M17,13h-6V7h2v4h4V13z"
+  />
+</svg>

package/src/components/calendar/icons/DPEnd.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let size: 'x-small' | 'small' | 'medium' | 'large' | 'full'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12.2,15.1l2.6-2.6c0.3-0.3,0.3-0.8,0-1.1L12.2,9c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l1.3,1.3H4 c-0.4,0-0.8,0.3-0.8,0.8c0,0.4,0.3,0.8,0.8,0.8h8.4l-1.3,1.3c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.2,0.3,0.2,0.5,0.2S12.1,15.3,12.2,15.1z"
+  />
+  <path
+    d="M12,3.2c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8c4.3,0,7.2,3,7.2,7.2s-3,7.2-7.2,7.2c-0.4,0-0.8,0.3-0.8,0.8 s0.3,0.8,0.8,0.8c5.2,0,8.8-3.6,8.8-8.8S17.2,3.2,12,3.2z"
+  />
+</svg>

package/src/components/calendar/icons/DPSetCalendar.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let size: 'x-small' | 'small' | 'medium' | 'large' | 'full'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M15 5C15 2.79086 13.2091 1 11 1H5C2.79086 1 1 2.79086 1 5V11C1 13.2091 2.79086 15 5 15H6.25C6.66421 15 7 14.6642 7 14.25C7 13.8358 6.66421 13.5 6.25 13.5H5C3.61929 13.5 2.5 12.3807 2.5 11V6H13.5V6.25C13.5 6.66421 13.8358 7 14.25 7C14.6642 7 15 6.66421 15 6.25V5ZM11.5001 8C11.9143 8 12.2501 8.33579 12.2501 8.75V10.75L14.2501 10.75C14.6643 10.75 15.0001 11.0858 15.0001 11.5C15.0001 11.9142 14.6643 12.25 14.2501 12.25L12.2501 12.25V14.25C12.2501 14.6642 11.9143 15 11.5001 15C11.0859 15 10.7501 14.6642 10.7501 14.25V12.25H8.75C8.33579 12.25 8 11.9142 8 11.5C8 11.0858 8.33579 10.75 8.75 10.75L10.7501 10.75V8.75C10.7501 8.33579 11.0859 8 11.5001 8Z"
+  />
+</svg>

package/src/components/calendar/icons/DPStart.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let size: 'x-small' | 'small' | 'medium' | 'large' | 'full'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M20.5,11.5L18,9c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l1.3,1.3H9.8c-0.4,0-0.8,0.3-0.8,0.8 c0,0.4,0.3,0.8,0.8,0.8h8.4l-1.3,1.3c-0.3,0.3-0.3,0.8,0,1.1c0.2,0.2,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2l2.6-2.6 C20.8,12.3,20.8,11.8,20.5,11.5z"
+  />
+  <path
+    d="M11.8,19.2c-4.3,0-7.3-3-7.3-7.2s3-7.2,7.3-7.2c0.4,0,0.8-0.3,0.8-0.8s-0.3-0.8-0.8-0.8C6.6,3.2,3,6.8,3,12 s3.6,8.8,8.8,8.8c0.4,0,0.8-0.3,0.8-0.8S12.2,19.2,11.8,19.2z"
+  />
+</svg>