@mhmo91/schmancy 0.4.68 → 0.4.69

package/types/src/mailbox/email-layout-selector.d.ts

@@ -0,0 +1,19 @@
+declare const SchmancyEmailLayoutSelector_base: import("@mixins/index").Constructor<CustomElementConstructor> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+/**
+ * Email layout selector component for choosing email templates
+ *
+ * Simple horizontal row of 5 layout options using Schmancy components only.
+ *
+ * @fires layout-select - When a layout is selected with {detail: {layout: string}}
+ */
+export declare class SchmancyEmailLayoutSelector extends SchmancyEmailLayoutSelector_base {
+    private layouts;
+    private selectLayout;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-email-layout-selector': SchmancyEmailLayoutSelector;
+    }
+}
+export {};

package/types/src/mailbox/email-recipients.d.ts

@@ -0,0 +1,118 @@
+/**
+ * CSV parser interface (optional dependency)
+ * Can be provided via global window object or imported
+ */
+interface CSVParser {
+    parse(csvContent: string, config: any): {
+        data: any[];
+        meta: {
+            fields?: string[];
+        };
+    };
+}
+declare const SchmancyEmailRecipients_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+/**
+ * Email recipients management component with floating boat interface
+ *
+ * Features:
+ * - Floating boat UI that can be minimized/expanded
+ * - CSV import with drag & drop
+ * - Multiple import sources (configurable)
+ * - Bulk selection and management
+ * - Search and filtering
+ * - Email validation
+ *
+ * @example
+ * ```html
+ * <schmancy-email-recipients
+ *   .recipients=${['user1@example.com', 'user2@example.com']}
+ *   @emails-imported=${handleEmailsImported}
+ * ></schmancy-email-recipients>
+ * ```
+ */
+export declare class SchmancyEmailRecipients extends SchmancyEmailRecipients_base {
+    /** Disable all interactions */
+    disabled: boolean;
+    /** All available recipients */
+    recipients: string[];
+    /** Currently selected recipients */
+    selectedRecipients: string[];
+    /** Enable CSV import functionality */
+    enableCsvImport: boolean;
+    /** Enable drag and drop for files */
+    enableDragDrop: boolean;
+    /** Panel title */
+    title: string;
+    /** Empty state title */
+    emptyStateTitle: string;
+    /** Empty state message */
+    emptyStateMessage: string;
+    /** CSV parser function (optional) */
+    csvParser?: CSVParser;
+    /** Internal state */
+    private dragOver;
+    private localSelectedRecipients;
+    private searchQuery;
+    private filteredRecipients;
+    private boatState;
+    /** File input reference */
+    private fileInputRef;
+    connectedCallback(): void;
+    private handleEmailsImported;
+    updated(changedProperties: Map<string, any>): void;
+    /** Handle CSV import trigger */
+    private handleImportFromCSV;
+    /** Handle file selection */
+    private handleFileSelect;
+    /** Handle drag and drop */
+    private handleDrop;
+    /** Process CSV file */
+    private processCSVFile;
+    /** Parse CSV content */
+    private parseCSV;
+    /** Simple CSV parsing fallback */
+    private simpleCSVParse;
+    /** Validate email format */
+    private isValidEmail;
+    /** Toggle recipient selection */
+    private toggleRecipientSelection;
+    /** Select all filtered recipients */
+    private selectAll;
+    /** Clear all selections */
+    private selectNone;
+    /** Remove individual recipient */
+    private removeRecipient;
+    /** Clear all recipients */
+    private clearAll;
+    /** Update filtered recipients based on search */
+    private updateFilteredRecipients;
+    /** Handle search input */
+    private handleSearchInput;
+    /** Clear search query */
+    private clearSearch;
+    /** Dispatch selection change event */
+    private dispatchSelectionChange;
+    /** Handle boat state changes */
+    private handleBoatStateChange;
+    /** Add recipients programmatically */
+    addRecipients(emails: string[]): void;
+    /** Show boat */
+    showBoat(): void;
+    /** Hide boat */
+    hideBoat(): void;
+    /** Expand boat */
+    expandBoat(): void;
+    /** Toggle boat state */
+    toggleBoat(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    /** Render floating boat layout */
+    private renderBoatLayout;
+    /** Render boat content */
+    private renderBoatContent;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-email-recipients': SchmancyEmailRecipients;
+    }
+}
+export {};

