@likable-hair/svelte 3.3.21 → 3.3.22

package/dist/components/simple/navigation/Drawer.svelte

@@ -1,73 +1,115 @@
-<script>import "../../../css/main.css";
-import "./Drawer.css";
-import Navigator from "./Navigator.svelte";
-import { createEventDispatcher, onMount, beforeUpdate } from "svelte";
-import Teleporter from "../../../utils/teleporter";
-import Keyboarder, {} from "../../../utils/keyboarder";
-import { BROWSER } from "esm-env";
-export let open = false, position = "left", overlay = false, closeOnClickOutside = true, items = [], teleportedUid = void 0, _space = void 0, _openingSpeed = void 0, _backgroundColor = void 0, _color = void 0, _overflow = void 0, _borderRadius = void 0, _margin = void 0, _overlaySpeed = void 0, _overlayBackgroundColor = void 0, _overlayOpacity = void 0;
-let drawerElement, localOpen = false;
-const dispatch = createEventDispatcher();
-onMount(() => {
-  if (!teleportedUid) {
-    let tp = new Teleporter();
-    teleportedUid = tp.attachNode(drawerElement);
-  }
-  let keyboarderHandler = (params) => {
-    if (params.key == "Escape" && open)
-      closeDrawer();
-  };
-  Keyboarder.on(keyboarderHandler);
-  return () => {
-    if (!!teleportedUid) {
-      let tp = new Teleporter();
-      tp.destroyNode(teleportedUid);
+<script lang="ts">
+  import '../../../css/main.css'
+  import './Drawer.css'
+  import Navigator from "./Navigator.svelte";
+  import type { Item } from "./Navigator.svelte";
+  import { createEventDispatcher, onMount, beforeUpdate } from 'svelte';
+  import Teleporter from '../../../utils/teleporter';
+  import Keyboarder, { type CallbackFunction } from '../../../utils/keyboarder';
+  import { BROWSER } from 'esm-env';
+
+  export let open = false,
+    position: "left" | "top" | "right" | "bottom" = "left",
+    overlay = false,
+    closeOnClickOutside = true,
+    items: Item[] = [],
+    teleportedUid: string | undefined = undefined,
+    _space: string | undefined = undefined,
+    _openingSpeed: string | undefined = undefined,
+    _backgroundColor: string | undefined = undefined,
+    _color: string | undefined = undefined,
+    _overflow: string | undefined = undefined,
+    _borderRadius: string | undefined = undefined,
+    _margin: string | undefined = undefined,
+    _overlaySpeed: string | undefined = undefined,
+    _overlayBackgroundColor: string | undefined = undefined,
+    _overlayOpacity: string | undefined = undefined
+
+  let drawerElement: HTMLElement,
+    localOpen: boolean = false
+
+  const dispatch = createEventDispatcher<{
+    'close': {}
+  }>()
+
+  onMount(() => {
+    if(!teleportedUid) {
+      // let oldCssVars = {
+      //   '--drawer-space': getComputedStyle(drawerElement).getPropertyValue('--drawer-space')
+      // }
+
+      let tp = new Teleporter()
+      teleportedUid = tp.attachNode(drawerElement)
+
+      // drawerElement.style.setProperty('--drawer-space', oldCssVars['--drawer-space'])
+    }
+
+    let keyboarderHandler: CallbackFunction = (params) => {
+      if(params.key == 'Escape' && open) closeDrawer()
+    }
+    Keyboarder.on(keyboarderHandler)
+
+    return () => {
+      if(!!teleportedUid) {
+        let tp = new Teleporter()
+        tp.destroyNode(teleportedUid)
+      }
+
+      Keyboarder.off(keyboarderHandler)
     }
-    Keyboarder.off(keyboarderHandler);
-  };
-});
-function closeDrawer() {
-  open = false;
-  overlay = false;
-  dispatch("close", {});
-}
-function handleClickOverlay() {
-  if (closeOnClickOutside) {
+  })
+
+  function closeDrawer() {
     open = false;
     overlay = false;
-    dispatch("close", {});
-  }
-}
-let zIndex = 50;
-beforeUpdate(() => {
-  if (BROWSER && open && localOpen !== open) {
-    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;
+    dispatch('close', {})
+  }
+
+  function handleClickOverlay() {
+    if(closeOnClickOutside) {
+      open = false;
+      overlay = false;
+      dispatch('close', {})
     }
-    overlay = true;
-    localOpen = true;
-  } else if (BROWSER && !open && localOpen !== open) {
-    localOpen = false;
   }
-});
+
+  let zIndex: number = 50
+  beforeUpdate(() => {
+    if(BROWSER && open && localOpen !== open) {
+      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;
+      }
+
+      overlay = true
+      localOpen = true
+    } else if(BROWSER && !open && localOpen !== open) {
+      localOpen = false
+    }
+  })
 </script>
 
 <div

package/dist/components/simple/navigation/Drawer.svelte.d.ts

@@ -1,43 +1,56 @@
-import { SvelteComponent } from "svelte";
 import '../../../css/main.css';
 import './Drawer.css';
 import type { Item } from "./Navigator.svelte";
-declare const __propDef: {
-    props: {
-        open?: boolean | undefined;
-        position?: "left" | "right" | "bottom" | "top" | undefined;
-        overlay?: boolean | undefined;
-        closeOnClickOutside?: boolean | undefined;
-        items?: Item[] | undefined;
-        teleportedUid?: string | undefined;
-        _space?: string | undefined;
-        _openingSpeed?: string | undefined;
-        _backgroundColor?: string | undefined;
-        _color?: string | undefined;
-        _overflow?: string | undefined;
-        _borderRadius?: string | undefined;
-        _margin?: string | undefined;
-        _overlaySpeed?: string | undefined;
-        _overlayBackgroundColor?: string | undefined;
-        _overlayOpacity?: 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: {
-        'item-click': CustomEvent<{
-            item: Item;
-        }>;
-        close: CustomEvent<{}>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Drawer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    open?: boolean;
+    position?: "left" | "top" | "right" | "bottom";
+    overlay?: boolean;
+    closeOnClickOutside?: boolean;
+    items?: Item[];
+    teleportedUid?: string | undefined;
+    _space?: string | undefined;
+    _openingSpeed?: string | undefined;
+    _backgroundColor?: string | undefined;
+    _color?: string | undefined;
+    _overflow?: string | undefined;
+    _borderRadius?: string | undefined;
+    _margin?: string | undefined;
+    _overlaySpeed?: string | undefined;
+    _overlayBackgroundColor?: string | undefined;
+    _overlayOpacity?: string | undefined;
+}, {
+    default: {
+        open: boolean;
     };
-    slots: {
-        default: {
-            open: boolean;
-        };
+}>, {
+    'item-click': CustomEvent<{
+        item: Item;
+    }>;
+    close: CustomEvent<{}>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        open: boolean;
     };
-};
-export type DrawerProps = typeof __propDef.props;
-export type DrawerEvents = typeof __propDef.events;
-export type DrawerSlots = typeof __propDef.slots;
-export default class Drawer extends SvelteComponent<DrawerProps, DrawerEvents, DrawerSlots> {
-}
-export {};
+}, {}, string>;
+type Drawer = InstanceType<typeof Drawer>;
+export default Drawer;

package/dist/components/simple/navigation/HeaderMenu.svelte

@@ -1,28 +1,45 @@
-<script>import "../../../css/main.css";
-import "./HeaderMenu.css";
-import Button from "../buttons/Button.svelte";
-import Drawer from "./Drawer.svelte";
-import { createEventDispatcher } from "svelte";
-let dispatch = createEventDispatcher();
-export let title = "", hideOnScroll = true, initialRemoveShadow = false, color = void 0, mobileMenu = true, zIndex = 25;
-let scrollY, lastScrollY, visible = true;
-function handleScroll() {
-  if (hideOnScroll) {
-    if (scrollY > lastScrollY) {
-      visible = false;
-    } else {
-      visible = true;
+<script lang="ts">
+  import '../../../css/main.css'
+  import './HeaderMenu.css'
+  import Button from "../buttons/Button.svelte";
+  import Drawer from "./Drawer.svelte";
+  import { createEventDispatcher } from 'svelte';
+
+  let dispatch = createEventDispatcher<{
+    'drawer-change': {
+      opened: boolean
+    }
+  }>()
+
+  export let title = "",
+    hideOnScroll = true,
+    initialRemoveShadow = false,
+    color: string | undefined = undefined,
+    mobileMenu = true,
+    zIndex = 25;
+
+  let scrollY: number,
+    lastScrollY: number,
+    visible = true;
+  function handleScroll() {
+    if (hideOnScroll) {
+      if (scrollY > lastScrollY) {
+        visible = false;
+      } else {
+        visible = true;
+      }
     }
+
+    lastScrollY = scrollY;
+  }
+
+  export let openDrawer = false;
+  function toggleDrawer() {
+    openDrawer = !openDrawer;
+    dispatch('drawer-change', {
+      opened: openDrawer
+    })
   }
-  lastScrollY = scrollY;
-}
-export let openDrawer = false;
-function toggleDrawer() {
-  openDrawer = !openDrawer;
-  dispatch("drawer-change", {
-    opened: openDrawer
-  });
-}
 </script>
 
 <svelte:window bind:scrollY on:scroll={handleScroll} />

package/dist/components/simple/navigation/HeaderMenu.svelte.d.ts

@@ -1,39 +1,43 @@
-import { SvelteComponent } from "svelte";
 import '../../../css/main.css';
 import './HeaderMenu.css';
-declare const __propDef: {
-    props: {
-        title?: string | undefined;
-        hideOnScroll?: boolean | undefined;
-        initialRemoveShadow?: boolean | undefined;
-        color?: string | undefined;
-        mobileMenu?: boolean | undefined;
-        zIndex?: number | undefined;
-        openDrawer?: 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: {
-        'item-click': CustomEvent<{
-            item: import("./Navigator.svelte").Item;
-        }>;
-        'drawer-change': CustomEvent<{
-            opened: boolean;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        drawer: {};
-        prepend: {
-            toggleDrawer: () => void;
-            openDrawer: boolean;
-        };
-        title: {};
-        append: {};
-    };
-};
-export type HeaderMenuProps = typeof __propDef.props;
-export type HeaderMenuEvents = typeof __propDef.events;
-export type HeaderMenuSlots = typeof __propDef.slots;
-export default class HeaderMenu extends SvelteComponent<HeaderMenuProps, HeaderMenuEvents, HeaderMenuSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const HeaderMenu: $$__sveltets_2_IsomorphicComponent<{
+    title?: string;
+    hideOnScroll?: boolean;
+    initialRemoveShadow?: boolean;
+    color?: string | undefined;
+    mobileMenu?: boolean;
+    zIndex?: number;
+    openDrawer?: boolean;
+}, {
+    'item-click': CustomEvent<{
+        item: import("./Navigator.svelte").Item;
+    }>;
+    'drawer-change': CustomEvent<{
+        opened: boolean;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    drawer: {};
+    prepend: {
+        toggleDrawer: () => void;
+        openDrawer: boolean;
+    };
+    title: {};
+    append: {};
+}, {}, string>;
+type HeaderMenu = InstanceType<typeof HeaderMenu>;
+export default HeaderMenu;

package/dist/components/simple/navigation/Navigator.svelte

@@ -1,12 +1,34 @@
-<script context="module"></script>
+<script context="module" lang="ts">
+  export type Item = {
+    title?: string;
+    icon?: string;
+    name: string;
+    url?: string;
+    detail?: object;
+  };
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  import Icon from "../media/Icon.svelte"
+  
+  export let items: Item[] = [],
+    color: string | undefined = undefined,
+    vertical = false,
+    variant: 'standard' | 'underlined' = 'underlined',
+    textColor: string | undefined = '',
+    hoverTextColor: string | undefined = undefined,
+    space = "20px";
 
-<script>import { createEventDispatcher } from "svelte";
-import Icon from "../media/Icon.svelte";
-export let items = [], color = void 0, vertical = false, variant = "underlined", textColor = "", hoverTextColor = void 0, space = "20px";
-const dispatch = createEventDispatcher();
-function handleItemClick(item) {
-  dispatch("item-click", { item });
-}
+  const dispatch = createEventDispatcher<{
+    "item-click": {
+      item: Item;
+    };
+  }>();
+
+  function handleItemClick(item: Item) {
+    dispatch("item-click", { item });
+  }
 </script>
 
 <div 

package/dist/components/simple/navigation/Navigator.svelte.d.ts

@@ -1,4 +1,3 @@
-import { SvelteComponent } from "svelte";
 export type Item = {
     title?: string;
     icon?: string;
@@ -6,28 +5,33 @@ export type Item = {
     url?: string;
     detail?: object;
 };
-declare const __propDef: {
-    props: {
-        items?: Item[] | undefined;
-        color?: string | undefined;
-        vertical?: boolean | undefined;
-        variant?: "standard" | "underlined" | undefined;
-        textColor?: string | undefined;
-        hoverTextColor?: string | undefined;
-        space?: 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: {
-        "item-click": CustomEvent<{
-            item: Item;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type NavigatorProps = typeof __propDef.props;
-export type NavigatorEvents = typeof __propDef.events;
-export type NavigatorSlots = typeof __propDef.slots;
-export default class Navigator extends SvelteComponent<NavigatorProps, NavigatorEvents, NavigatorSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Navigator: $$__sveltets_2_IsomorphicComponent<{
+    items?: Item[];
+    color?: string | undefined;
+    vertical?: boolean;
+    variant?: "standard" | "underlined";
+    textColor?: string | undefined;
+    hoverTextColor?: string | undefined;
+    space?: string;
+}, {
+    "item-click": CustomEvent<{
+        item: Item;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Navigator = InstanceType<typeof Navigator>;
+export default Navigator;

package/dist/components/simple/navigation/TabSwitcher.svelte

@@ -1,54 +1,90 @@
-<script context="module"></script>
-
-<script>import { afterUpdate, onMount } from "svelte";
-import "./TabSwitcher.css";
-import { BROWSER } from "esm-env";
-let clazz = {};
-export { clazz as class };
-export let tabs = [], selected = void 0, mandatory = true;
-let tabButtons = {};
-onMount(() => {
-  if (mandatory && !selected && tabs.length > 0)
-    selected = tabs[0].name;
-  if (selected) {
-    setBookmarkPosition();
-  }
-});
-afterUpdate(() => {
-  setBookmarkPosition();
-});
-import { createEventDispatcher } from "svelte";
-import Icon from "../media/Icon.svelte";
-const dispatch = createEventDispatcher();
-let bookmarkWidth = 0, bookmarkLeft = 0;
-function handleTabClick(clickedTab, nativeEvent) {
-  selected = clickedTab.name;
-  setBookmarkPosition();
-  dispatch("tab-click", {
-    nativeEvent,
-    tab: clickedTab
+<script lang="ts" context="module">
+  export type Tab = {
+    name: string;
+    label: string;
+    icon?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { afterUpdate, onMount } from "svelte";
+  import './TabSwitcher.css'
+  import { BROWSER } from 'esm-env';
+
+  let clazz: {
+    container?: string,
+    tabs?: string,
+    selected?: string,
+    bookmark?: string,
+    guide?: string
+  } = {};
+	export { clazz as class };
+
+  export let tabs: Tab[] = [],
+    selected: string | undefined = undefined,
+    mandatory = true
+
+  let tabButtons: Record<string, HTMLElement> = {};
+  onMount(() => {
+    if (mandatory && !selected && tabs.length > 0) selected = tabs[0].name;
+
+    if (selected) {
+      setBookmarkPosition();
+    }
   });
-}
-function handleTabKeypress(clickedTab, nativeEvent) {
-  selected = clickedTab.name;
-  setBookmarkPosition();
-  dispatch("tab-keypress", {
-    nativeEvent,
-    tab: clickedTab
+
+  afterUpdate(() => {
+    setBookmarkPosition();
   });
-}
-function setBookmarkPosition() {
-  if (BROWSER) {
-    let tabButton = selected ? tabButtons[selected] : void 0;
-    if (tabButton) {
-      bookmarkWidth = tabButton.offsetWidth - 10;
-      bookmarkLeft = tabButton.offsetLeft + 5;
-    }
+
+  import { createEventDispatcher } from "svelte";
+  import Icon from "../media/Icon.svelte";
+  const dispatch = createEventDispatcher<{
+    "tab-click": {
+      nativeEvent: MouseEvent;
+      tab: Tab;
+    };
+    "tab-keypress": {
+      nativeEvent: KeyboardEvent;
+      tab: Tab;
+    };
+  }>();
+
+  let bookmarkWidth = 0,
+    bookmarkLeft = 0;
+
+  function handleTabClick(clickedTab: Tab, nativeEvent: MouseEvent) {
+    selected = clickedTab.name;
+    setBookmarkPosition();
+    dispatch("tab-click", {
+      nativeEvent: nativeEvent,
+      tab: clickedTab,
+    });
   }
-}
-$:
-  if (!!selected)
+
+  function handleTabKeypress(clickedTab: Tab, nativeEvent: KeyboardEvent) {
+    selected = clickedTab.name;
     setBookmarkPosition();
+    dispatch("tab-keypress", {
+      nativeEvent: nativeEvent,
+      tab: clickedTab,
+    });
+  }
+
+  function setBookmarkPosition() {
+    if(BROWSER) {
+      let tabButton: HTMLElement | undefined = selected
+        ? tabButtons[selected]
+        : undefined;
+  
+      if (tabButton) {
+        bookmarkWidth = tabButton.offsetWidth - 10;
+        bookmarkLeft = tabButton.offsetLeft + 5;
+      }
+    }
+  }
+
+  $: if(!!selected) setBookmarkPosition()
 </script>
 
 <div