@liwe3/webcomponents-svelte 1.0.14 → 1.1.0

package/dist/ChunkUploader.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import type {
+    ChunkUploaderElement as ChunkUploaderElementType,
+    UploadedFile,
+  } from "@liwe3/webcomponents";
+
+  interface Props extends HTMLAttributes<ChunkUploaderElementType> {
+    serverURL?: string;
+    chunkSize?: number;
+    authToken?: string;
+    validFiletypes?: string[];
+    maxFileSize?: number;
+    onfilecomplete?: (event: CustomEvent<UploadedFile>) => void;
+    onuploadcomplete?: (event: CustomEvent<UploadedFile[]>) => void;
+    onuploadaborted?: (event: CustomEvent<UploadedFile[]>) => void;
+  }
+
+  let {
+    serverURL = "",
+    chunkSize = 5,
+    authToken,
+    validFiletypes,
+    maxFileSize = 5120,
+    onfilecomplete,
+    onuploadcomplete,
+    onuploadaborted,
+    ...restProps
+  }: Props = $props();
+
+  let uploaderElement: ChunkUploaderElementType;
+  let isReady = false;
+  let removeListeners: (() => void) | null = null;
+
+  /**
+   * Syncs the latest prop values down to the underlying web component.
+   */
+  const syncProps = () => {
+    if (!isReady || !uploaderElement) return;
+
+    uploaderElement.serverURL = serverURL ?? "";
+    uploaderElement.chunkSize = chunkSize;
+    uploaderElement.authToken = authToken;
+    uploaderElement.validFiletypes = validFiletypes?.length
+      ? [...validFiletypes]
+      : undefined;
+    uploaderElement.maxFileSize = maxFileSize;
+  };
+
+  /**
+   * Forwards custom events emitted by the web component to Svelte callbacks.
+   */
+  const bindEvents = () => {
+    if (!uploaderElement) return;
+
+    const handleFileComplete = (event: Event) => {
+      onfilecomplete?.(event as CustomEvent<UploadedFile>);
+    };
+
+    const handleUploadComplete = (event: Event) => {
+      onuploadcomplete?.(event as CustomEvent<UploadedFile[]>);
+    };
+
+    const handleUploadAborted = (event: Event) => {
+      onuploadaborted?.(event as CustomEvent<UploadedFile[]>);
+    };
+
+    uploaderElement.addEventListener(
+      "filecomplete",
+      handleFileComplete as EventListener
+    );
+    uploaderElement.addEventListener(
+      "uploadcomplete",
+      handleUploadComplete as EventListener
+    );
+    uploaderElement.addEventListener(
+      "uploadaborted",
+      handleUploadAborted as EventListener
+    );
+
+    removeListeners = () => {
+      uploaderElement.removeEventListener(
+        "filecomplete",
+        handleFileComplete as EventListener
+      );
+      uploaderElement.removeEventListener(
+        "uploadcomplete",
+        handleUploadComplete as EventListener
+      );
+      uploaderElement.removeEventListener(
+        "uploadaborted",
+        handleUploadAborted as EventListener
+      );
+    };
+  };
+
+  onMount(() => {
+    let isMounted = true;
+
+    const setup = async () => {
+      await import("@liwe3/webcomponents/chunk-uploader");
+      await customElements.whenDefined("liwe3-chunk-uploader");
+
+      if (!isMounted) return;
+      isReady = true;
+      syncProps();
+      bindEvents();
+    };
+
+    void setup();
+
+    return () => {
+      isMounted = false;
+      removeListeners?.();
+      removeListeners = null;
+    };
+  });
+
+  $effect(() => {
+    if (!isReady || !uploaderElement) return;
+    uploaderElement.serverURL = serverURL ?? "";
+  });
+
+  $effect(() => {
+    if (!isReady || !uploaderElement) return;
+    uploaderElement.chunkSize = chunkSize;
+  });
+
+  $effect(() => {
+    if (!isReady || !uploaderElement) return;
+    uploaderElement.authToken = authToken;
+  });
+
+  $effect(() => {
+    if (!isReady || !uploaderElement) return;
+    uploaderElement.validFiletypes = validFiletypes?.length
+      ? [...validFiletypes]
+      : undefined;
+  });
+
+  $effect(() => {
+    if (!isReady || !uploaderElement) return;
+    uploaderElement.maxFileSize = maxFileSize;
+  });
+</script>
+
+<liwe3-chunk-uploader bind:this={uploaderElement} {...restProps}
+></liwe3-chunk-uploader>

