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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/components/Accordion/Accordion.svelte +1 -1
  2. package/components/Accordion/AccordionItem.svelte +1 -1
  3. package/components/Badge/Badge.svelte +1 -1
  4. package/components/Breadcrumb/Breadcrumb.svelte +1 -1
  5. package/components/Button/Button.svelte +1 -1
  6. package/components/Button/ButtonFilter.scss +73 -71
  7. package/components/Button/ButtonFilter.svelte +23 -33
  8. package/components/Button/FilterOption.svelte +6 -6
  9. package/components/CardIcon/CardIcon.svelte +1 -1
  10. package/components/CardIcon/CardiconBody.svelte +1 -1
  11. package/components/CardIcon/CardiconSubtitle.svelte +1 -1
  12. package/components/CardIcon/CardiconTitle.svelte +1 -1
  13. package/components/CheckBox/Checkbox.svelte +1 -1
  14. package/components/Dropdown/Dropdown.svelte +1 -1
  15. package/components/Dropdown/DropdownItem.svelte +1 -1
  16. package/components/EnkiSidbar/EnkiSidebar.svelte +695 -0
  17. package/components/EnkiSidbar/EnkiSidebar.svelte.d.ts +35 -0
  18. package/components/EnkiSidbar/NavIcon.svelte +647 -0
  19. package/components/EnkiSidbar/NavIcon.svelte.d.ts +31 -0
  20. package/components/EnkiSidbar/NavIteam.svelte +649 -0
  21. package/components/EnkiSidbar/NavIteam.svelte.d.ts +27 -0
  22. package/components/EnkiSidbar/NavLink.svelte +657 -0
  23. package/components/EnkiSidbar/NavLink.svelte.d.ts +31 -0
  24. package/components/EnkiSidbar/Sidebar.scss +128 -0
  25. package/components/Header/Header.svelte +1 -1
  26. package/components/ModalWindow/Modal.svelte +1 -1
  27. package/components/ModalWindow/ModalBody.svelte +1 -1
  28. package/components/ModalWindow/ModalFooter.svelte +1 -1
  29. package/components/ModalWindow/ModalHeader.svelte +1 -1
  30. package/components/Pagination/Pagination.svelte +1 -1
  31. package/components/RadioButton/RadioButton.svelte +9 -4
  32. package/components/RadioButton/RadioButton.svelte.d.ts +10 -0
  33. package/components/Sidebar/Sidebar.svelte +1 -1
  34. package/components/Switches/Switch.svelte +1 -1
  35. package/components/Tab/Tab.svelte +1 -1
  36. package/components/Tooltip/Tooltip.svelte +1 -1
  37. package/components/common.scss +1 -1
  38. package/components/textField/TextField.svelte +1 -1
  39. package/index.d.ts +5 -1
  40. package/index.js +5 -1
  41. package/package.json +6 -1
