@flusys/ng-email 4.1.1 → 5.0.0

package/fesm2022/flusys-ng-email-email-config-form.component-M0g9fxU1.mjs

@@ -0,0 +1,793 @@
+import * as i0 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, TRANSLATE_ADAPTER, DEFAULT_APP_NAME } from '@flusys/ng-core';
+import { LAYOUT_AUTH_STATE } from '@flusys/ng-layout';
+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';
+import * as i2$1 from 'primeng/button';
+import * as i4 from 'primeng/inputnumber';
+import * as i5 from 'primeng/inputtext';
+import * as i6 from 'primeng/password';
+import * as i6$1 from 'primeng/select';
+import * as i8 from 'primeng/toast';
+import * as i8$1 from 'primeng/toggleswitch';
+
+/**
+ * Email configuration form component (create/edit)
+ */
+class EmailConfigFormComponent {
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    configService = inject(EmailConfigApiService);
+    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;
+    showCompanyInfo = computed(() => this.appConfig.enableCompanyFeature && !!this.companyContext, ...(ngDevMode ? [{ debugName: "showCompanyInfo" }] : []));
+    currentCompanyName = computed(() => this.companyContext?.currentCompanyInfo()?.name ?? DEFAULT_APP_NAME, ...(ngDevMode ? [{ debugName: "currentCompanyName" }] : []));
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    existingConfig = signal(null, ...(ngDevMode ? [{ debugName: "existingConfig" }] : []));
+    isEditMode = computed(() => !!this.existingConfig(), ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    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: '',
+        name: '',
+        provider: EmailProviderEnum.SMTP,
+        fromEmail: '',
+        fromName: '',
+        isActive: true,
+        isDefault: false,
+        // SMTP
+        smtpHost: '',
+        smtpPort: 587,
+        smtpUser: '',
+        smtpPass: '',
+        smtpSecure: false,
+        // SendGrid
+        sendgridApiKey: '',
+        // Mailgun
+        mailgunApiKey: '',
+        mailgunDomain: '',
+        mailgunRegion: 'us',
+    }, ...(ngDevMode ? [{ debugName: "_formModel" }] : []));
+    /** Expose form model for template binding */
+    get formModel() {
+        return this._formModel();
+    }
+    /** Update form model field - triggers change detection */
+    updateFormModel(field, value) {
+        this._formModel.update((m) => ({ ...m, [field]: value }));
+    }
+    constructor() {
+        // Effect to handle route-based initialization
+        effect(() => {
+            const params = this.routeParams();
+            if (!params)
+                return;
+            const id = params.get('id');
+            if (id) {
+                this.loadConfig(id);
+            }
+        });
+    }
+    async loadConfig(id) {
+        this.isLoading.set(true);
+        try {
+            const response = await this.configService.findById(id);
+            if (response.success && response.data) {
+                const emailConfig = response.data;
+                this.existingConfig.set(emailConfig);
+                this._formModel.set(this.mapConfigToFormModel(emailConfig));
+            }
+        }
+        catch {
+            // Error toast handled by global interceptor
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    mapConfigToFormModel(emailConfig) {
+        const providerConfig = emailConfig.config;
+        return {
+            id: emailConfig.id,
+            name: emailConfig.name,
+            provider: emailConfig.provider,
+            fromEmail: emailConfig.fromEmail || '',
+            fromName: emailConfig.fromName || '',
+            isActive: emailConfig.isActive,
+            isDefault: emailConfig.isDefault ?? false,
+            // SMTP fields
+            smtpHost: this.isSmtpConfig(providerConfig) ? providerConfig.host : '',
+            smtpPort: this.isSmtpConfig(providerConfig) ? providerConfig.port : 587,
+            smtpUser: this.isSmtpConfig(providerConfig)
+                ? providerConfig.auth.user
+                : '',
+            smtpPass: this.isSmtpConfig(providerConfig)
+                ? providerConfig.auth.pass
+                : '',
+            smtpSecure: this.isSmtpConfig(providerConfig)
+                ? (providerConfig.secure ?? false)
+                : false,
+            // SendGrid fields
+            sendgridApiKey: this.isSendGridConfig(providerConfig)
+                ? providerConfig.apiKey
+                : '',
+            // Mailgun fields
+            mailgunApiKey: this.isMailgunConfig(providerConfig)
+                ? providerConfig.apiKey
+                : '',
+            mailgunDomain: this.isMailgunConfig(providerConfig)
+                ? providerConfig.domain
+                : '',
+            mailgunRegion: this.isMailgunConfig(providerConfig)
+                ? (providerConfig.region ?? 'us')
+                : 'us',
+        };
+    }
+    isSmtpConfig(config) {
+        return 'host' in config && 'auth' in config;
+    }
+    isSendGridConfig(config) {
+        return 'apiKey' in config && !('domain' in config);
+    }
+    isMailgunConfig(config) {
+        return 'apiKey' in config && 'domain' in config;
+    }
+    buildProviderConfig() {
+        const form = this.formModel;
+        switch (form.provider) {
+            case EmailProviderEnum.SMTP:
+                return {
+                    host: form.smtpHost,
+                    port: form.smtpPort,
+                    secure: form.smtpSecure,
+                    auth: { user: form.smtpUser, pass: form.smtpPass },
+                };
+            case EmailProviderEnum.SENDGRID:
+                return { apiKey: form.sendgridApiKey };
+            case EmailProviderEnum.MAILGUN:
+                return {
+                    apiKey: form.mailgunApiKey,
+                    domain: form.mailgunDomain,
+                    region: form.mailgunRegion,
+                };
+        }
+    }
+    async onSave() {
+        if (!this.formModel.name || !this.formModel.provider) {
+            this.messageService.add({
+                severity: 'warn',
+                summary: this.translate('shared.validation'),
+                detail: this.translate('shared.fill.required.fields'),
+            });
+            return;
+        }
+        this.isLoading.set(true);
+        try {
+            const dto = this.buildSaveDto();
+            const response = this.isEditMode()
+                ? await this.configService.update({ id: this.formModel.id, ...dto })
+                : await this.configService.insert(dto);
+            const r = response;
+            this.messageService.add({
+                severity: 'success',
+                summary: this.translate('shared.success'),
+                detail: r?.messageKey
+                    ? this.translate(r.messageKey, r.messageVariables)
+                    : (r?.message ?? ''),
+            });
+            this.router.navigate(['../'], { relativeTo: this.route });
+        }
+        catch {
+            // Error toast handled by global interceptor
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    translate(key, variables) {
+        return this.translateAdapter?.translate(key, variables) ?? key;
+    }
+    buildSaveDto() {
+        return {
+            name: this.formModel.name,
+            provider: this.formModel.provider,
+            config: this.buildProviderConfig(),
+            fromEmail: this.formModel.fromEmail || undefined,
+            fromName: this.formModel.fromName || undefined,
+            isActive: this.formModel.isActive,
+            isDefault: this.formModel.isDefault,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: EmailConfigFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: EmailConfigFormComponent, isStandalone: true, selector: "lib-email-config-form", providers: [MessageService], ngImport: i0, template: `
+    <div class="card">
+      <!-- Header -->
+      <div
+        class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4"
+      >
+        <div>
+          <h3 class="text-lg sm:text-xl font-semibold m-0">
+            {{
+              (isEditMode()
+                ? 'email.config.edit.title'
+                : 'email.config.new.title'
+              ) | translate
+            }}
+          </h3>
+          @if (showCompanyInfo()) {
+            <p class="text-sm text-muted-color mt-1">
+              {{ 'shared.company' | translate }}: {{ currentCompanyName() }}
+            </p>
+          }
+        </div>
+      </div>
+
+      <!-- Form Fields -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <!-- Common Fields -->
+        <div class="field">
+          <label for="name" class="block font-medium mb-2"
+            >{{ 'email.config.name' | translate }} *</label
+          >
+          <input
+            pInputText
+            id="name"
+            [ngModel]="formModel.name"
+            (ngModelChange)="updateFormModel('name', $event)"
+            class="w-full"
+            [placeholder]="'email.config.name.example' | translate"
+          />
+        </div>
+
+        <div class="field">
+          <label for="provider" class="block font-medium mb-2"
+            >{{ 'email.config.provider' | translate }} *</label
+          >
+          <p-select
+            id="provider"
+            [options]="providerOptions()"
+            [ngModel]="formModel.provider"
+            (ngModelChange)="updateFormModel('provider', $event)"
+            optionLabel="label"
+            optionValue="value"
+            [placeholder]="'email.config.select.provider' | translate"
+            class="w-full"
+          />
+        </div>
+
+        <div class="field">
+          <label for="fromEmail" class="block font-medium mb-2">{{
+            'email.config.from.email' | translate
+          }}</label>
+          <input
+            pInputText
+            id="fromEmail"
+            [ngModel]="formModel.fromEmail"
+            (ngModelChange)="updateFormModel('fromEmail', $event)"
+            class="w-full"
+            [placeholder]="'email.config.from.email.example' | translate"
+          />
+        </div>
+
+        <div class="field">
+          <label for="fromName" class="block font-medium mb-2">{{
+            'email.config.from.name' | translate
+          }}</label>
+          <input
+            pInputText
+            id="fromName"
+            [ngModel]="formModel.fromName"
+            (ngModelChange)="updateFormModel('fromName', $event)"
+            class="w-full"
+            [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>{{ 'shared.active' | translate }}</label>
+        </div>
+
+        <div class="field flex items-center gap-2">
+          <p-toggleswitch
+            [ngModel]="formModel.isDefault"
+            (ngModelChange)="updateFormModel('isDefault', $event)"
+          />
+          <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">
+            {{ '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"
+                >{{ 'email.config.smtp.host' | translate }} *</label
+              >
+              <input
+                pInputText
+                id="smtpHost"
+                [ngModel]="formModel.smtpHost"
+                (ngModelChange)="updateFormModel('smtpHost', $event)"
+                class="w-full"
+                [placeholder]="'email.config.smtp.host.example' | translate"
+              />
+            </div>
+            <div class="field">
+              <label for="smtpPort" class="block font-medium mb-2"
+                >{{ 'email.config.port' | translate }} *</label
+              >
+              <p-inputNumber
+                id="smtpPort"
+                [ngModel]="formModel.smtpPort"
+                (ngModelChange)="updateFormModel('smtpPort', $event)"
+                [useGrouping]="false"
+                class="w-full"
+                [placeholder]="'email.config.smtp.port.example' | translate"
+              />
+            </div>
+            <div class="field">
+              <label for="smtpUser" class="block font-medium mb-2"
+                >{{ 'email.config.username' | translate }} *</label
+              >
+              <input
+                pInputText
+                id="smtpUser"
+                [ngModel]="formModel.smtpUser"
+                (ngModelChange)="updateFormModel('smtpUser', $event)"
+                class="w-full"
+                [placeholder]="'email.config.smtp.user.example' | translate"
+              />
+            </div>
+            <div class="field">
+              <label for="smtpPass" class="block font-medium mb-2"
+                >{{ 'email.config.password' | translate }} *</label
+              >
+              <p-password
+                id="smtpPass"
+                [ngModel]="formModel.smtpPass"
+                (ngModelChange)="updateFormModel('smtpPass', $event)"
+                [feedback]="false"
+                [toggleMask]="true"
+                styleClass="w-full"
+                inputStyleClass="w-full"
+                [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>{{ 'email.config.use.ssl.tls' | translate }}</label>
+            </div>
+          </div>
+        </div>
+      }
+
+      <!-- SendGrid Fields -->
+      @if (formModel.provider === providerEnum.SENDGRID) {
+        <div class="border-t border-surface mt-4 pt-4">
+          <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"
+                >{{ 'email.config.api.key' | translate }} *</label
+              >
+              <p-password
+                id="sendgridApiKey"
+                [ngModel]="formModel.sendgridApiKey"
+                (ngModelChange)="updateFormModel('sendgridApiKey', $event)"
+                [feedback]="false"
+                [toggleMask]="true"
+                styleClass="w-full"
+                inputStyleClass="w-full"
+                [placeholder]="'email.config.api.key.example' | translate"
+              />
+            </div>
+          </div>
+        </div>
+      }
+
+      <!-- Mailgun Fields -->
+      @if (formModel.provider === providerEnum.MAILGUN) {
+        <div class="border-t border-surface mt-4 pt-4">
+          <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"
+                >{{ 'email.config.api.key' | translate }} *</label
+              >
+              <p-password
+                id="mailgunApiKey"
+                [ngModel]="formModel.mailgunApiKey"
+                (ngModelChange)="updateFormModel('mailgunApiKey', $event)"
+                [feedback]="false"
+                [toggleMask]="true"
+                styleClass="w-full"
+                inputStyleClass="w-full"
+                [placeholder]="'email.config.api.key.example' | translate"
+              />
+            </div>
+            <div class="field">
+              <label for="mailgunDomain" class="block font-medium mb-2"
+                >{{ 'email.config.domain' | translate }} *</label
+              >
+              <input
+                pInputText
+                id="mailgunDomain"
+                [ngModel]="formModel.mailgunDomain"
+                (ngModelChange)="updateFormModel('mailgunDomain', $event)"
+                class="w-full"
+                [placeholder]="'email.config.domain.example' | translate"
+              />
+            </div>
+            <div class="field">
+              <label for="mailgunRegion" class="block font-medium mb-2">{{
+                'email.config.region' | translate
+              }}</label>
+              <p-select
+                id="mailgunRegion"
+                [options]="regionOptions()"
+                [ngModel]="formModel.mailgunRegion"
+                (ngModelChange)="updateFormModel('mailgunRegion', $event)"
+                optionLabel="label"
+                optionValue="value"
+                [placeholder]="'email.config.select.region' | translate"
+                class="w-full"
+              />
+            </div>
+          </div>
+        </div>
+      }
+
+      <!-- Form Actions -->
+      <div class="flex justify-end gap-2 mt-6 pt-4 border-t border-surface">
+        <p-button
+          [label]="'shared.cancel' | translate"
+          severity="secondary"
+          [outlined]="true"
+          routerLink="../"
+        />
+        <p-button
+          [label]="
+            (isEditMode() ? 'shared.update' : 'shared.create') | translate
+          "
+          icon="pi pi-save"
+          [loading]="isLoading()"
+          (onClick)="onSave()"
+        />
+      </div>
+    </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"] }, { 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',
+                    imports: [AngularModule, PrimeModule, TranslatePipe],
+                    providers: [MessageService],
+                    template: `
+    <div class="card">
+      <!-- Header -->
+      <div
+        class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4"
+      >
+        <div>
+          <h3 class="text-lg sm:text-xl font-semibold m-0">
+            {{
+              (isEditMode()
+                ? 'email.config.edit.title'
+                : 'email.config.new.title'
+              ) | translate
+            }}
+          </h3>
+          @if (showCompanyInfo()) {
+            <p class="text-sm text-muted-color mt-1">
+              {{ 'shared.company' | translate }}: {{ currentCompanyName() }}
+            </p>
+          }
+        </div>
+      </div>
+
+      <!-- Form Fields -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <!-- Common Fields -->
+        <div class="field">
+          <label for="name" class="block font-medium mb-2"
+            >{{ 'email.config.name' | translate }} *</label
+          >
+          <input
+            pInputText
+            id="name"
+            [ngModel]="formModel.name"
+            (ngModelChange)="updateFormModel('name', $event)"
+            class="w-full"
+            [placeholder]="'email.config.name.example' | translate"
+          />
+        </div>
+
+        <div class="field">
+          <label for="provider" class="block font-medium mb-2"
+            >{{ 'email.config.provider' | translate }} *</label
+          >
+          <p-select
+            id="provider"
+            [options]="providerOptions()"
+            [ngModel]="formModel.provider"
+            (ngModelChange)="updateFormModel('provider', $event)"
+            optionLabel="label"
+            optionValue="value"
+            [placeholder]="'email.config.select.provider' | translate"
+            class="w-full"
+          />
+        </div>
+
+        <div class="field">
+          <label for="fromEmail" class="block font-medium mb-2">{{
+            'email.config.from.email' | translate
+          }}</label>
+          <input
+            pInputText
+            id="fromEmail"
+            [ngModel]="formModel.fromEmail"
+            (ngModelChange)="updateFormModel('fromEmail', $event)"
+            class="w-full"
+            [placeholder]="'email.config.from.email.example' | translate"
+          />
+        </div>
+
+        <div class="field">
+          <label for="fromName" class="block font-medium mb-2">{{
+            'email.config.from.name' | translate
+          }}</label>
+          <input
+            pInputText
+            id="fromName"
+            [ngModel]="formModel.fromName"
+            (ngModelChange)="updateFormModel('fromName', $event)"
+            class="w-full"
+            [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>{{ 'shared.active' | translate }}</label>
+        </div>
+
+        <div class="field flex items-center gap-2">
+          <p-toggleswitch
+            [ngModel]="formModel.isDefault"
+            (ngModelChange)="updateFormModel('isDefault', $event)"
+          />
+          <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">
+            {{ '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"
+                >{{ 'email.config.smtp.host' | translate }} *</label
+              >
+              <input
+                pInputText
+                id="smtpHost"
+                [ngModel]="formModel.smtpHost"
+                (ngModelChange)="updateFormModel('smtpHost', $event)"
+                class="w-full"
+                [placeholder]="'email.config.smtp.host.example' | translate"
+              />
+            </div>
+            <div class="field">
+              <label for="smtpPort" class="block font-medium mb-2"
+                >{{ 'email.config.port' | translate }} *</label
+              >
+              <p-inputNumber
+                id="smtpPort"
+                [ngModel]="formModel.smtpPort"
+                (ngModelChange)="updateFormModel('smtpPort', $event)"
+                [useGrouping]="false"
+                class="w-full"
+                [placeholder]="'email.config.smtp.port.example' | translate"
+              />
+            </div>
+            <div class="field">
+              <label for="smtpUser" class="block font-medium mb-2"
+                >{{ 'email.config.username' | translate }} *</label
+              >
+              <input
+                pInputText
+                id="smtpUser"
+                [ngModel]="formModel.smtpUser"
+                (ngModelChange)="updateFormModel('smtpUser', $event)"
+                class="w-full"
+                [placeholder]="'email.config.smtp.user.example' | translate"
+              />
+            </div>
+            <div class="field">
+              <label for="smtpPass" class="block font-medium mb-2"
+                >{{ 'email.config.password' | translate }} *</label
+              >
+              <p-password
+                id="smtpPass"
+                [ngModel]="formModel.smtpPass"
+                (ngModelChange)="updateFormModel('smtpPass', $event)"
+                [feedback]="false"
+                [toggleMask]="true"
+                styleClass="w-full"
+                inputStyleClass="w-full"
+                [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>{{ 'email.config.use.ssl.tls' | translate }}</label>
+            </div>
+          </div>
+        </div>
+      }
+
+      <!-- SendGrid Fields -->
+      @if (formModel.provider === providerEnum.SENDGRID) {
+        <div class="border-t border-surface mt-4 pt-4">
+          <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"
+                >{{ 'email.config.api.key' | translate }} *</label
+              >
+              <p-password
+                id="sendgridApiKey"
+                [ngModel]="formModel.sendgridApiKey"
+                (ngModelChange)="updateFormModel('sendgridApiKey', $event)"
+                [feedback]="false"
+                [toggleMask]="true"
+                styleClass="w-full"
+                inputStyleClass="w-full"
+                [placeholder]="'email.config.api.key.example' | translate"
+              />
+            </div>
+          </div>
+        </div>
+      }
+
+      <!-- Mailgun Fields -->
+      @if (formModel.provider === providerEnum.MAILGUN) {
+        <div class="border-t border-surface mt-4 pt-4">
+          <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"
+                >{{ 'email.config.api.key' | translate }} *</label
+              >
+              <p-password
+                id="mailgunApiKey"
+                [ngModel]="formModel.mailgunApiKey"
+                (ngModelChange)="updateFormModel('mailgunApiKey', $event)"
+                [feedback]="false"
+                [toggleMask]="true"
+                styleClass="w-full"
+                inputStyleClass="w-full"
+                [placeholder]="'email.config.api.key.example' | translate"
+              />
+            </div>
+            <div class="field">
+              <label for="mailgunDomain" class="block font-medium mb-2"
+                >{{ 'email.config.domain' | translate }} *</label
+              >
+              <input
+                pInputText
+                id="mailgunDomain"
+                [ngModel]="formModel.mailgunDomain"
+                (ngModelChange)="updateFormModel('mailgunDomain', $event)"
+                class="w-full"
+                [placeholder]="'email.config.domain.example' | translate"
+              />
+            </div>
+            <div class="field">
+              <label for="mailgunRegion" class="block font-medium mb-2">{{
+                'email.config.region' | translate
+              }}</label>
+              <p-select
+                id="mailgunRegion"
+                [options]="regionOptions()"
+                [ngModel]="formModel.mailgunRegion"
+                (ngModelChange)="updateFormModel('mailgunRegion', $event)"
+                optionLabel="label"
+                optionValue="value"
+                [placeholder]="'email.config.select.region' | translate"
+                class="w-full"
+              />
+            </div>
+          </div>
+        </div>
+      }
+
+      <!-- Form Actions -->
+      <div class="flex justify-end gap-2 mt-6 pt-4 border-t border-surface">
+        <p-button
+          [label]="'shared.cancel' | translate"
+          severity="secondary"
+          [outlined]="true"
+          routerLink="../"
+        />
+        <p-button
+          [label]="
+            (isEditMode() ? 'shared.update' : 'shared.create') | translate
+          "
+          icon="pi pi-save"
+          [loading]="isLoading()"
+          (onClick)="onSave()"
+        />
+      </div>
+    </div>
+
+    <p-toast />
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+export { EmailConfigFormComponent };
+//# sourceMappingURL=flusys-ng-email-email-config-form.component-M0g9fxU1.mjs.map