@enki-tek/fms-web-components 0.0.35 → 0.0.36
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.
- package/components/Button/ButtonFilter.scss +6 -0
- package/components/Button/ButtonFilter.svelte +19 -7
- package/components/Button/ButtonFilter.svelte.d.ts +2 -0
- package/components/Button/FilterOption.svelte +17 -4
- package/components/CheckBox/Checkbox.svelte.d.ts +2 -2
- package/components/ModalWindow/Modal.svelte.d.ts +2 -2
- package/components/textField/TextField.svelte.d.ts +2 -2
- package/package.json +1 -1
|
@@ -60,8 +60,14 @@
|
|
|
60
60
|
|
|
61
61
|
.filter-button .dropdown-menu{
|
|
62
62
|
min-width: 7rem;
|
|
63
|
+
display: flex;
|
|
64
|
+
flex-direction: column;
|
|
65
|
+
padding: 0;
|
|
63
66
|
}
|
|
64
67
|
.filter-button-menu{
|
|
65
68
|
text-align: center;
|
|
66
69
|
font-family: $bodyFonts;
|
|
70
|
+
}
|
|
71
|
+
:global(.custom-icon-filterbtn){
|
|
72
|
+
font-size: 12px;
|
|
67
73
|
}
|
|
@@ -1,26 +1,31 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
|
|
2
|
+
import Icon from "../Icon/Icon.svelte";
|
|
3
3
|
export let className;
|
|
4
4
|
export let size='';
|
|
5
5
|
export let label='search in'
|
|
6
|
-
|
|
6
|
+
export let isOpen = false;
|
|
7
7
|
let buttonStyles = ['efilterbtn',className,'dropdown-toggle',`efilterbtn-${size}`];
|
|
8
8
|
|
|
9
9
|
</script>
|
|
10
10
|
|
|
11
|
+
|
|
11
12
|
<form class="d-flex filter-component-section">
|
|
12
13
|
<div class="dropdown filter-button">
|
|
13
14
|
<button
|
|
14
15
|
class={buttonStyles.join(' ')} on:click on:focus
|
|
15
16
|
type="button"
|
|
16
17
|
id="dropdownMenuButton"
|
|
17
|
-
|
|
18
|
-
aria-expanded="false"
|
|
18
|
+
on:click={() => (isOpen = !isOpen)}
|
|
19
19
|
>
|
|
20
20
|
{label}
|
|
21
|
+
<Icon iconName='caret-down-fill' className='custom-icon-filterbtn'></Icon>
|
|
22
|
+
|
|
21
23
|
</button>
|
|
22
|
-
|
|
23
|
-
|
|
24
|
+
|
|
25
|
+
<ul class="dropdown-menu" aria-labelledby="">
|
|
26
|
+
{#if isOpen}
|
|
27
|
+
<slot></slot>
|
|
28
|
+
{/if}
|
|
24
29
|
</ul>
|
|
25
30
|
</div>
|
|
26
31
|
</form>
|
|
@@ -80,11 +85,17 @@
|
|
|
80
85
|
}
|
|
81
86
|
.filter-button .dropdown-menu {
|
|
82
87
|
min-width: 7rem;
|
|
88
|
+
display: flex;
|
|
89
|
+
flex-direction: column;
|
|
90
|
+
padding: 0;
|
|
83
91
|
}
|
|
84
92
|
.filter-button-menu {
|
|
85
93
|
text-align: center;
|
|
86
94
|
font-family: Roboto;
|
|
87
95
|
}
|
|
96
|
+
:global(.custom-icon-filterbtn) {
|
|
97
|
+
font-size: 12px;
|
|
98
|
+
}
|
|
88
99
|
:global(.ebg-none) {
|
|
89
100
|
background-color: #ffffff !important;
|
|
90
101
|
}
|
|
@@ -646,4 +657,5 @@
|
|
|
646
657
|
font-style: normal;
|
|
647
658
|
font-weight: 400;
|
|
648
659
|
line-height: normal;
|
|
649
|
-
}</style>
|
|
660
|
+
}</style>
|
|
661
|
+
|
|
@@ -5,6 +5,7 @@ export default class ButtonFilter extends SvelteComponentTyped<{
|
|
|
5
5
|
className: any;
|
|
6
6
|
label?: string | undefined;
|
|
7
7
|
size?: string | undefined;
|
|
8
|
+
isOpen?: boolean | undefined;
|
|
8
9
|
}, {
|
|
9
10
|
click: MouseEvent;
|
|
10
11
|
focus: FocusEvent;
|
|
@@ -23,6 +24,7 @@ declare const __propDef: {
|
|
|
23
24
|
className: any;
|
|
24
25
|
label?: string | undefined;
|
|
25
26
|
size?: string | undefined;
|
|
27
|
+
isOpen?: boolean | undefined;
|
|
26
28
|
};
|
|
27
29
|
events: {
|
|
28
30
|
click: MouseEvent;
|
|
@@ -1,6 +1,11 @@
|
|
|
1
|
-
<
|
|
2
|
-
|
|
3
|
-
</
|
|
1
|
+
<script>
|
|
2
|
+
|
|
3
|
+
</script>
|
|
4
|
+
<li class="filter-button-menu" on:click>
|
|
5
|
+
<slot>
|
|
6
|
+
|
|
7
|
+
</slot>
|
|
8
|
+
</li>
|
|
4
9
|
|
|
5
10
|
<style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
|
|
6
11
|
@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");
|
|
@@ -57,11 +62,17 @@
|
|
|
57
62
|
}
|
|
58
63
|
.filter-button .dropdown-menu {
|
|
59
64
|
min-width: 7rem;
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: column;
|
|
67
|
+
padding: 0;
|
|
60
68
|
}
|
|
61
69
|
.filter-button-menu {
|
|
62
70
|
text-align: center;
|
|
63
71
|
font-family: Roboto;
|
|
64
72
|
}
|
|
73
|
+
:global(.custom-icon-filterbtn) {
|
|
74
|
+
font-size: 12px;
|
|
75
|
+
}
|
|
65
76
|
:global(.ebg-none) {
|
|
66
77
|
background-color: #ffffff !important;
|
|
67
78
|
}
|
|
@@ -623,4 +634,6 @@
|
|
|
623
634
|
font-style: normal;
|
|
624
635
|
font-weight: 400;
|
|
625
636
|
line-height: normal;
|
|
626
|
-
}</style>
|
|
637
|
+
}</style>
|
|
638
|
+
|
|
639
|
+
|
|
@@ -9,8 +9,8 @@ export default class Checkbox extends SvelteComponentTyped<{
|
|
|
9
9
|
enable: any;
|
|
10
10
|
label?: string | undefined;
|
|
11
11
|
size?: string | undefined;
|
|
12
|
-
value?: string | undefined;
|
|
13
12
|
name?: string | undefined;
|
|
13
|
+
value?: string | undefined;
|
|
14
14
|
}, {
|
|
15
15
|
[evt: string]: CustomEvent<any>;
|
|
16
16
|
}, {}> {
|
|
@@ -28,8 +28,8 @@ declare const __propDef: {
|
|
|
28
28
|
enable: any;
|
|
29
29
|
label?: string | undefined;
|
|
30
30
|
size?: string | undefined;
|
|
31
|
-
value?: string | undefined;
|
|
32
31
|
name?: string | undefined;
|
|
32
|
+
value?: string | undefined;
|
|
33
33
|
};
|
|
34
34
|
events: {
|
|
35
35
|
[evt: string]: CustomEvent<any>;
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
export default class Modal extends SvelteComponentTyped<{
|
|
5
5
|
toggle: any;
|
|
6
6
|
size?: string | undefined;
|
|
7
|
-
backdrop?: boolean | undefined;
|
|
8
7
|
isOpen?: boolean | undefined;
|
|
8
|
+
backdrop?: boolean | undefined;
|
|
9
9
|
}, {
|
|
10
10
|
[evt: string]: CustomEvent<any>;
|
|
11
11
|
}, {
|
|
@@ -20,8 +20,8 @@ declare const __propDef: {
|
|
|
20
20
|
props: {
|
|
21
21
|
toggle: any;
|
|
22
22
|
size?: string | undefined;
|
|
23
|
-
backdrop?: boolean | undefined;
|
|
24
23
|
isOpen?: boolean | undefined;
|
|
24
|
+
backdrop?: boolean | undefined;
|
|
25
25
|
};
|
|
26
26
|
events: {
|
|
27
27
|
[evt: string]: CustomEvent<any>;
|
|
@@ -8,9 +8,9 @@ export default class TextField extends SvelteComponentTyped<{
|
|
|
8
8
|
invalid?: boolean | undefined;
|
|
9
9
|
type?: string | undefined;
|
|
10
10
|
size?: string | undefined;
|
|
11
|
+
name?: string | undefined;
|
|
11
12
|
placeholder?: string | undefined;
|
|
12
13
|
value?: string | undefined;
|
|
13
|
-
name?: string | undefined;
|
|
14
14
|
valid?: boolean | undefined;
|
|
15
15
|
}, {
|
|
16
16
|
change: Event;
|
|
@@ -33,9 +33,9 @@ declare const __propDef: {
|
|
|
33
33
|
invalid?: boolean | undefined;
|
|
34
34
|
type?: string | undefined;
|
|
35
35
|
size?: string | undefined;
|
|
36
|
+
name?: string | undefined;
|
|
36
37
|
placeholder?: string | undefined;
|
|
37
38
|
value?: string | undefined;
|
|
38
|
-
name?: string | undefined;
|
|
39
39
|
valid?: boolean | undefined;
|
|
40
40
|
};
|
|
41
41
|
events: {
|