@likable-hair/svelte 3.3.21 → 3.3.23

package/dist/components/simple/common/Card.svelte.d.ts

@@ -1,40 +1,53 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        outlined?: boolean | undefined;
-        maxWidth?: string | undefined;
-        maxHeight?: string | undefined;
-        minWidth?: string | undefined;
-        minHeight?: string | undefined;
-        width?: string | undefined;
-        height?: string | undefined;
-        padding?: string | undefined;
-        borderRadius?: string | undefined;
-        backgroundColor?: string | undefined;
-        color?: string | undefined;
-        borderColor?: string | undefined;
-        borderWidth?: string | undefined;
-        marginBottom?: string | undefined;
-        marginTop?: string | undefined;
-        marginLeft?: string | undefined;
-        marginRight?: string | undefined;
-        boxShadow?: 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: {
-        header: {};
-        default: {};
-        footer: {};
-    };
-};
-export type CardProps = typeof __propDef.props;
-export type CardEvents = typeof __propDef.events;
-export type CardSlots = typeof __propDef.slots;
-export default class Card extends SvelteComponent<CardProps, CardEvents, CardSlots> {
+    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 Card: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    outlined?: boolean;
+    maxWidth?: string | undefined;
+    maxHeight?: string | undefined;
+    minWidth?: string | undefined;
+    minHeight?: string | undefined;
+    width?: string;
+    height?: string | undefined;
+    padding?: string;
+    borderRadius?: string;
+    backgroundColor?: string;
+    color?: string | undefined;
+    borderColor?: string | undefined;
+    borderWidth?: string | undefined;
+    marginBottom?: string | undefined;
+    marginTop?: string | undefined;
+    marginLeft?: string | undefined;
+    marginRight?: string | undefined;
+    boxShadow?: string;
+}, {
+    header: {};
+    default: {};
+    footer: {};
+}>, {
+    click: MouseEvent;
+    keypress: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    default: {};
+    footer: {};
+}, {}, string>;
+type Card = InstanceType<typeof Card>;
+export default Card;

package/dist/components/simple/common/CollapsibleDivider.svelte

