@humandialog/forms.svelte 1.5.1 → 1.6.1

package/i18n.js

@@ -0,0 +1,188 @@
+
+// https://flagdownload.com/
+
+let languages = [
+	{
+		key: "en",
+		name: 'English',
+		flag: '/landing/lang/GB_64.png',
+		default: true
+	},
+	{
+		key: 'es',
+		name: "Español",
+		flag: '/landing/lang/ES_64.png'
+	},
+	{
+		key: 'pl',
+		name: 'Polski',
+		flag: '/landing/lang/PL_64.png'
+	}
+]
+
+function fetchCurrentLangIndex()
+{
+	const stored = localStorage.getItem("__hd_svelte_lang")
+	if(!stored)
+	{
+		if(languages.length == 0)
+			return 0;
+
+		if(!navigator.language)
+			return 0;
+
+		const browserLang = navigator.language.substring(0, 2)
+		const idx = languages.findIndex(l => l.key == browserLang)
+		if(idx >=0)
+			return idx;
+		else
+			return 0;
+	}
+	else
+	{
+		try{
+			return JSON.parse(stored)
+		}
+		catch(err)
+		{
+			return 0;
+		}
+	}
+}
+
+let currentLangIndex = 0// fetchCurrentLangIndex()
+let defaultLangIndex = 0;
+
+export function setLanguages(langs)
+{
+	languages = langs
+	defaultLangIndex = languages.findIndex(l => l.default == true)
+	if(defaultLangIndex < 0)
+		defaultLangIndex = 0
+
+	currentLangIndex = fetchCurrentLangIndex()
+}
+
+export function getLanguages()
+{
+	return languages
+}
+
+export function setCurrentLanguage(sel)
+{
+	if(typeof sel === 'number')
+		currentLangIndex = sel
+	else if (typeof sel === 'string' || sel instanceof String)
+	{
+		currentLangIndex = languages.findIndex(l => l.key == sel)
+		if(currentLangIndex < 0)
+		{
+			console.error(`language ${sel} doesn't exist`)
+			currentLangIndex = defaultLangIndex
+		}
+	}
+	else
+	{
+		currentLangIndex = languages.findIndex(l => l.key == sel.key)
+		if(currentLangIndex < 0)
+		{
+			console.error(`language ${sel.key} doesn't exist`)
+			currentLangIndex = defaultLangIndex
+		}
+	}
+
+	localStorage.setItem("__hd_svelte_lang", JSON.stringify(currentLangIndex))
+	
+}
+
+export function getCurrentLanguage()
+{
+	return languages[currentLangIndex]
+}
+
+export function getCurrentLanguageIdx()
+{
+	return currentLangIndex
+}
+
+export function getCurrentLanguageKey()
+{
+	return languages[currentLangIndex].key
+}
+
+
+/**
+ * i18n("EN; ES; PL") => "EN" albo "ES" albo "PL"
+ */
+
+export function i18n(list) 
+{
+	if (typeof list === 'string' || list instanceof String) 
+	{
+		const parts = list.split(/\s*;\s*/);
+
+		if(parts.length == 0)
+			return "";
+		
+		if(currentLangIndex < parts.length)
+			return parts[currentLangIndex]
+		else if(defaultLangIndex < parts.length)
+			return parts[defaultLangIndex]
+		else
+			return parts[0]
+	}
+	else if (Array.isArray(list)) 
+	{
+		if(list.length == 0)
+			return "";
+		
+		if(currentLangIndex < list.length)
+			return list[currentLangIndex]
+		else if(defaultLangIndex < list.length)
+			return list[defaultLangIndex]
+		else
+			return list[0]
+  	}
+	else 
+	{
+		let langKey = languages[currentLangIndex].key
+		if (Object.keys(list).includes(langKey))
+			return list[langKey]
+		else 
+		{
+			langKey = languages[defaultLangIndex].key
+			const keys = Object.keys(list)
+			if (keys.includes(langKey))
+				return list[langKey]
+			else
+				return list[keys[0]] 
+		}
+	}
+}
+
+export function extractTranslated(str)
+{
+	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
+}
+
+export function ext(str)
+{
+	return extractTranslated(str)
+}

package/index.d.ts

@@ -26,7 +26,7 @@ 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 { showMenu, showGridMenu, showFloatingToolbar } from './components/menu';
+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';
 export { default as SidebarBrand } from './components/sidebar/sidebar.brand.svelte';
@@ -60,9 +60,9 @@ export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban'
 export { default as Paginator } from './components/paginator.svelte';
 export { default as Breadcrumb } from './components/breadcrumb.svelte';
 export { breadcrumbAdd, breadcrumbParse, breadcrumbStringify, breadcrumbClipName } from './components/breadcrumb_utils';
