@mhmo91/schmancy 0.9.28 → 0.10.2

package/dist/{mailbox--EN-JhjV.js → mailbox-DsPII8HR.js}

@@ -1,23 +1,16 @@
-import { t as e } from "./tailwind.mixin-mdQR3BEO.js";
-import { t } from "./decorate-D_utPUsC.js";
-import { t as n } from "./litElement.mixin-CszkJuNl.js";
-import "./mixins.js";
-import { t as r } from "./dialog-service-DH-tjPuE.js";
-import { n as i } from "./sheet.service-Dlv20Zfc.js";
+import { s as e } from "./mixins-CcIWET41.js";
+import { t } from "./decorate-23nYs4Le.js";
+import { t as n } from "./dialog-service-DI9PPy4H.js";
+import { n as r } from "./sheet.service-SPQ8oLCi.js";
 import "./dialog.js";
-import { r as a } from "./notification-CC-TFN5v.js";
-import { fromEvent as o, takeUntil as s } from "rxjs";
-import { customElement as c, property as l, state as u } from "lit/decorators.js";
-import { css as d, html as f } from "lit";
-import { createRef as p, ref as m } from "lit/directives/ref.js";
-import { repeat as h } from "lit/directives/repeat.js";
-import { when as g } from "lit/directives/when.js";
-var _ = class extends n(d`
-	:host {
-		display: block;
-		height: 100%;
-	}
-`) {
+import { r as i } from "./notification-CVLqQ8c_.js";
+import { fromEvent as a, takeUntil as o } from "rxjs";
+import { customElement as s, property as c, state as l } from "lit/decorators.js";
+import { css as u, html as d } from "lit";
+import { createRef as f, ref as p } from "lit/directives/ref.js";
+import { repeat as m } from "lit/directives/repeat.js";
+import { when as h } from "lit/directives/when.js";
+var g = class extends e {
 	constructor(...e) {
 		super(...e), this.config = {}, this.templates = [], this.importSources = [], this.disabled = !1, this.recipientsTitle = "Recipients", this.recipientsEmptyTitle = "No recipients yet", this.recipientsEmptyMessage = "Import from sources or upload a CSV", this.enableCsvImport = !0, this.enableDragDrop = !0, this.recipients = [], this.selectedRecipients = [], this.subject = "", this.body = "", this.templateId = null, this.attachments = [], this.isSending = !1, this.handleEmailsImported = (e) => {
 			let { emails: t } = e.detail, n = [...new Set([...this.recipients, ...t])], r = t.filter((e) => !this.recipients.includes(e));
@@ -102,6 +95,14 @@ var _ = class extends n(d`
 			}));
 		};
 	}
+	static {
+		this.styles = [u`
+	:host {
+		display: block;
+		height: 100%;
+	}
+`];
+	}
 	connectedCallback() {
 		super.connectedCallback(), this.setSending(this.disabled);
 	}
@@ -129,7 +130,7 @@ var _ = class extends n(d`
 	}
 	render() {
 		let e = this.selectedRecipients.length > 0 && this.subject.trim() && this.body.trim() && !this.isSending && !this.disabled;
-		return f`
+		return d`
 			<!-- Main Layout Container -->
 			<div class="flex flex-col h-full gap-6 p-6">
 				
@@ -176,7 +177,7 @@ var _ = class extends n(d`
 								<schmancy-typography type="body" token="sm" class="font-medium">
 									${this.selectedRecipients.length} recipient${this.selectedRecipients.length === 1 ? "" : "s"} selected
 								</schmancy-typography>
-								${g(this.attachments.length > 0, () => f`
+								${h(this.attachments.length > 0, () => d`
 									<schmancy-typography type="body" token="xs">
 										${this.attachments.length} attachment${this.attachments.length === 1 ? "" : "s"}
 									</schmancy-typography>
@@ -187,7 +188,6 @@ var _ = class extends n(d`
 							<schmancy-button
 								variant="filled"
 								?disabled=${!e}
-								?loading=${this.isSending}
 								@click=${this.handleSend}
 								class="w-full sm:w-auto"
 							>
@@ -219,8 +219,8 @@ var _ = class extends n(d`
 		`;
 	}
 };
-t([l({ type: Object })], _.prototype, "config", void 0), t([l({ type: Array })], _.prototype, "templates", void 0), t([l({ type: Array })], _.prototype, "importSources", void 0), t([l({ type: Boolean })], _.prototype, "disabled", void 0), t([l({ type: String })], _.prototype, "recipientsTitle", void 0), t([l({ type: String })], _.prototype, "recipientsEmptyTitle", void 0), t([l({ type: String })], _.prototype, "recipientsEmptyMessage", void 0), t([l({ type: Boolean })], _.prototype, "enableCsvImport", void 0), t([l({ type: Boolean })], _.prototype, "enableDragDrop", void 0), t([u()], _.prototype, "recipients", void 0), t([u()], _.prototype, "selectedRecipients", void 0), t([u()], _.prototype, "subject", void 0), t([u()], _.prototype, "body", void 0), t([u()], _.prototype, "templateId", void 0), t([u()], _.prototype, "attachments", void 0), t([u()], _.prototype, "isSending", void 0), _ = t([c("schmancy-mailbox")], _);
-var v = class extends e() {
+t([c({ type: Object })], g.prototype, "config", void 0), t([c({ type: Array })], g.prototype, "templates", void 0), t([c({ type: Array })], g.prototype, "importSources", void 0), t([c({ type: Boolean })], g.prototype, "disabled", void 0), t([c({ type: String })], g.prototype, "recipientsTitle", void 0), t([c({ type: String })], g.prototype, "recipientsEmptyTitle", void 0), t([c({ type: String })], g.prototype, "recipientsEmptyMessage", void 0), t([c({ type: Boolean })], g.prototype, "enableCsvImport", void 0), t([c({ type: Boolean })], g.prototype, "enableDragDrop", void 0), t([l()], g.prototype, "recipients", void 0), t([l()], g.prototype, "selectedRecipients", void 0), t([l()], g.prototype, "subject", void 0), t([l()], g.prototype, "body", void 0), t([l()], g.prototype, "templateId", void 0), t([l()], g.prototype, "attachments", void 0), t([l()], g.prototype, "isSending", void 0), g = t([s("schmancy-mailbox")], g);
+var _ = class extends e {
 	constructor(...e) {
 		super(...e), this.layouts = [
 			{
@@ -259,9 +259,9 @@ var v = class extends e() {
 		}));
 	}
 	render() {
-		return f`
+		return d`
 			<div class="grid p-3 gap-2">
-				${this.layouts.map((e) => f`
+				${this.layouts.map((e) => d`
 					<schmancy-button 
 						variant="outlined"
 						@click=${() => this.selectLayout(e.id)}
@@ -280,12 +280,8 @@ var v = class extends e() {
 		`;
 	}
 };
-v = t([c("schmancy-email-layout-selector")], v);
-var y = class extends n(d`
-	:host {
-		display: block;
-	}
-`) {
+_ = t([s("schmancy-email-layout-selector")], _);
+var v = class extends e {
 	constructor(...e) {
 		super(...e), this.templates = [], this.searchQuery = "", this.filteredTemplates = [], this.selectedCategory = "all", this.handleSearch = (e) => {
 			let t = e.target;
@@ -297,11 +293,18 @@ var y = class extends n(d`
 				detail: e,
 				bubbles: !0,
 				composed: !0
-			})), i.dismiss();
+			})), r.dismiss();
 		}, this.close = () => {
-			i.dismiss();
+			r.dismiss();
 		};
 	}
+	static {
+		this.styles = [u`
+	:host {
+		display: block;
+	}
+`];
+	}
 	connectedCallback() {
 		super.connectedCallback(), this.updateFilteredTemplates();
 	}
@@ -323,7 +326,7 @@ var y = class extends n(d`
 		this.filteredTemplates = e;
 	}
 	render() {
-		return f`
+		return d`
 			<div class="flex flex-col h-full overflow-hidden">
 				<!-- Header -->
 				<div class="flex items-center justify-between px-6 py-4 border-b border-outline-variant">
@@ -350,7 +353,7 @@ var y = class extends n(d`
 		`;
 	}
 	renderTemplateList() {
-		return f`
+		return d`
 			<!-- Search and Filter Bar -->
 			<div class="px-6 py-4 border-b border-outline-variant bg-surface-containerLow">
 				<div class="flex flex-col gap-4">
@@ -363,7 +366,7 @@ var y = class extends n(d`
 						class="w-full"
 					>
 						<schmancy-icon slot="prefix" size="20px" class="text-surface-onVariant">search</schmancy-icon>
-						${g(this.searchQuery, () => f`
+						${h(this.searchQuery, () => d`
 							<schmancy-button
 								slot="suffix"
 								variant="text"
@@ -378,9 +381,9 @@ var y = class extends n(d`
 					</schmancy-input>
 
 					<!-- Category Filter -->
-					${g(this.categories.length > 1, () => f`
+					${h(this.categories.length > 1, () => d`
 						<div class="flex gap-2 flex-wrap">
-							${h(this.categories, (e) => e, (e) => f`
+							${m(this.categories, (e) => e, (e) => d`
 									<schmancy-chip
 										class="cursor-pointer transition-all hover:shadow-sm ${this.selectedCategory === e ? "bg-primary text-primary-on" : "border border-outline"}"
 										@click=${() => this.handleCategorySelect(e)}
@@ -395,9 +398,9 @@ var y = class extends n(d`
 
 			<!-- Template List with Previews -->
 			<div class="flex-1 overflow-y-auto px-6 py-6">
-				${g(this.filteredTemplates.length > 0, () => f`
+				${h(this.filteredTemplates.length > 0, () => d`
 						<div class="space-y-6">
-							${h(this.filteredTemplates, (e) => e.id, (e) => f`
+							${m(this.filteredTemplates, (e) => e.id, (e) => d`
 									<schmancy-surface
 										type="subtle"
 										elevation="1"
@@ -412,7 +415,7 @@ var y = class extends n(d`
 													<schmancy-typography type="title" token="md" class="font-semibold leading-tight mb-1">
 														${e.name}
 													</schmancy-typography>
-													${g(e.category, () => f`
+													${h(e.category, () => d`
 														<schmancy-chip class="text-xs border border-outline">
 															${e.category}
 														</schmancy-chip>
@@ -433,14 +436,13 @@ var y = class extends n(d`
 											<schmancy-email-viewer
 												subject=${e.subject}
 												body=${e.body}
-												mode="desktop"
 												class="max-h-96 overflow-y-auto"
 											></schmancy-email-viewer>
 										</div>
 									</schmancy-surface>
 								`)}
 						</div>
-					`, () => f`
+					`, () => d`
 						<div class="flex flex-col items-center justify-center h-96 text-center">
 							<div class="mb-6">
 								<schmancy-icon size="64px" class="text-surface-onVariant opacity-20">mail_outline</schmancy-icon>
@@ -451,9 +453,9 @@ var y = class extends n(d`
 							<schmancy-typography type="body" token="md" class="text-surface-onVariant mb-6 max-w-md">
 								${this.searchQuery ? `No templates match your search for "${this.searchQuery}"` : this.selectedCategory === "all" ? "Start by creating your first email template" : `No templates found in the "${this.selectedCategory}" category`}
 							</schmancy-typography>
-							${g(this.searchQuery || this.selectedCategory !== "all", () => f`
+							${h(this.searchQuery || this.selectedCategory !== "all", () => d`
 								<div class="flex gap-3">
-									${g(this.searchQuery, () => f`
+									${h(this.searchQuery, () => d`
 										<schmancy-button
 											variant="outlined"
 											@click=${() => {
@@ -464,7 +466,7 @@ var y = class extends n(d`
 											Clear Search
 										</schmancy-button>
 									`)}
-									${g(this.selectedCategory !== "all", () => f`
+									${h(this.selectedCategory !== "all", () => d`
 										<schmancy-button
 											variant="filled"
 											@click=${() => this.handleCategorySelect("all")}
@@ -481,15 +483,10 @@ var y = class extends n(d`
 		`;
 	}
 };
-t([l({ type: Array })], y.prototype, "templates", void 0), t([u()], y.prototype, "searchQuery", void 0), t([u()], y.prototype, "filteredTemplates", void 0), t([u()], y.prototype, "selectedCategory", void 0), y = t([c("schmancy-email-template-picker")], y);
-var b = class extends n(d`
-	:host {
-		display: block;
-		height: 100%;
-	}
-`) {
+t([c({ type: Array })], v.prototype, "templates", void 0), t([l()], v.prototype, "searchQuery", void 0), t([l()], v.prototype, "filteredTemplates", void 0), t([l()], v.prototype, "selectedCategory", void 0), v = t([s("schmancy-email-template-picker")], v);
+var y = class extends e {
 	constructor(...e) {
-		super(...e), this.subject = "", this.body = "", this.disabled = !1, this.attachments = [], this.config = {}, this.templates = this.getDefaultTemplates(), this.dragOver = !1, this.isUploading = !1, this.subjectInputRef = p(), this.bodyTextAreaRef = p(), this.fileInputRef = p(), this.imageInputRef = p(), this.handleKeyDown = (e) => {
+		super(...e), this.subject = "", this.body = "", this.disabled = !1, this.attachments = [], this.config = {}, this.templates = this.getDefaultTemplates(), this.dragOver = !1, this.isUploading = !1, this.subjectInputRef = f(), this.bodyTextAreaRef = f(), this.fileInputRef = f(), this.imageInputRef = f(), this.handleKeyDown = (e) => {
 			if (this.disabled) return;
 			let t = this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");
 			e.key === "Tab" && e.target === t && (e.preventDefault(), this.insertAtCursor("  "));
@@ -522,19 +519,19 @@ var b = class extends n(d`
 				composed: !0
 			}));
 		}, this.openLayoutDialog = () => {
-			r.component(f`
+			n.component(d`
 			<schmancy-email-layout-selector
 				@layout-select=${(e) => {
-				this.applyLayout(e.detail.layout), r.close();
+				this.applyLayout(e.detail.layout), n.close();
 			}}
 			></schmancy-email-layout-selector>
 		`);
 		}, this.openTemplatePicker = () => {
-			let e = new y();
-			e.templates = this.templates, o(e, "template-selected").pipe(s(this.disconnecting)).subscribe(this.handleTemplateSelected), i.open({ component: e });
+			let e = new v();
+			e.templates = this.templates, a(e, "template-selected").pipe(o(this.disconnecting)).subscribe(this.handleTemplateSelected), r.open({ component: e });
 		}, this.handleTemplateSelected = (e) => {
 			let t = e.detail;
-			this.subject = t.subject, this.body = t.body, this.dispatchChange(), a.success(`Template "${t.name}" applied successfully`);
+			this.subject = t.subject, this.body = t.body, this.dispatchChange(), i.success(`Template "${t.name}" applied successfully`);
 		}, this.applyLayout = (e) => {
 			let t = {
 				"columns-2": "\n:::layout columns-2\n<div class=\"column\">\n![Left Photo](https://via.placeholder.com/400x300?text=Replace+with+your+photo){height=300px}\n\n**Photo Title**\n\nReplace the placeholder image above with your own photo. The height=300px ensures both images have equal height while width adjusts automatically.\n</div>\n\n<div class=\"column\">\n![Right Photo](https://via.placeholder.com/400x300?text=Replace+with+your+photo){height=300px}\n\n**Photo Title**\n\nUse the same height value (300px) for both images to keep them aligned perfectly side by side.\n</div>\n:::\n",
@@ -545,37 +542,37 @@ var b = class extends n(d`
 			}[e];
 			t && this.insertAtCursor(t);
 		}, this.uploadImage = async (e) => {
-			if (e.type.startsWith("image/")) if (e.size > 10485760) a.error(`Image "${e.name}" is too large. Maximum size is 10MB.`);
+			if (e.type.startsWith("image/")) if (e.size > 10485760) i.error(`Image "${e.name}" is too large. Maximum size is 10MB.`);
 			else {
 				this.isUploading = !0;
 				try {
 					let t;
-					this.config.imageUploadHandler ? t = await this.config.imageUploadHandler(e) : this.config.uploadHandler ? t = await this.config.uploadHandler(e) : (t = await this.createDataUrl(e), a.warning("No upload handler configured. Using local preview."));
+					this.config.imageUploadHandler ? t = await this.config.imageUploadHandler(e) : this.config.uploadHandler ? t = await this.config.uploadHandler(e) : (t = await this.createDataUrl(e), i.warning("No upload handler configured. Using local preview."));
 					let n = await this.getImageDimensions(e);
-					this.insertImageMarkdown(t, e.name, n.width, n.height), a.success("Image uploaded successfully");
+					this.insertImageMarkdown(t, e.name, n.width, n.height), i.success("Image uploaded successfully");
 				} catch {
-					a.error("Failed to upload image");
+					i.error("Failed to upload image");
 				} finally {
 					this.isUploading = !1;
 				}
 			}
-			else a.error(`File "${e.name}" is not an image`);
+			else i.error(`File "${e.name}" is not an image`);
 		}, this.createDataUrl = (e) => new Promise((t, n) => {
 			let r = new FileReader();
-			r.onload = () => t(r.result), r.onerror = n, r.readAsDataURL(e);
+			r.addEventListener("load", () => t(r.result), { once: !0 }), r.addEventListener("error", () => n(r.error), { once: !0 }), r.readAsDataURL(e);
 		}), this.getImageDimensions = (e) => new Promise((t) => {
 			let n = new Image();
-			n.onload = () => {
+			n.addEventListener("load", () => {
 				t({
 					width: n.width,
 					height: n.height
 				}), URL.revokeObjectURL(n.src);
-			}, n.onerror = () => {
+			}, { once: !0 }), n.addEventListener("error", () => {
 				t({
 					width: 400,
 					height: 300
 				}), URL.revokeObjectURL(n.src);
-			}, n.src = URL.createObjectURL(e);
+			}, { once: !0 }), n.src = URL.createObjectURL(e);
 		}), this.insertImageMarkdown = (e, t, n, r) => {
 			let i = this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");
 			if (!i) return;
@@ -615,8 +612,8 @@ var b = class extends n(d`
 		}, this.handleDragLeave = (e) => {
 			e.preventDefault();
 		}, this.addFile = (e) => {
-			if (e.size > 10485760) return void a.error(`File "${e.name}" is too large. Maximum size is 10MB.`);
-			if (this.attachments.some((t) => t.name === e.name && t.size === e.size)) return void a.warning(`File "${e.name}" is already attached.`);
+			if (e.size > 10485760) return void i.error(`File "${e.name}" is too large. Maximum size is 10MB.`);
+			if (this.attachments.some((t) => t.name === e.name && t.size === e.size)) return void i.warning(`File "${e.name}" is already attached.`);
 			let t = {
 				id: crypto.randomUUID(),
 				file: e,
@@ -629,6 +626,14 @@ var b = class extends n(d`
 			this.attachments = this.attachments.filter((t) => t.id !== e), this.dispatchChange();
 		};
 	}
+	static {
+		this.styles = [u`
+	:host {
+		display: block;
+		height: 100%;
+	}
+`];
+	}
 	connectedCallback() {
 		super.connectedCallback(), this.addEventListeners();
 	}
@@ -704,7 +709,7 @@ var b = class extends n(d`
 		];
 	}
 	addEventListeners() {
-		o(this, "keydown").pipe(s(this.disconnecting)).subscribe(this.handleKeyDown), o(document, "paste").pipe(s(this.disconnecting)).subscribe(this.handlePaste), o(document, "dragenter").pipe(s(this.disconnecting)).subscribe(this.handleDragEnter), o(document, "dragleave").pipe(s(this.disconnecting)).subscribe(this.handleDocumentDragLeave), o(document, "drop").pipe(s(this.disconnecting)).subscribe(this.handleDocumentDrop);
+		a(this, "keydown").pipe(o(this.disconnecting)).subscribe(this.handleKeyDown), a(document, "paste").pipe(o(this.disconnecting)).subscribe(this.handlePaste), a(document, "dragenter").pipe(o(this.disconnecting)).subscribe(this.handleDragEnter), a(document, "dragleave").pipe(o(this.disconnecting)).subscribe(this.handleDocumentDragLeave), a(document, "drop").pipe(o(this.disconnecting)).subscribe(this.handleDocumentDrop);
 	}
 	insertAtCursor(e, t) {
 		if (!this.bodyTextAreaRef.value) return;
@@ -730,7 +735,7 @@ var b = class extends n(d`
 		});
 	}
 	render() {
-		return f`
+		return d`
 			<schmancy-surface 
 				type="solid"
 				rounded="all"
@@ -752,7 +757,7 @@ var b = class extends n(d`
 								Subject *
 							</schmancy-typography>
 							<schmancy-input
-								${m(this.subjectInputRef)}
+								${p(this.subjectInputRef)}
 								.value=${this.subject}
 								@input=${this.handleSubjectChange}
 								placeholder="Enter email subject..."
@@ -834,7 +839,7 @@ var b = class extends n(d`
 										?disabled=${this.disabled || this.isUploading}
 										@click=${() => this.imageInputRef.value?.click()}
 									>
-										${g(this.isUploading, () => f`<schmancy-progress size="sm" class="w-4 h-4"></schmancy-progress>`, () => f`<schmancy-icon>image</schmancy-icon>`)}
+										${h(this.isUploading, () => d`<schmancy-progress size="sm" class="w-4 h-4"></schmancy-progress>`, () => d`<schmancy-icon>image</schmancy-icon>`)}
 									</schmancy-icon-button>
 									<schmancy-icon-button 
 										size="sm" 
@@ -862,7 +867,7 @@ var b = class extends n(d`
 					<!-- Textarea Container - Takes remaining space -->
 					<div class="flex-1 px-4 relative min-h-0">
 						<schmancy-textarea
-							${m(this.bodyTextAreaRef)}
+							${p(this.bodyTextAreaRef)}
 							.value=${this.body}
 							@change=${this.handleBodyChange}
 							placeholder="Enter your email message here...
@@ -879,7 +884,7 @@ Tab key inserts 2 spaces for better formatting."
 						></schmancy-textarea>
 						
 						<!-- Upload Progress Overlay -->
-						${g(this.isUploading, () => f`
+						${h(this.isUploading, () => d`
 							<div class="absolute top-3 right-3 z-10">
 								<schmancy-surface type="subtle" rounded="all" class="p-2">
 									<div class="flex items-center gap-2">
@@ -901,14 +906,14 @@ Tab key inserts 2 spaces for better formatting."
 						</div>
 
 						<!-- Attachments Display (if any) -->
-						${g(this.attachments.length > 0, () => f`
+						${h(this.attachments.length > 0, () => d`
 							<div class="space-y-2">
 								<schmancy-typography type="label" token="sm" class="flex items-center gap-2">
 									<schmancy-icon size="16px">attach_file</schmancy-icon>
 									Attachments (${this.attachments.length})
 								</schmancy-typography>
 								<div class="flex flex-wrap gap-2">
-									${h(this.attachments, (e) => e.id, (e) => f`
+									${m(this.attachments, (e) => e.id, (e) => d`
 										<schmancy-chip class="text-xs">
 											<span class="truncate max-w-32">${e.name}</span>
 											<button 
@@ -928,13 +933,13 @@ Tab key inserts 2 spaces for better formatting."
 					<!-- Hidden File Inputs -->
 					<div class="hidden">
 						<input
-							${m(this.fileInputRef)}
+							${p(this.fileInputRef)}
 							type="file"
 							multiple
 							@change=${this.handleFileChange}
 						>
 						<input
-							${m(this.imageInputRef)}
+							${p(this.imageInputRef)}
 							type="file"
 							accept="image/*"
 							@change=${this.handleImageSelect}
@@ -947,14 +952,17 @@ Tab key inserts 2 spaces for better formatting."
 		`;
 	}
 };
-t([l({ type: String })], b.prototype, "subject", void 0), t([l({ type: String })], b.prototype, "body", void 0), t([l({ type: Boolean })], b.prototype, "disabled", void 0), t([l({ type: Array })], b.prototype, "attachments", void 0), t([l({ type: Object })], b.prototype, "config", void 0), t([l({ type: Array })], b.prototype, "templates", void 0), t([u()], b.prototype, "dragOver", void 0), t([u()], b.prototype, "isUploading", void 0), b = t([c("schmancy-email-editor")], b);
-var x = class extends n(d`
+t([c({ type: String })], y.prototype, "subject", void 0), t([c({ type: String })], y.prototype, "body", void 0), t([c({ type: Boolean })], y.prototype, "disabled", void 0), t([c({ type: Array })], y.prototype, "attachments", void 0), t([c({ type: Object })], y.prototype, "config", void 0), t([c({ type: Array })], y.prototype, "templates", void 0), t([l()], y.prototype, "dragOver", void 0), t([l()], y.prototype, "isUploading", void 0), y = t([s("schmancy-email-editor")], y);
+var b = class extends e {
+	constructor(...e) {
+		super(...e), this.subject = "", this.body = "", this.attachments = [], this.recipients = [], this.fromAddress = "sender@example.com", this.toAddress = "recipient@example.com", this.viewMode = "html";
+	}
+	static {
+		this.styles = [u`
 	:host {
 		display: block;
 	}
-`) {
-	constructor(...e) {
-		super(...e), this.subject = "", this.body = "", this.attachments = [], this.recipients = [], this.fromAddress = "sender@example.com", this.toAddress = "recipient@example.com", this.viewMode = "html";
+`];
 	}
 	parseLayoutBlocks(e) {
 		return e.replace(/:::layout\s+([a-zA-Z0-9-]+)\n([\s\S]*?)\n:::/g, (e, t, n) => {
@@ -1049,7 +1057,7 @@ var x = class extends n(d`
 	}
 	render() {
 		let e = this.parseExtendedMarkdown(this.body), t = this.convertToPlainText(this.body), n = this.recipients[0] || this.toAddress;
-		return f`
+		return d`
 			<schmancy-surface type="solid" rounded="all" class="h-full flex flex-col">
 				
 				<!-- Header Section -->
@@ -1136,7 +1144,7 @@ var x = class extends n(d`
 											</schmancy-typography>
 										</div>
 										<schmancy-typography type="body" token="sm" class="font-medium flex-1">
-											${this.subject || f`<span class="italic text-surface-onVariant">(No subject)</span>`}
+											${this.subject || d`<span class="italic text-surface-onVariant">(No subject)</span>`}
 										</schmancy-typography>
 									</div>
 								</div>
@@ -1144,17 +1152,17 @@ var x = class extends n(d`
 
 							<!-- Email Body Content -->
 							<div class="flex-1 overflow-y-auto min-h-0">
-								${g(this.body, () => f`
-										${g(this.viewMode === "html", () => f`
+								${h(this.body, () => d`
+										${h(this.viewMode === "html", () => d`
 												<div class="p-6 bg-white" style="color: #333; line-height: 1.6; font-family: system-ui, -apple-system, sans-serif; font-size: 14px;">
 													<div .innerHTML=${e}></div>
 												</div>
-											`, () => f`
+											`, () => d`
 												<div class="p-6 bg-white" style="color: #333; line-height: 1.6; font-family: 'Courier New', monospace; font-size: 13px; white-space: pre-wrap;">
 													${t}
 												</div>
 											`)}
-									`, () => f`
+									`, () => d`
 										<!-- Empty State -->
 										<div class="flex-1 flex items-center justify-center p-8">
 											<div class="text-center space-y-3">
@@ -1171,7 +1179,7 @@ var x = class extends n(d`
 							</div>
 
 							<!-- Attachments Section -->
-							${g(this.attachments.length > 0, () => f`
+							${h(this.attachments.length > 0, () => d`
 								<div class="shrink-0 p-4 border-t border-outline-variant bg-surface-containerLowest">
 									<div class="space-y-3">
 										<!-- Attachments Header -->
@@ -1184,7 +1192,7 @@ var x = class extends n(d`
 										
 										<!-- Attachments List -->
 										<div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
-											${h(this.attachments, (e) => e.id, (e) => f`
+											${m(this.attachments, (e) => e.id, (e) => d`
 												<schmancy-surface type="subtle" rounded="all" class="p-3">
 													<div class="flex items-center gap-3">
 														<!-- File Icon -->
@@ -1212,7 +1220,7 @@ var x = class extends n(d`
 					</div>
 					
 					<!-- Preview Stats -->
-					${g(this.body, () => f`
+					${h(this.body, () => d`
 						<div class="shrink-0">
 							<schmancy-surface type="subtle" rounded="all" class="p-3">
 								<div class="flex items-center justify-center gap-6 text-center">
@@ -1233,7 +1241,7 @@ var x = class extends n(d`
 											${this.body.trim() ? this.body.trim().split(/\s+/).length : 0}
 										</schmancy-typography>
 									</div>
-									${g(this.attachments.length > 0, () => f`
+									${h(this.attachments.length > 0, () => d`
 										<div class="w-px h-8 bg-outline-variant"></div>
 										<div>
 											<schmancy-typography type="body" token="xs" class="text-surface-onVariant">
@@ -1254,15 +1262,10 @@ var x = class extends n(d`
 		`;
 	}
 };
-t([l({ type: String })], x.prototype, "subject", void 0), t([l({ type: String })], x.prototype, "body", void 0), t([l({ type: Array })], x.prototype, "attachments", void 0), t([l({ type: Array })], x.prototype, "recipients", void 0), t([l({ type: String })], x.prototype, "fromAddress", void 0), t([l({ type: String })], x.prototype, "toAddress", void 0), t([u()], x.prototype, "viewMode", void 0), x = t([c("schmancy-email-viewer")], x);
-var S = class extends n(d`
-	:host {
-		display: block;
-		height: 100%;
-	}
-`) {
+t([c({ type: String })], b.prototype, "subject", void 0), t([c({ type: String })], b.prototype, "body", void 0), t([c({ type: Array })], b.prototype, "attachments", void 0), t([c({ type: Array })], b.prototype, "recipients", void 0), t([c({ type: String })], b.prototype, "fromAddress", void 0), t([c({ type: String })], b.prototype, "toAddress", void 0), t([l()], b.prototype, "viewMode", void 0), b = t([s("schmancy-email-viewer")], b);
+var x = class extends e {
 	constructor(...e) {
-		super(...e), this.disabled = !1, this.recipients = [], this.selectedRecipients = [], this.enableCsvImport = !0, this.enableDragDrop = !0, this.title = "Recipients", this.emptyStateTitle = "No recipients yet", this.emptyStateMessage = "Import from sources or upload a CSV", this.dragOver = !1, this.localSelectedRecipients = /* @__PURE__ */ new Set(), this.searchQuery = "", this.filteredRecipients = [], this.boatState = "collapsed", this.fileInputRef = p(), this.handleEmailsImported = () => {
+		super(...e), this.disabled = !1, this.recipients = [], this.importSources = [], this.selectedRecipients = [], this.enableCsvImport = !0, this.enableDragDrop = !0, this.title = "Recipients", this.emptyStateTitle = "No recipients yet", this.emptyStateMessage = "Import from sources or upload a CSV", this.dragOver = !1, this.localSelectedRecipients = /* @__PURE__ */ new Set(), this.searchQuery = "", this.filteredRecipients = [], this.boatState = "collapsed", this.fileInputRef = f(), this.handleEmailsImported = () => {
 			this.updateFilteredRecipients(), this.requestUpdate();
 		}, this.handleImportFromCSV = () => {
 			this.enableCsvImport && this.fileInputRef.value?.click();
@@ -1275,13 +1278,13 @@ var S = class extends n(d`
 			let t = e.dataTransfer?.files[0];
 			t && this.processCSVFile(t);
 		}, this.processCSVFile = (e) => {
-			if (!e.name.endsWith(".csv")) return void a.error("Please select a CSV file");
+			if (!e.name.endsWith(".csv")) return void i.error("Please select a CSV file");
 			let t = new FileReader();
-			t.onload = (e) => {
+			t.addEventListener("load", (e) => {
 				let t = e.target?.result;
 				try {
 					let e = this.parseCSV(t);
-					if (e.length === 0) return void a.error("No valid email addresses found in CSV");
+					if (e.length === 0) return void i.error("No valid email addresses found in CSV");
 					this.dispatchEvent(new CustomEvent("emails-imported", {
 						detail: {
 							emails: e,
@@ -1289,11 +1292,11 @@ var S = class extends n(d`
 						},
 						bubbles: !0,
 						composed: !0
-					})), a.success(`Imported ${e.length} emails from CSV file`);
+					})), i.success(`Imported ${e.length} emails from CSV file`);
 				} catch {
-					a.error("Failed to parse CSV file");
+					i.error("Failed to parse CSV file");
 				}
-			}, t.readAsText(e);
+			}, { once: !0 }), t.readAsText(e);
 		}, this.toggleRecipientSelection = (e) => {
 			this.localSelectedRecipients.has(e) ? this.localSelectedRecipients.delete(e) : this.localSelectedRecipients.add(e), this.localSelectedRecipients = new Set(this.localSelectedRecipients), this.dispatchSelectionChange();
 		}, this.selectAll = () => {
@@ -1332,8 +1335,16 @@ var S = class extends n(d`
 			this.boatState = e.detail;
 		};
 	}
+	static {
+		this.styles = [u`
+	:host {
+		display: block;
+		height: 100%;
+	}
+`];
+	}
 	connectedCallback() {
-		super.connectedCallback(), this.localSelectedRecipients = new Set(this.selectedRecipients), this.updateFilteredRecipients(), o(this, "emails-imported").pipe(s(this.disconnecting)).subscribe(this.handleEmailsImported);
+		super.connectedCallback(), this.localSelectedRecipients = new Set(this.selectedRecipients), this.updateFilteredRecipients(), a(this, "emails-imported").pipe(o(this.disconnecting)).subscribe(this.handleEmailsImported);
 	}
 	updated(e) {
 		super.updated(e), e.has("selectedRecipients") && (this.localSelectedRecipients = new Set(this.selectedRecipients)), (e.has("recipients") || e.has("searchQuery")) && this.updateFilteredRecipients(), e.has("recipients") && this.requestUpdate();
@@ -1407,13 +1418,13 @@ var S = class extends n(d`
 		return this.renderBoatLayout();
 	}
 	renderBoatLayout() {
-		return f`
+		return d`
 			<!-- Hidden file input for CSV import -->
-			${g(this.enableCsvImport, () => f`
+			${h(this.enableCsvImport, () => d`
 				<input
 					type="file"
 					accept=".csv"
-					${m(this.fileInputRef)}
+					${p(this.fileInputRef)}
 					@change=${this.handleFileSelect}
 					class="hidden"
 				/>
@@ -1430,7 +1441,7 @@ var S = class extends n(d`
 						<schmancy-typography type="title" token="md" class="font-semibold">
 							${this.title}
 						</schmancy-typography>
-						${g(this.recipients.length > 0, () => f`
+						${h(this.recipients.length > 0, () => d`
 							<schmancy-badge>
 								${this.localSelectedRecipients.size}/${this.recipients.length}
 							</schmancy-badge>
@@ -1446,7 +1457,7 @@ var S = class extends n(d`
 		`;
 	}
 	renderBoatContent() {
-		return f`
+		return d`
 			<!-- Search Bar and CSV Import on one line -->
 			<div class="p-4 flex gap-3">
 				<schmancy-input
@@ -1456,7 +1467,7 @@ var S = class extends n(d`
 					@input=${this.handleSearchInput}
 					class="flex-1"
 				>
-					${g(this.searchQuery, () => f`
+					${h(this.searchQuery, () => d`
 						<schmancy-button
 							slot="suffix" 
 							variant="text"
@@ -1467,7 +1478,7 @@ var S = class extends n(d`
 					`)}
 				</schmancy-input>
 				
-				${g(this.enableCsvImport, () => f`
+				${h(this.enableCsvImport, () => d`
 					<schmancy-button
 						variant="outlined"
 						@click=${this.handleImportFromCSV}
@@ -1479,7 +1490,7 @@ var S = class extends n(d`
 				`)}
 			</div>
 
-			${g(this.recipients.length > 0, () => f`
+			${h(this.recipients.length > 0, () => d`
 				<!-- Bulk Actions -->
 				<div class="px-4 pb-4">
 					<div class="flex items-center gap-3">
@@ -1512,9 +1523,9 @@ var S = class extends n(d`
 
 				<!-- Recipients List -->
 				<div class="flex-1 overflow-y-auto px-4 pb-4">
-					${g(this.filteredRecipients.length > 0, () => f`
+					${h(this.filteredRecipients.length > 0, () => d`
 							<div class="flex flex-wrap gap-3">
-								${h(this.filteredRecipients, (e) => e, (e) => f`
+								${m(this.filteredRecipients, (e) => e, (e) => d`
 										<schmancy-button
 											variant=${this.localSelectedRecipients.has(e) ? "filled" : "outlined"}
 											@click=${(t) => {
@@ -1533,7 +1544,7 @@ var S = class extends n(d`
 										</schmancy-button>
 									`)}
 							</div>
-						`, () => f`
+						`, () => d`
 							<div class="text-center py-8">
 								<schmancy-icon size="32px" class="opacity-50 mb-2">search_off</schmancy-icon>
 								<schmancy-typography type="body" token="sm" class="mb-2">
@@ -1545,7 +1556,7 @@ var S = class extends n(d`
 							</div>
 						`)}
 				</div>
-			`, () => f`
+			`, () => d`
 				<!-- Empty State -->
 				<div class="flex-1 flex items-center justify-center p-8">
 					<div class="text-center space-y-4">
@@ -1561,7 +1572,7 @@ var S = class extends n(d`
 			`)}
 
 			<!-- Drag Overlay -->
-			${g(this.dragOver && this.enableDragDrop, () => f`
+			${h(this.dragOver && this.enableDragDrop, () => d`
 					<div 
 						class="absolute inset-4 flex items-center justify-center border-2 border-dashed border-primary rounded-lg z-10"
 						@dragover=${(e) => {
@@ -1581,5 +1592,5 @@ var S = class extends n(d`
 		`;
 	}
 };
-t([l({ type: Boolean })], S.prototype, "disabled", void 0), t([l({ type: Array })], S.prototype, "recipients", void 0), t([l({ type: Array })], S.prototype, "selectedRecipients", void 0), t([l({ type: Boolean })], S.prototype, "enableCsvImport", void 0), t([l({ type: Boolean })], S.prototype, "enableDragDrop", void 0), t([l({ type: String })], S.prototype, "title", void 0), t([l({ type: String })], S.prototype, "emptyStateTitle", void 0), t([l({ type: String })], S.prototype, "emptyStateMessage", void 0), t([l({ type: Object })], S.prototype, "csvParser", void 0), t([u()], S.prototype, "dragOver", void 0), t([u()], S.prototype, "localSelectedRecipients", void 0), t([u()], S.prototype, "searchQuery", void 0), t([u()], S.prototype, "filteredRecipients", void 0), t([u()], S.prototype, "boatState", void 0), S = t([c("schmancy-email-recipients")], S);
-export { _ as a, v as i, x as n, b as r, S as t };
+t([c({ type: Boolean })], x.prototype, "disabled", void 0), t([c({ type: Array })], x.prototype, "recipients", void 0), t([c({ type: Array })], x.prototype, "importSources", void 0), t([c({ type: Array })], x.prototype, "selectedRecipients", void 0), t([c({ type: Boolean })], x.prototype, "enableCsvImport", void 0), t([c({ type: Boolean })], x.prototype, "enableDragDrop", void 0), t([c({ type: String })], x.prototype, "title", void 0), t([c({ type: String })], x.prototype, "emptyStateTitle", void 0), t([c({ type: String })], x.prototype, "emptyStateMessage", void 0), t([c({ type: Object })], x.prototype, "csvParser", void 0), t([l()], x.prototype, "dragOver", void 0), t([l()], x.prototype, "localSelectedRecipients", void 0), t([l()], x.prototype, "searchQuery", void 0), t([l()], x.prototype, "filteredRecipients", void 0), t([l()], x.prototype, "boatState", void 0), x = t([s("schmancy-email-recipients")], x);
+export { g as a, _ as i, b as n, y as r, x as t };