@onsvisual/svelte-components 1.0.38 → 1.0.40
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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
/**
|
|
3
3
|
* Set the type of icon
|
|
4
|
-
* @type {"arrow"|"carret"|"cross"|"external"|"signout"|"print"|"download"|"tick"|"search"|"pin"|"cog"}
|
|
4
|
+
* @type {"arrow"|"chevron"|"carret"|"cross"|"external"|"signout"|"print"|"download"|"tick"|"search"|"pin"|"cog"}
|
|
5
5
|
*/
|
|
6
6
|
export let type = "arrow";
|
|
7
7
|
/**
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
*/
|
|
11
11
|
export let size = null;
|
|
12
12
|
/**
|
|
13
|
-
* Rotation
|
|
13
|
+
* Rotation in degrees (clockwise)
|
|
14
14
|
* @type {number}
|
|
15
15
|
*/
|
|
16
16
|
export let rotation = 0;
|
|
@@ -31,12 +31,12 @@
|
|
|
31
31
|
viewBox: "0 0 17 13"
|
|
32
32
|
},
|
|
33
33
|
chevron: {
|
|
34
|
-
d: "
|
|
34
|
+
d: "M.74,12.7l-.57,-.56a.5,.5 0,0,1 0,-.71l5,-5l-5,-5a.5,.5 0,0,1 0,-.71l.57,-.56a.5,.5 0,0,1 .71,0l5.93,5.93a.5,.5 0,0,1 0,.7l-5.93,5.93a.5,.5 0,0,1 -.71,0Z",
|
|
35
35
|
viewBox: "0 0 8 13"
|
|
36
36
|
},
|
|
37
37
|
carret: {
|
|
38
|
-
d: "M1.
|
|
39
|
-
viewBox: "0 0 11.
|
|
38
|
+
d: "M1.4,0.1l4.5,5.1l4.5,-5.1a0.45,0.45 0,0,1 .6,0l.7,.7a.45,.45 0,0,1 0,.5l-5.5,6.2a.45,.45 0,0,1 -.6,0l-5.5,-6.1a.45,.45 0,0,1 0,-.6l.7,-.7a.45,.45 0,0,1 .6,0Z",
|
|
39
|
+
viewBox: "0 0 11.8 7.7"
|
|
40
40
|
},
|
|
41
41
|
cross: {
|
|
42
42
|
d: "M12 1.2086L10.7914 0L6 4.79155L1.20857 0L0 1.2086L4.79143 6.00015L0 10.7917L1.20857 12.0003L6 7.20875L10.7914 12.0003L12 10.7917L7.20857 6.00015L12 1.2086Z",
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/** @typedef {typeof __propDef.events} IconEvents */
|
|
3
3
|
/** @typedef {typeof __propDef.slots} IconSlots */
|
|
4
4
|
export default class Icon extends SvelteComponentTyped<{
|
|
5
|
-
type?: "search" | "arrow" | "carret" | "cross" | "external" | "signout" | "print" | "download" | "tick" | "pin" | "cog" | undefined;
|
|
5
|
+
type?: "search" | "arrow" | "chevron" | "carret" | "cross" | "external" | "signout" | "print" | "download" | "tick" | "pin" | "cog" | undefined;
|
|
6
6
|
size?: "s" | "m" | "l" | "xl" | "2xl" | "3xl" | null | undefined;
|
|
7
7
|
rotation?: number | undefined;
|
|
8
8
|
marginLeft?: boolean | undefined;
|
|
@@ -17,7 +17,7 @@ export type IconSlots = typeof __propDef.slots;
|
|
|
17
17
|
import { SvelteComponentTyped } from "svelte";
|
|
18
18
|
declare const __propDef: {
|
|
19
19
|
props: {
|
|
20
|
-
type?: "search" | "arrow" | "carret" | "cross" | "external" | "signout" | "print" | "download" | "tick" | "pin" | "cog" | undefined;
|
|
20
|
+
type?: "search" | "arrow" | "chevron" | "carret" | "cross" | "external" | "signout" | "print" | "download" | "tick" | "pin" | "cog" | undefined;
|
|
21
21
|
size?: "s" | "m" | "l" | "xl" | "2xl" | "3xl" | null | undefined;
|
|
22
22
|
rotation?: number | undefined;
|
|
23
23
|
marginLeft?: boolean | undefined;
|
|
@@ -45,6 +45,11 @@
|
|
|
45
45
|
* @type {"before"|"after"}
|
|
46
46
|
*/
|
|
47
47
|
export let iconPosition = "before";
|
|
48
|
+
/**
|
|
49
|
+
* Rotation of icon in degrees (clockwise)
|
|
50
|
+
* @type {number}
|
|
51
|
+
*/
|
|
52
|
+
export let iconRotation = 0;
|
|
48
53
|
/**
|
|
49
54
|
* Show button as disabled
|
|
50
55
|
* @type {boolean}
|
|
@@ -95,7 +100,7 @@
|
|
|
95
100
|
{#if iconPosition === "before"}
|
|
96
101
|
<slot name="icon">
|
|
97
102
|
{#if icon}
|
|
98
|
-
<Icon type={icon} marginRight={!hideLabel} />
|
|
103
|
+
<Icon type={icon} marginRight={!hideLabel} rotation={iconRotation} />
|
|
99
104
|
{/if}
|
|
100
105
|
</slot>
|
|
101
106
|
{/if}
|
|
@@ -103,7 +108,7 @@
|
|
|
103
108
|
{#if iconPosition === "after"}
|
|
104
109
|
<slot name="icon">
|
|
105
110
|
{#if icon}
|
|
106
|
-
<Icon type={icon} marginLeft={!hideLabel} />
|
|
111
|
+
<Icon type={icon} marginLeft={!hideLabel} rotation={iconRotation} />
|
|
107
112
|
{/if}
|
|
108
113
|
</slot>
|
|
109
114
|
{/if}
|
|
@@ -12,6 +12,7 @@ export default class Button extends SvelteComponentTyped<{
|
|
|
12
12
|
noScroll?: boolean | undefined;
|
|
13
13
|
icon?: "search" | "arrow" | "carret" | "cross" | "external" | "signout" | "print" | "download" | "tick" | "pin" | "cog" | null | undefined;
|
|
14
14
|
iconPosition?: "before" | "after" | undefined;
|
|
15
|
+
iconRotation?: number | undefined;
|
|
15
16
|
disabled?: boolean | undefined;
|
|
16
17
|
hideLabel?: boolean | undefined;
|
|
17
18
|
arialabel?: string | null | undefined;
|
|
@@ -40,6 +41,7 @@ declare const __propDef: {
|
|
|
40
41
|
noScroll?: boolean | undefined;
|
|
41
42
|
icon?: "search" | "arrow" | "carret" | "cross" | "external" | "signout" | "print" | "download" | "tick" | "pin" | "cog" | null | undefined;
|
|
42
43
|
iconPosition?: "before" | "after" | undefined;
|
|
44
|
+
iconRotation?: number | undefined;
|
|
43
45
|
disabled?: boolean | undefined;
|
|
44
46
|
hideLabel?: boolean | undefined;
|
|
45
47
|
arialabel?: string | null | undefined;
|