@enki-tek/fms-web-components 0.0.38 → 0.0.40

package/components/Alert/Alert.svelte

@@ -1,11 +1,10 @@
 <script>import { Alert } from "sveltestrap";
 export let color = "info";
-export let message = "I am an alert and I can be dismissed!";
 </script>
 
 <Alert class={`alert-${color}`}  dismissible>
   <slot />
-  {message}
+
 </Alert>
 
 

package/components/Alert/Alert.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         color?: "info" | "success" | "danger" | "warning" | undefined;
-        message?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Button/Button.svelte.d.ts

@@ -3,6 +3,7 @@
 /** @typedef {typeof __propDef.slots}  ButtonSlots */
 export default class Button extends SvelteComponentTyped<{
     className: any;
+    size?: string | undefined;
     disabled?: boolean | undefined;
     type?: string | undefined;
     label?: string | undefined;
@@ -14,7 +15,6 @@ export default class Button extends SvelteComponentTyped<{
     } | undefined;
     shade?: string | undefined;
     outlineShade?: string | undefined;
-    size?: string | undefined;
 }, {
     click: MouseEvent;
     focus: FocusEvent;
@@ -32,6 +32,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         className: any;
+        size?: string | undefined;
         disabled?: boolean | undefined;
         type?: string | undefined;
         label?: string | undefined;
@@ -43,7 +44,6 @@ declare const __propDef: {
         } | undefined;
         shade?: string | undefined;
         outlineShade?: string | undefined;
-        size?: string | undefined;
     };
     events: {
         click: MouseEvent;

package/components/Button/ButtonFilter.svelte.d.ts

@@ -3,9 +3,9 @@
 /** @typedef {typeof __propDef.slots}  ButtonFilterSlots */
 export default class ButtonFilter extends SvelteComponentTyped<{
     className: any;
-    label?: string | undefined;
     size?: string | undefined;
     isOpen?: boolean | undefined;
+    label?: string | undefined;
 }, {
     click: MouseEvent;
     focus: FocusEvent;
@@ -22,9 +22,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         className: any;
-        label?: string | undefined;
         size?: string | undefined;
         isOpen?: boolean | undefined;
+        label?: string | undefined;
     };
     events: {
         click: MouseEvent;

package/components/Card/Card.svelte.d.ts

@@ -2,10 +2,10 @@
 /** @typedef {typeof __propDef.events}  CardEvents */
 /** @typedef {typeof __propDef.slots}  CardSlots */
 export default class Card extends SvelteComponentTyped<{
+    link?: string | undefined;
     text?: string | undefined;
     title?: string | undefined;
     subTitle?: string | undefined;
-    link?: string | undefined;
     image?: string | undefined;
     width?: string | undefined;
     linkName1?: string | undefined;
@@ -27,10 +27,10 @@ export type CardSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        link?: string | undefined;
         text?: string | undefined;
         title?: string | undefined;
         subTitle?: string | undefined;
-        link?: string | undefined;
         image?: string | undefined;
         width?: string | undefined;
         linkName1?: string | undefined;

package/components/CheckBox/Checkbox.svelte.d.ts

@@ -7,8 +7,8 @@ export default class Checkbox extends SvelteComponentTyped<{
     feedback: any;
     disable: any;
     enable: any;
-    label?: string | undefined;
     size?: string | undefined;
+    label?: string | undefined;
     name?: string | undefined;
     value?: string | undefined;
 }, {
@@ -26,8 +26,8 @@ declare const __propDef: {
         feedback: any;
         disable: any;
         enable: any;
-        label?: string | undefined;
         size?: string | undefined;
+        label?: string | undefined;
         name?: string | undefined;
         value?: string | undefined;
     };

package/components/EnkiSidbar/EnkiSidebar.svelte

@@ -1,10 +1,15 @@
 <script>
 	import { Offcanvas } from 'sveltestrap';
 	import Icon from '../Icon/Icon.svelte';
-	export let companyName = 'Vertfarm';
-    export let isOpen = false;
+	export let companyName = 'ENKITEK';
+	export let isOpen = true;
 	export let backdrop = false;
-	export let toggle ;
+	import { menuTypeStore } from '../lay-out/menuStore.js';
+
+    
+    const setState = () =>{
+		menuTypeStore.set($menuTypeStore ?  '': 'show');
+	}
 </script>
 
 <div class="container-fluid">
@@ -15,7 +20,7 @@
 			<div class="icon-sidebar-content">
 				<div class="upper-div">
 					<div class="icon-btn">
-						<button class="toggle-button" type="button" on:click={() => (isOpen = true)}  >
+						<button class="toggle-button" type="button" on:click={() => {setState();isOpen = true;}}>
 							<Icon iconName="chevron-double-right" />
 						</button>
 					</div>
@@ -28,15 +33,23 @@
 		</div>
 		<!-- Offcanvas menu -->
 		<div class="sidebar-menu">
-			<Offcanvas class="offcanvas offcanvas-start"  scroll {isOpen} backdrop={backdrop} >
+			<Offcanvas class="offcanvas offcanvas-start" scroll {isOpen} {backdrop}>
 				<div class="offcanvas-header">
-					<h5 class="offcanvas-title efs-small" id="offcanvasScrollingLabel">{companyName}</h5>
+					<h5 class="offcanvas-title efs-small" id="offcanvasScrollingLabel">
+						<slot>
+							{#if companyName}
+							  {companyName}
+							  {:else}
+								 <slot name="company-name"/>
+							 {/if}    
+						 </slot>
+					</h5>
 					<button
 						type="button"
 						class="toggle-button"
 						data-bs-dismiss="offcanvas"
 						aria-label="Close"
-						on:click={() => (isOpen = false)}
+						on:click={() => {setState();isOpen = false;}}
 					>
 						<span class="material-icons">
 							<Icon iconName="chevron-double-left" />
@@ -44,9 +57,9 @@
 					</button>
 				</div>
 				<div class="line-open" />
-				<slot name="nav-item"/>
+				<slot name="nav-item" />
 			</Offcanvas>
-			</div>
+		</div>
 	</div>
 </div>
 
@@ -126,6 +139,7 @@
 }
 .offcanvas-header {
   padding: 1.5rem 1.5rem;
+  display: flex;
 }
 .line-open {
   width: 274px;

package/components/EnkiSidbar/EnkiSidebar.svelte.d.ts

@@ -2,7 +2,6 @@
 /** @typedef {typeof __propDef.events}  EnkiSidebarEvents */
 /** @typedef {typeof __propDef.slots}  EnkiSidebarSlots */
 export default class EnkiSidebar extends SvelteComponentTyped<{
-    toggle: any;
     isOpen?: boolean | undefined;
     backdrop?: boolean | undefined;
     companyName?: string | undefined;
@@ -10,6 +9,8 @@ export default class EnkiSidebar extends SvelteComponentTyped<{
     [evt: string]: CustomEvent<any>;
 }, {
     'nav-icons': {};
+    default: {};
+    'company-name': {};
     'nav-item': {};
 }> {
 }
@@ -19,7 +20,6 @@ export type EnkiSidebarSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        toggle: any;
         isOpen?: boolean | undefined;
         backdrop?: boolean | undefined;
         companyName?: string | undefined;
@@ -29,6 +29,8 @@ declare const __propDef: {
     };
     slots: {
         'nav-icons': {};
+        default: {};
+        'company-name': {};
         'nav-item': {};
     };
 };

package/components/EnkiSidbar/NavIcon.svelte

@@ -78,6 +78,7 @@
 }
 .offcanvas-header {
   padding: 1.5rem 1.5rem;
+  display: flex;
 }
 .line-open {
   width: 274px;

package/components/EnkiSidbar/{NavIteam.svelte → NavItem.svelte}

@@ -80,6 +80,7 @@
 }
 .offcanvas-header {
   padding: 1.5rem 1.5rem;
+  display: flex;
 }
 .line-open {
   width: 274px;

package/components/EnkiSidbar/NavItem.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  NavItemProps */
+/** @typedef {typeof __propDef.events}  NavItemEvents */
+/** @typedef {typeof __propDef.slots}  NavItemSlots */
+export default class NavItem extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type NavItemProps = typeof __propDef.props;
+export type NavItemEvents = typeof __propDef.events;
+export type NavItemSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/EnkiSidbar/NavLink.svelte

@@ -88,6 +88,7 @@
 }
 .offcanvas-header {
   padding: 1.5rem 1.5rem;
+  display: flex;
 }
 .line-open {
   width: 274px;

package/components/EnkiSidbar/Sidebar.scss

@@ -119,6 +119,7 @@
 
 .offcanvas-header {
   padding: 1.5rem 1.5rem;
+  display: flex;
 }
 
 .line-open {

package/components/EnkiTable/EnkiTable.svelte

@@ -35,4 +35,5 @@
   width: 12.5rem;
   padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
   font-weight: 400;
+  vertical-align: middle;
 }</style>

package/components/EnkiTable/EnkiTable.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  EnkiTableEvents */
 /** @typedef {typeof __propDef.slots}  EnkiTableSlots */
 export default class EnkiTable extends SvelteComponentTyped<{
-    type?: string | undefined;
     size?: string | undefined;
+    type?: string | undefined;
     className?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -17,8 +17,8 @@ export type EnkiTableSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        type?: string | undefined;
         size?: string | undefined;
+        type?: string | undefined;
         className?: string | undefined;
     };
     events: {

package/components/EnkiTable/Table.scss

@@ -13,11 +13,10 @@
     font-size: 17px;
 }
 
-
-
 .td-div {
     width: 12.5rem;
     padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
     @extend %common-fonts;
     font-weight: 400;
+    vertical-align: middle;
 }

package/components/EnkiTable/TableBody.svelte

@@ -23,4 +23,5 @@
   width: 12.5rem;
   padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
   font-weight: 400;
+  vertical-align: middle;
 }</style>

package/components/EnkiTable/TableCell.svelte

@@ -25,4 +25,5 @@ let tdStyles = ['td-div', className]
   width: 12.5rem;
   padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
   font-weight: 400;
+  vertical-align: middle;
 }</style>

package/components/EnkiTable/TableHead.svelte

@@ -22,4 +22,5 @@
   width: 12.5rem;
   padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
   font-weight: 400;
+  vertical-align: middle;
 }</style>

package/components/EnkiTable/TableHeadCell.svelte

@@ -25,4 +25,5 @@
   width: 12.5rem;
   padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
   font-weight: 400;
+  vertical-align: middle;
 }</style>

package/components/EnkiTable/TableRow.svelte

@@ -23,4 +23,5 @@
   width: 12.5rem;
   padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
   font-weight: 400;
+  vertical-align: middle;
 }</style>

