@humandialog/forms.svelte 0.4.43 → 0.4.45

package/components/Grid.menu.svelte

@@ -121,7 +121,7 @@
             {@const col=col_span(operation.columns ?? 1)}
             
             <button class=" py-2.5 px-5 {col}
-                            text-xs font-medium text-gray-900 dark:text-gray-400 dark:hover:text-white
+                            text-base sm:text-xs font-medium text-gray-900 dark:text-gray-400 dark:hover:text-white
                             bg-slate-100 hover:bg-slate-200 dark:bg-gray-800 dark:hover:bg-gray-700 active:bg-slate-300 dark:active:bg-gray-600
                             border rounded border-gray-200 dark:border-gray-600 focus:outline-none
                             inline-flex items-center justify-center"

package/components/combo/combo.svelte

@@ -48,18 +48,18 @@ switch (s) {
     label_mb = "mb-2";
     input_pt = "pt-2.5";
     input_pb = "pb-2.5";
-    font_size = "text-sm";
-    line_h = "h-5";
+    font_size = "text-lg sm:text-sm";
+    line_h = "h-7 sm:h-5";
     break;
   case "xs":
     label_mb = "mb-0.5";
     input_pt = "pt-0.5";
     input_pb = "pb-0.5";
-    font_size = "text-xs";
-    line_h = "h-4";
+    font_size = "text-base sm:text-xs";
+    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>
 
@@ -553,7 +554,7 @@ function on_focus_out(e) {
                 {#if _filtered_source.length > 0}
                     {#each _filtered_source as item (item.Key)}
                         <!-- svelte-ignore a11y-click-events-have-key-events -->
-                        <li class="rounded p-2 flex flex-row items-center" 
+                        <li class="rounded p-2 flex flex-row items-center {font_size}" 
                             class:bg-gray-100={highlighted_option == item}
                             class:dark:bg-gray-700={highlighted_option == item}
                             class:dark:hover:bg-gray-700={highlighted_option == item}

package/components/contextmenu.svelte

@@ -188,30 +188,35 @@ function hide_submenu() {
 </script>
 
 <div id="__hd_svelte_contextmenu" 
-    class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg border border-gray-200 dark:border-gray-700 shadow-md z-30 fixed min-w-[{min_width_px}px] w-max" 
+    class=" bg-white dark:bg-gray-700 text-slate-600 dark:text-gray-400 rounded-lg border border-gray-200 dark:border-gray-900 shadow-md 
+            z-30 fixed min-w-[{min_width_px}px] w-max" 
     style={`left:${x}px; top:${y}px; display:${display}`}
     bind:this={menu_root}>
 
     {#each operations as operation, index}
         {@const is_separator = operation.separator}
         {#if is_separator}
-            <hr class="my-1 mx-1">
+            <hr class="my-1 mx-0 border-1 dark:border-slate-900">
         {:else}
-            {@const icon_placeholder_size = operation.description ? 12 : 10}
+            {@const mobile = is_device_smaller_than("sm")}
+            {@const icon_placeholder_without_desc = mobile ? 12 : 10}
+            {@const icon_placeholder_with_desc = mobile ? 14 : 12}
+            {@const icon_placeholder_size = operation.description ? icon_placeholder_with_desc : icon_placeholder_without_desc}
             {@const menu_item_id = menu_items_id_prefix + index}
-            {@const active = focused_index == index ? 'bg-gray-200 dark:bg-gray-700' : ''}
+            {@const active = focused_index == index ? 'bg-gray-200 dark:bg-gray-600' : ''}
             {@const has_submenu = operation.menu !== undefined && operation.menu.length > 0}
             
-            <button class="font-medium m-0 p-2 text-sm w-full text-left flex flex-row cursor-context-menu {active} focus:outline-none"
+            <button class="font-medium m-0 p-2 text-lg sm:text-sm w-full text-left flex flex-row cursor-context-menu {active} focus:outline-none"
                     id={menu_item_id}
                     bind:this={menu_items[index]}
                     on:click|stopPropagation={(e) => { execute_action(operation, index) } } 
                     on:mouseenter = {(e) => {on_mouse_move(index)}}
                     on:keydown|stopPropagation={(e) => on_keydown(e, operation, index)}>
                     
-                <div class="flex items-center justify-center" style:width={`${icon_placeholder_size*0.25}rem`}>
+                <div class="flex items-center justify-center mt-1 sm:mt-0.5" style:width={`${icon_placeholder_size*0.25}rem`}>
                     {#if operation.icon}
-                        {@const icon_size = icon_placeholder_size - 6}
+                        {@const cc = mobile ? 7 : 6}
+                        {@const icon_size = icon_placeholder_size - cc}
                         <Icon size={icon_size} component={operation.icon}/>
                     {/if}
                 </div>
@@ -219,7 +224,7 @@ function hide_submenu() {
                     <p>{operation.caption}</p>
                     {#if operation.description}
                         {@const shortcut_width_px = operation.shortcut ? 80 : 0}
-                        <p  class="text-sm font-normal text-gray-400 dark:text-gray-500 truncate inline-block"
+                        <p  class="text-sm font-normal text-slate-900 dark:text-gray-500 truncate inline-block"
                             style:max-width={`calc(${width_px-shortcut_width_px} - 3rem)`} >{operation.description}</p>
                     {/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 = "";
@@ -37,31 +38,31 @@ export function show(event, hide_callback) {
 let is_compact = getContext("rIs-table-component") || compact;
 let input_pt = "pt-0.5";
 let input_pb = "pb-1";
-let font_size = "text-sm";
-let line_h = "h-4";
+let font_size = "text-lg sm:text-sm";
+let line_h = "h-7 sm:h-5";
 switch (s) {
   case "md":
     input_pt = "pt-2.5";
     input_pb = "pb-2.5";
-    font_size = "text-sm";
-    line_h = "h-5";
+    font_size = "text-lg sm:text-sm";
+    line_h = "h-7 sm:h-5";
     break;
   case "xs":
     input_pt = "pt-0.5";
     input_pb = "pb-0.5";
-    font_size = "text-xs";
-    line_h = "h-4";
+    font_size = "text-base sm:text-xs";
+    line_h = "h-6 sm:h-4";
     break;
 }
 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/icon.svelte

@@ -6,7 +6,7 @@ export let img = "";
 export let label = "";
 export let symbol = "";
 export let color = "";
-export let size = 5;
+export let size = void 0;
 export let bg = "";
 export let circle = false;
 let additional_class = $$restProps.class ?? "";
@@ -14,7 +14,6 @@ let id = $$restProps.id ?? "";
 let _bg;
 let txt = "";
 let symbol_html = "";
-let icon_size = `${size * 0.25}rem`;
 $: {
   if (symbol) {
     if (symbol.startsWith("label:"))
@@ -57,11 +56,24 @@ $: {
   } else
     component = component;
 }
+let style;
+$: {
+  if (size == void 0) {
+    if (!additional_class) {
+      size = 5;
+      let icon_size = `${size * 0.25}rem`;
+      style = `width: ${icon_size}; height: ${icon_size}`;
+    } else
+      style = "";
+  } else {
+    let icon_size = `${size * 0.25}rem`;
+    style = `width: ${icon_size}; height: ${icon_size}`;
+  }
+}
 </script>
 
 <div class=" {additional_class}"
-    style:width={icon_size} 
-    style:height={icon_size} 
+    style="{style}"
     style:background-color={_bg}
     style:border-radius={ circle ? '50%' : ''}
     {id}

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,84 +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="font-bold whitespace-nowrap overflow-clip flex-none min-h-[1.25rem] 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="text-xs text-slate-400" style="min-height: 1rem;"  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/internal/list.inserter.svelte

@@ -9,15 +9,15 @@ export function run(onclose) {
 let insertion_paragraph;
 </script>
 
-<section    class="flex flex-row my-0  w-full text-sm text-slate-700 dark:text-slate-400 cursor-default rounded-md border-2 border-transparent bg-gray-200 dark:bg-gray-700">
+<section    class="flex flex-row my-0  w-full text-lg sm:text-sm text-slate-700 dark:text-slate-400 cursor-default rounded-md border-2 border-transparent bg-gray-200 dark:bg-gray-700">
     {#if icon}
         <!--Icon   size={3} 
                 component={FaPlus}  
                 class="mt-1.5 ml-2 "/-->
-        <div class="h-4 w-4 mt-1.5 ml-2"></div>
+        <div class="h-5 w-5 sm:h-4 sm:w-4 mt-2 sm:mt-1.5 ml-2"></div>
     {/if}
 
-    <p  class="ml-3 py-1 font-bold whitespace-nowrap overflow-clip flex-none w-1/2 sm:w-1/3" tabindex="0"
+    <p  class="ml-3 py-1 font-semibold sm:font-bold whitespace-nowrap overflow-clip flex-none w-1/2 sm:w-1/3" tabindex="0"
         bind:this={insertion_paragraph}
         use:editable={oninsert} >
     </p>

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/components/sidebar/sidebar.group.svelte

@@ -14,7 +14,7 @@
     <slot/>
 
     {#if inserter}
-        <Edit class="p-2 text-base font-normal text-gray-500 rounded-lg dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700" on_enter={inserter} placeholder={inserter_placeholder} inserter={true}>
+        <Edit class="p-3 sm:p-2 text-lg sm:text-base font-normal text-gray-500 rounded-lg dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700" on_enter={inserter} placeholder={inserter_placeholder} inserter={true}>
             <Icon size={5} component={FaPlus} class="mr-3"/>
         </Edit>
     {/if}

package/components/sidebar/sidebar.item.svelte

@@ -80,7 +80,7 @@ function on_show_menu(e) {
         on:keydown
         on:keyup
         class="     border border-transparent rounded-lg
-                    text-base font-normal 
+                    text-lg sm:text-base font-normal 
                     text-gray-900 sm:hover:bg-gray-100  
                     dark:text-white sm:dark:hover:bg-gray-700 {user_class}
                     flex flex-row justify-between"
@@ -89,7 +89,7 @@ function on_show_menu(e) {
         class:selected={selected(selectable, context_data)}>
             <a  href={href} 
                 on:click={on_link_clicked} 
-                class="flex-1 ml-2 my-2 inline-flex items-center group">
+                class="flex-1 ml-2 my-3 sm:my-2 inline-flex items-center group">
                 {#if icon}
                     <Icon size={5} component={icon}/>
                 {/if}
@@ -102,7 +102,7 @@ function on_show_menu(e) {
             <section    class="flex-0 w-20 sm:w-12 h-10 flex-0 flex flex-row"
                         use:selectable_if_needed={selectable}>
                 {#if can_show_context_menu(selectable, context_data)}
-                    <button class="w-4 h-4 mt-3 mr-2 ml-auto" on:click={on_show_menu}>
+                    <button class="w-6 sm:w-4 h-6 sm:h-4 mt-3 mr-3 sm:mr-2 ml-auto" on:click={on_show_menu}>
                         <FaBars/>
                     </button>
                 {/if}

package/desk.svelte

@@ -115,22 +115,22 @@
             tools_visibility = "hidden sm:block sm:fixed"
             fab_visibility = "fixed sm:hidden"
 
-            content_top = 'top-[40px] sm:top-[40px]'
+            content_top = 'top-[50px] sm:top-[40px]'
             
             if(bottom_bar_visible)
-                content_height = `h-[calc(100vh-320px)] sm:h-[calc(100vh-280px)]`    
+                content_height = `h-[calc(100vh-290px)] sm:h-[calc(100vh-280px)]`    
             else    
-                content_height = `h-[calc(100vh-80px)] sm:h-[calc(100vh-40px)]` 
+                content_height = `h-[calc(100vh-50px)] sm:h-[calc(100vh-40px)]` 
                
         }
         else
         {
             tools_visibility = "hidden"
-            content_top = `top-[40px] sm:top-0`
+            content_top = `top-[50px] sm:top-0`
             if(bottom_bar_visible)
-                content_height = `h-[calc(100vh-280px)] sm:h-[calc(100vh-240px)]`           
+                content_height = `h-[calc(100vh-290px)] sm:h-[calc(100vh-240px)]`           
             else
-                content_height = `h-[calc(100vh-40px)] sm:h-screen`
+                content_height = `h-[calc(100vh-50px)] sm:h-screen`
         }
         
         
@@ -165,8 +165,8 @@
             <!--###########################################################-->
             <!--##  HORIZONTAL TOOLBAR (FOR PHONES)  ######################-->
             <!--###########################################################-->
-            <header class="fixed sm:hidden w-screen top-0 h-[40px] z-20  overflow-auto shadow  shadow-slate-900/5 dark:shadow-none" >
-                    <div class=" flex flex-row justify-between    bg-slate-900   text-gray-100 ">
+            <header class="fixed sm:hidden w-screen top-0 h-[50px] sm:h-[40px] z-20  overflow-auto shadow  shadow-slate-900/5 dark:shadow-none" >
+                    <div class=" flex flex-row justify-between  h-full  bg-slate-900   text-gray-100 ">
                         <HorizontalToolbar app_config={layout}/>
                     <div>
             </header>        
@@ -176,7 +176,7 @@
             <!--#######################################################-->
             <!--##  VERTICAL TOOLBAR                 ##################-->
             <!--#######################################################-->
-            <div  class="hidden sm:block fixed left-0 top-0 w-[40px] h-screen z-20 inset-0   overflow-hidden">
+            <div  class="hidden sm:block fixed left-0 top-0 w-[50px] sm:w-[40px] h-screen z-20 inset-0   overflow-hidden">
                 <div class="sticky top-0 flex h-full w-10 bg-slate-900 flex-col items-center text-gray-100 shadow">
                     <VerticalToolbar app_config={layout}/>
                 </div>    
@@ -188,13 +188,13 @@
             <!--##  MAIN SIDE BAR                    ##################-->
             <!--#######################################################-->
             {#if true}
-            {@const sidebar_left = $sidebar_left_pos==0 ? "left-0" : "left-[40px]"}
-            {@const sidebar_small_width = $sidebar_left_pos==0 ? "w-full" : "w-[calc(100vw-40px)]"}
+            {@const sidebar_left = $sidebar_left_pos==0 ? "left-0" : "left-[50px]"}
+            {@const sidebar_small_width = $sidebar_left_pos==0 ? "w-full" : "w-[calc(100vw-50px)]"}
 
             <div  class="{main_side_panel_visibility}  
                             {sidebar_left}  sm:left-[40px]
-                            top-[40px]  sm:top-0 
-                            h-[calc(100vh-40px)] sm:h-full {lg_main_sidebar_height}
+                            top-[50px]  sm:top-0 
+                            h-[calc(100vh-50px)] sm:h-full {lg_main_sidebar_height}
                             {sidebar_small_width} sm:w-[320px] 
                             z-20 overflow-x-hidden">
 
@@ -256,6 +256,14 @@
                     
                 </div>    
 
+                <!-- #########################################################-->
+                <!-- ## MODAL DIALOG #########################################-->
+                <!-- #########################################################-->
+                <div id="__hd_svelte_modal_root" class="z-30">
+                    <!-- after <Modal/> component is shown it's rettached to above div
+                        see: modal.svelte afterUpdate -->
+                </div>
+
             </section>
 
         </div>

package/horizontal.toolbar.svelte

@@ -197,23 +197,23 @@
 </script>
 
 <div class="flex flex-row w-full">
-    <div class="flex-none left-0 flex h-10">
-        <button class="w-10 h-full flex justify-center items-center text-slate-300 hover:text-slate-100" on:click={toggle_navigator}>
-            <Icon size={6} component={icon}/>
+    <div class="flex-none left-0 flex h-12 sm:h-10">
+        <button class="w-12 sm:w-10 h-full flex justify-center items-center text-slate-300 hover:text-slate-100" on:click={toggle_navigator}>
+            <Icon class="w-8 sm:w-6 h-8 sm:h-6" component={icon}/>
         </button>
     </div>
 
     <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-10">        
+    <div class="flex-none ml-auto flex h-12 sm:h-10">        
         <button
-            class="h-full w-10 px-0 flex justify-center items-center   text-slate-300 hover:text-slate-100"
+            class="h-full w-12 sm:w-10 px-0 flex justify-center items-center   text-slate-300 hover:text-slate-100"
             on:click={show_options}>
 
-            <Icon size={4} component={FaCog} />
+            <Icon class="w-5 sm:w-4 h-5 sm:h-4" component={FaCog} />
         </button>
     </div>
 

package/modal.svelte

@@ -1,4 +1,5 @@
-<script>import Icon from "./components/icon.svelte";
+<script>import { afterUpdate, onMount, tick } from "svelte";
+import Icon from "./components/icon.svelte";
 export let title = "";
 export let open = false;
 export let content = "";
@@ -15,6 +16,18 @@ export function show(on_close_callback = void 0) {
   open = true;
   close_callback = on_close_callback;
 }
+let root;
+afterUpdate(
+  async () => {
+    if (!!root) {
+      let modal_root = document.getElementById("__hd_svelte_modal_root");
+      if (!!modal_root && root.parentElement != modal_root) {
+        await tick();
+        modal_root.appendChild(root);
+      }
+    }
+  }
+);
 let close_callback = void 0;
 function on_ok(event) {
   if (on_ok_callback)
@@ -32,7 +45,7 @@ function on_cancel(event) {
 </script>
 
 {#if open}
-<div class="relative z-20" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+<div class="relative z-20" aria-labelledby="modal-title" role="dialog" aria-modal="true" bind:this={root}>
     <!--
       Background backdrop, show/hide based on modal state.
   
@@ -43,9 +56,9 @@ function on_cancel(event) {
         From: "opacity-100"
         To: "opacity-0"
     -->
-    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+    <div class="fixed w-screen h-screen inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
   
-    <div class="fixed inset-0 z-20 w-screen overflow-y-auto">
+    <div class="fixed z-20 inset-0 w-screen overflow-y-auto">
       <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
         <!--
           Modal panel, show/hide based on modal state.
@@ -57,7 +70,8 @@ function on_cancel(event) {
             From: "opacity-100 translate-y-0 sm:scale-100"
             To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         -->
-        <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+        <div class=" transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all 
+                    sm:my-8 w-full sm:max-w-lg">
           <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
             <div class="sm:flex sm:items-start">
               <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.4.43",
+  "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();