package/dist/ChunkUploader.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { ChunkUploaderElement as ChunkUploaderElementType, UploadedFile } from "@liwe3/webcomponents";
+interface Props extends HTMLAttributes<ChunkUploaderElementType> {
+    serverURL?: string;
+    chunkSize?: number;
+    authToken?: string;
+    validFiletypes?: string[];
+    maxFileSize?: number;
+    onfilecomplete?: (event: CustomEvent<UploadedFile>) => void;
+    onuploadcomplete?: (event: CustomEvent<UploadedFile[]>) => void;
+    onuploadaborted?: (event: CustomEvent<UploadedFile[]>) => void;
+}
+declare const ChunkUploader: import("svelte").Component<Props, {}, "">;
+type ChunkUploader = ReturnType<typeof ChunkUploader>;
+export default ChunkUploader;
+//# sourceMappingURL=ChunkUploader.svelte.d.ts.map

package/dist/ChunkUploader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChunkUploader.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ChunkUploader.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EACR,oBAAoB,IAAI,wBAAwB,EAChD,YAAY,EACb,MAAM,sBAAsB,CAAC;AAG9B,UAAU,KAAM,SAAQ,cAAc,CAAC,wBAAwB,CAAC;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IAC5D,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,YAAY,EAAE,CAAC,KAAK,IAAI,CAAC;IAChE,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,YAAY,EAAE,CAAC,KAAK,IAAI,CAAC;CAChE;AA2IH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/ContainerBox.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { PopoverMenuItem, MenuPosition } from "@liwe3/webcomponents";
+
+  interface Props {
+    menuPosition?: MenuPosition;
+    menuItems?: PopoverMenuItem[];
+    alwaysShowMenu?: boolean;
+    children?: import("svelte").Snippet;
+  }
+
+  let {
+    menuPosition = "bottom-left",
+    menuItems = [],
+    alwaysShowMenu = false,
+    children,
+    ...restProps
+  }: Props = $props();
+
+  let containerBoxElement: HTMLElement;
+  let isReady = $state(false);
+
+  const updateProps = () => {
+    if (!containerBoxElement || !isReady) return;
+
+    const el = containerBoxElement as any;
+
+    if (typeof el.setMenuPosition === "function") {
+      el.setMenuPosition(menuPosition);
+    }
+    if (typeof el.setMenuItems === "function") {
+      el.setMenuItems(menuItems);
+    }
+    if (typeof el.setAlwaysShowMenu === "function") {
+      el.setAlwaysShowMenu(alwaysShowMenu);
+    }
+  };
+
+  onMount(async () => {
+    // Dynamically import the web component
+    await import("@liwe3/webcomponents/container-box");
+    await customElements.whenDefined("liwe3-container-box");
+
+    isReady = true;
+    updateProps();
+  });
+
+  $effect(() => {
+    if (isReady) {
+      updateProps();
+    }
+  });
+</script>
+
+<!-- svelte-ignore a11y_unknown_aria_attribute -->
+<liwe3-container-box bind:this={containerBoxElement} {...restProps}>
+  {@render children?.()}
+</liwe3-container-box>

package/dist/ContainerBox.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { PopoverMenuItem, MenuPosition } from "@liwe3/webcomponents";
+interface Props {
+    menuPosition?: MenuPosition;
+    menuItems?: PopoverMenuItem[];
+    alwaysShowMenu?: boolean;
+    children?: import("svelte").Snippet;
+}
+declare const ContainerBox: import("svelte").Component<Props, {}, "">;
+type ContainerBox = ReturnType<typeof ContainerBox>;
+export default ContainerBox;
+//# sourceMappingURL=ContainerBox.svelte.d.ts.map

