@humandialog/forms.svelte 1.4.7 → 1.4.9

package/components/Fab.svelte

@@ -1,10 +1,19 @@
-<script>import { each } from "svelte/internal";
-import { contextToolbarOperations, pageToolbarOperations, contextItemsStore, toolsActionsOperations, fabCollapsed } from "../stores.js";
+<script>import { contextToolbarOperations, pageToolbarOperations, leftHandedFAB, toolsActionsOperations, fabCollapsed, bottom_bar_visible_store, main_sidebar_visible_store } from "../stores.js";
 import { showFloatingToolbar, showMenu, showGridMenu } from "./menu.js";
 import { FaChevronUp, FaChevronDown, FaChevronLeft, FaChevronRight, FaCircle, FaEllipsisV, FaRegDotCircle, FaDotCircle } from "svelte-icons/fa/";
 import { isDeviceSmallerThan } from "../utils.js";
+import { tick } from "svelte";
+export let mainPageCoords = void 0;
 $:
-  setupCurrentContextOperations($pageToolbarOperations, $contextToolbarOperations, $toolsActionsOperations, $fabCollapsed);
+  setupCurrentContextOperations(
+    $pageToolbarOperations,
+    $contextToolbarOperations,
+    $toolsActionsOperations,
+    $fabCollapsed,
+    $bottom_bar_visible_store,
+    $main_sidebar_visible_store,
+    $leftHandedFAB
+  );
 let operations = [];
 let mainOperation = null;
 let secondaryOperation = null;
@@ -13,7 +22,8 @@ let isExpandable = false;
 let vToolboxExpanded = false;
 let hToolboxExpanded = false;
 let isDirectPositioningMode = false;
