@flusys/ng-email 1.0.0-rc

package/fesm2022/flusys-ng-email-template-list.component-91djzx28.mjs

@@ -0,0 +1,636 @@
+import * as i0 from '@angular/core';
+import { inject, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { firstValueFrom } from 'rxjs';
+import { APP_CONFIG, DEFAULT_APP_NAME } from '@flusys/ng-core';
+import { LAYOUT_AUTH_STATE } from '@flusys/ng-layout';
+import { EMAIL_TEMPLATE_PERMISSIONS, AngularModule, PrimeModule, HasPermissionDirective } from '@flusys/ng-shared';
+import { ConfirmationService, MessageService } from 'primeng/api';
+import { EmailTemplateApiService, EmailConfigApiService, EmailSendService } from './flusys-ng-email.mjs';
+import * as i1 from '@angular/forms';
+import * as i2 from 'primeng/button';
+import * as i3 from 'primeng/confirmdialog';
+import * as i4 from 'primeng/dialog';
+import * as i5 from 'primeng/inputtext';
+import * as i6 from 'primeng/select';
+import * as i7 from 'primeng/table';
+import * as i8 from 'primeng/tag';
+import * as i8$1 from 'primeng/toast';
+import * as i10 from 'primeng/tooltip';
+import * as i11 from '@angular/common';
+
+/**
+ * Email template list component
+ */
+class TemplateListComponent {
+    // Permission constants for template
+    EMAIL_TEMPLATE_PERMISSIONS = EMAIL_TEMPLATE_PERMISSIONS;
+    router = inject(Router);
+    templateService = inject(EmailTemplateApiService);
+    configService = inject(EmailConfigApiService);
+    emailSendService = inject(EmailSendService);
+    confirmationService = inject(ConfirmationService);
+    messageService = inject(MessageService);
+    appConfig = inject(APP_CONFIG);
+    companyContext = inject(LAYOUT_AUTH_STATE, { optional: true });
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    templates = signal([], ...(ngDevMode ? [{ debugName: "templates" }] : []));
+    totalRecords = signal(0, ...(ngDevMode ? [{ debugName: "totalRecords" }] : []));
+    pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    first = signal(0, ...(ngDevMode ? [{ debugName: "first" }] : []));
+    showCompanyInfo = computed(() => this.appConfig.enableCompanyFeature && !!this.companyContext, ...(ngDevMode ? [{ debugName: "showCompanyInfo" }] : []));
+    currentCompanyName = computed(() => this.companyContext?.currentCompanyInfo()?.name ?? DEFAULT_APP_NAME, ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : []));
+    // Test send dialog (signals for zoneless change detection)
+    showTestDialog = signal(false, ...(ngDevMode ? [{ debugName: "showTestDialog" }] : []));
+    selectedTemplate = signal(null, ...(ngDevMode ? [{ debugName: "selectedTemplate" }] : []));
+    configs = signal([], ...(ngDevMode ? [{ debugName: "configs" }] : []));
+    isLoadingConfigs = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingConfigs" }] : []));
+    isSendingTest = signal(false, ...(ngDevMode ? [{ debugName: "isSendingTest" }] : []));
+    // Form-bound properties as signals for zoneless change detection
+    _testSendModel = signal({ configId: '', recipient: '' }, ...(ngDevMode ? [{ debugName: "_testSendModel" }] : []));
+    _variableValues = signal({}, ...(ngDevMode ? [{ debugName: "_variableValues" }] : []));
+    get testSendModel() {
+        return this._testSendModel();
+    }
+    get variableValues() {
+        return this._variableValues();
+    }
+    updateTestSendModel(field, value) {
+        this._testSendModel.update((m) => ({ ...m, [field]: value }));
+    }
+    updateVariableValue(key, value) {
+        this._variableValues.update((v) => ({ ...v, [key]: value }));
+    }
+    configOptions = computed(() => this.configs().map((c) => ({
+        label: `${c.name} (${c.provider})`,
+        value: c.id,
+    })), ...(ngDevMode ? [{ debugName: "configOptions" }] : []));
+    /** Extract variables from template content */
+    templateVariables = computed(() => {
+        const template = this.selectedTemplate();
+        if (!template)
+            return [];
+        // Combine all content sources to extract variables
+        const content = [
+            template.subject,
+            template.htmlContent,
+            template.textContent || '',
+        ].join(' ');
+        // Find all {{variableName}} patterns
+        const matches = content.matchAll(/\{\{(\w+)\}\}/g);
+        const variables = new Set();
+        for (const match of matches) {
+            variables.add(match[1]);
+        }
+        return Array.from(variables).sort();
+    }, ...(ngDevMode ? [{ debugName: "templateVariables" }] : []));
+    onCreate() {
+        this.router.navigate(['/email/templates/new']);
+    }
+    onEdit(templateId) {
+        this.router.navigate(['/email/templates', templateId]);
+    }
+    async loadTemplates() {
+        this.isLoading.set(true);
+        try {
+            const response = await firstValueFrom(this.templateService.getAll('', {
+                pagination: {
+                    currentPage: Math.floor(this.first() / this.pageSize()),
+                    pageSize: this.pageSize(),
+                },
+                filter: {},
+                select: [],
+                sort: {},
+            }));
+            if (response.success) {
+                this.templates.set(response.data ?? []);
+                this.totalRecords.set(response.meta?.total ?? 0);
+            }
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    onLazyLoad(event) {
+        this.first.set(event.first ?? 0);
+        this.pageSize.set(event.rows ?? 10);
+        this.loadTemplates();
+    }
+    async onTestSend(template) {
+        this.selectedTemplate.set(template);
+        this._testSendModel.set({ configId: '', recipient: '' });
+        this._variableValues.set({}); // Reset variable values
+        this.showTestDialog.set(true);
+        await this.loadConfigs();
+    }
+    async loadConfigs() {
+        this.isLoadingConfigs.set(true);
+        try {
+            const response = await firstValueFrom(this.configService.getAll('', {
+                pagination: { currentPage: 0, pageSize: 100 },
+                filter: { isActive: true },
+                select: [],
+                sort: {},
+            }));
+            if (response.success) {
+                this.configs.set(response.data ?? []);
+            }
+        }
+        finally {
+            this.isLoadingConfigs.set(false);
+        }
+    }
+    async sendTestEmail() {
+        const template = this.selectedTemplate();
+        const model = this.testSendModel;
+        if (!template || !model.configId || !model.recipient) {
+            this.messageService.add({
+                severity: 'warn',
+                summary: 'Validation',
+                detail: 'Please select a configuration and enter recipient email.',
+            });
+            return;
+        }
+        this.isSendingTest.set(true);
+        try {
+            // Build variables object (only include non-empty values)
+            const variables = {};
+            for (const [key, value] of Object.entries(this.variableValues)) {
+                if (value) {
+                    variables[key] = value;
+                }
+            }
+            const response = await firstValueFrom(this.emailSendService.sendTemplate({
+                templateId: template.id,
+                to: model.recipient,
+                emailConfigId: model.configId,
+                variables: Object.keys(variables).length > 0 ? variables : undefined,
+            }));
+            if (response.data?.success) {
+                this.messageService.add({
+                    severity: 'success',
+                    summary: 'Success',
+                    detail: `Test email sent! Message ID: ${response.data.messageId}`,
+                });
+                this.showTestDialog.set(false);
+            }
+            else {
+                this.messageService.add({
+                    severity: 'error',
+                    summary: 'Error',
+                    detail: response.data?.error || 'Failed to send test email.',
+                });
+            }
+        }
+        catch {
+            // Error toast handled by global interceptor
+        }
+        finally {
+            this.isSendingTest.set(false);
+        }
+    }
+    onDelete(template) {
+        this.confirmationService.confirm({
+            message: `Are you sure you want to delete "${template.name}"?`,
+            header: 'Delete Template',
+            icon: 'pi pi-exclamation-triangle',
+            acceptButtonStyleClass: 'p-button-danger',
+            accept: async () => {
+                try {
+                    await this.templateService.deleteAsync({ id: template.id, type: 'delete' });
+                    this.messageService.add({
+                        severity: 'success',
+                        summary: 'Success',
+                        detail: 'Template deleted successfully.',
+                    });
+                    this.loadTemplates();
+                }
+                catch {
+                    // Error toast handled by global interceptor
+                }
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TemplateListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: TemplateListComponent, isStandalone: true, selector: "lib-template-list", providers: [ConfirmationService, MessageService], ngImport: i0, template: `
+    <div class="card">
+      <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">Email Templates</h3>
+          @if (showCompanyInfo()) {
+            <p class="text-sm text-muted-color mt-1">
+              Company: {{ currentCompanyName() }}
+            </p>
+          }
+        </div>
+        <p-button
+          *hasPermission="EMAIL_TEMPLATE_PERMISSIONS.CREATE"
+          label="New Template"
+          icon="pi pi-plus"
+          (onClick)="onCreate()"
+          styleClass="w-full sm:w-auto"
+        />
+      </div>
+
+      <div class="overflow-x-auto -mx-4 sm:mx-0">
+        <p-table
+          [value]="templates()"
+          [loading]="isLoading()"
+          [paginator]="totalRecords() > 0"
+          [rows]="pageSize()"
+          [first]="first()"
+          [totalRecords]="totalRecords()"
+          [lazy]="true"
+          (onLazyLoad)="onLazyLoad($event)"
+          [rowsPerPageOptions]="[10, 25, 50]"
+          styleClass="p-datatable-sm"
+          [tableStyle]="{ 'min-width': '50rem' }"
+        >
+          <ng-template #header>
+            <tr>
+              <th>Name</th>
+              <th class="hidden md:table-cell">Slug</th>
+              <th class="hidden lg:table-cell">Subject</th>
+              <th>Type</th>
+              <th>Status</th>
+              <th class="hidden xl:table-cell">Created</th>
+              <th class="w-[120px]">Actions</th>
+            </tr>
+          </ng-template>
+
+          <ng-template #body let-template>
+            <tr>
+              <td>
+                <i class="pi pi-envelope mr-2 text-muted-color"></i>
+                {{ template.name }}
+              </td>
+              <td class="hidden md:table-cell">
+                <code class="text-sm bg-surface-100 dark:bg-surface-700 px-2 py-1 rounded">{{ template.slug }}</code>
+              </td>
+              <td class="hidden lg:table-cell">{{ template.subject }}</td>
+              <td>
+                <p-tag
+                  [value]="template.isHtml ? 'HTML' : 'Text'"
+                  [severity]="template.isHtml ? 'info' : 'secondary'"
+                />
+              </td>
+              <td>
+                <p-tag
+                  [value]="template.isActive ? 'Active' : 'Inactive'"
+                  [severity]="template.isActive ? 'success' : 'secondary'"
+                />
+              </td>
+              <td class="hidden xl:table-cell">{{ template.createdAt | date: 'short' }}</td>
+              <td>
+                <div class="flex gap-1">
+                  <p-button
+                    *hasPermission="EMAIL_TEMPLATE_PERMISSIONS.UPDATE"
+                    icon="pi pi-send"
+                    [text]="true"
+                    size="small"
+                    pTooltip="Test Send"
+                    (onClick)="onTestSend(template)"
+                  />
+                  <p-button
+                    *hasPermission="EMAIL_TEMPLATE_PERMISSIONS.UPDATE"
+                    icon="pi pi-pencil"
+                    [text]="true"
+                    severity="secondary"
+                    size="small"
+                    pTooltip="Edit"
+                    (onClick)="onEdit(template.id)"
+                  />
+                  <p-button
+                    *hasPermission="EMAIL_TEMPLATE_PERMISSIONS.DELETE"
+                    icon="pi pi-trash"
+                    [text]="true"
+                    severity="danger"
+                    size="small"
+                    pTooltip="Delete"
+                    (onClick)="onDelete(template)"
+                  />
+                </div>
+              </td>
+            </tr>
+          </ng-template>
+
+          <ng-template #emptymessage>
+            <tr>
+              <td colspan="7" class="text-center py-4 text-muted-color">
+                No email templates found. Create your first template to get started.
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
+      </div>
+    </div>
+
+    <!-- Test Send Dialog -->
+    <p-dialog
+      header="Test Send Email"
+      [visible]="showTestDialog()"
+      (visibleChange)="showTestDialog.set($event)"
+      [modal]="true"
+      [style]="{ width: '95vw', maxWidth: '500px', maxHeight: '80vh' }"
+      [breakpoints]="{ '575px': '95vw' }"
+    >
+      <div class="flex flex-col gap-4">
+        <div class="field">
+          <label class="block font-medium mb-2">Template</label>
+          <input
+            pInputText
+            [value]="selectedTemplate()?.name || ''"
+            class="w-full"
+            [disabled]="true"
+          />
+        </div>
+
+        <div class="field">
+          <label class="block font-medium mb-2">Email Configuration *</label>
+          <p-select
+            [ngModel]="testSendModel.configId"
+            (ngModelChange)="updateTestSendModel('configId', $event)"
+            [options]="configOptions()"
+            optionLabel="label"
+            optionValue="value"
+            placeholder="Select configuration"
+            class="w-full"
+            [loading]="isLoadingConfigs()"
+          />
+        </div>
+
+        <div class="field">
+          <label class="block font-medium mb-2">Recipient Email *</label>
+          <input
+            pInputText
+            [ngModel]="testSendModel.recipient"
+            (ngModelChange)="updateTestSendModel('recipient', $event)"
+            class="w-full"
+            placeholder="recipient@example.com"
+          />
+        </div>
+
+        <!-- Dynamic Variables -->
+        @if (templateVariables().length > 0) {
+          <div class="border-t border-surface pt-4 mt-2">
+            <h4 class="font-medium mb-3 flex items-center gap-2">
+              <i class="pi pi-code text-muted-color"></i>
+              Template Variables
+            </h4>
+            <div class="flex flex-col gap-3">
+              @for (variable of templateVariables(); track variable) {
+                <div class="field">
+                  <label class="block text-sm font-medium mb-1">
+                    <code class="text-primary bg-surface-100 dark:bg-surface-700 px-1 rounded">{{ '{{' + variable + '}}' }}</code>
+                  </label>
+                  <input
+                    pInputText
+                    [ngModel]="variableValues[variable] || ''"
+                    (ngModelChange)="updateVariableValue(variable, $event)"
+                    class="w-full"
+                    [placeholder]="'Enter value for ' + variable"
+                  />
+                </div>
+              }
+            </div>
+          </div>
+        }
+      </div>
+
+      <ng-template #footer>
+        <p-button
+          label="Cancel"
+          severity="secondary"
+          [outlined]="true"
+          (onClick)="showTestDialog.set(false)"
+        />
+        <p-button
+          label="Send Test"
+          icon="pi pi-send"
+          [loading]="isSendingTest()"
+          (onClick)="sendTestEmail()"
+        />
+      </ng-template>
+    </p-dialog>
+
+    <p-confirmDialog />
+    <p-toast />
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "component", type: i3.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "component", type: i4.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i8.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { 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: "directive", type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: TemplateListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-template-list',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AngularModule, PrimeModule, HasPermissionDirective],
+                    providers: [ConfirmationService, MessageService],
+                    template: `
+    <div class="card">
+      <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">Email Templates</h3>
+          @if (showCompanyInfo()) {
+            <p class="text-sm text-muted-color mt-1">
+              Company: {{ currentCompanyName() }}
+            </p>
+          }
+        </div>
+        <p-button
+          *hasPermission="EMAIL_TEMPLATE_PERMISSIONS.CREATE"
+          label="New Template"
+          icon="pi pi-plus"
+          (onClick)="onCreate()"
+          styleClass="w-full sm:w-auto"
+        />
+      </div>
+
+      <div class="overflow-x-auto -mx-4 sm:mx-0">
+        <p-table
+          [value]="templates()"
+          [loading]="isLoading()"
+          [paginator]="totalRecords() > 0"
+          [rows]="pageSize()"
+          [first]="first()"
+          [totalRecords]="totalRecords()"
+          [lazy]="true"
+          (onLazyLoad)="onLazyLoad($event)"
+          [rowsPerPageOptions]="[10, 25, 50]"
+          styleClass="p-datatable-sm"
+          [tableStyle]="{ 'min-width': '50rem' }"
+        >
+          <ng-template #header>
+            <tr>
+              <th>Name</th>
+              <th class="hidden md:table-cell">Slug</th>
+              <th class="hidden lg:table-cell">Subject</th>
+              <th>Type</th>
+              <th>Status</th>
+              <th class="hidden xl:table-cell">Created</th>
+              <th class="w-[120px]">Actions</th>
+            </tr>
+          </ng-template>
+
+          <ng-template #body let-template>
+            <tr>
+              <td>
+                <i class="pi pi-envelope mr-2 text-muted-color"></i>
+                {{ template.name }}
+              </td>
+              <td class="hidden md:table-cell">
+                <code class="text-sm bg-surface-100 dark:bg-surface-700 px-2 py-1 rounded">{{ template.slug }}</code>
+              </td>
+              <td class="hidden lg:table-cell">{{ template.subject }}</td>
+              <td>
+                <p-tag
+                  [value]="template.isHtml ? 'HTML' : 'Text'"
+                  [severity]="template.isHtml ? 'info' : 'secondary'"
+                />
+              </td>
+              <td>
+                <p-tag
+                  [value]="template.isActive ? 'Active' : 'Inactive'"
+                  [severity]="template.isActive ? 'success' : 'secondary'"
+                />
+              </td>
+              <td class="hidden xl:table-cell">{{ template.createdAt | date: 'short' }}</td>
+              <td>
+                <div class="flex gap-1">
+                  <p-button
+                    *hasPermission="EMAIL_TEMPLATE_PERMISSIONS.UPDATE"
+                    icon="pi pi-send"
+                    [text]="true"
+                    size="small"
+                    pTooltip="Test Send"
+                    (onClick)="onTestSend(template)"
+                  />
+                  <p-button
+                    *hasPermission="EMAIL_TEMPLATE_PERMISSIONS.UPDATE"
+                    icon="pi pi-pencil"
+                    [text]="true"
+                    severity="secondary"
+                    size="small"
+                    pTooltip="Edit"
+                    (onClick)="onEdit(template.id)"
+                  />
+                  <p-button
+                    *hasPermission="EMAIL_TEMPLATE_PERMISSIONS.DELETE"
+                    icon="pi pi-trash"
+                    [text]="true"
+                    severity="danger"
+                    size="small"
+                    pTooltip="Delete"
+                    (onClick)="onDelete(template)"
+                  />
+                </div>
+              </td>
+            </tr>
+          </ng-template>
+
+          <ng-template #emptymessage>
+            <tr>
+              <td colspan="7" class="text-center py-4 text-muted-color">
+                No email templates found. Create your first template to get started.
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
+      </div>
+    </div>
+
+    <!-- Test Send Dialog -->
+    <p-dialog
+      header="Test Send Email"
+      [visible]="showTestDialog()"
+      (visibleChange)="showTestDialog.set($event)"
+      [modal]="true"
+      [style]="{ width: '95vw', maxWidth: '500px', maxHeight: '80vh' }"
+      [breakpoints]="{ '575px': '95vw' }"
+    >
+      <div class="flex flex-col gap-4">
+        <div class="field">
+          <label class="block font-medium mb-2">Template</label>
+          <input
+            pInputText
+            [value]="selectedTemplate()?.name || ''"
+            class="w-full"
+            [disabled]="true"
+          />
+        </div>
+
+        <div class="field">
+          <label class="block font-medium mb-2">Email Configuration *</label>
+          <p-select
+            [ngModel]="testSendModel.configId"
+            (ngModelChange)="updateTestSendModel('configId', $event)"
+            [options]="configOptions()"
+            optionLabel="label"
+            optionValue="value"
+            placeholder="Select configuration"
+            class="w-full"
+            [loading]="isLoadingConfigs()"
+          />
+        </div>
+
+        <div class="field">
+          <label class="block font-medium mb-2">Recipient Email *</label>
+          <input
+            pInputText
+            [ngModel]="testSendModel.recipient"
+            (ngModelChange)="updateTestSendModel('recipient', $event)"
+            class="w-full"
+            placeholder="recipient@example.com"
+          />
+        </div>
+
+        <!-- Dynamic Variables -->
+        @if (templateVariables().length > 0) {
+          <div class="border-t border-surface pt-4 mt-2">
+            <h4 class="font-medium mb-3 flex items-center gap-2">
+              <i class="pi pi-code text-muted-color"></i>
+              Template Variables
+            </h4>
+            <div class="flex flex-col gap-3">
+              @for (variable of templateVariables(); track variable) {
+                <div class="field">
+                  <label class="block text-sm font-medium mb-1">
+                    <code class="text-primary bg-surface-100 dark:bg-surface-700 px-1 rounded">{{ '{{' + variable + '}}' }}</code>
+                  </label>
+                  <input
+                    pInputText
+                    [ngModel]="variableValues[variable] || ''"
+                    (ngModelChange)="updateVariableValue(variable, $event)"
+                    class="w-full"
+                    [placeholder]="'Enter value for ' + variable"
+                  />
+                </div>
+              }
+            </div>
+          </div>
+        }
+      </div>
+
+      <ng-template #footer>
+        <p-button
+          label="Cancel"
+          severity="secondary"
+          [outlined]="true"
+          (onClick)="showTestDialog.set(false)"
+        />
+        <p-button
+          label="Send Test"
+          icon="pi pi-send"
+          [loading]="isSendingTest()"
+          (onClick)="sendTestEmail()"
+        />
+      </ng-template>
+    </p-dialog>
+
+    <p-confirmDialog />
+    <p-toast />
+  `,
+                }]
+        }] });
+
+export { TemplateListComponent };
+//# sourceMappingURL=flusys-ng-email-template-list.component-91djzx28.mjs.map