package/dist/ContainerBox.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContainerBox.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ContainerBox.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGxE,UAAU,KAAK;IACb,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,SAAS,CAAC,EAAE,eAAe,EAAE,CAAC;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACrC;AAwDH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/Drawer.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+  import { onDestroy, onMount } from "svelte";
+  import type { Snippet } from "svelte";
+
+  type DrawerDirection = "horizontal" | "vertical";
+  type DrawerState = "expanded" | "shrunk" | "closed";
+
+  interface DrawerElement extends HTMLElement {
+    direction: DrawerDirection;
+    duration: number;
+    showTitleWhenShrunk: boolean;
+    closable: boolean;
+    title: string;
+    icon: string;
+    showToggleButton: boolean;
+    contentPadding: string;
+    state: DrawerState;
+    expand: () => void;
+    shrink: () => void;
+    close: () => void;
+    toggle: () => void;
+  }
+
+  interface Props {
+    direction?: DrawerDirection;
+    duration?: number;
+    showTitleWhenShrunk?: boolean;
+    closable?: boolean;
+    title?: string;
+    icon?: string;
+    state?: DrawerState;
+    showToggleButton?: boolean;
+    contentPadding?: string;
+    onstatechange?: (
+      event: CustomEvent<{ oldState: DrawerState; newState: DrawerState }>
+    ) => void;
+    onexpanded?: (event: CustomEvent) => void;
+    onshrunk?: (event: CustomEvent) => void;
+    onclosed?: (event: CustomEvent) => void;
+    children?: Snippet;
+  }
+
+  let {
+    direction = "horizontal",
+    duration = 300,
+    showTitleWhenShrunk = false,
+    closable = true,
+    title = "",
+    icon = "☰",
+    state = $bindable<DrawerState>("expanded"),
+    showToggleButton = true,
+    contentPadding = "16px",
+    onstatechange,
+    onexpanded,
+    onshrunk,
+    onclosed,
+    children,
+    ...restProps
+  }: Props = $props();
+
+  let drawerElement: DrawerElement;
+  let isReady = false;
+  let eventsBound = false;
+  let removeListeners: (() => void) | null = null;
+
+  const updateAttributes = () => {
+    if (!drawerElement || !isReady) return;
+
+    drawerElement.direction = direction;
+    drawerElement.duration = duration;
+    drawerElement.showTitleWhenShrunk = showTitleWhenShrunk;
+    drawerElement.closable = closable;
+    drawerElement.title = title;
+    drawerElement.icon = icon;
+    drawerElement.showToggleButton = showToggleButton;
+    drawerElement.contentPadding = contentPadding ?? "16px";
+    drawerElement.state = state;
+  };
+
+  const bindEvents = () => {
+    if (!drawerElement || eventsBound) return;
+
+    const handleStateChange = (event: Event) => {
+      const customEvent = event as CustomEvent<{
+        oldState: DrawerState;
+        newState: DrawerState;
+      }>;
+
+      state = customEvent.detail.newState;
+      onstatechange?.(customEvent);
+    };
+
+    const handleExpanded = (event: Event) => {
+      onexpanded?.(event as CustomEvent);
+    };
+
+    const handleShrunk = (event: Event) => {
+      onshrunk?.(event as CustomEvent);
+    };
+
+    const handleClosed = (event: Event) => {
+      onclosed?.(event as CustomEvent);
+    };
+
+    drawerElement.addEventListener(
+      "drawer-state-change",
+      handleStateChange as EventListener
+    );
+    drawerElement.addEventListener(
+      "drawer-expanded",
+      handleExpanded as EventListener
+    );
+    drawerElement.addEventListener(
+      "drawer-shrunk",
+      handleShrunk as EventListener
+    );
+    drawerElement.addEventListener(
+      "drawer-closed",
+      handleClosed as EventListener
+    );
+
+    removeListeners = () => {
+      drawerElement.removeEventListener(
+        "drawer-state-change",
+        handleStateChange as EventListener
+      );
+      drawerElement.removeEventListener(
+        "drawer-expanded",
+        handleExpanded as EventListener
+      );
+      drawerElement.removeEventListener(
+        "drawer-shrunk",
+        handleShrunk as EventListener
+      );
+      drawerElement.removeEventListener(
+        "drawer-closed",
+        handleClosed as EventListener
+      );
+    };
+
+    eventsBound = true;
+  };
+
+  onMount(async () => {
+    await import("@liwe3/webcomponents/drawer");
+    await customElements.whenDefined("liwe3-drawer");
+
+    isReady = true;
+    updateAttributes();
+    bindEvents();
+  });
+
+  onDestroy(() => {
+    removeListeners?.();
+    removeListeners = null;
+    eventsBound = false;
+  });
+
+  $effect(() => {
+    if (!isReady) return;
+    updateAttributes();
+  });
+
+  /** Expand the drawer programmatically. */
+  export const expand = () => {
+    drawerElement?.expand();
+  };
+
+  /** Shrink the drawer to its collapsed size. */
+  export const shrink = () => {
+    drawerElement?.shrink();
+  };
+
+  /** Close the drawer and remove it from the DOM. */
+  export const close = () => {
+    drawerElement?.close();
+  };
+
+  /** Toggle between expanded and shrunk states. */
+  export const toggle = () => {
+    drawerElement?.toggle();
+  };
+
+  /** Return the current drawer state. */
+  export const getState = (): DrawerState => {
+    return drawerElement?.state ?? state;
+  };
+
+  /** Imperatively set the drawer state. */
+  export const setState = (nextState: DrawerState) => {
+    if (!drawerElement) return;
+
+    drawerElement.state = nextState;
+    state = nextState;
+  };
+</script>
+
+<!-- svelte-ignore a11y_unknown_aria_attribute -->
+<liwe3-drawer bind:this={drawerElement} {...restProps}>
+  {@render children?.()}
+</liwe3-drawer>