@@ -1,15 +1,27 @@
-<script>import "../../../css/main.css";
-import "./CollapsibleDivider.css";
-import { createEventDispatcher } from "svelte";
-import Icon from "../media/Icon.svelte";
-let dispatch = createEventDispatcher();
-export let collapsed = false, openedIconName = "mdi-chevron-left", collapsedIconName = "mdi-chevron-right", disabled = false;
-function handleCollapseClick() {
-  if (!disabled) {
-    collapsed = !collapsed;
-    dispatch("change", { collapsed });
+<script lang="ts">
+  import '../../../css/main.css'
+  import './CollapsibleDivider.css'
+  import { createEventDispatcher } from "svelte";
+  import Icon from "../media/Icon.svelte";
+
+  let dispatch = createEventDispatcher<{
+    'change': {
+      collapsed: boolean
+    }
+  }>()
+
+  export let collapsed: boolean = false,
+    openedIconName: string = "mdi-chevron-left",
+    collapsedIconName: string = "mdi-chevron-right",
+    disabled: boolean = false
+
+  function handleCollapseClick() {
+    if(!disabled) {
+      collapsed = !collapsed
+      dispatch('change', { collapsed })
+    }
   }
-}
+
 </script>
 
 <div

package/dist/components/simple/common/CollapsibleDivider.svelte.d.ts

@@ -1,29 +1,33 @@
-import { SvelteComponent } from "svelte";
 import '../../../css/main.css';
 import './CollapsibleDivider.css';
-declare const __propDef: {
-    props: {
-        collapsed?: boolean | undefined;
-        openedIconName?: string | undefined;
-        collapsedIconName?: 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;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        keypress: KeyboardEvent;
-        change: CustomEvent<{
-            collapsed: boolean;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CollapsibleDividerProps = typeof __propDef.props;
-export type CollapsibleDividerEvents = typeof __propDef.events;
-export type CollapsibleDividerSlots = typeof __propDef.slots;
-export default class CollapsibleDivider extends SvelteComponent<CollapsibleDividerProps, CollapsibleDividerEvents, CollapsibleDividerSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const CollapsibleDivider: $$__sveltets_2_IsomorphicComponent<{
+    collapsed?: boolean;
+    openedIconName?: string;
+    collapsedIconName?: string;
+    disabled?: boolean;
+}, {
+    click: MouseEvent;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    keypress: KeyboardEvent;
+    change: CustomEvent<{
+        collapsed: boolean;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CollapsibleDivider = InstanceType<typeof CollapsibleDivider>;
+export default CollapsibleDivider;

package/dist/components/simple/common/Divider.svelte

@@ -1,5 +1,11 @@
-<script>import "./Divider.css";
-export let weight = "1px", radius = "0.5px", marginTop = "10px", marginBottom = "10px", marginLeft = "5px", marginRight = "5px";
+<script lang="ts">
+	import './Divider.css'
+	export let weight = '1px',
+		radius = '0.5px',
+		marginTop: string | undefined = '10px',
+		marginBottom: string | undefined = '10px',
+		marginLeft: string | undefined = '5px',
+		marginRight: string | undefined = '5px'
 </script>
 
 <div

package/dist/components/simple/common/Divider.svelte.d.ts

@@ -1,22 +1,26 @@
-import { SvelteComponent } from "svelte";
 import './Divider.css';
-declare const __propDef: {
-    props: {
-        weight?: string | undefined;
-        radius?: string | undefined;
-        marginTop?: string | undefined;
-        marginBottom?: string | undefined;
-        marginLeft?: string | undefined;
-        marginRight?: 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: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DividerProps = typeof __propDef.props;
-export type DividerEvents = typeof __propDef.events;
-export type DividerSlots = typeof __propDef.slots;
-export default class Divider extends SvelteComponent<DividerProps, DividerEvents, DividerSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Divider: $$__sveltets_2_IsomorphicComponent<{
+    weight?: string;
+    radius?: string;
+    marginTop?: string | undefined;
+    marginBottom?: string | undefined;
+    marginLeft?: string | undefined;
+    marginRight?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Divider = InstanceType<typeof Divider>;
+export default Divider;

package/dist/components/simple/common/Gesture.svelte

@@ -1,53 +1,71 @@
-<script>import { createEventDispatcher } from "svelte";
-const dispatch = createEventDispatcher();
-export let timeThreshold = 200, diagonalThreshold = 100;
-let lastTouch, startTouch, endTouch, startTime, endTime;
-function handleTouchStart(event) {
-  lastTouch = event.touches[0];
-  startTouch = event.touches[0];
-  startTime = /* @__PURE__ */ new Date();
-}
-function handleTouchEnd(event) {
-  endTouch = event.changedTouches[0];
-  endTime = /* @__PURE__ */ new Date();
-  let timeDifference = endTime.getTime() - startTime.getTime();
-  if (timeDifference < timeThreshold) {
-    let direction;
-    let xDifference = endTouch.clientX - startTouch.clientX;
-    let yDifference = endTouch.clientY - startTouch.clientY;
-    if (Math.abs(Math.abs(xDifference) - Math.abs(yDifference)) < diagonalThreshold)
-      return;
-    if (Math.abs(xDifference) > Math.abs(yDifference)) {
-      if (xDifference > 0) {
-        direction = "right";
-      } else {
-        direction = "left";
-      }
-    } else {
-      if (yDifference > 0) {
-        direction = "down";
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
+  // TODO export the handler into a service to avoid mount 3 listeners for every component instance
+  export let timeThreshold = 200,
+    diagonalThreshold = 100;
+
+  let lastTouch, startTouch: Touch, endTouch, startTime: Date, endTime: Date;
+  function handleTouchStart(event: TouchEvent) {
+    lastTouch = event.touches[0];
+    startTouch = event.touches[0];
+    startTime = new Date();
+  }
+
+  function handleTouchEnd(event: TouchEvent) {
+    endTouch = event.changedTouches[0];
+    endTime = new Date();
+
+    let timeDifference = endTime.getTime() - startTime.getTime();
+    if (timeDifference < timeThreshold) {
+      let direction: "up" | "left" | "down" | "right";
+
+      let xDifference: number = endTouch.clientX - startTouch.clientX;
+      let yDifference: number = endTouch.clientY - startTouch.clientY;
+
+      // check if is diagonal swipe
+      if (
+        Math.abs(Math.abs(xDifference) - Math.abs(yDifference)) <
+        diagonalThreshold
+      )
+        return;
+
+      if (Math.abs(xDifference) > Math.abs(yDifference)) {
+        // horizontal
+        if (xDifference > 0) {
+          direction = "right";
+        } else {
+          direction = "left";
+        }
       } else {
-        direction = "up";
+        // vertical
+        if (yDifference > 0) {
+          direction = "down";
+        } else {
+          direction = "up";
+        }
       }
+
+      dispatch("swipe-" + direction, {
+        direction: direction,
+        timeDifference: timeDifference,
+        xDifference: xDifference,
+        yDifference: yDifference,
+      });
+
+      dispatch("swipe", {
+        direction: direction,
+        timeDifference: timeDifference,
+        xDifference: xDifference,
+        yDifference: yDifference,
+      });
     }
-    dispatch("swipe-" + direction, {
-      direction,
-      timeDifference,
-      xDifference,
-      yDifference
-    });
-    dispatch("swipe", {
-      direction,
-      timeDifference,
-      xDifference,
-      yDifference
-    });
   }
-}
-function handleTouchMove(event) {
-  let currentTouch = event.changedTouches[0];
-  lastTouch = currentTouch;
-}
+
+  function handleTouchMove(event: TouchEvent) {
+    let currentTouch = event.changedTouches[0];
+    lastTouch = currentTouch;
+  }
 </script>
 
 <svelte:window

package/dist/components/simple/common/Gesture.svelte.d.ts

@@ -1,19 +1,23 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        timeThreshold?: number | undefined;
-        diagonalThreshold?: 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: {
-        swipe: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type GestureProps = typeof __propDef.props;
-export type GestureEvents = typeof __propDef.events;
-export type GestureSlots = typeof __propDef.slots;
-export default class Gesture extends SvelteComponent<GestureProps, GestureEvents, GestureSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Gesture: $$__sveltets_2_IsomorphicComponent<{
+    timeThreshold?: number;
+    diagonalThreshold?: number;
+}, {
+    swipe: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Gesture = InstanceType<typeof Gesture>;
+export default Gesture;

package/dist/components/simple/common/InfiniteScroll.svelte

@@ -1,37 +1,60 @@
-<script>import { onDestroy, createEventDispatcher } from "svelte";
-export let threshold = 0, horizontal = false, elementScroll = null, hasMore = true, direction = "forward";
-const dispatch = createEventDispatcher();
-let isLoadMore = false, component;
-function onScroll(e) {
-  const element = e.target;
-  const offset = horizontal ? direction == "forward" ? element.scrollWidth - element.clientWidth - element.scrollLeft : element.scrollLeft : direction == "forward" ? element.scrollHeight - element.clientHeight - element.scrollTop : element.scrollTop;
-  if (offset <= threshold) {
-    if (!isLoadMore && hasMore) {
-      dispatch("loadMore");
+<script lang="ts">
+  import { onDestroy, createEventDispatcher } from "svelte";
+
+  export let threshold: number = 0,
+    horizontal: boolean = false,
+    elementScroll: HTMLElement | null = null,
+    hasMore: boolean = true,
+    direction: 'forward' | 'backward' = 'forward'
+
+  const dispatch = createEventDispatcher<{
+    'loadMore': undefined
+  }>();
+  let isLoadMore = false,
+    component: HTMLElement;
+
+  function onScroll(e: Event) {
+    const element = e.target as HTMLElement
+
+    const offset = horizontal 
+      ? direction == 'forward' 
+        ? element.scrollWidth - element.clientWidth - element.scrollLeft
+        : element.scrollLeft
+      : direction == 'forward' 
+        ? element.scrollHeight - element.clientHeight - element.scrollTop
+        : element.scrollTop
+    
+    if (offset <= threshold) {
+      if (!isLoadMore && hasMore) {
+        dispatch("loadMore")
+      }
+      isLoadMore = true
+    } else {
+      isLoadMore = false
     }
-    isLoadMore = true;
-  } else {
-    isLoadMore = false;
   }
-}
-$: {
-  if (component || elementScroll) {
-    const element = elementScroll ? elementScroll : component.parentNode;
-    if (element) {
-      element.addEventListener("scroll", onScroll);
-      element.addEventListener("resize", onScroll);
+
+  $: {
+    if (component || elementScroll) {
+      const element = elementScroll ? elementScroll : component.parentNode as HTMLElement
+
+      if (element) {
+        element.addEventListener("scroll", onScroll)
+        element.addEventListener("resize", onScroll)
+      }
     }
   }
-}
-onDestroy(() => {
-  if (component || elementScroll) {
-    const element = elementScroll ? elementScroll : component.parentNode;
-    if (element) {
-      element.removeEventListener("scroll", onScroll);
-      element.removeEventListener("resize", onScroll);
+
+  onDestroy(() => {
+    if (component || elementScroll) {
+      const element = elementScroll ? elementScroll : component.parentNode as HTMLElement
+
+      if (element) {
+        element.removeEventListener("scroll", onScroll)
+        element.removeEventListener("resize", onScroll)
+      }
     }
-  }
-});
+  })
 </script>
 
 <div bind:this={component} style:width="0px" />

package/dist/components/simple/common/InfiniteScroll.svelte.d.ts

@@ -1,22 +1,26 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        threshold?: number | undefined;
-        horizontal?: boolean | undefined;
-        elementScroll?: HTMLElement | null | undefined;
-        hasMore?: boolean | undefined;
-        direction?: "forward" | "backward" | 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: {
-        loadMore: CustomEvent<undefined>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type InfiniteScrollProps = typeof __propDef.props;
-export type InfiniteScrollEvents = typeof __propDef.events;
-export type InfiniteScrollSlots = typeof __propDef.slots;
-export default class InfiniteScroll extends SvelteComponent<InfiniteScrollProps, InfiniteScrollEvents, InfiniteScrollSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const InfiniteScroll: $$__sveltets_2_IsomorphicComponent<{
+    threshold?: number;
+    horizontal?: boolean;
+    elementScroll?: HTMLElement | null;
+    hasMore?: boolean;
+    direction?: "forward" | "backward";
+}, {
+    loadMore: CustomEvent<undefined>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InfiniteScroll = InstanceType<typeof InfiniteScroll>;
+export default InfiniteScroll;

package/dist/components/simple/common/IntersectionObserver.svelte

@@ -1,38 +1,51 @@
-<script>import { onMount } from "svelte";
-export let once = false;
-export let top = 0;
-export let bottom = 0;
-export let left = 0;
-export let right = 0;
-let intersecting = false;
-let container;
-onMount(() => {
-  if (typeof IntersectionObserver !== "undefined") {
-    const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        intersecting = entries[0].isIntersecting;
-        if (intersecting && once) {
-          observer.unobserve(container);
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  export let once = false;
+  export let top = 0;
+  export let bottom = 0;
+  export let left = 0;
+  export let right = 0;
+
+  let intersecting = false;
+  let container: HTMLElement;
+
+  onMount(() => {
+    if (typeof IntersectionObserver !== "undefined") {
+      const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          intersecting = entries[0].isIntersecting;
+          if (intersecting && once) {
+            observer.unobserve(container);
+          }
+        },
+        {
+          rootMargin,
         }
-      },
-      {
-        rootMargin
+      );
+
+      observer.observe(container);
+      return () => observer.unobserve(container);
+    }
+
+    function handler() {
+      const bcr = container.getBoundingClientRect();
+      intersecting =
+        bcr.bottom + bottom > 0 &&
+        bcr.right + right > 0 &&
+        bcr.top - top < window.innerHeight &&
+        bcr.left - left < window.innerWidth;
+
+      if (intersecting && once) {
+        window.removeEventListener("scroll", handler);
       }
-    );
-    observer.observe(container);
-    return () => observer.unobserve(container);
-  }
-  function handler() {
-    const bcr = container.getBoundingClientRect();
-    intersecting = bcr.bottom + bottom > 0 && bcr.right + right > 0 && bcr.top - top < window.innerHeight && bcr.left - left < window.innerWidth;
-    if (intersecting && once) {
-      window.removeEventListener("scroll", handler);
     }
-  }
-  window.addEventListener("scroll", handler);
-  return () => window.removeEventListener("scroll", handler);
-});
+
+    window.addEventListener("scroll", handler);
+    return () => window.removeEventListener("scroll", handler);
+  });
 </script>
 
 <div bind:this={container}>