@enki-tek/fms-web-components 0.0.37 → 0.0.39

package/components/EnkiSidbar/Sidebar.scss

@@ -0,0 +1,128 @@
+// Importing variables from variable.scss file
+@import './../variable.scss';
+
+%common-styles {
+  color: $white;
+}
+
+%commom-background-line {
+  background: $white;
+}
+
+%sidebar-styles {
+  background: $primary-dark;
+}
+
+%active-styles {
+  border-left: 2px solid $white;
+  background: $blue-700;
+}
+
+%common-li-styles {
+  display: flex;
+  padding: 15px 32px;
+  align-items: center;
+  gap: 8px;
+}
+
+.row {
+  --bs-gutter-x: 0rem;
+}
+
+.icon-sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 88px;
+  background: $primary-dark;
+}
+
+.line {
+  width: 88px;
+  height: 1px;
+  @extend %commom-background-line;
+}
+
+.icon-btn {
+  padding: 20px 27px;
+}
+
+.icon-sidebar-content .toggle-button {
+  @extend %common-styles;
+}
+
+.icons {
+  @extend %common-styles;
+  @extend %common-li-styles;
+  padding: 16px 32px;
+  flex-direction: column;
+  gap: 37px;
+
+
+}
+
+.icon-sidebar-content ul .active {
+  @extend %active-styles;
+}
+
+//sidbar open class
+
+:global(.offcanvas-body) {
+  @extend %sidebar-styles;
+  padding: 0rem 0rem;
+}
+
+.offcanvas-title {
+  color: $white;
+  font-size: 28px;
+}
+
+:global(.flex-column)  {
+  @extend %common-styles;
+}
+
+.sidebar-open-ul {
+  @extend %common-styles;
+}
+
+
+.nav-item {
+  @extend %common-li-styles;
+  @extend %common-styles;
+  padding: 18px 32px;
+}
+
+.nav-item .item-name {
+  line-height: 22px;
+}
+
+.nav .nav-item.active {
+  @extend %active-styles;
+}
+
+.toggle-button {
+  background-color: transparent;
+  border: $white;
+  cursor: pointer;
+}
+
+.material-icons {
+  font-size: 16px;
+  color: $white;
+}
+
+:global(.offcanvas.offcanvas-start) {
+  width: 274px;
+  border-right: none;
+}
+
+.offcanvas-header {
+  padding: 1.5rem 1.5rem;
+}
+
+.line-open {
+  width: 274px;
+  height: 1px;
+  @extend %commom-background-line;
+}

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/RadioButton/RadioButton.svelte

@@ -7,10 +7,14 @@
         { value:2, label:'orange'},
         { value:3, label:'pinapple',disabled:true}    
     ]
-    let selected = options[0].value;     
+    export let value ;
+    export let label ;
+    export let disabled ;
+    export let selected = options[0].value;   
+    export let name = '';  
 </script>
 
-{#each options as { value, label, disabled }}
+<!-- {#each options as { value, label, disabled }} -->
     <Input 
         type="radio" 
         class={`custom-radio form-check-inline form-control-${size}`}
@@ -18,8 +22,9 @@
         bind:group={selected} 
         disabled={disabled} 
         label={label.charAt(0).toUpperCase() + label.slice(1)} 
+        name = {name}
     />
-{/each}
+<!-- {/each} -->
 
 <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

package/components/RadioButton/RadioButton.svelte.d.ts

@@ -2,7 +2,11 @@
 /** @typedef {typeof __propDef.events}  RadioButtonEvents */
 /** @typedef {typeof __propDef.slots}  RadioButtonSlots */
 export default class RadioButton extends SvelteComponentTyped<{
+    disabled: any;
+    label: any;
+    value: any;
     size?: string | undefined;
+    name?: string | undefined;
     options?: ({
         value: number;
         label: string;
@@ -12,6 +16,7 @@ export default class RadioButton extends SvelteComponentTyped<{
         label: string;
         disabled: boolean;
     })[] | undefined;
+    selected?: number | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -22,7 +27,11 @@ export type RadioButtonSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        disabled: any;
+        label: any;
+        value: any;
         size?: string | undefined;
+        name?: string | undefined;
         options?: ({
             value: number;
             label: string;
@@ -32,6 +41,7 @@ declare const __propDef: {
             label: string;
             disabled: boolean;
         })[] | undefined;
+        selected?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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,31 @@
+<script>
+    import { Col, Row, Button } from "sveltestrap";
+    import { menuTypeStore } from './menuStore.js';
+
+    
+    const setState = () =>{
+		menuTypeStore.set($menuTypeStore ?  '': 'show');
+	}
+
+    
+    
+</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">
+                        <a href="{"javascript:{}"}" on:click={setState }><i class="material-icons">menu</i></a>		
+                        <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,27 @@
+/** @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>;
+}, {
+    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: {
+        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)");
+