package/dist/Drawer.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from "svelte";
+type DrawerDirection = "horizontal" | "vertical";
+type DrawerState = "expanded" | "shrunk" | "closed";
+interface Props {
+    direction?: DrawerDirection;
+    duration?: number;
+    showTitleWhenShrunk?: boolean;
+    closable?: boolean;
+    title?: string;
+    icon?: string;
+    state?: DrawerState;
+    showToggleButton?: boolean;
+    contentPadding?: string;
+    onstatechange?: (event: CustomEvent<{
+        oldState: DrawerState;
+        newState: DrawerState;
+    }>) => void;
+    onexpanded?: (event: CustomEvent) => void;
+    onshrunk?: (event: CustomEvent) => void;
+    onclosed?: (event: CustomEvent) => void;
+    children?: Snippet;
+}
+declare const Drawer: import("svelte").Component<Props, {
+    /** Expand the drawer programmatically. */ expand: () => void;
+    /** Shrink the drawer to its collapsed size. */ shrink: () => void;
+    /** Close the drawer and remove it from the DOM. */ close: () => void;
+    /** Toggle between expanded and shrunk states. */ toggle: () => void;
+    /** Return the current drawer state. */ getState: () => DrawerState;
+    /** Imperatively set the drawer state. */ setState: (nextState: DrawerState) => void;
+}, "state">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;
+//# sourceMappingURL=Drawer.svelte.d.ts.map

package/dist/Drawer.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Drawer.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,KAAK,eAAe,GAAG,YAAY,GAAG,UAAU,CAAC;AACjD,KAAK,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAkBpD,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,CACd,KAAK,EAAE,WAAW,CAAC;QAAE,QAAQ,EAAE,WAAW,CAAC;QAAC,QAAQ,EAAE,WAAW,CAAA;KAAE,CAAC,KACjE,IAAI,CAAC;IACV,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiLH,QAAA,MAAM,MAAM;IANZ,0CAA0C;IAC1C,+CAA+C;IAC/C,mDAAmD;IACnD,iDAAiD;IACjD,uCAAuC,iBAxBf,WAAW;IAyBnC,yCAAyC,uBApBT,WAAW;WAqBS,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/Toasts.svelte

@@ -1,5 +1,8 @@
 <script module lang="ts">
