@hanzo/ui 0.5.24 → 0.6.15

package/src/components/DropdownRecordPopup.svelte

@@ -0,0 +1,82 @@
+<!--
+// 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 { IntlString } from '@hanzo/platform'
+  import { createEventDispatcher } from 'svelte'
+  import { resizeObserver } from '..'
+  import CheckBox from './CheckBox.svelte'
+  import Label from './Label.svelte'
+  import ListView from './ListView.svelte'
+
+  export let items: Record<any, IntlString>
+  export let selected: any | undefined = undefined
+
+  const dispatch = createEventDispatcher()
+
+  let selection = 0
+  let list: ListView
+  $: objects = Object.entries(items)
+
+  async function handleSelection (evt: Event | undefined, selection: number): Promise<void> {
+    const item = items[selection]
+
+    dispatch('close', item)
+  }
+
+  function onKeydown (key: KeyboardEvent): void {
+    if (key.code === 'ArrowUp') {
+      key.stopPropagation()
+      key.preventDefault()
+      list.select(selection - 1)
+    }
+    if (key.code === 'ArrowDown') {
+      key.stopPropagation()
+      key.preventDefault()
+      list.select(selection + 1)
+    }
+    if (key.code === 'Enter') {
+      key.preventDefault()
+      key.stopPropagation()
+      handleSelection(key, selection)
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')} on:keydown={onKeydown}>
+  <div class="menu-space" />
+  <div class="scroll">
+    <div class="box">
+      <ListView bind:this={list} count={objects.length} bind:selection>
+        <svelte:fragment slot="item" let:item={idx}>
+          {@const item = objects[idx]}
+
+          <button
+            class="menu-item flex-between w-full"
+            on:click={() => {
+              dispatch('close', item[0])
+            }}
+          >
+            <div class="flex-grow caption-color lines-limit-2"><Label label={item[1]} /></div>
+            {#if item[0] === selected}
+              <div class="check"><CheckBox checked kind={'primary'} /></div>
+            {/if}
+          </button>
+        </svelte:fragment>
+      </ListView>
+    </div>
+  </div>
+  <div class="menu-space" />
+</div>

package/src/components/EditBox.svelte

@@ -0,0 +1,211 @@
+<!--
+// 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 type { IntlString } from '@hanzo/platform'
+  import { translateCB } from '@hanzo/platform'
+  import { themeStore } from '@hcengineering/theme'
+  import { createEventDispatcher, onMount } from 'svelte'
+  import { registerFocus } from '../focus'
+  import plugin from '../plugin'
+  import type { EditStyle } from '../types'
+  import { floorFractionDigits } from '../utils'
+  import Label from './Label.svelte'
+
+  export let id: string | undefined = undefined
+  export let label: IntlString | undefined = undefined
+  export let maxWidth: string = '100%'
+  export let value: string | number | undefined = undefined
+  export let placeholder: IntlString = plugin.string.EditBoxPlaceholder
+  export let placeholderParam: any | undefined = undefined
+  export let format: 'text' | 'password' | 'number' | 'text-multiline' = 'text'
+  export let maxDigitsAfterPoint: number | undefined = undefined
+  export let kind: EditStyle = 'editbox'
+  export let autoFocus: boolean = false
+  export let select: boolean = false
+  export let focusable: boolean = false
+  export let disabled: boolean = false
+  export let fullSize: boolean = false
+  export let required: boolean = false
+  export let uppercase: boolean = false
+  export let propagateClick: boolean = false
+
+  const dispatch = createEventDispatcher()
+
+  let input: HTMLInputElement | HTMLTextAreaElement
+  let phTranslate: string = ''
+
+  $: {
+    if (
+      format === 'number' &&
+      maxDigitsAfterPoint &&
+      value &&
+      !value.toString().match(`^\\d+\\.?\\d{0,${maxDigitsAfterPoint}}$`)
+    ) {
+      value = floorFractionDigits(Number(value), maxDigitsAfterPoint)
+    }
+  }
+  $: translateCB(placeholder, placeholderParam ?? {}, $themeStore.language, (res) => {
+    phTranslate = res
+  })
+
+  function handleInput (): void {
+    dispatch('input')
+    dispatch('value', value)
+  }
+
+  onMount(() => {
+    if (autoFocus) {
+      input.focus()
+      autoFocus = false
+    }
+    if (select) {
+      input.select()
+      select = false
+    }
+  })
+
+  export function focusInput (): void {
+    input?.focus()
+  }
+  export function selectInput (): void {
+    input?.select()
+  }
+
+  // Focusable control with index
+  export let focusIndex = -1
+  const { idx, focusManager } = registerFocus(focusIndex, {
+    focus: () => {
+      focusInput()
+      return input != null
+    },
+    isFocus: () => document.activeElement === input
+  })
+  const updateFocus = () => {
+    focusManager?.setFocus(idx)
+  }
+  $: if (input) {
+    input.addEventListener('focus', updateFocus)
+  }
+
+  export function focus (): void {
+    input.focus()
+  }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  {id}
+  class="antiEditBox"
+  class:flex-grow={fullSize}
+  class:w-full={focusable || fullSize}
+  class:uppercase
+  style:width={maxWidth}
+  on:mousedown|stopPropagation={() => {}}
+  on:click={(event) => {
+    if (!propagateClick) {
+      event.stopPropagation()
+    }
+
+    input.focus()
+  }}
+>
+  <!-- {focusIndex} -->
+  {#if label}
+    <div class="mb-1 text-sm font-medium caption-color select-text" class:required>
+      <Label {label} />
+    </div>
+  {/if}
+  <div
+    class="{kind} flex-row-center clear-mins"
+    class:focusable
+    class:disabled
+    class:w-full={fullSize}
+    style:width={maxWidth}
+  >
+    {#if format === 'text-multiline'}
+      <div class="antiEditBoxGridWrapper" data-value={value}>
+        <textarea
+          rows="1"
+          class="antiEditBoxInput"
+          {disabled}
+          style:width={maxWidth}
+          bind:this={input}
+          bind:value
+          placeholder={phTranslate}
+          on:input={handleInput}
+          on:change
+          on:keydown
+          on:keypress
+          on:blur={() => {
+            dispatch('blur', value)
+          }}
+        />
+      </div>
+    {:else if format === 'password'}
+      <input
+        class="antiEditBoxInput"
+        {disabled}
+        style:width={maxWidth}
+        id="userPassword"
+        bind:this={input}
+        type="Password"
+        bind:value
+        placeholder={phTranslate}
+        on:input={handleInput}
+        on:change
+        on:keydown
+        on:keypress
+        on:blur={() => {
+          dispatch('blur', value)
+        }}
+      />
+    {:else if format === 'number'}
+      <input
+        class="antiEditBoxInput number"
+        {disabled}
+        style:width={maxWidth}
+        bind:this={input}
+        type="number"
+        bind:value
+        placeholder={phTranslate}
+        on:input={handleInput}
+        on:change
+        on:keydown
+        on:keypress
+        on:blur={() => {
+          dispatch('blur', value)
+        }}
+      />
+    {:else}
+      <input
+        class="antiEditBoxInput"
+        {disabled}
+        style:width={maxWidth}
+        bind:this={input}
+        type="text"
+        bind:value
+        placeholder={phTranslate}
+        on:input={handleInput}
+        on:change
+        on:keydown
+        on:keypress
+        on:blur={() => {
+          dispatch('blur', value)
+        }}
+      />
+    {/if}
+  </div>
+</div>

package/src/components/EditWithIcon.svelte

@@ -0,0 +1,130 @@
+<!--
+// 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 type { Asset, IntlString } from '@hanzo/platform'
+  import { translateCB } from '@hanzo/platform'
+  import { themeStore } from '@hcengineering/theme'
+  import { ComponentType, createEventDispatcher } from 'svelte'
+
+  import plugin from '../plugin'
+  import type { AnySvelteComponent } from '../types'
+  import Button from './Button.svelte'
+  import Icon from './Icon.svelte'
+  import IconClose from './icons/Close.svelte'
+  import Spinner from './Spinner.svelte'
+
+  export let icon: Asset | AnySvelteComponent | ComponentType
+  export let width: string | undefined = undefined
+  export let value: string | undefined = ''
+  export let placeholder: IntlString = plugin.string.EditBoxPlaceholder
+  export let placeholderParam: any | undefined = undefined
+  export let autoFocus: boolean = false
+  export let kind: 'ghost' | 'secondary' = 'ghost'
+  export let size: 'small' | 'medium' | 'large' = 'medium'
+  export let loading = false
+
+  const dispatch = createEventDispatcher()
+  let textHTML: HTMLInputElement
+  let phTranslate: string = ''
+
+  export function focus (): void {
+    textHTML.focus()
+    autoFocus = false
+  }
+
+  $: translateCB(placeholder, placeholderParam ?? {}, $themeStore.language, (res) => {
+    phTranslate = res
+  })
+  $: if (textHTML !== undefined) {
+    if (autoFocus) focus()
+  }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="flex-between editbox {kind} {size}"
+  style={width != null ? 'width: ' + width : ''}
+  on:click={() => {
+    textHTML.focus()
+  }}
+>
+  <div class="mr-2 content-dark-color"><Icon {icon} size={'small'} /></div>
+  <input bind:this={textHTML} type="text" bind:value placeholder={phTranslate} on:change on:input on:keydown />
+  <slot name="extra" />
+  <div class="flex-row-center flex-no-shrink">
+    {#if value}
+      <div class="ml-2 flex-no-shrink">
+        <Button
+          icon={IconClose}
+          kind={'ghost'}
+          size={'small'}
+          noFocus
+          on:click={() => {
+            value = ''
+            dispatch('change', '')
+            textHTML.focus()
+          }}
+        />
+      </div>
+    {/if}
+    {#if loading}
+      <div class="ml-1 mr-2">
+        <Spinner size={'medium'} />
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  .editbox {
+    padding: 0 0.25rem 0 0.5rem;
+    min-width: 8rem;
+    color: var(--theme-caption-color);
+    border-radius: 0.25rem;
+
+    &.small {
+      height: 1.5rem;
+    }
+    &.medium {
+      height: 2rem;
+    }
+    &.large {
+      height: 2.25rem;
+    }
+    &:focus-within {
+      background-color: var(--theme-editbox-focus-color);
+      box-shadow: 0 0 0 1px var(--theme-editbox-focus-border);
+    }
+
+    input {
+      width: 100%;
+      caret-color: var(--theme-caret-color);
+      border: none;
+      border-radius: 0.25rem;
+
+      &::placeholder {
+        color: var(--theme-dark-color);
+      }
+    }
+
+    &.secondary {
+      padding: var(--spacing-1);
+      background-color: var(--theme-button-default);
+      border: 1px solid var(--theme-button-border);
+      border-radius: var(--small-BorderRadius);
+    }
+  }
+</style>

package/src/components/EmbeddedPDF.svelte

@@ -0,0 +1,88 @@
+<!--
+// 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 { onDestroy } from 'svelte'
+  import Loading from './Loading.svelte'
+
+  export let src: string
+  export let name: string
+  export let fit: boolean = false
+  export let css: string | undefined = undefined
+
+  let iframeSrc: string | undefined = undefined
+
+  async function loadFile (src: string): Promise<void> {
+    if (iframeSrc !== undefined) {
+      URL.revokeObjectURL(iframeSrc)
+      iframeSrc = undefined
+    }
+
+    const response = await fetch(src)
+    const blob = await response.blob()
+    iframeSrc = URL.createObjectURL(blob)
+  }
+
+  $: void loadFile(src)
+
+  let iframe: HTMLIFrameElement | undefined = undefined
+
+  // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+  $: if (css !== undefined && iframe !== undefined && iframe !== null) {
+    iframe.onload = () => {
+      const head = iframe?.contentDocument?.querySelector('head')
+
+      // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+      if (css !== undefined && head !== undefined && head !== null) {
+        head.appendChild(document.createElement('style')).textContent = css
+      }
+    }
+
+    if (iframe.contentDocument !== undefined) {
+      const style = iframe.contentDocument?.querySelector('head style')
+
+      if (style != null) {
+        style.textContent = css
+      }
+    }
+  }
+
+  onDestroy(() => {
+    if (iframeSrc !== undefined) {
+      URL.revokeObjectURL(iframeSrc)
+    }
+  })
+</script>
+
+{#if iframeSrc}
+  <iframe bind:this={iframe} class:fit src={iframeSrc + '#view=FitH&navpanes=0'} title={name} on:load />
+{:else}
+  <Loading />
+{/if}
+
+<style lang="scss">
+  iframe {
+    width: 100%;
+    border: none;
+
+    &.fit {
+      min-height: 100%;
+    }
+    &:not(.fit) {
+      height: 80vh;
+      min-height: 20rem;
+    }
+  }
+</style>

package/src/components/ErrorPopup.svelte

@@ -0,0 +1,27 @@
+<!--
+// Copyright © 2020, 2021 Hanzo <dev@hanzo.ai>.
+// Copyright © 2021 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">
+  export let error: any
+</script>
+
+{error.message}
+<pre>
+  {#if error?.status?.params}
+    {JSON.stringify(error.status.params, undefined, 2)}
+  {:else}
+    {JSON.stringify(error, undefined, 2)}
+  {/if}
+</pre>

package/src/components/ErrorPresenter.svelte

@@ -0,0 +1,32 @@
+<!--
+// Copyright © 2020, 2021 Hanzo <dev@hanzo.ai>.
+// Copyright © 2021 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 { tooltip } from '../tooltips'
+  import ErrorPopup from './ErrorPopup.svelte'
+  export let error: any
+</script>
+
+<div use:tooltip={{ component: ErrorPopup, props: { error } }}>
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="10" cy="10" r="7.275" stroke="#EE7A7A" stroke-width="1.2" />
+    <path
+      d="M9.51371 11.6902L9.51636 11.7875H9.61367H10.4137H10.511L10.5136 11.6902L10.6886 5.27772L10.6914 5.17499H10.5887H9.43867H9.33591L9.33871 5.27772L9.51371 11.6902ZM10.0012 14.375C10.4929 14.375 10.9012 13.9812 10.9012 13.475C10.9012 12.9687 10.4929 12.575 10.0012 12.575C9.50947 12.575 9.10117 12.9687 9.10117 13.475C9.10117 13.9812 9.50947 14.375 10.0012 14.375Z"
+      fill="#EE7A7A"
+      stroke="#EE7A7A"
+      stroke-width="0.2"
+    />
+  </svg>
+</div>

package/src/components/ExpandCollapse.svelte

@@ -0,0 +1,42 @@
+<!--
+// 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 { afterUpdate, createEventDispatcher } from 'svelte'
+
+  export let isExpanded = false
+
+  const dispatch = createEventDispatcher()
+  afterUpdate(() => dispatch('changeContent'))
+</script>
+
+<div class="root" hidden={!isExpanded}>
+  <div class="flex-no-shrink clear-mins">
+    <slot />
+  </div>
+</div>
+
+<style lang="scss">
+  .root {
+    min-height: 0;
+    flex-shrink: 0;
+
+    &::-webkit-scrollbar:vertical {
+      width: 0;
+    }
+    &::-webkit-scrollbar:horizontal {
+      height: 0;
+    }
+  }
+</style>