-export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, } from './utils';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, } from './utils';
 export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
-export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';
+export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, wholeAppReloader, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, navKey, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
 export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores';
@@ -72,3 +72,5 @@ export { default as IcH2 } from './components/document/internal/h2.icon.svelte';
 export { default as IcH3 } from './components/document/internal/h3.icon.svelte';
 export { default as IcH4 } from './components/document/internal/h4.icon.svelte';
 export { registerKicksObserver, unregisterKicksObserver, forceKicksChecking } from './kicks.js';
+export { i18n, extractTranslated, ext, setLanguages, getLanguages, setCurrentLanguage, getCurrentLanguage, getCurrentLanguageIdx, getCurrentLanguageKey } from './i18n.js';
+export { i18nPreprocess } from './i18n-preprocess.js';

package/index.js

@@ -32,7 +32,7 @@ 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 } from './components/menu';
+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';
 export { default as SidebarBrand } from './components/sidebar/sidebar.brand.svelte';
@@ -66,9 +66,9 @@ export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban'
 export { default as Paginator } from './components/paginator.svelte';
 export { default as Breadcrumb } from './components/breadcrumb.svelte';
 export { breadcrumbAdd, breadcrumbParse, breadcrumbStringify, breadcrumbClipName } from './components/breadcrumb_utils';
-export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, } from './utils';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, } from './utils';
 export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
-export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';
+export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, wholeAppReloader, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, navKey, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
 export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores'; // tmp
@@ -78,3 +78,5 @@ export { default as IcH2 } from './components/document/internal/h2.icon.svelte';
 export { default as IcH3 } from './components/document/internal/h3.icon.svelte';
 export { default as IcH4 } from './components/document/internal/h4.icon.svelte';
 export { registerKicksObserver, unregisterKicksObserver, forceKicksChecking } from './kicks.js';
+export { i18n, extractTranslated, ext, setLanguages, getLanguages, setCurrentLanguage, getCurrentLanguage, getCurrentLanguageIdx, getCurrentLanguageKey } from './i18n.js';
+export { i18nPreprocess } from './i18n-preprocess.js';

package/modal.svelte

@@ -3,6 +3,7 @@ import Icon from "./components/icon.svelte";
 import { pushToolsActionsOperations, popToolsActionsOperations } from "./stores.js";
 import { isDeviceSmallerThan } from "./utils";
 import { FaTimes } from "svelte-icons/fa";
+import { i18n } from "./i18n.js";
 export let title = "";
 export let open = false;
 export let content = "";
@@ -13,7 +14,7 @@ export const Cancel = 2;
 export const Custom = 3;
 export let mode = OKCancel;
 export let okCaption = "OK";
-export let cancelCaption = "Cancel";
+export let cancelCaption = i18n({ en: "Cancel", es: "Cancelar", pl: "Anuluj" });
 export let onOkCallback = void 0;
 export let onCancelCallback = void 0;
 export function show(on_close_callback = void 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.5.1",
+  "version": "1.6.1",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -156,6 +156,8 @@
     "./desk.svelte": "./desk.svelte",
     "./form.box.svelte": "./form.box.svelte",
     "./horizontal.toolbar.svelte": "./horizontal.toolbar.svelte",
+    "./i18n-preprocess": "./i18n-preprocess.js",
+    "./i18n": "./i18n.js",
     ".": "./index.js",
     "./internal/configurable.content.svelte": "./internal/configurable.content.svelte",
     "./internal/loading.svelte": "./internal/loading.svelte",

package/stores.d.ts

@@ -51,3 +51,4 @@ export const visible_property_tab_store: import("svelte/store").Writable<string>
 export const fabCollapsed: import("svelte/store").Writable<any>;
 export const showFABAlways: import("svelte/store").Writable<any>;
 export const leftHandedFAB: import("svelte/store").Writable<any>;
+export const navKey: import("svelte/store").Readable<any>;

package/stores.js

@@ -1,6 +1,8 @@
 
-import {writable, get} from 'svelte/store';
+import {writable, get, derived} from 'svelte/store';
 import {SCREEN_SIZES, randomString} from './utils.js'
+import {navGetKey} from './utils.js'
+import { location } from 'svelte-spa-router';
 
 export const data_tick_store = writable(1);
 export const contextItemsStore = writable({focused:'', data: null, sel: null})
@@ -222,5 +224,4 @@ export function show_sidebar(index)
     main_sidebar_visible_store.set(index)
 }
 
