@masterteam/notification 0.0.1

package/fesm2022/masterteam-notification.mjs

@@ -0,0 +1,1056 @@
+import { Avatar } from '@masterteam/components/avatar';
+import * as i0 from '@angular/core';
+import { inject, input, Component, Injectable, signal, computed, effect, untracked, ChangeDetectionStrategy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormControl, Validators, ReactiveFormsModule, FormGroup } from '@angular/forms';
+import * as i2 from '@jsverse/transloco';
+import { TranslocoModule, TranslocoService } from '@jsverse/transloco';
+import { Card } from '@masterteam/components/card';
+import { Button } from '@masterteam/components/button';
+import { SelectField } from '@masterteam/components/select-field';
+import { TextField } from '@masterteam/components/text-field';
+import { TextareaField } from '@masterteam/components/textarea-field';
+import { EditorField } from '@masterteam/components/editor-field';
+import { ToggleField } from '@masterteam/components/toggle-field';
+import { Tabs } from '@masterteam/components/tabs';
+import { Icon } from '@masterteam/icons';
+import { ConfirmationService } from '@masterteam/components/confirmation';
+import { ModalService } from '@masterteam/components/modal';
+import { Skeleton } from 'primeng/skeleton';
+import { ModalRef } from '@masterteam/components/dialog';
+import { HttpClient } from '@angular/common/http';
+import { Action, Selector, State, Store, select } from '@ngxs/store';
+import { CrudStateBase, handleApiRequest, BaseFacade } from '@masterteam/components';
+
+class AddTemplateDialog {
+    modalService = inject(ModalService);
+    ref = inject(ModalRef);
+    data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : []));
+    templateNameControl = new FormControl('', [Validators.required]);
+    onSave() {
+        if (this.templateNameControl.valid) {
+            this.ref.close({ title: this.templateNameControl.value?.trim() });
+        }
+    }
+    onCancel() {
+        this.ref.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AddTemplateDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: AddTemplateDialog, isStandalone: true, selector: "mt-add-template-dialog", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"modalService.contentClass\" class=\"p-4\">\n  <mt-text-field\n    [formControl]=\"templateNameControl\"\n    [label]=\"'notification.templateName' | transloco\"\n    [placeholder]=\"'notification.enterTemplateName' | transloco\"\n    [required]=\"true\"\n  />\n</div>\n\n<div [class]=\"modalService.footerClass\">\n  <mt-button\n    [label]=\"'notification.cancel' | transloco\"\n    severity=\"secondary\"\n    (onClick)=\"onCancel()\"\n  />\n  <mt-button\n    [label]=\"'notification.save' | transloco\"\n    [disabled]=\"!templateNameControl.valid\"\n    (onClick)=\"onSave()\"\n  />\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AddTemplateDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-add-template-dialog', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TranslocoModule,
+                        TextField,
+                        Button,
+                    ], template: "<div [class]=\"modalService.contentClass\" class=\"p-4\">\n  <mt-text-field\n    [formControl]=\"templateNameControl\"\n    [label]=\"'notification.templateName' | transloco\"\n    [placeholder]=\"'notification.enterTemplateName' | transloco\"\n    [required]=\"true\"\n  />\n</div>\n\n<div [class]=\"modalService.footerClass\">\n  <mt-button\n    [label]=\"'notification.cancel' | transloco\"\n    severity=\"secondary\"\n    (onClick)=\"onCancel()\"\n  />\n  <mt-button\n    [label]=\"'notification.save' | transloco\"\n    [disabled]=\"!templateNameControl.valid\"\n    (onClick)=\"onSave()\"\n  />\n</div>\n" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+
+// ============================================================================
+// Action Keys Enum
+// ============================================================================
+var NotificationActionKey;
+(function (NotificationActionKey) {
+    NotificationActionKey["GetEvents"] = "getEvents";
+    NotificationActionKey["GetReceivers"] = "getReceivers";
+    NotificationActionKey["GetProperties"] = "getProperties";
+    NotificationActionKey["AddReceivers"] = "addReceivers";
+    NotificationActionKey["DeleteReceiver"] = "deleteReceiver";
+    NotificationActionKey["AddTemplate"] = "addTemplate";
+    NotificationActionKey["UpdateTemplate"] = "updateTemplate";
+    NotificationActionKey["DeleteTemplate"] = "deleteTemplate";
+})(NotificationActionKey || (NotificationActionKey = {}));
+const CHANNEL_CONFIGS = [
+    {
+        key: 'email',
+        labelKey: 'notification.channel.email',
+        supportsBilingual: true,
+        bilingualOptional: true,
+        useRichEditor: true,
+        templateKey: 'emailTemplate',
+        translatableKey: 'emailContentTranslatable',
+    },
+    {
+        key: 'sms',
+        labelKey: 'notification.channel.sms',
+        supportsBilingual: false,
+        bilingualOptional: false,
+        useRichEditor: false,
+        templateKey: 'SmsTemplate',
+    },
+    {
+        key: 'app',
+        labelKey: 'notification.channel.app',
+        supportsBilingual: true,
+        bilingualOptional: false,
+        useRichEditor: true,
+        translatableKey: 'appTemplate',
+    },
+];
+/** Helper to get channel config by key */
+function getChannelConfig(key) {
+    return CHANNEL_CONFIGS.find((c) => c.key === key) ?? CHANNEL_CONFIGS[0];
+}
+/** Build form control name for a channel field */
+function getFormControlName(ch, type) {
+    if (type === 'single')
+        return ch.templateKey ?? null;
+    if (!ch.translatableKey)
+        return null;
+    return type === 'en'
+        ? `${ch.translatableKey}.en`
+        : `${ch.translatableKey}.ar`;
+}
+
+// ============================================================================
+// Module Configuration
+// ============================================================================
+class SetModuleInfo {
+    moduleType;
+    moduleId;
+    parentModuleType;
+    parentModuleId;
+    parentPath;
+    static type = '[Notification] Set Module Info';
+    constructor(moduleType, moduleId, parentModuleType, parentModuleId, parentPath) {
+        this.moduleType = moduleType;
+        this.moduleId = moduleId;
+        this.parentModuleType = parentModuleType;
+        this.parentModuleId = parentModuleId;
+        this.parentPath = parentPath;
+    }
+}
+// ============================================================================
+// Data Loading Actions
+// ============================================================================
+class GetEvents {
+    static type = '[Notification] Get Events';
+}
+class GetReceivers {
+    static type = '[Notification] Get Receivers';
+}
+class GetProperties {
+    isMultiLang;
+    static type = '[Notification] Get Properties';
+    constructor(isMultiLang) {
+        this.isMultiLang = isMultiLang;
+    }
+}
+// ============================================================================
+// Action Mode (Workflow)
+// ============================================================================
+class SetActionMode {
+    actionId;
+    static type = '[Notification] Set Action Mode';
+    constructor(actionId) {
+        this.actionId = actionId;
+    }
+}
+class GetActionReceivers {
+    actionId;
+    static type = '[Notification] Get Action Receivers';
+    constructor(actionId) {
+        this.actionId = actionId;
+    }
+}
+class GetActionProperties {
+    actionId;
+    isMultiLang;
+    static type = '[Notification] Get Action Properties';
+    constructor(actionId, isMultiLang) {
+        this.actionId = actionId;
+        this.isMultiLang = isMultiLang;
+    }
+}
+// ============================================================================
+// Selection Actions
+// ============================================================================
+class SelectEvent {
+    eventName;
+    static type = '[Notification] Select Event';
+    constructor(eventName) {
+        this.eventName = eventName;
+    }
+}
+class SelectTemplate {
+    templateId;
+    static type = '[Notification] Select Template';
+    constructor(templateId) {
+        this.templateId = templateId;
+    }
+}
+// ============================================================================
+// Receiver CRUD
+// ============================================================================
+class AddReceivers {
+    templateId;
+    payload;
+    static type = '[Notification] Add Receivers';
+    constructor(templateId, payload) {
+        this.templateId = templateId;
+        this.payload = payload;
+    }
+}
+class DeleteReceiver {
+    receiverId;
+    static type = '[Notification] Delete Receiver';
+    constructor(receiverId) {
+        this.receiverId = receiverId;
+    }
+}
+// ============================================================================
+// Template CRUD
+// ============================================================================
+class AddTemplate {
+    eventId;
+    payload;
+    static type = '[Notification] Add Template';
+    constructor(eventId, payload) {
+        this.eventId = eventId;
+        this.payload = payload;
+    }
+}
+class UpdateTemplate {
+    templateId;
+    payload;
+    static type = '[Notification] Update Template';
+    constructor(templateId, payload) {
+        this.templateId = templateId;
+        this.payload = payload;
+    }
+}
+class DeleteTemplate {
+    templateId;
+    static type = '[Notification] Delete Template';
+    constructor(templateId) {
+        this.templateId = templateId;
+    }
+}
+// ============================================================================
+// Reset State
+// ============================================================================
+class ResetNotificationState {
+    static type = '[Notification] Reset State';
+}
+
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+// Default State
+const DEFAULT_STATE = {
+    // Module configuration
+    moduleType: null,
+    moduleId: null,
+    parentModuleType: null,
+    parentModuleId: null,
+    parentPath: '',
+    // Action mode
+    isActionMode: false,
+    selectedActionId: null,
+    // Data collections
+    events: [],
+    templates: [], // Flattened templates
+    actions: [],
+    receivers: [],
+    propertyGroups: [],
+    // Selection state
+    selectedEventName: null,
+    selectedTemplateId: null,
+    // Loading state (from LoadingStateShape)
+    loadingActive: [],
+    errors: {},
+};
+// State Definition
+let NotificationState = class NotificationState extends CrudStateBase {
+    http = inject(HttpClient);
+    baseUrl = 'notifications';
+    // Selectors - Individual selectors for fine-grained reactivity
+    static getState(state) {
+        return state;
+    }
+    static getEvents(state) {
+        return state.events;
+    }
+    static getTemplates(state) {
+        return state.templates;
+    }
+    static getReceivers(state) {
+        return state.receivers;
+    }
+    static getPropertyGroups(state) {
+        return state.propertyGroups;
+    }
+    static getSelectedEventName(state) {
+        return state.selectedEventName;
+    }
+    static getSelectedTemplateId(state) {
+        return state.selectedTemplateId;
+    }
+    static getLoadingActive(state) {
+        return state.loadingActive;
+    }
+    static getErrors(state) {
+        return state.errors;
+    }
+    // Derived selectors
+    static getSelectedEvent(events, selectedEventName) {
+        return events.find((e) => e.eventName === selectedEventName) ?? null;
+    }
+    static getEventTemplates(templates, selectedEvent) {
+        if (!selectedEvent)
+            return [];
+        return templates.filter((t) => t.eventId === selectedEvent.id);
+    }
+    static getSelectedTemplate(templates, selectedTemplateId) {
+        return templates.find((t) => t.id === selectedTemplateId) ?? null;
+    }
+    static getAvailableReceivers(receivers, selectedTemplate) {
+        if (!selectedTemplate)
+            return receivers;
+        const templateReceivers = selectedTemplate.receivers ?? [];
+        const assignedIds = new Set(templateReceivers.map((r) => r.identifier));
+        return receivers.filter((r) => !assignedIds.has(String(r.id)));
+    }
+    // Helper Methods
+    /** API returns events with nested templates - we flatten for state */
+    flattenEventsResponse(eventsWithTemplates) {
+        const events = [];
+        const templates = [];
+        for (const event of eventsWithTemplates) {
+            const { templates: eventTemplates, ...eventData } = event;
+            events.push(eventData);
+            templates.push(...eventTemplates.map((t) => ({ ...t, eventId: event.id })));
+        }
+        return { events, templates };
+    }
+    flattenReceivers(groups) {
+        const result = [];
+        for (const group of groups) {
+            for (const item of group.items) {
+                if ('subGroupName' in item) {
+                    // Handle subgroups (role-based receivers)
+                    const subGroup = item;
+                    result.push(...subGroup.items.map((r) => ({
+                        ...r,
+                        title: `${subGroup.subGroupName} - ${r.title}`,
+                    })));
+                }
+                else {
+                    result.push(item);
+                }
+            }
+        }
+        return result;
+    }
+    // Module Configuration
+    setModuleInfo(ctx, action) {
+        let parentPath = '';
+        if (action.parentModuleType && action.parentModuleId) {
+            parentPath = `/${action.parentModuleType}/${action.parentModuleId}`;
+        }
+        else if (action.parentPath) {
+            parentPath = action.parentPath;
+        }
+        ctx.patchState({
+            moduleType: action.moduleType,
+            moduleId: action.moduleId,
+            parentModuleType: action.parentModuleType ?? null,
+            parentModuleId: action.parentModuleId ?? null,
+            parentPath,
+            isActionMode: action.moduleType === 'workflow',
+        });
+    }
+    resetState(ctx) {
+        ctx.setState(DEFAULT_STATE);
+    }
+    // Data Loading Actions (Normal Mode)
+    getEvents(ctx) {
+        const { moduleType, moduleId } = ctx.getState();
+        const req$ = this.http.get(`${this.baseUrl}/${moduleType}/${moduleId}/events`);
+        return this.load(ctx, {
+            key: NotificationActionKey.GetEvents,
+            request$: req$,
+            updateState: (_state, data) => {
+                const { events, templates } = this.flattenEventsResponse(data ?? []);
+                const firstTemplate = templates[0];
+                const firstEvent = events.find((e) => e.id === firstTemplate?.eventId);
+                return {
+                    events,
+                    templates,
+                    selectedEventName: firstEvent?.eventName ?? null,
+                    selectedTemplateId: firstTemplate?.id ?? null,
+                };
+            },
+        });
+    }
+    getReceivers(ctx) {
+        const { moduleType, moduleId } = ctx.getState();
+        const req$ = this.http.get(`${this.baseUrl}/${moduleType}/${moduleId}/receivers`);
+        return handleApiRequest({
+            ctx,
+            key: NotificationActionKey.GetReceivers,
+            request$: req$,
+            onSuccess: (response) => ({
+                receivers: this.flattenReceivers(response.data ?? []),
+            }),
+        });
+    }
+    getProperties(ctx, action) {
+        const { moduleType, moduleId } = ctx.getState();
+        const url = action.isMultiLang
+            ? `${this.baseUrl}/${moduleType}/${moduleId}/properties?IsMultiLanguageEnabled=true`
+            : `${this.baseUrl}/${moduleType}/${moduleId}/properties`;
+        const req$ = this.http.get(url);
+        return handleApiRequest({
+            ctx,
+            key: NotificationActionKey.GetProperties,
+            request$: req$,
+            onSuccess: (response) => ({
+                propertyGroups: response.data ?? [],
+            }),
+        });
+    }
+    // Action Mode (Workflow)
+    setActionMode(ctx, action) {
+        ctx.patchState({
+            selectedActionId: action.actionId,
+        });
+    }
+    getActionReceivers(ctx, action) {
+        const req$ = this.http.get(`${this.baseUrl}/action/${action.actionId}/receivers`);
+        return handleApiRequest({
+            ctx,
+            key: NotificationActionKey.GetReceivers,
+            request$: req$,
+            onSuccess: (response) => ({
+                receivers: this.flattenReceivers(response.data ?? []),
+            }),
+        });
+    }
+    getActionProperties(ctx, action) {
+        const url = action.isMultiLang
+            ? `${this.baseUrl}/action/${action.actionId}/properties?IsMultiLanguageEnabled=true`
+            : `${this.baseUrl}/action/${action.actionId}/properties`;
+        const req$ = this.http.get(url);
+        return handleApiRequest({
+            ctx,
+            key: NotificationActionKey.GetProperties,
+            request$: req$,
+            onSuccess: (response) => ({
+                propertyGroups: response.data ?? [],
+            }),
+        });
+    }
+    // Selection Actions
+    selectEvent(ctx, action) {
+        const state = ctx.getState();
+        const event = state.events.find((e) => e.eventName === action.eventName);
+        const eventTemplates = state.templates.filter((t) => t.eventId === event?.id);
+        ctx.patchState({
+            selectedEventName: action.eventName,
+            selectedTemplateId: eventTemplates[0]?.id ?? null,
+        });
+    }
+    selectTemplate(ctx, action) {
+        ctx.patchState({ selectedTemplateId: action.templateId });
+    }
+    // Receiver CRUD
+    addReceivers(ctx, action) {
+        const req$ = this.http.post(`${this.baseUrl}/templates/${action.templateId}`, action.payload);
+        return handleApiRequest({
+            ctx,
+            key: NotificationActionKey.AddReceivers,
+            request$: req$,
+            onSuccess: (response, state) => {
+                const newReceivers = response.data ?? [];
+                const templates = this.adapter.updateOne(state.templates, action.templateId, {
+                    receivers: [
+                        ...(state.templates.find((t) => t.id === action.templateId)
+                            ?.receivers ?? []),
+                        ...newReceivers,
+                    ],
+                }, 'id');
+                return { templates };
+            },
+        });
+    }
+    deleteReceiver(ctx, action) {
+        const state = ctx.getState();
+        const template = this.getSelectedTemplate(state);
+        if (!template) {
+            return;
+        }
+        const req$ = this.http.delete(`${this.baseUrl}/receivers/${action.receiverId}`);
+        return handleApiRequest({
+            ctx,
+            key: NotificationActionKey.DeleteReceiver,
+            request$: req$,
+            onSuccess: (_, currentState) => {
+                const templates = this.adapter.updateOne(currentState.templates, template.id, {
+                    receivers: template.receivers.filter((r) => r.id !== action.receiverId),
+                }, 'id');
+                return { templates };
+            },
+        });
+    }
+    // Template CRUD
+    addTemplate(ctx, action) {
+        const req$ = this.http.post(`${this.baseUrl}/events/${action.eventId}`, action.payload);
+        return handleApiRequest({
+            ctx,
+            key: NotificationActionKey.AddTemplate,
+            request$: req$,
+            onSuccess: (response, state) => {
+                const newTemplate = response.data;
+                if (!newTemplate)
+                    return {};
+                return {
+                    templates: this.adapter.addOne(state.templates, {
+                        ...newTemplate,
+                        eventId: action.eventId,
+                    }),
+                    selectedTemplateId: newTemplate.id,
+                };
+            },
+        });
+    }
+    updateTemplate(ctx, action) {
+        const req$ = this.http.put(`${this.baseUrl}/templates/${action.templateId}`, action.payload);
+        return handleApiRequest({
+            ctx,
+            key: NotificationActionKey.UpdateTemplate,
+            request$: req$,
+            onSuccess: (response, state) => {
+                const updatedTemplate = response.data;
+                if (!updatedTemplate)
+                    return {};
+                // Preserve existing fields that API may not return or shouldn't change
+                const existingTemplate = state.templates.find((t) => t.id === action.templateId);
+                if (!existingTemplate)
+                    return {};
+                // Only update title and content fields, preserve channel/eventId/receivers
+                const templates = this.adapter.upsertOne(state.templates, {
+                    ...existingTemplate,
+                    title: updatedTemplate.title,
+                    emailTemplate: updatedTemplate.emailTemplate,
+                    emailContentTranslatable: updatedTemplate.emailContentTranslatable,
+                    smsTemplate: updatedTemplate.smsTemplate,
+                    appTemplate: updatedTemplate.appTemplate,
+                }, 'id');
+                return { templates };
+            },
+        });
+    }
+    deleteTemplate(ctx, action) {
+        const req$ = this.http.delete(`${this.baseUrl}/templates/${action.templateId}`);
+        return handleApiRequest({
+            ctx,
+            key: NotificationActionKey.DeleteTemplate,
+            request$: req$,
+            onSuccess: (_, state) => {
+                const templates = this.adapter.removeOne(state.templates, action.templateId, 'id');
+                // Select first template of current event after deletion
+                const currentEvent = state.events.find((e) => e.eventName === state.selectedEventName);
+                const eventTemplates = templates.filter((t) => t.eventId === currentEvent?.id);
+                const systemTemplate = eventTemplates.find((t) => t.isSystem);
+                return {
+                    templates,
+                    selectedTemplateId: systemTemplate?.id ?? eventTemplates[0]?.id ?? null,
+                };
+            },
+        });
+    }
+    // Private Helpers
+    getSelectedTemplate(state) {
+        return (state.templates.find((t) => t.id === state.selectedTemplateId) ?? null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NotificationState, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NotificationState });
+};
+__decorate([
+    Action(SetModuleInfo)
+], NotificationState.prototype, "setModuleInfo", null);
+__decorate([
+    Action(ResetNotificationState)
+], NotificationState.prototype, "resetState", null);
+__decorate([
+    Action(GetEvents)
+], NotificationState.prototype, "getEvents", null);
+__decorate([
+    Action(GetReceivers)
+], NotificationState.prototype, "getReceivers", null);
+__decorate([
+    Action(GetProperties)
+], NotificationState.prototype, "getProperties", null);
+__decorate([
+    Action(SetActionMode)
+], NotificationState.prototype, "setActionMode", null);
+__decorate([
+    Action(GetActionReceivers)
+], NotificationState.prototype, "getActionReceivers", null);
+__decorate([
+    Action(GetActionProperties)
+], NotificationState.prototype, "getActionProperties", null);
+__decorate([
+    Action(SelectEvent)
+], NotificationState.prototype, "selectEvent", null);
+__decorate([
+    Action(SelectTemplate)
+], NotificationState.prototype, "selectTemplate", null);
+__decorate([
+    Action(AddReceivers)
+], NotificationState.prototype, "addReceivers", null);
+__decorate([
+    Action(DeleteReceiver)
+], NotificationState.prototype, "deleteReceiver", null);
+__decorate([
+    Action(AddTemplate)
+], NotificationState.prototype, "addTemplate", null);
+__decorate([
+    Action(UpdateTemplate)
+], NotificationState.prototype, "updateTemplate", null);
+__decorate([
+    Action(DeleteTemplate)
+], NotificationState.prototype, "deleteTemplate", null);
+__decorate([
+    Selector()
+], NotificationState, "getState", null);
+__decorate([
+    Selector()
+], NotificationState, "getEvents", null);
+__decorate([
+    Selector()
+], NotificationState, "getTemplates", null);
+__decorate([
+    Selector()
+], NotificationState, "getReceivers", null);
+__decorate([
+    Selector()
+], NotificationState, "getPropertyGroups", null);
+__decorate([
+    Selector()
+], NotificationState, "getSelectedEventName", null);
+__decorate([
+    Selector()
+], NotificationState, "getSelectedTemplateId", null);
+__decorate([
+    Selector()
+], NotificationState, "getLoadingActive", null);
+__decorate([
+    Selector()
+], NotificationState, "getErrors", null);
+__decorate([
+    Selector([
+        NotificationState.getEvents,
+        NotificationState.getSelectedEventName,
+    ])
+], NotificationState, "getSelectedEvent", null);
+__decorate([
+    Selector([
+        NotificationState.getTemplates,
+        NotificationState.getSelectedEvent,
+    ])
+], NotificationState, "getEventTemplates", null);
+__decorate([
+    Selector([
+        NotificationState.getTemplates,
+        NotificationState.getSelectedTemplateId,
+    ])
+], NotificationState, "getSelectedTemplate", null);
+__decorate([
+    Selector([
+        NotificationState.getReceivers,
+        NotificationState.getSelectedTemplate,
+    ])
+], NotificationState, "getAvailableReceivers", null);
+NotificationState = __decorate([
+    State({
+        name: 'notification',
+        defaults: DEFAULT_STATE,
+    })
+], NotificationState);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NotificationState, decorators: [{
+            type: Injectable
+        }], propDecorators: { setModuleInfo: [], resetState: [], getEvents: [], getReceivers: [], getProperties: [], setActionMode: [], getActionReceivers: [], getActionProperties: [], selectEvent: [], selectTemplate: [], addReceivers: [], deleteReceiver: [], addTemplate: [], updateTemplate: [], deleteTemplate: [] } });
+
+class NotificationFacade extends BaseFacade {
+    store = inject(Store);
+    // Selectors - Direct signals from state (fine-grained reactivity)
+    stateSignal = select(NotificationState.getState);
+    // Data selectors
+    events = select(NotificationState.getEvents);
+    templates = select(NotificationState.getEventTemplates);
+    receivers = select(NotificationState.getReceivers);
+    propertyGroups = select(NotificationState.getPropertyGroups);
+    // Selection selectors
+    selectedEventName = select(NotificationState.getSelectedEventName);
+    selectedTemplateId = select(NotificationState.getSelectedTemplateId);
+    selectedEvent = select(NotificationState.getSelectedEvent);
+    selectedTemplate = select(NotificationState.getSelectedTemplate);
+    availableReceivers = select(NotificationState.getAvailableReceivers);
+    // Required by BaseFacade
+    state() {
+        return this.stateSignal;
+    }
+    // Query Pattern (data + loading + error combined)
+    eventsQuery = this.query(NotificationActionKey.GetEvents, (state) => state.events);
+    receiversQuery = this.query(NotificationActionKey.GetReceivers, (state) => state.receivers);
+    propertyGroupsQuery = this.query(NotificationActionKey.GetProperties, (state) => state.propertyGroups);
+    // Loading/Error for CRUD operations (not covered by queries)
+    isAddingReceivers = this.loading(NotificationActionKey.AddReceivers);
+    isDeletingReceiver = this.loading(NotificationActionKey.DeleteReceiver);
+    isAddingTemplate = this.loading(NotificationActionKey.AddTemplate);
+    isUpdatingTemplate = this.loading(NotificationActionKey.UpdateTemplate);
+    isDeletingTemplate = this.loading(NotificationActionKey.DeleteTemplate);
+    // Action Dispatchers - Configuration
+    setModuleInfo(moduleType, moduleId, parentModuleType, parentModuleId, parentPath) {
+        return this.store.dispatch(new SetModuleInfo(moduleType, moduleId, parentModuleType, parentModuleId, parentPath));
+    }
+    resetState() {
+        return this.store.dispatch(new ResetNotificationState());
+    }
+    // Action Dispatchers - Data Loading
+    loadEvents() {
+        return this.store.dispatch(new GetEvents());
+    }
+    loadReceivers() {
+        return this.store.dispatch(new GetReceivers());
+    }
+    loadProperties(isMultiLang) {
+        return this.store.dispatch(new GetProperties(isMultiLang));
+    }
+    // Action Dispatchers - Action Mode (Workflow)
+    setActionMode(actionId) {
+        return this.store.dispatch(new SetActionMode(actionId));
+    }
+    loadActionReceivers(actionId) {
+        return this.store.dispatch(new GetActionReceivers(actionId));
+    }
+    loadActionProperties(actionId, isMultiLang) {
+        return this.store.dispatch(new GetActionProperties(actionId, isMultiLang));
+    }
+    // Action Dispatchers - Selection
+    selectEvent(eventName) {
+        return this.store.dispatch(new SelectEvent(eventName));
+    }
+    selectTemplate(templateId) {
+        return this.store.dispatch(new SelectTemplate(templateId));
+    }
+    // Action Dispatchers - Receiver CRUD
+    addReceivers(templateId, payload) {
+        return this.store.dispatch(new AddReceivers(templateId, payload));
+    }
+    deleteReceiver(receiverId) {
+        return this.store.dispatch(new DeleteReceiver(receiverId));
+    }
+    // Action Dispatchers - Template CRUD
+    addTemplate(eventId, payload) {
+        return this.store.dispatch(new AddTemplate(eventId, payload));
+    }
+    updateTemplate(templateId, payload) {
+        return this.store.dispatch(new UpdateTemplate(templateId, payload));
+    }
+    deleteTemplate(templateId) {
+        return this.store.dispatch(new DeleteTemplate(templateId));
+    }
+    /**
+     * Load all data for normal mode (non-workflow)
+     */
+    loadAllData(isMultiLang = true) {
+        this.loadEvents();
+        this.loadReceivers();
+        this.loadProperties(isMultiLang);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NotificationFacade, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NotificationFacade, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NotificationFacade, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class NotificationTemplate {
+    facade = inject(NotificationFacade);
+    transloco = inject(TranslocoService);
+    confirmationService = inject(ConfirmationService);
+    modalService = inject(ModalService);
+    // ============================================================================
+    // Queries from Facade
+    // ============================================================================
+    eventsQuery = this.facade.eventsQuery;
+    propertyGroupsQuery = this.facade.propertyGroupsQuery;
+    receiversQuery = this.facade.receiversQuery;
+    // ============================================================================
+    // Derived State from Facade
+    // ============================================================================
+    selectedEventName = this.facade.selectedEventName;
+    selectedTemplateId = this.facade.selectedTemplateId;
+    selectedEvent = this.facade.selectedEvent;
+    selectedTemplate = this.facade.selectedTemplate;
+    templates = this.facade.templates;
+    availableReceivers = this.facade.availableReceivers;
+    // Loading States
+    isUpdatingTemplate = this.facade.isUpdatingTemplate;
+    isDeletingTemplate = this.facade.isDeletingTemplate;
+    isAddingTemplate = this.facade.isAddingTemplate;
+    // ============================================================================
+    // Local State
+    // ============================================================================
+    deletingReceiverIds = signal([], ...(ngDevMode ? [{ debugName: "deletingReceiverIds" }] : []));
+    // ============================================================================
+    // Form - Dynamic controls based on CHANNEL_CONFIGS
+    // ============================================================================
+    form = this.buildForm();
+    propertyPickerControl = new FormControl(null);
+    buildForm() {
+        const fc = (v = '') => new FormControl(v, { nonNullable: true });
+        const controls = {
+            event: new FormControl(null),
+            title: fc(),
+            channel: new FormControl('email', {
+                nonNullable: true,
+            }),
+        };
+        for (const ch of CHANNEL_CONFIGS) {
+            if (ch.templateKey)
+                controls[ch.templateKey] = fc();
+            if (ch.translatableKey) {
+                // Nested FormGroup to match payload structure { en: '', ar: '' }
+                controls[ch.translatableKey] = new FormGroup({
+                    en: fc(),
+                    ar: fc(),
+                });
+            }
+            if (ch.bilingualOptional) {
+                controls[`${ch.key}Bilingual`] = new FormControl(false, {
+                    nonNullable: true,
+                });
+            }
+        }
+        return new FormGroup(controls);
+    }
+    // ============================================================================
+    // Computed
+    // ============================================================================
+    channelConfigs = CHANNEL_CONFIGS;
+    /** Check if channel should show bilingual fields - reads from form */
+    isBilingual(ch) {
+        if (!ch.supportsBilingual)
+            return false;
+        if (!ch.bilingualOptional)
+            return true; // forced bilingual (app)
+        return this.form.controls[`${ch.key}Bilingual`]?.value ?? false;
+    }
+    channelOptions = computed(() => CHANNEL_CONFIGS.map((c) => ({
+        ...c,
+        title: this.transloco.translate(c.labelKey),
+    })), ...(ngDevMode ? [{ debugName: "channelOptions" }] : []));
+    templateTabs = computed(() => this.templates().map((t) => ({
+        label: t.title,
+        value: t.id,
+        isSystem: t.isSystem,
+    })), ...(ngDevMode ? [{ debugName: "templateTabs" }] : []));
+    isFormInvalid = computed(() => !this.form.controls['title'].value?.trim(), ...(ngDevMode ? [{ debugName: "isFormInvalid" }] : []));
+    constructor() {
+        effect(() => {
+            const eventName = this.selectedEventName();
+            if (eventName && this.form.controls['event'].value !== eventName) {
+                this.form.controls['event'].setValue(eventName, { emitEvent: false });
+            }
+        });
+        effect(() => {
+            this.selectedTemplateId(); // depend on selected template id
+            const template = untracked(this.selectedTemplate);
+            if (template)
+                this.patchForm(template);
+        });
+    }
+    // ============================================================================
+    // Event Handlers
+    // ============================================================================
+    onEventChange(eventName) {
+        if (eventName)
+            this.facade.selectEvent(eventName);
+    }
+    onTemplateTabChange(templateId) {
+        this.facade.selectTemplate(templateId);
+    }
+    // Channel is fixed per template - set on creation only
+    onAddProperty(propertyKey) {
+        if (!propertyKey)
+            return;
+        const tag = `{{${propertyKey}}}`;
+        const ch = getChannelConfig(this.form.controls['channel'].value);
+        if (this.isBilingual(ch) && ch.translatableKey) {
+            const group = this.form.get(ch.translatableKey);
+            if (group) {
+                const enCtrl = group.get('en');
+                const arCtrl = group.get('ar');
+                enCtrl?.setValue(`${enCtrl.value ?? ''} ${tag}`);
+                arCtrl?.setValue(`${arCtrl.value ?? ''} ${tag}`);
+            }
+        }
+        else if (ch.templateKey) {
+            this.appendToControl(ch.templateKey, tag);
+        }
+        setTimeout(() => {
+            this.propertyPickerControl.reset();
+        }, 0);
+    }
+    onAddReceiver(receiverId) {
+        const template = this.selectedTemplate();
+        if (!receiverId || !template)
+            return;
+        const selectedReceiver = this.availableReceivers().find((r) => r.id === receiverId);
+        if (!selectedReceiver)
+            return;
+        this.facade.addReceivers(template.id, { receivers: [selectedReceiver] });
+    }
+    onDeleteReceiver(receiver) {
+        this.confirmationService.confirmDelete({
+            type: 'dialog',
+            accept: () => {
+                this.deletingReceiverIds.update((ids) => [...ids, receiver.id]);
+                this.facade.deleteReceiver(receiver.id).subscribe({
+                    complete: () => {
+                        this.deletingReceiverIds.update((ids) => ids.filter((id) => id !== receiver.id));
+                    },
+                    error: () => {
+                        this.deletingReceiverIds.update((ids) => ids.filter((id) => id !== receiver.id));
+                    },
+                });
+            },
+        });
+    }
+    isReceiverDeleting(receiverId) {
+        return this.deletingReceiverIds().includes(receiverId);
+    }
+    onSaveTemplate() {
+        const template = this.selectedTemplate();
+        if (!template || this.isFormInvalid()) {
+            this.form.markAllAsTouched();
+            return;
+        }
+        // Build payload dynamically from all channel controls
+        const payload = this.buildUpdatePayload(template);
+        this.facade.updateTemplate(template.id, payload);
+    }
+    onDeleteTemplate() {
+        const template = this.selectedTemplate();
+        if (!template || template.isSystem)
+            return;
+        this.confirmationService.confirm({
+            type: 'dialog',
+            header: this.transloco.translate('notification.deleteConfirmation'),
+            message: this.transloco.translate('notification.deleteTemplateMessage'),
+            icon: 'general.trash-01',
+            acceptButton: { severity: 'danger' },
+            accept: () => this.facade.deleteTemplate(template.id),
+        });
+    }
+    onAddTemplateClick() {
+        const event = this.selectedEvent();
+        if (!event)
+            return;
+        const ref = this.modalService.openModal(AddTemplateDialog, 'dialog', {
+            header: this.transloco.translate('notification.addTemplate'),
+            styleClass: '!w-[25rem]',
+        });
+        ref.onClose.subscribe((result) => {
+            if (result?.title) {
+                this.facade.addTemplate(event.id, {
+                    title: result.title,
+                    channel: this.form.controls['channel'].value,
+                });
+            }
+        });
+    }
+    // ============================================================================
+    // Private Methods
+    // ============================================================================
+    appendToControl(key, value) {
+        const ctrl = this.form.controls[key];
+        ctrl?.setValue(`${ctrl.value ?? ''} ${value}`);
+    }
+    patchForm(template) {
+        const channel = template.channel || 'email';
+        this.form.patchValue({
+            title: template.title,
+            channel: channel,
+            // Set email bilingual based on whether translatable content exists
+            emailBilingual: !!template.emailContentTranslatable?.en,
+        });
+        // Patch all channel controls dynamically
+        const t = template;
+        for (const ch of CHANNEL_CONFIGS) {
+            if (ch.templateKey) {
+                this.form
+                    .get(ch.templateKey)
+                    ?.setValue(t[ch.templateKey] ?? '');
+            }
+            if (ch.translatableKey) {
+                const trans = t[ch.translatableKey] ?? {};
+                this.form.get(ch.translatableKey)?.patchValue({
+                    en: trans.en ?? '',
+                    ar: trans.ar ?? '',
+                });
+            }
+        }
+    }
+    buildUpdatePayload(template) {
+        const v = this.form.getRawValue();
+        return {
+            title: v['title'] || template.title,
+            ...this.extractChannelPayload(v),
+        };
+    }
+    extractChannelPayload(formValue) {
+        const payload = {};
+        for (const ch of CHANNEL_CONFIGS) {
+            if (ch.templateKey && formValue[ch.templateKey] !== undefined) {
+                payload[ch.templateKey] = formValue[ch.templateKey] || '';
+            }
+            if (ch.translatableKey && formValue[ch.translatableKey] !== undefined) {
+                payload[ch.translatableKey] = formValue[ch.translatableKey];
+            }
+        }
+        return payload;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NotificationTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: NotificationTemplate, isStandalone: true, selector: "mt-notification-template", ngImport: i0, template: "<div class=\"flex flex-col gap-4\" [formGroup]=\"form\">\n  <!-- Loading State -->\n  @if (eventsQuery.isPending()) {\n    <div class=\"flex flex-col items-center justify-center py-12\">\n      <p-skeleton width=\"100%\" height=\"200px\" />\n    </div>\n  } @else {\n    <!-- Events Selector -->\n    <div class=\"w-1/2\">\n      <mt-select-field\n        formControlName=\"event\"\n        [options]=\"eventsQuery.data() ?? []\"\n        [optionLabel]=\"'title'\"\n        [optionValue]=\"'eventName'\"\n        [label]=\"'notification.events' | transloco\"\n        [placeholder]=\"'notification.selectEvent' | transloco\"\n        [required]=\"true\"\n        [filter]=\"false\"\n        (onChange)=\"onEventChange($event)\"\n      />\n    </div>\n\n    @if ((eventsQuery.data() ?? []).length === 0) {\n      <!-- Empty State -->\n      <mt-card>\n        <div\n          class=\"flex flex-col items-center justify-center py-12 text-slate-500\"\n        >\n          <mt-icon name=\"alert.alert-circle\" class=\"mb-2 h-12 w-12\" />\n          <p>{{ \"notification.noEventsFound\" | transloco }}</p>\n        </div>\n      </mt-card>\n    } @else if (selectedEvent()) {\n      <!-- Template Tabs -->\n      <div class=\"flex items-center justify-between\">\n        <mt-tabs\n          [active]=\"selectedTemplateId()\"\n          [options]=\"templateTabs()\"\n          (activeChange)=\"onTemplateTabChange($event)\"\n        />\n        <mt-button\n          icon=\"general.plus\"\n          [label]=\"'notification.newNotification' | transloco\"\n          size=\"small\"\n          [loading]=\"isAddingTemplate()\"\n          (onClick)=\"onAddTemplateClick()\"\n        />\n      </div>\n\n      <!-- Template Content -->\n      @if (selectedTemplate(); as template) {\n        <div class=\"flex flex-col gap-4\">\n          <!-- Name -->\n          <div class=\"grid grid-cols-2 gap-4\">\n            <mt-text-field\n              formControlName=\"title\"\n              [label]=\"'notification.name' | transloco\"\n              [placeholder]=\"'notification.enterName' | transloco\"\n              [required]=\"true\"\n            />\n          </div>\n\n          <!-- Channel & Properties Picker Row -->\n          <div class=\"grid grid-cols-2 gap-4\">\n            <mt-select-field\n              formControlName=\"channel\"\n              [options]=\"channelOptions()\"\n              [optionLabel]=\"'title'\"\n              [optionValue]=\"'key'\"\n              [label]=\"'notification.channel.label' | transloco\"\n              [placeholder]=\"'notification.selectChannel' | transloco\"\n              [required]=\"true\"\n              [filter]=\"false\"\n              [disabled]=\"true\"\n            />\n            <mt-select-field\n              [options]=\"propertyGroupsQuery.data() ?? []\"\n              [optionLabel]=\"'name'\"\n              [optionValue]=\"'key'\"\n              [group]=\"true\"\n              [optionGroupLabel]=\"'groupName'\"\n              [optionGroupChildren]=\"'properties'\"\n              [label]=\"'notification.propertiesList' | transloco\"\n              [placeholder]=\"'notification.selectProperty' | transloco\"\n              [hasPlaceholderPrefix]=\"false\"\n              [filter]=\"true\"\n              [filterBy]=\"'name'\"\n              [loading]=\"propertyGroupsQuery.isPending()\"\n              [formControl]=\"propertyPickerControl\"\n              (onChange)=\"onAddProperty($event)\"\n            />\n          </div>\n\n          <!-- Channel Content Editors -->\n          @for (ch of channelConfigs; track ch.key) {\n            @if (form.controls[\"channel\"].value === ch.key) {\n              <!-- Bilingual Content Fields -->\n              @if (isBilingual(ch) && ch.translatableKey) {\n                <ng-container [formGroupName]=\"ch.translatableKey\">\n                  @if (ch.useRichEditor) {\n                    <mt-editor-field\n                      formControlName=\"en\"\n                      [label]=\"'notification.english' | transloco\"\n                      dir=\"ltr\"\n                    />\n                    <mt-editor-field\n                      formControlName=\"ar\"\n                      [label]=\"'notification.arabic' | transloco\"\n                      dir=\"rtl\"\n                    />\n                  } @else {\n                    <mt-textarea-field\n                      formControlName=\"en\"\n                      [label]=\"'notification.english' | transloco\"\n                      [rows]=\"6\"\n                      dir=\"ltr\"\n                    />\n                    <mt-textarea-field\n                      formControlName=\"ar\"\n                      [label]=\"'notification.arabic' | transloco\"\n                      [rows]=\"6\"\n                      dir=\"rtl\"\n                    />\n                  }\n                </ng-container>\n              } @else if (ch.templateKey) {\n                <!-- Non-Bilingual Content Field -->\n                @if (ch.useRichEditor) {\n                  <mt-editor-field\n                    [formControlName]=\"ch.templateKey\"\n                    [label]=\"'notification.notificationBody' | transloco\"\n                  />\n                } @else {\n                  <mt-textarea-field\n                    [formControlName]=\"ch.templateKey\"\n                    [label]=\"'notification.notificationBody' | transloco\"\n                    [rows]=\"6\"\n                  />\n                }\n              }\n\n              <!-- Bilingual Toggle -->\n              @if (ch.bilingualOptional) {\n                <mt-toggle-field\n                  [formControlName]=\"ch.key + 'Bilingual'\"\n                  [label]=\"'notification.bilingual' | transloco\"\n                />\n              }\n            }\n          }\n\n          <!-- Receivers -->\n          <div class=\"grid grid-cols-2 gap-4\">\n            <mt-select-field\n              [options]=\"availableReceivers()\"\n              [optionLabel]=\"'title'\"\n              [optionValue]=\"'id'\"\n              [label]=\"'notification.receivers' | transloco\"\n              [placeholder]=\"'notification.selectReceiver' | transloco\"\n              [filter]=\"true\"\n              [loading]=\"receiversQuery.isPending()\"\n              (onChange)=\"onAddReceiver($event)\"\n            />\n          </div>\n          @if ((template.receivers ?? []).length > 0) {\n            <div class=\"grid grid-cols-2 gap-4\">\n              <div class=\"flex flex-col gap-2\">\n                @for (receiver of template.receivers; track receiver.id) {\n                  <div\n                    class=\"flex items-center justify-between rounded-lg border border-surface bg-surface-50 p-1 transition-colors hover:bg-surface-100\"\n                  >\n                    <div class=\"flex items-center gap-3\">\n                      <mt-avatar\n                        icon=\"user.user-01\"\n                        shape=\"square\"\n                        size=\"small\"\n                      />\n                      <span class=\"font-medium\">{{ receiver.title }}</span>\n                    </div>\n                    @if (!receiver.isSystem) {\n                      <mt-button\n                        icon=\"general.trash-01\"\n                        severity=\"danger\"\n                        [text]=\"true\"\n                        [loading]=\"isReceiverDeleting(receiver.id)\"\n                        (onClick)=\"onDeleteReceiver(receiver)\"\n                      />\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          }\n\n          <!-- Actions -->\n          <div class=\"flex justify-end gap-2 pt-4\">\n            @if (!template.isSystem) {\n              <mt-button\n                [label]=\"'notification.delete' | transloco\"\n                severity=\"danger\"\n                [loading]=\"isDeletingTemplate()\"\n                [disabled]=\"isUpdatingTemplate()\"\n                (onClick)=\"onDeleteTemplate()\"\n              />\n            }\n            <mt-button\n              [label]=\"'notification.save' | transloco\"\n              [loading]=\"isUpdatingTemplate()\"\n              [disabled]=\"isDeletingTemplate() || isFormInvalid()\"\n              (onClick)=\"onSaveTemplate()\"\n            />\n          </div>\n        </div>\n      }\n    }\n  }\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required"] }, { kind: "component", type: EditorField, selector: "mt-editor-field", inputs: ["label", "placeholder", "readonly", "theme", "height", "modules", "required"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NotificationTemplate, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-notification-template', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TranslocoModule,
+                        Card,
+                        Button,
+                        SelectField,
+                        TextField,
+                        TextareaField,
+                        EditorField,
+                        ToggleField,
+                        Tabs,
+                        Icon,
+                        Skeleton,
+                        Avatar,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-4\" [formGroup]=\"form\">\n  <!-- Loading State -->\n  @if (eventsQuery.isPending()) {\n    <div class=\"flex flex-col items-center justify-center py-12\">\n      <p-skeleton width=\"100%\" height=\"200px\" />\n    </div>\n  } @else {\n    <!-- Events Selector -->\n    <div class=\"w-1/2\">\n      <mt-select-field\n        formControlName=\"event\"\n        [options]=\"eventsQuery.data() ?? []\"\n        [optionLabel]=\"'title'\"\n        [optionValue]=\"'eventName'\"\n        [label]=\"'notification.events' | transloco\"\n        [placeholder]=\"'notification.selectEvent' | transloco\"\n        [required]=\"true\"\n        [filter]=\"false\"\n        (onChange)=\"onEventChange($event)\"\n      />\n    </div>\n\n    @if ((eventsQuery.data() ?? []).length === 0) {\n      <!-- Empty State -->\n      <mt-card>\n        <div\n          class=\"flex flex-col items-center justify-center py-12 text-slate-500\"\n        >\n          <mt-icon name=\"alert.alert-circle\" class=\"mb-2 h-12 w-12\" />\n          <p>{{ \"notification.noEventsFound\" | transloco }}</p>\n        </div>\n      </mt-card>\n    } @else if (selectedEvent()) {\n      <!-- Template Tabs -->\n      <div class=\"flex items-center justify-between\">\n        <mt-tabs\n          [active]=\"selectedTemplateId()\"\n          [options]=\"templateTabs()\"\n          (activeChange)=\"onTemplateTabChange($event)\"\n        />\n        <mt-button\n          icon=\"general.plus\"\n          [label]=\"'notification.newNotification' | transloco\"\n          size=\"small\"\n          [loading]=\"isAddingTemplate()\"\n          (onClick)=\"onAddTemplateClick()\"\n        />\n      </div>\n\n      <!-- Template Content -->\n      @if (selectedTemplate(); as template) {\n        <div class=\"flex flex-col gap-4\">\n          <!-- Name -->\n          <div class=\"grid grid-cols-2 gap-4\">\n            <mt-text-field\n              formControlName=\"title\"\n              [label]=\"'notification.name' | transloco\"\n              [placeholder]=\"'notification.enterName' | transloco\"\n              [required]=\"true\"\n            />\n          </div>\n\n          <!-- Channel & Properties Picker Row -->\n          <div class=\"grid grid-cols-2 gap-4\">\n            <mt-select-field\n              formControlName=\"channel\"\n              [options]=\"channelOptions()\"\n              [optionLabel]=\"'title'\"\n              [optionValue]=\"'key'\"\n              [label]=\"'notification.channel.label' | transloco\"\n              [placeholder]=\"'notification.selectChannel' | transloco\"\n              [required]=\"true\"\n              [filter]=\"false\"\n              [disabled]=\"true\"\n            />\n            <mt-select-field\n              [options]=\"propertyGroupsQuery.data() ?? []\"\n              [optionLabel]=\"'name'\"\n              [optionValue]=\"'key'\"\n              [group]=\"true\"\n              [optionGroupLabel]=\"'groupName'\"\n              [optionGroupChildren]=\"'properties'\"\n              [label]=\"'notification.propertiesList' | transloco\"\n              [placeholder]=\"'notification.selectProperty' | transloco\"\n              [hasPlaceholderPrefix]=\"false\"\n              [filter]=\"true\"\n              [filterBy]=\"'name'\"\n              [loading]=\"propertyGroupsQuery.isPending()\"\n              [formControl]=\"propertyPickerControl\"\n              (onChange)=\"onAddProperty($event)\"\n            />\n          </div>\n\n          <!-- Channel Content Editors -->\n          @for (ch of channelConfigs; track ch.key) {\n            @if (form.controls[\"channel\"].value === ch.key) {\n              <!-- Bilingual Content Fields -->\n              @if (isBilingual(ch) && ch.translatableKey) {\n                <ng-container [formGroupName]=\"ch.translatableKey\">\n                  @if (ch.useRichEditor) {\n                    <mt-editor-field\n                      formControlName=\"en\"\n                      [label]=\"'notification.english' | transloco\"\n                      dir=\"ltr\"\n                    />\n                    <mt-editor-field\n                      formControlName=\"ar\"\n                      [label]=\"'notification.arabic' | transloco\"\n                      dir=\"rtl\"\n                    />\n                  } @else {\n                    <mt-textarea-field\n                      formControlName=\"en\"\n                      [label]=\"'notification.english' | transloco\"\n                      [rows]=\"6\"\n                      dir=\"ltr\"\n                    />\n                    <mt-textarea-field\n                      formControlName=\"ar\"\n                      [label]=\"'notification.arabic' | transloco\"\n                      [rows]=\"6\"\n                      dir=\"rtl\"\n                    />\n                  }\n                </ng-container>\n              } @else if (ch.templateKey) {\n                <!-- Non-Bilingual Content Field -->\n                @if (ch.useRichEditor) {\n                  <mt-editor-field\n                    [formControlName]=\"ch.templateKey\"\n                    [label]=\"'notification.notificationBody' | transloco\"\n                  />\n                } @else {\n                  <mt-textarea-field\n                    [formControlName]=\"ch.templateKey\"\n                    [label]=\"'notification.notificationBody' | transloco\"\n                    [rows]=\"6\"\n                  />\n                }\n              }\n\n              <!-- Bilingual Toggle -->\n              @if (ch.bilingualOptional) {\n                <mt-toggle-field\n                  [formControlName]=\"ch.key + 'Bilingual'\"\n                  [label]=\"'notification.bilingual' | transloco\"\n                />\n              }\n            }\n          }\n\n          <!-- Receivers -->\n          <div class=\"grid grid-cols-2 gap-4\">\n            <mt-select-field\n              [options]=\"availableReceivers()\"\n              [optionLabel]=\"'title'\"\n              [optionValue]=\"'id'\"\n              [label]=\"'notification.receivers' | transloco\"\n              [placeholder]=\"'notification.selectReceiver' | transloco\"\n              [filter]=\"true\"\n              [loading]=\"receiversQuery.isPending()\"\n              (onChange)=\"onAddReceiver($event)\"\n            />\n          </div>\n          @if ((template.receivers ?? []).length > 0) {\n            <div class=\"grid grid-cols-2 gap-4\">\n              <div class=\"flex flex-col gap-2\">\n                @for (receiver of template.receivers; track receiver.id) {\n                  <div\n                    class=\"flex items-center justify-between rounded-lg border border-surface bg-surface-50 p-1 transition-colors hover:bg-surface-100\"\n                  >\n                    <div class=\"flex items-center gap-3\">\n                      <mt-avatar\n                        icon=\"user.user-01\"\n                        shape=\"square\"\n                        size=\"small\"\n                      />\n                      <span class=\"font-medium\">{{ receiver.title }}</span>\n                    </div>\n                    @if (!receiver.isSystem) {\n                      <mt-button\n                        icon=\"general.trash-01\"\n                        severity=\"danger\"\n                        [text]=\"true\"\n                        [loading]=\"isReceiverDeleting(receiver.id)\"\n                        (onClick)=\"onDeleteReceiver(receiver)\"\n                      />\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          }\n\n          <!-- Actions -->\n          <div class=\"flex justify-end gap-2 pt-4\">\n            @if (!template.isSystem) {\n              <mt-button\n                [label]=\"'notification.delete' | transloco\"\n                severity=\"danger\"\n                [loading]=\"isDeletingTemplate()\"\n                [disabled]=\"isUpdatingTemplate()\"\n                (onClick)=\"onDeleteTemplate()\"\n              />\n            }\n            <mt-button\n              [label]=\"'notification.save' | transloco\"\n              [loading]=\"isUpdatingTemplate()\"\n              [disabled]=\"isDeletingTemplate() || isFormInvalid()\"\n              (onClick)=\"onSaveTemplate()\"\n            />\n          </div>\n        </div>\n      }\n    }\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [] });
+
+const APP_STATES = [NotificationState];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { APP_STATES, AddReceivers, AddTemplate, AddTemplateDialog, CHANNEL_CONFIGS, DeleteReceiver, DeleteTemplate, GetActionProperties, GetActionReceivers, GetEvents, GetProperties, GetReceivers, NotificationActionKey, NotificationFacade, NotificationState, NotificationTemplate, ResetNotificationState, SelectEvent, SelectTemplate, SetActionMode, SetModuleInfo, UpdateTemplate, getChannelConfig, getFormControlName };
+//# sourceMappingURL=masterteam-notification.mjs.map