-	import type { ToastConfig, ToastElement } from '@liwe3/webcomponents';
+	import type { ToastConfig, ToastElement, ToastPosition } from '@liwe3/webcomponents';
+
+	// Re-export types for convenience
+	export type { ToastConfig, ToastElement, ToastPosition };
 
 	/**
 	 * Shows a toast notification with the given configuration.
@@ -23,7 +26,8 @@
 	 *   title: 'Success!',
 	 *   text: 'Your changes have been saved.',
 	 *   type: 'success',
-	 *   duration: 5000
+	 *   duration: 5000,
+	 *   position: 'TR' // Optional: TL, T, TR, BL, B, BR (default: TR)
 	 * });
 	 * ```
 	 */

package/dist/Toasts.svelte.d.ts

@@ -1,4 +1,5 @@
-import type { ToastConfig, ToastElement } from '@liwe3/webcomponents';
+import type { ToastConfig, ToastElement, ToastPosition } from '@liwe3/webcomponents';
+export type { ToastConfig, ToastElement, ToastPosition };
 /**
  * Shows a toast notification with the given configuration.
  *
@@ -21,7 +22,8 @@ import type { ToastConfig, ToastElement } from '@liwe3/webcomponents';
  *   title: 'Success!',
  *   text: 'Your changes have been saved.',
  *   type: 'success',
- *   duration: 5000
+ *   duration: 5000,
+ *   position: 'TR' // Optional: TL, T, TR, BL, B, BR (default: TR)
  * });
  * ```
  */

package/dist/Toasts.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toasts.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Toasts.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,QAAQ,GAAI,QAAQ,WAAW,KAAG,YAAY,GAAG,SAkB7D,CAAC;AAwBH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,MAAM;;kBAA+E,CAAC;AAC1E,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Toasts.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Toasts.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGrF,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,QAAQ,GAAI,QAAQ,WAAW,KAAG,YAAY,GAAG,SAkB7D,CAAC;AAwBH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,MAAM;;kBAA+E,CAAC;AAC1E,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}

package/dist/TreeView.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { TreeNode } from "@liwe3/webcomponents";
+
+  interface Props {
+    data?: TreeNode[];
+    indentWidth?: number;
+    selectedIds?: string[];
+    onselectionchange?: (selectedIds: string[]) => void;
+    ontoggle?: (event: CustomEvent<{ nodeId: string; expanded: boolean }>) => void;
+    onitemselected?: (event: CustomEvent<{ node: TreeNode; nodeId: string }>) => void;
+  }
+
+  let {
+    data = $bindable([]),
+    indentWidth = 20,
+    selectedIds = $bindable([]),
+    onselectionchange,
+    ontoggle,
+    onitemselected,
+    ...restProps
+  }: Props = $props();
+
+  let treeViewElement: HTMLElement;
+
+  /**
+   * Updates the web component's attributes based on props
+   */
+  const updateAttributes = () => {
+    if (!treeViewElement) return;
+
+    // Set data
+    if (data && data.length > 0) {
+      (treeViewElement as any).data = data;
+    }
+
+    // Set indent width
+    treeViewElement.setAttribute("indent-width", indentWidth.toString());
+
+    // Set selected IDs
+    if (selectedIds && selectedIds.length > 0) {
+      (treeViewElement as any).selectedNodeIds = selectedIds;
+    }
+  };
+
+  /**
+   * Binds event listeners to the web component
+   */
+  const bindEvents = () => {
+    if (!treeViewElement) return;
+
+    treeViewElement.addEventListener("selectionchange", (event) => {
+      const customEvent = event as CustomEvent;
+      selectedIds = customEvent.detail.selectedIds;
+      onselectionchange?.(selectedIds);
+    });
+
+    treeViewElement.addEventListener("toggle", (event) => {
+      ontoggle?.(event as CustomEvent);
+    });
+
+    treeViewElement.addEventListener("itemselected", (event) => {
+      onitemselected?.(event as CustomEvent);
+    });
+  };
+
+  onMount(async () => {
+    // Dynamically import the web component
+    await import("@liwe3/webcomponents/tree-view");
+
+    updateAttributes();
+    bindEvents();
+  });
+
+  /**
+   * Expose methods to parent component
+   */
+  export const toggleExpansion = (nodeId: string) => {
+    (treeViewElement as any)?.toggleExpansion(nodeId);
+  };
+
+  export const toggleSelection = (nodeId: string) => {
+    (treeViewElement as any)?.toggleSelection(nodeId);
+  };
+
+  export const selectAll = () => {
+    (treeViewElement as any)?.selectAll();
+  };
+
+  export const deselectAll = () => {
+    (treeViewElement as any)?.deselectAll();
+  };
+
+  export const expandAll = () => {
+    (treeViewElement as any)?.expandAll();
+  };
+
+  export const collapseAll = () => {
+    (treeViewElement as any)?.collapseAll();
+  };
+</script>
+
+<liwe3-tree-view bind:this={treeViewElement} {...restProps}></liwe3-tree-view>

