@likable-hair/svelte 3.3.21 → 3.3.23

package/dist/components/simple/dates/YearSelector.svelte.d.ts

@@ -1,36 +1,40 @@
-import { SvelteComponent } from "svelte";
 import '../../../css/main.css';
 import './YearSelector.css';
-declare const __propDef: {
-    props: {
-        class?: string | undefined;
-        selectedYear?: number | undefined;
-        selectableYears?: number[] | 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: CustomEvent<{
-            year: number;
-        }>;
-        change: CustomEvent<{
-            year: number | undefined;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+    z_$$bindings?: Bindings;
+}
+declare const YearSelector: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+    selectedYear?: number | undefined;
+    selectableYears?: number[];
+    disabled?: boolean;
+}, {
+    click: CustomEvent<{
+        year: number;
+    }>;
+    change: CustomEvent<{
+        year: number | undefined;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    selector: {
+        year: number;
+        handleYearClick: (year: number) => void;
     };
-    slots: {
-        selector: {
-            year: number;
-            handleYearClick: (year: number) => void;
-        };
-        label: {
-            year: number;
-        };
+    label: {
+        year: number;
     };
-};
-export type YearSelectorProps = typeof __propDef.props;
-export type YearSelectorEvents = typeof __propDef.events;
-export type YearSelectorSlots = typeof __propDef.slots;
-export default class YearSelector extends SvelteComponent<YearSelectorProps, YearSelectorEvents, YearSelectorSlots> {
-}
-export {};
+}, {}, string>;
+type YearSelector = InstanceType<typeof YearSelector>;
+export default YearSelector;

package/dist/components/simple/dialogs/Dialog.svelte

@@ -1,70 +1,100 @@
-<script>import Teleporter from "../../../utils/teleporter";
-import { BROWSER } from "esm-env";
-import { beforeUpdate, onMount } from "svelte";
-import Keyboarder, {} from "../../../utils/keyboarder";
-export let open = false, transition = "fly-up";
-export let _overlayOpacity = "30%", _overlayColor = "#282828", _overlayBackdropFilter = void 0, _transitionTimingFunction = "cubic-bezier(0.075, 0.82, 0.165, 1)", _transitionDuration = "0.5s";
-let zIndex = 50, localOpen = open, dialogElement, teleportedUid = void 0, hasBeenOpened = false;
-onMount(() => {
-  if (!teleportedUid) {
-    let tp = new Teleporter();
-    teleportedUid = tp.attachNode(dialogElement);
-  }
-  let keyboarderHandler = (params) => {
-    if (params.key == "Escape" && localOpen)
-      closeDialog();
-  };
-  Keyboarder.on(keyboarderHandler);
-  return () => {
-    if (!!teleportedUid) {
-      let tp = new Teleporter();
-      tp.destroyNode(teleportedUid);
+<script lang="ts">
+  import Teleporter from '../../../utils/teleporter';
+  import { BROWSER } from 'esm-env';
+  import { beforeUpdate, onMount } from "svelte";
+  import Keyboarder, { type CallbackFunction } from '../../../utils/keyboarder';
+
+  export let open = false,
+    transition: 'fly-down' | 'fly-up' | 'fly-horizontal' | 'scale' | 'fade' = 'fly-up'
+
+  export let _overlayOpacity: string = "30%",
+    _overlayColor: string = "#282828",
+    _overlayBackdropFilter: string | undefined = undefined,
+    _transitionTimingFunction: string = 'cubic-bezier(0.075, 0.82, 0.165, 1)',
+    _transitionDuration: string = '0.5s'
+
+
+  let zIndex = 50,
+    localOpen: boolean = open,
+    dialogElement: HTMLElement,
+    teleportedUid: string | undefined = undefined,
+    hasBeenOpened: boolean = false;
+
+  onMount(() => {
+    if(!teleportedUid) {
+      let tp = new Teleporter()
+      teleportedUid = tp.attachNode(dialogElement)
     }
-    Keyboarder.off(keyboarderHandler);
-  };
-});
-beforeUpdate(() => {
-  if (BROWSER) {
-    if (open && localOpen != open) {
-      hasBeenOpened = true;
-      let otherDialogs = document.querySelectorAll("[data-dialog=true]");
-      let maxZIndex = 0;
-      if (otherDialogs.length > 0) {
-        otherDialogs.forEach((dialog) => {
-          let computedStyle = getComputedStyle(dialog);
-          let currentZIndex = computedStyle.getPropertyValue("--dialog-z-index");
-          if (!maxZIndex || maxZIndex < Number(currentZIndex))
-            maxZIndex = Number(currentZIndex);
-        });
-        zIndex = maxZIndex + 2;
-      }
-      let otherDrawers = document.querySelectorAll("[data-drawer=true]");
-      if (otherDrawers.length > 0) {
-        otherDrawers.forEach((dialog) => {
-          let computedStyle = getComputedStyle(dialog);
-          let currentZIndex = computedStyle.getPropertyValue("--drawer-z-index");
-          if (!maxZIndex || maxZIndex < Number(currentZIndex))
-            maxZIndex = Number(currentZIndex);
-        });
-        zIndex = maxZIndex + 2;
+
+    let keyboarderHandler: CallbackFunction = (params) => {
+      if(params.key == 'Escape' && localOpen) closeDialog()
+    }
+    Keyboarder.on(keyboarderHandler)
+
+    return () => {
+      if(!!teleportedUid) {
+        let tp = new Teleporter()
+        tp.destroyNode(teleportedUid)
       }
-      document.body.style.overflow = "hidden";
-    } else if (!open) {
-      let otherDialogs = document.querySelectorAll("[data-dialog=true]");
-      if (otherDialogs.length <= 1) {
-        document.body.style.overflow = "auto";
+
+      Keyboarder.off(keyboarderHandler)
+    }
+  })
+
+  beforeUpdate(() => {
+    if (BROWSER) {
+      if (open && localOpen != open) {
+        hasBeenOpened = true
+
+        let otherDialogs: NodeListOf<HTMLElement> =
+          document.querySelectorAll("[data-dialog=true]");
+
+        let maxZIndex = 0;
+
+        if (otherDialogs.length > 0) {
+          otherDialogs.forEach((dialog) => {
+            let computedStyle = getComputedStyle(dialog)
+            let currentZIndex = computedStyle.getPropertyValue('--dialog-z-index')
+            if (!maxZIndex || maxZIndex < Number(currentZIndex))
+              maxZIndex = Number(currentZIndex);
+          });
+          zIndex = maxZIndex + 2;
+        }
+
+        let otherDrawers: NodeListOf<HTMLElement> =
+          document.querySelectorAll("[data-drawer=true]");
+
+        if (otherDrawers.length > 0) {
+          otherDrawers.forEach((dialog) => {
+            let computedStyle = getComputedStyle(dialog)
+            let currentZIndex = computedStyle.getPropertyValue('--drawer-z-index')
+            if (!maxZIndex || maxZIndex < Number(currentZIndex))
+              maxZIndex = Number(currentZIndex);
+          });
+          zIndex = maxZIndex + 2;
+        }
+
+        document.body.style.overflow = "hidden";
+      } else if (!open) {
+        let otherDialogs: NodeListOf<HTMLElement> =
+          document.querySelectorAll("[data-dialog=true]");
+        if (otherDialogs.length <= 1) {
+          document.body.style.overflow = "auto";
+        }
       }
     }
+
+    localOpen = open;
+  });
+
+  function closeDialog() {
+    open = false;
+    localOpen = false;
+  }
+
+  function handleOverlayClick() {
+    closeDialog();
   }
-  localOpen = open;
-});
-function closeDialog() {
-  open = false;
-  localOpen = false;
-}
-function handleOverlayClick() {
-  closeDialog();
-}
 </script>
 
 <div

package/dist/components/simple/dialogs/Dialog.svelte.d.ts

@@ -1,30 +1,44 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        open?: boolean | undefined;
-        transition?: "fly-down" | "fly-up" | "fly-horizontal" | "scale" | "fade" | undefined;
-        _overlayOpacity?: string | undefined;
-        _overlayColor?: string | undefined;
-        _overlayBackdropFilter?: string | undefined;
-        _transitionTimingFunction?: string | undefined;
-        _transitionDuration?: 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: {
-        click: MouseEvent;
-        keypress: KeyboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'top-right': {};
-        'center-left': {};
-        default: {};
-        'center-right': {};
-    };
-};
-export type DialogProps = typeof __propDef.props;
-export type DialogEvents = typeof __propDef.events;
-export type DialogSlots = typeof __propDef.slots;
-export default class Dialog extends SvelteComponent<DialogProps, DialogEvents, DialogSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Dialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    open?: boolean;
+    transition?: "fly-down" | "fly-up" | "fly-horizontal" | "scale" | "fade";
+    _overlayOpacity?: string;
+    _overlayColor?: string;
+    _overlayBackdropFilter?: string | undefined;
+    _transitionTimingFunction?: string;
+    _transitionDuration?: string;
+}, {
+    'top-right': {};
+    'center-left': {};
+    default: {};
+    'center-right': {};
+}>, {
+    click: MouseEvent;
+    keypress: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'top-right': {};
+    'center-left': {};
+    default: {};
+    'center-right': {};
+}, {}, string>;
+type Dialog = InstanceType<typeof Dialog>;
+export default Dialog;

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 />