@elite.framework/ng.core 1.0.62 → 1.0.65

package/fesm2022/elite.framework-ng.core-src-lib-components-condition-editor.mjs

@@ -0,0 +1,794 @@
+import { Chip } from 'primeng/chip';
+import * as i9 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i0 from '@angular/core';
+import { ViewChild, Component } from '@angular/core';
+import { FieldType } from '@ngx-formly/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i4 from 'primeng/autocomplete';
+import { AutoCompleteModule } from 'primeng/autocomplete';
+import * as i6 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import * as i7 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import * as i8 from 'primeng/dialog';
+import { DialogModule } from 'primeng/dialog';
+import { PopoverModule } from 'primeng/popover';
+import { firstValueFrom, finalize } from 'rxjs';
+import * as i1 from '@elite.framework/ng.core';
+import { BaseService } from '@elite.framework/ng.core';
+import * as i5 from 'primeng/api';
+
+const suggestions = [
+    {
+        label: "عدد دقائق التأخير",
+        value: "AttendanceDelayMinutes",
+        kind: "Field",
+        detail: "عدد دقائق التأخير",
+        documentation: "**AttendanceDelayMinutes**\nعدد الدقائق التي تأخر بها الموظف عن بدء الورديّة."
+    },
+    {
+        label: "دقائق الانصراف المبكر",
+        value: "EarlyLeaveMinutes",
+        kind: "Field",
+        detail: "دقائق الانصراف المبكر",
+        documentation: "**EarlyLeaveMinutes**\nعدد الدقائق التي سجل بها الموظف انسحابًا مبكرًا عن الورديّة."
+    },
+    {
+        label: "سعر الساعة",
+        value: "HourlyRate",
+        kind: "Field",
+        detail: "سعر الساعة",
+        documentation: "**HourlyRate**\nتكلفة الساعة المستخرجة من الراتب الأساسي وساعات العمل المتوقعة."
+    },
+    {
+        label: "قيمة اليوم المتوقعة",
+        value: "ScheduledDayValue",
+        kind: "Field",
+        detail: "قيمة اليوم المتوقعة",
+        documentation: "**ScheduledDayValue**\nقيمة اليوم المحسوبة بناءً على السعر بالساعة وساعات الورديّة المتوقعة."
+    },
+    {
+        label: "قيمة اليوم الفعلية",
+        value: "ActualDayValue",
+        kind: "Field",
+        detail: "قيمة اليوم الفعلية",
+        documentation: "**ActualDayValue**\nقيمة اليوم المحسوبة بناءً على السعر بالساعة وساعات العمل الفعليّة."
+    },
+    {
+        label: "عدد أيام العمل",
+        value: "WorkingDays",
+        kind: "Field",
+        detail: "عدد أيام العمل",
+        documentation: "**WorkingDays**\nعدد الأيام في دفتر الحضور."
+    },
+    {
+        label: "الراتب الأساسي",
+        value: "BasicSalary",
+        kind: "Field",
+        detail: "بند الراتب الأساسي",
+        documentation: "**BasicSalary**\n بند الراتب الأساسي."
+    },
+    // Employee fields
+    {
+        label: "رمز الموظف",
+        value: "Employee.Code",
+        kind: "Field",
+        detail: "رمز الموظف",
+        documentation: "**Employee.Code**\nالرمز الفريد المعطى للموظف في النظام."
+    },
+    {
+        label: "الاسم الكامل",
+        value: "Employee.FullName",
+        kind: "Field",
+        detail: "الاسم الكامل للموظف",
+        documentation: "**Employee.FullName**\nالاسم الأول واسم العائلة للموظف."
+    },
+    {
+        label: "نوع الموظف",
+        value: "Employee.Type",
+        kind: "Field",
+        detail: "نوع الموظف",
+        documentation: "**Employee.Type**\nنوع الموظف (دوام كامل، مؤقت، الخ)."
+    },
+    // Shift fields
+    {
+        label: "اسم الورديّة",
+        value: "Shift.Name",
+        kind: "Field",
+        detail: "اسم الورديّة",
+        documentation: "**Shift.Name**\nالاسم المعطى للورديّة (صباحية، مسائية)."
+    },
+    {
+        label: "بداية الورديّة",
+        value: "Shift.StartTime",
+        kind: "Field",
+        detail: "بداية الورديّة",
+        documentation: "**Shift.StartTime**\nوقت بدء الورديّة."
+    },
+    {
+        label: "نهاية الورديّة",
+        value: "Shift.EndTime",
+        kind: "Field",
+        detail: "نهاية الورديّة",
+        documentation: "**Shift.EndTime**\nوقت نهاية الورديّة."
+    },
+    {
+        label: "رمز نوع الورديّة",
+        value: "Shift.TypeKey",
+        kind: "Field",
+        detail: "رمز نوع الورديّة",
+        documentation: "**Shift.TypeKey**\nالمفتاح البرمجي لنوع الورديّة."
+    },
+    // AttendanceSheet fields
+    {
+        label: "من تاريخ",
+        value: "Sheet.DateFrom",
+        kind: "Field",
+        detail: "تاريخ بداية الدفتر",
+        documentation: "**Sheet.DateFrom**\nأول يوم في دفتر الحضور (اليوم الأول للشهر)."
+    },
+    {
+        label: "إلى تاريخ",
+        value: "Sheet.DateTo",
+        kind: "Field",
+        detail: "تاريخ نهاية الدفتر",
+        documentation: "**Sheet.DateTo**\nآخر يوم في دفتر الحضور (اليوم الأخير للشهر)."
+    },
+    {
+        label: "عدد أيام الحضور",
+        value: "Sheet.PresentDays",
+        kind: "Field",
+        detail: "عدد أيام الحضور",
+        documentation: "**Sheet.PresentDays**\nعدد الأيام التي سجل فيها الموظف دخول وخروج."
+    },
+    // AttendanceDay fields
+    {
+        label: "تاريخ اليوم",
+        value: "Day.Date",
+        kind: "Field",
+        detail: "تاريخ يوم الحضور",
+        documentation: "**Day.Date**\nالتاريخ الفعلي ليوم الحضور."
+    },
+    {
+        label: "تسجيل دخول",
+        value: "Day.SignIn",
+        kind: "Field",
+        detail: "وقت تسجيل دخول الموظف",
+        documentation: "**Day.SignIn**\nالطابع الزمني لتسجيل دخول الموظف."
+    },
+    {
+        label: "تسجيل خروج",
+        value: "Day.SignOut",
+        kind: "Field",
+        detail: "وقت تسجيل خروج الموظف",
+        documentation: "**Day.SignOut**\nالطابع الزمني لتسجيل خروج الموظف."
+    },
+    // LeavePolicy fields
+    {
+        label: "اسم سياسة الإجازة",
+        value: "LeavePolicy.Name",
+        kind: "Field",
+        detail: "اسم سياسة الإجازة",
+        documentation: "**LeavePolicy.Name**\nالاسم المعطى لسياسة الإجازة."
+    },
+    {
+        label: "رمز الحالة",
+        value: "LeavePolicy.StatusKey",
+        kind: "Field",
+        detail: "رمز حالة السياسة",
+        documentation: "**LeavePolicy.StatusKey**\nالمفتاح البرمجي لحالة سياسة الإجازة."
+    },
+    {
+        label: "حالة السياسة",
+        value: "LeavePolicy.Status",
+        kind: "Field",
+        detail: "حالة السياسة",
+        documentation: "**LeavePolicy.Status**\nالوصف الكامل لحالة سياسة الإجازة."
+    },
+    // Leave fields
+    {
+        label: "بداية الإجازة",
+        value: "Leave.DateStart",
+        kind: "Field",
+        detail: "بداية الإجازة",
+        documentation: "**Leave.DateStart**\nاليوم الأول للإجازة."
+    },
+    {
+        label: "نهاية الإجازة",
+        value: "Leave.DateEnd",
+        kind: "Field",
+        detail: "نهاية الإجازة",
+        documentation: "**Leave.DateEnd**\nاليوم الأخير للإجازة."
+    },
+    // SalaryTemplate fields
+    // {
+    //   label: "بنود الأرباح",
+    //   value: "template.Earnings",
+    //   kind: "Field",
+    //   detail: "قائمة بنود الأرباح",
+    //   documentation: "**SalaryTemplate.Earnings**\nقائمة العناصر التي تمثل مستحقات (أرباح) القالب."
+    // },
+    // {
+    //   label: "بنود الاستقطاعات",
+    //   value: "template.Deductions",
+    //   kind: "Field",
+    //   detail: "قائمة بنود الاستقطاعات",
+    //   documentation: "**SalaryTemplate.Deductions**\nقائمة العناصر التي تمثل استقطاعات القالب."
+    // },
+    // // SalaryTemplateItem fields
+    // {
+    //   label: "المبلغ الثابت للبند",
+    //   value: "item.Amount",
+    //   kind: "Field",
+    //   detail: "المبلغ الثابت للبند",
+    //   documentation: "**SalaryTemplateItem.Amount**\nالقيمة الثابتة المخصصة لهذا البند."
+    // },
+    // {
+    //   label: "صيغة البند",
+    //   value: "item.Formula",
+    //   kind: "Field",
+    //   detail: "الصيغة الحسابية للبند",
+    //   documentation: "**SalaryTemplateItem.Formula**\nالصيغة البرمجية لتعريف قيمة البند عند SalaryValueType = Formula."
+    // },
+    { label: '(Leave) Total Leaves Taken', value: 'GetLeaveTaken(leaveId)', detail: 'إجمالي الإجازات المأخوذة' },
+    { label: '(Leave) Total Leaves Taken Before', value: 'GetLeaveTakenBefore(leaveId)', detail: 'إجمالي الإجازات المأخوذة قبل' },
+    { label: '(Leave) Total Leaves After', value: 'GetLeaveTakenAfter(leaveId)', detail: 'إجمالي الإجازات المأخوذة بعد' },
+    { label: '(Leave) Leaves Credit Before', value: 'GetLeaveCreditBefore(leaveId)', detail: 'رصيد الإجازات قبل' },
+    { label: '(Leave) Leaves Credit After', value: 'GetLeaveCreditAfter(leaveId)', detail: 'رصيد الإجازات بعد' },
+    { label: 'عدد مرات تحقق القاعدة', value: 'GetFlagCount(ruleId)', detail: 'عدد مرات تحقق القاعدة خلال الفترة' },
+    { label: 'إجمالي قيمة القاعدة', value: 'GetFlagValue(ruleId)', detail: 'القيمة الإجمالية للقاعدة' },
+    { label: 'أكبر من', value: '>', detail: 'القيمة الأولى أكبر من الثانية' },
+    { label: 'أكبر من أو يساوي', value: '>=', detail: 'القيمة الأولى أكبر من أو تساوي الثانية' },
+    { label: 'أصغر من', value: '<', detail: 'القيمة الأولى أصغر من الثانية' },
+    { label: 'أصغر من أو يساوي', value: '<=', detail: 'القيمة الأولى أصغر من أو تساوي الثانية' },
+    { label: 'يساوي', value: '==', detail: 'القيمتان متساويتان' },
+    { label: 'لا يساوي', value: '!=', detail: 'القيمتان غير متساويتان' },
+    { label: 'و (AND)', value: '&&', detail: 'تتحقق إذا كان الشرطان صحيحين' },
+    { label: 'أو (OR)', value: '||', detail: 'تتحقق إذا كان أحد الشرطين صحيحاً' },
+    { label: 'صحيح', value: 'true', detail: 'القيمة صحيحة' },
+    { label: 'خطأ', value: 'false', detail: 'القيمة خاطئة' }
+];
+
+class ConditionExpressionBuilderType extends FieldType {
+    svc;
+    cdr;
+    //  @ViewChild('paramOverlay') paramOverlay!: OverlayPanel;
+    autoComp;
+    op;
+    tokens = [];
+    selectedSuggestion;
+    customValue = '';
+    filteredSuggestions = [];
+    // Dialog state
+    displayDialog = false;
+    dialogSelectedRule = null;
+    pendingSuggestion = null;
+    filteredRuleSuggestions = [];
+    suggestions = suggestions;
+    loading = false;
+    api;
+    dialogMode = '';
+    displayMode = 'full';
+    editDialogTitle = 'Edit Expression';
+    displayEditDialog = false;
+    /**
+     *
+     */
+    valueChangeSubscription;
+    constructor(svc, cdr) {
+        super();
+        this.svc = svc;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.api = this.svc;
+        const to = this.props;
+        this.api.apiName = to['serviceName'];
+        this.displayMode = to['displayMode'] ?? 'full';
+        this.initTokens();
+        this.valueChangeSubscription = this.formControl.valueChanges
+            .subscribe(() => {
+            this.initTokens();
+        });
+    }
+    ngOnDestroy() {
+        if (this.valueChangeSubscription) {
+            this.valueChangeSubscription.unsubscribe();
+        }
+    }
+    initTokens() {
+        const existing = this.formControl.value || '';
+        if (existing) {
+            const tokens = existing.split(' ').filter((x) => x);
+            Promise.all(tokens.map(async (v) => ({
+                value: v,
+                label: await this.getLabelForValue(v)
+            }))).then(resolvedTokens => {
+                this.tokens = resolvedTokens;
+                this.cdr.detectChanges(); // <-- Trigger UI update
+            });
+        }
+        else {
+            this.tokens = [];
+        }
+    }
+    openDialogForTableMode() {
+        // You can reuse your dialog logic here
+        this.displayDialog = true;
+        this.dialogMode = 'rule'; // or 'leave', depending on your case
+    }
+    parseParameterizedToken(value) {
+        const match = value.match(/^(\w+)\(([^)]+)\)$/);
+        if (match) {
+            return { base: match[1], param: match[2] };
+        }
+        return null;
+    }
+    //   getLabelForValue(value: string): string {
+    //   const paramToken = this.parseParameterizedToken(value);
+    //   if (paramToken) {
+    //     // Find a matching suggestion by replacing any parameter placeholder
+    //     const baseSuggestion = this.suggestions.find(
+    //       s =>
+    //         s.value === `${paramToken.base}(ruleId)` ||
+    //         s.value === `${paramToken.base}(leaveId)` ||
+    //         s.value === paramToken.base
+    //     );
+    //     if (baseSuggestion) {
+    //       // Remove any placeholder text from the label
+    //       const baseLabel = baseSuggestion.label
+    //         .replace(/\(ruleId\)/g, '')
+    //         .replace(/\(leaveId\)/g, '')
+    //         .trim();
+    //       return `${baseLabel} (${paramToken.param})`;
+    //     }
+    //   }
+    //   // Exact match without parameters
+    //   const exact = this.suggestions.find(s => s.value === value);
+    //   if (exact) return exact.label;
+    //   return value;
+    // }
+    async getLabelForValue(value) {
+        const paramToken = this.parseParameterizedToken(value);
+        if (paramToken) {
+            let paramLabel = paramToken.param;
+            // Find matching base suggestion early (optional)
+            const baseSuggestion = this.suggestions.find(s => s.value === `${paramToken.base}(ruleId)` ||
+                s.value === `${paramToken.base}(leaveId)` ||
+                s.value === paramToken.base);
+            if (value.includes('(ruleId)') || paramToken.base.toLowerCase().includes('flag')) {
+                this.api.apiName = this.props['ruleServiceName'];
+                try {
+                    const res = await firstValueFrom(this.api.get(paramToken.param).pipe());
+                    // Assuming API returns { items: [...] } or array directly
+                    // const matchedRule = (res.items ?? res ?? []).find((r: any) => r.id == Number(paramToken.param));
+                    const matchedRule = res;
+                    if (matchedRule)
+                        paramLabel = matchedRule.label || matchedRule.name || paramLabel;
+                }
+                catch {
+                    // ignore errors, fallback to param value
+                }
+            }
+            if (value.includes('(leaveId)') || paramToken.base.toLowerCase().includes('leave')) {
+                this.api.apiName = this.props['leaveServiceName'];
+                try {
+                    const res = await firstValueFrom(this.api.getList(paramToken.param).pipe());
+                    const matchedLeave = res;
+                    if (matchedLeave)
+                        paramLabel = matchedLeave.label || matchedLeave.name || paramLabel;
+                }
+                catch {
+                    // ignore errors
+                }
+            }
+            if (baseSuggestion) {
+                const baseLabel = baseSuggestion.label
+                    .replace(/\(ruleId\)/g, '')
+                    .replace(/\(leaveId\)/g, '')
+                    .trim();
+                return `${baseLabel} (${paramLabel})`;
+            }
+        }
+        // fallback exact match in suggestions
+        const exact = this.suggestions.find(s => s.value === value);
+        if (exact)
+            return exact.label;
+        return value;
+    }
+    filterSuggestions(event) {
+        const query = event.query.toLowerCase();
+        this.filteredSuggestions = this.suggestions.filter(s => {
+            const paramToken = this.parseParameterizedToken(s.value);
+            const baseValue = paramToken ? paramToken.base : s.value;
+            return (s.label.toLowerCase().includes(query) ||
+                baseValue.toLowerCase().includes(query) ||
+                s.value.toLowerCase().includes(query));
+        });
+    }
+    search(event) {
+        this.api.apiName = this.dialogMode === 'rule'
+            ? this.props['ruleServiceName'] // existing rules service
+            : this.props['leaveServiceName']; // new leave service
+        const q = event.query?.toString().toLowerCase() || '';
+        const lf = this.props['labelField'] || 'name';
+        const fixedFilters = this.props['fixedFilters'] || {};
+        this.loading = true;
+        this.filteredRuleSuggestions = [];
+        const searchParams = {
+            [lf]: q,
+            ...fixedFilters,
+        };
+        this.api.getList(searchParams)
+            .pipe(finalize(() => (this.loading = false)))
+            .subscribe({
+            next: (res) => {
+                this.filteredRuleSuggestions = res.items ?? res ?? [];
+                setTimeout(() => this.autoComp?.show(), 0);
+            },
+            error: () => {
+                this.filteredRuleSuggestions = [];
+            },
+        });
+    }
+    onSuggestionRule(event) {
+        const suggestion = event.value;
+        if (!suggestion)
+            return;
+        this.dialogSelectedRule = suggestion;
+    }
+    async onSuggestionSelected(event) {
+        const suggestion = event.value;
+        if (!suggestion)
+            return;
+        if (suggestion.value.includes('(ruleId)') || suggestion.value.includes('(leaveId)')) {
+            this.pendingSuggestion = suggestion;
+            this.dialogSelectedRule = null;
+            this.displayDialog = true;
+            // Detect mode: rule or leave
+            this.dialogMode = suggestion.value.includes('(ruleId)') ? 'rule' : 'leave';
+        }
+        else {
+            this.tokens.push({
+                value: suggestion.value,
+                label: await this.getLabelForValue(suggestion.value)
+            });
+            this.updateExpression();
+        }
+        this.selectedSuggestion = '';
+    }
+    async confirmDialog() {
+        if (!this.pendingSuggestion || !this.dialogSelectedRule)
+            return;
+        const paramValue = this.dialogSelectedRule.id
+            || this.dialogSelectedRule.value
+            || this.dialogSelectedRule.label;
+        const placeholder = this.dialogMode === 'rule' ? '(ruleId)' : '(leaveId)';
+        const newValue = this.pendingSuggestion.value.replace(placeholder, `(${paramValue})`);
+        this.tokens.push({
+            value: newValue,
+            label: await this.getLabelForValue(newValue)
+        });
+        this.updateExpression();
+        this.closeDialog();
+    }
+    cancelDialog() {
+        this.closeDialog();
+    }
+    closeDialog() {
+        this.displayDialog = false;
+        this.dialogSelectedRule = null;
+        this.pendingSuggestion = null;
+    }
+    async addCustomToken() {
+        if (!this.customValue.trim())
+            return;
+        const val = this.customValue.trim();
+        this.tokens.push({
+            value: val,
+            label: await this.getLabelForValue(val)
+        });
+        this.updateExpression();
+        this.customValue = '';
+    }
+    removeToken(index) {
+        this.tokens.splice(index, 1);
+        this.updateExpression();
+    }
+    updateExpression() {
+        const expression = this.tokens.map(t => t.value).join(' ');
+        this.formControl.setValue(expression);
+        if (this.to['expressionChange']) {
+            this.to['expressionChange'].emit(expression);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ConditionExpressionBuilderType, deps: [{ token: i1.BaseService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ConditionExpressionBuilderType, isStandalone: true, selector: "condition-expression-builder", providers: [BaseService], viewQueries: [{ propertyName: "autoComp", first: true, predicate: ["autoComp"], descendants: true }, { propertyName: "op", first: true, predicate: ["op"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    <div class="flex flex-col gap-3">
+
+   <!-- TABLE MODE -->
+    @if (displayMode === 'table') {
+<div class="flex  gap-2">
+      <div class="flex flex-wrap flex-1 gap-1">
+        <div class="border rounded-md p-2 bg-gray-50 flex flex-wrap gap-2 min-h-[40px] items-center">
+
+
+       @for (token of tokens; track $index) {
+  <span class="px-2 py-1 rounded bg-blue-100 text-blue-800 flex items-center gap-1">
+    {{ token.label | translate }}
+  </span>
+}
+</div>
+      </div>
+      <button type="button" pButton icon="pi pi-pencil" label=""
+              class="p-button-sm"
+              (click)="displayEditDialog = true"></button>
+    </div>
+
+    <!-- Dialog with full editor inside -->
+    <p-dialog [(visible)]="displayEditDialog" [modal]="false" [style]="{width: '700px'}">
+
+      <ng-template pTemplate="header">
+        {{ editDialogTitle | translate }}
+      </ng-template>
+
+<div class="p-4 space-y-4">
+       <ng-container *ngTemplateOutlet="fullEditorTpl"></ng-container>
+</div>
+
+    </p-dialog>
+    }
+    @else{
+      <ng-container *ngTemplateOutlet="fullEditorTpl"></ng-container>
+    }
+
+
+  <!-- FULL MODE -->
+  <ng-template #fullEditorTpl>
+    <!-- Your existing full UI layout here -->
+    <div class="flex flex-col gap-3">
+
+      <!-- Expression preview -->
+      <div class="border rounded-md p-2 bg-gray-50 flex flex-wrap gap-2 min-h-[40px] items-center">
+                     @for (token of tokens; track $index) {
+  <span class="px-2 py-1 rounded bg-blue-100 text-blue-800 flex items-center gap-1">
+    {{ token.label | translate }}
+    <button type="button" pButton icon="pi pi-times"
+      class="p-button-rounded p-button-text p-button-sm"
+      (click)="removeToken($index)">
+    </button>
+  </span>
+}
+      </div>
+
+      <!-- Autocomplete for suggestions -->
+      <p-autoComplete
+        [(ngModel)]="selectedSuggestion"
+        field="label"
+        [suggestions]="filteredSuggestions"
+        (completeMethod)="filterSuggestions($event)"
+        (onSelect)="onSuggestionSelected($event)"
+        placeholder="اكتب للبحث عن الحقول أو العمليات أو الدوال..."
+        [forceSelection]="false"
+        [dropdown]="true"
+        dropdownMode="current"
+        appendTo="body"
+        class="w-full"
+      >
+        <ng-template let-suggestion pTemplate="item">
+          <div>
+            <strong>{{ suggestion.label | translate}}</strong>
+            <small class="block text-gray-500">{{ suggestion.detail| translate }}</small>
+          </div>
+        </ng-template>
+      </p-autoComplete>
+
+      <!-- Add custom value -->
+      <div class="flex gap-2">
+        <input pInputText type="text" [(ngModel)]="customValue" placeholder="أدخل قيمة ثابتة..." class="flex-1">
+        <button pButton label="إضافة" icon="pi pi-plus" (click)="addCustomToken()" class="p-button-sm" type="button"></button>
+      </div>
+
+      <!-- Parameter input dialog -->
+      <p-dialog [(visible)]="displayDialog" [modal]="false" [closable]="false" [style]="{width: '400px'}">
+        <ng-template pTemplate="header">
+          {{ (dialogMode === 'rule' ? 'اختر القاعدة' : 'اختر الإجازة') | translate }}
+        </ng-template>
+
+        <div class="p-4 space-y-4">
+          <p-autoComplete
+            #autoComp
+            [(ngModel)]="dialogSelectedRule"
+            field="name"
+            optionLabel="name"
+            [suggestions]="filteredRuleSuggestions"
+            (completeMethod)="search($event)"
+            (onSelect)="onSuggestionRule($event)"
+            placeholder="{{ dialogMode === 'rule' ? 'ابحث عن قاعدة' : 'ابحث عن إجازة' }}"
+            [forceSelection]="true"
+            [dropdown]="true"
+            dropdownMode="current"
+            appendTo="body"
+            class="w-full rounded-none"
+          >
+            <ng-template let-suggestion pTemplate="item">
+              <div>
+                <strong>{{ suggestion.name | translate}}</strong>
+                <small class="block text-gray-500">{{ suggestion.description | translate}}</small>
+              </div>
+            </ng-template>
+          </p-autoComplete>
+        </div>
+
+        <p-footer class="flex justify-end gap-2">
+          <button type="button" pButton label="إلغاء" icon="pi pi-times" class="p-button-text" severity="danger" (click)="cancelDialog()"></button>
+          <button type="button" pButton label="موافق" icon="pi pi-check" (click)="confirmDialog()" [disabled]="!dialogSelectedRule"></button>
+        </p-footer>
+      </p-dialog>
+    </div>
+  </ng-template>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i4.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i5.Footer, selector: "p-footer" }, { kind: "directive", type: i5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i7.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i8.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ConditionExpressionBuilderType, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'condition-expression-builder',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        AutoCompleteModule,
+                        Chip,
+                        ButtonModule,
+                        InputTextModule,
+                        DialogModule,
+                        PopoverModule,
+                        TranslateModule
+                    ],
+                    providers: [BaseService],
+                    template: `
+    <div class="flex flex-col gap-3">
+
+   <!-- TABLE MODE -->
+    @if (displayMode === 'table') {
+<div class="flex  gap-2">
+      <div class="flex flex-wrap flex-1 gap-1">
+        <div class="border rounded-md p-2 bg-gray-50 flex flex-wrap gap-2 min-h-[40px] items-center">
+
+
+       @for (token of tokens; track $index) {
+  <span class="px-2 py-1 rounded bg-blue-100 text-blue-800 flex items-center gap-1">
+    {{ token.label | translate }}
+  </span>
+}
+</div>
+      </div>
+      <button type="button" pButton icon="pi pi-pencil" label=""
+              class="p-button-sm"
+              (click)="displayEditDialog = true"></button>
+    </div>
+
+    <!-- Dialog with full editor inside -->
+    <p-dialog [(visible)]="displayEditDialog" [modal]="false" [style]="{width: '700px'}">
+
+      <ng-template pTemplate="header">
+        {{ editDialogTitle | translate }}
+      </ng-template>
+
+<div class="p-4 space-y-4">
+       <ng-container *ngTemplateOutlet="fullEditorTpl"></ng-container>
+</div>
+
+    </p-dialog>
+    }
+    @else{
+      <ng-container *ngTemplateOutlet="fullEditorTpl"></ng-container>
+    }
+
+
+  <!-- FULL MODE -->
+  <ng-template #fullEditorTpl>
+    <!-- Your existing full UI layout here -->
+    <div class="flex flex-col gap-3">
+
+      <!-- Expression preview -->
+      <div class="border rounded-md p-2 bg-gray-50 flex flex-wrap gap-2 min-h-[40px] items-center">
+                     @for (token of tokens; track $index) {
+  <span class="px-2 py-1 rounded bg-blue-100 text-blue-800 flex items-center gap-1">
+    {{ token.label | translate }}
+    <button type="button" pButton icon="pi pi-times"
+      class="p-button-rounded p-button-text p-button-sm"
+      (click)="removeToken($index)">
+    </button>
+  </span>
+}
+      </div>
+
+      <!-- Autocomplete for suggestions -->
+      <p-autoComplete
+        [(ngModel)]="selectedSuggestion"
+        field="label"
+        [suggestions]="filteredSuggestions"
+        (completeMethod)="filterSuggestions($event)"
+        (onSelect)="onSuggestionSelected($event)"
+        placeholder="اكتب للبحث عن الحقول أو العمليات أو الدوال..."
+        [forceSelection]="false"
+        [dropdown]="true"
+        dropdownMode="current"
+        appendTo="body"
+        class="w-full"
+      >
+        <ng-template let-suggestion pTemplate="item">
+          <div>
+            <strong>{{ suggestion.label | translate}}</strong>
+            <small class="block text-gray-500">{{ suggestion.detail| translate }}</small>
+          </div>
+        </ng-template>
+      </p-autoComplete>
+
+      <!-- Add custom value -->
+      <div class="flex gap-2">
+        <input pInputText type="text" [(ngModel)]="customValue" placeholder="أدخل قيمة ثابتة..." class="flex-1">
+        <button pButton label="إضافة" icon="pi pi-plus" (click)="addCustomToken()" class="p-button-sm" type="button"></button>
+      </div>
+
+      <!-- Parameter input dialog -->
+      <p-dialog [(visible)]="displayDialog" [modal]="false" [closable]="false" [style]="{width: '400px'}">
+        <ng-template pTemplate="header">
+          {{ (dialogMode === 'rule' ? 'اختر القاعدة' : 'اختر الإجازة') | translate }}
+        </ng-template>
+
+        <div class="p-4 space-y-4">
+          <p-autoComplete
+            #autoComp
+            [(ngModel)]="dialogSelectedRule"
+            field="name"
+            optionLabel="name"
+            [suggestions]="filteredRuleSuggestions"
+            (completeMethod)="search($event)"
+            (onSelect)="onSuggestionRule($event)"
+            placeholder="{{ dialogMode === 'rule' ? 'ابحث عن قاعدة' : 'ابحث عن إجازة' }}"
+            [forceSelection]="true"
+            [dropdown]="true"
+            dropdownMode="current"
+            appendTo="body"
+            class="w-full rounded-none"
+          >
+            <ng-template let-suggestion pTemplate="item">
+              <div>
+                <strong>{{ suggestion.name | translate}}</strong>
+                <small class="block text-gray-500">{{ suggestion.description | translate}}</small>
+              </div>
+            </ng-template>
+          </p-autoComplete>
+        </div>
+
+        <p-footer class="flex justify-end gap-2">
+          <button type="button" pButton label="إلغاء" icon="pi pi-times" class="p-button-text" severity="danger" (click)="cancelDialog()"></button>
+          <button type="button" pButton label="موافق" icon="pi pi-check" (click)="confirmDialog()" [disabled]="!dialogSelectedRule"></button>
+        </p-footer>
+      </p-dialog>
+    </div>
+  </ng-template>
+    </div>
+  `
+                }]
+        }], ctorParameters: () => [{ type: i1.BaseService }, { type: i0.ChangeDetectorRef }], propDecorators: { autoComp: [{
+                type: ViewChild,
+                args: ['autoComp']
+            }], op: [{
+                type: ViewChild,
+                args: ['op']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ConditionExpressionBuilderType, suggestions };
+//# sourceMappingURL=elite.framework-ng.core-src-lib-components-condition-editor.mjs.map