@likable-hair/svelte 0.0.45 → 0.0.49

package/buttons/Button.svelte

@@ -1,8 +1,10 @@
-<script >export let type = 'default', active = false, loading = false, icon = undefined, iconSize = 15, clazz = '', maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = undefined, height = undefined, textAlign = "center", cursor = "pointer", padding = "5px", fontSize = undefined, color = undefined, display = undefined, justifyContent = undefined, alignItems = undefined, backgroundColor = undefined, hoverBackgroundColor = '#88888847', activeBackgroundColor = hoverBackgroundColor, borderRadius = undefined, border = undefined, boxShadow = undefined;
+<script >export let type = 'default', active = false, loading = false, icon = undefined, iconSize = 15, clazz = '', maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = undefined, height = undefined, textAlign = "center", cursor = "pointer", padding = "5px", fontSize = undefined, color = undefined, display = undefined, justifyContent = undefined, alignItems = undefined, backgroundColor = undefined, hoverBackgroundColor = '#88888847', activeBackgroundColor = hoverBackgroundColor, borderRadius = undefined, border = undefined, boxShadow = undefined, loaderHeight = undefined, loaderWidth = undefined, disabled = false;
 export { clazz as class };
 import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
 function handleClick(event) {
+    if (disabled)
+        return;
     dispatch('click', {
         nativeEvent: event
     });
@@ -45,6 +47,8 @@ import CircularLoader from '../loaders/CircularLoader.svelte';
   {#if loading}
     <CircularLoader
       color={color}
+      height={loaderHeight}
+      width={loaderWidth}
     ></CircularLoader>
   {:else}
     {#if !!icon}
@@ -118,8 +122,8 @@ import CircularLoader from '../loaders/CircularLoader.svelte';
   .no-select {
     -webkit-touch-callout: none; /* iOS Safari */
       -webkit-user-select: none; /* Safari */
-      -khtml-user-select: none; /* Konqueror HTML */
-        -moz-user-select: none; /* Old versions of Firefox */
+       -khtml-user-select: none; /* Konqueror HTML */
+         -moz-user-select: none; /* Old versions of Firefox */
           -ms-user-select: none; /* Internet Explorer/Edge */
               user-select: none; /* Non-prefixed version, currently
                                     supported by Chrome, Edge, Opera and Firefox */

package/buttons/Button.svelte.d.ts

@@ -27,6 +27,9 @@ declare const __propDef: {
         borderRadius?: string;
         border?: string;
         boxShadow?: string;
+        loaderHeight?: string;
+        loaderWidth?: string;
+        disabled?: boolean;
     };
     events: {
         click: CustomEvent<{

package/common/Menu.svelte

@@ -1,13 +1,13 @@
 <script >import { v4 as uuidv4 } from 'uuid';
 import { fly } from 'svelte/transition';
-export let open = false, top = undefined, left = undefined, width, height, activator = undefined, anchor = 'bottom', closeOnClickOutside = false, inAnimation = fly, inAnimationConfig = {
+export let open = false, top = undefined, left = undefined, width, height, maxHeight = undefined, overflow = "auto", refreshPosition = false, boxShadow = undefined, borderRadius = undefined, activator = undefined, anchor = 'bottom', closeOnClickOutside = false, inAnimation = fly, inAnimationConfig = {
     duration: 100,
     y: 10
 }, outAnimation = fly, outAnimationConfig = {
     duration: 100,
     y: 10
-};
-let zIndex = 50, menuElement, currentUid = uuidv4();
+}, menuElement = undefined;
+let zIndex = 50, currentUid = uuidv4();
 function calculateMenuPosition(params) {
     if (!!params.menuElement) {
         if (!!params.activator) {
@@ -58,6 +58,13 @@ $: if (open) {
     if (!!maxZIndex)
         zIndex = maxZIndex + 2;
 }
+$: if (!!width) {
+    calculateMenuPosition({ activator, menuElement });
+}
+$: if (refreshPosition) {
+    calculateMenuPosition({ activator, menuElement });
+    refreshPosition = false;
+}
 $: if (closeOnClickOutside && !!menuElement) {
     window.addEventListener('click', (event) => {
         open = false;
@@ -81,9 +88,13 @@ $: if (closeOnClickOutside && !!menuElement) {
     style:z-index={zIndex}
     style:position="absolute"
     style:top={top + "px"}
+    style:box-shadow={boxShadow}
+    style:border-radius={borderRadius}
     style:left={left + "px"}
     style:height={height}
+    style:max-height={maxHeight}
     style:width={width}
+    style:overflow={overflow}
     in:inAnimation={inAnimationConfig}
     out:outAnimation={outAnimationConfig}
   >

package/common/Menu.svelte.d.ts

@@ -7,6 +7,11 @@ declare const __propDef: {
         left?: number;
         width: string;
         height: string;
+        maxHeight?: string;
+        overflow?: string;
+        refreshPosition?: boolean;
+        boxShadow?: string;
+        borderRadius?: string;
         activator?: HTMLElement;
         anchor?: 'bottom' | 'bottom-center';
         closeOnClickOutside?: boolean;
@@ -14,6 +19,7 @@ declare const __propDef: {
         inAnimationConfig?: SlideParams | FlyParams | FadeParams;
         outAnimation?: (node: Element, params?: SlideParams | FlyParams | FadeParams) => TransitionConfig;
         outAnimationConfig?: SlideParams | FlyParams | FadeParams;
+        menuElement?: HTMLElement;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dates/TimePickerTextField.svelte

@@ -0,0 +1,90 @@
+<script >import Textfield from "../forms/Textfield.svelte";
+import VerticalTextSwitch from "../forms/VerticalTextSwitch.svelte";
+import "./DatePicker.svelte";
+export let hourFormat = "24", dayPeriod = "am", time = undefined, text = "", fieldSeparator = ":", placeholder = "Insert time...", focusedBoxShadow = "#C0D6FF 0px 2px 10px", borderColor = "", borderWeight = "1px", fontSize = "16px", width = "100%";
+let minutes = undefined, hours = undefined, switchValue = false;
+function checkHour(hour) {
+    if (hourFormat == "12")
+        return hour > 0 && hour <= 12;
+    else
+        return hour >= 0 && hour < 24;
+}
+function checkMinute(minute) {
+    return minute >= 0 && minute < 60;
+}
+$: dayPeriod = switchValue ? "pm" : "am";
+$: {
+    let fields = text.split(fieldSeparator);
+    hours = +fields[0];
+    minutes = +fields[1];
+    if (fields[1]?.length != 2) {
+        time = undefined;
+    }
+    else {
+        if (!isNaN(hours) && !isNaN(minutes) && checkHour(hours) && checkMinute(minutes) && fields.length == 2) {
+            if (hourFormat == '12') {
+                if (dayPeriod == 'am' && hours == 12)
+                    hours = 0;
+                else if (dayPeriod == 'pm' && hours != 12)
+                    hours += 12;
+            }
+            time = new Date();
+            time.setHours(hours, minutes, 0);
+        }
+        else
+            time = undefined;
+    }
+}
+let fontSizeNumeric = parseInt(fontSize, 10);
+</script>
+
+<div class="container"
+  style:width
+>
+  <div class="text-field" style:width="100%">
+    <Textfield
+      {placeholder}
+      variant="boxed"
+      {borderColor}
+      {borderWeight}
+      {focusedBoxShadow}
+      {fontSize}
+      width="100%"
+      bind:value={text}
+      paddingLeft="10px"
+    />
+  </div>
+  {#if hourFormat == "12"}
+    <div class="period-selector" style:height="{fontSizeNumeric+16}px">
+      <VerticalTextSwitch
+        bind:value={switchValue}
+        width="{fontSizeNumeric+16}px"
+        hoverBackgroundColor="rgba(0,0,0,0.05)"
+      >
+        <span slot="trueOption"
+          style:font-size={fontSize}
+        >
+          PM
+        </span>
+        <span slot="falseOption"
+          style:font-size={fontSize}
+        >
+          AM
+        </span>
+      </VerticalTextSwitch>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: flex;
+  }
+  .period-selector {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-self: flex-start;
+    margin-left: 20px;
+  }
+</style>

package/dates/TimePickerTextField.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        hourFormat?: "12" | "24";
+        dayPeriod?: "am" | "pm";
+        time?: Date;
+        text?: string;
+        fieldSeparator?: string;
+        placeholder?: string;
+        focusedBoxShadow?: string;
+        borderColor?: string;
+        borderWeight?: string;
+        fontSize?: string;
+        width?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TimePickerTextFieldProps = typeof __propDef.props;
+export declare type TimePickerTextFieldEvents = typeof __propDef.events;
+export declare type TimePickerTextFieldSlots = typeof __propDef.slots;
+export default class TimePickerTextField extends SvelteComponentTyped<TimePickerTextFieldProps, TimePickerTextFieldEvents, TimePickerTextFieldSlots> {
+}
+export {};

package/forms/Autocomplete.svelte

@@ -0,0 +1,219 @@
+<script context="module" ></script>
+
+<script >export let values = [], items, searchFunction = undefined, multiple = false, disabled = false, width = "auto", maxWidth = undefined, 
+// textfield
+textFieldLabel = "", textFieldPlaceholder = "", textFieldColor = null, textFieldVariant = 'boxed', textFieldMaxWidth = "min(100px, 90%)", textFieldMinWidth = undefined, textFieldHeight = "auto", textFieldTextColor = "black", textFieldBorderWeight = "2px", textFieldBorderRadius = "5px", textFieldBorderColor = null, textFieldFocusBorderColor = null, textFieldFocusedBoxShadow = undefined, textFieldBackgroundColor = null, textFieldPadding = undefined, textFieldPaddingLeft = undefined, textFieldPaddingRight = undefined, textFieldPaddingBottom = undefined, textFieldPaddingTop = undefined, textFieldFontSize = undefined, 
+// menu
+menuBackgroundColor = "#FFF", menuBoxShadow = "rgba(149, 157, 165, 0.2) 0px 8px 24px", menuBorderRadius = "5px", focusItemBackgroundColor = "#EEEEEE", selectedItemBackgroundColor = "#D0D0D0", border = '1px solid black', borderRadius = '5px', chipColor = "#D0D0D0", chipTextColor = "black", chipHeight = "30px";
+function select(item) {
+    const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
+    if (!alreadyPresent) {
+        if (multiple)
+            values = [...values, item];
+        else
+            values = [item];
+        refreshMenuWidth();
+    }
+}
+function unselect(item) {
+    values = values.filter((i) => i.value != item.value);
+    refreshMenuWidth();
+}
+function toggle(item) {
+    const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
+    console.log(item, alreadyPresent);
+    if (alreadyPresent)
+        unselect(item);
+    else
+        select(item);
+}
+let menuWidth = undefined, menuHeight = "auto", menuOpened = false, refreshPosition = false;
+function openMenu() {
+    refreshMenuWidth();
+    menuOpened = true;
+}
+function closeMenu() {
+    menuOpened = false;
+}
+function refreshMenuWidth() {
+    menuWidth = activator.offsetWidth + 'px';
+    refreshPosition = true;
+}
+let activator, focusedIndex = undefined;
+function handleTextFieldFocus() {
+    focusedIndex = undefined;
+    openMenu();
+}
+function handleTextFieldBlur() {
+    // closeMenu()
+}
+let menuElement;
+function handleWindowKeyDown(event) {
+    if (event.key == 'ArrowDown' && (focusedIndex < filteredItems.length - 1 || focusedIndex === undefined)) {
+        if (focusedIndex === undefined)
+            focusedIndex = 0;
+        else
+            focusedIndex += 1;
+    }
+    else if (event.key == 'ArrowUp' && (focusedIndex > 0 || focusedIndex === undefined)) {
+        if (focusedIndex === undefined)
+            focusedIndex = filteredItems.length - 1;
+        else
+            focusedIndex -= 1;
+    }
+    else if (event.key == 'Enter' && focusedIndex != undefined) {
+        toggle(filteredItems[focusedIndex]);
+    }
+}
+let input;
+function handleContainerClick() {
+    if (!menuOpened)
+        input.focus();
+}
+let searchText, filteredItems = items;
+$: if (!!searchText) {
+    focusedIndex = undefined;
+    filteredItems = items.filter((it) => {
+        if (!!searchFunction)
+            return searchFunction(it, searchText);
+        else
+            return it.label.toLowerCase().includes(searchText.toLowerCase());
+    });
+}
+else {
+    filteredItems = items;
+}
+import Textfield from "./Textfield.svelte";
+import Chip from '../navigation/Chip.svelte';
+import Menu from '../common/Menu.svelte';
+</script>
+
+<svelte:window></svelte:window>
+
+<div 
+  bind:this={activator}
+  style:width={width}
+  style:max-width={maxWidth}
+  style:opacity={disabled ? '50%' : '100%'}
+  on:click={handleContainerClick}
+>
+  <slot name="selection-container">
+    <div 
+      class="selection-container"
+      style:border={border}
+      style:border-radius={borderRadius}
+    >
+      {#each values as selection}
+        <slot name="selection" selection={selection}>
+          <div
+            style:height={chipHeight}
+          >
+            <Chip
+              color={chipColor}
+              textColor={chipTextColor}
+              close={true}
+              label={true}
+              on:close={() => unselect(selection)}
+            >{selection.label}</Chip>
+          </div>
+        </slot>  
+      {/each}
+
+      <Textfield
+        label={textFieldLabel}
+        placeholder={textFieldPlaceholder}
+        color={textFieldColor}
+        bind:value={searchText}
+        variant={textFieldVariant}
+        maxWidth={textFieldMaxWidth}
+        minWidth={textFieldMinWidth}
+        textColor={textFieldTextColor}
+        borderWeight={textFieldBorderWeight}
+        borderRadius={textFieldBorderRadius}
+        borderColor={textFieldBorderColor}
+        focusBorderColor={textFieldFocusBorderColor}
+        focusedBoxShadow={textFieldFocusedBoxShadow}
+        backgroundColor={textFieldBackgroundColor}
+        padding={textFieldPadding}
+        paddingLeft={textFieldPaddingLeft}
+        paddingRight={textFieldPaddingRight}
+        paddingBottom={textFieldPaddingBottom}
+        paddingTop={textFieldPaddingTop}
+        fontSize={textFieldFontSize}
+        height={textFieldHeight}
+        disabled={disabled}
+        on:focus={handleTextFieldFocus}
+        on:blur={handleTextFieldBlur}
+        on:keydown={handleWindowKeyDown}
+        bind:inputElement={input}
+      ></Textfield>
+    </div>
+  </slot>
+</div>
+
+<slot name="menu">
+  <Menu
+    activator={activator}
+    width={menuWidth}
+    height={menuHeight}
+    maxHeight="300px"
+    boxShadow={menuBoxShadow}
+    borderRadius={menuBorderRadius}
+    bind:open={menuOpened}
+    anchor="bottom-center"
+    closeOnClickOutside
+    bind:refreshPosition={refreshPosition}
+    bind:menuElement={menuElement}
+  >
+    <div
+      style:background-color={menuBackgroundColor}
+    >
+      {#each filteredItems as item, index}
+        <slot 
+          name="item" 
+          item={item} 
+          index={index} 
+          selected={values.findIndex((i) => {
+            return i.value == item.value
+          }) != -1}
+        >
+          <div
+            style:--autocomplete-selected-item-background-color={selectedItemBackgroundColor}
+            style:--autocomplete-focus-item-background-color={focusItemBackgroundColor}
+            class:selection-item={true}
+            class:focused={index == focusedIndex}
+            class:selected={values.findIndex((i) => {
+              return i.value == item.value
+            }) != -1}
+            on:click={(event) => toggle(item)}
+          >{item.label}</div>
+        </slot>
+      {/each}
+    </div>
+  </Menu>
+</slot>
+
+<style>
+  .selection-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    padding: 5px
+  }
+
+  .selection-item {
+    padding: 10px;
+  }
+
+  .selection-item.selected {
+    background-color: var(--autocomplete-selected-item-background-color);
+  }
+
+  .selection-item.focused {
+    background-color: var(--autocomplete-focus-item-background-color);
+  }
+
+  .selection-item:hover {
+    background-color: var(--autocomplete-focus-item-background-color);
+  }
+</style>

package/forms/Autocomplete.svelte.d.ts

@@ -0,0 +1,69 @@
+import { SvelteComponentTyped } from "svelte";
+export declare type Item = {
+    value: string;
+    label?: string;
+    data?: any;
+};
+import type { VariantOptions } from './Textfield.svelte';
+declare const __propDef: {
+    props: {
+        values?: Item[];
+        items: Item[];
+        searchFunction?: (item: Item, searchText: string) => boolean;
+        multiple?: boolean;
+        disabled?: boolean;
+        width?: string;
+        maxWidth?: string;
+        textFieldLabel?: string;
+        textFieldPlaceholder?: string;
+        textFieldColor?: string;
+        textFieldVariant?: VariantOptions;
+        textFieldMaxWidth?: string;
+        textFieldMinWidth?: string;
+        textFieldHeight?: string;
+        textFieldTextColor?: string;
+        textFieldBorderWeight?: string;
+        textFieldBorderRadius?: string;
+        textFieldBorderColor?: string;
+        textFieldFocusBorderColor?: string;
+        textFieldFocusedBoxShadow?: string;
+        textFieldBackgroundColor?: string;
+        textFieldPadding?: string;
+        textFieldPaddingLeft?: string;
+        textFieldPaddingRight?: string;
+        textFieldPaddingBottom?: string;
+        textFieldPaddingTop?: string;
+        textFieldFontSize?: string;
+        menuBackgroundColor?: string;
+        menuBoxShadow?: string;
+        menuBorderRadius?: string;
+        focusItemBackgroundColor?: string;
+        selectedItemBackgroundColor?: string;
+        border?: string;
+        borderRadius?: string;
+        chipColor?: string;
+        chipTextColor?: string;
+        chipHeight?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'selection-container': {};
+        selection: {
+            selection: Item;
+        };
+        menu: {};
+        item: {
+            item: Item;
+            index: any;
+            selected: boolean;
+        };
+    };
+};
+export declare type AutocompleteProps = typeof __propDef.props;
+export declare type AutocompleteEvents = typeof __propDef.events;
+export declare type AutocompleteSlots = typeof __propDef.slots;
+export default class Autocomplete extends SvelteComponentTyped<AutocompleteProps, AutocompleteEvents, AutocompleteSlots> {
+}
+export {};

package/forms/Textarea.svelte

@@ -0,0 +1,63 @@
+<script >import { v4 as uuidv4 } from 'uuid';
+export let label = null, placeholder = "placeholder", textAreaId = uuidv4(), fontFamily = "inherit", value = "", resizable = true, disabled = false, readOnly = false, maxLength = undefined, textColor = "black", border = "none", borderRadius = "5px", focusedBoxShadow = undefined, backgroundColor = null, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined, labelFontSize = undefined, labelColor = undefined, width = "100%", height = "100%";
+</script>
+
+<div
+  class="container"
+>
+  {#if label}
+    <label
+      for={textAreaId}
+      style:font-size={labelFontSize}
+      style:color={labelColor}
+    >
+      {label}
+    </label>
+  {/if}
+  <textarea
+    style:width={width}
+    style:height={height}
+    style:font-family={fontFamily}
+    style:resize={resizable?"both":"none"}
+    style:font-size={fontSize}
+    style:border-radius={borderRadius}
+    style:background-color={backgroundColor}
+    style:color={textColor}
+    style:padding={padding}
+    style:padding-left={paddingLeft}
+    style:padding-right={paddingRight}
+    style:padding-bottom={paddingBottom}
+    style:padding-top={paddingTop}
+    style:border={border}
+    style:--textarea-focus-box-shadow={focusedBoxShadow}
+    bind:value={value}
+    id={textAreaId}
+    placeholder={placeholder}
+    maxlength={maxLength}
+    disabled={disabled}
+    readonly={readOnly}
+    ></textarea>
+</div>
+
+
+<style>
+  textarea {
+    display: block;
+    transition: all 0.3s;
+  }
+
+  label {
+    display: block;
+    margin-bottom: 10px;
+    margin-left: 10px;
+  }
+
+  textarea:focus{
+    outline: none;
+    -webkit-box-shadow: var(--textarea-focus-box-shadow);
+    -moz-box-shadow: var(--textarea-focus-box-shadow);
+    -o-box-shadow: var(--textarea-focus-box-shadow);
+    box-shadow: var(--textarea-focus-box-shadow);
+  }
+
+</style>

package/forms/Textarea.svelte.d.ts

@@ -0,0 +1,39 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string;
+        placeholder?: string;
+        textAreaId?: string;
+        fontFamily?: string;
+        value?: string;
+        resizable?: boolean;
+        disabled?: boolean;
+        readOnly?: boolean;
+        maxLength?: number;
+        textColor?: string;
+        border?: string;
+        borderRadius?: string;
+        focusedBoxShadow?: string;
+        backgroundColor?: string;
+        padding?: string;
+        paddingLeft?: string;
+        paddingRight?: string;
+        paddingBottom?: string;
+        paddingTop?: string;
+        fontSize?: string;
+        labelFontSize?: string;
+        labelColor?: string;
+        width?: string;
+        height?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TextareaProps = typeof __propDef.props;
+export declare type TextareaEvents = typeof __propDef.events;
+export declare type TextareaSlots = typeof __propDef.slots;
+export default class Textarea extends SvelteComponentTyped<TextareaProps, TextareaEvents, TextareaSlots> {
+}
+export {};

package/forms/Textfield.svelte

@@ -1,4 +1,6 @@
-<script >export let label = "", placeholder = "", color = null, value = "", variant = 'outlined', width = "100%", 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';
+<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', inputElement = undefined;
 import { v4 as uuidv4 } from 'uuid';
 import { onMount } from 'svelte';
 let inputId = uuidv4(), focused = false, legendWidth = 0, labelElement = undefined;
@@ -20,7 +22,6 @@ $: if (!!labelElement) {
 
 <style>
   .input-container {
-    height: 50px;
     position: relative;
     --textfield-final-color: var(--textfield-theme-color, --textfield-border-color, rgb(88, 88, 88));
     --textfield-final-border-color: var(--textfield-border-color, var(--textfield-final-color))
@@ -111,6 +112,9 @@ $: if (!!labelElement) {
 
 <div 
   style:width={width}
+  style:min-width={minWidth}
+  style:max-width={maxWidth}
+  style:height={height}
   style:--textfield-theme-color={color}
   style:--textfield-border-color={borderColor}
   style:--textfield-border-weight={borderWeight}
@@ -161,6 +165,7 @@ $: if (!!labelElement) {
               class="input-outlined"
               type="password"
               placeholder={placeholder}
+              disabled={disabled}
               bind:value={value}
               on:change
               on:input
@@ -171,6 +176,7 @@ $: if (!!labelElement) {
               on:keydown
               on:keypress
               on:keyup
+              bind:this={inputElement}
             />
           {:else if type == 'text'}
             <input 
@@ -181,6 +187,7 @@ $: if (!!labelElement) {
               class="input-outlined"
               type="text"
               placeholder={placeholder}
+              disabled={disabled}
               bind:value={value}
               on:change
               on:input
@@ -191,6 +198,7 @@ $: if (!!labelElement) {
               on:keydown
               on:keypress
               on:keyup
+              bind:this={inputElement}
             />
           {/if}
           <div>
@@ -213,6 +221,7 @@ $: if (!!labelElement) {
             class="input-boxed"
             type="password"
             placeholder={placeholder || label}
+            disabled={disabled}
             bind:value={value}
             on:change
             on:input
@@ -221,8 +230,9 @@ $: if (!!labelElement) {
             on:blur={handleBlur}
             on:blur
             on:keydown
-              on:keypress
-              on:keyup
+            on:keypress
+            on:keyup
+            bind:this={inputElement}
           />
         {:else if type == 'text'}
           <input
@@ -233,6 +243,7 @@ $: if (!!labelElement) {
             class="input-boxed"
             type="text"
             placeholder={placeholder || label}
+            disabled={disabled}
             bind:value={value}
             on:change
             on:input
@@ -243,6 +254,7 @@ $: if (!!labelElement) {
             on:keydown
             on:keypress
             on:keyup
+            bind:this={inputElement}
           />
         {/if}
         <div>

package/forms/Textfield.svelte.d.ts

@@ -1,12 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
+export declare type VariantOptions = 'outlined' | 'boxed';
 declare const __propDef: {
     props: {
         label?: string;
         placeholder?: string;
         color?: string;
         value?: string;
-        variant?: "outlined" | "boxed";
+        disabled?: boolean;
+        variant?: VariantOptions;
         width?: string;
+        height?: string;
+        maxWidth?: string;
+        minWidth?: string;
         textColor?: string;
         borderWeight?: string;
         borderRadius?: string;
@@ -21,6 +26,7 @@ declare const __propDef: {
         paddingTop?: string;
         fontSize?: string;
         type?: 'text' | 'password';
+        inputElement?: HTMLElement;
     };
     events: {
         change: Event;

package/forms/VerticalSwitch.svelte

@@ -0,0 +1,123 @@
+<script >export let value = false, height = "60px", width = "30px", rounded = false, backgroundColor = "#90CAF9", selectedOptionColor = backgroundColor, sliderColor = "white", optionColor = sliderColor, fontSize = "11px", animationDuration = "0.1s";
+</script>
+
+<div
+  class="container"
+  style:--vertical-switch-height={height}
+  style:--vertical-switch-width={width}
+  style:--vertical-switch-container-border-radius={rounded ? "500px" : "4px"}
+  style:--vertical-switch-slider-border-radius={rounded ? "100%" : "4px"}
+  style:--vertical-switch-background-color={backgroundColor}
+  style:--vertical-switch-selected-option-color={selectedOptionColor}
+  style:--vertical-switch-slider-color={sliderColor}
+  style:--vertical-switch-option-color={optionColor}
+  style:--vertical-switch-font-size={fontSize}
+  style:--vertical-switch-animation-duration={animationDuration}
+  >
+  <div
+    class="inner-container"
+    on:click={()=>value = !value}
+  >
+    <div
+      class={value?"first-option selected":"first-option"}
+    >
+      <slot name="trueOption">
+        1
+      </slot>
+    </div>
+    <div
+      class={value?"second-option":"second-option selected"}
+    >
+      <slot name="falseOption">
+        0
+      </slot>
+    </div>
+    <input
+      bind:checked={value}
+      type="checkbox"
+      on:change
+    />
+    <span
+      class={value?"slider top":"slider bottom"}
+    />
+  </div>
+</div>
+
+<style>
+  .container {
+    position: relative;
+    box-sizing: border-box;
+    width: var(--vertical-switch-width);
+  }
+
+  input {
+    position: absolute;
+    display: none;
+  }
+
+  .inner-container {
+    position: absolute;
+    width: 100%;
+    height: var(--vertical-switch-height);
+    background-color: var(--vertical-switch-background-color);
+    cursor: pointer;
+    text-align: center;
+    border-radius: var(--vertical-switch-container-border-radius)
+  }
+
+  .first-option {
+    width: 100%;
+    height: calc(var(--vertical-switch-width));
+    position: absolute;
+    overflow-x: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    color: var(--vertical-switch-option-color);
+    font-size: var(--vertical-switch-font-size);
+    user-select: none;
+    transition: var(--vertical-switch-animation-duration);
+  }
+
+  .second-option {
+    width: 100%;
+    height: calc(var(--vertical-switch-width));
+    position: absolute;
+    overflow-x: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    bottom: 0;
+    color: var(--vertical-switch-option-color);
+    font-size: var(--vertical-switch-font-size);
+    user-select: none;
+  }
+
+  .selected {
+    color: var(--vertical-switch-selected-option-color);
+    z-index: 5;
+    font-weight: bold;
+    transition: var(--vertical-switch-animation-duration);
+  }
+
+  .slider {
+    position: absolute;
+    --vertical-switch-slider-diameter: calc(var(--vertical-switch-width) - 4px);
+    width: var(--vertical-switch-slider-diameter);
+    height: var(--vertical-switch-slider-diameter);
+    border-radius: var(--vertical-switch-slider-border-radius);
+    background-color: var(--vertical-switch-slider-color);
+    left: 2px;
+    transition: var(--vertical-switch-animation-duration);
+  }
+
+  .top {
+    top: 2px;
+  }
+
+  .bottom {
+    top: calc(var(--vertical-switch-height) - var(--vertical-switch-slider-diameter) - 2px)
+  }
+
+</style>

package/forms/VerticalSwitch.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: boolean;
+        height?: string;
+        width?: string;
+        rounded?: boolean;
+        backgroundColor?: string;
+        selectedOptionColor?: string;
+        sliderColor?: string;
+        optionColor?: string;
+        fontSize?: string;
+        animationDuration?: string;
+    };
+    events: {
+        change: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        trueOption: {};
+        falseOption: {};
+    };
+};
+export declare type VerticalSwitchProps = typeof __propDef.props;
+export declare type VerticalSwitchEvents = typeof __propDef.events;
+export declare type VerticalSwitchSlots = typeof __propDef.slots;
+export default class VerticalSwitch extends SvelteComponentTyped<VerticalSwitchProps, VerticalSwitchEvents, VerticalSwitchSlots> {
+}
+export {};

package/forms/VerticalTextSwitch.svelte

@@ -0,0 +1,65 @@
+<script >import { fly } from 'svelte/transition';
+export let value = false, height = "100%", width = "100%", backgroundColor = undefined, firstColor = undefined, secondColor = firstColor, fontSize = "12px", hoverBackgroundColor = undefined, hoverBoxShadow = undefined, animationDuration = 200;
+let optionHeight = undefined;
+</script>
+
+<div
+  class="container"
+  style:width
+  style:height
+  style:--vertical-text-switch-height={height}
+  style:--vertical-text-switch-hover-background-color={hoverBackgroundColor}
+  style:--vertical-text-switch-hover-box-shadow={hoverBoxShadow}
+  bind:clientHeight={optionHeight}
+  on:click={()=>value = !value}
+  style:background-color={backgroundColor}
+  style:padding="5px"
+>
+  {#if value}
+    <div
+      in:fly="{{ y: optionHeight/2, duration: animationDuration/2, delay: animationDuration/2}}"
+      out:fly="{{ y: -optionHeight/2, duration: animationDuration/2}}"
+      class="option"
+      style:color={firstColor}
+      style:font-size={fontSize}
+    >
+      <slot name="trueOption"></slot>
+    </div>
+  {:else}
+    <div
+      in:fly="{{ y: optionHeight/2, duration: animationDuration/2, delay: animationDuration/2}}"
+      out:fly="{{ y: -optionHeight/2, duration: animationDuration/2}}"
+      class="option"
+      style:color={secondColor}
+      style:font-size={fontSize}
+    >
+      <slot name="falseOption"></slot>
+    </div>
+  {/if}
+  <input type="checkbox" bind:value />
+</div>
+
+<style>
+  .container {
+    cursor: pointer;
+    border-radius: 5px;
+    overflow-y: hidden;
+  }
+
+  .container:hover {
+    background-color: var(--vertical-text-switch-hover-background-color);
+    box-shadow: var(--vertical-text-switch-hover-box-shadow);
+  }
+
+  .option {
+    height: var(--vertical-text-switch-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+  }
+
+  input {
+    display: none;
+  }
+</style>

package/forms/VerticalTextSwitch.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: boolean;
+        height?: string;
+        width?: string;
+        backgroundColor?: string;
+        firstColor?: string;
+        secondColor?: string;
+        fontSize?: string;
+        hoverBackgroundColor?: string;
+        hoverBoxShadow?: string;
+        animationDuration?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        trueOption: {};
+        falseOption: {};
+    };
+};
+export declare type VerticalTextSwitchProps = typeof __propDef.props;
+export declare type VerticalTextSwitchEvents = typeof __propDef.events;
+export declare type VerticalTextSwitchSlots = typeof __propDef.slots;
+export default class VerticalTextSwitch extends SvelteComponentTyped<VerticalTextSwitchProps, VerticalTextSwitchEvents, VerticalTextSwitchSlots> {
+}
+export {};

package/media/Avatar.svelte

@@ -1,4 +1,4 @@
-<script >export let src, alt = "", width = "40px", maxWidth = undefined, minWidth = undefined, height = "40px", maxHeight = undefined, minHeight = undefined, lazyLoaded = false, borderRadius = "50%";
+<script >export let src, alt = "", width = "40px", maxWidth = undefined, minWidth = undefined, height = "40px", maxHeight = undefined, minHeight = undefined, lazyLoaded = false, referrerpolicy = "no-referrer", borderRadius = "50%";
 import Image from './Image.svelte';
 </script>
 
@@ -27,5 +27,6 @@ import Image from './Image.svelte';
     style:min-height={minHeight}
     style:border-radius={borderRadius}
     style:object-fit="cover"
+    referrerpolicy={referrerpolicy}
   />
 {/if}

package/media/Avatar.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         maxHeight?: string;
         minHeight?: string;
         lazyLoaded?: boolean;
+        referrerpolicy?: string;
         borderRadius?: string;
     };
     events: {

package/media/DescriptiveAvatar.svelte

@@ -1,4 +1,4 @@
-<script >export let src, title = undefined, description = undefined, direction = 'row', reverse = false, avatarSpacing = '10px', width = undefined, maxWidth = undefined, minWidth = undefined, height = undefined, maxHeight = undefined, minHeight = undefined, lazyLoaded = false, borderRadius = "50%";
+<script >export let src, title = undefined, description = undefined, direction = 'row', reverse = false, avatarSpacing = '10px', width = undefined, maxWidth = undefined, minWidth = undefined, height = undefined, maxHeight = undefined, minHeight = undefined, lazyLoaded = false, borderRadius = "50%", referrerpolicy = "no-referrer";
 let textAlignment;
 $: if (direction == 'column') {
     textAlignment = 'center';
@@ -53,6 +53,7 @@ import Avatar from "./Avatar.svelte";
       minHeight={minHeight}
       borderRadius={borderRadius}
       lazyLoaded={lazyLoaded}
+      referrerpolicy={referrerpolicy}
     ></Avatar>
   </div>
   <div 

package/media/DescriptiveAvatar.svelte.d.ts

@@ -15,6 +15,7 @@ declare const __propDef: {
         minHeight?: string;
         lazyLoaded?: boolean;
         borderRadius?: string;
+        referrerpolicy?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/navigation/Chip.svelte

@@ -1,56 +1,53 @@
 <script >import Icon from '../media/Icon.svelte';
 import Button from '../buttons/Button.svelte';
 import { createEventDispatcher } from 'svelte';
-export let active = true, close = false, closeIcon = "mdi-close-circle", color = "blue", textColor = "white", disabled = false, filter = false, filterIcon = "mdi-check", label = false, outlined = false, size = 12;
+export let close = false, closeIcon = "mdi-close-circle", color = "blue", textColor = "white", disabled = false, filter = false, filterIcon = "mdi-check", label = false, outlined = false, size = 12;
 const dispatch = createEventDispatcher();
 function handleChipClick() {
     dispatch('click');
 }
 function handleCloseClick() {
-    active = false;
     dispatch('close');
 }
 </script>
 
-{#if active}
-  <div
-    class="chip"
-    style:border-radius={label?"5px":"100px"}
-    style:background-color="{color}"
-    style:color={outlined?color:textColor}
-    class:label={label}
-    class:outlined={outlined}
-    class:disabled={disabled}
-    on:click={handleChipClick}
+<div
+  class="chip"
+  style:border-radius={label?"5px":"100px"}
+  style:background-color="{color}"
+  style:color={outlined?color:textColor}
+  class:label={label}
+  class:outlined={outlined}
+  class:disabled={disabled}
+  on:click={handleChipClick}
+>
+  {#if filter}
+    <div class="icon-before">
+      <Icon
+        name={filterIcon}
+        size={size}
+      ></Icon>
+    </div>
+  {/if}
+  <div class="text"
+    style:font-size="{size}pt"
+    style:line-height="{size}pt"
   >
-    {#if filter}
-      <div class="icon-before">
-        <Icon
-          name={filterIcon}
-          size={size}
-        ></Icon>
-      </div>
-    {/if}
-    <div class="text"
-      style:font-size="{size}pt"
-      style:line-height="{size}pt"
-    >
-    <slot></slot>
-  </div>
-    {#if close}
-      <div class="icon-after">
-        <Button
-          icon={closeIcon}
-          iconSize={size}
-          type='icon'
-          hoverBackgroundColor="none"
-          on:click={handleCloseClick}
-        >
-        </Button>
-      </div>
-    {/if}
-  </div>
-{/if}
+  <slot></slot>
+</div>
+  {#if close}
+    <div class="icon-after">
+      <Button
+        icon={closeIcon}
+        iconSize={size}
+        type='icon'
+        hoverBackgroundColor="none"
+        on:click={handleCloseClick}
+      >
+      </Button>
+    </div>
+  {/if}
+</div>
 
 <style>
   .chip {

package/navigation/Chip.svelte.d.ts

@@ -1,7 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        active?: boolean;
         close?: boolean;
         closeIcon?: string;
         color?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "0.0.45",
+  "version": "0.0.49",
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
@@ -77,14 +77,19 @@
     "./dates/Calendar.svelte": "./dates/Calendar.svelte",
     "./dates/DatePicker.svelte": "./dates/DatePicker.svelte",
     "./dates/MonthSelector.svelte": "./dates/MonthSelector.svelte",
+    "./dates/TimePickerTextField.svelte": "./dates/TimePickerTextField.svelte",
     "./dates/YearSelector.svelte": "./dates/YearSelector.svelte",
     "./dates/utils": "./dates/utils.js",
     "./dialogs/Dialog.svelte": "./dialogs/Dialog.svelte",
+    "./forms/Autocomplete.svelte": "./forms/Autocomplete.svelte",
     "./forms/Checkbox.svelte": "./forms/Checkbox.svelte",
     "./forms/FileInput.svelte": "./forms/FileInput.svelte",
     "./forms/FileInputList.svelte": "./forms/FileInputList.svelte",
     "./forms/Switch.svelte": "./forms/Switch.svelte",
+    "./forms/Textarea.svelte": "./forms/Textarea.svelte",
     "./forms/Textfield.svelte": "./forms/Textfield.svelte",
+    "./forms/VerticalSwitch.svelte": "./forms/VerticalSwitch.svelte",
+    "./forms/VerticalTextSwitch.svelte": "./forms/VerticalTextSwitch.svelte",
     ".": "./index.js",
     "./loaders/CircularLoader.svelte": "./loaders/CircularLoader.svelte",
     "./loaders/Skeleton.svelte": "./loaders/Skeleton.svelte",