package/types/src/mailbox/email-viewer.d.ts

@@ -0,0 +1,86 @@
+import type { EmailAttachment } from './types';
+declare const SchmancyEmailViewer_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+/**
+ * Email viewer component showing formatted HTML and plain text versions
+ *
+ * Features:
+ * - HTML and plain text preview modes
+ * - Email client-compatible styling
+ * - Layout parsing (columns, sidebars, image rows)
+ * - Markdown to HTML conversion
+ * - Attachment display
+ * - Email header simulation
+ * - Character/word statistics
+ *
+ * @example
+ * ```html
+ * <schmancy-email-viewer
+ *   subject="Welcome!"
+ *   body="**Hello** world"
+ *   .attachments=${attachments}
+ *   .recipients=${['user@example.com']}
+ * ></schmancy-email-viewer>
+ * ```
+ */
+export declare class SchmancyEmailViewer extends SchmancyEmailViewer_base {
+    /** Email subject */
+    subject: string;
+    /** Email body content (markdown) */
+    body: string;
+    /** Email attachments */
+    attachments: EmailAttachment[];
+    /** Selected recipients for preview */
+    recipients: string[];
+    /** From address for preview */
+    fromAddress: string;
+    /** To address for preview (uses first recipient if not provided) */
+    toAddress: string;
+    /** Current view mode */
+    private viewMode;
+    /**
+     * Parse layout blocks (:::layout type) and convert to email-safe table layouts
+     */
+    private parseLayoutBlocks;
+    /**
+     * Parse columns layout (2 or 3 columns)
+     */
+    private parseColumnsLayout;
+    /**
+     * Parse sidebar layout (left or right sidebar)
+     */
+    private parseSidebarLayout;
+    /**
+     * Parse image row layout
+     */
+    private parseImageRowLayout;
+    /**
+     * Parse image attributes from markdown syntax
+     */
+    private parseImageAttributes;
+    /**
+     * Generate email-safe image styles based on attributes
+     */
+    private generateImageStyles;
+    /**
+     * Parse basic markdown within layout content (simplified version)
+     */
+    private parseBasicMarkdown;
+    /**
+     * Email-compliant HTML generator for email clients (Gmail, Outlook, Apple Mail)
+     * Uses table-based layouts with inline styles only - no CSS classes or modern features
+     */
+    private parseExtendedMarkdown;
+    /**
+     * Convert markdown to plain text for plain text preview
+     */
+    private convertToPlainText;
+    /** Format file size for display */
+    private formatFileSize;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-email-viewer': SchmancyEmailViewer;
+    }
+}
+export {};

package/types/src/mailbox/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Schmancy Mailbox Components
+ *
+ * Comprehensive email composition and management system
+ */
+export * from './types';
+export { SchmancyMailbox } from './mailbox';
+export { SchmancyEmailEditor } from './email-editor';
+export { SchmancyEmailViewer } from './email-viewer';
+export { SchmancyEmailRecipients } from './email-recipients';
+export { SchmancyEmailLayoutSelector } from './email-layout-selector';
+export type { EmailTemplate, EmailAttachment, EmailComposeConfig, SendEmailRequest, SendEmailResponse, ImportSource, EmailCampaign, EmailRecipient, MailboxState, CurrentComposeState, BoatState, EmailPreviewMode } from './types';

package/types/src/mailbox/mailbox.d.ts

