@websline/system-components 1.3.11 → 1.3.13

package/dist/components/atoms/icon/components/Bed.svelte

@@ -0,0 +1,27 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M2.99998 18V20M21 18V20M3.99995 6.5C3.99995 5.67155 4.67153 5 5.49995 5H18.5C19.3284 5 20 5.67155 20 6.5V12H3.99995V6.5ZM14.5 9.5H9.5C8.67155 9.5 8 10.1715 8 11V12H16V11C16 10.1715 15.3285 9.5 14.5 9.5ZM2 13.5C2 12.6715 2.67158 12 3.5 12H20.5C21.3285 12 22 12.6715 22 13.5V18H2V13.5Z"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/Bed.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Bed;
+type Bed = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Bed: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/Coupons.svelte

@@ -0,0 +1,27 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M4.50006 8.00007L17 3.00006L19.0002 8.00007M8.5 12.6924H11.5M8.5 15.6924H15.5M2 8.00002H22V11C20.5 11 19 12 19 13.75C19 15.5 20.5 17 22 17V20H2V17C3.50008 17 5 16 5 14C5 12 3.5 11 2 11V8.00002Z"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/Coupons.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Coupons;
+type Coupons = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Coupons: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/Hourglass.svelte

@@ -0,0 +1,27 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M5 3H19M5 21H19M7 3V8.45455L11 13M17 21V14.6957L14 11M7 21V14.8537L9 12M17 3V8.53846L15 12M9 16H10M12 18H13"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/Hourglass.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Hourglass;
+type Hourglass = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Hourglass: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/Offer.svelte

@@ -0,0 +1,27 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M9 14H13M9 17H16M5.875 2H18.125C18.6082 2 19 2.44772 19 3V21C19 21.5523 18.6082 22 18.125 22H5.875C5.39175 22 5 21.5523 5 21V3C5 2.44772 5.39175 2 5.875 2ZM9 2H12V10L10.5 8L9 10V2Z"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/Offer.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Offer;
+type Offer = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Offer: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/Resource.svelte

@@ -0,0 +1,27 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M4 7.5L7.76471 9.75M4 7.5L12 3M4 7.5V16.5M4 16.5L12 12M4 16.5L12 21M12 21V16.5M12 21L20 16.5M20 16.5L12 12M20 16.5V7.5M20 7.5L16.2353 9.75M20 7.5L12 3M12 3V12"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/Resource.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Resource;
+type Resource = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Resource: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/index.js

