@likable-hair/svelte 3.3.30 → 3.3.32

package/dist/components/simple/forms/FileInput.svelte

@@ -1,55 +1,95 @@
-<script>import "../../../css/main.css";
-import "./FileInput.css";
-import { createEventDispatcher } from "svelte";
-let clazz = "";
-export { clazz as class };
-export let files = void 0, placeholder = void 0, persistOverUpload = true, disabled = false, maxFiles = void 0;
-let inputElement = void 0;
-let dropAreaActive = false;
-const highlight = (highlighted) => {
-  dropAreaActive = highlighted && !disabled;
-};
-const dispatch = createEventDispatcher();
-function handleFileDrop(event) {
-  let droppedFiles = event.dataTransfer?.files;
-  let limitedFiles;
-  if (droppedFiles) {
-    if (maxFiles !== void 0) {
-      let freeSlots = Math.max(0, maxFiles - (files?.length || 0));
-      limitedFiles = Array.from(droppedFiles).slice(0, freeSlots);
-    } else {
-      limitedFiles = Array.from(droppedFiles);
+<script lang="ts">
+  import '../../../css/main.css'
+  import './FileInput.css'
+  import { createEventDispatcher } from "svelte";
+
+  let clazz: string = '';
+	export { clazz as class };
+
+  /*
+    Styles
+
+    --file-input-default-height
+    --file-input-default-width
+    --file-input-default-color
+    --file-input-default-background-color
+    --file-input-default-focus-shadow
+    --file-input-border-radius
+  */
+
+  export let files: File[] | undefined = undefined,
+    placeholder: string | undefined = undefined,
+    persistOverUpload : boolean = true,
+    disabled : boolean = false,
+    maxFiles: number | undefined = undefined;
+
+  let inputElement: HTMLElement | undefined = undefined;
+  let dropAreaActive = false;
+
+  const highlight: (highlighted: boolean) => void = (highlighted) => {
+    dropAreaActive = highlighted && !disabled;
+  };
+
+  const dispatch = createEventDispatcher<{
+    fileDrop: {
+      nativeEvent: DragEvent;
+      files: File[];
+    }
+    fileSelect: {
+      nativeEvent: Event;
+      files: File[];
+    }
+  }>();
+
+  function handleFileDrop(event: DragEvent) {
+    let droppedFiles: FileList | undefined = event.dataTransfer?.files;
+    let limitedFiles: File[]
+
+    if (droppedFiles) {
+      if(maxFiles !== undefined) {
+        let freeSlots = Math.max(0, maxFiles - (files?.length || 0))
+        limitedFiles = Array.from(droppedFiles).slice(0, freeSlots)
+      } else {
+        limitedFiles = Array.from(droppedFiles)
+      }
+
+      if (!persistOverUpload) files = limitedFiles;
+      else
+        files = files
+          ? [...files, ...limitedFiles]
+          : limitedFiles;
+
+      dispatch("fileDrop", {
+        nativeEvent: event,
+        files: limitedFiles,
+      });
     }
-    if (!persistOverUpload)
-      files = limitedFiles;
-    else
-      files = files ? [...files, ...limitedFiles] : limitedFiles;
-    dispatch("fileDrop", {
-      nativeEvent: event,
-      files: limitedFiles
-    });
   }
-}
-function handleFileFromInput(event) {
-  let selectedFiles = event.target.files;
-  let limitedFiles;
-  if (selectedFiles) {
-    if (maxFiles !== void 0) {
-      let freeSlots = Math.max(0, maxFiles - (files?.length || 0));
-      limitedFiles = Array.from(selectedFiles).slice(0, freeSlots);
-    } else {
-      limitedFiles = Array.from(selectedFiles);
+
+  function handleFileFromInput(event: Event) {
+    let selectedFiles: FileList | null = (<HTMLInputElement>event.target).files;
+    let limitedFiles: File[]
+
+    if (selectedFiles) {
+      if(maxFiles !== undefined) {
+        let freeSlots = Math.max(0, maxFiles - (files?.length || 0))
+        limitedFiles = Array.from(selectedFiles).slice(0, freeSlots)
+      } else {
+        limitedFiles = Array.from(selectedFiles)
+      }
+
+      if (!persistOverUpload) files = limitedFiles;
+      else
+        files = files
+          ? [...files, ...limitedFiles]
+          : limitedFiles;
+
+      dispatch("fileSelect", {
+        nativeEvent: event,
+        files: limitedFiles,
+      });
     }
-    if (!persistOverUpload)
-      files = limitedFiles;
-    else
-      files = files ? [...files, ...limitedFiles] : limitedFiles;
-    dispatch("fileSelect", {
-      nativeEvent: event,
-      files: limitedFiles
-    });
   }
-}
 </script>
 
 <div

package/dist/components/simple/forms/FileInput.svelte.d.ts

@@ -1,37 +1,41 @@
-import { SvelteComponent } from "svelte";
 import '../../../css/main.css';
 import './FileInput.css';
-declare const __propDef: {
-    props: {
-        class?: string | undefined;
-        files?: File[] | undefined;
-        placeholder?: string | undefined;
-        persistOverUpload?: boolean | undefined;
-        disabled?: boolean | undefined;
-        maxFiles?: number | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        change: Event;
-        fileDrop: CustomEvent<{
-            nativeEvent: DragEvent;
-            files: File[];
-        }>;
-        fileSelect: CustomEvent<{
-            nativeEvent: Event;
-            files: File[];
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        body: {
-            active: boolean;
-        };
-    };
-};
-export type FileInputProps = typeof __propDef.props;
-export type FileInputEvents = typeof __propDef.events;
-export type FileInputSlots = typeof __propDef.slots;
-export default class FileInput extends SvelteComponent<FileInputProps, FileInputEvents, FileInputSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const FileInput: $$__sveltets_2_IsomorphicComponent<{
+    class?: string;
+    files?: File[] | undefined;
+    placeholder?: string | undefined;
+    persistOverUpload?: boolean;
+    disabled?: boolean;
+    maxFiles?: number | undefined;
+}, {
+    change: Event;
+    fileDrop: CustomEvent<{
+        nativeEvent: DragEvent;
+        files: File[];
+    }>;
+    fileSelect: CustomEvent<{
+        nativeEvent: Event;
+        files: File[];
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    body: {
+        active: boolean;
+    };
+}, {}, string>;
+type FileInput = InstanceType<typeof FileInput>;
+export default FileInput;

package/dist/components/simple/forms/FileInputList.svelte

@@ -1,41 +1,66 @@
-<script>import "../../../css/main.css";
-import "./FileInputList.css";
-import Button from "../buttons/Button.svelte";
-import FileInput from "./FileInput.svelte";
-import Icon from "../media/Icon.svelte";
-import { createEventDispatcher } from "svelte";
-let clazz = "";
-export { clazz as class };
-const dispatch = createEventDispatcher();
-export let files = [], persistOverUpload = true, dropAreaActive = true, icon = "mdi-file-document", message = "Drop file here or click to upload", disabled = false, maxFiles = void 0, previewFiles = false;
-let fileActive = null;
-function isImageFile(file) {
-  if (file.type.startsWith("image/") && (file.type.endsWith("/jpg") || file.type.endsWith("/png") || file.type.endsWith("/jpeg") || file.type.endsWith("/webp"))) {
-    return true;
+<script lang="ts">
+  import "../../../css/main.css";
+  import "./FileInputList.css";
+  import Button from "../buttons/Button.svelte";
+  import FileInput from "./FileInput.svelte";
+  import Icon from "../media/Icon.svelte";
+  import { createEventDispatcher } from "svelte";
+
+  let clazz: string = "";
+  export { clazz as class };
+
+  const dispatch = createEventDispatcher<{
+    fileChange: {
+      files: File[]
+    }
+  }>()
+
+  export let files: File[] = [],
+    persistOverUpload: boolean = true,
+    dropAreaActive: boolean = true,
+    icon: string = "mdi-file-document",
+    message: string = "Drop file here or click to upload",
+    disabled: boolean = false,
+    maxFiles: number | undefined = undefined,
+    previewFiles: boolean = false
+
+  let fileActive: File | null = null
+
+  function isImageFile(file: File): boolean {
+    if (file.type.startsWith("image/") && (
+      file.type.endsWith("/jpg") 
+      || file.type.endsWith("/png")
+      || file.type.endsWith("/jpeg")
+      || file.type.endsWith("/webp")
+    )) {
+      return true
+    }
+    return false
+  }
+
+  function handleFileMouseEnter(file: File) {
+    dropAreaActive = false
+    fileActive = file
+  }
+  function handleFileMouseLeave() {
+    dropAreaActive = true
+    fileActive = null
+  }
+  function handleFileClick(file: File) {
+    alert(file.name)
+  }
+  function handleRemove(file: File) {
+    files = files.filter((elem) => elem !== file)
+    dispatch("fileChange", { files })
+  }
+
+  function handleFileDrop() {
+    dispatch("fileChange", { files })
+  }
+
+  function handleFileSelect() {
+    dispatch("fileChange", { files })
   }
-  return false;
-}
-function handleFileMouseEnter(file) {
-  dropAreaActive = false;
-  fileActive = file;
-}
-function handleFileMouseLeave() {
-  dropAreaActive = true;
-  fileActive = null;
-}
-function handleFileClick(file) {
-  alert(file.name);
-}
-function handleRemove(file) {
-  files = files.filter((elem) => elem !== file);
-  dispatch("fileChange", { files });
-}
-function handleFileDrop() {
-  dispatch("fileChange", { files });
-}
-function handleFileSelect() {
-  dispatch("fileChange", { files });
-}
 </script>
 
 <div class="card-container {clazz}">

package/dist/components/simple/forms/FileInputList.svelte.d.ts

@@ -1,40 +1,44 @@
-import { SvelteComponent } from "svelte";
 import "../../../css/main.css";
 import "./FileInputList.css";
-declare const __propDef: {
-    props: {
-        class?: string | undefined;
-        files?: File[] | undefined;
-        persistOverUpload?: boolean | undefined;
-        dropAreaActive?: boolean | undefined;
-        icon?: string | undefined;
-        message?: string | undefined;
-        disabled?: boolean | undefined;
-        maxFiles?: number | undefined;
-        previewFiles?: boolean | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        change: Event;
-        dragstart: DragEvent;
-        fileChange: CustomEvent<{
-            files: File[];
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+    z_$$bindings?: Bindings;
+}
+declare const FileInputList: $$__sveltets_2_IsomorphicComponent<{
+    class?: string;
+    files?: File[];
+    persistOverUpload?: boolean;
+    dropAreaActive?: boolean;
+    icon?: string;
+    message?: string;
+    disabled?: boolean;
+    maxFiles?: number | undefined;
+    previewFiles?: boolean;
+}, {
+    change: Event;
+    dragstart: DragEvent;
+    fileChange: CustomEvent<{
+        files: File[];
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    message: {
+        class: string;
     };
-    slots: {
-        message: {
-            class: string;
-        };
-        'file-list': {
-            class: string;
-            files: File[];
-        };
+    'file-list': {
+        class: string;
+        files: File[];
     };
-};
-export type FileInputListProps = typeof __propDef.props;
-export type FileInputListEvents = typeof __propDef.events;
-export type FileInputListSlots = typeof __propDef.slots;
-export default class FileInputList extends SvelteComponent<FileInputListProps, FileInputListEvents, FileInputListSlots> {
-}
-export {};
+}, {}, string>;
+type FileInputList = InstanceType<typeof FileInputList>;
+export default FileInputList;

package/dist/components/simple/forms/RadioButton.svelte

@@ -1,6 +1,14 @@
-<script>import "./RadioButton.css";
-import "../../../css/main.css";
-export let name, value, id = void 0, checked = false, label = void 0, disabled = false;
+<script lang="ts">
+  import './RadioButton.css'
+  import "../../../css/main.css";
+
+  export let name: string,
+    value: string,
+    id: string | undefined = undefined,
+    checked = false,
+    label: string | undefined = undefined,
+    disabled = false;
+
 </script>
 
 <input

package/dist/components/simple/forms/RadioButton.svelte.d.ts

@@ -1,31 +1,35 @@
-import { SvelteComponent } from "svelte";
 import './RadioButton.css';
 import "../../../css/main.css";
-declare const __propDef: {
-    props: {
-        name: string;
-        value: string;
-        id?: string | undefined;
-        checked?: boolean | undefined;
-        label?: string | undefined;
-        disabled?: boolean | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        change: Event;
-        input: Event;
-        focus: FocusEvent;
-        blur: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type RadioButtonProps = typeof __propDef.props;
-export type RadioButtonEvents = typeof __propDef.events;
-export type RadioButtonSlots = typeof __propDef.slots;
-export default class RadioButton extends SvelteComponent<RadioButtonProps, RadioButtonEvents, RadioButtonSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const RadioButton: $$__sveltets_2_IsomorphicComponent<{
+    name: string;
+    value: string;
+    id?: string | undefined;
+    checked?: boolean;
+    label?: string | undefined;
+    disabled?: boolean;
+}, {
+    change: Event;
+    input: Event;
+    focus: FocusEvent;
+    blur: FocusEvent;
+    keydown: KeyboardEvent;
+    keypress: KeyboardEvent;
+    keyup: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RadioButton = InstanceType<typeof RadioButton>;
+export default RadioButton;

package/dist/components/simple/forms/Select.svelte

@@ -1,8 +1,21 @@
-<script context="module">import "./Select.css";
+<script lang="ts" context="module">
+	import './Select.css'
+	export type Option = {
+		icon?: string
+		value: string | number | undefined
+		text: string
+	}
 </script>
 
-<script>import { Icon } from "../../..";
-export let options, name = void 0, value = void 0, disabled = false, placeholder = void 0;
+<script lang="ts">
+    import { Icon } from "../../..";
+
+
+	export let options: Option[],
+		name: string | undefined = undefined,
+		value: string | number | undefined = undefined,
+		disabled: boolean = false,
+		placeholder: string | undefined = undefined
 </script>
 
 <select

package/dist/components/simple/forms/Select.svelte.d.ts

@@ -1,28 +1,32 @@
-import { SvelteComponent } from "svelte";
 import './Select.css';
 export type Option = {
     icon?: string;
     value: string | number | undefined;
     text: string;
 };
-declare const __propDef: {
-    props: {
-        options: Option[];
-        name?: string | undefined;
-        value?: string | number | undefined;
-        disabled?: boolean | undefined;
-        placeholder?: string | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        change: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SelectProps = typeof __propDef.props;
-export type SelectEvents = typeof __propDef.events;
-export type SelectSlots = typeof __propDef.slots;
-export default class Select extends SvelteComponent<SelectProps, SelectEvents, SelectSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Select: $$__sveltets_2_IsomorphicComponent<{
+    options: Option[];
+    name?: string | undefined;
+    value?: string | number | undefined;
+    disabled?: boolean;
+    placeholder?: string | undefined;
+}, {
+    change: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Select = InstanceType<typeof Select>;
+export default Select;

package/dist/components/simple/forms/SimpleTextField.svelte

@@ -1,9 +1,56 @@
-<script>import "../../../css/main.css";
-import "./SimpleTextField.css";
-import Icon from "../media/Icon.svelte";
-let clazz = {};
-export { clazz as class };
-export let value = void 0, type = "text", placeholder = void 0, disabled = false, readonly = false, id = void 0, appendIcon = void 0, appendInnerIcon = void 0, prependIcon = void 0, prependInnerIcon = void 0, iconSize = "12pt", name = void 0, hint = void 0, input = void 0;
+<script lang="ts">
+  import '../../../css/main.css'
+  import './SimpleTextField.css'
+  import Icon from "../media/Icon.svelte";
+
+  let clazz: {
+    container?: string,
+    row?: string,
+    field?: string,
+    hint?: string,
+    input?: string
+  } | undefined = {};
+	export { clazz as class };
+
+  /* 
+    Styles:
+    
+    --simple-textfield-padding
+    --simple-textfield-height
+    --simple-textfield-width
+    --simple-textfield-max-width
+    --simple-textfield-color
+    --simple-textfield-background-color
+    --simple-textfield-border-radius
+    --simple-textfield-box-shadow
+    --simple-textfield-focus-background-color
+    --simple-textfield-focus-box-shadow
+    --simple-textfield-transition
+    --simple-textfield-font-size
+    --simple-textfield-font-weight
+    --simple-textfield-outer-gap
+    --simple-textfield-inner-gap
+    --simple-textfield-hint-font-size
+    --simple-textfield-hint-color
+    --simple-textfield-hint-margin-left
+    --simple-textfield-margin-bottom
+    --simple-textfield-margin-left
+  */
+
+  export let value: string | number | undefined = undefined,
+    type: "text" | "password" | "number" | "time" | "date" = "text",
+    placeholder: string | undefined = undefined,
+    disabled: boolean = false,
+    readonly: boolean = false,
+    id: string | undefined = undefined,
+    appendIcon: string | undefined = undefined,
+    appendInnerIcon: string | undefined = undefined,
+    prependIcon: string | undefined = undefined,
+    prependInnerIcon: string | undefined = undefined,
+    iconSize: string = "12pt",
+    name: string | undefined = undefined,
+    hint: string | undefined = undefined,
+    input: HTMLElement | undefined = undefined
 </script>
 
 <div