@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/Accordion/Accordion.svelte CHANGED
@@ -29,7 +29,7 @@ export let stayOpen = true;
29
29
  background-color: #ffffff;
30
30
  }
31
31
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
32
- background-color: #3AC82E !important;
32
+ background-color: #3AC82E;
33
33
  }
34
34
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
35
35
  background-color: #00A855;
package/components/Accordion/AccordionItem.svelte CHANGED
@@ -30,7 +30,7 @@ export let header;
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/Badge/Badge.svelte CHANGED
@@ -35,7 +35,7 @@ if (badgeConfig.hasOwnProperty(config)) {
35
35
  background-color: #ffffff;
36
36
  }
37
37
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
38
- background-color: #3AC82E !important;
38
+ background-color: #3AC82E;
39
39
  }
40
40
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
41
41
  background-color: #00A855;
package/components/Breadcrumb/Breadcrumb.svelte CHANGED
@@ -45,7 +45,7 @@ let length = newBreadcrumbs.length;
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/Button/Button.svelte CHANGED
@@ -576,7 +576,7 @@
576
576
  background-color: #ffffff;
577
577
  }
578
578
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
579
- background-color: #3AC82E !important;
579
+ background-color: #3AC82E;
580
580
  }
581
581
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
582
582
  background-color: #00A855;
package/components/Button/ButtonFilter.scss CHANGED
@@ -1,73 +1,75 @@
1
1
  @import './../variable.scss';
2
2
 
3
- .efilterbtn {
4
- // Default styles for button
5
- background-color: $primary-dark;
6
- color: $white;
7
- border: none;
8
- cursor: pointer;
9
- border-radius: 4px;
10
- padding: 0px 24px;
11
- height: $medium-height;
12
- box-shadow: $lowShadow;
13
- border: none;
14
- outline: 1px solid $white;
15
- font-family: Roboto;
16
- }
17
-
18
- //small button
19
- .efilterbtn-small {
20
- height: $small-height;
21
- font-size: 12px;
22
- display: flex;
23
- justify-content: center;
24
- align-items: center;
25
- font-family: Roboto;
26
-
27
- i {
28
- font-size: 12px;
29
- }
30
- }
31
-
32
- //medium button
33
- .efilterbtn-medium {
34
- padding: 0px 24px;
35
- height: $medium-height;
36
- display: flex;
37
- justify-content: center;
38
- align-items: center;
39
- font-size: 16px;
40
- font-family: Roboto;
41
-
42
- i {
43
- font-size: 16px;
44
- }
45
- }
46
-
47
- //large button
48
- .ebtn-large {
49
- height: $large-height;
50
- display: flex;
51
- justify-content: center;
52
- align-items: center;
53
- font-size: 16px;
54
- font-family: Roboto;
55
-
56
- i {
57
- font-size: 16px;
58
- }
59
- }
60
-
61
- .filter-button .dropdown-menu{
62
- min-width: 7rem;
63
- display: flex;
64
- flex-direction: column;
65
- padding: 0;
66
- }
67
- .filter-button-menu{
68
- text-align: center;
69
- font-family: $bodyFonts;
70
- }
71
- :global(.custom-icon-filterbtn){
72
- font-size: 12px;
73
- }
3
+ .efilter-btn {
4
+ // Default styles for button
5
+ background-color: $primary-dark;
6
+ color: $white;
7
+ border: none;
8
+ cursor: pointer;
9
+ border-radius: 4px;
10
+ padding: 0px 24px;
11
+ height: $medium-height;
12
+ box-shadow: $lowShadow;
13
+ border: none;
14
+ outline: 1px solid $white;
15
+ font-family: Roboto;
16
+ }
17
+
18
+ //small button
19
+ .efilter-btn-small {
20
+ height: $small-height;
21
+ font-size: 12px;
22
+ display: flex;
23
+ justify-content: center;
24
+ align-items: center;
25
+ font-family: Roboto;
26
+
27
+ i {
28
+ font-size: 12px;
29
+ }
30
+ }
31
+
32
+ //medium button
33
+ .efilter-btn-medium {
34
+ padding: 0px 24px;
35
+ height: $medium-height;
36
+ display: flex;
37
+ justify-content: center;
38
+ align-items: center;
39
+ font-size: 16px;
40
+ font-family: Roboto;
41
+
42
+ i {
43
+ font-size: 16px;
44
+ }
45
+ }
46
+
47
+ //large button
48
+ .ebtn-large {
49
+ height: $large-height;
50
+ display: flex;
51
+ justify-content: center;
52
+ align-items: center;
53
+ font-size: 16px;
54
+ font-family: Roboto;
55
+
56
+ i {
57
+ font-size: 16px;
58
+ }
59
+ }
60
+
61
+ .filter-button .dropdown-menu {
62
+ min-width: 7rem;
63
+ display: flex;
64
+ flex-direction: column;
65
+ padding: 0;
66
+ }
67
+
68
+ .filter-button-menu {
69
+ text-align: center;
70
+ font-family: $bodyFonts;
71
+ }
72
+
73
+ :global(.custom-icon-filterbtn) {
74
+ font-size: 12px;
75
+ }
package/components/Button/ButtonFilter.svelte CHANGED
@@ -1,33 +1,24 @@
1
1
  <script>
