@flusys/ng-email 3.0.0 → 4.0.0-rc

package/fesm2022/{flusys-ng-email-email-config-form.component-tg4pKP7G.mjs → flusys-ng-email-email-config-form.component-Cj2U6Tgf.mjs}

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { inject, computed, signal, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, computed, signal, effect, Component } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import * as i2 from '@angular/router';
 import { ActivatedRoute, Router } from '@angular/router';
-import { APP_CONFIG, DEFAULT_APP_NAME } from '@flusys/ng-core';
+import { APP_CONFIG, TRANSLATE_ADAPTER, DEFAULT_APP_NAME } from '@flusys/ng-core';
 import { LAYOUT_AUTH_STATE } from '@flusys/ng-layout';
-import { AngularModule, PrimeModule } from '@flusys/ng-shared';
+import { AngularModule, PrimeModule, TranslatePipe } from '@flusys/ng-shared';
 import { MessageService } from 'primeng/api';
 import { EmailConfigApiService, EmailProviderEnum } from './flusys-ng-email.mjs';
 import * as i1 from '@angular/forms';
@@ -27,6 +27,7 @@ class EmailConfigFormComponent {
     messageService = inject(MessageService);
     appConfig = inject(APP_CONFIG);
     companyContext = inject(LAYOUT_AUTH_STATE, { optional: true });
+    translateAdapter = inject(TRANSLATE_ADAPTER, { optional: true });
     // Route params as signal
     routeParams = toSignal(this.route.paramMap);
     providerEnum = EmailProviderEnum;
@@ -35,15 +36,15 @@ class EmailConfigFormComponent {
     isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     existingConfig = signal(null, ...(ngDevMode ? [{ debugName: "existingConfig" }] : []));
     isEditMode = computed(() => !!this.existingConfig(), ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
-    providerOptions = [
-        { label: 'SMTP', value: EmailProviderEnum.SMTP },
-        { label: 'SendGrid', value: EmailProviderEnum.SENDGRID },
-        { label: 'Mailgun', value: EmailProviderEnum.MAILGUN },
-    ];
-    regionOptions = [
-        { label: 'US', value: 'us' },
-        { label: 'EU', value: 'eu' },
-    ];
+    providerOptions = computed(() => [
+        { label: this.translate('email.provider.smtp'), value: EmailProviderEnum.SMTP },
+        { label: this.translate('email.provider.sendgrid'), value: EmailProviderEnum.SENDGRID },
+        { label: this.translate('email.provider.mailgun'), value: EmailProviderEnum.MAILGUN },
+    ], ...(ngDevMode ? [{ debugName: "providerOptions" }] : []));
+    regionOptions = computed(() => [
+        { label: this.translate('email.region.us'), value: 'us' },
+        { label: this.translate('email.region.eu'), value: 'eu' },
+    ], ...(ngDevMode ? [{ debugName: "regionOptions" }] : []));
     /** Form model as signal for zoneless change detection */
     _formModel = signal({
         id: '',
@@ -96,6 +97,9 @@ class EmailConfigFormComponent {
                 this._formModel.set(this.mapConfigToFormModel(emailConfig));
             }
         }
+        catch {
+            // Error toast handled by global interceptor
+        }
         finally {
             this.isLoading.set(false);
         }
@@ -157,8 +161,8 @@ class EmailConfigFormComponent {
         if (!this.formModel.name || !this.formModel.provider) {
             this.messageService.add({
                 severity: 'warn',
-                summary: 'Validation',
-                detail: 'Please fill in all required fields.',
+                summary: this.translate('common.validation'),
+                detail: this.translate('common.fill.required.fields'),
             });
             return;
         }
@@ -173,8 +177,8 @@ class EmailConfigFormComponent {
             }
             this.messageService.add({
                 severity: 'success',
-                summary: 'Success',
-                detail: `Configuration ${this.isEditMode() ? 'updated' : 'created'} successfully.`,
+                summary: this.translate('common.success'),
+                detail: this.translate(this.isEditMode() ? 'email.config.updated' : 'email.config.created'),
             });
             this.router.navigate(['../'], { relativeTo: this.route });
         }
@@ -185,6 +189,9 @@ class EmailConfigFormComponent {
             this.isLoading.set(false);
         }
     }
+    translate(key, variables) {
+        return this.translateAdapter?.translate(key, variables) ?? key;
+    }
     buildSaveDto() {
         return {
             name: this.formModel.name,
@@ -203,11 +210,11 @@ class EmailConfigFormComponent {
       <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4">
         <div>
           <h3 class="text-lg sm:text-xl font-semibold m-0">
-            {{ isEditMode() ? 'Edit Configuration' : 'New Configuration' }}
+            {{ (isEditMode() ? 'email.config.edit.title' : 'email.config.new.title') | translate }}
           </h3>
           @if (showCompanyInfo()) {
             <p class="text-sm text-muted-color mt-1">
-              Company: {{ currentCompanyName() }}
+              {{ 'common.company' | translate }}: {{ currentCompanyName() }}
             </p>
           }
         </div>
@@ -218,7 +225,7 @@ class EmailConfigFormComponent {
           <!-- Common Fields -->
           <div class="field">
             <label for="name" class="block font-medium mb-2"
-              >Configuration Name *</label
+              >{{ 'email.config.name' | translate }} *</label
             >
             <input
               pInputText
@@ -226,29 +233,29 @@ class EmailConfigFormComponent {
               [ngModel]="formModel.name"
               (ngModelChange)="updateFormModel('name', $event)"
               class="w-full"
-              placeholder="e.g., Production SMTP"
+              [placeholder]="'email.config.name.example' | translate"
             />
           </div>
 
           <div class="field">
             <label for="provider" class="block font-medium mb-2"
-              >Email Provider *</label
+              >{{ 'email.config.provider' | translate }} *</label
             >
             <p-select
               id="provider"
-              [options]="providerOptions"
+              [options]="providerOptions()"
               [ngModel]="formModel.provider"
               (ngModelChange)="updateFormModel('provider', $event)"
               optionLabel="label"
               optionValue="value"
-              placeholder="Select provider"
+              [placeholder]="'email.config.select.provider' | translate"
               class="w-full"
             />
           </div>
 
           <div class="field">
             <label for="fromEmail" class="block font-medium mb-2"
-              >From Email</label
+              >{{ 'email.config.from.email' | translate }}</label
             >
             <input
               pInputText
@@ -256,13 +263,13 @@ class EmailConfigFormComponent {
               [ngModel]="formModel.fromEmail"
               (ngModelChange)="updateFormModel('fromEmail', $event)"
               class="w-full"
-              placeholder="noreply@example.com"
+              [placeholder]="'email.config.from.email.example' | translate"
             />
           </div>
 
           <div class="field">
             <label for="fromName" class="block font-medium mb-2"
-              >From Name</label
+              >{{ 'email.config.from.name' | translate }}</label
             >
             <input
               pInputText
@@ -270,29 +277,29 @@ class EmailConfigFormComponent {
               [ngModel]="formModel.fromName"
               (ngModelChange)="updateFormModel('fromName', $event)"
               class="w-full"
-              placeholder="FLUSYS"
+              [placeholder]="'email.config.from.name.example' | translate"
             />
           </div>
 
           <div class="field flex items-center gap-2">
             <p-toggleswitch [ngModel]="formModel.isActive" (ngModelChange)="updateFormModel('isActive', $event)" />
-            <label>Active</label>
+            <label>{{ 'common.active' | translate }}</label>
           </div>
 
           <div class="field flex items-center gap-2">
             <p-toggleswitch [ngModel]="formModel.isDefault" (ngModelChange)="updateFormModel('isDefault', $event)" />
-            <label>Set as Default</label>
+            <label>{{ 'email.config.set.as.default' | translate }}</label>
           </div>
         </div>
 
         <!-- SMTP Fields -->
         @if (formModel.provider === providerEnum.SMTP) {
           <div class="border-t border-surface mt-4 pt-4">
-            <h3 class="font-semibold mb-4">SMTP Settings</h3>
+            <h3 class="font-semibold mb-4">{{ 'email.config.smtp.settings' | translate }}</h3>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
               <div class="field">
                 <label for="smtpHost" class="block font-medium mb-2"
-                  >SMTP Host *</label
+                  >{{ 'email.config.smtp.host' | translate }} *</label
                 >
                 <input
                   pInputText
@@ -300,12 +307,12 @@ class EmailConfigFormComponent {
                   [ngModel]="formModel.smtpHost"
                   (ngModelChange)="updateFormModel('smtpHost', $event)"
                   class="w-full"
-                  placeholder="smtp.gmail.com"
+                  [placeholder]="'email.config.smtp.host.example' | translate"
                 />
               </div>
               <div class="field">
                 <label for="smtpPort" class="block font-medium mb-2"
-                  >Port *</label
+                  >{{ 'email.config.port' | translate }} *</label
                 >
                 <p-inputNumber
                   id="smtpPort"
@@ -313,12 +320,12 @@ class EmailConfigFormComponent {
                   (ngModelChange)="updateFormModel('smtpPort', $event)"
                   [useGrouping]="false"
                   class="w-full"
-                  placeholder="587"
+                  [placeholder]="'email.config.smtp.port.example' | translate"
                 />
               </div>
               <div class="field">
                 <label for="smtpUser" class="block font-medium mb-2"
-                  >Username *</label
+                  >{{ 'email.config.username' | translate }} *</label
                 >
                 <input
                   pInputText
@@ -326,12 +333,12 @@ class EmailConfigFormComponent {
                   [ngModel]="formModel.smtpUser"
                   (ngModelChange)="updateFormModel('smtpUser', $event)"
                   class="w-full"
-                  placeholder="user@gmail.com"
+                  [placeholder]="'email.config.smtp.user.example' | translate"
                 />
               </div>
               <div class="field">
                 <label for="smtpPass" class="block font-medium mb-2"
-                  >Password *</label
+                  >{{ 'email.config.password' | translate }} *</label
                 >
                 <p-password
                   id="smtpPass"
@@ -341,12 +348,12 @@ class EmailConfigFormComponent {
                   [toggleMask]="true"
                   styleClass="w-full"
                   inputStyleClass="w-full"
-                  placeholder="App password"
+                  [placeholder]="'email.config.smtp.password.example' | translate"
                 />
               </div>
               <div class="field flex items-center gap-2">
                 <p-toggleswitch [ngModel]="formModel.smtpSecure" (ngModelChange)="updateFormModel('smtpSecure', $event)" />
-                <label>Use SSL/TLS (Port 465)</label>
+                <label>{{ 'email.config.use.ssl.tls' | translate }}</label>
               </div>
             </div>
           </div>
@@ -355,11 +362,11 @@ class EmailConfigFormComponent {
         <!-- SendGrid Fields -->
         @if (formModel.provider === providerEnum.SENDGRID) {
           <div class="border-t border-surface mt-4 pt-4">
-            <h3 class="font-semibold mb-4">SendGrid Settings</h3>
+            <h3 class="font-semibold mb-4">{{ 'email.config.sendgrid.settings' | translate }}</h3>
             <div class="grid grid-cols-1 gap-4">
               <div class="field">
                 <label for="sendgridApiKey" class="block font-medium mb-2"
-                  >API Key *</label
+                  >{{ 'email.config.api.key' | translate }} *</label
                 >
                 <p-password
                   id="sendgridApiKey"
@@ -369,7 +376,7 @@ class EmailConfigFormComponent {
                   [toggleMask]="true"
                   styleClass="w-full"
                   inputStyleClass="w-full"
-                  placeholder="SG.xxxx..."
+                  [placeholder]="'email.config.sendgrid.api.key.example' | translate"
                 />
               </div>
             </div>
@@ -379,11 +386,11 @@ class EmailConfigFormComponent {
         <!-- Mailgun Fields -->
         @if (formModel.provider === providerEnum.MAILGUN) {
           <div class="border-t border-surface mt-4 pt-4">
-            <h3 class="font-semibold mb-4">Mailgun Settings</h3>
+            <h3 class="font-semibold mb-4">{{ 'email.config.mailgun.settings' | translate }}</h3>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
               <div class="field">
                 <label for="mailgunApiKey" class="block font-medium mb-2"
-                  >API Key *</label
+                  >{{ 'email.config.api.key' | translate }} *</label
                 >
                 <p-password
                   id="mailgunApiKey"
@@ -393,12 +400,12 @@ class EmailConfigFormComponent {
                   [toggleMask]="true"
                   styleClass="w-full"
                   inputStyleClass="w-full"
-                  placeholder="key-xxxx..."
+                  [placeholder]="'email.config.mailgun.api.key.example' | translate"
                 />
               </div>
               <div class="field">
                 <label for="mailgunDomain" class="block font-medium mb-2"
-                  >Domain *</label
+                  >{{ 'email.config.domain' | translate }} *</label
                 >
                 <input
                   pInputText
@@ -406,21 +413,21 @@ class EmailConfigFormComponent {
                   [ngModel]="formModel.mailgunDomain"
                   (ngModelChange)="updateFormModel('mailgunDomain', $event)"
                   class="w-full"
-                  placeholder="mg.example.com"
+                  [placeholder]="'email.config.mailgun.domain.example' | translate"
                 />
               </div>
               <div class="field">
                 <label for="mailgunRegion" class="block font-medium mb-2"
-                  >Region</label
+                  >{{ 'email.config.region' | translate }}</label
                 >
                 <p-select
                   id="mailgunRegion"
-                  [options]="regionOptions"
+                  [options]="regionOptions()"
                   [ngModel]="formModel.mailgunRegion"
                   (ngModelChange)="updateFormModel('mailgunRegion', $event)"
                   optionLabel="label"
                   optionValue="value"
-                  placeholder="Select region"
+                  [placeholder]="'email.config.select.region' | translate"
                   class="w-full"
                 />
               </div>
@@ -431,13 +438,13 @@ class EmailConfigFormComponent {
         <!-- Form Actions -->
         <div class="flex justify-end gap-2 mt-6 pt-4 border-t border-surface">
           <p-button
-            label="Cancel"
+            [label]="'common.cancel' | translate"
             severity="secondary"
             [outlined]="true"
             routerLink="../"
           />
           <p-button
-            [label]="isEditMode() ? 'Update' : 'Create'"
+            [label]="(isEditMode() ? 'common.update' : 'common.create') | translate"
             icon="pi pi-save"
             [loading]="isLoading()"
             (onClick)="onSave()"
@@ -446,14 +453,13 @@ class EmailConfigFormComponent {
     </div>
 
     <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: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2$1.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: i4.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "component", type: i6$1.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: i8.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i8$1.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }], 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: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i2$1.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: i4.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "component", type: i6$1.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: i8.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: i8$1.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: EmailConfigFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-email-config-form',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AngularModule, PrimeModule],
+                    imports: [AngularModule, PrimeModule, TranslatePipe],
                     providers: [MessageService],
                     template: `
     <div class="card">
@@ -461,11 +467,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
       <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4">
         <div>
           <h3 class="text-lg sm:text-xl font-semibold m-0">
-            {{ isEditMode() ? 'Edit Configuration' : 'New Configuration' }}
+            {{ (isEditMode() ? 'email.config.edit.title' : 'email.config.new.title') | translate }}
           </h3>
           @if (showCompanyInfo()) {
             <p class="text-sm text-muted-color mt-1">
-              Company: {{ currentCompanyName() }}
+              {{ 'common.company' | translate }}: {{ currentCompanyName() }}
             </p>
           }
         </div>
@@ -476,7 +482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           <!-- Common Fields -->
           <div class="field">
             <label for="name" class="block font-medium mb-2"
-              >Configuration Name *</label
+              >{{ 'email.config.name' | translate }} *</label
             >
             <input
               pInputText
@@ -484,29 +490,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               [ngModel]="formModel.name"
               (ngModelChange)="updateFormModel('name', $event)"
               class="w-full"
-              placeholder="e.g., Production SMTP"
+              [placeholder]="'email.config.name.example' | translate"
             />
           </div>
 
           <div class="field">
             <label for="provider" class="block font-medium mb-2"
-              >Email Provider *</label
+              >{{ 'email.config.provider' | translate }} *</label
             >
             <p-select
               id="provider"
-              [options]="providerOptions"
+              [options]="providerOptions()"
               [ngModel]="formModel.provider"
               (ngModelChange)="updateFormModel('provider', $event)"
               optionLabel="label"
               optionValue="value"
-              placeholder="Select provider"
+              [placeholder]="'email.config.select.provider' | translate"
               class="w-full"
             />
           </div>
 
           <div class="field">
             <label for="fromEmail" class="block font-medium mb-2"
-              >From Email</label
+              >{{ 'email.config.from.email' | translate }}</label
             >
             <input
               pInputText
@@ -514,13 +520,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               [ngModel]="formModel.fromEmail"
               (ngModelChange)="updateFormModel('fromEmail', $event)"
               class="w-full"
-              placeholder="noreply@example.com"
+              [placeholder]="'email.config.from.email.example' | translate"
             />
           </div>
 
           <div class="field">
             <label for="fromName" class="block font-medium mb-2"
-              >From Name</label
+              >{{ 'email.config.from.name' | translate }}</label
             >
             <input
               pInputText
@@ -528,29 +534,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               [ngModel]="formModel.fromName"
               (ngModelChange)="updateFormModel('fromName', $event)"
               class="w-full"
-              placeholder="FLUSYS"
+              [placeholder]="'email.config.from.name.example' | translate"
             />
           </div>
 
           <div class="field flex items-center gap-2">
             <p-toggleswitch [ngModel]="formModel.isActive" (ngModelChange)="updateFormModel('isActive', $event)" />
-            <label>Active</label>
+            <label>{{ 'common.active' | translate }}</label>
           </div>
 
           <div class="field flex items-center gap-2">
             <p-toggleswitch [ngModel]="formModel.isDefault" (ngModelChange)="updateFormModel('isDefault', $event)" />
-            <label>Set as Default</label>
+            <label>{{ 'email.config.set.as.default' | translate }}</label>
           </div>
         </div>
 
         <!-- SMTP Fields -->
         @if (formModel.provider === providerEnum.SMTP) {
           <div class="border-t border-surface mt-4 pt-4">
-            <h3 class="font-semibold mb-4">SMTP Settings</h3>
+            <h3 class="font-semibold mb-4">{{ 'email.config.smtp.settings' | translate }}</h3>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
               <div class="field">
                 <label for="smtpHost" class="block font-medium mb-2"
-                  >SMTP Host *</label
+                  >{{ 'email.config.smtp.host' | translate }} *</label
                 >
                 <input
                   pInputText
@@ -558,12 +564,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   [ngModel]="formModel.smtpHost"
                   (ngModelChange)="updateFormModel('smtpHost', $event)"
                   class="w-full"
-                  placeholder="smtp.gmail.com"
+                  [placeholder]="'email.config.smtp.host.example' | translate"
                 />
               </div>
               <div class="field">
                 <label for="smtpPort" class="block font-medium mb-2"
-                  >Port *</label
+                  >{{ 'email.config.port' | translate }} *</label
                 >
                 <p-inputNumber
                   id="smtpPort"
@@ -571,12 +577,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   (ngModelChange)="updateFormModel('smtpPort', $event)"
                   [useGrouping]="false"
                   class="w-full"
-                  placeholder="587"
+                  [placeholder]="'email.config.smtp.port.example' | translate"
                 />
               </div>
               <div class="field">
                 <label for="smtpUser" class="block font-medium mb-2"
-                  >Username *</label
+                  >{{ 'email.config.username' | translate }} *</label
                 >
                 <input
                   pInputText
@@ -584,12 +590,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   [ngModel]="formModel.smtpUser"
                   (ngModelChange)="updateFormModel('smtpUser', $event)"
                   class="w-full"
-                  placeholder="user@gmail.com"
+                  [placeholder]="'email.config.smtp.user.example' | translate"
                 />
               </div>
               <div class="field">
                 <label for="smtpPass" class="block font-medium mb-2"
-                  >Password *</label
+                  >{{ 'email.config.password' | translate }} *</label
                 >
                 <p-password
                   id="smtpPass"
@@ -599,12 +605,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   [toggleMask]="true"
                   styleClass="w-full"
                   inputStyleClass="w-full"
-                  placeholder="App password"
+                  [placeholder]="'email.config.smtp.password.example' | translate"
                 />
               </div>
               <div class="field flex items-center gap-2">
                 <p-toggleswitch [ngModel]="formModel.smtpSecure" (ngModelChange)="updateFormModel('smtpSecure', $event)" />
-                <label>Use SSL/TLS (Port 465)</label>
+                <label>{{ 'email.config.use.ssl.tls' | translate }}</label>
               </div>
             </div>
           </div>
@@ -613,11 +619,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         <!-- SendGrid Fields -->
         @if (formModel.provider === providerEnum.SENDGRID) {
           <div class="border-t border-surface mt-4 pt-4">
-            <h3 class="font-semibold mb-4">SendGrid Settings</h3>
+            <h3 class="font-semibold mb-4">{{ 'email.config.sendgrid.settings' | translate }}</h3>
             <div class="grid grid-cols-1 gap-4">
               <div class="field">
                 <label for="sendgridApiKey" class="block font-medium mb-2"
-                  >API Key *</label
+                  >{{ 'email.config.api.key' | translate }} *</label
                 >
                 <p-password
                   id="sendgridApiKey"
@@ -627,7 +633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   [toggleMask]="true"
                   styleClass="w-full"
                   inputStyleClass="w-full"
-                  placeholder="SG.xxxx..."
+                  [placeholder]="'email.config.sendgrid.api.key.example' | translate"
                 />
               </div>
             </div>
@@ -637,11 +643,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         <!-- Mailgun Fields -->
         @if (formModel.provider === providerEnum.MAILGUN) {
           <div class="border-t border-surface mt-4 pt-4">
-            <h3 class="font-semibold mb-4">Mailgun Settings</h3>
+            <h3 class="font-semibold mb-4">{{ 'email.config.mailgun.settings' | translate }}</h3>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
               <div class="field">
                 <label for="mailgunApiKey" class="block font-medium mb-2"
-                  >API Key *</label
+                  >{{ 'email.config.api.key' | translate }} *</label
                 >
                 <p-password
                   id="mailgunApiKey"
@@ -651,12 +657,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   [toggleMask]="true"
                   styleClass="w-full"
                   inputStyleClass="w-full"
-                  placeholder="key-xxxx..."
+                  [placeholder]="'email.config.mailgun.api.key.example' | translate"
                 />
               </div>
               <div class="field">
                 <label for="mailgunDomain" class="block font-medium mb-2"
-                  >Domain *</label
+                  >{{ 'email.config.domain' | translate }} *</label
                 >
                 <input
                   pInputText
@@ -664,21 +670,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   [ngModel]="formModel.mailgunDomain"
                   (ngModelChange)="updateFormModel('mailgunDomain', $event)"
                   class="w-full"
-                  placeholder="mg.example.com"
+                  [placeholder]="'email.config.mailgun.domain.example' | translate"
                 />
               </div>
               <div class="field">
                 <label for="mailgunRegion" class="block font-medium mb-2"
-                  >Region</label
+                  >{{ 'email.config.region' | translate }}</label
                 >
                 <p-select
                   id="mailgunRegion"
-                  [options]="regionOptions"
+                  [options]="regionOptions()"
                   [ngModel]="formModel.mailgunRegion"
                   (ngModelChange)="updateFormModel('mailgunRegion', $event)"
                   optionLabel="label"
                   optionValue="value"
-                  placeholder="Select region"
+                  [placeholder]="'email.config.select.region' | translate"
                   class="w-full"
                 />
               </div>
@@ -689,13 +695,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         <!-- Form Actions -->
         <div class="flex justify-end gap-2 mt-6 pt-4 border-t border-surface">
           <p-button
-            label="Cancel"
+            [label]="'common.cancel' | translate"
             severity="secondary"
             [outlined]="true"
             routerLink="../"
           />
           <p-button
-            [label]="isEditMode() ? 'Update' : 'Create'"
+            [label]="(isEditMode() ? 'common.update' : 'common.create') | translate"
             icon="pi pi-save"
             [loading]="isLoading()"
             (onClick)="onSave()"
@@ -709,4 +715,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         }], ctorParameters: () => [] });
 
 export { EmailConfigFormComponent };
-//# sourceMappingURL=flusys-ng-email-email-config-form.component-tg4pKP7G.mjs.map
+//# sourceMappingURL=flusys-ng-email-email-config-form.component-Cj2U6Tgf.mjs.map