@liwe3/webcomponents-svelte 1.1.0 → 1.1.11

package/dist/ResizableCropper.svelte

@@ -0,0 +1,168 @@
+<script lang="ts">
+import { onMount } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type {
+	ResizableCropperElement as ResizableCropperElementType,
+	ResizableCropperValues,
+} from '@liwe3/webcomponents';
+
+interface Props extends HTMLAttributes<ResizableCropperElementType> {
+	width? : number;
+	height? : number;
+	minWidth? : number;
+	minHeight? : number;
+	aspectRatio? : string;
+	disabled? : boolean;
+	allowCrop? : boolean;
+	allowResize? : boolean;
+	onchange? : ( values : ResizableCropperValues ) => void;
+	'onrcw:change'? : ( detail : any ) => void;
+	'onrcw:scale-start'? : ( detail : any ) => void;
+	'onrcw:crop-start'? : ( detail : any ) => void;
+	'onrcw:pan-start'? : ( detail : any ) => void;
+}
+
+let {
+	width = 200,
+	height = 150,
+	minWidth = 50,
+	minHeight = 50,
+	aspectRatio,
+	disabled = false,
+	allowCrop = true,
+	allowResize = true,
+	onchange,
+	'onrcw:change': onRcwChange,
+	'onrcw:scale-start': onRcwScaleStart,
+	'onrcw:crop-start': onRcwCropStart,
+	'onrcw:pan-start': onRcwPanStart,
+	children,
+	...restProps
+} : Props = $props();
+
+let cropperElement : ResizableCropperElementType;
+let isReady = $state( false );
+let removeListeners : (() => void) | null = null;
+
+/**
+ * Forwards custom events emitted by the web component to Svelte callbacks.
+ */
+const bindEvents = () => {
+	if ( !cropperElement ) return;
+
+	const handleChange = ( event : Event ) => {
+		const detail = ( event as CustomEvent ).detail as ResizableCropperValues;
+		onchange?.( detail );
+	};
+
+	const handleRcwChange = ( event : Event ) => {
+		const detail = ( event as CustomEvent ).detail;
+		onRcwChange?.( detail );
+	};
+
+	const handleRcwScaleStart = ( event : Event ) => {
+		const detail = ( event as CustomEvent ).detail;
+		onRcwScaleStart?.( detail );
+	};
+
+	const handleRcwCropStart = ( event : Event ) => {
+		const detail = ( event as CustomEvent ).detail;
+		onRcwCropStart?.( detail );
+	};
+
+	const handleRcwPanStart = ( event : Event ) => {
+		const detail = ( event as CustomEvent ).detail;
+		onRcwPanStart?.( detail );
+	};
+
+	cropperElement.addEventListener( 'change', handleChange as EventListener );
+	cropperElement.addEventListener( 'rcw:change', handleRcwChange as EventListener );
+	cropperElement.addEventListener( 'rcw:scale-start', handleRcwScaleStart as EventListener );
+	cropperElement.addEventListener( 'rcw:crop-start', handleRcwCropStart as EventListener );
+	cropperElement.addEventListener( 'rcw:pan-start', handleRcwPanStart as EventListener );
+
+	removeListeners = () => {
+		cropperElement.removeEventListener( 'change', handleChange as EventListener );
+		cropperElement.removeEventListener( 'rcw:change', handleRcwChange as EventListener );
+		cropperElement.removeEventListener( 'rcw:scale-start', handleRcwScaleStart as EventListener );
+		cropperElement.removeEventListener( 'rcw:crop-start', handleRcwCropStart as EventListener );
+		cropperElement.removeEventListener( 'rcw:pan-start', handleRcwPanStart as EventListener );
+	};
+};
+
+onMount( () => {
+	let isMounted = true;
+
+	const setup = async () => {
+		await import( '@liwe3/webcomponents/resizable-cropper' );
+		await customElements.whenDefined( 'liwe3-resizable-cropper' );
+
+		if ( !isMounted ) return;
+		isReady = true;
+		bindEvents();
+	};
+
+	void setup();
+
+	return () => {
+		isMounted = false;
+		removeListeners?.();
+		removeListeners = null;
+	};
+} );
+
+$effect( () => {
+	if ( !isReady || !cropperElement ) return;
+	cropperElement.width = width;
+} );
+
+$effect( () => {
+	if ( !isReady || !cropperElement ) return;
+	cropperElement.height = height;
+} );
+
+$effect( () => {
+	if ( !isReady || !cropperElement ) return;
+	cropperElement.minWidth = minWidth;
+} );
+
+$effect( () => {
+	if ( !isReady || !cropperElement ) return;
+	cropperElement.minHeight = minHeight;
+} );
+
+$effect( () => {
+	if ( !isReady || !cropperElement ) return;
+	cropperElement.aspectRatio = aspectRatio || null;
+} );
+
+$effect( () => {
+	if ( !isReady || !cropperElement ) return;
+	cropperElement.disabled = disabled;
+} );
+
+$effect( () => {
+	if ( !isReady || !cropperElement ) return;
+	cropperElement.allowCrop = allowCrop;
+} );
+
+$effect( () => {
+	if ( !isReady || !cropperElement ) return;
+	cropperElement.allowResize = allowResize;
+} );
+
+/**
+ * Expose public methods
+ */
+export function getValues() : ResizableCropperValues | undefined {
+	return cropperElement?.getValues();
+}
+
+export function setValues( values : Partial<ResizableCropperValues> ) : void {
+	cropperElement?.setValues( values );
+}
+</script>
+
+<liwe3-resizable-cropper bind:this={cropperElement} {...restProps}>
+	{@render children?.()}
+</liwe3-resizable-cropper>