-function setupCurrentContextOperations(...args) {
+async function setupCurrentContextOperations(...args) {
+  await tick();
   let opVer = 0;
   let main_FAB_position = "";
   isDirectPositioningMode = false;
@@ -179,7 +189,6 @@ function getSelectionPos() {
     return 0;
 }
 function calculatePosition(operation) {
-  const isLeftHanded = false;
   let result = "";
   const fab = operation.fab;
   if (fab.length != 3)
@@ -192,46 +201,62 @@ function calculatePosition(operation) {
   const width = 55;
   const height = 55;
   const margin = 10;
-  if (!isLeftHanded) {
+  let lShift = 0;
+  let tShift = 0;
+  let rShift = 0;
+  let bShift = 0;
+  let vMiddle = "50vh";
+  if (!isDeviceSmallerThan("sm")) {
+    const container = document.getElementById("__hd_svelte_main_content_container");
+    if (container) {
+      const containerRect = container?.getBoundingClientRect();
+      lShift = containerRect.x;
+      tShift = containerRect.y;
+      bShift = window.innerHeight - containerRect.bottom;
+      rShift = window.innerWidth - containerRect.right;
+      vMiddle = `${containerRect.x + containerRect.width / 2}px`;
+    }
+  }
+  if (!$leftHandedFAB) {
     switch (section) {
       case "M":
-        result = `right: ${margin + col_no * width}px; bottom: ${margin + row_no * height}px`;
+        result = `right: ${rShift + margin + col_no * width}px; bottom: ${bShift + margin + row_no * height}px`;
         break;
       case "S":
-        result = `left: ${margin + col_no * width}px; bottom: ${margin + row_no * height}px`;
+        result = `left: ${lShift + margin + col_no * width}px; bottom: ${bShift + margin + row_no * height}px`;
         break;
       case "A":
-        result = `right: ${margin + col_no * width}px; top: calc(50vh - ${row_no * height}px)`;
+        result = `right: ${rShift + margin + col_no * width}px; top: calc(${vMiddle} - ${row_no * height}px)`;
         break;
       case "C":
-        result = `left: ${margin + col_no * width}px; top: calc(50vh - ${row_no * height}px)`;
+        result = `left: ${lShift + margin + col_no * width}px; top: calc(${vMiddle} - ${row_no * height}px)`;
         break;
       case "T":
-        result = `right: ${margin + col_no * width}px; top: ${margin + row_no * height}px`;
+        result = `right: ${rShift + margin + col_no * width}px; top: ${tShift + margin + row_no * height}px`;
         break;
       case "F":
-        result = `left: ${margin + col_no * width}px; top: ${margin + row_no * height}px`;
+        result = `left: ${lShift + margin + col_no * width}px; top: ${tShift + margin + row_no * height}px`;
         break;
     }
   } else {
     switch (section) {
       case "M":
-        result = `left: ${margin + col_no * width}px; bottom: ${margin + row_no * height}px`;
+        result = `left: ${lShift + margin + col_no * width}px; bottom: ${bShift + margin + row_no * height}px`;
         break;
       case "S":
-        result = `right: ${margin + col_no * width}px; bottom: ${margin + row_no * height}px`;
+        result = `right: ${rShift + margin + col_no * width}px; bottom: ${bShift + margin + row_no * height}px`;
         break;
       case "A":
-        result = `left: ${margin + col_no * width}px; top: calc(50vh - ${row_no * height}px)`;
+        result = `left: ${lShift + margin + col_no * width}px; top: calc(${vMiddle} - ${row_no * height}px)`;
         break;
       case "C":
-        result = `right: ${margin + col_no * width}px; top: calc(50vh - ${row_no * height}px)`;
+        result = `right: ${rShift + margin + col_no * width}px; top: calc(${vMiddle} - ${row_no * height}px)`;
         break;
       case "T":
-        result = `left: ${margin + col_no * width}px; top: ${margin + row_no * height}px`;
+        result = `left: ${lShift + margin + col_no * width}px; top: ${tShift + margin + row_no * height}px`;
         break;
       case "F":
-        result = `right: ${margin + col_no * width}px; top: ${margin + row_no * height}px`;
+        result = `right: ${rShift + margin + col_no * width}px; top: ${tShift + margin + row_no * height}px`;
         break;
     }
   }
@@ -246,8 +271,13 @@ function operationVisible(operation) {
     if (operation.fab == "M10")
       return true;
     return false;
-  } else
+  } else {
+    if (operation.disabledFunc)
+      return !operation.disabledFunc();
+    else if (operation.disabled)
+      return false;
     return true;
+  }
 }
 </script>
 
@@ -266,7 +296,7 @@ function operationVisible(operation) {
                                 fixed m-0                            
                                 flex items-center justify-center
                                 disable-dbl-tap-zoom
-                                cursor-pointer z-40"
+                                cursor-pointer z-20"
                                 style={position}
                                 on:click|stopPropagation={(e) => {on_click(e, operation)}}
                                 on:mousedown={mousedown} >

package/components/Fab.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        mainPageCoords?: undefined;
         activateMainOperation?: (() => void) | undefined;
     };
     events: {

package/components/Floating_container.svelte

@@ -2,6 +2,7 @@
 import { isDeviceSmallerThan } from "../utils";
 import { pushToolsActionsOperations, popToolsActionsOperations } from "../stores";
 import { FaTimes } from "svelte-icons/fa";
+import Icon from "./icon.svelte";
 let x;
 let y;
 let visible = false;
@@ -10,6 +11,7 @@ let props = {};
 let around_rect;
 let rootElement;
 let internalElement;
+let closeButtonPos = "";
 export async function show(around, _toolbar, _props = {}) {
   if (around instanceof DOMRect) {
     x = around.left;
@@ -34,7 +36,7 @@ export async function show(around, _toolbar, _props = {}) {
   props.onSizeChanged = () => onSizeChanged();
   hide_window_indicator = 0;
   window.addEventListener("click", on_before_window_click, true);
-  if (isDeviceSmallerThan("sm")) {
+  if (false) {
     pushToolsActionsOperations({
       opver: 1,
       operations: [
@@ -63,7 +65,7 @@ export function isVisible() {
   return visible;
 }
 export function hide() {
-  if (visible)
+  if (false)
     popToolsActionsOperations();
   visible = false;
   cssPosition = calculatePosition(x, y, around_rect, false, false);
@@ -124,6 +126,7 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
       y2 = screenRect.bottom - maxHeight - margin;
       result = `left: ${x2}px; top: ${y2}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
     }
+    closeButtonPos = `right: ${margin}px; top: calc(${y2}px - 1.75rem)`;
   } else {
     let myRect = null;
     if (!fresh) {
@@ -144,15 +147,28 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
         y2 = screenRect.top;
     }
     result = `left:${x2}px; top:${y2}px; width: max-content; height:max-content; display: block`;
+    closeButtonPos = ``;
   }
   return result;
 }
 </script>
 
 <div    id="__hd_svelte_floating_container"
-        class="p-2 bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md shadow-stone-500 dark:shadow-black z-30 fixed "
+        class="p-2 bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md shadow-stone-500 dark:shadow-black z-40 fixed "
         style={cssPosition}
         bind:this={rootElement}>
+        {#if closeButtonPos}
+    <button class="     fixed w-6 h-6 flex items-center justify-center
+                        text-stone-500 bg-stone-200/70 hover:bg-stone-200
+                        focus:outline-none font-medium rounded-full text-sm text-center
+                        dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700 
+                        focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800" 
+            style={closeButtonPos}
+            on:click={ hide }>
+            <Icon component={FaTimes} s="md"/>
+        </button>
+    {/if}
+
     <svelte:component this={toolbar} {...props} bind:this={internalElement} />
 </div>
 

package/components/breadcrumb.svelte

@@ -0,0 +1,59 @@
+<script>
+    import {location, link, querystring} from 'svelte-spa-router'
+	import { breadcrumbParse, breadcrumbStringify } from './breadcrumb_utils';
+	
+    export let path;
+
+    let segments = []
+    let userClass = $$props.class ?? ''
+
+    $: init($location, $querystring)
+
+    function init(...args)
+    {
+        segments = breadcrumbParse(path);
+    }
+
+    function getSegmentHRef(href, idx)
+    {
+        let prevSegments = []
+        if(idx > 0)
+            prevSegments = segments.slice(0, idx)
+        
+        const prevPath = breadcrumbStringify(prevSegments)
+        return `${href}?path=${prevPath}` 
+
+    }
+
+</script>
+
+<nav class="flex {userClass}" aria-label="Breadcrumb">
+  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse flex-wrap">
+    
+        {#if (segments && segments.length > 1)}
+            {#each segments as segment, idx (segment.href)}
+                {@const isFirst = idx == 0}
+                {@const isLast = idx == segments.length-1}
+                <li>
+                    <div class="flex items-center">
+                        {#if !isFirst}
+                            <svg class="rtl:rotate-180 w-3 h-3 text-stone-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
+                            </svg>
+                        {/if}
+                        {#if isLast}
+                            <span class="ms-1 text-sm md:ms-2 font-semibold text-stone-900 dark:text-stone-100 whitespace-nowrap">
+                                {segment.name}
+                            </span>
+                        {:else}
+                            <a href={getSegmentHRef(segment.href, idx)} use:link class="ms-1 text-sm font-medium md:ms-2 text-stone-700 hover:text-stone-900  dark:text-stone-400 dark:hover:text-white whitespace-nowrap">
+                                {segment.name}
+                            </a>
+                        {/if}
+                    </div>
+                </li>
+            {/each}
+        {/if}
+    
+  </ol>
+</nav>

package/components/breadcrumb.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  BreadcrumbProps */
+/** @typedef {typeof __propDef.events}  BreadcrumbEvents */
+/** @typedef {typeof __propDef.slots}  BreadcrumbSlots */
+export default class Breadcrumb extends SvelteComponentTyped<{
+    [x: string]: any;
+    path: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type BreadcrumbProps = typeof __propDef.props;
+export type BreadcrumbEvents = typeof __propDef.events;
+export type BreadcrumbSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        path: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/breadcrumb_utils.d.ts

@@ -0,0 +1,4 @@
+export function breadcrumbAdd(path: any, name: any, href: any): any;
+export function breadcrumbParse(path: any): any[];
+export function breadcrumbStringify(segments: any): string;
+export function breadcrumbClipName(name: any): any;

package/components/breadcrumb_utils.js

@@ -0,0 +1,45 @@
+
+export function breadcrumbAdd(path, name, href)
+{
+    if(path.length > 0)
+        path += ';'
+    path += `${encodeURIComponent(href)}!${encodeURIComponent(breadcrumbClipName(name))}`
+    return path
+}
+
+export function breadcrumbParse(path)
+{
+    let segments = []
+    const segs = path.split(';')
+    segs.forEach(s => {
+        const nidx = s.indexOf('!')
+        segments.push({
+            href: decodeURIComponent( s.substring(0, nidx) ),
+            name: decodeURIComponent( s.substring(nidx+1))
+        })
+    })
+
+    return segments;
+}
+
+export function breadcrumbStringify(segments)
+{
+    let result = ''
+    segments.forEach(s => {
+
+        if(result.length > 0)
+            result += ";";
+        result += `${encodeURIComponent(s.href)}!${encodeURIComponent(breadcrumbClipName(s.name))}`
+    })
+
+    return result;
+}
+
+export function breadcrumbClipName(name)
+    {
+        const maxNameLen = 24;
+        if(name.length > maxNameLen)
+            return name.substr(0, maxNameLen-3) + "..."
+        else
+            return name;
+    }

package/components/combo/combo.svelte

@@ -6,6 +6,7 @@ import { rCombo_definition, rCombo_item, cached_sources } from "./combo";
 import { FaChevronDown, FaTimes } from "svelte-icons/fa";
 import Icon from "../icon.svelte";
 import { reef } from "@humandialog/auth.svelte/dist/index.js";
+import { showMenu } from "../menu.js";
 export let label = "";
 export let self = null;
 export let a = "";
@@ -140,13 +141,19 @@ afterUpdate(() => {
   if (is_dropdown_open && textbox && document.activeElement != textbox)
     textbox.focus();
 });
+let closeButtonPos = "";
+let dropdownElement;
 function dropdown_action(node) {
-  if (is_dropdown_open)
-    dropdown_height = node.getBoundingClientRect().height;
+  if (is_dropdown_open) {
+    const rect = node.getBoundingClientRect();
+    dropdown_height = rect.height;
+  }
   return {
     update() {
-      if (is_dropdown_open)
-        dropdown_height = node.getBoundingClientRect().height;
+      if (is_dropdown_open) {
+        const rect = node.getBoundingClientRect();
+        dropdown_height = rect.height;
+      }
     },
     destroy() {
     }
@@ -174,58 +181,7 @@ export function show(event, hide_callback) {
   client_rect.y = 0;
   client_rect.width = window.innerWidth;
   client_rect.height = window.innerHeight;
-  let rect;
-  if (is_compact)
-    rect = textbox.getBoundingClientRect();
-  else
-    rect = combo.getBoundingClientRect();
-  let top_space = rect.y;
-  let bottom_space = client_rect.height - (rect.y + rect.height);
-  let palette_max_height_px = 500;
-  let palette_width_px = rect.width;
-  if (palette_width_px < 120)
-    palette_width_px = 120;
-  let preferred_palette_height = dropdown_height > 0 ? dropdown_height : palette_max_height_px;
-  let preferred_palette_width = palette_width_px;
-  let x = 0, y = 0;
-  let show_above = false;
-  let show_fullscreen = false;
-  if (client_rect.width < preferred_palette_width)
-    show_fullscreen = true;
-  else if (rect.x + preferred_palette_width > client_rect.width)
-    x = client_rect.width - preferred_palette_width;
-  else
-    x = rect.x;
-  if (client_rect.height < preferred_palette_height)
-    show_fullscreen = true;
-  else if (bottom_space >= preferred_palette_height)
-    y = rect.y + rect.height;
-  else if (top_space >= preferred_palette_height) {
-    y = rect.y;
-    show_above = true;
-  } else
-    y = rect.y + rect.height;
-  if (isDeviceSmallerThan("sm")) {
-    let screenRect = new DOMRect();
-    screenRect.x = 0;
-    screenRect.y = 0;
-    screenRect.width = window.innerWidth;
-    screenRect.height = window.innerHeight;
-    const margin = 5;
-    const maxHeight = screenRect.height / 2 - margin;
-    const width = screenRect.width - 2 * margin;
-    x = margin;
-    y = screenRect.bottom - margin;
-    dropdown_position = `position: fixed; left: ${x}px; top: ${y}px; transform: translate(0, -100%); width: ${width}px; max-height: ${maxHeight}px; display: block`;
-  } else if (show_fullscreen) {
-    dropdown_position = `position: fixed; left: 0px; top: 0px; width: ${client_rect.width}px; height: ${client_rect.height}px;`;
-  } else {
-    dropdown_position = `min-width: ${palette_width_px}px; max-height:${palette_max_height_px}px; position: fixed; left:${x}px; top:${y}px;`;
-    if (show_above)
-      dropdown_position += " transform: translate(0, -100%);";
-    if (!is_compact)
-      dropdown_position += `width: ${preferred_palette_width}px`;
-  }
+  openDropdownAsMenu();
   is_dropdown_open = true;
   if (filtered) {
     if (!textbox)
@@ -243,7 +199,7 @@ export function show(event, hide_callback) {
       subtree: true
     });
   }
-  if (isDeviceSmallerThan("sm")) {
+  if (false) {
     pushToolsActionsOperations({
       opver: 1,
       operations: [
@@ -264,13 +220,37 @@ export function show(event, hide_callback) {
     });
   }
 }
+function openDropdownAsMenu() {
+  let rect;
+  if (is_compact)
+    rect = textbox.getBoundingClientRect();
+  else
+    rect = combo.getBoundingClientRect();
+  let operations = [];
+  if (hasNone)
+    operations.push({
+      caption: "<none>",
+      action: (f) => on_choose(null)
+    });
+  if (definition && definition.collection)
+    source_fetched(definition.collection);
+  const _filtered_source = filtered_source ? filtered_source : definition.source;
+  _filtered_source.forEach((i) => {
+    operations.push({
+      caption: i.Name ?? i.Key,
+      icon: i.Icon ?? void 0,
+      action: (f) => on_choose(i)
+    });
+  });
+  console.log("operations", operations);
+  showMenu(rect, operations);
+}
 export function hide() {
   if (!is_dropdown_open)
     return;
   if (mutation_observer)
     mutation_observer.disconnect();
   is_dropdown_open = false;
-  popToolsActionsOperations();
   dropdown_position = "display: none;";
   combo_text = get_combo_text();
   if (!!textbox)
@@ -464,7 +444,7 @@ function on_input_change() {
   if (!is_dropdown_open)
     return;
   filtered_source = get_filtered_source();
-  highlighted_option = filtered_source.length > 0 ? filtered_source[0] : null;
+  openDropdownAsMenu();
 }
 let new_item_option;
 function get_filtered_source() {
@@ -664,71 +644,91 @@ function on_focus_out(e) {
         
     </div>
 
-    <div    hidden={!is_dropdown_open} 
-            class="not-prose {cs} bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md overflow-y-auto cursor-pointer z-30"
-            style={dropdown_position}
-            use:dropdown_action>
-        <ul class="py-1">
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!--div    hidden={!is_dropdown_open}>
+        {#if closeButtonPos}
+            {#key closeButtonPos}
+                <button class="     fixed w-6 h-6 flex items-center justify-center
+                                    text-stone-500 bg-stone-200/70 hover:bg-stone-200
+                                    focus:outline-none font-medium rounded-full text-sm text-center
+                                    dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700 
+                                    focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800" 
+                        style={closeButtonPos}
+                        on:click={ hide }>
+                    <Icon component={FaTimes} s="md"/>
+                </button>
+            {/key}
+        {/if}
 
-            {#if definition.source && definition.source.length}
-                {#if hasNone}
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <li class="rounded flex flex-row items-center {font_size}
-                                space-x-10 px-4 py-2 ml-12 sm:ml-0" 
-                        class:bg-stone-100={highlighted_option == null}
-                        class:dark:bg-stone-700={highlighted_option == null}
-                        class:dark:hover:bg-stone-700={highlighted_option == null}
-                        on:mousemove={() => on_mouse_move(null)}
-                        on:click|preventDefault|stopPropagation={async () => await on_choose(null)}
-                        tabindex="-1">
+        <div    class="not-prose {cs} bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md overflow-y-auto cursor-pointer z-40
+                    fixed"
+                style={dropdown_position}
+                bind:this={dropdownElement}
+                use:dropdown_action>
+            
+                
 
-                        <h4 class="ml-2">
-                            &lt;none&gt;
-                        </h4>
-                    </li>
-                {/if}
+            <ul class="py-1">
 
-                {@const _filtered_source = filtered_source ? filtered_source : definition.source}
-                {#if _filtered_source.length > 0}
-                    {#each _filtered_source as item (item.Key)}
-                        {@const active=(highlighted_option == item) ? 'bg-stone-400/30 dark:bg-stone-400/30' : ''}
-                        <!-- svelte-ignore a11y-click-events-have-key-events -->
+                {#if definition.source && definition.source.length}
+                    {#if hasNone}
+                        
                         <li class="rounded flex flex-row items-center {font_size}
-                                space-x-10 px-4 py-2 pl-12 sm:pl-2 {active}" 
-                            on:mousemove={() => on_mouse_move(item)}
-                            on:click|preventDefault|stopPropagation={async () => await on_choose(item)}
+                                    space-x-10 px-4 py-2 ml-12 sm:ml-0" 
+                            class:bg-stone-100={highlighted_option == null}
+                            class:dark:bg-stone-700={highlighted_option == null}
+                            class:dark:hover:bg-stone-700={highlighted_option == null}
+                            on:mousemove={() => on_mouse_move(null)}
+                            on:click|preventDefault|stopPropagation={async () => await on_choose(null)}
                             tabindex="-1">
 
-                            {#if icon}
-                                {#if item.Color}
-                                    <Icon s="md" circle={true} color={item.Color}/>
-                                {:else if item.Avatar} 
-                                    <Icon s="md" circle={true} symbol={item.Avatar}/>
-                                {:else if item.Icon}
-                                    <Icon s="md" component={item.Icon}/>
-                                {:else if item.Icon == null}
-                                    <div class="w-4 h-4"></div>
-                                {:else if item.Name}
-                                    <Icon s="md" circle={true} label={item.Name}/>
-                                {:else}
-                                    <Icon s="md" circle={true}/>
-                                {/if}
-                            {/if}
-                            <h4 class="ml-2">
-                            {#if item.Name}
-                                {item.Name}
-                            {:else if item.Key}
-                                {item.Key}
-                            {/if}
+                            <h4 class="ml-2 text-stone-400 dark:text-stone-500">
+                                &lt;none&gt;
                             </h4>
                         </li>
-                    {/each}
-                {:else}
-                    <li class="rounded p-2">No options</li>
+                    {/if}
+
+                    {@const _filtered_source = filtered_source ? filtered_source : definition.source}
+                    {#if _filtered_source.length > 0}
+                        {#each _filtered_source as item (item.Key)}
+                            {@const active=(highlighted_option == item) ? 'bg-stone-400/30 dark:bg-stone-400/30' : ''}
+                            <li class="rounded flex flex-row items-center {font_size}
+                                    space-x-10 px-4 py-2 pl-12 sm:pl-2 {active}" 
+                                on:mousemove={() => on_mouse_move(item)}
+                                on:click|preventDefault|stopPropagation={async () => await on_choose(item)}
+                                tabindex="-1">
+
+                                {#if icon}
+                                    {#if item.Color}
+                                        <Icon s="md" circle={true} color={item.Color}/>
+                                    {:else if item.Avatar} 
+                                        <Icon s="md" circle={true} symbol={item.Avatar}/>
+                                    {:else if item.Icon}
+                                        <Icon s="md" component={item.Icon}/>
+                                    {:else if item.Icon == null}
+                                        <div class="w-4 h-4"></div>
+                                    {:else if item.Name}
+                                        <Icon s="md" circle={true} label={item.Name}/>
+                                    {:else}
+                                        <Icon s="md" circle={true}/>
+                                    {/if}
+                                {/if}
+                                <h4 class="ml-2">
+                                {#if item.Name}
+                                    {item.Name}
+                                {:else if item.Key}
+                                    {item.Key}
+                                {/if}
+                                </h4>
+                            </li>
+                        {/each}
+                    {:else}
+                        <li class="rounded p-2">No options</li>
+                    {/if}
                 {/if}
-            {/if}
-        </ul>
-    </div>
+            </ul>
+        </div>
+    </div-->
 </div>
 {/if}