@enki-tek/fms-web-components 0.0.7 → 0.0.9

package/components/CardIcon/CardIcon.scss

@@ -6,7 +6,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-	gap: 10px;
+	gap: 0 !important;
 	flex: 1 0 0;
 	border-radius: 10px;
 	border: 1px dashed $white-cardicon;
@@ -31,6 +31,7 @@
 	@extend %common-fontstyle;
 	line-height: 40px;
 	padding: 10px;
+	margin-top: 10px;
 }
 
 :global(.cardicon-main .card-title) {
@@ -50,7 +51,9 @@
 	font-size: 13px;
 	@extend %common-fontstyle;
 }
-
+:global(.card-body-modifier) {
+	padding: 0 1rem;
+}
 %common-fontstyle {
 	font-family: $bodyFonts;
 	font-style: normal;
@@ -90,6 +93,6 @@
 	justify-content: end !important;
 }
 
-.top {
+.left {
 	justify-content: start !important;
 }

package/components/CardIcon/CardIcon.svelte

@@ -3,7 +3,7 @@ import { locationConfig, slotLocationConfig } from "./CardIconConfig";
 export let title = "Card title";
 export let name = "bell";
 export let location = "bottom-right";
-export let slotPosition = "top";
+export let subtitlePosition = "left";
 export let cardbody = "";
 export let cardsubtitle = "";
 let locationStyle = [`custom-card-style`];
@@ -11,8 +11,8 @@ if (locationConfig.includes(location)) {
   locationStyle.push(location);
 }
 let slotLocation = [`cardicon-content`];
-if (slotLocationConfig.includes(slotPosition)) {
-  slotLocation.push(slotPosition);
+if (slotLocationConfig.includes(subtitlePosition)) {
+  slotLocation.push(subtitlePosition);
 }
 </script>
 
@@ -22,27 +22,31 @@ if (slotLocationConfig.includes(slotPosition)) {
 		<Icon {name} />
 	</div>
 
-	<div class={slotLocation.join(' ')}>
-		<slot name="cardsubtitle">
-			{#if cardsubtitle}
-				{cardsubtitle}
-			{:else}
-				<slot />
-			{/if}
-		</slot>
-	</div>
-
-	<CardBody>
-		<div class="custom-body-slot">
-			<slot name="cardbody">
-				{#if cardbody}
-					{cardbody}
+	{#if $$slots.cardsubtitle || cardsubtitle}
+		<div class={slotLocation.join(' ')}>
+			<slot name="cardsubtitle">
+				{#if cardsubtitle}
+					{cardsubtitle}
 				{:else}
 					<slot />
 				{/if}
 			</slot>
 		</div>
-	</CardBody>
+	{/if}
+
+	{#if $$slots.cardbody || cardbody}
+		<CardBody class="card-body-modifier">
+			<div class="custom-body-slot">
+				<slot name="cardbody">
+					{#if cardbody}
+						{cardbody}
+					{:else}
+						<slot />
+					{/if}
+				</slot>
+			</div>
+		</CardBody>
+	{/if}
 </Card>
 
 <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@@ -57,7 +61,7 @@ if (slotLocationConfig.includes(slotPosition)) {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 10px;
+  gap: 0 !important;
   flex: 1 0 0;
   border-radius: 10px;
   border: 1px dashed #B8B8B8;
@@ -79,6 +83,7 @@ if (slotLocationConfig.includes(slotPosition)) {
   font-size: 30px;
   line-height: 40px;
   padding: 10px;
+  margin-top: 10px;
 }
 :global(.cardicon-main .card-title) {
   color: #000000;
@@ -93,6 +98,9 @@ if (slotLocationConfig.includes(slotPosition)) {
   color: #000000;
   font-size: 13px;
 }
+:global(.card-body-modifier) {
+  padding: 0 1rem;
+}
 .cardicon-content, :global(.cardicon-main .card-title), .custom-body-slot {
   font-family: Roboto;
   font-style: normal;
@@ -117,7 +125,7 @@ if (slotLocationConfig.includes(slotPosition)) {
 .right {
   justify-content: end !important;
 }
-.top {
+.left {
   justify-content: start !important;
 }
 :global(.ebg-none) {

package/components/CardIcon/CardIcon.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
         title?: string | undefined;
         name?: string | undefined;
         location?: string | undefined;
-        slotPosition?: string | undefined;
+        subtitlePosition?: string | undefined;
         cardbody?: string | undefined;
         cardsubtitle?: string | undefined;
     };

package/components/CheckBox/Checkbox.scss

@@ -1,32 +1,32 @@
 @import '../variable.scss';
 
 :global(.inp-checkbox .form-check-input:checked) {
-    background-color: $secondary;
-    border-color: $secondary;
-    border: 1.8px solid $secondary !important;
+	background-color: $secondary;
+	border-color: $secondary;
+	border: 1.8px solid $secondary !important;
 }
 
 :global(.inp-checkbox .form-check-input:focus) {
-    border-color: $secondary;
-    outline: 0;
-    box-shadow: none;
+	border-color: $secondary;
+	outline: 0;
+	box-shadow: none;
 }
 
-:global(.inp-checkbox .form-check-input[type=checkbox]) {
-    border-radius: 3px;
-    border: 1.8px solid $gray-500;
+:global(.inp-checkbox .form-check-input[type='checkbox']) {
+	border-radius: 3px;
+	border: 1.8px solid $gray-500;
 }
 
 :global(.inp-checkbox .form-check-input:disabled:not(:checked)) {
-    background-color: $gray-300;
-    border-color: $gray-600;
+	background-color: $gray-300;
+	border-color: $gray-600;
 }
 
 :global(.form-check-label) {
-    text-transform: capitalize;
-    font-family: $bodyFonts;
-    font-style: normal;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 28px;
-}
+	text-transform: capitalize;
+	font-family: $bodyFonts;
+	font-style: normal;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 28px;
+}

package/components/CheckBox/Checkbox.stories.js

@@ -1,51 +1,50 @@
 import Checkbox from './Checkbox.svelte';
 
-export default{
-    title: 'FMS/Checkbox',
-    component: Checkbox,
-    tags:['autodocs'],
-    argTypes:{
-        label:{control:{type:'text'}},
-        disable: { control: { type: 'text' } },
-        enable: { control: { type: 'text' } },
-        size: { control: { type: 'select'},options:['lg','md'] },
-        value:{control:{type:'text'}}
-    }
+export default {
+	title: 'FMS/Checkbox',
+	component: Checkbox,
+	tags: ['autodocs'],
+	argTypes: {
+		label: { control: { type: 'text' } },
+		disable: { control: { type: 'text' } },
+		enable: { control: { type: 'text' } },
+		size: { control: { type: 'select' }, options: ['lg', 'md'] },
+		value: { control: { type: 'text' } }
+	}
 };
 
-
 export const Default = {
-    args:{
-        label:'clicked',
-        disable:'false',
-        enable:'false',
-        value:'arun'
-    }
-}
+	args: {
+		label: 'clicked',
+		disable: 'false',
+		enable: 'false',
+		value: 'arun'
+	}
+};
 
 export const enabledCheckBox = {
-    args:{
-        label:'clicked',
-        disable:'false',
-        enable:'true',
-        value:'arun'
-    }
-}
+	args: {
+		label: 'clicked',
+		disable: 'false',
+		enable: 'true',
+		value: 'arun'
+	}
+};
 
 export const enabledWithDisabledCheckBox = {
-    args:{
-        label:'clicked',
-        disable:'true',
-        enable:'true',
-        value:'arun'
-    }
-}
+	args: {
+		label: 'clicked',
+		disable: 'true',
+		enable: 'true',
+		value: 'arun'
+	}
+};
 
 export const diabledButNotEnabledCheckBox = {
-    args:{
-        label:'clicked',
-        disable:'true',
-        enable:'false',
-        value:'arun'
-    }
-}
+	args: {
+		label: 'clicked',
+		disable: 'true',
+		enable: 'false',
+		value: 'arun'
+	}
+};

package/components/CheckBox/Checkbox.svelte

@@ -1,24 +1,28 @@
 <script>
-    import { Input } from 'sveltestrap';
+	import { Input } from 'sveltestrap';
 
-    export let label='my'
-    export let value = 'name'
-    export let disable;
-    export let enable ;
-    export let size = 'lg';
-    
-  </script>
-  
-  <Input type="checkbox"
-    class='inp-checkbox' 
-    bsSize={size} 
-    label={label} 
-    bind:value={value} 
-    checked={enable === 'true'? true : enable ==='false'? false : false } 
-    disabled={disable === 'true'? true : disable ==='false'? false : false}
-  />
+	export let label = 'my';
+	export let value = 'name';
+	export let disable;
+	export let enable;
+	export let size = 'lg';
+	export let name = 'checkboxname';
+	export let valid;
+</script>
 
-  <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+<Input
+	type="checkbox"
+	class="inp-checkbox"
+	{name}
+	bsSize={size}
+	{label}
+	bind:value
+	valid={enable === 'true' ? true : enable === 'false' ? false : false}
+	checked={enable === 'true' ? true : enable === 'false' ? false : false}
+	disabled={disable === 'true' ? true : disable === 'false' ? false : false}
+/>
+
+<style>@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);
@@ -34,7 +38,7 @@
   outline: 0;
   box-shadow: none;
 }
-:global(.inp-checkbox .form-check-input[type=checkbox]) {
+:global(.inp-checkbox .form-check-input[type="checkbox"]) {
   border-radius: 3px;
   border: 1.8px solid #adb5bd;
 }
@@ -611,4 +615,4 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
-}</style>
+}</style>

package/components/CheckBox/Checkbox.svelte.d.ts

@@ -2,11 +2,13 @@
 /** @typedef {typeof __propDef.events}  CheckboxEvents */
 /** @typedef {typeof __propDef.slots}  CheckboxSlots */
 export default class Checkbox extends SvelteComponentTyped<{
+    valid: any;
     disable: any;
     enable: any;
     label?: string | undefined;
     size?: string | undefined;
     value?: string | undefined;
+    name?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -17,11 +19,13 @@ export type CheckboxSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        valid: any;
         disable: any;
         enable: any;
         label?: string | undefined;
         size?: string | undefined;
         value?: string | undefined;
+        name?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enki-tek/fms-web-components",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",