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

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/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/index.d.ts

@@ -41,5 +41,9 @@ import CardText from './components/EnkiCard/CardText.svelte';
 import CardBody from './components/EnkiCard/CardBody.svelte';
 import CardFooter from './components/EnkiCard/CardFooter.svelte';
 import CardLink from './components/EnkiCard/CardLink.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 };
+import EnkiSidebar from './components/EnkiSidbar/EnkiSidebar.svelte';
+import NavItem from './components/EnkiSidbar/NavIteam.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;

package/index.js

@@ -42,5 +42,9 @@ import CardText from './components/EnkiCard/CardText.svelte';
 import CardBody from './components/EnkiCard/CardBody.svelte';
 import CardFooter from './components/EnkiCard/CardFooter.svelte';
 import CardLink from './components/EnkiCard/CardLink.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 };
+import EnkiSidebar from './components/EnkiSidbar/EnkiSidebar.svelte';
+import NavItem from './components/EnkiSidbar/NavIteam.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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enki-tek/fms-web-components",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",
@@ -89,6 +89,11 @@
     "./components/EnkiCard/CardText.svelte": "./components/EnkiCard/CardText.svelte",
     "./components/EnkiCard/CardTitle.svelte": "./components/EnkiCard/CardTitle.svelte",
     "./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/NavLink.svelte": "./components/EnkiSidbar/NavLink.svelte",
+    "./components/EnkiSidbar/Sidebar.scss": "./components/EnkiSidbar/Sidebar.scss",
     "./components/EnkiTable/EnkiTable.svelte": "./components/EnkiTable/EnkiTable.svelte",
     "./components/EnkiTable/Table.scss": "./components/EnkiTable/Table.scss",
     "./components/EnkiTable/TableBody.svelte": "./components/EnkiTable/TableBody.svelte",