package/dist/ResizableCropper.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ResizableCropperElement as ResizableCropperElementType, ResizableCropperValues } from '@liwe3/webcomponents';
+interface Props extends HTMLAttributes<ResizableCropperElementType> {
+    width?: number;
+    height?: number;
+    minWidth?: number;
+    minHeight?: number;
+    aspectRatio?: string;
+    disabled?: boolean;
+    allowCrop?: boolean;
+    allowResize?: boolean;
+    onchange?: (values: ResizableCropperValues) => void;
+    'onrcw:change'?: (detail: any) => void;
+    'onrcw:scale-start'?: (detail: any) => void;
+    'onrcw:crop-start'?: (detail: any) => void;
+    'onrcw:pan-start'?: (detail: any) => void;
+}
+declare const ResizableCropper: import("svelte").Component<Props, {
+    getValues: () => ResizableCropperValues | undefined;
+    setValues: (values: Partial<ResizableCropperValues>) => void;
+}, "">;
+type ResizableCropper = ReturnType<typeof ResizableCropper>;
+export default ResizableCropper;
+//# sourceMappingURL=ResizableCropper.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResizableCropper.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ResizableCropper.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EACX,uBAAuB,IAAI,2BAA2B,EACtD,sBAAsB,EACtB,MAAM,sBAAsB,CAAC;AAG9B,UAAU,KAAM,SAAQ,cAAc,CAAC,2BAA2B,CAAC;IAClE,KAAK,CAAC,EAAG,MAAM,CAAC;IAChB,MAAM,CAAC,EAAG,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAG,MAAM,CAAC;IACnB,SAAS,CAAC,EAAG,MAAM,CAAC;IACpB,WAAW,CAAC,EAAG,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAG,OAAO,CAAC;IACpB,SAAS,CAAC,EAAG,OAAO,CAAC;IACrB,WAAW,CAAC,EAAG,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAG,CAAE,MAAM,EAAG,sBAAsB,KAAM,IAAI,CAAC;IACxD,cAAc,CAAC,EAAG,CAAE,MAAM,EAAG,GAAG,KAAM,IAAI,CAAC;IAC3C,mBAAmB,CAAC,EAAG,CAAE,MAAM,EAAG,GAAG,KAAM,IAAI,CAAC;IAChD,kBAAkB,CAAC,EAAG,CAAE,MAAM,EAAG,GAAG,KAAM,IAAI,CAAC;IAC/C,iBAAiB,CAAC,EAAG,CAAE,MAAM,EAAG,GAAG,KAAM,IAAI,CAAC;CAC9C;AA0JD,QAAA,MAAM,gBAAgB;qBAfE,sBAAsB,GAAG,SAAS;wBAI5B,OAAO,CAAC,sBAAsB,CAAC,KAAK,IAAI;MAWR,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/index.d.ts

@@ -2,7 +2,7 @@
  * @liwe3/webcomponents-svelte
  * Svelte 5 wrappers for @liwe3/webcomponents
  */
-export type { SelectOption, AITextEditorConfig, ToastType, ToastButton, ToastConfig, ToastElement, PopoverMenuItem, PopoverMenuConfig, DateRange, TreeNode, UploadedFile, ChunkUploaderConfig } from '@liwe3/webcomponents';
+export type { SelectOption, AITextEditorConfig, ToastType, ToastButton, ToastConfig, ToastElement, DialogButton, DialogConfig, DialogElement, PopoverMenuItem, PopoverMenuConfig, DateRange, TreeNode, UploadedFile, ChunkUploaderConfig, CheckListItem, ButtonToolbarItem, ButtonToolbarGroup, ResizableCropperValues } from '@liwe3/webcomponents';
 export { default as SmartSelect } from './SmartSelect.svelte';
 export { default as AITextEditor } from './AITextEditor.svelte';
 export { default as PopoverMenu } from './PopoverMenu.svelte';
@@ -11,5 +11,12 @@ 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 ButtonToolbar } from './ButtonToolbar.svelte';
+export { default as AIMarkdownEditor } from './AIMarkdownEditor.svelte';
+export { default as MarkdownPreview } from './MarkdownPreview.svelte';
+export type { ChunkFileEvent } from './ChunkUploader.svelte';
+export { default as CheckList } from './CheckList.svelte';
 export { default as Toasts, toastAdd } from './Toasts.svelte';
+export { default as Dialogs, dialogAdd } from './Dialogs.svelte';
+export { default as ResizableCropper } from './ResizableCropper.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,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"}
+{"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,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,eAAe,EAC3J,iBAAiB,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,mBAAmB,EAAE,aAAa,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAGxL,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;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAGlE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAGxE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAGtE,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAG7D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -11,5 +11,16 @@ 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 ButtonToolbar } from './ButtonToolbar.svelte';
+// Export AIMarkdownEditor
+export { default as AIMarkdownEditor } from './AIMarkdownEditor.svelte';
+// Export MarkdownPreview
+export { default as MarkdownPreview } from './MarkdownPreview.svelte';
+// Export CheckList
+export { default as CheckList } from './CheckList.svelte';
 // Export Toasts component and toastAdd function
 export { default as Toasts, toastAdd } from './Toasts.svelte';
+// Export Dialogs component and dialogAdd function
+export { default as Dialogs, dialogAdd } from './Dialogs.svelte';
+// Export ResizableCropper
+export { default as ResizableCropper } from './ResizableCropper.svelte';

package/package.json

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