@enki-tek/fms-web-components 0.0.58 → 0.0.60

package/components/Button/Button.svelte

@@ -9,10 +9,11 @@
 	export let size = '';
 	export let disabled =false;
 	export let className = "";
+	export let id='';
 
 	let buttonStyles = [className];
 	if (buttonConfig.hasOwnProperty(config)) {
-		buttonStyles = ['ebtn', ...buttonConfig[config], `ebg-${shade}`, `eoutline-${outlineShade}`, `ebtn-${size}`, `disabled`,className];
+		buttonStyles = ['ebtn', ...buttonConfig[config], `ebg-${shade}`, `eoutline-${outlineShade}`, `ebtn-${size}`,`ebtn-${shade}:hover`,`ebtn-${shade}:focus` ,`disabled`,className];
 	}
 
 	// icon button
@@ -26,7 +27,7 @@
 	}
 </script>
 
-<button {...$$restProps} {type} class={buttonStyles.join(' ')} on:click on:focus on:blur {disabled} >
+<button {...$$restProps} {type} id={id} class={buttonStyles.join(' ')} on:click on:focus on:blur {disabled} >
 	<slot>
 		{#if label}
 			{label}
@@ -124,67 +125,135 @@
   background-color: #ffffff !important;
   color: #000000 !important;
 }
