@sierra-95/svelte-scaffold 1.2.12 → 1.2.14

package/dist/Core/components/Form/Input/TextArea/textarea.svelte

@@ -12,22 +12,25 @@
     width = '100%',
     maxWidth = '',
     textColor = 'inherit',
+    showInput = true,
     ...rest
   } = $props();
 </script>
 
-<label class="sierra-input" style="width: {width}; max-width: {maxWidth}; color: {textColor}" for={id}>{label}
-  <textarea 
-    {...rest}
-    id={id} 
-    name={id} 
-    rows={rows}
-    bind:value={value}
-    placeholder={placeholder}
-    required={rest.required}
-    readonly={rest.readonly}
-    style="background-color: {background}; border: {borderSize} solid {borderColor}; border-radius: {borderRadius};"
-    onclick={(e: MouseEvent) => {
-      rest.onclick?.(e);
-    }}></textarea>
-</label>
+{#if showInput}
+  <label class="sierra-input" style="width: {width}; max-width: {maxWidth}; color: {textColor}" for={id}>{label}
+    <textarea 
+      {...rest}
+      id={id} 
+      name={id} 
+      rows={rows}
+      bind:value={value}
+      placeholder={placeholder}
+      required={rest.required}
+      readonly={rest.readonly}
+      style="background-color: {background}; border: {borderSize} solid {borderColor}; border-radius: {borderRadius};"
+      onclick={(e: MouseEvent) => {
+        rest.onclick?.(e);
+      }}></textarea>
+  </label>
+{/if}

package/dist/Core/components/Form/Input/TextArea/textarea.svelte.d.ts

@@ -11,6 +11,7 @@ declare const Textarea: import("svelte").Component<{
     width?: string;
     maxWidth?: string;
     textColor?: string;
+    showInput?: boolean;
 } & Record<string, any>, {}, "value">;
 type Textarea = ReturnType<typeof Textarea>;
 export default Textarea;

package/dist/Core/components/Form/Input/input/input.svelte

@@ -13,26 +13,29 @@
     width = '100%',
     maxWidth = '',
     textColor = 'inherit',
+    showInput = true,
     autocomplete = undefined as _autocomplete,
     ...rest
   } = $props();
 </script>
 
