@enki-tek/fms-web-components 0.0.21 → 0.0.23

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 (16) hide show
  1. package/components/CardIcon/CardIcon.scss +43 -31
  2. package/components/CardIcon/CardIcon.svelte +45 -69
  3. package/components/CardIcon/CardIcon.svelte.d.ts +1 -8
  4. package/components/CardIcon/CardIconConfig.d.ts +3 -2
  5. package/components/CardIcon/CardIconConfig.js +3 -2
  6. package/components/CardIcon/CardiconBody.svelte +663 -0
  7. package/components/CardIcon/CardiconBody.svelte.d.ts +27 -0
  8. package/components/CardIcon/CardiconSubtitle.svelte +672 -0
  9. package/components/CardIcon/CardiconSubtitle.svelte.d.ts +27 -0
  10. package/components/CardIcon/CardiconTitle.svelte +672 -0
  11. package/components/CardIcon/CardiconTitle.svelte.d.ts +27 -0
  12. package/components/textField/TextField.svelte +21 -9
  13. package/components/textField/TextField.svelte.d.ts +6 -0
  14. package/index.d.ts +4 -1
  15. package/index.js +4 -1
  16. package/package.json +4 -1
package/components/CardIcon/CardIcon.scss CHANGED
@@ -13,16 +13,28 @@
13
13
  background: $white;
14
14
  }
15
15
 