package/components/EnkiSidbar/Sidebar.scss ADDED
@@ -0,0 +1,128 @@
1
+ // Importing variables from variable.scss file
2
+ @import './../variable.scss';
3
+
4
+ %common-styles {
5
+ color: $white;
6
+ }
7
+
8
+ %commom-background-line {
9
+ background: $white;
10
+ }
11
+
12
+ %sidebar-styles {
13
+ background: $primary-dark;
14
+ }
15
+
16
+ %active-styles {
17
+ border-left: 2px solid $white;
18
+ background: $blue-700;
19
+ }
20
+
21
+ %common-li-styles {
22
+ display: flex;
23
+ padding: 15px 32px;
24
+ align-items: center;
25
+ gap: 8px;
26
+ }
27
+
28
+ .row {
29
+ --bs-gutter-x: 0rem;
30
+ }
31
+
32
+ .icon-sidebar {
33
+ position: fixed;
34
+ top: 0;
35
+ left: 0;
36
+ height: 100%;
37
+ width: 88px;
38
+ background: $primary-dark;
39
+ }
40
+
41
+ .line {
42
+ width: 88px;
43
+ height: 1px;
44
+ @extend %commom-background-line;
45
+ }
46
+
47
+ .icon-btn {
48
+ padding: 20px 27px;
49
+ }
50
+
51
+ .icon-sidebar-content .toggle-button {
52
+ @extend %common-styles;
53
+ }
54
+
55
+ .icons {
56
+ @extend %common-styles;
57
+ @extend %common-li-styles;
58
+ padding: 16px 32px;
59
+ flex-direction: column;
60
+ gap: 37px;
61
+
62
+
63
+ }
64
+
65
+ .icon-sidebar-content ul .active {
66
+ @extend %active-styles;
67
+ }
68
+
69
+ //sidbar open class
70
+
71
+ :global(.offcanvas-body) {
72
+ @extend %sidebar-styles;
73
+ padding: 0rem 0rem;
74
+ }
75
+
76
+ .offcanvas-title {
77
+ color: $white;
78
+ font-size: 28px;
79
+ }
80
+
81
+ :global(.flex-column) {
82
+ @extend %common-styles;
83
+ }
84
+
85
+ .sidebar-open-ul {
86
+ @extend %common-styles;
87
+ }
88
+
89
+
90
+ .nav-item {
91
+ @extend %common-li-styles;
92
+ @extend %common-styles;
93
+ padding: 18px 32px;
94
+ }
95
+
96
+ .nav-item .item-name {
97
+ line-height: 22px;
98
+ }
99
+
100
+ .nav .nav-item.active {
101
+ @extend %active-styles;
102
+ }
103
+
104
+ .toggle-button {
105
+ background-color: transparent;
106
+ border: $white;
107
+ cursor: pointer;
108
+ }
109
+
110
+ .material-icons {
111
+ font-size: 16px;
112
+ color: $white;
113
+ }
114
+
115
+ :global(.offcanvas.offcanvas-start) {
116
+ width: 274px;
117
+ border-right: none;
118
+ }
119
+
120
+ .offcanvas-header {
121
+ padding: 1.5rem 1.5rem;
122
+ }
123
+
124
+ .line-open {
125
+ width: 274px;
126
+ height: 1px;
127
+ @extend %commom-background-line;
128
+ }
package/components/Header/Header.svelte CHANGED
@@ -110,7 +110,7 @@
110
110
  background-color: #ffffff;
111
111
  }
112
112
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
113
- background-color: #3AC82E !important;
113
+ background-color: #3AC82E;
114
114
  }
115
115
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
116
116
  background-color: #00A855;
package/components/ModalWindow/Modal.svelte CHANGED
@@ -30,7 +30,7 @@
30
30
  background-color: #ffffff;
31
31
  }
32
32
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
33
- background-color: #3AC82E !important;
33
+ background-color: #3AC82E;
34
34
  }
35
35
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
36
36
  background-color: #00A855;
package/components/ModalWindow/ModalBody.svelte CHANGED
@@ -28,7 +28,7 @@
28
28
  background-color: #ffffff;
29
29
  }
30
30
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
31
- background-color: #3AC82E !important;
31
+ background-color: #3AC82E;
32
32
  }
33
33
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
34
34
  background-color: #00A855;
package/components/ModalWindow/ModalFooter.svelte CHANGED
@@ -26,7 +26,7 @@
26
26
  background-color: #ffffff;
27
27
  }
28
28
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
29
- background-color: #3AC82E !important;
29
+ background-color: #3AC82E;
30
30
  }
31
31
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
32
32
  background-color: #00A855;
package/components/ModalWindow/ModalHeader.svelte CHANGED
@@ -31,7 +31,7 @@
31
31
  background-color: #ffffff;
32
32
  }
33
33
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
34
- background-color: #3AC82E !important;
34
+ background-color: #3AC82E;
35
35
  }
36
36
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
37
37
  background-color: #00A855;
package/components/Pagination/Pagination.svelte CHANGED
@@ -153,7 +153,7 @@ function nextPage() {
153
153
  background-color: #ffffff;
154
154
  }
155
155
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
156
- background-color: #3AC82E !important;
156
+ background-color: #3AC82E;
157
157
  }
158
158
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
159
159
  background-color: #00A855;