-
-
+export const navKey = derived([main_sidebar_visible_store, location], ([$main_sidebar_visible_store, $location]) => navGetKey() )

package/tenant.members.svelte

@@ -21,7 +21,7 @@
 	import Checkbox from './components/checkbox.svelte';
    
 	import { reef, session, signInHRef } from '@humandialog/auth.svelte';
-	import { ComboSource } from './';
+	import { ComboSource, i18n } from './';
     import {showMenu} from './components/menu'
     import {onErrorShowAlert} from './stores'
     import {randomString} from './utils'
@@ -54,17 +54,23 @@
 
     let fake_users;
 
-    const authAccessKinds = [
-        { name: 'No auth access', key: 0 },
-        { name: 'Read auth access', key: 1 },
+    const authAccessKinds = () => [
+        {   name: i18n({en: 'Cannot change permissions', es: 'No puede cambiar los permisos', pl: 'Nie może zmieniać uprawnień'}),
+            key: 0 },
+        {   name: i18n({en: 'Can only read permissions', es: 'Solo puede leer permisos', pl: 'Może tylko czytać uprawnienia'}), 
+            key: 1 },
         //{ name: 'Can invite others', key: 3 },
-        { name: 'Full auth access', key: 7 },
+        {   name: i18n({en: 'Full access to permissions', es: 'Acceso completo a los permisos', pl: 'Pełny dostęp do uprawnień'}),
+            key: 7 },
     ]
 
-    const filesAccessKinds = [
-        { name: 'Can read files', key: 0 },
-        { name: 'Can write files', key: 1 },
-        { name: 'Full files access', key: 3 },
+    const filesAccessKinds = () => [
+        {   name: i18n({en: 'Can read files', es: 'Puede leer archivos', pl: 'Może odczytywać pliki'}),
+            key: 0 },
+        {   name: i18n({en: 'Can write files', es: 'Puede escribir archivos', pl: 'Może zapisywać pliki'}),
+            key: 1 },
+        {   name: i18n({en: 'Full files access', es: 'Acceso completo a los archivos', pl: 'Pełny dostęp do plików'}), 
+            key: 3 },
     ]
 
     async function init()
@@ -160,9 +166,9 @@
         //console.log(info)
 
         if(user.removed)
-            user.membership_tag = "Removed";
+            user.membership_tag = i18n({en: 'Removed', es: 'Eliminado', pl: 'Usunięto'});
         else if(user.invitation_not_accepted)
-            user.membership_tag = "Invited";
+            user.membership_tag = i18n({en: 'Invited', es: 'Invitado', pl: 'Zaproszono'});
         else
             user.membership_tag = "";
 
@@ -301,11 +307,11 @@
         fab: 'M00',
         operations: [
             {
-                caption: 'View',
+                caption: i18n({en: 'View', es: 'Ver', pl: 'Widok'}),
                 operations: [
                     {
                         icon: FaUserPlus,
-                        caption: 'Add user',
+                        caption: i18n({en: 'Add user', es: 'Añadir usuario', pl: 'Dodaj użytkownika'}),
                         action: (focused) => { create_new_user(); },
                     //    fab: 'M10',
                         tbr: 'A'
@@ -331,14 +337,14 @@
                 action: (focused) =>  { list.edit(user, nameAttrib) }
             },
             {
-                caption: 'Users management (auth role)',
+                caption: i18n({en: 'Users management', es: 'Gestión de usuarios', pl: 'Zarządzanie użytkownikami'}),
                 action: (focused) => { list.edit(user, 'Privileges') }
             }];
 
         if(showAccessRoles)
         {
             operations.push({
-                caption: 'Access role (app role)',
+                caption: i18n({en: 'Role in the application', es: 'Papel en la aplicación', pl: 'Rola w aplikacji'}),
                 action: (focused) => { list.edit(user, 'Access') }
             });
         }
@@ -346,7 +352,7 @@
         if(showFiles)
         {
             operations.push({
-                caption: 'External files (files role)',
+                caption: i18n({en: 'External files', es: 'Archivos externos', pl: 'Pliki zewnętrzne'}),
                 action: (focused) => { list.edit(user, 'Files') }
             });
         }
@@ -358,7 +364,7 @@
         
         let operations = [
             {
-                caption: 'Fetch info',
+                caption: i18n({en: 'Fetch info', es: 'Obtener información', pl: 'Pobierz informacje'}),
                 icon: FaInfo,
                 action: (f) => fetch_user_details(user),
                 tbr: 'A'
@@ -370,7 +376,7 @@
             operations = [ ...operations,
                 {
                     icon: FaUserPlus,
-                    caption: 'Revert removing',
+                    caption: i18n({en: 'Revert removing', es: 'Revertir eliminación', pl: 'Cofnij usunięcie'}),
                     action: (f) => askToAddAgain(user),
 //                    fab: 'M10',
                     tbr: 'A'
@@ -383,14 +389,14 @@
             
             operations.push({
                                 icon: FaPen,
-                                caption: 'Change',
+                                caption: i18n({en: 'Change', es: 'Cambiar', pl: 'Zmień'}),
                                 menu: edit_operations,
                                 //fab: 'M20',
                                 tbr: 'A'
                             });
             
             operations.push({
-                                caption: 'Remove user',
+                                caption: i18n({en: 'Remove user', es: 'Eliminar usuario', pl: 'Usuń użytkownika'}),
                                 icon: FaUserMinus,
                                 action: (focused) => askToRemove(user),
                              //   fab: 'M30',
@@ -404,7 +410,7 @@
             fab: 'M00',
             operations: [
                 {
-                    caption: 'User',
+                    caption: i18n({en: 'User', es: 'Usuario', pl: 'Użytkownik'}),
                  //   tbr: 'B',
                     operations: operations
                 }
@@ -725,7 +731,7 @@
             <ListStaticProperty name="Membership" a="membership_tag"/>
             
             <ListComboProperty name='Privileges' a='auth_group' onSelect={on_change_privileges}>
-                {#each authAccessKinds as kind}
+                {#each authAccessKinds() as kind}
                     <ComboItem name={kind.name} key={kind.key}  />    
                 {/each}
             </ListComboProperty>
@@ -738,7 +744,7 @@
 
             {#if showFiles}
             <ListComboProperty name='Files' a='files_group' onSelect={on_change_files_access}>
-                {#each filesAccessKinds as kind}
+                {#each filesAccessKinds() as kind}
                     <ComboItem name={kind.name} key={kind.key}  />    
                 {/each}
             </ListComboProperty>
@@ -752,8 +758,8 @@
 </Page>
 
 <Modal  bind:open={create_new_user_enabled}
-        title='Invite someone'
-        okCaption='Invite'
+        title={i18n({en: 'Invite someone', es: 'Invitar a alguien', pl: 'Zaproś kogoś'})}
+        okCaption={i18n({en: 'Invite', es: 'Invitar', pl: 'Zaproś'})}
         onOkCallback={on_new_user_requested}
         onCancelCallback={on_new_user_canceled}
         icon={FaUserPlus}>
@@ -766,7 +772,7 @@
                     bind:this={email_input}
                     readonly={new_user.silently}/>
 
-            <Input  label='Name' 
+            <Input  label={i18n({en: 'Name', es: 'Nombre', pl: 'Imię'})} 
                     placeholder='Optional' 
                     self={new_user} 
                     a="name"
@@ -795,7 +801,7 @@
                 <div class="flex flex-col">
                     <label for="new_user_auth_group"
                             class="text-xs">
-                        Auth access
+                        {i18n({en: 'Permissions management', es: 'Gestión de permisos', pl: 'Zarządzanie uprawnieniami'})}
                     </label>
                     <button id="new_user_auth_group"
                             class=" w-full mt-0.5
@@ -811,7 +817,7 @@
                             return;
 
                         let options = [];
-                        authAccessKinds.forEach(k => options.push({
+                        authAccessKinds().forEach(k => options.push({
                             caption: k.name,
                             action: (f) => { new_user.auth_group=k.key}
                         }));
@@ -820,7 +826,7 @@
                         let pt = new DOMPoint(rect.left, rect.bottom)
                         showMenu(pt, options);   
                     }}>
-                        {authAccessKinds.find(k => k.key == new_user.auth_group)?.name}
+                        {authAccessKinds().find(k => k.key == new_user.auth_group)?.name}
                         <span class="w-3 h-3 inline-block text-stone-700 dark:text-stone-300 ml-2 mt-2 sm:mt-1">
                             <FaChevronDown/>
                         </span>
@@ -831,7 +837,7 @@
                     <div class="flex flex-col">
                         <label for="new_user_auth_group"
                                 class="text-xs">
-                            Files access
+                            {i18n({en: 'File access', es: 'Acceso a los archivos', pl: 'Dostęp do plików'})}
                         </label>
                         <button 
                                 class=" mt-0.5 w-full
@@ -847,7 +853,7 @@
                                 return;
 
                             let options = [];
-                            filesAccessKinds.forEach(k => options.push({
+                            filesAccessKinds().forEach(k => options.push({
                                 caption: k.name,
                                 action: (f) => { new_user.files_group=k.key}
                             }));
@@ -856,7 +862,7 @@
                             let pt = new DOMPoint(rect.left, rect.bottom)
                             showMenu(pt, options);   
                         }}>
-                            {filesAccessKinds.find(k => k.key == new_user.files_group)?.name}
+                            {filesAccessKinds().find(k => k.key == new_user.files_group)?.name}
                             <span class="w-3 h-3 inline-block text-stone-700 dark:text-stone-300 ml-2 mt-2 sm:mt-1">
                                 <FaChevronDown/>
                             </span>
@@ -868,7 +874,7 @@
                     <div class="flex flex-col">
                         <label for="new_user_auth_group"
                                 class="text-xs">
-                            App role
+                            {i18n({en: 'Role in the application', es: 'Papel en la aplicación', pl: 'Rola w aplikacji'})}
                         </label>
                         <button 
                                 class=" mt-0.5 w-full
@@ -896,7 +902,7 @@
                             {#if new_user.acc_role}
                                 {access_roles.find(r => r.name==new_user.acc_role).summary}
                             {:else}
-                                {"<none>"}
+                                {i18n({en: '"<none>', es: '<ningún>', pl: '<żadna>'})}
                             {/if}
                            
                             <span class="w-3 h-3 inline-block text-stone-700 dark:text-stone-300 ml-2 mt-2 sm:mt-1">
@@ -908,18 +914,18 @@
             </section>
 </Modal>
 
-<Modal  title="User removal"
-        content="Are you sure you want to remove {userToRemove ? userToRemove[nameAttrib] : 'user'} from the group?"
+<Modal  title={i18n({en: 'User removal', es: 'Eliminar usuario', pl: 'Usuwanie użytkownika'})} 
+        content={i18n({en: `Are you sure you want to remove ${userToRemove ? userToRemove[nameAttrib] : 'user'}?`, es: `¿Estás seguro de que deseas eliminar al ${userToRemove ? userToRemove[nameAttrib] : 'usuario'}?`, pl: `Czy na pewno chcesz usunąć ${userToRemove ? userToRemove[nameAttrib] : 'użytkownika'}?`})}
         icon={FaUserMinus}
-        okCaption='Remove'
+        okCaption={i18n({en: 'Remove', es: 'Eliminar', pl: 'Usuń'})}
         onOkCallback={removeUser}
         bind:this={removeModal}
         />
 
-<Modal  title="Delete app account"
-        content="Are you sure you want to delete your application account?"
+<Modal  title={i18n({en: 'Delete app account', es: 'Eliminar cuenta de la aplicación', pl: 'Usuń konto aplikacji'})}
+        content={i18n({en: 'Are you sure you want to delete your application account?', es: '¿Estás seguro de que deseas eliminar tu cuenta de la aplicación?', pl: 'Czy na pewno chcesz usunąć swoje konto aplikacji?'})}
         icon={FaUserSlash}
-        okCaption='Delete'
+        okCaption={i18n({en: 'Delete', es: 'Eliminar', pl: 'Usuń'})}
         onOkCallback={deleteApplicationAccount}
         bind:this={deleteAccountModal}
         />

package/utils.d.ts

@@ -28,11 +28,19 @@ export function remove(array: any, element: any): any;
 export function swapElements(array: any, e1: any, e2: any): any;
 export function resizeImage(file: any, maxWidth?: number, maxHeight?: number, contentType?: string, quality?: number): Promise<any>;
 export function isOnScreenKeyboardVisible(): boolean;
-export function isOnNavigationPage(): boolean;
-export function pushNavigationPage(): void;
-export function popNavigationPage(): void;
 export function dec2hex(dec: any): any;
 export function randomString(len: any): string;
+export function isOnNavigationPage(navKind: any): boolean;
+export function pushNavigationPage(navKind: any): void;
+export function popNavigationPage(): void;
+export function navGetMode(): number;
+export function navIsVisible(): boolean | undefined;
+export function navGetKey(): any;
+export function navShow(key: any): void;
+export function navHide(): void;
+export function navToggle(key: any): void;
+export function navPrevVisibleKey(): string | undefined;
+export function navAutoHide(): void;
 export namespace icons {
     const symbols: null;
 }
@@ -48,4 +56,6 @@ export namespace UI {
     const fab: null;
     const navigator: null;
 }
-export const NAVIGATION_PAGE_PATH: "/";
+export const NAVIGATION_PAGE_PATH: "/nav";
+export const NAV_MODE_SIDEBAR: 0;
+export const NAV_MODE_FULL_PAGE: 1;