-.ebg-secondary,
-.eactive-secondary:active,
-.ehover-secondary:hover {
-  background-color: #3AC82E !important;
+.ebg-secondary {
+  background-color: #3AC82E;
+}
+.ebg-secondary:hover, .ebg-secondary:focus {
+  background-color: #00A855;
+  transition: all 0.3s;
 }
-.ebg-secondaryDark,
-.eactive-secondaryDark:active,
-.ehover-secondaryDark:hover {
+.ebg-secondaryDark {
   background-color: #00A855;
 }
-.ebg-secondaryLight,
-.eactive-secondaryLight:active,
-.ehover-secondaryLight:hover {
+.ebg-secondaryDark:hover, .ebg-secondaryDark:focus {
+  background-color: #3AC82E;
+  transition: all 0.3s;
+}
+.ebg-secondaryLight {
   background-color: #CBFFC7;
 }
+.ebg-secondaryLight:hover, .ebg-secondaryLight:focus {
+  background-color: #3AC82E;
+  transition: all 0.3s;
+}
 .ebg-primary {
   background-color: #00AEE5;
 }
+.ebg-primary:hover, .ebg-primary:focus {
+  background-color: #007FD8;
+  transition: all 0.3s;
+}
 .ebg-primaryDark {
   background-color: #007FD8;
 }
+.ebg-primaryDark:hover, .ebg-primaryDark:focus {
+  background-color: #00AEE5;
+  transition: all 0.3s;
+}
 .ebg-primaryLight {
   background-color: #CEF3FF;
 }
+.ebg-primaryLight:hover, .ebg-primaryLight:focus {
+  transition: all 0.3s;
+  background-color: #00AEE5;
+  transition: all 0.3s;
+}
 .ebg-danger {
   background-color: #FE4747;
 }
+.ebg-danger:hover, .ebg-danger:focus {
+  transition: all 0.3s;
+  background-color: #B02A37;
+}
 .ebg-dangerDark {
   background-color: #B02A37;
 }
+.ebg-dangerDark:hover, .ebg-dangerDark:focus {
+  transition: all 0.3s;
+  background-color: #FE4747;
+}
 .ebg-dangerLight {
+  background-color: #f8d7da;
+}
+.ebg-dangerLight:hover, .ebg-dangerLight:focus {
+  transition: all 0.3s;
   background-color: #FE4747;
 }
 .ebg-warning {
   background-color: #FFBA3A;
 }
+.ebg-warning:hover, .ebg-warning:focus {
+  transition: all 0.3s;
+  background-color: #997404;
+}
 .ebg-warningDark {
   background-color: #997404;
   color: #ffffff !important;
 }
+.ebg-warningDark:hover, .ebg-warningDark:focus {
+  transition: all 0.3s;
+  background-color: #FFBA3A;
+  color: #ffffff !important;
+}
 .ebg-warningLight {
   background-color: #FFF3CD;
 }
+.ebg-warningLight:hover, .ebg-warningLight:focus {
+  transition: all 0.3s;
+  background-color: #FFBA3A;
+}
 .ebg-info {
   background-color: #0DCAF0;
 }
+.ebg-info:hover, .ebg-info:focus {
+  transition: all 0.3s;
+  background-color: #087990;
+}
 .ebg-infoDark {
   background-color: #087990;
 }
+.ebg-infoDark:hover, .ebg-infoDark:focus {
+  transition: all 0.3s;
+  background-color: #0DCAF0;
+}
 .ebg-infoLight {
   background-color: #9EEAF9;
 }
+.ebg-infoLight:hover, .ebg-infoLight:focus {
+  transition: all 0.3s;
+  background-color: #0DCAF0;
+}
 .ebg-success {
   background-color: #00A96B;
 }
+.ebg-success:hover, .ebg-success:focus {
+  transition: all 0.3s;
+  background-color: #146C43;
+}
 .ebg-successDark {
   background-color: #146C43;
 }
+.ebg-successDark:hover, .ebg-successDark:focus {
+  transition: all 0.3s;
+  background-color: #00A96B;
+}
 .ebg-successLight {
   background-color: #D1E7DD;
 }
+.ebg-successLight:hover, .ebg-successLight:focus {
+  transition: all 0.3s;
+  background-color: #00A96B;
+}
 .ebg-gray100 {
   background-color: #F8F9FA;
 }
@@ -351,7 +420,7 @@
   color: #B02A37;
 }
 .etext-dangerLight {
-  color: #FE4747;
+  color: #f8d7da;
 }
 .etext-info {
   color: #0DCAF0;
@@ -517,33 +586,143 @@
 }
 .eoutline-secondary {
   outline: 1px solid #3AC82E;
+  background-color: #ffffff;
+}
+.eoutline-secondary:hover {
+  transition: all 0.3s;
+  background-color: #CBFFC7;
+  color: #00A855;
+}
+.eoutline-secondary:focus {
+  transition: all 0.3s;
+  background-color: #CBFFC7;
+  color: #00A855;
 }
 .eoutline-secondaryDark {
   outline: 1px solid #00A855;
+  background-color: #ffffff;
+}
+.eoutline-secondaryDark:hover {
+  transition: all 0.3s;
+  background-color: #CBFFC7;
+  color: #00A855;
+}
+.eoutline-secondaryDark:focus {
+  transition: all 0.3s;
+  background-color: #CBFFC7;
+  color: #00A855;
 }
 .eoutline-secondaryLight {
   outline: 1px solid #CBFFC7;
+  background-color: #ffffff;
+}
+.eoutline-secondaryLight:hover {
+  transition: all 0.3s;
+  background-color: #CBFFC7;
+  color: #00A855;
+}
+.eoutline-secondaryLight:focus {
+  transition: all 0.3s;
+  background-color: #CBFFC7;
+  color: #00A855;
 }
 .eoutline-primary {
   outline: 1px solid #00AEE5;
+  background-color: #ffffff;
+}
+.eoutline-primary:hover {
+  transition: all 0.3s;
+  background-color: #CEF3FF;
+  color: #007FD8;
+}
+.eoutline-primary:focus {
+  transition: all 0.3s;
+  background-color: #CEF3FF;
+  color: #007FD8;
 }
 .eoutline-primaryDark {
   outline: 1px solid #007FD8;
+  background-color: #ffffff;
+}
+.eoutline-primaryDark:hover {
+  transition: all 0.3s;
+  background-color: #CEF3FF;
+  color: #007FD8;
+}
+.eoutline-primaryDark:focus {
+  transition: all 0.3s;
+  background-color: #CEF3FF;
+  color: #007FD8;
 }
 .eoutline-primaryLight {
   outline: 1px solid #CEF3FF;
+  background-color: #ffffff;
+}
+.eoutline-primaryLight:hover {
+  transition: all 0.3s;
+  background-color: #CEF3FF;
+  color: #007FD8;
+}
+.eoutline-primaryLight:focus {
+  transition: all 0.3s;
+  background-color: #CEF3FF;
+  color: #007FD8;
 }
 .eoutline-danger {
   outline: 1px solid #FE4747;
+  background-color: #ffffff;
+}
+.eoutline-danger:hover {
+  transition: all 0.3s;
+  background-color: #f8d7da;
+  color: #B02A37;
+}
+.eoutline-danger:focus {
+  transition: all 0.3s;
+  background-color: #f8d7da;
+  color: #B02A37;
 }
 .eoutline-dangerDark {
   outline: 1px solid #B02A37;
+  background-color: #ffffff;
+}
+.eoutline-dangerDark:hover {
+  transition: all 0.3s;
+  background-color: #f8d7da;
+  color: #B02A37;
+}
+.eoutline-dangerDark:focus {
+  transition: all 0.3s;
+  background-color: #f8d7da;
+  color: #B02A37;
 }
 .eoutline-dangerLight {
-  outline: 1px solid #FE4747;
+  outline: 1px solid #f8d7da;
+  background-color: #ffffff;
+}
+.eoutline-dangerLight:hover {
+  transition: all 0.3s;
+  background-color: #f8d7da;
+  color: #B02A37;
+}
+.eoutline-dangerLight:focus {
+  transition: all 0.3s;
+  background-color: #f8d7da;
+  color: #B02A37;
 }
 .eoutline-success {
   outline: 1px solid #00A96B;
+  background-color: #ffffff;
+}
+.eoutline-success:hover {
+  transition: all 0.3s;
+  background-color: #D1E7DD;
+  color: #146C43;
+}
+.eoutline-success:focus {
+  transition: all 0.3s;
+  background-color: #D1E7DD;
+  color: #146C43;
 }
 .eoutline-successDark {
   outline: 1px solid #146C43;
@@ -553,6 +732,17 @@
 }
 .eoutline-info {
   outline: 1px solid #0DCAF0;
+  background-color: #ffffff;
+}
+.eoutline-info:hover {
+  transition: all 0.3s;
+  background-color: #9EEAF9;
+  color: #087990;
+}
+.eoutline-info:focus {
+  transition: all 0.3s;
+  background-color: #9EEAF9;
+  color: #087990;
 }
 .eoutline-infoDark {
   outline: 1px solid #087990;
@@ -562,6 +752,17 @@
 }
 .eoutline-warning {
   outline: 1px solid #FFBA3A;
+  background-color: #ffffff;
+}
+.eoutline-warning:hover {
+  transition: all 0.3s;
+  background-color: #FFF3CD;
+  color: #997404;
+}
+.eoutline-warning:focus {
+  transition: all 0.3s;
+  background-color: #FFF3CD;
+  color: #997404;
 }
 .eoutline-warningDark {
   outline: 1px solid #997404;
@@ -600,7 +801,7 @@
   background-color: #B02A37;
 }
 :global(.ebg-dangerLight) {
-  background-color: #FE4747;
+  background-color: #f8d7da;
 }
 :global(.ebg-warning) {
   background-color: #FFBA3A;
@@ -796,7 +997,7 @@
   color: #B02A37;
 }
 :global(.etext-dangerLight) {
-  color: #FE4747;
+  color: #f8d7da;
 }
 :global(.etext-info) {
   color: #0DCAF0;
@@ -985,7 +1186,7 @@
   outline: 1px solid #B02A37;
 }
 :global(.eoutline-dangerLight) {
-  outline: 1px solid #FE4747;
+  outline: 1px solid #f8d7da;
 }
 :global(.eoutline-success) {
   outline: 1px solid #00A96B;

package/components/Button/Button.svelte.d.ts

@@ -4,6 +4,7 @@
 export default class Button extends SvelteComponentTyped<{
     [x: string]: any;
     size?: string | undefined;
+    id?: string | undefined;
     disabled?: boolean | undefined;
     type?: string | undefined;
     label?: string | undefined;
@@ -34,6 +35,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         size?: string | undefined;
+        id?: string | undefined;
         disabled?: boolean | undefined;
         type?: string | undefined;
         label?: string | undefined;

package/components/Button/ButtonFilter.svelte

@@ -118,7 +118,7 @@
   background-color: #B02A37;
 }
 :global(.ebg-dangerLight) {
-  background-color: #FE4747;
+  background-color: #f8d7da;
 }
 :global(.ebg-warning) {
   background-color: #FFBA3A;
@@ -314,7 +314,7 @@
   color: #B02A37;
 }
 :global(.etext-dangerLight) {
-  color: #FE4747;
+  color: #f8d7da;
 }
 :global(.etext-info) {
   color: #0DCAF0;
@@ -503,7 +503,7 @@
   outline: 1px solid #B02A37;
 }
 :global(.eoutline-dangerLight) {
-  outline: 1px solid #FE4747;
+  outline: 1px solid #f8d7da;
 }
 :global(.eoutline-success) {
   outline: 1px solid #00A96B;

package/components/Button/FilterOption.svelte

@@ -104,7 +104,7 @@
   background-color: #B02A37;
 }
 :global(.ebg-dangerLight) {
-  background-color: #FE4747;
+  background-color: #f8d7da;
 }
 :global(.ebg-warning) {
   background-color: #FFBA3A;
@@ -300,7 +300,7 @@
   color: #B02A37;
 }
 :global(.etext-dangerLight) {
-  color: #FE4747;
+  color: #f8d7da;
 }
 :global(.etext-info) {
   color: #0DCAF0;
@@ -489,7 +489,7 @@
   outline: 1px solid #B02A37;
 }
 :global(.eoutline-dangerLight) {
-  outline: 1px solid #FE4747;
+  outline: 1px solid #f8d7da;
 }
 :global(.eoutline-success) {
   outline: 1px solid #00A96B;

package/components/Button/buttonConfig.js

@@ -94,109 +94,91 @@ export const buttonConfig = {
 
     "secondaryOutlineBtnLarge" :[
       "ebtn-large",
-      "ebg-none",
       "etext-secondary",
       "eoutline-secondary",
     ],
     "secondaryOutlineBtnMedium" :[
       "ebtn-medium",
-      "ebg-none",
       "etext-secondary",
       "eoutline-secondary"
     ],
     "secondaryOutlineBtnSmall" :[
       "ebtn-small",
-      "ebg-none",
       "etext-secondary",
       "eoutline-secondary"
     ],
     "primaryOutlineBtnLarge" :[
       "ebtn-large",
-      "ebg-none",
       "etext-primary",
       "eoutline-primary"
     ],
     "primaryOutlineBtnMedium" :[
       "ebtn-medium",
-      "ebg-none",
       "etext-primary",
       "eoutline-primary"
     ],
     "primaryOutlineBtnSmall" :[
       "ebtn-small",
-      "ebg-none",
       "etext-primary",
       "eoutline-primary"
     ],
     "infoOutlineBtnLarge" :[
       "ebtn-large",
-      "ebg-none",
       "etext-info",
       "eoutline-info"
     ],
     "infoOutlineBtnMedium" :[
       "ebtn-medium",
-      "ebg-none",
       "etext-info",
       "eoutline-info"
     ],
     "infoOutlineBtnSmall" :[
       "ebtn-small",
-      "ebg-none",
       "etext-info",
       "eoutline-info"
     ],
     "warningOutlineBtnSmall" :[
       "ebtn-small",
-      "ebg-none",
       "etext-warning",
       "eoutline-warning"
     ],
     "warningOutlineBtnLarge" :[
       "ebtn-large",
-      "ebg-none",
       "etext-warning",
       "eoutline-warning"
     ],
     "warningOutlineBtnMedium" :[
       "ebtn-medium",
-      "ebg-none",
       "etext-warning",
       "eoutline-warning"
     ],
     "dangerOutlineBtnLarge" :[
       "ebtn-large",
-      "ebg-none",
       "etext-danger",
       "eoutline-danger"
     ],
     "dangerOutlineBtnMedium" :[
       "ebtn-medium",
-      "ebg-none",
       "etext-danger",
       "eoutline-danger"
     ],
     "dangerOutlineBtnSmall" :[
       "ebtn-small",
-      "ebg-none",
       "etext-danger",
       "eoutline-danger"
     ],
     "successOutlineBtnLarge" :[
       "ebtn-large",
-      "ebg-none",
       "etext-success",
       "eoutline-success"
     ],
     "successOutlineBtnMedium" :[
       "ebtn-medium",
-      "ebg-none",
       "etext-success",
       "eoutline-success"
     ],
     "successOutlineBtnSmall" :[
       "ebtn-small",
-      "ebg-none",
       "etext-success",
       "eoutline-success"
     ],

package/components/CardIcon/CardIcon.svelte

@@ -136,7 +136,7 @@ if (titleConfig.includes(titleLocation)) {
   background-color: #B02A37;
 }
 :global(.ebg-dangerLight) {
-  background-color: #FE4747;
+  background-color: #f8d7da;
 }
 :global(.ebg-warning) {
   background-color: #FFBA3A;
@@ -332,7 +332,7 @@ if (titleConfig.includes(titleLocation)) {
   color: #B02A37;
 }
 :global(.etext-dangerLight) {
-  color: #FE4747;
+  color: #f8d7da;
 }
 :global(.etext-info) {
   color: #0DCAF0;
@@ -521,7 +521,7 @@ if (titleConfig.includes(titleLocation)) {
   outline: 1px solid #B02A37;
 }
 :global(.eoutline-dangerLight) {
-  outline: 1px solid #FE4747;
+  outline: 1px solid #f8d7da;
 }
 :global(.eoutline-success) {
   outline: 1px solid #00A96B;

package/components/CardIcon/CardiconBody.svelte

@@ -131,7 +131,7 @@
   background-color: #B02A37;
 }
 :global(.ebg-dangerLight) {
-  background-color: #FE4747;
+  background-color: #f8d7da;
 }
 :global(.ebg-warning) {
   background-color: #FFBA3A;
@@ -327,7 +327,7 @@
   color: #B02A37;
 }
 :global(.etext-dangerLight) {
-  color: #FE4747;
+  color: #f8d7da;
 }
 :global(.etext-info) {
   color: #0DCAF0;
@@ -516,7 +516,7 @@
   outline: 1px solid #B02A37;
 }
 :global(.eoutline-dangerLight) {
-  outline: 1px solid #FE4747;
+  outline: 1px solid #f8d7da;
 }
 :global(.eoutline-success) {
   outline: 1px solid #00A96B;

package/components/CardIcon/CardiconSubtitle.svelte

@@ -140,7 +140,7 @@
   background-color: #B02A37;
 }
 :global(.ebg-dangerLight) {
-  background-color: #FE4747;
+  background-color: #f8d7da;
 }
 :global(.ebg-warning) {
   background-color: #FFBA3A;
@@ -336,7 +336,7 @@
   color: #B02A37;
 }
 :global(.etext-dangerLight) {
-  color: #FE4747;
+  color: #f8d7da;
 }
 :global(.etext-info) {
   color: #0DCAF0;
@@ -525,7 +525,7 @@
   outline: 1px solid #B02A37;
 }
 :global(.eoutline-dangerLight) {
-  outline: 1px solid #FE4747;
+  outline: 1px solid #f8d7da;
 }
 :global(.eoutline-success) {
   outline: 1px solid #00A96B;

package/components/CardIcon/CardiconTitle.svelte

@@ -140,7 +140,7 @@
   background-color: #B02A37;
 }
 :global(.ebg-dangerLight) {
-  background-color: #FE4747;
+  background-color: #f8d7da;
 }
 :global(.ebg-warning) {
   background-color: #FFBA3A;
@@ -336,7 +336,7 @@
   color: #B02A37;
 }
 :global(.etext-dangerLight) {
-  color: #FE4747;
+  color: #f8d7da;
 }
 :global(.etext-info) {
   color: #0DCAF0;
@@ -525,7 +525,7 @@
   outline: 1px solid #B02A37;
 }
 :global(.eoutline-dangerLight) {
-  outline: 1px solid #FE4747;
+  outline: 1px solid #f8d7da;
 }
 :global(.eoutline-success) {
   outline: 1px solid #00A96B;

package/components/CheckBox/Checkbox.svelte

@@ -89,7 +89,7 @@
   background-color: #B02A37;
 }
 :global(.ebg-dangerLight) {
-  background-color: #FE4747;
+  background-color: #f8d7da;
 }
 :global(.ebg-warning) {
   background-color: #FFBA3A;
@@ -285,7 +285,7 @@
   color: #B02A37;
 }
 :global(.etext-dangerLight) {
-  color: #FE4747;
+  color: #f8d7da;
 }
 :global(.etext-info) {
   color: #0DCAF0;
@@ -474,7 +474,7 @@
   outline: 1px solid #B02A37;
 }
 :global(.eoutline-dangerLight) {
-  outline: 1px solid #FE4747;
+  outline: 1px solid #f8d7da;
 }
 :global(.eoutline-success) {
   outline: 1px solid #00A96B;