2
- import Icon from "../Icon/Icon.svelte";
3
- export let className;
4
- export let size='';
5
- export let label='search in'
2
+ import Icon from '../Icon/Icon.svelte';
3
+ export let className;
4
+ export let size = '';
5
+ export let label = 'search in';
6
6
  export let isOpen = false;
7
- let buttonStyles = ['efilterbtn',className,'dropdown-toggle',`efilterbtn-${size}`];
8
-
7
+ let buttonStyles = ['efilter-btn', className, `efilter-btn-${size}`];
9
8
  </script>
10
9
 
11
-
12
10
  <form class="d-flex filter-component-section">
13
- <div class="dropdown filter-button">
14
- <button
15
- class={buttonStyles.join(' ')} on:click on:focus
16
- type="button"
17
- id="dropdownMenuButton"
18
- on:click={() => (isOpen = !isOpen)}
19
- >
20
- {label}
21
- <Icon iconName='caret-down-fill' className='custom-icon-filterbtn'></Icon>
22
-
23
- </button>
24
-
25
- <ul class="dropdown-menu" aria-labelledby="">
26
- {#if isOpen}
27
- <slot></slot>
28
- {/if}
29
- </ul>
30
- </div>
11
+ <div class="dropdown filter-button">
12
+ <button class={buttonStyles.join(' ')} on:click on:focus type="button">
13
+ {label}
14
+ <Icon iconName="caret-down-fill" className="custom-icon-filterbtn" />
15
+ </button>
16
+ {#if isOpen}
17
+ <ul class="dropdown-menu" aria-labelledby="">
18
+ <slot />
19
+ </ul>
20
+ {/if}
21
+ </div>
31
22
  </form>
32
23
 
33
24
  <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@@ -36,7 +27,7 @@
36
27
  @import url(https://fonts.googleapis.com/icon?family=Material+Icons);
37
28
  @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");
38
29
  @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
39
- .efilterbtn {
30
+ .efilter-btn {
40
31
  background-color: #007FD8;
41
32
  color: #ffffff;
42
33
  border: none;
@@ -49,7 +40,7 @@
49
40
  outline: 1px solid #ffffff;
50
41
  font-family: Roboto;
51
42
  }
52
- .efilterbtn-small {
43
+ .efilter-btn-small {
53
44
  height: 32px;
54
45
  font-size: 12px;
55
46
  display: flex;
@@ -57,10 +48,10 @@
57
48
  align-items: center;
58
49
  font-family: Roboto;
59
50
  }
60
- .efilterbtn-small i {
51
+ .efilter-btn-small i {
61
52
  font-size: 12px;
62
53
  }
63
- .efilterbtn-medium {
54
+ .efilter-btn-medium {
64
55
  padding: 0px 24px;
65
56
  height: 42px;
66
57
  display: flex;
@@ -69,7 +60,7 @@
69
60
  font-size: 16px;
70
61
  font-family: Roboto;
71
62
  }
72
- .efilterbtn-medium i {
63
+ .efilter-btn-medium i {
73
64
  font-size: 16px;
74
65
  }
75
66
  .ebtn-large {
@@ -103,7 +94,7 @@
103
94
  background-color: #ffffff;
104
95
  }
105
96
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
106
- background-color: #3AC82E !important;
97
+ background-color: #3AC82E;
107
98
  }
108
99
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
109
100
  background-color: #00A855;
@@ -657,5 +648,4 @@
657
648
  font-style: normal;
658
649
  font-weight: 400;
659
650
  line-height: normal;
660
- }</style>
661
-
651
+ }</style>
package/components/Button/FilterOption.svelte CHANGED
@@ -13,7 +13,7 @@
13
13
  @import url(https://fonts.googleapis.com/icon?family=Material+Icons);
14
14
  @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");
15
15
  @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
16
- .efilterbtn {
16
+ .efilter-btn {
17
17
  background-color: #007FD8;
18
18
  color: #ffffff;
19
19
  border: none;
@@ -26,7 +26,7 @@
26
26
  outline: 1px solid #ffffff;
27
27
  font-family: Roboto;
28
28
  }
29
- .efilterbtn-small {
29
+ .efilter-btn-small {
30
30
  height: 32px;
31
31
  font-size: 12px;
32
32
  display: flex;
@@ -34,10 +34,10 @@
34
34
  align-items: center;
35
35
  font-family: Roboto;
36
36
  }
37
- .efilterbtn-small i {
37
+ .efilter-btn-small i {
38
38
  font-size: 12px;
39
39
  }
40
- .efilterbtn-medium {
40
+ .efilter-btn-medium {
41
41
  padding: 0px 24px;
42
42
  height: 42px;
43
43
  display: flex;
@@ -46,7 +46,7 @@
46
46
  font-size: 16px;
47
47
  font-family: Roboto;
48
48
  }
49
- .efilterbtn-medium i {
49
+ .efilter-btn-medium i {
50
50
  font-size: 16px;
51
51
  }
52
52
  .ebtn-large {
@@ -80,7 +80,7 @@
80
80
  background-color: #ffffff;
81
81
  }
82
82
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
83
- background-color: #3AC82E !important;
83
+ background-color: #3AC82E;
84
84
  }
85
85
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
86
86
  background-color: #00A855;
package/components/CardIcon/CardIcon.svelte CHANGED
@@ -112,7 +112,7 @@ if (titleConfig.includes(titleLocation)) {
112
112
  background-color: #ffffff;
113
113
  }
114
114
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
115
- background-color: #3AC82E !important;
115
+ background-color: #3AC82E;
116
116
  }
117
117
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
118
118
  background-color: #00A855;
package/components/CardIcon/CardiconBody.svelte CHANGED
@@ -107,7 +107,7 @@
107
107
  background-color: #ffffff;
108
108
  }
109
109
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
110
- background-color: #3AC82E !important;
110
+ background-color: #3AC82E;
111
111
  }
112
112
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
113
113
  background-color: #00A855;
package/components/CardIcon/CardiconSubtitle.svelte CHANGED
@@ -116,7 +116,7 @@
116
116
  background-color: #ffffff;
117
117
  }
118
118
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
119
- background-color: #3AC82E !important;
119
+ background-color: #3AC82E;
120
120
  }
121
121
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
122
122
  background-color: #00A855;
package/components/CardIcon/CardiconTitle.svelte CHANGED
@@ -116,7 +116,7 @@
116
116
  background-color: #ffffff;
117
117
  }
118
118
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
119
- background-color: #3AC82E !important;
119
+ background-color: #3AC82E;
120
120
  }
121
121
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
122
122
  background-color: #00A855;
package/components/CheckBox/Checkbox.svelte CHANGED
@@ -65,7 +65,7 @@
65
65
  background-color: #ffffff;
66
66
  }
67
67
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
68
- background-color: #3AC82E !important;
68
+ background-color: #3AC82E;
69
69
  }
70
70
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
71
71
  background-color: #00A855;
package/components/Dropdown/Dropdown.svelte CHANGED
@@ -92,7 +92,7 @@ export let title = "Dropdowns";
92
92
  background-color: #ffffff;
93
93
  }
94
94
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
95
- background-color: #3AC82E !important;
95
+ background-color: #3AC82E;
96
96
  }
97
97
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
98
98
  background-color: #00A855;
package/components/Dropdown/DropdownItem.svelte CHANGED
@@ -85,7 +85,7 @@ export let disabled;
85
85
  background-color: #ffffff;
86
86
  }
87
87
  :global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
88
- background-color: #3AC82E !important;
88
+ background-color: #3AC82E;
89
89
  }
90
90
  :global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
91
91
  background-color: #00A855;