@likable-hair/svelte 3.3.21 → 3.3.23

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

@@ -1,4 +1,3 @@
-import { SvelteComponent } from "svelte";
 export type Item = {
     value: string | number;
     label?: string | number;
@@ -8,84 +7,89 @@ import '../../../css/main.css';
 import './Autocomplete.css';
 import { type ComponentProps } from "svelte";
 import SimpleTextField from "./SimpleTextField.svelte";
-declare const __propDef: {
-    props: {
-        class?: {
-            activator?: string | undefined;
-            menu?: string | undefined;
-            simpleTextfield?: ComponentProps<SimpleTextField>['class'];
-        } | undefined;
-        values?: Item[] | undefined;
-        items: Item[];
-        searchFunction?: ((item: Item, searchText: string | undefined) => boolean) | undefined;
-        multiple?: boolean | undefined;
-        disabled?: boolean | undefined;
-        mandatory?: boolean | undefined;
-        placeholder?: string | undefined;
-        width?: string | undefined;
-        height?: string | undefined;
-        maxWidth?: string | undefined;
-        minWidth?: string | undefined;
-        openingId?: string | undefined;
-        searchText?: string | undefined;
-        maxVisibleChips?: number | undefined;
-        menuOpened?: boolean | undefined;
-        closeOnSelect?: boolean | undefined;
-        emptySearchTextOnMenuClose?: boolean | undefined;
-        menuBoxShadow?: string | undefined;
-        menuBorderRadius?: string | undefined;
-        mobileDrawer?: boolean | undefined;
-        menuWidth?: string | undefined | null;
-        menuAnchor?: "bottom" | "bottom-center" | "right-center" | 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: {
-        focus: FocusEvent;
-        blur: FocusEvent;
-        keydown: KeyboardEvent;
-        close: CustomEvent<{}>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+    z_$$bindings?: Bindings;
+}
+declare const Autocomplete: $$__sveltets_2_IsomorphicComponent<{
+    class?: {
+        activator?: string;
+        menu?: string;
+        simpleTextfield?: ComponentProps<SimpleTextField>["class"];
     };
-    slots: {
-        'selection-container': {
-            values: Item[];
-            searchText: string | undefined;
-            disabled: boolean;
-            openMenu: () => void;
-            handleKeyDown: (event: {
-                key: string;
-            }) => void;
-            unselect: (item: Item) => void;
-            select: (item: Item) => void;
-        };
-        selection: {
-            selection: Item;
-            unselect: (item: Item) => void;
-        };
-        'chip-label': {
-            selection: Item;
-        };
-        exceedCounter: {
-            notVisibleChipNumber: number;
-            maxVisibleChips: number | undefined;
-            values: Item[];
-            searchText: string | undefined;
-            disabled: boolean;
-        };
-        menu: {};
-        item: {
-            item: Item;
-            index: any;
-            selected: boolean;
-        };
-        'item-label': {
-            item: Item;
-        };
+    values?: Item[];
+    items: Item[];
+    searchFunction?: ((item: Item, searchText: string | undefined) => boolean) | undefined;
+    multiple?: boolean;
+    disabled?: boolean;
+    mandatory?: boolean;
+    placeholder?: string;
+    width?: string;
+    height?: string;
+    maxWidth?: string | undefined;
+    minWidth?: string | undefined;
+    openingId?: string;
+    searchText?: string | undefined;
+    maxVisibleChips?: number | undefined;
+    menuOpened?: boolean;
+    closeOnSelect?: boolean;
+    emptySearchTextOnMenuClose?: boolean;
+    menuBoxShadow?: string;
+    menuBorderRadius?: string;
+    mobileDrawer?: boolean;
+    menuWidth?: string | undefined | null;
+    menuAnchor?: "bottom" | "bottom-center" | "right-center" | undefined;
+}, {
+    focus: FocusEvent;
+    blur: FocusEvent;
+    keydown: KeyboardEvent;
+    close: CustomEvent<{}>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'selection-container': {
+        values: Item[];
+        searchText: string | undefined;
+        disabled: boolean;
+        openMenu: () => void;
+        handleKeyDown: (event: {
+            key: string;
+        }) => void;
+        unselect: (item: Item) => void;
+        select: (item: Item) => void;
     };
-};
-export type AutocompleteProps = typeof __propDef.props;
-export type AutocompleteEvents = typeof __propDef.events;
-export type AutocompleteSlots = typeof __propDef.slots;
-export default class Autocomplete extends SvelteComponent<AutocompleteProps, AutocompleteEvents, AutocompleteSlots> {
-}
-export {};
+    selection: {
+        selection: Item;
+        unselect: (item: Item) => void;
+    };
+    'chip-label': {
+        selection: Item;
+    };
+    exceedCounter: {
+        notVisibleChipNumber: number;
+        maxVisibleChips: number | undefined;
+        values: Item[];
+        searchText: string | undefined;
+        disabled: boolean;
+    };
+    menu: {};
+    item: {
+        item: Item;
+        index: any;
+        selected: boolean;
+    };
+    'item-label': {
+        item: Item;
+    };
+}, {}, string>;
+type Autocomplete = InstanceType<typeof Autocomplete>;
+export default Autocomplete;

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

@@ -1,29 +1,45 @@
-<script>import "./Checkbox.css";
-import "../../../css/main.css";
-import { createEventDispatcher, onMount } from "svelte";
-export let value = false, id = void 0, disabled = false;
-onMount(() => {
-  window.addEventListener("keydown", handleKeyDown);
-  window.addEventListener("keyup", handleKeyUp);
-  return () => {
-    window.removeEventListener("keydown", handleKeyDown);
-    window.removeEventListener("keyup", handleKeyUp);
-  };
-});
-function handleKeyDown(event) {
-  if (event.key == "Shift") {
-    shiftKeyPressed = true;
+<script lang="ts">
+  import './Checkbox.css'
+  import '../../../css/main.css'
+  import { createEventDispatcher, onMount } from 'svelte';
+
+  export let value = false,
+    id: string | undefined = undefined,
+    disabled = false;
+
+  onMount(() => {
+    window.addEventListener('keydown', handleKeyDown)
+    window.addEventListener('keyup', handleKeyUp)
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+      window.removeEventListener('keyup', handleKeyUp)
+    }
+  })
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if(event.key == 'Shift') {
+      shiftKeyPressed = true
+    }
   }
-}
-function handleKeyUp(event) {
-  if (event.key == "Shift") {
-    shiftKeyPressed = false;
+
+  function handleKeyUp(event: KeyboardEvent) {
+    if(event.key == 'Shift') {
+      shiftKeyPressed = false
+    }
+  }
+
+  let dispatch = createEventDispatcher<{
+    'change': { 
+      shiftKeyPressed: boolean,
+      nativeEvent: Event
+    }
+  }>(),
+    shiftKeyPressed: boolean = false
+
+  function handleChange(e: Event) {
+    dispatch('change', { shiftKeyPressed, nativeEvent: e })
   }
-}
-let dispatch = createEventDispatcher(), shiftKeyPressed = false;
-function handleChange(e) {
-  dispatch("change", { shiftKeyPressed, nativeEvent: e });
-}
 </script>
 
 <input

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

@@ -1,25 +1,29 @@
-import { SvelteComponent } from "svelte";
 import './Checkbox.css';
 import '../../../css/main.css';
-declare const __propDef: {
-    props: {
-        value?: boolean | undefined;
-        id?: 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: CustomEvent<{
-            shiftKeyPressed: boolean;
-            nativeEvent: Event;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CheckboxProps = typeof __propDef.props;
-export type CheckboxEvents = typeof __propDef.events;
-export type CheckboxSlots = typeof __propDef.slots;
-export default class Checkbox extends SvelteComponent<CheckboxProps, CheckboxEvents, CheckboxSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Checkbox: $$__sveltets_2_IsomorphicComponent<{
+    value?: boolean;
+    id?: string | undefined;
+    disabled?: boolean;
+}, {
+    change: CustomEvent<{
+        shiftKeyPressed: boolean;
+        nativeEvent: Event;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Checkbox = InstanceType<typeof Checkbox>;
+export default Checkbox;

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,37 +1,55 @@
-<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 };
-let 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;
-let fileActive = null;
-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) => {
-    return elem != file;
-  });
-  dispatch("fileChange", { files });
-}
-function handleFileDrop() {
-  dispatch("fileChange", { files });
-}
-function handleFileSelect() {
-  dispatch("fileChange", { files });
-}
+<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 };
+
+  let 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;
+
+  let fileActive: File | null = null;
+
+  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) => {
+      return elem != file;
+    });
+    dispatch("fileChange", { files })
+  }
+
+  function handleFileDrop() {
+    dispatch("fileChange", { files })
+  }
+
+  function handleFileSelect() {
+    dispatch("fileChange", { files })
+  }
 </script>
 
 <div class="card-container {clazz}">