@flusys/ng-email 1.1.0-beta → 1.1.0

package/fesm2022/{flusys-ng-email-template-list.component-CGJxfZMT.mjs → flusys-ng-email-template-list.component-krrpsjDv.mjs}

@@ -1,14 +1,13 @@
 import * as i0 from '@angular/core';
 import { inject, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import { Router } from '@angular/router';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
 import { firstValueFrom } from 'rxjs';
-import { ConfirmationService, MessageService } from 'primeng/api';
 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 { 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';
@@ -16,7 +15,7 @@ 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 i9 from 'primeng/toast';
+import * as i8$1 from 'primeng/toast';
 import * as i10 from 'primeng/tooltip';
 import * as i11 from '@angular/common';
 
@@ -24,6 +23,8 @@ 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);
@@ -31,23 +32,35 @@ class TemplateListComponent {
     confirmationService = inject(ConfirmationService);
     messageService = inject(MessageService);
     appConfig = inject(APP_CONFIG);
-    companyContext = inject(LAYOUT_AUTH_STATE);
+    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" }] : []));
-    currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
-    showCompanyInfo = computed(() => this.appConfig.enableCompanyFeature, ...(ngDevMode ? [{ debugName: "showCompanyInfo" }] : []));
-    currentCompanyName = computed(() => this.companyContext.currentCompanyInfo()?.name ?? DEFAULT_APP_NAME, ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : []));
-    // Test send dialog
-    showTestDialog = false;
+    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 (ngModel requires plain properties)
-    testSendModel = { configId: '', recipient: '' };
-    variableValues = {};
+    // 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,
@@ -71,9 +84,6 @@ class TemplateListComponent {
         }
         return Array.from(variables).sort();
     }, ...(ngDevMode ? [{ debugName: "templateVariables" }] : []));
-    ngOnInit() {
-        this.loadTemplates();
-    }
     onCreate() {
         this.router.navigate(['/email/templates/new']);
     }
