@humandialog/forms.svelte 1.5.1 → 1.6.0

package/components/contextmenu.svelte

@@ -2,7 +2,16 @@
 import Icon from "./icon.svelte";
 import { contextItemsStore, pushToolsActionsOperations, popToolsActionsOperations } from "../stores";
 import { isDeviceSmallerThan, isOnScreenKeyboardVisible } from "../utils";
-import { hideWholeContextMenu, showMenu, showFloatingToolbar, showGridMenu } from "./menu";
+import {
+  hideWholeContextMenu,
+  showMenu,
+  showFloatingToolbar,
+  showGridMenu,
+  SHOW_MENU_BELOW,
+  SHOW_MENU_ABOVE,
+  SHOW_MENU_RIGHT,
+  SHOW_MENU_LEFT
+} from "./menu";
 import { FaTimes } from "svelte-icons/fa";
 export let widthPx = 400;
 export let menu_items_id_prefix = "__hd_svelte_menuitem_";
@@ -17,11 +26,12 @@ let focused_index = 0;
 let menu_items = [];
 let submenus = [];
 let around_rect;
+let around_preference = 0;
 let css_position = "";
 let closeButtonPos = "";
 $:
   display = visible ? "block" : "none";
-function calculatePosition(x2, y2, around, visible2, fresh) {
+function calculatePosition(x2, y2, visible2, fresh) {
   let result = "";
   if (!visible2) {
     result = "display: none";
@@ -66,36 +76,115 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
     if (myRect) {
       const m = 15;
       let screenRect = new DOMRect(m, 0, window.innerWidth - 2 * m, window.innerHeight);
-      let xShifted = false;
-      if (myRect.right > screenRect.right) {
-        x2 = screenRect.right - myRect.width + m;
-        xShifted = true;
-      }
-      let yShifted = false;
-      if (myRect.bottom > screenRect.bottom) {
-        y2 = screenRect.bottom - myRect.height;
-        if (around) {
-          if (xShifted)
-            x2 -= around.width;
-          else
-            y2 -= around.height;
+      if (around_rect) {
+        const menuWidth = myRect.width;
+        const menuHeight = myRect.height;
+        let topArea;
+        let bottomArea;
+        let leftArea;
+        let rightArea;
+        switch (around_preference) {
+          case SHOW_MENU_BELOW:
+            topArea = around_rect.top - screenRect.top;
+            bottomArea = screenRect.bottom - around_rect.bottom;
+            leftArea = around_rect.right - screenRect.left;
+            rightArea = screenRect.right - around_rect.left;
+            if (menuHeight <= bottomArea)
+              y2 = around_rect.bottom;
+            else if (menuHeight <= topArea)
+              y2 = around_rect.top - menuHeight;
+            if (menuWidth <= rightArea)
+              x2 = around_rect.left;
+            else if (menuWidth <= leftArea)
+              x2 = around_rect.right - menuWidth;
+            break;
+          case SHOW_MENU_ABOVE:
+            topArea = around_rect.top - screenRect.top;
+            bottomArea = screenRect.bottom - around_rect.bottom;
+            leftArea = around_rect.right - screenRect.left;
+            rightArea = screenRect.right - around_rect.left;
+            if (menuHeight <= topArea)
+              y2 = around_rect.top - menuHeight;
+            else if (menuHeight <= bottomArea)
+              y2 = around_rect.bottom;
+            if (menuWidth <= rightArea)
+              x2 = around_rect.left;
+            else if (menuWidth <= leftArea)
+              x2 = around_rect.right - menuWidth;
+            break;
+          case SHOW_MENU_RIGHT:
+            topArea = around_rect.bottom - screenRect.top;
+            bottomArea = screenRect.bottom - around_rect.top;
+            leftArea = around_rect.left - screenRect.left;
+            rightArea = screenRect.right - around_rect.right;
+            if (menuWidth <= rightArea)
+              x2 = around_rect.right;
+            else if (menuWidth <= leftArea)
+              x2 = around_rect.left - menuWidth;
+            if (menuHeight <= bottomArea)
+              y2 = around_rect.top;
+            else if (menuHeight <= topArea)
+              y2 = around_rect.bottom - menuHeight;
+            break;
+          case SHOW_MENU_LEFT:
+            topArea = around_rect.bottom - screenRect.top;
+            bottomArea = screenRect.bottom - around_rect.top;
+            leftArea = around_rect.left - screenRect.left;
+            rightArea = screenRect.right - around_rect.right;
+            if (menuWidth <= leftArea)
+              x2 = around_rect.left - menuWidth;
+            else if (menuWidth <= rightArea)
+              x2 = around_rect.right;
+            if (menuHeight <= bottomArea)
+              y2 = around_rect.top;
+            else if (menuHeight <= topArea)
+              y2 = around_rect.bottom - menuHeight;
+            break;
         }
-        yShifted = true;
+      } else {
+        if (myRect.right > screenRect.right)
+          x2 = screenRect.right - myRect.width + m;
+        if (myRect.bottom > screenRect.bottom)
+          y2 = screenRect.bottom - myRect.height;
+        if (myRect.left < screenRect.left)
+          x2 = screenRect.left;
+        if (myRect.top < screenRect.top)
+          y2 = screenRect.top;
       }
-      if (myRect.left < screenRect.left)
-        x2 = screenRect.left;
-      if (myRect.top < screenRect.top)
-        y2 = screenRect.top;
     }
     result = `left:${x2}px; top:${y2}px; display: block; min-width: 15rem`;
     closeButtonPos = "";
   }
   return result;
 }
-export async function show(around, _operations) {
+function intersects(lpRect1, lpRect2) {
+  const left = Math.max(lpRect1.left, lpRect2.left);
+  const right = Math.min(lpRect1.right, lpRect2.right);
+  const top = Math.max(lpRect1.top, lpRect2.top);
+  const bottom = Math.min(lpRect1.bottom, lpRect2.bottom);
+  return left <= right && top <= bottom;
+}
+export async function show(around, _operations, preference = 0) {
   if (around instanceof DOMRect) {
-    x = around.left;
-    y = around.bottom;
+    switch (preference) {
+      case SHOW_MENU_BELOW:
+        x = around.left;
+        y = around.bottom;
+        break;
+      case SHOW_MENU_ABOVE:
+        x = around.left;
+        y = around.top;
+        break;
+      case SHOW_MENU_RIGHT:
+        x = around.right;
+        y = around.top;
+        break;
+      case SHOW_MENU_LEFT:
+        x = around.left;
+        y = around.top;
+        break;
+    }
+    around_preference = preference;
     around_rect = around;
   } else if (around instanceof DOMPoint) {
     x = around.x;
@@ -103,7 +192,7 @@ export async function show(around, _operations) {
     around_rect = new DOMRect(x, y, 0, 0);
   }
   visible = true;
-  css_position = calculatePosition(x, y, around_rect, true, true);
+  css_position = calculatePosition(x, y, true, true);
   operations = [..._operations];
   focused_index = operations.findIndex((o) => !o.disabled);
   const is_root_menu = owner_menu_item == void 0;
@@ -132,7 +221,7 @@ export async function show(around, _operations) {
     });
   }
   await tick();
-  css_position = calculatePosition(x, y, around_rect, true, false);
+  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"))
@@ -145,7 +234,7 @@ export function hide() {
   if (false)
     popToolsActionsOperations();
   visible = false;
-  css_position = calculatePosition(x, y, around_rect, false, 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);
 }
@@ -211,7 +300,8 @@ function on_mouse_move(index) {
     focus_menu_item(index);
 }
 function execute_action(e, operation, index) {
-  if (operation.menu) {
+  const mobile = isDeviceSmallerThan("sm");
+  if (operation.menu && !mobile) {
     focus_menu_item(index);
     return;
   }
@@ -223,7 +313,6 @@ function execute_action(e, operation, index) {
     owner = owner.parentElement;
   if (operation.preAction)
     operation.preAction(owner);
-  const mobile = isDeviceSmallerThan("sm");
   if (operation.action) {
     operation.action(owner, around_rect);
   } else {
@@ -239,6 +328,8 @@ function execute_action(e, operation, index) {
         showMenu(rect, operation.grid);
       else
         showGridMenu(rect, operation.grid);
+    } else if (operation.menu) {
+      showMenu(rect, operation.menu);
     }
   }
 }
@@ -382,6 +473,12 @@ function calculateBackground(is_highlighted, active) {
                         {@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}

package/components/contextmenu.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
         widthPx?: number | undefined;
         menu_items_id_prefix?: string | undefined;
         owner_menu_item?: HTMLElement | undefined;
-        show?: ((around: DOMRect | DOMPoint, _operations: any) => Promise<void>) | undefined;
+        show?: ((around: DOMRect | DOMPoint, _operations: any, preference?: number) => Promise<void>) | undefined;
         isVisible?: (() => boolean) | undefined;
         hide?: (() => void) | undefined;
         getRenderedRect?: (() => DOMRect | undefined) | undefined;
@@ -18,7 +18,7 @@ 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) => Promise<void>;
+    get show(): (around: DOMRect | DOMPoint, _operations: any, preference?: number) => Promise<void>;
     get isVisible(): () => boolean;
     get hide(): () => void;
     get getRenderedRect(): () => DOMRect | undefined;

package/components/document/editor.svelte

@@ -55,6 +55,7 @@ import IcH3 from "./internal/h3.icon.svelte";
 import IcH4 from "./internal/h4.icon.svelte";
 import { Extension } from "@tiptap/core";
 import { Suggestion } from "./internal/suggestion";
+import { i18n } from "../../i18n.js";
 export let value = "";
 export let placeholder = "";
 export let self = null;
@@ -100,7 +101,7 @@ export function getFormattingOperations(withCaptions = false) {
 }
 export function getMarksOperations(tbr = "A") {
   let operations = [];
-  paletteMarksCommands.forEach((c2) => {
+  paletteMarksCommands().forEach((c2) => {
     if (!c2.separator) {
       operations.push({
         caption: c2.caption,
@@ -111,7 +112,7 @@ export function getMarksOperations(tbr = "A") {
     }
   });
   return {
-    caption: "Text",
+    caption: i18n({ en: "Text", es: "Texto", pl: "Tekst" }),
     operations,
     preAction: (f) => {
       if (editor.isFocused)
@@ -122,7 +123,7 @@ export function getMarksOperations(tbr = "A") {
 }
 export function getStylesOperations(tbr = "A") {
   let operations = [];
-  paletteStylesCommands.forEach((c2) => {
+  paletteStylesCommands().forEach((c2) => {
     if (!c2.separator) {
       operations.push({
         caption: c2.caption,
@@ -133,7 +134,7 @@ export function getStylesOperations(tbr = "A") {
     }
   });
   return {
-    caption: "Styles",
+    caption: i18n({ en: "Styles", es: "Estilos", pl: "Style" }),
     operations,
     preAction: (f) => {
       if (editor.isFocused)
@@ -149,7 +150,7 @@ export function getInsertOperations(tbr = "A") {
       operations = [...operations, exc];
     });
   }
-  paletteInsertCommands.forEach((c2) => {
+  paletteInsertCommands().forEach((c2) => {
     if (!c2.separator) {
       operations.push({
         caption: c2.caption,
@@ -160,7 +161,7 @@ export function getInsertOperations(tbr = "A") {
     }
   });
   return {
-    caption: "Insert",
+    caption: i18n({ en: "Insert", es: "Insertar", pl: "Wstaw" }),
     operations,
     preAction: (f) => {
       if (editor.isFocused)
@@ -1012,51 +1013,51 @@ export function preventBlur() {
 export function hasChanged() {
   return hasChangedValue;
 }
-const paletteMarksCommands = [
-  { caption: "Bold", description: "Marks text as bolded", tags: "strong", icon: FaBold, on_choice: makeBold, is_active: () => editor?.isActive("bold") },
-  { caption: "Italic", description: "Marks text as italic", tags: "strong", icon: FaItalic, on_choice: makeItalic, is_active: () => editor?.isActive("italic") },
-  { caption: "Underlie", description: "Marks text as underlined", icon: FaUnderline, on_choice: makeUnderline, is_active: () => editor?.isActive("underline") },
-  { caption: "Strikethrough", description: "Marks text as strikethrough", icon: FaStrikethrough, on_choice: makeStrikethrough, is_active: () => editor?.isActive("strike") }
+const paletteMarksCommands = () => [
+  { caption: i18n({ en: "Bold", es: "Negrita", pl: "Pogrubiony" }), description: "Marks text as bolded", tags: "strong", icon: FaBold, on_choice: makeBold, is_active: () => editor?.isActive("bold") },
+  { caption: i18n({ en: "Italic", es: "Cursiva", pl: "Kursywa" }), description: "Marks text as italic", tags: "strong", icon: FaItalic, on_choice: makeItalic, is_active: () => editor?.isActive("italic") },
+  { caption: i18n({ en: "Underline", es: "Subrayar", pl: "Podkre\u015Blenie" }), description: "Marks text as underlined", icon: FaUnderline, on_choice: makeUnderline, is_active: () => editor?.isActive("underline") },
+  { caption: i18n({ en: "Strikethrough", es: "Tachado", pl: "Przekre\u015Blenie" }), description: "Marks text as strikethrough", icon: FaStrikethrough, on_choice: makeStrikethrough, is_active: () => editor?.isActive("strike") }
 ];
-const paletteStylesCommands = [
-  { caption: "Normal", description: "This is normal text style", tags: "paragraph,text", icon: FaRemoveFormat, on_choice: (range) => {
+const paletteStylesCommands = () => [
+  { caption: i18n({ en: "Normal", es: "Normal", pl: "Normalny" }), description: "This is normal text style", tags: "paragraph,text", icon: FaRemoveFormat, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setParagraph().run();
     else
       editor.chain().focus().setParagraph().run();
   }, is_active: () => editor?.isActive("paragraph") },
-  { caption: "Heading 1", description: "Description heading", tags: "h1", icon: IcH1, on_choice: (range) => {
+  { caption: i18n({ en: "Heading 1", es: "T\xEDtulo 1", pl: "Nag\u0142\xF3wek 1" }), description: "Description heading", tags: "h1", icon: IcH1, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 1 }).run();
     else
       editor.chain().focus().setHeading({ level: 1 }).run();
   }, is_active: () => editor?.isActive("heading", { level: 1 }) },
-  { caption: "Heading 2", description: "Secondary heading", tags: "h2", icon: IcH2, on_choice: (range) => {
+  { caption: i18n({ en: "Heading 2", es: "T\xEDtulo 2", pl: "Nag\u0142\xF3wek 2" }), description: "Secondary heading", tags: "h2", icon: IcH2, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 2 }).run();
     else
       editor.chain().focus().setHeading({ level: 2 }).run();
   }, is_active: () => editor?.isActive("heading", { level: 2 }) },
-  { caption: "Heading 3", description: "Secondary heading", tags: "h3", icon: IcH3, on_choice: (range) => {
+  { caption: i18n({ en: "Heading 3", es: "T\xEDtulo 3", pl: "Nag\u0142\xF3wek 3" }), description: "Secondary heading", tags: "h3", icon: IcH3, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 3 }).run();
     else
       editor.chain().focus().setHeading({ level: 3 }).run();
   }, is_active: () => editor?.isActive("heading", { level: 3 }) },
-  { caption: "Heading 4", description: "Secondary heading", tags: "h4", icon: IcH4, on_choice: (range) => {
+  { caption: i18n({ en: "Heading 4", es: "T\xEDtulo 4", pl: "Nag\u0142\xF3wek 4" }), description: "Secondary heading", tags: "h4", icon: IcH4, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 4 }).run();
     else
       editor.chain().focus().setHeading({ level: 4 }).run();
   }, is_active: () => editor?.isActive("heading", { level: 4 }) },
-  { caption: "Code", description: "Source code monospace text", icon: FaCode, on_choice: (range) => {
+  { caption: i18n({ en: "Code", es: "C\xF3digo", pl: "Kod" }), description: "Source code monospace text", icon: FaCode, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setCodeBlock().run();
     else
       editor.chain().focus().setCodeBlock().run();
   }, is_active: () => editor?.isActive("CodeBlock") },
   //    {   caption: 'Comment',      description: 'With this you can comment the above paragraph',   icon: FaComment,                    on_choice: (range) => { if(range) editor.chain().focus().deleteRange(range).setAsComment().run(); else editor.chain().focus().setAsComment().run() }, is_active: () => editor?.isActive('CommentBlock')  } ,
-  { caption: "Quote", description: "To quote someone", icon: FaQuoteRight, on_choice: (range) => {
+  { caption: i18n({ en: "Quote", es: "Cita", pl: "Cytat" }), description: "To quote someone", icon: FaQuoteRight, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setAsQuote().run();
     else
@@ -1064,27 +1065,27 @@ const paletteStylesCommands = [
   }, is_active: () => editor?.isActive("QuoteBlock") },
   //    {   caption: 'Warning',      description: 'An important warning to above paragraph',         icon: FaExclamationTriangle,        on_choice: (range) => { if(range) editor.chain().focus().deleteRange(range).setAsWarning().run(); else editor.chain().focus().setAsWarning().run() }, is_active: () => editor?.isActive('WarningBlock')  } ,
   //    {   caption: 'Info',         description: 'An important info about above paragraph',         icon: FaInfo,                       on_choice: (range) => { if(range) editor.chain().focus().deleteRange(range).setAsInfo().run(); else editor.chain().focus().setAsInfo().run() }, is_active: () => editor?.isActive('InfoBlock')  },
-  { caption: "Bullet list", description: "Unordered list of items", icon: FaListUl, on_choice: (range) => {
+  { caption: i18n({ en: "BulletList", es: "Lista con vi\xF1etas", pl: "Lista punktowana" }), description: "Unordered list of items", icon: FaListUl, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).toggleBulletList().run();
     else
       editor.chain().focus().toggleBulletList().run();
   }, is_active: () => editor?.isActive("bulletList") }
 ];
-const paletteInsertCommands = [
-  { caption: "Image", description: "Add image to document", tags: "img,picture", icon: FaImage, on_choice: (range) => {
+const paletteInsertCommands = () => [
+  { caption: i18n({ en: "Image", es: "Imagen", pl: "Obraz" }), description: "Add image to document", tags: "img,picture", icon: FaImage, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).run();
     if (onAddImage)
       onAddImage(onAddedImageReady);
   } },
-  { caption: "Table", description: "Table", icon: FaTable, on_choice: (range) => {
+  { caption: i18n({ en: "Table", es: "Tabla", pl: "Tabela" }), description: "Table", icon: FaTable, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).insertTable().run();
     else
       editor.chain().focus().insertTable().run();
   }, is_active: () => editor?.isActive("table") },
-  { caption: "Horizontal rule", description: "Add horizonal role", tags: "hr", icon: FaGripLines, on_choice: (range) => {
+  { caption: i18n({ en: "Horizontal rule", es: "Regla horizontal", pl: "Pozioma linia" }), description: "Add horizonal role", tags: "hr", icon: FaGripLines, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHorizontalRule().run();
     else
@@ -1092,12 +1093,21 @@ const paletteInsertCommands = [
   } }
 ];
 const paletteCommands = [
-  { caption: "Text", separator: true },
-  ...paletteMarksCommands,
-  { caption: "Styles", separator: true },
-  ...paletteStylesCommands,
-  { caption: "Insert", separator: true },
-  ...paletteInsertCommands
+  {
+    caption: i18n({ en: "Text", es: "Texto", pl: "Tekst" }),
+    separator: true
+  },
+  ...paletteMarksCommands(),
+  {
+    caption: i18n({ en: "Styles", es: "Estilos", pl: "Style" }),
+    separator: true
+  },
+  ...paletteStylesCommands(),
+  {
+    caption: i18n({ en: "Insert", es: "Insertar", pl: "Wstaw" }),
+    separator: true
+  },
+  ...paletteInsertCommands()
 ];
 function makeBold(range) {
   if (range) {
@@ -1152,11 +1162,11 @@ function getPaletteCommands() {
     });
     commands.push({ separator: true });
   }
-  commands = [...commands, { caption: "Text", separator: true }];
-  commands = [...commands, ...paletteMarksCommands];
-  commands = [...commands, { caption: "Styles", separator: true }];
-  commands = [...commands, ...paletteStylesCommands];
-  commands = [...commands, { caption: "Insert", separator: true }];
+  commands = [...commands, { caption: i18n({ en: "Text", es: "Texto", pl: "Tekst" }), separator: true }];
+  commands = [...commands, ...paletteMarksCommands()];
+  commands = [...commands, { caption: i18n({ en: "Styles", es: "Estilos", pl: "Style" }), separator: true }];
+  commands = [...commands, ...paletteStylesCommands()];
+  commands = [...commands, { caption: i18n({ en: "Insert", es: "Insertar", pl: "Wstaw" }), separator: true }];
   if (extraInsertPaletteCommands && extraInsertPaletteCommands.length > 0) {
     extraInsertPaletteCommands.forEach((exc) => {
       commands.push({
@@ -1179,7 +1189,7 @@ function getPaletteCommands() {
       });
     });
   }
-  commands = [...commands, ...paletteInsertCommands];
+  commands = [...commands, ...paletteInsertCommands()];
   if (extraBackPaletteCommands && extraBackPaletteCommands.length > 0) {
     commands.push({ separator: true });
     extraBackPaletteCommands.forEach((exc) => {

package/components/document/editor.svelte.d.ts

@@ -25,19 +25,19 @@ declare const __propDef: {
         run?: ((onStop?: undefined) => void) | undefined;
         getFormattingOperations?: ((withCaptions?: boolean) => any[]) | undefined;
         getMarksOperations?: ((tbr?: string) => {
-            caption: string;
+            caption: any;
             operations: any[];
             preAction: (f: any) => void;
             tbr: string;
         }) | undefined;
         getStylesOperations?: ((tbr?: string) => {
-            caption: string;
+            caption: any;
             operations: any[];
             preAction: (f: any) => void;
             tbr: string;
         }) | undefined;
         getInsertOperations?: ((tbr?: string) => {
-            caption: string;
+            caption: any;
             operations: any[];
             preAction: (f: any) => void;
             tbr: string;
@@ -98,19 +98,19 @@ export default class Editor extends SvelteComponentTyped<EditorProps, EditorEven
     get run(): (onStop?: undefined) => void;
     get getFormattingOperations(): (withCaptions?: boolean) => any[];
     get getMarksOperations(): (tbr?: string) => {
-        caption: string;
+        caption: any;
         operations: any[];
         preAction: (f: any) => void;
         tbr: string;
     };
     get getStylesOperations(): (tbr?: string) => {
-        caption: string;
+        caption: any;
         operations: any[];
         preAction: (f: any) => void;
         tbr: string;
     };
     get getInsertOperations(): (tbr?: string) => {
-        caption: string;
+        caption: any;
         operations: any[];
         preAction: (f: any) => void;
         tbr: string;

package/components/menu.d.ts

@@ -1,5 +1,9 @@
 import Floating_container from './Floating_container.svelte';
-export declare function showMenu(around: DOMRect | DOMPoint, operations: any): void;
+export declare const SHOW_MENU_BELOW = 0;
+export declare const SHOW_MENU_ABOVE = 1;
+export declare const SHOW_MENU_RIGHT = 2;
+export declare const SHOW_MENU_LEFT = 3;
+export declare function showMenu(around: DOMRect | DOMPoint, operations: any, preference?: number): void;
 export declare function hideWholeContextMenu(): void;
 export declare function showFloatingToolbar(around: DOMRect | DOMPoint, toolbar: any, props?: {}): Floating_container | null;
 export declare function hideFloatingToolbar(): void;

package/components/menu.js

@@ -3,7 +3,11 @@ import Floating_container from './Floating_container.svelte';
 import Grid from './Grid.menu.svelte';
 let menu_comopnent = null;
 let toolbar_component = null;
-export function showMenu(around, operations) {
+export const SHOW_MENU_BELOW = 0;
+export const SHOW_MENU_ABOVE = 1;
+export const SHOW_MENU_RIGHT = 2;
+export const SHOW_MENU_LEFT = 3;
+export function showMenu(around, operations, preference = SHOW_MENU_BELOW) {
     let menu_element = document.getElementById("__hd_svelte_contextmenu");
     if (!menu_element) {
         let app_div = document.getElementById("__hd_svelte_layout_root");
@@ -13,13 +17,13 @@ export function showMenu(around, operations) {
             target: app_div,
             props: {}
         });
-        menu_comopnent.show(around, operations);
+        menu_comopnent.show(around, operations, preference);
     }
     else if (menu_comopnent) {
         if (menu_comopnent.isVisible())
             menu_comopnent.hide();
         else
-            menu_comopnent.show(around, operations);
+            menu_comopnent.show(around, operations, preference);
     }
     else
         console.error('what now?');

package/components/sidebar/sidebar.item.svelte

@@ -1,8 +1,9 @@
 <script>import { getContext, tick } from "svelte";
 import Icon from "../icon.svelte";
-import { contextItemsStore, auto_hide_sidebar, contextToolbarOperations } from "../../stores";
+import { contextItemsStore, contextToolbarOperations } from "../../stores";
 import { FaBars, FaEllipsisV } from "svelte-icons/fa";
 import { link, push } from "svelte-spa-router";
+import { i18n } from "../../i18n";
 import {
   selectable as _selectable,
   isSelected,
@@ -11,8 +12,7 @@ import {
   activateItem,
   startEditing,
   getActive,
-  isOnNavigationPage,
-  UI
+  navAutoHide
 } from "../../utils";
 import { showMenu } from "../menu";
 export let href;
@@ -126,7 +126,7 @@ function on_link_clicked(e) {
       redirect_to(href2);
     }
   } else {
-    auto_hide_sidebar();
+    navAutoHide();
     redirect_to(href2);
   }
 }
@@ -185,7 +185,7 @@ function activateRow(e) {
       opver: 1,
       operations: [
         {
-          caption: "View",
+          caption: i18n({ en: "View", es: "Ver", pl: "Widok" }),
           operations: [
             {
               icon: FaEllipsisV,

package/desk.svelte

@@ -9,7 +9,6 @@
     import {main_sidebar_visible_store, 
             tools_visible_store, 
             bottom_bar_visible_store, 
-            auto_hide_sidebar,
             hasSelectedItem,
             dark_mode_store,
             data_tick_store,
@@ -20,7 +19,7 @@
             alerts, removeAlert, showFABAlways} from './stores.js'
     
     //import { AuthorizedView} from '@humandialog/auth.svelte'
-    import { handleSelect, isDeviceSmallerThan, isOnNavigationPage, isOnScreenKeyboardVisible, removeAt, UI } from './utils'
+    import { handleSelect, isDeviceSmallerThan, isOnScreenKeyboardVisible, navGetMode, removeAt, UI, NAV_MODE_SIDEBAR, navAutoHide, navIsVisible } from './utils'
     import { afterUpdate, onMount } from 'svelte';
     import {location} from 'svelte-spa-router'
     import {FaCopy, FaTimes} from 'svelte-icons/fa'
@@ -76,8 +75,8 @@
     //let autoRedirectToSignIn = layout.autoRedirectToSignIn ?? true
 
     $: { visible_sidebar = $main_sidebar_visible_store
-        
-        if(!is_small)
+        const navMode = navGetMode()
+        if(navMode == NAV_MODE_SIDEBAR)
         {
             if(visible_sidebar == "*")
             {
@@ -190,10 +189,11 @@
     }
 
 
-    $: navigationPageVisible = navigationPageSetup($location);
+    $: navigationPageSetup($location);
     function navigationPageSetup(...args)
     {
-        if(!is_small)
+        const navMode = navGetMode()
+        if(navMode == NAV_MODE_SIDEBAR)
         {
             vertical_toolbar_visibility = "hidden sm:block"
             content_left = "left-0 sm:left-[40px]";
@@ -202,7 +202,7 @@
         }
         else
         {
-            if(isOnNavigationPage())
+            if(navIsVisible())
             {
                 vertical_toolbar_visibility = "block"
                 content_left = "left-[50px]";
@@ -254,7 +254,7 @@
 
     function on_resize()
     {
-        auto_hide_sidebar();
+        navAutoHide()
     }
 
     let minViewportHeight = 0;
@@ -278,6 +278,7 @@
 
     function onViewportResize(e)
     {
+        console.log('onViewportResize')
         const vp = window.visualViewport;
         setViewportHeight(vp)
 
@@ -411,7 +412,7 @@
                     behaviour is the content expand vertically, and only vertical scrollbar can be visible.
                     When content on the main page needs to be expanded horizontally (like kanban chart for example) then
                     that component should define overflow-x-* itself -->
-                <section on:click|capture={() => { if(!navigationPageVisible) auto_hide_sidebar()}  } class="">
+                <section on:click|capture={() => navAutoHide()  } class="">
 
                     <!--###########################################################-->
                     <!--##  HORIZONTAL TOOLS                 ######################-->