@enki-tek/fms-web-components 0.0.53 → 0.0.54
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/Button.svelte +1 -1
- package/components/Button/Button.svelte.d.ts +2 -0
- package/components/TextField/TextField.svelte +1 -0
- package/components/TextField/TextField.svelte.d.ts +2 -0
- package/components/Tooltip/Tooltip.scss +15 -0
- package/components/Tooltip/Tooltip.svelte +30 -18
- package/components/Tooltip/Tooltip.svelte.d.ts +1 -0
- package/package.json +1 -1
@@ -2,6 +2,7 @@
|
|
2
2
|
/** @typedef {typeof __propDef.events} ButtonEvents */
|
3
3
|
/** @typedef {typeof __propDef.slots} ButtonSlots */
|
4
4
|
export default class Button extends SvelteComponentTyped<{
|
5
|
+
[x: string]: any;
|
5
6
|
size?: string | undefined;
|
6
7
|
disabled?: boolean | undefined;
|
7
8
|
type?: string | undefined;
|
@@ -31,6 +32,7 @@ export type ButtonSlots = typeof __propDef.slots;
|
|
31
32
|
import { SvelteComponentTyped } from "svelte";
|
32
33
|
declare const __propDef: {
|
33
34
|
props: {
|
35
|
+
[x: string]: any;
|
34
36
|
size?: string | undefined;
|
35
37
|
disabled?: boolean | undefined;
|
36
38
|
type?: string | undefined;
|
@@ -2,6 +2,7 @@
|
|
2
2
|
/** @typedef {typeof __propDef.events} TextFieldEvents */
|
3
3
|
/** @typedef {typeof __propDef.slots} TextFieldSlots */
|
4
4
|
export default class TextField extends SvelteComponentTyped<{
|
5
|
+
[x: string]: any;
|
5
6
|
size?: string | undefined;
|
6
7
|
disabled?: boolean | undefined;
|
7
8
|
invalid?: boolean | undefined;
|
@@ -27,6 +28,7 @@ export type TextFieldSlots = typeof __propDef.slots;
|
|
27
28
|
import { SvelteComponentTyped } from "svelte";
|
28
29
|
declare const __propDef: {
|
29
30
|
props: {
|
31
|
+
[x: string]: any;
|
30
32
|
size?: string | undefined;
|
31
33
|
disabled?: boolean | undefined;
|
32
34
|
invalid?: boolean | undefined;
|
@@ -8,6 +8,18 @@
|
|
8
8
|
line-height: 22px;
|
9
9
|
}
|
10
10
|
|
11
|
+
.align-left {
|
12
|
+
text-align: left;
|
13
|
+
}
|
14
|
+
|
15
|
+
.align-center {
|
16
|
+
text-align: center;
|
17
|
+
}
|
18
|
+
|
19
|
+
.align-right {
|
20
|
+
text-align: right;
|
21
|
+
}
|
22
|
+
|
11
23
|
:global(.tooltip-inner) {
|
12
24
|
background-color: $primary-dark;
|
13
25
|
}
|
@@ -26,4 +38,7 @@
|
|
26
38
|
|
27
39
|
:global(.tooltip.bs-tooltip-bottom .tooltip-arrow::before) {
|
28
40
|
border-bottom-color: $primary-dark;
|
41
|
+
}
|
42
|
+
.tooltips{
|
43
|
+
text-align: left;
|
29
44
|
}
|
@@ -3,26 +3,26 @@ export let target = " ";
|
|
3
3
|
export let placement = "right";
|
4
4
|
export let delay = 500;
|
5
5
|
export let label = "";
|
6
|
+
export let textAlignment = "left";
|
7
|
+
const textAligns = {
|
8
|
+
left: "align-left",
|
9
|
+
right: "align-right",
|
10
|
+
center: "align-center"
|
11
|
+
};
|
6
12
|
</script>
|
7
13
|
|
8
|
-
<div>
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
<slot/>
|
21
|
-
{/if}
|
22
|
-
</slot>
|
23
|
-
</div>
|
24
|
-
</Tooltip>
|
25
|
-
</div>
|
14
|
+
<div class="tooltips">
|
15
|
+
<Tooltip class="custom-tooltip" {target} {placement} {delay} {...$$restProps}>
|
16
|
+
<div class="label {textAligns.hasOwnProperty(textAlignment) ? textAligns[textAlignment] : ''}">
|
17
|
+
<slot>
|
18
|
+
{#if label}
|
19
|
+
{label}
|
20
|
+
{:else}
|
21
|
+
<slot />
|
22
|
+
{/if}
|
23
|
+
</slot>
|
24
|
+
</div>
|
25
|
+
</Tooltip>
|
26
26
|
</div>
|
27
27
|
|
28
28
|
<style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
|
@@ -605,6 +605,15 @@ export let label = "";
|
|
605
605
|
font-size: 16px;
|
606
606
|
line-height: 22px;
|
607
607
|
}
|
608
|
+
.align-left {
|
609
|
+
text-align: left;
|
610
|
+
}
|
611
|
+
.align-center {
|
612
|
+
text-align: center;
|
613
|
+
}
|
614
|
+
.align-right {
|
615
|
+
text-align: right;
|
616
|
+
}
|
608
617
|
:global(.tooltip-inner) {
|
609
618
|
background-color: #007FD8;
|
610
619
|
}
|
@@ -619,4 +628,7 @@ export let label = "";
|
|
619
628
|
}
|
620
629
|
:global(.tooltip.bs-tooltip-bottom .tooltip-arrow::before) {
|
621
630
|
border-bottom-color: #007FD8;
|
631
|
+
}
|
632
|
+
.tooltips {
|
633
|
+
text-align: left;
|
622
634
|
}</style>
|