@@ -85,7 +95,7 @@ class TemplateListComponent {
         try {
             const response = await firstValueFrom(this.templateService.getAll('', {
                 pagination: {
-                    currentPage: this.currentPage() - 1,
+                    currentPage: Math.floor(this.first() / this.pageSize()),
                     pageSize: this.pageSize(),
                 },
                 filter: {},
@@ -101,16 +111,16 @@ class TemplateListComponent {
             this.isLoading.set(false);
         }
     }
-    onPageChange(event) {
-        this.currentPage.set(event.first / event.rows + 1);
-        this.pageSize.set(event.rows);
+    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 = { configId: '', recipient: '' };
-        this.variableValues = {}; // Reset variable values
-        this.showTestDialog = true;
+        this._testSendModel.set({ configId: '', recipient: '' });
+        this._variableValues.set({}); // Reset variable values
+        this.showTestDialog.set(true);
         await this.loadConfigs();
     }
     async loadConfigs() {
@@ -132,7 +142,8 @@ class TemplateListComponent {
     }
     async sendTestEmail() {
         const template = this.selectedTemplate();
-        if (!template || !this.testSendModel.configId || !this.testSendModel.recipient) {
+        const model = this.testSendModel;
+        if (!template || !model.configId || !model.recipient) {
             this.messageService.add({
                 severity: 'warn',
                 summary: 'Validation',
@@ -151,8 +162,8 @@ class TemplateListComponent {
             }
             const response = await firstValueFrom(this.emailSendService.sendTemplate({
                 templateId: template.id,
-                to: this.testSendModel.recipient,
-                emailConfigId: this.testSendModel.configId,
+                to: model.recipient,
+                emailConfigId: model.configId,
                 variables: Object.keys(variables).length > 0 ? variables : undefined,
             }));
             if (response.data?.success) {
@@ -161,7 +172,7 @@ class TemplateListComponent {
                     summary: 'Success',
                     detail: `Test email sent! Message ID: ${response.data.messageId}`,
                 });
-                this.showTestDialog = false;
+                this.showTestDialog.set(false);
             }
             else {
                 this.messageService.add({
@@ -171,12 +182,8 @@ class TemplateListComponent {
                 });
             }
         }
-        catch (error) {
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Error',
-                detail: error?.message || 'Failed to send test email.',
-            });
+        catch {
+            // Error toast handled by global interceptor
         }
         finally {
             this.isSendingTest.set(false);
@@ -198,124 +205,136 @@ class TemplateListComponent {
                     });
                     this.loadTemplates();
                 }
-                catch (error) {
-                    this.messageService.add({
-                        severity: 'error',
-                        summary: 'Error',
-                        detail: 'Failed to delete template.',
-                    });
+                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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TemplateListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TemplateListComponent, isStandalone: true, selector: "lib-template-list", providers: [ConfirmationService, MessageService], ngImport: i0, template: `
     <div class="card">
-      <div class="flex justify-between items-center mb-4">
+      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4">
         <div>
-          <h3 class="text-xl font-semibold">Email Templates</h3>
+          <h3 class="text-lg sm:text-xl font-semibold m-0">Email Templates</h3>
           @if (showCompanyInfo()) {
-            <p class="text-sm text-gray-600 mt-1">
+            <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>
 
-      <p-table
-        [value]="templates()"
-        [loading]="isLoading()"
-        [paginator]="true"
-        [rows]="pageSize()"
-        [totalRecords]="totalRecords()"
-        [lazy]="true"
-        (onLazyLoad)="onPageChange($event)"
-        styleClass="p-datatable-sm"
-      >
-        <ng-template #header>
-          <tr>
-            <th>Name</th>
-            <th>Slug</th>
-            <th>Subject</th>
-            <th>Type</th>
-            <th>Status</th>
-            <th>Created</th>
-            <th style="width: 150px">Actions</th>
-          </tr>
-        </ng-template>
+      <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"></i>
-              {{ template.name }}
-            </td>
-            <td>
-              <code class="text-sm bg-gray-100 px-2 py-1 rounded">{{ template.slug }}</code>
-            </td>
-            <td>{{ 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>{{ template.createdAt | date: 'short' }}</td>
-            <td>
-              <p-button
-                icon="pi pi-send"
-                [text]="true"
-                size="small"
-                pTooltip="Test Send"
-                (onClick)="onTestSend(template)"
-              />
-              <p-button
-                icon="pi pi-pencil"
-                [text]="true"
-                severity="secondary"
-                size="small"
-                (onClick)="onEdit(template.id)"
-              />
-              <p-button
-                icon="pi pi-trash"
-                [text]="true"
-                severity="danger"
-                size="small"
-                (onClick)="onDelete(template)"
-              />
-            </td>
-          </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">
-              No email templates found. Create your first template to get started.
-            </td>
-          </tr>
-        </ng-template>
-      </p-table>
+          <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"
+      [visible]="showTestDialog()"
+      (visibleChange)="showTestDialog.set($event)"
       [modal]="true"
-      [style]="{ width: '500px', maxHeight: '80vh' }"
+      [style]="{ width: '95vw', maxWidth: '500px', maxHeight: '80vh' }"
+      [breakpoints]="{ '575px': '95vw' }"
     >
-      <div class="grid gap-4">
+      <div class="flex flex-col gap-4">
         <div class="field">
           <label class="block font-medium mb-2">Template</label>
           <input
@@ -329,7 +348,8 @@ class TemplateListComponent {
         <div class="field">
           <label class="block font-medium mb-2">Email Configuration *</label>
           <p-select
-            [(ngModel)]="testSendModel.configId"
+            [ngModel]="testSendModel.configId"
+            (ngModelChange)="updateTestSendModel('configId', $event)"
             [options]="configOptions()"
             optionLabel="label"
             optionValue="value"
@@ -343,7 +363,8 @@ class TemplateListComponent {
           <label class="block font-medium mb-2">Recipient Email *</label>
           <input
             pInputText
-            [(ngModel)]="testSendModel.recipient"
+            [ngModel]="testSendModel.recipient"
+            (ngModelChange)="updateTestSendModel('recipient', $event)"
             class="w-full"
             placeholder="recipient@example.com"
           />
@@ -351,21 +372,21 @@ class TemplateListComponent {
 
         <!-- Dynamic Variables -->
         @if (templateVariables().length > 0) {
-          <div class="border-t pt-4 mt-2">
+          <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"></i>
+              <i class="pi pi-code text-muted-color"></i>
               Template Variables
             </h4>
-            <div class="grid gap-3">
+            <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">{{ '{{' + variable + '}}' }}</code>
+                    <code class="text-primary bg-surface-100 dark:bg-surface-700 px-1 rounded">{{ '{{' + variable + '}}' }}</code>
                   </label>
                   <input
                     pInputText
                     [ngModel]="variableValues[variable] || ''"
-                    (ngModelChange)="variableValues[variable] = $event"
+                    (ngModelChange)="updateVariableValue(variable, $event)"
                     class="w-full"
                     [placeholder]="'Enter value for ' + variable"
                   />
@@ -379,8 +400,9 @@ class TemplateListComponent {
       <ng-template #footer>
         <p-button
           label="Cancel"
-          [text]="true"
-          (onClick)="showTestDialog = false"
+          severity="secondary"
+          [outlined]="true"
+          (onClick)="showTestDialog.set(false)"
         />
         <p-button
           label="Send Test"
@@ -393,123 +415,138 @@ class TemplateListComponent {
 
     <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: i9.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: "ngmodule", type: FormsModule }, { kind: "pipe", type: i11.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TemplateListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-template-list',
-                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AngularModule, PrimeModule, FormsModule],
+                    imports: [AngularModule, PrimeModule, HasPermissionDirective],
                     providers: [ConfirmationService, MessageService],
                     template: `
     <div class="card">
-      <div class="flex justify-between items-center mb-4">
+      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4">
         <div>
-          <h3 class="text-xl font-semibold">Email Templates</h3>
+          <h3 class="text-lg sm:text-xl font-semibold m-0">Email Templates</h3>
           @if (showCompanyInfo()) {
-            <p class="text-sm text-gray-600 mt-1">
+            <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>
 
-      <p-table
-        [value]="templates()"
-        [loading]="isLoading()"
-        [paginator]="true"
-        [rows]="pageSize()"
-        [totalRecords]="totalRecords()"
-        [lazy]="true"
-        (onLazyLoad)="onPageChange($event)"
-        styleClass="p-datatable-sm"
-      >
-        <ng-template #header>
-          <tr>
-            <th>Name</th>
-            <th>Slug</th>
-            <th>Subject</th>
-            <th>Type</th>
-            <th>Status</th>
-            <th>Created</th>
-            <th style="width: 150px">Actions</th>
-          </tr>
-        </ng-template>
+      <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"></i>
-              {{ template.name }}
-            </td>
-            <td>
-              <code class="text-sm bg-gray-100 px-2 py-1 rounded">{{ template.slug }}</code>
-            </td>
-            <td>{{ 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>{{ template.createdAt | date: 'short' }}</td>
-            <td>
-              <p-button
-                icon="pi pi-send"
-                [text]="true"
-                size="small"
-                pTooltip="Test Send"
-                (onClick)="onTestSend(template)"
-              />
-              <p-button
-                icon="pi pi-pencil"
-                [text]="true"
-                severity="secondary"
-                size="small"
-                (onClick)="onEdit(template.id)"
-              />
-              <p-button
-                icon="pi pi-trash"
-                [text]="true"
-                severity="danger"
-                size="small"
-                (onClick)="onDelete(template)"
-              />
-            </td>
-          </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">
-              No email templates found. Create your first template to get started.
-            </td>
-          </tr>
-        </ng-template>
-      </p-table>
+          <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"
+      [visible]="showTestDialog()"
+      (visibleChange)="showTestDialog.set($event)"
       [modal]="true"
-      [style]="{ width: '500px', maxHeight: '80vh' }"
+      [style]="{ width: '95vw', maxWidth: '500px', maxHeight: '80vh' }"
+      [breakpoints]="{ '575px': '95vw' }"
     >
-      <div class="grid gap-4">
+      <div class="flex flex-col gap-4">
         <div class="field">
           <label class="block font-medium mb-2">Template</label>
           <input
@@ -523,7 +560,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         <div class="field">
           <label class="block font-medium mb-2">Email Configuration *</label>
           <p-select
-            [(ngModel)]="testSendModel.configId"
+            [ngModel]="testSendModel.configId"
+            (ngModelChange)="updateTestSendModel('configId', $event)"
             [options]="configOptions()"
             optionLabel="label"
             optionValue="value"
@@ -537,7 +575,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
           <label class="block font-medium mb-2">Recipient Email *</label>
           <input
             pInputText
-            [(ngModel)]="testSendModel.recipient"
+            [ngModel]="testSendModel.recipient"
+            (ngModelChange)="updateTestSendModel('recipient', $event)"
             class="w-full"
             placeholder="recipient@example.com"
           />
@@ -545,21 +584,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
         <!-- Dynamic Variables -->
         @if (templateVariables().length > 0) {
-          <div class="border-t pt-4 mt-2">
+          <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"></i>
+              <i class="pi pi-code text-muted-color"></i>
               Template Variables
             </h4>
-            <div class="grid gap-3">
+            <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">{{ '{{' + variable + '}}' }}</code>
+                    <code class="text-primary bg-surface-100 dark:bg-surface-700 px-1 rounded">{{ '{{' + variable + '}}' }}</code>
                   </label>
                   <input
                     pInputText
                     [ngModel]="variableValues[variable] || ''"
-                    (ngModelChange)="variableValues[variable] = $event"
+                    (ngModelChange)="updateVariableValue(variable, $event)"
                     class="w-full"
                     [placeholder]="'Enter value for ' + variable"
                   />
@@ -573,8 +612,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       <ng-template #footer>
         <p-button
           label="Cancel"
-          [text]="true"
-          (onClick)="showTestDialog = false"
+          severity="secondary"
+          [outlined]="true"
+          (onClick)="showTestDialog.set(false)"
         />
         <p-button
           label="Send Test"
@@ -592,4 +632,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         }] });
 
 export { TemplateListComponent };
-//# sourceMappingURL=flusys-ng-email-template-list.component-CGJxfZMT.mjs.map
+//# sourceMappingURL=flusys-ng-email-template-list.component-krrpsjDv.mjs.map