@humandialog/forms.svelte 0.4.44 → 0.4.45

package/components/combo/combo.svelte

@@ -59,7 +59,7 @@ switch (s) {
     line_h = "h-6 sm:h-4";
     break;
 }
-let background_class = is_compact && !icon ? "bg-slate-900/10 dark:bg-slate-100/10 rounded-lg" : "";
+let background_class = is_compact && !icon ? "" : "";
 let appearance_class;
 if (is_compact)
   appearance_class = `${font_size}`;
@@ -175,6 +175,7 @@ export function show(event, hide_callback) {
     if (show_above)
       dropdown_position += " transform: translate(0, -100%);";
   }
+  console.log("combo show pos", dropdown_position, "rect", rect, "client_rect", client_rect, "combo", combo);
   is_dropdown_open = true;
   if (!textbox)
     return;
@@ -527,7 +528,7 @@ function on_focus_out(e) {
 
             
             <p  bind:this={textbox}
-                class="dark:text-white {line_h} truncate px-2.5 {background_class}"
+                class="dark:text-gray-300 {line_h} truncate sm:pl-2.5 pr-2.5 {background_class}"
                 class:ml-2={icon}
                 class:text-gray-400={ (!is_dropdown_open) && (!sel_item)}
                 class:text-gray-700={ is_dropdown_open || sel_item }
@@ -537,8 +538,8 @@ function on_focus_out(e) {
                 {combo_text}</p>
         </div>
         
-        {#if can_be_activated && !is_compact }
-            <Icon size={3} component={FaChevronDown} class="flex-none text-gray-700 dark:text-gray-200"/>
+        {#if can_be_activated }
+            <Icon size={3} component={FaChevronDown} class="flex-none text-gray-700 dark:text-gray-300"/>
         {/if}
     </div>
 

package/components/date.svelte

@@ -2,6 +2,7 @@
 import { data_tick_store, context_items_store, context_types_store } from "../stores.js";
 import { inform_modification, push_changes } from "../updates.js";
 import { parse_width_directive, is_device_smaller_than } from "../utils.js";
+import FaChevronDown from "svelte-icons/fa/FaChevronDown.svelte";
 export let self = null;
 export let a = "";
 export let context = "";
@@ -57,11 +58,11 @@ let item = null;
 let user_class = $$restProps.class ?? "";
 let value = null;
 let rValue = "";
+let pretty_value = "";
 let ctx = context ? context : getContext("ctx");
 let cs = parse_width_directive(c);
 let style;
 let input_element = void 0;
-let background_class = is_compact ? "bg-slate-900/10 dark:bg-slate-100/10 rounded-lg" : "";
 if (!is_compact) {
   style = `bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg 
                 focus:ring-primary-600 focus:border-primary-600 block w-full  ${input_pb} ${input_pt} px-2.5 dark:bg-gray-700
@@ -103,6 +104,119 @@ function setup(...args) {
   } else
     can_be_activated = true;
   rValue = get_formatted_date(value);
+  pretty_value = get_pretty_value(value);
+}
+function get_pretty_value(d) {
+  if (!d)
+    return "";
+  let month = d.getMonth();
+  let day = d.getDate();
+  let year = d.getFullYear();
+  const now = new Date(Date.now());
+  let current_month = now.getMonth();
+  let current_day = now.getDate();
+  let current_year = now.getFullYear();
+  let is_far_date = true;
+  const far_date_threshold = 14 * 24 * 60 * 60 * 1e3;
+  if (Math.abs(now.getTime() - d.getTime()) < far_date_threshold)
+    is_far_date = false;
+  if (year != current_year) {
+    if (is_far_date)
+      return `${day} ${month_name(month)} ${year}`;
+    else
+      return `${day_name(d.getDay())}, ${day} ${month_name(month)}`;
+  }
+  if (month != current_month) {
+    if (is_far_date)
+      return `${day} ${month_name(month)}`;
+    else
+      return `${day_name(d.getDay())}, ${day} ${month_name(month)}`;
+  } else {
+    let day_of_week = d.getDay();
+    let current_day_of_week = now.getDay();
+    if (day_of_week == 0)
+      day_of_week = 7;
+    if (current_day_of_week == 0)
+      current_day_of_week = 7;
+    let days_diff = day - current_day;
+    if (days_diff == 0)
+      return "Today";
+    else if (days_diff == 1)
+      return "Tomorrow";
+    else if (days_diff == -1)
+      return "Yesterday";
+    else if (days_diff > 0 && days_diff <= 7) {
+      if (day_of_week > current_day_of_week)
+        return day_name(day_of_week);
+      else
+        return `${day_name(day_of_week)}, ${d.getDate()} ${month_name(d.getMonth())}`;
+    } else if (days_diff > 0) {
+      if (is_far_date)
+        return `${d.getDate()} ${month_name(d.getMonth())}`;
+      else
+        return `${day_name(day_of_week)}, ${d.getDate()} ${month_name(d.getMonth())}`;
+    } else if (days_diff < 0 && days_diff > -7) {
+      if (day_of_week < current_day_of_week)
+        return day_name(day_of_week);
+      else
+        return `${day_name(day_of_week)}, ${d.getDate()} ${month_name(d.getMonth())}`;
+    } else {
+      if (is_far_date)
+        return `${d.getDate()} ${month_name(d.getMonth())}`;
+      else
+        return `${day_name(day_of_week)}, ${d.getDate()} ${month_name(d.getMonth())}`;
+    }
+  }
+}
+function day_name(d) {
+  switch (d) {
+    case 0:
+      return "Sun";
+    case 1:
+      return "Mon";
+    case 2:
+      return "Tue";
+    case 3:
+      return "Wed";
+    case 4:
+      return "Thu";
+    case 5:
+      return "Fri";
+    case 6:
+      return "Sat";
+    case 7:
+      return "Sun";
+  }
+  return "";
+}
+function month_name(m) {
+  switch (m) {
+    case 0:
+      return "Jan";
+    case 1:
+      return "Feb";
+    case 2:
+      return "Mar";
+    case 3:
+      return "Apr";
+    case 4:
+      return "May";
+    case 5:
+      return "Jun";
+    case 6:
+      return "Jul";
+    case 7:
+      return "Aug";
+    case 8:
+      return "Sep";
+    case 9:
+      return "Oct";
+    case 10:
+      return "Nov";
+    case 11:
+      return "Dec";
+  }
+  return "";
 }
 function get_formatted_date(d) {
   if (!d)
@@ -154,9 +268,16 @@ function blur(e) {
 
 {#if is_compact}
     <div class="inline-block relative {line_h}">
-        <span class="dark:text-white {font_size} truncate  px-2.5 {background_class}
+       <span class="dark:text-gray-300 {font_size} truncate  
+                    pl-2.5 pr-5
                     absolute left-0 top-0 h-full" >
-            {rValue}
+            {pretty_value}
+
+            {#if can_be_activated}
+                <div class="w-3 h-3 absolute right-0 top-1.5 sm:top-0.5 text-gray-700 dark:text-gray-300">
+                    <FaChevronDown/>
+                </div>
+            {/if}
         
             {#if can_be_activated}
                 {#if type == "datetime-local"}
@@ -173,13 +294,17 @@ function blur(e) {
                             bind:this={input_element}
                             on:blur={blur}>
                 {/if}
+
+                
             {/if}
         </span>
+
+        
     </div>
 
 {:else}
     {#if type == "datetime-local"}
-        <input  class=" dark:text-white {cs} {style}  {line_h} px-2.5 {background_class} {user_class}" 
+        <input  class=" dark:text-white {cs} {style}  {line_h} px-2.5 {user_class}" 
                 type="datetime-local" 
                 on:change={on_changed}
                 bind:value={rValue}

package/components/list/internal/list.element.props.svelte

@@ -0,0 +1,135 @@
+<script>import { tick } from "svelte";
+import { rList_definition, rList_property_type } from "../List";
+import Combo from "../../combo/combo.svelte";
+import DatePicker from "../../date.svelte";
+export let definition;
+export let item;
+export let placeholder = "";
+let props = [];
+export function edit_property(field) {
+  let prop_idx = definition.properties.findIndex((p) => p.name == field);
+  if (prop_idx < 0)
+    return;
+  let property = definition.properties[prop_idx];
+  switch (property.type) {
+    case rList_property_type.Date:
+      edit_date(field, prop_idx);
+      break;
+    case rList_property_type.Combo:
+      edit_combo(field, prop_idx);
+      break;
+  }
+}
+function on_date_changed(value, a) {
+  if (!value)
+    item[a] = "";
+  else
+    item[a] = value.toJSON();
+}
+function on_combo_changed(key, name, prop) {
+  if (prop.association) {
+    let iname = prop.combo_definition.element_name ?? "$display";
+    item[prop.a] = {
+      $ref: key,
+      [iname]: name
+    };
+  } else {
+    let value = key ?? name;
+    item[prop.a] = value;
+  }
+}
+async function edit_combo(field, prop_idx) {
+  let combo = props[prop_idx];
+  if (!!combo)
+    combo.show();
+  else {
+    placeholder = field;
+    await tick();
+    combo = props[prop_idx];
+    if (!!combo)
+      combo.show(void 0, () => {
+        placeholder = "";
+      });
+  }
+}
+async function edit_date(field, prop_idx) {
+  let combo = props[prop_idx];
+  console.log("edit_propery", field, combo);
+  if (!!combo)
+    combo.show();
+  else {
+    placeholder = field;
+    await tick();
+    combo = props[prop_idx];
+    if (!!combo)
+      combo.show(void 0, () => {
+        placeholder = "";
+      });
+  }
+}
+</script>
+
+<div class="text-xs grid-{definition.properties.length}">
+    {#each definition.properties as prop, prop_index}
+        <p class="col-span-1 w-full mr-auto mt-0.5">
+            {#if item[prop.a] || placeholder == prop.name}
+                <span role="gridcell" tabindex="0">
+                    {#if prop.type == rList_property_type.Date}
+                        <DatePicker self={item} 
+                                    a={prop.a}
+                                    compact={true}
+                                    on_select={prop.on_select}
+                                    s="xs"
+                                    in_context="props sel"
+                                    bind:this={props[prop_index]}
+                                    changed={(value)=>{on_date_changed(value, prop.a)}}
+                        />
+                    {:else if prop.type == rList_property_type.Combo}
+                        <Combo  self={item} 
+                                in_context="props sel" 
+                                compact={true} 
+                                a={prop.a}
+                                on_select={prop.on_select}
+                                is_association={prop.association}
+                                icon={false} 
+                                bind:this={props[prop_index]}
+                                definition={prop.combo_definition}
+                                changed={(key,name)=>{on_combo_changed(key, name, prop)}}
+                                s='xs'/>
+                    {:else if prop.type == rList_property_type.Static}
+                        <span class="dark:text-white text-gray-400 truncate px-2.5 bg-slate-900/10 dark:bg-slate-100/10 rounded-lg">
+                            {item[prop.a]}
+                        </span>
+                    {/if}
+                </span>
+            {/if}
+        </p>
+    {/each}
+</div>
+
+<style>
+    .grid-1
+    {
+        display: grid;
+        grid-template-columns: 100%;
+    }
+
+    .grid-2
+    {
+        display: grid;
+        grid-template-columns: 50% 50%;
+    }
+
+    .grid-3
+    {
+        display: grid;
+        grid-template-columns: 33% 33% 33%;
+    }
+
+    .grid-4
+    {
+        display: grid;
+        grid-template-columns: 25% 25% 25% 25%;
+    }
+
+</style>

package/components/list/internal/list.element.props.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import { rList_definition } from '../List';
+declare const __propDef: {
+    props: {
+        definition: rList_definition;
+        item: object;
+        placeholder?: string | undefined;
+        edit_property?: ((field: string) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+    get edit_property(): (field: string) => void;
+}
+export {};

package/components/list/internal/list.element.summary.svelte

@@ -0,0 +1,40 @@
+<script>import {
+  editable as _editable
+} from "../../../utils";
+export let id;
+export let readonly = false;
+export let text = "";
+export let placeholder = false;
+export let editable;
+export let click_edit;
+let user_class = $$props.class ?? "";
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+{#if readonly}
+    <p {id} class="  sm:text-xs sm:min-h-[1rem]
+                    text-base min-h-[1.5rem]
+                    text-slate-400 
+                    {user_class}"
+                    on:click>
+        {text}
+    </p>
+{:else if text}
+    <p {id} class=" sm:text-xs sm:min-h-[1rem]
+                    text-base min-h-[1.5rem]
+                    text-slate-400 
+                    {user_class}"
+            use:_editable={editable}
+            on:click>
+        {text}
+</p>
+{:else if placeholder}
+    <p   {id} class="sm:text-xs sm:min-h-[1rem]
+                     text-base min-h-[1.5rem]
+                     text-slate-400 
+                     {user_class}"
+            use:_editable={editable}
+            on:click>
+    </p>
+{/if}
+    

package/components/list/internal/list.element.summary.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id: string;
+        readonly?: boolean | undefined;
+        text?: string | undefined;
+        placeholder?: boolean | undefined;
+        editable: any;
+        click_edit: any;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+}
+export {};

package/components/list/internal/list.element.svelte

@@ -10,8 +10,9 @@ import {
 } from "../../../utils";
 import { show_grid_menu, show_menu } from "../../menu";
 import { push_changes, inform_modification } from "../../../updates";
-import Combo from "../../combo/combo.svelte";
-import DatePicker from "../../date.svelte";
+import Summary from "./list.element.summary.svelte";
+import Properties from "./list.element.props.svelte";
+import { is_device_smaller_than } from "../../../utils";
 import { rList_definition, rList_property_type } from "../List";
 export let item;
 export let title = "";
@@ -21,7 +22,8 @@ export let toolbar_operations;
 export let context_menu;
 let definition = getContext("rList-definition");
 let placeholder = "";
-let props = [];
+let props_sm;
+let props_md;
 $:
   is_row_active = calculate_active(item, $context_items_store);
 $:
@@ -30,6 +32,8 @@ $:
   selected_class = is_row_selected ? "!border-blue-300" : "";
 $:
   focused_class = is_row_active ? "bg-gray-200 dark:bg-gray-700" : "";
+$:
+  is_small = is_device_smaller_than("sm");
 if (!typename) {
   if (item.$type)
     typename = item.$type;
@@ -113,11 +117,14 @@ function edit_row_property(e, part) {
       force_editing("Title");
     else if (part == "bottom" && !definition.summary_readonly)
       force_editing("Summary");
+  } else {
+    if (part == "top" && !definition.title_readonly)
+      force_editing("Title");
+    else if (part == "bottom" && !definition.summary_readonly)
+      force_editing("Summary");
   }
 }
 function activate_row(e, item2) {
-  if (is_row_active) {
-  }
   activate_item("props", item2, toolbar_operations(item2));
   if (e)
     e.stopPropagation();
@@ -137,42 +144,16 @@ function on_contextmenu(e) {
   }
   e.preventDefault();
 }
-function on_date_changed(value, a) {
-  if (!value)
-    item[a] = "";
-  else
-    item[a] = value.toJSON();
-}
-function on_combo_changed(key, name, prop) {
-  if (prop.association) {
-    let iname = prop.combo_definition.element_name ?? "$display";
-    item[prop.a] = {
-      $ref: key,
-      [iname]: name
-    };
-  } else {
-    let value = key ?? name;
-    item[prop.a] = value;
-  }
-}
 export function edit_property(field) {
   if (field == title)
     force_editing("Title");
   else if (field == summary)
     force_editing("Summary");
   else {
-    let prop_idx = definition.properties.findIndex((p) => p.name == field);
-    if (prop_idx < 0)
-      return;
-    let property = definition.properties[prop_idx];
-    switch (property.type) {
-      case rList_property_type.Date:
-        edit_date(field, prop_idx);
-        break;
-      case rList_property_type.Combo:
-        edit_combo(field, prop_idx);
-        break;
-    }
+    if (is_device_smaller_than("sm"))
+      props_sm.edit_property(field);
+    else
+      props_md.edit_property(field);
   }
 }
 async function force_editing(field) {
@@ -192,41 +173,13 @@ async function force_editing(field) {
     placeholder = "";
   });
 }
-async function edit_combo(field, prop_idx) {
-  let combo = props[prop_idx];
-  if (!!combo)
-    combo.show();
-  else {
-    placeholder = field;
-    await tick();
-    combo = props[prop_idx];
-    if (!!combo)
-      combo.show(void 0, () => {
-        placeholder = "";
-      });
-  }
-}
-async function edit_date(field, prop_idx) {
-  let combo = props[prop_idx];
-  if (!!combo)
-    combo.show();
-  else {
-    placeholder = field;
-    await tick();
-    combo = props[prop_idx];
-    if (!!combo)
-      combo.show(void 0, () => {
-        placeholder = "";
-      });
-  }
-}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 {#if item}
 {@const element_title = item[title]}
 
-<section    class="flex flex-row my-0  w-full text-sm text-slate-700 dark:text-slate-400 cursor-default rounded-md border border-transparent {selected_class} {focused_class}"
+<section    class="mt-3 flex flex-row my-0  w-full text-sm text-slate-700 dark:text-slate-300 cursor-default rounded-md border border-transparent {selected_class} {focused_class}"
             on:contextmenu={on_contextmenu}
             role="menu"
             tabindex="-1">
@@ -234,89 +187,51 @@ async function edit_date(field, prop_idx) {
     <slot name="left" element={item}/>
     
     <div class="ml-3 w-full py-1" use:selectable={item} on:click={(e) => {activate_row(e, item)}} role="row" tabindex="0">
-        <div class="flex flex-row" on:click={(e) => edit_row_property(e, 'top')}>
-            <p  class=" text-lg font-semibold min-h-[1.75rem]
-                        sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
-                        whitespace-nowrap overflow-clip flex-none w-1/2 sm:w-1/3">
-                {#if definition.title_readonly}
-                <span  id="__hd_list_ctrl_{item[item_key]}_Title" role="gridcell" tabindex="0"> 
+        <div class="block sm:flex sm:flex-row" on:click={(e) => edit_row_property(e, 'top')}>
+           
+            {#if definition.title_readonly}
+                <p  class=" text-lg font-semibold min-h-[1.75rem]
+                            sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
+                            whitespace-nowrap overflow-clip w-full sm:flex-none sm:w-2/3"
+                    id="__hd_list_ctrl_{item[item_key]}_Title"> 
                     {element_title}
-                </span>
-                {:else}
-                    {#key item[title]} <!-- Wymusza pełne wyrenderowanie zwłasza po zmiane z pustego na tekst  -->
-                    <span  id="__hd_list_ctrl_{item[item_key]}_Title" role="gridcell" tabindex="0"
+                </p>
+            {:else}
+                {#key item[title]} <!-- Wymusza pełne wyrenderowanie zwłasza po zmiane z pustego na tekst  -->
+                    <p  class=" text-lg font-semibold min-h-[1.75rem]
+                                sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
+                                whitespace-nowrap overflow-clip w-full sm:flex-none sm:w-2/3"
+                        id="__hd_list_ctrl_{item[item_key]}_Title"
                         use:editable={(text) => {change_name(text)}}
                         on:click={edit}> 
                             {element_title}
-                    </span>
-                    {/key}
-                {/if}
-            </p>
-
-            <!--div class="flex flex-row justify-between text-xs flex-none w-1/2 sm:w-2/3"-->
-            <div class="text-xs flex-none w-1/2 sm:w-2/3 grid-{definition.properties.length}">
-                {#each definition.properties as prop, prop_index}
-                    <p class="col-span-1 w-full mr-auto mt-0.5">
-                        {#if item[prop.a] || placeholder == prop.name}
-                            <span role="gridcell" tabindex="0">
-                                {#if prop.type == rList_property_type.Date}
-                                    <DatePicker self={item} 
-                                                a={prop.a}
-                                                compact={true}
-                                                on_select={prop.on_select}
-                                                s="xs"
-                                                in_context="props sel"
-                                                bind:this={props[prop_index]}
-                                                changed={(value)=>{on_date_changed(value, prop.a)}}
-                                    />
-                                {:else if prop.type == rList_property_type.Combo}
-                                    <Combo  self={item} 
-                                            in_context="props sel" 
-                                            compact={true} 
-                                            a={prop.a}
-                                            on_select={prop.on_select}
-                                            is_association={prop.association}
-                                            icon={false} 
-                                            bind:this={props[prop_index]}
-                                            definition={prop.combo_definition}
-                                            changed={(key,name)=>{on_combo_changed(key, name, prop)}}
-                                            s='xs'/>
-                                {:else if prop.type == rList_property_type.Static}
-                                    <span class="dark:text-white text-gray-400 truncate px-2.5 bg-slate-900/10 dark:bg-slate-100/10 rounded-lg">
-                                        {item[prop.a]}
-                                    </span>
-                                {/if}
-                            </span>
-                        {/if}
                     </p>
-                {/each}
-            </div>
+                {/key}
+            {/if}
+           
+
+            <section class="hidden sm:block w-full sm:flex-none sm:w-1/3">
+                <Properties {definition} {item} {placeholder} bind:this={props_md}/>
+            </section>
         </div>
 
         {#if summary && (item[summary] || placeholder=='Summary')}
             {@const element_id = `__hd_list_ctrl_${item[item_key]}_Summary`}
-            <p class="  sm:text-xs sm:min-h-[1rem]
-                        text-base min-h-[1.5rem]
-                        text-slate-400 " 
-                    on:click={(e) => edit_row_property(e, 'bottom')}>
-                {#if definition.summary_readonly}
-                    <span   id={element_id} role="gridcell" tabindex="0">
-                        {item[summary]}
-                    </span>
-                {:else if item[summary]}
-                    <span   id={element_id} role="gridcell" tabindex="0"
-                            use:editable={(text) => {change_summary(text)}}
-                            on:click={edit}>
-                        {item[summary]}
-                    </span>
-                {:else if placeholder == 'Summary'}
-                    <span   id={element_id}
-                            use:editable={(text) => {change_summary(text)}}>
-                    </span>
-                {/if}
-                
-            </p>
+            <Summary
+                    id={element_id}
+                    on:click={(e) => edit_row_property(e, 'bottom')}
+                    text={item[summary]}
+                    readonly={definition.summary_readonly}
+                    placeholder={placeholder == 'Summary'}
+                    editable={(text) => {change_summary(text)}}
+                    click_edit={edit}
+                />
         {/if}
+
+        <section class="block sm:hidden w-full sm:flex-none sm:w-2/3">
+            <Properties {definition} {item} {placeholder} bind:this={props_sm}/>
+        </section>
+
     </div>
 </section>
 {/if}

package/components/list/list.date.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext } from "svelte";
+    <script>import { getContext } from "svelte";
 import { rList_property_type, rList_property } from "./List";
 export let name;
 export let a = "";

package/components/list/list.svelte

@@ -133,8 +133,8 @@ export function edit(element, property_name) {
 
 
 {#if title}
-    <p class="hidden sm:block mt-3 uppercase text-sm text-center">{title}</p>
-    <hr class="hidden sm:block w-full">
+    <p class="hidden sm:block mt-3 ml-3 pb-5 text-lg text-left">{title}</p>
+    <!--hr class="hidden sm:block w-full"-->
 {/if}
 
 <!--div class="w-full h-full overflow-y-auto"-->

package/horizontal.toolbar.svelte

@@ -205,7 +205,7 @@
 
     <div class="grow">
         
-        <div class="block sm:hidden mt-3 uppercase text-sm text-center">{@html title}</div>
+        <div class="block sm:hidden mt-4 sm:mt-3 uppercase text-sm text-center">{@html title}</div>
     </div>
 
     <div class="flex-none ml-auto flex h-12 sm:h-10">        

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.4.44",
+  "version": "0.4.45",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -75,6 +75,8 @@
     "./components/input.text.svelte": "./components/input.text.svelte",
     "./components/inputbox.ltop.svelte": "./components/inputbox.ltop.svelte",
     "./components/list/List": "./components/list/List.js",
+    "./components/list/internal/list.element.props.svelte": "./components/list/internal/list.element.props.svelte",
+    "./components/list/internal/list.element.summary.svelte": "./components/list/internal/list.element.summary.svelte",
     "./components/list/internal/list.element.svelte": "./components/list/internal/list.element.svelte",
     "./components/list/internal/list.inserter.svelte": "./components/list/internal/list.inserter.svelte",
     "./components/list/list.combo.svelte": "./components/list/list.combo.svelte",

package/utils.js

@@ -162,7 +162,7 @@ export function editable(node, action)
         node.contentEditable = "true"
         node.addEventListener("blur", blur_listener);
         node.addEventListener("keydown", key_listener);
-        
+
         node.focus();
 
         await tick();
@@ -172,6 +172,8 @@ export function editable(node, action)
         let end_container = range.endContainer;
         range.setStart(end_container, end_offset)
         range.setEnd(end_container, end_offset)
+        //range.setStart(node, 0)
+        //range.setEnd(node, 0)
        // console.log('range rect: ', range.getBoundingClientRect())
         let sel = window.getSelection();
         sel.removeAllRanges();