@@ -0,0 +1,82 @@
+import type { EmailTemplate, EmailComposeConfig, ImportSource } from './types';
+declare const SchmancyMailbox_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+/**
+ * Main mailbox component that orchestrates the entire email composition flow
+ *
+ * Features:
+ * - Responsive layout with composer and preview panels
+ * - Recipients management with floating boat interface
+ * - Template selection and content editing
+ * - Attachment handling
+ * - Email validation and sending
+ *
+ * @example
+ * ```html
+ * <schmancy-mailbox
+ *   .config=${{ sendEndpoint: '/api/send-email' }}
+ *   .templates=${emailTemplates}
+ *   .importSources=${recipientSources}
+ * ></schmancy-mailbox>
+ * ```
+ */
+export declare class SchmancyMailbox extends SchmancyMailbox_base {
+    /** Configuration for endpoints and handlers */
+    config: EmailComposeConfig;
+    /** Available email templates */
+    templates: EmailTemplate[];
+    /** Import sources for recipients panel */
+    importSources: ImportSource[];
+    /** Disable all interactions */
+    disabled: boolean;
+    /** Recipients panel title */
+    recipientsTitle: string;
+    /** Empty state title for recipients */
+    recipientsEmptyTitle: string;
+    /** Empty state message for recipients */
+    recipientsEmptyMessage: string;
+    /** Enable CSV import functionality */
+    enableCsvImport: boolean;
+    /** Enable drag and drop for files */
+    enableDragDrop: boolean;
+    /** Email composition state */
+    private recipients;
+    private selectedRecipients;
+    private subject;
+    private body;
+    private templateId;
+    private attachments;
+    private isSending;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, any>): void;
+    /** Handle emails imported from various sources */
+    private handleEmailsImported;
+    /** Handle individual recipient removal */
+    private handleRecipientRemoved;
+    /** Handle clearing all recipients */
+    private handleRecipientsCleared;
+    /** Handle recipient selection changes */
+    private handleSelectionChanged;
+    /** Handle composer content changes */
+    private handleEditorChange;
+    /** Handle email sending */
+    private handleSend;
+    /** Add recipients programmatically */
+    addRecipients(emails: string[]): void;
+    /** Set email subject */
+    setSubject(subject: string): void;
+    /** Set email body */
+    setBody(body: string): void;
+    /** Set selected template */
+    setTemplate(templateId: string | null): void;
+    /** Clear all compose data */
+    clearCompose(): void;
+    /** Set sending state */
+    setSending(sending: boolean): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-mailbox': SchmancyMailbox;
+    }
+}
+export {};

package/types/src/mailbox/types.d.ts

