@flusys/ng-email 1.1.0-beta → 1.1.0

package/fesm2022/{flusys-ng-email-email-config-list.component-CJhSPkCZ.mjs → flusys-ng-email-email-config-list.component-Dt9PY9xD.mjs}

@@ -1,21 +1,20 @@
 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_CONFIG_PERMISSIONS, AngularModule, PrimeModule, HasPermissionDirective } from '@flusys/ng-shared';
+import { ConfirmationService, MessageService } from 'primeng/api';
 import { EmailConfigApiService, EmailProviderEnum } 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 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';
 
@@ -23,27 +22,26 @@ import * as i11 from '@angular/common';
  * Email configuration list component
  */
 class EmailConfigListComponent {
+    // Permission constants for template
+    EMAIL_CONFIG_PERMISSIONS = EMAIL_CONFIG_PERMISSIONS;
     router = inject(Router);
     configService = inject(EmailConfigApiService);
     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" }] : []));
     configs = signal([], ...(ngDevMode ? [{ debugName: "configs" }] : []));
     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 dialog state
-    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 dialog state (signals for zoneless change detection)
+    showTestDialog = signal(false, ...(ngDevMode ? [{ debugName: "showTestDialog" }] : []));
     selectedConfig = signal(null, ...(ngDevMode ? [{ debugName: "selectedConfig" }] : []));
     isSendingTest = signal(false, ...(ngDevMode ? [{ debugName: "isSendingTest" }] : []));
-    testRecipient = '';
-    ngOnInit() {
-        this.loadConfigs();
-    }
+    testRecipient = signal('', ...(ngDevMode ? [{ debugName: "testRecipient" }] : []));
     onCreate() {
         this.router.navigate(['/email/configs/new']);
     }
@@ -55,7 +53,7 @@ class EmailConfigListComponent {
         try {
             const response = await firstValueFrom(this.configService.getAll('', {
                 pagination: {
-                    currentPage: this.currentPage() - 1,
+                    currentPage: Math.floor(this.first() / this.pageSize()),
                     pageSize: this.pageSize(),
                 },
                 filter: {},
@@ -71,55 +69,35 @@ class EmailConfigListComponent {
             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.loadConfigs();
     }
+    providerMeta = {
+        [EmailProviderEnum.SMTP]: { icon: 'pi pi-server', label: 'SMTP', severity: 'info' },
+        [EmailProviderEnum.SENDGRID]: { icon: 'pi pi-cloud', label: 'SendGrid', severity: 'success' },
+        [EmailProviderEnum.MAILGUN]: { icon: 'pi pi-cloud', label: 'Mailgun', severity: 'warn' },
+    };
+    defaultProviderMeta = { icon: 'pi pi-envelope', label: '', severity: 'secondary' };
     getProviderIcon(provider) {
-        switch (provider) {
-            case EmailProviderEnum.SMTP:
-                return 'pi pi-server';
-            case EmailProviderEnum.SENDGRID:
-                return 'pi pi-cloud';
-            case EmailProviderEnum.MAILGUN:
-                return 'pi pi-cloud';
-            default:
-                return 'pi pi-envelope';
-        }
+        return this.providerMeta[provider]?.icon ?? this.defaultProviderMeta.icon;
     }
     getProviderLabel(provider) {
-        switch (provider) {
-            case EmailProviderEnum.SMTP:
-                return 'SMTP';
-            case EmailProviderEnum.SENDGRID:
-                return 'SendGrid';
-            case EmailProviderEnum.MAILGUN:
-                return 'Mailgun';
-            default:
-                return provider || '';
-        }
+        return this.providerMeta[provider]?.label ?? provider ?? '';
     }
     getProviderSeverity(provider) {
-        switch (provider) {
-            case EmailProviderEnum.SMTP:
-                return 'info';
-            case EmailProviderEnum.SENDGRID:
-                return 'success';
-            case EmailProviderEnum.MAILGUN:
-                return 'warn';
-            default:
-                return 'secondary';
-        }
+        return this.providerMeta[provider]?.severity ?? this.defaultProviderMeta.severity;
     }
     onTest(config) {
         this.selectedConfig.set(config);
-        this.testRecipient = '';
-        this.showTestDialog = true;
+        this.testRecipient.set('');
+        this.showTestDialog.set(true);
     }
     async sendTestEmail() {
         const config = this.selectedConfig();
-        if (!config || !this.testRecipient) {
+        const recipient = this.testRecipient();
+        if (!config || !recipient) {
             this.messageService.add({
                 severity: 'warn',
                 summary: 'Validation',
@@ -129,14 +107,14 @@ class EmailConfigListComponent {
         }
         this.isSendingTest.set(true);
         try {
-            const response = await firstValueFrom(this.configService.sendTest(config.id, this.testRecipient));
+            const response = await firstValueFrom(this.configService.sendTest(config.id, recipient));
             if (response.data?.success) {
                 this.messageService.add({
                     severity: 'success',
                     summary: 'Success',
                     detail: `Test email sent successfully! Message ID: ${response.data.messageId}`,
                 });
-                this.showTestDialog = false;
+                this.showTestDialog.set(false);
             }
             else {
                 this.messageService.add({
@@ -146,12 +124,8 @@ class EmailConfigListComponent {
                 });
             }
         }
-        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);
@@ -173,118 +147,133 @@ class EmailConfigListComponent {
                     });
                     this.loadConfigs();
                 }
-                catch (error) {
-                    this.messageService.add({
-                        severity: 'error',
-                        summary: 'Error',
-                        detail: 'Failed to delete configuration.',
-                    });
+                catch {
+                    // Error toast handled by global interceptor
                 }
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: EmailConfigListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: EmailConfigListComponent, isStandalone: true, selector: "lib-email-config-list", providers: [ConfirmationService, MessageService], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: EmailConfigListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: EmailConfigListComponent, isStandalone: true, selector: "lib-email-config-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 Configurations</h3>
+          <h3 class="text-lg sm:text-xl font-semibold m-0">Email Configurations</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_CONFIG_PERMISSIONS.CREATE"
           label="New Configuration"
           icon="pi pi-plus"
           (onClick)="onCreate()"
+          styleClass="w-full sm:w-auto"
         />
       </div>
 
-      <p-table
-        [value]="configs()"
-        [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>Provider</th>
-            <th>From Email</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]="configs()"
+          [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>Provider</th>
+              <th class="hidden md:table-cell">From Email</th>
+              <th>Status</th>
+              <th class="hidden lg:table-cell">Created</th>
+              <th class="w-[120px]">Actions</th>
+            </tr>
+          </ng-template>
 
-        <ng-template #body let-config>
-          <tr>
-            <td>
-              <i [class]="getProviderIcon(config.provider)" class="mr-2"></i>
-              {{ config.name }}
-            </td>
-            <td>
-              <p-tag
-                [value]="getProviderLabel(config.provider)"
-                [severity]="getProviderSeverity(config.provider)"
-              />
-            </td>
-            <td>{{ config.fromEmail || '-' }}</td>
-            <td>
-              <p-tag
-                [value]="config.isActive ? 'Active' : 'Inactive'"
-                [severity]="config.isActive ? 'success' : 'secondary'"
-              />
-            </td>
-            <td>{{ config.createdAt | date: 'short' }}</td>
-            <td>
-              <p-button
-                icon="pi pi-send"
-                [text]="true"
-                size="small"
-                pTooltip="Test"
-                (onClick)="onTest(config)"
-              />
-              <p-button
-                icon="pi pi-pencil"
-                [text]="true"
-                severity="secondary"
-                size="small"
-                (onClick)="onEdit(config.id)"
-              />
-              <p-button
-                icon="pi pi-trash"
-                [text]="true"
-                severity="danger"
-                size="small"
-                (onClick)="onDelete(config)"
-              />
-            </td>
-          </tr>
-        </ng-template>
+          <ng-template #body let-config>
+            <tr>
+              <td>
+                <i [class]="getProviderIcon(config.provider)" class="mr-2 text-muted-color"></i>
+                {{ config.name }}
+                @if (config.isDefault) {
+                  <p-tag value="Default" severity="contrast" class="ml-2" />
+                }
+              </td>
+              <td>
+                <p-tag
+                  [value]="getProviderLabel(config.provider)"
+                  [severity]="getProviderSeverity(config.provider)"
+                />
+              </td>
+              <td class="hidden md:table-cell">{{ config.fromEmail || '-' }}</td>
+              <td>
+                <p-tag
+                  [value]="config.isActive ? 'Active' : 'Inactive'"
+                  [severity]="config.isActive ? 'success' : 'secondary'"
+                />
+              </td>
+              <td class="hidden lg:table-cell">{{ config.createdAt | date: 'short' }}</td>
+              <td>
+                <div class="flex gap-1">
+                  <p-button
+                    *hasPermission="EMAIL_CONFIG_PERMISSIONS.UPDATE"
+                    icon="pi pi-send"
+                    [text]="true"
+                    size="small"
+                    pTooltip="Test"
+                    (onClick)="onTest(config)"
+                  />
+                  <p-button
+                    *hasPermission="EMAIL_CONFIG_PERMISSIONS.UPDATE"
+                    icon="pi pi-pencil"
+                    [text]="true"
+                    severity="secondary"
+                    size="small"
+                    pTooltip="Edit"
+                    (onClick)="onEdit(config.id)"
+                  />
+                  <p-button
+                    *hasPermission="EMAIL_CONFIG_PERMISSIONS.DELETE"
+                    icon="pi pi-trash"
+                    [text]="true"
+                    severity="danger"
+                    size="small"
+                    pTooltip="Delete"
+                    (onClick)="onDelete(config)"
+                  />
+                </div>
+              </td>
+            </tr>
+          </ng-template>
 
-        <ng-template #emptymessage>
-          <tr>
-            <td colspan="6" class="text-center py-4">
-              No email configurations found. Add a provider to start sending emails.
-            </td>
-          </tr>
-        </ng-template>
-      </p-table>
+          <ng-template #emptymessage>
+            <tr>
+              <td colspan="6" class="text-center py-4 text-muted-color">
+                No email configurations found. Add a provider to start sending emails.
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
+      </div>
     </div>
 
     <!-- Test Email Dialog -->
     <p-dialog
       header="Test Email Configuration"
-      [(visible)]="showTestDialog"
+      [visible]="showTestDialog()"
+      (visibleChange)="showTestDialog.set($event)"
       [modal]="true"
-      [style]="{ width: '400px' }"
+      [style]="{ width: '95vw', maxWidth: '400px' }"
+      [breakpoints]="{ '575px': '95vw' }"
     >
       <div class="grid gap-4">
         <div class="field">
@@ -309,12 +298,13 @@ class EmailConfigListComponent {
           <label class="block font-medium mb-2">Recipient Email *</label>
           <input
             pInputText
-            [(ngModel)]="testRecipient"
+            [ngModel]="testRecipient()"
+            (ngModelChange)="testRecipient.set($event)"
             class="w-full"
             placeholder="recipient@example.com"
             type="email"
           />
-          <small class="text-gray-500 mt-1 block">
+          <small class="text-muted-color mt-1 block">
             A test email will be sent to this address
           </small>
         </div>
@@ -323,8 +313,9 @@ class EmailConfigListComponent {
       <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"
@@ -337,117 +328,135 @@ class EmailConfigListComponent {
 
     <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: 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: 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: EmailConfigListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: EmailConfigListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-email-config-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 Configurations</h3>
+          <h3 class="text-lg sm:text-xl font-semibold m-0">Email Configurations</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_CONFIG_PERMISSIONS.CREATE"
           label="New Configuration"
           icon="pi pi-plus"
           (onClick)="onCreate()"
+          styleClass="w-full sm:w-auto"
         />
       </div>
 
-      <p-table
-        [value]="configs()"
-        [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>Provider</th>
-            <th>From Email</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]="configs()"
+          [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>Provider</th>
+              <th class="hidden md:table-cell">From Email</th>
+              <th>Status</th>
+              <th class="hidden lg:table-cell">Created</th>
+              <th class="w-[120px]">Actions</th>
+            </tr>
+          </ng-template>
 
-        <ng-template #body let-config>
-          <tr>
-            <td>
-              <i [class]="getProviderIcon(config.provider)" class="mr-2"></i>
-              {{ config.name }}
-            </td>
-            <td>
-              <p-tag
-                [value]="getProviderLabel(config.provider)"
-                [severity]="getProviderSeverity(config.provider)"
-              />
-            </td>
-            <td>{{ config.fromEmail || '-' }}</td>
-            <td>
-              <p-tag
-                [value]="config.isActive ? 'Active' : 'Inactive'"
-                [severity]="config.isActive ? 'success' : 'secondary'"
-              />
-            </td>
-            <td>{{ config.createdAt | date: 'short' }}</td>
-            <td>
-              <p-button
-                icon="pi pi-send"
-                [text]="true"
-                size="small"
-                pTooltip="Test"
-                (onClick)="onTest(config)"
-              />
-              <p-button
-                icon="pi pi-pencil"
-                [text]="true"
-                severity="secondary"
-                size="small"
-                (onClick)="onEdit(config.id)"
-              />
-              <p-button
-                icon="pi pi-trash"
-                [text]="true"
-                severity="danger"
-                size="small"
-                (onClick)="onDelete(config)"
-              />
-            </td>
-          </tr>
-        </ng-template>
+          <ng-template #body let-config>
+            <tr>
+              <td>
+                <i [class]="getProviderIcon(config.provider)" class="mr-2 text-muted-color"></i>
+                {{ config.name }}
+                @if (config.isDefault) {
+                  <p-tag value="Default" severity="contrast" class="ml-2" />
+                }
+              </td>
+              <td>
+                <p-tag
+                  [value]="getProviderLabel(config.provider)"
+                  [severity]="getProviderSeverity(config.provider)"
+                />
+              </td>
+              <td class="hidden md:table-cell">{{ config.fromEmail || '-' }}</td>
+              <td>
+                <p-tag
+                  [value]="config.isActive ? 'Active' : 'Inactive'"
+                  [severity]="config.isActive ? 'success' : 'secondary'"
+                />
+              </td>
+              <td class="hidden lg:table-cell">{{ config.createdAt | date: 'short' }}</td>
+              <td>
+                <div class="flex gap-1">
+                  <p-button
+                    *hasPermission="EMAIL_CONFIG_PERMISSIONS.UPDATE"
+                    icon="pi pi-send"
+                    [text]="true"
+                    size="small"
+                    pTooltip="Test"
+                    (onClick)="onTest(config)"
+                  />
+                  <p-button
+                    *hasPermission="EMAIL_CONFIG_PERMISSIONS.UPDATE"
+                    icon="pi pi-pencil"
+                    [text]="true"
+                    severity="secondary"
+                    size="small"
+                    pTooltip="Edit"
+                    (onClick)="onEdit(config.id)"
+                  />
+                  <p-button
+                    *hasPermission="EMAIL_CONFIG_PERMISSIONS.DELETE"
+                    icon="pi pi-trash"
+                    [text]="true"
+                    severity="danger"
+                    size="small"
+                    pTooltip="Delete"
+                    (onClick)="onDelete(config)"
+                  />
+                </div>
+              </td>
+            </tr>
+          </ng-template>
 
-        <ng-template #emptymessage>
-          <tr>
-            <td colspan="6" class="text-center py-4">
-              No email configurations found. Add a provider to start sending emails.
-            </td>
-          </tr>
-        </ng-template>
-      </p-table>
+          <ng-template #emptymessage>
+            <tr>
+              <td colspan="6" class="text-center py-4 text-muted-color">
+                No email configurations found. Add a provider to start sending emails.
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
+      </div>
     </div>
 
     <!-- Test Email Dialog -->
     <p-dialog
       header="Test Email Configuration"
-      [(visible)]="showTestDialog"
+      [visible]="showTestDialog()"
+      (visibleChange)="showTestDialog.set($event)"
       [modal]="true"
-      [style]="{ width: '400px' }"
+      [style]="{ width: '95vw', maxWidth: '400px' }"
+      [breakpoints]="{ '575px': '95vw' }"
     >
       <div class="grid gap-4">
         <div class="field">
@@ -472,12 +481,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
           <label class="block font-medium mb-2">Recipient Email *</label>
           <input
             pInputText
-            [(ngModel)]="testRecipient"
+            [ngModel]="testRecipient()"
+            (ngModelChange)="testRecipient.set($event)"
             class="w-full"
             placeholder="recipient@example.com"
             type="email"
           />
-          <small class="text-gray-500 mt-1 block">
+          <small class="text-muted-color mt-1 block">
             A test email will be sent to this address
           </small>
         </div>
@@ -486,8 +496,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"
@@ -505,4 +516,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         }] });
 
 export { EmailConfigListComponent };
-//# sourceMappingURL=flusys-ng-email-email-config-list.component-CJhSPkCZ.mjs.map
+//# sourceMappingURL=flusys-ng-email-email-config-list.component-Dt9PY9xD.mjs.map