@enki-tek/fms-web-components 0.0.71 → 0.0.73

package/components/Alert/Alert.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        color?: "info" | "success" | "danger" | "warning" | undefined;
+        color?: "danger" | "info" | "success" | "warning" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Badge/Badge.svelte

@@ -6,7 +6,6 @@ let badgeStyles = [`m-0`, `mt-1`, `custom-badge`, className];
 if (badgeConfig.hasOwnProperty(config)) {
   badgeStyles = [...badgeConfig[config], ...badgeStyles];
 }
-console.log("badgeStyles:", badgeStyles);
 </script>
 
 <Badge pill color="none" class={badgeStyles.join(' ')}>

package/components/Button/Button.scss

@@ -2,7 +2,7 @@
 
 .ebtn {
   // Default styles for button
-  background-color: $white;
+  background-color: $gray-300;
   color: black;
   border: none;
   cursor: pointer;

package/components/Button/Button.svelte

@@ -10,8 +10,9 @@
 	export let disabled =false;
 	export let className = "";
 	export let id='';
+	export let  actived={state:false,color:'danger'};
 
-	let buttonStyles = [className];
+	let buttonStyles = [className,`ebg-active-${actived.state === true ?  actived.color : ''}`,'ebtn'];
 	if (buttonConfig.hasOwnProperty(config)) {
 		buttonStyles = ['ebtn', ...buttonConfig[config], `ebg-${shade}`, `eoutline-${outlineShade}`, `ebtn-${size}`,`ebtn-${shade}:hover`,`ebtn-${shade}:focus` ,`disabled`,className];
 	}
@@ -46,8 +47,11 @@
 @import url(https://fonts.googleapis.com/icon?family=Material+Icons);
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
+@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
 .ebtn {
-  background-color: #ffffff;
+  background-color: #DEE2E6;
   color: black;
   border: none;
   cursor: pointer;
@@ -1331,4 +1335,59 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+.ebg-active-secondary {
+  background-color: #3AC82E;
+}
+.ebg-active-secondaryDark {
+  background-color: #00A855;
+}
+.ebg-active-secondaryLight {
+  background-color: #CBFFC7;
+}
+.ebg-active-primary {
+  background-color: #00AEE5;
+}
+.ebg-active-primaryDark {
+  background-color: #007FD8;
+}
+.ebg-active-primaryLight {
+  background-color: #CEF3FF;
+}
+.ebg-active-danger {
+  background-color: #FE4747;
+}
+.ebg-active-dangerDark {
+  background-color: #B02A37;
+}
+.ebg-active-dangerLight {
+  background-color: #f8d7da;
+}
+.ebg-active-warning {
+  background-color: #FFBA3A;
+}
+.ebg-active-warningDark {
+  background-color: #997404;
+  color: #ffffff !important;
+}
+.ebg-active-warningLight {
+  background-color: #FFF3CD;
+}
+.ebg-active-info {
+  background-color: #0DCAF0;
+}
+.ebg-active-infoDark {
+  background-color: #087990;
+}
+.ebg-active-infoLight {
+  background-color: #9EEAF9;
+}
+.ebg-active-success {
+  background-color: #00A96B;
+}
+.ebg-active-successDark {
+  background-color: #146C43;
+}
+.ebg-active-successLight {
+  background-color: #D1E7DD;
 }</style>

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

@@ -17,6 +17,10 @@ export default class Button extends SvelteComponentTyped<{
     shade?: string | undefined;
     outlineShade?: string | undefined;
     className?: string | undefined;
+    actived?: {
+        state: boolean;
+        color: string;
+    } | undefined;
 }, {
     click: MouseEvent;
     focus: FocusEvent;
@@ -48,6 +52,10 @@ declare const __propDef: {
         shade?: string | undefined;
         outlineShade?: string | undefined;
         className?: string | undefined;
+        actived?: {
+            state: boolean;
+            color: string;
+        } | undefined;
     };
     events: {
         click: MouseEvent;

package/components/Button/ButtoonActiveClass.scss

@@ -0,0 +1,63 @@
+@import './../variable.scss';
+
+
+
+.ebg-active-secondary{
+    background-color: $secondary;
+  }
+
+  .ebg-active-secondaryDark{
+    background-color: $secondary-dark;
+  }
+
+  .ebg-active-secondaryLight{
+    background-color: $secondary-light;
+  }
+
+  .ebg-active-primary {
+    background-color: $primary;
+  }
+
+  .ebg-active-primaryDark {
+    background-color: $primary-dark;
+  }
+  .ebg-active-primaryLight {
+    background-color: $primary-light;
+  }
+  .ebg-active-danger {
+    background-color: $danger ;
+  }
+  .ebg-active-dangerDark {
+    background-color: $danger-dark;
+  }
+  .ebg-active-dangerLight {
+    background-color: $danger-light;
+  }
+  .ebg-active-warning {
+    background-color: $warning;
+  }
+  .ebg-active-warningDark {
+    background-color: $warning-dark;
+    color: $white !important;
+  }
+  .ebg-active-warningLight {
+    background-color: $warning-light;
+  }
+  .ebg-active-info {
+    background-color: $info;
+  }
+  .ebg-active-infoDark {
+    background-color: $info-dark;
+  }
+  .ebg-active-infoLight {
+    background-color: $info-light;
+  }
+  .ebg-active-success {
+    background-color: $success;
+  }
+  .ebg-active-successDark {
+    background-color: $success-dark;
+  }
+  .ebg-active-successLight {
+    background-color: $success-light;
+  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enki-tek/fms-web-components",
-  "version": "0.0.71",
+  "version": "0.0.73",
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",
@@ -60,6 +60,7 @@
     "./components/Button/Button.scss": "./components/Button/Button.scss",
     "./components/Button/Button.stories": "./components/Button/Button.stories.js",
     "./components/Button/Button.svelte": "./components/Button/Button.svelte",
+    "./components/Button/ButtoonActiveClass.scss": "./components/Button/ButtoonActiveClass.scss",
     "./components/Button/buttonConfig": "./components/Button/buttonConfig.js",
     "./components/Card/Card.scss": "./components/Card/Card.scss",
     "./components/Card/Card.stories": "./components/Card/Card.stories.js",