@likable-hair/svelte 0.0.75 → 0.0.77

package/forms/Textfield.svelte

@@ -1,6 +1,6 @@
 <script context="module"></script>
 
-<script>export let label = "", placeholder = "", color = null, value = "", disabled = false, variant = 'outlined', width = "100%", height = "50px", maxWidth = undefined, minWidth = undefined, textColor = "black", borderWeight = "2px", borderRadius = "5px", borderColor = null, focusBorderColor = null, focusedBoxShadow = undefined, backgroundColor = null, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined, type = 'text', readonly = false, inputElement = undefined;
+<script>export let label = "", placeholder = "", color = null, value = "", disabled = false, variant = 'outlined', width = "100%", height = "50px", maxWidth = undefined, minWidth = undefined, textColor = "black", borderWeight = "2px", borderRadius = "5px", borderColor = null, focusBorderColor = null, focusedBoxShadow = undefined, backgroundColor = null, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined, type = 'text', readonly = false, inputElement = undefined, autocomplete = true;
 import { v4 as uuidv4 } from 'uuid';
 import { onMount } from 'svelte';
 let inputId = uuidv4(), focused = false, legendWidth = 0, labelElement = undefined;
@@ -110,7 +110,7 @@ $: if (!!labelElement) {
 </style>
 
 
-<div 
+<div
   style:width={width}
   style:min-width={minWidth}
   style:max-width={maxWidth}
@@ -121,12 +121,12 @@ $: if (!!labelElement) {
   style:--textfield-focus-border-color={focusBorderColor}
   style:--textfield-legend-width={legendWidth + 'px'}
   style:--textfield-focused-box-shadow={focusedBoxShadow}
-  class="input-container" 
+  class="input-container"
   class:focused={focused}
   class:not-focused={!focused}
   class:texted={focused || !!value}
 >
-  <fieldset 
+  <fieldset
     aria-hidden="true"
     style:border-radius={borderRadius}
     style:background-color={backgroundColor}
@@ -141,12 +141,12 @@ $: if (!!labelElement) {
   >
     {#if variant == 'outlined'}
         <legend class="legend-outlined"></legend>
-        <label 
+        <label
           for={inputId}
           class="label-outlined"
           bind:this={labelElement}
         >{label}</label>
-        <div 
+        <div
           style:display="flex"
           style:position="relative"
           style:bottom="8px"
@@ -157,11 +157,12 @@ $: if (!!labelElement) {
             <slot name="prepend-inner"></slot>
           </div>
           {#if type == 'password'}
-            <input 
+            <input
+              autocomplete={autocomplete ? 'on' : 'new-password'}
               style:background-color={backgroundColor}
               style:color={textColor}
               style:font-size={fontSize}
-              id={inputId} 
+              id={inputId}
               class="input-outlined"
               type="password"
               placeholder={placeholder}
@@ -180,11 +181,12 @@ $: if (!!labelElement) {
               bind:this={inputElement}
             />
           {:else if type == 'text'}
-            <input 
+            <input
+              autocomplete={autocomplete ? 'on' : 'off'}
               style:background-color={backgroundColor}
               style:color={textColor}
               style:font-size={fontSize}
-              id={inputId} 
+              id={inputId}
               class="input-outlined"
               type="text"
               placeholder={placeholder}
@@ -231,7 +233,7 @@ $: if (!!labelElement) {
           </div>
         </div>
     {:else if variant == 'boxed'}
-      <div 
+      <div
         style:display="flex"
       >
         <div>
@@ -239,6 +241,7 @@ $: if (!!labelElement) {
         </div>
         {#if type == 'password'}
           <input
+            autocomplete={autocomplete ? 'on' : 'new-password'}
             style:background-color={backgroundColor}
             style:color={textColor}
             style:font-size={fontSize}
@@ -258,10 +261,10 @@ $: if (!!labelElement) {
             on:keydown
             on:keypress
             on:keyup
-            bind:this={inputElement}
           />
         {:else if type == 'text'}
           <input
+            autocomplete={autocomplete ? 'on' : 'off'}
             style:background-color={backgroundColor}
             style:color={textColor}
             style:font-size={fontSize}

package/forms/Textfield.svelte.d.ts

@@ -28,6 +28,7 @@ declare const __propDef: {
         type?: 'text' | 'password' | 'number';
         readonly?: boolean;
         inputElement?: HTMLElement;
+        autocomplete?: boolean;
     };
     events: {
         change: Event;

package/media/AttachmentDownloader.svelte

@@ -1,4 +1,4 @@
-<script>export let title = undefined, description = undefined, borderColor = "#B8B8B8", iconColor = "#8D8D8D", borderWidth = '1px', maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = 'fit-content', height = undefined;
+<script>export let title = undefined, description = undefined, borderColor = "#B8B8B8", iconColor = "#8D8D8D", iconSize = 40, iconName = 'mdi-file', borderWidth = '1px', maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = 'fit-content', height = undefined;
 import Icon from './Icon.svelte';
 import Card from '../common/Card.svelte';
 </script>
@@ -31,10 +31,11 @@ import Card from '../common/Card.svelte';
   <div
     style:display="flex"
     style:align-items="center"
+    style:gap="10px"
   >
     <Icon 
-      name="mdi-file" 
-      size={40} 
+      name={iconName}
+      size={iconSize}
       color={iconColor}
     ></Icon>
     <div

package/media/AttachmentDownloader.svelte.d.ts

@@ -5,6 +5,8 @@ declare const __propDef: {
         description?: string;
         borderColor?: string;
         iconColor?: string;
+        iconSize?: number;
+        iconName?: string;
         borderWidth?: string;
         maxWidth?: string;
         maxHeight?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "0.0.75",
+  "version": "0.0.77",
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",