package/components/RadioButton/RadioButton.svelte CHANGED
@@ -7,10 +7,14 @@
7
7
  { value:2, label:'orange'},
8
8
  { value:3, label:'pinapple',disabled:true}
9
9
  ]
10
- let selected = options[0].value;
10
+ export let value ;
11
+ export let label ;
12
+ export let disabled ;
13
+ export let selected = options[0].value;
14
+ export let name = '';
11
15
  </script>
12
16
 
13
- {#each options as { value, label, disabled }}
17
+ <!-- {#each options as { value, label, disabled }} -->
14
18
  <Input
15
19
  type="radio"
16
20
  class={`custom-radio form-check-inline form-control-${size}`}
@@ -18,8 +22,9 @@
18
22
  bind:group={selected}
19
23
  disabled={disabled}
20
24
  label={label.charAt(0).toUpperCase() + label.slice(1)}
25
+ name = {name}
21
26
  />
22
- {/each}
27
+ <!-- {/each} -->
23
28
 
24
29
  <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
25
30
  @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");
@@ -41,7 +46,7 @@
41
46
  background-color: #ffffff;
42
47
  }
43
48
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
44
- background-color: #3AC82E !important;
49
+ background-color: #3AC82E;
45
50
  }
46
51
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
47
52
  background-color: #00A855;
package/components/RadioButton/RadioButton.svelte.d.ts CHANGED
@@ -2,7 +2,11 @@
2
2
  /** @typedef {typeof __propDef.events} RadioButtonEvents */
3
3
  /** @typedef {typeof __propDef.slots} RadioButtonSlots */
4
4
  export default class RadioButton extends SvelteComponentTyped<{
5
+ disabled: any;
6
+ label: any;
7
+ value: any;
5
8
  size?: string | undefined;
9
+ name?: string | undefined;
6
10
  options?: ({
7
11
  value: number;
8
12
  label: string;
@@ -12,6 +16,7 @@ export default class RadioButton extends SvelteComponentTyped<{
12
16
  label: string;
13
17
  disabled: boolean;
14
18
  })[] | undefined;
19
+ selected?: number | undefined;
15
20
  }, {
16
21
  [evt: string]: CustomEvent<any>;
17
22
  }, {}> {
@@ -22,7 +27,11 @@ export type RadioButtonSlots = typeof __propDef.slots;
22
27
  import { SvelteComponentTyped } from "svelte";
23
28
  declare const __propDef: {
24
29
  props: {
30
+ disabled: any;
31
+ label: any;
32
+ value: any;
25
33
  size?: string | undefined;
34
+ name?: string | undefined;
26
35
  options?: ({
27
36
  value: number;
28
37
  label: string;
@@ -32,6 +41,7 @@ declare const __propDef: {
32
41
  label: string;
33
42
  disabled: boolean;
34
43
  })[] | undefined;
44
+ selected?: number | undefined;
35
45
  };
36
46
  events: {
37
47
  [evt: string]: CustomEvent<any>;
package/components/Sidebar/Sidebar.svelte CHANGED
@@ -163,7 +163,7 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
163
163
  background-color: #ffffff;
164
164
  }
165
165
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
166
- background-color: #3AC82E !important;
166
+ background-color: #3AC82E;
167
167
  }
168
168
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
169
169
  background-color: #00A855;
package/components/Switches/Switch.svelte CHANGED
@@ -38,7 +38,7 @@
38
38
  background-color: #ffffff;
39
39
  }
40
40
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
41
- background-color: #3AC82E !important;
41
+ background-color: #3AC82E;
42
42
  }
43
43
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
44
44
  background-color: #00A855;
package/components/Tab/Tab.svelte CHANGED
@@ -58,7 +58,7 @@ export let tabs = [
58
58
  background-color: #ffffff;
59
59
  }
60
60
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
61
- background-color: #3AC82E !important;
61
+ background-color: #3AC82E;
62
62
  }
63
63
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
64
64
  background-color: #00A855;
package/components/Tooltip/Tooltip.svelte CHANGED
@@ -45,7 +45,7 @@ export let label = "";
45
45
  background-color: #ffffff;