-<label class="sierra-input" style="width: {width}; max-width: {maxWidth}; color: {textColor}" for={id}>{label}
-  <input 
-    {...rest}
-    id={id} 
-    name={id} 
-    type={type} 
-    bind:value={value}
-    placeholder={placeholder}
-    autocomplete={autocomplete ?? undefined}
-    required={rest.required}
-    readonly={rest.readonly}
-    class="{underline? 'underline-input':''}"
-    style="background-color: {background}; border: {borderSize} solid {borderColor};"
-    onclick={(e: MouseEvent) => {
-      rest.onclick?.(e);
-    }}
-    />
-</label>
+{#if showInput}
+  <label class="sierra-input" style="width: {width}; max-width: {maxWidth}; color: {textColor}" for={id}>{label}
+    <input 
+      {...rest}
+      id={id} 
+      name={id} 
+      type={type} 
+      bind:value={value}
+      placeholder={placeholder}
+      autocomplete={autocomplete ?? undefined}
+      required={rest.required}
+      readonly={rest.readonly}
+      class="{underline? 'underline-input':''}"
+      style="background-color: {background}; border: {borderSize} solid {borderColor};"
+      onclick={(e: MouseEvent) => {
+        rest.onclick?.(e);
+      }}
+      />
+  </label>
+{/if}

package/dist/Core/components/Form/Input/input/input.svelte.d.ts

@@ -11,6 +11,7 @@ declare const Input: import("svelte").Component<{
     width?: string;
     maxWidth?: string;
     textColor?: string;
+    showInput?: boolean;
     autocomplete?: AutoFill | null | undefined;
 } & Record<string, any>, {}, "value">;
 type Input = ReturnType<typeof Input>;

package/dist/Core/components/Form/Input/password/password.svelte

@@ -12,31 +12,34 @@
     export let width: string = '100%';
     export let maxWidth: string = '';
     export let textColor: string = 'inherit';
+    export let showInput = true;
     export let autocomplete = undefined as _autocomplete;
     export let required = false;
   
     let show: boolean = false;
 </script>
 
-<label class="sierra-input" style="width: {width}; max-width: {maxWidth}; color: {textColor}" for={id}>{label}
-    <div style="position: relative;">
-        <input
-            type={show ? "text" : "password"} 
-            id={id} 
-            name={id}
-            bind:value={value} 
-            placeholder={placeholder}
-            autocomplete={autocomplete ?? undefined}
-            required={required}
-            class="{underline? 'underline-input':''}"
-            style="width: 100%; background-color: {background}; border: {borderSize} solid {borderColor}; border-radius: 4px;"
-        />
-        <button on:click|preventDefault={() => show = !show}>
-            {#if show}
-                <i class="fa fa-eye"></i>
-            {:else}  
-                <i class="fa fa-eye-slash"></i>
-            {/if}
-        </button>
-    </div>
-</label>
+{#if showInput}
+    <label class="sierra-input" style="width: {width}; max-width: {maxWidth}; color: {textColor}" for={id}>{label}
+        <div style="position: relative;">
+            <input
+                type={show ? "text" : "password"} 
+                id={id} 
+                name={id}
+                bind:value={value} 
+                placeholder={placeholder}
+                autocomplete={autocomplete ?? undefined}
+                required={required}
+                class="{underline? 'underline-input':''}"
+                style="width: 100%; background-color: {background}; border: {borderSize} solid {borderColor}; border-radius: 4px;"
+            />
+            <button on:click|preventDefault={() => show = !show}>
+                {#if show}
+                    <i class="fa fa-eye"></i>
+                {:else}  
+                    <i class="fa fa-eye-slash"></i>
+                {/if}
+            </button>
+        </div>
+    </label>
+{/if}

package/dist/Core/components/Form/Input/password/password.svelte.d.ts

@@ -23,6 +23,7 @@ declare const Password: $$__sveltets_2_IsomorphicComponent<{
     width?: string;
     maxWidth?: string;
     textColor?: string;
+    showInput?: boolean;
     autocomplete?: AutoFill | null | undefined;
     required?: boolean;
 }, {

package/dist/Core/components/Form/Input/select/select.svelte

@@ -1,26 +1,29 @@
 <script lang="ts">
-  export let id: string = '';
-  export let label: string = '';
-  export let value: string | number = '';
-  export let options: { value: string | number; label: string; disabled?: boolean }[] = [];
-  export let background: string ='transparent';
-  export let width: string = '100%';
-  export let maxWidth: string = '';
-  export let height: string = '100%';
-  export let textColor: string = 'inherit';
-  export let optionsColor: string = 'inherit';
-  export let optionsBackground: string = 'white';
+    export let id: string = '';
+    export let label: string = '';
+    export let value: string | number = '';
+    export let options: { value: string | number; label: string; disabled?: boolean }[] = [];
+    export let background: string ='transparent';
+    export let width: string = '100%';
+    export let maxWidth: string = '';
+    export let height: string = '100%';
+    export let textColor: string = 'inherit';
+    export let optionsColor: string = 'inherit';
+    export let optionsBackground: string = 'white';
+    export let showInput = true;
 </script>
 
-<label class="sierra-input" style="width: {width}; max-width: {maxWidth}; color: {textColor}" for={id}>{label}
-    <select bind:value={value} id={id} name={id} required style="background-color: {background}; height: {height}">
-        {#each options as option}
-            <option 
-                value={option.value} 
-                disabled={option.disabled}
-                style="color: {optionsColor}; background-color: {optionsBackground};"
-            >{option.label}
-            </option>
-        {/each}
-    </select>
-</label>
+{#if showInput}
+    <label class="sierra-input" style="width: {width}; max-width: {maxWidth}; color: {textColor}" for={id}>{label}
+        <select bind:value={value} id={id} name={id} required style="background-color: {background}; height: {height}">
+            {#each options as option}
+                <option 
+                    value={option.value} 
+                    disabled={option.disabled}
+                    style="color: {optionsColor}; background-color: {optionsBackground};"
+                >{option.label}
+                </option>
+            {/each}
+        </select>
+    </label>
+{/if}

package/dist/Core/components/Form/Input/select/select.svelte.d.ts

@@ -27,6 +27,7 @@ declare const Select: $$__sveltets_2_IsomorphicComponent<{
     textColor?: string;
     optionsColor?: string;
     optionsBackground?: string;
+    showInput?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/Core/components/others/WhatsappShare/whatsapp.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+    import { Button, addToast } from "../../../../index.js";
+    const {
+        shareURL,
+        shareTitle = '',
+        shareText = '',
+        limitShareText = 30,
+        label = "Share on WhatsApp",
+    } = $props();
+
+    let copyLink = $state(false);
+
+    const limitWords = (text:string, maxWords:number) => {
+        const words = text.split(/\s+/);
+        const trimmed = words.slice(0, maxWords).join(' ');
+        return words.length > maxWords ? trimmed + ' ...' : trimmed;
+    };
+
+    const handleShare = async () => {
+        if (navigator.share) {
+            try {
+                await navigator.share({
+                    title: shareTitle,
+                    text: limitWords(shareText, limitShareText),
+                    url: shareURL,
+                });
+            } catch (err) {
+                console.error('Error sharing:', err);
+            }
+        } else {
+            const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+            const message = `${limitWords(shareText, limitShareText)}\n\n${shareURL}`;
+            const encoded = encodeURIComponent(message);
+            
+            const url = isMobile
+                ? `https://wa.me/?text=${encoded}`
+                : `https://web.whatsapp.com/send?text=${encoded}`;
+
+            window.open(url, "_blank");
+            copyLink = true;
+        }
+    };
+    const copyToClipboard = () => {
+        navigator.clipboard.writeText(shareURL);
+        copyLink = false;
+        addToast({
+            status: 'success',
+            message: 'Link copied to clipboard!'
+        })
+    };
+</script>
+{#if copyLink}
+    <Button variant="outlined" startIcon="fa-solid fa-copy" onclick={copyToClipboard}>Copy Link</Button>
+{:else}
+    <Button onclick={handleShare} variant="outlined" startIcon="fa-brands fa-whatsapp" iconSize="1.2rem" color="none" style="text-[#25D366]">{label}</Button>
+{/if}

package/dist/Core/components/others/WhatsappShare/whatsapp.svelte.d.ts

@@ -0,0 +1,9 @@
+declare const Whatsapp: import("svelte").Component<{
+    shareURL: any;
+    shareTitle?: string;
+    shareText?: string;
+    limitShareText?: number;
+    label?: string;
+}, {}, "">;
+type Whatsapp = ReturnType<typeof Whatsapp>;
+export default Whatsapp;

package/dist/index.d.ts

@@ -41,6 +41,7 @@ export { default as Form } from './Core/components/Form/Form/form.svelte';
 export { default as Carousel } from './Core/components/others/Carousel/carousel.svelte';
 export { default as Avatar } from './Core/components/others/Avatar/avatar.svelte';
 export { default as ColorPicker } from './Core/components/others/ColorPicker/main.svelte';
+export { default as WhatsappShare } from './Core/components/others/WhatsappShare/whatsapp.svelte';
 export { default as GlobalSearch } from './Core/features/GlobalSearch/main.svelte';
 export { default as ToastManager } from './Core/features/ToastManager/toastManager.svelte';
 export { default as Editor } from './Modules/Editor/main.svelte';

package/dist/index.js

@@ -48,6 +48,7 @@ export { default as Form } from './Core/components/Form/Form/form.svelte';
 export { default as Carousel } from './Core/components/others/Carousel/carousel.svelte';
 export { default as Avatar } from './Core/components/others/Avatar/avatar.svelte';
 export { default as ColorPicker } from './Core/components/others/ColorPicker/main.svelte';
+export { default as WhatsappShare } from './Core/components/others/WhatsappShare/whatsapp.svelte';
 //####################Features##################################
 export { default as GlobalSearch } from './Core/features/GlobalSearch/main.svelte';
 export { default as ToastManager } from './Core/features/ToastManager/toastManager.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sierra-95/svelte-scaffold",
-	"version": "1.2.12",
+	"version": "1.2.14",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",