@svgrid/enterprise 3.0.1 → 3.0.3

package/dist/SvSheetGoalSeek.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+  /**
+   * Excel's Goal Seek: set a formula cell to a value by changing one input
+   * cell. The solver restores the input while it searches and the status
+   * page shows what it found; OK keeps the answer through the command
+   * context, so it lands in the grid's history like a typed number.
+   */
+  import { useSheetText } from './sheet-text'
+  import { untrack } from 'svelte'
+  import { SvModal } from '@svgrid/grid'
+  import type { GridCommandContext } from '@svgrid/grid/shortcuts'
+  import type { Workbook } from './sheet/workbook'
+  import { goalSeekCell, type GoalSeekResult } from './sheet/goal-seek'
+  import { parseA1, colToLetters } from './sheet/address'
+
+  type Props = {
+    open?: boolean
+    workbook: Workbook
+    /** The command context the dialog was opened with. */
+    cmd: () => GridCommandContext | null
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), workbook, cmd, onClose }: Props = $props()
+  const t = useSheetText()
+
+  let step = $state<'ask' | 'done'>('ask')
+  let setCell = $state('')
+  let toValue = $state('')
+  let byCell = $state('')
+  let problem = $state<string | null>(null)
+  let found = $state<GoalSeekResult | null>(null)
+  let firstInput = $state<HTMLInputElement | null>(null)
+
+  // The active cell is the natural "Set cell", as it is in Excel.
+  $effect(() => {
+    if (!open) return
+    untrack(prepare)
+  })
+
+  function prepare() {
+    const at = cmd()?.activeCell
+    setCell = at ? `${colToLetters(at.colIndex)}${at.rowIndex + 1}` : ''
+    toValue = ''
+    byCell = ''
+    step = 'ask'
+    problem = null
+    found = null
+    queueMicrotask(() => firstInput?.focus())
+  }
+
+  function address(text: string): { row: number; col: number } | null {
+    const ref = parseA1(text.trim().toUpperCase())
+    return ref && ref.row !== null ? { row: ref.row, col: ref.col } : null
+  }
+
+  function solve() {
+    const formula = address(setCell)
+    const input = address(byCell)
+    const target = Number(toValue)
+    if (!formula) { problem = t('goalSeek.notAddress', { text: setCell }); return }
+    if (!input) { problem = t('goalSeek.notAddress', { text: byCell }); return }
+    if (toValue.trim() === '' || !Number.isFinite(target)) { problem = t('goalSeek.toValueNumber'); return }
+    const sheet = workbook.active
+    if (!workbook.getRaw(sheet, formula.row, formula.col).startsWith('=')) {
+      problem = t('goalSeek.needsFormula', { cell: setCell.toUpperCase() })
+      return
+    }
+    if (workbook.getRaw(sheet, input.row, input.col).startsWith('=')) {
+      problem = `${byCell.toUpperCase()} must contain a value, not a formula`
+      return
+    }
+    found = goalSeekCell(workbook, { sheet, ...formula }, { sheet, ...input }, target, { maxIterations: 100 })
+    problem = null
+    step = 'done'
+  }
+
+  function keep() {
+    const input = address(byCell)
+    const c = cmd()
+    if (!input || !found || !c) return
+    c.setCellValue(input.row, input.col, String(round(found.value)))
+    c.setActiveCell(input.row, input.col)
+    close()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+
+  const round = (n: number) => Number(n.toFixed(4))
+  const money = (n: number) => n.toLocaleString('en-US', { maximumFractionDigits: 2 })
+</script>
+
+<SvModal bind:open onClose={onClose} title={t(step === 'ask' ? 'goalSeek.title' : 'goalSeek.statusTitle')} size="sm">
+  {#if step === 'ask'}
+    <form class="sv-sheet-dialog" onsubmit={(e) => { e.preventDefault(); solve() }}>
+      <label class="field">
+        <span>{t('goalSeek.setCell')}</span>
+        <input bind:this={firstInput} type="text" bind:value={setCell} spellcheck="false" />
+      </label>
+      <label class="field">
+        <span>{t('goalSeek.toValue')}</span>
+        <input type="text" bind:value={toValue} inputmode="decimal" />
+      </label>
+      <label class="field">
+        <span>{t('goalSeek.byChanging')}</span>
+        <input type="text" bind:value={byCell} spellcheck="false" />
+      </label>
+      {#if problem}<p class="status problem" role="alert">{problem}</p>{/if}
+    </form>
+  {:else if found}
+    <div class="sv-sheet-dialog">
+      <p class="lead">
+        {t(found.converged ? 'goalSeek.found' : 'goalSeek.notFound', { cell: setCell.toUpperCase() })}
+      </p>
+      <dl class="facts">
+        <dt>{t('goalSeek.target')}</dt><dd>{money(Number(toValue))}</dd>
+        <dt>{t('goalSeek.current')}</dt><dd>{money(found.result)}</dd>
+        <dt>{t('goalSeek.becomes', { cell: byCell.toUpperCase() })}</dt><dd>{money(round(found.value))}</dd>
+      </dl>
+      <p class="status">{t('goalSeek.iterations', { count: found.iterations })}</p>
+    </div>
+  {/if}
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      <button type="button" class="btn primary" onclick={step === 'ask' ? solve : keep}>{t('ok')}</button>
+      <button type="button" class="btn" onclick={close}>{t('cancel')}</button>
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .lead { margin: 0; }
+  .facts {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 4px 12px;
+    margin: 0;
+  }
+  .facts dt { color: var(--sg-muted, #616161); }
+  .facts dd { margin: 0; font-variant-numeric: tabular-nums; }
+  .problem { color: var(--sg-danger, #dc2626); }
+</style>

package/dist/SvSheetGoalSeek.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { GridCommandContext } from '@svgrid/grid/shortcuts';
+import type { Workbook } from './sheet/workbook.js';
+type Props = {
+    open?: boolean;
+    workbook: Workbook;
+    /** The command context the dialog was opened with. */
+    cmd: () => GridCommandContext | null;
+    onClose?: () => void;
+};
+declare const SvSheetGoalSeek: import("svelte").Component<Props, {}, "open">;
+type SvSheetGoalSeek = ReturnType<typeof SvSheetGoalSeek>;
+export default SvSheetGoalSeek;

package/dist/SvSheetInsertFunction.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  /**
+   * Excel's Insert Function: search or pick a category, choose a function,
+   * read its argument list and what it does, and OK starts the active cell
+   * on `=NAME(` with the caret inside the parentheses, where the formula
+   * bar's autocomplete and signature hint take over. Excel follows with a
+   * Function Arguments dialog; typing the arguments in place with the
+   * signature shown is the same information with less chrome.
+   */
+  import { useSheetText } from './sheet-text'
+  import { SvModal } from '@svgrid/grid'
+  import { functionCatalog, FUNCTION_GROUPS, type FunctionGroup, type FunctionInfo } from './sheet/function-catalog'
+
+  type Props = {
+    open?: boolean
+    onPick: (name: string) => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), onPick, onClose }: Props = $props()
+  const t = useSheetText()
+
+  const all = functionCatalog()
+  let search = $state('')
+  let group = $state<FunctionGroup | 'All'>('All')
+  let selected = $state<string>(all[0]?.name ?? '')
+  let searchInput = $state<HTMLInputElement | null>(null)
+
+  const shown = $derived.by<FunctionInfo[]>(() => {
+    const needle = search.trim().toUpperCase()
+    return all.filter((f) =>
+      (group === 'All' || f.group === group) &&
+      (needle === '' || f.name.includes(needle) || f.description.toUpperCase().includes(needle)),
+    )
+  })
+  const current = $derived(all.find((f) => f.name === selected) ?? null)
+
+  // The highlighted function follows the filter, so Enter always inserts
+  // something visible.
+  $effect(() => {
+    if (shown.length && !shown.some((f) => f.name === selected)) selected = shown[0]!.name
+  })
+  $effect(() => {
+    if (open) queueMicrotask(() => searchInput?.focus())
+  })
+
+  function ok() {
+    if (!current) return
+    onPick(current.name)
+    open = false
+    onClose?.()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+
+  function onListKey(event: KeyboardEvent) {
+    const index = shown.findIndex((f) => f.name === selected)
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      selected = shown[Math.min(index + 1, shown.length - 1)]?.name ?? selected
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      selected = shown[Math.max(index - 1, 0)]?.name ?? selected
+    } else if (event.key === 'Enter') {
+      event.preventDefault()
+      ok()
+    }
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} title={t('insertFunction.title')} size="md">
+  <div class="sv-sheet-dialog insert" role="group" aria-label={t('insertFunction.title')}>
+    <label class="field">
+      <span>{t('insertFunction.search')}</span>
+      <input bind:this={searchInput} type="text" bind:value={search} onkeydown={onListKey} spellcheck="false" autocomplete="off" placeholder={t('insertFunction.searchPlaceholder')} />
+    </label>
+    <label class="field">
+      <span>{t('insertFunction.category')}</span>
+      <select bind:value={group}>
+        <option value="All">{t('insertFunction.all')}</option>
+        {#each FUNCTION_GROUPS as g (g)}
+          <option value={g}>{t(`insertFunction.group.${g}`)}</option>
+        {/each}
+      </select>
+    </label>
+    <div class="label">{t('insertFunction.select')}</div>
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <ul class="list" role="listbox" aria-label={t('insertFunction.functions')} tabindex="0" onkeydown={onListKey}>
+      {#each shown as fn (fn.name)}
+        <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
+        <li
+          role="option"
+          aria-selected={fn.name === selected}
+          class:selected={fn.name === selected}
+          onclick={() => (selected = fn.name)}
+          ondblclick={ok}
+        >{fn.name}</li>
+      {:else}
+        <li class="empty">{t('insertFunction.noMatch')}</li>
+      {/each}
+    </ul>
+    {#if current}
+      <div class="about">
+        <div class="signature">{current.signature}</div>
+        <div class="description">{current.description || t('insertFunction.noDescription')}</div>
+      </div>
+    {/if}
+  </div>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      <button type="button" class="btn primary" onclick={ok} disabled={!current}>{t('ok')}</button>
+      <button type="button" class="btn" onclick={close}>{t('cancel')}</button>
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .label { font-weight: 600; }
+  .insert :global(.field) { grid-template-columns: 160px 1fr; }
+  .list {
+    height: 160px;
+    margin: 0;
+    padding: 2px 0;
+    overflow-y: auto;
+    list-style: none;
+    background: var(--sg-bg, #fff);
+    border: 1px solid var(--sg-border, #d1d1d1);
+    border-radius: var(--sg-radius, 3px);
+    font-family: ui-monospace, Consolas, monospace;
+    font-size: 12px;
+  }
+  .list:focus { outline: none; border-color: var(--sg-accent, #217346); }
+  .list li {
+    padding: 2px 8px;
+    cursor: default;
+  }
+  .list li:hover { background: var(--sg-row-hover-bg, #f5f5f5); }
+  .list li.selected {
+    color: var(--sg-on-accent, #fff);
+    background: var(--sg-accent, #217346);
+  }
+  .list li.empty { color: var(--sg-muted, #616161); font-family: inherit; }
+  .about { display: flex; flex-direction: column; gap: 4px; min-height: 52px; }
+  .signature { font-weight: 600; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
+  .description { color: var(--sg-muted, #616161); }
+</style>

package/dist/SvSheetInsertFunction.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    open?: boolean;
+    onPick: (name: string) => void;
+    onClose?: () => void;
+};
+declare const SvSheetInsertFunction: import("svelte").Component<Props, {}, "open">;
+type SvSheetInsertFunction = ReturnType<typeof SvSheetInsertFunction>;
+export default SvSheetInsertFunction;

package/dist/SvSheetIteration.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  /**
+   * Excel's File > Options > Formulas > Calculation options, raised to the
+   * Formulas tab because it is the one setting there that changes what a
+   * formula is worth: with iteration on a circular reference settles on its
+   * fixed point instead of showing #CYCLE!.
+   */
+  import { SvModal } from '@svgrid/grid'
+  import { useSheetText } from './sheet-text'
+  import type { IterationSettings } from './sheet/workbook'
+
+  type Props = {
+    open?: boolean
+    iteration: IterationSettings
+    onApply: (next: IterationSettings) => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), iteration, onApply, onClose }: Props = $props()
+  const t = useSheetText()
+
+  let enabled = $state(false)
+  let passes = $state('100')
+  let change = $state('0.001')
+  let error = $state('')
+  let first = $state<HTMLInputElement | null>(null)
+
+  $effect(() => {
+    if (!open) return
+    enabled = iteration.enabled
+    passes = String(iteration.maxIterations)
+    change = String(iteration.maxChange)
+    error = ''
+    queueMicrotask(() => first?.focus())
+  })
+
+  function ok() {
+    const maxIterations = Number(passes)
+    const maxChange = Number(change)
+    if (!Number.isFinite(maxIterations) || maxIterations < 1 || !Number.isFinite(maxChange) || maxChange < 0) {
+      error = t('iteration.badNumbers')
+      return
+    }
+    open = false
+    onApply({ enabled, maxIterations: Math.round(maxIterations), maxChange })
+    onClose?.()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} title={t('iteration.title')} size="sm">
+  <form class="sv-sheet-dialog" onsubmit={(e) => { e.preventDefault(); ok() }}>
+    <label class="check"><input type="checkbox" bind:this={first} bind:checked={enabled} /> {t('iteration.enable')}</label>
+    <label class="field">
+      <span>{t('iteration.maxIterations')}</span>
+      <input type="number" min="1" step="1" bind:value={passes} disabled={!enabled} />
+    </label>
+    <label class="field">
+      <span>{t('iteration.maxChange')}</span>
+      <input type="number" min="0" step="0.0001" bind:value={change} disabled={!enabled} />
+    </label>
+    {#if error}<p class="error">{error}</p>{/if}
+    <p class="hint">{t('iteration.hint')}</p>
+  </form>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      <span class="spacer"></span>
+      <button type="button" class="btn primary" onclick={ok}>{t('ok')}</button>
+      <button type="button" class="btn" onclick={close}>{t('cancel')}</button>
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .spacer { flex: 1; }
+  .error { margin: 4px 0 0; color: var(--sg-danger, #c42b1c); font-size: 12px; }
+</style>

package/dist/SvSheetIteration.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { IterationSettings } from './sheet/workbook.js';
+type Props = {
+    open?: boolean;
+    iteration: IterationSettings;
+    onApply: (next: IterationSettings) => void;
+    onClose?: () => void;
+};
+declare const SvSheetIteration: import("svelte").Component<Props, {}, "open">;
+type SvSheetIteration = ReturnType<typeof SvSheetIteration>;
+export default SvSheetIteration;

package/dist/SvSheetLink.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  /**
+   * Excel's Insert Hyperlink dialog, as the three fields that matter: where
+   * it goes, what the cell says, and what hovering says. Opened by
+   * Insert > Link or Ctrl+K, and again on a cell that already has one,
+   * which is how a link is edited.
+   */
+  import { SvModal } from '@svgrid/grid'
+  import { useSheetText } from './sheet-text'
+  import { isSafeLinkTarget, parseLinkTarget, type SheetLink } from './sheet/links'
+
+  type Props = {
+    open?: boolean
+    /** The link as it stands, or a blank one for a cell that has none. */
+    link: SheetLink
+    /** What the cell shows right now, offered as the text. */
+    text: string
+    /** The cell's address, for the title. */
+    where: string
+    existing?: boolean
+    onApply: (link: SheetLink, text: string) => void
+    onRemove?: () => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), link, text, where, existing = false, onApply, onRemove, onClose }: Props = $props()
+  const t = useSheetText()
+
+  let address = $state('')
+  let label = $state('')
+  let tip = $state('')
+  let error = $state('')
+  let first = $state<HTMLInputElement | null>(null)
+
+  $effect(() => {
+    if (!open) return
+    address = link.target
+    label = text
+    tip = link.tip ?? ''
+    error = ''
+    queueMicrotask(() => first?.focus())
+  })
+
+  function ok() {
+    const target = parseLinkTarget(address)
+    if (!target) {
+      // Two ways to have no target, and they are not the same mistake: an
+      // address nobody typed, and one carrying a scheme this shell will not
+      // open. Telling the second one it is empty sends the user back to a
+      // field that is not.
+      error = address.trim() && !isSafeLinkTarget(address) ? t('link.unsafeScheme') : t('link.badAddress')
+      return
+    }
+    const next: SheetLink = { target: address.trim() }
+    if (tip.trim()) next.tip = tip.trim()
+    open = false
+    onApply(next, label)
+    onClose?.()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} title={`${t('link.title')} – ${where}`} size="sm">
+  <form class="sv-sheet-dialog" onsubmit={(e) => { e.preventDefault(); ok() }}>
+    <label class="field">
+      <span>{t('link.address')}</span>
+      <input type="text" bind:this={first} bind:value={address} spellcheck="false" placeholder={t('link.addressPlaceholder')} />
+    </label>
+    <label class="field">
+      <span>{t('link.text')}</span>
+      <input type="text" bind:value={label} placeholder={t('link.textPlaceholder')} />
+    </label>
+    <label class="field">
+      <span>{t('link.tip')}</span>
+      <input type="text" bind:value={tip} placeholder={t('link.tipPlaceholder')} />
+    </label>
+    {#if error}<p class="error">{error}</p>{/if}
+    <p class="hint">{t('link.hint')}</p>
+  </form>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      {#if existing && onRemove}
+        <button type="button" class="btn" onclick={() => { open = false; onRemove?.() }}>{t('link.remove')}</button>
+      {/if}
+      <span class="spacer"></span>
+      <button type="button" class="btn primary" onclick={ok}>{t('ok')}</button>
+      <button type="button" class="btn" onclick={close}>{t('cancel')}</button>
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .spacer { flex: 1; }
+  .error { margin: 4px 0 0; color: var(--sg-danger, #c42b1c); font-size: 12px; }
+</style>

package/dist/SvSheetLink.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type SheetLink } from './sheet/links.js';
+type Props = {
+    open?: boolean;
+    /** The link as it stands, or a blank one for a cell that has none. */
+    link: SheetLink;
+    /** What the cell shows right now, offered as the text. */
+    text: string;
+    /** The cell's address, for the title. */
+    where: string;
+    existing?: boolean;
+    onApply: (link: SheetLink, text: string) => void;
+    onRemove?: () => void;
+    onClose?: () => void;
+};
+declare const SvSheetLink: import("svelte").Component<Props, {}, "open">;
+type SvSheetLink = ReturnType<typeof SvSheetLink>;
+export default SvSheetLink;

package/dist/SvSheetListPicker.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  /**
+   * The list a validated cell drops down: Excel's in-cell dropdown. The
+   * choices as the rule lists them, the current value marked, arrow keys
+   * and Enter to pick, Escape to leave the cell as it is. The shell mounts
+   * it inside the popover anchored to the cell.
+   */
+  import { useSheetText } from './sheet-text'
+  type Props = {
+    choices: ReadonlyArray<string>
+    /** The cell's current text, marked in the list. */
+    value: string
+    onPick: (choice: string) => void
+    onCancel: () => void
+  }
+
+  let { choices, value, onPick, onCancel }: Props = $props()
+  const t = useSheetText()
+
+  let list = $state<HTMLDivElement | null>(null)
+  let index = $state(0)
+
+  $effect(() => {
+    const at = choices.findIndex((c) => c.toLowerCase() === value.trim().toLowerCase())
+    index = at >= 0 ? at : 0
+    queueMicrotask(() => list?.focus())
+  })
+
+  function onKeyDown(event: KeyboardEvent) {
+    if (event.key === 'ArrowDown') { event.preventDefault(); index = Math.min(index + 1, choices.length - 1); scrollTo() }
+    else if (event.key === 'ArrowUp') { event.preventDefault(); index = Math.max(index - 1, 0); scrollTo() }
+    else if (event.key === 'Home') { event.preventDefault(); index = 0; scrollTo() }
+    else if (event.key === 'End') { event.preventDefault(); index = choices.length - 1; scrollTo() }
+    else if (event.key === 'Enter' || event.key === 'Tab') { event.preventDefault(); const c = choices[index]; if (c !== undefined) onPick(c) }
+    else if (event.key === 'Escape') { event.preventDefault(); onCancel() }
+  }
+
+  function scrollTo() {
+    list?.querySelector<HTMLElement>(`[data-index="${index}"]`)?.scrollIntoView({ block: 'nearest' })
+  }
+</script>
+
+<div
+  bind:this={list}
+  class="sv-sheet-list-picker"
+  role="listbox"
+  aria-label={t('choices')}
+  tabindex="0"
+  aria-activedescendant={choices.length ? `sv-sheet-choice-${index}` : undefined}
+  onkeydown={onKeyDown}
+>
+  {#if choices.length === 0}
+    <div class="empty">{t('listEmpty')}</div>
+  {:else}
+    {#each choices as choice, i (i)}
+      <!-- svelte-ignore a11y_click_events_have_key_events, a11y_interactive_supports_focus -->
+      <div
+        id={`sv-sheet-choice-${i}`}
+        class="choice"
+        class:on={i === index}
+        role="option"
+        aria-selected={i === index}
+        data-index={i}
+        onpointermove={() => (index = i)}
+        onclick={() => onPick(choice)}
+      >{choice}</div>
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .sv-sheet-list-picker {
+    min-width: 120px;
+    max-width: 320px;
+    max-height: 200px;
+    overflow-y: auto;
+    padding: 4px 0;
+    font-size: 12px;
+    color: var(--sg-fg, #242424);
+    outline: none;
+  }
+  .choice {
+    padding: 4px 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: default;
+  }
+  .choice.on { background: var(--sg-selection-bg, rgba(16, 124, 65, 0.12)); }
+  .empty { padding: 4px 10px; color: var(--sg-muted, #616161); }
+</style>

package/dist/SvSheetListPicker.svelte.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    choices: ReadonlyArray<string>;
+    /** The cell's current text, marked in the list. */
+    value: string;
+    onPick: (choice: string) => void;
+    onCancel: () => void;
+};
+declare const SvSheetListPicker: import("svelte").Component<Props, {}, "">;
+type SvSheetListPicker = ReturnType<typeof SvSheetListPicker>;
+export default SvSheetListPicker;