46
46
  }
47
47
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
48
- background-color: #3AC82E !important;
48
+ background-color: #3AC82E;
49
49
  }
50
50
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
51
51
  background-color: #00A855;
package/components/common.scss CHANGED
@@ -38,7 +38,7 @@
38
38
  }
39
39
 
40
40
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
41
- background-color: $secondary !important;
41
+ background-color: $secondary;
42
42
  }
43
43
 
44
44
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
package/components/textField/TextField.svelte CHANGED
@@ -67,7 +67,7 @@
67
67
  background-color: #ffffff;
68
68
  }
69
69
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
70
- background-color: #3AC82E !important;
70
+ background-color: #3AC82E;
71
71
  }
72
72
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
73
73
  background-color: #00A855;
package/index.d.ts CHANGED
@@ -41,5 +41,9 @@ import CardText from './components/EnkiCard/CardText.svelte';
41
41
  import CardBody from './components/EnkiCard/CardBody.svelte';
42
42
  import CardFooter from './components/EnkiCard/CardFooter.svelte';
43
43
  import CardLink from './components/EnkiCard/CardLink.svelte';
44
- 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 };
44
+ import EnkiSidebar from './components/EnkiSidbar/EnkiSidebar.svelte';
45
+ import NavItem from './components/EnkiSidbar/NavIteam.svelte';
46
+ import NavIcon from './components/EnkiSidbar/NavIcon.svelte';
47
+ import NavLink from './components/EnkiSidbar/NavLink.svelte';
48
+ 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, };
45
49
  export default Layout;
package/index.js CHANGED
@@ -42,5 +42,9 @@ import CardText from './components/EnkiCard/CardText.svelte';
42
42
  import CardBody from './components/EnkiCard/CardBody.svelte';
43
43
  import CardFooter from './components/EnkiCard/CardFooter.svelte';
44
44
  import CardLink from './components/EnkiCard/CardLink.svelte';
45
- 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 };
45
+ import EnkiSidebar from './components/EnkiSidbar/EnkiSidebar.svelte';
46
+ import NavItem from './components/EnkiSidbar/NavIteam.svelte';
47
+ import NavIcon from './components/EnkiSidbar/NavIcon.svelte';
48
+ import NavLink from './components/EnkiSidbar/NavLink.svelte';
49
+ 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, };
46
50
  export default Layout;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@enki-tek/fms-web-components",
3
- "version": "0.0.36",
3
+ "version": "0.0.38",
4
4
  "devDependencies": {
5
5
  "@storybook/addon-essentials": "^7.6.14",
6
6
  "@storybook/addon-interactions": "^7.6.14",
@@ -89,6 +89,11 @@
89
89
  "./components/EnkiCard/CardText.svelte": "./components/EnkiCard/CardText.svelte",
90
90
  "./components/EnkiCard/CardTitle.svelte": "./components/EnkiCard/CardTitle.svelte",
91
91
  "./components/EnkiCard/EnkiCard.svelte": "./components/EnkiCard/EnkiCard.svelte",
92
+ "./components/EnkiSidbar/EnkiSidebar.svelte": "./components/EnkiSidbar/EnkiSidebar.svelte",
93
+ "./components/EnkiSidbar/NavIcon.svelte": "./components/EnkiSidbar/NavIcon.svelte",
94
+ "./components/EnkiSidbar/NavIteam.svelte": "./components/EnkiSidbar/NavIteam.svelte",
95
+ "./components/EnkiSidbar/NavLink.svelte": "./components/EnkiSidbar/NavLink.svelte",
96
+ "./components/EnkiSidbar/Sidebar.scss": "./components/EnkiSidbar/Sidebar.scss",
92
97
  "./components/EnkiTable/EnkiTable.svelte": "./components/EnkiTable/EnkiTable.svelte",
93
98
  "./components/EnkiTable/Table.scss": "./components/EnkiTable/Table.scss",
94
99
  "./components/EnkiTable/TableBody.svelte": "./components/EnkiTable/TableBody.svelte",