@humandialog/forms.svelte 1.8.11 → 1.8.13

package/components/Floating_container.svelte

@@ -43,15 +43,12 @@ 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"))
     preventScrollRestorer = usePreventScroll();
   if (isDeviceSmallerThan("sm")) {
     $fabHiddenDueToPopup = true;
   }
   await tick();
-  if (!was_visible)
-    rootElement.addEventListener("click", on_before_container_click, true);
   cssPosition = calculatePosition(x, y, around_rect, true, false);
 }
 export function isVisible() {
@@ -64,8 +61,6 @@ export function hide() {
   visible = false;
   toolbar = null;
   cssPosition = calculatePosition(x, y, around_rect, false, false);
-  window.removeEventListener("click", on_before_window_click, true);
-  rootElement?.removeEventListener("click", on_before_container_click, true);
   if (preventScrollRestorer) {
     preventScrollRestorer();
     preventScrollRestorer = null;
@@ -82,7 +77,7 @@ async function onSizeChanged() {
   cssPosition = calculatePosition(x, y, around_rect, true, false);
 }
 let hide_window_indicator = 0;
-function on_before_window_click() {
+function on_before_window_click(e) {
   hide_window_indicator++;
   setTimeout(() => {
     if (hide_window_indicator != 0) {
@@ -155,30 +150,42 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
   }
   return result;
 }
+function on_window_click(e) {
+  const clickedElement = e.target;
+  if (clickedElement.id == "__hd_svelte_floating_container") {
+    hide();
+  }
+}
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div    id="__hd_svelte_floating_container"
         class=" Floating_container
-                bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md shadow-stone-500 dark:shadow-black z-40 fixed
+                z-40
+                fixed inset-0 w-screen overflow-y-auto overscroll-contain
+                "
+        hidden={!visible}
+        on:click={on_window_click}>
+    <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md shadow-stone-500 dark:shadow-black
                 sm:shadow-xl sm:shadow-slate-700/10
                 sm:dark:shadow-black/80
-                sm:outline sm:outline-1 sm:outline-stone-500"
-        style={cssPosition}
-        visible={visible}
-        bind:this={rootElement}>
-        {#if closeButtonPos}
-    <button class="     text-stone-800 dark:text-stone-400
-                        fixed w-6 h-6 flex items-center justify-center
-                        focus:outline-none font-medium  text-sm text-center"
-            style={closeButtonPos}
-            on:click={ hide }>  <!--rounded-full focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 text-stone-500 bg-stone-200/70 hover:bg-stone-200 dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700  -->
-            <Icon component={FaTimes} s="md"/>
-        </button>
-    {/if}
+                sm:outline sm:outline-1 sm:outline-stone-500 fixed"
+                style={cssPosition}
+                bind:this={rootElement}>
+            {#if closeButtonPos}
+        <button class="     text-stone-800 dark:text-stone-400
+                            fixed w-6 h-6 flex items-center justify-center
+                            focus:outline-none font-medium  text-sm text-center"
+                style={closeButtonPos}
+                on:click={ hide }>  <!--rounded-full focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 text-stone-500 bg-stone-200/70 hover:bg-stone-200 dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700  -->
+                <Icon component={FaTimes} s="md"/>
+            </button>
+        {/if}
 
-    {#if toolbar}
-        <svelte:component this={toolbar} {...props} {maxHeight} bind:this={internalElement} />
-    {/if}
+        {#if toolbar}
+            <svelte:component this={toolbar} {...props} {maxHeight} bind:this={internalElement} />
+        {/if}
+    </div>
 </div>
 
 <!-- use usePreventScroll instead -->

package/components/combo/combo.svelte

@@ -118,12 +118,15 @@ function setup(...args) {
   if (readOnly)
     can_be_activated = false;
   else if (is_compact) {
-    can_be_activated = false;
-    let contexts = inContext.split(" ");
-    contexts.forEach((ctx2) => {
-      if ($contextItemsStore[ctx2] == item)
-        can_be_activated = true;
-    });
+    if (inContext) {
+      can_be_activated = false;
+      let contexts = inContext.split(" ");
+      contexts.forEach((ctx2) => {
+        if ($contextItemsStore[ctx2] == item)
+          can_be_activated = true;
+      });
+    } else
+      can_be_activated = true;
   } else
     can_be_activated = true;
 }

package/components/contextmenu.container.svelte

@@ -0,0 +1,39 @@
+<script>import Menu from "./contextmenu.svelte";
+let visible = false;
+let menu;
+let onOrgHideCallback = void 0;
+export async function show(around, _operations, preference = 0, onHideCallback = void 0) {
+  visible = true;
+  onOrgHideCallback = onHideCallback;
+  menu?.show(around, _operations, preference, onHide);
+}
+export function isVisible() {
+  return visible;
+}
+export function hide() {
+  visible = false;
+  menu?.hide();
+}
+function onHide() {
+  if (onOrgHideCallback)
+    onOrgHideCallback();
+  visible = false;
+}
+function on_window_click(e) {
+  const clickedElement = e.target;
+  if (clickedElement.id == "__hd_svelte_contextmenu") {
+    hide();
+  }
+}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div id="__hd_svelte_contextmenu"
+    class=" z-40 
+            fixed inset-0 w-screen overflow-y-auto overscroll-contain"
+    hidden={!visible}
+    on:click={on_window_click}>
+
+    <Menu bind:this={menu}/>
+
+</div>

package/components/contextmenu.container.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        show?: ((around: DOMRect | DOMPoint, _operations: any, preference?: number, onHideCallback?: Function | undefined) => Promise<void>) | undefined;
+        isVisible?: (() => boolean) | undefined;
+        hide?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ContextmenuProps = typeof __propDef.props;
+export type ContextmenuEvents = typeof __propDef.events;
+export type ContextmenuSlots = typeof __propDef.slots;
+export default class Contextmenu extends SvelteComponentTyped<ContextmenuProps, ContextmenuEvents, ContextmenuSlots> {
+    get show(): (around: DOMRect | DOMPoint, _operations: any, preference?: number, onHideCallback?: Function | undefined) => Promise<void>;
+    get isVisible(): () => boolean;
+    get hide(): () => void;
+}
+export {};

package/components/contextmenu.svelte

@@ -204,7 +204,6 @@ export async function show(around, _operations, preference = 0, onHideCallback =
   const is_root_menu = owner_menu_item == void 0;
   if (is_root_menu) {
     hide_window_indicator = 0;
-    window.addEventListener("click", on_before_window_click, true);
     if (isDeviceSmallerThan("sm"))
       preventScrollRestorer = usePreventScroll();
   }
@@ -214,7 +213,7 @@ export async function show(around, _operations, preference = 0, onHideCallback =
   await tick();
   css_position = calculatePosition(x, y, true, false);
   if (is_root_menu)
-    menu_root.addEventListener("click", on_before_container_click, true);
+    ;
   if (menu_items.length && !isDeviceSmallerThan("sm"))
     focus_menu_item(focused_index);
 }
@@ -227,8 +226,6 @@ export function hide() {
   }
   visible = false;
   css_position = calculatePosition(x, y, false, false);
-  window.removeEventListener("click", on_before_window_click, true);
-  menu_root?.removeEventListener("click", on_before_container_click, true);
   if (preventScrollRestorer) {
     preventScrollRestorer();
     preventScrollRestorer = null;
@@ -417,203 +414,161 @@ function isOperationDisabled(operation) {
 }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 
-<div id="__hd_svelte_contextmenu"
-    class="
-            bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md shadow-stone-500
+<div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md shadow-stone-500
             dark:shadow-black z-40 fixed
             sm:shadow-xl sm:shadow-slate-700/10
             sm:dark:shadow-black/80
             sm:outline sm:outline-1 sm:outline-stone-500
-            z-40 fixed min-w-60 max-h-screen "
+            fixed min-w-60 max-h-screen "
+            style={css_position}
+                bind:this={menu_root}>
+        <div class="
+                    paper w-full sm:w-[24rem]
+                    prose prose-base prose-zinc dark:prose-invert prose-a:no-underline
+                    sm:max-w-3xl
 
-    style={css_position}
-    visible={visible}
-    bind:this={menu_root}>
-    <div class="
-                paper w-full sm:w-[24rem]
-                prose prose-base prose-zinc dark:prose-invert prose-a:no-underline
-                sm:max-w-3xl
+                    m-0 pt-3 pb-5 px-2
+                    sm:rounded
+                    sm:bg-stone-100 sm:dark:bg-stone-900
+                    flex flex-col
+                    ">
 
-                m-0 pt-3 pb-5 px-2
-                sm:rounded
-                sm:bg-stone-100 sm:dark:bg-stone-900
-                flex flex-col
-                ">
+        <!-------------------------------------------------------------------->
+        <!-- POPUP HEADER ---------------------------------------------------->
+        <!-------------------------------------------------------------------->
+        {#if closeButtonPos}
+        <h3 class = "flex-none">
+            <div class="px-2 w-full flex flex-row justify-between">
 
-    <!-------------------------------------------------------------------->
-    <!-- POPUP HEADER ---------------------------------------------------->
-    <!-------------------------------------------------------------------->
-    {#if closeButtonPos}
-    <h3 class = "flex-none">
-        <div class="px-2 w-full flex flex-row justify-between">
-
-            <div class="grow ">
-                <span class="px-2 text-left"></span>
-            </div>
-            <div class="py-1.5  flex flex-row justify-between">
-                <button class="ml-4 w-6
-                            hover:bg-stone-200 hover:dark:bg-stone-700
-                            hover:outline hover:outline-8
-                            hover:outline-stone-200 hover:dark:outline-stone-700"
-                            on:click={hide}>
-                    <Ricon icon = 'x' />
-                </button>
+                <div class="grow ">
+                    <span class="px-2 text-left"></span>
+                </div>
+                <div class="py-1.5  flex flex-row justify-between">
+                    <button class="ml-4 w-6
+                                hover:bg-stone-200 hover:dark:bg-stone-700
+                                hover:outline hover:outline-8
+                                hover:outline-stone-200 hover:dark:outline-stone-700"
+                                on:click={hide}>
+                        <Ricon icon = 'x' />
+                    </button>
+                </div>
             </div>
-        </div>
-    </h3>
-    {/if}
+        </h3>
+        {/if}
 
 
-    <!-------------------------------------------------------------------->
-    <!-- POPUP CONTENT---------------------------------------------------->
-    <!-------------------------------------------------------------------->
-    <div class="px-2 grow max-h-[45dvh] sm:max-h-[75dvh] overflow-y-auto overscroll-contain">
+        <!-------------------------------------------------------------------->
+        <!-- POPUP CONTENT---------------------------------------------------->
+        <!-------------------------------------------------------------------->
+        <div class="px-2 grow max-h-[45dvh] sm:max-h-[75dvh] overflow-y-auto overscroll-contain">
 
 
 
-        {#each operations as operation, index}
+            {#each operations as operation, index}
 
-            {@const is_separator = operation.separator}
-            {#if is_separator}
-                {#if index>0 && index < operations.length-1}
-                    <!--hr class="my-1 mx-4 border-1 border-stone-300 dark:border-stone-700"-->
-                    <hr class="my-4">
-                {/if}
-            {:else}
+                {@const is_separator = operation.separator}
+                {#if is_separator}
+                    {#if index>0 && index < operations.length-1}
+                        <!--hr class="my-1 mx-4 border-1 border-stone-300 dark:border-stone-700"-->
+                        <hr class="my-4">
+                    {/if}
+                {:else}
 
-                {@const mobile = isDeviceSmallerThan("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 isTop = index==0}
-                {@const isBottom = index == operations.length-1}
-                {@const isFocused = index == focused_index}
-                {@const clipFocusedBorder = isFocused ? (isTop ? 'rounded-t-lg' : (isBottom ? 'rounded-b-lg' : '')) : ''}
-                {@const active = calculateBackground(isFocused || isOperationActivated(operation), false)}
-                {@const has_submenu = operation.menu !== undefined && operation.menu.length > 0}
-                <!--div-->
-                <div class="pl-4 cursor-pointer {active}"
-                    id={menu_item_id}
-                    bind:this={menu_items[index]}
-                    on:click|stopPropagation={(e) => { execute_action(e, operation, index) } }
-                    on:mouseenter = {(e) => {on_mouse_move(index)}}
-                    on:keydown|stopPropagation={(e) => on_keydown(e, operation, index)}
-                    on:mousedown={mousedown}
-                    disabled={isOperationDisabled(operation)}
-                    class:opacity-60={isOperationDisabled(operation)}>
+                    {@const mobile = isDeviceSmallerThan("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 isTop = index==0}
+                    {@const isBottom = index == operations.length-1}
+                    {@const isFocused = index == focused_index}
+                    {@const clipFocusedBorder = isFocused ? (isTop ? 'rounded-t-lg' : (isBottom ? 'rounded-b-lg' : '')) : ''}
+                    {@const active = calculateBackground(isFocused || isOperationActivated(operation), false)}
+                    {@const has_submenu = operation.menu !== undefined && operation.menu.length > 0}
+                    <!--div-->
+                    <div class="pl-4 cursor-pointer {active} focus:outline-0"
+                        id={menu_item_id}
+                        bind:this={menu_items[index]}
+                        on:click|stopPropagation={(e) => { execute_action(e, operation, index) } }
+                        on:mouseenter = {(e) => {on_mouse_move(index)}}
+                        on:keydown|stopPropagation={(e) => on_keydown(e, operation, index)}
+                        on:mousedown={mousedown}
+                        disabled={isOperationDisabled(operation)}
+                        class:opacity-60={isOperationDisabled(operation)}
+                        tabindex="-1">
 
 
 
-                <h4 class = "font-normal my-0 py-2"> <!-- test -->
-                    <div class=" w-full flex flex-row justify-between">                    
-                        {#if operation.mricon}
-                            {@const color=operation.color ?? ''}
-                        <div class="py-1 mr-1 w-4 {color}"><Ricon icon = {operation.mricon} s/></div>
-                        {:else if operation.toggle !== undefined}
-                            {#if operation.toggle}
-                                <div class="py-1 mr-1 w-4 text-orange-800 dark:text-orange-200"><Ricon icon='toggle-right' s/></div>
+                    <h4 class = "font-normal my-0 py-2"> <!-- test -->
+                        <div class=" w-full flex flex-row justify-between">                    
+                            {#if operation.mricon}
+                                {@const color=operation.color ?? ''}
+                            <div class="py-1 mr-1 w-4 {color}"><Ricon icon = {operation.mricon} s/></div>
+                            {:else if operation.toggle !== undefined}
+                                {#if operation.toggle}
+                                    <div class="py-1 mr-1 w-4 text-orange-800 dark:text-orange-200"><Ricon icon='toggle-right' s/></div>
+                                {:else}
+                                    <div class="py-1 mr-1 w-4"><Ricon icon='toggle-left' s/></div>
+                                {/if}
+                            {:else if operation.icon}
+                            <div class="py-1 mr-1 w-4 text-orange-500"><Icon s="md" component={operation.icon}/></div>
                             {:else}
-                                <div class="py-1 mr-1 w-4"><Ricon icon='toggle-left' s/></div>
+                            <div class="py-1 mr-1 w-4"></div>
                             {/if}
-                        {:else if operation.icon}
-                        <div class="py-1 mr-1 w-4 text-orange-500"><Icon s="md" component={operation.icon}/></div>
-                        {:else}
-                        <div class="py-1 mr-1 w-4"></div>
-                        {/if}
-                        <div class="grow">
-                            <span class="px-2 text-left">{operation.caption}
-                            </span>
-                        </div>
+                            <div class="grow">
+                                <span class="px-2 text-left">{operation.caption}
+                                </span>
+                            </div>
 
-                        {#if has_submenu}
-                            <div class="py-1 mr-1 w-4"><Ricon icon = 'chevron-right' xs/></div>
-                            <svelte:self bind:this={submenus[index]} menu_items_id_prefix={`${menu_item_id}_`} owner_menu_item={menu_items[index]}/>
-                        {/if}
+                            {#if has_submenu}
+                                <div class="py-1 mr-1 w-4"><Ricon icon = 'chevron-right' xs/></div>
+                                <svelte:self bind:this={submenus[index]} menu_items_id_prefix={`${menu_item_id}_`} owner_menu_item={menu_items[index]}/>
+                            {/if}
 
-                    </div>
-                </h4>
+                        </div>
+                    </h4>
 
 
 
-        <!-- comming soon - top info --
-        <figcaption>
-            <div class="grid gap-4 grid-cols-3 grid-rows-1">
-                <span>OCT-254</span>
-                <span class="text-center"></span>
-                <span class="text-right">15 listopad 25</span>
-            </div>
-        </figcaption>
-        -------------------------------->
-        <!--@el------------------------->
-        <!-- comming soon - middle info --
-        <figcaption>
-            <div class="grid gap-4 grid-cols-3 grid-rows-1">
-                <span>Andrzej</span>
-                <span class="text-center"></span>
-                <span class="text-right">Specyfikacje</span>
-            </div>
-        </figcaption>
+            <!-- comming soon - top info --
+            <figcaption>
+                <div class="grid gap-4 grid-cols-3 grid-rows-1">
+                    <span>OCT-254</span>
+                    <span class="text-center"></span>
+                    <span class="text-right">15 listopad 25</span>
+                </div>
+            </figcaption>
+            -------------------------------->
+            <!--@el------------------------->
+            <!-- comming soon - middle info --
+            <figcaption>
+                <div class="grid gap-4 grid-cols-3 grid-rows-1">
+                    <span>Andrzej</span>
+                    <span class="text-center"></span>
+                    <span class="text-right">Specyfikacje</span>
+                </div>
+            </figcaption>
 
 
-        {#if summary && item[summary]}
-        <figcaption>
-            {item[summary]}
-        </figcaption>
-        {/if}
-        -------------------------------->
-            </div>
+            {#if summary && item[summary]}
+            <figcaption>
+                {item[summary]}
+            </figcaption>
+            {/if}
+            -------------------------------->
+                </div>
+            <!--/div-->
+        
+                {/if}
+            {/each}
+        </div>
         <!--/div-->
-    {#if false}
-                <button class="block w-full pr-4 text-left flex flex-row cursor-context-menu {active} focus:outline-none items-center"
-                        id={menu_item_id}
-                        bind:this={menu_items[index]}
-                        on:click|stopPropagation={(e) => { execute_action(e, operation, index) } }
-                        on:mouseenter = {(e) => {on_mouse_move(index)}}
-                        on:keydown|stopPropagation={(e) => on_keydown(e, operation, index)}
-                        on:mousedown={mousedown}
-                        disabled={isOperationDisabled(operation)}
-                        class:opacity-60={isOperationDisabled(operation)}>
 
-                    <div class="flex  justify-center space-x-10 px-4 py-2 ml-12 sm:ml-0" >
-                        {#if operation.icon}
-                            {@const cc = mobile ? 7 : 6}
-                            {@const icon_size = icon_placeholder_size - cc}
-                            <Icon s="md" component={operation.icon}/>
-                        {:else if operation.img}
-                            {@const cc = mobile ? 7 : 6}
-                            {@const icon_size = icon_placeholder_size - cc}
-                            <div class="w-4 h-4">
-                                <img src={operation.img} alt=""/>
-                            </div>
-                        {:else}
-                            {@const cc = mobile ? 7 : 6}
-                            {@const icon_size = icon_placeholder_size - cc}
-                            <div class="w-4 h-4"></div>
-                        {/if}
-                    </div>
-                    <div class="">
-                            <p class=""> {operation.caption}</p>
-                        {#if operation.description}
-                            <p  class="truncate inline-block text-xs">
-                                {operation.description}
-                            </p>
-                        {/if}
-                    </div>
-                    {#if has_submenu}
-                        <p class="ms-auto pr-1 text-sm font-mono text-stone-500">&rarr;</p>
-                        <svelte:self bind:this={submenus[index]} menu_items_id_prefix={`${menu_item_id}_`} owner_menu_item={menu_items[index]}/>
-                    {/if}
-                </button>
-    {/if}
-            {/if}
-        {/each}
-    </div>
-    <!--/div-->
+        </div>
+</div>
 
-    </div>
-    </div>
 
 <!-- use usePreventScroll instead -->
 <!--style>

package/components/kanban/internal/kanban.column.svelte

@@ -52,12 +52,16 @@ $:
 $:
   selected_class = is_row_selected ? "!border-blue-300 dark:!border-blue-300/50" : "";
 $:
-  focused_class = is_row_active ? "bg-stone-50 dark:bg-stone-800" : "";
+  focused_class = is_row_active ? "bg-stone-100 dark:bg-stone-800" : "";
 $:
   force_rerender($data_tick_store, $contextItemsStore);
 let is_visible = false;
 export function reload() {
   columnDef = definition.columns[currentColumnIdx];
+  if (!columnDef) {
+    is_visible = false;
+    return;
+  }
   let allItems = definition.getItems();
   if (definition.stateAttrib) {
     if (columnDef.state < 0) {
@@ -183,6 +187,8 @@ let headerElement;
 export function activate(e) {
   if (e)
     e.stopPropagation();
+  if (!columnDef)
+    return;
   if (!columnDef.operations)
     return;
   if (isActive("props", columnDef)) {

package/components/list/list.svelte

@@ -22,7 +22,7 @@ export let multiselectOperations = (items2) => [];
 export let key = "";
 export let selectionKey = "props";
 export let multiselect = false;
-export let component_id;
+export let component_id = "";
 export const CLEAR_SELECTION = 0;
 export const KEEP_SELECTION = -1;
 export const SELECT_PREVIOUS = -2;

package/components/list/list.svelte.d.ts

@@ -16,7 +16,7 @@ declare const __propDef: {
         key?: string | undefined;
         selectionKey?: string | undefined;
         multiselect?: boolean | undefined;
-        component_id: string;
+        component_id?: string | undefined;
         CLEAR_SELECTION?: 0 | undefined;
         KEEP_SELECTION?: -1 | undefined;
         SELECT_PREVIOUS?: -2 | undefined;

package/components/menu.js

@@ -1,4 +1,4 @@
-import Menu from './contextmenu.svelte';
+import Menu from './contextmenu.container.svelte';
 import Floating_container from './Floating_container.svelte';
 import Grid from './Grid.menu.svelte';
 let menu_comopnent = null;

package/components/r.editable.svelte

@@ -4,11 +4,12 @@
 	import { afterUpdate } from 'svelte';
 	import {ext} from '../i18n'
 
-  export let self
-  export let a
-  export let id = undefined
+	export let self
+	export let a
+	export let id = undefined
 	export let readonly = false
 	export let focusOnClick = true
+	export let local = false
 
   //https://developer.chrome.com/docs/web-platform/page-lifecycle-api#the-unload-event
   //https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event
@@ -36,7 +37,12 @@
 
 		text.trim()
 
-		setjItemProperty(self, a, text)
+		if(!local)
+			setjItemProperty(self, a, text)
+		else
+		{
+			self[a] = text	
+		}
 	}
 
 	function focus(e)

package/components/r.editable.svelte.d.ts

@@ -7,6 +7,7 @@ export default class R extends SvelteComponentTyped<{
     id?: string | undefined;
     readonly?: boolean | undefined;
     focusOnClick?: boolean | undefined;
+    local?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -22,6 +23,7 @@ declare const __propDef: {
         id?: string | undefined;
         readonly?: boolean | undefined;
         focusOnClick?: boolean | undefined;
+        local?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/r.icon.svelte

@@ -91,10 +91,16 @@
 
   import LoaderCircle from './ricons/loader-circle.svelte'
   import Check from './ricons/check.svelte'
+
   import Star from './ricons/star.svelte'
   import StarOff from './ricons/star-off.svelte'
   import Heart from './ricons/heart.svelte'
   import HeartOff from './ricons/heart-off.svelte'
+  import Bell from './ricons/bell.svelte'
+  import BellOff from './ricons/bell-off.svelte'
+  import Eye from './ricons/eye.svelte'
+  import EyeOff from './ricons/eye-off.svelte'
+
   import ExternalLink from './ricons/external-link.svelte'
   import ToggleLeft from './ricons/toggle-left.svelte'
   import ToggleRight from './ricons/toggle-right.svelte'
@@ -186,6 +192,11 @@
     'star-off': StarOff,
     'heart': Heart,
     'heart-off': HeartOff,
+    'bell': Bell,
+    'bell-off': BellOff,
+    'eye': Eye,
+    'eye-off': EyeOff,
+
     'external-link': ExternalLink,
     'toggle-left': ToggleLeft,
     'toggle-right': ToggleRight,

package/components/ricons/bell-off.svelte

@@ -0,0 +1,13 @@
+<script>
+  export let w = 24;
+  export let h = 24;
+  export let s = 2;
+</script>
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width={w} height={h} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+  stroke-width={s} stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bell-off-icon lucide-bell-off">
+  <path d="M10.268 21a2 2 0 0 0 3.464 0" />
+  <path d="M17 17H4a1 1 0 0 1-.74-1.673C4.59 13.956 6 12.499 6 8a6 6 0 0 1 .258-1.742" />
+  <path d="m2 2 20 20" />
+  <path d="M8.668 3.01A6 6 0 0 1 18 8c0 2.687.77 4.653 1.707 6.05" /></svg>

package/components/ricons/bell-off.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  BellOffProps */
+/** @typedef {typeof __propDef.events}  BellOffEvents */
+/** @typedef {typeof __propDef.slots}  BellOffSlots */
+export default class BellOff extends SvelteComponentTyped<{
+    w?: number | undefined;
+    s?: number | undefined;
+    h?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type BellOffProps = typeof __propDef.props;
+export type BellOffEvents = typeof __propDef.events;
+export type BellOffSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        w?: number | undefined;
+        s?: number | undefined;
+        h?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/ricons/bell.svelte

@@ -0,0 +1,13 @@
+<script>
+  export let w = 24;
+  export let h = 24;
+  export let s = 2;
+</script>
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width={w} height={h} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+  stroke-width={s} stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bell-icon lucide-bell">
+  <path d="M10.268 21a2 2 0 0 0 3.464 0" />
+  <path
+    d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" />
+  </svg>

package/components/ricons/bell.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  BellProps */
+/** @typedef {typeof __propDef.events}  BellEvents */
+/** @typedef {typeof __propDef.slots}  BellSlots */
+export default class Bell extends SvelteComponentTyped<{
+    w?: number | undefined;
+    s?: number | undefined;
+    h?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type BellProps = typeof __propDef.props;
+export type BellEvents = typeof __propDef.events;
+export type BellSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        w?: number | undefined;
+        s?: number | undefined;
+        h?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/ricons/eye-off.svelte

@@ -0,0 +1,13 @@
+<script>
+  export let w = 24;
+  export let h = 24;
+  export let s = 2;
+</script>
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width={w} height={h} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+  stroke-width={s} stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-off-icon lucide-eye-off">
+  <path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" />
+  <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
+  <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" />
+  <path d="m2 2 20 20" /></svg>

package/components/ricons/eye-off.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  EyeOffProps */
+/** @typedef {typeof __propDef.events}  EyeOffEvents */
+/** @typedef {typeof __propDef.slots}  EyeOffSlots */
+export default class EyeOff extends SvelteComponentTyped<{
+    w?: number | undefined;
+    s?: number | undefined;
+    h?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type EyeOffProps = typeof __propDef.props;
+export type EyeOffEvents = typeof __propDef.events;
+export type EyeOffSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        w?: number | undefined;
+        s?: number | undefined;
+        h?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/ricons/eye.svelte

@@ -0,0 +1,11 @@
+<script>
+  export let w = 24;
+  export let h = 24;
+  export let s = 2;
+</script>
+
+
+<svg xmlns="http://www.w3.org/2000/svg" width={w} height={h} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+  stroke-width={s} stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-icon lucide-eye">
+  <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
+  <circle cx="12" cy="12" r="3" /></svg>

package/components/ricons/eye.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  EyeProps */
+/** @typedef {typeof __propDef.events}  EyeEvents */
+/** @typedef {typeof __propDef.slots}  EyeSlots */
+export default class Eye extends SvelteComponentTyped<{
+    w?: number | undefined;
+    s?: number | undefined;
+    h?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type EyeProps = typeof __propDef.props;
+export type EyeEvents = typeof __propDef.events;
+export type EyeSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        w?: number | undefined;
+        s?: number | undefined;
+        h?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/desk.svelte

@@ -432,20 +432,25 @@
                                 left-0 bottom-[50px]
                                 sm:left-[40px] sm:top-0
                                 w-full sm:w-[320px]
-                                h-[calc(100svh-50px)] sm:h-full
+                                h-[calc(100lvh-50px)] sm:h-full
 
                                 z-30 overflow-x-hidden
-
+                                bg-stone-50/90 dark:bg-stone-900/90
+                                ">
+                    
+                    <div class="absolute bottom-0 h-[calc(100svh-50px)] sm:h-full w-full
                                 bg-stone-50 dark:bg-stone-900
                                 border-t sm:border-t-0 sm:border-r border-stone-300 dark:border-stone-300/50
                                 sm:shadow-lg sm:shadow-stone-500
-                                sm:dark:shadow-black">
+                                sm:dark:shadow-black
+                                ">
 
-                    <div class="    w-full h-full  overflow-y-auto overscroll-contain py-0 px-0">
+                        <div class="h-full  w-full   overflow-y-auto overscroll-contain py-0 px-0">
 
-                        <Configurable config={layout.sidebar[visible_sidebar]}>
-                            <div slot='alt'></div>
-                        </Configurable>
+                            <Configurable config={layout.sidebar[visible_sidebar]}>
+                                <div slot='alt'></div>
+                            </Configurable>
+                        </div>
                     </div>
                 </div>
                 {/if}
@@ -516,8 +521,9 @@
                     <!--##  BOTTOM SIDEBAR          ###############################-->
                     <!--###########################################################-->
 
-                    <div  class="{bottom_bar_visibility} left-0 bottom-0 w-screen h-[240px] z-20 overflow-y-hidden overflow-x-auto
-                                sm:left-[40px] sm:w-[100vw-40px] " >
+                    <div  class="{bottom_bar_visibility} left-0 bottom-0 w-screen h-[280px] z-20 overflow-y-hidden overflow-x-auto
+                                sm:left-[40px] sm:w-[100vw-40px] 
+                                {lg_content_area_horizontal_dim}" >
                             <Configurable config={layout.selectionDetails} >
                                 <div slot="alt"></div>
                             </Configurable>

package/horizontal.toolbar.svelte

@@ -4,7 +4,7 @@
     import {showMenu} from './components/menu'
     import {push, pop, location} from 'svelte-spa-router'
     import {contextItemsStore, context_info_store, contextToolbarOperations, data_tick_store, leftHandedFAB} from './stores.js'
-    //import Menu from './components/contextmenu.svelte'
+    
 
     import {
         dark_mode_store,

package/i18n.js

@@ -165,21 +165,26 @@ export function extractTranslated(str)
 	if(!str)
 		return ""
 	
-	if(str.startsWith('_;'))
+	if (typeof str === 'string' || str instanceof String)
 	{
-		const body = str.replace(/^_;\s*/, '');   			// cut prefix "_;  "
-		return i18n(body);
-	}
-	else if(str.startsWith('__;'))
-	{
-		const body = str.replace(/^__;\s*/, '');   			// cut prefix "__;  "
-  		const PAIRS = /([A-Za-z]{2})\s*:\s*([^;]*)/g;
-		const dict = {};
-  		
-		for (const [, code, text] of body.matchAll(PAIRS)) 
-			dict[code.toLowerCase()] = text.trim();
-		
-		return i18n(dict)
+		if(str.startsWith('_;'))
+		{
+			const body = str.replace(/^_;\s*/, '');   			// cut prefix "_;  "
+			return i18n(body);
+		}
+		else if(str.startsWith('__;'))
+		{
+			const body = str.replace(/^__;\s*/, '');   			// cut prefix "__;  "
+			const PAIRS = /([A-Za-z]{2})\s*:\s*([^;]*)/g;
+			const dict = {};
+			
+			for (const [, code, text] of body.matchAll(PAIRS)) 
+				dict[code.toLowerCase()] = text.trim();
+			
+			return i18n(dict)
+		}
+		else
+			return str
 	}
 	else
 		return str

package/index.js

@@ -39,7 +39,6 @@ export { default as ComboItem } from './components/combo/combo.item.svelte';
 export { default as RichEdit } from './components/document/rich.edit.svelte';
 export { default as Editor } from './components/document/editor.svelte';
 export { default as Spinner } from './components/delayed.spinner.svelte';
-//export { default as Menu } from './components/contextmenu.svelte'
 export { showMenu, showGridMenu, showFloatingToolbar, SHOW_MENU_BELOW, SHOW_MENU_ABOVE, SHOW_MENU_RIGHT, SHOW_MENU_LEFT } from './components/menu';
 export { default as Fab } from './components/Fab.svelte';
 export { default as Sidebar } from './components/sidebar/sidebar.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.8.11",
+  "version": "1.8.13",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -80,6 +80,7 @@
     "./components/combo/combo.svelte": "./components/combo/combo.svelte",
     "./components/combo/combo": "./components/combo/combo.js",
     "./components/contextmenu-25.svelte": "./components/contextmenu-25.svelte",
+    "./components/contextmenu.container.svelte": "./components/contextmenu.container.svelte",
     "./components/contextmenu.svelte": "./components/contextmenu.svelte",
     "./components/date.svelte": "./components/date.svelte",
     "./components/date_utils": "./components/date_utils.js",
@@ -161,6 +162,8 @@
     "./components/react-aria/preventScroll": "./components/react-aria/preventScroll.js",
     "./components/ricons/arrow-up.svelte": "./components/ricons/arrow-up.svelte",
     "./components/ricons/barcode.svelte": "./components/ricons/barcode.svelte",
+    "./components/ricons/bell-off.svelte": "./components/ricons/bell-off.svelte",
+    "./components/ricons/bell.svelte": "./components/ricons/bell.svelte",
     "./components/ricons/bold.svelte": "./components/ricons/bold.svelte",
     "./components/ricons/calendar.svelte": "./components/ricons/calendar.svelte",
     "./components/ricons/calendars.svelte": "./components/ricons/calendars.svelte",
@@ -189,6 +192,8 @@
     "./components/ricons/download.svelte": "./components/ricons/download.svelte",
     "./components/ricons/ellipsis-vertical.svelte": "./components/ricons/ellipsis-vertical.svelte",
     "./components/ricons/external-link.svelte": "./components/ricons/external-link.svelte",
+    "./components/ricons/eye-off.svelte": "./components/ricons/eye-off.svelte",
+    "./components/ricons/eye.svelte": "./components/ricons/eye.svelte",
     "./components/ricons/file-archive.svelte": "./components/ricons/file-archive.svelte",
     "./components/ricons/file-text.svelte": "./components/ricons/file-text.svelte",
     "./components/ricons/folder.svelte": "./components/ricons/folder.svelte",

package/vertical.toolbar.svelte

@@ -5,7 +5,6 @@
     import {reef} from '@humandialog/auth.svelte'
     import Modal from './modal.svelte'
     import Input from './components/inputbox.ltop.svelte'
-    //import Menu from './components/contextmenu.svelte'
 
     import {dark_mode_store,
             tools_visible_store,