@@ -10,6 +10,13 @@ const moduleRegistry = import.meta.glob("./**/*.svelte", {
 
 const registry = {};
 
+// e.g. for backwards compatibility
+const synonyms = {
+	"checkbox-stack": "checkboxStack",
+	"file-pdf": "filePDF",
+	unlink: "connectCrossed",
+};
+
 const addIconsToRegistry = (pathModuleRecord) => {
 	const map = Object.fromEntries(
 		Object.entries(pathModuleRecord).map(([path, module]) => {
@@ -28,26 +35,14 @@ const addIconsToRegistry = (pathModuleRecord) => {
 		}),
 	);
 	Object.assign(registry, map);
-};
 
-// e.g. for backwards compatibility
-const synonyms = {
-	"checkbox-stack": "checkboxStack",
-	"file-pdf": "filePDF",
-	unlink: "connectCrossed",
+	// attach synonyms to registry
+	Object.entries(synonyms).map(([k, v]) => {
+		if (registry[k]) return;
+		registry[k] = registry[v];
+	});
 };
 
 addIconsToRegistry(moduleRegistry);
 
-// attach synonyms to registry, with error handling for duplicates
-Object.entries(synonyms).map(([k, v]) => {
-	if (registry[k]) {
-		console.error(
-			`skipping synonym "${k}" because it already exists in the registry`,
-		);
-		return;
-	}
-	registry[k] = registry[v];
-});
-
 export { addIconsToRegistry, registry, synonyms };

package/dist/components/molecules/richTextEditor/RichTextEditor.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { onMount, setContext } from "svelte";
+	import { setContext, untrack } from "svelte";
 	import RichTextEditorToolbar from "./toolbar/RichTextEditorToolbar.svelte";
 	import { richTextEditorVariants } from "./richTextEditor.variants.js";
 
@@ -42,9 +42,11 @@
 		...rest
 	} = $props();
 
+	let DOMPurify;
 	let element = $state();
-	let htmlInputValue = $state();
+	/** @type {import("@tiptap/core").Editor} */
 	let editor = $state.raw();
+	let htmlInputValue = $state();
 
 	let styles = $derived(richTextEditorVariants({ hideToolbar, size }));
 
@@ -58,7 +60,7 @@
 		const { TextStyle } = await import("@tiptap/extension-text-style");
 		const Highlight = (await import("@tiptap/extension-highlight")).default;
 		const Placeholder = (await import("@tiptap/extension-placeholder")).default;
-		const DOMPurify = (await import("dompurify")).default;
+		DOMPurify = (await import("dompurify")).default;
 
 		editor = new Editor({
 			element: element,
@@ -86,24 +88,13 @@
 			editorProps: {
 				handlePaste(view, event) {
 					const html = event.clipboardData.getData("text/html");
+					const sanitized = sanitizeContent(html);
+					if (!sanitized) return false;
 
-					if (html) {
-						const cleaned = DOMPurify.sanitize(html, {
-							ALLOWED_TAGS: ["b", "strong", "i", "em", "u", "s", "strike", "p", "br"],
-							ALLOWED_ATTR: [],
-						});
-
-						const normalized = cleanHTMLWhitespace(cleaned);
-
-						editor.commands.insertContent(normalized);
-
-						return true;
-					}
-
-					return false;
+					editor.commands.insertContent(sanitized);
+					return true;
 				},
 			},
-			content,
 			onUpdate: () => {
 				htmlInputValue = editor.getHTML();
 				oninput?.(htmlInputValue);
@@ -113,14 +104,24 @@
 		editor.commands.focus("end");
 	};
 
-	onMount(() => {
-		initEditor();
+	$effect(() => {
+		element;
+		placeholder;
+		untrack(initEditor);
 
 		return () => {
 			editor?.destroy();
 		};
 	});
 
+	$effect(() => {
+		content;
+		if (editor) {
+			const sanitized = untrack(() => sanitizeContent(content));
+			editor.commands.setContent(sanitized ?? "");
+		}
+	});
+
 	const cleanHTMLWhitespace = (html) => {
 		const dom = document.createElement("div");
 		dom.innerHTML = html;
@@ -143,6 +144,17 @@
 
 		return dom.innerHTML.trim();
 	};
+
+	const sanitizeContent = (html) => {
+		if (typeof html !== "string" || !DOMPurify) return;
+
+		const cleaned = DOMPurify.sanitize(html, {
+			ALLOWED_TAGS: ["b", "strong", "i", "em", "u", "s", "strike", "p", "br"],
+			ALLOWED_ATTR: [],
+		});
+
+		return cleanHTMLWhitespace(cleaned);
+	};
 </script>
 
 <div class={styles.base({ class: classes.base })} {...rest}>
@@ -152,7 +164,7 @@
 		</div>
 	{/if}
 	{#if fieldName}
-		<input type="hidden" name={fieldName} bind:value={htmlInputValue} />
+		<input type="hidden" name={fieldName} value={htmlInputValue} />
 	{/if}
 	<div
 		class={styles.field({ class: classes.field })}

package/dist/components/organisms/dialog/dialog.variants.js

@@ -7,12 +7,12 @@ const dialogVariants = tv({
 			"my-4 grid max-h-[calc(100vh-32px)] w-[calc(100vw-32px)] min-w-xs grid-rows-[1fr_auto] gap-4 overflow-hidden rounded-lg bg-white px-4 py-3 leading-[1.486] shadow-sm dark:bg-neutral-800 dark:text-neutral-200",
 		overlay: "fixed inset-0 z-modal-backdrop bg-black/25",
 		positioner:
-			"fixed inset-0 z-1 z-modal grid items-center justify-items-center overflow-auto",
+			"fixed inset-0 z-modal grid items-center justify-items-center overflow-auto",
 		trigger: "cursor-pointer",
 		formActions: [
-			"[&>[data-role=dismiss]]:order-1 [&>[data-role=dismiss]]:mr-auto",
-			"[&>[data-role=secondary]]:order-2",
-			"[&>[data-role=cta]]:order-3",
+			"*:data-[role=dismiss]:order-1 *:data-[role=dismiss]:mr-auto",
+			"*:data-[role=secondary]:order-2",
+			"*:data-[role=cta]:order-3",
 		],
 	},
 	variants: {

package/dist/components/organisms/modal/modal.variants.js

@@ -9,7 +9,8 @@ const modalVariants = tv({
 			"flex items-end border-b border-neutral-300 px-4 py-3 ui-title-2 dark:border-neutral-700",
 		body: "h-full overflow-auto",
 		overlay: "fixed inset-0 z-modal-backdrop bg-black/25",
-		positioner: "fixed inset-0 z-modal grid items-center justify-items-center",
+		positioner:
+			"fixed inset-0 z-modal grid items-center justify-items-center overflow-auto",
 		trigger: "cursor-pointer",
 	},
 	variants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/system-components",
-  "version": "1.3.11",
+  "version": "1.3.13",
   "publishConfig": {
     "access": "public"
   },