package/components/Switches/Switch.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Switch extends SvelteComponentTyped<{
     disable: any;
     enable: any;
-    label?: string | undefined;
     size?: string | undefined;
+    label?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -18,8 +18,8 @@ declare const __propDef: {
     props: {
         disable: any;
         enable: any;
-        label?: string | undefined;
         size?: string | undefined;
+        label?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/i18n/ShiftLanguage.svelte

@@ -0,0 +1,34 @@
+<script>
+import { locale, locales } from 'svelte-i18n';
+import { Dropdown, DropdownToggle,DropdownMenu, DropdownItem  } from "sveltestrap";
+
+/** 
+  * @type {import('$app/environment').browser} 
+  */ 
+  const browser = !import.meta.env.SSR;
+// import { browser } from '$app/environment';
+
+/**
+ * @type {string | null | undefined}
+ */
+let currLang;
+if (browser) {    
+    currLang = localStorage?.getItem("lang")  || 'en';
+}
+
+
+function changeLang(lang='en'){   
+    currLang = lang;
+    locale.set(currLang);
+    localStorage.setItem("lang",currLang);
+}
+</script>
+
+<Dropdown class="change-lang" direction="up" size="sm">
+    <DropdownToggle caret >{currLang}</DropdownToggle>
+    <DropdownMenu>  
+        {#each $locales as lng}
+      <DropdownItem on:click={() => changeLang(lng)}>{lng}</DropdownItem>                          
+      {/each}
+    </DropdownMenu>
+</Dropdown>

package/components/i18n/ShiftLanguage.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  ShiftLanguageProps */
+/** @typedef {typeof __propDef.events}  ShiftLanguageEvents */
+/** @typedef {typeof __propDef.slots}  ShiftLanguageSlots */
+export default class ShiftLanguage extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ShiftLanguageProps = typeof __propDef.props;
+export type ShiftLanguageEvents = typeof __propDef.events;
+export type ShiftLanguageSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/i18n/i18n.d.ts

@@ -0,0 +1 @@
+export function i18nInit(lnags?: any[]): void;

package/components/i18n/i18n.js

@@ -0,0 +1,47 @@
+// @ts-nocheck
+
+import { addMessages, init } from 'svelte-i18n';
+// import { browser } from '$app/environment';
+
+/** 
+  * @type {import('$app/environment').browser} 
+  */ 
+const browser = !import.meta.env.SSR;
+
+function i18nInit(lnags =[]){
+  lnags.map(lng =>{
+    addMessages(lng?.code, lng?.json);    
+  });
+
+  let lang;
+  if(browser){
+    lang = localStorage.getItem("lang");
+  }
+  
+  init({
+    fallbackLocale: 'en',
+    initialLocale: lang ?? 'en',
+  })
+
+
+}
+export {
+  i18nInit
+}
+// register('en', () => import('./en.json'));
+
+
+// en, en-US and pt are not available yet
+
+
+
+// dictionary.update(dict => {
+//   dict.en = {
+//     ...dict.en,
+//     Edit: 'asasass'
+//     // ...french messages
+//   }
+//   return dict
+// })
+
+

package/components/lay-out/Footer.svelte

@@ -1,6 +1,21 @@
+<script>
+	import ShiftLanguage from '../i18n/ShiftLanguage.svelte';
+
+	import { _ } from 'svelte-i18n';	
+</script>
+
 <footer class="main-footer p-10 d-flex flex-row align-items-center justify-content-between ">
 	<div class="copy-right">
-		All rights reserved
-		<i class="ml-2 text-secondary ">Version 0.0.1</i>
+		{$_({id: 'Common.rightReserved', default: 'All rights reserved.'})}
+		<i class="ml-2 text-secondary ">{$_({id: 'Common.Version', default:'Version'})} 0.0.1</i>		
 	</div>
+	<div class="d-flex flex-row align-items-center justify-content-between">
+		<ShiftLanguage />
+		<slot />
+	</div>	
+	
 </footer>
+
+<style>
+	
+</style>

package/components/lay-out/Footer.svelte.d.ts

@@ -5,7 +5,9 @@ export default class Footer extends SvelteComponentTyped<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
+}, {
+    default: {};
+}> {
 }
 export type FooterProps = typeof __propDef.props;
 export type FooterEvents = typeof __propDef.events;
@@ -18,6 +20,8 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export {};

package/components/lay-out/LayOut.svelte

@@ -1,13 +1,43 @@
-<script>import Footer from "./Footer.svelte";
+<script>
+	import Footer from './Footer.svelte';
+    import { derivedStore, menuTypeStore, mediaListener } from './menuStore';
+    
+	/** 
+	 * @type {import('$app/environment').browser} 
+	 */ 
+	const browser = !import.meta.env.SSR;
+
+
+	if(!mediaListener?.matches){
+		menuTypeStore.set('show');
+	}
+
 </script>
 
-<section >
+<section class={`sidebar-mini ${$derivedStore?.css?.wrapper}`} >
 	<div class="wrapper">
-		<div class="content-wrapper">							
-			<slot />
+		<div class="content-wrapper">
+			<slot name="menu" />
+			{#if $$slots.content}
+                <div style="transition: margin-left 0.3s ease-in-out; margin-left: {$derivedStore?.isWeb && $derivedStore?.marginLeft}px">
+                    <slot name="content" />
+                </div>				
+			{:else}
+				<slot />
+			{/if}
 		</div>
-        <div>
-			<Footer />							
+        <div style="transition: margin-left 0.3s ease-in-out; margin-left: {$derivedStore?.isWeb && $derivedStore?.marginLeft}px">
+			<Footer>
+				{#if $$slots.footer}
+					<slot name="footer" />
+				{/if}
+			</Footer>
         </div>		
 	</div>
 </section>
+
+<style>
+	.content-wrapper {
+		min-height: calc(100vh - 3.4em);
+	}
+</style>

package/components/lay-out/LayOut.svelte.d.ts

@@ -1,16 +1,33 @@
+/** @typedef {typeof __propDef.props}  LayOutProps */
+/** @typedef {typeof __propDef.events}  LayOutEvents */
+/** @typedef {typeof __propDef.slots}  LayOutSlots */
+export default class LayOut extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    menu: {};
+    content: {};
+    default: {};
+    footer: {};
+}> {
+}
+export type LayOutProps = typeof __propDef.props;
+export type LayOutEvents = typeof __propDef.events;
+export type LayOutSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        [x: string]: never;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        menu: {};
+        content: {};
         default: {};
+        footer: {};
     };
 };
-export type LayOutProps = typeof __propDef.props;
-export type LayOutEvents = typeof __propDef.events;
-export type LayOutSlots = typeof __propDef.slots;
-export default class LayOut extends SvelteComponentTyped<LayOutProps, LayOutEvents, LayOutSlots> {
-}
 export {};

package/components/lay-out/MainMenuHead.svelte

@@ -0,0 +1,15 @@
+<script>
+
+	import { Button } from "sveltestrap";
+	import { derivedStore, menuTypeStore } from "./menuStore";
+    const setState = () =>{
+		menuTypeStore.set('');
+	}
+    
+</script>
+<div class="logo">            
+    <div><slot></slot></div>
+    {#if !$derivedStore?.isWeb}
+        <div > <Button color="light" on:click={setState}>x</Button></div>         
+    {/if}
+</div>

package/components/lay-out/MainMenuHead.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  MainMenuHeadProps */
+/** @typedef {typeof __propDef.events}  MainMenuHeadEvents */
+/** @typedef {typeof __propDef.slots}  MainMenuHeadSlots */
+export default class MainMenuHead extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type MainMenuHeadProps = typeof __propDef.props;
+export type MainMenuHeadEvents = typeof __propDef.events;
+export type MainMenuHeadSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/lay-out/Page.svelte

@@ -0,0 +1,21 @@
+<script>
+	import { Col, Row } from 'sveltestrap';
+</script>
+
+<section>
+	<div class="container-fluid mb-2">
+		<Row class="border-bottom py-1">
+			<Col>
+				<header>
+					<div class="d-flex flex-row justify-content-start">
+						<slot name="title" />
+					</div>
+				</header>
+			</Col>
+			<Col class="mt-1">
+				<slot name="actions" />
+			</Col>
+		</Row>
+	</div>
+</section>
+<slot name="content" />

package/components/lay-out/Page.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  PageProps */
+/** @typedef {typeof __propDef.events}  PageEvents */
+/** @typedef {typeof __propDef.slots}  PageSlots */
+export default class Page extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    title: {};
+    actions: {};
+    content: {};
+}> {
+}
+export type PageProps = typeof __propDef.props;
+export type PageEvents = typeof __propDef.events;
+export type PageSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        title: {};
+        actions: {};
+        content: {};
+    };
+};
+export {};