@@ -0,0 +1,174 @@
+/**
+ * Mailbox component types and interfaces
+ * Extracted from funkhaus-events and generalized for reusability
+ */
+/**
+ * Email template definition
+ */
+export interface EmailTemplate {
+    id: string;
+    name: string;
+    subject: string;
+    body: string;
+    isDefault?: boolean;
+    createdAt?: Date | string;
+}
+/**
+ * Email attachment definition
+ */
+export interface EmailAttachment {
+    id: string;
+    file: File;
+    name: string;
+    size: number;
+    type: string;
+    url?: string;
+}
+/**
+ * Configuration for email composer component
+ */
+export interface EmailComposeConfig {
+    /** Endpoint for sending emails */
+    sendEndpoint?: string;
+    /** Endpoint for fetching templates */
+    templatesEndpoint?: string;
+    /** Endpoint for uploading files */
+    uploadEndpoint?: string;
+    /** Function to authenticate requests */
+    authenticateRequest?: (request: RequestInit) => RequestInit;
+    /** Custom upload handler for attachments */
+    uploadHandler?: (file: File) => Promise<string>;
+    /** Custom image upload handler */
+    imageUploadHandler?: (file: File) => Promise<string>;
+}
+/**
+ * Email send request structure
+ */
+export interface SendEmailRequest {
+    recipients: string[];
+    subject: string;
+    body: string;
+    attachments: EmailAttachment[];
+    templateId?: string | null;
+}
+/**
+ * Email send response structure
+ */
+export interface SendEmailResponse {
+    success: boolean;
+    message: string;
+    campaignId?: string;
+}
+/**
+ * Import source definition for recipients panel
+ */
+export interface ImportSource {
+    id: string;
+    label: string;
+    icon: string;
+    handler: () => void;
+}
+/**
+ * CSV parsing result
+ */
+export interface CsvParseResult {
+    validEmails: string[];
+    invalidEmails: string[];
+    totalRows: number;
+    duplicates: string[];
+}
+/**
+ * Email recipient status
+ */
+export type EmailRecipientStatus = 'pending' | 'sent' | 'failed';
+/**
+ * Email recipient definition
+ */
+export interface EmailRecipient {
+    email: string;
+    name?: string;
+    status: EmailRecipientStatus;
+    error?: string;
+    sentAt?: Date | string;
+}
+/**
+ * Email campaign definition
+ */
+export interface EmailCampaign {
+    id?: string;
+    subject: string;
+    body: string;
+    plainText?: string;
+    recipients: EmailRecipient[];
+    status: 'draft' | 'sent' | 'failed' | 'sending';
+    createdAt?: Date | string;
+    sentAt?: Date | string;
+    createdBy?: string;
+    templateId?: string;
+    attachments?: EmailAttachment[];
+    stats?: {
+        totalRecipients: number;
+        sent: number;
+        failed: number;
+        batches?: number;
+        retries?: number;
+        opened?: number;
+        clicked?: number;
+    };
+}
+/**
+ * Mailbox state for context management
+ */
+export interface MailboxState {
+    campaigns: EmailCampaign[];
+    templates: EmailTemplate[];
+    loading: boolean;
+    error: string | null;
+    currentCampaign: Partial<EmailCampaign> | null;
+}
+/**
+ * Current compose state for context management
+ */
+export interface CurrentComposeState {
+    selectedEmails: string[];
+    subject: string;
+    body: string;
+    templateId: string | null;
+    attachments: EmailAttachment[];
+}
+/**
+ * Email compose events
+ */
+export type EmailComposeEvents = {
+    'emails-imported': CustomEvent<{
+        emails: string[];
+        source: string;
+    }>;
+    'recipient-removed': CustomEvent<{
+        email: string;
+    }>;
+    'recipients-cleared': CustomEvent<{}>;
+    'selection-changed': CustomEvent<{
+        selectedEmails: string[];
+    }>;
+    'compose-changed': CustomEvent<{
+        subject: string;
+        body: string;
+        templateId: string | null;
+        attachments: EmailAttachment[];
+    }>;
+    'send-email': CustomEvent<{
+        request: SendEmailRequest;
+    }>;
+    'send-error': CustomEvent<{
+        error: string;
+    }>;
+};
+/**
+ * Boat state options for recipients panel
+ */
+export type BoatState = 'hidden' | 'minimized' | 'expanded';
+/**
+ * Email preview view modes
+ */
+export type EmailPreviewMode = 'html' | 'plaintext';

package/types/src/textarea/textarea.d.ts