16
- .cardicon-main {
16
+ :global(.cardicon-main) {
17
17
  width: 100%;
18
18
  display: flex;
19
19
  padding: 10px;
20
20
  justify-content: space-between;
21
21
  align-items: flex-start;
22
22
  align-self: stretch;
23
+ color: $black;
24
+ font-size: 18px;
25
+ @extend %common-fontstyle;
26
+ text-transform: capitalize;
27
+ }
28
+
29
+ :global(.custom-cardicon-body) {
30
+ width: 100%;
31
+ display: flex;
32
+ flex-direction: column;
33
+ position: relative;
34
+ padding: 1rem 1rem;
23
35
  }
24
36
 
25
- .cardicon-content {
37
+ :global(.cardicon-content) {
26
38
  width: 100%;
27
39
  display: flex;
28
40
  color: $gray-cardicon;
@@ -30,8 +42,6 @@
30
42
  font-size: 30px;
31
43
  @extend %common-fontstyle;
32
44
  line-height: 40px;
33
- padding: 10px;
34
- margin-top: 10px;
35
45
  }
36
46
 
37
47
  :global(.cardicon-main .card-title) {
@@ -46,14 +56,6 @@
46
56
  height: 20px;
47
57
  }
48
58
 
49
- .custom-body-slot {
50
- color: $black;
51
- font-size: 13px;
52
- @extend %common-fontstyle;
53
- }
54
- :global(.card-body-modifier) {
55
- padding: 0 1rem;
56
- }
57
59
  %common-fontstyle {
58
60
  font-family: $bodyFonts;
59
61
  font-style: normal;
@@ -65,34 +67,44 @@
65
67
  flex-direction: column-reverse !important;
66
68
  }
67
69
 
68
- :global(.bottom-left) {
69
- @extend %common;
70
-
71
- .cardicon-main {
72
- flex-direction: row-reverse;
73
- }
70
+ :global(.top) {
71
+ flex-direction: column;
74
72
  }
75
73
 
76
- :global(.bottom-right) {
77
- @extend %common;
74
+ :global(.bottom) {
75
+ flex-direction: column-reverse;
78
76
  }
79
77
 
80
- :global(.top-left) {
81
- flex-direction: column;
78
+ :global(.left) {
79
+ flex-direction: row-reverse;
80
+ }
82
81
 
83
- .cardicon-main {
84
- flex-direction: row-reverse;
85
- }
82
+ :global(.right) {
83
+ flex-direction: row;
86
84
  }
87
85
 
88
- :global(.top-right) {
89
- flex-direction: column;
86
+ :global(.bottom-right) {
87
+ position: absolute;
88
+ bottom: 0;
89
+ right: 0;
90
+ flex-direction: row-reverse;
91
+ padding: 5px 10px;
90
92
  }
91
93
 
92
- .right {
93
- justify-content: end !important;
94
+ :global(.bottom-left) {
95
+ position: absolute;
96
+ bottom: 0;
97
+ left: 0;
98
+ flex-direction: row;
99
+ padding: 5px 10px;
94
100
  }
95
101
 
96
- .left {
97
- justify-content: start !important;
102
+ :global(.top-left) {
103
+ flex-direction: row;
104
+ padding: 0;
105
+ margin-left: -4px;
98
106
  }
107
+
108
+ :global(.top-right) {
109
+ flex-direction: row-reverse;
110
+ }
package/components/CardIcon/CardIcon.svelte CHANGED
@@ -1,52 +1,14 @@
1
1
  <script>import { Card, CardBody, CardTitle, Icon } from "sveltestrap";
2
- import { locationConfig, slotLocationConfig } from "./CardIconConfig";
3
- export let title = "Card title";
4
- export let name = "bell";
5
- export let location = "bottom-right";
6
- export let subtitlePosition = "left";
7
- export let cardbody = "";
8
- export let cardsubtitle = "";
9
- let locationStyle = [`custom-card-style`];
10
- if (locationConfig.includes(location)) {
11
- locationStyle.push(location);
12
- }
13
- let slotLocation = [`cardicon-content`];
14
- if (slotLocationConfig.includes(subtitlePosition)) {
15
- slotLocation.push(subtitlePosition);
2
+ import { titleConfig } from "./CardIconConfig";
3
+ export let titleLocation = "top";
4
+ let titlelocationStyle = [`custom-card-style`];
5
+ if (titleConfig.includes(titleLocation)) {
6
+ titlelocationStyle.push(titleLocation);
16
7
  }
17
8
  </script>
18
9
 
19
- <Card class={locationStyle.join(' ')}>
20
- <div class="cardicon-main">
21
- <CardTitle>{title}</CardTitle>
22
- <Icon {name} />
23
- </div>
24
-
25
- {#if $$slots.cardsubtitle || cardsubtitle}
26
- <div class={slotLocation.join(' ')}>
27
- <slot name="cardsubtitle">
28
- {#if cardsubtitle}
29
- {cardsubtitle}
30
- {:else}
31
- <slot />
32
- {/if}
33
- </slot>
34
- </div>
35
- {/if}
36
-
37
- {#if $$slots.cardbody || cardbody}
38
- <CardBody class="card-body-modifier">
39
- <div class="custom-body-slot">
40
- <slot name="cardbody">
41
- {#if cardbody}
42
- {cardbody}
43
- {:else}
44
- <slot />
45
- {/if}
46
- </slot>
47
- </div>
48
- </CardBody>
49
- {/if}
10
+ <Card class={titlelocationStyle.join(' ')}>
11
+ <slot />
50
12
  </Card>
51
13
 
52
14
  <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@@ -67,23 +29,31 @@ if (slotLocationConfig.includes(subtitlePosition)) {
67
29
  border: 1px dashed #B8B8B8;
68
30
  background: #ffffff;
69
31
  }
70
- .cardicon-main {
32
+ :global(.cardicon-main) {
71
33
  width: 100%;
72
34
  display: flex;
73
35
  padding: 10px;
74
36
  justify-content: space-between;
75
37
  align-items: flex-start;
76
38
  align-self: stretch;
39
+ color: #000000;
40
+ font-size: 18px;
41
+ text-transform: capitalize;
77
42
  }
78
- .cardicon-content {
43
+ :global(.custom-cardicon-body) {
44
+ width: 100%;
45
+ display: flex;
46
+ flex-direction: column;
47
+ position: relative;
48
+ padding: 1rem 1rem;
49
+ }
50
+ :global(.cardicon-content) {
79
51
  width: 100%;
80
52
  display: flex;
81
53
  color: #444;
82
54
  text-align: right;
83
55
  font-size: 30px;
84
56
  line-height: 40px;
85
- padding: 10px;
86
- margin-top: 10px;
87
57
  }
88
58
  :global(.cardicon-main .card-title) {
89
59
  color: #000000;
@@ -94,39 +64,45 @@ if (slotLocationConfig.includes(subtitlePosition)) {
94
64
  width: 20px;
95
65
  height: 20px;
96
66
  }
97
- .custom-body-slot {
98
- color: #000000;
99
- font-size: 13px;
100
- }
101
- :global(.card-body-modifier) {
102
- padding: 0 1rem;
103
- }
104
- .cardicon-content, :global(.cardicon-main .card-title), .custom-body-slot {
67
+ :global(.cardicon-main), :global(.cardicon-content), :global(.cardicon-main .card-title) {
105
68
  font-family: Roboto;
106
69
  font-style: normal;
107
70
  font-weight: 400;
108
71
  line-height: 20px;
109
72
  }
110
- :global(.bottom-right), :global(.bottom-left) {
111
- flex-direction: column-reverse !important;
73
+ :global(.top) {
74
+ flex-direction: column;
75
+ }
76
+ :global(.bottom) {
77
+ flex-direction: column-reverse;
112
78
  }
113
- :global(.bottom-left) .cardicon-main {
79
+ :global(.left) {
114
80
  flex-direction: row-reverse;
115
81
  }
116
- :global(.top-left) {
117
- flex-direction: column;
82
+ :global(.right) {
83
+ flex-direction: row;
118
84
  }
119
- :global(.top-left) .cardicon-main {
85
+ :global(.bottom-right) {
86
+ position: absolute;
87
+ bottom: 0;
88
+ right: 0;
120
89
  flex-direction: row-reverse;
90
+ padding: 5px 10px;
121
91
  }
122
- :global(.top-right) {
123
- flex-direction: column;
92
+ :global(.bottom-left) {
93
+ position: absolute;
94
+ bottom: 0;
95
+ left: 0;
96
+ flex-direction: row;
97
+ padding: 5px 10px;
124
98
  }
125
- .right {
126
- justify-content: end !important;
99
+ :global(.top-left) {
100
+ flex-direction: row;
101
+ padding: 0;
102
+ margin-left: -4px;
127
103
  }
128
- .left {
129
- justify-content: start !important;
104
+ :global(.top-right) {
105
+ flex-direction: row-reverse;
130
106
  }
131
107
  :global(.ebg-none) {
132
108
  background-color: #ffffff !important;
package/components/CardIcon/CardIcon.svelte.d.ts CHANGED
@@ -1,20 +1,13 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
- title?: string | undefined;
5
- name?: string | undefined;
6
- location?: string | undefined;
7
- subtitlePosition?: string | undefined;
8
- cardbody?: string | undefined;
9
- cardsubtitle?: string | undefined;
4
+ titleLocation?: string | undefined;
10
5
  };
11
6
  events: {
12
7
  [evt: string]: CustomEvent<any>;
13
8
  };
14
9
  slots: {
15
- cardsubtitle: {};
16
10
  default: {};
17
- cardbody: {};
18
11
  };
19
12
  };
20
13
  export type CardIconProps = typeof __propDef.props;
package/components/CardIcon/CardIconConfig.d.ts CHANGED
@@ -1,2 +1,3 @@
1
- export const locationConfig: string[];
2
- export const slotLocationConfig: string[];
1
+ export const titleConfig: string[];
2
+ export const iconConfig: string[];
3
+ export const subtitleConfig: string[];
package/components/CardIcon/CardIconConfig.js CHANGED
@@ -1,2 +1,3 @@
1
- export const locationConfig = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
2
- export const slotLocationConfig = ['left', 'right'];
1
+ export const titleConfig = ['top', 'bottom'];
2
+ export const iconConfig = ['left', 'right'];
3
+ export const subtitleConfig = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];