package/components/lay-out/menuStore.d.ts

@@ -0,0 +1,15 @@
+/**
+* @type { import("svelte/store").Writable<(string | null)> }
+*/
+export const menuTypeStore: import("svelte/store").Writable<(string | null)>;
+export const mediaListener: MediaQueryList | null;
+export const smallMenuwidth: 74;
+export const fullMenuwidth: 265;
+export const derivedStore: import("svelte/store").Readable<{
+    width: number;
+    marginLeft: number;
+    isWeb: boolean;
+    css?: {
+        wrapper: string;
+    } | undefined;
+} | null>;

package/components/lay-out/menuStore.js

@@ -0,0 +1,90 @@
+import { writable, derived } from 'svelte/store';
+// import { browser } from '$app/environment';
+
+
+/** 
+  * @type {import('$app/environment').browser} 
+  */ 
+const browser = !import.meta.env.SSR;
+
+/**
+ * @type {{ web: { full:{ width: number, marginLeft: number, isWeb: Boolean ,css?: { wrapper: string} }, mini:{ width: number, marginLeft: number,isWeb: Boolean, css?: { wrapper: string}  } },  
+ * mobile: {  full:{ width: number, marginLeft: number, isWeb: Boolean, css?: { wrapper: string}  }, mini:{ width: number, marginLeft: number, isWeb: Boolean, css?: { wrapper: string}  } } } | null}
+ */
+const menuConfig = {
+    web:{
+        full:{
+            width: 300,
+            marginLeft: 300,
+            isWeb: true,
+            css:{
+                wrapper: 'web-full'
+            }
+        },
+        mini:{
+            width: 100,
+            marginLeft: 100,
+            isWeb: true,
+            css:{
+                wrapper: 'web-mini'
+            }
+        }
+    },
+    mobile:{
+        full:{
+            width: 265,
+            marginLeft: 265,
+            isWeb: false,
+            css:{
+                wrapper: 'mobile-full'
+            }
+        },
+        mini:{
+            width: 0,
+            marginLeft: 0,
+            isWeb: false,
+            css:{
+                wrapper: 'mobile-mini'
+            }
+        }
+    }
+} ;
+/**
+* @type { import("svelte/store").Writable<(string | null)> }
+*/
+export const menuTypeStore = writable(null);
+export const mediaListener = browser ? window.matchMedia("(max-width: 767px)") : null;  
+export const smallMenuwidth =  74;
+export const fullMenuwidth =  265;
+export const derivedStore = derived(
+	menuTypeStore,
+	($values) => {
+        let result = null;        
+        if($values?.trim().length){
+            
+            if(browser){
+                
+                const mediaListener = isMobile();
+                
+                if(mediaListener?.matches){
+                    result= menuConfig['mobile']?.full;
+                }else{
+                    result = menuConfig['web']?.full;
+                }
+            }                        
+        }else{            
+            if(browser){
+                const mediaListener = isMobile();
+                if(mediaListener?.matches){
+                    result= menuConfig['mobile']?.mini;
+                }else{
+                    result = $values === null ? menuConfig['web']?.full : menuConfig['web']?.mini;
+                }
+            }
+        }        
+        return result;        
+    }
+);
+
+const isMobile = () => window.matchMedia("(max-width: 767px)");
+

