@hanzo/ui 0.5.23 → 0.6.15

package/src/components/calendar/internal/DateUtils.ts

@@ -0,0 +1,186 @@
+// 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.
+
+import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz'
+import { type TimeZone, capitalizeFirstLetter } from '../../..'
+
+export const DAYS_IN_WEEK = 7
+
+export const MILLISECONDS_IN_MINUTE = 60000
+export const MILLISECONDS_IN_DAY = 86400000
+export const MILLISECONDS_IN_WEEK = DAYS_IN_WEEK * MILLISECONDS_IN_DAY
+
+export function firstDay (date: Date, firstDay: number = 1): Date {
+  const firstDayOfMonth = new Date(new Date(date).setHours(0, 0, 0, 0))
+  firstDayOfMonth.setDate(1) // First day of month
+  const result = new Date(firstDayOfMonth)
+  result.setDate(result.getDate() - result.getDay() + firstDay)
+  // Check if we need add one more week
+  if (result.getTime() > firstDayOfMonth.getTime()) {
+    result.setDate(result.getDate() - DAYS_IN_WEEK)
+  }
+  return result
+}
+
+export function getWeek (date: Date): number {
+  const onejan = new Date(date.getFullYear(), 0, 1)
+  return Math.ceil(((date.getTime() - onejan.getTime()) / MILLISECONDS_IN_DAY + onejan.getDay() + 1) / DAYS_IN_WEEK)
+}
+
+export function daysInMonth (date: Date): number {
+  return 33 - new Date(date.getFullYear(), date.getMonth(), 33).getDate()
+}
+
+export function getWeekDayName (weekDay: Date, weekFormat: 'narrow' | 'short' | 'long' | undefined = 'short'): string {
+  const locale = new Intl.NumberFormat().resolvedOptions().locale
+  return new Intl.DateTimeFormat(locale, {
+    weekday: weekFormat
+  }).format(weekDay)
+}
+
+export function getWeekDayNames (): Map<number, string> {
+  const today: Date = new Date()
+  const offset: number = 0 - today.getDay()
+  const startDate: number = today.setTime(today.getTime() + MILLISECONDS_IN_DAY * offset)
+  const result: Map<number, string> = new Map<number, string>()
+  for (let i = 0; i < 7; i++) {
+    result.set(i, capitalizeFirstLetter(getWeekDayName(new Date(startDate + i * MILLISECONDS_IN_DAY), 'long')))
+  }
+  return result
+}
+
+export function day (firstDay: Date, offset: number): Date {
+  return new Date(new Date(firstDay).setDate(firstDay.getDate() + offset))
+}
+
+export function weekday (firstDay: Date, w: number, d: number): Date {
+  return day(firstDay, w * DAYS_IN_WEEK + d)
+}
+
+export function areDatesEqual (firstDate: Date | undefined, secondDate: Date | undefined): boolean {
+  if (firstDate === undefined || secondDate === undefined) {
+    return false
+  }
+  return (
+    firstDate.getFullYear() === secondDate.getFullYear() &&
+    firstDate.getMonth() === secondDate.getMonth() &&
+    firstDate.getDate() === secondDate.getDate()
+  )
+}
+
+export function fromCurrentToTz (date: Date | number, tz: string): Date {
+  return utcToZonedTime(zonedTimeToUtc(date, getUserTimezone()), tz)
+}
+
+export function fromTzToCurrent (date: Date | number, tz: string): Date {
+  return utcToZonedTime(zonedTimeToUtc(date, tz), getUserTimezone())
+}
+
+export function isWeekend (date: Date): boolean {
+  return date.getDay() === 0 || date.getDay() === 6
+}
+
+export function getMonthName (date: Date, option: 'narrow' | 'short' | 'long' | 'numeric' | '2-digit' = 'long'): string {
+  try {
+    const locale = new Intl.NumberFormat().resolvedOptions().locale
+    return new Intl.DateTimeFormat(locale, { month: option }).format(date)
+  } catch (err) {
+    console.error(err)
+    return ''
+  }
+}
+
+export type TCellStyle = 'not-selected' | 'selected'
+export interface ICell {
+  dayOfWeek: number
+  classes: TCellStyle
+}
+
+export function getLocalWeekStart (): number {
+  const locale = new Intl.Locale(navigator.language)
+  return typeof (locale as any)?.getWeekInfo === 'function'
+    ? (locale as any)?.getWeekInfo()?.firstDay
+    : (locale as any).weekInfo?.firstDay ?? 1
+}
+
+export function hasLocalWeekStart (): boolean {
+  const locale = new Intl.Locale(navigator.language)
+  return typeof (locale as any)?.getWeekInfo === 'function' || (locale as any).weekInfo?.firstDay !== undefined
+}
+
+export function getWeekStart (date: Date = new Date(), firstDay: number = 1): Date {
+  date = new Date(new Date(date).setHours(0, 0, 0, 0))
+  return new Date(date.setDate(date.getDate() - ((date.getDay() - firstDay + 7) % 7)))
+}
+
+export function addZero (value: number): string {
+  if (value < 10) {
+    return `0${value}`
+  }
+  return `${value}`
+}
+
+export const getDaysDifference = (from: Date, to: Date): number => {
+  const firstDateMs = from.setHours(0, 0, 0, 0)
+  const secondDateMs = to.setHours(0, 0, 0, 0)
+
+  return Math.round(Math.abs(secondDateMs - firstDateMs) / MILLISECONDS_IN_DAY)
+}
+
+export const getMillisecondsInMonth = (date: Date): number => {
+  return daysInMonth(date) * MILLISECONDS_IN_DAY
+}
+
+const WARNING_DAYS = 7
+
+export const getDueDateIconModifier = (
+  isOverdue: boolean,
+  daysDifference: number | null,
+  shouldIgnoreOverdue: boolean
+): 'overdue' | 'critical' | 'warning' | 'normal' => {
+  if (shouldIgnoreOverdue) return 'normal'
+  if (isOverdue) return 'overdue'
+  if (daysDifference === 0) return 'critical'
+  if (daysDifference !== null && daysDifference <= WARNING_DAYS) return 'warning'
+  return 'normal'
+}
+
+export function getFormattedDate (value: number | null, options?: Intl.DateTimeFormatOptions): string {
+  return value === null ? '' : new Date(value).toLocaleString('default', options ?? { month: 'short', day: 'numeric' })
+}
+
+export const getTimeZoneName = (
+  val: string = Intl.DateTimeFormat().resolvedOptions().timeZoneName ?? Intl.DateTimeFormat().resolvedOptions().timeZone
+): string => {
+  return val.replace('_', ' ').split('/')[1] ?? ''
+}
+
+export const convertTimeZone = (tz: string): TimeZone => {
+  const tzSpace = tz.replace(/_/gi, ' ')
+  const parts = tzSpace.split('/')
+  if (tz === '' || parts.length === 1) return { id: tz, continent: tzSpace, city: tzSpace, short: tzSpace }
+  return {
+    id: tz,
+    continent: parts[0],
+    city: parts.length > 2 ? `${parts[1]} - ${parts[2]}` : parts[1],
+    short: parts.length > 2 ? parts[2] : parts[1]
+  }
+}
+
+export function getUserTimezone (): string {
+  if (window.Intl !== undefined) {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone
+  } else {
+    return 'Etc/GMT'
+  }
+}