package/dist/TreeView.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { TreeNode } from "@liwe3/webcomponents";
+interface Props {
+    data?: TreeNode[];
+    indentWidth?: number;
+    selectedIds?: string[];
+    onselectionchange?: (selectedIds: string[]) => void;
+    ontoggle?: (event: CustomEvent<{
+        nodeId: string;
+        expanded: boolean;
+    }>) => void;
+    onitemselected?: (event: CustomEvent<{
+        node: TreeNode;
+        nodeId: string;
+    }>) => void;
+}
+declare const TreeView: import("svelte").Component<Props, {
+    /**
+       * Expose methods to parent component
+       */ toggleExpansion: (nodeId: string) => void;
+    toggleSelection: (nodeId: string) => void;
+    selectAll: () => void;
+    deselectAll: () => void;
+    expandAll: () => void;
+    collapseAll: () => void;
+}, "data" | "selectedIds">;
+type TreeView = ReturnType<typeof TreeView>;
+export default TreeView;
+//# sourceMappingURL=TreeView.svelte.d.ts.map

package/dist/TreeView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.svelte.d.ts","sourceRoot":"","sources":["../src/lib/TreeView.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGnD,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC/E,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CACnF;AAsGH,QAAA,MAAM,QAAQ;IAHd;;SAEK,2BA/B+B,MAAM;8BAIN,MAAM;;;;;0BA4BY,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/index.d.ts

@@ -2,10 +2,14 @@
  * @liwe3/webcomponents-svelte
  * Svelte 5 wrappers for @liwe3/webcomponents
  */
-export type { SelectOption, AITextEditorConfig, ToastType, ToastButton, ToastConfig, ToastElement, PopoverMenuItem, PopoverMenuConfig, DateRange } from '@liwe3/webcomponents';
+export type { SelectOption, AITextEditorConfig, ToastType, ToastButton, ToastConfig, ToastElement, PopoverMenuItem, PopoverMenuConfig, DateRange, TreeNode, UploadedFile, ChunkUploaderConfig } from '@liwe3/webcomponents';
 export { default as SmartSelect } from './SmartSelect.svelte';
 export { default as AITextEditor } from './AITextEditor.svelte';
 export { default as PopoverMenu } from './PopoverMenu.svelte';
 export { default as DateSelector } from './DateSelector.svelte';
+export { default as TreeView } from './TreeView.svelte';
+export { default as Drawer } from './Drawer.svelte';
+export { default as ContainerBox } from './ContainerBox.svelte';
+export { default as ChunkUploader } from './ChunkUploader.svelte';
 export { default as Toasts, toastAdd } from './Toasts.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAG/K,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGhE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAG5N,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAGlE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/index.js

@@ -7,5 +7,9 @@ export { default as SmartSelect } from './SmartSelect.svelte';
 export { default as AITextEditor } from './AITextEditor.svelte';
 export { default as PopoverMenu } from './PopoverMenu.svelte';
 export { default as DateSelector } from './DateSelector.svelte';
+export { default as TreeView } from './TreeView.svelte';
+export { default as Drawer } from './Drawer.svelte';
+export { default as ContainerBox } from './ContainerBox.svelte';
+export { default as ChunkUploader } from './ChunkUploader.svelte';
 // Export Toasts component and toastAdd function
 export { default as Toasts, toastAdd } from './Toasts.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liwe3/webcomponents-svelte",
-  "version": "1.0.14",
+  "version": "1.1.0",
   "description": "Svelte 5 wrappers for @liwe3/webcomponents",
   "type": "module",
   "main": "./dist/index.js",