package/components/textField/TextField.svelte.d.ts

@@ -4,10 +4,10 @@
 export default class TextField extends SvelteComponentTyped<{
     className: any;
     feedback: any;
+    size?: string | undefined;
     disabled?: boolean | undefined;
     invalid?: boolean | undefined;
     type?: string | undefined;
-    size?: string | undefined;
     name?: string | undefined;
     placeholder?: string | undefined;
     value?: string | undefined;
@@ -29,10 +29,10 @@ declare const __propDef: {
     props: {
         className: any;
         feedback: any;
+        size?: string | undefined;
         disabled?: boolean | undefined;
         invalid?: boolean | undefined;
         type?: string | undefined;
-        size?: string | undefined;
         name?: string | undefined;
         placeholder?: string | undefined;
         value?: string | undefined;

package/index.d.ts

@@ -42,8 +42,15 @@ import CardBody from './components/EnkiCard/CardBody.svelte';
 import CardFooter from './components/EnkiCard/CardFooter.svelte';
 import CardLink from './components/EnkiCard/CardLink.svelte';
 import EnkiSidebar from './components/EnkiSidbar/EnkiSidebar.svelte';
-import NavItem from './components/EnkiSidbar/NavIteam.svelte';
+import NavItem from './components/EnkiSidbar/NavItem.svelte';
 import NavIcon from './components/EnkiSidbar/NavIcon.svelte';
 import NavLink from './components/EnkiSidbar/NavLink.svelte';
-export { Button, ButtonFilter, FilterOption, TextField, Card, Tooltip, Tab, Icon, Modal, ModalBody, ModalFooter, ModalHeader, Header, Dropdown, DropdownItem, Badge, Alert, Pagination, RadioButton, Accordion, AccordionItem, Switch, Checkbox, Breadcrumb, CardIcon, CardiconTitle, CardiconBody, CardiconSubtitle, EnkiTable, TableBody, TableCell, TableRow, TableHead, TableHeadCell, EnkiCard, CardBody, CardTitle, CardSubtitle, CardText, CardLink, CardFooter, EnkiSidebar, NavItem, NavIcon, NavLink, };
-export default Layout;
+import Page from "./components/lay-out/Page.svelte";
+import MainMenuHead from "./components/lay-out/MainMenuHead.svelte";
+import Footer from "./components/lay-out/Footer.svelte";
+import { i18nInit } from "./components/i18n/i18n";
+import { menuTypeStore } from "./components/lay-out/menuStore.js";
+import { derivedStore } from "./components/lay-out/menuStore.js";
+import { smallMenuwidth } from "./components/lay-out/menuStore.js";
+export { Button, ButtonFilter, FilterOption, TextField, Card, Tooltip, Tab, Icon, Modal, ModalBody, ModalFooter, ModalHeader, Header, Dropdown, DropdownItem, Badge, Alert, Pagination, RadioButton, Accordion, AccordionItem, Switch, Checkbox, Breadcrumb, CardIcon, CardiconTitle, CardiconBody, CardiconSubtitle, EnkiTable, TableBody, TableCell, TableRow, TableHead, TableHeadCell, EnkiCard, CardBody, CardTitle, CardSubtitle, CardText, CardLink, CardFooter, EnkiSidebar, NavItem, NavIcon, NavLink, Layout, Page, MainMenuHead, Footer, menuTypeStore, derivedStore, smallMenuwidth, };
+export default i18nInit;

package/index.js

@@ -43,8 +43,15 @@ import CardBody from './components/EnkiCard/CardBody.svelte';
 import CardFooter from './components/EnkiCard/CardFooter.svelte';
 import CardLink from './components/EnkiCard/CardLink.svelte';
 import EnkiSidebar from './components/EnkiSidbar/EnkiSidebar.svelte';
-import NavItem from './components/EnkiSidbar/NavIteam.svelte';
+import NavItem from './components/EnkiSidbar/NavItem.svelte';
 import NavIcon from './components/EnkiSidbar/NavIcon.svelte';
 import NavLink from './components/EnkiSidbar/NavLink.svelte';
-export { Button, ButtonFilter, FilterOption, TextField, Card, Tooltip, Tab, Icon, Modal, ModalBody, ModalFooter, ModalHeader, Header, Dropdown, DropdownItem, Badge, Alert, Pagination, RadioButton, Accordion, AccordionItem, Switch, Checkbox, Breadcrumb, CardIcon, CardiconTitle, CardiconBody, CardiconSubtitle, EnkiTable, TableBody, TableCell, TableRow, TableHead, TableHeadCell, EnkiCard, CardBody, CardTitle, CardSubtitle, CardText, CardLink, CardFooter, EnkiSidebar, NavItem, NavIcon, NavLink, };
-export default Layout;
+import Page from "./components/lay-out/Page.svelte";
+import MainMenuHead from "./components/lay-out/MainMenuHead.svelte";
+import Footer from "./components/lay-out/Footer.svelte";
+import { i18nInit } from "./components/i18n/i18n";
+import { menuTypeStore } from "./components/lay-out/menuStore.js";
+import { derivedStore } from "./components/lay-out/menuStore.js";
+import { smallMenuwidth } from "./components/lay-out/menuStore.js";
+export { Button, ButtonFilter, FilterOption, TextField, Card, Tooltip, Tab, Icon, Modal, ModalBody, ModalFooter, ModalHeader, Header, Dropdown, DropdownItem, Badge, Alert, Pagination, RadioButton, Accordion, AccordionItem, Switch, Checkbox, Breadcrumb, CardIcon, CardiconTitle, CardiconBody, CardiconSubtitle, EnkiTable, TableBody, TableCell, TableRow, TableHead, TableHeadCell, EnkiCard, CardBody, CardTitle, CardSubtitle, CardText, CardLink, CardFooter, EnkiSidebar, NavItem, NavIcon, NavLink, Layout, Page, MainMenuHead, Footer, menuTypeStore, derivedStore, smallMenuwidth, };
+export default i18nInit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enki-tek/fms-web-components",
-  "version": "0.0.38",
+  "version": "0.0.40",
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",
@@ -91,7 +91,7 @@
     "./components/EnkiCard/EnkiCard.svelte": "./components/EnkiCard/EnkiCard.svelte",
     "./components/EnkiSidbar/EnkiSidebar.svelte": "./components/EnkiSidbar/EnkiSidebar.svelte",
     "./components/EnkiSidbar/NavIcon.svelte": "./components/EnkiSidbar/NavIcon.svelte",
-    "./components/EnkiSidbar/NavIteam.svelte": "./components/EnkiSidbar/NavIteam.svelte",
+    "./components/EnkiSidbar/NavItem.svelte": "./components/EnkiSidbar/NavItem.svelte",
     "./components/EnkiSidbar/NavLink.svelte": "./components/EnkiSidbar/NavLink.svelte",
     "./components/EnkiSidbar/Sidebar.scss": "./components/EnkiSidbar/Sidebar.scss",
     "./components/EnkiTable/EnkiTable.svelte": "./components/EnkiTable/EnkiTable.svelte",
@@ -135,10 +135,14 @@
     "./components/Tooltip/Tooltip.stories": "./components/Tooltip/Tooltip.stories.js",
     "./components/Tooltip/Tooltip.svelte": "./components/Tooltip/Tooltip.svelte",
     "./components/common.scss": "./components/common.scss",
+    "./components/i18n/ShiftLanguage.svelte": "./components/i18n/ShiftLanguage.svelte",
+    "./components/i18n/i18n": "./components/i18n/i18n.js",
     "./components/lay-out/Footer.svelte": "./components/lay-out/Footer.svelte",
-    "./components/lay-out/LayOut.spec": "./components/lay-out/LayOut.spec.js",
     "./components/lay-out/LayOut.stories": "./components/lay-out/LayOut.stories.js",
     "./components/lay-out/LayOut.svelte": "./components/lay-out/LayOut.svelte",
+    "./components/lay-out/MainMenuHead.svelte": "./components/lay-out/MainMenuHead.svelte",
+    "./components/lay-out/Page.svelte": "./components/lay-out/Page.svelte",
+    "./components/lay-out/menuStore": "./components/lay-out/menuStore.js",
     "./components/textField/TextField.scss": "./components/textField/TextField.scss",
     "./components/textField/TextField.stories": "./components/textField/TextField.stories.js",
     "./components/textField/TextField.svelte": "./components/textField/TextField.svelte",

package/components/EnkiSidbar/NavIteam.svelte.d.ts

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  NavIteamProps */
-/** @typedef {typeof __propDef.events}  NavIteamEvents */
-/** @typedef {typeof __propDef.slots}  NavIteamSlots */
-export default class NavIteam extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type NavIteamProps = typeof __propDef.props;
-export type NavIteamEvents = typeof __propDef.events;
-export type NavIteamSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

package/components/lay-out/LayOut.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/components/lay-out/LayOut.spec.js

@@ -1,10 +0,0 @@
-import LayOut from "./LayOut.svelte";
-import { render, cleanup } from '@testing-library/svelte';
-beforeEach(cleanup);
-describe('LayOut', () => {
-    test('should render correctly', () => {
-        const { container } = render(LayOut);
-        const component = container.querySelector('.wrapper');
-        expect(component && component.className).toBe('wrapper');
-    });
-});