@sierra-95/svelte-scaffold 1.2.13 → 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/package.json

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