@likable-hair/svelte 3.3.30 → 3.3.32

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

@@ -1,165 +1,224 @@
-<script context="module"></script>
-
-<script>import "../../../css/main.css";
-import "./Autocomplete.css";
-import { scrollInMenu } from "../common/scroller";
-let clazz = {};
-export { clazz as class };
-export let values = [], items, searchFunction = void 0, multiple = false, disabled = false, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = void 0, minWidth = "200px", openingId = "autocomplete-menu", searchText = void 0, maxVisibleChips = void 0, menuOpened = false, closeOnSelect = !multiple, emptySearchTextOnMenuClose = true, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px", mobileDrawer = false, menuWidth = void 0, menuAnchor = "bottom-center";
-let dispatch = createEventDispatcher();
-function select(item) {
-  if (disabled)
-    return;
-  const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
-  if (!alreadyPresent) {
-    if (multiple)
-      values = [...values, item];
-    else
-      values = [item];
+<script context="module" lang="ts">
+  export type Item = {
+    value: string | number;
+    label?: string | number;
+    /* eslint-disable  @typescript-eslint/no-explicit-any */
+    data?: any;
+  };
+</script>
+
+<script lang="ts">
+  import '../../../css/main.css'
+  import './Autocomplete.css'
+  import { scrollInMenu } from '../common/scroller';
+
+  let clazz: {
+    activator?: string,
+    menu?: string,
+    simpleTextfield?: ComponentProps<SimpleTextField>['class']
+  } = {};
+	export { clazz as class };
+
+  export let values: Item[] = [],
+    items: Item[],
+    searchFunction: ((item: Item, searchText: string | undefined) => boolean) | undefined =
+      undefined,
+    multiple = false,
+    disabled = false,
+    mandatory = false,
+    placeholder = "",
+    width = "auto",
+    height = "auto",
+    maxWidth: string | undefined = undefined,
+    minWidth: string | undefined = "200px",
+    openingId: string = "autocomplete-menu",
+    searchText: string | undefined = undefined,
+    maxVisibleChips: number | undefined = undefined,
+    menuOpened: boolean = false,
+    closeOnSelect: boolean = !multiple,
+    emptySearchTextOnMenuClose: boolean = true,
+    // menu
+    menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px",
+    menuBorderRadius = "5px",
+    mobileDrawer: boolean = false,
+    menuWidth: string | undefined | null = undefined,
+    menuAnchor: "bottom" | "bottom-center" | "right-center" | undefined = 'bottom-center'
+
+  let dispatch = createEventDispatcher<{
+    change: {
+      unselect: Item | undefined;
+      select: Item | undefined;
+      selection: Item[];
+    }
+  }>();
+
+  function select(item: Item) {
+    if(disabled) return
+
+    const alreadyPresent =
+      values.findIndex((i) => i.value === item.value) != -1;
+
+    if (!alreadyPresent) {
+      if (multiple) values = [...values, item];
+      else values = [item];
+      refreshMenuWidth();
+
+      dispatch("change", {
+        unselect: undefined,
+        select: item,
+        selection: values,
+      });
+    }
+
+    if (!multiple && closeOnSelect) menuOpened = false
+  }
+
+  function unselect(item: Item) {
+    if(disabled) return
+
+    if(values.length == 1 && mandatory) return
+    values = values.filter((i) => i.value != item.value);
     refreshMenuWidth();
+
+    dispatch("change", {
+      unselect: item,
+      select: undefined,
+      selection: values,
+    });
+  }
+
+  function pop() {
+    if(values.length == 1 && mandatory) return
+    let poppedElement = values.pop()
+    values = [...values]
+    refreshMenuWidth()
+
     dispatch("change", {
-      unselect: void 0,
-      select: item,
-      selection: values
+      unselect: poppedElement,
+      select: undefined,
+      selection: values,
     });
   }
-  if (!multiple && closeOnSelect)
-    menuOpened = false;
-}
-function unselect(item) {
-  if (disabled)
-    return;
-  if (values.length == 1 && mandatory)
-    return;
-  values = values.filter((i) => i.value != item.value);
-  refreshMenuWidth();
-  dispatch("change", {
-    unselect: item,
-    select: void 0,
-    selection: values
-  });
-}
-function pop() {
-  if (values.length == 1 && mandatory)
-    return;
-  let poppedElement = values.pop();
-  values = [...values];
-  refreshMenuWidth();
-  dispatch("change", {
-    unselect: poppedElement,
-    select: void 0,
-    selection: values
-  });
-}
-function toggle(item) {
-  const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
-  if (alreadyPresent)
-    unselect(item);
-  else
-    select(item);
-}
-let localMenuWidth = void 0, menuHeight = "auto", refreshPosition = false;
-function openMenu() {
-  refreshMenuWidth();
-  menuOpened = true;
-}
-function refreshMenuWidth() {
-  setTimeout(() => {
-    if (menuWidth !== void 0)
-      localMenuWidth = menuWidth;
-    else
-      localMenuWidth = activator.offsetWidth + "px";
+
+  function toggle(item: Item) {
+    const alreadyPresent =
+      values.findIndex((i) => i.value === item.value) != -1;
+
+    if (alreadyPresent) unselect(item);
+    else select(item);
+  }
+
+  let localMenuWidth: string | undefined | null = undefined,
+    menuHeight = "auto",
+    refreshPosition = false;
+
+  function openMenu() {
+    refreshMenuWidth();
+    menuOpened = true;
+  }
+
+  function refreshMenuWidth() {
     setTimeout(() => {
-      refreshPosition = true;
+      if(menuWidth !== undefined) localMenuWidth = menuWidth
+      else localMenuWidth = activator.offsetWidth + "px"
+
+      setTimeout(() => {
+        refreshPosition = true;
+      }, 1);
     }, 1);
-  }, 1);
-}
-let activator, focusedIndex = void 0;
-function handleTextFieldFocus() {
-  if (disabled)
-    return;
-  focusedIndex = void 0;
-  openMenu();
-}
-function handleTextFieldBlur() {
-}
-let menuElement;
-function handleKeyDown(event) {
-  if (disabled)
-    return;
-  if (event.key == "ArrowDown" && (focusedIndex === void 0 || focusedIndex < filteredItems.length - 1)) {
-    if (focusedIndex === void 0)
-      focusedIndex = 0;
-    else
-      focusedIndex += 1;
-  } else if (event.key == "ArrowUp" && (focusedIndex === void 0 || focusedIndex > 0)) {
-    if (focusedIndex === void 0)
-      focusedIndex = filteredItems.length - 1;
-    else
-      focusedIndex -= 1;
-  } else if (event.key == "Enter" && focusedIndex != void 0) {
-    toggle(filteredItems[focusedIndex]);
-  } else if (event.key == "Backspace" && searchText == "") {
-    pop();
-  } else if (event.key == "Escape" || event.key == "Tab") {
-    searchText = "";
-    if (!!input)
-      input.blur();
-    menuOpened = false;
   }
-  if (focusedIndex !== void 0 && !!menuElement) {
-    let child = menuElement.querySelector(".item-" + focusedIndex);
-    if (!!child)
-      scrollInMenu(menuElement, child, "instant");
+
+  let activator: HTMLElement,
+    focusedIndex: number | undefined = undefined;
+  function handleTextFieldFocus() {
+    if(disabled) return
+    focusedIndex = undefined;
+    openMenu();
+  }
+
+  function handleTextFieldBlur() {
+    // closeMenu()
   }
-}
-let input;
-function handleContainerClick() {
-  if (disabled)
-    return;
-  if (!menuOpened) {
-    if (!!input)
-      input.focus();
-    setTimeout(() => {
-      openMenu();
-    }, 50);
+
+  let menuElement: HTMLElement;
+  function handleKeyDown(event: { key: string }) {
+    if(disabled) return
+
+    if (
+      event.key == "ArrowDown" &&
+      (focusedIndex === undefined || focusedIndex < filteredItems.length - 1)
+    ) {
+      if (focusedIndex === undefined) focusedIndex = 0;
+      else focusedIndex += 1;
+    } else if (
+      event.key == "ArrowUp" &&
+      (focusedIndex === undefined || focusedIndex > 0)
+    ) {
+      if (focusedIndex === undefined) focusedIndex = filteredItems.length - 1;
+      else focusedIndex -= 1;
+    } else if (event.key == "Enter" && focusedIndex != undefined) {
+      toggle(filteredItems[focusedIndex]);
+    } else if(event.key == 'Backspace' && searchText == '') {
+      pop()
+    } else if(event.key == 'Escape' || event.key == 'Tab') {
+      searchText = ''
+      if(!!input) input.blur()
+      menuOpened = false
+    }
+
+    if(focusedIndex !== undefined && !!menuElement) {
+      let child = menuElement.querySelector<HTMLElement>('.item-' + focusedIndex)
+
+      if(!!child) scrollInMenu(menuElement, child, 'instant')
+    }
+  }
+
+  let input: HTMLElement;
+  function handleContainerClick() {
+    if(disabled) return
+    
+    if (!menuOpened) {
+      if(!!input) input.focus();
+
+      // had to timeout because it was catching click outside
+      setTimeout(() => {
+        openMenu();
+      }, 50);
+    }
   }
-}
-let filteredItems = items;
-$:
-  if (searchText) {
-    focusedIndex = void 0;
+
+  let filteredItems: Item[] = items;
+  $: if (searchText) {
+    focusedIndex = undefined;
     filteredItems = items.filter((it) => {
-      if (searchFunction)
-        return searchFunction(it, searchText);
-      else
-        return !!searchText && it.label?.toString().toLowerCase().includes(searchText.toLowerCase());
+      if (searchFunction) return searchFunction(it, searchText);
+      else return !!searchText && it.label?.toString().toLowerCase().includes((searchText).toLowerCase());
     });
   } else {
     filteredItems = items;
   }
-$:
-  notVisibleChipNumber = Math.max((values?.length || 0) - (maxVisibleChips || 0), 0);
-$:
-  if (!menuOpened && emptySearchTextOnMenuClose) {
+
+  $: notVisibleChipNumber = Math.max((values?.length || 0) - (maxVisibleChips || 0), 0)
+
+  $: if(!menuOpened && emptySearchTextOnMenuClose) {
     setTimeout(() => {
-      if (!menuOpened && emptySearchTextOnMenuClose)
-        searchText = void 0;
+      if(!menuOpened && emptySearchTextOnMenuClose) searchText = undefined
     }, 10);
   }
-$:
-  if (!!input) {
-    if (!disabled && values.length != 0) {
-      input.style.width = Math.max(searchText?.length || placeholder?.length, 1) + "ch";
+
+  $: if(!!input) {
+    if(!disabled && values.length != 0) {
+      input.style.width = Math.max(searchText?.length || placeholder?.length, 1) + 'ch'
     } else {
-      input.style.width = "auto";
+      input.style.width = 'auto'
     }
   }
-import Chip from "../navigation/Chip.svelte";
-import Menu from "../common/Menu.svelte";
-import { createEventDispatcher } from "svelte";
-import SimpleTextField from "./SimpleTextField.svelte";
-import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
+
+  import Chip from "../navigation/Chip.svelte";
+  import Menu from "../common/Menu.svelte";
+  import { createEventDispatcher, type ComponentProps } from "svelte";
+  import SimpleTextField from "./SimpleTextField.svelte";
+  import MenuOrDrawer from '../../composed/common/MenuOrDrawer.svelte';
 </script>
 
 <svelte:window />

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,26 +1,30 @@
-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: {
-        click: MouseEvent;
-        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;
+}, {
+    click: MouseEvent;
+    change: CustomEvent<{
+        shiftKeyPressed: boolean;
+        nativeEvent: Event;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Checkbox = InstanceType<typeof Checkbox>;
+export default Checkbox;