package/src/components/emoji/ActionsPopup.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  //
+  // © 2025 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+  import { createEventDispatcher } from 'svelte'
+  import type { Emoji } from 'emojibase'
+  import type { EmojiWithGroup } from '.'
+  import { EmojiButton, getEmoji, getSkinTone, emojiStore } from '.'
+  import { Label, IconDelete, closeTooltip, ButtonBase } from '../..'
+  import plugin from '../../plugin'
+  import SkinToneTooltip from './SkinToneTooltip.svelte'
+
+  export let emoji: EmojiWithGroup
+  export let remove: boolean = false
+  export let skinTone: number = getSkinTone()
+
+  const dispatch = createEventDispatcher()
+  closeTooltip()
+
+  const haveSkins = Array.isArray(emoji.skins)
+  const combinedEmoji = haveSkins && (emoji?.skins?.length ?? 0) > 5
+
+  const clickRemove = (): void => {
+    dispatch('close', 'remove')
+  }
+  const getEmojiParts = (e: EmojiWithGroup): EmojiWithGroup[] => {
+    const def = $emojiStore[168]
+    const temp = e.skins?.find((skin) => Array.isArray(skin.tone) && skin.tone.length > 1)?.hexcode.split('-200D-')
+    if (temp === undefined || temp.length < 2) return [def, def]
+    const firstEmoji = getEmoji(temp[0].slice(0, -6))?.emoji ?? def
+    const secondEmoji = getEmoji(temp[temp.length - 1].slice(0, -6))?.emoji ?? def
+    return [firstEmoji, secondEmoji]
+  }
+  const emojiParts = getEmojiParts(emoji)
+  const combinedTones: number[] = [skinTone, skinTone]
+
+  const updateSkinTone = (result: CustomEvent<{ detail: number }>, index: number): void => {
+    const res = result.detail
+    if (typeof res === 'number') {
+      combinedTones[index] = res
+      const nextIndex = index === 1 ? 0 : 1
+      if (res === 0 && combinedTones[nextIndex] !== 0) combinedTones[nextIndex] = 0
+      else if (res !== 0 && combinedTones[nextIndex] === 0) combinedTones[nextIndex] = res
+    }
+  }
+
+  const getEmojiByTone = (e: EmojiWithGroup, [a, b]: number[]): Emoji | undefined => {
+    const equal = a === b
+    const noTone = a === 0
+    return equal && noTone
+      ? e
+      : e.skins?.find((skin) =>
+        equal ? skin.tone === a : Array.isArray(skin.tone) && skin.tone[0] === a && skin.tone[1] === b
+      )
+  }
+  const getEmojiStringByTone = (e: EmojiWithGroup, [a, b]: number[]): string | undefined => {
+    return getEmojiByTone(e, [a, b])?.emoji
+  }
+</script>
+
+<div class="hulyPopup-container noPadding autoWidth">
+  {#if haveSkins}
+    {#if combinedEmoji && emojiParts?.length === 2}
+      <div class="hulyPopup-row disabled skins-row">
+        {#each new Array(2) as _, index}
+          <EmojiButton
+            emoji={emojiParts[index]}
+            skinTone={combinedTones[index]}
+            preview
+            showTooltip={{
+              component: SkinToneTooltip,
+              props: { emoji: emojiParts[index], selected: combinedTones[index] },
+              onUpdate: (result) => {
+                updateSkinTone(result, index)
+              }
+            }}
+          />
+          {#if index === 0}
+            <ButtonBase
+              type={'type-button-icon'}
+              kind={'tertiary'}
+              size={'large'}
+              on:click={() => {
+                dispatch('close', getEmojiByTone(emoji, combinedTones))
+              }}
+            >
+              <span style:font-size={'2.5rem'}>{getEmojiStringByTone(emoji, combinedTones)}</span>
+            </ButtonBase>
+          {/if}
+        {/each}
+      </div>
+    {:else}
+      <div class="hulyPopup-row disabled skins-row">
+        {#each new Array((emoji.skins?.length ?? 5) + 1) as _, skin}
+          <EmojiButton {emoji} skinTone={skin} preview on:select={(result) => dispatch('close', result.detail)} />
+        {/each}
+      </div>
+    {/if}
+  {/if}
+  {#if remove}
+    {#if haveSkins}<div class="hulyPopup-divider" />{/if}
+    <div class="hulyPopup-group">
+      <button class="hulyPopup-row" on:click={clickRemove}>
+        <div class="hulyPopup-row__icon red-color"><IconDelete size={'small'} /></div>
+        <span class="hulyPopup-row__label red-color"><Label label={plugin.string.Remove} /></span>
+      </button>
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .skins-row {
+    align-items: center;
+  }
+</style>

package/src/components/emoji/EmojiButton.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+  //
+  // © 2025 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+  import { createEventDispatcher } from 'svelte'
+  import { getEmbeddedLabel } from '@hanzo/platform'
+  import { tooltip, capitalizeFirstLetter, type EmojiWithGroup, type LabelAndProps } from '../../'
+  import { getEmoji } from '.'
+  import { type Emoji } from 'emojibase'
+
+  export let emoji: EmojiWithGroup
+  export let selected: boolean = false
+  export let disabled: boolean = false
+  export let preview: boolean = false
+  export let skinTone: number = 0
+  export let showTooltip: LabelAndProps | undefined = undefined
+
+  const dispatch = createEventDispatcher()
+
+  const getSkinsCount = (e: Emoji | EmojiWithGroup): number | undefined => {
+    return Array.isArray(e.skins) ? e.skins.length : undefined
+  }
+
+  let displayedEmoji: Emoji | EmojiWithGroup
+  $: _emoji = (getSkinsCount(emoji) ?? 0) > 0 ? emoji : getEmoji(emoji.hexcode)?.parent ?? emoji
+  $: skinIndex = _emoji?.skins?.findIndex((skin) => skin.tone === skinTone) ?? -1
+  $: displayedEmoji = skinTone > 0 && Array.isArray(_emoji.skins) && skinIndex > -1 ? _emoji.skins[skinIndex] : _emoji
+</script>
+
+{#if emoji}
+  <button
+    use:tooltip={showTooltip ?? { label: getEmbeddedLabel(capitalizeFirstLetter(displayedEmoji?.label ?? '')) }}
+    class="hulyPopupEmoji-button"
+    class:preview
+    class:selected
+    class:skins={_emoji?.skins !== undefined && _emoji.skins.length === 5}
+    class:constructor={_emoji?.skins !== undefined && _emoji.skins.length > 5}
+    data-skins={getSkinsCount(_emoji)}
+    {disabled}
+    on:touchstart
+    on:contextmenu
+    on:click={() => {
+      if (disabled) return
+      dispatch('select', displayedEmoji)
+    }}
+  >
+    <span>{displayedEmoji.emoji}</span>
+  </button>
+{/if}
+
+<style lang="scss">
+  .hulyPopupEmoji-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    line-height: 150%;
+    border: 1px solid transparent;
+
+    &:not(.preview) {
+      margin: 0.125rem;
+      padding: 0.25rem;
+      width: 2.75rem;
+      height: 2.75rem;
+      font-size: 2rem;
+      border-radius: 0.75rem;
+    }
+    &.preview {
+      margin: 0;
+      padding: 0;
+      width: 2.25rem;
+      height: 2.25rem;
+      font-size: 1.75rem;
+      border-radius: 0.375rem;
+    }
+    span {
+      transform: translateY(1%);
+      pointer-events: none;
+    }
+    &:enabled:hover {
+      background-color: var(--theme-popup-hover);
+    }
+
+    &.selected {
+      border-color: var(--button-primary-BorderColor);
+      background-color: var(--button-primary-BackgroundColor);
+
+      &:not(.disabled, :disabled):hover {
+        background-color: var(--button-primary-hover-BackgroundColor);
+      }
+    }
+
+    :global(.mobile-theme) & {
+      width: 2rem;
+      height: 2rem;
+      font-size: 1.5rem;
+      border-radius: 0.25rem;
+    }
+
+    &.skins:not(.preview) {
+      position: relative;
+      border: 1px dashed var(--theme-button-border);
+
+      &:hover {
+        &::after {
+          content: '';
+          position: absolute;
+          top: -0.375rem;
+          right: -0.375rem;
+          width: 1rem;
+          height: 1rem;
+          border-radius: 50%;
+          background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 8 8' style='enable-background:new 0 0 8 8;' xml:space='preserve'%3E%3Cg%3E%3Ccircle fill='%23FFC92C' cx='5.3' cy='1.3' r='1.3' /%3E%3Ccircle fill='%23BF8F68' cx='2.7' cy='6' r='1.3' /%3E%3Ccircle fill='%23E0BB95' cx='5.3' cy='6' r='1.3' /%3E%3Ccircle fill='%239B643D' cx='1.3' cy='3.6' r='1.3' /%3E%3Ccircle fill='%23594539' cx='2.7' cy='1.3' r='1.3' /%3E%3Ccircle fill='%23FADCBC' cx='6.7' cy='3.6' r='1.3' /%3E%3C/g%3E%3C/svg%3E%0A");
+        }
+      }
+    }
+    &.constructor:not(.preview) {
+      position: relative;
+      border: 1px dashed var(--theme-button-border);
+
+      &:hover {
+        &::before {
+          content: '';
+          position: absolute;
+          top: -0.25rem;
+          right: -0.25rem;
+          width: 1rem;
+          height: 1rem;
+          border-radius: 50%;
+          background-color: var(--global-focus-BorderColor);
+        }
+        &::after {
+          content: attr(data-skins);
+          position: absolute;
+          top: 0.25rem;
+          right: 0.25rem;
+          font-size: 0.625rem;
+          font-weight: 700;
+          color: #fff;
+          transform: translate(50%, -50%);
+        }
+      }
+    }
+  }
+</style>

package/src/components/emoji/EmojiGroup.svelte

@@ -0,0 +1,105 @@
+<!--
+// Copyright © 2025 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 { Label, Lazy } from '../../index'
+  import EmojiGroupPalette from './EmojiGroupPalette.svelte'
+  import { resultEmojis, EmojiWithGroup, EmojiCategory } from '.'
+
+  import plugin from '../../plugin'
+
+  export let group: EmojiCategory
+  export let lazy: boolean = true
+  export let searching: boolean = false
+  export let disabled: boolean = false
+  export let selected: string | undefined = undefined
+  export let skinTone: number = 0
+  export let kind: 'default' | 'fade' = 'fade'
+
+  let emojis: EmojiWithGroup[] = []
+  $: emojis = searching
+    ? $resultEmojis
+    : Array.isArray(group.emojis)
+      ? group.emojis
+      : $resultEmojis.filter((re) => re.key === group.id)
+</script>
+
+<div class="hulyPopupEmoji-group kind-{kind}" class:lazy>
+  <div id={group.id} class="hulyPopupEmoji-group__header categoryHeader">
+    <Label label={searching && $resultEmojis.length === 0 ? plugin.string.NoResults : group.label} />
+  </div>
+  {#if lazy}
+    <Lazy>
+      <EmojiGroupPalette {emojis} {disabled} {selected} {skinTone} on:select on:touchstart on:contextmenu />
+    </Lazy>
+  {:else}
+    <EmojiGroupPalette {emojis} {disabled} {selected} {skinTone} on:select on:touchstart on:contextmenu />
+  {/if}
+</div>
+
+<style lang="scss">
+  .hulyPopupEmoji-group {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    min-width: 0;
+    min-height: 0;
+
+    &.lazy {
+      min-height: 10rem;
+    }
+
+    &__header {
+      position: sticky;
+      flex-shrink: 0;
+      margin: 0.75rem 0.75rem 0.25rem;
+      padding: 0.25rem 0.375rem;
+      top: 0;
+      height: 1.5rem;
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      text-shadow: 0 0 0.25rem var(--theme-popup-color);
+      color: var(--theme-caption-color);
+      border-radius: 0.25rem;
+      z-index: 1;
+      pointer-events: none;
+
+      &:first-child {
+        margin-top: 0;
+      }
+      &::before {
+        content: '';
+        position: absolute;
+        top: -1px;
+        left: 0;
+        width: 100%;
+        height: 150%;
+        background: var(--theme-popup-trans-gradient);
+        z-index: -1;
+      }
+    }
+
+    &.kind-default {
+      .hulyPopupEmoji-group__header {
+        background: var(--theme-popup-header);
+
+        &::before {
+          content: none;
+        }
+      }
+    }
+  }
+</style>

package/src/components/emoji/EmojiGroupPalette.svelte

@@ -0,0 +1,58 @@
+<!--
+// Copyright © 2025 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 type { EmojiWithGroup } from '.'
+
+  import EmojiButton from './EmojiButton.svelte'
+
+  export let emojis: EmojiWithGroup[]
+  export let selected: string | undefined
+  export let disabled: boolean = false
+  export let skinTone: number = 0
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<div class="hulyPopupEmoji-group__palette">
+  {#each emojis as emoji}
+    <EmojiButton
+      {emoji}
+      selected={emoji.emoji === selected}
+      {disabled}
+      {skinTone}
+      on:select
+      on:touchstart={(event) => {
+        dispatch('touchstart', { event, emoji })
+      }}
+      on:contextmenu={(event) => {
+        dispatch('contextmenu', { event, emoji })
+      }}
+    />
+  {/each}
+  <div class="clear-mins flex-grow" />
+</div>
+
+<style lang="scss">
+  .hulyPopupEmoji-group__palette {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    flex-shrink: 0;
+    margin-inline: 0.75rem;
+    font-size: 1.25rem;
+  }
+</style>