@enki-tek/fms-web-components 0.0.22 → 0.0.24

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