@@ -80,7 +80,7 @@ export default class SchmancyTextarea extends SchmancyTextarea_base {
      * Automatically adjusts height based on content.
      * @attr autoHeight
      * @type {boolean}
-     * @default false
+     * @default true
      * @public
      */
     autoHeight: boolean;
@@ -88,7 +88,7 @@ export default class SchmancyTextarea extends SchmancyTextarea_base {
      * Controls whether the textarea can be resized by the user.
      * @attr resize
      * @type {'none' | 'vertical' | 'horizontal' | 'both'}
-     * @default 'none'
+     * @default 'vertical'
      * @public
      */
     resize: 'none' | 'vertical' | 'horizontal' | 'both';

package/dist/dialog-service-DGfyRhia.js

@@ -1,135 +0,0 @@
-import { render as p } from "lit";
-import { Subject as w, switchMap as m, forkJoin as C, fromEvent as h, of as d, takeUntil as u, timer as f, map as g, defaultIfEmpty as v, tap as l, take as E } from "rxjs";
-import { T as y, a as x } from "./theme.component-MAXMwTCm.js";
-const b = "are-you-there-dialog", D = "yes-dialog-here", r = class r {
-  constructor() {
-    this.activeDialogs = [], this.activeRawDialogs = [], this.dialogSubject = new w(), this.dismissSubject = new w(), this.setupDialogOpeningLogic(), this.setupDialogDismissLogic();
-  }
-  static getInstance() {
-    return r.instance || (r.instance = new r()), r.instance;
-  }
-  setupDialogOpeningLogic() {
-    this.dialogSubject.pipe(m((t) => C([h(window, D).pipe(u(f(100)), g((e) => e.detail), v(void 0)), d(t).pipe(l(() => {
-      const e = t.type === "confirm" ? `confirm-dialog-${Date.now()}-${Math.random().toString(36).substring(2, 9)}` : `dialog-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
-      window.dispatchEvent(new CustomEvent(b, { detail: { uid: e }, bubbles: !0, composed: !0 })), t.uid = e;
-    }))])), m(([t, e]) => {
-      let n, i;
-      return t?.dialog ? (n = t.dialog, i = n.parentElement, d({ dialog: n, target: e, targetContainer: i })) : t?.theme ? (i = t.theme, d({ dialog: null, target: e, targetContainer: i })) : e.options.targetContainer ? (i = e.options.targetContainer, d({ dialog: null, target: e, targetContainer: i })) : (window.dispatchEvent(new CustomEvent(y)), h(window, x).pipe(E(1), u(f(100)), g((o) => o.detail.theme), v(void 0), g((o) => ({ dialog: null, target: e, targetContainer: o || document.body }))));
-    }), l(({ dialog: t, target: e, targetContainer: n }) => {
-      t || ((t = e.type === "confirm" ? document.createElement("confirm-dialog") : document.createElement("schmancy-dialog")).setAttribute("uid", e.uid), n.appendChild(t));
-    }), g(({ dialog: t, target: e, targetContainer: n }) => (t || (t = n.querySelector(`[uid="${e.uid}"]`)), { dialog: t, target: e, targetContainer: n })), l(({ dialog: t, target: e }) => {
-      if (e.type === "confirm") {
-        const n = t, i = e.options;
-        if (i.title && (n.title = i.title), i.subtitle && (n.subtitle = i.subtitle), i.message && (n.message = i.message), i.confirmText && (n.confirmText = i.confirmText), i.cancelText && (n.cancelText = i.cancelText), i.variant && (n.variant = i.variant), i.confirmColor && (n.confirmColor = i.confirmColor), i.width && n.style.setProperty("--dialog-width", i.width), i.content) {
-          const o = document.createElement("div");
-          if (o.slot = "content", typeof i.content == "function") {
-            const s = i.content();
-            s instanceof HTMLElement ? o.appendChild(s) : p(s, o);
-          } else i.content instanceof HTMLElement ? o.appendChild(i.content) : p(i.content, o);
-          n.appendChild(o);
-        }
-        this.activeDialogs.push(n);
-      } else {
-        if (e.content) {
-          const n = document.createElement("div");
-          if (n.style.height = "100%", n.style.width = "100%", n.classList.add("schmancy-dialog-content-container"), typeof e.content == "function") {
-            const i = e.content();
-            i instanceof HTMLElement ? n.appendChild(i) : p(i, n);
-          } else e.content instanceof HTMLElement ? n.appendChild(e.content) : p(e.content, n);
-          t.appendChild(n);
-        }
-        e.options.width && t.style.setProperty("--dialog-width", e.options.width), this.activeRawDialogs.push(t);
-      }
-    }), l(({ dialog: t, target: e }) => {
-      const n = e.options.position || this.getCenteredPosition();
-      if (t.show(n).then((i) => {
-        if (e.resolve && e.resolve(i), e.type === "confirm") {
-          const o = this.activeDialogs.indexOf(t);
-          o !== -1 && this.activeDialogs.splice(o, 1);
-          const s = t.querySelector('[slot="content"]');
-          s && t.removeChild(s);
-        } else {
-          const o = this.activeRawDialogs.indexOf(t);
-          o !== -1 && this.activeRawDialogs.splice(o, 1);
-          const s = t.querySelector(".schmancy-dialog-content-container");
-          s && s.parentNode && s.parentNode.removeChild(s);
-        }
-        t.parentElement && t.parentElement.removeChild(t);
-      }).catch((i) => {
-        e.reject && e.reject(i);
-      }), e.options.onConfirm) {
-        const i = (o) => {
-          e.options.onConfirm(), t.removeEventListener("confirm", i);
-        };
-        t.addEventListener("confirm", i);
-      }
-      if (e.options.onCancel) {
-        const i = (o) => {
-          e.options.onCancel(), t.removeEventListener("cancel", i);
-        };
-        t.addEventListener("cancel", i);
-      }
-    })).subscribe();
-  }
-  setupDialogDismissLogic() {
-    this.dismissSubject.pipe(m((t) => C([h(window, D).pipe(u(f(100)), g((e) => e.detail), v(void 0)), d(t).pipe(l(() => {
-      window.dispatchEvent(new CustomEvent(b, { detail: { uid: t }, bubbles: !0, composed: !0 }));
-    }))])), l(([t]) => {
-      if (t?.dialog) {
-        t.dialog.hide(!1);
-        const e = this.activeDialogs.indexOf(t.dialog);
-        e !== -1 && this.activeDialogs.splice(e, 1);
-        const n = this.activeRawDialogs.indexOf(t.dialog);
-        n !== -1 && this.activeRawDialogs.splice(n, 1), t.dialog.parentElement && t.dialog.parentElement.removeChild(t.dialog);
-      }
-    })).subscribe();
-  }
-  confirm(t) {
-    return new Promise((e, n) => {
-      const i = { ...r.DEFAULT_OPTIONS, ...t };
-      i.position || (i.position = this.getCenteredPosition());
-      const o = { options: i, type: "confirm", content: i.content, resolve: e, reject: n };
-      this.dialogSubject.next(o);
-    });
-  }
-  component(t, e = {}) {
-    return new Promise((n, i) => {
-      e.position || (e.position = this.getCenteredPosition());
-      const o = { options: e, type: "component", content: t, resolve: n, reject: i };
-      this.dialogSubject.next(o);
-    });
-  }
-  dismiss() {
-    if (this.activeRawDialogs.length > 0) {
-      const t = this.activeRawDialogs[this.activeRawDialogs.length - 1].getAttribute("uid");
-      if (t) return this.dismissSubject.next(t), !0;
-    }
-    if (this.activeDialogs.length > 0) {
-      const t = this.activeDialogs[this.activeDialogs.length - 1].getAttribute("uid");
-      if (t) return this.dismissSubject.next(t), !0;
-    }
-    return !1;
-  }
-  close() {
-    return this.dismiss();
-  }
-  ask(t, e) {
-    return this.confirm({ message: t, position: e });
-  }
-  danger(t) {
-    return this.confirm({ ...t, variant: "danger" });
-  }
-  getCenteredPosition() {
-    return { x: window.innerWidth / 2, y: window.innerHeight / 2 };
-  }
-};
-r.DEFAULT_OPTIONS = { title: void 0, subtitle: void 0, confirmText: void 0, cancelText: void 0, variant: "default", width: "360px" };
-let c = r;
-const j = { confirm: (a) => c.getInstance().confirm(a), ask: (a, t) => c.getInstance().ask(a, t), danger: (a) => c.getInstance().danger(a), component: (a, t) => c.getInstance().component(a, t), simple: (a, t) => c.getInstance().component(a, t), dismiss: () => c.getInstance().dismiss(), close: () => c.getInstance().close() };
-export {
-  j as $,
-  c as D,
-  b as a,
-  D as b
-};
-//# sourceMappingURL=dialog-service-DGfyRhia.js.map