@flusys/ng-email 1.0.0-rc

package/fesm2022/flusys-ng-email-email-config-list.component-DnIJdHdf.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"flusys-ng-email-email-config-list.component-DnIJdHdf.mjs","sources":["../../../projects/ng-email/pages/config/email-config-list.component.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  signal,\n} from '@angular/core';\nimport { Router } from '@angular/router';\nimport { firstValueFrom } from 'rxjs';\nimport { APP_CONFIG, DEFAULT_APP_NAME } from '@flusys/ng-core';\nimport { LAYOUT_AUTH_STATE } from '@flusys/ng-layout';\nimport { AngularModule, EMAIL_CONFIG_PERMISSIONS, HasPermissionDirective, PrimeModule } from '@flusys/ng-shared';\nimport { ConfirmationService, MessageService } from 'primeng/api';\nimport { EmailProviderEnum } from '../../enums/email-provider.enum';\nimport { IEmailConfig } from '../../interfaces/email-config.interface';\nimport { EmailConfigApiService } from '../../services/email-config-api.service';\n\n/**\n * Email configuration list component\n */\n@Component({\n  selector: 'lib-email-config-list',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [AngularModule, PrimeModule, HasPermissionDirective],\n  providers: [ConfirmationService, MessageService],\n  template: `\n    <div class=\"card\">\n      <div class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4\">\n        <div>\n          <h3 class=\"text-lg sm:text-xl font-semibold m-0\">Email Configurations</h3>\n          @if (showCompanyInfo()) {\n            <p class=\"text-sm text-muted-color mt-1\">\n              Company: {{ currentCompanyName() }}\n            </p>\n          }\n        </div>\n        <p-button\n          *hasPermission=\"EMAIL_CONFIG_PERMISSIONS.CREATE\"\n          label=\"New Configuration\"\n          icon=\"pi pi-plus\"\n          (onClick)=\"onCreate()\"\n          styleClass=\"w-full sm:w-auto\"\n        />\n      </div>\n\n      <div class=\"overflow-x-auto -mx-4 sm:mx-0\">\n        <p-table\n          [value]=\"configs()\"\n          [loading]=\"isLoading()\"\n          [paginator]=\"totalRecords() > 0\"\n          [rows]=\"pageSize()\"\n          [first]=\"first()\"\n          [totalRecords]=\"totalRecords()\"\n          [lazy]=\"true\"\n          (onLazyLoad)=\"onLazyLoad($event)\"\n          [rowsPerPageOptions]=\"[10, 25, 50]\"\n          styleClass=\"p-datatable-sm\"\n          [tableStyle]=\"{ 'min-width': '50rem' }\"\n        >\n          <ng-template #header>\n            <tr>\n              <th>Name</th>\n              <th>Provider</th>\n              <th class=\"hidden md:table-cell\">From Email</th>\n              <th>Status</th>\n              <th class=\"hidden lg:table-cell\">Created</th>\n              <th class=\"w-[120px]\">Actions</th>\n            </tr>\n          </ng-template>\n\n          <ng-template #body let-config>\n            <tr>\n              <td>\n                <i [class]=\"getProviderIcon(config.provider)\" class=\"mr-2 text-muted-color\"></i>\n                {{ config.name }}\n                @if (config.isDefault) {\n                  <p-tag value=\"Default\" severity=\"contrast\" class=\"ml-2\" />\n                }\n              </td>\n              <td>\n                <p-tag\n                  [value]=\"getProviderLabel(config.provider)\"\n                  [severity]=\"getProviderSeverity(config.provider)\"\n                />\n              </td>\n              <td class=\"hidden md:table-cell\">{{ config.fromEmail || '-' }}</td>\n              <td>\n                <p-tag\n                  [value]=\"config.isActive ? 'Active' : 'Inactive'\"\n                  [severity]=\"config.isActive ? 'success' : 'secondary'\"\n                />\n              </td>\n              <td class=\"hidden lg:table-cell\">{{ config.createdAt | date: 'short' }}</td>\n              <td>\n                <div class=\"flex gap-1\">\n                  <p-button\n                    *hasPermission=\"EMAIL_CONFIG_PERMISSIONS.UPDATE\"\n                    icon=\"pi pi-send\"\n                    [text]=\"true\"\n                    size=\"small\"\n                    pTooltip=\"Test\"\n                    (onClick)=\"onTest(config)\"\n                  />\n                  <p-button\n                    *hasPermission=\"EMAIL_CONFIG_PERMISSIONS.UPDATE\"\n                    icon=\"pi pi-pencil\"\n                    [text]=\"true\"\n                    severity=\"secondary\"\n                    size=\"small\"\n                    pTooltip=\"Edit\"\n                    (onClick)=\"onEdit(config.id)\"\n                  />\n                  <p-button\n                    *hasPermission=\"EMAIL_CONFIG_PERMISSIONS.DELETE\"\n                    icon=\"pi pi-trash\"\n                    [text]=\"true\"\n                    severity=\"danger\"\n                    size=\"small\"\n                    pTooltip=\"Delete\"\n                    (onClick)=\"onDelete(config)\"\n                  />\n                </div>\n              </td>\n            </tr>\n          </ng-template>\n\n          <ng-template #emptymessage>\n            <tr>\n              <td colspan=\"6\" class=\"text-center py-4 text-muted-color\">\n                No email configurations found. Add a provider to start sending emails.\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n      </div>\n    </div>\n\n    <!-- Test Email Dialog -->\n    <p-dialog\n      header=\"Test Email Configuration\"\n      [visible]=\"showTestDialog()\"\n      (visibleChange)=\"showTestDialog.set($event)\"\n      [modal]=\"true\"\n      [style]=\"{ width: '95vw', maxWidth: '400px' }\"\n      [breakpoints]=\"{ '575px': '95vw' }\"\n    >\n      <div class=\"grid gap-4\">\n        <div class=\"field\">\n          <label class=\"block font-medium mb-2\">Configuration</label>\n          <input\n            pInputText\n            [value]=\"selectedConfig()?.name || ''\"\n            class=\"w-full\"\n            [disabled]=\"true\"\n          />\n        </div>\n\n        <div class=\"field\">\n          <label class=\"block font-medium mb-2\">Provider</label>\n          <p-tag\n            [value]=\"getProviderLabel(selectedConfig()?.provider || '')\"\n            [severity]=\"getProviderSeverity(selectedConfig()?.provider || '')\"\n          />\n        </div>\n\n        <div class=\"field\">\n          <label class=\"block font-medium mb-2\">Recipient Email *</label>\n          <input\n            pInputText\n            [ngModel]=\"testRecipient()\"\n            (ngModelChange)=\"testRecipient.set($event)\"\n            class=\"w-full\"\n            placeholder=\"recipient@example.com\"\n            type=\"email\"\n          />\n          <small class=\"text-muted-color mt-1 block\">\n            A test email will be sent to this address\n          </small>\n        </div>\n      </div>\n\n      <ng-template #footer>\n        <p-button\n          label=\"Cancel\"\n          severity=\"secondary\"\n          [outlined]=\"true\"\n          (onClick)=\"showTestDialog.set(false)\"\n        />\n        <p-button\n          label=\"Send Test\"\n          icon=\"pi pi-send\"\n          [loading]=\"isSendingTest()\"\n          (onClick)=\"sendTestEmail()\"\n        />\n      </ng-template>\n    </p-dialog>\n\n    <p-confirmDialog />\n    <p-toast />\n  `,\n})\nexport class EmailConfigListComponent {\n  // Permission constants for template\n  readonly EMAIL_CONFIG_PERMISSIONS = EMAIL_CONFIG_PERMISSIONS;\n\n  private readonly router = inject(Router);\n  private readonly configService = inject(EmailConfigApiService);\n  private readonly confirmationService = inject(ConfirmationService);\n  private readonly messageService = inject(MessageService);\n  private readonly appConfig = inject(APP_CONFIG);\n  private readonly companyContext = inject(LAYOUT_AUTH_STATE, { optional: true });\n\n  readonly isLoading = signal(false);\n  readonly configs = signal<IEmailConfig[]>([]);\n  readonly totalRecords = signal(0);\n  readonly pageSize = signal(10);\n  readonly first = signal(0);\n\n  readonly showCompanyInfo = computed(\n    () => this.appConfig.enableCompanyFeature && !!this.companyContext,\n  );\n  readonly currentCompanyName = computed(\n    () => this.companyContext?.currentCompanyInfo()?.name ?? DEFAULT_APP_NAME,\n  );\n  // Test dialog state (signals for zoneless change detection)\n  readonly showTestDialog = signal(false);\n  readonly selectedConfig = signal<IEmailConfig | null>(null);\n  readonly isSendingTest = signal(false);\n  readonly testRecipient = signal('');\n\n  onCreate(): void {\n    this.router.navigate(['/email/configs/new']);\n  }\n\n  onEdit(configId: string): void {\n    this.router.navigate(['/email/configs', configId]);\n  }\n\n  async loadConfigs(): Promise<void> {\n    this.isLoading.set(true);\n    try {\n      const response = await firstValueFrom(\n        this.configService.getAll('', {\n          pagination: {\n            currentPage: Math.floor(this.first() / this.pageSize()),\n            pageSize: this.pageSize(),\n          },\n          filter: {},\n          select: [],\n          sort: {},\n        }),\n      );\n\n      if (response.success) {\n        this.configs.set(response.data ?? []);\n        this.totalRecords.set(response.meta?.total ?? 0);\n      }\n    } finally {\n      this.isLoading.set(false);\n    }\n  }\n\n  onLazyLoad(event: { first?: number | null; rows?: number | null }): void {\n    this.first.set(event.first ?? 0);\n    this.pageSize.set(event.rows ?? 10);\n    this.loadConfigs();\n  }\n\n  getProviderIcon(provider: EmailProviderEnum): string {\n    switch (provider) {\n      case EmailProviderEnum.SMTP:\n        return 'pi pi-server';\n      case EmailProviderEnum.SENDGRID:\n        return 'pi pi-cloud';\n      case EmailProviderEnum.MAILGUN:\n        return 'pi pi-cloud';\n      default:\n        return 'pi pi-envelope';\n    }\n  }\n\n  getProviderLabel(provider: EmailProviderEnum | string): string {\n    switch (provider) {\n      case EmailProviderEnum.SMTP:\n        return 'SMTP';\n      case EmailProviderEnum.SENDGRID:\n        return 'SendGrid';\n      case EmailProviderEnum.MAILGUN:\n        return 'Mailgun';\n      default:\n        return provider || '';\n    }\n  }\n\n  getProviderSeverity(\n    provider: EmailProviderEnum | string,\n  ): 'success' | 'secondary' | 'info' | 'warn' | 'danger' | 'contrast' {\n    switch (provider) {\n      case EmailProviderEnum.SMTP:\n        return 'info';\n      case EmailProviderEnum.SENDGRID:\n        return 'success';\n      case EmailProviderEnum.MAILGUN:\n        return 'warn';\n      default:\n        return 'secondary';\n    }\n  }\n\n  onTest(config: IEmailConfig): void {\n    this.selectedConfig.set(config);\n    this.testRecipient.set('');\n    this.showTestDialog.set(true);\n  }\n\n  async sendTestEmail(): Promise<void> {\n    const config = this.selectedConfig();\n    const recipient = this.testRecipient();\n    if (!config || !recipient) {\n      this.messageService.add({\n        severity: 'warn',\n        summary: 'Validation',\n        detail: 'Please enter a recipient email address.',\n      });\n      return;\n    }\n\n    this.isSendingTest.set(true);\n    try {\n      const response = await firstValueFrom(\n        this.configService.sendTest(config.id, recipient),\n      );\n\n      if (response.data?.success) {\n        this.messageService.add({\n          severity: 'success',\n          summary: 'Success',\n          detail: `Test email sent successfully! Message ID: ${response.data.messageId}`,\n        });\n        this.showTestDialog.set(false);\n      } else {\n        this.messageService.add({\n          severity: 'error',\n          summary: 'Error',\n          detail: response.data?.error || 'Failed to send test email.',\n        });\n      }\n    } catch {\n      // Error toast handled by global interceptor\n    } finally {\n      this.isSendingTest.set(false);\n    }\n  }\n\n  onDelete(config: IEmailConfig): void {\n    this.confirmationService.confirm({\n      message: `Are you sure you want to delete \"${config.name}\"?`,\n      header: 'Delete Configuration',\n      icon: 'pi pi-exclamation-triangle',\n      acceptButtonStyleClass: 'p-button-danger',\n      accept: async () => {\n        try {\n          await this.configService.deleteAsync({ id: config.id, type: 'delete' });\n          this.messageService.add({\n            severity: 'success',\n            summary: 'Success',\n            detail: 'Configuration deleted successfully.',\n          });\n          this.loadConfigs();\n        } catch {\n          // Error toast handled by global interceptor\n        }\n      },\n    });\n  }\n}\n"],"names":["i6","i7","i8","i9","i10"],"mappings":"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"}

package/fesm2022/flusys-ng-email-template-form.component-u40UX6yY.mjs

@@ -0,0 +1,555 @@
+import * as i0 from '@angular/core';
+import { inject, signal, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { form, required, FormField } from '@angular/forms/signals';
+import * as i1 from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
+import { APP_CONFIG, DEFAULT_APP_NAME } from '@flusys/ng-core';
+import { LAYOUT_AUTH_STATE } from '@flusys/ng-layout';
+import { AngularModule, PrimeModule } from '@flusys/ng-shared';
+import { MessageService } from 'primeng/api';
+import { EmailTemplateApiService, EmailBuilderStateService } from './flusys-ng-email.mjs';
+import * as i2 from 'primeng/button';
+import * as i5 from 'primeng/inputtext';
+import * as i8 from 'primeng/tag';
+import * as i5$1 from 'primeng/textarea';
+import * as i8$1 from 'primeng/toast';
+import * as i7 from 'primeng/toggleswitch';
+
+/**
+ * Email template form component (create/edit)
+ * Uses Angular Signal Forms for reactive form handling
+ */
+class TemplateFormComponent {
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    templateService = inject(EmailTemplateApiService);
+    messageService = inject(MessageService);
+    appConfig = inject(APP_CONFIG);
+    companyContext = inject(LAYOUT_AUTH_STATE, { optional: true });
+    state = inject(EmailBuilderStateService);
+    // Route params as signal
+    routeParams = toSignal(this.route.paramMap);
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    existingTemplate = signal(null, ...(ngDevMode ? [{ debugName: "existingTemplate" }] : []));
+    isEditMode = computed(() => !!this.existingTemplate(), ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    editorMode = signal('html', ...(ngDevMode ? [{ debugName: "editorMode" }] : []));
+    showCompanyInfo = computed(() => this.appConfig.enableCompanyFeature && !!this.companyContext, ...(ngDevMode ? [{ debugName: "showCompanyInfo" }] : []));
+    currentCompanyName = computed(() => this.companyContext?.currentCompanyInfo()?.name ?? DEFAULT_APP_NAME, ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : []));
+    /** Form model using signal */
+    formModel = signal({
+        id: '',
+        name: '',
+        slug: '',
+        description: '',
+        subject: '',
+        htmlContent: '',
+        textContent: '',
+        isActive: true,
+        isHtml: true,
+    }, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
+    /** Form with validation using Angular Signal Forms */
+    templateForm = form(this.formModel, (f) => {
+        required(f.name, { message: 'Template name is required' });
+        required(f.slug, { message: 'Slug is required' });
+        required(f.subject, { message: 'Subject is required' });
+    });
+    /** Check if form is valid */
+    isFormValid = computed(() => {
+        const model = this.formModel();
+        return (model.name.trim().length > 0 &&
+            model.slug.trim().length > 0 &&
+            model.subject.trim().length > 0);
+    }, ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
+    constructor() {
+        // Effect to handle route-based initialization
+        effect(() => {
+            const params = this.routeParams();
+            if (!params)
+                return;
+            const id = params.get('id');
+            if (id) {
+                this.loadTemplate(id);
+            }
+        });
+    }
+    async loadTemplate(id) {
+        this.isLoading.set(true);
+        try {
+            const response = await this.templateService.findByIdAsync(id);
+            if (response.success && response.data) {
+                const template = response.data;
+                this.existingTemplate.set(template);
+                this.formModel.set({
+                    id: template.id,
+                    name: template.name,
+                    slug: template.slug,
+                    description: template.description || '',
+                    subject: template.subject,
+                    htmlContent: template.htmlContent,
+                    textContent: template.textContent || '',
+                    isActive: template.isActive,
+                    isHtml: template.isHtml ?? true,
+                });
+                // Set editor mode based on saved template type
+                this.editorMode.set(template.isHtml ? 'html' : 'text');
+                this.state.loadSchema(template.schema);
+            }
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    setEditorMode(mode) {
+        const currentMode = this.editorMode();
+        const model = this.formModel();
+        // Sync content when switching modes
+        if (currentMode === 'text' && mode === 'html') {
+            // Switching from text to html - convert text to basic HTML if htmlContent is empty
+            if (!model.htmlContent && model.textContent) {
+                this.formModel.update((m) => ({ ...m, htmlContent: this.textToHtml(m.textContent) }));
+            }
+        }
+        else if (currentMode === 'html' && mode === 'text') {
+            // Switching from html to text - generate text from HTML if textContent is empty
+            if (!model.textContent && model.htmlContent) {
+                this.formModel.update((m) => ({ ...m, textContent: this.htmlToPlainText(m.htmlContent) }));
+            }
+        }
+        this.editorMode.set(mode);
+        this.formModel.update((m) => ({ ...m, isHtml: mode === 'html' }));
+    }
+    /** Convert plain text to basic HTML */
+    textToHtml(text) {
+        if (!text)
+            return '';
+        // Convert line breaks to paragraphs
+        return text
+            .split(/\n\n+/)
+            .map((p) => `<p>${p.replace(/\n/g, '<br>')}</p>`)
+            .join('\n');
+    }
+    /** Convert HTML to plain text (using DOMParser for safe parsing) */
+    htmlToPlainText(html) {
+        if (!html)
+            return '';
+        // Use DOMParser for safe HTML parsing (prevents XSS)
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+        // Get text content and clean up whitespace
+        return (doc.body.textContent || '').replace(/\s+/g, ' ').trim();
+    }
+    /** Get HTML for preview iframe */
+    getPreviewHtml() {
+        const baseStyles = `
+      <style>
+        body {
+          font-family: Arial, sans-serif;
+          margin: 16px;
+          background-color: #ffffff;
+          color: #333333;
+        }
+        img { max-width: 100%; height: auto; }
+      </style>
+    `;
+        return baseStyles + (this.formModel().htmlContent || '');
+    }
+    async onSave() {
+        if (!this.isFormValid()) {
+            this.messageService.add({
+                severity: 'warn',
+                summary: 'Validation',
+                detail: 'Please fill in all required fields.',
+            });
+            return;
+        }
+        this.isLoading.set(true);
+        try {
+            const model = this.formModel();
+            const schema = this.state.schema();
+            // Use user-provided plain text, or auto-generate from HTML if empty
+            const textContent = model.textContent || this.htmlToPlainText(model.htmlContent);
+            const data = {
+                name: model.name,
+                slug: model.slug,
+                description: model.description || undefined,
+                subject: model.subject,
+                schema: {
+                    ...schema,
+                    name: model.name,
+                    subject: model.subject,
+                },
+                htmlContent: model.htmlContent || '<p>Email content</p>',
+                textContent: textContent || undefined,
+                isActive: model.isActive,
+                isHtml: model.isHtml,
+            };
+            if (this.isEditMode()) {
+                await this.templateService.updateAsync({ id: model.id, ...data });
+            }
+            else {
+                await this.templateService.createTemplateAsync(data);
+            }
+            this.messageService.add({
+                severity: 'success',
+                summary: 'Success',
+                detail: `Template ${this.isEditMode() ? 'updated' : 'created'} successfully.`,
+            });
+            this.router.navigate(['../'], { relativeTo: this.route });
+        }
+        catch {
+            // Error toast handled by global interceptor
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TemplateFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: TemplateFormComponent, isStandalone: true, selector: "lib-template-form", providers: [MessageService, EmailBuilderStateService], ngImport: i0, template: `
+    <div class="card mb-4">
+      <!-- Header -->
+      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4">
+        <div>
+          <h3 class="text-lg sm:text-xl font-semibold m-0">
+            {{ isEditMode() ? 'Edit Template' : 'New Template' }}
+          </h3>
+          @if (showCompanyInfo()) {
+            <p class="text-sm text-muted-color mt-1">
+              Company: {{ currentCompanyName() }}
+            </p>
+          }
+        </div>
+      </div>
+
+      <!-- Form Fields -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="field">
+          <label for="name" class="block font-medium mb-2">Template Name *</label>
+          <input
+            pInputText
+            id="name"
+            [formField]="templateForm.name"
+            class="w-full"
+            placeholder="e.g., Welcome Email"
+          />
+        </div>
+
+        <div class="field">
+          <label for="slug" class="block font-medium mb-2">Slug *</label>
+          <input
+            pInputText
+            id="slug"
+            [formField]="templateForm.slug"
+            class="w-full"
+            placeholder="e.g., welcome-email"
+          />
+        </div>
+
+        <div class="field md:col-span-2">
+          <label for="subject" class="block font-medium mb-2">Subject *</label>
+          <input
+            pInputText
+            id="subject"
+            [formField]="templateForm.subject"
+            class="w-full"
+            [placeholder]="'e.g., Welcome to ' + '{{' + 'appName' + '}}' + '!'"
+          />
+          <small class="text-muted-color">Use {{ '{{variableName}}' }} for dynamic content</small>
+        </div>
+
+        <div class="field">
+          <label for="description" class="block font-medium mb-2">Description</label>
+          <input
+            pInputText
+            id="description"
+            [formField]="templateForm.description"
+            class="w-full"
+            placeholder="Brief description of the template"
+          />
+        </div>
+
+        <div class="field flex items-center gap-2">
+          <p-toggleswitch [formField]="templateForm.isActive" />
+          <label>Active</label>
+        </div>
+      </div>
+
+      <!-- Content Editor & Preview -->
+      <div class="grid grid-cols-1 gap-4" [class.lg:grid-cols-2]="editorMode() === 'html'">
+        <!-- Editor Panel -->
+        <div class="card">
+          <div class="flex justify-between items-center mb-3">
+            <h3 class="font-semibold">Content</h3>
+            <div class="flex gap-1">
+              <p-button
+                label="HTML"
+                [outlined]="editorMode() !== 'html'"
+                [severity]="editorMode() === 'html' ? 'primary' : 'secondary'"
+                size="small"
+                (onClick)="setEditorMode('html')"
+              />
+              <p-button
+                label="Plain Text"
+                [outlined]="editorMode() !== 'text'"
+                [severity]="editorMode() === 'text' ? 'primary' : 'secondary'"
+                size="small"
+                (onClick)="setEditorMode('text')"
+              />
+            </div>
+          </div>
+
+          <div class="h-[400px] overflow-auto">
+            @if (editorMode() === 'html') {
+              <textarea
+                pTextarea
+                [formField]="templateForm.htmlContent"
+                class="w-full h-full font-mono text-sm resize-none !overflow-x-auto"
+                placeholder="<html>...</html>"
+                wrap="off"
+              ></textarea>
+            } @else {
+              <textarea
+                pTextarea
+                [formField]="templateForm.textContent"
+                class="w-full h-full font-mono text-sm resize-none !overflow-x-auto"
+                placeholder="Enter plain text content for email clients that don't support HTML"
+                wrap="off"
+              ></textarea>
+            }
+          </div>
+          @if (editorMode() === 'text') {
+            <small class="text-muted-color mt-2 block">
+              <i class="pi pi-info-circle mr-1"></i>
+              Plain text version sent to email clients without HTML support
+            </small>
+          }
+        </div>
+
+        <!-- Preview Panel (HTML mode only) -->
+        @if (editorMode() === 'html') {
+          <div class="card">
+            <div class="flex flex-wrap justify-between items-center gap-2 mb-3">
+              <h3 class="font-semibold m-0">Preview</h3>
+              <p-tag value="Live Preview" severity="info" />
+            </div>
+            <div class="border border-surface rounded bg-surface-0 dark:bg-surface-900 h-[400px] overflow-auto">
+              @if (formModel().htmlContent) {
+                <iframe
+                  [srcdoc]="getPreviewHtml()"
+                  class="w-full h-full border-0"
+                  sandbox="allow-same-origin"
+                ></iframe>
+              } @else {
+                <div class="flex items-center justify-center h-full text-muted-color">
+                  <div class="text-center p-4">
+                    <i class="pi pi-eye text-4xl mb-2"></i>
+                    <p class="m-0">Enter HTML content to see preview</p>
+                  </div>
+                </div>
+              }
+            </div>
+          </div>
+        }
+      </div>
+
+      <!-- Form Actions -->
+      <div class="flex justify-end gap-2 mt-6 pt-4 border-t border-surface">
+        <p-button
+          label="Cancel"
+          severity="secondary"
+          [outlined]="true"
+          routerLink="../"
+        />
+        <p-button
+          [label]="isEditMode() ? 'Update' : 'Create'"
+          icon="pi pi-save"
+          [loading]="isLoading()"
+          [disabled]="!isFormValid()"
+          (onClick)="onSave()"
+        />
+      </div>
+    </div>
+
+    <p-toast />
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i8.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i5$1.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: i8$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i7.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TemplateFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-template-form',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AngularModule, PrimeModule, FormField],
+                    providers: [MessageService, EmailBuilderStateService],
+                    template: `
+    <div class="card mb-4">
+      <!-- Header -->
+      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4">
+        <div>
+          <h3 class="text-lg sm:text-xl font-semibold m-0">
+            {{ isEditMode() ? 'Edit Template' : 'New Template' }}
+          </h3>
+          @if (showCompanyInfo()) {
+            <p class="text-sm text-muted-color mt-1">
+              Company: {{ currentCompanyName() }}
+            </p>
+          }
+        </div>
+      </div>
+
+      <!-- Form Fields -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="field">
+          <label for="name" class="block font-medium mb-2">Template Name *</label>
+          <input
+            pInputText
+            id="name"
+            [formField]="templateForm.name"
+            class="w-full"
+            placeholder="e.g., Welcome Email"
+          />
+        </div>
+
+        <div class="field">
+          <label for="slug" class="block font-medium mb-2">Slug *</label>
+          <input
+            pInputText
+            id="slug"
+            [formField]="templateForm.slug"
+            class="w-full"
+            placeholder="e.g., welcome-email"
+          />
+        </div>
+
+        <div class="field md:col-span-2">
+          <label for="subject" class="block font-medium mb-2">Subject *</label>
+          <input
+            pInputText
+            id="subject"
+            [formField]="templateForm.subject"
+            class="w-full"
+            [placeholder]="'e.g., Welcome to ' + '{{' + 'appName' + '}}' + '!'"
+          />
+          <small class="text-muted-color">Use {{ '{{variableName}}' }} for dynamic content</small>
+        </div>
+
+        <div class="field">
+          <label for="description" class="block font-medium mb-2">Description</label>
+          <input
+            pInputText
+            id="description"
+            [formField]="templateForm.description"
+            class="w-full"
+            placeholder="Brief description of the template"
+          />
+        </div>
+
+        <div class="field flex items-center gap-2">
+          <p-toggleswitch [formField]="templateForm.isActive" />
+          <label>Active</label>
+        </div>
+      </div>
+
+      <!-- Content Editor & Preview -->
+      <div class="grid grid-cols-1 gap-4" [class.lg:grid-cols-2]="editorMode() === 'html'">
+        <!-- Editor Panel -->
+        <div class="card">
+          <div class="flex justify-between items-center mb-3">
+            <h3 class="font-semibold">Content</h3>
+            <div class="flex gap-1">
+              <p-button
+                label="HTML"
+                [outlined]="editorMode() !== 'html'"
+                [severity]="editorMode() === 'html' ? 'primary' : 'secondary'"
+                size="small"
+                (onClick)="setEditorMode('html')"
+              />
+              <p-button
+                label="Plain Text"
+                [outlined]="editorMode() !== 'text'"
+                [severity]="editorMode() === 'text' ? 'primary' : 'secondary'"
+                size="small"
+                (onClick)="setEditorMode('text')"
+              />
+            </div>
+          </div>
+
+          <div class="h-[400px] overflow-auto">
+            @if (editorMode() === 'html') {
+              <textarea
+                pTextarea
+                [formField]="templateForm.htmlContent"
+                class="w-full h-full font-mono text-sm resize-none !overflow-x-auto"
+                placeholder="<html>...</html>"
+                wrap="off"
+              ></textarea>
+            } @else {
+              <textarea
+                pTextarea
+                [formField]="templateForm.textContent"
+                class="w-full h-full font-mono text-sm resize-none !overflow-x-auto"
+                placeholder="Enter plain text content for email clients that don't support HTML"
+                wrap="off"
+              ></textarea>
+            }
+          </div>
+          @if (editorMode() === 'text') {
+            <small class="text-muted-color mt-2 block">
+              <i class="pi pi-info-circle mr-1"></i>
+              Plain text version sent to email clients without HTML support
+            </small>
+          }
+        </div>
+
+        <!-- Preview Panel (HTML mode only) -->
+        @if (editorMode() === 'html') {
+          <div class="card">
+            <div class="flex flex-wrap justify-between items-center gap-2 mb-3">
+              <h3 class="font-semibold m-0">Preview</h3>
+              <p-tag value="Live Preview" severity="info" />
+            </div>
+            <div class="border border-surface rounded bg-surface-0 dark:bg-surface-900 h-[400px] overflow-auto">
+              @if (formModel().htmlContent) {
+                <iframe
+                  [srcdoc]="getPreviewHtml()"
+                  class="w-full h-full border-0"
+                  sandbox="allow-same-origin"
+                ></iframe>
+              } @else {
+                <div class="flex items-center justify-center h-full text-muted-color">
+                  <div class="text-center p-4">
+                    <i class="pi pi-eye text-4xl mb-2"></i>
+                    <p class="m-0">Enter HTML content to see preview</p>
+                  </div>
+                </div>
+              }
+            </div>
+          </div>
+        }
+      </div>
+
+      <!-- Form Actions -->
+      <div class="flex justify-end gap-2 mt-6 pt-4 border-t border-surface">
+        <p-button
+          label="Cancel"
+          severity="secondary"
+          [outlined]="true"
+          routerLink="../"
+        />
+        <p-button
+          [label]="isEditMode() ? 'Update' : 'Create'"
+          icon="pi pi-save"
+          [loading]="isLoading()"
+          [disabled]="!isFormValid()"
+          (onClick)="onSave()"
+        />
+      </div>
+    </div>
+
+    <p-toast />
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+export { TemplateFormComponent };
+//# sourceMappingURL=flusys-ng-email-template-form.component-u40UX6yY.mjs.map